refactor code

chat_logic.py

@@ -0,0 +1,76 @@
+import traceback
+
+import gradio as gr
+
+from model import engine
+from utils import get_clean_text
+
+
+def user_input(user_message, history):
+    """Обработка ввода пользователя"""
+    if not user_message:
+        return None, history
+
+    if history is None:
+        history = []
+
+    clean_history = []
+    for msg in history:
+        raw_content = msg.get("content", "")
+        text_content = get_clean_text(raw_content)
+        clean_history.append({"role": msg["role"], "content": text_content})
+
+    clean_history.append({"role": "user", "content": str(user_message)})
+    return "", clean_history
+
+
+def bot_response(history, system_prompt, temperature, max_tokens):
+    """Генерация ответа модели (стриминг)"""
+    if not engine.llm:
+        history.append({"role": "assistant", "content": "Error: Model failed to load."})
+        yield history
+        return
+
+    messages = [{"role": "system", "content": system_prompt}]
+
+    # Контекстное окно (последние 15 сообщений)
+    relevant_history = history[-15:] if len(history) > 15 else history
+
+    for msg in relevant_history:
+        raw_content = msg.get("content", "")
+        text_content = get_clean_text(raw_content)
+        messages.append({"role": msg["role"], "content": text_content})
+
+    history.append({"role": "assistant", "content": ""})
+
+    try:
+        stream = engine.generate(
+            messages=messages,
+            max_tokens=max_tokens,
+            temperature=temperature,
+            stream=True,
+        )
+
+        partial_text = ""
+        for chunk in stream:
+            delta = chunk["choices"][0]["delta"]
+            if "content" in delta:
+                partial_text += delta["content"]
+                history[-1]["content"] = partial_text
+                yield history
+
+    except Exception as e:
+        traceback.print_exc()
+        history[-1]["content"] = partial_text + f"\n\n❌ **Error:** {str(e)}"
+        yield history
+
+
+def set_interactive(is_interactive):
+    """Переключение состояния кнопок во время генерации"""
+    return (
+        gr.update(
+            interactive=is_interactive,
+            placeholder="Wait..." if not is_interactive else "Type code question...",
+        ),
+        gr.update(interactive=is_interactive),
+    )

styles.py

@@ -0,0 +1,64 @@
+CSS = """
+/* Убираем лишние отступы у всего приложения */
+.gradio-container {
+    width: 100% !important;
+    height: 100vh !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    overflow: hidden !important;
+}
+
+/* Сайдбар на всю высоту */
+.sidebar {
+    height: 100vh !important;
+    border-right: 1px solid var(--border-color-primary) !important;
+}
+
+/*
+   ГЛАВНАЯ КОЛОНКА (ID: col-chat-main)
+   Превращаем её во Flex-контейнер.
+   Она занимает 100% высоты экрана.
+*/
+#col-chat-main {
+    height: 100vh !important;
+    max-height: 100vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+    justify-content: space-between !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    border: none !important;
+}
+
+/*
+   ЧАТБОТ (ID: chatbot)
+   flex-grow: 1 -> Заставляет чат занять всё доступное пространство.
+   min-height: 0 -> КРИТИЧНО для работы скролла внутри flex-элемента.
+*/
+#chatbot {
+    flex-grow: 1 !important;
+    height: auto !important;
+    min-height: 0 !important;
+    overflow-y: auto !important;
+    margin: 0 !important;
+    border: none !important;
+    border-radius: 0 !important;
+    padding-bottom: 10px !important;
+}
+
+/*
+   ЗОНА ВВОДА (ID: input-area)
+   flex-shrink: 0 -> Запрещаем сжиматься.
+   Прижимается к низу автоматически из-за flex-grow у чата.
+*/
+#input-area {
+    flex-shrink: 0 !important;
+    padding: 15px !important;
+    background: var(--background-fill-secondary);
+    border-top: 1px solid var(--border-color-primary);
+    width: 100% !important;
+}
+
+/* Убираем футер */
+footer { display: none !important; }
+"""

ui.py

@@ -1,139 +1,19 @@
-import traceback
-
 import gradio as gr
 
 import config
-from model import engine
-from utils import get_clean_text
-
-CUSTOM_CSS = """
-/* 1. Глобальный сброс отступов и фиксация высоты */
-.gradio-container {
-    width: 100% !important;
-    height: 100vh !important;
-    margin: 0 !important;
-    padding: 0 !important;
-    overflow: hidden !important;
-}
-
-/* 2. Сайдбар тоже на всю высоту */
-.sidebar {
-    height: 100vh !important;
-    border-right: 1px solid var(--border-color-primary) !important;
-}
-
-/* 3. Главная колонка с чатом - превращаем во flex-контейнер */
-.main-chat-col {
-    height: 100vh !important;
-    display: flex !important;
-    flex-direction: column !important;
-    padding: 0 !important;
-    margin: 0 !important;
-    border: none !important;
-}
-
-/* 4. Окно чата: растягивается (flex-grow: 1) на всё доступное место */
-#chatbot {
-    flex-grow: 1 !important;
-    height: auto !important;     /* Сбрасываем фиксированную высоту */
-    min-height: 0 !important;    /* Разрешаем сжиматься, если нужно */
-    overflow-y: auto !important; /* Скролл внутри чата */
-    margin-bottom: 0 !important;
-    border: none !important;
-    border-radius: 0 !important;
-}
-
-/* 5. Полоса ввода: фиксирована внизу */
-.input-row {
-    flex-shrink: 0 !important; /* Не сжимать */
-    padding: 15px !important;
-    background: var(--background-fill-secondary); /* Цвет фона под вводом */
-    border-top: 1px solid var(--border-color-primary);
-    z-index: 100;
-}
-
-/* Доп. стили для ширины сообщений */
-.message { width: 100% !important; max-width: 100% !important; }
-.message-wrap { max-width: 100% !important; }
-footer { display: none !important; }
-"""
-
-
-# --- Логика событий ---
-
-
-def user_input(user_message, history):
-    if not user_message:
-        return None, history
-    if history is None:
-        history = []
-
-    clean_history = []
-    for msg in history:
-        raw_content = msg.get("content", "")
-        text_content = get_clean_text(raw_content)
-        clean_history.append({"role": msg["role"], "content": text_content})
-
-    clean_history.append({"role": "user", "content": str(user_message)})
-    return "", clean_history
-
-
-def bot_response(history, system_prompt, temperature, max_tokens):
-    if not engine.llm:
-        history.append({"role": "assistant", "content": "Error: Model failed to load."})
-        yield history
-        return
-
-    messages = [{"role": "system", "content": system_prompt}]
-    relevant_history = history[-15:] if len(history) > 15 else history
-
-    for msg in relevant_history:
-        raw_content = msg.get("content", "")
-        text_content = get_clean_text(raw_content)
-        messages.append({"role": msg["role"], "content": text_content})
-
-    history.append({"role": "assistant", "content": ""})
-
-    try:
-        stream = engine.generate(
-            messages=messages,
-            max_tokens=max_tokens,
-            temperature=temperature,
-            stream=True,
-        )
-        partial_text = ""
-        for chunk in stream:
-            delta = chunk["choices"][0]["delta"]
-            if "content" in delta:
-                partial_text += delta["content"]
-                history[-1]["content"] = partial_text
-                yield history
-    except Exception as e:
-        traceback.print_exc()
-        history[-1]["content"] = partial_text + f"\n\n❌ **Error:** {str(e)}"
-        yield history
-
-
-def set_interactive(is_interactive):
-    return (
-        gr.update(
-            interactive=is_interactive,
-            placeholder="Wait..." if not is_interactive else "Type code question...",
-        ),
-        gr.update(interactive=is_interactive),
-    )
-
-
-# --- Создание интерфейса ---
+from chat_logic import bot_response, set_interactive, user_input
+from styles import CSS
 
 
 def create_ui():
     theme = gr.themes.Soft(primary_hue="blue", text_size="lg")
 
-    with gr.Blocks(theme=theme, css=CUSTOM_CSS, title="Qwen Coder Pro") as demo:
-        # fill_height=True помогает растянуть layout
+    # fill_height=True помогает Gradio понять, что мы хотим на весь экран
+    with gr.Blocks(
+        theme=theme, css=CSS, title="Qwen Coder Pro", fill_height=True
+    ) as demo:
         with gr.Row(equal_height=True, variant="default", elem_classes=["main-row"]):
-            # --- Боковая панель ---
+            # --- ЛЕВАЯ КОЛОНКА (НАСТРОЙКИ) ---
             with gr.Sidebar(elem_classes=["sidebar"]):
                 gr.Markdown("### ⚙️ Settings")
                 system_prompt = gr.Textbox(
@@ -149,17 +29,22 @@ def create_ui():
                 )
                 clear_btn = gr.Button("🗑️ Clear Chat", variant="secondary")
 
-            # --- Основная колонка (Чат + Ввод) ---
-            with gr.Column(scale=1, elem_classes=["main-chat-col"]):
+            # --- ПРАВАЯ КОЛОНКА (ЧАТ + ВВОД) ---
+            # elem_id="col-chat-main" связывает эту колонку с Flexbox-стилями в styles.py
+            with gr.Column(scale=1, elem_id="col-chat-main"):
+                # 1. Чат (растянется благодаря flex-grow: 1 в CSS)
                 chatbot = gr.Chatbot(
+                    elem_id="chatbot",  # Важно для CSS
                     label="Code Assistant",
-                    elem_id="chatbot",
                     avatar_images=(None, "https://api.iconify.design/noto:robot.svg"),
+                    show_copy_button=True,
                     layout="bubble",
                     render_markdown=True,
+                    scale=1,
                 )
 
-                with gr.Row(elem_classes=["input-row"]):
+                # 2. Зона ввода (прижмется к низу)
+                with gr.Row(elem_id="input-area"):
                     msg = gr.Textbox(
                         show_label=False,
                         placeholder="Type your code question here...",
@@ -173,25 +58,22 @@ def create_ui():
                         "Run ➤", variant="primary", scale=1, min_width=80
                     )
 
-        # --- Привязка событий ---
-        submit_event = (
-            msg.submit(user_input, [msg, chatbot], [msg, chatbot], queue=False)
-            .then(lambda: set_interactive(False), None, [msg, submit_btn], queue=False)
-            .then(
-                bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
-            )
-            .then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
-        )
-
-        click_event = (
-            submit_btn.click(user_input, [msg, chatbot], [msg, chatbot], queue=False)
-            .then(lambda: set_interactive(False), None, [msg, submit_btn], queue=False)
-            .then(
-                bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
-            )
-            .then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
-        )
-
+        # --- СОБЫТИЯ ---
+        # Enter в поле ввода
+        msg.submit(user_input, [msg, chatbot], [msg, chatbot], queue=False).then(
+            lambda: set_interactive(False), None, [msg, submit_btn], queue=False
+        ).then(
+            bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
+        ).then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
+
+        # Клик по кнопке Run
+        submit_btn.click(user_input, [msg, chatbot], [msg, chatbot], queue=False).then(
+            lambda: set_interactive(False), None, [msg, submit_btn], queue=False
+        ).then(
+            bot_response, [chatbot, system_prompt, temperature, max_tokens], chatbot
+        ).then(lambda: set_interactive(True), None, [msg, submit_btn], queue=False)
+
+        # Очистка
         clear_btn.click(lambda: [], None, chatbot, queue=False)
 
     return demo