meeting-protocol-service/.superpowers/brainstorm/47219-1775222083/content/architecture.html

<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>