| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Generated Comic - Interactive Editor</title> |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
| <style> |
| body { margin: 0; padding: 20px; background: #f0f0f0; font-family: Arial, sans-serif; } |
| .comic-container { max-width: 1200px; margin: 0 auto; } |
| .comic-page { |
| background: white; width: 600px; height: 400px; |
| box-shadow: 0 0 10px rgba(0,0,0,0.1); box-sizing: content-box; |
| position: relative; overflow: hidden; border: 1px solid #333; |
| padding: 10px; |
| } |
| .comic-grid { |
| display: grid; |
| grid-template-columns: 285px 285px; |
| grid-template-rows: 185px 185px; |
| gap: 10px; |
| width: 100%; height: 100%; |
| } |
| .page-wrapper { margin: 30px auto; width: 622px; display: flex; flex-direction: column; align-items: center; } |
| .page-title { text-align: center; color: #333; margin-bottom: 10px; font-size: 18px; font-weight: bold; } |
| .panel { |
| position: relative; overflow: hidden; width: 100%; height: 100%; |
| box-sizing: border-box; cursor: pointer; border: 1px solid #333; |
| } |
| .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; } |
| .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; } |
| .speech-bubble { |
| position: absolute; display: flex; justify-content: center; align-items: center; |
| width: auto; height: auto; |
| min-width: 50px; max-width: 220px; min-height: 30px; |
| box-sizing: border-box; padding: 8px; |
| box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; |
| cursor: move; overflow: visible; font-size: 13px; font-weight: bold; text-align: center; |
| } |
| .bubble-text { padding: 2px; word-wrap: break-word; } |
| .speech-bubble.selected { outline: 2px dashed #4CAF50; } |
| .speech-bubble textarea { |
| position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; |
| border: 1px solid #4CAF50; background: rgba(255,255,255,0.95); |
| font: inherit; text-align: center; resize: none; padding: 8px; z-index: 102; |
| } |
| |
| .speech-bubble.speech { background: white; border: 2px solid #333; color: #333; border-radius: 15px; } |
| .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; } |
| .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; width: 180px; clip-path: polygon(0% 25%, 17% 21%, 17% 0%, 31% 16%, 50% 4%, 69% 16%, 83% 0%, 83% 21%, 100% 25%, 85% 45%, 95% 62%, 82% 79%, 100% 97%, 79% 89%, 60% 98%, 46% 82%, 27% 95%, 15% 78%, 5% 62%, 15% 45%); } |
| .speech-bubble.narration { background: #FAFAFA; border: 2px solid #BDBDBD; color: #424242; border-radius: 3px; } |
| .speech-bubble.idea { background: linear-gradient(180deg,#FFFDD0 0%, #FFF8B5 100%); border: 2px solid #FFA500; color: #6a4b00; border-radius: 40% 60% 40% 60% / 60% 40% 60% 40%; } |
| |
| .speech-bubble.speech::after, .speech-bubble.idea::after { content: ''; position: absolute; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; } |
| .speech-bubble.speech::after { border-top: 10px solid #333; bottom: -9px; left: 20px; } |
| .speech-bubble.idea::after { border-top: 10px solid #FFA500; bottom: -9px; left: 20px; } |
| .speech-bubble.thought::after { display: none; } |
| .thought-dot { position: absolute; background-color: white; border: 2px solid #555; border-radius: 50%; z-index: -1; } |
| .thought-dot-1 { width: 20px; height: 20px; bottom: -20px; left: 15px; } |
| .thought-dot-2 { width: 12px; height: 12px; bottom: -32px; left: 5px; } |
| |
| .speech-bubble.flipped.speech::after, .speech-bubble.flipped.idea::after { left: auto; right: 20px; } |
| .speech-bubble.flipped.thought .thought-dot-1 { left: auto; right: 15px; } |
| .speech-bubble.flipped.thought .thought-dot-2 { left: auto; right: 5px; } |
| |
| .speech-bubble.flipped-vertical.speech::after, .speech-bubble.flipped-vertical.idea::after { bottom: auto; top: -9px; transform: rotate(180deg); } |
| .speech-bubble.flipped-vertical.thought .thought-dot-1 { bottom: auto; top: -20px; } |
| .speech-bubble.flipped-vertical.thought .thought-dot-2 { bottom: auto; top: -32px; } |
| .edit-controls { |
| position: fixed; bottom: 20px; right: 20px; background: rgba(44, 62, 80, 0.9); |
| color: white; padding: 10px 15px; border-radius: 8px; font-size: 13px; |
| z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.3); width: 220px; |
| } |
| .edit-controls h4 { margin: 0 0 10px 0; color: #26a69a; text-align: center; } |
| .edit-controls button, .edit-controls select { margin-top: 5px; padding: 6px 8px; font-size: 12px; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; width: 100%; box-sizing: border-box; } |
| .edit-controls .control-group { margin-top: 10px; border-top: 1px solid #555; padding-top: 10px; } |
| .edit-controls .reset-button { background-color: #e74c3c; } |
| .edit-controls .action-button { background-color: #4CAF50; } |
| .edit-controls .secondary-button { background-color: #f39c12; } |
| </style> |
| </head> |
| <body> |
| <div class="comic-container"> |
| <h1 class="comic-title">🎬 Generated Comic</h1> |
| <div id="comic-pages"><div class="loading">Loading comic...</div></div> |
| </div> |
| <input type="file" id="image-uploader" style="display: none;" accept="image/*"> |
| |
| <div class="edit-controls"> |
| <h4>✏️ Interactive Editor</h4> |
| <div class="control-group"> |
| <label for="bubble-type-select">Change Selected Bubble Type:</label> |
| <select id="bubble-type-select" onchange="changeBubbleType(this.value)"> |
| <option value="speech">Speech</option> |
| <option value="thought">Thought</option> |
| <option value="reaction">Reaction</option> |
| <option value="narration">Narration</option> |
| <option value="idea">Idea</option> |
| </select> |
| <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button> |
| </div> |
| <div class="control-group"> |
| <button onclick="replacePanelImage()" class="action-button">🖼️ Replace Panel Image</button> |
| <button onclick="regenerateFrame()" class="action-button">🔄 Regenerate Frame</button> |
| <button onclick="exportPagesToPNG()" class="action-button" style="background-color: #2196F3;">🖨️ Export Pages to PNG</button> |
| </div> |
| <div class="control-group"> |
| <button onclick="clearSavedState()" class="reset-button">🔄 Clear Edits & Reset</button> |
| </div> |
| </div> |
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| fetch('/output/pages.json') |
| .then(res => res.ok ? res.json() : Promise.reject(new Error('Failed to load pages.json'))) |
| .then(data => { renderComic(data); initializeEditor(); }) |
| .catch(err => { document.getElementById('comic-pages').innerHTML = `<div class="loading">Error: ${err.message}</div>`; }); |
| }); |
| |
| function renderComic(data) { |
| const container = document.getElementById('comic-pages'); |
| container.innerHTML = ''; |
| if (!data || data.length === 0) return; |
| data.forEach((pageData, pageIndex) => { |
| if (!pageData.panels || pageData.panels.length === 0) return; |
| const pageWrapper = document.createElement('div'); |
| pageWrapper.className = 'page-wrapper'; |
| const pageTitleEl = document.createElement('h2'); |
| pageTitleEl.className = 'page-title'; |
| pageTitleEl.textContent = `Page ${pageIndex + 1}`; |
| pageWrapper.appendChild(pageTitleEl); |
| const pageDiv = document.createElement('div'); |
| pageDiv.className = 'comic-page'; |
| const grid = document.createElement('div'); |
| grid.className = 'comic-grid'; |
| pageData.panels.forEach((panelData, panelIndex) => { |
| const panelDiv = document.createElement('div'); |
| panelDiv.className = 'panel'; |
| const img = document.createElement('img'); |
| img.src = '/frames/final/' + panelData.image; |
| panelDiv.appendChild(img); |
| if (pageData.bubbles && pageData.bubbles[panelIndex]) { |
| const bubbleData = pageData.bubbles[panelIndex]; |
| const bubbleDiv = createBubbleElement({ |
| id: `initial-${pageIndex}-${panelIndex}`, |
| text: bubbleData.dialog || '', |
| left: `${bubbleData.bubble_offset_x ?? 50}px`, |
| top: `${bubbleData.bubble_offset_y ?? 20}px`, |
| }); |
| panelDiv.appendChild(bubbleDiv); |
| } |
| grid.appendChild(panelDiv); |
| }); |
| pageDiv.appendChild(grid); |
| pageWrapper.appendChild(pageDiv); |
| container.appendChild(pageWrapper); |
| }); |
| } |
| |
| let currentlyEditing = null, draggedBubble = null, offset = {x: 0, y: 0}; |
| let currentlySelectedBubble = null; |
| let currentlySelectedPanel = null; |
| |
| function initializeEditor() { |
| document.querySelectorAll('.panel').forEach(p => p.addEventListener('click', e => selectPanel(e.currentTarget))); |
| document.querySelectorAll('.speech-bubble').forEach(b => initializeBubbleEvents(b)); |
| document.addEventListener('mousemove', e => { if (draggedBubble) drag(e); }); |
| document.addEventListener('mouseup', () => { if (draggedBubble) stopDrag(); }); |
| } |
| |
| function initializeBubbleEvents(bubble) { |
| bubble.addEventListener('dblclick', e => { e.stopPropagation(); editBubbleText(bubble); }); |
| bubble.addEventListener('mousedown', e => startDrag(e)); |
| bubble.addEventListener('click', e => { e.stopPropagation(); selectBubble(bubble); }); |
| bubble.addEventListener('wheel', e => { |
| e.preventDefault(); |
| const currentWidth = parseFloat(bubble.style.width) || bubble.offsetWidth; |
| const newWidth = currentWidth - (e.deltaY > 0 ? 10 : -10); |
| if (newWidth >= 60) { |
| bubble.style.width = `${newWidth}px`; |
| bubble.style.height = 'auto'; |
| } |
| }, { passive: false }); |
| } |
| |
| function createBubbleElement(data) { |
| const bubbleDiv = document.createElement('div'); |
| bubbleDiv.dataset.id = data.id; |
| const textSpan = document.createElement('span'); |
| textSpan.className = 'bubble-text'; |
| textSpan.textContent = data.text; |
| bubbleDiv.appendChild(textSpan); |
| bubbleDiv.style.left = data.left; |
| bubbleDiv.style.top = data.top; |
| applyBubbleType(bubbleDiv, 'speech'); |
| return bubbleDiv; |
| } |
| |
| function applyBubbleType(bubble, type) { |
| bubble.querySelectorAll('.thought-dot').forEach(el => el.remove()); |
| let classesToKeep = 'speech-bubble'; |
| if (bubble.classList.contains('selected')) classesToKeep += ' selected'; |
| if (bubble.classList.contains('flipped')) classesToKeep += ' flipped'; |
| if (bubble.classList.contains('flipped-vertical')) classesToKeep += ' flipped-vertical'; |
| bubble.className = classesToKeep; |
| bubble.classList.add(type); |
| bubble.dataset.type = type; |
| if (type === 'thought') { |
| for (let i = 1; i <= 2; i++) { |
| const dot = document.createElement('div'); |
| dot.className = `thought-dot thought-dot-${i}`; |
| bubble.appendChild(dot); |
| } |
| } |
| } |
| |
| function changeBubbleType(type) { |
| if (!currentlySelectedBubble) return; |
| applyBubbleType(currentlySelectedBubble, type); |
| } |
| |
| function rotateBubbleTail() { |
| if (!currentlySelectedBubble) return alert("Please select a bubble to rotate."); |
| const isFlippedH = currentlySelectedBubble.classList.contains('flipped'); |
| const isFlippedV = currentlySelectedBubble.classList.contains('flipped-vertical'); |
| if (!isFlippedH && !isFlippedV) { |
| currentlySelectedBubble.classList.add('flipped'); |
| } else if (isFlippedH && !isFlippedV) { |
| currentlySelectedBubble.classList.add('flipped-vertical'); |
| } else if (isFlippedH && isFlippedV) { |
| currentlySelectedBubble.classList.remove('flipped'); |
| } else { |
| currentlySelectedBubble.classList.remove('flipped-vertical'); |
| } |
| } |
| |
| function selectPanel(panel) { |
| document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected')); |
| panel.classList.add('selected'); |
| currentlySelectedPanel = panel; |
| selectBubble(null); |
| } |
| |
| function selectBubble(bubble) { |
| if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected'); |
| currentlySelectedBubble = bubble; |
| if (currentlySelectedBubble) { |
| currentlySelectedBubble.classList.add('selected'); |
| document.querySelectorAll('.panel.selected').forEach(p => p.classList.remove('selected')); |
| document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech'; |
| } |
| } |
| |
| function editBubbleText(bubble) { |
| if (currentlyEditing) return; |
| currentlyEditing = bubble; |
| const textSpan = bubble.querySelector('.bubble-text'); |
| const currentText = textSpan.textContent; |
| textSpan.style.display = 'none'; |
| bubble.style.height = 'auto'; |
| const textarea = document.createElement('textarea'); |
| textarea.value = currentText; |
| bubble.appendChild(textarea); |
| textarea.focus(); |
| const finishEditing = () => { |
| textSpan.textContent = textarea.value; |
| bubble.removeChild(textarea); |
| textSpan.style.display = ''; |
| currentlyEditing = null; |
| bubble.style.height = 'auto'; |
| }; |
| textarea.addEventListener('blur', finishEditing, { once: true }); |
| textarea.addEventListener('keydown', e => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); textarea.blur(); }}); |
| } |
| |
| function startDrag(e) { |
| const bubble = e.target.closest('.speech-bubble'); |
| if (!bubble || currentlyEditing) return; |
| draggedBubble = bubble; |
| selectBubble(bubble); |
| const rect = bubble.getBoundingClientRect(); |
| offset = { x: e.clientX - rect.left, y: e.clientY - rect.top }; |
| } |
| |
| function drag(e) { |
| const parentRect = draggedBubble.parentElement.getBoundingClientRect(); |
| let x = e.clientX - parentRect.left - offset.x; |
| let y = e.clientY - parentRect.top - offset.y; |
| draggedBubble.style.left = `${x}px`; |
| draggedBubble.style.top = `${y}px`; |
| } |
| |
| function stopDrag() { |
| draggedBubble = null; |
| } |
| |
| function clearSavedState() { |
| if (confirm("Reset all edits to the original AI-generated comic?")) { |
| localStorage.removeItem('comicEditorState'); |
| window.location.reload(); |
| } |
| } |
| |
| async function exportPagesToPNG() { |
| const pages = document.querySelectorAll('.comic-page'); |
| if (pages.length === 0) return alert("No pages found."); |
| alert(`Starting export of ${pages.length} page(s).`); |
| for (let i = 0; i < pages.length; i++) { |
| try { |
| const canvas = await html2canvas(pages[i], { scale: 2 }); |
| const link = document.createElement('a'); |
| link.download = `comic-page-${i + 1}.png`; |
| link.href = canvas.toDataURL('image/png'); |
| link.click(); |
| } catch (err) { |
| alert(`Failed to export page ${i + 1}.`); |
| } |
| } |
| } |
| |
| function replacePanelImage() { |
| if (!currentlySelectedPanel) { |
| alert("Please select a panel first."); |
| return; |
| } |
| const img = currentlySelectedPanel.querySelector('img'); |
| const uploader = document.getElementById('image-uploader'); |
| const oneTimeListener = (event) => { |
| const file = event.target.files[0]; |
| if (!file) return; |
| const formData = new FormData(); |
| formData.append('image', file); |
| img.style.opacity = '0.5'; |
| fetch('/replace_panel', { method: 'POST', body: formData }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| img.src = `/frames/final/${data.new_filename}?t=${new Date().getTime()}`; |
| } else { |
| alert('Error replacing image: ' + data.error); |
| } |
| img.style.opacity = '1'; |
| }) |
| .catch(error => { |
| alert('An error occurred during the upload.'); |
| img.style.opacity = '1'; |
| }); |
| uploader.removeEventListener('change', oneTimeListener); |
| uploader.value = ''; |
| }; |
| uploader.addEventListener('change', oneTimeListener, { once: true }); |
| uploader.click(); |
| } |
| |
| function regenerateFrame() { |
| if (!currentlySelectedPanel) { |
| alert("Please select a panel first."); |
| return; |
| } |
| const img = currentlySelectedPanel.querySelector('img'); |
| const currentSrc = img.src; |
| |
| let filename = currentSrc.substring(currentSrc.lastIndexOf('/') + 1); |
| if (filename.includes('?')) { |
| filename = filename.split('?')[0]; |
| } |
| |
| if (!confirm(`Regenerate frame "${filename}" with a better version?`)) { |
| return; |
| } |
| img.style.opacity = '0.5'; |
| fetch('/regenerate_frame', { |
| method: 'POST', |
| headers: { 'Content-Type': 'application/json' }, |
| body: JSON.stringify({ filename: filename }) |
| }) |
| .then(response => response.json()) |
| .then(data => { |
| if (data.success) { |
| img.src = `/frames/final/${filename}?t=${new Date().getTime()}`; |
| alert(data.message); |
| } else { |
| alert('Error: ' + data.message); |
| } |
| img.style.opacity = '1'; |
| }) |
| .catch(error => { |
| alert('An error occurred during regeneration.'); |
| img.style.opacity = '1'; |
| }); |
| } |
| </script> |
| </body> |
| </html> |
