Cách xây dựng trình tạo video AI với Bolt & CometAPI: Hướng dẫn từng bước

TL;DR

Bolt có thể tạo giao diện ứng dụng, còn CometAPI cung cấp API tạo video. Giữ khóa CometAPI trên máy chủ, gửi tác vụ Vidu qua POST /v1/videos, thăm dò ID tác vụ trả về và xuất bản video đã hoàn tất qua các tuyến xem trước và tải xuống có xác thực. Bạn sẽ cần một dự án Bolt, tài khoản CometAPI đã nạp tiền với quyền truy cập vào model đã chọn, và một runtime cho hàm máy chủ; các ví dụ bên dưới dạy phần tích hợp cốt lõi, trong khi xác thực, hạn mức, kiểm tra quyền sở hữu và bản ghi tác vụ bền vững phải được triển khai trước khi ra mắt.

Key Takeaways

• Bolt tạo UI studio video phản hồi từ đặc tả ứng dụng bằng ngôn ngữ tự nhiên.

• CometAPI cung cấp suy luận video qua các model tạo được hỗ trợ, sử dụng khóa API phía máy chủ được bảo vệ.

• Bắt đầu với text-to-video; mở rộng sang image-to-video sau khi xác nhận vòng đời tác vụ.

• Sẵn sàng sản xuất đòi hỏi xác thực, hạn mức, kiểm tra quyền sở hữu tác vụ, retry và lưu trữ đầu ra bền vững.

• Đo lường giá trị thực bằng tỷ lệ hoàn tất, độ trễ, chi phí cho clip được chấp nhận và mức độ tuân thủ prompt.

What Are Bolt and CometAPI for AI Video Generation?

Bolt xây dựng giao diện, logic ứng dụng và quy trình xuất bản. Bolt Cloud cung cấp các dịch vụ dự án như cơ sở dữ liệu, hosting, xác thực, lưu trữ và hàm máy chủ. CometAPI cung cấp quyền truy cập API model, bao gồm các model video được hỗ trợ và các endpoint suy luận. Đặt suy luận trả phí phía sau các hàm máy chủ đã xác thực, với bản ghi tác vụ bền vững, kiểm tra quyền sở hữu và kiểm soát thanh toán.

Is CometAPI OpenAI-Compatible?

CometAPI cung cấp giao diện tương thích OpenAI cho các model văn bản và chat được hỗ trợ. Cấu hình endpoint và model cho SDK và route cụ thể bạn sử dụng; tương thích không có nghĩa là mọi model đều chấp nhận cùng một schema yêu cầu.

API video Vidu tách biệt với giao diện chat tương thích OpenAI. Tạo video sử dụng POST /v1/videos với multipart/form-data, vì vậy ứng dụng phải gọi endpoint video trực tiếp từ một hàm máy chủ được bảo vệ.

How Does the CometAPI Vidu Video API Work?

Create a video task

Tạo tác vụ qua POST /v1/videos sử dụng multipart/form-data. Hướng dẫn này dùng viduq3; viduq3-turbo là một tùy chọn được ghi tài liệu khác. Xác nhận quyền truy cập model cho khóa API của bạn và lưu lại ID tác vụ trả về. Xem tài liệu tham chiếu API tạo.

POST /v1/videos parameters

Bảng dưới đây liệt kê các đầu vào tạo. Gửi các trường form dạng vô hướng dưới dạng chuỗi. Với seconds, dùng chuỗi có giá trị nguyên từ "1" đến "16"; ứng dụng có thể xác thực thời lượng số trước khi tuần tự hóa. Giới hạn prompt 2.000 ký tự trong hướng dẫn là chính sách của ứng dụng.

Máy chủ trả về id làm định danh tác vụ; đây không phải là tham số tạo. Lưu nó cùng bản ghi tác vụ của người dùng yêu cầu và sử dụng cho các yêu cầu trạng thái và nội dung tiếp theo. Hàng id bị gạch bỏ ở trên chỉ được giữ lại để cho thấy sự xóa bỏ.

• 540p tier: Sử dụng giá trị kích thước API 960x528 cho thử nghiệm.
• 720p tier: Sử dụng 1280x720 cho bản xem trước trên web.
• 1080p tier: Sử dụng 1920x1080 cho chất lượng cao hơn.

Xác thực phía máy chủ phải từ chối các kết hợp không được hỗ trợ và ngăn người dùng yêu cầu tạo trả phí không giới hạn.

Poll the task status

Kiểm tra GET /v1/videos/{task_id} từ backend sau khi xác minh quyền sở hữu tác vụ. Tiếp tục cho đến khi tác vụ đạt trạng thái kết thúc; giữ lại ID tác vụ để một lần tải lại trang hoặc trình duyệt timeout có thể tiếp tục cùng tác vụ.

Download the completed video

Sau khi hoàn tất, yêu cầu GET /v1/videos/{task_id}/content qua backend và stream kết quả hoặc lưu vào lưu trữ được kiểm soát. Phần hướng dẫn triển khai dưới đây cho thấy cách kết nối các thao tác này với Bolt.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Mở Bolt và yêu cầu tạo một dự án React + TypeScript. Dán đặc tả này vào hộp prompt, sau đó xem lại giao diện đã tạo trước khi kết nối tạo trả phí:

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.

Step 2: Configure the CometAPI API key

Tạo khóa API trong CometAPI, sau đó thêm một backend secret tên COMETAPI_KEY. Không bao giờ lưu nó trong mã nguồn frontend, lộ ra mã trình duyệt hoặc dùng biến môi trường có tiền tố VITE_.

Trong cài đặt dự án Bolt của bạn, thêm COMETAPI_KEY qua giao diện quản lý secret phía máy chủ của dự án. Không đặt nó vào mã nguồn frontend hoặc lộ ra JavaScript trên trình duyệt. Xem dòng sau như một ví dụ về cách đặt tên, không phải tệp .env phía frontend.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

Hàm phong cách Deno dưới đây cung cấp lõi yêu cầu đến nhà cung cấp. Nó phải được bọc bằng xác thực phiên thực, hạn mức và bản ghi tác vụ thuộc sở hữu người dùng trước khi triển khai.

Ví dụ này dùng bố cục hàm edge kiểu Supabase cho Deno. Yêu cầu Bolt đặt nó trong runtime máy chủ thực sự được cấu hình cho dự án của bạn. Các chú thích về xác thực và lưu trữ chỉ là điểm tích hợp, không phải biện pháp bảo vệ đã triển khai: không triển khai khung này như một endpoint trả phí công khai.

// 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});
  }
});

Step 4: Retrieve generation status

Việc gửi trả về một ID công việc bất đồng bộ. Kiểm tra GET /v1/videos/{task_id} qua một endpoint máy chủ sau khi xác minh rằng người yêu cầu sở hữu tác vụ.

// 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};
}

Tác vụ bắt đầu ở queued, có thể chuyển sang in_progress, và kết thúc ở completed, failed hoặc error. Chỉ bật xem trước và tải xuống sau khi completed; hiển thị lỗi và cho phép yêu cầu mới cho các trạng thái lỗi kết thúc.

Step 5: Connect the Bolt frontend

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");
}

Các đường dẫn /api/ là các route của ứng dụng mà bạn phải cấu hình. Đối với các hàm máy chủ của Bolt Cloud, sử dụng client backend được tạo và URL endpoint đã xác thực. Hủy thăm dò khi component unmount và dùng backoff có giới hạn cho các phản hồi 429/5xx. Deadline thăm dò trên trình duyệt không chứng minh lỗi phía nhà cung cấp: giữ ID tác vụ và tiếp tục kiểm tra trạng thái trước khi tạo thêm tác vụ trả phí khác.

Step 6: Preview and download the result

Khi một công việc hoàn tất, backend lấy GET /v1/videos/{task_id}/content. Stream dữ liệu cho chủ sở hữu tác vụ đã xác thực hoặc lưu vào lưu trữ đối tượng được kiểm soát và cung cấp URL được ủy quyền. Không bao giờ lộ khóa bearer CometAPI trong trình duyệt.

Ứng dụng của bạn nên cung cấp một route nội dung thuộc sở hữu người dùng hoặc một URL lưu trữ được ủy quyền cho component xem trước. Một URL có chữ ký có thể truy cập với bất kỳ ai nắm giữ nó cho đến khi hết hạn; giữ thời gian sống ngắn. Để tải xuống đáng tin cậy, dùng route cùng origin với header Content-Disposition phù hợp, vì trình duyệt có thể bỏ qua thuộc tính download cho URL khác origin.

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>;
}

Step 7: Test and publish

Kiểm thử yêu cầu 5 giây 540p trước: “A cinematic close-up of a silver smartwatch on a dark desk. The camera slowly moves left to right. Soft morning light reflects from the metal.” Kiểm tra rằng một yêu cầu tạo một tác vụ, trạng thái tiến triển, kết quả phát được và tải xuống thành công. Kiểm thử prompt không hợp lệ, phiên hết hạn, giới hạn tốc độ, quyền sở hữu tác vụ và lỗi nhà cung cấp trước khi phát hành.

Kiểm tra hoàn thành: đăng nhập với người dùng thứ hai và xác nhận rằng công việc của người dùng thứ nhất không thể bị đọc hoặc tải xuống; làm mới trang trong lúc render và xác nhận rằng tác vụ đã lưu có thể được khôi phục; kiểm tra các yêu cầu trình duyệt và tài sản đã build để tránh lộ khóa ngoài ý muốn. Chỉ xuất bản sau khi cả ba kiểm tra đều vượt qua bên cạnh phát lại và tải xuống.

How Can You Add Image-to-Video Generation?

Đối với image-to-video, thêm một tệp ảnh đã được xác thực là input_reference trong phần thân multipart. Route hiện tại ghi tài liệu giới hạn tối đa 20 MB mỗi ảnh; áp dụng giới hạn nhỏ hơn ở ứng dụng nếu cần và xác thực loại nội dung cùng dữ liệu tệp thực tế trên máy chủ. Truyền ảnh qua backend đã xác thực; không gửi khóa CometAPI cùng với upload từ trình duyệt.

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);

Với đầu vào là ảnh, mô tả chuyển động và hành động máy quay mong muốn thay vì chỉ lặp lại cảnh: “Nhân vật quay về phía cửa sổ. Rèm chuyển động nhẹ trong gió. Giữ nguyên gương mặt, trang phục và ánh sáng. Dùng chuyển động máy quay tiến nhẹ.”

Vidu Q3 vs Other AI Video Models: What Should You Measure?

So sánh các model trên cùng prompt, thời lượng, độ phân giải và tiêu chí chấp nhận. Phần này định nghĩa phương pháp so sánh; không khẳng định một người thắng đã được thử nghiệm. Ghi lại phiên bản model, route, ngày thử nghiệm và số mẫu cho mọi kết quả được công bố.

• Completion rate: Chia số công việc thành công cho số công việc đã gửi để đo độ tin cậy.
• Latency: Theo dõi thời gian xử lý P50 và P95 để hiểu trải nghiệm điển hình và các yêu cầu chậm hơn.
• Prompt adherence: Dùng đánh giá thủ công hoặc phương pháp chuẩn hóa để đánh giá mức độ đầu ra theo sát chỉ dẫn.
• Temporal consistency: Kiểm tra tính liên tục giữa các khung để đánh giá độ ổn định hình ảnh.
• Audio sync: Rà soát thời điểm và độ rõ để đánh giá thoại và âm thanh.
• Cost per accepted clip: Chia tổng chi tiêu cho số đầu ra được phê duyệt để hiểu kinh tế vận hành.

How Much Does the CometAPI Video Generation API Cost?

Bảng dưới đây cung cấp giá tham chiếu cho API Vidu Q3 và Vidu Q3 Turbo trong CometAPI. Chi phí thực tế có thể khác tùy model, độ phân giải và thiết lập tạo. Kiểm tra giá mới nhất và tình trạng model trong tài khoản CometAPI của bạn trước khi ước tính ngân sách tạo video.

API Vidu Q3 Turbo trong CometAPI bắt đầu từ $0.028 mỗi giây. Giá có thể thay đổi theo độ phân giải, chế độ tạo và phiên bản model. Kiểm tra mức giá hiện tại trong tài khoản CometAPI của bạn trước khi tạo video.

Các ví dụ giá ở trên áp dụng cho tạo text-to-video và image-to-video chuẩn. Các chế độ tạo khác hoặc cấu hình ảnh tham chiếu có thể có mức giá khác. Các chi phí bổ sung, bao gồm thuế, lưu trữ, băng thông và các lần tạo lại, không được tính vào.

Dựa trên mức tham chiếu, một video 5 giây 720p có chi phí khoảng $0.616 với Vidu Q3 hoặc $0.308 với Vidu Q3 Turbo. Ở 540p, các ước tính tương ứng là $0.280 và $0.140. Đây là các phép tính minh họa chứ không phải chi phí đảm bảo. Để lập ngân sách chính xác, so sánh chi phí ước tính với việc sử dụng API và hồ sơ thanh toán thực tế.

How Can You Migrate an Existing Video Generator to Bolt + CometAPI?

Di trú dần dần phía sau một adapter nhà cung cấp. Xác thực yêu cầu và hành vi đầu ra, bắt đầu với một phần nhỏ người dùng, so sánh tỷ lệ thành công và độ trễ, và giữ route quay lui cho đến khi hiệu năng chấp nhận được.

FAQ

Làm thế nào để lặp lại một phong cách hình ảnh đã phê duyệt cho cả một loạt?

Xem một clip đã phê duyệt như một đặc tả sáng tạo có thể tái tạo: lưu chính xác prompt, model và route, thời lượng, độ phân giải, phiên bản tài sản tham chiếu và định danh đầu ra. Dùng một bộ ảnh tham chiếu nhỏ và mô tả nhất quán về ánh sáng, ống kính, bảng màu và chi tiết chủ thể. Thay đổi một biến lớn mỗi lần để bạn có thể xác định điều gì hữu ích. Lặp lại prompt không đảm bảo cùng đầu ra; nếu route cung cấp seed, hãy ghi lại, nhưng vẫn rà soát từng clip để đảm bảo tính liên tục trước khi ráp chuỗi.

Làm sao để một câu chuyện nhiều cảnh vẫn mạch lạc khi mỗi lần tạo là một clip ngắn?

Chia kịch bản thành các cảnh với một hành động rõ ràng và bố cục mở đầu/đóng kết được xác định. Duy trì bảng continuity cho ngoại hình nhân vật, trang phục, đạo cụ, ánh sáng và hướng máy quay. Khi được hỗ trợ, đưa khung hình đã phê duyệt vào cảnh tiếp theo như một ảnh tham chiếu thay vì chỉ dựa vào mô tả. Lắp ráp, cắt và cân bằng âm thanh trong một lần dựng riêng. Rà soát chuyển cảnh như một chuỗi: một clip trông mạnh khi đứng riêng vẫn có thể phá vỡ mạch khi đặt cạnh cảnh khác.

Điều gì nên xảy ra nếu trình duyệt timeout sau một lần nộp trả phí?

Xem đây là kết quả chưa chắc chắn cho đến khi đối chiếu tác vụ đã lưu từ nhà cung cấp. Giữ một định danh yêu cầu cấp ứng dụng và ID tác vụ nhà cung cấp của nó, cho phép người dùng mở lại công việc đó và tiếp tục kiểm tra trạng thái. Nếu việc gửi chính nó timeout trước khi trả về ID, kiểm tra nhật ký yêu cầu sẵn có và hồ sơ sử dụng trước khi cho phép thử lại. Đừng hứa rằng HTTP timeout nghĩa là không phát sinh phí. Mọi lần thử trả phí mới phải được làm rõ, và dùng khóa yêu cầu ở cấp ứng dụng để ngăn bấm đúp.

Tôi nên rà soát gì trước khi chấp nhận ảnh tham chiếu của khách hàng riêng tư?

Quyết định những tài sản nào ứng dụng của bạn được phép chấp nhận, người tải lên có quyền sử dụng chúng hay không và những dịch vụ downstream nào sẽ nhận chúng. Kiểm tra điều khoản hiện tại của nhà cung cấp về lưu giữ, ghi log, xóa và phạm vi sử dụng trước khi hứa bảo mật. Tránh tài liệu cá nhân hoặc bí mật trong các bản demo dùng chung. Tối thiểu hóa những gì bạn lưu, cô lập đối tượng riêng tư theo người dùng, và định nghĩa quy trình hết hạn và xóa cho cả upload và tệp đã tạo. Một bucket lưu trữ riêng của ứng dụng không tự mô tả chính sách lưu giữ của nhà cung cấp model.

Làm sao giữ dự án có thể di động nếu backend hoặc nhà cung cấp video thay đổi?

Giữ giao diện phụ thuộc vào schema công việc thuộc sở hữu ứng dụng, với các trường yêu cầu và ánh xạ trạng thái cụ thể nhà cung cấp nằm trong một adapter riêng. Lưu cả ID công việc nội bộ và ID tác vụ nhà cung cấp, và giữ tham chiếu đến các tài sản cần thiết để tái tạo yêu cầu. Giữ mã và cấu hình ứng dụng do Bolt tạo dưới kiểm soát phiên bản. Khi thay backend, di trú bản ghi người dùng và công việc và kiểm thử ranh giới truy cập, URL có chữ ký và tải xuống lịch sử trước khi chuyển lưu lượng; một bản xuất mã không tự chuyển cơ sở dữ liệu trực tiếp hoặc các tệp video đã lưu.

Conclusion

Bolt + CometAPI là nền tảng thực tế cho ứng dụng tạo video: Bolt tăng tốc tạo web app, và CometAPI cung cấp quyền truy cập các model video được hỗ trợ. Bắt đầu với quy trình text-to-video an toàn, chứng minh rằng vòng đời tác vụ và kiểm soát thanh toán hoạt động, rồi thêm ảnh tham chiếu, lịch sử tạo, lựa chọn model và các công cụ sáng tạo nâng cao. Việc tách tương tác frontend khỏi suy luận trả phí phía máy chủ là điều cốt yếu cho một sản phẩm an toàn và đáng tin cậy.