cpu

Sleeping

App Files Files Community

tester343 commited on Jan 2

Commit

56683fe

verified ·

1 Parent(s): 28962fd

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +119 -80

app_enhanced.py CHANGED Viewed

@@ -54,14 +54,12 @@ def generate_save_code(length=8):
 # ======================================================
 def bubble(dialog="", x=50, y=20, type='speech'):
     classes = f"speech-bubble {type}"
-    # Default tails for types that usually have them
     if type == 'speech':
         classes += " tail-bottom"
     elif type == 'thought':
         classes += " pos-bl"
     elif type == 'reaction':
         classes += " tail-bottom"
-    # Narration doesn't need a tail class by default
     return {
         'dialog': dialog,
@@ -100,6 +98,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     duration = total_frames / fps
     cap.release()
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
@@ -144,13 +143,10 @@ 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:
-            # 1920x1080 (HD 16:9) - No Crop
             frame = cv2.resize(frame, (1920, 1080))
             fname = f"frame_{count:04d}.png"
             p = os.path.join(frames_dir, fname)
             cv2.imwrite(p, frame)
             frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
             frame_files_ordered.append(fname)
             frame_times.append(mid)
@@ -163,11 +159,15 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     for i, f in enumerate(frame_files_ordered):
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
         b_type = 'speech'
-        if '(' in dialogue: b_type = 'narration'
-        elif '!' in dialogue: b_type = 'reaction'
-        elif '?' in dialogue: b_type = 'speech'
         pos_idx = i % 4
         if pos_idx == 0: bx, by = 150, 80
         elif pos_idx == 1: bx, by = 580, 80
@@ -288,7 +288,7 @@ class EnhancedComicGenerator:
 # 🌐 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>864x1080 Comic Gen</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&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #2c3e50; 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: #34495e; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: center; }
@@ -311,7 +311,7 @@ INDEX_HTML = '''
     .loader { width: 100px; height: 10px; background: #e67e22; margin: 20px auto; animation: load 1s infinite alternate; }
     @keyframes load { from { width: 20px; } to { width: 100px; } }
-    /* === 864x1080 LAYOUT + 5px WHITE BORDER === */
     .comic-wrapper {
         max-width: 1000px; margin: 0 auto;
         display: flex; flex-direction: column; align-items: center;
@@ -324,30 +324,34 @@ INDEX_HTML = '''
         background: white;
         box-shadow: 0 5px 30px rgba(0,0,0,0.6);
         position: relative; overflow: hidden;
-        border: 5px solid #ffffff;
         flex-shrink: 0;
     }
     .comic-grid {
         width: 100%; height: 100%; position: relative;
-        background: #ffffff; /* White background creates gaps */
         --y: 50%; --t1: 100%; --t2: 100%; --b1: 100%; --b2: 100%;
-        --gap: 5px; /* 5px Gap */
     }
-    .panel { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; background: #1a1a1a; cursor: grab; }
-    /* === IMAGE NO CUT (Object Fit Contain) === */
     .panel img {
         width: 100%; height: 100%;
-        object-fit: contain; /* Prevents cutting */
-        background: #000; /* Letterbox fill */
         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; }
     /* 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; }
@@ -355,14 +359,13 @@ INDEX_HTML = '''
     .panel:nth-child(3) { clip-path: polygon(0 calc(var(--y) + var(--gap)), calc(var(--b1) - var(--gap)) calc(var(--y) + var(--gap)), calc(var(--b2) - var(--gap)) 100%, 0 100%); z-index: 1; }
     .panel:nth-child(4) { clip-path: polygon(calc(var(--b1) + var(--gap)) calc(var(--y) + var(--gap)), 100% calc(var(--y) + var(--gap)), 100% 100%, calc(var(--b2) + var(--gap)) 100%); z-index: 1; }
-    /* 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); }
     .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; }
-    /* === BUBBLES === */
     .speech-bubble {
         position: absolute; display: flex; justify-content: center; align-items: center;
         min-width: 60px; min-height: 40px; box-sizing: border-box;
@@ -376,42 +379,21 @@ INDEX_HTML = '''
     }
     .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
-    /* SPEECH */
-    .speech-bubble.speech {
-        --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em;
-        background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); padding: 0;
-        border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r);
-    }
-    .speech-bubble.speech:before {
-        content: ""; position: absolute; width: var(--b); height: var(--h);
-        background: inherit; border-bottom-left-radius: 100%; pointer-events: none; z-index: 1;
-        -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
-        mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%);
-    }
     .speech-bubble.speech.tail-bottom:before { top: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
     .speech-bubble.speech.tail-top:before { bottom: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
     .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: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 */
     .speech-bubble.thought { background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); border: 2px dashed #555; border-radius: 50%; }
     .speech-bubble.thought::before { display:none; }
     .thought-dot { position: absolute; background-color: var(--bubble-fill, #fff); border: 2px solid #555; border-radius: 50%; z-index: -1; }
-    .thought-dot-1 { width: 15px; height: 15px; } .thought-dot-2 { width: 10px; height: 10px; }
-    /* Positions */
-    .speech-bubble.thought.tail-bottom .thought-dot-1 { bottom: -18px; left: 20%; } .speech-bubble.thought.tail-bottom .thought-dot-2 { bottom: -30px; left: 15%; }
-    .speech-bubble.thought.tail-top .thought-dot-1 { top: -18px; right: 20%; } .speech-bubble.thought.tail-top .thought-dot-2 { top: -30px; right: 15%; }
-    .speech-bubble.thought.tail-left .thought-dot-1 { left: -18px; top: 40%; } .speech-bubble.thought.tail-left .thought-dot-2 { left: -30px; top: 35%; }
-    .speech-bubble.thought.tail-right .thought-dot-1 { right: -18px; bottom: 40%; } .speech-bubble.thought.tail-right .thought-dot-2 { right: -30px; bottom: 35%; }
-    .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-family: 'Bangers'; 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%); }
-    /* 🎯 FIXED NARRATION SIZE */
-    .speech-bubble.narration {
-        background: #fff8dc; border: 2px solid #000; color: #000;
-        border-radius: 0; font-family: 'Lato';
-        width: 200px !important; height: 60px !important;
-    }
     .resize-handle { position: absolute; bottom:-5px; right:-5px; width:15px; height:15px; background:#3498db; border:1px solid white; cursor:se-resize; display:none; }
     .speech-bubble.selected .resize-handle { display:block; }
@@ -507,9 +489,9 @@ INDEX_HTML = '''
         </div>
         <div class="control-group">
-            <label>🖼️ Time Frame (Seconds Only):</label>
             <div class="timestamp-controls">
-                <input type="text" id="timestamp-input" placeholder="Seconds (e.g 125.5)">
                 <button onclick="gotoTimestamp()" class="action-btn">Go</button>
             </div>
             <label style="margin-top:10px">🖼️ Image Control:</label>
@@ -549,6 +531,23 @@ INDEX_HTML = '''
     let dragType = null, activeObj = null, dragStart = {x:0, y:0};
     let historyStack = [];
     function saveState() {
         const state = [];
         document.querySelectorAll('.comic-page').forEach(pg => {
@@ -781,11 +780,11 @@ INDEX_HTML = '''
         const img = el.querySelector('img');
         document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
-        // 🎯 POPULATE TIME BOX
-        if(img.dataset.time) document.getElementById('timestamp-input').value = img.dataset.time;
     }
-    function addBubble() { const grid = document.querySelector('.comic-grid'); if(grid) { const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%" }); grid.appendChild(b); selectBubble(b); saveState(); } }
     function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); selectedBubble=null; saveState(); } }
     function updateBubbleType() {
@@ -811,6 +810,7 @@ INDEX_HTML = '''
     function rotateTail() {
         if(!selectedBubble) return;
         const type = selectedBubble.dataset.type;
         if(type === 'speech' || type === 'thought' || type === 'reaction') {
             const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
             let current = positions.find(p => selectedBubble.classList.contains(p)) || 'tail-bottom';
@@ -832,7 +832,11 @@ INDEX_HTML = '''
             const fd = new FormData(); fd.append('image', e.target.files[0]);
             const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd});
             const d = await r.json();
-            if(d.success) { selectedPanel.querySelector('img').src = `/frames/${d.new_filename}?sid=${sid}`; saveState(); }
             inp.value = '';
         };
         inp.click();
@@ -847,7 +851,7 @@ INDEX_HTML = '''
         if(d.success) {
             img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
             img.dataset.time = d.new_time.toFixed(2);
-            document.getElementById('timestamp-input').value = d.new_time.toFixed(2);
         }
         img.style.opacity='1'; saveState();
     }
@@ -856,13 +860,17 @@ INDEX_HTML = '''
         if(!selectedPanel) return alert("Select a panel");
         let v = document.getElementById('timestamp-input').value.trim();
         if(!v) return;
         const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0];
-        img.style.opacity = '0.5';
-        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()}`;
             img.dataset.time = d.new_time.toFixed(2);
         }
         img.style.opacity = '1'; saveState();
     }
@@ -892,13 +900,24 @@ INDEX_HTML = '''
 </body> </html> '''
 @app.route('/')
-def index(): return INDEX_HTML
 @app.route('/uploader', methods=['POST'])
 def upload():
-    sid = request.args.get('sid'); f = request.files.get('file'); pages = request.form.get('target_pages', 4)
-    gen = EnhancedComicGenerator(sid); gen.cleanup(); f.save(gen.video_path)
-    threading.Thread(target=gen.run, args=(pages,)).start()
     return jsonify({'success': True})
 @app.route('/status')
@@ -909,25 +928,33 @@ def get_status():
     return jsonify({'progress': 0, 'message': "Waiting..."})
 @app.route('/output/<path:filename>')
-def get_output(filename): return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('sid'), 'output'), filename)
 @app.route('/frames/<path:filename>')
-def get_frame(filename): return send_from_directory(os.path.join(BASE_USER_DIR, request.args.get('sid'), 'frames'), filename)
 @app.route('/regenerate_frame', methods=['POST'])
 def regen():
-    sid = request.args.get('sid'); d = request.get_json()
     gen = EnhancedComicGenerator(sid)
     return jsonify(regen_frame_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], d['direction']))
 @app.route('/goto_timestamp', methods=['POST'])
 def go_time():
-    sid = request.args.get('sid'); d = request.get_json()
     gen = EnhancedComicGenerator(sid)
     return jsonify(get_frame_at_ts_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], float(d['timestamp'])))
 @app.route('/replace_panel', methods=['POST'])
 def rep_panel():
-    sid = request.args.get('sid'); f = request.files['image']
     frames_dir = os.path.join(BASE_USER_DIR, sid, 'frames')
     os.makedirs(frames_dir, exist_ok=True)
     fname = f"replaced_{int(time.time() * 1000)}.png"
@@ -936,25 +963,37 @@ def rep_panel():
 @app.route('/save_comic', methods=['POST'])
 def save_comic():
-    sid = request.args.get('sid'); data = request.get_json(); save_code = generate_save_code()
-    save_dir = os.path.join(SAVED_COMICS_DIR, save_code); os.makedirs(save_dir, exist_ok=True)
-    user_frames_dir = os.path.join(BASE_USER_DIR, sid, 'frames'); saved_frames_dir = os.path.join(save_dir, 'frames')
-    if os.path.exists(user_frames_dir):
-        if os.path.exists(saved_frames_dir): shutil.rmtree(saved_frames_dir)
-        shutil.copytree(user_frames_dir, saved_frames_dir)
-    with open(os.path.join(save_dir, 'comic_state.json'), 'w') as f: json.dump({'originalSid': sid, 'pages': data['pages'], 'savedAt': time.time()}, f)
-    return jsonify({'success': True, 'code': save_code})
 @app.route('/load_comic/<code>')
 def load_comic(code):
-    code = code.upper(); save_dir = os.path.join(SAVED_COMICS_DIR, code)
     if not os.path.exists(save_dir): return jsonify({'success': False, 'message': 'Code not found'})
-    with open(os.path.join(save_dir, 'comic_state.json'), 'r') as f: data = json.load(f)
-    orig_sid = data['originalSid']; saved_frames = os.path.join(save_dir, 'frames'); user_frames = os.path.join(BASE_USER_DIR, orig_sid, 'frames')
-    os.makedirs(user_frames, exist_ok=True)
-    for fn in os.listdir(saved_frames):
-        if not os.path.exists(os.path.join(user_frames, fn)): shutil.copy2(os.path.join(saved_frames, fn), os.path.join(user_frames, fn))
-    return jsonify({'success': True, 'originalSid': orig_sid, 'pages': data['pages']})
 if __name__ == '__main__':
     try: gpu_warmup()

 # ======================================================
 def bubble(dialog="", x=50, y=20, type='speech'):
     classes = f"speech-bubble {type}"
     if type == 'speech':
         classes += " tail-bottom"
     elif type == 'thought':
         classes += " pos-bl"
     elif type == 'reaction':
         classes += " tail-bottom"
     return {
         'dialog': dialog,
     duration = total_frames / fps
     cap.release()
+    # Subtitles
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
         cap.set(cv2.CAP_PROP_POS_MSEC, mid * 1000)
         ret, frame = cap.read()
         if ret:
             frame = cv2.resize(frame, (1920, 1080))
             fname = f"frame_{count:04d}.png"
             p = os.path.join(frames_dir, fname)
             cv2.imwrite(p, frame)
             frame_metadata[fname] = {'dialogue': moment['text'], 'time': mid}
             frame_files_ordered.append(fname)
             frame_times.append(mid)
     for i, f in enumerate(frame_files_ordered):
         dialogue = frame_metadata.get(f, {}).get('dialogue', '')
+        # 🎯 STRICT BUBBLE TYPE LOGIC (Prefer Speech)
         b_type = 'speech'
+        if '(' in dialogue:
+            b_type = 'narration'
+        elif '!' in dialogue and dialogue.isupper() and len(dialogue) < 10:
+            # Only use reaction if VERY short and yelling
+            b_type = 'reaction'
+        # Smart Positioning for 864x1080
         pos_idx = i % 4
         if pos_idx == 0: bx, by = 150, 80
         elif pos_idx == 1: bx, by = 580, 80
 # 🌐 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>864x1080 Robust 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&family=Gloria+Hallelujah&family=Lato&display=swap" rel="stylesheet"> <style> * { box-sizing: border-box; } body { background-color: #2c3e50; 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: #34495e; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); text-align: center; }
     .loader { width: 100px; height: 10px; background: #e67e22; margin: 20px auto; animation: load 1s infinite alternate; }
     @keyframes load { from { width: 20px; } to { width: 100px; } }
+    /* === 864x1080 LAYOUT + WHITE BORDER === */
     .comic-wrapper {
         max-width: 1000px; margin: 0 auto;
         display: flex; flex-direction: column; align-items: center;
         background: white;
         box-shadow: 0 5px 30px rgba(0,0,0,0.6);
         position: relative; overflow: hidden;
+        border: 5px solid #ffffff; /* White Page Border */
         flex-shrink: 0;
     }
     .comic-grid {
         width: 100%; height: 100%; position: relative;
+        background: #ffffff; /* White Gap */
         --y: 50%; --t1: 100%; --t2: 100%; --b1: 100%; --b2: 100%;
+        --gap: 5px; /* Size of White Gap */
     }
+    /* 🎯 BLACK BORDER INSIDE THE PANEL */
+    .panel {
+        position: absolute; top: 0; left: 0; width: 100%; height: 100%;
+        overflow: hidden; background: #1a1a1a; cursor: grab;
+        border: 2px solid #000; /* Black Inner Border */
+        box-sizing: border-box;
+    }
     .panel img {
         width: 100%; height: 100%;
+        object-fit: contain; /* 0% Cut */
         transform-origin: center;
         transition: transform 0.05s ease-out;
         display: block;
     }
     .panel img.panning { cursor: grabbing; transition: none; }
+    .panel.selected { border: 4px solid #3498db; 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; }
     .panel:nth-child(3) { clip-path: polygon(0 calc(var(--y) + var(--gap)), calc(var(--b1) - var(--gap)) calc(var(--y) + var(--gap)), calc(var(--b2) - var(--gap)) 100%, 0 100%); z-index: 1; }
     .panel:nth-child(4) { clip-path: polygon(calc(var(--b1) + var(--gap)) calc(var(--y) + var(--gap)), 100% calc(var(--y) + var(--gap)), 100% 100%, calc(var(--b2) + var(--gap)) 100%); z-index: 1; }
     .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); }
     .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; }
+    /* BUBBLES */
     .speech-bubble {
         position: absolute; display: flex; justify-content: center; align-items: center;
         min-width: 60px; min-height: 40px; box-sizing: border-box;
     }
     .speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 100; }
+    .speech-bubble.speech { --b: 3em; --h: 1.8em; --t: 0.6; --p: var(--tail-pos, 50%); --r: 1.2em; background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); padding: 0; border-radius: var(--r) var(--r) min(var(--r), calc(100% - var(--p) - (1 - var(--t)) * var(--b) / 2)) min(var(--r), calc(var(--p) - (1 - var(--t)) * var(--b) / 2)) / var(--r); }
+    .speech-bubble.speech:before { content: ""; position: absolute; width: var(--b); height: var(--h); background: inherit; border-bottom-left-radius: 100%; pointer-events: none; z-index: 1; -webkit-mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%); mask: radial-gradient(calc(var(--t)*100%) 105% at 100% 0,#0000 99%,#000 101%); }
     .speech-bubble.speech.tail-bottom:before { top: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); }
     .speech-bubble.speech.tail-top:before { bottom: 100%; left: clamp(0%, calc(var(--p) - (1 - var(--t)) * var(--b) / 2), calc(100% - (1 - var(--t)) * var(--b))); transform: scaleY(-1); }
     .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: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; }
     .speech-bubble.thought { background: var(--bubble-fill, #fff); color: var(--bubble-text, #000); border: 2px dashed #555; border-radius: 50%; }
     .speech-bubble.thought::before { display:none; }
     .thought-dot { position: absolute; background-color: var(--bubble-fill, #fff); border: 2px solid #555; border-radius: 50%; z-index: -1; }
+    .thought-dot-1 { width: 15px; height: 15px; bottom:-15px; left:20px; } .thought-dot-2 { width: 10px; height: 10px; bottom:-25px; left:10px; }
+    .speech-bubble.thought.pos-bl .thought-dot-1 { left: 20px; bottom: -20px; }
+    .speech-bubble.reaction { background: #FFD700; border: 3px solid #E53935; color: #D32F2F; font-family: 'Bangers'; 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: #eee; border: 2px solid #000; color: #000; border-radius: 0; font-family: 'Lato'; bottom: 10px; left: 50%; transform: translateX(-50%); }
     .resize-handle { position: absolute; bottom:-5px; right:-5px; width:15px; height:15px; background:#3498db; border:1px solid white; cursor:se-resize; display:none; }
     .speech-bubble.selected .resize-handle { display:block; }
         </div>
         <div class="control-group">
+            <label>🖼️ Time Frame (MM:SS):</label>
             <div class="timestamp-controls">
+                <input type="text" id="timestamp-input" placeholder="Click panel for time (e.g. 02:15)">
                 <button onclick="gotoTimestamp()" class="action-btn">Go</button>
             </div>
             <label style="margin-top:10px">🖼️ Image Control:</label>
     let dragType = null, activeObj = null, dragStart = {x:0, y:0};
     let historyStack = [];
+    // --- TIME HELPERS ---
+    function formatTime(s) {
+        s = parseFloat(s);
+        let m = Math.floor(s / 60);
+        let sec = Math.floor(s % 60);
+        let ms = Math.round((s % 1) * 100);
+        return `${m < 10 ? '0'+m : m}:${sec < 10 ? '0'+sec : sec}.${ms}`;
+    }
+    function parseTime(str) {
+        if(str.includes(':')) {
+            let p = str.split(':');
+            return parseInt(p[0]) * 60 + parseFloat(p[1]);
+        }
+        return parseFloat(str);
+    }
     function saveState() {
         const state = [];
         document.querySelectorAll('.comic-page').forEach(pg => {
         const img = el.querySelector('img');
         document.getElementById('zoom-slider').value = img.dataset.zoom || 100;
+        // 🎯 POPULATE TIME BOX (Formatted)
+        if(img.dataset.time) document.getElementById('timestamp-input').value = formatTime(img.dataset.time);
     }
+    function addBubble() { const grid = document.querySelector('.comic-grid'); if(grid) { const b = createBubbleHTML({ text: "Text", left: "50%", top: "50%", type: "speech" }); grid.appendChild(b); selectBubble(b); saveState(); } }
     function deleteBubble() { if(selectedBubble) { selectedBubble.remove(); selectedBubble=null; saveState(); } }
     function updateBubbleType() {
     function rotateTail() {
         if(!selectedBubble) return;
         const type = selectedBubble.dataset.type;
+        // Allow rotation for Speech, Thought, AND Reaction
         if(type === 'speech' || type === 'thought' || type === 'reaction') {
             const positions = ['tail-bottom', 'tail-right', 'tail-top', 'tail-left'];
             let current = positions.find(p => selectedBubble.classList.contains(p)) || 'tail-bottom';
             const fd = new FormData(); fd.append('image', e.target.files[0]);
             const r = await fetch(`/replace_panel?sid=${sid}`, {method:'POST', body:fd});
             const d = await r.json();
+            if(d.success) {
+                const img = selectedPanel.querySelector('img');
+                img.src = `/frames/${d.new_filename}?sid=${sid}`;
+                saveState();
+            }
             inp.value = '';
         };
         inp.click();
         if(d.success) {
             img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
             img.dataset.time = d.new_time.toFixed(2);
+            document.getElementById('timestamp-input').value = formatTime(d.new_time);
         }
         img.style.opacity='1'; saveState();
     }
         if(!selectedPanel) return alert("Select a panel");
         let v = document.getElementById('timestamp-input').value.trim();
         if(!v) return;
+        // Parse Time (MM:SS or Seconds)
+        let s = parseTime(v);
+        if(isNaN(s)) return alert("Invalid Time");
         const img = selectedPanel.querySelector('img'); let fname = img.src.split('/').pop().split('?')[0];
+        const r = await fetch(`/goto_timestamp?sid=${sid}`, { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({filename:fname, timestamp:s}) });
         const d = await r.json();
         if(d.success) {
             img.src = `/frames/${fname}?sid=${sid}&t=${Date.now()}`;
             img.dataset.time = d.new_time.toFixed(2);
+            document.getElementById('timestamp-input').value = formatTime(d.new_time);
         }
         img.style.opacity = '1'; saveState();
     }
 </body> </html> '''
 @app.route('/')
+def index():
+    return INDEX_HTML
 @app.route('/uploader', methods=['POST'])
 def upload():
+    sid = request.args.get('sid') or request.form.get('sid')
+    if not sid: return jsonify({'success': False, 'message': 'Missing session ID'}), 400
+    file = request.files.get('file')
+    if not file or file.filename == '': return jsonify({'success': False, 'message': 'No file uploaded'}), 400
+    target_pages = request.form.get('target_pages', 4)
+    gen = EnhancedComicGenerator(sid)
+    gen.cleanup()
+    file.save(gen.video_path)
+    gen.write_status("Starting...", 5)
+    threading.Thread(target=gen.run, args=(target_pages,)).start()
     return jsonify({'success': True})
 @app.route('/status')
     return jsonify({'progress': 0, 'message': "Waiting..."})
 @app.route('/output/<path:filename>')
+def get_output(filename):
+    sid = request.args.get('sid')
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 @app.route('/frames/<path:filename>')
+def get_frame(filename):
+    sid = request.args.get('sid')
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
 @app.route('/regenerate_frame', methods=['POST'])
 def regen():
+    sid = request.args.get('sid')
+    d = request.get_json()
     gen = EnhancedComicGenerator(sid)
     return jsonify(regen_frame_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], d['direction']))
 @app.route('/goto_timestamp', methods=['POST'])
 def go_time():
+    sid = request.args.get('sid')
+    d = request.get_json()
     gen = EnhancedComicGenerator(sid)
     return jsonify(get_frame_at_ts_gpu(gen.video_path, gen.frames_dir, gen.metadata_path, d['filename'], float(d['timestamp'])))
 @app.route('/replace_panel', methods=['POST'])
 def rep_panel():
+    sid = request.args.get('sid')
+    f = request.files['image']
     frames_dir = os.path.join(BASE_USER_DIR, sid, 'frames')
     os.makedirs(frames_dir, exist_ok=True)
     fname = f"replaced_{int(time.time() * 1000)}.png"
 @app.route('/save_comic', methods=['POST'])
 def save_comic():
+    sid = request.args.get('sid')
+    try:
+        data = request.get_json()
+        save_code = generate_save_code()
+        save_dir = os.path.join(SAVED_COMICS_DIR, save_code)
+        os.makedirs(save_dir, exist_ok=True)
+        user_frames_dir = os.path.join(BASE_USER_DIR, sid, 'frames')
+        saved_frames_dir = os.path.join(save_dir, 'frames')
+        if os.path.exists(user_frames_dir):
+            if os.path.exists(saved_frames_dir): shutil.rmtree(saved_frames_dir)
+            shutil.copytree(user_frames_dir, saved_frames_dir)
+        with open(os.path.join(save_dir, 'comic_state.json'), 'w') as f:
+            json.dump({'originalSid': sid, 'pages': data['pages'], 'savedAt': time.time()}, f)
+        return jsonify({'success': True, 'code': save_code})
+    except Exception as e: return jsonify({'success': False, 'message': str(e)})
 @app.route('/load_comic/<code>')
 def load_comic(code):
+    code = code.upper()
+    save_dir = os.path.join(SAVED_COMICS_DIR, code)
     if not os.path.exists(save_dir): return jsonify({'success': False, 'message': 'Code not found'})
+    try:
+        with open(os.path.join(save_dir, 'comic_state.json'), 'r') as f: data = json.load(f)
+        orig_sid = data['originalSid']
+        saved_frames = os.path.join(save_dir, 'frames')
+        user_frames = os.path.join(BASE_USER_DIR, orig_sid, 'frames')
+        os.makedirs(user_frames, exist_ok=True)
+        for fn in os.listdir(saved_frames):
+            shutil.copy2(os.path.join(saved_frames, fn), os.path.join(user_frames, fn))
+        return jsonify({'success': True, 'originalSid': orig_sid, 'pages': data['pages']})
+    except Exception as e: return jsonify({'success': False, 'message': str(e)})
 if __name__ == '__main__':
     try: gpu_warmup()