与gradio的聊天（如何修改其屏幕外观）

Question

我写了这个非常简单的脚本

import requests
import gradio as gr
import json

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

with gr.Blocks() 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,additional_inputs=[response_limit])

demo.launch()

有了这个我得到了类似的东西

您是否注意到聊天下方巨大的空白区域（红色）以及聊天窗口有多小？

我希望聊天空间一直延伸到底部（或者如果我在下面放置其他内容，则列中的所有元素都会占据整个屏幕（如蓝色矩形）

我该怎么做？

编辑：我将代码修改为

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()

现在聊天框变大了一点，但它并没有一直到底部。我怎样才能做到这一点？

（备注）一开始我没有添加

render=False

，然后我得到了

    raise DuplicateBlockError(
gradio.exceptions.DuplicateBlockError: A block with id: 7 has already been rendered in the current Blocks.

感谢这篇文章，如果有人遇到同样的问题，我可以纠正它

Answer 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;
}
#col { height: calc(100vh - 112px - 16px) !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,elem_id="col"):
            chat = gr.ChatInterface(
                fn=chat_response,
                chatbot=gr.Chatbot(elem_id="chatbot",
                                   render=False),
                additional_inputs=[response_limit]
            )

demo.queue()
demo.launch()