這影片生成 AI 工具太狂！10 分鐘用 Codex + Hyperframe，把圖片、PDF、官網瞬間變成宣傳片，串聯 Google 生態系秒變動畫神人！【欸那個AJ】

欸那個AJ 首頁 每日列表 原始影片
實際影片長度：12:26.000。原文、繁中、雙語可點擊句子跳轉影片。
0:00.000–0:01.900
zh各位你不用會剪接軟體
0:01.900–0:04.200
zh你也可以製作出像這樣子的影片
0:04.200–0:06.400
zh你現在看到的這段高質感的影片
0:06.400–0:08.740
zh是不用任何剪輯軟體制作的
0:08.740–0:09.760
zh它的底層呢
0:09.760–0:13.280
zh只是一行行寫網頁的HTML原始碼
0:13.280–0:14.400
zh而這個東西叫做
0:14.400–0:16.780
zhHyperFrame的全新開源框架
0:16.780–0:18.120
zh將會顛覆你的認知
0:18.120–0:19.280
zh嗨各位又是我AJ
0:19.280–0:21.300
zh今天我們要教各位如何使用
0:21.300–0:22.760
enOpenAI Codex
0:22.760–0:26.440
zh來串聯這個最紅的影片生成工具
0:26.440–0:27.460
enHyperFrame
0:27.460–0:28.260
zh簡單來說呢
0:28.260–0:32.200
zh它把影片的軌道變成了網頁的結構
0:32.200–0:33.660
zh只要你懂這個邏輯
0:33.660–0:34.520
zh接下來呢
0:34.520–0:36.820
zh我們就可以請AI幫你把一張圖片
0:36.820–0:38.440
zh一份產品的PDF
0:38.440–0:40.440
zh甚至丟一個網站網址給它
0:40.440–0:41.700
zh只要一小段時間
0:41.700–0:43.200
zhAI就可以直接幫你生成
0:43.200–0:45.640
zh完成度極高的品牌宣傳影片
0:45.640–0:47.840
zh如果你每天還在為了解析度啊
0:47.840–0:48.880
zh轉場動畫啦
0:48.880–0:50.420
zh對齊軌道來抓狂啊
0:50.420–0:51.180
zh今天這支影片
0:51.180–0:53.980
zh會徹底重構你的工作流程
0:53.980–0:55.380
zh那話不多說我們就開始吧
0:55.380–0:58.060
zh來到了這個Codex之後呢
0:58.060–1:00.180
zh你可以開一個專案
1:00.180–1:01.680
zh比如說從零開始
1:01.680–1:03.240
zh然後你這個專案比如說就叫
1:03.240–1:05.540
enHyperFrame
1:05.540–1:07.540
zh然後把它儲存起來
1:07.540–1:09.620
zh好那開一個獨立的專案之後呢
1:09.620–1:12.600
zh接下來我們要來到外掛程式這個地方
1:12.600–1:13.940
zh搜尋HyperFrame
1:13.940–1:14.940
zh然後這邊會有一個加號
1:14.940–1:15.260
enOK
1:15.260–1:16.020
zh然後按下去
1:16.020–1:16.960
zh然後它就問你說
1:16.960–1:19.040
zh安裝HyperFrame by HayGen 按下去
1:20.740–1:21.540
zh這樣就裝好了
1:21.540–1:22.220
zh非常的簡單
1:22.220–1:23.280
zh裝好之後呢
1:23.280–1:24.760
zh你就可以進到HyperFrame的這個
1:24.760–1:25.680
zh剛剛你那個專案裡面
1:25.680–1:26.900
zh然後按開始聊天
1:26.900–1:28.500
zh那你要做什麼事情呢
1:28.500–1:29.440
zh比如說呢
1:29.440–1:33.080
zh我剛剛有抓了一個這個官網的這個截圖
1:33.080–1:34.280
zh我們有新的官網啦
1:34.280–1:35.660
zh如果你還沒有去過的話呢
1:35.660–1:37.200
zh我相信這支影片看完
1:37.200–1:38.400
zh你等一下就會去到那個官網
1:38.400–1:39.600
zh因為今天影片的提示詞
1:39.600–1:41.280
zh我們把它在官網裡面免費送給你
1:41.280–1:41.680
zh所以呢
1:41.680–1:44.120
zh我們把官網的這個截圖放在這個地方
1:44.640–1:45.180
zh然後呢
1:45.180–1:46.600
zh你只要很簡單的跟他講說
1:46.600–1:49.840
zh請使用HyperFrame
1:49.840–1:53.600
zh製作一個7秒鐘的
1:54.000–1:57.220
zh9比16的影片
1:58.020–1:59.600
zh這樣子送出
1:59.600–2:02.220
zh那它會用HyperFrame做一個7秒的直式短片
2:02.220–2:05.120
zh它會先理解專案結構還有HyperFrame的規範
2:05.120–2:07.220
zh然後建立修改那個Composite
2:07.220–2:08.040
zh確保是驗證
2:08.040–2:09.400
zhHyperFrame這個有趣的工具
2:09.400–2:11.300
zh你給它的格式非常非常的多
2:11.300–2:14.840
zh最最最簡單就是你直接給它一個圖片
2:14.840–2:16.400
zh它就可以照著做了
2:16.400–2:17.080
zh但是呢
2:17.080–2:19.760
zh它說目前資料夾看起來是空的
2:19.760–2:21.860
zh技能路徑跟清單不一致
2:21.860–2:23.860
zh我定位實際HyperFrame的技能跟
2:23.860–2:24.640
zhCLI 可用狀態
2:24.640–2:27.560
zh再決定初始化專案還是在系統結構上補齊
2:27.560–2:30.340
zh它就會自己去想辦法去把HyperFrame的這個
2:30.340–2:32.280
zhCLI 的這些相關的技能找到了
2:32.280–2:34.260
zh它就會去初始化一個專案
2:34.260–2:34.720
zh然後呢
2:34.720–2:37.740
zh截圖的這個深藍 金色 白色
2:37.740–2:40.080
zh星羽會去建立一個設計基準
2:40.080–2:41.060
zh它在設計的時候
2:41.060–2:45.200
zh它會去建構一個叫做Design.md的一份文件
2:45.200–2:47.140
zh那這個部分當然你都不用管它
2:47.140–2:49.460
zh反正總之Codex就會幫你搞定了
2:49.460–2:50.880
zh所以如果你不用Codex的話
2:50.880–2:52.680
zh那你就得下很多Prompt
2:52.680–2:53.120
zh但是呢
2:53.120–2:56.000
zh它會自己去建構所謂的這個設計的準則
2:56.000–2:57.980
zh然後來去幫你去做這樣的一個設計
2:57.980–3:01.220
zh所以 如果HyperFrame你要去生成一支短片的話
3:01.220–3:04.700
zh你可能就是真的只要很簡單的給它一張圖片
3:04.700–3:07.400
zh然後請它幫你生成一個影片
3:07.400–3:09.000
zh然後規格你可以下
3:09.000–3:11.140
zh比如說這個1080x1920
3:11.140–3:13.040
zh比如說就是直式的Short
3:13.040–3:14.520
zh那如果你今天是要做簡報
3:14.520–3:15.140
zh你就是橫式
3:15.140–3:16.240
zh那你就是16比9
3:16.240–3:17.120
zh這種橫式的
3:17.120–3:18.440
zh或是什麼1比1之類
3:18.440–3:20.000
zh你就直接提示值下給它
3:20.000–3:22.800
zh然後它就會開始幫你建立一個HTML
3:22.800–3:24.620
zh那這個地方就是它有趣的地方
3:24.620–3:27.600
zh它其實是在做網頁動畫
3:27.600–3:29.680
zh這件事情其實讓我想到就是
3:29.680–3:30.400
zh早年 不知道
3:30.400–3:32.440
zh各位有沒有學過像Flash之類的東西？
3:32.440–3:34.360
zh其實就是在一個畫布上面去
3:34.360–3:35.420
zh然後加上一些元件
3:35.420–3:37.980
zh然後去設定一些什麼關鍵幀之類的東西
3:37.980–3:39.120
zh然後把它拉來拉去有沒有
3:39.120–3:41.360
zh然後去設定說從這個地方要移動到這個地方
3:41.360–3:44.660
zh所以其實它就是在用網頁的方式
3:44.660–3:46.420
zh去把元件讓它飛來飛去
3:46.420–3:47.920
zh本質上是這樣子
3:47.920–3:49.580
zh所以裡面的細節你不用管
3:49.580–3:50.980
zh反正它會自己去處理這件事情
3:50.980–3:52.080
zh你只要等就好了
3:52.080–3:54.420
zh所以說我們使用Codex這樣一個工具
3:54.420–3:57.540
zh來去使用Hyperframe這樣的一個技能
3:57.540–3:58.640
zh那好處就是
3:58.640–4:00.780
zh反正Codex會幫你處理掉那些
4:00.780–4:02.840
zh你不知道怎麼樣下指令這樣的一個情境
4:02.840–4:04.900
zh當然 如果你熟悉的是使用
4:04.900–4:05.980
zh比如說像Cloud Code
4:05.980–4:07.880
zhCLI等等這些工具
4:07.880–4:10.580
zh基本上也是都可以通用的
4:10.580–4:11.660
zh只是你得自己下指令
4:11.660–4:14.380
zh那Codex這塊就做得比較Fancy一點
4:14.380–4:15.380
zh沒有那麼的可怕
4:15.380–4:18.260
zh所以它幫你建立了這個出版的
4:18.260–4:20.380
zhComposition已經建立完成
4:20.380–4:22.240
zh它會跑一個Hyperframe檢查視覺
4:22.240–4:24.940
zh然後找文字溢出尺寸或Timeline等等的問題
4:24.940–4:27.560
zh所以它會先生成一個Draft
4:27.560–4:29.380
zh然後會自己做這個Self-check
4:29.380–4:30.740
zh自檢品質檢查
4:30.740–4:31.640
zh然後檢查完了之後
4:31.640–4:33.200
zh看看有沒有問題
4:33.200–4:35.000
zh然後有問題它會自己再做一次修正
4:35.000–4:36.280
zh所以基本上你也不用管它
4:36.280–4:40.740
zh最終最終它會直接圖一個MP4的影片給你
4:40.740–4:42.540
zh所以沒有錯誤
4:42.540–4:44.320
zh然後它用了這個
4:44.320–4:45.500
zh然後正在編輯
4:45.500–4:48.460
zh然後它Logo對比時偵測偏低
4:48.460–4:51.340
zh把動畫移到GSAP
4:51.340–4:53.740
zhGSAP是一個去年開源
4:53.740–4:57.260
zh現在是免費的一個網頁動畫執行的方案
4:57.260–4:58.660
zh這支影片在做研究的時候
4:58.660–5:01.200
zh其實我們還要找到業界另外一個很有名的
5:01.200–5:03.360
zh叫做Remotion的架構
5:03.360–5:06.000
zh那不過Remotion跟這個Hyperframe
5:06.000–5:08.020
zh它實作的方式不太一樣
5:08.020–5:11.420
zhHyperframe它是用HTML這個方式來去做實作
5:11.420–5:13.920
zh那目前看起來效果我個人測下來
5:13.920–5:17.100
zh我覺得Hyperframe這邊在這個成功率
5:17.100–5:19.360
zh是比Remotion再高一些的
5:19.360–5:21.340
zh如果您對Remotion感興趣
5:21.340–5:22.800
zh或者是你本身有在用Remotion
5:22.800–5:24.680
zh你可以在影片下面留言跟大家分享一下
5:24.680–5:27.380
zh所以現在看起來它已經檢查完了沒有問題
5:27.380–5:29.440
zh然後要準備輸出MP4這個格式
5:29.440–5:30.580
zh所以這一切的一切
5:30.580–5:32.740
zh基本上都是在你的電腦裡面執行
5:32.740–5:35.900
zh你能想像它就是用網頁的形式去做動畫
5:35.900–5:38.520
zh然後再把網頁的那個動畫錄起來
5:38.520–5:40.660
zh變成一個MP4輸出過去給你
5:40.660–5:42.400
zh所以解析度還蠻不錯的
5:42.400–5:43.600
zh所以各位可以來看一下
5:46.680–5:48.180
zh好啦那做好之後呢
5:48.180–5:50.120
zh它會彈一個這個編輯視窗出來
5:50.120–5:52.060
zh那你可以在這個地方去做一些額外的調整
5:52.060–5:53.460
zh不過我建議如果你覺得不滿意
5:53.460–5:54.900
zh你就直接回去用提示詞的方式
5:54.900–5:55.760
zh叫它重做就好了
5:55.760–5:57.880
zh在這個地方最重要的事情是要把它下載下來
5:57.880–5:58.780
zh那下載在這個地方
5:58.780–6:00.420
zh左上角這個地方按一下下載
6:00.420–6:03.840
zh然後你可以在這個右邊的Inspector裡面
6:03.840–6:06.120
zh看到這個Render的這個狀態
6:06.120–6:09.160
zh就是它會去幫你把你的那個預覽的那個影片
6:09.160–6:11.940
zh真實的把它算成一個MP4的格式
6:11.940–6:14.540
zh那如果你有成功算出來的話呢
6:14.540–6:16.920
zh這個檔案你就可以直接把它下載下來
6:16.920–6:18.220
zh然後你就會看到這支影片
6:21.370–6:24.150
zh所以我給它一張橫式的圖片
6:24.150–6:27.050
zh它幫我重新塞進了直式的這個內容裡面
6:27.050–6:29.790
zh所以基本上如果你今天有一張簡報
6:29.790–6:32.010
zh你想要讓這張簡報變得活潑一點
6:32.010–6:34.650
zh那你只要把那張簡報截個圖丟進來
6:34.650–6:36.370
zh使用HyperFrame加Codex
6:36.370–6:37.010
zh基本上你
6:37.010–6:39.590
zh那個簡報就會變得非常非常的華麗了
6:39.590–6:41.630
zh這個是HyperFrame的一個最簡單的用法
6:41.630–6:43.590
zh後面還有一個非常酷炫的東西要跟各位分享
6:43.590–6:46.870
zh就是HyperFrame其實除了直接下指令
6:46.870–6:48.850
zh叫它做影片之外呢
6:48.850–6:54.530
zh那我們還準備了一個HyperFrame的參考文件
6:54.530–6:58.770
zh這裡面密密麻麻寫了HyperFrame超過50幾種
6:58.770–7:00.390
zh各種各式各樣影片製作的動畫
7:00.390–7:03.270
zh首先先把這份資料喂進去給Codex
7:03.270–7:05.230
zh去確保它 校準它
7:05.230–7:07.890
zh然後讓它可以不用出去查資料
7:07.890–7:09.430
zh你就可以去做更多的事情
7:09.430–7:11.030
zh那我們就把那份文件打開來
7:11.030–7:13.390
zh看一下HyperFrame到底可以做哪些事情
7:13.390–7:15.330
zhHyperFrame基本上 它的整個流程
7:15.330–7:16.150
zh我們就不講了
7:16.150–7:18.410
zh我們就直接看一些實際上的案例
7:18.410–7:19.690
zhHyperFrame可以做什麼事呢
7:19.690–7:21.430
zh它有50幾種 各種 各式各樣
7:21.430–7:22.990
zh它叫做Blocks的東西
7:22.990–7:24.130
zh那這裡面可以做什麼
7:24.130–7:26.490
zh它可以做IG的追蹤卡
7:26.490–7:27.890
zhTikTok的追蹤卡
7:27.890–7:29.830
zhTwitterX的貼文卡
7:29.830–7:31.350
zhReddit的貼文卡
7:31.350–7:32.450
zhSpotify的卡
7:32.450–7:34.830
zhYouTube訂閱的這個圖像卡
7:34.830–7:36.330
zh然後還有一些轉場
7:36.330–7:37.630
zh各種各式各樣的轉場
7:37.630–7:39.070
zh然後這是投影片用的
7:39.070–7:40.430
zh然後還有這是程式碼片段
7:40.430–7:43.090
zh如果你今天要秀程式碼要逐行顯示
7:43.090–7:44.990
zh你就可以帶這個程式碼這個主題
7:44.990–7:47.310
zh還有就是資料視覺化的
7:47.310–7:49.150
zh比如說有這個Data Chart
7:49.150–7:50.190
enFlow Chart
7:50.650–7:51.710
zh美國地圖
7:52.290–7:53.810
zh西班牙自治區地圖
7:53.810–7:55.210
zh世界地圖等等
7:55.210–7:57.450
zh然後還有一些就是UI類的東西
7:57.450–7:59.990
zh比如說iOS 16的這個玻璃
7:59.990–8:02.090
zh液態的這個畫面等等
8:02.090–8:04.910
zh然後還有一些各種各樣的什麼有機液體模擬
8:05.470–8:07.290
zh然後還有一些主題範例等等
8:07.290–8:09.310
zh這個答案 其實是我們從HyperFrame的官網
8:09.310–8:10.330
zh把它整理下來的一個
8:10.330–8:12.450
zh中文的這個提示詞的這個東西
8:12.450–8:14.130
zh是讓你的腦袋知道說
8:14.130–8:15.970
zh其實你還可以下哪些提示詞
8:15.970–8:17.270
zh然後關鍵字就在這個地方
8:17.270–8:18.030
zh第二個Demo
8:18.030–8:20.050
zh我們把這個東西作為參考之後
8:20.050–8:21.830
zh我們可以把一份文件
8:21.830–8:24.250
zh比如說最近Google Cloud
8:24.250–8:28.010
zh他們出了一份這個所謂的AI代理手冊
8:28.010–8:29.370
zh那我們就可以把這個
8:29.370–8:32.170
zhAI代理手冊的PDF把它丟進去
8:32.170–8:33.650
zh我提供了一份產品形錄
8:33.650–8:34.950
zh那用HyperFrame幫我做
8:34.950–8:36.670
zh一支20秒的橫式宣傳影片
8:36.670–8:39.670
zh然後每一頁轉成高解析度圖片傳到Assets
8:39.670–8:41.190
zh然後每頁停留4秒依序播放
8:41.190–8:42.930
zh所以基本上這個東西就是
8:42.930–8:44.610
zh我們基於這個提示詞
8:44.610–8:45.710
zh然後我給他一份PDF
8:45.710–8:48.610
zh所以我不一定要手動解給他
8:48.610–8:49.310
zh我可以把我的
8:49.310–8:52.290
zh這個簡報直接匯出成PDF的格式
8:52.290–8:53.290
zh然後把它丟進去
8:53.290–8:55.650
zh他就會自己去處理這件事情
8:55.650–8:58.110
zh所以他會讀了這個我們給他這個規則
8:58.110–9:00.150
zh然後他帶了HyperFrame、HyperFrame CLI
9:00.150–9:02.730
zh然後他去建所謂的這個獨立的專案
9:02.730–9:05.050
zh然後去動到原本的這個Video不要動它
9:05.050–9:06.810
zh然後他就去檢查PDF頁數
9:06.810–9:08.390
zh然後把PDF轉成圖片
9:08.390–9:11.130
zh然後再把這些圖片逐一的去生成影片
9:16.000–9:17.880
zh好啦經過了一小段時間呢
9:17.880–9:18.940
zh我們已經獲得了這個
9:18.940–9:19.800
zh那我就不匯出了
9:19.800–9:20.620
zh匯出剛剛講過了
9:20.620–9:22.260
zh我們就來看一下這次的成果如何
9:22.660–9:24.120
zh你看我給他一份PDF
9:24.120–9:25.220
zh我什麼都沒有幹嘛
9:25.220–9:28.080
zh然後他就自動的幫我做成了很漂亮的這個
9:28.080–9:31.420
zh有帶下面這個很漂亮的彩色時間軸這個功能
9:31.420–9:33.120
zh然後他會自動幫我放大一下
9:33.120–9:34.540
zh然後把我滑下一頁
9:34.540–9:37.600
zh就做成了一個非常非常漂亮簡單的
9:37.600–9:41.340
zh這個把簡報變成了動畫的這樣的一個形式
9:41.340–9:42.660
zh那我們進最後一個Demo
9:42.660–9:44.660
zh我們最近的這個官網上面
9:44.660–9:46.800
zh各位除了來索取提示詞之外呢
9:46.800–9:49.620
zh我最近其實也很認真的在更新AI學習筆記
9:49.620–9:51.420
zh會把我看到的一些學習心得
9:51.420–9:53.200
zh把它做成這個部落格文章
9:53.200–9:56.380
zh那這個黃仁勳黃爸爸也開了新的發表會啦
9:56.380–9:58.860
zh所以我又馬上談AIPC這個主題
9:58.860–10:00.640
zh所以呢我們就可以把
10:00.640–10:03.220
zh官網上的部落格的這個文章
10:03.580–10:05.600
zh比如說呢我們在這個地方
10:05.600–10:07.860
zh把這個部落格文章放進來
10:07.860–10:14.900
zh請幫我把網站上的部落格文章卡片
10:14.900–10:19.140
zh製作成1比1的動畫
10:19.140–10:24.320
zh抓進前五篇文章
10:24.320–10:29.520
zh用途是給LINE朋友快速理解
10:29.520–10:33.080
zh段落直接有切換特效動效樣式自選
10:33.080–10:34.500
zh所以各位可以看到
10:34.500–10:36.000
zh因為我們用了Codex
10:36.000–10:38.980
zh所以Codex可以幫你去抓網路上的資料
10:38.980–10:40.520
zh所以你可以直接跟我一樣
10:40.520–10:41.780
zh就丟一個網址進去
10:41.780–10:43.440
zh然後把你的願望寫一寫
10:43.440–10:45.640
zh那Codex就會幫你去抓
10:45.640–10:47.060
zh拿到部落格列表啦
10:47.060–10:48.560
zh前五篇都是六月下發表的
10:48.560–10:50.120
zhAIPC、AI簡報工具
10:50.120–10:51.640
zhCodex工作系統啦
10:51.640–10:54.140
zh教育 AI企業的策略啦
10:54.140–10:56.800
zh幫你做一個正方形動畫專案
10:56.800–10:57.900
zh內容壓縮成LINE的朋友
10:57.900–10:59.720
zh可以快速掃讀的節奏
10:59.720–11:02.700
zh所以你只要很簡單的去交代你的用途
11:02.700–11:03.280
zh比如說
11:03.280–11:05.460
zh你今天是要做這個YouTube的short啦
11:05.460–11:06.680
zhIG啦 TikTok啦
11:06.680–11:09.640
zh因為它後面其實是有一些相對應的模組
11:09.640–11:10.740
zh可以去實作的
11:10.740–11:12.760
zh那這個設計的細節
11:12.760–11:15.680
zh你就可以留給HyperFrame去做這樣一個發想
11:15.680–11:17.040
zh那其實結合Codex
11:17.040–11:18.940
zh我自己試過像Codex啦
11:18.940–11:19.920
zhAntiGravity啦
11:19.920–11:21.140
zh或者是Cloud Code
11:21.140–11:23.340
zh我之前用Cloud是用4.7的時候
11:23.340–11:27.380
zh那時候我覺得Cloud沒有Codex這麼厲害
11:27.380–11:29.980
zh但是Cloud現在有4.8了
11:29.980–11:32.920
zh聽說Cloud 4.8做出來的效果
11:32.920–11:36.440
zh會比GPT的Codex還要再好一點點
11:36.440–11:38.740
zh所以 如果你手上有付費的
11:38.740–11:40.360
zh這個Cloud 4.8的額度
11:40.360–11:41.080
zh用不完的話
11:41.080–11:42.780
zh你可以考慮用一下HyperFrame來去
11:42.780–11:43.300
zhtry try看
11:43.300–11:46.840
zh搞不好你會獲得這個意料之外的這個驚喜
11:46.840–11:48.340
zh好啦不到五分鐘呢
11:48.340–11:49.920
zh它就幫我做好一支影片啦
11:49.920–11:51.640
zh我們來點出來看一下吧
11:55.750–11:56.870
zh近期五篇
11:57.770–11:59.270
zh中文字都正確
12:00.410–12:01.210
zh第二篇
12:03.430–12:04.230
zh第三篇
12:05.270–12:06.330
zh第四篇
12:09.300–12:10.240
zh第五篇
12:10.240–12:12.260
zh還幫你把五大重點都整理回來
12:12.260–12:13.840
zh然後就變成一支22秒的影片
12:13.840–12:15.160
zh真的是了不起
12:15.160–12:17.380
zh以上就是我們這一集的教學影片內容
12:17.380–12:19.360
zh那如果你有一些很有趣的
12:19.360–12:21.360
zhHyperFrame的這個應用跟玩法
12:21.360–12:23.920
zh歡迎你在影片下面留言跟大家討論交流一下
12:23.920–12:25.480
zh那我們就下支影片見囉
12:25.480–12:25.980
zh掰掰
0:00.000–0:01.900
各位你不用會剪接軟體
0:01.900–0:04.200
你也可以製作出像這樣子的影片
0:04.200–0:06.400
你現在看到的這段高質感的影片
0:06.400–0:08.740
是不用任何剪輯軟體制作的
0:08.740–0:09.760
它的底層呢
0:09.760–0:13.280
只是一行行寫網頁的HTML原始碼
0:13.280–0:14.400
而這個東西叫做
0:14.400–0:16.780
HyperFrame的全新開源框架
0:16.780–0:18.120
將會顛覆你的認知
0:18.120–0:19.280
嗨各位又是我AJ
0:19.280–0:21.300
今天我們要教各位如何使用
0:21.300–0:22.760
OpenAI Codex
0:22.760–0:26.440
來串聯這個最紅的影片生成工具
0:26.440–0:27.460
HyperFrame
0:27.460–0:28.260
簡單來說呢
0:28.260–0:32.200
它把影片的軌道變成了網頁的結構
0:32.200–0:33.660
只要你懂這個邏輯
0:33.660–0:34.520
接下來呢
0:34.520–0:36.820
我們就可以請AI幫你把一張圖片
0:36.820–0:38.440
一份產品的PDF
0:38.440–0:40.440
甚至丟一個網站網址給它
0:40.440–0:41.700
只要一小段時間
0:41.700–0:43.200
AI就可以直接幫你生成
0:43.200–0:45.640
完成度極高的品牌宣傳影片
0:45.640–0:47.840
如果你每天還在為了解析度啊
0:47.840–0:48.880
轉場動畫啦
0:48.880–0:50.420
對齊軌道來抓狂啊
0:50.420–0:51.180
今天這支影片
0:51.180–0:53.980
會徹底重構你的工作流程
0:53.980–0:55.380
那話不多說我們就開始吧
0:55.380–0:58.060
來到了這個Codex之後呢
0:58.060–1:00.180
你可以開一個專案
1:00.180–1:01.680
比如說從零開始
1:01.680–1:03.240
然後你這個專案比如說就叫
1:03.240–1:05.540
HyperFrame
1:05.540–1:07.540
然後把它儲存起來
1:07.540–1:09.620
好那開一個獨立的專案之後呢
1:09.620–1:12.600
接下來我們要來到外掛程式這個地方
1:12.600–1:13.940
搜尋HyperFrame
1:13.940–1:14.940
然後這邊會有一個加號
1:14.940–1:15.260
OK
1:15.260–1:16.020
然後按下去
1:16.020–1:16.960
然後它就問你說
1:16.960–1:19.040
安裝HyperFrame by HayGen 按下去
1:20.740–1:21.540
這樣就裝好了
1:21.540–1:22.220
非常的簡單
1:22.220–1:23.280
裝好之後呢
1:23.280–1:24.760
你就可以進到HyperFrame的這個
1:24.760–1:25.680
剛剛你那個專案裡面
1:25.680–1:26.900
然後按開始聊天
1:26.900–1:28.500
那你要做什麼事情呢
1:28.500–1:29.440
比如說呢
1:29.440–1:33.080
我剛剛有抓了一個這個官網的這個截圖
1:33.080–1:34.280
我們有新的官網啦
1:34.280–1:35.660
如果你還沒有去過的話呢
1:35.660–1:37.200
我相信這支影片看完
1:37.200–1:38.400
你等一下就會去到那個官網
1:38.400–1:39.600
因為今天影片的提示詞
1:39.600–1:41.280
我們把它在官網裡面免費送給你
1:41.280–1:41.680
所以呢
1:41.680–1:44.120
我們把官網的這個截圖放在這個地方
1:44.640–1:45.180
然後呢
1:45.180–1:46.600
你只要很簡單的跟他講說
1:46.600–1:49.840
請使用HyperFrame
1:49.840–1:53.600
製作一個7秒鐘的
1:54.000–1:57.220
9比16的影片
1:58.020–1:59.600
這樣子送出
1:59.600–2:02.220
那它會用HyperFrame做一個7秒的直式短片
2:02.220–2:05.120
它會先理解專案結構還有HyperFrame的規範
2:05.120–2:07.220
然後建立修改那個Composite
2:07.220–2:08.040
確保是驗證
2:08.040–2:09.400
HyperFrame這個有趣的工具
2:09.400–2:11.300
你給它的格式非常非常的多
2:11.300–2:14.840
最最最簡單就是你直接給它一個圖片
2:14.840–2:16.400
它就可以照著做了
2:16.400–2:17.080
但是呢
2:17.080–2:19.760
它說目前資料夾看起來是空的
2:19.760–2:21.860
技能路徑跟清單不一致
2:21.860–2:23.860
我定位實際HyperFrame的技能跟
2:23.860–2:24.640
CLI 可用狀態
2:24.640–2:27.560
再決定初始化專案還是在系統結構上補齊
2:27.560–2:30.340
它就會自己去想辦法去把HyperFrame的這個
2:30.340–2:32.280
CLI 的這些相關的技能找到了
2:32.280–2:34.260
它就會去初始化一個專案
2:34.260–2:34.720
然後呢
2:34.720–2:37.740
截圖的這個深藍 金色 白色
2:37.740–2:40.080
星羽會去建立一個設計基準
2:40.080–2:41.060
它在設計的時候
2:41.060–2:45.200
它會去建構一個叫做Design.md的一份文件
2:45.200–2:47.140
那這個部分當然你都不用管它
2:47.140–2:49.460
反正總之Codex就會幫你搞定了
2:49.460–2:50.880
所以如果你不用Codex的話
2:50.880–2:52.680
那你就得下很多Prompt
2:52.680–2:53.120
但是呢
2:53.120–2:56.000
它會自己去建構所謂的這個設計的準則
2:56.000–2:57.980
然後來去幫你去做這樣的一個設計
2:57.980–3:01.220
所以 如果HyperFrame你要去生成一支短片的話
3:01.220–3:04.700
你可能就是真的只要很簡單的給它一張圖片
3:04.700–3:07.400
然後請它幫你生成一個影片
3:07.400–3:09.000
然後規格你可以下
3:09.000–3:11.140
比如說這個1080x1920
3:11.140–3:13.040
比如說就是直式的Short
3:13.040–3:14.520
那如果你今天是要做簡報
3:14.520–3:15.140
你就是橫式
3:15.140–3:16.240
那你就是16比9
3:16.240–3:17.120
這種橫式的
3:17.120–3:18.440
或是什麼1比1之類
3:18.440–3:20.000
你就直接提示值下給它
3:20.000–3:22.800
然後它就會開始幫你建立一個HTML
3:22.800–3:24.620
那這個地方就是它有趣的地方
3:24.620–3:27.600
它其實是在做網頁動畫
3:27.600–3:29.680
這件事情其實讓我想到就是
3:29.680–3:30.400
早年 不知道
3:30.400–3:32.440
各位有沒有學過像Flash之類的東西？
3:32.440–3:34.360
其實就是在一個畫布上面去
3:34.360–3:35.420
然後加上一些元件
3:35.420–3:37.980
然後去設定一些什麼關鍵幀之類的東西
3:37.980–3:39.120
然後把它拉來拉去有沒有
3:39.120–3:41.360
然後去設定說從這個地方要移動到這個地方
3:41.360–3:44.660
所以其實它就是在用網頁的方式
3:44.660–3:46.420
去把元件讓它飛來飛去
3:46.420–3:47.920
本質上是這樣子
3:47.920–3:49.580
所以裡面的細節你不用管
3:49.580–3:50.980
反正它會自己去處理這件事情
3:50.980–3:52.080
你只要等就好了
3:52.080–3:54.420
所以說我們使用Codex這樣一個工具
3:54.420–3:57.540
來去使用Hyperframe這樣的一個技能
3:57.540–3:58.640
那好處就是
3:58.640–4:00.780
反正Codex會幫你處理掉那些
4:00.780–4:02.840
你不知道怎麼樣下指令這樣的一個情境
4:02.840–4:04.900
當然 如果你熟悉的是使用
4:04.900–4:05.980
比如說像Cloud Code
4:05.980–4:07.880
CLI等等這些工具
4:07.880–4:10.580
基本上也是都可以通用的
4:10.580–4:11.660
只是你得自己下指令
4:11.660–4:14.380
那Codex這塊就做得比較Fancy一點
4:14.380–4:15.380
沒有那麼的可怕
4:15.380–4:18.260
所以它幫你建立了這個出版的
4:18.260–4:20.380
Composition已經建立完成
4:20.380–4:22.240
它會跑一個Hyperframe檢查視覺
4:22.240–4:24.940
然後找文字溢出尺寸或Timeline等等的問題
4:24.940–4:27.560
所以它會先生成一個Draft
4:27.560–4:29.380
然後會自己做這個Self-check
4:29.380–4:30.740
自檢品質檢查
4:30.740–4:31.640
然後檢查完了之後
4:31.640–4:33.200
看看有沒有問題
4:33.200–4:35.000
然後有問題它會自己再做一次修正
4:35.000–4:36.280
所以基本上你也不用管它
4:36.280–4:40.740
最終最終它會直接圖一個MP4的影片給你
4:40.740–4:42.540
所以沒有錯誤
4:42.540–4:44.320
然後它用了這個
4:44.320–4:45.500
然後正在編輯
4:45.500–4:48.460
然後它Logo對比時偵測偏低
4:48.460–4:51.340
把動畫移到GSAP
4:51.340–4:53.740
GSAP是一個去年開源
4:53.740–4:57.260
現在是免費的一個網頁動畫執行的方案
4:57.260–4:58.660
這支影片在做研究的時候
4:58.660–5:01.200
其實我們還要找到業界另外一個很有名的
5:01.200–5:03.360
叫做Remotion的架構
5:03.360–5:06.000
那不過Remotion跟這個Hyperframe
5:06.000–5:08.020
它實作的方式不太一樣
5:08.020–5:11.420
Hyperframe它是用HTML這個方式來去做實作
5:11.420–5:13.920
那目前看起來效果我個人測下來
5:13.920–5:17.100
我覺得Hyperframe這邊在這個成功率
5:17.100–5:19.360
是比Remotion再高一些的
5:19.360–5:21.340
如果您對Remotion感興趣
5:21.340–5:22.800
或者是你本身有在用Remotion
5:22.800–5:24.680
你可以在影片下面留言跟大家分享一下
5:24.680–5:27.380
所以現在看起來它已經檢查完了沒有問題
5:27.380–5:29.440
然後要準備輸出MP4這個格式
5:29.440–5:30.580
所以這一切的一切
5:30.580–5:32.740
基本上都是在你的電腦裡面執行
5:32.740–5:35.900
你能想像它就是用網頁的形式去做動畫
5:35.900–5:38.520
然後再把網頁的那個動畫錄起來
5:38.520–5:40.660
變成一個MP4輸出過去給你
5:40.660–5:42.400
所以解析度還蠻不錯的
5:42.400–5:43.600
所以各位可以來看一下
5:46.680–5:48.180
好啦那做好之後呢
5:48.180–5:50.120
它會彈一個這個編輯視窗出來
5:50.120–5:52.060
那你可以在這個地方去做一些額外的調整
5:52.060–5:53.460
不過我建議如果你覺得不滿意
5:53.460–5:54.900
你就直接回去用提示詞的方式
5:54.900–5:55.760
叫它重做就好了
5:55.760–5:57.880
在這個地方最重要的事情是要把它下載下來
5:57.880–5:58.780
那下載在這個地方
5:58.780–6:00.420
左上角這個地方按一下下載
6:00.420–6:03.840
然後你可以在這個右邊的Inspector裡面
6:03.840–6:06.120
看到這個Render的這個狀態
6:06.120–6:09.160
就是它會去幫你把你的那個預覽的那個影片
6:09.160–6:11.940
真實的把它算成一個MP4的格式
6:11.940–6:14.540
那如果你有成功算出來的話呢
6:14.540–6:16.920
這個檔案你就可以直接把它下載下來
6:16.920–6:18.220
然後你就會看到這支影片
6:21.370–6:24.150
所以我給它一張橫式的圖片
6:24.150–6:27.050
它幫我重新塞進了直式的這個內容裡面
6:27.050–6:29.790
所以基本上如果你今天有一張簡報
6:29.790–6:32.010
你想要讓這張簡報變得活潑一點
6:32.010–6:34.650
那你只要把那張簡報截個圖丟進來
6:34.650–6:36.370
使用HyperFrame加Codex
6:36.370–6:37.010
基本上你
6:37.010–6:39.590
那個簡報就會變得非常非常的華麗了
6:39.590–6:41.630
這個是HyperFrame的一個最簡單的用法
6:41.630–6:43.590
後面還有一個非常酷炫的東西要跟各位分享
6:43.590–6:46.870
就是HyperFrame其實除了直接下指令
6:46.870–6:48.850
叫它做影片之外呢
6:48.850–6:54.530
那我們還準備了一個HyperFrame的參考文件
6:54.530–6:58.770
這裡面密密麻麻寫了HyperFrame超過50幾種
6:58.770–7:00.390
各種各式各樣影片製作的動畫
7:00.390–7:03.270
首先先把這份資料喂進去給Codex
7:03.270–7:05.230
去確保它 校準它
7:05.230–7:07.890
然後讓它可以不用出去查資料
7:07.890–7:09.430
你就可以去做更多的事情
7:09.430–7:11.030
那我們就把那份文件打開來
7:11.030–7:13.390
看一下HyperFrame到底可以做哪些事情
7:13.390–7:15.330
HyperFrame基本上 它的整個流程
7:15.330–7:16.150
我們就不講了
7:16.150–7:18.410
我們就直接看一些實際上的案例
7:18.410–7:19.690
HyperFrame可以做什麼事呢
7:19.690–7:21.430
它有50幾種 各種 各式各樣
7:21.430–7:22.990
它叫做Blocks的東西
7:22.990–7:24.130
那這裡面可以做什麼
7:24.130–7:26.490
它可以做IG的追蹤卡
7:26.490–7:27.890
TikTok的追蹤卡
7:27.890–7:29.830
TwitterX的貼文卡
7:29.830–7:31.350
Reddit的貼文卡
7:31.350–7:32.450
Spotify的卡
7:32.450–7:34.830
YouTube訂閱的這個圖像卡
7:34.830–7:36.330
然後還有一些轉場
7:36.330–7:37.630
各種各式各樣的轉場
7:37.630–7:39.070
然後這是投影片用的
7:39.070–7:40.430
然後還有這是程式碼片段
7:40.430–7:43.090
如果你今天要秀程式碼要逐行顯示
7:43.090–7:44.990
你就可以帶這個程式碼這個主題
7:44.990–7:47.310
還有就是資料視覺化的
7:47.310–7:49.150
比如說有這個Data Chart
7:49.150–7:50.190
Flow Chart
7:50.650–7:51.710
美國地圖
7:52.290–7:53.810
西班牙自治區地圖
7:53.810–7:55.210
世界地圖等等
7:55.210–7:57.450
然後還有一些就是UI類的東西
7:57.450–7:59.990
比如說iOS 16的這個玻璃
7:59.990–8:02.090
液態的這個畫面等等
8:02.090–8:04.910
然後還有一些各種各樣的什麼有機液體模擬
8:05.470–8:07.290
然後還有一些主題範例等等
8:07.290–8:09.310
這個答案 其實是我們從HyperFrame的官網
8:09.310–8:10.330
把它整理下來的一個
8:10.330–8:12.450
中文的這個提示詞的這個東西
8:12.450–8:14.130
是讓你的腦袋知道說
8:14.130–8:15.970
其實你還可以下哪些提示詞
8:15.970–8:17.270
然後關鍵字就在這個地方
8:17.270–8:18.030
第二個Demo
8:18.030–8:20.050
我們把這個東西作為參考之後
8:20.050–8:21.830
我們可以把一份文件
8:21.830–8:24.250
比如說最近Google Cloud
8:24.250–8:28.010
他們出了一份這個所謂的AI代理手冊
8:28.010–8:29.370
那我們就可以把這個
8:29.370–8:32.170
AI代理手冊的PDF把它丟進去
8:32.170–8:33.650
我提供了一份產品形錄
8:33.650–8:34.950
那用HyperFrame幫我做
8:34.950–8:36.670
一支20秒的橫式宣傳影片
8:36.670–8:39.670
然後每一頁轉成高解析度圖片傳到Assets
8:39.670–8:41.190
然後每頁停留4秒依序播放
8:41.190–8:42.930
所以基本上這個東西就是
8:42.930–8:44.610
我們基於這個提示詞
8:44.610–8:45.710
然後我給他一份PDF
8:45.710–8:48.610
所以我不一定要手動解給他
8:48.610–8:49.310
我可以把我的
8:49.310–8:52.290
這個簡報直接匯出成PDF的格式
8:52.290–8:53.290
然後把它丟進去
8:53.290–8:55.650
他就會自己去處理這件事情
8:55.650–8:58.110
所以他會讀了這個我們給他這個規則
8:58.110–9:00.150
然後他帶了HyperFrame、HyperFrame CLI
9:00.150–9:02.730
然後他去建所謂的這個獨立的專案
9:02.730–9:05.050
然後去動到原本的這個Video不要動它
9:05.050–9:06.810
然後他就去檢查PDF頁數
9:06.810–9:08.390
然後把PDF轉成圖片
9:08.390–9:11.130
然後再把這些圖片逐一的去生成影片
9:16.000–9:17.880
好啦經過了一小段時間呢
9:17.880–9:18.940
我們已經獲得了這個
9:18.940–9:19.800
那我就不匯出了
9:19.800–9:20.620
匯出剛剛講過了
9:20.620–9:22.260
我們就來看一下這次的成果如何
9:22.660–9:24.120
你看我給他一份PDF
9:24.120–9:25.220
我什麼都沒有幹嘛
9:25.220–9:28.080
然後他就自動的幫我做成了很漂亮的這個
9:28.080–9:31.420
有帶下面這個很漂亮的彩色時間軸這個功能
9:31.420–9:33.120
然後他會自動幫我放大一下
9:33.120–9:34.540
然後把我滑下一頁
9:34.540–9:37.600
就做成了一個非常非常漂亮簡單的
9:37.600–9:41.340
這個把簡報變成了動畫的這樣的一個形式
9:41.340–9:42.660
那我們進最後一個Demo
9:42.660–9:44.660
我們最近的這個官網上面
9:44.660–9:46.800
各位除了來索取提示詞之外呢
9:46.800–9:49.620
我最近其實也很認真的在更新AI學習筆記
9:49.620–9:51.420
會把我看到的一些學習心得
9:51.420–9:53.200
把它做成這個部落格文章
9:53.200–9:56.380
那這個黃仁勳黃爸爸也開了新的發表會啦
9:56.380–9:58.860
所以我又馬上談AIPC這個主題
9:58.860–10:00.640
所以呢我們就可以把
10:00.640–10:03.220
官網上的部落格的這個文章
10:03.580–10:05.600
比如說呢我們在這個地方
10:05.600–10:07.860
把這個部落格文章放進來
10:07.860–10:14.900
請幫我把網站上的部落格文章卡片
10:14.900–10:19.140
製作成1比1的動畫
10:19.140–10:24.320
抓進前五篇文章
10:24.320–10:29.520
用途是給LINE朋友快速理解
10:29.520–10:33.080
段落直接有切換特效動效樣式自選
10:33.080–10:34.500
所以各位可以看到
10:34.500–10:36.000
因為我們用了Codex
10:36.000–10:38.980
所以Codex可以幫你去抓網路上的資料
10:38.980–10:40.520
所以你可以直接跟我一樣
10:40.520–10:41.780
就丟一個網址進去
10:41.780–10:43.440
然後把你的願望寫一寫
10:43.440–10:45.640
那Codex就會幫你去抓
10:45.640–10:47.060
拿到部落格列表啦
10:47.060–10:48.560
前五篇都是六月下發表的
10:48.560–10:50.120
AIPC、AI簡報工具
10:50.120–10:51.640
Codex工作系統啦
10:51.640–10:54.140
教育 AI企業的策略啦
10:54.140–10:56.800
幫你做一個正方形動畫專案
10:56.800–10:57.900
內容壓縮成LINE的朋友
10:57.900–10:59.720
可以快速掃讀的節奏
10:59.720–11:02.700
所以你只要很簡單的去交代你的用途
11:02.700–11:03.280
比如說
11:03.280–11:05.460
你今天是要做這個YouTube的short啦
11:05.460–11:06.680
IG啦 TikTok啦
11:06.680–11:09.640
因為它後面其實是有一些相對應的模組
11:09.640–11:10.740
可以去實作的
11:10.740–11:12.760
那這個設計的細節
11:12.760–11:15.680
你就可以留給HyperFrame去做這樣一個發想
11:15.680–11:17.040
那其實結合Codex
11:17.040–11:18.940
我自己試過像Codex啦
11:18.940–11:19.920
AntiGravity啦
11:19.920–11:21.140
或者是Cloud Code
11:21.140–11:23.340
我之前用Cloud是用4.7的時候
11:23.340–11:27.380
那時候我覺得Cloud沒有Codex這麼厲害
11:27.380–11:29.980
但是Cloud現在有4.8了
11:29.980–11:32.920
聽說Cloud 4.8做出來的效果
11:32.920–11:36.440
會比GPT的Codex還要再好一點點
11:36.440–11:38.740
所以 如果你手上有付費的
11:38.740–11:40.360
這個Cloud 4.8的額度
11:40.360–11:41.080
用不完的話
11:41.080–11:42.780
你可以考慮用一下HyperFrame來去
11:42.780–11:43.300
try try看
11:43.300–11:46.840
搞不好你會獲得這個意料之外的這個驚喜
11:46.840–11:48.340
好啦不到五分鐘呢
11:48.340–11:49.920
它就幫我做好一支影片啦
11:49.920–11:51.640
我們來點出來看一下吧
11:55.750–11:56.870
近期五篇
11:57.770–11:59.270
中文字都正確
12:00.410–12:01.210
第二篇
12:03.430–12:04.230
第三篇
12:05.270–12:06.330
第四篇
12:09.300–12:10.240
第五篇
12:10.240–12:12.260
還幫你把五大重點都整理回來
12:12.260–12:13.840
然後就變成一支22秒的影片
12:13.840–12:15.160
真的是了不起
12:15.160–12:17.380
以上就是我們這一集的教學影片內容
12:17.380–12:19.360
那如果你有一些很有趣的
12:19.360–12:21.360
HyperFrame的這個應用跟玩法
12:21.360–12:23.920
歡迎你在影片下面留言跟大家討論交流一下
12:23.920–12:25.480
那我們就下支影片見囉
12:25.480–12:25.980
掰掰
0:00.000–0:01.900
zh各位你不用會剪接軟體
各位你不用會剪接軟體
0:01.900–0:04.200
zh你也可以製作出像這樣子的影片
你也可以製作出像這樣子的影片
0:04.200–0:06.400
zh你現在看到的這段高質感的影片
你現在看到的這段高質感的影片
0:06.400–0:08.740
zh是不用任何剪輯軟體制作的
是不用任何剪輯軟體制作的
0:08.740–0:09.760
zh它的底層呢
它的底層呢
0:09.760–0:13.280
zh只是一行行寫網頁的HTML原始碼
只是一行行寫網頁的HTML原始碼
0:13.280–0:14.400
zh而這個東西叫做
而這個東西叫做
0:14.400–0:16.780
zhHyperFrame的全新開源框架
HyperFrame的全新開源框架
0:16.780–0:18.120
zh將會顛覆你的認知
將會顛覆你的認知
0:18.120–0:19.280
zh嗨各位又是我AJ
嗨各位又是我AJ
0:19.280–0:21.300
zh今天我們要教各位如何使用
今天我們要教各位如何使用
0:21.300–0:22.760
enOpenAI Codex
OpenAI Codex
0:22.760–0:26.440
zh來串聯這個最紅的影片生成工具
來串聯這個最紅的影片生成工具
0:26.440–0:27.460
enHyperFrame
HyperFrame
0:27.460–0:28.260
zh簡單來說呢
簡單來說呢
0:28.260–0:32.200
zh它把影片的軌道變成了網頁的結構
它把影片的軌道變成了網頁的結構
0:32.200–0:33.660
zh只要你懂這個邏輯
只要你懂這個邏輯
0:33.660–0:34.520
zh接下來呢
接下來呢
0:34.520–0:36.820
zh我們就可以請AI幫你把一張圖片
我們就可以請AI幫你把一張圖片
0:36.820–0:38.440
zh一份產品的PDF
一份產品的PDF
0:38.440–0:40.440
zh甚至丟一個網站網址給它
甚至丟一個網站網址給它
0:40.440–0:41.700
zh只要一小段時間
只要一小段時間
0:41.700–0:43.200
zhAI就可以直接幫你生成
AI就可以直接幫你生成
0:43.200–0:45.640
zh完成度極高的品牌宣傳影片
完成度極高的品牌宣傳影片
0:45.640–0:47.840
zh如果你每天還在為了解析度啊
如果你每天還在為了解析度啊
0:47.840–0:48.880
zh轉場動畫啦
轉場動畫啦
0:48.880–0:50.420
zh對齊軌道來抓狂啊
對齊軌道來抓狂啊
0:50.420–0:51.180
zh今天這支影片
今天這支影片
0:51.180–0:53.980
zh會徹底重構你的工作流程
會徹底重構你的工作流程
0:53.980–0:55.380
zh那話不多說我們就開始吧
那話不多說我們就開始吧
0:55.380–0:58.060
zh來到了這個Codex之後呢
來到了這個Codex之後呢
0:58.060–1:00.180
zh你可以開一個專案
你可以開一個專案
1:00.180–1:01.680
zh比如說從零開始
比如說從零開始
1:01.680–1:03.240
zh然後你這個專案比如說就叫
然後你這個專案比如說就叫
1:03.240–1:05.540
enHyperFrame
HyperFrame
1:05.540–1:07.540
zh然後把它儲存起來
然後把它儲存起來
1:07.540–1:09.620
zh好那開一個獨立的專案之後呢
好那開一個獨立的專案之後呢
1:09.620–1:12.600
zh接下來我們要來到外掛程式這個地方
接下來我們要來到外掛程式這個地方
1:12.600–1:13.940
zh搜尋HyperFrame
搜尋HyperFrame
1:13.940–1:14.940
zh然後這邊會有一個加號
然後這邊會有一個加號
1:14.940–1:15.260
enOK
OK
1:15.260–1:16.020
zh然後按下去
然後按下去
1:16.020–1:16.960
zh然後它就問你說
然後它就問你說
1:16.960–1:19.040
zh安裝HyperFrame by HayGen 按下去
安裝HyperFrame by HayGen 按下去
1:20.740–1:21.540
zh這樣就裝好了
這樣就裝好了
1:21.540–1:22.220
zh非常的簡單
非常的簡單
1:22.220–1:23.280
zh裝好之後呢
裝好之後呢
1:23.280–1:24.760
zh你就可以進到HyperFrame的這個
你就可以進到HyperFrame的這個
1:24.760–1:25.680
zh剛剛你那個專案裡面
剛剛你那個專案裡面
1:25.680–1:26.900
zh然後按開始聊天
然後按開始聊天
1:26.900–1:28.500
zh那你要做什麼事情呢
那你要做什麼事情呢
1:28.500–1:29.440
zh比如說呢
比如說呢
1:29.440–1:33.080
zh我剛剛有抓了一個這個官網的這個截圖
我剛剛有抓了一個這個官網的這個截圖
1:33.080–1:34.280
zh我們有新的官網啦
我們有新的官網啦
1:34.280–1:35.660
zh如果你還沒有去過的話呢
如果你還沒有去過的話呢
1:35.660–1:37.200
zh我相信這支影片看完
我相信這支影片看完
1:37.200–1:38.400
zh你等一下就會去到那個官網
你等一下就會去到那個官網
1:38.400–1:39.600
zh因為今天影片的提示詞
因為今天影片的提示詞
1:39.600–1:41.280
zh我們把它在官網裡面免費送給你
我們把它在官網裡面免費送給你
1:41.280–1:41.680
zh所以呢
所以呢
1:41.680–1:44.120
zh我們把官網的這個截圖放在這個地方
我們把官網的這個截圖放在這個地方
1:44.640–1:45.180
zh然後呢
然後呢
1:45.180–1:46.600
zh你只要很簡單的跟他講說
你只要很簡單的跟他講說
1:46.600–1:49.840
zh請使用HyperFrame
請使用HyperFrame
1:49.840–1:53.600
zh製作一個7秒鐘的
製作一個7秒鐘的
1:54.000–1:57.220
zh9比16的影片
9比16的影片
1:58.020–1:59.600
zh這樣子送出
這樣子送出
1:59.600–2:02.220
zh那它會用HyperFrame做一個7秒的直式短片
那它會用HyperFrame做一個7秒的直式短片
2:02.220–2:05.120
zh它會先理解專案結構還有HyperFrame的規範
它會先理解專案結構還有HyperFrame的規範
2:05.120–2:07.220
zh然後建立修改那個Composite
然後建立修改那個Composite
2:07.220–2:08.040
zh確保是驗證
確保是驗證
2:08.040–2:09.400
zhHyperFrame這個有趣的工具
HyperFrame這個有趣的工具
2:09.400–2:11.300
zh你給它的格式非常非常的多
你給它的格式非常非常的多
2:11.300–2:14.840
zh最最最簡單就是你直接給它一個圖片
最最最簡單就是你直接給它一個圖片
2:14.840–2:16.400
zh它就可以照著做了
它就可以照著做了
2:16.400–2:17.080
zh但是呢
但是呢
2:17.080–2:19.760
zh它說目前資料夾看起來是空的
它說目前資料夾看起來是空的
2:19.760–2:21.860
zh技能路徑跟清單不一致
技能路徑跟清單不一致
2:21.860–2:23.860
zh我定位實際HyperFrame的技能跟
我定位實際HyperFrame的技能跟
2:23.860–2:24.640
zhCLI 可用狀態
CLI 可用狀態
2:24.640–2:27.560
zh再決定初始化專案還是在系統結構上補齊
再決定初始化專案還是在系統結構上補齊
2:27.560–2:30.340
zh它就會自己去想辦法去把HyperFrame的這個
它就會自己去想辦法去把HyperFrame的這個
2:30.340–2:32.280
zhCLI 的這些相關的技能找到了
CLI 的這些相關的技能找到了
2:32.280–2:34.260
zh它就會去初始化一個專案
它就會去初始化一個專案
2:34.260–2:34.720
zh然後呢
然後呢
2:34.720–2:37.740
zh截圖的這個深藍 金色 白色
截圖的這個深藍 金色 白色
2:37.740–2:40.080
zh星羽會去建立一個設計基準
星羽會去建立一個設計基準
2:40.080–2:41.060
zh它在設計的時候
它在設計的時候
2:41.060–2:45.200
zh它會去建構一個叫做Design.md的一份文件
它會去建構一個叫做Design.md的一份文件
2:45.200–2:47.140
zh那這個部分當然你都不用管它
那這個部分當然你都不用管它
2:47.140–2:49.460
zh反正總之Codex就會幫你搞定了
反正總之Codex就會幫你搞定了
2:49.460–2:50.880
zh所以如果你不用Codex的話
所以如果你不用Codex的話
2:50.880–2:52.680
zh那你就得下很多Prompt
那你就得下很多Prompt
2:52.680–2:53.120
zh但是呢
但是呢
2:53.120–2:56.000
zh它會自己去建構所謂的這個設計的準則
它會自己去建構所謂的這個設計的準則
2:56.000–2:57.980
zh然後來去幫你去做這樣的一個設計
然後來去幫你去做這樣的一個設計
2:57.980–3:01.220
zh所以 如果HyperFrame你要去生成一支短片的話
所以 如果HyperFrame你要去生成一支短片的話
3:01.220–3:04.700
zh你可能就是真的只要很簡單的給它一張圖片
你可能就是真的只要很簡單的給它一張圖片
3:04.700–3:07.400
zh然後請它幫你生成一個影片
然後請它幫你生成一個影片
3:07.400–3:09.000
zh然後規格你可以下
然後規格你可以下
3:09.000–3:11.140
zh比如說這個1080x1920
比如說這個1080x1920
3:11.140–3:13.040
zh比如說就是直式的Short
比如說就是直式的Short
3:13.040–3:14.520
zh那如果你今天是要做簡報
那如果你今天是要做簡報
3:14.520–3:15.140
zh你就是橫式
你就是橫式
3:15.140–3:16.240
zh那你就是16比9
那你就是16比9
3:16.240–3:17.120
zh這種橫式的
這種橫式的
3:17.120–3:18.440
zh或是什麼1比1之類
或是什麼1比1之類
3:18.440–3:20.000
zh你就直接提示值下給它
你就直接提示值下給它
3:20.000–3:22.800
zh然後它就會開始幫你建立一個HTML
然後它就會開始幫你建立一個HTML
3:22.800–3:24.620
zh那這個地方就是它有趣的地方
那這個地方就是它有趣的地方
3:24.620–3:27.600
zh它其實是在做網頁動畫
它其實是在做網頁動畫
3:27.600–3:29.680
zh這件事情其實讓我想到就是
這件事情其實讓我想到就是
3:29.680–3:30.400
zh早年 不知道
早年 不知道
3:30.400–3:32.440
zh各位有沒有學過像Flash之類的東西？
各位有沒有學過像Flash之類的東西？
3:32.440–3:34.360
zh其實就是在一個畫布上面去
其實就是在一個畫布上面去
3:34.360–3:35.420
zh然後加上一些元件
然後加上一些元件
3:35.420–3:37.980
zh然後去設定一些什麼關鍵幀之類的東西
然後去設定一些什麼關鍵幀之類的東西
3:37.980–3:39.120
zh然後把它拉來拉去有沒有
然後把它拉來拉去有沒有
3:39.120–3:41.360
zh然後去設定說從這個地方要移動到這個地方
然後去設定說從這個地方要移動到這個地方
3:41.360–3:44.660
zh所以其實它就是在用網頁的方式
所以其實它就是在用網頁的方式
3:44.660–3:46.420
zh去把元件讓它飛來飛去
去把元件讓它飛來飛去
3:46.420–3:47.920
zh本質上是這樣子
本質上是這樣子
3:47.920–3:49.580
zh所以裡面的細節你不用管
所以裡面的細節你不用管
3:49.580–3:50.980
zh反正它會自己去處理這件事情
反正它會自己去處理這件事情
3:50.980–3:52.080
zh你只要等就好了
你只要等就好了
3:52.080–3:54.420
zh所以說我們使用Codex這樣一個工具
所以說我們使用Codex這樣一個工具
3:54.420–3:57.540
zh來去使用Hyperframe這樣的一個技能
來去使用Hyperframe這樣的一個技能
3:57.540–3:58.640
zh那好處就是
那好處就是
3:58.640–4:00.780
zh反正Codex會幫你處理掉那些
反正Codex會幫你處理掉那些
4:00.780–4:02.840
zh你不知道怎麼樣下指令這樣的一個情境
你不知道怎麼樣下指令這樣的一個情境
4:02.840–4:04.900
zh當然 如果你熟悉的是使用
當然 如果你熟悉的是使用
4:04.900–4:05.980
zh比如說像Cloud Code
比如說像Cloud Code
4:05.980–4:07.880
zhCLI等等這些工具
CLI等等這些工具
4:07.880–4:10.580
zh基本上也是都可以通用的
基本上也是都可以通用的
4:10.580–4:11.660
zh只是你得自己下指令
只是你得自己下指令
4:11.660–4:14.380
zh那Codex這塊就做得比較Fancy一點
那Codex這塊就做得比較Fancy一點
4:14.380–4:15.380
zh沒有那麼的可怕
沒有那麼的可怕
4:15.380–4:18.260
zh所以它幫你建立了這個出版的
所以它幫你建立了這個出版的
4:18.260–4:20.380
zhComposition已經建立完成
Composition已經建立完成
4:20.380–4:22.240
zh它會跑一個Hyperframe檢查視覺
它會跑一個Hyperframe檢查視覺
4:22.240–4:24.940
zh然後找文字溢出尺寸或Timeline等等的問題
然後找文字溢出尺寸或Timeline等等的問題
4:24.940–4:27.560
zh所以它會先生成一個Draft
所以它會先生成一個Draft
4:27.560–4:29.380
zh然後會自己做這個Self-check
然後會自己做這個Self-check
4:29.380–4:30.740
zh自檢品質檢查
自檢品質檢查
4:30.740–4:31.640
zh然後檢查完了之後
然後檢查完了之後
4:31.640–4:33.200
zh看看有沒有問題
看看有沒有問題
4:33.200–4:35.000
zh然後有問題它會自己再做一次修正
然後有問題它會自己再做一次修正
4:35.000–4:36.280
zh所以基本上你也不用管它
所以基本上你也不用管它
4:36.280–4:40.740
zh最終最終它會直接圖一個MP4的影片給你
最終最終它會直接圖一個MP4的影片給你
4:40.740–4:42.540
zh所以沒有錯誤
所以沒有錯誤
4:42.540–4:44.320
zh然後它用了這個
然後它用了這個
4:44.320–4:45.500
zh然後正在編輯
然後正在編輯
4:45.500–4:48.460
zh然後它Logo對比時偵測偏低
然後它Logo對比時偵測偏低
4:48.460–4:51.340
zh把動畫移到GSAP
把動畫移到GSAP
4:51.340–4:53.740
zhGSAP是一個去年開源
GSAP是一個去年開源
4:53.740–4:57.260
zh現在是免費的一個網頁動畫執行的方案
現在是免費的一個網頁動畫執行的方案
4:57.260–4:58.660
zh這支影片在做研究的時候
這支影片在做研究的時候
4:58.660–5:01.200
zh其實我們還要找到業界另外一個很有名的
其實我們還要找到業界另外一個很有名的
5:01.200–5:03.360
zh叫做Remotion的架構
叫做Remotion的架構
5:03.360–5:06.000
zh那不過Remotion跟這個Hyperframe
那不過Remotion跟這個Hyperframe
5:06.000–5:08.020
zh它實作的方式不太一樣
它實作的方式不太一樣
5:08.020–5:11.420
zhHyperframe它是用HTML這個方式來去做實作
Hyperframe它是用HTML這個方式來去做實作
5:11.420–5:13.920
zh那目前看起來效果我個人測下來
那目前看起來效果我個人測下來
5:13.920–5:17.100
zh我覺得Hyperframe這邊在這個成功率
我覺得Hyperframe這邊在這個成功率
5:17.100–5:19.360
zh是比Remotion再高一些的
是比Remotion再高一些的
5:19.360–5:21.340
zh如果您對Remotion感興趣
如果您對Remotion感興趣
5:21.340–5:22.800
zh或者是你本身有在用Remotion
或者是你本身有在用Remotion
5:22.800–5:24.680
zh你可以在影片下面留言跟大家分享一下
你可以在影片下面留言跟大家分享一下
5:24.680–5:27.380
zh所以現在看起來它已經檢查完了沒有問題
所以現在看起來它已經檢查完了沒有問題
5:27.380–5:29.440
zh然後要準備輸出MP4這個格式
然後要準備輸出MP4這個格式
5:29.440–5:30.580
zh所以這一切的一切
所以這一切的一切
5:30.580–5:32.740
zh基本上都是在你的電腦裡面執行
基本上都是在你的電腦裡面執行
5:32.740–5:35.900
zh你能想像它就是用網頁的形式去做動畫
你能想像它就是用網頁的形式去做動畫
5:35.900–5:38.520
zh然後再把網頁的那個動畫錄起來
然後再把網頁的那個動畫錄起來
5:38.520–5:40.660
zh變成一個MP4輸出過去給你
變成一個MP4輸出過去給你
5:40.660–5:42.400
zh所以解析度還蠻不錯的
所以解析度還蠻不錯的
5:42.400–5:43.600
zh所以各位可以來看一下
所以各位可以來看一下
5:46.680–5:48.180
zh好啦那做好之後呢
好啦那做好之後呢
5:48.180–5:50.120
zh它會彈一個這個編輯視窗出來
它會彈一個這個編輯視窗出來
5:50.120–5:52.060
zh那你可以在這個地方去做一些額外的調整
那你可以在這個地方去做一些額外的調整
5:52.060–5:53.460
zh不過我建議如果你覺得不滿意
不過我建議如果你覺得不滿意
5:53.460–5:54.900
zh你就直接回去用提示詞的方式
你就直接回去用提示詞的方式
5:54.900–5:55.760
zh叫它重做就好了
叫它重做就好了
5:55.760–5:57.880
zh在這個地方最重要的事情是要把它下載下來
在這個地方最重要的事情是要把它下載下來
5:57.880–5:58.780
zh那下載在這個地方
那下載在這個地方
5:58.780–6:00.420
zh左上角這個地方按一下下載
左上角這個地方按一下下載
6:00.420–6:03.840
zh然後你可以在這個右邊的Inspector裡面
然後你可以在這個右邊的Inspector裡面
6:03.840–6:06.120
zh看到這個Render的這個狀態
看到這個Render的這個狀態
6:06.120–6:09.160
zh就是它會去幫你把你的那個預覽的那個影片
就是它會去幫你把你的那個預覽的那個影片
6:09.160–6:11.940
zh真實的把它算成一個MP4的格式
真實的把它算成一個MP4的格式
6:11.940–6:14.540
zh那如果你有成功算出來的話呢
那如果你有成功算出來的話呢
6:14.540–6:16.920
zh這個檔案你就可以直接把它下載下來
這個檔案你就可以直接把它下載下來
6:16.920–6:18.220
zh然後你就會看到這支影片
然後你就會看到這支影片
6:21.370–6:24.150
zh所以我給它一張橫式的圖片
所以我給它一張橫式的圖片
6:24.150–6:27.050
zh它幫我重新塞進了直式的這個內容裡面
它幫我重新塞進了直式的這個內容裡面
6:27.050–6:29.790
zh所以基本上如果你今天有一張簡報
所以基本上如果你今天有一張簡報
6:29.790–6:32.010
zh你想要讓這張簡報變得活潑一點
你想要讓這張簡報變得活潑一點
6:32.010–6:34.650
zh那你只要把那張簡報截個圖丟進來
那你只要把那張簡報截個圖丟進來
6:34.650–6:36.370
zh使用HyperFrame加Codex
使用HyperFrame加Codex
6:36.370–6:37.010
zh基本上你
基本上你
6:37.010–6:39.590
zh那個簡報就會變得非常非常的華麗了
那個簡報就會變得非常非常的華麗了
6:39.590–6:41.630
zh這個是HyperFrame的一個最簡單的用法
這個是HyperFrame的一個最簡單的用法
6:41.630–6:43.590
zh後面還有一個非常酷炫的東西要跟各位分享
後面還有一個非常酷炫的東西要跟各位分享
6:43.590–6:46.870
zh就是HyperFrame其實除了直接下指令
就是HyperFrame其實除了直接下指令
6:46.870–6:48.850
zh叫它做影片之外呢
叫它做影片之外呢
6:48.850–6:54.530
zh那我們還準備了一個HyperFrame的參考文件
那我們還準備了一個HyperFrame的參考文件
6:54.530–6:58.770
zh這裡面密密麻麻寫了HyperFrame超過50幾種
這裡面密密麻麻寫了HyperFrame超過50幾種
6:58.770–7:00.390
zh各種各式各樣影片製作的動畫
各種各式各樣影片製作的動畫
7:00.390–7:03.270
zh首先先把這份資料喂進去給Codex
首先先把這份資料喂進去給Codex
7:03.270–7:05.230
zh去確保它 校準它
去確保它 校準它
7:05.230–7:07.890
zh然後讓它可以不用出去查資料
然後讓它可以不用出去查資料
7:07.890–7:09.430
zh你就可以去做更多的事情
你就可以去做更多的事情
7:09.430–7:11.030
zh那我們就把那份文件打開來
那我們就把那份文件打開來
7:11.030–7:13.390
zh看一下HyperFrame到底可以做哪些事情
看一下HyperFrame到底可以做哪些事情
7:13.390–7:15.330
zhHyperFrame基本上 它的整個流程
HyperFrame基本上 它的整個流程
7:15.330–7:16.150
zh我們就不講了
我們就不講了
7:16.150–7:18.410
zh我們就直接看一些實際上的案例
我們就直接看一些實際上的案例
7:18.410–7:19.690
zhHyperFrame可以做什麼事呢
HyperFrame可以做什麼事呢
7:19.690–7:21.430
zh它有50幾種 各種 各式各樣
它有50幾種 各種 各式各樣
7:21.430–7:22.990
zh它叫做Blocks的東西
它叫做Blocks的東西
7:22.990–7:24.130
zh那這裡面可以做什麼
那這裡面可以做什麼
7:24.130–7:26.490
zh它可以做IG的追蹤卡
它可以做IG的追蹤卡
7:26.490–7:27.890
zhTikTok的追蹤卡
TikTok的追蹤卡
7:27.890–7:29.830
zhTwitterX的貼文卡
TwitterX的貼文卡
7:29.830–7:31.350
zhReddit的貼文卡
Reddit的貼文卡
7:31.350–7:32.450
zhSpotify的卡
Spotify的卡
7:32.450–7:34.830
zhYouTube訂閱的這個圖像卡
YouTube訂閱的這個圖像卡
7:34.830–7:36.330
zh然後還有一些轉場
然後還有一些轉場
7:36.330–7:37.630
zh各種各式各樣的轉場
各種各式各樣的轉場
7:37.630–7:39.070
zh然後這是投影片用的
然後這是投影片用的
7:39.070–7:40.430
zh然後還有這是程式碼片段
然後還有這是程式碼片段
7:40.430–7:43.090
zh如果你今天要秀程式碼要逐行顯示
如果你今天要秀程式碼要逐行顯示
7:43.090–7:44.990
zh你就可以帶這個程式碼這個主題
你就可以帶這個程式碼這個主題
7:44.990–7:47.310
zh還有就是資料視覺化的
還有就是資料視覺化的
7:47.310–7:49.150
zh比如說有這個Data Chart
比如說有這個Data Chart
7:49.150–7:50.190
enFlow Chart
Flow Chart
7:50.650–7:51.710
zh美國地圖
美國地圖
7:52.290–7:53.810
zh西班牙自治區地圖
西班牙自治區地圖
7:53.810–7:55.210
zh世界地圖等等
世界地圖等等
7:55.210–7:57.450
zh然後還有一些就是UI類的東西
然後還有一些就是UI類的東西
7:57.450–7:59.990
zh比如說iOS 16的這個玻璃
比如說iOS 16的這個玻璃
7:59.990–8:02.090
zh液態的這個畫面等等
液態的這個畫面等等
8:02.090–8:04.910
zh然後還有一些各種各樣的什麼有機液體模擬
然後還有一些各種各樣的什麼有機液體模擬
8:05.470–8:07.290
zh然後還有一些主題範例等等
然後還有一些主題範例等等
8:07.290–8:09.310
zh這個答案 其實是我們從HyperFrame的官網
這個答案 其實是我們從HyperFrame的官網
8:09.310–8:10.330
zh把它整理下來的一個
把它整理下來的一個
8:10.330–8:12.450
zh中文的這個提示詞的這個東西
中文的這個提示詞的這個東西
8:12.450–8:14.130
zh是讓你的腦袋知道說
是讓你的腦袋知道說
8:14.130–8:15.970
zh其實你還可以下哪些提示詞
其實你還可以下哪些提示詞
8:15.970–8:17.270
zh然後關鍵字就在這個地方
然後關鍵字就在這個地方
8:17.270–8:18.030
zh第二個Demo
第二個Demo
8:18.030–8:20.050
zh我們把這個東西作為參考之後
我們把這個東西作為參考之後
8:20.050–8:21.830
zh我們可以把一份文件
我們可以把一份文件
8:21.830–8:24.250
zh比如說最近Google Cloud
比如說最近Google Cloud
8:24.250–8:28.010
zh他們出了一份這個所謂的AI代理手冊
他們出了一份這個所謂的AI代理手冊
8:28.010–8:29.370
zh那我們就可以把這個
那我們就可以把這個
8:29.370–8:32.170
zhAI代理手冊的PDF把它丟進去
AI代理手冊的PDF把它丟進去
8:32.170–8:33.650
zh我提供了一份產品形錄
我提供了一份產品形錄
8:33.650–8:34.950
zh那用HyperFrame幫我做
那用HyperFrame幫我做
8:34.950–8:36.670
zh一支20秒的橫式宣傳影片
一支20秒的橫式宣傳影片
8:36.670–8:39.670
zh然後每一頁轉成高解析度圖片傳到Assets
然後每一頁轉成高解析度圖片傳到Assets
8:39.670–8:41.190
zh然後每頁停留4秒依序播放
然後每頁停留4秒依序播放
8:41.190–8:42.930
zh所以基本上這個東西就是
所以基本上這個東西就是
8:42.930–8:44.610
zh我們基於這個提示詞
我們基於這個提示詞
8:44.610–8:45.710
zh然後我給他一份PDF
然後我給他一份PDF
8:45.710–8:48.610
zh所以我不一定要手動解給他
所以我不一定要手動解給他
8:48.610–8:49.310
zh我可以把我的
我可以把我的
8:49.310–8:52.290
zh這個簡報直接匯出成PDF的格式
這個簡報直接匯出成PDF的格式
8:52.290–8:53.290
zh然後把它丟進去
然後把它丟進去
8:53.290–8:55.650
zh他就會自己去處理這件事情
他就會自己去處理這件事情
8:55.650–8:58.110
zh所以他會讀了這個我們給他這個規則
所以他會讀了這個我們給他這個規則
8:58.110–9:00.150
zh然後他帶了HyperFrame、HyperFrame CLI
然後他帶了HyperFrame、HyperFrame CLI
9:00.150–9:02.730
zh然後他去建所謂的這個獨立的專案
然後他去建所謂的這個獨立的專案
9:02.730–9:05.050
zh然後去動到原本的這個Video不要動它
然後去動到原本的這個Video不要動它
9:05.050–9:06.810
zh然後他就去檢查PDF頁數
然後他就去檢查PDF頁數
9:06.810–9:08.390
zh然後把PDF轉成圖片
然後把PDF轉成圖片
9:08.390–9:11.130
zh然後再把這些圖片逐一的去生成影片
然後再把這些圖片逐一的去生成影片
9:16.000–9:17.880
zh好啦經過了一小段時間呢
好啦經過了一小段時間呢
9:17.880–9:18.940
zh我們已經獲得了這個
我們已經獲得了這個
9:18.940–9:19.800
zh那我就不匯出了
那我就不匯出了
9:19.800–9:20.620
zh匯出剛剛講過了
匯出剛剛講過了
9:20.620–9:22.260
zh我們就來看一下這次的成果如何
我們就來看一下這次的成果如何
9:22.660–9:24.120
zh你看我給他一份PDF
你看我給他一份PDF
9:24.120–9:25.220
zh我什麼都沒有幹嘛
我什麼都沒有幹嘛
9:25.220–9:28.080
zh然後他就自動的幫我做成了很漂亮的這個
然後他就自動的幫我做成了很漂亮的這個
9:28.080–9:31.420
zh有帶下面這個很漂亮的彩色時間軸這個功能
有帶下面這個很漂亮的彩色時間軸這個功能
9:31.420–9:33.120
zh然後他會自動幫我放大一下
然後他會自動幫我放大一下
9:33.120–9:34.540
zh然後把我滑下一頁
然後把我滑下一頁
9:34.540–9:37.600
zh就做成了一個非常非常漂亮簡單的
就做成了一個非常非常漂亮簡單的
9:37.600–9:41.340
zh這個把簡報變成了動畫的這樣的一個形式
這個把簡報變成了動畫的這樣的一個形式
9:41.340–9:42.660
zh那我們進最後一個Demo
那我們進最後一個Demo
9:42.660–9:44.660
zh我們最近的這個官網上面
我們最近的這個官網上面
9:44.660–9:46.800
zh各位除了來索取提示詞之外呢
各位除了來索取提示詞之外呢
9:46.800–9:49.620
zh我最近其實也很認真的在更新AI學習筆記
我最近其實也很認真的在更新AI學習筆記
9:49.620–9:51.420
zh會把我看到的一些學習心得
會把我看到的一些學習心得
9:51.420–9:53.200
zh把它做成這個部落格文章
把它做成這個部落格文章
9:53.200–9:56.380
zh那這個黃仁勳黃爸爸也開了新的發表會啦
那這個黃仁勳黃爸爸也開了新的發表會啦
9:56.380–9:58.860
zh所以我又馬上談AIPC這個主題
所以我又馬上談AIPC這個主題
9:58.860–10:00.640
zh所以呢我們就可以把
所以呢我們就可以把
10:00.640–10:03.220
zh官網上的部落格的這個文章
官網上的部落格的這個文章
10:03.580–10:05.600
zh比如說呢我們在這個地方
比如說呢我們在這個地方
10:05.600–10:07.860
zh把這個部落格文章放進來
把這個部落格文章放進來
10:07.860–10:14.900
zh請幫我把網站上的部落格文章卡片
請幫我把網站上的部落格文章卡片
10:14.900–10:19.140
zh製作成1比1的動畫
製作成1比1的動畫
10:19.140–10:24.320
zh抓進前五篇文章
抓進前五篇文章
10:24.320–10:29.520
zh用途是給LINE朋友快速理解
用途是給LINE朋友快速理解
10:29.520–10:33.080
zh段落直接有切換特效動效樣式自選
段落直接有切換特效動效樣式自選
10:33.080–10:34.500
zh所以各位可以看到
所以各位可以看到
10:34.500–10:36.000
zh因為我們用了Codex
因為我們用了Codex
10:36.000–10:38.980
zh所以Codex可以幫你去抓網路上的資料
所以Codex可以幫你去抓網路上的資料
10:38.980–10:40.520
zh所以你可以直接跟我一樣
所以你可以直接跟我一樣
10:40.520–10:41.780
zh就丟一個網址進去
就丟一個網址進去
10:41.780–10:43.440
zh然後把你的願望寫一寫
然後把你的願望寫一寫
10:43.440–10:45.640
zh那Codex就會幫你去抓
那Codex就會幫你去抓
10:45.640–10:47.060
zh拿到部落格列表啦
拿到部落格列表啦
10:47.060–10:48.560
zh前五篇都是六月下發表的
前五篇都是六月下發表的
10:48.560–10:50.120
zhAIPC、AI簡報工具
AIPC、AI簡報工具
10:50.120–10:51.640
zhCodex工作系統啦
Codex工作系統啦
10:51.640–10:54.140
zh教育 AI企業的策略啦
教育 AI企業的策略啦
10:54.140–10:56.800
zh幫你做一個正方形動畫專案
幫你做一個正方形動畫專案
10:56.800–10:57.900
zh內容壓縮成LINE的朋友
內容壓縮成LINE的朋友
10:57.900–10:59.720
zh可以快速掃讀的節奏
可以快速掃讀的節奏
10:59.720–11:02.700
zh所以你只要很簡單的去交代你的用途
所以你只要很簡單的去交代你的用途
11:02.700–11:03.280
zh比如說
比如說
11:03.280–11:05.460
zh你今天是要做這個YouTube的short啦
你今天是要做這個YouTube的short啦
11:05.460–11:06.680
zhIG啦 TikTok啦
IG啦 TikTok啦
11:06.680–11:09.640
zh因為它後面其實是有一些相對應的模組
因為它後面其實是有一些相對應的模組
11:09.640–11:10.740
zh可以去實作的
可以去實作的
11:10.740–11:12.760
zh那這個設計的細節
那這個設計的細節
11:12.760–11:15.680
zh你就可以留給HyperFrame去做這樣一個發想
你就可以留給HyperFrame去做這樣一個發想
11:15.680–11:17.040
zh那其實結合Codex
那其實結合Codex
11:17.040–11:18.940
zh我自己試過像Codex啦
我自己試過像Codex啦
11:18.940–11:19.920
zhAntiGravity啦
AntiGravity啦
11:19.920–11:21.140
zh或者是Cloud Code
或者是Cloud Code
11:21.140–11:23.340
zh我之前用Cloud是用4.7的時候
我之前用Cloud是用4.7的時候
11:23.340–11:27.380
zh那時候我覺得Cloud沒有Codex這麼厲害
那時候我覺得Cloud沒有Codex這麼厲害
11:27.380–11:29.980
zh但是Cloud現在有4.8了
但是Cloud現在有4.8了
11:29.980–11:32.920
zh聽說Cloud 4.8做出來的效果
聽說Cloud 4.8做出來的效果
11:32.920–11:36.440
zh會比GPT的Codex還要再好一點點
會比GPT的Codex還要再好一點點
11:36.440–11:38.740
zh所以 如果你手上有付費的
所以 如果你手上有付費的
11:38.740–11:40.360
zh這個Cloud 4.8的額度
這個Cloud 4.8的額度
11:40.360–11:41.080
zh用不完的話
用不完的話
11:41.080–11:42.780
zh你可以考慮用一下HyperFrame來去
你可以考慮用一下HyperFrame來去
11:42.780–11:43.300
zhtry try看
try try看
11:43.300–11:46.840
zh搞不好你會獲得這個意料之外的這個驚喜
搞不好你會獲得這個意料之外的這個驚喜
11:46.840–11:48.340
zh好啦不到五分鐘呢
好啦不到五分鐘呢
11:48.340–11:49.920
zh它就幫我做好一支影片啦
它就幫我做好一支影片啦
11:49.920–11:51.640
zh我們來點出來看一下吧
我們來點出來看一下吧
11:55.750–11:56.870
zh近期五篇
近期五篇
11:57.770–11:59.270
zh中文字都正確
中文字都正確
12:00.410–12:01.210
zh第二篇
第二篇
12:03.430–12:04.230
zh第三篇
第三篇
12:05.270–12:06.330
zh第四篇
第四篇
12:09.300–12:10.240
zh第五篇
第五篇
12:10.240–12:12.260
zh還幫你把五大重點都整理回來
還幫你把五大重點都整理回來
12:12.260–12:13.840
zh然後就變成一支22秒的影片
然後就變成一支22秒的影片
12:13.840–12:15.160
zh真的是了不起
真的是了不起
12:15.160–12:17.380
zh以上就是我們這一集的教學影片內容
以上就是我們這一集的教學影片內容
12:17.380–12:19.360
zh那如果你有一些很有趣的
那如果你有一些很有趣的
12:19.360–12:21.360
zhHyperFrame的這個應用跟玩法
HyperFrame的這個應用跟玩法
12:21.360–12:23.920
zh歡迎你在影片下面留言跟大家討論交流一下
歡迎你在影片下面留言跟大家討論交流一下
12:23.920–12:25.480
zh那我們就下支影片見囉
那我們就下支影片見囉
12:25.480–12:25.980
zh掰掰
掰掰

影片筆記：這影片生成 AI 工具太狂！10 分鐘用 Codex + Hyperframe，把圖片、PDF、官網瞬間變成宣傳片，串聯 Google 生態系秒變動畫神人！【欸那個AJ】

<!-- VIDEONOTE_PUBLICATION_WARNINGS_BEGIN -->

⚠️ 全文快速校讀發現待確認修正

本筆記已完成可閱讀的逐字稿與時間跳轉；下列為待處理問題，建議播放原片確認。

  • 待修正：⚠️ 全文快速校讀：已套用暫定修正，請確認（segment=67 已先套用暫定修正：那它會用HyperFrame做一個7秒的指示短片 → 那它會用HyperFrame做一個7秒的直式短片；segment=224 已先套用暫定修正：Ready的貼文卡 → Reddit的貼文卡）
  • 待修正：逐字稿可先使用，但有待校正清單（segment=240 rapid_semantic_review: 全文速讀上下文判斷；尚未回聽或交叉比對；segment=77 rapid_semantic_review: 上下文為AI自動生成的錯誤訊息）

<!-- VIDEONOTE_PUBLICATION_WARNINGS_END -->

一句話總結

影片介紹如何利用 OpenAI Codex 串聯開源框架 HyperFrame，透過自然語言提示詞將圖片、PDF 或網站網址轉化為高質感 HTML 動畫影片，無需傳統剪接軟體即可完成從素材到 MP4 輸出的全流程。

核心重點

  • 核心概念：HyperFrame 是一個將影片軌道轉化為網頁 HTML 結構的開源框架，本質上是透過網頁動畫（類似早期 Flash 邏輯）來製作影片，最後錄製為 MP4。
  • 工作流程重構：從手動調整軌道、轉場，轉變為提供素材（圖片/PDF/網址）給 AI 生成。使用者只需關注內容與提示詞，無需處理解析度、轉場、軌道對齊等細節。
  • 自動化處理：Codex 自動生成 HTML 結構、處理動畫邏輯、執行自我檢查（Self-check）與修正。
  • 應用場景：品牌宣傳、簡報轉動畫、社群媒體短影音（Shorts/Reels/TikTok）、部落格文章視覺化。
  • 工具比較：目前演示使用 OpenAI Codex，提及 Cloud Code 版本 4.7 與 4.8 可能效果更佳，並提及 AntiGravity 為可選工具。

詳細大綱

一、 前言與核心概念

  • 強調高質感影片可由 HTML 原始碼生成，無需傳統剪輯軟體。
  • 介紹 HyperFrame 為全新開源框架，將影片軌道變成網頁結構。
  • 工具組合為 OpenAI Codex + HyperFrame。

二、 環境設定與安裝

  • 在 Codex 中建立獨立專案（例如命名為 HyperFrame）。
  • 進入外掛程式搜尋「HyperFrame」。
  • 點擊加號安裝「HyperFrame by HayGen」。
  • 進入專案按「開始聊天」。

三、 實作演示 Demo 1：圖片轉直式短片

  • 輸入素材：官網截圖（深藍、金色、白色調）。
  • 提示詞指令：請使用 HyperFrame 製作 7 秒鐘、9:16 的影片。
  • 系統自動處理流程：
  1. 理解專案結構與 HyperFrame 規範。
  2. 建立/修改 Composite。
  3. 初始化專案，尋找 CLI 相關技能。
  4. 建立設計基準（Design.md），建構設計準則。
  5. 生成 HTML 網頁動畫。
  • 品質檢查：
  • 執行 HyperFrame 視覺檢查（文字溢出、尺寸、Timeline）。
  • 生成 Draft 並進行 Self-check（自檢）。
  • 若有問題自動修正。
  • 輸出結果：
  • 偵測到 Logo 對比偏低，自動將動畫移至 GSAP。
  • 輸出 MP4 格式。
  • 在編輯視窗下載影片。

四、 HyperFrame 功能模組介紹 (Blocks)

  • 官網提供超過 50 種動畫模組（Blocks），需先喂給 Codex 進行校準。
  • 社群媒體卡片：IG 追蹤卡、TikTok 追蹤卡、Twitter/X 貼文卡、Reddit 貼文卡、Spotify 卡、YouTube 訂閱圖像卡。
  • 轉場效果：各種轉場動畫。
  • 投影片與程式碼：投影片用轉場、程式碼片段逐行顯示。
  • 資料視覺化：Data Chart、Flow Chart、地圖（美國、西班牙自治區、世界地圖）。
  • UI 與特效：iOS 16 玻璃效果、液態畫面、有機液體模擬、主題範例。

五、 實作演示 Demo 2：PDF 轉橫式宣傳影片

  • 輸入素材：Google Cloud AI 代理手冊 PDF（或產品形錄）。
  • 提示詞指令：製作 20 秒橫式宣傳影片，每頁轉為高解析度圖片傳至 Assets，每頁停留 4 秒依序播放。
  • 系統處理邏輯：
  1. 讀取規則，帶入 HyperFrame CLI。
  2. 建立獨立專案。
  3. 檢查 PDF 頁數，將 PDF 轉為圖片。
  4. 逐一生成影片片段。
  • 輸出結果：
  • 帶有彩色時間軸。
  • 自動放大與滑頁效果。
  • 將靜態簡報轉為動態動畫。

六、 實作演示 Demo 3：網站網址轉社群動畫

  • 輸入素材：官網部落格文章網址。
  • 提示詞指令：
  1. 抓取網站前五篇文章。
  2. 製作 1:1 動畫。
  3. 用途：LINE 朋友快速理解。
  4. 段落切換特效、動效樣式自選。
  • 系統處理邏輯：
  1. Codex 抓取網路資料（部落格列表）。
  2. 識別文章主題（如 AIPC、AI 簡報工具、教育 AI 企業策略等）。
  3. 生成正方形動畫專案。
  4. 內容壓縮為適合快速掃讀的節奏。
  • 輸出結果：
  • 22 秒影片。
  • 中文字正確，整理五大重點。

七、 工具比較與建議

  • 工具對比：
  • Codex：目前演示使用，處理較 Fancy，適合不想下複雜指令的使用者。
  • Cloud Code：提及版本 4.7 與 4.8。據說 Cloud 4.8 效果可能比 GPT 的 Codex 更好。
  • AntiGravity：提及為可選工具。
  • 建議：若擁有付費 Cloud 4.8 額度，可嘗試使用 HyperFrame 獲得意外驚喜。
  • Remotion 架構：業界知名架構，但實作方式與 HyperFrame 不同（HyperFrame 成功率目前測試較高）。

工具 / 模型 / 名詞整理

  • OpenAI Codex：AI 程式碼生成工具，用於串聯 HyperFrame。
  • HyperFrame：全新開源框架，將影片軌道轉為網頁結構。
  • HayGen：HyperFrame 的外掛來源名稱（HyperFrame by HayGen）。
  • GSAP：網頁動畫執行方案（去年開源，現免費）。
  • Remotion：業界知名的影片生成架構。
  • Cloud Code：開發工具，提及版本 4.7 與 4.8。
  • AntiGravity：提及的工具名稱。
  • GPT：提及與 Codex 的比較。
  • CLI：Command Line Interface，HyperFrame 相關技能。
  • Composite：HyperFrame 中的組件/合成概念。
  • Design.md：系統自動建構的設計準則文件。
  • MP4：最終輸出影片格式。
  • HTML：影片生成的底層原始碼。
  • Flash：早年動畫軟體，用於比喻 HyperFrame 的元件移動邏輯。
  • 平台名稱：IG, TikTok, Twitter/X, Reddit, Spotify, YouTube, LINE。
  • 文件/產品：Google Cloud AI 代理手冊。

操作流程整理

  1. 環境準備：在 Codex 建立專案，安裝 HyperFrame 外掛。
  2. 輸入素材：提供圖片、PDF 文件或網站網址。
  3. 撰寫提示詞：指定影片長度、比例（如 9:16, 1:1）、內容要求。
  4. AI 生成與校準：
  • Codex 理解結構，建立 Composite。
  • 初始化專案，尋找 CLI 技能。
  • 建立 Design.md 設計準則。
  • 生成 HTML 網頁動畫。
  1. 自我檢查與修正：
  • 執行視覺檢查（文字溢出、尺寸、Timeline）。
  • 生成 Draft 並進行 Self-check。
  • 自動修正問題（如對比度調整、動畫移至 GSAP）。
  1. 輸出：下載 MP4 影片。

值得注意的限制或風險

  • 技術門檻轉移：雖然無需傳統剪接軟體，但仍需理解提示詞工程與 HyperFrame 的規範。
  • 依賴 AI 準確性：輸出品質依賴 Codex 對提示詞的理解及自我檢查機制，若 AI 判斷錯誤（如對比度、文字溢出）可能需多次迭代。
  • 版本與工具不確定性：提及的 Cloud Code 版本編號、AntiGravity 工具名稱、HayGen 與 HyperFrame 的關係均需進一步查證。
  • 主觀比較：關於 HyperFrame 成功率比 Remotion 高、Cloud 4.8 比 GPT Codex 好的說法，為講者個人測試或聽聞，非客觀標準。

逐字稿辨識疑點

  • HayGen：逐字稿中提到安裝「HyperFrame by HayGen」，HayGen 通常指代另一家影片生成公司，此處需查證是否為 HyperFrame 的開發者或特定版本名稱。
  • Cloud Code 4.8：逐字稿提到「Cloud 現在有 4.8 了」，需查證 Cloud Code 是否有此特定版本編號，或是否為口誤。
  • AntiGravity：逐字稿中提到「AntiGravity」，需查證是否為特定 AI 工具或框架的名稱，或為聽寫錯誤。
  • HyperFrame 的「HayGen」關聯：需查證 HyperFrame 是否確實由 HayGen 開發或相關。
  • GSAP 開源時間：逐字稿稱 GSAP 是「去年開源」，需查證 GSAP (GreenSock Animation Platform) 的授權狀態與開源時間點。
  • Remotion 與 HyperFrame 比較：逐字稿稱 HyperFrame 成功率比 Remotion 高，此為講者個人測試結果，屬主觀判斷。
  • Cloud Code 與 GPT 比較：逐字稿稱「Cloud 4.8 做出來的效果會比 GPT 的 Codex 還要再好一點點」，此為講者聽聞或個人經驗，需查證。

可延伸追問

  • HyperFrame 的開源協議為何？商業使用是否有授權限制？
  • Cloud Code 4.8 與 OpenAI Codex 在處理 HyperFrame 時的具體效能差異為何？
  • 如何手動調整 HyperFrame 生成的 HTML 代碼以獲得更精細的控制？
  • 對於大型 PDF 或複雜網站，HyperFrame 的處理上限與效能表現如何？
  • AntiGravity 工具具體功能為何，與 HyperFrame 有何協作關係？

尚未產生學習筆記

請在 Telegram 指令最後加上「學習」，例如：videonote 網址 英文 雙語 學習