src/ui/components.py

import gradio as gr

from src.core.config import settings
from src.ui.callbacks import bot_response, set_interactive, user_input
from src.ui.styles import CSS


def create_ui():
    with gr.Blocks() as demo:
        gr.HTML(f"<style>{CSS}</style>")
        gr.HTML("<script>document.title = 'Code LLM';</script>")
        with gr.Row(elem_id="main-row", variant="panel"):
            # Боковая панель
            with gr.Sidebar(elem_id="sidebar-container"):
                gr.Markdown("## 🛠️ Dashboard")

                # Настройки модели
                gr.Markdown("### ⚙️ Model Settings")
                sys_pt = gr.Textbox(
                    label="System Prompt",
                    value="Вы опытный программист. Отвечаете кратко и по делу, пишите качественный и рабочий код.",
                    lines=4,
                )
                temp = gr.Slider(0, 1, value=settings.DEFAULT_TEMP, label="Temperature")
                tokens = gr.Slider(
                    512,
                    settings.CONTEXT_SIZE,
                    value=settings.DEFAULT_MAX_TOKENS,
                    label="Max New Tokens",
                    step=128,
                )

                gr.HTML(
                    "<div style='margin: 15px 0; border-top: 1px solid var(--border-color-primary);'></div>"
                )
                clear = gr.Button("🗑️ Clear Chat", variant="stop")

            # Основная область чата
            with gr.Column(elem_id="col-chat-main"):
                chatbot_kwargs = {
                    "elem_id": "chatbot",
                    "show_label": False,
                }
                try:
                    chatbot = gr.Chatbot(**chatbot_kwargs)
                except TypeError as e:
                    err_msg = str(e)
                    for key in list(chatbot_kwargs.keys()):
                        if key in err_msg:
                            chatbot_kwargs.pop(key, None)
                    chatbot = gr.Chatbot(**chatbot_kwargs)

                # Область ввода, прижатая к низу
                with gr.Row(elem_id="input-area"):
                    msg = gr.Textbox(
                        show_label=False,
                        placeholder="Type your message here...",
                        scale=10,
                        autofocus=True,
                        container=False,
                    )
                    submit = gr.Button("Run ➤", variant="primary", scale=1)

        # Настройка логики обработки сообщений
        input_args = [msg, chatbot]
        output_args = [msg, chatbot]
        gen_args = [chatbot, sys_pt, temp, tokens]

        # Обработка Enter в текстовом поле
        msg.submit(user_input, input_args, output_args, queue=False).then(
            lambda: set_interactive(False), None, [msg, submit]
        ).then(bot_response, gen_args, chatbot).then(
            lambda: set_interactive(True), None, [msg, submit]
        )

        # Обработка клика по кнопке Run
        submit.click(user_input, input_args, output_args, queue=False).then(
            lambda: set_interactive(False), None, [msg, submit]
        ).then(bot_response, gen_args, chatbot).then(
            lambda: set_interactive(True), None, [msg, submit]
        )

        # Очистка чата
        clear.click(lambda: [], None, chatbot)

    return demo