Update app.py

app.py

@@ -1,8 +1,10 @@
 import gradio as gr
 import numpy as np
 import matplotlib.pyplot as plt
+import io
+from PIL import Image
 
-# Зададим фиктивные оценки (по шкале 0–10) для каждой модели, задачи и критерия
+# Данные
 metrics = {
     "Классификация обращений": {
         "ChatGPT":   {"Точность": 8, "Интерпретируемость": 7, "Стабильность": 7, "Время отклика": 6, "Применимость": 8},
@@ -21,114 +23,121 @@ metrics = {
     }
 }
 
-# Функция-обработчик, обновляющая карточки и графики на основе выбранной задачи и критериев
+# Вспомогательная функция: сохраняем matplotlib-plot как изображение
+def fig_to_image(fig):
+    buf = io.BytesIO()
+    fig.savefig(buf, format="png", bbox_inches="tight", dpi=150)
+    buf.seek(0)
+    img = Image.open(buf)
+    return img
+
+# Главная функция обновления
 def update(task, selected_criteria):
-    # Список моделей для обхода
     models = ["ChatGPT", "GigaChat", "DeepSeek"]
-    # Формируем содержимое карточек (HTML) для каждой модели
     cards = []
+
     for model in models:
         vals = metrics[task][model]
-        # Если выбраны фильтры, отфильтруем критерии; иначе используем все критерии
         criteria = selected_criteria if selected_criteria else list(vals.keys())
-        # Создаём HTML-код списка критериев и оценок
         items_html = ""
         for crit in criteria:
             score = vals[crit]
-            # Определяем краткое описание по значению (например, >=8 — "Высокая", 5-7 — "Средняя", <5 — "Низкая")
-            if score >= 8:
-                desc = "Высокая"
-            elif score >= 5:
-                desc = "Средняя"
-            else:
-                desc = "Низкая"
+            desc = "Высокая" if score >= 8 else "Средняя" if score >= 5 else "Низкая"
             items_html += f"<li>{crit}: {score}/10 ({desc})</li>"
         card_html = f"""
-        <div class="card">
+        <div class="card dark-card">
           <h3>{model}</h3>
           <ul>{items_html}</ul>
         </div>
         """
         cards.append(card_html)
-    
-    # График 1: сравнение моделей по выбранным критериям
-    fig1, ax1 = plt.subplots(figsize=(4.5, 3))
-    # Если нет выбранных критериев — используем все по умолчанию
+
     criteria = selected_criteria if selected_criteria else list(metrics[task][models[0]].keys())
     x = np.arange(len(models))
     width = 0.8 / len(criteria)
+
+    # График 1: сравнение по критериям
+    fig1, ax1 = plt.subplots(figsize=(5, 3))
     for i, crit in enumerate(criteria):
-        # Соберём оценки для каждого модели по критерию
         values = [metrics[task][m][crit] for m in models]
-        ax1.bar(x + i*width, values, width, label=crit)
-    # Подписи и легенда
+        bars = ax1.bar(x + i * width, values, width, label=crit)
+        for bar in bars:
+            height = bar.get_height()
+            ax1.annotate(f'{height}', xy=(bar.get_x() + bar.get_width() / 2, height + 0.1),
+                         ha='center', fontsize=8)
     ax1.set_xticks(x + width*(len(criteria)-1)/2)
     ax1.set_xticklabels(models)
-    ax1.set_ylim(0, 10)
+    ax1.set_ylim(0, 10.5)
     ax1.set_ylabel("Оценка (0-10)")
-    ax1.set_title("Сравнение моделей по критериям")
-    ax1.legend(fontsize=8)
-    ax1.grid(axis='y', linestyle='--', alpha=0.5)
-    plt.tight_layout()
-    
-    # График 2: средняя оценка моделей по всем задачам (среднее по 5 критериям для каждой модели и задачи)
-    # Рассчитаем средний балл каждой модели по текущей задаче
+    ax1.set_title(f"Сравнение моделей по критериям\nЗадача: {task}")
+    ax1.legend(fontsize=7)
+    ax1.grid(axis='y', linestyle='--', alpha=0.3)
+    fig1.patch.set_facecolor('#1e1e1e')
+    ax1.set_facecolor('#1e1e1e')
+    ax1.tick_params(colors='white')
+    ax1.yaxis.label.set_color('white')
+    ax1.xaxis.label.set_color('white')
+    ax1.title.set_color('white')
+    ax1.legend().get_frame().set_facecolor('#2e2e2e')
+    ax1.legend().get_frame().set_edgecolor('#444')
+
+    # График 2: средние оценки
     avg_scores = []
     for model in models:
         vals = metrics[task][model]
-        avg_score = np.mean(list(vals.values()))
-        avg_scores.append(avg_score)
-    fig2, ax2 = plt.subplots(figsize=(4.5, 3))
-    ax2.bar(models, avg_scores, color=['#4c78a8','#f58518','#54a24b'])
-    ax2.set_ylim(0, 10)
+        avg = np.mean([vals[crit] for crit in criteria])
+        avg_scores.append(avg)
+
+    fig2, ax2 = plt.subplots(figsize=(5, 3))
+    bars = ax2.bar(models, avg_scores, color=['#4c78a8','#f58518','#54a24b'])
+    for bar in bars:
+        height = bar.get_height()
+        ax2.annotate(f'{height:.1f}', xy=(bar.get_x() + bar.get_width() / 2, height + 0.1),
+                     ha='center', fontsize=8)
+    ax2.set_ylim(0, 10.5)
     ax2.set_ylabel("Средний балл")
     ax2.set_title("Средний балл моделей")
-    ax2.grid(axis='y', linestyle='--', alpha=0.5)
-    plt.tight_layout()
-    
-    # Определяем лидера: модель с максимальным суммой баллов по выбранным критериям
-    if selected_criteria:
-        sums = {model: sum(metrics[task][model][crit] for crit in selected_criteria) for model in models}
-    else:
-        sums = {model: sum(metrics[task][model].values()) for model in models}
+    ax2.grid(axis='y', linestyle='--', alpha=0.3)
+    fig2.patch.set_facecolor('#1e1e1e')
+    ax2.set_facecolor('#1e1e1e')
+    ax2.tick_params(colors='white')
+    ax2.yaxis.label.set_color('white')
+    ax2.xaxis.label.set_color('white')
+    ax2.title.set_color('white')
+
+    # Лидер по сумме выбранных критериев
+    sums = {model: sum(metrics[task][model][crit] for crit in criteria) for model in models}
     leader = max(sums, key=sums.get)
-    result_text = f"Модель **{leader}** лидирует по выбранным критериям в задаче **{task}**."
-    
-    # Возвращаем HTML-карточки, два графика и текст результата
-    # Gradio поддерживает возвращение нескольких компонентов: (str, str, str, fig, fig, str)
-    return cards[0], cards[1], cards[2], fig1, fig2, result_text
+    result = f"📌 **Модель `{leader}` лидирует** по выбранным критериям в задаче **{task}**."
 
-# CSS-стили для дашборда (единый шрифт, стилизация карточек и выравнивание)
+    return cards[0], cards[1], cards[2], fig_to_image(fig1), fig_to_image(fig2), result
+
+# Тёмный стиль
 css = """
-.gradio-container { font-family: Arial, sans-serif; background-color: #f0f2f5; padding: 20px; }
-.card { background: white; border: 1px solid #ccc; border-radius: 8px; padding: 10px; margin: 10px; }
-.card h3 { text-align: center; margin: 0 0 5px 0; }
-.card ul { list-style: none; padding-left: 0; }
-.card li { margin: 4px 0; font-size: 14px; }
+.gradio-container { font-family: Arial, sans-serif; background-color: #181818; color: white; }
+.card.dark-card { background: #2e2e2e; border-radius: 8px; padding: 10px; margin: 10px; }
+.card.dark-card h3 { text-align: center; color: #fff; margin-bottom: 6px; }
+.card.dark-card ul { list-style: none; padding-left: 0; color: #ddd; font-size: 14px; }
+.card.dark-card li { margin: 4px 0; }
 """
 
-# Построение интерфейса с помощью Blocks
-with gr.Blocks(css=css) as demo:
+# Интерфейс
+with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
     gr.Markdown("## Сравнение моделей ChatGPT, GigaChat и DeepSeek", elem_id="title")
     with gr.Row():
         with gr.Column(scale=2):
-            task_dropdown = gr.Dropdown(label="Выбор задачи",
-                                        choices=list(metrics.keys()),
-                                        value="Классификация обращений")
-            criteria_check = gr.CheckboxGroup(label="Фильтр критериев",
-                                              choices=list(next(iter(metrics.values()))["ChatGPT"].keys()))
-        # Три колонки для карточек моделей
-        card1 = gr.HTML(elem_classes="card")
-        card2 = gr.HTML(elem_classes="card")
-        card3 = gr.HTML(elem_classes="card")
+            task_dropdown = gr.Dropdown(label="Выбор задачи", choices=list(metrics.keys()), value="Классификация обращений")
+            criteria_check = gr.CheckboxGroup(label="Фильтр критериев", choices=list(next(iter(metrics.values()))["ChatGPT"].keys()))
+        card1 = gr.HTML()
+        card2 = gr.HTML()
+        card3 = gr.HTML()
     with gr.Row():
-        chart1 = gr.Plot(label="Сравнение по критериям")
-        chart2 = gr.Plot(label="Средний балл")
-    result_md = gr.Markdown(label="Лидер")
-    
-    # Привязываем обновление к изменениям выбора задачи и критериев
+        chart1 = gr.Image(label="Сравнение по критериям", interactive=True)
+        chart2 = gr.Image(label="Средний балл", interactive=True)
+    result_md = gr.Markdown()
+
+    # Обновление при выборе
     task_dropdown.change(update, [task_dropdown, criteria_check], [card1, card2, card3, chart1, chart2, result_md])
     criteria_check.change(update, [task_dropdown, criteria_check], [card1, card2, card3, chart1, chart2, result_md])
 
-# Запуск приложения (локально)
 demo.launch()