Test

Runtime error

App Files Files Community

tester343 commited on about 1 month ago

Commit

49ec272

verified ·

1 Parent(s): 76cfb00

Update app_enhanced.py

Browse files

Files changed (1) hide show

app_enhanced.py +36 -39

app_enhanced.py CHANGED Viewed

@@ -1,8 +1,3 @@
 import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
 import os
 import time
@@ -34,7 +29,7 @@ BASE_USER_DIR = os.path.join(BASE_STORAGE_PATH, "userdata")
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 # ======================================================
-# 🔧 JSON SANITIZER (FIX FOR int64 ERROR)
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
@@ -147,7 +142,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__)
@@ -167,7 +162,7 @@ def uploader():
     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:
@@ -195,39 +190,39 @@ 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%);
@@ -237,7 +232,7 @@ INDEX_HTML = '''
             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%);
@@ -251,19 +246,19 @@ INDEX_HTML = '''
             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;
@@ -273,30 +268,31 @@ INDEX_HTML = '''
         }
         .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>
@@ -314,6 +310,7 @@ INDEX_HTML = '''
             const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
             document.getElementById('st').innerText = d.message || "Processing...";
             if(d.progress >= 100) { clearInterval(itv); load(); }
         }, 2000);
     }
@@ -345,17 +342,17 @@ INDEX_HTML = '''
             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>

 import spaces  # <--- CRITICAL: MUST BE THE FIRST IMPORT
 import os
 import time
 os.makedirs(BASE_USER_DIR, exist_ok=True)
 # ======================================================
+# 🔧 JSON SANITIZER (FIX FOR int64 SERIALIZATION ERROR)
 # ======================================================
 def sanitize_json(obj):
     if isinstance(obj, dict):
     return sanitize_json(pages_data)
 # ======================================================
+# 🔧 APP ENGINE
 # ======================================================
 app = Flask(__name__)
     def task():
         try:
             with open(os.path.join(o_dir, 'status.json'), 'w') as f:
+                json.dump({'message': 'Generating Hairline 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 send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
 # ======================================================
+# 🌐 UI HTML (HAIRLINE GAP + ENGLISH UI)
 # ======================================================
 INDEX_HTML = '''
 <!DOCTYPE html><html lang="en">
 <head>
+    <meta charset="UTF-8"><title>Elite 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: 38px;
+            --gutter: 0.7px; /* ULTRA THIN HAIRLINE GAP (3x smaller) */
+            --page-border: 12px;
+            --panel-ink: 1.5px; /* Razor thin panel border */
         }
+        body { background: #0a0a0a; font-family: 'Lato', sans-serif; margin: 0; padding: 20px; color: white; }
+        .setup-box { max-width: 450px; margin: 80px auto; background: white; padding: 45px; border-radius: 12px; color: black; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
+        /* ⚡ THE HAIRLINE ASYMMETRICAL TEMPLATE ⚡ */
         .comic-page {
             background: white; width: 1000px; height: 720px; margin: 40px auto;
+            border: var(--page-border) solid black; padding: 4px; 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(--panel-ink) solid black; }
+        .panel img { width: 116%; height: 116%; object-fit: cover; position: absolute; top: -8%; left: -8%; object-position: center 15%; pointer-events: none; }
+        /* ROW 1: Precise Parallel Slant LEFT \ */
         .panel:nth-child(1) {
             grid-column: span 4;
             clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
             clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%);
         }
+        /* ROW 2: Precise Parallel Slant RIGHT / */
         .panel:nth-child(3) {
             grid-column: span 2;
             clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%);
             clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, var(--slant) 100%);
         }
+        .panel.selected { outline: 6px solid #00f2fe; z-index: 5; filter: brightness(1.1); }
+        /* BUBBLE STYLING - ELITE CAPSULE */
         .bubble {
+            position: absolute; background: white; border: 2.2px 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: 3px 3px 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: 18px solid black;
         }
         .bubble::before {
             content: ""; position: absolute; bottom: -13px; left: 31px;
         }
         .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; transition: 0.2s; }
+        button:hover { opacity: 0.8; transform: scale(1.02); }
         .hidden { display: none; }
+        .loader { border: 5px solid #333; border-top: 5px solid #00f2fe; 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>Hairline Gutters & Parallel Geometry</p>
         <input type="file" id="vid" accept="video/mp4"><br><br>
+        <label>Number of Pages: </label><input type="number" id="pg" value="2" style="width:50px">
         <br><br>
+        <button onclick="start()" style="background:#00f2fe; color:black; font-size:16px;">🚀 GENERATE COMIC</button>
+        <div id="loading" class="hidden"><div class="loader"></div><p id="st">Processing Frames...</p></div>
     </div>
     <div id="editor-zone" class="hidden">
         <div id="output"></div>
         <div class="controls">
+            <h4 style="margin:0; color:#00f2fe;">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>
             const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
             document.getElementById('st').innerText = d.message || "Processing...";
             if(d.progress >= 100) { clearInterval(itv); load(); }
+            if(d.progress < 0) { clearInterval(itv); alert("GPU Error. Restarting."); location.reload(); }
         }, 2000);
     }
             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 Dialogue:", b.innerText); if(n) b.innerText = n; };
         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: 2});
+            const l = document.createElement('a'); l.download='Elite_Comic_Page.png'; l.href=url; l.click();
         }
     }
 </script>