Как я могу настроить высоту компонента Gradio ChatInterface с помощью CSS?CSS

Разбираемся в CSS
Ответить
Anonymous
 Как я могу настроить высоту компонента Gradio ChatInterface с помощью CSS?

Сообщение Anonymous »

Я работаю над интерфейсом чат-бота с помощью Gradio и пытаюсь настроить высоту компонента gr.ChatInterface. Я попытался установить высоту с помощью аргумента height в функции ChatInterface, но получил ошибку TypeError, сообщающую, что __init__() получил неожиданный аргумент ключевого слова height.
После некоторых исследований я узнал, что могу применить собственный CSS для изменения высоты. Однако я не уверен, правильно ли я это реализую. Вот мой текущий код:

Код: Выделить всё

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("ChatGPT Interface")
zc_chatbot = gr.ChatInterface(slow_echo, type="messages", elem_id="chatbot")

if __name__ == "__main__":
demo.launch()
Я добавил собственный блок CSS, в котором установил высоту: 600 пикселей для элемента #chatbot, но высота, похоже, применяется неправильно. в интерфейс чата Gradio. Я что-то упускаю или есть лучший способ отрегулировать высоту компонента чата?
Будем очень признательны за любые рекомендации!

Подробнее здесь: https://stackoverflow.com/questions/790 ... -using-css
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»