studio

Sleeping

File size: 6,436 Bytes

345855e

<!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>

<!-- 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>