Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>Basyx V11 Content OS</title> | |
| <style> | |
| :root { | |
| --void:#080808; | |
| --surface:#0f0f0f; | |
| --panel:#161616; | |
| --border:#232323; | |
| --accent:#e8ff47; | |
| --accent-dim:#b8cc30; | |
| --muted:#555; | |
| --text:#e8e8e8; | |
| --text-dim:#888; | |
| --red:#ef4444; | |
| --font-mono: monospace; | |
| --font-display: Bebas Neue, sans-serif; | |
| --font-body: system-ui; | |
| } | |
| *{box-sizing:border-box} | |
| body{ | |
| margin:0; | |
| background:var(--void); | |
| color:var(--text); | |
| font-family:var(--font-body); | |
| } | |
| /* ================= SIDEBAR ================= */ | |
| .sidebar{ | |
| position:fixed; | |
| left:0; | |
| top:0; | |
| width:220px; | |
| height:100vh; | |
| background:#0c0c0c; | |
| border-right:1px solid var(--border); | |
| padding:16px; | |
| overflow-y:auto; | |
| } | |
| .brand{ | |
| font-family:var(--font-display); | |
| font-size:28px; | |
| color:var(--accent); | |
| margin-bottom:20px; | |
| } | |
| .nav-group-title{ | |
| color:var(--text-dim); | |
| font-size:11px; | |
| margin:14px 0 6px; | |
| } | |
| .nav-item{ | |
| padding:10px; | |
| cursor:pointer; | |
| color:var(--text-dim); | |
| border-left:2px solid transparent; | |
| } | |
| .nav-item:hover{ | |
| color:var(--text); | |
| } | |
| .nav-item.active{ | |
| border-left:2px solid var(--accent); | |
| color:var(--accent); | |
| } | |
| /* ================= MAIN ================= */ | |
| .main{ | |
| margin-left:220px; | |
| padding:24px; | |
| } | |
| .section{display:none} | |
| .section.active{display:block} | |
| /* ================= PANELS ================= */ | |
| .panel{ | |
| background:var(--panel); | |
| border:1px solid var(--border); | |
| padding:20px; | |
| border-radius:4px; | |
| margin-bottom:16px; | |
| } | |
| /* ================= INPUTS ================= */ | |
| input, textarea, select{ | |
| width:100%; | |
| padding:10px; | |
| background:#111; | |
| border:1px solid var(--border); | |
| color:var(--text); | |
| margin-top:8px; | |
| } | |
| button{ | |
| padding:12px 16px; | |
| border:none; | |
| cursor:pointer; | |
| background:var(--accent); | |
| color:#000; | |
| font-weight:600; | |
| margin-top:10px; | |
| } | |
| button:disabled{ | |
| opacity:0.6; | |
| } | |
| /* ================= RESULT ================= */ | |
| pre{ | |
| background:#0b0b0b; | |
| padding:12px; | |
| overflow:auto; | |
| border:1px solid var(--border); | |
| } | |
| /* ================= MOBILE ================= */ | |
| @media(max-width:768px){ | |
| .sidebar{ | |
| transform:translateX(-100%); | |
| position:fixed; | |
| z-index:10; | |
| } | |
| .sidebar.open{ | |
| transform:translateX(0); | |
| } | |
| .main{ | |
| margin-left:0; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- SIDEBAR --> | |
| <div class="sidebar" id="sidebar"> | |
| <div class="brand">⚡ BASYX V11</div> | |
| <div class="nav-group-title">ANALYSIS</div> | |
| <div class="nav-item active" onclick="nav('transcribe')">Transcribe</div> | |
| <div class="nav-item" onclick="nav('subtitles')">Subtitles</div> | |
| <div class="nav-item" onclick="nav('highlights')">Highlights</div> | |
| <div class="nav-item" onclick="nav('viral-score')">Viral Score</div> | |
| <div class="nav-item" onclick="nav('strategy')">Strategy</div> | |
| <div class="nav-group-title">RENDER</div> | |
| <div class="nav-item" onclick="nav('render')">Render</div> | |
| <div class="nav-item" onclick="nav('generate-thumbnail')">Thumbnail</div> | |
| <div class="nav-item" onclick="nav('generate-metadata')">Metadata</div> | |
| <div class="nav-group-title">PUBLISH</div> | |
| <div class="nav-item" onclick="nav('publish')">Publish</div> | |
| <div class="nav-item" onclick="nav('auto-publish')">Auto Publish</div> | |
| <div class="nav-group-title">SYSTEM</div> | |
| <div class="nav-item" onclick="nav('batch')">Batch</div> | |
| <div class="nav-item" onclick="nav('autonomous')">Autonomous</div> | |
| </div> | |
| <!-- MAIN --> | |
| <div class="main"> | |
| <!-- HOME --> | |
| <section id="home" class="section active"> | |
| <h1 style="font-family:var(--font-display);color:var(--accent);font-size:48px;"> | |
| AUTONOMOUS CONTENT OPERATOR | |
| </h1> | |
| </section> | |
| <!-- GENERIC TASK TEMPLATE --> | |
| <section id="transcribe" class="section"> | |
| <div class="panel"> | |
| <h2>TRANSCRIBE</h2> | |
| <input type="file" id="file-transcribe"> | |
| <input type="text" id="url-transcribe" placeholder="Video URL"> | |
| <button onclick="run('transcribe')">Execute</button> | |
| </div> | |
| <pre id="result-transcribe"></pre> | |
| </section> | |
| <section id="subtitles" class="section"> | |
| <div class="panel"> | |
| <h2>SUBTITLES</h2> | |
| <input type="file" id="file-subtitles"> | |
| <input type="text" id="url-subtitles"> | |
| <button onclick="run('subtitles')">Execute</button> | |
| </div> | |
| <pre id="result-subtitles"></pre> | |
| </section> | |
| <section id="render" class="section"> | |
| <div class="panel"> | |
| <h2>RENDER</h2> | |
| <input type="file" id="file-render"> | |
| <input type="text" id="url-render"> | |
| <button onclick="run('render')">Execute</button> | |
| </div> | |
| <video id="video-render" controls style="width:100%"></video> | |
| </section> | |
| <section id="highlights" class="section"> | |
| <div class="panel"> | |
| <h2>HIGHLIGHTS</h2> | |
| <input type="file" id="file-highlights"> | |
| <button onclick="run('highlights')">Execute</button> | |
| </div> | |
| <pre id="result-highlights"></pre> | |
| </section> | |
| <section id="viral-score" class="section"> | |
| <div class="panel"> | |
| <h2>VIRAL SCORE</h2> | |
| <input type="file" id="file-viral-score"> | |
| <button onclick="run('viral-score')">Execute</button> | |
| </div> | |
| <pre id="result-viral-score"></pre> | |
| </section> | |
| <section id="strategy" class="section"> | |
| <div class="panel"> | |
| <h2>STRATEGY</h2> | |
| <input type="file" id="file-strategy"> | |
| <button onclick="run('strategy')">Execute</button> | |
| </div> | |
| <pre id="result-strategy"></pre> | |
| </section> | |
| <script> | |
| function nav(id){ | |
| document.querySelectorAll('.section').forEach(s=>s.classList.remove('active')); | |
| document.getElementById(id).classList.add('active'); | |
| document.querySelectorAll('.nav-item').forEach(n=>n.classList.remove('active')); | |
| event.target.classList.add('active'); | |
| location.hash = id; | |
| } | |
| async function run(task){ | |
| const file = document.getElementById('file-'+task).files[0]; | |
| const url = document.getElementById('url-'+task)?.value; | |
| const fd = new FormData(); | |
| if(file) fd.append("file", file); | |
| if(url) fd.append("url_input", url); | |
| const res = await fetch(`/execute/${task}`, { | |
| method:"POST", | |
| body:fd | |
| }); | |
| const type = res.headers.get("content-type"); | |
| if(type && type.includes("video")){ | |
| const blob = await res.blob(); | |
| const urlObj = URL.createObjectURL(blob); | |
| document.getElementById("video-"+task).src = urlObj; | |
| return; | |
| } | |
| const data = await res.json(); | |
| document.getElementById("result-"+task).textContent = | |
| JSON.stringify(data, null, 2); | |
| } | |
| </script> | |
| </body> | |
| </html> |