Kerwin AI Information

標籤: Hyperframes

  • 用 HTML 寫腳本做影片：Hyperframes 實戰

    用 HTML 寫腳本做影片：Hyperframes 實戰

    📌 本文重點

    • 用 HTML/TypeScript 把影片當「程式」來維護
    • Hyperframes 將腳本轉成可由 Agent 操控的影片時間軸
    • 適合 PRD/demo、教學文件與 SaaS 行銷影片自動化

    用 TypeScript/HTML 寫「腳本」，讓 Hyperframes 自動渲染成影片時間軸，工程師和產品團隊可以把影片當程式一樣維護、生成、版本控管。

    專案連結：heygen-com/hyperframes on GitHub

    核心功能：把 HTML 當「影片腳本」來寫

    Hyperframes 的一句話定位，就寫在專案首頁：Write HTML. Render video. Built for agents.

    💡 關鍵： 用你已熟悉的 HTML/TypeScript 寫腳本，就能直接生成可維護、可版本控管的影片時間軸。

    1. 用 HTML/TypeScript 描述「場景」

    你不需要學一套新語言，只要會寫基本 HTML + 一點 TypeScript 就能描述影片：

    • 文字：標題、段落、註解
    • 圖片：產品截圖、Logo、示意圖
    • 版面：位置、大小、對齊、動畫時間

    概念有點像「React for video」，只是畫面不是立刻出現在瀏覽器，而是被轉成可渲染的影片時間軸。

    你可以馬上做的事：

    • 想像你平常寫的 landing page，把那套 HTML 思維搬到「影片畫面描述」上
    • 打開一個 PRD 或 Markdown 文件，先用 HTML 把幾個關鍵畫面（標題 + 截圖 + 說明文字）寫成簡單的段落

    2. Hyperframes 轉成時間軸，可被 Agent 動態更新

    Hyperframes 負責兩件事：

    1. 解析你的 HTML/TypeScript 標記
    2. 把它轉成一個「每一秒要顯示什麼」的時間軸，供後端渲染成影片

    因為是程式化的時間軸，AI Agent 可以：

    • 根據使用者輸入，動態生成新的 HTML 段落
    • 修改某段文案 / 圖片，重算時間軸，只重渲染需要改的片段
    • 大量生成「同版面、不同內容」的客製化影片

    你可以馬上做的事：

    • 在腦中把「Premiere 的時間軸」換成「一個可被 AI 修改的 JSON」
    • 思考：你手上的哪類影片，其實只是在不同客戶之間改幾行字、改幾張圖？那些都可以交給 Agent + Hyperframes 自動跑

    3. 為多代理系統設計的「影片引擎」

    Hyperframes 是純 TypeScript 開源專案，設計上就是給 Agent / workflow 用：

    • 可在 Node.js 環境跑，方便接各家 LLM API（包含 Gemini Interactions API、Claude、OpenAI 等）
    • HTML 腳本可存 Git 版本控管，配合 CI/CD 產生最新版本影片資產
    • 適合作為「一個工具節點」，掛在你原有的多代理系統後面

    你可以馬上做的事：

    • 把 Hyperframes 想成「你的 AI pipeline 裡的一個 render-video step」
    • 在系統設計圖上加一個方塊：Agent → 產生 HTML → Hyperframes → 影片檔

    適合誰用：3 個具體場景

    1. 產品 demo 腳本自動化（從 PRD 產生影片）

    場景：你有詳細的 PRD / feature spec，現在要做：

    • 版本更新介紹影片
    • 產品 demo 給內部/客戶

    做法：

    1. 用 LLM 讀 PRD（例如 Gemini Interactions API / Claude），生成一份 HTML 腳本：
    2. 每個 section = 一個場景
    3. 為每個場景標註標題、說明文字、要顯示的截圖檔名
    4. 把這份 HTML 餵給 Hyperframes 轉成影片時間軸
    5. 配合螢幕錄影或靜態截圖，渲染出完整 demo 影片

    可以立刻行動：先選一份最常更新的產品功能說明，試著寫一版最陽春的 HTML 腳本（只有標題 + 一段文字），跑通「文字 → 影片」流程。

    2. 教學 / 文件影片化（Markdown → HTML → 影片）

    場景：你有大量技術文件或教學文章，只停留在文字。

    做法：

    1. 先把 Markdown 轉成 HTML（用現成工具或自己寫 parser 都可以）
    2. 用程式規則把特定標題階層變成影片「章節」
    3. Hyperframes 把每一章節變成一個場景，搭配插圖或 code snippet 截圖

    這樣，你就能：

    • 一鍵更新「教學影片」：只要 Markdown 更新，重新跑 pipeline 即可
    • 給客戶或新同事一份「看得懂」的版本

    可以立刻行動：挑一篇 README 或 API 文件，先用任何 Markdown → HTML 工具轉出 HTML，作為 Hyperframes 的 input 範例。

    3. SaaS 行銷頁 A/B 測試影片 + 客製化影片批量生成

    場景：你有 SaaS 產品，要測試不同文案 / 不同主打功能的影片版本，甚至為不同產業客戶客製化介紹。

    做法：

    • 固定版面：Logo 位置、背景、CTA 位置等寫死在 HTML 模板
    • 動態部分：標題、優點列表、案例截圖由 Agent 依據「產業 / Persona」填入
    • Hyperframes 讀模板 + 動態內容，批量生成 N 支影片

    可以立刻行動：先寫一份「固定版面 + placeholder 文案」的 HTML 模板，想好幾種 Persona，讓 Agent 幫你填字，再交給 Hyperframes 渲染。

    💡 關鍵： 把版面固定、內容變數化，可以穩定批量生成多版本影片，適合 A/B 測試和客製化行銷。

    怎麼開始：從 clone 專案到跑出第一支影片

    以下示範的是一條最小可用 pipeline：手寫 HTML → Hyperframes → 影片檔。

    1. 安裝與跑官方範例

    1. 先 clone 專案：

    bash
    git clone https://github.com/heygen-com/hyperframes.git
    cd hyperframes

    1. 安裝依賴（專案使用 pnpm，可改用 npm/yarn 依 README 說明）：

    bash
    pnpm install

    1. 跑官方範例（實際 script 名稱請以 repo README 為準，大致會類似）：

    bash
    pnpm demo
    # 或
    pnpm examples:simple

    執行成功後，你應該會在 output/ 或指定目錄下看到一支簡單的 mp4 影片。這一步的目標只有一個：先確認環境能渲染出影片。

    2. 寫一個最小 HTML → 影片 pipeline

    建立一個新檔 scripts/simple.ts，示範概念（示意程式碼，實際 API 以官方文件為準）：

    import { render } from "hyperframes";
import fs from "node:fs";

const html = `
  <scene duration="5">
    <layer>
      <text x="50" y="80" fontSize="42" align="center">
        用 HTML 寫腳本做影片
      </text>
      <text x="50" y="55" fontSize="24" align="center">
        這支影片是 Hyperframes 渲染出來的
      </text>
    </layer>
  </scene>
`;

async function main() {
  const videoBuffer = await render({
    html,
    width: 1920,
    height: 1080,
    fps: 30,
  });

  fs.writeFileSync("output/simple.mp4", videoBuffer);
}

main();

    然後在 package.json 新增指令：

    {
  "scripts": {
    "simple": "ts-node scripts/simple.ts"
  }
}

    執行：

    pnpm simple

    目標：確認自己可以從一段自訂 HTML，產生一支 mp4，並理解 HTML 每一行大概對應到畫面什麼東西。

    3. 接上自己的 LLM / Agent

    接下來，把「寫 HTML 腳本」交給 LLM 或 Agent：

    1. 準備一份輸入：PRD、Markdown、網站 HTML 等
    2. 在程式裡呼叫任意 LLM（本地模型或雲端 API 皆可）：

    ``ts
    async function generateHtmlFromPrd(prdText: string): Promise<string> {
    const prompt =    請根據以下 PRD 產生一段 Hyperframes 用的 HTML 腳本，
    拆成多個 ，每個 scene 3-5 秒，場景中包含主標題和一句說明：\n\n${prdText}`;

     const res = await callYourLLM(prompt); // 可接 Gemini Interactions API / Claude / OpenAI
 return res.html; // 規劃好讓模型回傳一整段 HTML

    }
    “`

    1. 把 html 換成 LLM 輸出的內容，其他 render 流程不變。

    建議實作順序：

    1. 先用手寫 HTML 確認渲染流程 OK
    2. 再加上 LLM 生 HTML
    3. 最後才整合到完整 Agent / workflow 中

    💡 關鍵： 先跑通「手寫 HTML → 影片」再接 LLM，可以把問題範圍縮小在腳本品質，而不是整條 pipeline。

    實戰 workflow 範例：網站 → 腳本 → 影片

    假設你已經有一個「website cloner」Agent（或直接用 Gemini/Claude 爬一個網址），可以這樣串：

    1. 抓網站內容：
    2. 把目標 landing page HTML 抓回來
    3. 抽出主要標題、副標、幾個關鍵區塊文字
    4. LLM 產生影片腳本 HTML：
    5. prompt：
      > 幫我把下面網站內容濃縮成 60 秒產品介紹影片腳本，輸出 Hyperframes HTML，拆成 4-5 個 scene，依序介紹痛點、解法、功能、CTA。
    6. Hyperframes 渲染影片：
    7. 把上一段產出的 HTML 餵給 Hyperframes
    8. 輸出一支 mp4，直接用在：
      • A/B 測試新版本 landing page
      • 業務寄給潛在客戶的「快速介紹影片」

    這整條線只要串完一次，以後對任何網址都能做到「自動 clone 成一支介紹影片」，只需要調整 prompt 和場景模板。

    小結：把影片當程式來維護

    Hyperframes 的價值在於：讓影片變成一個可以被 HTML / TypeScript、LLM、Agent 操控的「程式」，而不是一次性輸出的二進位檔。

    如果你身在工程或產品團隊，習慣用 Git 管規格、用 CI/CD 部署後端，Hyperframes 讓你用同樣思維管理影片資產，從文字文件一路自動化輸出可用的影片成果。

    🚀 你現在可以做的事

    • clone Hyperframes 專案並跑一次官方範例，確認能成功輸出 mp4
    • 手寫一份最小 HTML 腳本，跑通「HTML → Hyperframes → 影片」流程
    • 挑一份 PRD 或 README，嘗試讓你的 LLM 產生第一版影片腳本 HTML 並渲染出影片