Comments (9)
@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.
from sd-web-ui-quickcss.
bruh, no clue. never used css or javascript, just wanted to give a request
from sd-web-ui-quickcss.
@IkariDevGIT That was for the guy I was pinging.
from sd-web-ui-quickcss.
oh bruh
from sd-web-ui-quickcss.
@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?
from sd-web-ui-quickcss.
@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,
from sd-web-ui-quickcss.
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!
from sd-web-ui-quickcss.
@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()})
from sd-web-ui-quickcss.
@IkariDevGIT Give it a try now.
from sd-web-ui-quickcss.
Related Issues (20)
- Convert from tab to settings HOT 1
- New default "compact" gradio .css problems HOT 4
- How is this (not) working ... ? HOT 11
- :( HOT 19
- Collapsible tabs? HOT 4
- Applying logos images not working as expected HOT 2
- allow add custom css without upload .css file HOT 1
- Placeholder Color HOT 3
- set max height for extra networks HOT 3
- can you improve quicksettings's css width max out at 4, and it will overflow ugly. HOT 2
- how do you revert to default style, only way to do is disable this plugin, how to do it there are no options. HOT 1
- how to revert to original web ui CSS style? there are no back up in the list, and no custom style to let users create their own..... HOT 4
- After upgrade to the latest version of SD webui, extra networks cards display wrong. HOT 1
- "sd-web-ui-quickcss" is not compatible with "PromptHub" extension HOT 5
- error looking for somthing in webui/static/favicon.svg HOT 1
- Since I haven't updated in a while; possible rewrite? [PUT ON HOLD] HOT 9
- Can't find favicon.svg even though it's there HOT 2
- errors in console HOT 3
- retrowave.css and matrix.css make OpenOutpaint Extension canvas area black HOT 23
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sd-web-ui-quickcss.