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

✨ feat: Adicionado gerenciador de camadas para a geração de cartazes e resolvido bug de resize

Browse Source
This commit is contained in:
admtracksteel
2026-06-08 11:23:51 +00:00
parent cf5a46c86c
commit 002218fe13
3 changed files with 441 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+21 -11
View File
@@ -1885,17 +1885,31 @@
<!-- 🎬 ESTÚDIO DE CENAS EM CAMADAS -->
<div id="scenesStudioPanel" style="background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(59,130,246,0.08)); border: 1px solid rgba(139,92,246,0.3); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px;">
<!-- Header -->
<div style="display: flex; align-items: center; gap: 8px;">
<span style="font-size: 1.3rem;">🎬</span>
<div>
<div style="flex:1;">
<div style="font-weight: 700; color: var(--text-primary); font-size: 0.9rem;">Estúdio de Cenas em Camadas</div>
<div style="font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px;">A IA desmonta a cena em elementos editáveis individualmente</div>
<div style="font-size: 0.72rem; color: var(--text-secondary); margin-top: 1px;">Cada linha = uma camada gerada separadamente pela IA</div>
</div>
</div>
<textarea id="sceneDecomposePrompt" class="obs-input" rows="3" placeholder="Descreva a cena... Ex: Duas crianças e um cachorrinho num gramado de parque, com um escorregador ao fundo" style="resize: vertical; font-size: 0.85rem; padding: 10px; border-radius: 8px; line-height: 1.4;"></textarea>
<button id="btnDecomposeScene" class="btn-save-settings" style="background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: white; border: none; padding: 8px 14px; font-size: 0.82rem; font-weight: 700; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s;">
<span>✨ Criar Cena em Camadas</span>
<!-- Lista dinâmica de camadas -->
<div id="sceneLayerManagerList" style="display: flex; flex-direction: column; gap: 6px;">
<!-- Camadas inseridas por JS -->
</div>
<!-- Botão Adicionar Camada -->
<button id="btnAddSceneLayer" style="background: rgba(139,92,246,0.15); border: 1px dashed rgba(139,92,246,0.5); color: rgba(139,92,246,1); padding: 7px; font-size: 0.82rem; font-weight: 600; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.2s; width: 100%;">
➕ Adicionar Camada
</button>
<!-- Botão Criar Cena -->
<button id="btnDecomposeScene" style="background: linear-gradient(135deg, #8b5cf6, #3b82f6); color: white; border: none; padding: 9px 14px; font-size: 0.85rem; font-weight: 700; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s;">
✨ Criar Cena
</button>
<!-- Loading state -->
<div id="sceneDecomposeLoader" style="display: none; flex-direction: column; gap: 8px; align-items: center; padding: 10px; background: rgba(0,0,0,0.15); border-radius: 8px;">
<div style="display: flex; gap: 6px; align-items: center;">
@@ -1903,13 +1917,9 @@
<div class="loading-dot" style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:dot-pulse 1.2s ease-in-out 0.4s infinite;"></div>
<div class="loading-dot" style="width:8px;height:8px;border-radius:50%;background:#8b5cf6;animation:dot-pulse 1.2s ease-in-out 0.8s infinite;"></div>
</div>
<div id="sceneDecomposeStatus" style="font-size: 0.78rem; color: var(--text-secondary); text-align: center;">Planejando a cena com IA...</div>
</div>
<!-- Camadas geradas -->
<div id="sceneLayersList" style="display: none; flex-direction: column; gap: 6px;">
<div style="font-size: 0.75rem; color: var(--text-secondary); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">📋 Camadas no Canvas:</div>
<div id="sceneLayersItems" style="display: flex; flex-direction: column; gap: 4px;"></div>
<div id="sceneDecomposeStatus" style="font-size: 0.78rem; color: var(--text-secondary); text-align: center;">Gerando camadas...</div>
</div>
</div>
<div class="settings-group">