Spaces:

lablab-ai-amd-developer-hackathon
/

ElevenClip-AI

Running

App Files Files Community

JakgritB commited on 6 days ago

Commit

d8bf65d

1 Parent(s): a05a82e

docs: add Hugging Face Space landing page

Browse files

Add static Space assets and upload instructions for the lablab.ai AMD Developer Hackathon public demo page.

Files changed (3) hide show

hf-space/README.md +52 -0
hf-space/UPLOAD.md +36 -0
hf-space/index.html +393 -0

hf-space/README.md ADDED Viewed

	@@ -0,0 +1,52 @@

+# ElevenClip.AI
+ElevenClip.AI is an AI clip studio that turns long-form videos into personalized short-form clips for TikTok, YouTube Shorts, and Instagram Reels.
+This Space is the public demo page for our AMD Developer Hackathon project on lablab.ai.
+## Hackathon Track
+**Track 3 - Vision & Multimodal AI**
+ElevenClip.AI processes video, audio, text, and subtitle outputs:
+- **Audio**: Whisper Large V3 transcription through Hugging Face.
+- **Text**: Qwen2.5 highlight scoring from timestamped transcripts.
+- **Video**: optional Qwen2-VL visual analysis for reactions, scene changes, and on-screen text.
+- **Rendered media**: ffmpeg exports vertical short-form clips with subtitles.
+## Why It Matters
+Creators often publish long videos but still need short clips for discovery platforms. Finding the best moments, trimming clips, writing subtitles, and exporting vertical videos can take hours.
+ElevenClip.AI automates the first pass:
+1. Upload a video or paste a YouTube URL.
+2. Transcribe the content with Whisper.
+3. Use Qwen to identify high-engagement highlight moments.
+4. Render short-form clips with subtitles.
+5. Let the creator trim, edit subtitles, approve, regenerate, and download final clips.
+## AMD + ROCm Plan
+The production backend is designed for:
+- AMD Developer Cloud
+- AMD Instinct MI300X
+- ROCm 6.x
+- PyTorch with ROCm support
+- vLLM ROCm backend for Qwen inference
+Current local demo mode validates the upload, clipping, subtitle rendering, and human editing workflow. Real Whisper and Qwen inference will be enabled on AMD Developer Cloud once MI300X credits are active.
+## Links
+- GitHub: https://github.com/JakgritB/ElevenClip.AI
+- Hackathon: https://lablab.ai/ai-hackathons/amd-developer
+## Status
+- Local MVP: working
+- Hugging Face Space: landing page
+- AMD Cloud credits: requested
+- Real MI300X benchmark: pending

hf-space/UPLOAD.md ADDED Viewed

	@@ -0,0 +1,36 @@

+# How to Update the Hugging Face Space
+Space URL:
+```text
+https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/ElevenClip-AI
+```
+## Manual Upload
+1. Open the Space.
+2. Click `Files`.
+3. Open `index.html`.
+4. Click the edit pencil.
+5. Replace the default file with the contents of `hf-space/index.html`.
+6. Commit the change.
+7. Add or edit `README.md`.
+8. Replace it with the contents of `hf-space/README.md`.
+9. Commit the change.
+10. Go back to the `App` tab.
+The Space should now show the ElevenClip.AI landing page instead of the default static Space message.
+## Git Option
+If you have Hugging Face Git credentials configured:
+```bash
+git clone https://huggingface.co/spaces/lablab-ai-amd-developer-hackathon/ElevenClip-AI
+cp hf-space/index.html ElevenClip-AI/index.html
+cp hf-space/README.md ElevenClip-AI/README.md
+cd ElevenClip-AI
+git add index.html README.md
+git commit -m "Add ElevenClip.AI landing page"
+git push
+```

hf-space/index.html ADDED Viewed

	@@ -0,0 +1,393 @@

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