feat: add HyperFrames testimonial pipeline — composition, workflow, patcher, README

.github/workflows/render-testimonial.yml

@@ -0,0 +1,127 @@
+name: Render Testimonial Video
+
+on:
+  workflow_dispatch:
+    inputs:
+      gdrive_file_id:
+        description: 'Google Drive file ID of testimonial MOV'
+        required: true
+        default: '1f1qlgyLJSCQgpjrWflaqldsNE2fZ-_1X'
+      participant_name:
+        description: 'Participant name (lower-third)'
+        required: false
+        default: 'Peserta Training'
+      participant_role:
+        description: 'Participant role / org'
+        required: false
+        default: 'AI Transformation Series - Batch 2026'
+      pull_quote:
+        description: 'Pull quote text (Indonesian)'
+        required: false
+        default: 'Setelah training ini, tim kami langsung bisa praktek dan hasilnya nyata.'
+
+jobs:
+  render:
+    runs-on: ubuntu-latest
+    timeout-minutes: 30
+
+    steps:
+      - name: Checkout repo
+        uses: actions/checkout@v4
+
+      - name: Install system dependencies
+        run: |
+          sudo apt-get update -qq
+          sudo apt-get install -y ffmpeg python3-pip
+          pip3 install gdown huggingface_hub --quiet
+
+      - name: Setup Node.js 22
+        uses: actions/setup-node@v4
+        with:
+          node-version: '22'
+
+      - name: Install HyperFrames CLI
+        run: npm install -g hyperframes
+
+      - name: Install Chromium
+        run: sudo apt-get install -y chromium-browser || true
+
+      - name: Download testimonial MOV from Google Drive
+        run: |
+          mkdir -p assets
+          python3 - <<'EOF'
+          import gdown, os, sys
+          fid = "${{ github.event.inputs.gdrive_file_id }}"
+          out = "assets/testimoni_raw.MOV"
+          gdown.download(f"https://drive.google.com/uc?id={fid}", out, quiet=False)
+          if not os.path.exists(out):
+              sys.exit(1)
+          print(f"Downloaded {os.path.getsize(out)/1024/1024:.1f} MB")
+          EOF
+
+      - name: Convert MOV to MP4
+        run: |
+          ffmpeg -y -i assets/testimoni_raw.MOV \
+            -c:v libx264 -preset fast -crf 22 \
+            -c:a aac -b:a 192k -movflags +faststart \
+            assets/testimoni.mp4
+          echo "Size: $(du -sh assets/testimoni.mp4)"
+
+      - name: Get video duration
+        run: |
+          DUR=$(ffprobe -v quiet -show_entries format=duration \
+            -of default=noprint_wrappers=1:nokey=1 assets/testimoni.mp4 | cut -d. -f1)
+          echo "VIDEO_DURATION=$DUR" >> $GITHUB_ENV
+          echo "Duration: ${DUR}s"
+
+      - name: Patch composition with participant data
+        run: |
+          python3 scripts/patch_composition.py \
+            --input compositions/testimonial.html \
+            --output compositions/testimonial_render.html \
+            --name "${{ github.event.inputs.participant_name }}" \
+            --role "${{ github.event.inputs.participant_role }}" \
+            --quote "${{ github.event.inputs.pull_quote }}"
+          sed -i "s/data-duration=\"90\"/data-duration=\"${VIDEO_DURATION}\"/" \
+            compositions/testimonial_render.html
+
+      - name: Lint composition
+        run: npx hyperframes lint compositions/testimonial_render.html || true
+
+      - name: Render to MP4
+        run: |
+          mkdir -p output
+          TS=$(date +%Y%m%d-%H%M)
+          OUT="output/dee-testimonial-${TS}.mp4"
+          echo "OUTPUT_FILE=$OUT" >> $GITHUB_ENV
+          npx hyperframes render compositions/testimonial_render.html \
+            --output "$OUT" --width 1080 --height 1920 --fps 30
+          echo "Rendered: $OUT ($(du -sh $OUT | cut -f1))"
+
+      - name: Upload to Hugging Face dataset
+        env:
+          HF_TOKEN: ${{ secrets.HF_TOKEN }}
+        run: |
+          python3 - <<'EOF'
+          import os
+          from huggingface_hub import HfApi
+          api = HfApi(token=os.environ["HF_TOKEN"])
+          out = os.environ["OUTPUT_FILE"]
+          fname = os.path.basename(out)
+          api.upload_file(
+              path_or_fileobj=out,
+              path_in_repo=f"renders/{fname}",
+              repo_id="AIgoose/video-renders",
+              repo_type="dataset",
+          )
+          url = f"https://huggingface.co/datasets/AIgoose/video-renders/resolve/main/renders/{fname}"
+          print(f"Video ready: {url}")
+          print(f"::notice title=Video Ready::{url}")
+          EOF
+
+      - name: Upload artifact (backup)
+        uses: actions/upload-artifact@v4
+        with:
+          name: testimonial-mp4
+          path: output/*.mp4
+          retention-days: 7

README.md

@@ -1,96 +1,58 @@
----
-title: Hyperframes Video Studio
-emoji: 🎬
-colorFrom: purple
-colorTo: pink
-sdk: docker
-app_port: 7860
-pinned: true
----
-
-# 🎬 Hyperframes Video Studio
-
-**Cloud video production studio powered by HyperFrames — Testimonial · Teaser · Trailer generator**
+# dee-video-studio
 
-Upload photos + videos from any client event → select a workflow → render a production-ready MP4 with captions and background music. No local setup required.
-
-🔗 **Live:** https://aigoose-hyperframes-video-studio.hf.space
+**HyperFrames x GitHub Actions x Hugging Face**  
+Testimonial video pipeline for Dee Ferdinand AI / MAIN AI.  
+No HeyGen subscription. No paid API. 100% open-source.
 
 ---
 
-## Workflows
-
-| Workflow | Duration | Format | Best For |
-|---|---|---|---|
-| 🏢 Corporate Testimonial | 75s | 9:16 | Corporate AI training social proof |
-| ⚡ Event Teaser | 30s | 9:16 | Upcoming event announcement |
-| 🎬 Cinematic Trailer | 60s | 9:16/16:9 | Program recap, brand video |
-| 🤝 Community Story | 60s | 9:16 | Community/church/NGO sessions |
-
----
+## Pipeline
 
-## How It Works
-
-1. **Upload** photos and videos from your event (drag & drop)
-2. **Select** workflow type (Testimonial / Teaser / Trailer / Community)
-3. **Fill** project details — client name, trainer name, tagline
-4. **Choose** background music (auto-matched or manual)
-5. **Render** — HyperFrames builds the composition and encodes MP4
-6. **Download** the finished video
+```
+Google Drive MOV
+  → gdown download (GitHub Actions)
+  → ffmpeg MOV→MP4
+  → patch_composition.py (inject name/role/quote)
+  → npx hyperframes render (headless Chrome + ffmpeg)
+  → HuggingFace dataset: AIgoose/video-renders
+```
 
 ---
 
-## Tech Stack
+## Run a render
 
-- **[HyperFrames](https://github.com/heygen-com/hyperframes)** (heygen-com) — HTML → MP4 rendering engine, Apache 2.0
-- **[FFmpeg](https://github.com/FFmpeg/FFmpeg)** — video encoding
-- **Chromium** — headless browser for frame rendering
-- **Node.js + Express** — REST API server
-- **WebSocket** — real-time render progress
-- **Pixabay Music** — 6 royalty-free tracks (free commercial use)
+**Actions → Render Testimonial Video → Run workflow**
 
-## Reference Repos
+| Input | What to fill |
+|-------|-------------|
+| `gdrive_file_id` | The ID from the Drive share URL |
+| `participant_name` | For the lower-third (e.g. Budi Santoso) |
+| `participant_role` | Role line (e.g. Head of Digital · PT Maju) |
+| `pull_quote` | Strongest spoken line in Indonesian |
 
-| Repo | Purpose |
-|---|---|
-| [heygen-com/hyperframes](https://github.com/heygen-com/hyperframes) | Core HTML→MP4 engine |
-| [heygen-com/hyperframes-launches](https://github.com/heygen-com/hyperframes-launches) | Production composition examples |
-| [calesthio/OpenMontage](https://github.com/calesthio/OpenMontage) | Agentic video pipeline patterns |
-| [mifi/editly](https://github.com/mifi/editly) | Declarative clip assembly |
-| [wzk1015/video-bgm-generation](https://github.com/wzk1015/video-bgm-generation) | AI video→music matching |
+Output lands at:  
+`https://huggingface.co/datasets/AIgoose/video-renders/resolve/main/renders/<filename>.mp4`
 
 ---
 
-## Background Music Library
-
-| Track | Mood | BPM | Auto-assigned to |
-|---|---|---|---|
-| corporate-motivation.mp3 | Corporate | 120 | Testimonial |
-| inspiring-cinematic.mp3 | Cinematic | 90 | Trailer |
-| upbeat-community.mp3 | Upbeat | 128 | Community |
-| warm-documentary.mp3 | Warm | 75 | Community Story |
-| tech-corporate.mp3 | Tech | 110 | Teaser |
-| action-sport.mp3 | Energetic | 145 | Event Teaser |
+## One-time setup
 
-All tracks: Pixabay License — free commercial use, no attribution required.
+1. **GitHub Secret**: Settings → Secrets → `HF_TOKEN` (your HF write token from hf.co/settings/tokens)
+2. **Drive permission**: Set the MOV to "Anyone with the link" → Viewer
 
 ---
 
-## API
+## Composition overlay map
 
-```bash
-GET  /api/health          # Health check
-GET  /api/workflows       # List workflows
-GET  /api/music           # List music tracks
-POST /api/render          # Start render job (multipart/form-data)
-GET  /api/jobs/:id        # Poll job status
-GET  /api/download/:id    # Download MP4
-```
-
-WebSocket: `wss://aigoose-hyperframes-video-studio.hf.space?job=JOB_ID`
+| Overlay | Timing | Description |
+|---------|--------|-------------|
+| Name card | 0–4s | Program name + brand |
+| Lower-third | 8–18s | Participant name + role |
+| Pull quote | 30–48s | Strongest spoken line |
+| Stat callout | 52–64s | 1,000+ professionals trained |
+| Feature chips | 66–78s | 80% hands-on, langsung praktek, real output |
+| Brand outro | 83–90s | Dee Ferdinand AI CTA |
 
 ---
 
-Built by Dee Ferdinand × Claude (Anthropic). HyperFrames by HeyGen — Apache 2.0.
-
-<!-- rebuild-trigger: 1781584816 -->
+HyperFrames: https://github.com/heygen-com/hyperframes

compositions/testimonial.html

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="id">
+<head>
+<meta charset="UTF-8">
+<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;900&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js"></script>
+<style>
+* { margin: 0; padding: 0; box-sizing: border-box; }
+body { background: #0d0d1f; overflow: hidden; }
+#root { position: relative; width: 1080px; height: 1920px; overflow: hidden; background: #0d0d1f; }
+.clip { position: absolute; }
+.sc { inset: 0; }
+</style>
+</head>
+<body>
+<div id="root"
+     data-composition-id="dee-testimonial"
+     data-start="0"
+     data-duration="90"
+     data-width="1080"
+     data-height="1920">
+
+  <!-- A-ROLL: original footage (muted video + separate audio element) -->
+  <video id="aroll-video" class="clip sc" src="../assets/testimoni.mp4"
+    data-start="0" data-duration="90" data-track-index="0"
+    muted playsinline style="object-fit:cover;width:100%;height:100%;"></video>
+
+  <audio id="aroll-audio" src="../assets/testimoni.mp4"
+    data-start="0" data-duration="90" data-track-index="10" data-volume="1.0"></audio>
+
+  <!-- Bottom vignette (persistent) -->
+  <div style="position:absolute;inset:0;pointer-events:none;
+    background:linear-gradient(to top,rgba(0,0,0,0.75) 0%,transparent 45%);z-index:5;"></div>
+
+  <!-- SCENE 1: NAME CARD 0-4s -->
+  <div id="s1-bg" class="clip sc" data-start="0" data-duration="4" data-track-index="1"
+    style="background:linear-gradient(180deg,rgba(13,13,31,0.72) 0%,transparent 40%);z-index:6;"></div>
+  <div id="s1-rule" class="clip" data-start="0.3" data-duration="3.5" data-track-index="2"
+    style="position:absolute;top:80px;left:56px;width:56px;height:3px;background:#7C6FE0;z-index:7;"></div>
+  <div id="s1-name" class="clip" data-start="0.4" data-duration="3.4" data-track-index="2"
+    style="position:absolute;top:96px;left:56px;right:56px;
+    font:700 72px/1.1 'Space Grotesk',sans-serif;color:#fff;letter-spacing:-1px;z-index:7;">
+    AI Transformation<br>Series</div>
+  <div id="s1-tag" class="clip" data-start="0.6" data-duration="3.2" data-track-index="2"
+    style="position:absolute;top:238px;left:56px;
+    font:500 32px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.65);z-index:7;">
+    Dee Ferdinand AI &middot; MAIN AI</div>
+
+  <!-- SCENE 2: LOWER-THIRD BAR 8-18s -->
+  <div id="s2-card" class="clip" data-start="8" data-duration="10" data-track-index="3"
+    style="position:absolute;bottom:180px;left:0;background:rgba(10,10,25,0.88);
+    border-left:6px solid #7C6FE0;border-radius:0 16px 16px 0;padding:20px 36px 20px 50px;z-index:8;">
+    <div style="font:700 40px/1.2 'Plus Jakarta Sans',sans-serif;color:#fff;">Peserta Training</div>
+    <div style="font:400 24px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.60);margin-top:6px;">
+      AI Transformation Series &middot; Batch 2026</div>
+  </div>
+
+  <!-- SCENE 3: PULL QUOTE 30-48s -->
+  <div id="s3-quote-bg" class="clip" data-start="30" data-duration="18" data-track-index="4"
+    style="position:absolute;bottom:220px;left:40px;right:40px;background:rgba(10,10,25,0.90);
+    border-radius:20px;padding:40px 44px;z-index:9;">
+    <div style="font:600 56px/1.3 'Plus Jakarta Sans',sans-serif;color:#fff;font-style:italic;">
+      &ldquo;Setelah training ini, tim kami langsung bisa praktek dan hasilnya nyata.&rdquo;</div>
+    <div style="margin-top:24px;font:400 28px/1 'Plus Jakarta Sans',sans-serif;color:#9EF0C8;">
+      &mdash; Peserta &middot; AI Transformation Series</div>
+  </div>
+
+  <!-- SCENE 4: STAT CALLOUT 52-64s -->
+  <div id="s4-stat" class="clip" data-start="52" data-duration="12" data-track-index="5"
+    style="position:absolute;top:80px;right:40px;background:rgba(124,111,224,0.18);
+    border:1.5px solid rgba(124,111,224,0.5);border-radius:16px;padding:28px 36px;
+    text-align:center;z-index:8;">
+    <div style="font:900 88px/1 'Space Grotesk',sans-serif;color:#7C6FE0;">1,000+</div>
+    <div style="font:500 28px/1.3 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.75);margin-top:10px;">
+      profesional terlatih<br>sejak 2023</div>
+  </div>
+
+  <!-- SCENE 5: FEATURE CHIPS 66-78s -->
+  <div id="s5-chip1" class="clip" data-start="66" data-duration="12" data-track-index="6"
+    style="position:absolute;bottom:380px;left:40px;background:#7C6FE0;border-radius:40px;padding:16px 32px;z-index:8;">
+    <span style="font:700 30px/1 'Plus Jakarta Sans',sans-serif;color:#fff;">80% hands-on</span></div>
+  <div id="s5-chip2" class="clip" data-start="67" data-duration="11" data-track-index="6"
+    style="position:absolute;bottom:310px;left:40px;background:rgba(158,240,200,0.15);
+    border:1.5px solid #9EF0C8;border-radius:40px;padding:16px 32px;z-index:8;">
+    <span style="font:700 30px/1 'Plus Jakarta Sans',sans-serif;color:#9EF0C8;">Langsung praktek</span></div>
+  <div id="s5-chip3" class="clip" data-start="68" data-duration="10" data-track-index="6"
+    style="position:absolute;bottom:240px;left:40px;background:rgba(224,111,154,0.15);
+    border:1.5px solid #E06F9A;border-radius:40px;padding:16px 32px;z-index:8;">
+    <span style="font:700 30px/1 'Plus Jakarta Sans',sans-serif;color:#E06F9A;">Real output &#x2713;</span></div>
+
+  <!-- SCENE 6: BRAND OUTRO 83-90s -->
+  <div id="s6-overlay" class="clip sc" data-start="83" data-duration="7" data-track-index="7"
+    style="background:linear-gradient(180deg,rgba(13,13,31,0) 0%,rgba(13,13,31,0.96) 60%);z-index:10;"></div>
+  <div id="s6-name" class="clip" data-start="83.5" data-duration="6.5" data-track-index="7"
+    style="position:absolute;bottom:320px;left:0;right:0;text-align:center;
+    font:800 72px/1.1 'Space Grotesk',sans-serif;color:#fff;z-index:11;">Dee Ferdinand</div>
+  <div id="s6-title" class="clip" data-start="84" data-duration="6" data-track-index="7"
+    style="position:absolute;bottom:260px;left:0;right:0;text-align:center;
+    font:500 36px/1 'Plus Jakarta Sans',sans-serif;color:#9990ee;z-index:11;">
+    AI Corporate Trainer &middot; MAIN AI</div>
+  <div id="s6-handle" class="clip" data-start="84.5" data-duration="5.5" data-track-index="7"
+    style="position:absolute;bottom:210px;left:0;right:0;text-align:center;
+    font:400 28px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.48);z-index:11;">
+    @deeferdinand &middot; deeferdinand.com</div>
+  <div id="s6-cta" class="clip" data-start="85" data-duration="5" data-track-index="7"
+    style="position:absolute;bottom:140px;left:0;right:0;text-align:center;
+    font:600 32px/1 'Plus Jakarta Sans',sans-serif;font-style:italic;color:#7C6FE0;z-index:11;">
+    Transform your team &#x2192;</div>
+
+  <!-- Persistent brand bar -->
+  <div style="position:absolute;bottom:0;left:0;right:0;padding:20px 56px 40px;
+    background:linear-gradient(transparent,rgba(0,0,0,0.60));z-index:6;">
+    <span style="font:700 26px/1 'Space Grotesk',sans-serif;color:#fff;">Dee Ferdinand</span>
+    <span style="font:400 18px/1 'Plus Jakarta Sans',sans-serif;color:rgba(255,255,255,0.55);margin-left:8px;">&middot; AI Corporate Trainer</span>
+  </div>
+
+  <!-- Grain overlay -->
+  <div style="position:absolute;inset:0;pointer-events:none;z-index:99;overflow:hidden;">
+    <div style="position:absolute;top:-50%;left:-50%;width:200%;height:200%;opacity:0.055;
+      background:url('data:image/svg+xml,%3Csvg viewBox=%270 0 256 256%27 xmlns=%27http://www.w3.org/2000/svg%27%3E%3Cfilter id=%27n%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%270.65%27 numOctaves=%273%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23n)%27/%3E%3C/svg%3E');"></div>
+  </div>
+</div>
+
+<script>
+const tl = gsap.timeline({ paused: true });
+tl.from("#s1-rule",  { scaleX:0, transformOrigin:"left", duration:0.25, ease:"expo.out" }, 0.3);
+tl.from("#s1-name",  { y:-80, autoAlpha:0, duration:0.28, ease:"expo.out" }, 0.4);
+tl.from("#s1-tag",   { y:40, autoAlpha:0, duration:0.35, ease:"power3.out" }, 0.6);
+tl.from("#s2-card",  { x:-500, autoAlpha:0, duration:0.40, ease:"power3.out" }, 8);
+tl.from("#s3-quote-bg", { y:60, autoAlpha:0, scale:0.96, duration:0.55, ease:"back.out(1.8)" }, 30);
+tl.to("#s3-quote-bg", { autoAlpha:0, duration:0.4, ease:"sine.inOut" }, 47);
+tl.from("#s4-stat", { y:-60, autoAlpha:0, scale:0.85, duration:0.45, ease:"back.out(2.2)" }, 52);
+tl.to("#s4-stat",   { autoAlpha:0, duration:0.3 }, 63.5);
+tl.from("#s5-chip1", { x:-120, autoAlpha:0, duration:0.30, ease:"power4.out" }, 66);
+tl.from("#s5-chip2", { x:-120, autoAlpha:0, duration:0.30, ease:"power4.out" }, 66.2);
+tl.from("#s5-chip3", { x:-120, autoAlpha:0, duration:0.30, ease:"power4.out" }, 66.4);
+tl.to(["#s5-chip1","#s5-chip2","#s5-chip3"], { autoAlpha:0, duration:0.3 }, 77.5);
+tl.from("#s6-overlay", { autoAlpha:0, duration:0.6, ease:"sine.inOut" }, 83);
+tl.from("#s6-name",    { y:40, autoAlpha:0, duration:0.45, ease:"power3.out" }, 83.5);
+tl.from("#s6-title",   { y:30, autoAlpha:0, duration:0.40, ease:"power3.out" }, 84);
+tl.from("#s6-handle",  { y:20, autoAlpha:0, duration:0.35, ease:"power3.out" }, 84.5);
+tl.from("#s6-cta",     { y:20, autoAlpha:0, duration:0.35, ease:"power3.out" }, 85);
+tl.set({}, {}, 90);
+window.__timelines = window.__timelines || {};
+window.__timelines["dee-testimonial"] = tl;
+</script>
+</div>
+</body>
+</html>

scripts/patch_composition.py

@@ -0,0 +1,30 @@
+#!/usr/bin/env python3
+"""patch_composition.py — inject participant name/role/quote before render"""
+import argparse, re
+
+def patch(html, name, role, quote):
+    html = re.sub(r'Peserta Training', name, html)
+    html = re.sub(r'AI Transformation Series · Batch 2026', role, html)
+    if quote:
+        html = re.sub(
+            r'(“)(.*?)(”)',
+            lambda m: f'“{quote}”',
+            html, flags=re.DOTALL
+        )
+    html = re.sub(r'Peserta · AI Transformation Series', f'{name} · AI Transformation Series', html)
+    return html
+
+def main():
+    p = argparse.ArgumentParser()
+    p.add_argument("--input", required=True)
+    p.add_argument("--output", required=True)
+    p.add_argument("--name", default="Peserta Training")
+    p.add_argument("--role", default="AI Transformation Series")
+    p.add_argument("--quote", default="")
+    args = p.parse_args()
+    with open(args.input, encoding="utf-8") as f: html = f.read()
+    with open(args.output, "w", encoding="utf-8") as f: f.write(patch(html, args.name, args.role, args.quote))
+    print(f"Patched: {args.output}")
+
+if __name__ == "__main__":
+    main()