cpu

Sleeping

App Files Files Community

tester343 commited on Dec 26, 2025

Commit

3dd5234

verified ·

1 Parent(s): d52a719

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +26 -29

app_enhanced.py CHANGED Viewed

@@ -42,11 +42,10 @@ def sanitize_json(obj):
     return obj
 # ======================================================
-# 🧠 CORE GPU GENERATOR (ALL AI IMPORTS INSIDE)
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
-    # Heavy AI imports inside function to avoid startup timeout
     from backend.keyframes.keyframes import black_bar_crop
     from backend.simple_color_enhancer import SimpleColorEnhancer
     from backend.subtitles.subs_real import get_real_subtitles
@@ -59,7 +58,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     duration = total_frames / fps
     cap.release()
-    # 1. Subtitles
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
@@ -71,7 +69,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         try: all_subs = list(srt.parse(f.read()))
         except: all_subs = []
-    # 2. Logic for 5 Panels Per Page
     panels_per_page = 5
     target_pages = int(target_pages)
     total_needed = target_pages * panels_per_page
@@ -86,7 +83,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
         indices = np.linspace(0, len(all_subs) - 1, total_needed, dtype=int)
         moments = [{'text': all_subs[i].content, 'start': all_subs[i].start.total_seconds()} for i in indices]
-    # 3. Frame Extraction
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
@@ -107,7 +103,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     try: black_bar_crop()
     except: pass
-    # 4. Enhance & Assemble
     se = SimpleColorEnhancer()
     pages_data = []
     for p_idx in range(target_pages):
@@ -136,7 +131,7 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     return sanitize_json(pages_data)
 # ======================================================
-# 🔧 APP SETUP
 # ======================================================
 app = Flask(__name__)
@@ -184,46 +179,51 @@ def get_output(sid, filename):
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 # ======================================================
-# 🌐 UI HTML (USING YOUR EXACT DRAGGED COORDINATES)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
-    <meta charset="UTF-8"><title>Elite Pro 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>
-        /* ⚡ YOUR FINAL COORDINATES APPLIED ⚡ */
         :root {
             --w: 1000px;
             --h: 700px;
             --tierY: 350px;
-            --gut: 5.25px; /* (10.5px gutter / 2) */
             --r1-topX: 641.2px;
             --r1-botX: 588.2px;
             --r2L-topX: 284.2px;
             --r2L-botX: 314.2px;
             --r2R-topX: 618.2px;
             --r2R-botX: 678.2px;
         }
         body { background: #0a0a0b; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; color: white; }
-        .setup-view { max-width: 450px; margin: 80px auto; background: white; padding: 40px; border-radius: 12px; color: black; text-align: center; }
-        /* THE PERFECT GEOMETRIC PAGE */
         .comic-page {
             background: white; width: var(--w); height: var(--h); margin: 40px auto;
-            border: 10px solid black; position: relative; overflow: hidden;
             display: block; box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
         .panel { position: absolute; background: #000; overflow: hidden; cursor: pointer; border: 1px solid black; }
-        .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; pointer-events: none; }
-        /* MAPPING POLYGONS TO YOUR DRAG COORDINATES */
         /* ROW 1 */
         .p1 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(0 0, calc(var(--r1-topX) - var(--gut)) 0, calc(var(--r1-botX) - var(--gut)) var(--tierY), 0 var(--tierY)); }
         .p2 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(calc(var(--r1-topX) + var(--gut)) 0, var(--w) 0, var(--w) var(--tierY), calc(var(--r1-botX) + var(--gut)) var(--tierY)); }
@@ -233,11 +233,11 @@ INDEX_HTML = '''
         .p4 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2L-topX) + var(--gut)) 0, calc(var(--r2R-topX) - var(--gut)) 0, calc(var(--r2R-botX) - var(--gut)) 100%, calc(var(--r2L-botX) + var(--gut)) 100%); }
         .p5 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2R-topX) + var(--gut)) 0, var(--w) 0, var(--w) 100%, calc(var(--r2R-botX) + var(--gut)) 100%); }
-        /* BUBBLE STYLE - CAPSULE WITH BEAKED TAIL */
         .bubble {
             position: absolute; background: white; border: 2.5px solid black; border-radius: 25px;
             padding: 10px 18px; font-family: 'Comic Neue'; font-weight: bold; font-size: 15px;
             color: black; min-width: 110px; text-align: center; cursor: move; z-index: 100;
         }
         .bubble::after { content: ""; position: absolute; bottom: -15px; left: 30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid black; }
         .bubble::before { content: ""; position: absolute; bottom: -11px; left: 31px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid white; z-index: 2; }
@@ -247,23 +247,21 @@ INDEX_HTML = '''
         .btn-gen { background: #00d2ff; color: black; }
         .hidden { display: none; }
         .loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 35px; height: 35px; animation: spin 1s linear infinite; margin: 20px auto; }
-        @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
     </style>
 </head>
 <body>
-    <div id="u-zone" class="setup-view">
-        <h1>🎬 Elite Comic Maker</h1>
-        <p>100% Precision Geometry Engine</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
         <label>Total Pages: </label><input type="number" id="pg" value="2" style="width:40px"><br><br>
         <button class="btn-gen" onclick="start()">🚀 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>
@@ -284,12 +282,11 @@ INDEX_HTML = '''
             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(); }
-        }, 3000);
     }
     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('u-zone').classList.add('hidden');
         document.getElementById('editor-zone').classList.remove('hidden');
         const out = document.getElementById('output');
@@ -320,13 +317,13 @@ INDEX_HTML = '''
         return b;
     }
-    function addB() { if(selP) selP.appendChild(createB("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: 3});
-            const l = document.createElement('a'); l.download='ProComicPage.png'; l.href=url; l.click();
         }
     }
 </script>

     return obj
 # ======================================================
+# 🧠 CORE GPU GENERATOR
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
     from backend.keyframes.keyframes import black_bar_crop
     from backend.simple_color_enhancer import SimpleColorEnhancer
     from backend.subtitles.subs_real import get_real_subtitles
     duration = total_frames / fps
     cap.release()
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
         try: all_subs = list(srt.parse(f.read()))
         except: all_subs = []
     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)
         moments = [{'text': all_subs[i].content, 'start': all_subs[i].start.total_seconds()} for i in indices]
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
     try: black_bar_crop()
     except: pass
     se = SimpleColorEnhancer()
     pages_data = []
     for p_idx in range(target_pages):
     return sanitize_json(pages_data)
 # ======================================================
+# 🔧 APP ENGINE
 # ======================================================
 app = Flask(__name__)
     return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 # ======================================================
+# 🌐 UI HTML (100% ZOOM INTEGRATED)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
+    <meta charset="UTF-8"><title>Pro Comic Generator (100% Zoom)</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 {
             --w: 1000px;
             --h: 700px;
             --tierY: 350px;
+            --gut: 5.25px;
             --r1-topX: 641.2px;
             --r1-botX: 588.2px;
             --r2L-topX: 284.2px;
             --r2L-botX: 314.2px;
             --r2R-topX: 618.2px;
             --r2R-botX: 678.2px;
         }
         body { background: #0a0a0b; 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: var(--w); height: var(--h); margin: 40px auto;
+            border: 12px solid black; position: relative; overflow: hidden;
             display: block; box-shadow: 0 0 50px rgba(0,0,0,0.5);
         }
         .panel { position: absolute; background: #000; overflow: hidden; cursor: pointer; border: 1px solid black; }
+        /* ⚡ 100% ZOOM SETTINGS ⚡ */
+        .panel img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+            position: absolute;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+        }
         /* ROW 1 */
         .p1 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(0 0, calc(var(--r1-topX) - var(--gut)) 0, calc(var(--r1-botX) - var(--gut)) var(--tierY), 0 var(--tierY)); }
         .p2 { top: 0; left: 0; width: 100%; height: var(--tierY); clip-path: polygon(calc(var(--r1-topX) + var(--gut)) 0, var(--w) 0, var(--w) var(--tierY), calc(var(--r1-botX) + var(--gut)) var(--tierY)); }
         .p4 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2L-topX) + var(--gut)) 0, calc(var(--r2R-topX) - var(--gut)) 0, calc(var(--r2R-botX) - var(--gut)) 100%, calc(var(--r2L-botX) + var(--gut)) 100%); }
         .p5 { top: calc(var(--tierY) + var(--gut)); left: 0; width: 100%; height: calc(var(--h) - var(--tierY)); clip-path: polygon(calc(var(--r2R-topX) + var(--gut)) 0, var(--w) 0, var(--w) 100%, calc(var(--r2R-botX) + var(--gut)) 100%); }
         .bubble {
             position: absolute; background: white; border: 2.5px solid black; border-radius: 25px;
             padding: 10px 18px; font-family: 'Comic Neue'; font-weight: bold; font-size: 15px;
             color: black; min-width: 110px; text-align: center; cursor: move; z-index: 100;
+            box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
         }
         .bubble::after { content: ""; position: absolute; bottom: -15px; left: 30px; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid black; }
         .bubble::before { content: ""; position: absolute; bottom: -11px; left: 31px; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 14px solid white; z-index: 2; }
         .btn-gen { background: #00d2ff; color: black; }
         .hidden { display: none; }
         .loader { border: 5px solid #333; border-top: 5px solid #00d2ff; border-radius: 50%; width: 35px; height: 35px; animation: spin 1s linear infinite; margin: 20px auto; }
     </style>
 </head>
 <body>
+    <div id="u-zone" class="setup-box">
+        <h1>🎬 Pro Comic Maker</h1>
+        <p>100% Zoom / Zero Crop Mode</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
         <label>Total Pages: </label><input type="number" id="pg" value="2" style="width:40px"><br><br>
         <button class="btn-gen" onclick="start()">🚀 GENERATE COMIC</button>
+        <div id="loading" class="hidden"><div class="loader"></div><p id="st">Working...</p></div>
     </div>
     <div id="editor-zone" class="hidden">
         <div id="output"></div>
         <div class="controls">
             <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>
             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('u-zone').classList.add('hidden');
         document.getElementById('editor-zone').classList.remove('hidden');
         const out = document.getElementById('output');
         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: 3});
+            const l = document.createElement('a'); l.download='ComicPage.png'; l.href=url; l.click();
         }
     }
 </script>