逐字稿文字預覽
各位你不用會剪接軟體 你也可以製作出像這樣子的影片 你現在看到的這段高質感的影片 是不用任何剪輯軟體制作的 它的底層呢 只是一行行寫網頁的HTML原始碼 而這個東西叫做 HyperFrame的全新開源框架 將會顛覆你的認知 嗨各位又是我AJ 今天我們要教各位如何使用 OpenAI Codex 來串聯這個最紅的影片生成工具 HyperFrame 簡單來說呢 它把影片的軌道變成了網頁的結構 只要你懂這個邏輯 接下來呢 我們就可以請AI幫你把一張圖片 一份產品的PDF 甚至丟一個網站網址給它 只要一小段時間 AI就可以直接幫你生成 完成度極高的品牌宣傳影片 如果你每天還在為了解析度啊 轉場動畫啦 對齊軌道來抓狂啊 今天這支影片 會徹底重構你的工作流程 那話不多說我們就開始吧 來到了這個Codex之後呢 你可以開一個專案 比如說從零開始 然後你這個專案比如說就叫 HyperFrame 然後把它儲存起來 好那開一個獨立的專案之後呢 接下來我們要來到外掛程式這個地方 搜尋HyperFrame 然後這邊會有一個加號 OK 然後按下去 然後它就問你說 安裝HyperFrame by HayGen 按下去 這樣就裝好了 非常的簡單 裝好之後呢 你就可以進到HyperFrame的這個 剛剛你那個專案裡面 然後按開始聊天 那你要做什麼事情呢 比如說呢 我剛剛有抓了一個這個官網的這個截圖 我們有新的官網啦 如果你還沒有去過的話呢 我相信這支影片看完 你等一下就會去到那個官網 因為今天影片的提示詞 我們把它在官網裡面免費送給你 所以呢 我們把官網的這個截圖放在這個地方 然後呢 你只要很簡單的跟他講說 請使用HyperFrame 製作一個7秒鐘的 9比16的影片 這樣子送出 那它會用HyperFrame做一個7秒的直式短片 它會先理解專案結構還有HyperFrame的規範 然後建立修改那個Composite 確保是驗證 HyperFrame這個有趣的工具 你給它的格式非常非常的多 最最最簡單就是你直接給它一個圖片 它就可以照著做了 但是呢 它說目前資料夾看起來是空的 技能路徑跟清單不一致 我定位實際HyperFrame的技能跟 CLI 可用狀態 再決定初始化專案還是在系統結構上補齊 它就會自己去想辦法去把HyperFrame的這個 CLI 的這些相關的技能找到了 它就會去初始化一個專案 然後呢 截圖的這個深藍 金色 白色 星羽會去建立一個設計基準 它在設計的時候 它會去建構一個叫做Design. md的一份文件 那這個部分當然你都不用管它 反正總之Codex就會幫你搞定了 所以如果你不用Codex的話 那你就得下很多Prompt 但是呢 它會自己去建構所謂的這個設計的準則 然後來去幫你去做這樣的一個設計 所以 如果HyperFrame你要去生成一支短片的話 你可能就是真的只要很簡單的給它一張圖片 然後請它幫你生成一個影片 然後規格你可以下 比如說這個1080x1920 比如說就是直式的Short 那如果你今天是要做簡報 你就是橫式 那你就是16比9 這種橫式的 或是什麼1比1之類 你就直接提示值下給它 然後它就會開始幫你建立一個HTML 那這個地方就是它有趣的地方 它其實是在做網頁動畫 這件事情其實讓我想到就是 早年 不知道 各位有沒有學過像Flash之類的東西？ 其實就是在一個畫布上面去 然後加上一些元件 然後去設定一些什麼關鍵幀之類的東西 然後把它拉來拉去有沒有 然後去設定說從這個地方要移動到這個地方 所以其實它就是在用網頁的方式 去把元件讓它飛來飛去 本質上是這樣子 所以裡面的細節你不用管 反正它會自己去處理這件事情 你只要等就好了 所以說我們使用Codex這樣一個工具 來去使用Hyperframe這樣的一個技能 那好處就是 反正Codex會幫你處理掉那些 你不知道怎麼樣下指令這樣的一個情境 當然 如果你熟悉的是使用 比如說像Cloud Code CLI等等這些工具 基本上也是都可以通用的 只是你得自己下指令 那Codex這塊就做得比較Fancy一點 沒有那麼的可怕 所以它幫你建立了這個出版的 Composition已經建立完成 它會跑一個Hyperframe檢查視覺 然後找文字溢出尺寸或Timeline等等的問題 所以它會先生成一個Draft 然後會自己做這個Self-check 自檢品質檢查 然後檢查完了之後 看看有沒有問題 然後有問題它會自己再做一次修正 所以基本上你也不用管它 最終最終它會直接圖一個MP4的影片給你 所以沒有錯誤 然後它用了這個 然後正在編輯 然後它Logo對比時偵測偏低 把動畫移到GSAP GSAP是一個去年開源 現在是免費的一個網頁動畫執行的方案 這支影片在做研究的時候 其實我們還要找到業界另外一個很有名的 叫做Remotion的架構 那不過Remotion跟這個Hyperframe 它實作的方式不太一樣 Hyperframe它是用HTML這個方式來去做實作 那目前看起來效果我個人測下來 我覺得Hyperframe這邊在這個成功率 是比Remotion再高一些的 如果您對Remotion感興趣 或者是你本身有在用Remotion 你可以在影片下面留言跟大家分享一下 所以現在看起來它已經檢查完了沒有問題 然後要準備輸出MP4這個格式 所以這一切的一切 基本上都是在你的電腦裡面執行 你能想像它就是用網頁的形式去做動畫 然後再把網頁的那個動畫錄起來 變成一個MP4輸出過去給你 所以解析度還蠻不錯的 所以各位可以來看一下 好啦那做好之後呢 它會彈一個這個編輯視窗出來 那你可以在這個地方去做一些額外的調整 不過我建議如果你覺得不滿意 你就直接回去用提示詞的方式 叫它重做就好了 在這個地方最重要的事情是要把它下載下來 那下載在這個地方 左上角這個地方按一下下載 然後你可以在這個右邊的Inspector裡面 看到這個Render的這個狀態 就是它會去幫你把你的那個預覽的那個影片 真實的把它算成一個MP4的格式 那如果你有成功算出來的話呢 這個檔案你就可以直接把它下載下來 然後你就會看到這支影片 所以我給它一張橫式的圖片 它幫我重新塞進了直式的這個內容裡面 所以基本上如果你今天有一張簡報 你想要讓這張簡報變得活潑一點 那你只要把那張簡報截個圖丟進來 使用HyperFrame加Codex 基本上你 那個簡報就會變得非常非常的華麗了 這個是HyperFrame的一個最簡單的用法 後面還有一個非常酷炫的東西要跟各位分享 就是HyperFrame其實除了直接下指令 叫它做影片之外呢 那我們還準備了一個HyperFrame的參考文件 這裡面密密麻麻寫了HyperFrame超過50幾種 各種各式各樣影片製作的動畫 首先先把這份資料喂進去給Codex 去確保它 校準它 然後讓它可以不用出去查資料 你就可以去做更多的事情 那我們就把那份文件打開來 看一下HyperFrame到底可以做哪些事情 HyperFrame基本上 它的整個流程 我們就不講了 我們就直接看一些實際上的案例 HyperFrame可以做什麼事呢 它有50幾種 各種 各式各樣 它叫做Blocks的東西 那這裡面可以做什麼 它可以做IG的追蹤卡 TikTok的追蹤卡 TwitterX的貼文卡 Reddit的貼文卡 Spotify的卡 YouTube訂閱的這個圖像卡 然後還有一些轉場 各種各式各樣的轉場 然後這是投影片用的 然後還有這是程式碼片段 如果你今天要秀程式碼要逐行顯示 你就可以帶這個程式碼這個主題 還有就是資料視覺化的 比如說有這個Data Chart Flow Chart 美國地圖 西班牙自治區地圖 世界地圖等等 然後還有一些就是UI類的東西 比如說iOS 16的這個玻璃 液態的這個畫面等等 然後還有一些各種各樣的什麼有機液體模擬 然後還有一些主題範例等等 這個答案 其實是我們從HyperFrame的官網 把它整理下來的一個 中文的這個提示詞的這個東西 是讓你的腦袋知道說 其實你還可以下哪些提示詞 然後關鍵字就在這個地方 第二個Demo 我們把這個東西作為參考之後 我們可以把一份文件 比如說最近Google Cloud 他們出了一份這個所謂的AI代理手冊 那我們就可以把這個 AI代理手冊的PDF把它丟進去 我提供了一份產品形錄 那用HyperFrame幫我做 一支20秒的橫式宣傳影片 然後每一頁轉成高解析度圖片傳到Assets 然後每頁停留4秒依序播放 所以基本上這個東西就是 我們基於這個提示詞 然後我給他一份PDF 所以我不一定要手動解給他 我可以把我的 這個簡報直接匯出成PDF的格式 然後把它丟進去 他就會自己去處理這件事情 所以他會讀了這個我們給他這個規則 然後他帶了HyperFrame、HyperFrame CLI 然後他去建所謂的這個獨立的專案 然後去動到原本的這個Video不要動它 然後他就去檢查PDF頁數 然後把PDF轉成圖片 然後再把這些圖片逐一的去生成影片 好啦經過了一小段時間呢 我們已經獲得了這個 那我就不匯出了 匯出剛剛講過了 我們就來看一下這次的成果如何 你看我給他一份PDF 我什麼都沒有幹嘛 然後他就自動的幫我做成了很漂亮的這個 有帶下面這個很漂亮的彩色時間軸這個功能 然後他會自動幫我放大一下 然後把我滑下一頁 就做成了一個非常非常漂亮簡單的 這個把簡報變成了動畫的這樣的一個形式 那我們進最後一個Demo 我們最近的這個官網上面 各位除了來索取提示詞之外呢 我最近其實也很認真的在更新AI學習筆記 會把我看到的一些學習心得 把它做成這個部落格文章 那這個黃仁勳黃爸爸也開了新的發表會啦 所以我又馬上談AIPC這個主題 所以呢我們就可以把 官網上的部落格的這個文章 比如說呢我們在這個地方 把這個部落格文章放進來 請幫我把網站上的部落格文章卡片 製作成1比1的動畫 抓進前五篇文章 用途是給LINE朋友快速理解 段落直接有切換特效動效樣式自選 所以各位可以看到 因為我們用了Codex 所以Codex可以幫你去抓網路上的資料 所以你可以直接跟我一樣 就丟一個網址進去 然後把你的願望寫一寫 那Codex就會幫你去抓 拿到部落格列表啦 前五篇都是六月下發表的 AIPC、AI簡報工具 Codex工作系統啦 教育 AI企業的策略啦 幫你做一個正方形動畫專案 內容壓縮成LINE的朋友 可以快速掃讀的節奏 所以你只要很簡單的去交代你的用途 比如說 你今天是要做這個YouTube的short啦 IG啦 TikTok啦 因為它後面其實是有一些相對應的模組 可以去實作的 那這個設計的細節 你就可以留給HyperFrame去做這樣一個發想 那其實結合Codex 我自己試過像Codex啦 AntiGravity啦 或者是Cloud Code 我之前用Cloud是用4. 7的時候 那時候我覺得Cloud沒有Codex這麼厲害 但是Cloud現在有4. 8了 聽說Cloud 4. 8做出來的效果 會比GPT的Codex還要再好一點點 所以 如果你手上有付費的 這個Cloud 4. 8的額度 用不完的話 你可以考慮用一下HyperFrame來去 try try看 搞不好你會獲得這個意料之外的這個驚喜 好啦不到五分鐘呢 它就幫我做好一支影片啦 我們來點出來看一下吧 近期五篇 中文字都正確 第二篇 第三篇 第四篇 第五篇 還幫你把五大重點都整理回來 然後就變成一支22秒的影片 真的是了不起 以上就是我們這一集的教學影片內容 那如果你有一些很有趣的 HyperFrame的這個應用跟玩法 歡迎你在影片下面留言跟大家討論交流一下 那我們就下支影片見囉 掰掰
本次執行流程與問題處理
下達指令
預期流程
- 採用來源字幕（略過語音辨識）
- 來源選擇與品質檢查
- 文字校正與句子單元
- 筆記與發布
- 公開網頁發布
1. 下載與語音辨識
工具：videonote-transcribe-url（主辨識管線：下載、Whisper 辨識與選稿）
處理：下載音訊、以 Whisper 辨識並選出最佳逐字稿
產出：yt_dlp_meta.json（影片元資料）、audio_16k_mono.wav（16kHz 單聲道音訊）、transcript.whisper.json（Whisper 辨識結果）、transcript.json（正式逐字稿）、transcript_selection_report.json（來源選擇報告）
耗時：3.4 秒
關係：依序執行
結果：完成
2. 全文快速校讀
工具：videonote_rapid_transcript_review.py
處理：先速讀完整逐字稿，再修正高可信突兀詞句並列出待確認項目
產出：rapid_transcript_review_report.json（產出檔案）
耗時：33.5 秒
關係：依序執行
結果：完成
3. 建立句子單元
工具：videonote-build-sentence-units
處理：將逐字稿切成帶時間軸的句子單元
產出：sentence_units.json（句子單元）
耗時：0.6 秒
關係：依序執行
結果：完成
4. 時間軸稽核
工具：videonote_timeline_audit.py
處理：檢查時間軸與音訊對齊
產出：timeline_audit_report.json（時間軸稽核）
耗時：0.6 秒
關係：依序執行
結果：完成
5. 品質檢查
工具：videonote_controlled_quality.py（檢查時間軸與品質）
處理：檢查語言、時間軸與可讀性品質
產出：controlled_quality_report.json（品質報告）、language_sanity_report.json（語言檢查）
耗時：0.7 秒
關係：依序執行
結果：完成
6. 播放時間軸回填
工具：videonote_rebase_display_timeline.py
處理：將網頁播放時間軸回填為校正字幕時間
產出：display_timeline_rebase_report.json（時間軸回填報告）
耗時：0.7 秒
關係：依序執行
結果：完成
7. 來源句整理
工具：videonote_prepare_source_entries.py
處理：整理來源句子供時間軸與頁面使用
產出：sentence_units.json（句子單元）
耗時：0.7 秒
關係：依序執行
結果：完成
8. 生成筆記摘要
工具：videonote-generate-note（生成筆記摘要）
處理：生成筆記摘要與重點
產出：note.md（筆記 Markdown）、note.html（筆記 HTML）
耗時：102.0 秒
關係：依序執行
結果：完成
9. 建立筆記頁面
工具：videonote-render-html（產生筆記 HTML）
處理：產生可閱讀的筆記 HTML 頁面
產出：note.html（筆記 HTML）
耗時：0.1 秒
關係：依序執行
結果：完成
10. 發布公開頁面
工具：videonote-publish（發布公開頁面）
處理：發布到公開網站與每日列表
產出：公開筆記網址、result.json（管線結果）
耗時：0.2 秒
關係：依序執行
結果：完成
手動來源字幕
自動來源字幕
Whisper 字幕
- 尚未產生
Qwen 字幕
- 尚未產生
Parakeet 字幕
- 尚未產生
MOSS 字幕
- 尚未產生
聲學時間證據（PyAnnote / WhisperX）
- 尚未產生
校正前後逐字稿
目前待解決問題與初步改善方向
- ⚠️ 全文快速校讀：已套用暫定修正，請確認
segment=67 已先套用暫定修正：那它會用HyperFrame做一個7秒的指示短片 → 那它會用HyperFrame做一個7秒的直式短片；segment=224 已先套用暫定修正：Ready的貼文卡 → Reddit的貼文卡；segment=240 已先套用暫定修正：比如說iOS 26的這個玻璃 → 比如說iOS 16的這個玻璃；segment=304 已先套用暫定修正：抓進其的五篇文章 → 抓進前五篇文章；segment=240 待確認：「iOS 26」目前不存在（截至2024年iOS為17/18版）。聽錄可能為「iOS 16」或泛指「iOS 1x」系列。考慮到「玻璃」效果通常指iOS 7+的擬態風格，「16」聽起來比「26」更合理。標記待確認，建議核對實際版本號。；暫定：比如說iOS 16的這個玻璃；segment=77 待確認：技術術語聽錄可能不準確，需確認系統提示原文；暫定：技能路徑跟清單不一致；segment=86 待確認：「星羽」指代不明，可能是品牌名或聽錄錯誤；暫定：星羽會去建立一個設計基準；segment=320 待確認：語意不通，可能是「LINE貼文」或「LINE分享」；暫定：內容壓縮成LINE的朋友
- 逐字稿可先使用，但有待校正清單
segment=240 rapid_semantic_review: 全文速讀上下文判斷；尚未回聽或交叉比對；segment=77 rapid_semantic_review: 上下文為AI自動生成的錯誤訊息；segment=86 rapid_semantic_review: 前文提到顏色，後文提到設計基準；segment=320 rapid_semantic_review: 上下文為社群媒體分享；segment=332 rapid_semantic_review: 上下文提到Codex和Cloud Code
- Qwen3-ASR 未完成，需確認 qwen_asr_lab 環境與音訊後重試精進模式。
- 音訊下載不穩定，需更新 cookies / PO token 後重試精進模式。