Hugging Face's logo

Spaces:
tester343
/
Test
Paused

App Files Community
tester343 commited on
Commit
aad63bb
·
verified ·
1 Parent(s): aca0dff

Update app_enhanced.py

Browse files
Files changed (1) hide show
  1. app_enhanced.py +54 -50
app_enhanced.py CHANGED
@@ -63,7 +63,6 @@ def generate_comic_gpu(video_path, user_dir, frames_dir, metadata_path, target_p
63
  duration = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) / fps
64
  cap.release()
65
 
66
- # Subtitles logic
67
  user_srt = os.path.join(user_dir, 'subs.srt')
68
  try:
69
  get_real_subtitles(video_path)
@@ -155,7 +154,7 @@ def uploader():
155
  def task():
156
  try:
157
  with open(os.path.join(o_dir, 'status.json'), 'w') as f:
158
- json.dump({'message': 'Generating Tilted Geometry...', 'progress': 30}, f)
159
  data = generate_comic_gpu(vid_p, u_dir, f_dir, os.path.join(f_dir, 'meta.json'), pages)
160
  with open(os.path.join(o_dir, 'pages.json'), 'w') as f: json.dump(data, f)
161
  with open(os.path.join(o_dir, 'status.json'), 'w') as f:
@@ -181,34 +180,34 @@ def get_frame(sid, filename): return send_from_directory(os.path.join(BASE_USER_
181
  def get_output(sid, filename): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
182
 
183
  # ======================================================
184
- # 🌐 UI TEMPLATE (Hindi Text Template Integration)
185
  # ======================================================
186
  INDEX_HTML = '''
187
- <!DOCTYPE html><html lang="hi">
188
  <head>
189
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
190
- <title>🎬 एआई कॉमिक जेनरेटर — टेक्स्ट-ओनली स्टाइल</title>
191
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
192
- <link href="https://fonts.googleapis.com/css2?family=Mukta:wght@400;700;800&family=Noto+Sans+Devanagari:wght@400;700&display=swap" rel="stylesheet">
193
  <style>
194
  :root {
195
  --bg: #ffffff;
196
  --ink: #111;
197
  --border: #111;
198
- --panel-bg: #fff;
199
- --textbox-bg: #f7f7f7;
200
  --slant: 40px;
201
- --gutter: 15px;
202
  }
203
 
204
  * { box-sizing: border-box; }
205
  body {
206
  margin: 0; background: var(--bg); color: var(--ink);
207
- font-family: "Noto Sans Devanagari", "Mukta", sans-serif;
208
  line-height: 1.5;
209
  }
210
 
211
- /* Hindi Template Header Style */
212
  .comic-header {
213
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
214
  align-items: center; padding: 16px; border-bottom: 3px solid var(--border);
@@ -217,79 +216,84 @@ INDEX_HTML = '''
217
  .logo {
218
  width: 64px; height: 64px; border: 3px solid var(--border);
219
  border-radius: 8px; display: grid; place-items: center;
220
- font-weight: 800; font-size: 14px; text-transform: uppercase;
221
  }
222
- .title { font-weight: 800; font-size: clamp(20px, 4vw, 32px); }
223
- .subtitle { font-size: 14px; color: #555; margin-top: 4px; }
224
 
225
  /* Setup View */
226
- .setup-container { max-width: 500px; margin: 60px auto; padding: 30px; border: 3px solid var(--border); border-radius: 12px; text-align: center; }
227
- input[type="file"] { margin: 20px 0; }
228
- .btn-main { background: var(--ink); color: #fff; border: none; padding: 12px 24px; font-weight: 700; border-radius: 6px; cursor: pointer; font-size: 16px; }
229
 
230
- /* ⚡ THE ACCURATE GEOMETRIC CANVAS ⚡ */
231
- .comic-canvas { max-width: 1100px; margin: 40px auto; padding: 16px; }
232
 
233
  .comic-page {
234
- background: white; width: 1000px; height: 720px; margin: 40px auto;
235
- border: 10px solid var(--border); padding: 15px; box-sizing: border-box;
236
  display: grid; gap: var(--gutter);
237
  grid-template-columns: repeat(6, 1fr);
238
- grid-template-rows: 1.3fr 1fr;
239
  position: relative; overflow: hidden;
240
- box-shadow: 10px 10px 0 rgba(0,0,0,0.05);
241
  }
242
 
243
- .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 4px solid var(--border); }
244
  .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; pointer-events: none; }
245
 
246
- /* Slanted Polygons - 100% Accuracy */
247
  .panel:nth-child(1) { grid-column: span 4; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
248
  .panel:nth-child(2) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
249
  .panel:nth-child(3) { grid-column: span 2; clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%); }
250
  .panel:nth-child(4) { grid-column: span 2; clip-path: polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, var(--slant) 100%); }
251
  .panel:nth-child(5) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, var(--slant) 100%); }
252
 
253
- .panel.selected { outline: 8px solid #2ecc71; z-index: 5; }
254
 
255
- /* Bubble Style - Text-box style from template */
256
  .bubble {
257
- position: absolute; background: var(--textbox-bg); border: 2px solid var(--border); border-radius: 6px;
258
- padding: 8px 12px; font-weight: 600; font-size: 14px;
259
- color: var(--ink); min-width: 100px; text-align: center; cursor: move; z-index: 10;
260
- box-shadow: 3px 3px 0 rgba(0,0,0,0.1);
261
  }
262
 
263
- .controls { position: fixed; bottom: 20px; right: 20px; background: #fff; border: 3px solid var(--border); padding: 20px; border-radius: 12px; width: 250px; z-index: 2000; }
264
  .hidden { display: none; }
265
- .loader { border: 4px solid #f3f3f3; border-top: 4px solid var(--ink); border-radius: 50%; width: 30px; height: 30px; animation: spin 1s linear infinite; margin: 10px auto; }
266
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
 
 
 
267
  </style>
268
  </head>
269
  <body>
270
  <header class="comic-header">
271
- <div class="logo">कॉमिक</div>
272
  <div>
273
- <div class="title" id="page-main-title">एआई कॉमिक जेनरेटर</div>
274
- <div class="subtitle">परफेक्ट टिल्टेड ज्योमेट्री (हिंदी टेम्पलेट स्टाइल)</div>
275
  </div>
276
  </header>
277
 
278
  <div id="upload-zone" class="setup-container">
279
- <h2>वीडियो अपलोड करें</h2>
280
- <input type="file" id="vid" accept="video/mp4"><br>
281
- <label>कुल पृष्ठ: </label><input type="number" id="pg" value="2" style="width:50px"><br><br>
282
- <button class="btn-main" onclick="start()">🚀 कॉमिक बनाएँ</button>
283
- <div id="loading" class="hidden"><div class="loader"></div><p id="st">तैयार हो रहा है...</p></div>
 
 
284
  </div>
285
 
286
  <div id="editor-zone" class="hidden">
287
  <main class="comic-canvas" id="output"></main>
288
  <div class="controls">
289
- <h4 style="margin:0 0 10px 0">एडिटर टूल्स</h4>
290
- <button class="btn-main" style="width:100%; margin-bottom:8px" onclick="addB()">💬 टेक्स्ट जोड़ें</button>
291
- <button class="btn-main" style="width:100%; background:#2980b9" onclick="exportPNG()">📥 पीएनजी डाउनलोड</button>
292
- <button class="btn-main" style="width:100%; background:#7f8c8d; margin-top:10px" onclick="location.reload()">🏠 रिसेट</button>
293
  </div>
294
  </div>
295
 
@@ -299,13 +303,13 @@ INDEX_HTML = '''
299
 
300
  async function start() {
301
  const f = document.getElementById('vid').files[0];
302
- if(!f) return alert("वीडियो चुनें!");
303
  document.getElementById('loading').classList.remove('hidden');
304
  const fd = new FormData(); fd.append('file', f); fd.append('pages', document.getElementById('pg').value);
305
  await fetch(`/uploader?sid=${sid}`, {method: 'POST', body: fd});
306
  const itv = setInterval(async () => {
307
  const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
308
- document.getElementById('st').innerText = d.message;
309
  if(d.progress >= 100) { clearInterval(itv); load(); }
310
  }, 2000);
311
  }
@@ -315,7 +319,7 @@ INDEX_HTML = '''
315
  document.getElementById('upload-zone').classList.add('hidden');
316
  document.getElementById('editor-zone').classList.remove('hidden');
317
  const out = document.getElementById('output');
318
- pages.forEach((p, idx) => {
319
  const pgDiv = document.createElement('div'); pgDiv.className = 'comic-page';
320
  p.panels.forEach((pan, i) => {
321
  const pDiv = document.createElement('div'); pDiv.className = 'panel';
@@ -338,11 +342,11 @@ INDEX_HTML = '''
338
  document.onmousemove = (ev) => { b.style.left=(ev.clientX-ox)+'px'; b.style.top=(ev.clientY-oy)+'px'; };
339
  document.onmouseup = () => { document.onmousemove = null; };
340
  };
341
- b.ondblclick = () => { let n = prompt("टेक्स्ट बदलें:", b.innerText); if(n) b.innerText = n; };
342
  return b;
343
  }
344
 
345
- function addB() { if(selP) selP.appendChild(createB("नया टेक्स्ट", 60, 60)); else alert("पहले एक पैनल चुनें!"); }
346
 
347
  async function exportPNG() {
348
  const pgs = document.querySelectorAll('.comic-page');
 
63
  duration = int(cap.get(cv2.CAP_PROP_FRAME_COUNT)) / fps
64
  cap.release()
65
 
 
66
  user_srt = os.path.join(user_dir, 'subs.srt')
67
  try:
68
  get_real_subtitles(video_path)
 
154
  def task():
155
  try:
156
  with open(os.path.join(o_dir, 'status.json'), 'w') as f:
157
+ json.dump({'message': 'Generating Geometry...', 'progress': 30}, f)
158
  data = generate_comic_gpu(vid_p, u_dir, f_dir, os.path.join(f_dir, 'meta.json'), pages)
159
  with open(os.path.join(o_dir, 'pages.json'), 'w') as f: json.dump(data, f)
160
  with open(os.path.join(o_dir, 'status.json'), 'w') as f:
 
180
  def get_output(sid, filename): return send_from_directory(os.path.join(BASE_USER_DIR, sid, 'output'), filename)
181
 
182
  # ======================================================
183
+ # 🌐 UI TEMPLATE (English + Minimal Gutter)
184
  # ======================================================
185
  INDEX_HTML = '''
186
+ <!DOCTYPE html><html lang="en">
187
  <head>
188
  <meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
189
+ <title>AI Comic Generator — Pro Minimalist Style</title>
190
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html-to-image/1.11.11/html-to-image.min.js"></script>
191
+ <link href="https://fonts.googleapis.com/css2?family=Lato:wght@400;700;900&display=swap" rel="stylesheet">
192
  <style>
193
  :root {
194
  --bg: #ffffff;
195
  --ink: #111;
196
  --border: #111;
197
+ --panel-bg: #000;
198
+ --textbox-bg: #f8f9fa;
199
  --slant: 40px;
200
+ --gutter: 4px; /* MINIMAL GAP AS REQUESTED */
201
  }
202
 
203
  * { box-sizing: border-box; }
204
  body {
205
  margin: 0; background: var(--bg); color: var(--ink);
206
+ font-family: "Lato", sans-serif;
207
  line-height: 1.5;
208
  }
209
 
210
+ /* Header Style */
211
  .comic-header {
212
  display: grid; grid-template-columns: 64px 1fr; gap: 12px;
213
  align-items: center; padding: 16px; border-bottom: 3px solid var(--border);
 
216
  .logo {
217
  width: 64px; height: 64px; border: 3px solid var(--border);
218
  border-radius: 8px; display: grid; place-items: center;
219
+ font-weight: 900; font-size: 12px; text-transform: uppercase; text-align: center;
220
  }
221
+ .title { font-weight: 900; font-size: clamp(20px, 4vw, 32px); letter-spacing: -0.5px; }
222
+ .subtitle { font-size: 14px; color: #666; font-weight: 700; margin-top: 2px; }
223
 
224
  /* Setup View */
225
+ .setup-container { max-width: 500px; margin: 60px auto; padding: 40px; border: 3px solid var(--border); border-radius: 15px; text-align: center; }
226
+ .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; }
227
+ .btn-main:hover { background: #333; transform: translateY(-2px); }
228
 
229
+ /* ⚡ THE PERFECT MINIMAL GAP CANVAS ⚡ */
230
+ .comic-canvas { max-width: 1100px; margin: 40px auto; padding: 10px; }
231
 
232
  .comic-page {
233
+ background: white; width: 1000px; height: 750px; margin: 40px auto;
234
+ border: 10px solid var(--border); padding: 5px; box-sizing: border-box;
235
  display: grid; gap: var(--gutter);
236
  grid-template-columns: repeat(6, 1fr);
237
+ grid-template-rows: 1.35fr 1fr;
238
  position: relative; overflow: hidden;
239
+ box-shadow: 15px 15px 0 rgba(0,0,0,0.05);
240
  }
241
 
242
+ .panel { position: relative; background: #000; overflow: hidden; cursor: pointer; border: 2px solid var(--border); }
243
  .panel img { width: 115%; height: 115%; object-fit: cover; position: absolute; top: -7.5%; left: -7.5%; object-position: center 15%; pointer-events: none; }
244
 
245
+ /* High-Precision Slants */
246
  .panel:nth-child(1) { grid-column: span 4; clip-path: polygon(0 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%); }
247
  .panel:nth-child(2) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, 0 100%); }
248
  .panel:nth-child(3) { grid-column: span 2; clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, 0 100%); }
249
  .panel:nth-child(4) { grid-column: span 2; clip-path: polygon(var(--slant) 0, calc(100% - var(--slant)) 0, 100% 100%, var(--slant) 100%); }
250
  .panel:nth-child(5) { grid-column: span 2; clip-path: polygon(var(--slant) 0, 100% 0, 100% 100%, var(--slant) 100%); }
251
 
252
+ .panel.selected { outline: 8px solid #3498db; z-index: 5; }
253
 
254
+ /* Bubble Style - Pro Textbox */
255
  .bubble {
256
+ position: absolute; background: #fff; border: 2.5px solid var(--border); border-radius: 4px;
257
+ padding: 10px 14px; font-weight: 700; font-size: 14px;
258
+ color: var(--ink); min-width: 120px; text-align: center; cursor: move; z-index: 10;
259
+ box-shadow: 4px 4px 0 rgba(0,0,0,1);
260
  }
261
 
262
+ .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); }
263
  .hidden { display: none; }
264
+ .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; }
265
  @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
266
+
267
+ label { font-weight: 900; display: block; margin-bottom: 5px; font-size: 12px; text-transform: uppercase; }
268
+ input[type="number"] { padding: 8px; border: 2px solid #ddd; border-radius: 6px; width: 60px; font-weight: 700; }
269
  </style>
270
  </head>
271
  <body>
272
  <header class="comic-header">
273
+ <div class="logo">AI<br>COMIC</div>
274
  <div>
275
+ <div class="title">AI Comic Generator</div>
276
+ <div class="subtitle">Geometric Perfection — English Pro Template</div>
277
  </div>
278
  </header>
279
 
280
  <div id="upload-zone" class="setup-container">
281
+ <h2>Generate Your Comic</h2>
282
+ <p style="color:#666">Upload MP4 video to start extraction</p>
283
+ <input type="file" id="vid" accept="video/mp4"><br><br>
284
+ <label>Number of Pages</label>
285
+ <input type="number" id="pg" value="2" min="1" max="10"><br><br>
286
+ <button class="btn-main" onclick="start()">🚀 Generate Now</button>
287
+ <div id="loading" class="hidden"><div class="loader"></div><p id="st" style="font-weight:700">Warming up GPU...</p></div>
288
  </div>
289
 
290
  <div id="editor-zone" class="hidden">
291
  <main class="comic-canvas" id="output"></main>
292
  <div class="controls">
293
+ <h4 style="margin:0 0 15px 0; text-transform:uppercase; letter-spacing:1px;">Editor Tools</h4>
294
+ <button class="btn-main" style="width:100%; margin-bottom:10px" onclick="addB()">➕ Add Text Box</button>
295
+ <button class="btn-main" style="width:100%; background:#2980b9" onclick="exportPNG()">📥 Download PNG</button>
296
+ <button class="btn-main" style="width:100%; background:#e74c3c; margin-top:15px; font-size:12px;" onclick="location.reload()">🏠 Start Over</button>
297
  </div>
298
  </div>
299
 
 
303
 
304
  async function start() {
305
  const f = document.getElementById('vid').files[0];
306
+ if(!f) return alert("Please select a video file.");
307
  document.getElementById('loading').classList.remove('hidden');
308
  const fd = new FormData(); fd.append('file', f); fd.append('pages', document.getElementById('pg').value);
309
  await fetch(`/uploader?sid=${sid}`, {method: 'POST', body: fd});
310
  const itv = setInterval(async () => {
311
  const r = await fetch(`/status?sid=${sid}`); const d = await r.json();
312
+ document.getElementById('st').innerText = d.message || "Processing...";
313
  if(d.progress >= 100) { clearInterval(itv); load(); }
314
  }, 2000);
315
  }
 
319
  document.getElementById('upload-zone').classList.add('hidden');
320
  document.getElementById('editor-zone').classList.remove('hidden');
321
  const out = document.getElementById('output');
322
+ pages.forEach((p) => {
323
  const pgDiv = document.createElement('div'); pgDiv.className = 'comic-page';
324
  p.panels.forEach((pan, i) => {
325
  const pDiv = document.createElement('div'); pDiv.className = 'panel';
 
342
  document.onmousemove = (ev) => { b.style.left=(ev.clientX-ox)+'px'; b.style.top=(ev.clientY-oy)+'px'; };
343
  document.onmouseup = () => { document.onmousemove = null; };
344
  };
345
+ b.ondblclick = () => { let n = prompt("Edit Text:", b.innerText); if(n) b.innerText = n; };
346
  return b;
347
  }
348
 
349
+ function addB() { if(selP) selP.appendChild(createB("Enter Dialogue", 60, 60)); else alert("Please select a panel first!"); }
350
 
351
  async function exportPNG() {
352
  const pgs = document.querySelectorAll('.comic-page');