how to dynamically vertically scale layout with gr.Row() and multiple gr.Column() in Gradio

Question

I need to build a layout in Gradio with two columns. The left column will contain several checkboxes, while the right column will feature a gr.Chatbot and a gr.TextBox. I want the gr.Chatbot component to be dynamically scalable in height (vertically), adjusting as the window size changes. Currently, the gr.Chatbot has a fixed height, which prevents it from resizing automatically.

I have the following code that works great and scales gr.Chatbot() in browser because of gr.Blocks(fill_height=True,fill_width=True)

with gr.Blocks(fill_height=True,fill_width=True) as demo:
    chatbot_output = gr.Chatbot(scale=1,elem_id="chatbot",type="messages")
    user_input = gr.Textbox(scale=0,show_label=False, placeholder="Enter your message...")
    user_input.submit(chatbot_response, user_input, chatbot_output)

I need to build layout with 2 gr.Column() inside of gr.Row() like this:

with gr.Blocks(fill_height=True,fill_width=True) as demo:
    with gr.Row(): 
        with gr.Column(scale=0,min_width=210):  # Fixed size for first column
            gr.Checkbox(label="label1")
            gr.Checkbox(label="label2")  
        with gr.Column(scale=1):  # Resizable column for chatbot and input
            chatbot_output = gr.Chatbot(scale=1,elem_id="chatbot",type="messages")
            user_input = gr.Textbox(scale=0,show_label=False, placeholder="Enter your message...")
            user_input.submit(chatbot_response, user_input, chatbot_output)

When I run this code, gr.Chatbot has a fixed height and is not dynamically scalable. it seems it uses default height (same when I use scale=0 in gr.Chatbot(). How to fix this issue and make my application to be able to scale gr.Chatbot to maximal height in browser?

I really appreciate any help/suggestion

Found the solution here a-chat-with-gradio-how-to-modify-its-screen-appearance It works like a charm! — Andrew Anokhin
– Andrew Anokhin, Commented Nov 5, 2024 at 2:54

Andrew Anokhin · Accepted Answer · 2024-11-05 03:41:46Z

0

Here is example of code that works. Found the solution at 1

import requests
import gradio as gr
import json

def chat_response(message, history, response_limit):
    return f"You wrote: {message} and asked {response_limit}"

css = """
#chatbot {
    flex-grow: 1 !important;
    overflow: auto !important;
}
"""

with gr.Blocks(css=css) as demo:
    gr.Markdown("# Data Query!")
    with gr.Row():
        with gr.Column(scale=3):
            response_limit = gr.Number(label="Response Limit", value=10, interactive=True)
        with gr.Column(scale=7):
            chat = gr.ChatInterface(
                fn=chat_response,
                chatbot=gr.Chatbot(elem_id="chatbot",
                                    render=False),
                additional_inputs=[response_limit]
            )
demo.launch()

answered Nov 5, 2024 at 3:41

Andrew Anokhin

1

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to dynamically vertically scale layout with gr.Row() and multiple gr.Column() in Gradio

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related