| <!DOCTYPE html> |
| <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> |
|
|
| |
| <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> |
|
|
| |
| <div class="main"> |
|
|
| |
| <section id="home" class="section active"> |
| <h1 style="font-family:var(--font-display);color:var(--accent);font-size:48px;"> |
| AUTONOMOUS CONTENT OPERATOR |
| </h1> |
| </section> |
|
|
| |
| <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> |
