Hugging Face's logo

Spaces:
moonlantern1
/
clipforge
Sleeping

App Files Community
moonlantern1 commited on
Commit
de96259
·
verified ·
1 Parent(s): 468d2a3

Polish Humeo branding and hide logs UI

Browse files
Files changed (1) hide show
  1. app.py +4 -16
app.py CHANGED
@@ -40,7 +40,7 @@ from humeo.config import PipelineConfig
40
  from humeo.pipeline import run_pipeline
41
 
42
 
43
- APP_TITLE = "ClipForge"
44
  LOG_FORMAT = "%(asctime)s | %(levelname)-7s | %(name)s | %(message)s"
45
  MAX_LOG_LINES = 700
46
  LLM_KEY_NAMES = ("GOOGLE_API_KEY", "GEMINI_API_KEY", "OPENROUTER_API_KEY")
@@ -531,7 +531,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
531
  <head>
532
  <meta charset="UTF-8">
533
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
534
- <title>ClipForge - Video to Clips</title>
535
  <link rel="preconnect" href="https://fonts.googleapis.com">
536
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
537
  <style>
@@ -648,8 +648,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
648
  .nav-new-session { display:none; padding:7px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--ink); font-family:'DM Sans', sans-serif; font-size:0.76rem; cursor:pointer; transition:all 0.15s; }
649
  .nav-new-session:hover { background:var(--champagne); border-color:var(--gold); }
650
  .nav-new-session.show { display:inline-flex; }
651
- .log-panel { display:none; margin-top:24px; background:var(--ink); color:var(--cream); border-radius:12px; padding:14px; font:12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space:pre-wrap; max-height:240px; overflow:auto; text-align:left; }
652
- .log-panel.open { display:block; }
653
  @media (max-width: 600px) { nav { padding: 16px 20px; } .input-card { padding: 24px 20px; } #screen-processing { padding: 32px 16px 60px; } .pipeline { padding: 20px 16px; } .job-status-card { flex-direction: column; align-items: stretch; } .job-actions { justify-content: flex-start; } .clips-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .regen-section { padding: 22px 18px; } .regen-btn { width: 100%; margin-left: 0; } .regen-row { flex-direction: column; align-items: flex-start; } .nav-new-session { padding:7px 10px; } }
654
  .thumb-1 { background: linear-gradient(135deg, #D4A96A 0%, #8B5E3C 100%); } .thumb-2 { background: linear-gradient(135deg, #7A9E8A 0%, #3D6650 100%); }
655
  .thumb-3 { background: linear-gradient(135deg, #9E8A7A 0%, #5C3E2E 100%); } .thumb-4 { background: linear-gradient(135deg, #8A7A9E 0%, #4A3866 100%); }
@@ -662,7 +660,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
662
  </head>
663
  <body>
664
  <nav>
665
- <div class="logo">Clip<span>Forge</span></div>
666
  <div class="nav-right">
667
  <div class="nav-status" id="nav-status">Processing...</div>
668
  <button class="nav-new-session" id="new-session-btn" type="button" onclick="startNewSession()">New session</button>
@@ -703,7 +701,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
703
  </div>
704
  <div class="job-actions">
705
  <button class="job-action-btn" onclick="manualReconnect()">Reconnect</button>
706
- <button class="job-action-btn" onclick="toggleLogs()">Logs</button>
707
  </div>
708
  </div>
709
  <div class="pipeline" id="pipeline">
@@ -714,7 +711,7 @@ INDEX_HTML = r"""<!DOCTYPE html>
714
  <div class="pipeline-step" id="step-4"><div class="step-icon">Edit</div><div class="step-content"><div class="step-name">Adding subtitles &amp; light edits <span class="step-pct" id="pct-4"></span></div><div class="progress-track"><div class="progress-fill" id="fill-4"></div></div></div></div>
715
  </div>
716
  <div class="tips-section" id="tips-section">
717
- <div class="tips-label">Tips while you wait</div>
718
  <div class="tip-card"><span class="tip-dot">◆</span> Clips are automatically trimmed around the strongest hook.</div>
719
  <div class="tip-card"><span class="tip-dot">◆</span> The system can pick centered speaker or split presentation layout per clip.</div>
720
  <div class="tip-card"><span class="tip-dot">◆</span> Word-by-word subtitles are added by default.</div>
@@ -737,7 +734,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
737
  <button class="regen-btn" onclick="triggerRegen()">Regenerate Clips -></button>
738
  </div>
739
  </div>
740
- <pre class="log-panel" id="log-panel"></pre>
741
  </div>
742
  <div class="modal-overlay" id="modal" onclick="closeModal(event)">
743
  <div class="modal-box">
@@ -799,8 +795,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
799
  document.getElementById('job-id-label').textContent = 'Job pending';
800
  setPollStatus('Waiting for updates');
801
  document.getElementById('processing-sub').textContent = 'Sit back - long videos can take a little while';
802
- document.getElementById('log-panel').textContent = '';
803
- document.getElementById('log-panel').classList.remove('open');
804
  document.getElementById('clips-grid').innerHTML = '';
805
  document.getElementById('clips-section').style.display = 'none';
806
  document.getElementById('clips-sub-text').textContent = 'Tap any clip to preview';
@@ -831,10 +825,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
831
  }
832
  }
833
 
834
- function toggleLogs() {
835
- document.getElementById('log-panel').classList.toggle('open');
836
- }
837
-
838
  function manualReconnect() {
839
  if (currentJobId) {
840
  pollJob(currentJobId, { immediate: true });
@@ -965,7 +955,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
965
  document.getElementById('nav-status').textContent = job.nav_status || 'Processing...';
966
  document.getElementById('new-session-btn').classList.toggle('show', Boolean(job.done));
967
  document.getElementById('processing-sub').textContent = job.error ? job.error : job.status;
968
- document.getElementById('log-panel').textContent = job.logs || '';
969
  (job.steps || []).forEach((step, i) => {
970
  const el = document.getElementById(`step-${i}`);
971
  const fill = document.getElementById(`fill-${i}`);
@@ -994,7 +983,6 @@ INDEX_HTML = r"""<!DOCTYPE html>
994
  }
995
  if (job.done) {
996
  document.getElementById('regen-section').style.display = 'block';
997
- if (job.error) document.getElementById('log-panel').classList.add('open');
998
  }
999
  }
1000
 
 
40
  from humeo.pipeline import run_pipeline
41
 
42
 
43
+ APP_TITLE = "Humeo - long to shorts"
44
  LOG_FORMAT = "%(asctime)s | %(levelname)-7s | %(name)s | %(message)s"
45
  MAX_LOG_LINES = 700
46
  LLM_KEY_NAMES = ("GOOGLE_API_KEY", "GEMINI_API_KEY", "OPENROUTER_API_KEY")
 
531
  <head>
532
  <meta charset="UTF-8">
533
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
534
+ <title>Humeo - long to shorts</title>
535
  <link rel="preconnect" href="https://fonts.googleapis.com">
536
  <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=DM+Sans:wght@300;400;500&display=swap" rel="stylesheet">
537
  <style>
 
648
  .nav-new-session { display:none; padding:7px 12px; background:var(--surface); border:1px solid var(--border); border-radius:8px; color:var(--ink); font-family:'DM Sans', sans-serif; font-size:0.76rem; cursor:pointer; transition:all 0.15s; }
649
  .nav-new-session:hover { background:var(--champagne); border-color:var(--gold); }
650
  .nav-new-session.show { display:inline-flex; }
 
 
651
  @media (max-width: 600px) { nav { padding: 16px 20px; } .input-card { padding: 24px 20px; } #screen-processing { padding: 32px 16px 60px; } .pipeline { padding: 20px 16px; } .job-status-card { flex-direction: column; align-items: stretch; } .job-actions { justify-content: flex-start; } .clips-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } .regen-section { padding: 22px 18px; } .regen-btn { width: 100%; margin-left: 0; } .regen-row { flex-direction: column; align-items: flex-start; } .nav-new-session { padding:7px 10px; } }
652
  .thumb-1 { background: linear-gradient(135deg, #D4A96A 0%, #8B5E3C 100%); } .thumb-2 { background: linear-gradient(135deg, #7A9E8A 0%, #3D6650 100%); }
653
  .thumb-3 { background: linear-gradient(135deg, #9E8A7A 0%, #5C3E2E 100%); } .thumb-4 { background: linear-gradient(135deg, #8A7A9E 0%, #4A3866 100%); }
 
660
  </head>
661
  <body>
662
  <nav>
663
+ <div class="logo">Humeo <span>- long to shorts</span></div>
664
  <div class="nav-right">
665
  <div class="nav-status" id="nav-status">Processing...</div>
666
  <button class="nav-new-session" id="new-session-btn" type="button" onclick="startNewSession()">New session</button>
 
701
  </div>
702
  <div class="job-actions">
703
  <button class="job-action-btn" onclick="manualReconnect()">Reconnect</button>
 
704
  </div>
705
  </div>
706
  <div class="pipeline" id="pipeline">
 
711
  <div class="pipeline-step" id="step-4"><div class="step-icon">Edit</div><div class="step-content"><div class="step-name">Adding subtitles &amp; light edits <span class="step-pct" id="pct-4"></span></div><div class="progress-track"><div class="progress-fill" id="fill-4"></div></div></div></div>
712
  </div>
713
  <div class="tips-section" id="tips-section">
714
+ <div class="tips-label">What happens while you're waiting</div>
715
  <div class="tip-card"><span class="tip-dot">◆</span> Clips are automatically trimmed around the strongest hook.</div>
716
  <div class="tip-card"><span class="tip-dot">◆</span> The system can pick centered speaker or split presentation layout per clip.</div>
717
  <div class="tip-card"><span class="tip-dot">◆</span> Word-by-word subtitles are added by default.</div>
 
734
  <button class="regen-btn" onclick="triggerRegen()">Regenerate Clips -></button>
735
  </div>
736
  </div>
 
737
  </div>
738
  <div class="modal-overlay" id="modal" onclick="closeModal(event)">
739
  <div class="modal-box">
 
795
  document.getElementById('job-id-label').textContent = 'Job pending';
796
  setPollStatus('Waiting for updates');
797
  document.getElementById('processing-sub').textContent = 'Sit back - long videos can take a little while';
 
 
798
  document.getElementById('clips-grid').innerHTML = '';
799
  document.getElementById('clips-section').style.display = 'none';
800
  document.getElementById('clips-sub-text').textContent = 'Tap any clip to preview';
 
825
  }
826
  }
827
 
 
 
 
 
828
  function manualReconnect() {
829
  if (currentJobId) {
830
  pollJob(currentJobId, { immediate: true });
 
955
  document.getElementById('nav-status').textContent = job.nav_status || 'Processing...';
956
  document.getElementById('new-session-btn').classList.toggle('show', Boolean(job.done));
957
  document.getElementById('processing-sub').textContent = job.error ? job.error : job.status;
 
958
  (job.steps || []).forEach((step, i) => {
959
  const el = document.getElementById(`step-${i}`);
960
  const fill = document.getElementById(`fill-${i}`);
 
983
  }
984
  if (job.done) {
985
  document.getElementById('regen-section').style.display = 'block';
 
986
  }
987
  }
988