Update app.py

app.py

@@ -33,10 +33,7 @@ try:
     model.to(device).eval()
 
     TRANSFORMER.update({
-        "model": model,
-        "tokenizer": tokenizer,
-        "device": device,
-        "loaded": True
+        "model": model, "tokenizer": tokenizer, "device": device, "loaded": True
     })
     print(f"[INFO] Модель загружена из: {MODEL_DIR}  |  device={device}")
 except Exception as e:
@@ -65,17 +62,32 @@ def infer(comment: str, threshold: float):
     return verdict, dist
 
 # ==============================
-# 4) ФУНКЦИИ-ОБЁРТКИ ДЛЯ UI (без изменений)
+# 4) ФУНКЦИИ-ОБЁРТКИ ДЛЯ UI (ИЗМЕНЕНО)
 # ==============================
 def predict_for_ui(comment: str, threshold: float):
+    """
+    Вызывает infer и форматирует вердикт в красивый HTML-блок для вывода.
+    """
     verdict, dist = infer(comment, threshold)
-    return dist
+
+    # Создаем стилизованный HTML в зависимости от вердикта
+    if verdict == "Токсичный":
+        verdict_html = "<div class='verdict toxic'><h2>Токсичный</h2></div>"
+    elif verdict == "Не токсичный":
+        verdict_html = "<div class='verdict neutral'><h2>Не токсичный</h2></div>"
+    else:
+        # Для ошибок или пустого состояния
+        verdict_html = f"<div class='verdict default'><h2>{verdict}</h2></div>"
+        
+    return verdict_html, dist
 
 def clear_all():
-    return "", DEFAULT_THRESHOLD, {"Токсичный": 0.0, "Не токсичный": 1.0}
+    """Сбрасывает поля UI к дефолтным значениям."""
+    default_verdict = "<div class='verdict default'><h2>—</h2></div>"
+    return "", DEFAULT_THRESHOLD, default_verdict, {"Токсичный": 0.0, "Не токсичный": 1.0}
 
 # ==============================
-# 5) UI (ИСПРАВЛЕНО)
+# 5) UI (ПОЛНОСТЬЮ ПЕРЕРАБОТАНО)
 # ==============================
 TITLE = "Анализатор токсичности комментариев"
 DESCRIPTION = "Модель на базе `ruBERT-tiny2` для определения токсичности в русскоязычном тексте."
@@ -83,35 +95,48 @@ DESCRIPTION = "Модель на базе `ruBERT-tiny2` для определе
 CUSTOM_CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap');
 :root { --font: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
+.verdict { padding: 1rem; border-radius: 0.5rem; text-align: center; }
+.verdict h2 { margin: 0; }
+.verdict.toxic { background-color: #ffebee; color: #c62828; }
+.verdict.neutral { background-color: #e8f5e9; color: #2e7d32; }
+.verdict.default { background-color: var(--neutral-100); color: var(--neutral-800); }
 """
 
 with gr.Blocks(theme=gr.themes.Default(), css=CUSTOM_CSS) as demo:
     gr.Markdown(f"<div style='text-align: center;'><h1>{TITLE}</h1><p>{DESCRIPTION}</p></div>")
 
     with gr.Row():
-        with gr.Column(scale=3):
-            comment_input = gr.Textbox(
-                label="Текст для анализа",
-                lines=8,
-                placeholder="Напишите что-нибудь..."
-            )
-            thr = gr.Slider(
-                label="Порог классификации",
-                info="Визуально не меняет результат, но влияет на вердикт 'Токсичный'/'Не токсичный' в вашей интерпретации.",
-                minimum=0.0, maximum=1.0,
-                value=DEFAULT_THRESHOLD, step=0.01
-            )
+        # Основная колонка для всего интерфейса
+        with gr.Column():
+            # Группа для ввода данных
+            with gr.Group():
+                comment_input = gr.Textbox(
+                    label="Текст для анализа", lines=6, placeholder="Напишите что-нибудь..."
+                )
+                thr = gr.Slider(
+                    label="Порог классификации",
+                    info="Определяет, при какой вероятности комментарий считается токсичным.",
+                    minimum=0.0, maximum=1.0, value=DEFAULT_THRESHOLD, step=0.01
+                )
+            
+            # Кнопки действий
             with gr.Row():
                 clear_btn = gr.Button("Очистить", variant="secondary")
                 analyze_btn = gr.Button("Анализировать", variant="primary")
-
-        with gr.Column(scale=2):
+            
+            # Блок для вывода результатов
+            gr.Markdown("---")
+            verdict_output = gr.Markdown(
+                value="<div class='verdict default'><h2>—</h2></div>",
+                label="Вердикт (с учетом порога)"
+            )
             result_label = gr.Label(
-                label="Результат",
+                label="Распределение вероятностей (raw output модели)",
                 value={"Токсичный": 0.0, "Не токсичный": 1.0},
                 num_top_classes=2
             )
-            # ИЗМЕНЕНИЕ: gr.Box() заменен на gr.Column(variant="panel") для совместимости
+            
+            # Информация о модели (видимая по умолчанию)
             with gr.Column(variant="panel"):
                 gr.Markdown(
                     """
@@ -123,9 +148,16 @@ with gr.Blocks(theme=gr.themes.Default(), css=CUSTOM_CSS) as demo:
                     """
                 )
 
-    analyze_btn.click(predict_for_ui, [comment_input, thr], [result_label])
-    comment_input.submit(predict_for_ui, [comment_input, thr], [result_label])
-    clear_btn.click(clear_all, [], [comment_input, thr, result_label])
+    # Привязываем UI к функциям (список вывода теперь содержит verdict_output)
+    outputs_list = [verdict_output, result_label]
+    inputs_list = [comment_input, thr]
+    
+    analyze_btn.click(predict_for_ui, inputs_list, outputs_list)
+    comment_input.submit(predict_for_ui, inputs_list, outputs_list)
+
+    clear_outputs_list = [comment_input, thr, verdict_output, result_label]
+    clear_btn.click(clear_all, [], clear_outputs_list)
+
 
 if __name__ == "__main__":
     demo.launch()