v3.1.0: пофайловая обработка, прогресс в таблице, JSZip — один ZIP на выходе

History/2026-07-12-v3.1-plan.md

@@ -0,0 +1,30 @@
+# План v3.1 — пофайловая обработка + прогресс в таблице (2026-07-12)
+
+## Проблема
+Фронтенд v3.0 отправляет все файлы одним запросом → долгий LLM-вызов → таймаут.
+Нужно: обрабатывать по одному, прогресс в таблице, все результаты → один ZIP.
+
+## Решение
+
+### Фронтенд (index.html)
+1. **XHR** вместо fetch — надёжнее для blob, явный timeout
+2. **Колонка «Статус»** в таблице файлов
+3. **По одному файлу:** цикл, каждый файл → отдельный XHR → ZIP
+4. **Прогресс в таблице:** ⏳ → ✓ 2.1 сек (или ✗ ошибка)
+5. **JSZip** — склеивает все полученные ZIP'ы в один
+6. **Скачивание** — один файл `drhider_output.zip` в конце
+
+### Статусы в таблице
+| Статус | Отображение |
+|---|---|
+| Ожидание | ⏳ |
+| Успех | ✓ 2.1 сек |
+| Ошибка | ✗ сообщение |
+
+### Бэкенд
+Без изменений. API уже принимает один файл.
+
+### НЕ трогать
+- gunicorn не нужен (файлы по одному, каждый запрос ≤10 сек)
+- app.run() — остаётся
+- drhider пакет — без изменений

site/app.py

@@ -20,7 +20,7 @@ if _sys_path_root not in sys.path:
     sys.path.insert(0, _sys_path_root)
 
 # Версия приложения (меняется при изменениях)
-VERSION = "3.0.2"
+VERSION = "3.1.0"
 
 
 def create_app():

site/templates/index.html

@@ -5,6 +5,7 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>DrHider — обфускация документов</title>
   <link rel="icon" type="image/svg+xml" href="/static/favicon.svg">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
   <style>
     :root {
       --bg: #f5f5f5;
@@ -107,11 +108,12 @@
             <tr>
               <th>Имя</th>
               <th style="width:90px;">Размер</th>
+              <th style="width:90px;">Статус</th>
               <th style="width:40px;"></th>
             </tr>
           </thead>
           <tbody id="fileList">
-            <tr class="empty-row"><td colspan="3">Нет выбранных файлов</td></tr>
+            <tr class="empty-row"><td colspan="4">Нет выбранных файлов</td></tr>
           </tbody>
         </table>
       </div>
@@ -145,9 +147,10 @@ function renderFiles() {
     fileList.innerHTML = '<tr class="empty-row"><td colspan="3">Нет выбранных файлов</td></tr>';
   } else {
     fileList.innerHTML = selectedFiles.map((f, i) =>
-      '<tr>' +
+      '<tr id="row-' + i + '">' +
       '<td class="name-cell">' + f.name + '</td>' +
       '<td class="num-cell">' + formatSize(f.size) + '</td>' +
+      '<td class="num-cell" id="status-' + i + '" style="font-size:12px;">—</td>' +
       '<td><button class="remove-btn" onclick="removeFile(' + i + ')">✕</button></td>' +
       '</tr>'
     ).join('');
@@ -170,68 +173,105 @@ fileInput.addEventListener('change', () => {
   renderFiles();
 });
 
+function setStatus(idx, html) {
+  const el = document.getElementById('status-' + idx);
+  if (el) el.innerHTML = html;
+}
+
 async function uploadFiles() {
   if (selectedFiles.length === 0) return;
   uploadBtn.disabled = true;
 
   const total = selectedFiles.length;
-  let ok = 0;
+  const results = [];  // { name, blob } для JSZip
-  let fail = 0;
+  let ok = 0, fail = 0;
-  let results = [];
 
   for (let i = 0; i < total; i++) {
     const f = selectedFiles[i];
     const n = i + 1;
 
-    // Показываем прогресс
+    setStatus(i, '⏳');
     status.className = 'status info';
-    status.textContent = 'Файл ' + n + '/' + total + ': ' + f.name + ' ...';
+    status.textContent = 'Файл ' + n + '/' + total + ': ' + f.name;
 
     const t0 = performance.now();
-    const formData = new FormData();
+    const fd = new FormData();
-    formData.append('files', f);
+    fd.append('files', f, f.name);
 
     try {
-      const res = await fetch('/api/drhider', { method: 'POST', body: formData });
+      const blob = await new Promise((resolve, reject) => {
+        const xhr = new XMLHttpRequest();
+        xhr.open('POST', '/api/drhider');
+        xhr.responseType = 'blob';
+        xhr.timeout = 600000;
 
-      if (!res.ok) {
+        xhr.onload = () => {
-        const errData = await res.json().catch(() => ({}));
+          if (xhr.status === 200) resolve(xhr.response);
-        throw new Error(errData.error || 'Ошибка сервера');
+          else reject(new Error('Сервер ' + xhr.status));
-      }
+        };
+        xhr.onerror = () => reject(new Error('Сеть'));
+        xhr.ontimeout = () => reject(new Error('Таймаут'));
+        xhr.send(fd);
+      });
 
       const elapsed = ((performance.now() - t0) / 1000).toFixed(1);
-      const blob = await res.blob();
+      setStatus(i, '<span style="color:#22c55e">✓ ' + elapsed + 'с</span>');
-
+      results.push({ name: f.name, blob: blob });
-      // Скачиваем файл
-      const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = f.name.replace(/\.[^.]+$/, '') + '_obfuscated.zip';
-      a.click();
-      URL.revokeObjectURL(url);
-
       ok++;
-      status.className = 'status success';
-      status.textContent = 'Файл ' + n + '/' + total + ': ' + f.name + ' — ' + elapsed + ' сек ✓';
-      results.push({ name: f.name, ok: true, time: elapsed });
 
     } catch (err) {
+      setStatus(i, '<span style="color:#ef4444">✗</span>');
       fail++;
-      status.className = 'status error';
-      status.textContent = 'Файл ' + n + '/' + total + ': ' + f.name + ' — ошибка: ' + err.message;
-      results.push({ name: f.name, ok: false, error: err.message });
     }
 
-    // Пауза между файлами чтобы не заддосить LLM
+    // Пауза между файлами
-    if (i < total - 1) {
+    if (i < total - 1) await new Promise(r => setTimeout(r, 300));
-      await new Promise(r => setTimeout(r, 500));
-    }
   }
 
-  // Итог
+  // ── Упаковка в один ZIP ──
+  if (results.length > 0) {
+    status.className = 'status info';
+    status.textContent = 'Упаковка в ZIP...';
+
+    const zip = new JSZip();
+    for (const r of results) {
+      // Извлекаем обфусцированный файл из ZIP-ответа бэкенда
+      const innerZip = await JSZip.loadAsync(r.blob);
+      const files = Object.keys(innerZip.files).filter(k => !k.startsWith('mapping') && !innerZip.files[k].dir);
+      for (const name of files) {
+        const data = await innerZip.files[name].async('blob');
+        // Имя: оригинальное_имя_obfuscated.расширение
+        const ext = name.split('.').pop();
+        const base = r.name.replace(/\.[^.]+$/, '');
+        zip.file(base + '_obfuscated.' + ext, data);
+      }
+      // mapping.csv — только один (из первого файла или объединить)
+      if (innerZip.files['mapping.csv']) {
+        const csv = await innerZip.files['mapping.csv'].async('string');
+        const existing = zip.files['mapping.csv'];
+        if (existing) {
+          // Дописываем к существующему (кроме заголовка)
+          const lines = csv.split('\n').slice(1).join('\n');
+          zip.file('mapping.csv', (await existing.async('string')) + '\n' + lines);
+        } else {
+          zip.file('mapping.csv', csv);
+        }
+      }
+    }
+
+    const finalZip = await zip.generateAsync({ type: 'blob' });
+    const url = URL.createObjectURL(finalZip);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = 'drhider_output.zip';
+    a.click();
+    URL.revokeObjectURL(url);
+  }
+
+  // ── Итог ──
   if (fail === 0) {
     status.className = 'status success';
-    status.textContent = 'Готово! ' + ok + '/' + total + ' файлов обработано.';
+    status.textContent = '✅ Готово! ' + ok + '/' + total;
   } else {
     status.className = 'status error';
     status.textContent = 'Готово: ' + ok + ' OK, ' + fail + ' ошибок из ' + total;