Update style

app.py

@@ -1,7 +1,7 @@
 import gradio as gr
 import json
 
-from constants import INTRODUCTION_TEXT
+from constants import INTRODUCTION_TEXT, DATASETS
 from utils import (
     init_repo,
     load_data,
@@ -10,10 +10,34 @@ from utils import (
     get_metrics_html,
     compute_wer_cer,
     get_submit_html,
-    DATASETS,
 )
 from styles import LEADERBOARD_CSS
 
+ASSETS_HTML = """
+<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>
+window.initLeaderboardDT = function(){
+  try{
+    if (!window.jQuery || !$.fn.DataTable) return;
+    document.querySelectorAll('.leaderboard-table table:not(.dt-ready)').forEach(function(tbl){
+      $(tbl).addClass('dt-ready').DataTable({
+        pageLength: 25,
+        order: [[3, 'asc']],
+        language: { url: 'https://cdn.datatables.net/plug-ins/1.13.4/i18n/ru.json' }
+      });
+    });
+  }catch(e){}
+};
+const tryInit = () => window.initLeaderboardDT && window.initLeaderboardDT();
+document.addEventListener('DOMContentLoaded', tryInit);
+const mo = new MutationObserver(tryInit);
+mo.observe(document.documentElement, { childList: true, subtree: true });
+setTimeout(tryInit, 300);
+</script>
+"""
+
 init_repo()
 gr.set_static_paths(paths=["."])
 
@@ -22,7 +46,7 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
         '<img src="/gradio_api/file=Logo.png" '
         'style="display:block; margin:0 auto; width:34%; height:auto;">'
     )
-
+    gr.HTML(ASSETS_HTML)
     gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
 
     with gr.Tabs():
@@ -34,16 +58,8 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
             with gr.Group():
                 gr.Markdown("### Песочница: посчитайте WER/CER на своих строках")
                 with gr.Row():
-                    ref = gr.Textbox(
-                        label="Референсный текст",
-                        placeholder="например: я люблю машинное обучение",
-                        lines=2,
-                    )
-                    hyp = gr.Textbox(
-                        label="Гипотеза (распознанный текст)",
-                        placeholder="например: я люблю мощинное обучение",
-                        lines=2,
-                    )
+                    ref = gr.Textbox(label="Референсный текст", lines=2)
+                    hyp = gr.Textbox(label="Гипотеза (распознанный текст)", lines=2)
                 with gr.Row():
                     normalize = gr.Checkbox(
                         value=True,
@@ -88,7 +104,7 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                         lines=16,
                     )
 
-            submit_btn = gr.Button("🚀 Отправить", elem_classes="full-width-btn")
+            submit_btn = gr.Button("🚀 Отправить")
             output_msg = gr.HTML()
 
             def _alert(kind, text):
@@ -102,6 +118,9 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                     return (
                         gr.update(),
                         _alert("error", "Укажите название модели."),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 if not link_ or not (
@@ -112,12 +131,18 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                         _alert(
                             "error", "Ссылка должна начинаться с http:// или https://"
                         ),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 if not lic:
                     return (
                         gr.update(),
                         _alert("error", "Укажите лицензию модели."),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 try:
@@ -126,6 +151,9 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                     return (
                         gr.update(),
                         _alert("error", f"Невалидный JSON метрик: {e}"),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 if not isinstance(metrics, dict):
@@ -135,6 +163,9 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                             "error",
                             "Метрики ��олжны быть объектом JSON с датасетами верхнего уровня.",
                         ),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 missing = [ds for ds in DATASETS if ds not in metrics]
@@ -143,12 +174,18 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                     return (
                         gr.update(),
                         _alert("error", f"Отсутствуют датасеты: {', '.join(missing)}"),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 if extra:
                     return (
                         gr.update(),
                         _alert("error", f"Лишние ключи в метриках: {', '.join(extra)}"),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 for ds in DATASETS:
@@ -160,6 +197,9 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                                 "error",
                                 f"{ds}: значение должно быть объектом с полями wer и cer",
                             ),
+                            name,
+                            link_,
+                            lic,
                             metrics_str,
                         )
                     for k in ("wer", "cer"):
@@ -168,6 +208,9 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                             return (
                                 gr.update(),
                                 _alert("error", f"{ds}: поле {k} должно быть числом"),
+                                name,
+                                link_,
+                                lic,
                                 metrics_str,
                             )
                         if not (0 <= float(v) <= 1):
@@ -177,6 +220,9 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                                     "error",
                                     f"{ds}: поле {k} должно быть в диапазоне [0, 1]",
                                 ),
+                                name,
+                                link_,
+                                lic,
                                 metrics_str,
                             )
                 payload = json.dumps(
@@ -188,24 +234,37 @@ with gr.Blocks(css=LEADERBOARD_CSS, theme=gr.themes.Soft()) as demo:
                     },
                     ensure_ascii=False,
                 )
-                updated_html, status_msg, cleared = process_submit(payload)
+                updated_html, status_msg, _ = process_submit(payload)
                 if updated_html is None:
                     msg = status_msg.replace("Ошибка:", "").strip()
                     return (
                         gr.update(),
                         _alert("error", f"Не удалось добавить: {msg}"),
+                        name,
+                        link_,
+                        lic,
                         metrics_str,
                     )
                 return (
                     updated_html,
                     _alert("success", "✅ Результат добавлен в лидерборд."),
                     "",
+                    "",
+                    "",
+                    "",
                 )
 
             submit_btn.click(
                 build_json_and_submit,
                 inputs=[model_name, link, license_field, metrics_json],
-                outputs=[leaderboard_html, output_msg, metrics_json],
+                outputs=[
+                    leaderboard_html,
+                    output_msg,
+                    model_name,
+                    link,
+                    license_field,
+                    metrics_json,
+                ],
             )
 
 demo.launch()

styles.py

@@ -1,5 +1,4 @@
 LEADERBOARD_CSS = """
-    /* ====== 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; }
@@ -15,12 +14,10 @@ LEADERBOARD_CSS = """
     .dark .leaderboard-table th { background-color: #21262d; }
     .dark .leaderboard-table a { color: #58a6ff; }
 
-    /* ====== 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); }
@@ -33,7 +30,6 @@ LEADERBOARD_CSS = """
     .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; }
@@ -55,7 +51,6 @@ LEADERBOARD_CSS = """
     .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; }
@@ -63,10 +58,35 @@ LEADERBOARD_CSS = """
     .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; }
+
+    .code-block {
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+        font-size: 13px;
+        padding: 12px 14px;
+        border-radius: 8px;
+        overflow-x: auto;
+        border: 1px solid #ddd;
+        background: #f5f5f5;
+        color: #111;
+    }
+    .code-block.json {
+        background: #1e1e1e;
+        border-color: #333;
+        color: #d4d4d4;
+    }
+    .dark .code-block.json {
+        background: #1e1e1e;
+        border-color: #333;
+        color: #d4d4d4;
+    }
+    .code-block.json .string  { color: #ce9178; }
+    .code-block.json .number  { color: #b5cea8; }
+    .code-block.json .boolean { color: #569cd6; }
+    .code-block.json .null    { color: #569cd6; }
+    .code-block.json .key     { color: #9cdcfe; }
 """

utils.py

@@ -88,21 +88,7 @@ def load_data():
         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}'
+        return f'<div class="leaderboard-wrapper"><div class="leaderboard-table">{table_html}</div></div>'
     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>'
@@ -259,13 +245,13 @@ def get_submit_html():
   <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 class="code-block json">{
+  <span class="key">"Russian_LibriSpeech"</span>: { <span class="key">"wer"</span>: <span class="number">0.1234</span>, <span class="key">"cer"</span>: <span class="number">0.0567</span> },
+  <span class="key">"Common_Voice_Corpus_22.0"</span>: { <span class="key">"wer"</span>: <span class="number">0.2345</span>, <span class="key">"cer"</span>: <span class="number">0.0789</span> },
+  <span class="key">"Tone_Webinars"</span>: { <span class="key">"wer"</span>: <span class="number">0.3456</span>, <span class="key">"cer"</span>: <span class="number">0.0987</span> },
+  <span class="key">"Tone_Books"</span>: { <span class="key">"wer"</span>: <span class="number">0.4567</span>, <span class="key">"cer"</span>: <span class="number">0.1098</span> },
+  <span class="key">"Tone_Speak"</span>: { <span class="key">"wer"</span>: <span class="number">0.5678</span>, <span class="key">"cer"</span>: <span class="number">0.1209</span> },
+  <span class="key">"Sova_RuDevices"</span>: { <span class="key">"wer"</span>: <span class="number">0.6789</span>, <span class="key">"cer"</span>: <span class="number">0.1310</span> }
 }</pre>
   </div>
 </div>