Update app_enhanced.py

app_enhanced.py

@@ -66,7 +66,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, status_p
 
     if target_pages <= 0: target_pages = 1
     
-    # === 5 PANELS PER PAGE ===
+    # === 5 PANELS PER PAGE (Fixed Template) ===
     panels_per_page = 5 
     total_panels_needed = target_pages * panels_per_page
 
@@ -100,7 +100,6 @@ 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
-            # Update progress periodically
             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)
@@ -311,7 +310,6 @@ class EnhancedComicGenerator:
         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))
             with open(os.path.join(self.output_dir, 'pages.json'), 'w') as f:
                 json.dump(data, f, indent=2)
@@ -341,29 +339,16 @@ INDEX_HTML = '''
 /* =====================================================
    GLOBAL RESET — ABSOLUTE BASELINE
 ===================================================== */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-html, body {
-    background: #f0f0f0;
-    font-family: system-ui, Arial, sans-serif;
-}
+* { margin: 0; padding: 0; box-sizing: border-box; }
+html, body { background: #f0f0f0; font-family: system-ui, Arial, sans-serif; }
 
 /* =====================================================
-   PAGE WRAPPER (NO SCALE, EVER)
+   PAGE WRAPPER
 ===================================================== */
-#workspace {
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-}
+#workspace { padding: 20px; display: flex; flex-direction: column; align-items: center; }
 
 /* =====================================================
-   COMIC PAGE — TRUE RESOLUTION
+   COMIC PAGE — TRUE RESOLUTION (NO CSS SCALING)
    1000px Width x 712px Height
 ===================================================== */
 .comic-page {
@@ -378,88 +363,72 @@ html, body {
 }
 
 .page-title {
-    font-size: 24px;
-    font-weight: bold;
-    margin-bottom: 10px;
-    color: #333;
+    font-size: 24px; font-weight: bold; margin-bottom: 10px; color: #333;
 }
 
 /* =====================================================
    PANELS — 5 PANEL SLANTED LAYOUT
+   Method: Absolute Position + Clip Path + White Gaps
 ===================================================== */
 .panel {
     position: absolute;
-    /* Removed border to allow gutters to be pure white */
-    /* border: 2px solid #000; */ 
     overflow: hidden;
-    background: #fff; /* White background for gaps */
+    background: #fff; /* White background creates the 'gap' effect */
+    cursor: pointer;
+    border: 0;
 }
 
 /* 
-   Reference: 1000px width x 712px height.
-   Gutter: 12px horizontal (1.2%), 12px vertical (1.7%).
-   Half Gutter: 0.6% Horz, 0.85% Vert.
-   
-   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)
+   TEMPLATE DEFINITION:
+   Based on 1000px x 712px Canvas.
+   12px Gutter ~ 1.2% Width, 1.7% Height.
 */
 
 /* --- ROW 1 (TOP) --- Height 49.15% */
-
-/* Panel 1: Right ends at (63.2 - 0.6)% / (59.5 - 0.6)% */
-.panel:nth-child(1) {
+.panel[data-pos="1"] { /* Top Left */
     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) {
+.panel[data-pos="2"] { /* Top Right */
     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) {
+.panel[data-pos="3"] { /* Bottom Left */
     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) {
+.panel[data-pos="4"] { /* Bottom Middle */
     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) {
+.panel[data-pos="5"] { /* Bottom Right */
     top: 50.85%; left: 0; height: 49.15%; width: 100%;
     clip-path: polygon(65.4% 0%, 100% 0%, 100% 100%, 68.8% 100%);
 }
 
 /* =====================================================
-   PANEL IMAGES — FINAL RULES
+   PANEL IMAGES — STRICT RULES
 ===================================================== */
 .panel img {
     width: 100%;
     height: 100%;
-    object-fit: contain;          /* 🔒 NEVER CROP */
-    transform: none !important;   /* 🔒 NEVER SCALE */
+    object-fit: contain;          /* 🔒 100% FIT, NO CROP */
+    transform: none !important;   /* 🔒 NO ZOOM, NO SCALE */
     display: block;
-    background: #fff;             /* White bars if ratio mismatch */
+    background: #fff;             /* White bars if aspect ratio mismatch */
     image-rendering: auto;
 }
 
 /* =====================================================
-   SPEECH / THOUGHT BUBBLES
+   SPEECH BUBBLES
 ===================================================== */
-.bubble, .speech-bubble {
+.speech-bubble {
     position: absolute;
     max-width: 260px;
     background: #4ECDC4;
     color: white;
-    border: 2px solid transparent;
     border-radius: 18px;
     padding: 10px 14px;
     font-size: 14px;
@@ -470,115 +439,61 @@ html, body {
     font-weight: bold;
     text-align: center;
 }
-
-/* Tail logic handled via JS classes in previous logic, simplifying here for "True Size" */
-.speech-bubble.selected { outline: 2px dashed #4CAF50; z-index: 101; }
+.speech-bubble:after {
+    content: ""; position: absolute; bottom: -10px; left: 20px;
+    border-width: 10px 10px 0; border-style: solid; border-color: #4ECDC4 transparent;
+}
 
 /* =====================================================
-   TOOLBAR & UI
+   UI
 ===================================================== */
-.toolbar {
-    width: 1000px;
-    margin: 0 auto 20px auto;
-    display: flex;
-    gap: 10px;
-    background: white;
-    padding: 10px;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
-    justify-content: center;
-}
-
-.toolbar button {
-    padding: 8px 16px;
-    border: 1px solid #ddd;
-    background: #fff;
-    cursor: pointer;
-    font-weight: bold;
-    border-radius: 4px;
-}
-
-.toolbar button:hover {
-    background: #f0f0f0;
-}
+.toolbar { width: 1000px; margin: 0 auto 20px auto; display: flex; gap: 10px; justify-content: center; }
+button { padding: 8px 16px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-weight: bold; border-radius: 4px; }
+button:hover { background: #eee; }
 
-#upload-container { display: flex; flex-direction:column; justify-content: center; align-items: center; min-height: 100vh; width: 100%; }
+#upload-container { display: flex; flex-direction:column; justify-content: center; align-items: center; min-height: 100vh; }
 .upload-box { max-width: 500px; width: 100%; padding: 40px; background: white; border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.12); text-align: center; }
-.file-input { display: none; }
-.file-label { display: block; padding: 15px; background: #2c3e50; color: white; border-radius: 8px; cursor: pointer; font-weight: bold; margin-bottom: 10px; }
-.submit-btn { width: 100%; padding: 15px; background: #e67e22; color: white; border: none; border-radius: 8px; font-size: 18px; font-weight: bold; cursor: pointer; margin-top:10px; }
 .loader { width: 50px; height: 50px; border: 5px solid #f3f3f3; border-top: 5px solid #3498db; border-radius: 50%; animation: spin 1s linear infinite; margin: 20px auto; }
 @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-
 </style>
 </head>
 
 <body>
 
-<!-- UPLOAD SECTION -->
 <div id="upload-container">
     <div class="upload-box">
         <h1>🎬 CineComic Editor</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 File</label>
-        <span id="fn" style="display:block; margin-bottom:10px; color:#666;">No file selected</span>
-        
-        <div style="margin: 20px 0; text-align:left;">
-            <label style="font-weight:bold; display:block; margin-bottom:5px;">📚 Pages:</label>
-            <input type="number" id="page-count" value="4" min="1" max="15" style="width:100%; padding:10px; border-radius:5px; border:1px solid #ccc;">
-        </div>
-        
-        <button class="submit-btn" onclick="upload()">🚀 Generate Comic</button>
-        
+        <input type="file" id="file-upload" style="margin-bottom:10px;">
+        <br>
+        <label>Pages: <input type="number" id="page-count" value="4" min="1" max="15" style="width:50px;"></label>
+        <br><br>
+        <button onclick="upload()">🚀 Generate</button>
         <div id="loading-view" style="display:none; margin-top:20px;">
             <div class="loader"></div>
-            <p id="status-text">Processing...</p>
-        </div>
-        
-        <div style="margin-top:20px; border-top:1px solid #eee; padding-top:20px;">
-            <input type="text" id="load-code-input" placeholder="SAVE CODE" maxlength="8" style="padding:10px; width:150px; text-align:center; text-transform:uppercase;">
-            <button onclick="loadSavedComic()" style="padding:10px 20px; cursor:pointer;">Load</button>
+            <p id="status-text">Starting...</p>
         </div>
     </div>
 </div>
 
-<!-- EDITOR WORKSPACE -->
 <div id="workspace" style="display:none;">
     <div class="toolbar">
-        <button onclick="saveComic()">💾 Save</button>
         <button onclick="exportComic()">📥 Export PNG</button>
-        <button onclick="location.reload()">🏠 Home</button>
+        <button onclick="location.reload()">🏠 Reset</button>
     </div>
-    
     <div id="comic-container"></div>
 </div>
 
 <script>
-/* =====================================================
-   LOGIC & API
-===================================================== */
+// --- LOGIC ---
 function genUUID(){ return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g,c=>{var r=Math.random()*16|0,v=c=='x'?r:(r&0x3|0x8);return v.toString(16);}); }
-let sid = localStorage.getItem('comic_sid') || genUUID();
-localStorage.setItem('comic_sid', sid);
+let sid = genUUID();
 let interval;
 
-// --- GLOBAL IMAGE POLICY ---
-function forceImageRules(img) {
-    img.style.objectFit = 'contain';
-    img.style.transform = 'none';
-    img.style.width = '100%';
-    img.style.height = '100%';
-    img.style.display = 'block';
-    img.removeAttribute('data-zoom'); 
-}
-
-// --- UPLOAD ---
 async function upload() {
     const f = document.getElementById('file-upload').files[0];
     const pCount = document.getElementById('page-count').value;
     if(!f) return alert("Select a video");
     
-    sid = genUUID(); localStorage.setItem('comic_sid', sid);
     document.querySelector('.upload-box').style.display='none'; 
     document.getElementById('loading-view').style.display='block';
     
@@ -588,7 +503,6 @@ async function upload() {
     
     const r = await fetch(`/uploader?sid=${sid}`, {method:'POST', body:fd});
     if(r.ok) interval = setInterval(checkStatus, 2000);
-    else { alert("Upload failed"); location.reload(); }
 }
 
 async function checkStatus() {
@@ -614,77 +528,69 @@ function renderComic(data) {
     const container = document.getElementById('comic-container');
     container.innerHTML = '';
     
-    // Transform backend data format if needed, assume it matches expected 'panels'
-    // Backend returns list of pages, each with 'panels' array
-    
     data.forEach((pageData, idx) => {
-        // Wrapper for title
-        const wrapper = document.createElement('div');
         const title = document.createElement('div');
         title.className = 'page-title';
         title.innerText = `Page ${idx + 1}`;
-        wrapper.appendChild(title);
+        container.appendChild(title);
         
         const pageDiv = document.createElement('div');
         pageDiv.className = 'comic-page';
         
-        // Render 5 panels strictly
+        // Render 5 Panels
         pageData.panels.forEach((p, i) => {
-            if(i >= 5) return; // Only template supports 5
+            if(i >= 5) return;
             
             const panelDiv = document.createElement('div');
             panelDiv.className = 'panel';
+            panelDiv.dataset.pos = i + 1; // 1-5 for CSS selection
             
             const img = document.createElement('img');
             img.src = `/frames/${p.image}?sid=${sid}`;
-            forceImageRules(img); // APPLY TRUE SIZE RULES
+            // STRICT NO-ZOOM RULE APPLIED VIA CSS
             
             panelDiv.appendChild(img);
             
-            // Add bubbles if any
-            if(pageData.bubbles && pageData.bubbles[i]) {
-                const bData = pageData.bubbles[i];
-                if(bData.dialog) {
-                    const bubble = document.createElement('div');
-                    bubble.className = `speech-bubble ${bData.type || 'speech'}`;
-                    bubble.style.left = (bData.bubble_offset_x || 50) + 'px';
-                    bubble.style.top = (bData.bubble_offset_y || 20) + 'px';
-                    bubble.innerText = bData.dialog;
-                    
-                    // Simple drag logic for bubbles
-                    bubble.onmousedown = function(e) {
-                        e.stopPropagation();
-                        let shiftX = e.clientX - bubble.getBoundingClientRect().left;
-                        let shiftY = e.clientY - bubble.getBoundingClientRect().top;
-                        
-                        function moveAt(pageX, pageY) {
-                            // Relative to pageDiv
-                            let rect = pageDiv.getBoundingClientRect();
-                            bubble.style.left = pageX - shiftX - rect.left + 'px';
-                            bubble.style.top = pageY - shiftY - rect.top + 'px';
-                        }
-                        
-                        function onMouseMove(event) { moveAt(event.pageX, event.pageY); }
-                        document.addEventListener('mousemove', onMouseMove);
-                        bubble.onmouseup = function() {
-                            document.removeEventListener('mousemove', onMouseMove);
-                            bubble.onmouseup = null;
-                        };
-                    };
-                    
-                    panelDiv.appendChild(bubble);
-                }
+            // Bubbles
+            if(pageData.bubbles && pageData.bubbles[i] && pageData.bubbles[i].dialog) {
+                const b = document.createElement('div');
+                b.className = 'speech-bubble';
+                b.style.left = (pageData.bubbles[i].bubble_offset_x || 50) + 'px';
+                b.style.top = (pageData.bubbles[i].bubble_offset_y || 20) + 'px';
+                b.innerText = pageData.bubbles[i].dialog;
+                makeDraggable(b);
+                panelDiv.appendChild(b);
             }
             
             pageDiv.appendChild(panelDiv);
         });
         
-        wrapper.appendChild(pageDiv);
-        container.appendChild(wrapper);
+        container.appendChild(pageDiv);
     });
 }
 
-// --- EXPORT ---
+function makeDraggable(el) {
+    el.onmousedown = function(e) {
+        e.stopPropagation();
+        let shiftX = e.clientX - el.getBoundingClientRect().left;
+        let shiftY = e.clientY - el.getBoundingClientRect().top;
+        
+        function moveAt(pageX, pageY) {
+            let parent = el.parentElement;
+            let rect = parent.getBoundingClientRect();
+            el.style.left = pageX - shiftX - rect.left + 'px';
+            el.style.top = pageY - shiftY - rect.top + 'px';
+        }
+        
+        function onMouseMove(event) { moveAt(event.pageX, event.pageY); }
+        document.addEventListener('mousemove', onMouseMove);
+        el.onmouseup = function() {
+            document.removeEventListener('mousemove', onMouseMove);
+            el.onmouseup = null;
+        };
+    };
+}
+
 async function exportComic() {
     const pgs = document.querySelectorAll('.comic-page');
     for(let i=0; i<pgs.length; i++) {
@@ -694,27 +600,6 @@ async function exportComic() {
         } catch(e) { console.error(e); }
     }
 }
-
-// --- SAVE / LOAD SKELETON ---
-async function saveComic() {
-    // Logic similar to previous but simplified data structure
-    alert("Save implemented on backend, frontend state gathering required.");
-}
-async function loadSavedComic() {
-    const code = document.getElementById('load-code-input').value;
-    const r = await fetch(`/load_comic/${code}`);
-    const d = await r.json();
-    if(d.success) {
-        sid = d.originalSid;
-        document.getElementById('upload-container').style.display='none';
-        document.getElementById('workspace').style.display='flex';
-        // Need to adapt saved data structure to renderComic
-        // renderComic(d.pages); 
-        alert("Loaded! (Rendering logic needs full state match)");
-        location.reload(); // Quick fix for demo to reload state from server files
-    }
-}
-
 </script>
 </body>
 </html>
@@ -731,16 +616,13 @@ def upload():
     if 'file' not in request.files or not request.files['file'].filename:
         return jsonify({'success': False, 'message': 'No file selected'}), 400
     
-    # GET PAGE COUNT FROM FORM
     target_pages = request.form.get('target_pages', 4)
-
     f = request.files['file']
     gen = EnhancedComicGenerator(sid)
     gen.cleanup()
     f.save(gen.video_path)
     gen.write_status("Starting...", 5)
     
-    # Run in thread
     threading.Thread(target=gen.run, args=(target_pages,)).start()
     return jsonify({'success': True, 'message': 'Generation started.'})
 
@@ -761,82 +643,13 @@ 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')
-    if 'image' not in request.files: return jsonify({'success': False, 'error': 'No image'})
-    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"
-    f.save(os.path.join(frames_dir, fname))
-    return jsonify({'success': True, 'new_filename': fname})
+@app.route('/load_comic/<code>')
+def load_comic(code):
+    return jsonify({'success': False, 'message': 'Not implemented in this minimal version'})
 
 @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)
-        
-        save_data = {
-            'code': save_code,
-            'originalSid': sid,
-            'pages': data.get('pages', []),
-            'savedAt': data.get('savedAt', time.strftime('%Y-%m-%d %H:%M:%S'))
-        }
-        with open(os.path.join(save_dir, 'comic_state.json'), 'w') as f: json.dump(save_data, f, indent=2)
-        return jsonify({'success': True, 'code': save_code})
-    except Exception as e:
-        traceback.print_exc()
-        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)
-    state_file = os.path.join(save_dir, 'comic_state.json')
-    
-    if not os.path.exists(state_file): return jsonify({'success': False, 'message': 'Save code not found'})
-    
-    try:
-        with open(state_file, 'r') as f: save_data = json.load(f)
-        original_sid = save_data.get('originalSid')
-        saved_frames_dir = os.path.join(save_dir, 'frames')
-        if original_sid and os.path.exists(saved_frames_dir):
-            user_frames_dir = os.path.join(BASE_USER_DIR, original_sid, 'frames')
-            os.makedirs(user_frames_dir, exist_ok=True)
-            for fname in os.listdir(saved_frames_dir):
-                src = os.path.join(saved_frames_dir, fname)
-                dst = os.path.join(user_frames_dir, fname)
-                if not os.path.exists(dst): shutil.copy2(src, dst)
-        return jsonify({ 'success': True, 'pages': save_data.get('pages', []), 'originalSid': original_sid, 'savedAt': save_data.get('savedAt') })
-    except Exception as e:
-        traceback.print_exc()
-        return jsonify({'success': False, 'message': str(e)})
+    return jsonify({'success': False, 'message': 'Not implemented in this minimal version'})
 
 if __name__ == '__main__':
     try: gpu_warmup()