feat: otimiza prompts de enquadramento da Fábrica de Quadrinhos e corrige fluxo do botão Criar Poesia

public/app.js

@@ -2092,13 +2092,34 @@ const initApp = () => {
   document.querySelectorAll('.btn-prompt-mode').forEach(btn => {
     btn.addEventListener('click', () => {
       if (btn.id === 'barBtnEstudio') return; // Manipulado separadamente
+      if (btn.id === 'barBtnComics') return; // Manipulado separadamente
       
       const mode = btn.dataset.mode;
       const text = userInput.value.trim();
       
-      // Se não houver texto digitado, insere um exemplo de prompt baseado na modalidade
+      // Se for modo POETRY ou TEXT, ou se o input estiver vazio, preenchemos o input com a sugestão correspondente sem enviar
-      if (!text) {
+      const isTextOrPoetry = (mode === 'POETRY' || mode === 'TEXT');
+      
+      if (!text || isTextOrPoetry) {
         let suggestion = "";
+        let baseText = text;
+        
+        // Se o texto atual já for uma das sugestões padrão, limpamos para não duplicar
+        const suggestionsList = [
+          "Crie uma música pedagógica alegre e animada sobre ",
+          "Crie um roteiro detalhado para um vídeo educativo sobre ",
+          "Crie uma ilustração pedagógica com cores vibrantes mostrando ",
+          "Escreva uma poesia infantil rimada e educativa sobre ",
+          "Escreva uma história educativa infantil curta sobre "
+        ];
+        
+        for (const sugg of suggestionsList) {
+          if (baseText.startsWith(sugg)) {
+            baseText = baseText.replace(sugg, "");
+            break;
+          }
+        }
+        
         if (mode === 'AUDIO') {
           suggestion = "Crie uma música pedagógica alegre e animada sobre ";
         } else if (mode === 'VIDEO') {
@@ -2110,9 +2131,13 @@ const initApp = () => {
         } else if (mode === 'TEXT') {
           suggestion = "Escreva uma história educativa infantil curta sobre ";
         }
-        userInput.value = suggestion;
+        
+        userInput.value = suggestion + baseText;
         userInput.focus();
         
+        // Mover cursor para o final do texto
+        userInput.selectionStart = userInput.selectionEnd = userInput.value.length;
+        
         // Ajustar altura do textarea para acomodar a sugestão
         userInput.style.height = 'auto';
         userInput.style.height = userInput.scrollHeight + 'px';
@@ -2120,8 +2145,8 @@ const initApp = () => {
         return;
       }
       
-      // Se houver texto, envia imediatamente forçando o modo correspondente (POETRY é gerado como texto)
+      // Se houver texto e for outro modo (AUDIO, VIDEO, IMAGE), envia imediatamente
-      handleSendMessage(text, false, null, mode === 'POETRY' ? 'TEXT' : mode);
+      handleSendMessage(text, false, null, mode);
     });
   });
 

server.js

@@ -365,7 +365,7 @@ Gere um JSON perfeitamente válido contendo:
   "panels": [
     {
       "panel_number": ${startPanelNum},
-      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE: Use enquadramento afastado (wide angle, medium shot, characters seen from a distance) para deixar espaço livre no topo da imagem para o texto. O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo. Você DEVE incluir e respeitar estritamente a descrição visual física de cada personagem participante neste quadrinho conforme definido nos dados do projeto existente acima, para evitar qualquer alucinação de roupas, cores ou visual físico.",
+      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE: Use enquadramento baixo/afastado (wide angle, medium shot, characters seen from a distance, low framing). O prompt DEVE conter a instrução explícita em inglês de deixar o terço superior (cerca de 30% do topo da imagem) totalmente livre de personagens (cabeças, etc) ou elementos cruciais da cena, mantendo-o como espaço vazio/fundo limpo (ex: 'lower framing, characters positioned in the middle-to-lower section, leaving the top 30% of the image as empty space / simple clean background for text overlay'), para que os balões de diálogo caibam por cima sem ocultar os personagens. O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo. Você DEVE incluir e respeitar estritamente a descrição visual física de cada personagem participante neste quadrinho conforme definido nos dados do projeto existente acima, para evitar qualquer alucinação de roupas, cores ou visual físico.",
       "dialogue": "Falas do quadrinho em português (ex: 'Lucas: Veja aquilo!') com NO MÁXIMO 10 palavras, ou narração curta caso não tenha balões."
     },
     ...
@@ -388,7 +388,7 @@ Gere um JSON perfeitamente válido contendo:
   "panels": [
     {
       "panel_number": 1,
-      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE: Use enquadramento afastado (wide angle, medium shot, characters seen from a distance) para deixar espaço livre no topo da imagem para o texto. Ex: 'Wide angle shot, Lucas and Mariana standing in a colorful sunny park, medium shot showing characters from a distance to leave negative space at the top of the image for text. ...'. Deve incluir a descrição física constante de cada personagem participante neste quadrinho. O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo.",
+      "image_prompt": "Prompt visual detalhado em inglês para o gerador de imagens da MiniMax descrevendo a cena deste quadrinho. IMPORTANTE: Use enquadramento baixo/afastado (wide angle, medium shot, characters seen from a distance, low framing). O prompt DEVE conter a instrução explícita em inglês de deixar o terço superior (cerca de 30% do topo da imagem) totalmente livre de personagens (cabeças, etc) ou elementos cruciais da cena, mantendo-o como espaço vazio/fundo limpo (ex: 'lower framing, characters positioned in the middle-to-lower section, leaving the top 30% of the image as empty space / simple clean background for text overlay'), para que os balões de diálogo caibam por cima sem ocultar os personagens. Ex: 'Wide angle shot, Lucas and Mariana standing in a colorful sunny park, lower framing, characters positioned in the middle-to-lower section, leaving the top 30% of the image as empty sky for text overlay. ...'. Deve incluir a descrição física constante de cada personagem participante neste quadrinho. O estilo deve ser de ilustração de livro infantil de alta qualidade, 3D Pixar, traço limpo.",
       "dialogue": "Falas do quadrinho em português (ex: 'Lucas: Veja aquilo!') com NO MÁXIMO 10 palavras, ou narração curta caso não tenha balões."
     },
     ...