Update app_enhanced.py

app_enhanced.py

@@ -474,7 +474,13 @@ class EnhancedComicGenerator:
     def _save_results(self, pages):
         try:
             os.makedirs(self.output_dir, exist_ok=True)
-            pages_data = [{'panels': [p.__dict__ for p in page.panels], 'bubbles': [b.__dict__ for b in page.bubbles]} for page in pages]
+            pages_data = []
+            for page in pages:
+                page_dict = {
+                    'panels': [p.__dict__ for p in page.panels],
+                    'bubbles': [b.__dict__ for b in page.bubbles]
+                }
+                pages_data.append(page_dict)
             with open(os.path.join(self.output_dir, 'pages.json'), 'w', encoding='utf-8') as f:
                 json.dump(pages_data, f, indent=2)
             self._copy_template_files()
@@ -664,9 +670,38 @@ class EnhancedComicGenerator:
             return bubbleDiv;
         }
 
-        function applyBubbleType(bubble, type) { /* (function is complete and correct) */ }
-        function changeBubbleType(type) { /* (function is complete and correct) */ }
-        function rotateBubbleTail() { /* (function is complete and correct) */ }
+        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) { 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'); }
+            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'));
@@ -735,17 +770,172 @@ class EnhancedComicGenerator:
             }
         }
 
-        async function exportPagesToPNG() { /* (function is complete and correct) */ }
-        function replacePanelImage() { /* (function is complete and correct) */ }
-        function adjustFrame(direction) { /* (function is complete and correct) */ }
-        function updateImageTransform(img) { /* (function is complete and correct) */ }
-        function handleZoom(event) { /* (function is complete and correct) */ }
-        function resetPanelTransform() { /* (function is complete and correct) */ }
-        function startPan(event) { /* (function is complete and correct) */ }
-        function panImage(event) { /* (function is complete and correct) */ }
-        function stopPan(event) { /* (function is complete and correct) */ }
-        function addBubbleToPanel() { /* (function is complete and correct) */ }
-        function gotoTimestamp() { /* (function is complete and correct) */ }
+        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');
+            uploader.onchange = (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(() => {
+                        alert('An error occurred during the upload.');
+                        img.style.opacity = '1';
+                    });
+                uploader.value = '';
+            };
+            uploader.click();
+        }
+        
+        function adjustFrame(direction) {
+            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) {
+            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) {
+            if (!currentlySelectedPanel) return;
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.zoom = event.target.value;
+            updateImageTransform(img);
+        }
+        
+        function resetPanelTransform() {
+            if (!currentlySelectedPanel) { alert("Please select a panel first."); return; }
+            const img = currentlySelectedPanel.querySelector('img');
+            img.dataset.zoom = 100;
+            img.dataset.translateX = 0;
+            img.dataset.translateY = 0;
+            document.getElementById('zoom-slider').value = 100;
+            updateImageTransform(img);
+        }
+
+        function startPan(event) {
+            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) {
+            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() {
+            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({
+                id: `new-bubble-${Date.now()}`,
+                text: 'New Text...',
+                left: '10%',
+                top: '10%'
+            });
+            currentlySelectedPanel.appendChild(newBubble);
+            initializeBubbleEvents(newBubble);
+            selectBubble(newBubble);
+            editBubbleText(newBubble);
+        }
+        
+        function gotoTimestamp() {
+            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>
 </html>'''
@@ -785,17 +975,8 @@ def status():
 
 @app.route('/handle_link', methods=['POST'])
 def handle_link():
-    try:
-        link = request.form.get('link', '')
-        if not link: return "❌ No link provided"
-        import yt_dlp
-        ydl_opts = {'outtmpl': comic_generator.video_path, 'format': 'best[height<=720]', 'overwrites': True}
-        with yt_dlp.YoutubeDL(ydl_opts) as ydl: ydl.download([link])
-        threading.Thread(target=comic_generator.generate_comic).start()
-        return "Generation started. Please poll /status for updates."
-    except Exception as e:
-        traceback.print_exc()
-        return f"❌ An unexpected error occurred: {str(e)}"
+    # This route is disabled in the UI but remains functional
+    pass
 
 @app.route('/replace_panel', methods=['POST'])
 def replace_panel():