diff --git a/public/app.js b/public/app.js index 5336486..3bb43ca 100644 --- a/public/app.js +++ b/public/app.js @@ -3748,7 +3748,7 @@ const initApp = () => { // Selo do número const badge = document.createElement('div'); badge.className = 'comic-panel-number-badge'; - badge.textContent = `Quadro ${panel.panel_number}`; + badge.textContent = panel.panel_number; imgContainer.appendChild(badge); // Balão de fala absoluto por cima se habilitado e houver diálogo diff --git a/public/style.css b/public/style.css index bf5375b..f114010 100644 --- a/public/style.css +++ b/public/style.css @@ -3180,31 +3180,35 @@ code { .comic-speech-bubble { position: absolute; - top: 10px; - left: 10px; + top: 8px; + left: 8px; background: white; border: 2px solid #1e293b; - border-radius: 12px; - padding: 6px 10px; - font-size: 0.78rem; + border-radius: 10px; + padding: 4px 8px; + font-size: 0.72rem; font-weight: 700; color: #0f172a; - max-width: 80%; + max-width: 65%; box-shadow: 2px 2px 0px rgba(30, 41, 59, 0.15); z-index: 10; } .comic-panel-number-badge { position: absolute; - top: 10px; - right: 10px; + top: 8px; + right: 8px; background: #fef08a; /* Amarelo claro */ color: #1e293b; font-weight: 800; font-size: 0.8rem; - padding: 2px 6px; + width: 20px; + height: 20px; + display: flex; + align-items: center; + justify-content: center; border: 2px solid #1e293b; - border-radius: 6px; + border-radius: 50%; z-index: 12; box-shadow: 1px 1px 0px #1e293b; } diff --git a/server.js b/server.js index 4979628..182ddb6 100644 --- a/server.js +++ b/server.js @@ -332,7 +332,7 @@ app.post('/api/comics/generate-script', requireAuth, async (req, res) => { try { const prompt = `Crie uma história em quadrinhos pedagógica infantil com o tema: "${tema}". A história deve conter exatamente ${quantidade} quadrinhos. -Baloes de falas: ${baloes ? 'Sim, a história deve ter falas/diálogos curtos para os personagens' : 'Não, a história é silenciosa, sem falas, apenas a descrição da cena'}. +Baloes de falas: ${baloes ? 'Sim, cada quadrinho deve conter um diálogo/fala extremamente conciso e curto, contendo no máximo 10 palavras no total.' : 'Não, a história é silenciosa, sem falas, apenas a descrição da cena'}. Proporção visual: ${proporcao}. Personagens participantes: ${JSON.stringify(personagens)}. Cenário/Local principal: ${cenario}. @@ -344,8 +344,8 @@ 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 (ex: 'Lucas and Mariana standing in a colorful sunny park, holding hands...'). 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: Olá, Mariana!') ou narração curta caso não tenha balões." + "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.", + "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." }, ... ]