Update app_enhanced.py

app_enhanced.py

@@ -17,18 +17,74 @@ from flask import Flask, jsonify, request, send_from_directory, send_file
 # ======================================================
 # 🚀 ZEROGPU CONFIGURATION
 # ======================================================
-def update_status_file(path, msg, progress):
-    """Helper to write status from within GPU function"""
-    try:
-        with open(path, 'w') as f:
-            json.dump({'message': msg, 'progress': progress}, f)
-    except:
-        pass
+@spaces.GPU
+def gpu_warmup():
+    import torch
+    print(f"✅ ZeroGPU Warmup: CUDA Available: {torch.cuda.is_available()}")
+    return True
+
+# ======================================================
+# 💾 PERSISTENT STORAGE CONFIGURATION
+# ======================================================
+# Checks for Hugging Face Persistent Storage
+if os.path.exists('/data'):
+    BASE_STORAGE_PATH = '/data'
+    print("✅ Using Persistent Storage at /data (Files saved for days/weeks)")
+else:
+    BASE_STORAGE_PATH = '.'
+    print("⚠️ Using Ephemeral/Local Storage (Files lost on restart)")
+
+BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
+SAVED_COMICS_DIR = os.path.join(BASE_STORAGE_PATH, "saved_comics")
+
+os.makedirs(BASE_USER_DIR, exist_ok=True)
+os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
 
+# ======================================================
+# 🧱 DATA CLASSES
+# ======================================================
+def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, emotion='normal', type='speech'):
+    return {
+        'dialog': dialog,
+        'bubble_offset_x': int(bubble_offset_x),
+        'bubble_offset_y': int(bubble_offset_y),
+        'lip_x': int(lip_x),
+        'lip_y': int(lip_y),
+        'emotion': emotion,
+        'type': type,
+        'tail_pos': '50%',
+        'classes': f'speech-bubble {type} tail-bottom'
+    }
+
+def panel(image=""):
+    return {'image': image}
+
+class Page:
+    def __init__(self, panels, bubbles):
+        self.panels = panels
+        self.bubbles = bubbles
+
+# ======================================================
+# 🔧 APP CONFIG
+# ======================================================
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+
+app = Flask(__name__)
+
+def generate_save_code(length=8):
+    chars = string.ascii_uppercase + string.digits
+    while True:
+        code = ''.join(random.choices(chars, k=length))
+        if not os.path.exists(os.path.join(SAVED_COMICS_DIR, code)):
+            return code
+
+# ======================================================
+# 🧠 GLOBAL GPU FUNCTIONS
+# ======================================================
 @spaces.GPU(duration=300)
-def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_path, target_pages):
+def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
     print(f"🚀 GPU Task Started: {video_path} | Pages: {target_pages}")
-    update_status_file(status_path, "Initializing GPU Models...", 10)
     
     import cv2
     import srt
@@ -48,8 +104,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
     cap.release()
 
     user_srt = os.path.join(user_dir, 'subs.srt')
-    update_status_file(status_path, "Extracting Audio & Subtitles...", 20)
-    
     try:
         get_real_subtitles(video_path)
         if os.path.exists('test1.srt'):
@@ -65,9 +119,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
     raw_moments = [{'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in valid_subs]
 
     if target_pages <= 0: target_pages = 1
-    
-    # === 5 PANELS PER PAGE ===
-    panels_per_page = 5 
+    panels_per_page = 4
     total_panels_needed = target_pages * panels_per_page
 
     selected_moments = []
@@ -85,8 +137,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
     count = 0
     frame_files_ordered = []
 
-    update_status_file(status_path, f"Extracting {total_panels_needed} Frames...", 30)
-
     for i, moment in enumerate(selected_moments):
         mid = (moment['start'] + moment['end']) / 2
         if mid > duration: mid = duration - 1
@@ -100,23 +150,17 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
             frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
             frame_files_ordered.append(fname)
             count += 1
-            if count % 2 == 0:
-                prog = 30 + int((count / total_panels_needed) * 20)
-                update_status_file(status_path, f"Extracted Frame {count}/{total_panels_needed}", prog)
-                
     cap.release()
 
     with open(metadata_path, 'w') as f: json.dump(frame_metadata, f, indent=2)
-    
-    update_status_file(status_path, "Auto-Cropping...", 55)
+        
     try: black_bar_crop() 
     except: pass
 
     se = SimpleColorEnhancer()
     qe = QualityColorEnhancer()
 
-    for idx, f in enumerate(frame_files_ordered):
-        update_status_file(status_path, f"Enhancing Image {idx+1}/{len(frame_files_ordered)}", 60 + int((idx / len(frame_files_ordered)) * 20))
+    for f in frame_files_ordered:
         p = os.path.join(frames_dir, f)
         try: se.enhance_single(p, p)
         except: pass
@@ -124,8 +168,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
         except: pass
         
     bubbles_list = []
-    update_status_file(status_path, "Placing Bubbles...", 85)
-    
     for f in frame_files_ordered:
         p = os.path.join(frames_dir, f)
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
@@ -146,8 +188,8 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
             
     pages = []
     for i in range(target_pages):
-        start_idx = i * panels_per_page
-        end_idx = start_idx + panels_per_page
+        start_idx = i * 4
+        end_idx = start_idx + 4
         p_frames = frame_files_ordered[start_idx:end_idx]
         p_bubbles = bubbles_list[start_idx:end_idx]
         if p_frames:
@@ -162,70 +204,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
         
     return result
 
-@spaces.GPU
-def gpu_warmup():
-    import torch
-    print(f"✅ ZeroGPU Warmup: CUDA Available: {torch.cuda.is_available()}")
-    return True
-
-# ======================================================
-# 💾 PERSISTENT STORAGE CONFIGURATION
-# ======================================================
-if os.path.exists('/data'):
-    BASE_STORAGE_PATH = '/data'
-    print("✅ Using Persistent Storage at /data (Files saved for days/weeks)")
-else:
-    BASE_STORAGE_PATH = '.'
-    print("⚠️ Using Ephemeral/Local Storage (Files lost on restart)")
-
-BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
-SAVED_COMICS_DIR = os.path.join(BASE_STORAGE_PATH, "saved_comics")
-
-os.makedirs(BASE_USER_DIR, exist_ok=True)
-os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
-
-# ======================================================
-# 🧱 DATA CLASSES
-# ======================================================
-def bubble(dialog="", bubble_offset_x=50, bubble_offset_y=20, lip_x=-1, lip_y=-1, emotion='normal', type='speech'):
-    return {
-        'dialog': dialog,
-        'bubble_offset_x': int(bubble_offset_x),
-        'bubble_offset_y': int(bubble_offset_y),
-        'lip_x': int(lip_x),
-        'lip_y': int(lip_y),
-        'emotion': emotion,
-        'type': type,
-        'tail_pos': '50%',
-        'classes': f'speech-bubble {type} tail-bottom'
-    }
-
-def panel(image=""):
-    return {'image': image}
-
-class Page:
-    def __init__(self, panels, bubbles):
-        self.panels = panels
-        self.bubbles = bubbles
-
-# ======================================================
-# 🔧 APP CONFIG
-# ======================================================
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger(__name__)
-
-app = Flask(__name__)
-
-def generate_save_code(length=8):
-    chars = string.ascii_uppercase + string.digits
-    while True:
-        code = ''.join(random.choices(chars, k=length))
-        if not os.path.exists(os.path.join(SAVED_COMICS_DIR, code)):
-            return code
-
-# ======================================================
-# 🧠 GLOBAL GPU FUNCTIONS
-# ======================================================
 @spaces.GPU
 def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
     import cv2
@@ -308,10 +286,8 @@ class EnhancedComicGenerator:
 
     def run(self, target_pages):
         try:
-            self.write_status("Queued for GPU...", 5)
-            status_file = os.path.join(self.output_dir, 'status.json')
-            # Pass status_file path to GPU function for real-time updates
-            data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, status_file, int(target_pages))
+            self.write_status("Waiting for GPU...", 5)
+            data = generate_comic_gpu(self.video_path, self.user_dir, self.frames_dir, self.metadata_path, int(target_pages))
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(data, f, indent=2)
             self.write_status("Complete!", 100)
@@ -356,97 +332,14 @@ INDEX_HTML = '''
     @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
     
     /* COMIC LAYOUT */
-    .comic-wrapper { max-width: 1200px; margin: 0 auto; display:flex; flex-direction:column; align-items:center; }
-    .page-wrapper { margin: 30px auto; display: flex; flex-direction: column; align-items: center; width: 100%; }
+    .comic-wrapper { max-width: 1000px; margin: 0 auto; }
+    .page-wrapper { margin: 30px auto; display: flex; flex-direction: column; align-items: center; }
     .page-title { text-align: center; color: #333; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
-    
-    /* 
-       SIZE UPDATE: 1000px width x 712px height
-       (Matches 350px x 2 tiers + 12px gutter)
-       Scaled down using transform for viewing 
-    */
-    .comic-page { 
-        background: white; 
-        width: 1000px; 
-        height: 712px; 
-        box-shadow: 0 4px 10px rgba(0,0,0,0.1); 
-        position: relative; 
-        overflow: hidden; 
-        border: 2px solid #000; 
-        padding: 0;
-        /* SCALING FOR EDITOR VIEW */
-        transform-origin: top center;
-        transform: scale(0.6); 
-        margin-bottom: -280px; /* Compensate for scale empty space */
-    }
-    
-    /* === 5-PANEL TEMPLATE (2 TOP, 3 BOTTOM) === */
-    /* Background White for 12px Gutter (1.2% width, 1.7% height of 712px) */
-    .comic-grid { width: 100%; height: 100%; position: relative; background: #ffffff; }
-    
-    /* Panel Background White */
-    .panel { position: absolute; overflow: hidden; background: #ffffff; cursor: pointer; border: 0; display:flex; justify-content:center; align-items:center; }
-    .panel.selected { z-index: 20; }
-    .panel.selected img { outline: 3px solid #2196F3; outline-offset: -3px; }
-    
-    /* 
-       COORDINATES from Green Text:
-       Row 1 Split: Top=63.2%, Bottom=59.5%
-       Row 2 Left Split: Top=33.0%, Bottom=35.7%
-       Row 2 Right Split: Top=64.8%, Bottom=68.2%
-       Tier Height: 350px (approx 49.15% of 712px)
-    */
-
-    /* --- ROW 1 (TOP) --- Height 49.15% */
-    
-    /* Panel 1: Right ends at (63.2 - 0.6)% / (59.5 - 0.6)% */
-    .panel:nth-child(1) {
-        top: 0; left: 0; height: 49.15%; width: 100%;
-        clip-path: polygon(0% 0%, 62.6% 0%, 58.9% 100%, 0% 100%);
-    }
-    /* Panel 2: Left starts at (63.2 + 0.6)% / (59.5 + 0.6)% */
-    .panel:nth-child(2) {
-        top: 0; left: 0; height: 49.15%; width: 100%;
-        clip-path: polygon(63.8% 0%, 100% 0%, 100% 100%, 60.1% 100%);
-    }
-
-    /* --- ROW 2 (BOTTOM) --- Top: 50.85% (Gap ~1.7%), Height: 49.15% */
-    
-    /* Panel 3: Right ends at (33.0 - 0.6)% / (35.7 - 0.6)% */
-    .panel:nth-child(3) {
-        top: 50.85%; left: 0; height: 49.15%; width: 100%;
-        clip-path: polygon(0% 0%, 32.4% 0%, 35.1% 100%, 0% 100%);
-    }
-    /* Panel 4: Left starts (33.0 + 0.6)% / (35.7 + 0.6)%. Right ends (64.8 - 0.6)% / (68.2 - 0.6)% */
-    .panel:nth-child(4) {
-        top: 50.85%; left: 0; height: 49.15%; width: 100%;
-        clip-path: polygon(33.6% 0%, 64.2% 0%, 67.6% 100%, 36.3% 100%);
-    }
-    /* Panel 5: Left starts (64.8 + 0.6)% / (68.2 + 0.6)% */
-    .panel:nth-child(5) {
-        top: 50.85%; left: 0; height: 49.15%; width: 100%;
-        clip-path: polygon(65.4% 0%, 100% 0%, 100% 100%, 68.8% 100%);
-    }
-
-    /* ====================== */
-    
-    /* 
-       IMAGE FIT: 'fill' to STRETCH fully into the panel shape 
-       WITHOUT empty space and WITHOUT zooming.
-       (User accepted distortion over empty space/cutting)
-       Allowed to be transformed (panned/scaled) via JS if user wants.
-    */
-    .panel img { 
-        width: 100%; height: 100%; 
-        object-fit: fill;  /* STRETCH: No gaps, no cut */
-        transition: transform 0.1s ease-out; 
-        transform-origin: center center; 
-        display: block;
-    }
-    /* Toggle classes */
-    .panel img.fit-cover { object-fit: cover !important; }
-    .panel img.fit-contain { object-fit: contain !important; }
-    
+    .comic-page { background: white; width: 600px; height: 400px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); position: relative; overflow: hidden; border: 2px solid #000; padding: 10px; }
+    .comic-grid { display: grid; grid-template-columns: 285px 285px; grid-template-rows: 185px 185px; gap: 10px; width: 100%; height: 100%; }
+    .panel { position: relative; overflow: hidden; border: 2px solid #000; background: #eee; cursor: pointer; }
+    .panel.selected { outline: 3px solid #2196F3; outline-offset: -3px; }
+    .panel img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.1s ease-out; transform-origin: center center; }
     .panel img.pannable { cursor: grab; }
     .panel img.panning { cursor: grabbing; }
     
@@ -456,15 +349,30 @@ INDEX_HTML = '''
         width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; 
         z-index: 10; cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
         font-size: 13px; text-align: center; 
+        /* FIX FOR TAIL VISIBILITY */
         overflow: visible; 
         line-height: 1.2;
         --tail-pos: 50%;
     }
     
+    /* FIX FOR 0% ERROR EXPORT: Handle overflow and clipping here */
     .bubble-text { 
-        padding: 0.5em; word-wrap: break-word; white-space: pre-wrap; position: relative; 
-        z-index: 5; pointer-events: none; user-select: none; width: 100%; height: 100%;
-        overflow: hidden; display: flex; align-items: center; justify-content: center; border-radius: inherit;
+        padding: 0.5em; 
+        word-wrap: break-word; 
+        white-space: pre-wrap; 
+        position: relative; 
+        z-index: 5; 
+        pointer-events: none; 
+        user-select: none; 
+        width: 100%;
+        height: 100%;
+        /* Strict overflow hidden to match editor vs export */
+        overflow: hidden; 
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        /* Ensure border radius matches parent so text doesn't leak corners */
+        border-radius: inherit;
     }
     
     .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
@@ -491,15 +399,26 @@ INDEX_HTML = '''
     .speech-bubble.speech.tail-left:before { right: 100%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(90deg); transform-origin: top right; }
     .speech-bubble.speech.tail-right { border-radius: var(--r); }
     .speech-bubble.speech.tail-right:before { left: 100%; top: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: rotate(-90deg); transform-origin: top left; }
-    
-    /* Thought/Reaction Styles */
+    /* THOUGHT BUBBLE CSS (Fixed Rotation) */
     .speech-bubble.thought { background: white; border: 2px dashed #555; color: #333; border-radius: 50%; }
     .speech-bubble.thought::before { 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; }
     .thought-dot-2 { width: 12px; height: 12px; }
+    
+    /* Thought Tail Positions */
     .speech-bubble.thought.pos-bl .thought-dot-1 { left: 20px; bottom: -20px; }
     .speech-bubble.thought.pos-bl .thought-dot-2 { left: 10px; bottom: -32px; }
+    
+    .speech-bubble.thought.pos-br .thought-dot-1 { right: 20px; bottom: -20px; }
+    .speech-bubble.thought.pos-br .thought-dot-2 { right: 10px; bottom: -32px; }
+    
+    .speech-bubble.thought.pos-tr .thought-dot-1 { right: 20px; top: -20px; }
+    .speech-bubble.thought.pos-tr .thought-dot-2 { right: 10px; top: -32px; }
+    
+    .speech-bubble.thought.pos-tl .thought-dot-1 { left: 20px; top: -20px; }
+    .speech-bubble.thought.pos-tl .thought-dot-2 { left: 10px; top: -32px; }
+    
     .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-weight: 900; text-transform: uppercase; 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; }
     
@@ -537,7 +456,7 @@ INDEX_HTML = '''
         <div class="page-input-group">
             <label>📚 Total Comic Pages:</label>
             <input type="number" id="page-count" value="4" min="1" max="15" placeholder="e.g. 4 (Video will be divided evenly)">
-            <small style="color:#666; font-size:11px; display:block; margin-top:5px;">System calculates 5 panels per page.</small>
+            <small style="color:#666; font-size:11px; display:block; margin-top:5px;">System calculates ~4 panels per page.</small>
         </div>
         
         <button class="submit-btn" onclick="upload()">🚀 Generate Comic</button>
@@ -608,7 +527,6 @@ INDEX_HTML = '''
         
         <div class="control-group">
             <label>🖼️ Panel Tools:</label>
-            <button onclick="toggleFitCover()" class="action-btn">🔄 Toggle Fit/Fill</button>
             <button onclick="replacePanelImage()" class="action-btn">🖼️ Replace Image</button>
             <div class="button-grid">
                 <button onclick="adjustFrame('backward')" class="secondary-btn" id="prev-btn">⬅️ Prev</button>
@@ -734,8 +652,7 @@ INDEX_HTML = '''
         const pages = [];
         document.querySelectorAll('.comic-page').forEach(p => {
             const panels = [];
-            const grid = p.querySelector('.comic-grid');
-            grid.querySelectorAll('.panel').forEach(pan => {
+            p.querySelectorAll('.panel').forEach(pan => {
                 const img = pan.querySelector('img');
                 const bubbles = [];
                 pan.querySelectorAll('.speech-bubble').forEach(b => {
@@ -752,7 +669,6 @@ INDEX_HTML = '''
                 panels.push({ 
                     src: img.src, 
                     zoom: img.dataset.zoom, tx: img.dataset.translateX, ty: img.dataset.translateY,
-                    fit: img.style.objectFit,
                     bubbles: bubbles 
                 });
             });
@@ -772,20 +688,14 @@ INDEX_HTML = '''
             const pageWrapper = document.createElement('div'); pageWrapper.className = 'page-wrapper';
             const pageTitle = document.createElement('h2'); pageTitle.className = 'page-title'; pageTitle.textContent = `Page ${pageIdx + 1}`;
             pageWrapper.appendChild(pageTitle);
-            
             const div = document.createElement('div'); div.className = 'comic-page';
             const grid = document.createElement('div'); grid.className = 'comic-grid';
-            
             page.panels.forEach((pan) => {
                 const pDiv = document.createElement('div'); pDiv.className = 'panel';
                 pDiv.onclick = (e) => { e.stopPropagation(); selectPanel(pDiv); };
                 const img = document.createElement('img');
                 img.src = pan.src.includes('?') ? pan.src : pan.src + `?sid=${sid}`; 
                 img.dataset.zoom = pan.zoom || 100; img.dataset.translateX = pan.tx || 0; img.dataset.translateY = pan.ty || 0;
-                
-                // RESTORE FIT STATE
-                if(pan.fit) img.style.objectFit = pan.fit;
-                
                 updateImageTransform(img);
                 img.onmousedown = (e) => startPan(e, img);
                 pDiv.appendChild(img);
@@ -972,67 +882,17 @@ INDEX_HTML = '''
     document.getElementById('bubble-text-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-text-color', e.target.value); saveDraft(true); } });
     document.getElementById('bubble-fill-color').addEventListener('change', (e) => { if(selectedBubble) { selectedBubble.style.setProperty('--bubble-fill-color', e.target.value); saveDraft(true); } });
     
-    function handleZoom(el) { 
-        if(!selectedPanel) return; 
-        const img = selectedPanel.querySelector('img'); 
-        img.dataset.zoom = el.value; 
-        updateImageTransform(img);
-    }
+    function handleZoom(el) { if(!selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.zoom = el.value; updateImageTransform(img); }
     document.getElementById('zoom-slider').addEventListener('change', () => saveDraft(true));
-
-    function startPan(e, img) { 
-        // REMOVED ZOOM CHECK - ALLOW PAN ALWAYS
-        e.preventDefault(); 
-        isPanning = true; 
-        selectedPanel = img.closest('.panel'); 
-        panStartX = e.clientX; 
-        panStartY = e.clientY; 
-        panStartTx = parseFloat(img.dataset.translateX || 0); 
-        panStartTy = parseFloat(img.dataset.translateY || 0); 
-        img.classList.add('panning'); 
-    }
-
-    function panImage(e) { 
-        if(!isPanning || !selectedPanel) return; 
-        const img = selectedPanel.querySelector('img'); 
-        img.dataset.translateX = panStartTx + (e.clientX - panStartX); 
-        img.dataset.translateY = panStartTy + (e.clientY - panStartY); 
-        updateImageTransform(img); 
-    }
-
-    function updateImageTransform(img) { 
-        const z = (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(${z})`; 
-    }
-
-    function resetPanelTransform() { 
-        if(!selectedPanel) return alert("Select a panel"); 
-        const img = selectedPanel.querySelector('img'); 
-        img.dataset.zoom = 100; 
-        img.dataset.translateX = 0; 
-        img.dataset.translateY = 0; 
-        document.getElementById('zoom-slider').value = 100; 
-        updateImageTransform(img); 
-        saveDraft(true); 
-    }
+    function startPan(e, img) { if(parseFloat(img.dataset.zoom || 100) <= 100) return; e.preventDefault(); isPanning = true; selectedPanel = img.closest('.panel'); panStartX = e.clientX; panStartY = e.clientY; panStartTx = parseFloat(img.dataset.translateX || 0); panStartTy = parseFloat(img.dataset.translateY || 0); img.classList.add('panning'); }
+    function panImage(e) { if(!isPanning || !selectedPanel) return; const img = selectedPanel.querySelector('img'); img.dataset.translateX = panStartTx + (e.clientX - panStartX); img.dataset.translateY = panStartTy + (e.clientY - panStartY); updateImageTransform(img); }
+    function updateImageTransform(img) { const z = (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(${z})`; img.classList.toggle('pannable', z > 1); }
+    function resetPanelTransform() { if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); img.dataset.zoom = 100; img.dataset.translateX = 0; img.dataset.translateY = 0; document.getElementById('zoom-slider').value = 100; updateImageTransform(img); saveDraft(true); }
     
     function replacePanelImage() { if(!selectedPanel) return alert("Select a panel"); const inp = document.getElementById('image-uploader'); inp.onchange = async (e) => { const fd = new FormData(); fd.append('image', e.target.files[0]); const img = selectedPanel.querySelector('img'); const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd}); const d = await r.json(); if(d.success) { img.src = `/frames/${d.new_filename}?sid=${sid}`; saveDraft(true); } inp.value = ''; }; inp.click(); }
     async function adjustFrame(dir) { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/regenerate_frame?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, direction:dir}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
     async function gotoTimestamp() { if(isProcessing) return; if(!selectedPanel) return alert("Select a panel"); let v = document.getElementById('timestamp-input').value.trim(); if(!v) return; if(v.includes(':')) { let p = v.split(':'); v = parseInt(p[0]) * 60 + parseFloat(p[1]); } else { v = parseFloat(v); } if(isNaN(v)) return alert("Invalid time"); const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0]; setProcessing(true); img.style.opacity = '0.5'; try { const r = await fetch(`/goto_timestamp?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, timestamp:v}) }); const d = await r.json(); if(d.success) { img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`; document.getElementById('timestamp-input').value = ''; } else { alert('Error: ' + d.message); } } catch(e) { console.error(e); } img.style.opacity = '1'; setProcessing(false); saveDraft(true); }
     
-    // NEW: Toggle between 'fill' (stretch 100%), 'cover' (crop), and 'contain' (bars)
-    function toggleFitCover() {
-        if(!selectedPanel) return alert("Select a panel");
-        const img = selectedPanel.querySelector('img');
-        const current = img.style.objectFit || 'fill';
-        if(current === 'fill') img.style.objectFit = 'cover';
-        else if(current === 'cover') img.style.objectFit = 'contain';
-        else img.style.objectFit = 'fill';
-        saveDraft(true);
-    }
-
     async function exportComic() { 
         const pgs = document.querySelectorAll('.comic-page'); 
         if(pgs.length === 0) return alert("No pages found"); 
@@ -1042,13 +902,6 @@ INDEX_HTML = '''
         if(selectedPanel) selectedPanel.classList.remove('selected');
         alert(`Exporting ${pgs.length} page(s)...`); 
         
-        // --- PREPARE FOR EXPORT: Remove editor scaling ---
-        const comicPages = document.querySelectorAll('.comic-page');
-        comicPages.forEach(page => {
-            page.style.transform = 'none'; // Remove scaling from comic-page
-            page.style.marginBottom = '0'; // Remove margin compensation
-        });
-
         // --- 0% ERROR FIX ---
         // 1. Lock specific pixel dimensions + 1px buffer to prevent word wrapping
         const bubbles = document.querySelectorAll('.speech-bubble'); 
@@ -1066,8 +919,8 @@ INDEX_HTML = '''
         for(let i = 0; i < pgs.length; i++) { 
             try { 
                 const u = await htmlToImage.toPng(pgs[i], { 
-                    pixelRatio: 2, // High quality for print
-                    style: { transform: 'none' } // Ensure no transforms for html-to-image
+                    pixelRatio: 2, // High quality
+                    style: { transform: 'none' } 
                 }); 
                 const a = document.createElement('a'); 
                 a.href = u; 
@@ -1079,11 +932,8 @@ INDEX_HTML = '''
             } 
         } 
         
-        // --- RESTORE EDITOR SCALING AFTER EXPORT ---
-        comicPages.forEach(page => {
-            page.style.transform = 'scale(0.6)';
-            page.style.marginBottom = '-280px'; 
-        });
+        // Optional: Reload page or reset styles if user wants to continue editing immediately
+        // In this app, styles are locked until reload, which is safer for the export focus.
     }
     
     function goBackToUpload() { if(confirm('Go home? Unsaved changes will be lost.')) { document.getElementById('editor-container').style.display = 'none'; document.getElementById('upload-container').style.display = 'flex'; document.getElementById('loading-view').style.display = 'none'; } }