AI Coding · Template Video

A Vietnamese article in. A 9:16 short out.
One command · zero editing · deterministic renders.

🌐 English · Tiếng Việt

_{Quick Start · How It Works · Usage · Templates}

The split that makes it reliable: AI handles content (the script + template choices), deterministic code handles production (the pixels). The same script.json always renders the same video — no surprises, no manual editing.

You supply the text. The templates own all the design, layout, and motion. The pipeline does TTS, sound design, rendering, and the final mux — and hands you three files ready for CapCut / TikTok / Shorts / Reels:

📚 Muốn làm chủ Claude Code? Học bài bản cùng AI Coding

Vibe Coding Thực Chiến với Claude Code: Từ Zero đến Hero
_{Senior AI Engineer @ AI Coding}

_{Setup  ·  Permission Modes  ·  Memory  ·  Hooks  ·  Skills  ·  MCP Servers  ·  Subagents  ·  GitHub
Từ zero đến hero — đúng cách build agent & tự động hoá như repo này.}

📚 Làm chủ Claude Cowork — Tự động hoá công việc hàng ngày

Làm chủ Claude Cowork - Tự động hoá các công việc hàng ngày
_{Senior AI Engineer @ AI Coding}

_{Setup  ·  Tổng hợp email  ·  Lên lịch chạy tự động  ·  Xử lý file  ·  Tạo report  ·  Tạo interactive dashboard  ·  Claude in chrome  ·} 

📺 Detailed guide: Watch the video walkthrough on YouTube

git clone https://github.com/huytranvan2010/AI-auto-generate-video.git
cd AI-auto-generate-video
npm install
# start your local OmniVoice server, then generate video

/create-template-video https://aicodingvn.vercel.app/some-article

npm run pipeline -- output/my-video/script.json

A few minutes later → output/<slug>/video.mp4 (1080×1920).

Note: The .agent directory has been added, so all these instructions work not only with Claude Code but can also work with other Coding Assistants, since everything here is a skill.

flowchart LR
    A["📰 URL / .txt"] -->|/create-template-video| B[Claude Code]
    B -->|fetch + write text| C["script.json<br/>renderer: hyperframes"]
    C -->|Zod validate| D[Template Pipeline]
    D -->|TTS per scene| E[OmniVoice]
    E -->|concat + SFX mix| F[voice.mp3]
    D -->|render each template| G["HyperFrames<br/>Chromium"]
    G -->|fit clip to narration| H["clips/scene-*.mp4"]
    F --> I[mux audio]
    H --> I
    I -->|🎬| J["video.mp4<br/>1080×1920"]

    style A fill:#0f172a,color:#fff,stroke:#334155
    style B fill:#6366f1,color:#fff,stroke:#6366f1
    style E fill:#f59e0b,color:#fff,stroke:#f59e0b
    style G fill:#ec4899,color:#fff,stroke:#ec4899
    style J fill:#10b981,color:#fff,stroke:#10b981

Eight deterministic steps in src/render/template-pipeline.ts:

TTS_PROVIDER=omnivoice
OMNIVOICE_ENDPOINT=http://127.0.0.1:8123

Inside Claude Code (recommended) — pass a URL or a local .txt:

/create-template-video https://aicodingvn.vercel.app/iphone-17-200mp
/create-template-video news/my-article.txt

The skill reads the content, writes script.json, and runs the pipeline. Authoring rules (template mapping + Vietnamese TTS number handling) live in the skill spec.

Or run the pipeline directly on an existing script.json:

npm run pipeline -- output/<slug>/script.json

{
    "version": "1.0",
    "renderer": "hyperframes",
    "aspect": "9:16",
    "metadata": {
        "title": "Apple ra mắt iPhone 17 camera 200MP",
        "source": {
            "url": "https://...",
            "domain": "aicodingvn.vercel.app",
            "image": null
        },
        "channel": "AI Coding"
    },
    "voice": { "provider": "omnivoice", "speed": 1.0 },
    "scenes": [
        {
            "id": "hook",
            "type": "hook",
            "voiceText": "Apple vừa ra mắt iPhone mười bảy với camera hai trăm megapixel.",
            "templateId": "frame-liquid-bg-hero",
            "inputs": {
                "kicker": "🔥 Tin nóng",
                "headline": "iPhone 17",
                "subheadline": "Camera 200MP",
                "cta": "Theo dõi ngay",
                "brand": "AI Coding"
            }
        },
        {
            "id": "body-1",
            "type": "body",
            "voiceText": "Cảm biến mới thu nhiều ánh sáng hơn, ảnh đêm sắc nét hơn rõ rệt.",
            "templateId": "frame-pentagram-stat",
            "inputs": {
                "label": "Camera",
                "headline": "200MP",
                "subtitle": "Cảm biến lớn nhất từ trước tới nay",
                "anchor": "200"
            }
        },
        {
            "id": "outro",
            "type": "outro",
            "voiceText": "Theo dõi AI Coding để xem bản tin công nghệ mới mỗi ngày.",
            "templateId": "frame-logo-outro",
            "inputs": {
                "brand_name": "AI Coding",
                "tagline": "Tin công nghệ mỗi ngày",
                "primary_url": "https://aicodingvn.vercel.app/"
            }
        }
    ]
}

output/<slug>-<timestamp>/
├── script.json          # input (skill-generated or hand-written)
├── script.txt           # all voiceText joined — CapCut auto-caption
├── voice/
│   ├── scene-hook.mp3    # TTS per scene (idempotent)
│   └── scene-*.mp3
├── voice-raw.mp3        # concatenated voices, no SFX (intermediate)
├── voice.mp3           # final audio with SFX mixed in
├── clips/
│   ├── scene-hook.mp4     # rendered template clip (idempotent)
│   └── scene-hook-fit.mp4 # fitted to the scene's narration length
├── video-silent.mp4    # concatenated clips, no audio (intermediate)
└── video.mp4          # 🎉 final — 1080×1920 + voice + SFX

Every visual is a self-contained HyperFrames project under templates/ — index.html (16:9) and compositions/portrait.html (9:16). You fill the text inputs; the template owns the design. Full slot reference: templates/CATALOG.md.

Add your own: drop templates/<id>/ with index.html, compositions/portrait.html, hyperframes.json, meta.json (+ NOTICE.md if vendored), then add a row to CATALOG.md. Use a Vietnamese-capable font stack.

SFX live in assets/sfx/<category>/<name>.mp3. Per scene, the picker (src/assets/sfx-selector.ts) resolves in three tiers:

1. scene.sfx override   → exact file, or { "name": "none" } to mute
2. semantic match        → voiceText keywords (cảnh báo→alert, kỷ lục→success, ra mắt→reveal …)
3. scene-type default    → hook→hook · body→callout · outro→outro

Within a category the file is chosen deterministically by hashing the scene id — same script gives the same SFX, different scenes get different files. The library is large and not committed:

npm run sfx:download   # fetch the SFX library
npm run sfx:filter     # prune / filter it

No assets/sfx/? The pipeline just renders without SFX.

• HyperFrames — the HTML-to-video engine behind the templates
• OmniVoice — local Vietnamese text-to-speech
• html-video — HTML-to-video approach this project builds on
• Auto-Create-Video — the original project this is based on

If this project saved you time, please consider:

• ⭐ Star this repo — it really helps with discoverability
• 🎓 Check out AI Coding's courses on Udemy
• 📱 Follow AI Coding on Facebook · TikTok · YouTube
• 💬 Tell a friend who creates content
• 🐛 Report bugs or request features