Gerschel/sd-web-ui-quickcss

:(

4lt3r3go opened this issue · 19 comments

unfortunatly i had to uninstall this amazing extention, too many errors were popping up in the consolle
bye bye cute layout :(
image

I'm not getting a single error. But I haven't updated to webui yet.
I'd like to know more.
Were you on a recent update of this extension?

I'm not getting a single error. But I haven't updated to webui yet. I'd like to know more. Were you on a recent update of this extension?

yup. installed today

You might need to update the css.
I had the dynamic branch, and the master branch.
I will also be updating the css after I get through some backlog.

I merged them both in to master.
If it's caused because I changed how the dynamic reads the file, I think I know where to add an error check to give proper hinting.

The script looks for these, the word quickcss_target, /*ENDCOLORPICKERS*/, and /*BREAKFILEREADER*/.
The rule header such as root, *, quickcss_target in this example, needs to be on the same line.
Must use hex values for colors, no extra blank lines, no extra comments.
The ones after colorpickers zone is for sliders, they must have no units specified, units can be added in other rules.
Extra variables that you don't want to have adjustable go after /*BREAKFILEREADER.

image

This then gives colorpickers and sliders in the extension, for modifying and saving.
image

If you don't need this. Remove quickcss_target, and it will treat it like a normal stylesheet.
There are iterations of the stylesheet that were upgrading as this was being made.
Even the one labeled neon.css in the repository is not the same neon that was applied a few days ago.

If it's one of these neons that was for a prior read method, you can update it by reapplying.
The current version works with these features, it has a jankiness, I threw in the demonstration of radius.
It will be updated later today, since I updated the readme with some instructions instead of relying on the stylesheet to demonstrate the instructions.

I'm going to thoroughly investigate, add some error handling, and make an update today.

TLDR: Just reapply the stylesheet from the repo, stylesheet was updated. Readjust your colors, save.

I think I know what was going on. In the css, it specified a different filename/location for logos.
I updated the neon.css to @Nacurutu https://github.com/Nacurutu latest.
I made an alteration to his file that's worth noting.
I changed the url parameters to the location where the script names it as logo.png and favicon.svg, I may need to update how this works. Change the save location to a static folder in the extension. Hot swap as needed. Static folder in root makes more sense, as it would work whether or not extension is installed.

I added .gradio-container to `* { border-radius ...}, so it doesn't affect the radius outside the modal.
I was getting errors too, mine were logo.png is not found at ..., this is because I don't have a logo.png in that location, they're still the default names as downloaded from github.

@4lt3r3go everything is working for me with no errors.

Also you can try with the files on this repo:

https://github.com/Nacurutu/Dark-Themes-SD-WebUI-Automatic1111

Im gonna try to keep the files updated as much as I can.

@4lt3r3go did a test with your color palette, didnt get any visual or console errors.

image

Try replacing the code of your css file with this one:

https://pastebin.com/yivVAuVX

Let me know.. :)

thanks guys, i wanst expecting so many attentions and technical support ❤️
However i'm having other issues now that doesnt allow me to use SD normally at all
( damn me, i should remove that --git pull from the bat)
Once i fix this bs i'll for sure give to this extention another try.
QUESTION:
Does this extention allow somehow to customize positions of buttons and sliders? or dimensions?
this would be awesome

thanks guys, i wanst expecting so many attentions and technical support ❤️

More than welcome!

However i'm having other issues now that doesnt allow me to use SD normally at all ( damn me, i should remove that --git pull from the bat) Once i fix this bs i'll for sure give to this extention another try.

I have 2 "SD webUI" installed, a simple one without scripts/extensions/custom models where I use github to pull updates and test the app, and, if everything goes fine and the update didnt break the app, I copy and paste all the files to the "second one". With that, I avoid breaking the one and only with a broken update. 😉

I also made a second webui-user.bat called webui-user-Personal.bat where I have the COMMANDLINE_ARGS applied, with that I also avoid any mistake/override/modification/issue with the original webui-user.bat when I copy all the files from "SD Vanilla" to my "SD Tuned".

Right now im having a bug with the send to img2img button, I think there is an error with the app from the last update and maybe will get a fix soon. The send to inpaint works fine. (just in case you update the the app and get the same bug).

QUESTION: Does this extention allow somehow to customize positions of buttons and sliders? or dimensions? this would be awesome

Positions, I dont know if that is possible just modifying the css file, a css file is just for the style.
I think in order to customize positions, should be done on the python file, however, that is going to break updates, and everytime Automatic1111 update the app, you will need to make all the changes again. Someone correct me if im wrong.

Dimentions are possible, however could be a little pain in the butt because it depends on what you need to change and specifiy it on the file. What do you have in mind? what dimensions you need to change?

EDIT: I have updated again your css file and added the new modifications I made to mine, some code fix and nothing more.

https://pastebin.com/yivVAuVX

@4lt3r3go

git fetch --all
git reset --hard origin/master

Git pull is two commands in one, it's a git fetch and a git merge.
In this one, you do the fetch, then say fuck it, replace the files anew.
This wont make you redownload your models, just the same files you were trying to get with git pull.

If it's just complaining about the webui.py because you made a change.

git checkout master -- webui.py

This means, undo my local changes on this file. Then a git pull would work.

Just about everyone has had a problem with recent updates, because the way others merged before committing.

@Nacurutu
There's ways to get tricky with css to force position. At the worse, there's javscript code like this.
I played with it. I have a code in the preset manager that's in your copy right now.
Copy this and place in your browser devtools console.

let mover = new PresetManagerMover("txt2img_preset_manager_accordion", "quicksettings", "")
mover.move('beforebegin')

Then to move it back

mover.updateTarget('txt2img_generation_info_button')
mover.move('afterend')

I got a pull request merged in to the webui that allows tabbed components in quicksettings area, just for this.

Awesome...

As always, I didnt knew that could be possible from your preset extension and/or css.

And yep, I know that now we can organize quicksettings depending on the order you want, didnt know was ur idea and code, good job!

The mover was a test to see how it handled in quicksettings. They have a javacript function get_uiTabs, which targetted my extension when I had it up top, instead of their tabs. I just got an event working that would move it automatically, it was tricky. https://github.com/gradio-app/gradio/discussions/2932#discussioncomment-4598826
So now I need to handle hiding on tab switch, or change contents on tab switch. I had a local version that worked on every tab for every component, but required adding code to ui.py
I'm trying to work around turning my preset manager into built-in until he gives a license I can agree with.
We'll take this discussion back to discussions.

Sounds awesome...

What if you try to make a pull request adding that code to the main ui.py?

Maybe they add the code and you can add the function to the presets utils or quick css extension. Should be great to be able to move everything as you wish.

What do you have in mind?

i'm just bored to go find the denoise slider in the bottom of the page, and the latest update added even more space between the image and that slider.. i'm consuming my mouse wheel XD

I have updated again your css file

TY.

There's ways to get tricky with css to force position.

lookign forward for this! i really wish to customize all stuff positions

Well... in the end Auto1111 repo is moved away from github today so i dunno wtf how all this gonna evolve..

Aparently, Automatic1111 Github account got suspended.

However, he moved the repo to Gitgud.

Here's the gitgud link to the WebUI

Gitgud Automatic1111 Stable Difussion WebUI

Here's the reddit where he announced the migration:

Reedit post

So, now you need to clone the repo from Gitgud. I dnt know if he is going to use github again.

Note 1: you can download the Source code from Gitgud and paste the files on your SD WebUI root folder. It will update the app.

Note 2: If you have installed an extension that was hosted on Automatic1111's repos, go to your extensions folder, Copy them to a different folder outside extensions (like a backup folder) and delete them from the extensions folder, otherwise the Extensions / Check for updates will break.

I know that

stable-diffusion-webui-aesthetic-gradients
stable-diffusion-webui-wildcards

were on his repo.

i'm just bored to go find the denoise slider in the bottom of the page, and the latest update added even more space between the image and that slider.. i'm consuming my mouse wheel XD

Lets wait a bit for @Gerschel, I know he will manage a way to do it and to include the repositioning on one of his Extensions.

image

@4lt3r3go I think the Automatic1111 Github is back online

https://github.com/AUTOMATIC1111/stable-diffusion-webui

i get many errors with the new retrowave style

i get many errors with the new retrowave style

retrowave is still in beta, it's a css that @ParityError is still working on it. I think it was uploaded for testing some things.

You can try this ones:

Dark Themes SD WebUI Automatic1111

and you can change the color palette using the extension.
Im updating my css files often. @Gerschel adds them every few days.

You can try this one

i wonder if there's a place were to browse for different styles

Well, im on it. Im one of the persons making styles for the extension, however, first im making all the possible changes to one, clean the code as much as I can and then, im going to start making different styles with great color palettes.

Patience...
image

I know @catppuccin made 4 css files, you can apply them from the Extension, however, they cant be modified using the Extension. Catppuccino asked to not add them to the Extension's repo, so the only way is to download them from there:

Catppuccin Flavors for stable diffusion

We cant add the parameters to make them compatible with the color picker, but you can if you want.