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

[311-code]

EDIT: This was resolved, guide moved to top. 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. 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.**

GUIDE:

Here is the full, slightly-modified, server.py file for text-generation-webui (oogabooga. uses gradio): server-py.zip (for oogabooga gradio 3.50.2 with theme builder startup option)

Here is one with without theme builder startup option, edit color name codes: server-py-no-tb.zip

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, 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']:

GUIDE2: Theme Builder Startup Option for text-generation-webui (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 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 ahead of time for the really long post. I've been working on this for days and hit a wall.

A lot of people like to use this repo which uses Gradio and is called text-generation-webui. It is pretty popular in the AI space and has many extensions and capabilities, like sending AI generated images from Automatic1111 to the chat (via local api), easily training LLM's, talking to the bots over the mic, voice cloning with alltalk_tts/conqui-tts v2, etc. I am working on a prototype idea of training my company data in an LLM and using my cloned voice to answer questions in the Chat.

I wanted to write an easy-to-follow quick guide for the community to help users easily change the default low-level colors that scale across all of the extensions and chat without digging into too much code. which can't be changed with just .css modifications it seems without inspecting elements to find them and adding to .css files. I would eventually need to change the colors for my idea above also, with a logo on the top right. I opted for the Gradio Theme Builder of course.

A lot of users on the issues section over there, and other sites, request UI color changes regularly that can't be easily changed 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 Gradio Theme Builder and implementing the code it provided back 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 . . .

~~ I also gave it a shot with hex color codes, which I'm aware don't work in some parts of the Gradio ui, 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. 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 stays in the chat and sidebar fields.

~~Overall I feel I am close, but following my own guide below does not even work for myself 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 or text-generation-webui compatible with Gradio Theme Builder, or if I need to change the provided color naming 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 they were on as of a couple weeks ago was gradio is 3.50.2.

### Screenshot

This is with the color code added at the beginning under import gradio as gr and changing the line with with gr.Blocks to theme=theme as specified. I think all the colors have the error but it's cut off.

This is the working option when you start the start_windows.bat file, which links to the server.py. This is with the theme builder code removed, everything works normally but default colors again.

[abidlabs]

Hi @brentjohnston thanks for looking into this. This indeed is a bug in the theme builder! Please see this issue for a temporary workaround: https://github.com/gradio-app/gradio/issues/7688

[311-code]

Thanks, it worked! Working on this side hobby project also, it applies the colors now, will make video soon of it live and post somewhere.

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

TNG Computer Voice cloning samples from llm chat, using alltalk_tts extension's coqui_tts v2 finetuning: https://mega.nz/folder/x1hjWY7Z#ZJ-7Rtlzog2dBbYmuCGARA Still tweaking voice, 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. It 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.

In the server.py under import gradio as gr Just convert the code it 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"),
)

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

This code is for general color changes in text-generation-webui. Like I mentioned above, 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 mentioned above was also helpful https://www.reddit.com/r/Oobabooga/comments/12yh0v2/oobabooga_webui_css_styling_updated_easy_custom/