Gradio Theme Builder 3.50.2, errors with text-generation-webui EDIT: Works now, Theme guide included.

[311-code]

EDIT: This was resolved, guide created. This is for if you want to easily edit all text-generation-webui colors with a few lines of modified theme builder code, it uses c colors as a workaround. Use Notepad++

GUIDE:

For a lot of UI elements, it's not as easy as just modifying existing hex colors or .css file settings in Gradio, and this is the fastest way. Samples are on my reply below.**

Here is the full, slightly-modified, server.py file with Star Trek "LCARS" colors: server-py.zip (updated, for oogabooga gradio 3.50.2 with theme builder option)

Here is one without theme builder startup option, includes Star Trek colors: server-py-no-tb.zip Edit the color names.

To do this manually instead, the most important part is in the server.py after the import gradio as gr at the start add:

theme = gr.themes.Monochrome(
    primary_hue="slate",
    secondary_hue="stone",
    neutral_hue=gr.themes.Color(c100="Gainsboro", c200="LightGray", c300="MediumSlateBlue", c400="PeachPuff", c50="White", c500="DarkOrange", c600="Red", c700="SlateBlue", c800="DarkOrange", c900="Black", c950="PeachPuff"),
)

(modify color names, as this is default "LCARS" colors from Star Trek)

and then replacing with gr.Blocks linetheme=ui.theme with theme=theme

with gr.Blocks(css=css, analytics_enabled=False, title=title, theme=theme) as shared.gradio['interface']:

Modified UI colors (images were added also, see this user's post for help with images):

GUIDE2: Theme Builder Startup Option (optional)

And here was a more detailed guide I wrote for adding the ability to either launch the text-generation-webui or the Gradio theme builder at startup, or you can just download the modified server.py above and edit the colors:

1. Backup your server.py file. It's located in main directory:

2. Use Notepad++, Locate the space between the def signal_handler code and def create_interface_app code. This is usually found around line 71 but may vary as oogabooga updates sometimes. Locate line ~71 or so and click on the line right before def create_interface_app and press enter. In this empty space, paste the following code then press enter again:

def initialize_app():
    #Initializes the application and allows for the optional inclusion of the Gradio Theme Builder without disrupting the main application flow.
    logger.info("Initializing text-generation-webui...")

def run_theme_builder():
    gr.themes.builder()

3. Then find the comment that says "# Load custom settings" at around line ~180. You'll only replace this comment itself with the code below, not anything else. Ensure all the rest of the code remains unchanged, copy this code below and paste over the comment:

    #Load custom settings and provide the option for the user to decide whether to run the Gradio Theme 
    run_builder = input("Run the Gradio Theme Builder? (yes/no): ").strip().lower()
    if run_builder == "yes":
        run_theme_builder()
    #The rest of existing code after this remains unchanged.

4. Save and start the text-generation-webui with the 'start_windows.bat', and it will give you the option to launch the Gradio Theme Builder. Say yes and then control + left click the url link, You can now customize your theme here. When changing the colors you can click on any field and it will update and refresh the color.

After you are done click view code button and copy a small section of the code. Here was my code in my example I copied:

theme = gr.themes.Monochrome(
    primary_hue="slate",
    secondary_hue="stone",
    neutral_hue=gr.themes.Color(neutral_100="#f4f4f5", neutral_200="#e4e4e7", neutral_300="#7575ff", neutral_400="#ffbd7b", neutral_50="#fafafa", neutral_500="#ff9b37", neutral_600="#ff4444", neutral_700="#736cc6", neutral_800="#000000", neutral_900="#000000", neutral_950="#c173df"),
)

Then paste the hex colors provided into Chatgpt 4 and have it convert your colors to the nearest one that Gradio accepts (it won't accept hex colors like this if you chose custom ones) Also If you have it try to convert entire code it may give you something completely different, so only just do the colors converted to names. Here is what it gave me:

EDIT: FIX FROM GRADIO ISSUES REPO POST APPLIED! Must convert to c colors for it to work with oogabooga. Example:

theme = gr.themes.Monochrome(
    primary_hue="slate",
    secondary_hue="stone",
    neutral_hue=gr.themes.Color(c100="Gainsboro", c200="LightGray", c300="MediumSlateBlue", c400="PeachPuff", c50="White", c500="DarkOrange", c600="Red", c700="SlateBlue", c800="DarkOrange", c900="Black", c950="PeachPuff"),
)

then paste the new code right underneath import gradio as gr towards the beginning of the server.py script.

After that scroll down to line 125 or so, the line starting with 'with gr.Blocks' and change the part in it theme=ui.theme to theme=theme, save and launch oogabooga and you should be good to go!

Sorry for the long post ahead of time. I have been working on this for days and hit a wall.

Maybe someone could find some of this in here useful also, for customizing oogabooga theme/colors with the easy-to-use local built in gradio theme builder (if you can get past this error). I attached a quick guide below.

I am working on a prototype idea of training my company data in an LLM and using my alltalk_tts cloned voice to answer questions in the Chat. I wanted to use the local Gradio Theme Builder that comes with gradio-based apps and change the default grey blue color in the input chat, sidebars and extensions. But I can only change the main background color and chat window at this time in a .css file.

The not currently working yet for me, but "easy-to-follow community guide" below, was intended to help users change the default low-level colors that scale across all of the extensions and chat input box without having to mess with too much code, which can't be changed with just normal .css modifications I believe without inspecting elements or using gradio theme builder. So after unsuccesfully replacing every hex color, I opted for the Gradio Theme Builder of course.

A lot of users on sites like reddit or youtube comments on some videos request UI color changes regularly, that can't be easily changed that easily in text-generation-webui. But nobody ever really has a clear way to do it even with Theme Builder, and reading the Gradio Theme Builder documentation still took me about two days to figure out how to implement into it's files.

But I finally figured it out and modified the main server.py so that it gives the user a choice after they run the start_windows.bat to either launch the text-generation-webui or Gradio Theme Builder. Sadly though, after using the local Theme Builder and implementing the code it provides into the server.py I get this error when I launch the app.

~~Gradio version: 3.50.2
╭───────────────────────────────────────── Traceback (most recent call last) ──────────────────────────────────────────╮
│ C:\stable-diffusion-webui-master\outputs\text-generation-webui-main\server.py:28 in <module>                         │
│                                                                                                                      │
│    27     secondary_hue="stone",                                                                                     │
│ ❱  28     neutral_hue=gr.themes.Color(neutral_100="Gainsboro", neutral_200="LightGray", neutra                       │
│    29 )                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
TypeError: Color.__init__() got an unexpected keyword argument 'neutral_100'
Press any key to continue . . .~~

Like I was saying, I also gave it a shot with hex color codes, which I'm aware don't work in some part of Gradio, as it likes it's internals for colors a certain way. This also produced the same error (expected). I tried finding and replacing all of the default grey-blue hex colors as a test like I explained above. Replacing #1f2937 and #0b0f19 in the entire text-generation-web's many .css files. I was only able to change the background to black, the blue grey stayed in the chat and sidebar fields.

Overall I feel I am close, but following my own guide below does not even work for myself so I can't help anyone haha. I still have that error, and can't figure out if this is a bug, or just something else I'm not aware of that's changed since the older Gradio. Not sure if 3.50.2 is compatible with Gradio Theme Builder anymore, or if I need to change the provided color name codes to other names and Chatgpt 4 screwed up the naming? I was having it find the closest color name to the custom hex color I picked.

The current version it reports is gradio is 3.50.2. I think I downloaded this a few weeks ago.

[311-code]

Ah, a gradio dev got back to me. Looks like it's a bug in gradio. I will try this workaround linked to me tonight and report back. https://github.com/gradio-app/gradio/issues/7738#issuecomment-2007259157

If it works, I plan to update the guide, and submit a pull request. Maybe suggesting integrating the code into the server.py file, retaining gradio's default color scheme as the standard setting, like it is now. I would include comments in code to list all of the various color names you can choose. Offering users customizable options without altering the existing defaults.

[311-code]

Ok that workaround worked! Working on this side hobby project also, it applied the colors now. I feel like I'm living in the future. Able to talk over mic to TNG computer, local llm, with voice clone working and sends images to me. Will make video soon at some point post to /r/stablediffusion. ngl though, sort of feel like I'm in that TNG episode Hallow Pursuits. (great episode)

Modified UI colors (images were added also, see this user's post for help with images):

TNG Computer Voice cloning samples from chat using alltalk_tts extension's coqui_tts v2 finetuning: https://mega.nz/folder/x1hjWY7Z#ZJ-7Rtlzog2dBbYmuCGARA Still tweaking voice, sounds a little different, and cuts off. Think could get it to match exactly after finetuning it more. It's very immersive when using Dragon Naturally Speaking handsfree instead of whisper_stt and just saying the word "type" presses enter and sends to the chat.

Attached seperately is not just a random pic of the character I'm posting haha. This was an AI image generation sent to the oobabooga chat by the computer using a Civitai Star Trek model, The request to the LLM was to "send a photo of Dr. Beverly crusher with a cyberpunk city in the background." uses sd_api_pictures extension:

I forgot to take screenshot of the chat so just attaching separately, put in png info for settings. This uses the sd 1.5 crusher dreambooth model from Civitai. Edit: Her uniform is not red like computer voice sample says ugh, I think it uploaded wrong audio file from the chat.

The guide in the wall of text above was updated.

The workaround: In the server.py under import gradio as gr Just convert the code Theme Builder gives you to to c colors.

theme = gr.themes.Monochrome(
    primary_hue="slate",
    secondary_hue="stone",
    neutral_hue=gr.themes.Color(c100="Gainsboro", c200="LightGray", c300="MediumSlateBlue", c400="PeachPuff", c50="White", c500="DarkOrange", c600="Red", c700="SlateBlue", c800="DarkOrange", c900="Black", c950="PeachPuff"),
)

Edit: This is just for general color changes. If you want to get more advanced with it and add images and not great with coding: You can use Chatgpt 4 to help you edit the layout with the server.py and files in /css folder. It will help you make gradio block modifications in the server.py, adjust element positions, inspect the elements with your browser and pass css strings to the element. It hallucinates a lot though just just have to keep trying. This reddit post was also helpful https://www.reddit.com/r/Oobabooga/comments/12yh0v2/oobabooga_webui_css_styling_updated_easy_custom/