Update app_enhanced.py

app_enhanced.py

@@ -1,25 +1,20 @@
-# ======================================================
-# 🚀 IMPORTS (CRITICAL: spaces first)
-# ======================================================
-import spaces  # Must be first for GPU context
+import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
 import os
 import time
 import threading
 import json
+import traceback
 import logging
-import shutil
-import random
 import string
-import traceback
-
+import random
+import shutil
 import cv2
 import numpy as np
 import srt
-
-from flask import Flask, jsonify, request, send_file, send_from_directory
+from flask import Flask, jsonify, request, send_from_directory, send_file
 
 # ======================================================
-# 🖥️ GPU WARMUP
+# 🚀 ZEROGPU CONFIGURATION
 # ======================================================
 @spaces.GPU
 def gpu_warmup():
@@ -48,7 +43,7 @@ def sanitize_json(obj):
     return obj
 
 # ======================================================
-# 🧠 CORE GPU GENERATOR (COMIC + PANEL DESCRIPTIONS)
+# 🧠 CORE GPU GENERATOR
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
@@ -58,93 +53,75 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     from backend.ai_bubble_placement import ai_bubble_placer
     from backend.ai_enhanced_core import face_detector
 
-    # Video metadata
     cap = cv2.VideoCapture(video_path)
     fps = cap.get(cv2.CAP_PROP_FPS) or 25
     total_frames = int(cap.get(cv2.CAP_PROP_FRAME_COUNT))
     duration = total_frames / fps
     cap.release()
 
-    # Subtitles extraction
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
         if os.path.exists('test1.srt'): shutil.move('test1.srt', user_srt)
     except:
-        with open(user_srt, 'w') as f:
-            f.write("1\n00:00:01,000 --> 00:00:05,000\n...\n")
+        with open(user_srt, 'w') as f: f.write("1\n00:00:01,000 --> 00:00:05,000\n...\n")
 
     with open(user_srt, 'r', encoding='utf-8') as f:
         try: all_subs = list(srt.parse(f.read()))
         except: all_subs = []
 
-    # Panel mapping
     panels_per_page = 5
     target_pages = int(target_pages)
     total_needed = target_pages * panels_per_page
-    indices = np.linspace(0, len(all_subs)-1, total_needed, dtype=int) if all_subs else range(total_needed)
-
+    indices = np.linspace(0, len(all_subs) - 1, total_needed, dtype=int) if all_subs else range(total_needed)
+    
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
 
-    # Generate frames + attach visual panel description
-    PANEL_DESCRIPTIONS = [
-        "Top panel: Wide view of mother scolding children near lunchboxes, warm indoor light, rule-of-thirds composition.",
-        "Bottom left: Medium-close shot of Chinki explaining herself, simplified background, soft cooler tones.",
-        "Bottom center: Medium shot of mother gesturing firmly, neutral lighting, minimal props emphasized.",
-        "Bottom right: Children together, contrite body language, warmer soft light, emotional focal point."
-    ]
-
     for i, idx in enumerate(indices):
         t = all_subs[idx].start.total_seconds() if all_subs else (i * (duration/total_needed))
-        cap.set(cv2.CAP_PROP_POS_MSEC, t*1000)
+        cap.set(cv2.CAP_PROP_POS_MSEC, t * 1000)
         ret, frame = cap.read()
         if ret:
             fname = f"frame_{i:04d}.png"
-            fpath = os.path.join(frames_dir, fname)
-            cv2.imwrite(fpath, frame)
-            desc = PANEL_DESCRIPTIONS[i % len(PANEL_DESCRIPTIONS)]
-            frame_metadata[fname] = {'description': desc, 'time': t}
+            p = os.path.join(frames_dir, fname)
+            cv2.imwrite(p, frame)
+            frame_metadata[fname] = {'dialogue': all_subs[idx].content if all_subs else "", 'time': t}
             frame_files.append(fname)
     cap.release()
 
-    try: black_bar_crop()
+    with open(metadata_path, 'w') as f: json.dump(sanitize_json(frame_metadata), f)
+    try: black_bar_crop() 
     except: pass
 
-    # Compositional enhancement
     se = SimpleColorEnhancer()
     pages_data = []
-
     for p_idx in range(target_pages):
-        panels, bubbles = [], []
-        start = p_idx * panels_per_page
-        for i in range(start, start + panels_per_page):
+        p_p, p_b = [], []
+        start = p_idx * 5
+        for i in range(start, start + 5):
             if i >= len(frame_files): break
             f_name = frame_files[i]
-            img_path = os.path.join(frames_dir, f_name)
-            try: se.enhance_single(img_path, img_path)
+            img_p = os.path.join(frames_dir, f_name)
+            try: se.enhance_single(img_p, img_p)
             except: pass
-
-            # Optional bubble placement
-            txt = ""
+            
+            txt = frame_metadata[f_name]['dialogue']
             try:
-                faces = face_detector.detect_faces(img_path)
-                lip = face_detector.get_lip_position(img_path, faces[0]) if faces else (-1, -1)
-                bx, by = ai_bubble_placer.place_bubble_ai(img_path, lip)
-                bubble_item = {'dialog': txt, 'x': bx, 'y': by}
-            except: bubble_item = {'dialog': txt, 'x': 50, 'y': 25}
+                faces = face_detector.detect_faces(img_p)
+                lip = face_detector.get_lip_position(img_p, faces[0]) if faces else (-1, -1)
+                bx, by = ai_bubble_placer.place_bubble_ai(img_p, lip)
+                item = {'dialog': txt, 'x': bx, 'y': by}
+            except:
+                item = {'dialog': txt, 'x': 50, 'y': 25}
+            p_p.append({'image': f_name}); p_b.append(item)
+        pages_data.append({'panels': p_p, 'bubbles': p_b})
 
-            panels.append({'image': f_name, 'description': frame_metadata[f_name]['description']})
-            bubbles.append(bubble_item)
-        pages_data.append({'panels': panels, 'bubbles': bubbles})
-
-    # Save metadata
-    with open(metadata_path, 'w') as f: json.dump(sanitize_json(frame_metadata), f)
     return sanitize_json(pages_data)
 
 # ======================================================
-# 🔧 FLASK APP
+# 🔧 APP ENGINE
 # ======================================================
 app = Flask(__name__)
 
@@ -155,10 +132,8 @@ def index(): return INDEX_HTML
 def uploader():
     sid = request.args.get('sid')
     u_dir = os.path.join(BASE_USER_DIR, sid)
-    f_dir = os.path.join(u_dir, 'frames')
-    o_dir = os.path.join(u_dir, 'output')
-    os.makedirs(f_dir, exist_ok=True)
-    os.makedirs(o_dir, exist_ok=True)
+    f_dir = os.path.join(u_dir, 'frames'); o_dir = os.path.join(u_dir, 'output')
+    os.makedirs(f_dir, exist_ok=True); os.makedirs(o_dir, exist_ok=True)
     vid_p = os.path.join(u_dir, 'video.mp4')
     request.files['file'].save(vid_p)
     pages = request.form.get('pages', 2)
@@ -166,7 +141,7 @@ def uploader():
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': 'Processing...', 'progress': 30}, f)
+                json.dump({'message': 'Generating Tilted Frames...', 'progress': 30}, f)
             data = generate_comic_gpu(vid_p, u_dir, f_dir, os.path.join(f_dir, 'meta.json'), pages)
             with open(os.path.join(o_dir, 'pages.json'), 'w') as f: json.dump(data, f)
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
@@ -185,198 +160,152 @@ def status():
     return send_file(p) if os.path.exists(p) else jsonify({'progress': 0})
 
 @app.route('/frames/<sid>/<path:filename>')
-def get_frame(sid, filename):
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
+def get_frame(sid, filename): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'frames'), filename)
 
 @app.route('/output/<sid>/<path:filename>')
-def get_output(sid, filename):
-    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
+def get_output(sid, filename): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 
 # ======================================================
-# 🖼️ HTML + JS
+# 🖼️ UI HTML (FULL IMAGE PRESERVATION + 0.1px DESIGN LINES)
 # ======================================================
-INDEX_HTML = '''<!DOCTYPE html>
-<html lang="en">
+INDEX_HTML = '''
+<!DOCTYPE html><html lang="en">
 <head>
-<meta charset="UTF-8">
-<title>Elite 5-Panel Comic Generator</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=Comic+Neue:wght@700&family=Lato:wght@400;900&display=swap" rel="stylesheet">
-<style>
-:root { 
-    --slant: 40px; 
-    --gutter: 0.1px; 
-    --border-page: 12px;
-}
-body { background: #000; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; color: white; }
-.setup-box { max-width: 450px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; color: black; text-align: center; }
-
-.comic-page { 
-    background: white; width: 1000px; height: 750px; margin: 40px auto; 
-    border: var(--border-page) solid black; padding: 5px; box-sizing: border-box;
-    display: grid; gap: var(--gutter);
-    grid-template-columns: repeat(6, 1fr); 
-    grid-template-rows: 1.35fr 1fr; 
-    position: relative; overflow: hidden;
-}
-
-.panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 1.5px solid black; }
-.panel img { width: 118%; height: 118%; object-fit: cover; position: absolute; top: -9%; left: -9%; object-position: center 15%; pointer-events: none; }
-
-/* Top and bottom panel clipping */
-.panel:nth-child(1) { grid-column: span 4; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
-.panel:nth-child(2) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
-.panel:nth-child(3) { grid-column: span 2; clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%); }
-.panel:nth-child(4) { grid-column: span 2; clip-path: polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, var(--slant) 100%); }
-.panel:nth-child(5) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, var(--slant) 100%); }
-
-.panel.selected { outline: 8px solid #00d2ff; z-index: 5; filter: brightness(1.1); }
-
-/* Bubble styling */
-.bubble { 
-    position: absolute; background: white; border: 2.5px solid black; border-radius: 25px;
-    padding: 10px 20px; font-family: 'Comic Neue'; font-weight: bold; font-size: 15px;
-    color: black; min-width: 110px; text-align: center; cursor: move; z-index: 10;
-}
-.bubble::after {
-    content: ""; position: absolute; bottom: -18px; left: 30px;
-    width: 0; height: 0; border-left: 10px solid transparent;
-    border-right: 10px solid transparent; border-top: 20px solid black;
-}
-.bubble::before {
-    content: ""; position: absolute; bottom: -13px; left: 31px;
-    width: 0; height: 0; border-left: 9px solid transparent;
-    border-right: 9px solid transparent; border-top: 17px solid white;
-    z-index: 2;
-}
-
-/* Description tooltip */
-.desc-tooltip {
-    position: absolute;
-    bottom: 0; left: 0;
-    width: 100%; background: rgba(0,0,0,0.6); color: #fff;
-    font-size: 14px; padding: 5px; text-align: center;
-    box-sizing: border-box; pointer-events: none;
-    opacity: 0; transition: opacity 0.2s;
-}
-.panel:hover .desc-tooltip { opacity: 1; }
-
-.controls { position: fixed; bottom: 20px; right: 20px; background: #000; padding: 25px; border-radius: 12px; width: 240px; border: 2px solid #333; }
-button { width: 100%; padding: 12px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 6px; border: none; }
-.hidden { display: none; }
-.loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
-@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-</style>
+    <meta charset="UTF-8"><title>Pro Full-Frame Comic Maker</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=Comic+Neue:wght@700&family=Lato:wght@400;900&display=swap" rel="stylesheet">
+    <style>
+        :root { 
+            --slant: 28px; /* Balanced tilt: visible but not destructive */
+            --gutter: 0.1px; 
+            --border-page: 12px;
+        }
+        body { background: #000; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; }
+        .setup-box { max-width: 450px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; color: black; text-align: center; }
+        
+        /* ⚡ THE FULL-FRAME GEOMETRIC TEMPLATE ⚡ */
+        .comic-page { 
+            background: white; width: 1000px; height: 750px; margin: 40px auto; 
+            border: var(--border-page) solid black; padding: 4px; box-sizing: border-box;
+            display: grid; gap: var(--gutter);
+            grid-template-columns: repeat(6, 1fr); 
+            grid-template-rows: 1.3fr 1fr; 
+            position: relative; overflow: hidden;
+        }
+
+        .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 1.5px solid black; }
+        
+        /* IMAGE PRESERVATION: Minimal zoom (105%) and top-bias positioning */
+        .panel img { 
+            width: 108%; height: 108%; object-fit: cover; 
+            position: absolute; top: -4%; left: -4%; 
+            object-position: center 10%; /* Ensures faces at the top aren't cut */
+            pointer-events: none; 
+        }
+        
+        /* ROW 1: Design Lines - Tilt Left \ */
+        .panel:nth-child(1) { grid-column: span 4; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
+        .panel:nth-child(2) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
+
+        /* ROW 2: Design Lines - Tilt Right / (Preserving Fullness) */
+        .panel:nth-child(3) { grid-column: span 2; clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%); }
+        .panel:nth-child(4) { grid-column: span 2; clip-path: polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, var(--slant) 100%); }
+        .panel:nth-child(5) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, var(--slant) 100%); }
+
+        .panel.selected { outline: 8px solid #00d2ff; z-index: 5; filter: brightness(1.1); }
+
+        .bubble { 
+            position: absolute; background: white; border: 2.5px solid black; border-radius: 25px;
+            padding: 10px 20px; font-family: 'Comic Neue'; font-weight: bold; font-size: 15px;
+            color: black; min-width: 110px; text-align: center; cursor: move; z-index: 10;
+        }
+        .bubble::after { content: ""; position: absolute; bottom: -18px; left: 30px; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 20px solid black; }
+        .bubble::before { content: ""; position: absolute; bottom: -13px; left: 31px; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 17px solid white; z-index: 2; }
+
+        .controls { position: fixed; bottom: 20px; right: 20px; background: #000; padding: 25px; border-radius: 12px; width: 240px; border: 2px solid #333; }
+        button { width: 100%; padding: 12px; margin-top: 10px; cursor: pointer; font-weight: bold; border-radius: 6px; border: none; }
+        .hidden { display: none; }
+        .loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 20px auto; }
+        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+    </style>
 </head>
 <body>
-<div id="upload-zone" class="setup-box">
-    <h1>🎬 Elite Comic Maker</h1>
-    <p>Visual Panel Descriptions Applied</p>
-    <input type="file" id="vid" accept="video/mp4"><br><br>
-    <label>Total Pages: </label><input type="number" id="pg" value="2" style="width:50px">
-    <br><br>
-    <button onclick="start()" style="background:#00d2ff; color:black;">🚀 GENERATE PERFECT COMIC</button>
-    <div id="loading" class="hidden"><div class="loader"></div><p id="st">Processing Composition...</p></div>
-</div>
-
-<div id="editor-zone" class="hidden">
-    <div id="output"></div>
-    <div class="controls">
-        <h4 style="margin:0; color:#00d2ff;">EDITOR TOOLS</h4>
-        <button onclick="addB()" style="background:#2ecc71; color:white;">💬 Add Text Capsule</button>
-        <button onclick="exportPNG()" style="background:#3498db; color:white;">📥 Download Pages</button>
-        <button onclick="location.reload()" style="background:#e74c3c; color:white;">🏠 Start New</button>
+    <div id="upload-zone" class="setup-box">
+        <h1>🎬 Elite Comic Maker</h1>
+        <p>Full Image Preservation + 0.1px Design Lines</p>
+        <input type="file" id="vid" accept="video/mp4"><br><br>
+        <label>Total Pages: </label><input type="number" id="pg" value="2" style="width:50px">
+        <br><br>
+        <button onclick="start()" style="background:#00d2ff; color:black;">🚀 GENERATE COMIC</button>
+        <div id="loading" class="hidden"><div class="loader"></div><p id="st">Processing Composition...</p></div>
+    </div>
+    <div id="editor-zone" class="hidden">
+        <div id="output"></div>
+        <div class="controls">
+            <h4 style="margin:0; color:#00d2ff;">EDITOR</h4>
+            <button onclick="addB()" style="background:#2ecc71; color:white;">💬 Add Bubble</button>
+            <button onclick="exportPNG()" style="background:#3498db; color:white;">📥 Download PNGs</button>
+            <button onclick="location.reload()" style="background:#e74c3c; color:white;">🏠 Reset</button>
+        </div>
     </div>
-</div>
-
 <script>
-let sid = 's' + Math.random().toString(36).substr(2,9);
-let selP = null;
-
-async function start() {
-    const f = document.getElementById('vid').files[0];
-    if(!f) return alert("Select a video!");
-    document.getElementById('loading').classList.remove('hidden');
-    const fd = new FormData();
-    fd.append('file', f); 
-    fd.append('pages', document.getElementById('pg').value);
-    await fetch(`/uploader?sid=${sid}`, {method: 'POST', body: fd});
-    const itv = setInterval(async () => {
-        const r = await fetch(`/status?sid=${sid}`);
-        const d = await r.json();
-        document.getElementById('st').innerText = d.message || "Working...";
-        if(d.progress >= 100) { clearInterval(itv); load(); }
-    }, 2000);
-}
-
-async function load() {
-    const r = await fetch(`/output/${sid}/pages.json`);
-    const pages = await r.json();
-    document.getElementById('upload-zone').classList.add('hidden');
-    document.getElementById('editor-zone').classList.remove('hidden');
-    const out = document.getElementById('output');
-
-    pages.forEach(p => {
-        const pgDiv = document.createElement('div'); pgDiv.className = 'comic-page';
-        p.panels.forEach((pan, i) => {
-            const pDiv = document.createElement('div'); pDiv.className = 'panel';
-            pDiv.onclick = (e) => {
-                e.stopPropagation();
-                if(selP) selP.classList.remove('selected');
-                selP=pDiv; 
-                pDiv.classList.add('selected');
-            };
-            const img = document.createElement('img'); img.src = `/frames/${sid}/${pan.image}`;
-            pDiv.appendChild(img);
-
-            // Add panel description overlay
-            const desc = document.createElement('div'); 
-            desc.className = 'desc-tooltip';
-            desc.innerText = pan.description || '';
-            pDiv.appendChild(desc);
-
-            // Optional existing bubbles
-            if(p.bubbles[i]) pDiv.appendChild(createB(p.bubbles[i].dialog, p.bubbles[i].x, p.bubbles[i].y));
-            pgDiv.appendChild(pDiv);
+    let sid = 's' + Math.random().toString(36).substr(2,9);
+    let selP = null;
+    async function start() {
+        const f = document.getElementById('vid').files[0];
+        if(!f) return alert("Select video!");
+        document.getElementById('loading').classList.remove('hidden');
+        const fd = new FormData(); fd.append('file', f); fd.append('pages', document.getElementById('pg').value);
+        await fetch(`/uploader?sid=${sid}`, {method: 'POST', body: fd});
+        const itv = setInterval(async () => {
+            const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
+            document.getElementById('st').innerText = d.message || "Working...";
+            if(d.progress >= 100) { clearInterval(itv); load(); }
+        }, 2000);
+    }
+    async function load() {
+        const r = await fetch(`/output/${sid}/pages.json`); const pages = await r.json();
+        document.getElementById('upload-zone').classList.add('hidden');
+        document.getElementById('editor-zone').classList.remove('hidden');
+        const out = document.getElementById('output');
+        pages.forEach(p => {
+            const pgDiv = document.createElement('div'); pgDiv.className = 'comic-page';
+            p.panels.forEach((pan, i) => {
+                const pDiv = document.createElement('div'); pDiv.className = 'panel';
+                pDiv.onclick = (e) => { e.stopPropagation(); if(selP) selP.classList.remove('selected'); selP=pDiv; pDiv.classList.add('selected'); };
+                const img = document.createElement('img'); img.src = `/frames/${sid}/${pan.image}`;
+                pDiv.appendChild(img);
+                if(p.bubbles[i]) pDiv.appendChild(createB(p.bubbles[i].dialog, p.bubbles[i].x, p.bubbles[i].y));
+                pgDiv.appendChild(pDiv);
+            });
+            out.appendChild(pgDiv);
         });
-        out.appendChild(pgDiv);
-    });
-}
-
-function createB(txt, x, y) {
-    const b = document.createElement('div'); b.className = 'bubble';
-    b.innerText = txt || '...'; b.style.left = (x || 50) + 'px'; b.style.top = (y || 20) + 'px';
-    b.onmousedown = (e) => {
-        e.stopPropagation();
-        let ox = e.clientX - b.offsetLeft, oy = e.clientY - b.offsetTop;
-        document.onmousemove = (ev) => { b.style.left=(ev.clientX-ox)+'px'; b.style.top=(ev.clientY-oy)+'px'; };
-        document.onmouseup = () => { document.onmousemove = null; };
-    };
-    b.ondblclick = () => { let n = prompt("Edit Text:", b.innerText); if(n) b.innerText = n; };
-    return b;
-}
-
-function addB() { 
-    if(selP) selP.appendChild(createB("Enter Dialogue", 60, 60)); 
-    else alert("Select a panel first!"); 
-}
-
-async function exportPNG() {
-    const pgs = document.querySelectorAll('.comic-page');
-    for(let pg of pgs) {
-        const url = await htmlToImage.toPng(pg, {pixelRatio: 2});
-        const l = document.createElement('a'); l.download='Elite_Comic_Page.png'; l.href=url; l.click();
     }
-}
+    function createB(txt, x, y) {
+        const b = document.createElement('div'); b.className = 'bubble';
+        b.innerText = txt || '...'; b.style.left = (x || 50) + 'px'; b.style.top = (y || 20) + 'px';
+        b.onmousedown = (e) => {
+            e.stopPropagation();
+            let ox = e.clientX - b.offsetLeft, oy = e.clientY - b.offsetTop;
+            document.onmousemove = (ev) => { b.style.left=(ev.clientX-ox)+'px'; b.style.top=(ev.clientY-oy)+'px'; };
+            document.onmouseup = () => { document.onmousemove = null; };
+        };
+        b.ondblclick = () => { let n = prompt("Edit:", b.innerText); if(n) b.innerText = n; };
+        return b;
+    }
+    function addB() { if(selP) selP.appendChild(createB("Dialogue", 60, 60)); }
+    async function exportPNG() {
+        const pgs = document.querySelectorAll('.comic-page');
+        for(let pg of pgs) {
+            const url = await htmlToImage.toPng(pg, {pixelRatio: 2});
+            const l = document.createElement('a'); l.download='Pro_Comic.png'; l.href=url; l.click();
+        }
+    }
 </script>
-</body>
-</html>
-'''  # Keep your existing HTML/JS intact; optional: add descriptions in UI
+</body></html>
+'''
 
-# ======================================================
-# 🚀 RUN APP
-# ======================================================
 if __name__ == '__main__':
     try: gpu_warmup()
     except: pass
-    app.run(host='0.0.0.0', port=7860)
+    app.run(host='0.0.0.0', port=7860)