Adiciona opcao de narracao de video por IA com vozes neurais (Assistente e Antonio), adaptacao automatica de tempo por quadro e conclusao narrativa

public/app.js

@@ -5631,7 +5631,7 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
     });
   }
 
-  // Compilar Vídeo de Apresentação (FFmpeg)
+  // Compilar Vídeo de Apresentação (FFmpeg com Narração IA)
   if (btnCompileComicsVideo) {
     btnCompileComicsVideo.addEventListener('click', async () => {
       if (generatedPanelsData.length === 0) return;
@@ -5640,6 +5640,8 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
       comicsVideoLoader.style.display = 'flex';
       comicsVideoResult.style.display = 'none';
 
+      const voice = document.getElementById('comicsVideoVoice')?.value || 'mulher';
+
       try {
         const response = await fetch('/api/comics/generate-video', {
           method: 'POST',
@@ -5647,7 +5649,9 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
           body: JSON.stringify({
             frames: generatedPanelsData,
             musicSelection: comicsVideoMusic.value,
-            frameDuration: comicsVideoDuration.value
+            frameDuration: comicsVideoDuration.value,
+            narrationVoice: voice,
+            titulo: comicsResultTitle?.textContent || 'História em Quadrinhos'
           })
         });
 

public/index.html

@@ -2063,21 +2063,30 @@
             <div style="display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-light); padding-top: 14px;">
               <span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Criar Apresentação de Vídeo Animada com Música:</span>
               
-              <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
+              <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;">
                 <div class="settings-group" style="gap: 4px;">
-                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">Trilha Sonora de Fundo</label>
+                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">🎙️ Voz da Narração (IA)</label>
+                  <select id="comicsVideoVoice" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
+                    <option value="mulher" selected>👩 Mulher (Voz da Assistente Pedagog)</option>
+                    <option value="homem">👨 Homem (Voz do Antônio)</option>
+                    <option value="none">🔇 Apenas Trilha Musical (Sem Voz)</option>
+                  </select>
+                </div>
+                <div class="settings-group" style="gap: 4px;">
+                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">🎵 Trilha Sonora de Fundo</label>
                   <select id="comicsVideoMusic" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
                     <option value="alegre">🎸 Trilha 1: Alegre e Divertida</option>
                     <option value="calma">🌙 Trilha 2: Calma e Relaxante</option>
                     <option value="aventura">🎮 Trilha 3: Aventura e Mistério</option>
+                    <option value="sem_musica">🔇 Sem Música de Fundo</option>
                   </select>
                 </div>
                 <div class="settings-group" style="gap: 4px;">
-                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">Duração por Quadrinho</label>
+                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">⏱️ Tempo Mínimo / Cena</label>
                   <select id="comicsVideoDuration" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
-                    <option value="3">⏱️ 3 segundos</option>
                     <option value="5" selected>⏱️ 5 segundos</option>
                     <option value="8">⏱️ 8 segundos</option>
+                    <option value="10">⏱️ 10 segundos</option>
                   </select>
                 </div>
               </div>