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

feat: implementa a Fabrica de Quadrinhos com geracao de PDF e video animado via FFmpeg

Browse Source
This commit is contained in:
admtracksteel
2026-06-03 12:01:03 +00:00
parent 4690672245
commit 0dbf687ec9
7 changed files with 914 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/index.html
+167 -1
View File
@@ -234,6 +234,9 @@
<button type="button" class="btn-prompt-mode mode-music" id="barBtnEstudio" style="border-color: rgba(168, 85, 247, 0.4); color: #c084fc; background: rgba(168, 85, 247, 0.05);" title="Abrir painel de Estúdio Musical completo">
<span class="mode-icon">🎹</span> Estúdio Musical
</button>
<button type="button" class="btn-prompt-mode mode-comics" id="barBtnComics" style="border-color: rgba(236, 72, 153, 0.4); color: #f472b6; background: rgba(236, 72, 153, 0.05);" title="Abrir Fábrica de Quadrinhos Pedagógicos">
<span class="mode-icon">🎨</span> Fábrica de Quadrinhos
</button>
<button type="button" class="btn-prompt-mode mode-music" data-mode="AUDIO" title="Compor e gerar uma música pedagógica">
<span class="mode-icon">🎵</span> Criar Letra de Música
</button>
@@ -729,13 +732,176 @@
<pre id="musicStudioLyricsArea" style="background: var(--bg-secondary); padding: 14px; border-radius: 10px; max-height: 180px; overflow-y: auto; font-family: inherit; font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal: Fábrica de Quadrinhos (Criação de histórias pedagógicas visuais) -->
<div id="fabricaQuadrinhosModal" class="settings-modal" style="display: none;">
<div class="settings-modal-content" style="max-width: 800px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
<div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
<h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🎨 Fábrica de Quadrinhos Camila AI</h3>
<button id="btnCloseComicsModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
</div>
<div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
<!-- TEMA -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">1. Tema da História</label>
<textarea id="comicsTemaInput" class="obs-textarea" placeholder="Ex: Lucas e Mariana aprendendo a compartilhar seus brinquedos..." style="margin-top: 4px; height: 60px; min-height: 60px;"></textarea>
</div>
<!-- OPÇÕES RÁPIDAS (QUANTIDADE, BALÕES, PROPORÇÃO) -->
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px;">
<!-- QUANTIDADE -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">2. Tamanho</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-comics-qty active" data-qty="5">5 Quadros</button>
<button type="button" class="btn-music-option btn-comics-qty" data-qty="10">10 Quadros</button>
</div>
</div>
<!-- BALÕES DE FALAS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Falas/Diálogos</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-comics-bubbles active" data-bubbles="true">Com Balões</button>
<button type="button" class="btn-music-option btn-comics-bubbles" data-bubbles="false">Sem Texto</button>
</div>
</div>
<!-- PROPORÇÃO -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">4. Formato Visual</label>
<div class="music-option-grid" style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-comics-ratio active" data-ratio="16:9">16:9 (HD)</button>
<button type="button" class="btn-music-option btn-comics-ratio" data-ratio="4:3">4:3 (Retrô)</button>
</div>
</div>
</div>
<!-- PERSONAGENS -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">5. Personagens Principais</label>
<div style="display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;">
<button type="button" class="btn-music-option btn-comics-char active" data-char="lucas" style="flex: 1; min-width: 120px;">🧒 Lucas (Criança)</button>
<button type="button" class="btn-music-option btn-comics-char" data-char="mariana" style="flex: 1; min-width: 120px;">👧 Mariana (Criança)</button>
<button type="button" class="btn-music-option btn-comics-char" data-char="animais" style="flex: 1; min-width: 120px;">🐾 Animais da Floresta</button>
<button type="button" class="btn-music-option btn-comics-char" data-char="professor" style="flex: 1; min-width: 120px;">👩‍🏫 Professora Camila</button>
</div>
</div>
<!-- CENÁRIO -->
<div class="settings-group">
<label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">6. Cenário da História</label>
<div style="display: flex; gap: 10px; margin-top: 4px;">
<select id="comicsCenarioSelect" class="obs-select" style="flex: 1;">
<option value="no parque de diversões colorido">No Parque de Diversões</option>
<option value="na sala de aula da escola infantil">Na Sala de Aula</option>
<option value="em uma floresta encantada cheia de flores">Na Floresta Encantada</option>
<option value="no zoológico interagindo com animais">No Zoológico</option>
<option value="num jardim ensolarado de uma casa">No Jardim de Casa</option>
<option value="custom">Outro cenário (descreva abaixo)...</option>
</select>
</div>
<input type="text" id="comicsCenarioCustomInput" class="obs-input" placeholder="Descreva o cenário personalizado..." style="margin-top: 8px; display: none;">
</div>
<!-- BOTÃO DE AÇÃO -->
<button id="btnGenerateComics" style="width: 100%; padding: 12px; background: var(--brand-pink, #db2777); color: white; border: none; border-radius: 10px; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 4px 12px rgba(219, 39, 119, 0.3); transition: all 0.2s;">
<span>🎨 Criar Quadrinhos Pedagógicos</span>
</button>
<!-- LOADING DE QUADRINHOS -->
<div id="comicsGenerateLoader" style="display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 30px; background: var(--bg-secondary); border-radius: 12px; border: 1px dashed var(--border-light);">
<div class="media-spinner" style="border-top-color: var(--brand-pink, #db2777);"></div>
<p id="comicsLoaderText" style="color: var(--text-primary); font-weight: 600; font-size: 0.95rem; margin: 0; text-align: center;">Compondo a história pedagógica...</p>
<div style="width: 100%; max-width: 250px; height: 6px; background: var(--border-light); border-radius: 3px; overflow: hidden;">
<div id="comicsLoaderProgress" style="width: 0%; height: 100%; background: var(--brand-pink, #db2777); transition: width 0.4s ease;"></div>
</div>
</div>
<!-- RESULTADOS DA HISTÓRIA -->
<div id="comicsResultArea" style="display: none; flex-direction: column; gap: 20px;">
<h4 id="comicsResultTitle" style="font-family: 'Outfit', sans-serif; font-size: 1.15rem; color: var(--text-primary); margin: 0; text-align: center; font-weight: 700;">Título da História</h4>
<!-- CONTÊINER DOS QUADRINHOS -->
<div id="comicsGridContainer" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px;">
<!-- Gerado dinamicamente: quadrinhos com as imagens e balões de fala correspondentes -->
</div>
<!-- OPÇÕES DE EXPORTAÇÃO -->
<div style="background: var(--bg-secondary); padding: 16px; border-radius: 12px; border: 1px solid var(--border-light); display: flex; flex-direction: column; gap: 14px;">
<h5 style="margin: 0; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--text-secondary); letter-spacing: 0.5px;">📥 Opções de Exportação</h5>
<!-- DOWNLOAD DE PDF -->
<div style="display: flex; flex-direction: column; gap: 6px;">
<span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Salvar como Documento PDF:</span>
<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;">
<button id="btnExportComicsPDFPortrait" class="btn-music-option" style="border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, 0.05);">📄 PDF (1 por página - Retrato)</button>
<button id="btnExportComicsPDFLandscape" class="btn-music-option" style="border-color: #10a37f; color: #10a37f; background: rgba(16, 163, 127, 0.05);">📄 PDF (2 por página - Paisagem)</button>
</div>
</div>
<!-- APRESENTAÇÃO EM VÍDEO -->
<div style="display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--border-light); padding-top: 14px;">
<span style="font-size: 0.8rem; font-weight: 600; color: var(--text-primary);">Criar Apresentação de Vídeo Animada:</span>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 10px;">
<div class="settings-group" style="gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">Trilha Sonora de Fundo</label>
<select id="comicsVideoMusic" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
<option value="alegre">🎸 Trilha 1: Alegre e Divertida</option>
<option value="calma">🌙 Trilha 2: Calma e Relaxante</option>
<option value="aventura">🎮 Trilha 3: Aventura e Mistério</option>
</select>
</div>
<div class="settings-group" style="gap: 4px;">
<label style="font-size: 0.72rem; color: var(--text-secondary); font-weight: 600;">Duração por Quadrinho</label>
<select id="comicsVideoDuration" class="obs-select" style="padding: 6px 10px; font-size: 0.8rem;">
<option value="3">⏱️ 3 segundos</option>
<option value="5" selected>⏱️ 5 segundos</option>
<option value="8">⏱️ 8 segundos</option>
</select>
</div>
</div>
<button id="btnCompileComicsVideo" style="padding: 10px; background: var(--brand-pink, #db2777); color: white; border: none; border-radius: 8px; font-weight: 600; font-size: 0.88rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 6px; transition: all 0.2s;">
<span>🎬 Gerar Apresentação de Vídeo (MP4)</span>
</button>
<!-- Spinner do Vídeo -->
<div id="comicsVideoLoader" style="display: none; align-items: center; gap: 10px; justify-content: center; padding: 12px; background: var(--bg-primary); border-radius: 8px; border: 1px dashed var(--border-light);">
<div class="media-spinner" style="width: 20px; height: 20px; border-width: 2.5px; border-top-color: var(--brand-pink, #db2777);"></div>
<span style="font-size: 0.82rem; color: var(--text-secondary); font-weight: 500;">FFmpeg compilando a apresentação musical...</span>
</div>
<!-- Vídeo Player de Saída -->
<div id="comicsVideoResult" style="display: none; flex-direction: column; align-items: center; gap: 10px; margin-top: 10px;">
<video id="comicsVideoPlayer" controls style="width: 100%; max-width: 480px; border-radius: 8px; border: 1px solid var(--border-light); background: black;"></video>
<a id="comicsVideoDownloadBtn" href="" download="apresentacao_quadrinhos.mp4" class="btn-music-option" style="width: 100%; max-width: 480px; text-decoration: none; border-color: var(--brand-pink); color: var(--brand-pink); background: rgba(219, 39, 119, 0.05); justify-content: center;">
📥 Baixar Vídeo MP4
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bibliotecas externas para renderizar markdown e blocos de código -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<!-- V2 cache-busting: version timestamp -->