ui update

src/ui/components.py

@@ -9,62 +9,110 @@ from src.ui.styles import CSS
 
 
 def get_system_status():
-    cpu = psutil.cpu_percent()
-    ram = psutil.Process(os.getpid()).memory_info().rss / 1024 / 1024
-    return cpu, round(ram, 1)
+    """
+    Получает данные о состоянии системы для отображения в блоке Health.
+    Возвращает значения для CPU, общей RAM и RAM процесса.
+    """
+    # CPU usage (%)
+    cpu = psutil.cpu_percent(interval=None)
+    # Total system RAM (%)
+    memory = psutil.virtual_memory()
+    # Current process RAM (MB)
+    process = psutil.Process(os.getpid())
+    ram_mb = process.memory_info().rss / (1024 * 1024)
+
+    return f"{cpu}%", f"{memory.percent}%", f"{round(ram_mb, 1)} MB"
 
 
 def create_ui():
-    with gr.Blocks(css=CSS, title="Code LLM") as demo:
-        timer = gr.Timer(0.5, active=True)
-
-        with gr.Row(elem_id="main-row"):
-            with gr.Sidebar():
-                cpu_val, ram_val = get_system_status()
-                gr.Markdown("### 🖥️ Status")
-                cpu_display = gr.Number(
-                    value=cpu_val, label="CPU %", precision=1, interactive=False
-                )
-                ram_display = gr.Number(
-                    value=ram_val, label="RAM MB", precision=1, interactive=False
-                )
+    # fill_height=True позволяет приложению занимать всю высоту окна браузера
+    with gr.Blocks(css=CSS, title="Code LLM", fill_height=True) as demo:
+        # Таймер обновления системных показателей (раз в 2 секунды)
+        timer = gr.Timer(2, active=True)
+
+        with gr.Row(elem_id="main-row", variant="panel"):
+            # Боковая панель
+            with gr.Sidebar(elem_id="sidebar-container"):
+                gr.Markdown("## 🛠️ Dashboard")
+
+                # Блок System Health с красивой оберткой
+                with gr.Column(elem_id="system-status-container"):
+                    gr.Markdown("### 📊 System Health")
+                    with gr.Row():
+                        cpu_display = gr.Label(label="CPU Load", value="0%")
+                        ram_total_display = gr.Label(label="System RAM", value="0%")
+                    ram_proc_display = gr.Label(label="Process Memory", value="0 MB")
+
+                gr.Separator()
+
+                # Настройки модели
+                gr.Markdown("### ⚙️ Model Settings")
                 sys_pt = gr.Textbox(
-                    label="System Prompt", value="Вы программист.", lines=3
+                    label="System Prompt",
+                    value="Вы опытный программист. Отвечаете кратко и по делу.",
+                    lines=4,
                 )
-                temp = gr.Slider(0, 1, value=settings.DEFAULT_TEMP, label="Temp")
+                temp = gr.Slider(0, 1, value=settings.DEFAULT_TEMP, label="Temperature")
                 tokens = gr.Slider(
-                    512, 8192, value=settings.DEFAULT_MAX_TOKENS, label="Max Tokens"
+                    512,
+                    8192,
+                    value=settings.DEFAULT_MAX_TOKENS,
+                    label="Max New Tokens",
+                    step=128,
                 )
-                clear = gr.Button("🗑️ Clear")
 
+                gr.Separator()
+                clear = gr.Button("🗑️ Clear Chat", variant="stop")
+
+            # Основная область чата
             with gr.Column(elem_id="col-chat-main"):
-                chatbot = gr.Chatbot(elem_id="chatbot")
+                # fill_height=True здесь критически важен для "окна на весь экран"
+                chatbot = gr.Chatbot(
+                    elem_id="chatbot",
+                    show_label=False,
+                    bubble_full_width=False,
+                    fill_height=True,
+                    type="messages",
+                )
+
+                # Область ввода, прижатая к низу
                 with gr.Row(elem_id="input-area"):
-                    msg = gr.Textbox(show_label=False, scale=9, autofocus=True)
+                    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)
 
+        # Связываем таймер с функцией обновления статуса
         timer.tick(
             get_system_status,
-            outputs=[cpu_display, ram_display],
+            outputs=[cpu_display, ram_total_display, ram_proc_display],
             show_progress="hidden",
         )
 
+        # Настройка логики обработки соо��щений
         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

src/ui/styles.py

@@ -1,86 +1,152 @@
 CSS = """
-/* 1. Глобальный контейнер на весь экран без скроллов страницы */
+/* 1. Глобальный контейнер: занимаем все пространство без прокрутки страницы */
 .gradio-container {
-    width: 100% !important;
-    height: 100vh !important;
+    max-width: 100% !important;
     margin: 0 !important;
     padding: 0 !important;
-    overflow: hidden !important;
+    height: 100vh !important;
+    display: flex !important;
+    flex-direction: column !important;
+    background-color: var(--background-fill-primary) !important;
 }
 
-/* 2. Основной ряд (Sidebar + Chat) тоже должен быть во весь экран */
+/* 2. Основной ряд: Sidebar + Chat */
 #main-row {
+    flex-grow: 1 !important;
     height: 100vh !important;
-    max-height: 100vh !important;
+    margin: 0 !important;
+    gap: 0 !important;
     overflow: hidden !important;
 }
 
 /* 3. Сайдбар */
-.sidebar {
-    height: 100vh !important;
+#sidebar-container {
     border-right: 1px solid var(--border-color-primary) !important;
-    overflow-y: auto !important;
+    background-color: var(--background-fill-secondary) !important;
+    padding: 1.25rem !important;
+    height: 100% !important;
+    display: flex !important;
+    flex-direction: column !important;
+    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.02) !important;
 }
 
-/* 4. Правая колонка (Чат + Ввод) */
+/* 4. Блок "System Health": карточный дизайн */
+#system-status-container {
+    background: var(--block-background-fill) !important;
+    border: 1px solid var(--border-color-primary) !important;
+    border-radius: 12px !important;
+    padding: 12px !important;
+    margin-top: 10px !important;
+    margin-bottom: 20px !important;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
+    transition: all 0.3s ease-in-out !important;
+}
+
+#system-status-container:hover {
+    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
+    transform: translateY(-1px);
+    border-color: var(--color-accent) !important;
+}
+
+/* Стилизация заголовков внутри блока статуса */
+#system-status-container h3 {
+    font-size: 0.9rem !important;
+    margin-bottom: 12px !important;
+    color: var(--body-text-color-subdued) !important;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+/* Убираем "старение" (побледнение) при обновлении данных */
+.stale {
+    opacity: 1 !important;
+    filter: none !important;
+}
+
+/* 5. Правая колонка с чатом (Главная область) */
 #col-chat-main {
-    height: 100vh !important;
     display: flex !important;
     flex-direction: column !important;
+    height: 100vh !important;
     padding: 0 !important;
     margin: 0 !important;
-    border: none !important;
-    gap: 0 !important; /* Убираем промежутки между чатом и вводом */
+    gap: 0 !important;
+    background: var(--background-fill-primary) !important;
 }
 
-/* 5. ЧАТБОТ - САМОЕ ВАЖНОЕ
-   height: 0 + flex-grow: 1 заставляет его занять всё место,
-   даже если сообщений мало.
-*/
+/* ЧАТБОТ: Растягиваем на всю высоту */
 #chatbot {
     flex-grow: 1 !important;
-    height: 0 !important;       /* Хак для Flexbox */
-    min-height: 0 !important;   /* Разрешает сжиматься/растягиваться */
-    width: 100% !important;
-    overflow-y: auto !important; /* Скролл внутри */
+    height: 100% !important;
     border: none !important;
+    border-radius: 0 !important;
     margin: 0 !important;
+    display: flex !important;
+    flex-direction: column !important;
+    overflow-y: auto !important;
 }
 
-/* Обертка чата внутри Gradio (иногда создает проблемы, фиксим её) */
+/* Фикс для внутренней обертки Gradio Chatbot */
 #chatbot > .wrapper {
-    height: 100% !important;
+    flex-grow: 1 !important;
     display: flex !important;
     flex-direction: column !important;
 }
 
-/* 6. Поле ввода */
+/* 6. Поле ввода: всегда внизу */
 #input-area {
-    flex-shrink: 0 !important; /* Не даем сжиматься */
-    width: 100% !important;
-    padding: 15px !important;
-    background: var(--background-fill-secondary);
-    border-top: 1px solid var(--border-color-primary);
-    z-index: 10; /* Чтобы быть поверх */
+    padding: 1rem 2rem !important;
+    border-top: 1px solid var(--border-color-primary) !important;
+    background: var(--background-fill-primary) !important;
+    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.02) !important;
+    flex-shrink: 0 !important;
 }
 
-/* Убираем футер */
-footer { display: none !important; }
+#input-area textarea {
+    border-radius: 10px !important;
+    border: 1px solid var(--border-color-primary) !important;
+    padding: 12px 16px !important;
+    font-size: 1rem !important;
+    transition: border-color 0.2s ease !important;
+}
 
-/* Убираем эффект затухания (opacity) при обновлении компонентов */
-.pending, .stale {
-    opacity: 1 !important;
-    filter: none !important;
-    transition: none !important;
+#input-area textarea:focus {
+    border-color: var(--color-accent) !important;
+    box-shadow: 0 0 0 2px rgba(var(--color-accent-rgb), 0.1) !important;
 }
 
-/* Специально для Gradio 5+, чтобы убрать индикатор загрузки внутри Markdown */
-.prose.stale, .prose.pending {
-    opacity: 1 !important;
+/* 7. Кнопки и прочие элементы */
+.gr-button-primary {
+    border-radius: 8px !important;
+    font-weight: 600 !important;
 }
 
-/* Убираем любые анимации появления/исчезновения для этого блока */
-#system-status-container {
-    transition: none !important;
+/* Кастомный скроллбар */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--neutral-300);
+    border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--neutral-400);
+}
+
+/* Скрытие футера */
+footer {
+    display: none !important;
+}
+
+/* Убираем лишние зазоры между элементами */
+.gap {
+    gap: 12px !important;
 }
 """