Update app_enhanced.py

app_enhanced.py

@@ -1,4 +1,4 @@
-import spaces
+import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
 import os
 import time
 import threading
@@ -28,8 +28,10 @@ def gpu_warmup():
 # ======================================================
 if os.path.exists('/data'):
     BASE_STORAGE_PATH = '/data'
+    print("✅ Using Persistent Storage at /data")
 else:
     BASE_STORAGE_PATH = '.'
+    print("⚠️ Using Ephemeral Storage")
 
 BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 SAVED_COMICS_DIR = os.path.join(BASE_STORAGE_PATH, "saved_comics")
@@ -51,7 +53,7 @@ def generate_save_code(length=8):
 # 🧱 DATA CLASSES
 # ======================================================
 def bubble(dialog="", x=50, y=20, type='speech'):
-    # Determine CSS classes based on type (Logic from safwe.py)
+    # Apply classes
     classes = f"speech-bubble {type}"
     if type == 'speech':
         classes += " tail-bottom"
@@ -102,15 +104,19 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         if os.path.exists('test1.srt'):
             shutil.move('test1.srt', user_srt)
         elif 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")
+            with open(user_srt, 'w') as f:
+                f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
     except:
-        with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
+        with open(user_srt, 'w') as f:
+            f.write("1\n00:00:01,000 --> 00:00:04,000\n...\n")
             
     with open(user_srt, 'r', encoding='utf-8') as f:
-        try: all_subs = list(srt.parse(f.read()))
-        except: all_subs = []
+        try:
+            all_subs = list(srt.parse(f.read()))
+        except:
+            all_subs = []
 
-    valid_subs = [s for s in all_subs if s.content.strip()]
+    valid_subs = [s for s in all_subs if s.content and s.content.strip()]
     if valid_subs:
         raw_moments = [{'text': s.content.strip(), 'start': s.start.total_seconds(), 'end': s.end.total_seconds()} for s in valid_subs]
     else:
@@ -140,14 +146,14 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         cap.set(cv2.CAP_PROP_POS_MSEC, mid * 1000)
         ret, frame = cap.read()
         if ret:
-            # 🎯 SQUARE PADDING (0% Cut)
+            # 🎯 SQUARE PADDING (0% Cut) - HD Output
             h, w = frame.shape[:2]
             sq_dim = max(h, w)
             square_img = np.zeros((sq_dim, sq_dim, 3), dtype=np.uint8)
             x_off = (sq_dim - w) // 2
             y_off = (sq_dim - h) // 2
             square_img[y_off:y_off+h, x_off:x_off+w] = frame
-            # Resize to standard high res
+            # Resize to standard high res (1024x1024)
             square_img = cv2.resize(square_img, (1024, 1024))
             
             fname = f"frame_{count:04d}.png"
@@ -185,7 +191,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
             bx, by = 550, 450
         else:
             bx, by = 50, 50
-
+            
         bubbles_list.append(bubble(dialog=dialogue, x=bx, y=by, type=b_type))
             
     pages = []
@@ -200,21 +206,14 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
              img = np.zeros((1024, 1024, 3), dtype=np.uint8); img[:] = (30,30,30)
              cv2.imwrite(os.path.join(frames_dir, fname), img)
              p_frames.append(fname)
-             # Add hidden empty bubble
+             # Add dummy bubble to keep count synced, but off-screen or empty
              p_bubbles.append(bubble(dialog="", x=-999, y=-999, type='speech'))
 
         if p_frames:
-            # FIX: Use Page Class to avoid AttributeError
-            pg_panels = [panel(image=f) for f in p_frames]
-            pages.append(Page(panels=pg_panels, bubbles=p_bubbles))
-
-    result = []
-    for pg in pages:
-        p_data = [p if isinstance(p, dict) else p.__dict__ for p in pg.panels]
-        b_data = [b if isinstance(b, dict) else b.__dict__ for b in pg.bubbles]
-        result.append({'panels': p_data, 'bubbles': b_data})
-        
-    return result
+            pg_panels = [{'image': f} for f in p_frames]
+            pages.append({'panels': pg_panels, 'bubbles': p_bubbles})
+
+    return pages
 
 @spaces.GPU
 def regen_frame_gpu(video_path, frames_dir, metadata_path, fname, direction):
@@ -341,22 +340,34 @@ INDEX_HTML = '''
     .page-wrapper { display: flex; flex-direction: column; align-items: center; }
     .page-title { text-align: center; color: #eee; margin-bottom: 10px; font-size: 20px; font-weight: bold; }
     
+    /* 🎯 5px White Border on Page */
     .comic-page { 
         width: 800px; 
         height: 800px; 
         background: white; 
         box-shadow: 0 5px 30px rgba(0,0,0,0.6); 
         position: relative; overflow: hidden; 
-        border: 6px solid #000; 
+        border: 5px solid #ffffff; 
     }
     
+    /* 🎯 5px White Borders between panels */
     .comic-grid {
-        width: 100%; height: 100%; position: relative; background: #000;
-        --y: 50%; --t1: 100%; --t2: 100%; --b1: 100%; --b2: 100%; --gap: 3px; 
+        width: 100%; height: 100%; position: relative; 
+        background: #ffffff; /* White background makes white lines */
+        --y: 50%; --t1: 100%; --t2: 100%; --b1: 100%; --b2: 100%; 
+        --gap: 5px; /* 5px gap size */
     }
 
     .panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; cursor: grab; }
-    .panel img { width: 100%; height: 100%; object-fit: cover; transform-origin: center; transition: transform 0.05s ease-out; display: block; }
+    
+    /* IMAGE: Cover ensures it fills. Zoom allows control. */
+    .panel img { 
+        width: 100%; height: 100%; 
+        object-fit: cover; 
+        transform-origin: center; 
+        transition: transform 0.05s ease-out; 
+        display: block; 
+    }
     .panel img.panning { cursor: grabbing; transition: none; }
     .panel.selected { outline: 4px solid #3498db; z-index: 5; }
 
@@ -368,12 +379,13 @@ INDEX_HTML = '''
 
     /* Handles */
     .handle { position: absolute; width: 26px; height: 26px; border: 3px solid white; border-radius: 50%; transform: translate(-50%, -50%); z-index: 101; cursor: ew-resize; box-shadow: 0 2px 5px rgba(0,0,0,0.8); }
+    .handle:hover { transform: translate(-50%, -50%) scale(1.3); }
     .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 - STYLED */
+    /* SPEECH BUBBLES */
     .speech-bubble { 
         position: absolute; display: flex; justify-content: center; align-items: center; 
         min-width: 60px; min-height: 40px; box-sizing: border-box; 
@@ -702,8 +714,8 @@ INDEX_HTML = '''
         const type = data.type || 'speech';
         let className = data.classes || `speech-bubble ${type} tail-bottom`;
         if (type === 'thought' && !className.includes('pos-')) className += ' pos-bl';
-        b.className = className;
         
+        b.className = className;
         b.dataset.type = type;
         b.style.left = data.left; b.style.top = data.top;
         if(data.width) b.style.width = data.width;
@@ -714,12 +726,9 @@ INDEX_HTML = '''
         
         if(type === 'thought') { for(let i=1; i<=2; i++){ const d = document.createElement('div'); d.className = `thought-dot thought-dot-${i}`; b.appendChild(d); } }
         
-        const textSpan = document.createElement('span'); textSpan.className = 'bubble-text'; textSpan.textContent = data.text || 'Text'; b.appendChild(textSpan);
-        const resizer = document.createElement('div'); resizer.className = 'resize-handle'; 
-        resizer.onmousedown = (e) => { e.stopPropagation(); dragType='resize'; activeObj={b:b, startW:b.offsetWidth, startH:b.offsetHeight, mx:e.clientX, my:e.clientY}; };
-        b.appendChild(resizer);
+        ['nw', 'ne', 'sw', 'se'].forEach(dir => { const handle = document.createElement('div'); handle.className = `resize-handle ${dir}`; handle.onmousedown = (e) => startResize(e, dir); b.appendChild(handle); });
         
-        b.onmousedown = (e) => { if(e.target === resizer) return; e.stopPropagation(); selectBubble(b); dragType = 'bubble'; activeObj = b; dragStart = {x: e.clientX, y: e.clientY}; };
+        b.onmousedown = (e) => { if(e.target.classList.contains('resize-handle')) return; e.stopPropagation(); selectBubble(b); dragType = 'bubble'; activeObj = b; dragStart = {x: e.clientX, y: e.clientY}; };
         b.ondblclick = (e) => { e.stopPropagation(); editBubbleText(b); };
         return b;
     }
@@ -759,6 +768,8 @@ INDEX_HTML = '''
         dragType = null; activeObj = null; 
     });
     
+    function startResize(e, dir) { e.preventDefault(); e.stopPropagation(); dragType = 'resize'; activeObj = { b: e.target.parentElement, startW: e.target.parentElement.offsetWidth, startH: e.target.parentElement.offsetHeight, mx: e.clientX, my: e.clientY }; }
+    
     function selectBubble(el) { 
         if(selectedBubble) selectedBubble.classList.remove('selected'); 
         selectedBubble = el; el.classList.add('selected'); 
@@ -857,7 +868,7 @@ INDEX_HTML = '''
             const layout = { t1: grid.style.getPropertyValue('--t1')||'100%', t2: grid.style.getPropertyValue('--t2')||'100%', b1: grid.style.getPropertyValue('--b1')||'100%', b2: grid.style.getPropertyValue('--b2')||'100%' };
             const bubbles = [];
             grid.querySelectorAll('.speech-bubble').forEach(b => {
-                bubbles.push({ text: b.querySelector('.bubble-text').textContent, left: b.style.left, top: b.style.top, width: b.style.width, height: b.style.height, type: b.dataset.type, colors: { fill: b.style.getPropertyValue('--bubble-fill'), text: b.style.getPropertyValue('--bubble-text') }, tailPos: b.style.getPropertyValue('--tail-pos') });
+                bubbles.push({ text: b.querySelector('.bubble-text').textContent, left: b.style.left, top: b.style.top, width: b.style.width, height: b.style.height, type: b.dataset.type, colors: { fill: b.style.getPropertyValue('--bubble-fill'), text: b.style.getPropertyValue('--bubble-text') }, tailPos: b.style.getPropertyValue('--tail-pos'), classes: b.className });
             });
             const panels = [];
             grid.querySelectorAll('.panel').forEach(pan => {