Update app_enhanced.py

app_enhanced.py

@@ -42,11 +42,8 @@ os.makedirs(SAVED_COMICS_DIR, exist_ok=True)
 # ======================================================
 # 🔧 APP CONFIG
 # ======================================================
-logging.basicConfig(level=logging.INFO)
 app = Flask(__name__)
-
-# ALLOW LARGE UPLOADS (500MB)
-app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  
+app.config['MAX_CONTENT_LENGTH'] = 500 * 1024 * 1024  # 500MB Upload Limit
 
 def generate_save_code(length=8):
     chars = string.ascii_uppercase + string.digits
@@ -81,13 +78,12 @@ class Page:
 # ======================================================
 @spaces.GPU(duration=120)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    print(f"🚀 Generation Started for {video_path}...")
+    print(f"🚀 Generating: {video_path}")
     
     import cv2
     import srt
     import numpy as np
     
-    # 1. Video Prep
     cap = cv2.VideoCapture(video_path)
     if not cap.isOpened(): raise Exception("Cannot open video")
     fps = cap.get(cv2.CAP_PROP_FPS) or 25
@@ -95,7 +91,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     duration = total_frames / fps
     cap.release()
 
-    # 2. Subtitles (Dummy if missing)
+    # Subtitles
     user_srt = os.path.join(user_dir, 'subs.srt')
     if not os.path.exists(user_srt):
         with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
@@ -107,7 +103,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     valid_subs = [s for s in all_subs if s.content.strip()]
     raw_moments = [{'text': s.content, 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in valid_subs]
 
-    # 3. Calculate Intervals
     if target_pages <= 0: target_pages = 1
     panels_per_page = 4
     total_panels_needed = target_pages * panels_per_page
@@ -122,7 +117,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         indices = np.linspace(0, len(raw_moments) - 1, total_panels_needed, dtype=int)
         selected_moments = [raw_moments[i] for i in indices]
         
-    # 4. Extract Frames (1280x720 16:9)
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     count = 0
@@ -135,8 +129,16 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         ret, frame = cap.read()
         
         if ret:
-            # FORCE LANDSCAPE 16:9 for Wide View
-            frame = cv2.resize(frame, (1280, 720))
+            # ----------------------------------------------------
+            # 🎯 QUALITY FIX: EXTRACT AT HD (1280px width)
+            # Do NOT crop to square here. Keep 16:9 Aspect Ratio.
+            # This allows the frontend "Zoom" to reveal details.
+            # ----------------------------------------------------
+            h, w = frame.shape[:2]
+            aspect = w / h
+            new_w = 1280
+            new_h = int(new_w / aspect)
+            frame = cv2.resize(frame, (new_w, new_h))
             
             fname = f"frame_{count:04d}.png"
             p = os.path.join(frames_dir, fname)
@@ -149,7 +151,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     cap.release()
     with open(metadata_path, 'w') as f: json.dump(frame_metadata, f, indent=2)
         
-    # 5. Bubbles
     bubbles_list = []
     for f in frame_files_ordered:
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
@@ -158,7 +159,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         elif '!' in dialogue: b_type = 'reaction'
         bubbles_list.append(bubble(dialog=dialogue, bubble_offset_x=50, bubble_offset_y=50, type=b_type))
             
-    # 6. Pages
     pages = []
     for i in range(target_pages):
         start_idx = i * 4
@@ -166,7 +166,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         p_frames = frame_files_ordered[start_idx:end_idx]
         p_bubbles = bubbles_list[start_idx:end_idx]
         
-        # Fill empty
         while len(p_frames) < 4:
              fname = f"empty_{i}_{len(p_frames)}.png"
              img = np.zeros((720, 1280, 3), dtype=np.uint8); img[:] = (40,40,40)
@@ -206,7 +205,12 @@ def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
     cap.release()
 
     if ret:
-        frame = cv2.resize(frame, (1280, 720)) # Keep 16:9
+        h, w = frame.shape[:2]
+        aspect = w / h
+        new_w = 1280
+        new_h = int(new_w / aspect)
+        frame = cv2.resize(frame, (new_w, new_h))
+        
         p = os.path.join(frames_dir, fname)
         cv2.imwrite(p, frame)
         
@@ -238,7 +242,7 @@ class EnhancedComicGenerator:
 
     def run(self, target_pages):
         try:
-            self.write_status("Processing...", 10)
+            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)
@@ -252,10 +256,10 @@ class EnhancedComicGenerator:
             json.dump({'message': msg, 'progress': prog}, f)
 
 # ======================================================
-# 🌐 FRONTEND
+# 🌐 ROUTES & FRONTEND
 # ======================================================
 INDEX_HTML = '''
-<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Comic Generator (16:9)</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #222; font-family: 'Lato', sans-serif; color: #eee; margin: 0; min-height: 100vh; }
+<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Square HD Comic</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script> <link href="https://fonts.googleapis.com/css2?family=Bangers&family=Comic+Neue:wght@700&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #222; font-family: 'Lato', sans-serif; color: #eee; margin: 0; min-height: 100vh; }
     
     #upload-container { display: flex; flex-direction:column; justify-content: center; align-items: center; min-height: 100vh; width: 100%; padding: 20px; }
     .upload-box { max-width: 500px; width: 100%; padding: 40px; background: #333; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); text-align: center; }
@@ -277,14 +281,14 @@ INDEX_HTML = '''
     .loader { width: 120px; height: 20px; background: radial-gradient(circle 10px, #e67e22 100%, transparent 0); background-size: 20px 20px; animation: ball 1s infinite linear; margin: 20px auto; }
     @keyframes ball { 0%{background-position:0 50%} 100%{background-position:100px 50%} }
     
-    /* === 400x600 COMIC LAYOUT === */
+    /* === SQUARE COMIC LAYOUT (800x800) === */
     .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: #eee; margin-bottom: 10px; font-size: 18px; font-weight: bold; }
     
     .comic-page { 
-        width: 400px; 
-        height: 600px; 
+        width: 800px; 
+        height: 800px; 
         background: white; 
         box-shadow: 0 4px 20px rgba(0,0,0,0.5); 
         position: relative; 
@@ -302,7 +306,7 @@ INDEX_HTML = '''
         --y: 50%;      
         --t1: 100%; --t2: 100%; /* Hidden by default */
         --b1: 100%; --b2: 100%; /* Hidden by default */
-        --gap: 2px; 
+        --gap: 3px; 
     }
 
     .panel {
@@ -312,13 +316,13 @@ INDEX_HTML = '''
     
     .panel img {
         width: 100%; height: 100%;
-        object-fit: cover; /* Key for 16:9 in Portrait */
+        object-fit: cover; /* Keeps 16:9 aspect inside square panel */
         transform-origin: center;
-        transition: transform 0.05s ease-out; /* Faster response */
+        transition: transform 0.05s ease-out;
         display: block;
     }
     .panel img.panning { cursor: grabbing; transition: none; }
-    .panel.selected { outline: 3px solid #2196F3; z-index: 5; }
+    .panel.selected { outline: 4px solid #2196F3; z-index: 5; }
 
     /* === CLIP PATHS === */
     .panel:nth-child(1) { clip-path: polygon(0 0, calc(var(--t1) - var(--gap)) 0, calc(var(--t2) - var(--gap)) calc(var(--y) - var(--gap)), 0 calc(var(--y) - var(--gap))); z-index: 1; }
@@ -328,7 +332,7 @@ INDEX_HTML = '''
 
     /* === HANDLES === */
     .handle {
-        position: absolute; width: 22px; height: 22px;
+        position: absolute; width: 24px; height: 24px;
         border: 2px solid white; border-radius: 50%;
         transform: translate(-50%, -50%);
         z-index: 101; cursor: ew-resize;
@@ -336,17 +340,17 @@ INDEX_HTML = '''
     }
     .handle:hover { transform: scale(1.3); }
 
-    .h-t1 { background: #3498db; left: var(--t1); top: 0%; margin-top: 12px; }
-    .h-t2 { background: #3498db; left: var(--t2); top: 50%; margin-top: -12px; }
-    .h-b1 { background: #2ecc71; left: var(--b1); top: 50%; margin-top: 12px; }
-    .h-b2 { background: #2ecc71; left: var(--b2); top: 100%; margin-top: -12px; }
+    .h-t1 { background: #3498db; left: var(--t1); top: 0%; margin-top: 15px; }
+    .h-t2 { background: #3498db; left: var(--t2); top: 50%; margin-top: -15px; }
+    .h-b1 { background: #2ecc71; left: var(--b1); top: 50%; margin-top: 15px; }
+    .h-b2 { background: #2ecc71; left: var(--b2); top: 100%; margin-top: -15px; }
     
     /* SPEECH BUBBLES */
     .speech-bubble { 
         position: absolute; display: flex; justify-content: center; align-items: center; 
         width: 150px; height: 80px; min-width: 50px; min-height: 30px; box-sizing: border-box; 
         z-index: 10; cursor: move; font-family: 'Comic Neue', cursive; font-weight: bold; 
-        font-size: 14px; text-align: center; 
+        font-size: 16px; text-align: center; 
         overflow: visible; line-height: 1.2; --tail-pos: 50%;
     }
     .bubble-text { padding: 0.5em; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: pre-wrap; pointer-events: none; }
@@ -354,7 +358,7 @@ INDEX_HTML = '''
     
     .speech-bubble.speech {
         background: #fff; color: #000; border: 2px solid #000;
-        border-radius: 50%; /* Oval default */
+        border-radius: 50%;
     }
     .speech-bubble.speech::after {
         content: ''; position: absolute; bottom: -10px; left: var(--tail-pos);
@@ -377,7 +381,7 @@ INDEX_HTML = '''
 
 <div id="upload-container"> 
     <div class="upload-box"> 
-        <h1>⚡ Fast 16:9 Comic Gen</h1> 
+        <h1>⚡ Square HD Comic Gen</h1> 
         <input type="file" id="file-upload" class="file-input" onchange="document.getElementById('fn').innerText=this.files[0].name"> 
         <label for="file-upload" class="file-label">📁 Choose Video</label> 
         <span id="fn" style="margin-bottom:10px; display:block; color:#aaa;">No file selected</span>
@@ -387,7 +391,7 @@ INDEX_HTML = '''
             <input type="number" id="page-count" value="4" min="1" max="15">
         </div>
         
-        <button class="submit-btn" onclick="upload()">🚀 Generate Fast</button>
+        <button class="submit-btn" onclick="upload()">🚀 Generate</button>
         
         <div class="loading-view" id="loading-view" style="display:none; margin-top:20px;">
             <div class="loader" style="margin:0 auto;"></div>
@@ -420,8 +424,8 @@ INDEX_HTML = '''
         </div>
         
         <div class="control-group">
-            <label>🔍 Zoom/Pan:</label>
-            <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" oninput="handleZoom(this)" disabled>
+            <label>🔍 Zoom (Mouse Wheel):</label>
+            <input type="range" id="zoom-slider" min="100" max="300" value="100" step="5" oninput="handleZoom(this.value)" disabled>
             <button onclick="resetPanelTransform()" class="secondary-btn">Reset View</button>
         </div>
         
@@ -497,7 +501,7 @@ INDEX_HTML = '''
                 // Init transform data
                 img.dataset.zoom = 100; img.dataset.translateX = 0; img.dataset.translateY = 0;
                 
-                // Pan Interaction
+                // MOUSE EVENTS
                 img.onmousedown = (e) => { 
                     e.preventDefault(); e.stopPropagation(); 
                     selectPanel(pDiv);
@@ -506,6 +510,17 @@ INDEX_HTML = '''
                     img.classList.add('panning');
                 };
                 
+                // 🚀 ZOOM WITH WHEEL
+                img.onwheel = (e) => {
+                    e.preventDefault();
+                    let zoom = parseFloat(img.dataset.zoom);
+                    zoom += e.deltaY * -0.1;
+                    zoom = Math.min(Math.max(100, zoom), 300);
+                    img.dataset.zoom = zoom;
+                    updateImageTransform(img);
+                    if(selectedPanel === pDiv) document.getElementById('zoom-slider').value = zoom;
+                };
+                
                 pDiv.appendChild(img);
                 grid.appendChild(pDiv);
             });
@@ -559,13 +574,10 @@ INDEX_HTML = '''
         else if(dragType === 'pan') {
             const dx = e.clientX - dragStart.x; const dy = e.clientY - dragStart.y;
             const img = activeObj;
-            // Get current vals
             let cx = parseFloat(img.dataset.translateX);
             let cy = parseFloat(img.dataset.translateY);
-            
             img.dataset.translateX = cx + dx;
             img.dataset.translateY = cy + dy;
-            
             updateImageTransform(img);
             dragStart = {x: e.clientX, y: e.clientY};
         }
@@ -581,7 +593,6 @@ INDEX_HTML = '''
         dragType = null; activeObj = null; 
     });
     
-    // HELPERS
     function selectBubble(el) { if(selectedBubble) selectedBubble.classList.remove('selected'); selectedBubble = el; el.classList.add('selected'); }
     function selectPanel(el) { 
         if(selectedPanel) selectedPanel.classList.remove('selected'); 
@@ -596,10 +607,10 @@ INDEX_HTML = '''
     }
     function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); selectedBubble=null; } }
     
-    function handleZoom(el) { 
+    function handleZoom(val) { 
         if(selectedPanel) { 
             const img = selectedPanel.querySelector('img'); 
-            img.dataset.zoom = el.value; 
+            img.dataset.zoom = val; 
             updateImageTransform(img); 
         } 
     }
@@ -642,7 +653,6 @@ def index():
 
 @app.route('/uploader', methods=['POST'])
 def upload():
-    # Robust checks
     sid = request.args.get('sid') or request.form.get('sid')
     if not sid: return jsonify({'success': False, 'message': 'Missing session ID'}), 400
     
@@ -651,8 +661,6 @@ def upload():
         file = request.files['file']
     
     if not file or file.filename == '':
-         # Debugging aid
-         print(f"Files keys: {list(request.files.keys())}")
          return jsonify({'success': False, 'message': 'No file uploaded'}), 400
     
     target_pages = request.form.get('target_pages', 4)