admtracksteel/camila
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: melhora layout de quadrinhos com baloes mais compactos, enquadramento de camera afastado e numeracao de painel discreta

Browse Source
This commit is contained in:
admtracksteel
2026-06-03 13:23:05 +00:00
parent a763372c2e
commit db86b9ac5b
3 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+1 -1
View File
@@ -3748,7 +3748,7 @@ const initApp = () => {
// Selo do número // Selo do número
const badge = document.createElement('div'); const badge = document.createElement('div');
badge.className = 'comic-panel-number-badge'; badge.className = 'comic-panel-number-badge';
badge.textContent = `Quadro ${panel.panel_number}`; badge.textContent = panel.panel_number;
imgContainer.appendChild(badge); imgContainer.appendChild(badge);
// Balão de fala absoluto por cima se habilitado e houver diálogo // Balão de fala absoluto por cima se habilitado e houver diálogo
public/style.css
+14 -10
View File
@@ -3180,31 +3180,35 @@ code {
.comic-speech-bubble { .comic-speech-bubble {
position: absolute; position: absolute;
top: 10px; top: 8px;
left: 10px; left: 8px;
background: white; background: white;
border: 2px solid #1e293b; border: 2px solid #1e293b;
border-radius: 12px; border-radius: 10px;
padding: 6px 10px; padding: 4px 8px;
font-size: 0.78rem; font-size: 0.72rem;
font-weight: 700; font-weight: 700;
color: #0f172a; color: #0f172a;
max-width: 80%; max-width: 65%;
box-shadow: 2px 2px 0px rgba(30, 41, 59, 0.15); box-shadow: 2px 2px 0px rgba(30, 41, 59, 0.15);
z-index: 10; z-index: 10;
} }
.comic-panel-number-badge { .comic-panel-number-badge {
position: absolute; position: absolute;
top: 10px; top: 8px;
right: 10px; right: 8px;
background: #fef08a; /* Amarelo claro */ background: #fef08a; /* Amarelo claro */
color: #1e293b; color: #1e293b;
font-weight: 800; font-weight: 800;
font-size: 0.8rem; font-size: 0.8rem;
padding: 2px 6px; width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid #1e293b; border: 2px solid #1e293b;
border-radius: 6px; border-radius: 50%;
z-index: 12; z-index: 12;
box-shadow: 1px 1px 0px #1e293b; box-shadow: 1px 1px 0px #1e293b;
} }
server.js
+3 -3
View File
@@ -332,7 +332,7 @@ app.post('/api/comics/generate-script', requireAuth, async (req, res) => {
try { try {
const prompt = `Crie uma história em quadrinhos pedagógica infantil com o tema: "${tema}". const prompt = `Crie uma história em quadrinhos pedagógica infantil com o tema: "${tema}".
A história deve conter exatamente ${quantidade} quadrinhos. 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}. Proporção visual: ${proporcao}.
Personagens participantes: ${JSON.stringify(personagens)}. Personagens participantes: ${JSON.stringify(personagens)}.
Cenário/Local principal: ${cenario}. Cenário/Local principal: ${cenario}.
@@ -344,8 +344,8 @@ Gere um JSON perfeitamente válido contendo:
"panels": [ "panels": [
{ {
"panel_number": 1, "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.", "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: Olá, Mariana!') ou narração curta caso não tenha balões." "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."
}, },
... ...
] ]