yeargun

yeah I saw it, thats a crazy trick

Yeah yeah, tbh even though I branded it like that in the website, packing strategy & overall, its pretty much an apparent technology/library. I realy wanted some such technology 2 years ago, while genai text layouts were lame ash, and I questioned why noone does something like this (diffusion does not play well, or we havent figure it out yet, who knows? https://blog.google/innovation-and-ai/technology/developers-... )

And overall one of the exciting part for me is, to be able to have composable & editable images, hopefuly generated by future genAI models.

And finally, I just realy wanted to rant over what a 'digital image' is

GGs on the library

.hmml might be more hassle free then zip options for web apps. With zips, I think it will require more js bundle & processing to work.

meanwhile with .hmml, its already gzip/br compressed in cdns, and decoded natively by the browser

yeah but you know.. it needs to be either base64 or a link

thats why .hmml is a packing strategy to mitigate that, single pack

hey, yes.

1- html/css has more layout capabilities. 2- js 3- its a packing strategy. If you plan to serve images + svgs altogether, either you need to base64 encode or pack like hmml, binary

Slop :D

can you revisit please? What browser are you using ?

The library is not curing cancer And also it's the first time im hearing that its not working.

My goal was to discuss the meaning of what a 'digital image' is.. You can also take a look at this https://www.reddit.com/r/Design/s/7KLKg3wS0D

yeszaaddy

people are crazy for sure

https://youtu.be/O_nE4O5JRBQ

yes but not every image/visual is efficiently representable with svgs. sometimes we need rasters

A: I want to serve html with images all in single pack

You have 2 options.

- Embed images into html (base64, size overhead)

- embed html/css/js into media binaries

.hmml is the packing strategy for option two. 2kb js for encode/decode. And extra rantings around what a 'digital image' is

Same HTML specification does not support .hmml

Until they support .hmml imma close my image tags. But thanks for highlighting

(its a joke)

sorry for this, im updating

in the meantime you can take a look at this

https://www.reddit.com/r/Design/s/hv0hyBow9I

Same zip also helps serving .hmml from cdns smaller (gzip/brotli)

Even then base64 is worse in size though

Also I wouldn't prefer serving a zip and load and render it within my web app (extra overheads).

If you plan to serve your image with a self contained, single pack.

Then with html + rasterized images (.jpeg/.png, ..) you would have to pay extra size overhead caused by base64.

With hmml, you dont

Yeah I agree

in fact this is both a packing strategy or a POV of thinking. Next browser versions could support it.

<img src="html-underdog.hmml" />

or

when tomorrow's genai models mix declarative images with rasters, then they would like something like this

or

OS -> html-underdog.html double clicks -> browser opens it.

thats a great observation. In fact, I also tried how efficient wall painting is :D

https://x.com/yeargun24/status/1825516494861508943?s=20

And, yes. HTML & CSS rendering without js is doable with like max 400mb of ram? Idk. Sometimes the tradeoff worths, sometimes not

yes exactly.

you can go devtools at https://hmml.eddocu.com

it downloads single binary that contains media assets (svg, image, video, ..) and html/css blueprint, even js (security concerns!)

Nope

PDF is an irreversible format in terms of editability. (btw I build the world's most performant pdf/pptx editor at https://eddocu.com , I would enjoy if you have any feedback)

Regardless, I cant find the relation in between.

It's like an abstraction that might help future genai models, or a packing strategy, or ..

Completely agree with that. But look whats the situation with MHTML.

""" Open Bug 40873 Opened 26 years ago Updated 27 days ago """

So if you need some such feature in your web app, and if you are okay with 2kb encode/decode js. Its all good.

At least the posts are pretty much not AI slop I guess.. But I'll take your feedback. Thanks!

In fact it has lots of use cases,

1- For design tools, they can combine multipe images, texts, svgs and serve them with single pack/abstraction

2- When you need editable/composable images.

3- Future genai models for generating visuals/html/js/svg would have more feature rich abstraction/toolset

4- When you want to prevent base64 size overhead

## What's an image

We consider rasters as image (.jpeg, .webp, ..)

We also invented svgs, its a vector. SVG is a declarative language, has its own format and has own renderer

HTML, CSS is no different. `<div style="background:black">html is underdog</div>`

Having this perspective on our mind, even considering any imperative code as a native image makes complete sense. `canvas.drawCircle();`

So, .html/.hmml/.js is as image as .webp

====

## How can we/future's genAI models could leverage the world's most popular and feature rich image format (HTML, CSS, JS, SVG, IMAGE altogether). And how can we leverage it to build editable/composable images?

This so to 'popular' image format we call .html has a caveat. It's UTF-8, and whenever you need to embed any resource, you either need to base64 encode it(it has extra size overhead) or link the resource as a seperate thing. So.. as you decide to serve single pack of data for a single image, a binary packing strategy makes sense.(Image can be anything as we discussed earlier)

To match these concerns, we created/proposing you a new format, HMML (HyperMedia Markup Language).

HMML (HyperMedia Markup Language) is a declarative+imperative markup+ language for images/videos/media.. *HMML is HTML, CSS, JS, SVG, image, but not UTF-8.*

https://hmml.eddocu.com

and we have a npm library that does encode/decode of this binary format, and mounts the so to image into dom. (2kb js for encode/decode each. For comparison React is 90kb js. )

`npm i @eddocu/hmml`

# image-leftdog-rightcat.html

``` <div style="display:flex"> <img src="base64" alt="i am dog image" /> <img src="base64" alt="i am cat image" /> </div> ```

Apart from doing this, hmml does embed the html, css, js blueprint into media binaries

# image-leftdog-rightcat.hmml

`binary stuff`

People already do similar things. But this format or POV of thinking accepts html/css/js as a native image format. Excited to see if future operating systems/browsers also accepts this format. <hmml /> or <img src="maybe.hmml" />

===

``` <Technical-Appendix> The word "green apple" is an image, that has no format and no renderer.

`const vectorMultiDimensional_768 = get_word_embeddings("green apple")` Now the word green apple has a format, its: "embedded by Embedding Model X" If you had a renderer as such Embedding_Model_X.render()

Now you could call entire english sentences/paragraphs are images. </Technical-Appendix> ```

bs or not. what you think?

GJ one your library

One random recommendation I could give based on my experimentations on both firefox and chromium

you can attach symbol based custom properties to each such dom node 'class'

and apart from using .matches(), symbol attribute check. this outperforms class based equality checks by a small margin.

very marginal but hey, you are clearly tryharding.

thanks, I can not make it public since it accesses AI endpoints and stuff. you can use the credentials though. username:ppl password:12345