如何使用 Bolt & CometAPI 構建 AI 影片生成器：逐步指南

TL;DR

Bolt 可生成應用介面，而 CometAPI 提供影片生成 API。將 CometAPI 金鑰保存在伺服器端，透過 POST /v1/videos 提交 Vidu 任務，輪詢回傳的任務 ID，並透過已驗證的預覽與下載路由對外提供完成的影片。你需要一個 Bolt 專案、可使用所選模型且已有資金的 CometAPI 帳戶，以及伺服器函式執行環境；以下範例說明整合核心，但在上線前必須實作身份驗證、配額、所有權檢查與持久化的工作紀錄。

Key Takeaways

• Bolt 可從自然語言的應用說明生成響應式的影片工作室介面。

• CometAPI 透過受支援的生成模型提供影片推論，並使用受保護的伺服器端 API 金鑰。

• 先從文字轉影片開始；在驗證任務生命週期後再擴展到影像轉影片。

• 投產準備需具備身份驗證、配額、任務所有權檢查、重試機制與耐久的輸出儲存。

• 以完成率、延遲、被採納片段的成本與提示遵循度衡量實際價值。

What Are Bolt and CometAPI for AI Video Generation?

Bolt 建構介面、應用邏輯與發佈流程。Bolt Cloud 提供資料庫、託管、身分驗證、儲存與伺服器函式等專案服務。CometAPI 提供模型 API 存取，包括受支援的影片模型與推論端點。將付費推論封裝在已驗證的伺服器端函式之後，並搭配持久化的工作紀錄、所有權檢查與計費控管。

Is CometAPI OpenAI-Compatible?

CometAPI 為受支援的文字與聊天模型提供與 OpenAI 相容的介面。請依所用的 SDK 與路由設定端點與模型；相容並不代表所有模型都接受相同的請求結構。

Vidu 影片 API 與與 OpenAI 相容的聊天介面相互獨立。建立影片使用 POST /v1/videos 並採用 multipart/form-data，因此應用程式必須在受保護的伺服器端函式中直接呼叫影片端點。

How Does the CometAPI Vidu Video API Work?

Create a video task

使用 multipart/form-data 透過 POST /v1/videos 建立任務。本教學使用 viduq3；viduq3-turbo 是另一個有文件的選項。確認你的 API 金鑰具備模型存取權，並保留回傳的任務 ID。請參閱建立 API 參考。

POST /v1/videos 參數

下表列出建立時的輸入。標量表單欄位以字串傳送。seconds 請使用介於 "1" 至 "16" 的整數字串；應用在序列化前可先驗證數值型時長。教學中的 2,000 字元提示上限屬於應用層政策。

伺服器會回傳 id 作為任務識別碼；它不是建立參數。將其與提出請求的使用者之工作紀錄一併保存，並用於後續的狀態與內容請求。上方刪除線的 id 列僅為示意已移除。

• 540p 等級： 使用 API 尺寸值 960x528 以進行實驗。
• 720p 等級： 網頁預覽使用 1280x720。
• 1080p 等級： 高品質交付使用 1920x1080。

伺服器端驗證必須拒絕不受支援的組合，並防止使用者發出無限制的付費生成請求。

輪詢任務狀態

在確認任務所有權後，於後端呼叫 GET /v1/videos/{task_id}。持續檢查直到任務進入終止狀態；保留任務 ID，以便頁面重新整理或瀏覽器逾時後能恢復同一個任務。

下載已完成的影片

完成後，透過後端請求 GET /v1/videos/{task_id}/content 並串流結果或持久化到受控儲存。下方的實作導覽會示範如何將這些操作與 Bolt 串接。

How to Build an AI Video Generator Using Bolt + CometAPI

步驟 1：在 Bolt 建立專案

開啟 Bolt，請其建立一個 React + TypeScript 專案。將下列規格貼入提示框，然後在連接付費生成前先檢視產生的介面：

Build a responsive AI Video Studio using React, TypeScript, and Tailwind CSS.
Use a dark-themed layout with prompt editing, example prompts, 5/10/15-second
choices, 540p/720p/1080p options, Generate Video button, job status,
video preview and download, and a recent-generations section.
Use Bolt Cloud authentication, database, and server functions.
Require sign-in before video creation. Store COMETAPI_KEY only in server secrets.
Create authenticated generate-video and video-status server endpoints.
Connect to real CometAPI tasks; poll status every 10 seconds.
Do not use mock videos in the production path.

步驟 2：設定 CometAPI API 金鑰

在 CometAPI 建立 API 金鑰，然後新增名為 COMETAPI_KEY 的後端機密。切勿將其存放於前端原始碼、暴露於瀏覽器程式碼，或使用以 VITE_ 為前綴的環境變數。

在 Bolt 專案設定中，透過專案的伺服器端機密管理介面新增 COMETAPI_KEY。不要把它放在前端原始碼，也不要暴露給瀏覽器 JavaScript。以下這行僅作為命名範例，而非前端的 .env 檔案。

COMETAPI_KEY=your_actual_cometapi_api_key

步驟 3：提交影片生成任務

以下 Deno 風格的函式提供對供應商請求的核心。在部署前必須以真正的工作階段驗證、配額與使用者擁有的工作紀錄加以包覆。

此範例採用類 Supabase 的 Deno 邊緣函式結構。請要求 Bolt 將其放入你專案實際設定的伺服器執行環境。註解中的驗證與持久化是整合切入點，並非已實作的保護措施：請勿將此骨架當作公開的付費端點部署。

// supabase/functions/generate-video/index.ts
import { serve } from "https://deno.land/std/http/server.ts";
serve(async (req: Request) => {
  if (req.method !== "POST") return Response.json({error:"Method not allowed"},{status:405});
  try {
    // Verify the signed-in user and enforce quotas here.
    const {prompt, seconds, size} = await req.json();
    const sizes = ["960x528", "1280x720", "1920x1080"];
    if (typeof prompt !== "string" || !prompt.trim() || prompt.length > 2000 ||
        !Number.isInteger(seconds) || seconds < 1 || seconds > 16 ||
        !sizes.includes(size)) {
      return Response.json({error:"Invalid options"},{status:400});
    }
    const key = Deno.env.get("COMETAPI_KEY");
    if (!key) throw new Error("Missing API key");
    const form = new FormData();
    form.append("model", "viduq3");
    form.append("prompt", prompt.trim());
    form.append("seconds", String(seconds));
    form.append("size", size);
    const response = await fetch("https://api.cometapi.com/v1/videos", {
      method: "POST", headers: {Authorization: `Bearer ${key}`}, body: form,
      signal: AbortSignal.timeout(60000)
    });
    if (!response.ok) throw new Error(`Provider status ${response.status}`);
    const result = await response.json();
    const taskId = result.id ?? result.task_id;
    if (!taskId) throw new Error("Task ID missing");
    // Persist taskId and owner ID in application database here.
    return Response.json({taskId, status: result.status ?? "queued"});
  } catch (e) {
    console.error(e);
    return Response.json({error:"Unable to create video"},{status:500});
  }
});

步驟 4：取得生成狀態

提交後會回傳非同步的工作 ID。在確認提出請求的使用者擁有該工作後，透過伺服器端點呼叫 GET /v1/videos/{task_id} 進行查詢。

// Server-only helper
async function getVideoStatus(taskId: string) {
  const key = Deno.env.get("COMETAPI_KEY");
  if (!key) throw new Error("Missing API key");
  const response = await fetch(
    `https://api.cometapi.com/v1/videos/${encodeURIComponent(taskId)}`,
    {headers: {Authorization: `Bearer ${key}`}, signal: AbortSignal.timeout(60000)}
  );
  if (!response.ok) throw new Error(`Status ${response.status}`);
  const task = await response.json();
  return {taskId, status: task.status, progress: task.progress ?? null};
}

任務起始為 queued，可能轉為 in_progress，並最終成為 completed、failed 或 error。僅在 completed 後啟用預覽與下載；若進入失敗類的終止狀態，請顯示錯誤並允許重新發送請求。

步驟 5：連接 Bolt 前端

type VideoTask = {taskId: string; status: string; progress?: number | null};
async function startVideo(prompt: string, seconds: number, size: string): Promise<VideoTask> {
  const res = await fetch("/api/generate-video", {
    method: "POST", headers: {"Content-Type":"application/json"},
    body: JSON.stringify({prompt, seconds, size})
  });
  if (!res.ok) throw new Error("Generation request failed");
  return res.json();
}
async function checkVideo(taskId: string): Promise<VideoTask> {
  const res = await fetch(`/api/video-status?id=${encodeURIComponent(taskId)}`);
  if (!res.ok) throw new Error("Status request failed");
  return res.json();
}
async function waitForVideo(taskId: string, onUpdate: (task: VideoTask) => void) {
  const deadline = Date.now() + 20 * 60 * 1000;
  while (Date.now() < deadline) {
    const task = await checkVideo(taskId);
    onUpdate(task);
    if (task.status === "completed") return task;
    if (["failed", "error"].includes(task.status)) throw new Error("Render failed");
    await new Promise(resolve => setTimeout(resolve, 10000));
  }
  throw new Error("Polling paused; resume this task ID before submitting again");
}

這些 /api/ 路徑是你必須設定的應用路由。對於 Bolt Cloud 的伺服器函式，請使用產生的後端用戶端與已驗證的端點 URL。元件卸載時應取消輪詢，並對 429/5xx 回應採用有界的退避策略。瀏覽器端的輪詢截止並不代表供應商失敗：請保留任務 ID，並在建立另一個付費任務前恢復狀態檢查。

步驟 6：預覽與下載結果

當工作完成後，後端請求 GET /v1/videos/{task_id}/content。將資料串流給已驗證的工作擁有者，或儲存到受控的物件儲存並提供授權 URL。切勿在瀏覽器中暴露 CometAPI 的 Bearer 金鑰。

你的應用應為預覽元件提供使用者擁有的內容路由或授權的儲存 URL。簽名 URL 在到期前持有者皆可存取；請保持其有效期短。為確保可可靠下載，請使用同源路由並附上適當的 Content-Disposition 標頭，因為瀏覽器可能會忽略跨來源 URL 的 download 屬性。

type VideoPreviewProps = {videoUrl: string};
export function VideoPreview({videoUrl}: VideoPreviewProps) {
  return <div className="rounded-xl p-4">
    <video controls playsInline className="w-full rounded-lg" src={videoUrl}/>
    <a href={videoUrl} download="ai-generated-video.mp4">Download Video</a>
  </div>;
}

步驟 7：測試與發佈

先測試一個 5 秒的 540p 請求：「在深色桌面上的銀色智慧手錶之電影感特寫。攝影機由左向右緩慢移動。柔和晨光自金屬反射。」確認一次請求只建立一個任務、狀態會推進、結果可播放且可成功下載。在發佈前，同時測試無效的提示、過期工作階段、速率限制、任務所有權與供應商失敗情境。

完成度檢查：以第二位使用者登入並確認無法讀取或下載第一位使用者的工作；在渲染過程中重新整理頁面，確認可恢復已儲存的任務；檢查瀏覽器請求與建置產物是否有金鑰意外外洩。除播放與下載測試外，僅在以上三項檢查均通過後才發佈。

如何新增影像轉影片生成功能？

對於影像轉影片，請在 multipart 主體中以 input_reference 加入一張已驗證的影像檔。當前路由文件載明每張影像最大為 20 MB；如有需要，於應用層施加更小的限制，並在伺服器驗證內容類型與實際檔案內容。透過已驗證的後端傳遞影像；切勿在瀏覽器上傳時附帶 CometAPI 金鑰。

const form = new FormData();
form.append("model", "viduq3");
form.append("prompt", prompt);
form.append("seconds", "5");
form.append("size", "1280x720");
form.append("input_reference", imageFile);
const response = await fetch("https://api.cometapi.com/v1/videos", {
  method: "POST", headers: {Authorization: `Bearer ${apiKey}`}, body: form
});
if (!response.ok) throw new Error(`API ${response.status}`);
const result = await response.json();
console.log(result.id ?? result.task_id);

對於影像輸入，請描述期望的動作與鏡頭運動，而非僅重述場景：「角色轉向窗邊。窗簾在微風中輕輕擺動。保留臉部、服裝與光線。使用細微的鏡頭向前運動。」

Vidu Q3 與其他 AI 影片模型：該衡量什麼？

在相同的提示、時長、解析度與採納標準下比較模型。本節定義比較方法，並未宣稱已有測試勝出者。發佈任何結果時，請記錄模型版本、路由、測試日期與樣本數。

• 完成率：以成功工作數除以提交工作數，衡量可靠性。
• 延遲：追蹤 P50 與 P95 處理時間，以了解典型體驗與較慢請求。
• 提示遵循度：以人工審查或標準化評估衡量輸出對指示的遵循程度。
• 時間一致性：檢查逐幀連續性以評估視覺穩定性。
• 音訊同步：檢視時間對齊與可辨識度，以評估對話與聲音。
• 每個被採納片段的成本：以總支出除以被核准的輸出，了解營運經濟性。

CometAPI 影片生成 API 多少錢？

下表提供 CometAPI 中 Vidu Q3 與 Vidu Q3 Turbo API 的參考定價。實際成本可能因模型、解析度與生成設定而異。在估算影片生成預算前，請於你的 CometAPI 帳戶查閱最新價格與模型可用性。

CometAPI 中的 Vidu Q3 Turbo API 起價為每秒 $0.028。價格可能因解析度、生成模式與模型版本而異。生成影片前請於你的 CometAPI 帳戶確認當前費率。

上述價格範例適用於標準的文字轉影片與影像轉影片生成。其他生成模式或參考影像配置可能有不同費率。另含稅金、儲存、頻寬與重複生成嘗試等額外成本未計入。

依參考費率估算，5 秒 720p 影片約為 Vidu Q3 $0.616、Vidu Q3 Turbo $0.308；在 540p 時，分別約為 $0.280 與 $0.140。這些數字為示例計算，非保證收費。要精準編列預算，請將估算成本與實際 API 使用與計費紀錄比對。

如何將現有的影片產生器遷移至 Bolt + CometAPI？

在供應商介面器之後逐步遷移。驗證請求與輸出行為，先從少量使用者開始，對比成功率與延遲，並保留回退路徑，直到表現令人滿意。

FAQ

如何讓一套已核准的視覺風格在系列中可重複？

將已核准的片段視為可重現的創意規格：保存精確的提示、模型與路由、時長、解析度、參考資產版本與輸出識別碼。使用少量參考影像，並維持一致的光線、鏡頭、色調與主體細節描述。每次只變動一個主要變數，以便辨識有效因素。重複的提示不保證相同輸出；若路由提供種子，請一併記錄，但在組成序列前仍應逐段檢視連貫性。

當每段生成皆為短片時，多鏡頭故事如何保持連貫？

將腳本拆分為每段一個明確動作，且具明確的開場與收尾構圖。為角色外觀、服裝、道具、光線與鏡頭方向維護連續性表。若受支援，將已核准畫面傳入下一鏡作為影像參考，而非僅依賴文字。於後製階段再行組接、修剪與平衡音訊。以序列方式審視轉場：單看強大的片段在相鄰時仍可能破壞連貫性。

若付費提交後瀏覽器逾時，該如何處理？

將此視為結果未定，直到與已保存的供應商任務完成對帳。保留本地的應用請求識別碼及其供應商任務 ID，讓使用者能重新開啟該工作並恢復狀態檢查。若提交本身在回傳 ID 前逾時，請先檢視可用的請求日誌與使用紀錄，再提供另一個嘗試。不要保證 HTTP 逾時即代表未收費。任何新的付費嘗試都應明確提示，並使用應用層的請求鎖避免雙擊提交。

接受客戶私有參考影像前，我應檢視哪些事項？

決定你的應用允收哪些資產、上傳者是否有使用權，以及哪些下游服務會接收它們。查閱當前供應商對於保留、記錄、刪除與允許用途的條款，再做保密承諾。避免在共享展示中使用個人或機密參考素材。將保存降至最低、依使用者隔離私有物件，並為上傳與生成檔案定義到期與刪除流程。私有應用的儲存桶本身並不等同於模型供應商的保留政策。

若後端或影片供應商更換，如何保持專案的可攜性？

讓介面依賴於應用自有的工作綱要，將供應商特定的請求欄位與狀態映射封裝在獨立介面器中。保存內部工作 ID 與供應商任務 ID，並保留可重建請求所需的資產參照。將 Bolt 產生的應用程式碼與設定納入版本控管。更換後端時，請遷移使用者與工作紀錄，並在切換流量前測試存取邊界、簽名 URL 與歷史下載；僅匯出程式碼並不足以轉移實際的資料庫或其已儲存的影片檔案。

結論

Bolt + CometAPI 是建置影片生成應用的務實基礎：Bolt 加速網頁應用開發，CometAPI 提供受支援的影片模型存取。先從安全的文字轉影片流程開始，證明任務生命週期與計費控管可行，接著再加入影像參考、生成歷史、模型選擇與進階創作工具。將前端互動與付費的伺服器端推論分離，對打造安全可靠的產品至關重要。