feat: implementado Smart Router Multimodal via MiniMax e OpenRouter

2026-05-26 17:05:25 +00:00
parent d4a5046826
commit 9c2ec032b1
5 changed files with 1179 additions and 9 deletions
@@ -0,0 +1,491 @@
+# Plano Técnico — Smart Router Multimodal para Camila AI
+
+**App:** `/root/Apps/Camila`  
+**Data:** 2026-05-26  
+**Objetivo:** Roteamento automático de LLMs (OpenRouter + MiniMax) baseado na intenção do prompt da Camila
+
+---
+
+## 1. Arquitetura Atual (Linha Base)
+
+```
+Camila → frontend (app.js) → POST /api/chat → OpenRouter (GPT-4.1-nano) → SSE stream → frontend
+```
+
+**Arquivos relevantes:**
+- `server.js` — Express, 362 linhas, rotas: `/api/chat`, `/api/login`, `/api/logout`, `/api/status`
+- `.env` — `OPENROUTER_API_KEY`, `OPENROUTER_MODEL`, `ACCESS_PASSWORD`
+- `public/app.js` — SPA, streaming SSE, renderiza markdown
+- `public/index.html` — UI principal
+
+**Dependências atuais:** `express`, `cookie-parser`, `dotenv`, `msedge-tts`
+
+---
+
+## 2. Arquitetura Proposta (Smart Router)
+
+```
+Camila digita prompt
+        │
+        ▼
+┌───────────────────┐
+│  INTENT DETECTOR  │  ← analisa prompt → classifica tipo
+│  (app.js/frontend)│
+└────────┬──────────┘
+         │
+    ┌────┴──────────────────────┐
+    │  Classificação do Prompt  │
+    ├──────────────────────────┤
+    │  [texto]      → OpenRouter │
+    │  [imagem]     → MiniMax    │
+    │  [áudio/música]→ MiniMax   │
+    │  [vídeo]      → MiniMax    │
+    │  [análise img]→ MiniMax    │
+    └───────────────────────────┘
+         │
+    ┌────┴────────┐
+    │             │
+    ▼             ▼
+ OpenRouter   MiniMax API
+ (SSE stream)  (sync/async)
+    │             │
+    └──────┬──────┘
+           ▼
+    Response Unificada
+    (mesmo visual no chat)
+```
+
+---
+
+## 3. Detalhamento por Etapa
+
+### 3.1 Intent Detector (Frontend — `app.js`)
+
+**O que faz:** Analisa o prompt da Camila antes de enviar e classifica em uma intenção.
+
+**Keywords de classificação:**
+
+| Tipo | Keywords (pt-BR) | Provider |
+|------|-----------------|----------|
+| `texto` | (nenhuma das abaixo) | OpenRouter |
+| `imagem_gerar` | "gere uma imagem", "crie uma imagem", "desenhe", "gere figure", "crie figura", "imagem de", "foto de" | MiniMax Image |
+| `áudio/música` | "gere uma música", "crie uma música", "cante", "melodia", "som para", "trilha" | MiniMax Audio |
+| `vídeo` | "gere um vídeo", "crie um vídeo", "video de", "animação de" | MiniMax Video |
+| `análise_img` | (imagem anexada + pergunta sobre ela) | MiniMax Vision |
+
+**Regex simplificado (implementação):**
+
+```javascript
+const detectIntent = (text, hasAttachedImages) => {
+  const lower = text.toLowerCase();
+
+  if (hasAttachedImages) return 'análise_img';
+
+  if (/gere uma imagem|crie uma imagem|desenhe|gere figura|crie figura|imagem de|foto de/i.test(lower))
+    return 'imagem_gerar';
+
+  if (/gere uma música|crie uma música|melodia|trilha|som para|cante/i.test(lower))
+    return 'áudio';
+
+  if (/gere um vídeo|crie um vídeo|video de|animação de/i.test(lower))
+    return 'vídeo';
+
+  return 'texto';
+};
+```
+
+**Prompt Rewriting (para geração de mídia):**
+
+Quando o tipo ≠ `texto`, o app reescreve o pedido para o formato otimizado do MiniMax:
+
+```javascript
+const rewritePrompt = (text, intent) => {
+  // Para imagem: enrich com detalhes visuais
+  if (intent === 'imagem_gerar') {
+    return ` Gere uma imagem: ${text}. Estilo: ilustração infantil educativo, cores vibrantes, pedagogico.`;
+  }
+  // Para música: enrich com estilo
+  if (intent === 'audio') {
+    return `Crie uma música: ${text}. Estilo: infantil, educativo, cantado por voz feminina.`;
+  }
+  return text;
+};
+```
+
+---
+
+### 3.2 Backend — Novas Rotas (`server.js`)
+
+**3.2.1 Nova rota: `/api/generate` (unificada)**
+
+Substitui ou complementa `/api/chat`. Aceita campo `type` adicional.
+
+```javascript
+// .env precisa adicionar:
+MINIMAX_API_KEY=seu_token_minimax
+MINIMAX_API_BASE=https://api.minimax.chat/v1  // confirmar endpoint real
+```
+
+**Rotas novas:**
+
+| Endpoint | Método | Provider | Tipo Retorno |
+|----------|--------|----------|--------------|
+| `/api/chat` | POST | OpenRouter | SSE (mantém) |
+| `/api/image` | POST | MiniMax Image | JSON `{url, prompt}` |
+| `/api/audio` | POST | MiniMax Audio/T2A | JSON `{url, duration}` |
+| `/api/video` | POST | MiniMax Video | JSON `{url, duration, status}` |
+| `/api/analyze-image` | POST | MiniMax Vision | SSE (como chat) |
+
+**Exemplo de implementação — `/api/image`:**
+
+```javascript
+app.post('/api/image', requireAuth, async (req, res) => {
+  const { prompt, originalPrompt } = req.body;
+
+  try {
+    const response = await fetch(`${process.env.MINIMAX_API_BASE}/images/generations`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'minimax-image-01',
+        prompt: prompt,
+        num_images: 1,
+        width: 1024,
+        height: 1024
+      })
+    });
+
+    const data = await response.json();
+
+    if (!response.ok) {
+      return res.status(response.status).json({ error: 'Erro ao gerar imagem' });
+    }
+
+    // Formato de resposta padronizado
+    res.json({
+      type: 'image',
+      url: data.data?.[0]?.url,
+      prompt: originalPrompt,
+      provider: 'minimax'
+    });
+
+  } catch (error) {
+    console.error('Erro /api/image:', error);
+    res.status(500).json({ error: 'Erro interno ao gerar imagem' });
+  }
+});
+```
+
+**Exemplo de implementação — `/api/audio` (text-to-audio/MiniMax T2A):**
+
+```javascript
+app.post('/api/audio', requireAuth, async (req, res) => {
+  const { text, voice } = req.body;
+
+  try {
+    const response = await fetch(`${process.env.MINIMAX_API_BASE}/t2a_v2`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'speech-01',
+        text: text,
+        voice_setting: {
+          voice_id: voice || 'female-pt-BR-001'
+        },
+        output_format: 'mp3'
+      })
+    });
+
+    // Audio возвращается como base64 ou URL
+    const data = await response.json();
+    res.json({
+      type: 'audio',
+      url: data.data?.audio_url,
+      duration: data.data?.duration,
+      provider: 'minimax'
+    });
+
+  } catch (error) {
+    console.error('Erro /api/audio:', error);
+    res.status(500).json({ error: 'Erro interno ao gerar áudio' });
+  }
+});
+```
+
+**Exemplo de implementação — `/api/video` (MiniMax S2V?):**
+
+```javascript
+app.post('/api/video', requireAuth, async (req, res) => {
+  const { prompt, duration } = req.body;
+
+  // Video geralmente é async (job-based)
+  // Poll status endpoint até completar
+
+  try {
+    const response = await fetch(`${process.env.MINIMAX_API_BASE}/video/generation`, {
+      method: 'POST',
+      headers: {
+        'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}`,
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({
+        model: 'video-01',
+        prompt: prompt,
+        duration: duration || 10  // segundos
+      })
+    });
+
+    const job = await response.json();
+    // Retornar job_id para o frontend trackear
+    res.json({
+      type: 'video',
+      job_id: job.job_id,
+      status: 'processing',
+      provider: 'minimax'
+    });
+
+  } catch (error) {
+    console.error('Erro /api/video:', error);
+    res.status(500).json({ error: 'Erro interno ao gerar vídeo' });
+  }
+});
+```
+
+**3.2.2 Status endpoint atualizado (`/api/status`):**
+
+```javascript
+app.get('/api/status', requireAuth, (req, res) => {
+  res.json({
+    model: process.env.OPENROUTER_MODEL || 'openai/gpt-4.1-nano',
+    provider: 'openrouter',
+    minimax_available: !!process.env.MINIMAX_API_KEY,
+    timestamp: new Date().toISOString()
+  });
+});
+```
+
+---
+
+### 3.3 Frontend — `app.js` (Modificações)
+
+**Mudanças no fluxo de `handleSendMessage`:**
+
+```javascript
+const handleSendMessage = async (text, skipUserAppend = false, files = null) => {
+  // 1. Detectar intenção
+  const hasImages = attachedFiles.some(f => f.type.startsWith('image/'));
+  const intent = detectIntent(text, hasImages);
+
+  // 2. Se não é texto, desviar para endpoint específico
+  if (intent !== 'texto') {
+    return handleMediaGeneration(text, intent, attachedFiles);
+  }
+
+  // 3. Fluxo normal de texto (mantém SSE streaming)
+  // ... (código existente)
+};
+
+const handleMediaGeneration = async (text, intent, files) => {
+  // Mostrar estado de loading no chat
+  const loadingRow = appendMediaLoadingMessage(intent);
+
+  // 3.1 Prompt rewriting
+  const rewrittenPrompt = rewritePrompt(text, intent);
+
+  // 3.2 Chamar endpoint correto
+  let endpoint = '/api/image';
+  let payload = { prompt: rewrittenPrompt, originalPrompt: text };
+
+  if (intent === 'áudio') {
+    endpoint = '/api/audio';
+    payload = { text, voice: 'pt-BR-female' };
+  } else if (intent === 'vídeo') {
+    endpoint = '/api/video';
+    payload = { prompt: rewrittenPrompt, duration: 10 };
+  }
+
+  try {
+    const response = await fetch(endpoint, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(payload)
+    });
+
+    const data = await response.json();
+
+    // 3.3 Renderizar resposta
+    replaceLoadingWithMediaMessage(loadingRow, intent, data);
+
+  } catch (error) {
+    showMediaError(loadingRow, intent);
+  }
+};
+```
+
+**UI de mensagem para mídia gerada:**
+
+```javascript
+const appendMediaMessage = (type, data) => {
+  // Template unificado
+  let mediaHtml = '';
+  if (type === 'imagem_gerar') {
+    mediaHtml = `
+      <div class="media-message">
+        <img src="${data.url}" alt="Imagem gerada" class="generated-image">
+        <p class="media-caption">${escapeHtml(data.originalPrompt)}</p>
+      </div>`;
+  } else if (type === 'áudio') {
+    mediaHtml = `
+      <div class="media-message">
+        <audio controls src="${data.url}"></audio>
+        <p class="media-caption">${escapeHtml(data.originalPrompt)}</p>
+      </div>`;
+  } else if (type === 'vídeo') {
+    mediaHtml = `
+      <div class="media-message">
+        <video controls src="${data.url}"></video>
+        <p class="media-caption">${escapeHtml(data.originalPrompt)}</p>
+      </div>`;
+  }
+  // ... injetar no DOM
+};
+```
+
+**CSS novo para mensagens de mídia** (adicionar em `style.css`):
+
+```css
+.media-message {
+  margin: 12px 0;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.media-message img.generated-image {
+  max-width: 100%;
+  border-radius: 12px;
+  border: 1px solid var(--border-light);
+}
+
+.media-message video,
+.media-message audio {
+  max-width: 100%;
+  border-radius: 12px;
+}
+
+.media-caption {
+  font-size: 13px;
+  color: var(--text-muted);
+  margin-top: 8px !important;
+  font-style: italic;
+}
+```
+
+---
+
+### 4. `.env` — Variáveis Novas
+
+```bash
+# Existentes
+PORT=3000
+ACCESS_PASSWORD=puglindo26
+OPENROUTER_API_KEY=sk-or-...13d0
+OPENROUTER_MODEL=openai/gpt-4.1-nano
+SESSION_SECRET=camila-secret-key-321123
+
+# Novas
+MINIMAX_API_KEY=seu_token_minimax_aqui
+MINIMAX_API_BASE=https://api.minimax.chat/v1
+```
+
+---
+
+### 5. Ordem de Implementação Sugerida
+
+```
+FASE 1 — Backend mínimo (1-2h)
+  ├── Adicionar MINIMAX_API_KEY ao .env
+  ├── Criar rota /api/image (geração de imagem)
+  ├── Criar rota /api/audio  (text-to-audio)
+  ├── Atualizar /api/status com flag minimax_available
+  └── Testar rotas com curl
+
+FASE 2 — Frontend mínimo (1-2h)
+  ├── Implementar detectIntent() em app.js
+  ├── Implementar handleMediaGeneration()
+  ├── Criar template de mensagem de imagem no chat
+  ├── Adicionar CSS para .media-message
+  └── Testar fluxo completo: digitar → gerar → ver imagem
+
+FASE 3 — Geração de música/vídeo (2-3h)
+  ├── Criar /api/audio (se MiniMax tem TTS/Música)
+  ├── Criar /api/video (se MiniMax suporta)
+  ├── Prompt rewriting refinado
+  └── UI para áudio/vídeo (player nativo HTML5)
+
+FASE 4 — Análise de imagem (vision) (2h)
+  ├── Detectar imagem anexada + pergunta
+  ├── /api/analyze-image → MiniMax Vision
+  ├── Streaming SSE da análise como texto
+  └── Kemily "enxerga" a imagem e comenta
+
+FASE 5 — Polish (1-2h)
+  ├── Loading states animados para mídia
+  ├── Error handling robusto
+  ├── Fallback: se MiniMax falhar, pedir ao GPT que descreva o que geraria
+  └── Documentação do sistema
+```
+
+**Tempo total estimado:** 8-12 horas (distribuído)
+
+---
+
+### 6. Checklist de Verificação
+
+- [ ] `MINIMAX_API_KEY` adicionada ao `.env`
+- [ ] Intent detector funcionando (regex testado)
+- [ ] `/api/image` responde com URL de imagem
+- [ ] `/api/audio` responde com URL de áudio (se disponível)
+- [ ] `/api/video` responde com URL de vídeo ou job_id (se disponível)
+- [ ] Frontend exibe imagem gerada no chat
+- [ ] Frontend exibe player de áudio/vídeo
+- [ ] Loading state visível durante geração
+- [ ] Error state graceful se provider falhar
+- [ ] Kemily responde em texto quando mídia é gerada ("Gerei essa imagem para você!")
+
+---
+
+### 7. Riscos e Mitigações
+
+| Risco | Probabilidade | Mitigação |
+|-------|--------------|-----------|
+| MiniMax API não tem endpoint de música | Média | Usar só imagem/vídeo; música como "将来" |
+| CORS errors no frontend | Baixa | Backend faz proxy, nunca chama API direto |
+| Imagem gerada tarde (async) | Média | Polling com loading spinner + status |
+| Prompt rewriting gera prompt ruim | Média | Manter simples; GPT-4.1-nano reescreve melhor |
+| Custo miniMax exceder límite | Baixa | Rate limit por usuário no backend |
+
+---
+
+### 8. Referências da API MiniMax
+
+**Precisa confirmar endpoints oficiais.** Até a implementação, consultar:
+
+- Portal desenvolvedor: https://www.minimaxi.com/developer
+- Dashboard da conta MiniMax para ver módulos ativos (geração de imagem, áudio, vídeo)
+- A API key atual do Marcos está no painel MiniMax dele
+
+**Headers comuns MiniMax:**
+```
+Authorization: Bearer {MINIMAX_API_KEY}
+Content-Type: application/json
+```
+
+---
+
+*Plano gerado por Hermes — 2026-05-26*