docs: initial spec and implementation plan

.superpowers/brainstorm/47219-1775222083/content/architecture.html

@@ -0,0 +1,88 @@
+<h2>Секция 1: Общая архитектура</h2>
+<p class="subtitle">Модульный монолит — компоненты и потоки данных</p>
+
+<div class="mockup">
+  <div class="mockup-header">Архитектура системы</div>
+  <div class="mockup-body" style="padding: 24px; font-family: monospace; font-size: 13px; line-height: 1.6;">
+    <div style="display: flex; gap: 16px; justify-content: center; margin-bottom: 20px;">
+      <div style="background: #3b82f6; color: white; padding: 10px 16px; border-radius: 8px; text-align: center;">
+        🌐 Web UI<br><small>React/Vue SPA</small>
+      </div>
+      <div style="background: #8b5cf6; color: white; padding: 10px 16px; border-radius: 8px; text-align: center;">
+        💬 Telegram Bot<br><small>aiogram</small>
+      </div>
+      <div style="background: #8b5cf6; color: white; padding: 10px 16px; border-radius: 8px; text-align: center;">
+        💬 Lensa Bot<br><small>SDK/webhook</small>
+      </div>
+    </div>
+
+    <div style="text-align: center; color: #666; margin: 8px 0;">▼ HTTP / WebSocket ▼</div>
+
+    <div style="background: #1e293b; color: #e2e8f0; padding: 16px; border-radius: 8px; margin-bottom: 16px;">
+      <div style="text-align: center; font-weight: bold; margin-bottom: 12px; color: #60a5fa;">⚙️ FastAPI Backend (модульный монолит)</div>
+      <div style="display: flex; gap: 8px; flex-wrap: wrap; justify-content: center;">
+        <div style="background: #334155; padding: 8px 12px; border-radius: 6px; border-left: 3px solid #3b82f6;">
+          <strong>API модуль</strong><br>
+          <small>REST endpoints<br>Auth (JWT)<br>Upload файлов</small>
+        </div>
+        <div style="background: #334155; padding: 8px 12px; border-radius: 6px; border-left: 3px solid #f59e0b;">
+          <strong>Транскрибация</strong><br>
+          <small>Whisper large-v3<br>FFmpeg конвертация<br>GPU обработка</small>
+        </div>
+        <div style="background: #334155; padding: 8px 12px; border-radius: 6px; border-left: 3px solid #10b981;">
+          <strong>Протоколирование</strong><br>
+          <small>LLM обработка<br>Шаблоны промптов<br>Экспорт DOCX/PDF/MD</small>
+        </div>
+        <div style="background: #334155; padding: 8px 12px; border-radius: 6px; border-left: 3px solid #8b5cf6;">
+          <strong>Мессенджеры</strong><br>
+          <small>Telegram бот<br>Lensa бот<br>Unified interface</small>
+        </div>
+      </div>
+    </div>
+
+    <div style="display: flex; gap: 16px; justify-content: center; margin-top: 16px;">
+      <div style="text-align: center; color: #666; margin: 8px 0;">▼ Celery задачи через Redis ▼</div>
+    </div>
+
+    <div style="display: flex; gap: 12px; justify-content: center; margin-top: 12px;">
+      <div style="background: #dc2626; color: white; padding: 10px 16px; border-radius: 8px; text-align: center;">
+        🔴 Redis<br><small>Очередь задач<br>+ кэш</small>
+      </div>
+      <div style="background: #2563eb; color: white; padding: 10px 16px; border-radius: 8px; text-align: center;">
+        🐘 PostgreSQL<br><small>Записи, протоколы<br>пользователи</small>
+      </div>
+      <div style="background: #6b7280; color: white; padding: 10px 16px; border-radius: 8px; text-align: center;">
+        📁 File Storage<br><small>Аудио/видео<br>экспорт файлы</small>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div class="section" style="margin-top: 24px;">
+  <h3>Поток обработки записи</h3>
+  <div style="background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 16px; font-size: 14px;">
+    <div style="display: flex; align-items: center; flex-wrap: wrap; gap: 8px;">
+      <span style="background: #dbeafe; padding: 6px 12px; border-radius: 6px;">1. Загрузка файла</span>
+      <span style="color: #666;">→</span>
+      <span style="background: #fef3c7; padding: 6px 12px; border-radius: 6px;">2. Извлечение аудио (FFmpeg)</span>
+      <span style="color: #666;">→</span>
+      <span style="background: #fef3c7; padding: 6px 12px; border-radius: 6px;">3. Транскрибация (Whisper GPU)</span>
+      <span style="color: #666;">→</span>
+      <span style="background: #d1fae5; padding: 6px 12px; border-radius: 6px;">4. Генерация протокола (LLM)</span>
+      <span style="color: #666;">→</span>
+      <span style="background: #e0e7ff; padding: 6px 12px; border-radius: 6px;">5. Экспорт (DOCX/PDF/MD)</span>
+    </div>
+  </div>
+</div>
+
+<div class="section" style="margin-top: 24px;">
+  <h3>Ключевые решения</h3>
+  <ul style="font-size: 14px; line-height: 1.8;">
+    <li><strong>Whisper large-v3</strong> — локально на GPU (RTX 3070 Ti, 8GB VRAM достаточно)</li>
+    <li><strong>Celery + Redis</strong> — асинхронная обработка, транскрибация и LLM не блокируют API</li>
+    <li><strong>PostgreSQL</strong> — записи, протоколы, пользователи, шаблоны</li>
+    <li><strong>LLM через внешний API</strong> — OpenRouter/Groq/Together с возможностью подключить платные модели</li>
+    <li><strong>FFmpeg</strong> — извлечение аудио из видео, нормализация форматов</li>
+    <li><strong>Docker Compose</strong> — для деплоя всех компонентов на сервере</li>
+  </ul>
+</div>