From b3191fda47759ca3eb94a233777affd42d31b7d8 Mon Sep 17 00:00:00 2001 From: admtracksteel Date: Wed, 3 Jun 2026 19:59:40 +0000 Subject: [PATCH] =?UTF-8?q?Modifica=20a=20exibi=C3=A7=C3=A3o=20de=20di?= =?UTF-8?q?=C3=A1logos=20para=20caixa=20edit=C3=A1vel=20embaixo=20dos=20qu?= =?UTF-8?q?adrinhos,=20remove=20bal=C3=B5es=20internos=20e=20atualiza=20pr?= =?UTF-8?q?ompts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/app.js | 70 +++++++++++++++++++++++++++-------------------- public/index.html | 4 +-- server.js | 6 ++-- 3 files changed, 45 insertions(+), 35 deletions(-) diff --git a/public/app.js b/public/app.js index 60b62f6..d569ec6 100644 --- a/public/app.js +++ b/public/app.js @@ -3775,7 +3775,7 @@ const initApp = () => { comicsResultTitle.textContent = project.titulo || 'História em Quadrinhos'; comicsGridContainer.innerHTML = ''; - generatedPanelsData.forEach(panel => { + generatedPanelsData.forEach((panel, index) => { const panelCard = document.createElement('div'); panelCard.className = 'comic-panel-card'; @@ -3793,21 +3793,27 @@ const initApp = () => { badge.textContent = panel.panel_number; imgContainer.appendChild(badge); - if (selectedComicsBubbles && panel.dialogue) { - const bubble = document.createElement('div'); - bubble.className = 'comic-speech-bubble'; - bubble.textContent = panel.dialogue; - imgContainer.appendChild(bubble); - } - panelCard.appendChild(imgContainer); - if (panel.dialogue) { - const caption = document.createElement('div'); - caption.className = 'comic-caption-text'; - caption.textContent = panel.dialogue; - panelCard.appendChild(caption); - } + const caption = document.createElement('div'); + caption.className = 'comic-caption-text'; + caption.style.cssText = 'padding: 10px 14px; background: var(--bg-primary); border-top: 1px solid var(--border-light);'; + + const textarea = document.createElement('textarea'); + textarea.className = 'comic-caption-input'; + textarea.value = panel.dialogue || ''; + textarea.placeholder = 'Digite a fala ou legenda do quadrinho...'; + textarea.style.cssText = 'width: 100%; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; min-height: 50px;'; + + textarea.addEventListener('input', (e) => { + panel.dialogue = e.target.value; + if (generatedPanelsData[index]) { + generatedPanelsData[index].dialogue = e.target.value; + } + }); + + caption.appendChild(textarea); + panelCard.appendChild(caption); comicsGridContainer.appendChild(panelCard); }); @@ -4093,7 +4099,7 @@ const initApp = () => { comicsResultTitle.textContent = scriptData.title || comicsResultTitle.textContent || 'Fábrica de Quadrinhos Camila'; comicsGridContainer.innerHTML = ''; - generatedPanelsData.forEach(panel => { + generatedPanelsData.forEach((panel, index) => { const panelCard = document.createElement('div'); panelCard.className = 'comic-panel-card'; @@ -4112,23 +4118,27 @@ const initApp = () => { badge.textContent = panel.panel_number; imgContainer.appendChild(badge); - // Balão de fala absoluto por cima se habilitado e houver diálogo - if (selectedComicsBubbles && panel.dialogue) { - const bubble = document.createElement('div'); - bubble.className = 'comic-speech-bubble'; - bubble.textContent = panel.dialogue; - imgContainer.appendChild(bubble); - } - panelCard.appendChild(imgContainer); - // Legenda do texto abaixo - if (panel.dialogue) { - const caption = document.createElement('div'); - caption.className = 'comic-caption-text'; - caption.textContent = panel.dialogue; - panelCard.appendChild(caption); - } + const caption = document.createElement('div'); + caption.className = 'comic-caption-text'; + caption.style.cssText = 'padding: 10px 14px; background: var(--bg-primary); border-top: 1px solid var(--border-light);'; + + const textarea = document.createElement('textarea'); + textarea.className = 'comic-caption-input'; + textarea.value = panel.dialogue || ''; + textarea.placeholder = 'Digite a fala ou legenda do quadrinho...'; + textarea.style.cssText = 'width: 100%; border: 1px solid var(--border-light); background: var(--bg-secondary); color: var(--text-primary); border-radius: 6px; padding: 8px; font-family: inherit; font-size: 0.85rem; resize: vertical; box-sizing: border-box; min-height: 50px;'; + + textarea.addEventListener('input', (e) => { + panel.dialogue = e.target.value; + if (generatedPanelsData[index]) { + generatedPanelsData[index].dialogue = e.target.value; + } + }); + + caption.appendChild(textarea); + panelCard.appendChild(caption); comicsGridContainer.appendChild(panelCard); }); diff --git a/public/index.html b/public/index.html index 8c24b83..cd43692 100644 --- a/public/index.html +++ b/public/index.html @@ -798,9 +798,9 @@
- +
- +
diff --git a/server.js b/server.js index c4e3d29..fe928b7 100644 --- a/server.js +++ b/server.js @@ -332,7 +332,7 @@ app.post('/api/comics/generate-script', requireAuth, async (req, res) => { cenario, existingPanels, character_description, - continuationType // 'extend' ou 'new_story' + continuationType } = req.body; if (!tema) { @@ -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 PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (obtida de character_description) em cada quadrinho que aparecerem (ex: em vez de apenas escrever 'Lucas', escreva a descrição detalhada dele com roupas e cabelos específicos, etc). IMPORTANTE PARA TEXTO: 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 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 os balões de diálogo. 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 PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (obtida de character_description) em cada quadrinho que aparecerem (ex: em vez de apenas escrever 'Lucas', escreva a descrição detalhada dele com roupas e cabelos específicos, etc). 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." }, ... @@ -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 PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (do character_description) em cada quadrinho que aparecerem (ex: não escreva apenas 'Mariana', escreva a descrição dela detalhando cabelo e roupas de forma fixa e idêntica em todos os quadrinhos). IMPORTANTE PARA TEXTO: Use enquadramento baixo/afastado (wide angle, medium shot, characters seen from a distance, low framing) e instrua em inglês a deixar o terço superior (30% do topo da imagem) totalmente livre de personagens ou elementos cruciais (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 os balões de diálogo. 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 PARA CONSISTÊNCIA: Substitua TODOS os nomes de personagens por sua descrição física minuciosa em inglês (do character_description) em cada quadrinho que aparecerem (ex: não escreva apenas 'Mariana', escreva a descrição dela detalhando cabelo e roupas de forma fixa e idêntica em todos os quadrinhos). 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." }, ...