feat: implementado Smart Router Multimodal via MiniMax e OpenRouter

.env

@@ -3,3 +3,5 @@ ACCESS_PASSWORD=puglindo26
 OPENROUTER_API_KEY=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
 OPENROUTER_MODEL=openai/gpt-4.1-nano
 SESSION_SECRET=camila-secret-key-321123
+MINIMAX_API_KEY=sk-cp-iWzSsdzjVy0tT5dnvv_sGrAlv3Nw7kkrZ8hPK0KjbNeSRQxIY1O6AhkQAq_yrYV1XPJY1TH6ZQeOlJZd-Zi_elkJhef9PcTSzn2m9bcKIxezarM19BREcVM
+MINIMAX_API_BASE=https://api.minimax.io/v1

PLANO_SMART_ROUTER_MULTIMODAL.md

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

public/app.js

@@ -1191,6 +1191,7 @@ const initApp = () => {
       const reader = response.body.getReader();
       const decoder = new TextDecoder('utf-8');
       let buffer = '';
+      let isMediaResponse = false;
 
       while (true) {
         const { done, value } = await reader.read();
@@ -1211,6 +1212,7 @@ const initApp = () => {
             }
             try {
               const parsed = JSON.parse(dataContent);
+              
               if (parsed.content) {
                 assistantContent += parsed.content;
                 // Renderizar markdown em progresso (com o cursor no final)
@@ -1221,6 +1223,90 @@ const initApp = () => {
                   hljs.highlightElement(block);
                 });
                 
+                scrollToBottom();
+              } else if (parsed.type === 'media_status') {
+                isMediaResponse = true;
+                botContentDiv.innerHTML = `
+                  <div class="media-loading">
+                    <div class="media-spinner"></div>
+                    <p class="media-loading-text">${escapeHtml(parsed.message)}</p>
+                  </div>
+                `;
+                scrollToBottom();
+              } else if (parsed.type === 'image') {
+                isMediaResponse = true;
+                assistantContent = `
+                  <div class="media-message-card">
+                    <div class="media-img-container">
+                      <img src="${parsed.url}" alt="Ilustração gerada" class="generated-image" onload="scrollToBottom()">
+                    </div>
+                    <p class="media-caption">✨ "${escapeHtml(parsed.originalPrompt)}"</p>
+                    <div class="media-actions-row">
+                      <a href="${parsed.url}" download="kemily_ilustracao.png" target="_blank" class="media-download-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                        </svg>
+                        <span>Salvar na Galeria</span>
+                      </a>
+                    </div>
+                  </div>
+                `;
+                botContentDiv.innerHTML = assistantContent;
+                scrollToBottom();
+              } else if (parsed.type === 'audio') {
+                isMediaResponse = true;
+                const audioId = 'audio_' + Date.now();
+                assistantContent = `
+                  <div class="media-message-card">
+                    <div class="custom-audio-player">
+                      <audio src="${parsed.url}" id="${audioId}"></audio>
+                      <button class="audio-play-btn" onclick="toggleCustomAudio(this)" title="Ouvir música">
+                        <svg class="play-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path d="M8 5v14l11-7z"/>
+                        </svg>
+                        <svg class="pause-icon hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+                          <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
+                        </svg>
+                      </button>
+                      <div class="audio-timeline-container">
+                        <div class="audio-timeline">
+                          <div class="audio-progress"></div>
+                        </div>
+                      </div>
+                      <span class="audio-time">0:00</span>
+                    </div>
+                    <p class="media-caption">🎵 "${escapeHtml(parsed.originalPrompt)}"</p>
+                    <div class="media-actions-row">
+                      <a href="${parsed.url}" download="kemily_musica.mp3" target="_blank" class="media-download-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                        </svg>
+                        <span>Baixar Música</span>
+                      </a>
+                    </div>
+                  </div>
+                `;
+                botContentDiv.innerHTML = assistantContent;
+                scrollToBottom();
+              } else if (parsed.type === 'video') {
+                isMediaResponse = true;
+                assistantContent = `
+                  <div class="media-message-card">
+                    <div class="media-video-container">
+                      <video controls src="${parsed.url}" class="generated-video" preload="metadata"></video>
+                    </div>
+                    <p class="media-caption">🎥 "${escapeHtml(parsed.originalPrompt)}"</p>
+                    <div class="media-actions-row">
+                      <a href="${parsed.url}" download="kemily_video.mp4" target="_blank" class="media-download-btn">
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
+                          <path stroke-linecap="round" stroke-linejoin="round" d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
+                        </svg>
+                        <span>Salvar Vídeo</span>
+                      </a>
+                    </div>
+                  </div>
+                `;
+                botContentDiv.innerHTML = assistantContent;
                 scrollToBottom();
               }
             } catch (err) {
@@ -1230,15 +1316,17 @@ const initApp = () => {
         }
       }
 
-      // Remover o cursor de digitação no final
+      // Remover o cursor de digitação no final se não for mensagem de mídia
       const cursor = botContentDiv.querySelector('.typing-cursor');
       if (cursor) cursor.remove();
 
-      // Parse final limpo do markdown
+      // Parse final limpo do markdown (se for texto normal)
-      botContentDiv.innerHTML = marked.parse(assistantContent);
+      if (!isMediaResponse) {
-      botContentDiv.querySelectorAll('pre code').forEach((block) => {
+        botContentDiv.innerHTML = marked.parse(assistantContent);
-        hljs.highlightElement(block);
+        botContentDiv.querySelectorAll('pre code').forEach((block) => {
-      });
+          hljs.highlightElement(block);
+        });
+      }
 
       // Adicionar botões de ação (Copiar, Regenerar, Ouvir) após o streaming
       const escapedContent = escapeHtml(assistantContent).replace(/"/g, '&quot;');
@@ -1371,6 +1459,55 @@ const initApp = () => {
   initVoiceRecognition();
 };
 
+// Player de áudio personalizado global para as mídias geradas
+window.toggleCustomAudio = (btn) => {
+  const player = btn.closest('.custom-audio-player');
+  const audio = player.querySelector('audio');
+  const playIcon = btn.querySelector('.play-icon');
+  const pauseIcon = btn.querySelector('.pause-icon');
+  const progress = player.querySelector('.audio-progress');
+  const timeSpan = player.querySelector('.audio-time');
+
+  if (audio.paused) {
+    // Pausar outros players que possam estar ativos
+    document.querySelectorAll('.custom-audio-player audio').forEach(a => {
+      if (a !== audio && !a.paused) {
+        a.pause();
+        const otherBtn = a.closest('.custom-audio-player').querySelector('.audio-play-btn');
+        otherBtn.querySelector('.play-icon').classList.remove('hidden');
+        otherBtn.querySelector('.pause-icon').classList.add('hidden');
+      }
+    });
+
+    audio.play();
+    playIcon.classList.add('hidden');
+    pauseIcon.classList.remove('hidden');
+  } else {
+    audio.pause();
+    playIcon.classList.remove('hidden');
+    pauseIcon.classList.add('hidden');
+  }
+
+  // Atualizar progresso em tempo real
+  audio.ontimeupdate = () => {
+    if (audio.duration) {
+      const percent = (audio.currentTime / audio.duration) * 100;
+      progress.style.width = percent + '%';
+      
+      const mins = Math.floor(audio.currentTime / 60);
+      const secs = Math.floor(audio.currentTime % 60).toString().padStart(2, '0');
+      timeSpan.textContent = `${mins}:${secs}`;
+    }
+  };
+
+  audio.onended = () => {
+    playIcon.classList.remove('hidden');
+    pauseIcon.classList.add('hidden');
+    progress.style.width = '0%';
+    timeSpan.textContent = '0:00';
+  };
+};
+
 if (document.readyState === 'loading') {
   document.addEventListener('DOMContentLoaded', initApp);
 } else {

public/style.css

@@ -1898,3 +1898,208 @@ code {
   color: var(--text-muted);
   line-height: 1.4;
 }
+
+/* ==========================================================================
+   SMART ROUTER MEDIA GENERATION (Imagem, Áudio e Vídeo)
+   ========================================================================== */
+.media-message-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-light);
+  border-radius: 16px;
+  padding: 16px;
+  margin: 12px 0;
+  max-width: 500px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+  animation: fadeIn 0.3s ease-out;
+}
+
+.media-img-container, .media-video-container {
+  width: 100%;
+  border-radius: 12px;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0.2);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  aspect-ratio: 1/1;
+}
+
+.media-video-container {
+  aspect-ratio: 16/9;
+}
+
+.generated-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 12px;
+  transition: transform var(--transition-normal);
+}
+
+.generated-image:hover {
+  transform: scale(1.02);
+}
+
+.generated-video {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  border-radius: 12px;
+}
+
+.media-caption {
+  font-size: 13px;
+  color: var(--text-secondary);
+  font-style: italic;
+  line-height: 1.4;
+  margin: 0;
+  padding: 0 4px;
+}
+
+.media-actions-row {
+  display: flex;
+  gap: 8px;
+  width: 100%;
+}
+
+.media-download-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: linear-gradient(135deg, var(--brand-green) 0%, #1e7e4a 100%);
+  color: #ffffff;
+  border: none;
+  border-radius: 10px;
+  padding: 10px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  cursor: pointer;
+  transition: opacity var(--transition-fast), transform var(--transition-fast);
+  flex: 1;
+  box-shadow: 0 2px 8px rgba(30, 190, 110, 0.2);
+}
+
+.media-download-btn:hover {
+  opacity: 0.9;
+  transform: translateY(-1px);
+}
+
+.media-download-btn:active {
+  transform: translateY(0);
+}
+
+.media-download-btn svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Player de Áudio Customizado */
+.custom-audio-player {
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-light);
+  border-radius: 12px;
+  padding: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  width: 100%;
+}
+
+.audio-play-btn {
+  background: var(--brand-green);
+  border: none;
+  color: #ffffff;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: transform var(--transition-fast);
+}
+
+.audio-play-btn:hover {
+  transform: scale(1.05);
+}
+
+.audio-play-btn svg {
+  width: 18px;
+  height: 18px;
+}
+
+.audio-play-btn svg.hidden {
+  display: none;
+}
+
+.audio-timeline-container {
+  flex: 1;
+  height: 6px;
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 3px;
+  position: relative;
+  cursor: pointer;
+}
+
+.audio-timeline {
+  width: 100%;
+  height: 100%;
+}
+
+.audio-progress {
+  height: 100%;
+  background: var(--brand-green);
+  border-radius: 3px;
+  width: 0%;
+  transition: width 0.1s linear;
+}
+
+.audio-time {
+  font-size: 12px;
+  color: var(--text-muted);
+  font-family: monospace;
+  min-width: 32px;
+  text-align: right;
+}
+
+/* Loading de Mídia */
+.media-loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 24px;
+  gap: 12px;
+  text-align: center;
+}
+
+.media-spinner {
+  width: 32px;
+  height: 32px;
+  border: 3px solid rgba(30, 190, 110, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--brand-green);
+  animation: spin 1s ease-in-out infinite;
+}
+
+.media-loading-text {
+  font-size: 13.5px;
+  color: var(--text-secondary);
+  margin: 0;
+  font-weight: 500;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; transform: translateY(8px); }
+  to { opacity: 1; transform: translateY(0); }
+}

server.js

@@ -37,8 +37,9 @@ app.get('/login', (req, res) => {
 // API de status do modelo
 app.get('/api/status', requireAuth, (req, res) => {
   res.json({
-    model: process.env.OPENAI_MODEL || 'openai/gpt-4.1-nano',
+    model: process.env.OPENROUTER_MODEL || 'openai/gpt-4.1-nano',
     provider: 'openrouter',
+    minimax_available: !!process.env.MINIMAX_API_KEY,
     timestamp: new Date().toISOString()
   });
 });
@@ -252,7 +253,7 @@ Responda SEMPRE em português do Brasil.`
 
 };
 
-// Rota de Chat com OpenRouter (Streaming nativo)
+// Rota de Chat com OpenRouter com Smart Router Multimodal integrado (MiniMax)
 app.post('/api/chat', requireAuth, async (req, res) => {
   const { messages } = req.body;
 
@@ -260,7 +261,341 @@ app.post('/api/chat', requireAuth, async (req, res) => {
     return res.status(400).json({ error: 'Mensagens inválidas' });
   }
 
-  // Injetar system prompt da Kemily no início da conversa
+  const lastMessage = messages[messages.length - 1];
+  const promptText = lastMessage ? lastMessage.content : '';
+
+  // 1. Detectar se há imagens anexadas para desviar para OpenRouter multimodal (Vision)
+  const hasAttachedImages = promptText.includes('*[Imagem anexada:');
+
+  let intent = 'TEXT';
+
+  // Executar classificação apenas se houver prompt de texto e não houver imagens anexadas
+  if (!hasAttachedImages && promptText && process.env.MINIMAX_API_KEY) {
+    try {
+      const systemDetector = "Você é um classificador de intenções de prompt. Classifique a última mensagem do usuário em uma destas quatro categorias exatas: 'TEXT' (para conversas normais, perguntas, redação de relatórios, planejamentos, textos pedagógicos, respostas gerais), 'IMAGE' (se o usuário estiver pedindo explicitamente para gerar, desenhar, criar ou ilustrar uma imagem, figura, ilustração ou foto), 'AUDIO' (se o usuário estiver pedindo explicitamente para gerar uma música, melodia, trilha sonora, cantiga ou som), ou 'VIDEO' (se o usuário estiver pedindo explicitamente para gerar ou criar um vídeo ou animação). Responda APENAS com a palavra da categoria em letras maiúsculas: TEXT, IMAGE, AUDIO, VIDEO.";
+
+      const detectResponse = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          model: process.env.OPENROUTER_MODEL || 'openai/gpt-4.1-nano',
+          messages: [
+            { role: 'system', content: systemDetector },
+            { role: 'user', content: promptText }
+          ],
+          max_tokens: 5,
+          temperature: 0.0
+        })
+      });
+
+      if (detectResponse.ok) {
+        const detectData = await detectResponse.json();
+        const detectedText = detectData.choices?.[0]?.message?.content?.trim() || 'TEXT';
+        if (['TEXT', 'IMAGE', 'AUDIO', 'VIDEO'].includes(detectedText)) {
+          intent = detectedText;
+          console.log(`[Smart Router] Intenção detectada para o prompt "${promptText.substring(0, 40)}...": ${intent}`);
+        }
+      }
+    } catch (err) {
+      console.error('Erro no classificador de intenções (usando fallback TEXT):', err);
+    }
+  }
+
+  // ==========================================================================
+  // FLUXO DE IMAGEM (MiniMax image-01)
+  // ==========================================================================
+  if (intent === 'IMAGE') {
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+
+    res.write(`data: ${JSON.stringify({ type: 'media_status', message: 'Iniciando geração de imagem com a MiniMax...' })}\n\n`);
+
+    try {
+      // Prompt rewriting: pedir à IA para enriquecer o prompt em inglês para a MiniMax
+      let enrichedPrompt = promptText;
+      try {
+        const rewriteResp = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            model: process.env.OPENROUTER_MODEL || 'openai/gpt-4.1-nano',
+            messages: [
+              { role: 'system', content: "Reescreva o pedido de imagem do usuário em inglês como um prompt altamente detalhado para geradores de imagem (como Midjourney/Stable Diffusion). Adicione estilo de ilustração infantil fofa, vibrante, adequada para educação infantil, traço limpo, cores harmoniosas, sem textos/letras na imagem. Retorne apenas a tradução/prompt em inglês." },
+              { role: 'user', content: promptText }
+            ],
+            max_tokens: 150,
+            temperature: 0.7
+          })
+        });
+        if (rewriteResp.ok) {
+          const rewriteData = await rewriteResp.json();
+          enrichedPrompt = rewriteData.choices?.[0]?.message?.content?.trim() || promptText;
+          console.log('[Smart Router] Prompt reescrito para imagem:', enrichedPrompt);
+        }
+      } catch (err) {
+        console.error('Erro ao reescrever prompt de imagem:', err);
+      }
+
+      res.write(`data: ${JSON.stringify({ type: 'media_status', message: 'Gerando ilustração pedagógica...' })}\n\n`);
+
+      const response = await fetch(`${process.env.MINIMAX_API_BASE}/image_generation`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          model: 'image-01',
+          prompt: enrichedPrompt,
+          aspect_ratio: '1:1',
+          response_format: 'url'
+        })
+      });
+
+      if (!response.ok) {
+        const errText = await response.text();
+        throw new Error(`MiniMax respondeu com erro: ${errText}`);
+      }
+
+      const imgData = await response.json();
+      const imageUrl = imgData.data?.image_url?.[0];
+
+      if (!imageUrl) {
+        throw new Error('Nenhuma imagem foi gerada pela API do MiniMax');
+      }
+
+      res.write(`data: ${JSON.stringify({ type: 'image', url: imageUrl, originalPrompt: promptText })}\n\n`);
+      res.write('data: [DONE]\n\n');
+      return res.end();
+
+    } catch (error) {
+      console.error('Erro na geração de imagem:', error);
+      res.write(`data: ${JSON.stringify({ content: `Ocorreu um erro ao gerar a imagem: ${error.message}` })}\n\n`);
+      res.write('data: [DONE]\n\n');
+      return res.end();
+    }
+  }
+
+  // ==========================================================================
+  // FLUXO DE ÁUDIO/MÚSICA (MiniMax music-2.6)
+  // ==========================================================================
+  if (intent === 'AUDIO') {
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+
+    res.write(`data: ${JSON.stringify({ type: 'media_status', message: 'Compondo a letra da música infantil...' })}\n\n`);
+
+    try {
+      // Gerar letra curta e estilo musical com OpenRouter
+      let lyrics = '';
+      let stylePrompt = '';
+      try {
+        const composerResp = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            model: process.env.OPENROUTER_MODEL || 'openai/gpt-4.1-nano',
+            messages: [
+              { role: 'system', content: "Crie uma letra de música infantil em português baseada no prompt do usuário. A música deve ser muito curta (apenas 2 estrofes e 1 refrão) usando as tags estruturais [Verse] e [Chorus]. Crie também um estilo de trilha adequado em inglês (ex: 'Acoustic children song, happy, acoustic guitar, soft piano, female vocals'). Retorne obrigatoriamente um JSON no formato: {\"lyrics\": \"[Verse]...\", \"style\": \"style in english\"}" },
+              { role: 'user', content: promptText }
+            ],
+            response_format: { type: 'json_object' }
+          })
+        });
+
+        if (composerResp.ok) {
+          const compData = await composerResp.json();
+          const parsedComp = JSON.parse(compData.choices?.[0]?.message?.content || '{}');
+          lyrics = parsedComp.lyrics || `[Verse]\n${promptText}`;
+          stylePrompt = parsedComp.style || 'acoustic children song, happy, female vocals';
+          console.log('[Smart Router] Letra e estilo compostos:', { stylePrompt, lyrics });
+        }
+      } catch (err) {
+        console.error('Erro ao compor letra de música:', err);
+        lyrics = `[Verse]\n${promptText}`;
+        stylePrompt = 'children song, acoustic guitar, female vocals';
+      }
+
+      res.write(`data: ${JSON.stringify({ type: 'media_status', message: 'Gerando áudio da música com a MiniMax...' })}\n\n`);
+
+      const response = await fetch(`${process.env.MINIMAX_API_BASE}/music_generation`, {
+        method: 'POST',
+        headers: {
+          'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}`,
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+          model: 'music-2.6',
+          prompt: stylePrompt,
+          lyrics: lyrics,
+          is_instrumental: false,
+          lyrics_optimizer: true
+        })
+      });
+
+      if (!response.ok) {
+        const errText = await response.text();
+        throw new Error(`MiniMax respondeu com erro na música: ${errText}`);
+      }
+
+      const musicData = await response.json();
+      let audioUrl = musicData.data?.audio_url;
+
+      // Se a API retornar os dados binários codificados em hex
+      if (!audioUrl && musicData.data?.audio) {
+        const audioBase64 = Buffer.from(musicData.data.audio, 'hex').toString('base64');
+        audioUrl = `data:audio/mp3;base64,${audioBase64}`;
+      }
+
+      if (!audioUrl) {
+        throw new Error('Nenhum áudio de música foi gerado pela API da MiniMax');
+      }
+
+      res.write(`data: ${JSON.stringify({ type: 'audio', url: audioUrl, originalPrompt: promptText })}\n\n`);
+      res.write('data: [DONE]\n\n');
+      return res.end();
+
+    } catch (error) {
+      console.error('Erro na geração de música:', error);
+      res.write(`data: ${JSON.stringify({ content: `Ocorreu um erro ao compor a música: ${error.message}` })}\n\n`);
+      res.write('data: [DONE]\n\n');
+      return res.end();
+    }
+  }
+
+  // ==========================================================================
+  // FLUXO DE VÍDEO (MiniMax video-01 - Assíncrono)
+  // ==========================================================================
+  if (intent === 'VIDEO') {
+    res.setHeader('Content-Type', 'text/event-stream');
+    res.setHeader('Cache-Control', 'no-cache');
+    res.setHeader('Connection', 'keep-alive');
+
+    res.write(`data: ${JSON.stringify({ type: 'media_status', message: 'Iniciando geração de vídeo na MiniMax...' })}\n\n`);
+
+    try {
+      // Prompt rewriting em inglês para vídeo
+      let enrichedPrompt = promptText;
+      try {
+        const rewriteResp = await fetch('https://openrouter.ai/api/v1/chat/completions', {
+          method: 'POST',
+          headers: {
+            'Authorization': `Bearer ${process.env.OPENROUTER_API_KEY}`,
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            model: process.env.OPENROUTER_MODEL || 'openai/gpt-4.1-nano',
+            messages: [
+              { role: 'system', content: "Reescreva o pedido de vídeo do usuário em inglês como um prompt altamente descritivo e fluído para geradores de vídeo. Adicione estilo de animação 3D amigável, cores vibrantes, infantil, movimentos suaves. Retorne apenas o prompt em inglês." },
+              { role: 'user', content: promptText }
+            ],
+            max_tokens: 150,
+            temperature: 0.7
+          })
+        });
+        if (rewriteResp.ok) {
+          const rewriteData = await rewriteResp.json();
+          enrichedPrompt = rewriteData.choices?.[0]?.message?.content?.trim() || promptText;
+          console.log('[Smart Router] Prompt reescrito para vídeo:', enrichedPrompt);
+        }
+      } catch (err) {
+        console.error('Erro ao reescrever prompt de vídeo:', err);
+      }
+
+      res.write(`data: ${JSON.stringify({ type: 'media_status', message: 'Criando tarefa de renderização...' })}\n\n`);
+
+      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: enrichedPrompt
+        })
+      });
+
+      if (!response.ok) {
+        const errText = await response.text();
+        throw new Error(`MiniMax respondeu com erro na geração de vídeo: ${errText}`);
+      }
+
+      const jobData = await response.json();
+      const taskId = jobData.task_id;
+
+      if (!taskId) {
+        throw new Error('Nenhum ID de tarefa foi retornado pelo MiniMax');
+      }
+
+      // Polling do status do vídeo
+      let videoUrl = null;
+      let attempts = 0;
+      const maxAttempts = 30; // ~90 segundos máximo (3 segundos de intervalo)
+
+      while (attempts < maxAttempts) {
+        res.write(`data: ${JSON.stringify({ type: 'media_status', message: `Processando vídeo... (${attempts * 3}s / 90s)` })}\n\n`);
+
+        const checkResp = await fetch(`${process.env.MINIMAX_API_BASE}/query/video_generation?task_id=${taskId}`, {
+          headers: { 'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}` }
+        });
+
+        if (checkResp.ok) {
+          const checkData = await checkResp.json();
+          console.log(`[Smart Router] Status do vídeo job ${taskId}:`, checkData.status);
+
+          if (checkData.status === 'Success') {
+            const fileId = checkData.file_id;
+            
+            // Obter link de download real via Files API
+            const fileResp = await fetch(`${process.env.MINIMAX_API_BASE}/files/retrieve?file_id=${fileId}`, {
+              headers: { 'Authorization': `Bearer ${process.env.MINIMAX_API_KEY}` }
+            });
+            
+            if (fileResp.ok) {
+              const fileData = await fileResp.json();
+              videoUrl = fileData.file?.download_url;
+            }
+            break;
+          } else if (checkData.status === 'Fail') {
+            throw new Error('A API da MiniMax falhou em renderizar este vídeo.');
+          }
+        }
+
+        await new Promise(r => setTimeout(r, 3000));
+        attempts++;
+      }
+
+      if (!videoUrl) {
+        throw new Error('Tempo limite de renderização de vídeo excedido');
+      }
+
+      res.write(`data: ${JSON.stringify({ type: 'video', url: videoUrl, originalPrompt: promptText })}\n\n`);
+      res.write('data: [DONE]\n\n');
+      return res.end();
+
+    } catch (error) {
+      console.error('Erro na geração de vídeo:', error);
+      res.write(`data: ${JSON.stringify({ content: `Ocorreu um erro ao gerar o vídeo: ${error.message}` })}\n\n`);
+      res.write('data: [DONE]\n\n');
+      return res.end();
+    }
+  }
+
+  // ==========================================================================
+  // FLUXO PADRÃO DE TEXTO (OpenRouter com SSE streaming original)
+  // ==========================================================================
   const enrichedMessages = [KEMILY_SYSTEM_PROMPT, ...messages];
 
   try {