Cara Membangun Generator Video AI dengan Bolt & CometAPI: Panduan Langkah demi Langkah

TL;DR

Bolt dapat menghasilkan antarmuka aplikasi, sementara CometAPI menyediakan API pembuatan video. Simpan kunci CometAPI di server, kirim tugas Vidu melalui POST /v1/videos, lakukan polling terhadap ID tugas yang dikembalikan, dan sediakan video yang selesai melalui rute pratinjau dan unduhan yang terautentikasi. Anda memerlukan proyek Bolt, akun CometAPI yang didanai dengan akses ke model yang dipilih, dan runtime fungsi server; contoh di bawah mengajarkan inti integrasi, sementara autentikasi, kuota, pemeriksaan kepemilikan, dan catatan tugas yang persisten harus diimplementasikan sebelum peluncuran.

Poin Utama

• Bolt menghasilkan UI studio video responsif dari spesifikasi aplikasi berbahasa natural.

• CometAPI menyediakan inferensi video melalui model generasi yang didukung, menggunakan kunci API sisi server yang dilindungi.

• Mulailah dari teks-ke-video; perluas ke gambar-ke-video setelah memverifikasi siklus hidup tugas.

• Kesiapan produksi memerlukan autentikasi, kuota, pemeriksaan kepemilikan tugas, retry, dan penyimpanan output yang tahan lama.

• Ukur nilai nyata dengan tingkat penyelesaian, latensi, biaya klip yang diterima, dan kepatuhan prompt.

Apa Kegunaan Bolt dan CometAPI untuk Pembuatan Video AI?

Bolt membangun antarmuka, logika aplikasi, dan alur publikasi. Bolt Cloud menyediakan layanan proyek seperti database, hosting, autentikasi, penyimpanan, dan fungsi server. CometAPI menyediakan akses API model, termasuk model video yang didukung dan endpoint inferensi. Letakkan inferensi berbayar di belakang fungsi server terautentikasi, dengan catatan tugas persisten, pemeriksaan kepemilikan, dan kontrol penagihan.

Apakah CometAPI Kompatibel dengan OpenAI?

CometAPI menawarkan antarmuka kompatibel OpenAI untuk model teks dan chat yang didukung. Konfigurasikan endpoint dan model untuk SDK dan rute yang Anda gunakan; kompatibilitas tidak berarti setiap model menerima skema permintaan yang sama.

Vidu video API terpisah dari antarmuka chat kompatibel OpenAI. Pembuatan video menggunakan POST /v1/videos dengan multipart/form-data, sehingga aplikasi harus memanggil endpoint video secara langsung dari fungsi sisi server yang dilindungi.

Bagaimana CometAPI Vidu Video API Bekerja?

Buat tugas video

Buat tugas melalui POST /v1/videos menggunakan multipart/form-data. Tutorial ini menggunakan viduq3; viduq3-turbo adalah opsi terdokumentasi lainnya. Konfirmasikan akses model untuk kunci API Anda dan simpan ID tugas yang dikembalikan. Lihat referensi API pembuatan.

Parameter POST /v1/videos

Tabel di bawah berisi input pembuatan. Kirim field form skalar sebagai string. Untuk seconds, gunakan string bernilai integer dari "1" hingga "16"; aplikasi dapat memvalidasi durasi numerik sebelum serialisasi. Batas prompt 2.000 karakter dalam tutorial ini adalah kebijakan aplikasi.

Server mengembalikan id sebagai pengenal tugas; ini bukan parameter pembuatan. Simpan bersama catatan tugas milik pengguna yang meminta dan gunakan untuk permintaan status dan konten berikutnya. Baris id yang dicoret di atas dipertahankan hanya untuk menunjukkan penghapusan.

• Tingkat 540p: Gunakan nilai ukuran API 960x528 untuk eksperimen.
• Tingkat 720p: Gunakan 1280x720 untuk pratinjau web.
• Tingkat 1080p: Gunakan 1920x1080 untuk penyampaian berkualitas lebih tinggi.

Validasi sisi server harus menolak kombinasi yang tidak didukung dan mencegah pengguna meminta generasi berbayar tanpa batas.

Polling status tugas

Periksa GET /v1/videos/{task_id} dari backend setelah memverifikasi kepemilikan tugas. Lanjutkan hingga tugas mencapai status terminal; pertahankan ID tugas agar penyegaran halaman atau timeout browser dapat melanjutkan tugas yang sama.

Unduh video yang selesai

Setelah selesai, minta GET /v1/videos/{task_id}/content melalui backend dan stream hasilnya atau simpan ke penyimpanan terkontrol. Panduan implementasi di bawah menunjukkan cara menghubungkan operasi ini ke Bolt.

Cara Membangun Generator Video AI Menggunakan Bolt + CometAPI

Langkah 1: Buat proyek di Bolt

Buka Bolt dan minta untuk membuat proyek React + TypeScript. Tempelkan spesifikasi ini ke kotak prompt, lalu tinjau antarmuka yang dihasilkan sebelum menghubungkan generasi berbayar:

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.

Langkah 2: Konfigurasikan kunci API CometAPI

Buat kunci API di CometAPI, lalu tambahkan secret backend bernama COMETAPI_KEY. Jangan pernah menyimpannya di file sumber frontend, mengeksposnya ke kode browser, atau menggunakan variabel lingkungan berawalan VITE_.

Di pengaturan proyek Bolt Anda, tambahkan COMETAPI_KEY melalui antarmuka manajemen secret sisi server proyek. Jangan menaruhnya di kode sumber frontend atau mengeksposnya ke JavaScript browser. Perlakukan baris berikut sebagai contoh penamaan, bukan file .env frontend.

COMETAPI_KEY=your_actual_cometapi_api_key

Langkah 3: Kirim tugas pembuatan video

Fungsi bergaya Deno berikut menyediakan inti permintaan ke penyedia. Fungsi ini harus dibungkus dengan validasi sesi nyata, kuota, dan catatan tugas milik pengguna sebelum deployment.

Contoh ini menggunakan layout fungsi edge Deno bergaya Supabase. Mintalah Bolt menempatkannya di runtime server yang benar-benar dikonfigurasi untuk proyek Anda. Komentar autentikasi dan persistensi adalah titik integrasi, bukan perlindungan yang diimplementasikan: jangan deploy kerangka ini sebagai endpoint berbayar publik.

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

Langkah 4: Ambil status generasi

Pengajuan mengembalikan ID pekerjaan asinkron. Periksa GET /v1/videos/{task_id} melalui endpoint server setelah memverifikasi bahwa pengguna yang meminta memiliki tugas tersebut.

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

Tugas dimulai dalam queued, dapat berpindah ke in_progress, dan berakhir di completed, failed, atau error. Aktifkan pratinjau dan unduhan hanya setelah completed; tampilkan error dan izinkan permintaan baru untuk status kegagalan terminal.

Langkah 5: Hubungkan frontend 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");
}

Path /api/ adalah rute aplikasi yang harus Anda konfigurasikan. Untuk fungsi server Bolt Cloud, gunakan klien backend yang dihasilkan dan URL endpoint terautentikasi. Batalkan polling saat komponen di-unmount dan gunakan backoff terbatas untuk respons 429/5xx. Batas waktu polling di browser tidak membuktikan kegagalan penyedia: pertahankan ID tugas dan lanjutkan pemeriksaan status sebelum membuat tugas berbayar lain.

Langkah 6: Pratinjau dan unduh hasil

Saat pekerjaan selesai, backend mengambil GET /v1/videos/{task_id}/content. Stream data ke pemilik tugas yang terautentikasi atau simpan ke penyimpanan objek terkontrol dan sediakan URL terotorisasi. Jangan pernah mengekspos kunci bearer CometAPI di browser.

Aplikasi Anda harus mengekspos rute konten milik pengguna atau URL penyimpanan terotorisasi untuk komponen pratinjau. URL bertanda tangan dapat diakses siapa pun yang memegangnya hingga kedaluwarsa; pertahankan masa hidupnya singkat. Untuk unduhan yang andal, gunakan rute asal yang sama dengan header Content-Disposition yang sesuai, karena browser mungkin mengabaikan atribut download untuk URL lintas asal.

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

Langkah 7: Uji dan publikasikan

Uji permintaan 540p lima detik terlebih dahulu: “Close-up sinematik jam tangan pintar perak di meja gelap. Kamera bergerak perlahan dari kiri ke kanan. Cahaya pagi lembut memantul dari logam.” Periksa bahwa satu permintaan membuat satu tugas, status bergerak maju, hasil dapat diputar, dan unduhan berhasil. Uji prompt tidak valid, sesi kedaluwarsa, pembatasan laju, kepemilikan tugas, dan kegagalan penyedia sebelum publikasi.

Pemeriksaan penyelesaian: masuk sebagai pengguna kedua dan konfirmasikan bahwa pekerjaan pengguna pertama tidak dapat dibaca atau diunduh; segarkan halaman saat rendering dan konfirmasikan bahwa tugas yang disimpan dapat dipulihkan; periksa permintaan browser dan aset hasil build untuk paparan kunci yang tidak disengaja. Publikasikan hanya setelah ketiga pemeriksaan ini lulus selain pemutaran dan unduhan.

Bagaimana Menambahkan Pembuatan Gambar-ke-Video?

Untuk gambar-ke-video, tambahkan satu file gambar tervalidasi sebagai input_reference dalam body multipart. Rute saat ini mendokumentasikan maksimum 20 MB per gambar; terapkan batas aplikasi yang lebih kecil jika diperlukan dan validasi tipe konten serta isi file aktual di server. Lewatkan gambar melalui backend terautentikasi; jangan kirim kunci CometAPI dengan unggahan browser.

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

Untuk input gambar, jelaskan gerakan dan aksi kamera yang diinginkan alih-alih sekadar mengulangi adegan: “Karakter menghadap ke jendela. Tirai bergerak lembut tertiup angin. Pertahankan wajah, pakaian, dan pencahayaan. Gunakan gerakan kamera maju yang halus.”

Vidu Q3 vs Model Video AI Lain: Apa yang Harus Diukur?

Bandingkan model pada prompt, durasi, resolusi, dan kriteria penerimaan yang sama. Bagian ini mendefinisikan metode perbandingan; tidak mengklaim pemenang yang telah diuji. Catat versi model, rute, tanggal pengujian, dan jumlah sampel untuk hasil yang dipublikasikan.

• Tingkat penyelesaian: Bagi pekerjaan yang berhasil dengan pekerjaan yang dikirim untuk mengukur keandalan.
• Latensi: Lacak waktu pemrosesan P50 dan P95 untuk memahami pengalaman tipikal dan permintaan yang lebih lambat.
• Kepatuhan prompt: Gunakan tinjauan manusia atau evaluasi terstandar untuk menilai seberapa dekat output mengikuti instruksi yang diminta.
• Konsistensi temporal: Periksa kontinuitas antar-frame untuk menilai stabilitas visual.
• Sinkronisasi audio: Tinjau timing dan keterbacaan untuk mengevaluasi dialog dan suara.
• Biaya per klip yang diterima: Bagi total pengeluaran dengan output yang disetujui untuk memahami ekonomi operasional.

Berapa Biaya CometAPI Video Generation API?

Tabel di bawah memberikan referensi harga untuk Vidu Q3 dan Vidu Q3 Turbo API di CometAPI. Biaya aktual dapat bervariasi tergantung model, resolusi, dan pengaturan generasi. Periksa harga terbaru dan ketersediaan model di akun CometAPI Anda sebelum mengestimasi anggaran pembuatan video.

Vidu Q3 Turbo API di CometAPI mulai dari $0.028 per detik. Harga dapat bervariasi menurut resolusi, mode generasi, dan versi model. Periksa tarif saat ini di akun CometAPI Anda sebelum membuat video.

Contoh harga di atas berlaku untuk pembuatan teks-ke-video dan gambar-ke-video standar. Mode generasi lain atau konfigurasi referensi gambar mungkin memiliki tarif berbeda. Biaya tambahan, termasuk pajak, penyimpanan, bandwidth, dan upaya generasi berulang, tidak termasuk.

Berdasarkan tarif referensi, video lima detik 720p berbiaya sekitar $0.616 dengan Vidu Q3 atau $0.308 dengan Vidu Q3 Turbo. Pada 540p, estimasi yang sesuai adalah $0.280 dan $0.140. Angka-angka ini adalah perhitungan ilustratif, bukan biaya yang dijamin. Untuk penganggaran yang akurat, bandingkan biaya estimasi dengan penggunaan API aktual dan catatan penagihan.

Bagaimana Memigrasikan Generator Video yang Ada ke Bolt + CometAPI?

Migrasikan secara bertahap di balik adapter penyedia. Validasi permintaan dan perilaku output, mulai dengan porsi kecil pengguna, bandingkan tingkat keberhasilan dan latensi, dan pertahankan rute rollback hingga kinerja dapat diterima.

FAQ

Bagaimana membuat gaya visual yang disetujui dapat diulang di seluruh seri?

Perlakukan klip yang disetujui sebagai spesifikasi kreatif yang dapat direproduksi: simpan prompt yang persis sama, model dan rute, durasi, resolusi, versi aset referensi, dan pengenal output. Gunakan set kecil gambar referensi dan deskripsi konsisten tentang pencahayaan, lensa, palet, dan detail subjek. Ubah satu variabel utama per iterasi sehingga Anda dapat mengidentifikasi apa yang membantu. Prompt yang diulang tidak menjamin output yang sama; jika rute mengekspos seed, catatlah, tetapi tetap tinjau setiap klip untuk kontinuitas sebelum merangkai urutan.

Bagaimana menjaga cerita multi-shot tetap koheren ketika setiap generasi adalah klip pendek?

Pecah naskah menjadi shot dengan satu aksi jelas dan komposisi pembuka dan penutup yang terdefinisi. Pertahankan lembar kontinuitas untuk penampilan karakter, wardrobe, properti, pencahayaan, dan arah kamera. Jika didukung, teruskan frame yang disetujui ke shot berikutnya sebagai referensi gambar alih-alih hanya mengandalkan prosa. Rakit, pangkas, dan seimbangkan audio dalam proses penyuntingan terpisah. Tinjau transisi sebagai sebuah urutan: klip yang terlihat kuat sendiri masih dapat merusak kontinuitas saat ditempatkan berdampingan.

Apa yang harus dilakukan jika browser timeout setelah pengajuan berbayar?

Perlakukan ini sebagai hasil yang tidak pasti hingga tugas penyedia yang disimpan direkonsiliasi. Simpan pengenal permintaan aplikasi lokal dan ID tugas penyedianya, biarkan pengguna membuka kembali pekerjaan tersebut, dan lanjutkan pemeriksaan status. Jika pengajuan itu sendiri timeout sebelum mengembalikan ID, periksa log permintaan dan catatan penggunaan yang tersedia sebelum menawarkan upaya lain. Jangan berjanji bahwa timeout HTTP berarti tidak ada biaya yang terjadi. Jadikan upaya berbayar baru eksplisit, dan gunakan kunci permintaan tingkat aplikasi untuk mencegah pengajuan klik ganda.

Apa yang harus ditinjau sebelum menerima gambar referensi pelanggan privat?

Putuskan aset mana yang boleh diterima aplikasi Anda, apakah pengunggah memiliki izin untuk menggunakannya, dan layanan hilir mana yang akan menerimanya. Periksa ketentuan penyedia saat ini untuk retensi, logging, penghapusan, dan penggunaan yang diperbolehkan sebelum menjanjikan kerahasiaan. Hindari materi referensi personal atau rahasia dalam demonstrasi bersama. Minimalkan apa yang Anda simpan, isolasi objek privat per pengguna, dan tentukan alur kedaluwarsa dan penghapusan untuk unggahan dan file yang dihasilkan. Bucket penyimpanan aplikasi privat tidak serta merta menjelaskan kebijakan retensi penyedia model.

Bagaimana menjaga portabilitas proyek jika backend atau penyedia video berubah?

Jaga agar antarmuka bergantung pada skema pekerjaan milik aplikasi, dengan field permintaan spesifik penyedia dan pemetaan status di dalam adapter terpisah. Simpan ID pekerjaan internal dan ID tugas penyedia, dan pertahankan referensi ke aset yang diperlukan untuk meregenerasi permintaan. Simpan kode aplikasi dan konfigurasi yang dihasilkan Bolt di kontrol versi. Saat mengganti backend, migrasikan catatan pengguna dan pekerjaan serta uji batas akses, URL bertanda tangan, dan unduhan historis sebelum mengalihkan trafik; ekspor kode saja tidak mentransfer database aktif atau file video yang disimpan.

Kesimpulan

Bolt + CometAPI adalah fondasi praktis untuk aplikasi pembuatan video: Bolt mempercepat pembuatan aplikasi web, dan CometAPI menyediakan akses ke model video yang didukung. Mulailah dengan alur kerja teks-ke-video yang aman, buktikan bahwa siklus hidup tugas dan kontrol penagihan berfungsi, lalu tambahkan referensi gambar, riwayat generasi, pemilihan model, dan alat kreatif lanjutan. Pemisahan interaksi frontend dari inferensi berbayar sisi server sangat penting untuk produk yang aman dan andal.