Update benchmark

README.md

@@ -1,12 +1,14 @@
 ---
 title: Russian ASR Leaderboard
-emoji: 👁
-colorFrom: purple
-colorTo: indigo
+emoji: 🎶
+colorFrom: azure
+colorTo: teal
 sdk: gradio
 sdk_version: 5.41.1
 app_file: app.py
-pinned: false
+pinned: true
+license: apache-2.0
+tags:
+  - asr
+  - leaderboard
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1,15 +1,28 @@
 import gradio as gr
+import json
 
-from constants import INTRODUCTION_TEXT, METRICS_TAB_TEXT, SUBMIT_TAB_TEXT
-from utils import init_repo, load_data, process_submit, get_datasets_description
+from constants import INTRODUCTION_TEXT
+from utils import (
+    init_repo,
+    load_data,
+    process_submit,
+    get_datasets_description,
+    get_metrics_html,
+    compute_wer_cer,
+    get_submit_html,
+    DATASETS,
+)
 from styles import LEADERBOARD_CSS
 
 init_repo()
+gr.set_static_paths(paths=["."])
 
 with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
     gr.HTML(
-        '<img src="https://cdn.donmai.us/original/67/9c/__taihou_and_surcouf_azur_lane_and_1_more_drawn_by_yunsang__679c42b017a91a2349b25acfc7935157.png" style="width: 100%; height: auto;">'
+        '<img src="/gradio_api/file=Logo.png" '
+        'style="display:block; margin:0 auto; width:34%; height:auto;">'
     )
+
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs():
@@ -17,20 +30,182 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
             leaderboard_html = gr.HTML(value=load_data(), every=60)
 
         with gr.Tab("📈 Метрики"):
-            gr.Markdown(METRICS_TAB_TEXT, elem_classes="markdown-text")
+            gr.HTML(get_metrics_html())
+            with gr.Group():
+                gr.Markdown("### Песочница: посчитайте WER/CER на своих строках")
+                with gr.Row():
+                    ref = gr.Textbox(
+                        label="Референсный текст",
+                        placeholder="например: я люблю машинное обучение",
+                        lines=2,
+                    )
+                    hyp = gr.Textbox(
+                        label="Гипотеза (распознанный текст)",
+                        placeholder="например: я люблю мощинное обучение",
+                        lines=2,
+                    )
+                with gr.Row():
+                    normalize = gr.Checkbox(
+                        value=True,
+                        label="Нормализовать (нижний регистр, без пунктуации)",
+                    )
+                    btn_calc = gr.Button("Посчитать")
+                with gr.Row():
+                    out_wer = gr.Number(label="WER, %", precision=2)
+                    out_cer = gr.Number(label="CER, %", precision=2)
+
+                def _ui_compute(ref_text, hyp_text, norm):
+                    wer, cer = compute_wer_cer(ref_text or "", hyp_text or "", norm)
+                    return wer, cer
+
+                btn_calc.click(
+                    _ui_compute,
+                    inputs=[ref, hyp, normalize],
+                    outputs=[out_wer, out_cer],
+                )
 
         with gr.Tab("📊 Датасеты"):
-            gr.Markdown(get_datasets_description(), elem_classes="markdown-text")
+            gr.HTML(get_datasets_description())
 
         with gr.Tab("✉️ Отправить результат"):
-            gr.Markdown(SUBMIT_TAB_TEXT, elem_classes="markdown-text")
-            json_input = gr.TextArea(label="JSON")
-            submit_btn = gr.Button("🚀 Отправить")
-            output_msg = gr.Textbox(label="Статус")
+            gr.HTML(get_submit_html())
+            with gr.Row():
+                with gr.Column():
+                    model_name = gr.Textbox(
+                        label="Название модели *", placeholder="MyAwesomeASRModel"
+                    )
+                    link = gr.Textbox(
+                        label="Ссылка на модель *",
+                        placeholder="https://huggingface.co/username/model",
+                    )
+                    license_field = gr.Textbox(
+                        label="Лицензия *", placeholder="MIT / Apache-2.0 / Closed"
+                    )
+                with gr.Column():
+                    metrics_json = gr.TextArea(
+                        label="Метрики JSON *",
+                        placeholder='{"Russian_LibriSpeech": {"wer": 0.1234, "cer": 0.0567}, ...}',
+                        lines=16,
+                    )
+
+            submit_btn = gr.Button("🚀 Отправить", elem_classes="full-width-btn")
+            output_msg = gr.HTML()
+
+            def _alert(kind, text):
+                return f'<div class="alert {kind}">{text}</div>'
+
+            def build_json_and_submit(name, link_, lic, metrics_str):
+                name = (name or "").strip()
+                link_ = (link_ or "").strip()
+                lic = (lic or "").strip()
+                if not name:
+                    return (
+                        gr.update(),
+                        _alert("error", "Укажите название модели."),
+                        metrics_str,
+                    )
+                if not link_ or not (
+                    link_.startswith("http://") or link_.startswith("https://")
+                ):
+                    return (
+                        gr.update(),
+                        _alert(
+                            "error", "Ссылка должна начинаться с http:// или https://"
+                        ),
+                        metrics_str,
+                    )
+                if not lic:
+                    return (
+                        gr.update(),
+                        _alert("error", "Укажите лицензию модели."),
+                        metrics_str,
+                    )
+                try:
+                    metrics = json.loads(metrics_str)
+                except Exception as e:
+                    return (
+                        gr.update(),
+                        _alert("error", f"Невалидный JSON метрик: {e}"),
+                        metrics_str,
+                    )
+                if not isinstance(metrics, dict):
+                    return (
+                        gr.update(),
+                        _alert(
+                            "error",
+                            "Метрики должны быть объектом JSON с датасетами верхнего уровня.",
+                        ),
+                        metrics_str,
+                    )
+                missing = [ds for ds in DATASETS if ds not in metrics]
+                extra = [k for k in metrics.keys() if k not in DATASETS]
+                if missing:
+                    return (
+                        gr.update(),
+                        _alert("error", f"Отсутствуют датасеты: {', '.join(missing)}"),
+                        metrics_str,
+                    )
+                if extra:
+                    return (
+                        gr.update(),
+                        _alert("error", f"Лишние ключи в метриках: {', '.join(extra)}"),
+                        metrics_str,
+                    )
+                for ds in DATASETS:
+                    entry = metrics.get(ds)
+                    if not isinstance(entry, dict):
+                        return (
+                            gr.update(),
+                            _alert(
+                                "error",
+                                f"{ds}: значение должно быть объектом с полями wer и cer",
+                            ),
+                            metrics_str,
+                        )
+                    for k in ("wer", "cer"):
+                        v = entry.get(k)
+                        if not isinstance(v, (int, float)):
+                            return (
+                                gr.update(),
+                                _alert("error", f"{ds}: поле {k} должно быть числом"),
+                                metrics_str,
+                            )
+                        if not (0 <= float(v) <= 1):
+                            return (
+                                gr.update(),
+                                _alert(
+                                    "error",
+                                    f"{ds}: поле {k} должно быть в диапазоне [0, 1]",
+                                ),
+                                metrics_str,
+                            )
+                payload = json.dumps(
+                    {
+                        "model_name": name,
+                        "link": link_,
+                        "license": lic,
+                        "metrics": metrics,
+                    },
+                    ensure_ascii=False,
+                )
+                updated_html, status_msg, cleared = process_submit(payload)
+                if updated_html is None:
+                    msg = status_msg.replace("Ошибка:", "").strip()
+                    return (
+                        gr.update(),
+                        _alert("error", f"Не удалось добавить: {msg}"),
+                        metrics_str,
+                    )
+                return (
+                    updated_html,
+                    _alert("success", "✅ Результат добавлен в лидерборд."),
+                    "",
+                )
+
             submit_btn.click(
-                process_submit,
-                inputs=json_input,
-                outputs=[leaderboard_html, output_msg, json_input],
+                build_json_and_submit,
+                inputs=[model_name, link, license_field, metrics_json],
+                outputs=[leaderboard_html, output_msg, metrics_json],
             )
 
 demo.launch()

constants.py

@@ -1,78 +1,13 @@
 import os
 
 INTRODUCTION_TEXT = """
-# Русский ASR Лидерборд
-Добро пожаловать в лидерборд для моделей автоматического распознавания речи (ASR) на русском языке. 
-Здесь вы можете сравнить производительность различных моделей по метрикам WER (Word Error Rate) и CER (Character Error Rate) на нескольких датасетах.
-Лидерборд сортируется по среднему WER (⬇️ - чем ниже, тем лучше).
-Наведите курсор на значение WER в колонке датасета, чтобы увидеть CER.
-Все метрики указаны в процентах (%).
+# Русский ASR-лидерборд
+Площадка для честного сравнения моделей распознавания русской речи. Мы считаем WER и CER на единых тестовых наборах и сортируем модели по среднему WER (ниже — лучше). Наведите курсор на значение WER в колонке датасета, чтобы увидеть CER. Все метрики указаны в процентах.
 """
 
-METRICS_TAB_TEXT = """
-# Метрики
-Метрики рассчитываются на текстах в нижнем регистре и без пунктуации.
-
-- **WER (Word Error Rate)**: Ошибка на уровне слов. Рассчитывается как:
-
-$$ WER = \\frac{S + D + I}{N} $$
-
-где S - количество замен, D - удалений,  I - вставок, N - количество слов в референсе.
-
-- **CER (Character Error Rate)**: Ошибка на уровне символов. Аналогичная формула, но для символов:
-
-$$ CER = \\frac{S + D + I}{N} $$
-
-где S, D, I, N - соответственно замены, удаления, вставки и количество символов в референсе.
-
-- **Средние значения**: Простое среднее по всем датасетам.
-- Все метрики нормализованы и представлены в процентах для удобства сравнения.
-"""
-
-SUBMIT_TAB_TEXT = """
-# Отправить результат
-Чтобы добавить вашу модель в лидерборд, отправьте JSON с результатами. Метрики должны быть в диапазоне [0, 1] (не в процентах).
-
-Формат:
-```json
-{
-  "model_name": "MyAwesomeASRModel",
-  "link": "https://huggingface.co/myusername/my-asr-model",
-  "license": "Apache-2.0",
-  "metrics": {
-    "Russian_LibriSpeech": {
-      "wer": 0.1234,
-      "cer": 0.0567
-    },
-    "Common_Voice_Corpus_22.0": {
-      "wer": 0.2345,
-      "cer": 0.0789
-    },
-    "Tone_Webinars": {
-      "wer": 0.3456,
-      "cer": 0.0987
-    },
-    "Tone_Books": {
-      "wer": 0.4567,
-      "cer": 0.1098
-    },
-    "Tone_Speak": {
-      "wer": 0.5678,
-      "cer": 0.1209
-    },
-    "Sova_RuDevices": {
-      "wer": 0.6789,
-      "cer": 0.1310
-    }
-  }
-}
-```
-
-В отчёте обязательно должны быть все датасеты, а именно: Russian_LibriSpeech, Common_Voice_Corpus_22.0, Tone_Webinars, Tone_Books, Tone_Speak, Sova_RuDevices.
-После отправки лидерборд обновится автоматически.
-"""
 REPO_ID = "Vikhrmodels/russian-asr-leaderboard"
 HF_TOKEN = os.getenv("HF_TOKEN")
+
 DATASETS = [
     "Russian_LibriSpeech",
     "Common_Voice_Corpus_22.0",
@@ -81,36 +16,38 @@ DATASETS = [
     "Tone_Speak",
     "Sova_RuDevices",
 ]
+
 SHORT_DATASET_NAMES = ["RuLS", "CV 22.0", "Webinars", "Books", "Speak", "Sova"]
+
 DATASET_DESCRIPTIONS = {
     "RuLS": {
         "full_name": "Russian_LibriSpeech",
-        "description": "Russian LibriSpeech (RuLS) — датасет на основе аудиокниг из общественного достояния от LibriVox, содержащий около 98 часов русской речи с транскрипциями.",
+        "description": "Корпус на основе русскоязычных аудиокниг LibriVox. Около 98 часов речи с верифицированными транскрипциями.",
         "num_rows": 1352,
     },
     "CV 22.0": {
         "full_name": "Common_Voice_Corpus_22.0",
-        "description": "Common Voice — краудсорсинговый многоязычный корпус речи от Mozilla. Версия 22.0 включает данные русской речи с транскрипциями.",
+        "description": "Краудсорсинговый многоязычный корпус Mozilla Common Voice. Версия 22.0 содержит русскую речь с транскрипциями.",
         "num_rows": 10244,
     },
     "Webinars": {
         "full_name": "Tone_Webinars",
-        "description": "Tone_Webinars — датасет русской речи из вебинаров с транскрипциями.",
+        "description": "Речь из образовательных вебинаров. Разнообразные дикторы и темы, близкие к реальным сценариям.",
         "num_rows": 21587,
     },
     "Books": {
         "full_name": "Tone_Books",
-        "description": "Tone_Books — датасет русских аудиокниг с транскрипциями.",
-        "num_rows": 4938,
+        "description": "Фрагменты русских аудиокниг. Чистая дикторская речь и аккуратные транскрипции.",
+        "num_rows": 4930,
     },
     "Speak": {
         "full_name": "Tone_Speak",
-        "description": "Tone_Speak — датасет синтетической русской речи с транскрипциями.",
+        "description": "Синтетическая русская речь. Полезна для оценки устойчивости к TTS-голосам.",
         "num_rows": 700,
     },
     "Sova": {
         "full_name": "Sova_RuDevices",
-        "description": "SOVA RuDevices — акустический корпус примерно 100 часов 16kHz живой русской речи, записанной на устройствах, с ручной транскрипцией.",
+        "description": "Около 100 часов живой русской речи, записанной на устройствах 16 kHz. Тщательно размеченные транскрипции.",
         "num_rows": 5799,
     },
 }

styles.py

@@ -1,23 +1,72 @@
 LEADERBOARD_CSS = """
-    .leaderboard-wrapper { overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; margin-bottom: 40px; }
-    .leaderboard-wrapper::-webkit-scrollbar { display: none; }
-    .leaderboard-table { min-width: 100%; }
-    .leaderboard-table table { border-collapse: collapse; width: 100%; }
-    .leaderboard-table th, .leaderboard-table td { border: 1px solid #ddd; padding: 8px; text-align: center; }
-    .leaderboard-table th { background-color: #f2f2f2; font-weight: bold; }
-    .leaderboard-table tr:nth-child(even) { background-color: #f9f9f9; }
-    .leaderboard-table tr:hover { background-color: #f1f1f1; }
+    /* ====== Leaderboard ====== */
+    .leaderboard-wrapper { overflow-x: auto; margin-bottom: 40px; }
+    .leaderboard-table table { width: 100%; border-collapse: collapse; }
+    .leaderboard-table th, .leaderboard-table td { text-align: center; padding: 8px; }
     .leaderboard-table a { color: #0366d6; text-decoration: none; }
     .leaderboard-table a:hover { text-decoration: underline; }
-    .leaderboard-table span { cursor: pointer; }
-    /* Dark mode */
+    .metric-cell { cursor: help; display:inline-block; padding:2px 6px; border-radius: 8px; }
+    .best-metric { position: relative; background: rgba(88,166,255,.16); box-shadow: inset 0 0 0 1px rgba(88,166,255,.35); font-weight: 600; }
+    .best-metric:before { content: "★"; margin-right: 6px; font-size: 0.9em; color: #3b82f6; }
+    .dark .best-metric { background: rgba(88,166,255,.28); box-shadow: inset 0 0 0 1px rgba(88,166,255,.5); }
+    .dark .best-metric:before { color: #58a6ff; }
+
     .dark .leaderboard-table th, .dark .leaderboard-table td { border-color: #30363d; color: #e0e0e0; }
     .dark .leaderboard-table th { background-color: #21262d; }
-    .dark .leaderboard-table tr:nth-child(even) { background-color: #161b22; }
-    .dark .leaderboard-table tr:hover { background-color: #0d1117; }
     .dark .leaderboard-table a { color: #58a6ff; }
-    /* Other CSS */
+
+    /* ====== Container & Markdown ====== */
     .gradio-container { max-width: 1400px; margin: auto; padding: 20px; }
     .markdown-text { color: #24292e; padding: 15px; border-radius: 6px; background-color: #f6f8fa; margin-bottom: 20px; }
     .dark .markdown-text { color: #c9d1d9; background-color: #161b22; }
+
+    /* ====== Dataset cards ====== */
+    .datasets-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
+    .dataset-card { background: #f6f8fa; border-radius: 8px; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: transform .2s ease; }
+    .dataset-card:hover { transform: translateY(-4px); }
+    .dataset-card h3 { margin: 0 0 8px; color: #0366d6; }
+    .dataset-card .full-name { font-size: .85em; color: #4b5563; }
+    .dataset-card p { margin: 5px 0; }
+    .dataset-card .records { display:inline-block; padding: 2px 10px; border-radius: 999px; background: #eaf2ff; color: #0b63ce; font-weight: 600; }
+    .dark .dataset-card { background: #161b22; color: #c9d1d9; }
+    .dark .dataset-card h3 { color: #58a6ff; }
+    .dark .dataset-card .full-name { color: #a9c4e2; }
+    .dark .dataset-card .records { background: #0f2a45; color: #9bd1ff; }
+
+    /* ====== Metrics cards ====== */
+    .metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
+    .metric-card { background: #f6f8fa; border-radius: 12px; padding: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.04); color:#1f2937; }
+    .metric-card h3 { margin: 0 0 10px; color:#0b63ce; }
+    .metric-text { margin: 6px 0 0; }
+    .dark .metric-card { background:#161b22; color:#c9d1d9; }
+    .dark .metric-card h3 { color:#9bd1ff; }
+
+    .formula {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        font-size: 15px; border-radius: 8px; padding: 8px 10px;
+        background: #eef3ff; color:#0b2a55; display: inline-block;
+    }
+    .formula span { font-weight: 700; }
+    .dark .formula { background: #0f1f33; color:#deecff; }
+
+    .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 10px; }
+    .chip { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 10px; background: #ffffff; border: 1px solid #e5e7eb; color:#111827; }
+    .chip b { font-size: 13px; }
+    .chip small { font-size: 12px; opacity: .9; }
+    .dark .chip { background: #0f172a; border-color: #22304a; color:#e5e7eb; }
+
+    /* ====== Submit form ====== */
+    .submit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
+    .form-card { background: #f6f8fa; padding: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
+    .form-card h3 { margin-top: 0; color: #0366d6; }
+    .dark .form-card { background: #161b22; color: #c9d1d9; }
+    .dark .form-card h3 { color: #58a6ff; }
+    @media (max-width: 900px) { .submit-grid { grid-template-columns: 1fr; } }
+
+    /* ====== Alerts ====== */
+    .alert { padding:12px 14px; border-radius:8px; margin-top:10px; font-weight:500; }
+    .alert.success { background:#e6f7ed; color:#0f5132; border:1px solid #b7ebc6; }
+    .dark .alert.success { background:#0f2a1d; color:#a6f3c2; border-color:#1f5c3a; }
+    .alert.error { background:#fdecea; color:#842029; border:1px solid #f5c2c7; }
+    .dark .alert.error { background:#3a0b0e; color:#f5a3aa; border-color:#7a1a21; }
 """

utils.py

@@ -4,6 +4,7 @@ from statistics import mean
 from huggingface_hub import HfApi, create_repo
 from datasets import load_dataset, Dataset
 from datasets.data_files import EmptyDatasetError
+import re
 
 from constants import (
     REPO_ID,
@@ -38,16 +39,19 @@ def load_data():
     if not df.empty:
         df = df.sort_values("overall_wer").reset_index(drop=True)
         df.insert(0, "rank", df.index + 1)
+        for col in (
+            ["overall_wer", "overall_cer"]
+            + [f"wer_{ds}" for ds in DATASETS]
+            + [f"cer_{ds}" for ds in DATASETS]
+        ):
+            df[col] = (df[col] * 100).round(2)
 
-        df["overall_wer"] = (df["overall_wer"] * 100).round(2).apply(lambda x: f"{x}")
-        df["overall_cer"] = (df["overall_cer"] * 100).round(2).apply(lambda x: f"{x}")
-        for ds in DATASETS:
-            df[f"wer_{ds}"] = (df[f"wer_{ds}"] * 100).round(2)
-            df[f"cer_{ds}"] = (df[f"cer_{ds}"] * 100).round(2)
-
+        best_values = {ds: df[f"wer_{ds}"].min() for ds in DATASETS}
         for short_ds, ds in zip(SHORT_DATASET_NAMES, DATASETS):
             df[short_ds] = df.apply(
-                lambda row: f'<span title="CER: {row[f"cer_{ds}"]:.2f}" style="cursor: help;">{row[f"wer_{ds}"]:.2f}</span>',
+                lambda row: f'<span title="CER: {row[f"cer_{ds}"]:.2f}%" '
+                f'class="metric-cell{" best-metric" if row[f"wer_{ds}"] == best_values[ds] else ""}">'
+                f"{row[f'wer_{ds}']:.2f}%</span>",
                 axis=1,
             )
             df = df.drop(columns=[f"wer_{ds}", f"cer_{ds}"])
@@ -56,7 +60,6 @@ def load_data():
             lambda row: f'<a href="{row["link"]}" target="_blank">{row["model_name"]}</a>',
             axis=1,
         )
-
         df = df.drop(columns=["link"])
 
         df["license"] = df["license"].apply(
@@ -67,6 +70,10 @@ def load_data():
             else "Закрытая"
         )
 
+        df["rank"] = df["rank"].apply(
+            lambda r: "🥇" if r == 1 else "🥈" if r == 2 else "🥉" if r == 3 else str(r)
+        )
+
         df.rename(
             columns={
                 "overall_wer": "Средний WER ⬇️",
@@ -78,8 +85,24 @@ def load_data():
             inplace=True,
         )
 
-        table_html = df.to_html(escape=False, index=False)
-        return f'<div class="leaderboard-wrapper"><div class="leaderboard-table">{table_html}</div></div>'
+        table_html = df.to_html(
+            escape=False, index=False, classes="display cell-border compact stripe"
+        )
+        scripts = """
+<link rel="stylesheet" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
+<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+<script src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
+<script>
+$(document).ready(function(){
+    $('.leaderboard-table table').DataTable({
+        pageLength: 25,
+        order: [[3, 'asc']],
+        language: { url: '//cdn.datatables.net/plug-ins/1.13.4/i18n/ru.json' }
+    });
+});
+</script>
+"""
+        return f'<div class="leaderboard-wrapper"><div class="leaderboard-table">{table_html}</div></div>{scripts}'
     else:
         return (
             '<div class="leaderboard-wrapper"><div class="leaderboard-table"><table><thead><tr><th>Ранг</th><th>Модель</th><th>Тип модели</th><th>Средний WER ⬇️</th><th>Средний CER ⬇️</th>'
@@ -96,21 +119,17 @@ def process_submit(json_str):
     )
     try:
         data = json.loads(json_str)
-        
         required_keys = ["model_name", "link", "license", "metrics"]
         if not all(key in data for key in required_keys):
             raise ValueError(
                 "Неверная структура JSON. Требуемые поля: model_name, link, license, metrics"
             )
-
         metrics = data["metrics"]
         if set(metrics.keys()) != set(DATASETS):
             raise ValueError(
                 f"Метрики должны быть для всех датасетов: {', '.join(DATASETS)}"
             )
-
-        wers = []
-        cers = []
+        wers, cers = [], []
         row = {
             "model_name": data["model_name"],
             "link": data["link"],
@@ -123,7 +142,6 @@ def process_submit(json_str):
             row[f"cer_{ds}"] = metrics[ds]["cer"]
             wers.append(metrics[ds]["wer"])
             cers.append(metrics[ds]["cer"])
-
         row["overall_wer"] = mean(wers)
         row["overall_cer"] = mean(cers)
 
@@ -132,6 +150,7 @@ def process_submit(json_str):
             df = dataset["train"].to_pandas()
         except EmptyDatasetError:
             df = pd.DataFrame(columns=columns)
+
         new_df = pd.concat([df, pd.DataFrame([row])], ignore_index=True)
         new_dataset = Dataset.from_pandas(new_df)
         new_dataset.push_to_hub(REPO_ID, token=HF_TOKEN)
@@ -143,7 +162,111 @@ def process_submit(json_str):
 
 
 def get_datasets_description():
-    desc = "# Описание датасетов\n\n"
+    html = '<div class="datasets-container">'
     for short_ds, info in DATASET_DESCRIPTIONS.items():
-        desc += f"### {short_ds} ({info['full_name']})\n{info['description']}\n- Количество записей: {info['num_rows']}\n\n"
-    return desc
+        html += f"""
+        <div class="dataset-card">
+            <h3>{short_ds} <span class="full-name">{info["full_name"]}</span></h3>
+            <p>{info["description"]}</p>
+            <p class="records">📊 {info["num_rows"]} записей</p>
+        </div>
+        """
+    html += "</div>"
+    return html
+
+
+def _strip_punct(text: str) -> str:
+    return re.sub(r"[^\w\s]+", "", text, flags=re.UNICODE)
+
+
+def normalize_text(s: str) -> str:
+    return _strip_punct(s.lower()).strip()
+
+
+def _edit_distance(a, b):
+    n, m = len(a), len(b)
+    dp = [[0] * (m + 1) for _ in range(n + 1)]
+    for i in range(n + 1):
+        dp[i][0] = i
+    for j in range(m + 1):
+        dp[0][j] = j
+    for i in range(1, n + 1):
+        ai = a[i - 1]
+        for j in range(1, m + 1):
+            cost = 0 if ai == b[j - 1] else 1
+            dp[i][j] = min(dp[i - 1][j] + 1, dp[i][j - 1] + 1, dp[i - 1][j - 1] + cost)
+    return dp[n][m]
+
+
+def compute_wer_cer(ref: str, hyp: str, normalize: bool = True):
+    if normalize:
+        ref_norm, hyp_norm = normalize_text(ref), normalize_text(hyp)
+    else:
+        ref_norm, hyp_norm = ref, hyp
+    ref_words, hyp_words = ref_norm.split(), hyp_norm.split()
+    Nw = max(1, len(ref_words))
+    wer = _edit_distance(ref_words, hyp_words) / Nw
+    ref_chars, hyp_chars = list(ref_norm), list(hyp_norm)
+    Nc = max(1, len(ref_chars))
+    cer = _edit_distance(ref_chars, hyp_chars) / Nc
+    return round(wer * 100, 2), round(cer * 100, 2)
+
+
+def get_metrics_html():
+    return """
+<div class="metrics-grid">
+  <div class="metric-card">
+    <h3>WER — Word Error Rate</h3>
+    <div class="formula">WER = ( <span>S</span> + <span>D</span> + <span>I</span> ) / <span>N</span></div>
+    <div class="chips">
+      <div class="chip"><b>S</b><small>замены</small></div>
+      <div class="chip"><b>D</b><small>удаления</small></div>
+      <div class="chip"><b>I</b><small>вставки</small></div>
+      <div class="chip"><b>N</b><small>слов в референсе</small></div>
+    </div>
+  </div>
+  <div class="metric-card">
+    <h3>CER — Character Error Rate</h3>
+    <div class="formula">CER = ( <span>S</span> + <span>D</span> + <span>I</span> ) / <span>N</span></div>
+    <div class="chips">
+      <div class="chip"><b>S, D, I</b><small>операции редактирования</small></div>
+      <div class="chip"><b>N</b><small>символов в референсе</small></div>
+    </div>
+  </div>
+  <div class="metric-card">
+    <h3>Нормализация</h3>
+    <p class="metric-text">Перед расчётом приводим текст к нижнему регистру и удаляем пунктуацию.</p>
+  </div>
+  <div class="metric-card">
+    <h3>Сравнение</h3>
+    <p class="metric-text">Сортировка по среднему WER по всем датасетам. Метрики отображаются в процентах.</p>
+  </div>
+</div>
+"""
+
+
+def get_submit_html():
+    return """
+<div class="submit-grid">
+  <div class="form-card">
+    <h3>Общая информация</h3>
+    <ul>
+      <li><b>Название модели</b> — коротко и понятно.</li>
+      <li><b>Ссылка</b> — HuggingFace, GitHub или сайт.</li>
+      <li><b>Лицензия</b> — MIT, Apache-2.0, GPL или Closed.</li>
+    </ul>
+  </div>
+  <div class="form-card">
+    <h3>Метрики</h3>
+    <p>Укажите WER и CER для всех датасетов в формате JSON. Значения — от 0 до 1.</p>
+    <pre>{
+  "Russian_LibriSpeech": {"wer": 0.1234, "cer": 0.0567},
+  "Common_Voice_Corpus_22.0": {"wer": 0.2345, "cer": 0.0789},
+  "Tone_Webinars": {"wer": 0.3456, "cer": 0.0987},
+  "Tone_Books": {"wer": 0.4567, "cer": 0.1098},
+  "Tone_Speak": {"wer": 0.5678, "cer": 0.1209},
+  "Sova_RuDevices": {"wer": 0.6789, "cer": 0.1310}
+}</pre>
+  </div>
+</div>
+"""