Spaces:

AIgoose
/

hyperframes-video-studio

Configuration error

File size: 15,608 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Hyperframes Video Studio</title>
<style>
:root{--bg:#0f0f0f;--s:#1a1a1a;--s2:#242424;--b:rgba(255,255,255,0.1);--a:#7C6FE0;--a2:#E06F9A;--t:#e8e6e1;--m:#888;--g:#4ade80;--r:#f87171;--hf:#ff9d00;--rad:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--t);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
header{padding:20px 28px;border-bottom:1px solid var(--b);display:flex;align-items:center;gap:12px}
header h1{font-size:18px;font-weight:700}header span{font-size:12px;color:var(--m)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--g);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.layout{display:grid;grid-template-columns:360px 1fr;min-height:calc(100vh - 61px)}
.sidebar{border-right:1px solid var(--b);padding:20px;overflow-y:auto;display:flex;flex-direction:column;gap:16px}
.main{padding:20px;overflow-y:auto}
.card{background:var(--s);border:1px solid var(--b);border-radius:var(--rad);padding:14px}
.card-title{font-size:10px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--m);margin-bottom:10px}
.wf-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wf-pill{padding:10px;border-radius:8px;border:1px solid var(--b);cursor:pointer;background:var(--s2);text-align:left;transition:all .15s;width:100%}
.wf-pill:hover{border-color:var(--a)}.wf-pill.active{border-color:var(--a);background:rgba(124,111,224,.15)}
.wf-pill .icon{font-size:18px;display:block;margin-bottom:3px}
.wf-pill .name{font-size:12px;font-weight:600;color:var(--t)}
.wf-pill .desc{font-size:10px;color:var(--m);margin-top:2px;line-height:1.35}
.drop-zone{border:2px dashed var(--b);border-radius:var(--rad);padding:24px 12px;text-align:center;cursor:pointer;transition:all .2s}
.drop-zone.drag{border-color:var(--a);background:rgba(124,111,224,.08)}
.drop-zone input{display:none}
.drop-zone .dz-icon{font-size:28px;margin-bottom:6px}
.drop-zone p{font-size:12px;color:var(--m)}.drop-zone strong{color:var(--t)}
.file-list{display:flex;flex-direction:column;gap:5px;margin-top:8px}
.file-item{display:flex;align-items:center;gap:7px;padding:7px 9px;background:var(--s2);border-radius:7px;font-size:11px}
.fi-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fi-size{color:var(--m);flex-shrink:0}
.fi-rm{background:none;border:none;color:var(--m);cursor:pointer;font-size:13px;padding:0 3px}.fi-rm:hover{color:var(--r)}
.field{margin-bottom:11px}
.field label{display:block;font-size:11px;color:var(--m);margin-bottom:4px}
.field input,.field select{width:100%;padding:7px 9px;background:var(--s2);border:1px solid var(--b);border-radius:7px;color:var(--t);font-size:12px;outline:none}
.field input:focus,.field select:focus{border-color:var(--a)}
.field select option{background:var(--s2)}
.music-grid{display:flex;flex-direction:column;gap:5px}
.music-item{display:flex;align-items:center;gap:8px;padding:7px 9px;background:var(--s2);border-radius:7px;border:1px solid var(--b);cursor:pointer;transition:border-color .15s}
.music-item:hover,.music-item.sel{border-color:var(--a)}
.music-item input{accent-color:var(--a)}
.mi-info{flex:1}.mi-name{font-size:12px;font-weight:500}.mi-tags{font-size:10px;color:var(--m);margin-top:1px}
.mi-bpm{font-size:10px;color:var(--m);flex-shrink:0}
.render-btn{width:100%;padding:13px;background:var(--a);color:#fff;border:none;border-radius:var(--rad);font-size:14px;font-weight:700;cursor:pointer;transition:all .15s}
.render-btn:hover:not(:disabled){background:#6b5fd4}
.render-btn:disabled{opacity:.5;cursor:not-allowed}
.job-item{background:var(--s);border:1px solid var(--b);border-radius:var(--rad);padding:14px;margin-bottom:10px}
.job-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:8px}
.job-name{font-size:13px;font-weight:600}.job-meta{font-size:10px;color:var(--m);margin-top:2px}
.sbadge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:99px;flex-shrink:0}
.sq{background:rgba(251,191,36,.15);color:#fbbf24}
.sc{background:rgba(124,111,224,.2);color:#a78bfa}
.sr{background:rgba(56,189,248,.15);color:#38bdf8}
.su{background:rgba(255,157,0,.15);color:var(--hf)}
.sd{background:rgba(74,222,128,.15);color:var(--g)}
.se{background:rgba(248,113,113,.15);color:var(--r)}
.prog-bar{height:4px;background:var(--s2);border-radius:99px;overflow:hidden;margin-bottom:8px}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--a),var(--a2));border-radius:99px;transition:width .3s}
.job-actions{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.btn-sm{padding:6px 14px;border-radius:7px;font-size:11px;font-weight:600;cursor:pointer;border:none;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:5px}
.btn-hf{background:var(--hf);color:#000}.btn-hf:hover{background:#e88e00}
.btn-view{background:var(--s2);color:var(--t);border:1px solid var(--b)}.btn-view:hover{border-color:var(--a)}
.btn-rt{background:var(--s2);color:var(--t);border:1px solid var(--b)}
.hf-badge{font-size:10px;color:var(--hf);display:flex;align-items:center;gap:4px}
.section-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.section-hdr h2{font-size:15px;font-weight:700}
.section-hdr span{font-size:11px;color:var(--m)}
.empty{text-align:center;padding:50px 20px;color:var(--m)}
.empty .ei{font-size:44px;margin-bottom:10px}
.empty p{font-size:13px}
input[type=range]{accent-color:var(--a);cursor:pointer;width:100%}
.toast{position:fixed;bottom:20px;right:20px;padding:10px 16px;background:var(--s);border:1px solid var(--b);border-radius:var(--rad);font-size:12px;z-index:999;animation:tin .2s ease}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.repo-banner{background:rgba(255,157,0,.08);border:1px solid rgba(255,157,0,.25);border-radius:8px;padding:8px 12px;font-size:11px;color:var(--hf);display:flex;align-items:center;gap:6px;margin-bottom:12px}
</style>
</head>
<body>
<header>
  <div class="dot"></div>
  <h1>🎬 Hyperframes Video Studio</h1>
  <span>HyperFrames · HuggingFace Cloud · AI-powered</span>
</header>
<div class="layout">
<div class="sidebar">
  <div class="card">
    <div class="card-title">Video Type</div>
    <div class="wf-grid" id="wf-grid"></div>
  </div>
  <div class="card">
    <div class="card-title">Upload Assets</div>
    <div class="drop-zone" id="dz">
      <input type="file" id="fi" multiple accept="video/*,image/*,audio/*">
      <div class="dz-icon">📁</div>
      <p><strong>Click or drag files here</strong></p>
      <p>Videos · Photos · Audio — up to 500MB total</p>
    </div>
    <div class="file-list" id="fl"></div>
  </div>
  <div class="card">
    <div class="card-title">Project Details</div>
    <div class="field"><label>Client / Event Name</label><input id="clientName" placeholder="e.g. Purbasari Indonesia"></div>
    <div class="field"><label>Trainer Name</label><input id="trainerName" value="Dee Ferdinand"></div>
    <div class="field"><label>Tagline</label><input id="tagline" value="AI Corporate Trainer"></div>
    <div class="field"><label>Website</label><input id="website" value="deeferdinand.com"></div>
    <div class="field"><label>Format</label>
      <select id="format">
        <option value="9:16">9:16 Vertical (Reels / TikTok / Shorts)</option>
        <option value="16:9">16:9 Landscape (YouTube / LinkedIn)</option>
        <option value="1:1">1:1 Square (Instagram Feed)</option>
      </select>
    </div>
  </div>
  <div class="card">
    <div class="card-title">Background Music</div>
    <div class="music-grid" id="mg">
      <label class="music-item sel"><input type="radio" name="music" value="auto" checked>
        <div class="mi-info"><div class="mi-name">🤖 Auto-select</div><div class="mi-tags">Matches your workflow</div></div>
      </label>
    </div>
    <div class="field" style="margin-top:10px">
      <label>Volume: <span id="vl">30%</span></label>
      <input type="range" id="mvol" min="0" max="100" value="30" oninput="document.getElementById('vl').textContent=this.value+'%'">
    </div>
  </div>
  <button class="render-btn" id="rb" onclick="startRender()">▶ Render &amp; Upload to HuggingFace</button>
</div>
<div class="main">
  <div id="repo-banner" class="repo-banner" style="display:none">
    🤗 Renders save to: <a id="repo-link" href="#" target="_blank" style="color:var(--hf);font-weight:600"></a>
  </div>
  <div class="section-hdr">
    <h2>Render Queue</h2>
    <span id="jc">0 jobs</span>
  </div>
  <div id="jlist">
    <div class="empty"><div class="ei">🎬</div><p>Upload assets and hit Render — your video will be saved directly to HuggingFace.</p></div>
  </div>
</div>
</div>
<script>
const API='';
let wf='testimonial', files=[], jobs={};
const RENDERS_REPO = 'AIgoose/video-renders';

async function init(){
  // Show repo banner
  const banner = document.getElementById('repo-banner');
  const link = document.getElementById('repo-link');
  link.href = `https://huggingface.co/datasets/${RENDERS_REPO}`;
  link.textContent = `datasets/${RENDERS_REPO}`;
  banner.style.display = 'flex';

  try{
    const [wfs,tracks]=await Promise.all([
      fetch(API+'/api/workflows').then(r=>r.json()),
      fetch(API+'/api/music').then(r=>r.json())
    ]);
    document.getElementById('wf-grid').innerHTML=wfs.map(w=>`
      <button class="wf-pill ${w.id===wf?'active':''}" onclick="selWf('${w.id}')">
        <span class="icon">${w.icon}</span>
        <span class="name">${w.name}</span>
        <span class="desc">${w.description}</span>
      </button>`).join('');
    const mg=document.getElementById('mg');
    mg.innerHTML=`<label class="music-item sel"><input type="radio" name="music" value="auto" checked>
      <div class="mi-info"><div class="mi-name">🤖 Auto-select</div><div class="mi-tags">Matches your workflow</div></div></label>`
      +tracks.map(t=>`<label class="music-item"><input type="radio" name="music" value="${t.file}">
        <div class="mi-info"><div class="mi-name">${moji(t.mood)} ${cap(t.mood)}</div><div class="mi-tags">${(t.tags||[]).slice(0,3).join(' · ')}</div></div>
        <div class="mi-bpm">${t.bpm} bpm</div></label>`).join('');
    mg.querySelectorAll('.music-item').forEach(el=>el.addEventListener('click',()=>{
      mg.querySelectorAll('.music-item').forEach(x=>x.classList.remove('sel'));
      el.classList.add('sel');
    }));
  }catch(e){console.warn('Init error',e)}
}

function moji(m){return{corporate:'🏢',cinematic:'🎬',upbeat:'⚡',warm:'🤝',tech:'🤖',energetic:'🔥'}[m]||'🎵'}
function cap(s){return s?s[0].toUpperCase()+s.slice(1):''}
function selWf(id){wf=id;document.querySelectorAll('.wf-pill').forEach(el=>el.classList.toggle('active',el.getAttribute('onclick')===`selWf('${id}')`))} 

const dz=document.getElementById('dz');
const fi=document.getElementById('fi');
dz.addEventListener('click',()=>fi.click());
fi.addEventListener('change',e=>addFiles([...e.target.files]));
dz.addEventListener('dragover',e=>{e.preventDefault();dz.classList.add('drag')});
dz.addEventListener('dragleave',()=>dz.classList.remove('drag'));
dz.addEventListener('drop',e=>{e.preventDefault();dz.classList.remove('drag');addFiles([...e.dataTransfer.files])});

function addFiles(f){files.push(...f);renderFL()}
function removeFile(i){files.splice(i,1);renderFL()}
function renderFL(){
  const l=document.getElementById('fl');
  l.innerHTML=files.map((f,i)=>`<div class="file-item">
    <span>${ficon(f.type)}</span>
    <span class="fi-name">${f.name}</span>
    <span class="fi-size">${fsz(f.size)}</span>
    <button class="fi-rm" onclick="removeFile(${i})">✕</button>
  </div>`).join('');
}
function ficon(m){if(m.startsWith('video/'))return'🎥';if(m.startsWith('image/'))return'🖼️';if(m.startsWith('audio/'))return'🎵';return'📄'}
function fsz(b){return b>1024*1024?(b/1024/1024).toFixed(1)+'MB':(b/1024).toFixed(0)+'KB'}

async function startRender(){
  if(!files.length){toast('Please upload at least one video or photo.');return}
  const rb=document.getElementById('rb');rb.disabled=true;
  const fd=new FormData();
  files.forEach(f=>fd.append('files',f));
  fd.append('workflow',wf);
  ['clientName','trainerName','tagline','website','format'].forEach(id=>fd.append(id,document.getElementById(id).value));
  fd.append('musicTrack',document.querySelector('input[name=music]:checked')?.value||'auto');
  fd.append('musicVolume',(document.getElementById('mvol').value/100).toString());
  try{
    const res=await fetch(API+'/api/render',{method:'POST',body:fd});
    const {jobId}=await res.json();
    jobs[jobId]={
      id:jobId,status:'queued',progress:0,
      projectName:document.getElementById('clientName').value||'Untitled',
      workflow:wf,createdAt:Date.now()
    };
    renderJobs();connectWS(jobId);toast('✅ Render started — will upload to HuggingFace when done!');
  }catch(e){toast('❌ '+e.message)}
  finally{rb.disabled=false}
}

function connectWS(jobId){
  const p=location.protocol==='https:'?'wss':'ws';
  const s=new WebSocket(`${p}://${location.host}?job=${jobId}`);
  s.onmessage=e=>{
    const d=JSON.parse(e.data);
    if(!jobs[jobId])jobs[jobId]=d;
    else Object.assign(jobs[jobId],d);
    renderJobs();
    if(d.status==='done'||d.status==='error')s.close();
  };
}

function renderJobs(){
  const c=document.getElementById('jlist');
  const list=Object.values(jobs).sort((a,b)=>b.createdAt-a.createdAt);
  document.getElementById('jc').textContent=`${list.length} job${list.length!==1?'s':''}`;
  if(!list.length){
    c.innerHTML='<div class="empty"><div class="ei">🎬</div><p>Upload assets and hit Render — your video will be saved directly to HuggingFace.</p></div>';
    return;
  }
  const cls={queued:'sq',composing:'sc',rendering:'sr',uploading:'su',done:'sd',error:'se'};
  const labels={queued:'Queued',composing:'Composing',rendering:'Rendering',uploading:'Uploading to HF 🤗',done:'Done ✓',error:'Error'};
  c.innerHTML=list.map(j=>`<div class="job-item">
    <div class="job-header">
      <div>
        <div class="job-name">${j.projectName||'Untitled'} · ${j.workflow||''}</div>
        <div class="job-meta">${new Date(j.createdAt).toLocaleTimeString()} · ${(j.id||'').slice(0,8)}…</div>
      </div>
      <span class="sbadge ${cls[j.status]||'sq'}">${labels[j.status]||j.status}</span>
    </div>
    <div class="prog-bar"><div class="prog-fill" style="width:${j.progress||0}%"></div></div>
    <div class="job-actions">
      ${j.status==='done'&&j.hf_url ? `
        <a class="btn-sm btn-hf" href="${j.hf_url}" target="_blank">🤗 Open on HuggingFace</a>
        <a class="btn-sm btn-view" href="${j.viewer_url||j.hf_url}" target="_blank">👁 View file</a>
        <span class="hf-badge">📁 ${j.hf_filename||''}</span>
      ` : ''}
      ${j.status==='done'&&!j.hf_url ? `
        <a class="btn-sm btn-view" href="/api/download/${j.id}" target="_blank">⬇ Download MP4</a>
        <span style="font-size:10px;color:var(--m)">Saved locally (HF upload failed)</span>
      ` : ''}
      ${j.status==='error' ? `<span style="font-size:11px;color:var(--r)">${j.error}</span>` : ''}
    </div>
  </div>`).join('');
}

function toast(msg){const el=document.createElement('div');el.className='toast';el.textContent=msg;document.body.appendChild(el);setTimeout(()=>el.remove(),3500)}

init();
</script>
</body>
</html>