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
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
public/style.css
+14 -10
View File
@@ -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;
}
server.js
+3 -3
View File
@@ -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."
},
...
]