日期：2024年 04月 21日

標籤： AI GIF Javascript Html Web FlexClip EzGif

摘要：資訊筆記

第一部分：Pika AI 圖片轉影片

Step 1：關於 Pika

Pika 的首頁介紹。
概要：目的是為了讓人們能快速製作影片

Pika was founded by two Stanford Ph.D students who felt making videos was too damn hard. 
So, they decided to make it easier for anyone to create video on command.

Step 2：收費方式

收費方式如下圖，免費版每天有 250 積分，生成 1 次 3 秒影片要耗費 10 積分
※一天可以免費生成 25 次，影片總計 75 秒

Step 3：準備一張圖

這是用 Stable Diffusion 製作的機器人圖，目標是產生跳舞的影片

Step 4：進入 Pika 官網

進入官網後 -> 連到 Discord

Step 5：進入 Discord

1. 左邊選擇 Pika 的群 -> 2. 10個組中任選進入
   
   
   

Step 6：輸入 Prompt - 1

右下角可以輸入 Prompt -> 起手輸入 \ 字符開始

Step 7：輸入 Prompt - 2

增加 image 圖片，滑鼠點擊上傳

Step 8：執行 Prompt

上傳後，按下執行

Step 9：等待產生

會得到系統的一個回覆，接著等待

Step 10：產生影片

最後可以得到 3 秒影片

下載後，得到 1 個 .mp4 影片

第二部分：FlexClip 編輯影片

Step 1：關於 FlexClip

FlexClip 的首頁介紹。
概要：使用 FlexClip 輕鬆實現線上影片編輯和創作

Step 2：收費方式

收費方式如下圖，免費版最多可以剪 10 分鐘影片，製作 GIF 是很堪用
※免費版會有浮水印

Step 3：登入 FlexClip - 1

右上角 -> Sign Up 進行登入

Step 4：登入 FlexClip - 2

可以直接用 Google 帳戶進行登入

Step 5：上傳影片 - 1

進入後選擇上傳影片

Step 6：上傳影片 - 2

上傳後 -> 滑鼠拖曳到下方的時間軸

Step 7：拖曳 2 份影片

如果只有一份影片，會有不連貫性的問題，因此要拖曳 2 份影片

Step 8：倒轉影片

後半段的影片進行倒轉：

倒轉影片過程：

Step 9：裁剪影片

再將兩份影片去頭、去尾
※可以依照自己的需求，若 GIF 想要持續久的動作，可以省略此步驟

Step 10：裁剪影片 - 完成

最後產生 3 秒的影片

Step 11：輸出影片 - GIF

右上角選擇輸出 GIF

Step 12：輸出影片 - 完成

完成後，可以看到 GIF 的 3 秒 480p 的檔案要 4MB 如果放在網站使用會是嚴重的效能問題

第三部分：EzGif 產生 Gif

Step 1：關於 EzGif

EzGif 的首頁介紹。
概要：免費編輯各種影片、圖檔

Ezgif.com is a simple, free online GIF maker and toolset for basic animated image editing.
Here you can create, edit and convert GIF, APNG, WebP, MNG and AVIF animations.

Step 2：編輯 WebP - 1

右上角 WebP -> GIF To WebP -> 選擇檔案上傳 -> 執行 Upload
WebP：目標是在減少檔案大小的同時，達到和JPEG、PNG、GIF格式相同的圖片品質，
相較於 GIF 是更強大的壓縮技術

Step 3：編輯 WebP - 2

上傳後，會出現資訊原始是 4MB 左右，點擊轉換

Step 4：編輯 WebP - 完成

可以看到 WebP 已經減少 40% 使用量，再進一步優化選擇 Optimize

Step 5：進一步優化

依照需要選擇 Quality 越低壓縮效果越好，畫質越差

Step 6：優化完成

最終得到約 700KB 的 WebP 檔案

第四部分：Demo結果

Step 1：Demo結果

WebP 適合用於網頁上，可以透過連結看到最終產生的 GIF (實際上是 WebP 但用戶分辨不出來) Demo