[request] background image

[IkariDevGIT]

[request] background image

[Gerschel]

@Nacurutu
Which way do you think we should handle something like this?
We have two options, we can either create a variable in css sheets, and a autogenerated component like the sliders and colorpickers.
Or we can create a script that will inject a background using js.

The first will store the information as text in sheet, the second would need a config file to store the information, which we might need anyways to trigger special effects on load up.

[IkariDevGIT]

bruh, no clue. never used css or javascript, just wanted to give a request

[Gerschel]

@IkariDevGIT That was for the guy I was pinging.

[IkariDevGIT]

oh bruh

[ParityError]

@Nacurutu Which way do you think we should handle something like this? We have two options, we can either create a variable in css sheets, and a autogenerated component like the sliders and colorpickers. Or we can create a script that will inject a background using js.

The first will store the information as text in sheet, the second would need a config file to store the information, which we might need anyways to trigger special effects on load up.

If you injected it with js wouldn't that possibly interfere with your js script addition (eg. matrix) that you recently added?

[Gerschel]

@ParityError Not really. I might've been thinking too far ahead. Css could implement it right now. I was going to add some features, this would just affect the initial direction. We were going to try and make the css hot swappable, but this would require adding some markers in the file, which would make the old sheets incompatible unless I supported two versions of the sheets.

Your comment was what I needed, I dwelled on it for a while, thinking about how to write it down caused me to think through the different scenarios.

I think it comes to the destination of the images. With css, we'd have to include a direct path. The way I handle it for the logos, I copy the image to the root of the project, then when a person changes it, it overwrites the previous one in the root.
That way the css could find the image regardless of how they name the extension path.
Both could technically work together. Doing it the css way could trigger dropdowns, using the python code already written, for each zone the css specifies.
Doing it the js way, I'd have to write a piece of code for all the different scenarios, that's a little more invovled than a css style rule,

[ParityError]

I'm not sure exactly what you mean by making the css hot swappable, although it sounds neat. I still haven't quite grasped how to making the js effects work. I tried taking some existing effects I had (that mostly changed the background dynamically) and changing it somewhat like your code, but it didn't work for me. I didn't spend much time playing with it, but it's not just simple plug'n'play.

Did you ever change the favicon to work without having to modify the python code? Just wondering, since last time I tried to change it with the extension it still was the same. ~ cheers!

[Gerschel]

@ParityError
Hot swappable = replace in browser memory to see changes live, no restart required. Needs some marker in css file to work, becasue of the structure a1111 used.

js effects

The setup I did allows registering an effect, python will send data to js, js compares to mapping, calls function. I wrote it as a class so I can things in scope. I had some weird bug, so I ruined my structure trying to fix it. Wife told me to come to bed at 3am. This might help you https://github.com/gradio-app/gradio/discussions/2932#discussioncomment-4598826

favicon

Didn't persue it much, tried a few things that should've worked. I've learned more since. Might try again soon.

@IkariDevGIT
How do you see yourself setting an image. Would you expect a dropdown of choices, or maybe a text field where you insert a filepath?

I got forcing a background image onto an html element down. This is the idea. I wrote my local version as class I can reuse for doing images in other parts of the ui. I haven't decided how I want to implement image swapping. I have it where it can swap the images. I haven't decided on which of the several ways a person can point at the image they want. I could throw up a basic and change it later.

let ele = undefined;

async insertBackground(){
    while(true){
        ele = gradioApp().querySelector("div[class^=mx-auto][class*=container]");
        if(ele){
            break;
        }
        await delay(500);
    }
    ele.setAttribute("style", "background-image: url(file=logo.png); background-size: contain; background-attachment: fixed; background-position: center; background-repeat: no-repeat");
}


function delay(ms){return new Promise(resolve => setTimeout(resolve, ms))}
document.addEventListener("DOMContentLoaded", async function () {await insertBackground()})

[Gerschel]

@IkariDevGIT Give it a try now.