Update app_enhanced.py

app_enhanced.py

@@ -513,8 +513,8 @@ class EnhancedComicGenerator:
             position: absolute; display: flex; justify-content: center; align-items: center;
             width: 150px; height: 80px; min-width: 50px; min-height: 30px;
             box-sizing: border-box;
-            box-shadow: 2px 2px 5px rgba(0,0,0,0.3); z-index: 10; cursor: move;
-            font-size: 13px; font-weight: bold; text-align: center;
+            z-index: 10; cursor: move;
+            font-size: 14px; font-weight: bold; text-align: center;
         }
         .bubble-text { padding: 2px; word-wrap: break-word; }
         .speech-bubble.selected { outline: 2px dashed #4CAF50; }
@@ -522,46 +522,65 @@ class EnhancedComicGenerator:
         
         .speech-bubble.speech {
             font-family: "Permanent Marker", cursive;
-            color: #000;
             padding: 1em;
-            --r: 1.2em; /* radius */
-            --b: 2em;   /* base */
-            --h: 1.5em; /* height */
-            --p: 50%;
-            --x: 1.8em;
+            --b: 3em;   /* base */
+            --h: 1.8em; /* height */
+            --t: .6;    /* thickness (from 0 to 1) */
+            --p: 20%;  /* main position (0%:left 100%:right) */
+            --r: 1.2em; /* the radius */
             --c: #FFFFFF;
-            border-radius: var(--r) var(--r) min(var(--r),100% - var(--p) - var(--b)/2) min(var(--r),var(--p) - var(--b)/2)/var(--r);
-            clip-path: polygon(0 100%,0 0,100% 0,100% 100%,
-                clamp(var(--b),var(--p) + var(--b)/2,100%) 100%,
-                calc(var(--p) + var(--x)) calc(100% + var(--h)),
-                clamp(0%,var(--p) - var(--b)/2,100% - var(--b)) 100%);
             background: var(--c);
-            border-image: conic-gradient(var(--c) 0 0) 0 0 1 0/0 0 var(--h) 0/0 999px var(--h) 999px;
-            border: 3px solid black;
+            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(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*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(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*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(-1*var(--t)*var(--b),var(--p) - (var(--t) + 1)*var(--b)/2,100% - var(--b));
+            transform: scale(-1, -1);
         }
         
         .speech-bubble.thought {
-            border-radius: 50%;
-            border: 3px solid black;
-            background: white; color: black;
+            border-radius: 50%; border: 3px solid black; background: white; color: black;
         }
         .speech-bubble.thought:before {
             content: ''; position: absolute;
-            height: 3px; width: 3px; bottom: -20px;
-            border-radius: 100%; background: #fff;
-            left: 20px;
-            box-shadow: 0 0 0 7px white, 0 0 0 10px black, -20px 15px 0 5px white, -20px 15px 0 8px black, -40px 20px 0 2px white, -40px 20px 0 5px black;
+            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 {
-            right: 20px; left: auto;
-            box-shadow: 0 0 0 7px white, 0 0 0 10px black, 20px 15px 0 5px white, 20px 15px 0 8px black, 40px 20px 0 2px white, 40px 20px 0 5px black;
+            left: auto; right: 20%;
+            box-shadow: 0 0 0 3px black, 10px 8px 0 0px white, 10px 8px 0 3px black;
         }
 
         .speech-bubble.reaction {
-            border-radius: 50%;
-            background: #FFD700;
-            border: 3px solid #E53935;
-            color: #D32F2F;
+            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%);
         }
         
@@ -662,6 +681,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');
@@ -766,6 +786,7 @@ class EnhancedComicGenerator:
             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.classList.add(type);
             bubble.dataset.type = type;
@@ -783,7 +804,12 @@ class EnhancedComicGenerator:
         
         function rotateBubbleTail() {
             if (!currentlySelectedBubble) { alert("Please select a bubble first."); return; }
-            currentlySelectedBubble.classList.toggle('flipped');
+            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) {
@@ -913,7 +939,18 @@ class EnhancedComicGenerator:
         }
 
         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() {
@@ -946,15 +983,41 @@ 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() {
@@ -968,15 +1031,30 @@ class EnhancedComicGenerator:
         }
 
         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() {
@@ -994,7 +1072,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>