favicon thoughts

[ParityError]

Hey @Gerschel and @Nacurutu,

I've been away the past month or so and recently noticed all the progress to extension; great work! I've finally gotten around to looking at the changes to the gradio compact .css and more or less sorted it out the way I want, although I need to clean things up a bit before posting any revisions.

One looming question I have is about the favicon support. I'm guessing that the "apply favicon" in the extension only takes effect if the webui.py is edited? I have a simple way of changing the favicon without having to edit any files, so it might possibly be of use.

If I load up the automatic1111 webui as normal, then open the js console I paste the two lines of code below and the default gradio is instantly swapped out with my custom animated automatic1111.svg as a favicon:

favicon injection:

const qcss_favicon = document.querySelector('link[rel=icon]'); 
qcss_favicon.href = 'https://gist.githubusercontent.com/ParityError/7b3d54fd686f18f7c9c2341ae321ae8e/raw/2df50ebd1f072cbe914c3428cf405d344c8b9ef0/automatic1111.svg'; 

I would imagine it might be possible to implement something similar to the extension once the automatic1111 interface is loaded if the user selects a custom favicon instead of the default?

[Gerschel]

I made a change where it uses a "static" folder created in the root directory.
The link you are querying is probably the one I'm injecting.

Typically you can point to a local file, but I believe extra cors security blocks it. But css can see it, so it loads it into the files the browser can read. But it doesn't load, unless the image is set during load, so I create a hidden image. Create the link document element, parse the url (local file) of the image and set it to the vaicon.
I also kept it hot swappable, so if you change the image, it updates the favicon.

https://github.com/Gerschel/sd-web-ui-quickcss/blob/master/javascript/favicon.js

[ParityError]

I had seen that bit of code before posting my initial comment and either I'm not doing something correctly or it didn't work to swap the favicons for me on FireFox for whatever reason. I didn't really think about the local file issue with js and cors security and the css method - It makes sense. I'll try working with that to see what it does. In the meantime I simply added the code above to your favicon.js on my installation and it works as a temporary hack :).

[Gerschel]

I had migrated the file reads into a static folder in root of app.

    --logo: url('file=static/logo.png');
    --favicon: url('file=static/favicon.svg');

Perhaps that's the difference

[ParityError]

Does the webui.py still require editing to include the favicon if that is included within a .css file? That's maybe where I'm confused on how to get it to show up with when applying it with quick-css.

Another thing that might be useful somehow is in-lining an .svg to a favicon; It could be cool for making on the fly color changes to the logo itself. I did in-line an .svg in favicon.js to see how it would work.

class FaviconHandler {
    static setFavicon() {
        const link = document.createElement('link');
        link.rel = 'icon';
        link.type = 'image/svg+xml';
        link.href = getComputedStyle(gradioApp().querySelector('.icon-container')).backgroundImage.replace(/^url\("|"\)$/g, '');
        document.getElementsByTagName('head')[0].appendChild(link);
        const qcss_favicon = document.querySelector('link[rel=icon]'); 
		qcss_favicon.href = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: @ParityError --%3E%3Csvg version='1.1' id='automatic1111' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1024 1024' style='enable-background:new 0 0 1024 1024%3B' xml:space='preserve'%3E%3Cg id='auto-loader'%3E%3ClinearGradient id='st0' gradientUnits='userSpaceOnUse' x1='532.575' y1='791.8751' x2='1084.825' y2='239.625' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F%3Bstop-opacity:0.4'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1%3Bstop-opacity:0.4'/%3E%3C/linearGradient%3E%3Cpath id='st0' style='fill:url(%23st0)%3B' d='M669.3 150.4l333.8 715.7L948 866L614.3 150.4H669.3z'/%3E%3ClinearGradient id='st1' gradientUnits='userSpaceOnUse' x1='471.225' y1='791.925' x2='1023.525' y2='239.625' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F%3Bstop-opacity:0.6'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1%3Bstop-opacity:0.6'/%3E%3C/linearGradient%3E%3Cpath id='st1' style='fill:url(%23st1)%3B' d='M608 150.4l333.8 715.7l-55.1-0.1L552.9 150.4H608z'/%3E%3ClinearGradient id='st2' gradientUnits='userSpaceOnUse' x1='409.3' y1='791.5' x2='961.55' y2='239.25' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F%3Bstop-opacity:0.8'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1%3Bstop-opacity:0.8'/%3E%3C/linearGradient%3E%3Cpath id='st2' style='fill:url(%23st2)%3B' d='M546.4 150.4l333.8 715.7l-56.6-0.1L491.4 150.4H546.4z'/%3E%3ClinearGradient id='st3' gradientUnits='userSpaceOnUse' x1='315.15' y1='822.95' x2='898.7' y2='239.4' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1'/%3E%3C/linearGradient%3E%3Cpath id='st3' style='fill:url(%23st3)%3B' d='M365.8 150.4h119.1l332.3 715.7l-57.5-0.1L454.2 212.2h-59.4L365.8 150.4z'/%3E%3ClinearGradient id='st4' gradientUnits='userSpaceOnUse' x1='94.75' y1='610.05' x2='618.9' y2='85.9001' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1'/%3E%3C/linearGradient%3E%3Cpath id='st4' style='fill:url(%23st4)%3B' d='M19.8 866.1l338.5-715.7l333.9 714.4H456.7l-97.7-206l-95.6 207.3H19.8z'/%3E%3C/g%3E%3C/svg%3E"
	}
    static observeGradioApp() {
        const observer = new MutationObserver(() => {
            const iconContainer = gradioApp().querySelector('.icon-container');
            if (iconContainer) {
                observer.disconnect();
                FaviconHandler.setFavicon();
            }
        });
        observer.observe(gradioApp(), { childList: true, subtree: true });
    }
}
document.addEventListener("DOMContentLoaded", () => {
    FaviconHandler.observeGradioApp();
});

[ParityError]

animated version, (with css embedded in the svg)

[Gerschel]

The favicon handler was a workaround so others don't have to edit webui.py anymore, and it allows hot swapping (changing without reload), then also saves the choosen one (overwriting previous if any or default) in static folder, so it's available on subsequent loads.

"Applying" favicon does the injection for the hot swap, and file write. The css file used will need:
In the variables location

--favicon: url('file=static/favicon.svg');

And will also need targeting the container that is the workaround.

.icon-container {
  background-image: var(--favicon);
}

To see the change without reloading the ui, you will need to do a hard refresh of the page (ctrl+f5). The browser caches the favicon, so it needs to drop the version in cache to be able to pick up the new one.

This isn't the cleanest method, I swore I had a clear page cache as part of the button. I'm not sure what happened to it.

[Gerschel]

So when you did an inline, did it take immediate affect? I'm wondering this, because you may have come up with the other portion of the workaround.

[ParityError]

Yes, as soon as the qcss_favicon.href is hit the favicon changes, without having to reload anything. You can try the two lines below on any website/page by opening the browser js console and pasting them in and the favicon should immediately be changed to whatever you inline.

const qcss_favicon = document.querySelector('link[rel=icon]'); 
qcss_favicon.href = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!-- Generator: @ParityError --%3E%3Csvg version='1.1' id='automatic1111' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 1024 1024' style='enable-background:new 0 0 1024 1024%3B' xml:space='preserve'%3E%3Cg id='auto-loader'%3E%3ClinearGradient id='st0' gradientUnits='userSpaceOnUse' x1='532.575' y1='791.8751' x2='1084.825' y2='239.625' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F%3Bstop-opacity:0.4'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1%3Bstop-opacity:0.4'/%3E%3C/linearGradient%3E%3Cpath id='st0' style='fill:url(%23st0)%3B' d='M669.3 150.4l333.8 715.7L948 866L614.3 150.4H669.3z'/%3E%3ClinearGradient id='st1' gradientUnits='userSpaceOnUse' x1='471.225' y1='791.925' x2='1023.525' y2='239.625' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F%3Bstop-opacity:0.6'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1%3Bstop-opacity:0.6'/%3E%3C/linearGradient%3E%3Cpath id='st1' style='fill:url(%23st1)%3B' d='M608 150.4l333.8 715.7l-55.1-0.1L552.9 150.4H608z'/%3E%3ClinearGradient id='st2' gradientUnits='userSpaceOnUse' x1='409.3' y1='791.5' x2='961.55' y2='239.25' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F%3Bstop-opacity:0.8'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1%3Bstop-opacity:0.8'/%3E%3C/linearGradient%3E%3Cpath id='st2' style='fill:url(%23st2)%3B' d='M546.4 150.4l333.8 715.7l-56.6-0.1L491.4 150.4H546.4z'/%3E%3ClinearGradient id='st3' gradientUnits='userSpaceOnUse' x1='315.15' y1='822.95' x2='898.7' y2='239.4' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1'/%3E%3C/linearGradient%3E%3Cpath id='st3' style='fill:url(%23st3)%3B' d='M365.8 150.4h119.1l332.3 715.7l-57.5-0.1L454.2 212.2h-59.4L365.8 150.4z'/%3E%3ClinearGradient id='st4' gradientUnits='userSpaceOnUse' x1='94.75' y1='610.05' x2='618.9' y2='85.9001' gradientTransform='matrix(1 0 0 -1 0 1024)'%3E%3Cstop offset='0' style='stop-color:%23FF002F'/%3E%3Cstop offset='0.9974' style='stop-color:%237E00B1'/%3E%3C/linearGradient%3E%3Cpath id='st4' style='fill:url(%23st4)%3B' d='M19.8 866.1l338.5-715.7l333.9 714.4H456.7l-97.7-206l-95.6 207.3H19.8z'/%3E%3C/g%3E%3C/svg%3E"

It's pretty much the opposite effect of what is happening now; so refreshing the page will set it back to the normal icon. It also worked well (even after refreshing) as a temporary solution in your favicon.js before I understood the process of your method. Having the ability to inline css in an svg opens a lot of possibilities imho for something like your extension. :)

Thank you for the information above, the tips helped me figure things out. I didn't realize the logo and favicon needed to be referenced from the static directory. One thing I was curious about is if it's possible to use an svg as the logo image. Whenever I tried to change the logo to an svg it was blank; it works fine forfavicon's though.

[ParityError]

I've updated both my retrowave and blueprint css theme's.

Preview:

css:

blueprint.css

---

retrowave

Preview:

css:

retrowave.css

---

Assets:

favicon (static/favicon.svg):
*you might want to use this one from now on as I've cleaned it up significantly

favicon

logo (static/logo.png):
*one color semi-transparent version specifically to use for the background, etc.

If you want to include these assets in your next update/release that would be fine :)