Update app_enhanced.py

app_enhanced.py

@@ -266,6 +266,11 @@ INDEX_HTML = '''
                     clearInterval(statusInterval);
                     statusText.textContent = "Comic generation complete!";
                     document.getElementById('view-comic-link').style.display = 'inline-block';
+                } else if (data.progress < 0) {
+                    // Handle error state
+                    clearInterval(statusInterval);
+                    statusText.textContent = "An error occurred during generation. Please check the logs.";
+                    progressBar.style.backgroundColor = '#e74c3c'; // Red for error
                 }
             } catch (error) {
                 console.error("Error fetching status:", error);
@@ -284,7 +289,6 @@ INDEX_HTML = '''
                 return;
             }
 
-            // Show progress bar and hide form
             document.getElementById('progress-container').style.display = 'block';
             this.style.display = 'none';
             document.querySelector('.separator').style.display = 'none';
@@ -294,7 +298,6 @@ INDEX_HTML = '''
             formData.append('file', fileInput.files[0]);
 
             try {
-                // Start the upload/generation process
                 const response = await fetch('/uploader', {
                     method: 'POST',
                     body: formData
@@ -304,7 +307,6 @@ INDEX_HTML = '''
                     throw new Error('Upload failed!');
                 }
 
-                // If upload is successful, start polling for status
                 statusInterval = setInterval(checkStatus, 1500);
 
             } catch (error) {
@@ -321,7 +323,6 @@ os.makedirs('video', exist_ok=True)
 os.makedirs('frames/final', exist_ok=True)
 os.makedirs('output', exist_ok=True)
 
-# --- NEW: Helper function to write status updates to a file ---
 def update_status(message, progress):
     """Writes the current progress to a JSON file."""
     status_file = os.path.join('output', 'status.json')
@@ -338,27 +339,230 @@ class EnhancedComicGenerator:
         self.video_fps = None
 
     def cleanup_generated(self):
-        # (This function is complete and unchanged)
-        pass
+        print("🧹 Performing full cleanup of previous run...")
+        if os.path.isdir(self.frames_dir): shutil.rmtree(self.frames_dir)
+        if os.path.isdir(self.output_dir): shutil.rmtree(self.output_dir)
+        if os.path.isdir('temp'): shutil.rmtree('temp')
+        if os.path.exists('test1.srt'): os.remove('test1.srt')
+        os.makedirs(self.frames_dir, exist_ok=True)
+        os.makedirs(self.output_dir, exist_ok=True)
+        print("✅ Cleanup complete.")
 
     def detect_eye_state(self, frame_path):
-        # (This function is complete and unchanged)
-        pass
+        try:
+            img = cv2.imread(frame_path)
+            gray = cv2.cvtColor(img, cv2.COLOR_BGR2GRAY)
+            face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
+            eye_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_eye.xml')
+            faces = face_cascade.detectMultiScale(gray, 1.3, 5)
+            for (x, y, w, h) in faces:
+                roi_gray = gray[y:y+h, x:x+w]
+                eyes = eye_cascade.detectMultiScale(roi_gray)
+                if len(eyes) == 0:
+                    return 'closed'
+                elif len(eyes) == 1:
+                    return 'semi-closed'
+                for (ex, ey, ew, eh) in eyes:
+                    eye_region = roi_gray[ey:ey+eh, ex:ex+ew]
+                    vert_var = np.var(eye_region, axis=0).mean()
+                    if vert_var < 500:
+                        return 'semi-closed'
+            return 'open'
+        except:
+            return 'open'
 
     def regenerate_frame(self, frame_filename, direction):
-        # (This function is complete and unchanged)
-        pass
+        try:
+            if not self.video_fps:
+                return {"success": False, "message": "Video FPS not found. Please regenerate the comic first."}
+
+            metadata_path = 'frames/frame_metadata.json'
+            if not os.path.exists(metadata_path):
+                return {"success": False, "message": "Frame metadata missing."}
+
+            with open(metadata_path, 'r') as f:
+                frame_to_time = json.load(f)
+
+            if frame_filename not in frame_to_time:
+                return {"success": False, "message": "Panel not linked to original video."}
+
+            if isinstance(frame_to_time[frame_filename], dict):
+                current_time = frame_to_time[frame_filename]['time']
+            else:
+                current_time = frame_to_time[frame_filename]
+
+            frame_duration = 1.0 / self.video_fps
+
+            if direction == 'forward':
+                target_time = current_time + frame_duration
+            elif direction == 'backward':
+                target_time = current_time - frame_duration
+            else:
+                return {"success": False, "message": "Invalid direction specified."}
+
+            target_time = max(0, target_time)
+
+            cap = cv2.VideoCapture(self.video_path)
+            if not cap.isOpened():
+                return {"success": False, "message": "Cannot open video."}
+
+            cap.set(cv2.CAP_PROP_POS_MSEC, target_time * 1000)
+            ret, frame = cap.read()
+            cap.release()
+
+            if not ret or frame is None:
+                return {"success": False, "message": f"No frame available at {target_time:.2f}s."}
+
+            new_path = os.path.join(self.frames_dir, frame_filename)
+            cv2.imwrite(new_path, frame)
+            
+            if isinstance(frame_to_time[frame_filename], dict):
+                frame_to_time[frame_filename]['time'] = target_time
+            else:
+                frame_to_time[frame_filename] = target_time
+            
+            with open(metadata_path, 'w') as f:
+                json.dump(frame_to_time, f, indent=2)
+            
+            message = f"Adjusted {direction} to {target_time:.3f}s"
+            print(f"✅ {message}")
+
+            return {
+                "success": True,
+                "message": message,
+                "new_filename": frame_filename
+            }
+
+        except Exception as e:
+            traceback.print_exc()
+            return {"success": False, "message": str(e)}
 
     def get_frame_at_timestamp(self, frame_filename, timestamp_seconds):
-        # (This function is complete and unchanged)
-        pass
+        try:
+            metadata_path = 'frames/frame_metadata.json'
+            if not os.path.exists(metadata_path):
+                return {"success": False, "message": "Frame metadata missing."}
+
+            cap = cv2.VideoCapture(self.video_path)
+            if not cap.isOpened():
+                return {"success": False, "message": "Cannot open video."}
+
+            fps = cap.get(cv2.CAP_PROP_FPS)
+            if fps == 0: fps = 25
+            total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            duration = total_frames / fps
+            if timestamp_seconds < 0 or timestamp_seconds > duration:
+                cap.release()
+                return {"success": False, "message": f"Timestamp must be between 0 and {duration:.2f} seconds."}
+
+            cap.set(cv2.CAP_PROP_POS_MSEC, timestamp_seconds * 1000)
+            ret, frame = cap.read()
+            cap.release()
+
+            if not ret or frame is None:
+                return {"success": False, "message": f"Could not retrieve frame at {timestamp_seconds:.2f}s."}
+
+            new_path = os.path.join(self.frames_dir, frame_filename)
+            cv2.imwrite(new_path, frame)
+            
+            with open(metadata_path, 'r') as f:
+                frame_to_time = json.load(f)
+            
+            if frame_filename in frame_to_time:
+                if isinstance(frame_to_time[frame_filename], dict):
+                    frame_to_time[frame_filename]['time'] = timestamp_seconds
+                else:
+                    frame_to_time[frame_filename] = timestamp_seconds
+                
+                with open(metadata_path, 'w') as f:
+                    json.dump(frame_to_time, f, indent=2)
+            
+            message = f"Jumped to timestamp {timestamp_seconds:.3f}s"
+            print(f"✅ {message}")
+
+            return { "success": True, "message": message }
+
+        except Exception as e:
+            traceback.print_exc()
+            return {"success": False, "message": str(e)}
 
     def generate_keyframes_from_moments(self, video_path, key_moments, max_frames=48):
-        # (This function is complete and unchanged)
-        pass
+        try:
+            cap = cv2.VideoCapture(video_path)
+            if not cap.isOpened():
+                print("❌ Cannot open video for keyframe extraction")
+                return False
+            
+            fps = self.video_fps
+            total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
+            duration = total_frames / fps
+            
+            key_moments.sort(key=lambda x: x['start'])
+            
+            if len(key_moments) > max_frames:
+                first_count = min(5, max_frames // 4)
+                last_count = min(5, max_frames // 4)
+                middle_count = max_frames - first_count - last_count
+                
+                if middle_count > 0 and len(key_moments) > (first_count + last_count):
+                    first_moments = key_moments[:first_count]
+                    last_moments = key_moments[-last_count:]
+                    middle_moments = key_moments[first_count:-last_count]
+                    
+                    if len(middle_moments) > middle_count:
+                        step = len(middle_moments) / middle_count
+                        middle_sampled = [middle_moments[int(i * step)] for i in range(middle_count)]
+                    else:
+                        middle_sampled = middle_moments
+                    
+                    key_moments = first_moments + middle_sampled + last_moments
+                else:
+                    step = len(key_moments) / max_frames
+                    key_moments = [key_moments[int(i * step)] for i in range(max_frames)]
+            
+            frame_metadata = {}
+            frame_count = 0
+            
+            for i, moment in enumerate(key_moments):
+                update_status(f"Extracting frame {i+1}/{len(key_moments)}...", 25 + int(20 * (i / len(key_moments))))
+
+                frame_time = (moment['start'] + moment['end']) / 2
+                
+                if frame_time > duration:
+                    continue
+                
+                frame_number = int(frame_time * fps)
+                
+                cap.set(cv2.CAP_PROP_POS_FRAMES, frame_number)
+                ret, frame = cap.read()
+                
+                if ret:
+                    frame_filename = f"frame_{frame_count:04d}.png"
+                    frame_path = os.path.join(self.frames_dir, frame_filename)
+                    cv2.imwrite(frame_path, frame)
+                    
+                    frame_metadata[frame_filename] = {
+                        'time': frame_time,
+                        'dialogue': moment['text'],
+                        'start': moment['start'],
+                        'end': moment['end']
+                    }
+                    frame_count += 1
+            
+            cap.release()
+            
+            with open(os.path.join('frames', 'frame_metadata.json'), 'w') as f:
+                json.dump(frame_metadata, f, indent=2)
+            
+            print(f"✅ Extracted {frame_count} keyframes from video")
+            return True
+            
+        except Exception as e:
+            print(f"❌ Error extracting keyframes: {e}")
+            traceback.print_exc()
+            return False
 
     def generate_comic(self, smart_mode=False, emotion_match=False):
-        """Main comic generation pipeline with progress updates."""
         start_time = time.time()
         try:
             update_status("Cleaning up old files...", 0)
@@ -413,40 +617,650 @@ class EnhancedComicGenerator:
         except Exception as e:
             print(f"❌ Comic generation failed: {e}")
             traceback.print_exc()
-            update_status(f"Error: {e}", -1) # Use -1 to indicate an error state
+            update_status(f"Error: {e}", -1)
             return False
 
     def _enhance_all_images(self, single_image_path=None):
-        # (This function is complete and unchanged)
-        pass
+        target_dir = self.frames_dir
+        if single_image_path:
+            target_dir = os.path.dirname(single_image_path)
+        if not os.path.exists(target_dir): return
+        try:
+            enhancer = SimpleColorEnhancer()
+            enhancer.enhance_batch(target_dir)
+        except Exception as e:
+            print(f"❌ Simple enhancement failed during execution: {e}")
 
     def _enhance_quality_colors(self, single_image_path=None):
-        # (This function is complete and unchanged)
-        pass
+        target_dir = self.frames_dir
+        if single_image_path:
+            target_dir = os.path.dirname(single_image_path)
+        try:
+            enhancer = QualityColorEnhancer()
+            enhancer.batch_enhance(target_dir)
+        except Exception as e:
+            print(f"⚠️ Quality enhancement failed during execution: {e}")
 
     def _create_ai_bubbles_from_moments(self, black_x, black_y):
-        # (This function is complete and unchanged)
-        pass
+        bubbles = []
+        frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
+        
+        metadata_path = 'frames/frame_metadata.json'
+        if not os.path.exists(metadata_path):
+            print("⚠️ Frame metadata not found, creating empty bubbles.")
+            return [bubble(dialog="") for _ in frame_files]
+        
+        with open(metadata_path, 'r') as f:
+            frame_metadata = json.load(f)
+        
+        for i, frame_file in enumerate(frame_files):
+            update_status(f"Placing bubble {i+1}/{len(frame_files)}...", 75 + int(15 * (i / len(frame_files))))
+            frame_path = os.path.join(self.frames_dir, frame_file)
+            dialogue = ""
+            
+            if frame_file in frame_metadata:
+                dialogue = frame_metadata[frame_file]['dialogue']
+            
+            try:
+                lip_x, lip_y = -1, -1
+                faces = face_detector.detect_faces(frame_path)
+                if faces:
+                    lip_x, lip_y = face_detector.get_lip_position(frame_path, faces[0])
+                
+                bubble_x, bubble_y = ai_bubble_placer.place_bubble_ai(frame_path, (lip_x, lip_y))
+                bubbles.append(bubble(
+                    bubble_offset_x=bubble_x, bubble_offset_y=bubble_y,
+                    lip_x=lip_x, lip_y=lip_y, dialog=dialogue, emotion='normal'
+                ))
+            except Exception as e:
+                print(f"-> Could not place bubble for {frame_file} due to error: {e}. Using default.")
+                bubbles.append(bubble(
+                    bubble_offset_x=50, bubble_offset_y=20,
+                    lip_x=-1, lip_y=-1, dialog=dialogue, emotion='normal'
+                ))
+        return bubbles
 
     def _generate_pages(self, bubbles):
-        # (This function is complete and unchanged)
-        pass
+        try:
+            from backend.fixed_12_pages_800x1080 import generate_12_pages_800x1080
+            frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
+            return generate_12_pages_800x1080(frame_files, bubbles)
+        except ImportError:
+            pages = []
+            frame_files = sorted([f for f in os.listdir(self.frames_dir) if f.endswith('.png')])
+            frames_per_page = 4
+            num_pages = (len(frame_files) + frames_per_page - 1) // frames_per_page
+            frame_counter = 0
+            for i in range(num_pages):
+                page_panels, page_bubbles = [], []
+                for _ in range(frames_per_page):
+                    if frame_counter < len(frame_files):
+                        page_panels.append(panel(
+                            image=frame_files[frame_counter], row_span=6, col_span=6
+                        ))
+                        page_bubbles.append(bubbles[frame_counter] if frame_counter < len(bubbles) else bubble(dialog=""))
+                        frame_counter += 1
+                if page_panels:
+                    pages.append(Page(panels=page_panels, bubbles=page_bubbles))
+            return pages
 
     def _save_results(self, pages):
-        # (This function is complete and unchanged)
-        pass
+        try:
+            os.makedirs(self.output_dir, exist_ok=True)
+            pages_data = []
+            for page in pages:
+                page_dict = {
+                    'panels': [p if isinstance(p, dict) else p.__dict__ for p in page.panels],
+                    'bubbles': [b if isinstance(b, dict) else 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()
+            print("✅ Results saved successfully!")
+        except Exception as e:
+            print(f"Save results failed: {e}")
+            traceback.print_exc()
 
     def _copy_template_files(self):
         """This function contains the complete HTML, CSS, and JavaScript for the interactive editor."""
-        # (This function is complete and unchanged)
-        pass
+        try:
+            template_html = '''<!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; 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: 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, .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; }
+.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; }
+.button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }
+.zoom-controls { display: grid; grid-template-columns: auto 1fr; gap: 5px; align-items: center;}
+.timestamp-controls { display: grid; grid-template-columns: 1fr auto; gap: 5px; }
+.timestamp-controls input { color: #333; font-weight: normal; }
+</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>Bubble Tools:</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>
+        <button onclick="addBubbleToPanel()" class="action-button">💬 Add Bubble</button>
+    </div>
+    <div class="control-group">
+        <label>Panel Tools (Select Panel):</label>
+        <button onclick="replacePanelImage()" class="action-button">🖼️ Replace Image</button>
+        <div class="button-grid">
+            <button onclick="adjustFrame('backward')" class="secondary-button">⬅️ Prev Frame</button>
+            <button onclick="adjustFrame('forward')" class="action-button">Next Frame ➡️</button>
+        </div>
+        <div class="timestamp-controls">
+             <input type="text" id="timestamp-input" placeholder="mm:ss or secs">
+             <button onclick="gotoTimestamp()" class="action-button">Go</button>
+        </div>
+    </div>
+    <div class="control-group">
+        <label>Zoom & Pan (Select Panel):</label>
+        <div class="zoom-controls">
+            <button onclick="resetPanelTransform()" class="secondary-button" style="padding: 4px 6px;">Reset</button>
+            <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" disabled>
+        </div>
+    </div>
+    <div class="control-group">
+        <button onclick="exportPagesToPNG()" class="action-button" style="background-color: #2196F3;">🖨️ Export Pages</button>
+        <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) => {
+            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] && pageData.bubbles[panelIndex].dialog) {
+                    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;
+    let isPanning = false, panStartX, panStartY, panStartTranslateX, panStartTranslateY;
+    
+    function initializeEditor() {
+        document.querySelectorAll('.panel').forEach(panel => {
+            panel.addEventListener('click', e => selectPanel(panel));
+            const img = panel.querySelector('img');
+            if(img) initializePanelImageEvents(img);
+        });
+        document.querySelectorAll('.speech-bubble').forEach(b => initializeBubbleEvents(b));
+        document.getElementById('zoom-slider').addEventListener('input', handleZoom);
+        
+        document.addEventListener('mousemove', (e) => {
+            if (isPanning) panImage(e);
+            if (draggedBubble) drag(e);
+        });
+        document.addEventListener('mouseup', (e) => {
+            if (isPanning) stopPan(e);
+            if (draggedBubble) stopDrag(e);
+        });
+        document.addEventListener('mouseleave', (e) => {
+             if (isPanning) stopPan(e);
+             if (draggedBubble) stopDrag(e);
+        });
+    }
+
+    function initializePanelImageEvents(img) {
+        img.addEventListener('mousedown', startPan);
+    }
+    
+    function initializeBubbleEvents(bubble) {
+        bubble.addEventListener('dblclick', e => { e.stopPropagation(); editBubbleText(bubble); });
+        bubble.addEventListener('mousedown', e => { e.stopPropagation(); 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) { 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'));
+        panel.classList.add('selected');
+        currentlySelectedPanel = panel;
+        selectBubble(null);
+        
+        const img = currentlySelectedPanel.querySelector('img');
+        const zoomSlider = document.getElementById('zoom-slider');
+        zoomSlider.value = img.dataset.zoom || 100;
+        zoomSlider.disabled = false;
+    }
+    
+    function selectBubble(bubble) {
+        if (currentlySelectedBubble) currentlySelectedBubble.classList.remove('selected');
+        currentlySelectedBubble = bubble;
+        if (currentlySelectedBubble) {
+            currentlySelectedBubble.classList.add('selected');
+            if(currentlySelectedPanel) currentlySelectedPanel.classList.remove('selected');
+            currentlySelectedPanel = null;
+            document.getElementById('bubble-type-select').value = currentlySelectedBubble.dataset.type || 'speech';
+            document.getElementById('zoom-slider').disabled = true;
+        }
+    }
+    
+    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) {
+        if (!draggedBubble) return;
+        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 adjustFrame(direction) {
+        if (!currentlySelectedPanel) { alert("Please select a panel first to adjust its frame."); return; }
+        const img = currentlySelectedPanel.querySelector('img');
+        const currentSrc = img.src;
+        let filename = currentSrc.substring(currentSrc.lastIndexOf('/') + 1);
+        if (filename.includes('?')) { filename = filename.split('?')[0]; }
+        img.style.opacity = '0.5';
+        fetch('/regenerate_frame', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filename: filename, direction: direction })
+        })
+        .then(response => response.json())
+        .then(data => {
+            if (data.success) {
+                img.src = `/frames/final/${filename}?t=${new Date().getTime()}`;
+                console.log(data.message);
+            } else { alert('Error: ' + data.message); }
+            img.style.opacity = '1';
+        })
+        .catch(error => {
+            alert('An error occurred during frame adjustment.');
+            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})`;
+        if (zoom > 1) { img.classList.add('pannable'); } else { img.classList.remove('pannable'); }
+    }
+
+    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;
+        const zoom = parseFloat(img.dataset.zoom || 100);
+        if (zoom <= 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');
+        const dx = event.clientX - panStartX;
+        const dy = event.clientY - panStartY;
+        img.dataset.translateX = panStartTranslateX + dx;
+        img.dataset.translateY = panStartTranslateY + dy;
+        updateImageTransform(img);
+    }
+
+    function stopPan(event) {
+        if (!isPanning) return;
+        isPanning = false;
+        if (currentlySelectedPanel) {
+            const img = currentlySelectedPanel.querySelector('img');
+            if(img) img.classList.remove('panning');
+        }
+    }
+
+    function addBubbleToPanel() {
+        if (!currentlySelectedPanel) {
+            alert("Please select a panel first to add a bubble to it.");
+            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 to jump to a timestamp.");
+            return;
+        }
+        const input = document.getElementById('timestamp-input');
+        const timeStr = input.value.trim();
+        if (!timeStr) {
+            alert("Please enter a timestamp (e.g., '1:32' or '92.5').");
+            return;
+        }
+
+        let parsedSeconds = 0;
+        if (timeStr.includes(':')) {
+            const parts = timeStr.split(':');
+            try {
+                const minutes = parseInt(parts[0], 10);
+                const seconds = parseFloat(parts[1]);
+                if (!isNaN(minutes) && !isNaN(seconds)) {
+                    parsedSeconds = (minutes * 60) + seconds;
+                } else { throw new Error(); }
+            } catch {
+                alert("Invalid time format. Please use 'mm:ss'.");
+                return;
+            }
+        } else {
+            parsedSeconds = parseFloat(timeStr);
+            if (isNaN(parsedSeconds)) {
+                alert("Invalid time format. Please enter seconds as a number.");
+                return;
+            }
+        }
+
+        const img = currentlySelectedPanel.querySelector('img');
+        let filename = img.src.substring(img.src.lastIndexOf('/') + 1);
+        if (filename.includes('?')) { filename = filename.split('?')[0]; }
+
+        img.style.opacity = '0.5';
+        fetch('/goto_timestamp', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ filename: filename, timestamp: parsedSeconds })
+        })
+        .then(response => response.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(error => {
+            alert('An error occurred while fetching the timestamp.');
+            img.style.opacity = '1';
+        });
+    }
+</script>
+</body>
+</html>'''
+            with open(os.path.join(self.output_dir, 'page.html'), 'w', encoding='utf-8') as f:
+                f.write(template_html)
+            print("📄 Template files copied successfully!")
+        except Exception as e:
+            print(f"Template copy failed: {e}")
 
 # --- Flask Routes ---
 comic_generator = EnhancedComicGenerator()
 
 @app.route('/')
 def index():
-    # Serve the new, styled HTML directly
     return INDEX_HTML
 
 @app.route('/uploader', methods=['POST'])
@@ -460,7 +1274,6 @@ def upload_file():
             os.remove(comic_generator.video_path)
         f.save(comic_generator.video_path)
         
-        # Start the generation in a background thread
         thread = threading.Thread(target=comic_generator.generate_comic)
         thread.start()
         
@@ -472,17 +1285,14 @@ def upload_file():
 
 @app.route('/status')
 def status():
-    """Endpoint for the frontend to poll for progress updates."""
     status_file = os.path.join('output', 'status.json')
     if os.path.exists(status_file):
         return send_from_directory('output', 'status.json')
     else:
-        # If the file doesn't exist yet, it means the process is initializing
         return jsonify({'message': 'Initializing...', 'progress': 0})
 
 @app.route('/handle_link', methods=['POST'])
 def handle_link():
-    # This function is now disabled on the frontend but kept for future use
     try:
         link = request.form.get('link', '')
         if not link: return "❌ No link provided"
@@ -491,18 +1301,70 @@ def handle_link():
         with yt_dlp.YoutubeDL(ydl_opts) as ydl:
             ydl.download([link])
         
-        # Start generation in a background thread
         thread = threading.Thread(target=comic_generator.generate_comic)
         thread.start()
         
-        # This response is for API calls, the main UI will use polling
         return "Generation started. Please poll /status for updates."
     except Exception as e:
         traceback.print_exc()
         return f"❌ An unexpected error occurred: {str(e)}"
 
-# (All other routes: /replace_panel, /regenerate_frame, /goto_timestamp, /comic, etc. are complete and unchanged)
-# ...
+@app.route('/replace_panel', methods=['POST'])
+def replace_panel():
+    try:
+        if 'image' not in request.files: return jsonify({'success': False, 'error': 'No image file provided.'})
+        file = request.files['image']
+        timestamp = int(time.time() * 1000)
+        filename = f"replaced_panel_{timestamp}.png"
+        save_path = os.path.join(comic_generator.frames_dir, filename)
+        file.save(save_path)
+        print(f"✅ Replaced panel with '{filename}' without applying color enhancement.")
+        return jsonify({'success': True, 'new_filename': filename})
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({'success': False, 'error': str(e)})
+
+@app.route('/regenerate_frame', methods=['POST'])
+def regenerate_frame_route():
+    try:
+        data = request.get_json()
+        filename = data.get('filename')
+        direction = data.get('direction')
+        if not filename or not direction:
+            return jsonify({'success': False, 'message': 'Filename or direction missing.'})
+        
+        result = comic_generator.regenerate_frame(filename, direction)
+        return jsonify(result)
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/goto_timestamp', methods=['POST'])
+def goto_timestamp_route():
+    try:
+        data = request.get_json()
+        filename = data.get('filename')
+        timestamp = data.get('timestamp')
+        if filename is None or timestamp is None:
+            return jsonify({'success': False, 'message': 'Filename or timestamp missing.'})
+        
+        result = comic_generator.get_frame_at_timestamp(filename, float(timestamp))
+        return jsonify(result)
+    except Exception as e:
+        traceback.print_exc()
+        return jsonify({'success': False, 'message': str(e)})
+
+@app.route('/comic')
+def view_comic():
+    return send_from_directory('output', 'page.html')
+
+@app.route('/output/<path:filename>')
+def output_file(filename):
+    return send_from_directory('output', filename)
+
+@app.route('/frames/final/<path:filename>')
+def frame_file(filename):
+    return send_from_directory('frames/final', filename)
 
 if __name__ == '__main__':
     port = int(os.getenv("PORT", 7860))