Correcao de sintaxe no app.js e aprimoramento da geracao e visualizacao de ilustracoes em Inventando Historias

This commit is contained in:
2026-09-01 02:33:04 +00:00
parent ee1cd3bbe5
commit 12283f29f2
3 changed files with 107 additions and 67 deletions
+10 -1
View File
@@ -7610,6 +7610,8 @@ window.toggleCustomAudio = (btn) => {
turmaId: musicaTurmaSelect?.value || null,
gerarAudio: true
})
});
if (!res.ok) {
const errMsg = await safeExtractError(res, 'Erro ao compor música');
throw new Error(errMsg);
@@ -8117,7 +8119,14 @@ window.toggleCustomAudio = (btn) => {
// Imagem da cena
if (cena.imageUrl) {
if (historiaCenaImg) historiaCenaImg.src = cena.imageUrl;
if (historiaCenaImg) {
historiaCenaImg.src = cena.imageUrl;
historiaCenaImg.onclick = () => window.open(cena.imageUrl, '_blank');
}
const historiaCenaOpenBtn = document.getElementById('historiaCenaOpenBtn');
const historiaCenaDownloadBtn = document.getElementById('historiaCenaDownloadBtn');
if (historiaCenaOpenBtn) historiaCenaOpenBtn.href = cena.imageUrl;
if (historiaCenaDownloadBtn) historiaCenaDownloadBtn.href = cena.imageUrl;
if (historiaCenaImageContainer) historiaCenaImageContainer.style.display = 'block';
if (btnGenerateSceneImage) btnGenerateSceneImage.innerHTML = '🔄 Regenerar Ilustração';
} else {
+6 -2
View File
@@ -1439,8 +1439,12 @@
</div>
<!-- Container da Imagem da Cena -->
<div id="historiaCenaImageContainer" style="display: none; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-light); max-height: 200px; text-align: center; background: rgba(0,0,0,0.2);">
<img id="historiaCenaImg" src="" alt="Ilustração da Cena" style="max-height: 200px; width: auto; object-fit: contain;">
<div id="historiaCenaImageContainer" style="display: none; width: 100%; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-light); text-align: center; background: rgba(0,0,0,0.3); margin: 6px 0;">
<img id="historiaCenaImg" src="" alt="Ilustração da Cena" style="max-height: 280px; width: 100%; object-fit: contain; cursor: pointer; border-radius: 8px;" title="Clique para abrir imagem em tela cheia">
<div style="display: flex; justify-content: center; gap: 8px; padding: 6px; background: rgba(0,0,0,0.4);">
<a id="historiaCenaOpenBtn" href="#" target="_blank" class="btn-music-option" style="padding: 4px 10px; font-size: 0.75rem; margin: 0; text-decoration: none; color: #60a5fa; border-color: rgba(59,130,246,0.3);">🔍 Ver em Tela Cheia</a>
<a id="historiaCenaDownloadBtn" href="#" download="ilustracao_cena.jpg" class="btn-music-option" style="padding: 4px 10px; font-size: 0.75rem; margin: 0; text-decoration: none; color: #34d399; border-color: rgba(52,211,153,0.3);">📥 Baixar Ilustração</a>
</div>
</div>
<!-- Texto da Cena -->