| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>ElevenClip.AI</title> |
| <style> |
| :root { |
| color-scheme: dark; |
| font-family: |
| Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| background: #07111f; |
| color: #f8fafc; |
| } |
| |
| * { |
| box-sizing: border-box; |
| } |
| |
| body { |
| margin: 0; |
| background: |
| linear-gradient(120deg, rgba(20, 184, 166, 0.2), transparent 34%), |
| linear-gradient(150deg, rgba(245, 158, 11, 0.14), transparent 48%), |
| #07111f; |
| } |
| |
| a { |
| color: inherit; |
| } |
| |
| .shell { |
| max-width: 1120px; |
| margin: 0 auto; |
| padding: 40px 20px 56px; |
| } |
| |
| .nav { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 20px; |
| margin-bottom: 72px; |
| } |
| |
| .brand { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| font-weight: 800; |
| } |
| |
| .mark { |
| display: grid; |
| width: 42px; |
| height: 42px; |
| place-items: center; |
| border-radius: 10px; |
| background: #f8fafc; |
| color: #07111f; |
| font-size: 22px; |
| } |
| |
| .nav-links { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 10px; |
| } |
| |
| .button { |
| display: inline-flex; |
| min-height: 42px; |
| align-items: center; |
| justify-content: center; |
| border-radius: 8px; |
| border: 1px solid rgba(248, 250, 252, 0.18); |
| padding: 0 14px; |
| text-decoration: none; |
| font-weight: 750; |
| } |
| |
| .button.primary { |
| border-color: #14b8a6; |
| background: #14b8a6; |
| color: #042f2e; |
| } |
| |
| .hero { |
| display: grid; |
| grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); |
| gap: 36px; |
| align-items: center; |
| } |
| |
| .eyebrow { |
| margin: 0 0 14px; |
| color: #fbbf24; |
| font-size: 0.82rem; |
| font-weight: 850; |
| text-transform: uppercase; |
| } |
| |
| h1 { |
| margin: 0; |
| max-width: 820px; |
| font-size: clamp(2.35rem, 6vw, 5.7rem); |
| line-height: 0.95; |
| letter-spacing: 0; |
| } |
| |
| .lead { |
| max-width: 670px; |
| margin: 24px 0 0; |
| color: #cbd5e1; |
| font-size: 1.16rem; |
| line-height: 1.7; |
| } |
| |
| .actions { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 12px; |
| margin-top: 28px; |
| } |
| |
| .demo { |
| overflow: hidden; |
| border: 1px solid rgba(148, 163, 184, 0.24); |
| border-radius: 10px; |
| background: rgba(15, 23, 42, 0.76); |
| box-shadow: 0 24px 70px rgba(0, 0, 0, 0.26); |
| } |
| |
| .demo-top { |
| display: flex; |
| gap: 8px; |
| border-bottom: 1px solid rgba(148, 163, 184, 0.18); |
| padding: 14px; |
| } |
| |
| .dot { |
| width: 10px; |
| height: 10px; |
| border-radius: 999px; |
| background: #14b8a6; |
| } |
| |
| .dot:nth-child(2) { |
| background: #fbbf24; |
| } |
| |
| .dot:nth-child(3) { |
| background: #38bdf8; |
| } |
| |
| .demo-body { |
| display: grid; |
| gap: 14px; |
| padding: 18px; |
| } |
| |
| .progress { |
| height: 10px; |
| overflow: hidden; |
| border-radius: 999px; |
| background: #334155; |
| } |
| |
| .progress span { |
| display: block; |
| width: 78%; |
| height: 100%; |
| border-radius: 999px; |
| background: linear-gradient(90deg, #14b8a6, #f59e0b); |
| } |
| |
| .clip-grid { |
| display: grid; |
| grid-template-columns: repeat(2, 1fr); |
| gap: 12px; |
| } |
| |
| .clip { |
| min-height: 184px; |
| border-radius: 8px; |
| border: 1px solid rgba(148, 163, 184, 0.2); |
| background: |
| linear-gradient(180deg, transparent 48%, rgba(0, 0, 0, 0.58)), |
| linear-gradient(135deg, #1e293b, #0f766e 52%, #f59e0b); |
| padding: 12px; |
| display: flex; |
| align-items: flex-end; |
| } |
| |
| .caption { |
| color: white; |
| font-size: 0.84rem; |
| font-weight: 800; |
| text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7); |
| } |
| |
| .section { |
| margin-top: 76px; |
| } |
| |
| .section h2 { |
| margin: 0 0 18px; |
| font-size: 1.5rem; |
| } |
| |
| .cards { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 14px; |
| } |
| |
| .card { |
| border: 1px solid rgba(148, 163, 184, 0.22); |
| border-radius: 10px; |
| background: rgba(15, 23, 42, 0.72); |
| padding: 18px; |
| } |
| |
| .card strong { |
| display: block; |
| margin-bottom: 8px; |
| } |
| |
| .card p { |
| margin: 0; |
| color: #cbd5e1; |
| line-height: 1.55; |
| } |
| |
| .status { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 14px; |
| } |
| |
| .status-row { |
| display: flex; |
| justify-content: space-between; |
| gap: 14px; |
| border-bottom: 1px solid rgba(148, 163, 184, 0.18); |
| padding: 12px 0; |
| } |
| |
| .status-row span { |
| color: #cbd5e1; |
| } |
| |
| footer { |
| margin-top: 76px; |
| color: #94a3b8; |
| font-size: 0.92rem; |
| } |
| |
| @media (max-width: 860px) { |
| .hero, |
| .cards, |
| .status { |
| grid-template-columns: 1fr; |
| } |
| |
| .nav { |
| align-items: flex-start; |
| flex-direction: column; |
| margin-bottom: 44px; |
| } |
| |
| .clip-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <main class="shell"> |
| <nav class="nav"> |
| <div class="brand"> |
| <div class="mark">✂</div> |
| <div> |
| <div>ElevenClip.AI</div> |
| <small>AMD ROCm multimodal clipping studio</small> |
| </div> |
| </div> |
| <div class="nav-links"> |
| <a class="button" href="https://github.com/JakgritB/ElevenClip.AI">GitHub</a> |
| <a class="button primary" href="https://lablab.ai/ai-hackathons/amd-developer">Hackathon</a> |
| </div> |
| </nav> |
|
|
| <section class="hero"> |
| <div> |
| <p class="eyebrow">AMD Developer Hackathon · Track 3</p> |
| <h1>Turn long videos into short-form clips.</h1> |
| <p class="lead"> |
| ElevenClip.AI uses Whisper, Qwen, Hugging Face, and AMD ROCm on MI300X to |
| find highlight moments, render subtitles, and give creators a human-AI editor |
| for TikTok, Shorts, and Reels. |
| </p> |
| <div class="actions"> |
| <a class="button primary" href="https://github.com/JakgritB/ElevenClip.AI">View source</a> |
| <a class="button" href="#status">Project status</a> |
| </div> |
| </div> |
|
|
| <div class="demo" aria-label="ElevenClip demo mockup"> |
| <div class="demo-top"> |
| <span class="dot"></span> |
| <span class="dot"></span> |
| <span class="dot"></span> |
| </div> |
| <div class="demo-body"> |
| <strong>Pipeline</strong> |
| <div class="progress"><span></span></div> |
| <div class="clip-grid"> |
| <div class="clip"><div class="caption">"The moment viewers stop scrolling"</div></div> |
| <div class="clip"><div class="caption">"A practical takeaway in 60 seconds"</div></div> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="section"> |
| <h2>How It Works</h2> |
| <div class="cards"> |
| <article class="card"> |
| <strong>1. Ingest</strong> |
| <p>Paste a YouTube URL or upload a video file for processing.</p> |
| </article> |
| <article class="card"> |
| <strong>2. Transcribe</strong> |
| <p>Whisper Large V3 creates timestamped multilingual transcripts.</p> |
| </article> |
| <article class="card"> |
| <strong>3. Score</strong> |
| <p>Qwen2.5 ranks highlights using creator profile and engagement signals.</p> |
| </article> |
| <article class="card"> |
| <strong>4. Edit</strong> |
| <p>Creators trim, edit subtitles, approve, regenerate, and download clips.</p> |
| </article> |
| </div> |
| </section> |
|
|
| <section class="section"> |
| <h2>Hackathon Fit</h2> |
| <div class="cards"> |
| <article class="card"> |
| <strong>AMD Cloud</strong> |
| <p>Backend target is AMD Developer Cloud with Instinct MI300X.</p> |
| </article> |
| <article class="card"> |
| <strong>ROCm</strong> |
| <p>Designed for PyTorch ROCm, vLLM ROCm backend, and Optimum-AMD.</p> |
| </article> |
| <article class="card"> |
| <strong>Hugging Face</strong> |
| <p>Uses HF model hub for Whisper, Qwen2.5, and Qwen2-VL.</p> |
| </article> |
| <article class="card"> |
| <strong>Multimodal</strong> |
| <p>Combines audio, text, video frames, subtitles, and rendered clips.</p> |
| </article> |
| </div> |
| </section> |
|
|
| <section id="status" class="section"> |
| <h2>Project Status</h2> |
| <div class="status"> |
| <div class="card"> |
| <div class="status-row"><span>Local MVP</span><strong>Working</strong></div> |
| <div class="status-row"><span>Upload to clips</span><strong>Working</strong></div> |
| <div class="status-row"><span>Subtitle rendering</span><strong>Working</strong></div> |
| <div class="status-row"><span>Human editor</span><strong>Working</strong></div> |
| </div> |
| <div class="card"> |
| <div class="status-row"><span>AMD Cloud credits</span><strong>Requested</strong></div> |
| <div class="status-row"><span>Real Whisper inference</span><strong>Pending</strong></div> |
| <div class="status-row"><span>Real Qwen inference</span><strong>Pending</strong></div> |
| <div class="status-row"><span>MI300X benchmark</span><strong>Pending</strong></div> |
| </div> |
| </div> |
| </section> |
|
|
| <footer> |
| Built for the AMD Developer Hackathon on lablab.ai. Source code is available on GitHub. |
| </footer> |
| </main> |
| </body> |
| </html> |
|
|
