[Python] How can I adjust the height of a Gradio ChatInterface component using CSS?

I'm working on a chatbot interface using Gradio, and I'm trying to customize the height of the gr.ChatInterface component. I attempted to set the height using the height argument in the ChatInterface function, but I received a TypeError saying that __init__() got an unexpected keyword argument height.

After some research, I learned that I could apply custom CSS to change the height. However, I'm not sure if I'm implementing it correctly. Here is my current code:

from openai import OpenAI
import gradio as gr

client = OpenAI(api_key="your_api_key_here")

def slow_echo(message, history):
messages = [{"role": "system", "content": "You are a helpful assistant."}]

for chat in history:
if chat['role'] == "user":
messages.append({"role": "user", "content": chat['content']})
elif chat['role'] == "assistant":
messages.append({"role": "assistant", "content": chat['content']})

messages.append({"role": "user", "content": message})

completion = client.chat.completions.create(
model="gpt-4",
messages=messages
)

response = completion.choices[0].message.content

return response


CSS = """
.contain { display: flex; flex-direction: column; }
#component-0 { height: 100%; }
#chatbot { flex-grow: 1; height: 600px; } /* Set height here */
"""


with gr.Blocks(css=CSS) as demo:
gr.HTML("<h1>ChatGPT Interface</h1>")
zc_chatbot = gr.ChatInterface(slow_echo, type="messages", elem_id="chatbot")

if __name__ == "__main__":
demo.launch()


I've added a custom CSS block where I set height: 600px for the #chatbot element, but the height doesn't seem to be applied correctly to the Gradio chat interface. Is there something I'm missing, or is there a better way to adjust the height of the chat component?

Any guidance would be greatly appreciated!

Continue reading...