我想要一個地方，輸入一句話就能拿回一張圖。然後我又想讓這張圖動起來。
這就是 AI Media Studio 的全部起源。它是一個網頁應用程式，接收一段純文字提示詞，回傳一張圖片或一段短影片，背後用的是 Google 的 Gemini 圖像模型和 Veo 影片模型。沒有節點圖，沒有十二個滑桿的控制面板。一個提示框，幾個合理的開關，一個圖庫。
這篇是關於它做什麼、怎麼搭建的實戰筆記。
它能做什麼
核心循環刻意做得很無聊：寫提示詞，選模型，選比例，按生成。
圖片跑在三個 Gemini 圖像模型上，我給它們取了「Nano Banana」系列的暱稱：
- Nano Banana（
gemini-3.1-flash-lite-image）：快且輕。適合在還不知道自己想要什麼的時候打草稿。 - Nano Banana 2（
gemini-3.1-flash-image）：均衡的預設選項。細節更多，速度依然快。 - Nano Banana Pro（
gemini-3-pro-image）：慢但高保真，專門處理那些輕量模型會糊掉的複雜概念。
影片跑在 Veo（veo-3.1-lite-generate-preview）上。影片生成不是即時的，所以應用程式會輪詢任務狀態，告訴你進度到哪了，而不是讓你盯著一個不知死活的載入圈。
兩條路徑共用同一套控制項：
- 畫面比例：正方形 1:1、寬螢幕 16:9、手機直式 9:16，以及 4:3 和 3:4。
- 開關：提示詞增強、安全過濾、解析度。
沒什麼花俏的。重點是，這幾個選項幾乎涵蓋了我真正想做的所有東西。
讓它像個產品的那部分
一個空白的提示框，其嚇人程度常常被低估。所以應用程式內建了一個按風格分類的精選提示詞庫：寫實攝影、數位藝術、賽博龐克、建築、電影感。還有一個隨機按鈕，按一下就往框裡丟一條提示詞。
這兩個功能在技術上都不有趣。但它們決定了使用者是「打開就關掉」，還是「打開後做了六張圖」。
另一塊是圖庫。生成的圖片和影片會落到一個分頁籤的網格裡。點任何一個，燈箱會打開全解析度的結果，可以縮放，還能看到之後真正有用的中繼資料：提示詞、模型、畫面比例、生成時間。從這裡可以一鍵下載 PNG、JPEG 或 MP4，也可以複製提示詞接著改。
這些中繼資料後來成了我用得最多的功能。生成式媒體的工作，一半是記住那次成功時你到底輸了什麼。
怎麼搭的
這裡沒有任何聰明的東西，我喜歡這樣。
- Next.js 15，App Router，跑在 React 19 上。
- Tailwind CSS 負責樣式，選單、對話框和開關底下是 Radix UI 的無頭元件。
@google/genai負責模型呼叫。這些呼叫放在伺服器端 API 路由裡：一個生成圖片，一個輪詢影片狀態，一個把下載串流回瀏覽器，這樣模型 API 金鑰永遠不會碰到客戶端。- Framer Motion 負責路由過渡和那些讓媒體應用程式不像表單的小動效。
- Lucide 負責圖示。
深色和淺色主題都是一等公民。頁首固定在頂部，捲動長圖庫時模型和比例控制隨手可及。
學到的東西
模型選擇應該是一個下拉選單，而不是一次決策。 早期我試過在介面裡解釋三個圖像模型的差別。沒人讀。現在名字本身帶著提示（lite、預設、pro），大家用同一條提示詞在兩個模型上各生成一次，自己就明白了。
輪詢是一個使用者體驗功能。 對影片來說，「生成中……」和「生成中，第 3/5 步，約 40 秒」之間的差別，就是信任和關掉分頁之間的差別。
金鑰留在伺服器端。 顯而易見，但值得說。每一次對 Gemini 或 Veo 的呼叫都經過 API 路由。瀏覽器永遠看不到憑證，我也可以在一個地方做限流和記錄。
中繼資料就是產品。 那個顯示提示詞、模型、比例和時間戳的燈箱花了一個下午，卻比其他任何東西用得都多。
試試
它已經上線：image-video-factory.ai.studio。輸入點荒謬的東西，選 16:9，看看 Nano Banana 2 覺得「黎明時分的賽博龐克麵攤，濕漉漉的柏油路，霓虹倒影」長什麼樣。然後讓 Veo 把它動起來。
如果做出了好東西，把提示詞複製下來。未來的你會需要它。