Using ChatInterface change widget background / translucency?

Beginners
1

I’d like to be able to change the background of the “Chatbot” widget to be translucent so the page background is shown through and/or set an image to the background of the widget.

I’ve got something like the following and setting css=“.gradio-container {background: url(”“);}” works for setting the background image of the page but the chatbot widget background is eluding me.

with gr.Blocks(css=custom_css) as demo:
  iface = gr.ChatInterface(fn=function)

demo.launch(...)
1 Like
2

In many cases it is not possible to apply CSS due to Gradio’s specifications, but if it is possible, this writing style should be feasible.

custom_css = """
.chatif  {background: url(""); !important;}
"""
~
iface = gr.ChatInterface(fn=function, elem_classes="chatif")
3

chatinterface doesn’t have a elem_classes but tried doing the same with a gr.Chatbot passed into ChatInterface. No luck. I tried the full selector too (“.dark .bubble-wrap.svelte-…”) which also didn’t work.

What about modifying the theme? The docs are a bit sparse about how it works.

4

OK, I think I figured it out though it may not be a “proper” way to do it.

import gradio as gr

custom_css = \
"""
div .foo .bubble-wrap {background: #11000030 !important;}
"""

def chatinterface_func(message, history):
    return "Hello, World!"

with gr.Blocks(css=custom_css) as demo:
    chatbot = gr.Chatbot(elem_classes="foo")
    chatinterface = gr.ChatInterface(fn=chatinterface_func,
                                     chatbot=chatbot)

demo.launch(server_name='0.0.0.0',
            server_port=8080,
            share=False)
1 Like
5

ChatInterface was an Interface, not a component…
I forgot about that!