v0.0.37: крупный заметный блок статистики (общее время, время ИИ, токены) в UI

2026-08-19 09:16:18 +04:00
parent af9faba3fc
commit defbc10004
3 changed files with 86 additions and 7 deletions
@@ -0,0 +1,41 @@
+# v0.0.37 — крупный блок статистики LLM в UI — 2026-08-19
+
+**Дата:** 2026-08-19
+**Версия:** 0.0.36 → 0.0.37
+**Файл:** `site/templates/index.html`, `site/app.py` (версия)
+
+---
+
+## Суть
+
+Раньше статистика LLM («... LLM: 5.3с · 1894 токенов») была МЕЛКИМ текстом
+в статус-строке под кнопкой — юзер её не замечал. Теперь после обработки
+показывается **крупный заметный блок** «📊 Итоги обработки»:
+
+| Показатель | Значение |
+|---|---|
+| Общее время | крупное число, с |
+| Время ИИ | крупное число, с |
+| Токены ИИ | крупное число |
+
+Оформление: зелёная плашка (фон-градиент, рамка 2px), три белые карточки,
+значения шрифтом 24px жирным. Блок скрыт до завершения и при сбросе.
+
+## Изменения (`index.html`)
+- CSS: `.stats-block`, `.stats-title`, `.stats-row`, `.stat-item`,
+  `.stat-label`, `.stat-value`.
+- HTML: блок `#statsBlock` с `#stTotalTime`, `#stLlmTime`, `#stLlmTokens`
+  (после кнопок скачивания).
+- JS:
+  - `complete`-обработчик — заполняет и показывает блок (общее время всегда;
+    время ИИ и токены — если `llm_sec > 0`, иначе «—»);
+  - `resetAll` — скрывает блок.
+
+## Проверка
+- `node --check` — OK.
+- Визуально через браузер: блок появился полноширинным, три карточки,
+  значения крупно — заметно.
+- Версия `app.VERSION = 0.0.37`.
+
+## Бэкенд
+- Не менялся (метрики `tokens`/`llm_sec` в `event: complete` уже есть с v0.0.34).
@@ -20,7 +20,7 @@ if _sys_path_root not in sys.path:
    sys.path.insert(0, _sys_path_root)

 # Версия приложения (меняется при изменениях)
-VERSION = "0.0.36"
+VERSION = "0.0.37"


 def create_app():
@@ -83,6 +83,20 @@
    .status.error { background: #fef2f2; border: 1px solid var(--red); color: #991b1b; display: block; }
    .dl-btns { display: none; gap: 8px; margin-top: 8px; }
    .dl-btns.show { display: flex; }
+    .stats-block {
+      display: none; margin-top: 12px; padding: 16px;
+      background: linear-gradient(135deg, #f0fdf4, #ecfdf5);
+      border: 2px solid var(--green); border-radius: 12px;
+    }
+    .stats-block.show { display: block; }
+    .stats-title { font-size: 16px; font-weight: 700; color: #14532d; margin-bottom: 10px; }
+    .stats-row { display: flex; flex-wrap: wrap; gap: 10px; }
+    .stat-item {
+      flex: 1; min-width: 130px; background: #fff; border: 1px solid #bbf7d0;
+      border-radius: 10px; padding: 10px 12px; text-align: center;
+    }
+    .stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
+    .stat-value { font-size: 24px; font-weight: 800; color: #166534; }
  </style>
 </head>
 <body>
@@ -127,6 +141,23 @@
        <button class="btn btn-primary" id="dlZip" onclick="downloadZip()">📦 Скачать ZIP</button>
        <button class="btn" id="dlCsv" onclick="downloadCsv()">📋 Скачать CSV</button>
      </div>
+      <div class="stats-block" id="statsBlock">
+        <div class="stats-title">📊 Итоги обработки</div>
+        <div class="stats-row">
+          <div class="stat-item">
+            <div class="stat-label">Общее время</div>
+            <div class="stat-value" id="stTotalTime">—</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">Время ИИ</div>
+            <div class="stat-value" id="stLlmTime">—</div>
+          </div>
+          <div class="stat-item">
+            <div class="stat-label">Токены ИИ</div>
+            <div class="stat-value" id="stLlmTokens">—</div>
+          </div>
+        </div>
+      </div>
    </div>
  </div>
 </div>
@@ -154,6 +185,7 @@ function resetAll() {
  st.className = '';
  st.textContent = '';
  db.classList.remove('show');
+  document.getElementById('statsBlock').classList.remove('show');
  ub.disabled = false;
 }

@@ -409,13 +441,19 @@ async function uploadFiles() {
        clearInterval(ptimer);
        const d = JSON.parse(e.data);
        const totalSec = ((performance.now() - t0) / 1000).toFixed(1);
-        let msg = '✅ Обработано ' + d.total + ' файлов за ' + totalSec + 'с';
-        if (d.llm_sec > 0) {
-          msg += ' · LLM: ' + d.llm_sec + 'с';
-          if (d.tokens > 0) msg += ' · ' + d.tokens + ' токенов';
-        }
        st.className = 'status done';
-        st.textContent = msg;
+        st.textContent = '✅ Обработано ' + d.total + ' файлов за ' + totalSec + 'с';
+        // Крупный блок статистики
+        const sb = document.getElementById('statsBlock');
+        document.getElementById('stTotalTime').textContent = totalSec + ' с';
+        if (d.llm_sec > 0) {
+          document.getElementById('stLlmTime').textContent = d.llm_sec + ' с';
+          document.getElementById('stLlmTokens').textContent = d.tokens > 0 ? d.tokens : '—';
+        } else {
+          document.getElementById('stLlmTime').textContent = '—';
+          document.getElementById('stLlmTokens').textContent = '—';
+        }
+        sb.classList.add('show');
        db.classList.add('show');
        resolve();
      });