Update app_enhanced.py

app_enhanced.py

@@ -496,7 +496,7 @@ class EnhancedComicGenerator:
     <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&family=Permanent+Marker&display=swap" rel="stylesheet">
+    <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet">
     <style>
         body { margin: 0; padding: 20px; background: #f0f0f0; font-family: 'Lato', sans-serif; }
         .comic-container { max-width: 1200px; margin: 0 auto; }
@@ -509,89 +509,34 @@ class EnhancedComicGenerator:
         .panel img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.1s ease-out; }
         .panel img.pannable { cursor: grab; }
         .panel img.panning { cursor: grabbing; }
-        .speech-bubble {
-            position: absolute; display: flex; justify-content: center; align-items: center;
-            width: 150px; height: 80px; min-width: 50px; min-height: 30px;
-            box-sizing: border-box;
-            z-index: 10; cursor: move;
-            font-size: 14px; font-weight: bold; text-align: center;
-        }
+        .speech-bubble { font-family: 'Comic Neue', cursive; position: absolute; display: flex; justify-content: center; align-items: center; width: 150px; height: 80px; min-width: 50px; 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 {
-            font-family: "Permanent Marker", cursive;
-            color: #000;
-            padding: 1em;
-            --r: 1.2em; /* radius */
-            --b: 3em;   /* base */
-            --h: 1.8em; /* height */
-            --t: .6;    /* thickness */
-            --p: 20%;
-            --c: #FFFFFF;
-            background: var(--c);
-            border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - (1 - var(--t))*var(--b)/2) min(var(--r),var(--p) - (1 - var(--t))*var(--b)/2)/var(--r);
-            position: relative;
-        }
-        .speech-bubble.speech:before {
-            content: "";
-            position: absolute;
-            top: 100%;
-            left: clamp(0px, var(--p) - var(--b)/2, 100% - var(--b));
-            width: var(--b);
-            height: var(--h);
-            background: inherit;
-            border-bottom-right-radius: 100%;
-            -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 0 0,#0000 99%,#000 101%);
-            mask: radial-gradient(calc(var(--t)*100%) 105% at 0 0,#0000 99%,#000 101%);
-            transform-origin: center;
-        }
-        .speech-bubble.speech.flipped:before {
-            left: auto;
-            right: clamp(0px, var(--p) - var(--b)/2, 100% - var(--b));
-            transform: scaleX(-1);
-        }
-        .speech-bubble.speech.flipped-vertical:before {
-            top: auto; bottom: 100%;
-            transform: scaleY(-1);
-        }
-        .speech-bubble.speech.flipped.flipped-vertical:before {
-            top: auto; bottom: 100%;
-            left: auto; right: clamp(0px, var(--p) - var(--b)/2, 100% - var(--b));
-            transform: scale(-1, -1);
-        }
-        
-        .speech-bubble.thought {
-            border-radius: 50%; border: 3px solid black; background: white; color: black;
-        }
-        .speech-bubble.thought:before {
-            content: ''; position: absolute;
-            width: 8px; height: 8px; bottom: -12px;
-            border-radius: 50%; background: white;
-            left: 20%;
-            box-shadow: 0 0 0 3px black, -10px 8px 0 0px white, -10px 8px 0 3px black;
-        }
-        .speech-bubble.thought.flipped:before {
-            left: auto; right: 20%;
-            box-shadow: 0 0 0 3px black, 10px 8px 0 0px white, 10px 8px 0 3px black;
-        }
-
-        .speech-bubble.reaction {
-            background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900;
-            clip-path: polygon(100% 50%,78% 60%,88% 82%,65% 76%,59% 99%,45% 80%,25% 93%,27% 69%,3% 67%,20% 50%,3% 33%,27% 31%,25% 7%,45% 20%,59% 1%,65% 24%,88% 18%,78% 40%);
-        }
-        
+        .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; }
         .resize-handle { position: absolute; width: 10px; height: 10px; background: #2196F3; border: 1px solid white; border-radius: 50%; display: none; z-index: 11; }
         .speech-bubble.selected .resize-handle { display: block; }
         .resize-handle.se { bottom: -5px; right: -5px; cursor: se-resize; }
         .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
         .resize-handle.ne { top: -5px; right: -5px; cursor: ne-resize; }
         .resize-handle.nw { top: -5px; left: -5px; cursor: nw-resize; }
-        
         .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, .edit-controls input { 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; }
@@ -623,7 +568,6 @@ class EnhancedComicGenerator:
                 <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>
             <select id="font-select" onchange="changeFont(this.value)" disabled>
-                <option value="'Permanent Marker', cursive">Permanent Marker</option>
                 <option value="'Comic Neue', cursive">Comic Neue</option>
                 <option value="'Bangers', cursive">Bangers</option>
                 <option value="'Gloria Hallelujah', cursive">Gloria</option>
@@ -639,7 +583,7 @@ class EnhancedComicGenerator:
                     <input type="color" id="bubble-fill-color" value="#FFFFFF" disabled>
                 </div>
             </div>
-            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Flip Tail</button>
+            <button onclick="rotateBubbleTail()" class="secondary-button">🔄 Rotate Tail</button>
             <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
             <button onclick="deleteBubble()" class="reset-button">🗑️ Delete Bubble</button>
         </div>
@@ -679,6 +623,7 @@ class EnhancedComicGenerator:
         let currentlySelectedBubble = null;
         let currentlySelectedPanel = null;
         let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
+        let isResizing = false, resizeHandle, originalWidth, originalHeight, originalX, originalY, originalMouseX, originalMouseY;
         
         function renderComic(data) {
             const container = document.getElementById('comic-pages');
@@ -729,15 +674,8 @@ class EnhancedComicGenerator:
                 if(currentlySelectedBubble) currentlySelectedBubble.style.color = e.target.value;
             });
             document.getElementById('bubble-fill-color').addEventListener('input', (e) => {
-                if(currentlySelectedBubble) {
-                    if (currentlySelectedBubble.classList.contains('speech')) {
-                        currentlySelectedBubble.style.setProperty('--c', e.target.value);
-                    } else {
-                        currentlySelectedBubble.style.backgroundColor = e.target.value;
-                    }
-                }
+                if(currentlySelectedBubble) currentlySelectedBubble.style.backgroundColor = e.target.value;
             });
-
             document.addEventListener('mousemove', e => { if (isPanning) panImage(e); if (draggedBubble) drag(e); if(isResizing) resizeBubble(e); });
             document.addEventListener('mouseup', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
             document.addEventListener('mouseleave', e => { if (isPanning) stopPan(e); if (draggedBubble) stopDrag(e); if(isResizing) stopResize(e);});
@@ -754,7 +692,6 @@ class EnhancedComicGenerator:
                 handle.addEventListener('mousedown', (e) => startResize(e, dir));
             });
         }
-
         function createBubbleElement(data) {
             const bubbleDiv = document.createElement('div');
             bubbleDiv.dataset.id = data.id;
@@ -778,15 +715,22 @@ class EnhancedComicGenerator:
           if (b.length == 1) b = "0" + b;
           return "#" + r + g + b;
         }
-
         function applyBubbleType(bubble, type) {
-            let classesToKeep = ['speech-bubble'];
-            if (bubble.classList.contains('selected')) classesToKeep.push('selected');
-            if (bubble.classList.contains('flipped')) classesToKeep.push('flipped');
-            if (bubble.classList.contains('flipped-vertical')) classesToKeep.push('flipped-vertical');
-            bubble.className = classesToKeep.join(' ');
+            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) {
@@ -803,8 +747,8 @@ class EnhancedComicGenerator:
             if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
             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'); } 
+            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'); }
         }
@@ -815,12 +759,10 @@ class EnhancedComicGenerator:
             currentlySelectedPanel = panel;
             selectBubble(null);
         }
-
         function selectBubble(bubble) {
             if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
             currentlySelectedBubble = bubble;
             const bubbleControls = ['bubble-text-color', 'bubble-fill-color', 'bubble-type-select', 'font-select'];
-
             if (currentlySelectedBubble) {
                 currentlySelectedBubble.classList.add('selected');
                 if (currentlySelectedPanel) currentlySelectedPanel.classList.remove('selected');
@@ -828,11 +770,9 @@ class EnhancedComicGenerator:
                 
                 const styles = window.getComputedStyle(currentlySelectedBubble);
                 document.getElementById('bubble-text-color').value = rgbToHex(styles.color);
-                const fillColor = currentlySelectedBubble.classList.contains('speech') ? styles.getPropertyValue('--c').trim() : styles.backgroundColor;
-                document.getElementById('bubble-fill-color').value = rgbToHex(fillColor);
+                document.getElementById('bubble-fill-color').value = rgbToHex(styles.backgroundColor);
                 document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
                 document.getElementById('font-select').value = styles.fontFamily.split(',')[0].replace(/"/g, "").replace(/'/g, "").trim();
-
                 document.getElementById('zoom-slider').disabled = true;
                 bubbleControls.forEach(id => document.getElementById(id).disabled = false);
             } else {
@@ -848,7 +788,6 @@ class EnhancedComicGenerator:
             const textarea = document.createElement('textarea');
             const originalHeight = bubble.offsetHeight;
             bubble.style.height = `${originalHeight}px`;
-
             textarea.value = textSpan.textContent;
             bubble.appendChild(textarea);
             textSpan.style.display = 'none';
@@ -862,7 +801,6 @@ class EnhancedComicGenerator:
             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;
@@ -871,16 +809,13 @@ class EnhancedComicGenerator:
             const rect = bubble.getBoundingClientRect();
             offset = { x: e.clientX - rect.left, y: e.clientY - rect.top };
         }
-
         function drag(e) {
             if (!draggedBubble) return;
             const parentRect = draggedBubble.parentElement.getBoundingClientRect();
             draggedBubble.style.left = `${e.clientX - parentRect.left - offset.x}px`;
             draggedBubble.style.top = `${e.clientY - parentRect.top - offset.y}px`;
         }
-
         function stopDrag() { draggedBubble = null; }
-
         function deleteBubble() {
             if (!currentlySelectedBubble) {
                 alert("Please select a bubble to delete.");
@@ -892,7 +827,6 @@ class EnhancedComicGenerator:
                 selectBubble(null);
             }
         }
-
         function startResize(e, dir) {
             e.preventDefault();
             e.stopPropagation();
@@ -907,13 +841,11 @@ class EnhancedComicGenerator:
             originalMouseX = e.clientX;
             originalMouseY = e.clientY;
         }
-
         function resizeBubble(e) {
             if (!isResizing || !currentlySelectedBubble) return;
             const dx = e.clientX - originalMouseX;
             const dy = e.clientY - originalMouseY;
             const bubble = currentlySelectedBubble;
-
             if (resizeHandle.includes('e')) bubble.style.width = `${originalWidth + dx}px`;
             if (resizeHandle.includes('w')) {
                 bubble.style.width = `${originalWidth - dx}px`;
@@ -925,18 +857,26 @@ class EnhancedComicGenerator:
                 bubble.style.top = `${originalY + dy}px`;
             }
         }
-
         function stopResize() { isResizing = false; }
-
         function clearSavedState() {
             if (confirm("Reset all edits?")) {
                 localStorage.removeItem('comicEditorState');
                 window.location.reload();
             }
         }
-
         async function exportPagesToPNG() {
-            // function content...
+            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() {
@@ -969,15 +909,39 @@ class EnhancedComicGenerator:
         }
         
         function adjustFrame(direction) {
-            // function content...
+            if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
+            const img = currentlySelectedPanel.querySelector('img');
+            let filename = img.src.substring(img.src.lastIndexOf('/') + 1).split('?')[0];
+            img.style.opacity = '0.5';
+            fetch('/regenerate_frame', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename, direction })
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.success) {
+                    img.src = `/frames/final/${filename}?t=${new Date().getTime()}`;
+                } else { alert('Error: ' + data.message); }
+                img.style.opacity = '1';
+            })
+            .catch(() => {
+                alert('An error occurred.');
+                img.style.opacity = '1';
+            });
         }
-
         function updateImageTransform(img) {
-            // function content...
+            const zoom = (img.dataset.zoom || 100) / 100;
+            const x = img.dataset.translateX || 0;
+            const y = img.dataset.translateY || 0;
+            img.style.transform = `translateX(${x}px) translateY(${y}px) scale(${zoom})`;
+            img.classList.toggle('pannable', zoom > 1);
         }
-
         function handleZoom(event) {
-            // function content...
+            if (!currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.zoom = event.target.value;
+            updateImageTransform(img);
         }
         
         function resetPanelTransform() {
@@ -989,19 +953,30 @@ class EnhancedComicGenerator:
             document.getElementById('zoom-slider').value = 100;
             updateImageTransform(img);
         }
-
         function startPan(event) {
-            // function content...
+            if (event.button !== 0) return;
+            const img = event.target;
+            if (parseFloat(img.dataset.zoom || 100) <= 100) return;
+            event.preventDefault();
+            isPanning = true;
+            img.classList.add('panning');
+            panStartX = event.clientX;
+            panStartY = event.clientY;
+            panStartTranslateX = parseFloat(img.dataset.translateX || 0);
+            panStartTranslateY = parseFloat(img.dataset.translateY || 0);
         }
-
         function panImage(event) {
-            // function content...
+            if (!isPanning || !currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.translateX = panStartTranslateX + (event.clientX - panStartX);
+            img.dataset.translateY = panStartTranslateY + (event.clientY - panStartY);
+            updateImageTransform(img);
         }
-
         function stopPan() {
-            // function content...
+            if (!isPanning) return;
+            isPanning = false;
+            currentlySelectedPanel?.querySelector('img')?.classList.remove('panning');
         }
-
         function addBubbleToPanel() {
             if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
             const newBubble = createBubbleElement({
@@ -1017,7 +992,39 @@ class EnhancedComicGenerator:
         }
         
         function gotoTimestamp() {
-            // function content...
+            if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
+            const input = document.getElementById('timestamp-input');
+            const timeStr = input.value.trim();
+            if (!timeStr) return;
+            let parsedSeconds = 0;
+            if (timeStr.includes(':')) {
+                const parts = timeStr.split(':');
+                parsedSeconds = parseInt(parts[0], 10) * 60 + parseFloat(parts[1]);
+            } else {
+                parsedSeconds = parseFloat(timeStr);
+            }
+            if (isNaN(parsedSeconds)) { alert("Invalid time format."); return; }
+            const img = currentlySelectedPanel.querySelector('img');
+            let filename = img.src.substring(img.src.lastIndexOf('/') + 1).split('?')[0];
+            img.style.opacity = '0.5';
+            fetch('/goto_timestamp', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ filename, timestamp: parsedSeconds })
+            })
+            .then(res => res.json())
+            .then(data => {
+                if (data.success) {
+                    img.src = `/frames/final/${filename}?t=${new Date().getTime()}`;
+                    input.value = '';
+                    resetPanelTransform();
+                } else { alert('Error: ' + data.message); }
+                img.style.opacity = '1';
+            })
+            .catch(() => {
+                alert('An error occurred.');
+                img.style.opacity = '1';
+            });
         }
     </script>
 </body>