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

🎨 fix: Elementos da cena como stickers sem fundo branco (mix-blend-mode: multiply + prompts otimizados)

Browse Source
This commit is contained in:
admtracksteel
2026-06-08 10:46:25 +00:00
parent 837bda8c88
commit 4c0df55c66
2 changed files with 9 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app.js
+7 -3
View File
@@ -7626,19 +7626,23 @@ document.addEventListener('DOMContentLoaded', () => {
item.style.background = 'transparent'; item.style.background = 'transparent';
if (layerData.isBackground) { if (layerData.isBackground) {
// Fundo: cobrindo 100% e não selecionável como item de controle // Fundo: cobrindo 100% do canvas
item.style.left = '0'; item.style.left = '0';
item.style.top = '0'; item.style.top = '0';
item.style.width = '100%'; item.style.width = '100%';
item.style.height = '100%'; item.style.height = '100%';
item.style.zIndex = '0'; item.style.zIndex = '0';
item.style.pointerEvents = 'none'; // Por padrão, o fundo não captura eventos para facilitar a seleção dos elementos acima item.style.isolation = 'isolate'; // Isola o fundo para evitar bleeding do blend-mode dos filhos
item.style.pointerEvents = 'none';
item.innerHTML = `<img src="${layerData.url}" item.innerHTML = `<img src="${layerData.url}"
style="width:100%; height:100%; object-fit:cover; pointer-events:none; display:block;">`; style="width:100%; height:100%; object-fit:cover; pointer-events:none; display:block;">`;
item.title = '🖼️ Cenário de Fundo'; item.title = '🖼️ Cenário de Fundo';
} else { } else {
// Elementos: mix-blend-mode: multiply faz o fundo branco desaparecer (efeito sticker)
item.style.isolation = 'isolate';
item.innerHTML = `<img src="${layerData.url}" item.innerHTML = `<img src="${layerData.url}"
style="width:100%; height:100%; object-fit:contain; pointer-events:none;">`; style="width:100%; height:100%; object-fit:contain; pointer-events:none;
mix-blend-mode: multiply; display:block;">`;
item.title = '🎬 ' + (layerData.name || 'Elemento'); item.title = '🎬 ' + (layerData.name || 'Elemento');
} }
server.js
+2 -2
View File
@@ -1605,7 +1605,7 @@ Retorne a resposta estritamente no formato JSON abaixo, sem blocos de código ma
jsonResponse = { jsonResponse = {
backgroundPrompt: `empty scene backdrop for ${tema}, cartoon vector style, no people, no animals, no text`, backgroundPrompt: `empty scene backdrop for ${tema}, cartoon vector style, no people, no animals, no text`,
elements: [ elements: [
{ name: "Elemento Principal", prompt: `${tema}, cartoon vector style, isolated on a solid white background, sticker style, no text` } { name: "Elemento Principal", prompt: `${tema}, cartoon sticker clipart style, completely isolated on a pure white background, no shadows, no background elements, no text` }
] ]
}; };
} }
@@ -1626,7 +1626,7 @@ Retorne a resposta estritamente no formato JSON abaixo, sem blocos de código ma
}, },
body: JSON.stringify({ body: JSON.stringify({
model: 'image-01', model: 'image-01',
prompt: `${promptText}. Complete figures shown from top to bottom without cutoffs, kid-friendly illustration style, 3D Pixar, soft pastel colors, no text, no words, no letters, no writing, no labels.`, prompt: `${promptText}. Complete full-body figure visible from head to toe without any cutoffs. Pure solid white background #FFFFFF, no shadows, no gradients, no gray areas, no drop shadows, no environment, kid-friendly 3D Pixar illustration style, soft pastel colors on the character only, no text, no words, no letters, no writing, no labels.`,
n: 1 n: 1
}) })
}); });