Using ChatInterface change widget background / translucency?
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(...)
2024-10-01T22:32:34Z
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")
2024-10-02T14:02:59Z
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.
2024-10-02T16:29:49Z
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)
2024-10-02T23:06:01Z
ChatInterface was an Interface, not a component…I forgot about that!