Test

Paused

App Files Files Community

tester343 commited on 14 days ago

Commit

49ec187

verified ·

1 Parent(s): aad63bb

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +92 -94

app_enhanced.py CHANGED Viewed

@@ -29,7 +29,7 @@ BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 # ======================================================
-# 🔧 UTILS
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
@@ -49,6 +49,7 @@ def sanitize_json(obj):
 # ======================================================
 @spaces.GPU(duration=300)
 def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_pages):
     import cv2
     import srt
     import numpy as np
@@ -60,9 +61,11 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
     cap = cv2.VideoCapture(video_path)
     fps = cap.get(cv2.CAP_PROP_FPS) or 25
-    duration = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) / fps
     cap.release()
     user_srt = os.path.join(user_dir, 'subs.srt')
     try:
         get_real_subtitles(video_path)
@@ -74,6 +77,7 @@ 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 = []
     panels_per_page = 5
     target_pages = int(target_pages)
     total_needed = target_pages * panels_per_page
@@ -88,6 +92,7 @@ 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]
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
@@ -102,10 +107,13 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
             frame_files.append(fname)
     cap.release()
-    with open(metadata_path, 'w') as f: json.dump(sanitize_json(frame_metadata), f)
     try: black_bar_crop()
     except: pass
     se = SimpleColorEnhancer()
     pages_data = []
     for p_idx in range(target_pages):
@@ -154,7 +162,7 @@ def uploader():
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
-                json.dump({'message': 'Generating Geometry...', '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:
@@ -174,126 +182,116 @@ def status():
     return 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)
 @app.route('/output/<sid>/<path:filename>')
-def get_output(sid, filename): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 # ======================================================
-# 🌐 UI TEMPLATE (English + Minimal Gutter)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
-    <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
-    <title>AI Comic Generator — Pro Minimalist Style</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=Lato:wght@400;700;900&display=swap" rel="stylesheet">
     <style>
-        :root {
-            --bg: #ffffff;
-            --ink: #111;
-            --border: #111;
-            --panel-bg: #000;
-            --textbox-bg: #f8f9fa;
             --slant: 40px;
-            --gutter: 4px; /* MINIMAL GAP AS REQUESTED */
-        }
-        * { box-sizing: border-box; }
-        body {
-            margin: 0; background: var(--bg); color: var(--ink);
-            font-family: "Lato", sans-serif;
-            line-height: 1.5;
-        }
-        /* Header Style */
-        .comic-header {
-            display: grid; grid-template-columns: 64px 1fr; gap: 12px;
-            align-items: center; padding: 16px; border-bottom: 3px solid var(--border);
-            background: #fff; position: sticky; top: 0; z-index: 1000;
         }
-        .logo {
-            width: 64px; height: 64px; border: 3px solid var(--border);
-            border-radius: 8px; display: grid; place-items: center;
-            font-weight: 900; font-size: 12px; text-transform: uppercase; text-align: center;
-        }
-        .title { font-weight: 900; font-size: clamp(20px, 4vw, 32px); letter-spacing: -0.5px; }
-        .subtitle { font-size: 14px; color: #666; font-weight: 700; margin-top: 2px; }
-        /* Setup View */
-        .setup-container { max-width: 500px; margin: 60px auto; padding: 40px; border: 3px solid var(--border); border-radius: 15px; text-align: center; }
-        .btn-main { background: var(--ink); color: #fff; border: none; padding: 14px 28px; font-weight: 900; border-radius: 8px; cursor: pointer; font-size: 16px; transition: 0.2s; }
-        .btn-main:hover { background: #333; transform: translateY(-2px); }
-        /* ⚡ THE PERFECT MINIMAL GAP CANVAS ⚡ */
-        .comic-canvas { max-width: 1100px; margin: 40px auto; padding: 10px; }
         .comic-page {
-            background: white; width: 1000px; height: 750px; margin: 40px auto;
-            border: 10px solid var(--border); 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;
-            box-shadow: 15px 15px 0 rgba(0,0,0,0.05);
         }
-        .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 2px solid var(--border); }
-        .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; pointer-events: none; }
-        /* High-Precision Slants */
-        .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 #3498db; z-index: 5; }
-        /* Bubble Style - Pro Textbox */
         .bubble {
-            position: absolute; background: #fff; border: 2.5px solid var(--border); border-radius: 4px;
-            padding: 10px 14px; font-weight: 700; font-size: 14px;
-            color: var(--ink); min-width: 120px; text-align: center; cursor: move; z-index: 10;
-            box-shadow: 4px 4px 0 rgba(0,0,0,1);
         }
-        .controls { position: fixed; bottom: 20px; right: 20px; background: #fff; border: 4px solid var(--border); padding: 25px; border-radius: 15px; width: 260px; z-index: 2000; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
         .hidden { display: none; }
-        .loader { border: 5px solid #f3f3f3; border-top: 5px solid var(--ink); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin: 15px auto; }
         @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-        label { font-weight: 900; display: block; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; }
-        input[type="number"] { padding: 8px; border: 2px solid #ddd; border-radius: 6px; width: 60px; font-weight: 700; }
     </style>
 </head>
 <body>
-    <header class="comic-header">
-        <div class="logo">AI<br>COMIC</div>
-        <div>
-            <div class="title">AI Comic Generator</div>
-            <div class="subtitle">Geometric Perfection — English Pro Template</div>
-        </div>
-    </header>
-    <div id="upload-zone" class="setup-container">
-        <h2>Generate Your Comic</h2>
-        <p style="color:#666">Upload MP4 video to start extraction</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
-        <label>Number of Pages</label>
-        <input type="number" id="pg" value="2" min="1" max="10"><br><br>
-        <button class="btn-main" onclick="start()">🚀 Generate Now</button>
-        <div id="loading" class="hidden"><div class="loader"></div><p id="st" style="font-weight:700">Warming up GPU...</p></div>
     </div>
     <div id="editor-zone" class="hidden">
-        <main class="comic-canvas" id="output"></main>
         <div class="controls">
-            <h4 style="margin:0 0 15px 0; text-transform:uppercase; letter-spacing:1px;">Editor Tools</h4>
-            <button class="btn-main" style="width:100%; margin-bottom:10px" onclick="addB()">➕ Add Text Box</button>
-            <button class="btn-main" style="width:100%; background:#2980b9" onclick="exportPNG()">📥 Download PNG</button>
-            <button class="btn-main" style="width:100%; background:#e74c3c; margin-top:15px; font-size:12px;" onclick="location.reload()">🏠 Start Over</button>
         </div>
     </div>
@@ -303,7 +301,7 @@ INDEX_HTML = '''
     async function start() {
         const f = document.getElementById('vid').files[0];
-        if(!f) return alert("Please select a video file.");
         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});
@@ -319,7 +317,7 @@ INDEX_HTML = '''
         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';
@@ -335,24 +333,24 @@ INDEX_HTML = '''
     function createB(txt, x, y) {
         const b = document.createElement('div'); b.className = 'bubble';
-        b.innerText = txt || '...'; b.style.left = x+'px'; b.style.top = y+'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("Please 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='Comic_Page.png'; l.href=url; l.click();
         }
     }
 </script>

 os.makedirs(BASE_USER_DIR, exist_ok=True)
 # ======================================================
+# 🔧 JSON SANITIZER (FIX FOR int64 ERROR)
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
 # ======================================================
 @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
     import cv2
     import srt
     import numpy as np
     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()
+    # 1. Subtitles
     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 = []
+    # 2. Logic for 5 Panels Per Page
     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]
+    # 3. Frame Extraction
     frame_metadata = {}
     cap = cv2.VideoCapture(video_path)
     frame_files = []
             frame_files.append(fname)
     cap.release()
+    with open(metadata_path, 'w') as f:
+        json.dump(sanitize_json(frame_metadata), f)
     try: black_bar_crop()
     except: pass
+    # 4. Enhance & Assemble
     se = SimpleColorEnhancer()
     pages_data = []
     for p_idx in range(target_pages):
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
+                json.dump({'message': 'Drafting Perfect Geometry...', '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:
     return 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)
 @app.route('/output/<sid>/<path:filename>')
+def get_output(sid, filename):
+    return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 # ======================================================
+# 🌐 UI HTML (MINIMAL GAP + ENGLISH UI)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
+    <meta charset="UTF-8"><title>Pro AI 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: 2px; /* RAZOR THIN GAP AS REQUESTED */
+            --border-panel: 3px;
+            --border-page: 10px;
         }
+        body { background: #111; 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; }
+        /* ⚡ THE PIXEL-PERFECT ASYMMETRICAL TEMPLATE ⚡ */
         .comic-page {
+            background: white; width: 1000px; height: 720px; 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: var(--border-panel) solid black; }
+        .panel img { width: 118%; height: 118%; object-fit: cover; position: absolute; top: -9%; left: -9%; object-position: center 15%; pointer-events: none; }
+        /* ROW 1: Slant LEFT \ (Panel 1 Wide, Panel 2 Narrow) */
+        .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: Slant RIGHT / (Three equal action panels) */
+        .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 #3498db; z-index: 5; filter: brightness(1.1); }
+        /* BUBBLE STYLING - PRECISE WHITE CAPSULE */
         .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;
+            box-shadow: 4px 4px 0 rgba(0,0,0,0.1);
+        }
+        .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 #e67e22; 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>🎬 AI Comic Maker</h1>
+        <p>Ultra-Minimal Gap Geometry</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:#e67e22; color:white;">Generate Comic</button>
+        <div id="loading" class="hidden"><div class="loader"></div><p id="st">Acquiring GPU...</p></div>
     </div>
     <div id="editor-zone" class="hidden">
+        <div id="output"></div>
         <div class="controls">
+            <h4 style="margin:0; color:white;">Interactive 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:#555; color:white;">🏠 Reset</button>
         </div>
     </div>
     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});
         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';
     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("New Text", 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='ComicPage.png'; l.href=url; l.click();
         }
     }
 </script>