Consistencia visual dos quadrinhos (estilo fofo 2 a 6 anos), correcao de narracao em video e 22 trilhas com preview

2026-09-01 02:20:21 +00:00
parent b35f817e45
commit 10cca214e0
24 changed files with 333 additions and 92 deletions
@@ -4889,6 +4889,7 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
      }
      fabricaQuadrinhosModal.style.display = 'none';
      if (comicsVideoPlayer) comicsVideoPlayer.pause();
+      if (typeof stopComicsMusicPreview === 'function') stopComicsMusicPreview();
    });
  }

@@ -5033,8 +5034,14 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
        const totalPanels = scriptData.panels.length;
        let completedCount = 0;

+        const CUTE_COMIC_STYLE_SUFFIX = 'adorable cute 3D animated style, Pixar and modern claymation aesthetic, friendly and innocent character design, soft rounded features, big expressive friendly eyes, smooth textures, vibrant warm comforting color palette, whimsical storytelling, sweet and gentle atmosphere, perfect for toddlers and preschoolers (ages 2 to 6), clean studio lighting, 8k render';
+
        const generateSinglePanel = async (panel) => {
-          const fullPrompt = `${panel.image_prompt}, 3D Pixar Disney style, digital children book illustration, vibrant colors, masterpiece, cinematic lighting, ${selectedComicsRatio === '16:9' ? '16:9 aspect ratio' : '4:3 aspect ratio'}`;
+          let fullPrompt = panel.image_prompt || '';
+          if (!fullPrompt.toLowerCase().includes('claymation') && !fullPrompt.toLowerCase().includes('pixar')) {
+            fullPrompt = `${fullPrompt}, ${CUTE_COMIC_STYLE_SUFFIX}`;
+          }
+          fullPrompt = `${fullPrompt}, ${selectedComicsRatio === '16:9' ? '16:9 aspect ratio' : '4:3 aspect ratio'}`;

          let attempts = 0;
          let frameData = null;
@@ -5307,7 +5314,12 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
        }
      }

-      const fullPrompt = `${promptToUse}, 3D Pixar Disney style, digital children book illustration, vibrant colors, masterpiece, cinematic lighting, ${selectedComicsRatio === '16:9' ? '16:9 aspect ratio' : '4:3 aspect ratio'}`;
+      const CUTE_COMIC_STYLE_SUFFIX = 'adorable cute 3D animated style, Pixar and modern claymation aesthetic, friendly and innocent character design, soft rounded features, big expressive friendly eyes, smooth textures, vibrant warm comforting color palette, whimsical storytelling, sweet and gentle atmosphere, perfect for toddlers and preschoolers (ages 2 to 6), clean studio lighting, 8k render';
+      let fullPrompt = promptToUse || '';
+      if (!fullPrompt.toLowerCase().includes('claymation') && !fullPrompt.toLowerCase().includes('pixar')) {
+        fullPrompt = `${fullPrompt}, ${CUTE_COMIC_STYLE_SUFFIX}`;
+      }
+      fullPrompt = `${fullPrompt}, ${selectedComicsRatio === '16:9' ? '16:9 aspect ratio' : '4:3 aspect ratio'}`;

      const resp = await fetch('/api/comics/generate-frame', {
        method: 'POST',
@@ -5707,6 +5719,7 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
    btnCompileComicsVideo.addEventListener('click', async () => {
      if (generatedPanelsData.length === 0) return;

+      stopComicsMusicPreview();
      btnCompileComicsVideo.disabled = true;
      comicsVideoLoader.style.display = 'flex';
      comicsVideoResult.style.display = 'none';
@@ -5719,8 +5732,8 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            frames: generatedPanelsData,
-            musicSelection: comicsVideoMusic.value,
-            frameDuration: comicsVideoDuration.value,
+            musicSelection: comicsVideoMusic ? comicsVideoMusic.value : 'alegre',
+            frameDuration: comicsVideoDuration ? comicsVideoDuration.value : 5,
            narrationVoice: voice,
            titulo: comicsResultTitle?.textContent || 'História em Quadrinhos'
          })
@@ -5749,6 +5762,72 @@ Se algum dado não for mencionado, deixe a string vazia ou false para boolean.`
    });
  }

+  // --- PREVIEW INTERATIVO DE TRILHAS SONORAS (PLAY/STOP) ---
+  let comicsPreviewAudio = null;
+  const btnPreviewComicsMusic = document.getElementById('btnPreviewComicsMusic');
+  const comicsMusicPreviewIcon = document.getElementById('comicsMusicPreviewIcon');
+  const comicsMusicPreviewText = document.getElementById('comicsMusicPreviewText');
+  const comicsMusicPlayingTag = document.getElementById('comicsMusicPlayingTag');
+
+  function stopComicsMusicPreview() {
+    if (comicsPreviewAudio) {
+      comicsPreviewAudio.pause();
+      comicsPreviewAudio.currentTime = 0;
+      comicsPreviewAudio = null;
+    }
+    if (comicsMusicPreviewIcon) comicsMusicPreviewIcon.textContent = '▶️';
+    if (comicsMusicPreviewText) comicsMusicPreviewText.textContent = 'Ouvir';
+    if (comicsMusicPlayingTag) comicsMusicPlayingTag.style.display = 'none';
+    if (btnPreviewComicsMusic) {
+      btnPreviewComicsMusic.style.background = 'rgba(219, 39, 119, 0.1)';
+      btnPreviewComicsMusic.style.borderColor = 'var(--brand-pink)';
+      btnPreviewComicsMusic.style.color = 'var(--brand-pink)';
+    }
+  }
+
+  if (btnPreviewComicsMusic && comicsVideoMusic) {
+    btnPreviewComicsMusic.addEventListener('click', () => {
+      const selectedTrack = comicsVideoMusic.value;
+      if (selectedTrack === 'sem_musica') {
+        showCustomAlert('Sem Trilha', 'A opção "Sem Música de Fundo" está selecionada.');
+        return;
+      }
+
+      if (comicsPreviewAudio && !comicsPreviewAudio.paused) {
+        stopComicsMusicPreview();
+        return;
+      }
+
+      stopComicsMusicPreview();
+      const audioUrl = `/assets/audio/${selectedTrack}.mp3`;
+      comicsPreviewAudio = new Audio(audioUrl);
+      comicsPreviewAudio.volume = 0.55;
+
+      comicsPreviewAudio.play().then(() => {
+        if (comicsMusicPreviewIcon) comicsMusicPreviewIcon.textContent = '⏹️';
+        if (comicsMusicPreviewText) comicsMusicPreviewText.textContent = 'Parar';
+        if (comicsMusicPlayingTag) comicsMusicPlayingTag.style.display = 'inline';
+        if (btnPreviewComicsMusic) {
+          btnPreviewComicsMusic.style.background = 'rgba(16, 185, 129, 0.15)';
+          btnPreviewComicsMusic.style.borderColor = '#10b981';
+          btnPreviewComicsMusic.style.color = '#10b981';
+        }
+      }).catch(err => {
+        console.warn('Erro ao reproduzir prévia de áudio:', err.message);
+        stopComicsMusicPreview();
+        showCustomAlert('Áudio', 'Não foi possível carregar a prévia desta trilha.');
+      });
+
+      comicsPreviewAudio.onended = () => {
+        stopComicsMusicPreview();
+      };
+    });
+
+    comicsVideoMusic.addEventListener('change', () => {
+      stopComicsMusicPreview();
+    });
+  }
+
  // ============================================================
  // VIDEOMIND (TRANSCRIÇÃO E ANÁLISE DE VÍDEO PEDAGÓGICO)
  // ============================================================
@@ -2073,13 +2073,52 @@
                  </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>
+                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600; display: flex; justify-content: space-between; align-items: center;">
+                    <span>🎵 Trilha Sonora de Fundo</span>
+                    <span id="comicsMusicPlayingTag" style="font-size: 0.7rem; color: #10a37f; display: none;">🔊 Tocando...</span>
+                  </label>
+                  <div style="display: flex; gap: 6px; align-items: center;">
+                    <select id="comicsVideoMusic" class="obs-select" style="padding: 6px 8px; font-size: 0.8rem; flex: 1;">
+                      <optgroup label="🎸 Alegres & Brincalhonas">
+                        <option value="alegre" selected>🎸 Alegre e Brincalhona</option>
+                        <option value="festa">🎈 Dia de Festa & Balões</option>
+                        <option value="pipoca">🍿 Pula Pula Pipoquinha</option>
+                        <option value="passeio">🚲 Passeio no Parque</option>
+                      </optgroup>
+                      <optgroup label="🌙 Calmas & Canções de Ninar">
+                        <option value="calma">🌙 Calma e Relaxante</option>
+                        <option value="ninar">⭐ Estrelinha Brilhante (Ninar)</option>
+                        <option value="bebes">🍼 Melodia Suave do Berço</option>
+                        <option value="amizade">🤝 Abraço de Amigo & Carinho</option>
+                      </optgroup>
+                      <optgroup label="✨ Contos de Fadas & Magia">
+                        <option value="magica">✨ Terra da Fantasia & Magia</option>
+                        <option value="castelo">🏰 Castelo dos Contos de Fadas</option>
+                        <option value="carrossel">🎠 Carrossel Encantado</option>
+                        <option value="brinquedos">🧸 Fábrica de Brinquedos</option>
+                        <option value="circo">🎪 Circo Encantado & Palhacinhos</option>
+                      </optgroup>
+                      <optgroup label="🎮 Aventuras & Curiosidade">
+                        <option value="aventura">🎮 Aventura na Floresta</option>
+                        <option value="curiosa">🔍 Pequenos Detetives</option>
+                        <option value="herois">🦸 Mini Super-Heróis</option>
+                        <option value="espaco">🚀 Viagem ao Espaço Sideral</option>
+                      </optgroup>
+                      <optgroup label="🍃 Natureza & Bichinhos">
+                        <option value="animais">🐾 Fazendinha dos Bichinhos</option>
+                        <option value="jardim">🌸 Jardim das Borboletas</option>
+                        <option value="mar">🐬 Ondinhas do Mar & Golfinhos</option>
+                        <option value="natureza">🍃 Sons Doces da Natureza</option>
+                        <option value="chuva">🌧️ Gotinhas de Chuva Dançantes</option>
+                      </optgroup>
+                      <optgroup label="🔇 Sem Áudio">
+                        <option value="sem_musica">🔇 Sem Música de Fundo</option>
+                      </optgroup>
+                    </select>
+                    <button type="button" id="btnPreviewComicsMusic" class="btn-music-option" style="padding: 6px 10px; font-size: 0.8rem; margin: 0; background: rgba(219, 39, 119, 0.1); border-color: var(--brand-pink); color: var(--brand-pink); font-weight: 600; white-space: nowrap; display: flex; align-items: center; gap: 4px;" title="Ouvir prévia desta trilha sonora">
+                      <span id="comicsMusicPreviewIcon">▶️</span> <span id="comicsMusicPreviewText">Ouvir</span>
+                    </button>
+                  </div>
                </div>
                <div class="settings-group" style="gap: 4px;">
                  <label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">⏱️ Tempo Mínimo / Cena</label>