Jak zbudować generator wideo AI za pomocą Bolt & CometAPI: przewodnik krok po kroku

TL;DR

Bolt może wygenerować interfejs aplikacji, a CometAPI dostarcza API do generowania wideo. Przechowuj klucz CometAPI na serwerze, przesyłaj zadania Vidu przez POST /v1/videos, odpytywaj zwrócony identyfikator zadania i udostępniaj ukończone wideo przez uwierzytelnione trasy podglądu i pobierania. Będziesz potrzebować projektu Bolt, zasilonego środkami konta CometAPI z dostępem do wybranego modelu oraz środowiska uruchomieniowego funkcji serwerowych; poniższe przykłady uczą rdzenia integracji, natomiast uwierzytelnianie, limity, sprawdzanie własności zadań i trwałe zapisy zadań muszą zostać wdrożone przed publikacją.

Najważniejsze wnioski

• Bolt generuje responsywny interfejs studia wideo z specyfikacji aplikacji w języku naturalnym.

• CometAPI zapewnia inferencję wideo przez wspierane modele generowania, używając chronionego klucza API po stronie serwera.

• Zacznij od tekstu do wideo; rozbuduj o obraz do wideo po weryfikacji cyklu życia zadania.

• Gotowość produkcyjna wymaga uwierzytelniania, limitów, sprawdzenia własności zadań, ponowień oraz trwałego przechowywania wyników.

• Mierz realną wartość wskaźnikami: odsetek ukończonych zadań, opóźnienie, koszt zaakceptowanego klipu i zgodność z promptem.

Do czego służą Bolt i CometAPI w generowaniu wideo AI?

Bolt buduje interfejs, logikę aplikacji i proces publikacji. Bolt Cloud dostarcza usługi projektowe, takie jak baza danych, hosting, uwierzytelnianie, storage i funkcje serwerowe. CometAPI zapewnia dostęp do modeli poprzez API, w tym obsługiwane modele wideo i punkty końcowe inferencji. Trzymaj płatną inferencję za uwierzytelnionymi funkcjami serwerowymi, z trwałymi zapisami zadań, sprawdzaniem własności i kontrolą rozliczeń.

Czy CometAPI jest kompatybilne z OpenAI?

CometAPI oferuje interfejsy kompatybilne z OpenAI dla wspieranych modeli tekstowych i czatowych. Skonfiguruj endpoint i model dla konkretnego SDK i trasy, której używasz; kompatybilność nie oznacza, że każdy model akceptuje taki sam schemat żądania.

API wideo Vidu jest oddzielne od kompatybilnego z OpenAI interfejsu czatowego. Tworzenie wideo używa POST /v1/videos z multipart/form-data, więc aplikacja musi wywołać endpoint wideo bezpośrednio z chronionej funkcji po stronie serwera.

Jak działa interfejs CometAPI Vidu Video API?

Utwórz zadanie wideo

Utwórz zadanie przez POST /v1/videos, używając multipart/form-data. Ten tutorial używa viduq3; viduq3-turbo to inna udokumentowana opcja. Potwierdź dostęp do modelu dla swojego klucza API i zachowaj zwrócony identyfikator zadania. Zobacz dokumentację tworzenia.

Parametry POST /v1/videos

Poniższa tabela zawiera parametry tworzenia. Wysyłaj skalarne pola formularza jako stringi. Dla seconds użyj stringa z wartością całkowitą od "1" do "16"; aplikacja może zweryfikować liczbowy czas trwania przed serializacją. Limit 2000 znaków dla promptu w tutorialu to polityka aplikacji.

Serwer zwraca id jako identyfikator zadania; nie jest to parametr tworzenia. Zapisz go w rekordzie zadania użytkownika i używaj do kolejnych zapytań o status i treść. Przekreślony wiersz id powyżej pozostawiono jedynie w celu pokazania usunięcia.

• 540p tier: Użyj wartości rozmiaru API 960x528 do eksperymentów.
• 720p tier: Użyj 1280x720 do podglądu w sieci.
• 1080p tier: Użyj 1920x1080 do dostarczania wyższej jakości.

Walidacja po stronie serwera musi odrzucać niewspierane kombinacje i zapobiegać żądaniom nieograniczonej płatnej generacji przez użytkowników.

Sprawdzaj status zadania

Sprawdzaj GET /v1/videos/{task_id} z backendu po zweryfikowaniu własności zadania. Kontynuuj, aż zadanie osiągnie stan końcowy; zachowaj identyfikator zadania, aby odświeżenie strony lub timeout przeglądarki pozwoliło wznowić to samo zadanie.

Pobierz ukończone wideo

Po zakończeniu, wywołaj GET /v1/videos/{task_id}/content przez backend i przesyłaj strumieniowo rezultat lub zapisz go do kontrolowanego storage’u. Poniższy przewodnik implementacyjny pokazuje, jak połączyć te operacje z Bolt.

Jak zbudować generator wideo AI przy użyciu Bolt + CometAPI

Krok 1: Utwórz projekt w Bolt

Otwórz Bolt i poproś o utworzenie projektu React + TypeScript. Wklej tę specyfikację do pola promptu, a następnie przejrzyj wygenerowany interfejs przed podłączeniem płatnej generacji:

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.

Krok 2: Skonfiguruj klucz API CometAPI

Utwórz klucz API w CometAPI, następnie dodaj tajny klucz backendowy o nazwie COMETAPI_KEY. Nigdy nie przechowuj go w plikach frontendowych, nie eksponuj w kodzie przeglądarkowym ani nie używaj zmiennej środowiskowej z prefiksem VITE_.

W ustawieniach projektu Bolt dodaj COMETAPI_KEY przez interfejs zarządzania tajnymi kluczami po stronie serwera. Nie umieszczaj go w kodzie frontendu ani nie eksponuj w JavaScript przeglądarki. Traktuj poniższą linię jako przykład nazewnictwa, nie jako plik .env frontendu.

COMETAPI_KEY=your_actual_cometapi_api_key

Krok 3: Wyślij zadanie generowania wideo

Poniższa funkcja w stylu Deno zapewnia rdzeń żądania do dostawcy. Przed wdrożeniem musi zostać opakowana prawdziwą walidacją sesji, limitami i rekordami zadań należących do użytkownika.

Ten przykład używa układu funkcji brzegowej Deno w stylu Supabase. Poproś Bolt o umieszczenie go w runtime serwera faktycznie skonfigurowanym dla twojego projektu. Komentarze o uwierzytelnianiu i trwałości to punkty integracji, a nie zaimplementowane zabezpieczenia: nie wdrażaj tego szkieletu jako publicznego płatnego endpointu.

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

Krok 4: Pobierz status generowania

Zgłoszenie zwraca asynchroniczny identyfikator zadania. Sprawdzaj GET /v1/videos/{task_id} przez endpoint serwerowy po zweryfikowaniu, że żądający użytkownik jest właścicielem zadania.

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

Zadanie zaczyna w stanie queued, może przejść do in_progress, a kończy w completed, failed lub error. Włącz podgląd i pobieranie dopiero po completed; w stanach końcowych błędu pokaż komunikat i pozwól na nowe zgłoszenie.

Krok 5: Połącz 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");
}

Ścieżki /api/ to trasy aplikacji, które musisz skonfigurować. Dla funkcji serwera Bolt Cloud użyj wygenerowanego klienta backendowego i uwierzytelnionych adresów endpointów. Przerywaj polling przy odmontowaniu komponentu i stosuj ograniczony backoff dla odpowiedzi 429/5xx. Deadline pollingu w przeglądarce nie dowodzi błędu dostawcy: zachowaj identyfikator zadania i wznow status przed utworzeniem kolejnego płatnego zadania.

Krok 6: Podgląd i pobranie wyniku

Gdy zadanie się ukończy, backend pobiera GET /v1/videos/{task_id}/content. Przesyłaj dane strumieniowo do uwierzytelnionego właściciela zadania lub zapisz w kontrolowanym obiekcie storage i udostępnij autoryzowany URL. Nigdy nie eksponuj klucza bearer CometAPI w przeglądarce.

Twoja aplikacja powinna wystawić trasę treści należącą do użytkownika albo autoryzowany URL storage dla komponentu podglądu. Podpisany URL jest dostępny dla każdego, kto go posiada, do czasu wygaśnięcia; utrzymuj krótki czas życia. Dla niezawodnych pobrań użyj trasy tego samego pochodzenia z odpowiednim nagłówkiem Content-Disposition, ponieważ przeglądarki mogą ignorować atrybut download dla adresów z innego pochodzenia.

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

Krok 7: Testuj i publikuj

Najpierw przetestuj żądanie 5 sekund 540p: „Filmowy zbliżenie srebrnego smartwatcha na ciemnym biurku. Kamera powoli przesuwa się z lewej na prawą. Miękkie poranne światło odbija się od metalu.” Sprawdź, że jedno żądanie tworzy jedno zadanie, status postępuje, wynik się odtwarza i pobieranie działa. Przetestuj nieprawidłowe prompty, wygasłe sesje, ograniczanie tempa, własność zadań oraz błędy po stronie dostawcy przed publikacją.

Kontrola ukończenia: zaloguj się jako drugi użytkownik i potwierdź, że zadania pierwszego użytkownika nie można odczytać ani pobrać; odśwież stronę podczas renderowania i potwierdź, że zapisane zadanie można odzyskać; sprawdź żądania przeglądarki i zbudowane zasoby pod kątem przypadkowej ekspozycji klucza. Publikuj dopiero po przejściu wszystkich trzech testów, oprócz odtwarzania i pobierania.

Jak dodać generowanie obrazu do wideo?

Dla obrazu do wideo dodaj jeden zweryfikowany plik obrazu jako input_reference w ciele multipart. Bieżąca trasa dokumentuje maksymalnie 20 MB na obraz; wymuś mniejszy limit aplikacyjny w razie potrzeby oraz zweryfikuj typ treści i faktyczną zawartość pliku po stronie serwera. Przekaż obraz przez uwierzytelniony backend; nie wysyłaj klucza CometAPI z uploadem przeglądarkowym.

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

Dla wejść obrazowych opisz pożądany ruch i akcję kamery zamiast jedynie powtarzać scenę: „Postać odwraca się w stronę okna. Zasłony delikatnie poruszają się na wietrze. Zachowaj twarz, ubranie i oświetlenie. Użyj subtelnego ruchu kamery do przodu.”

Vidu Q3 a inne modele wideo AI: co warto mierzyć?

Porównuj modele przy tych samych promptach, czasie trwania, rozdzielczości i kryteriach akceptacji. Ten rozdział definiuje metodę porównania; nie stwierdza przetestowanego zwycięzcy. Zapisuj wersję modelu, trasę, datę testu i liczbę próbek dla każdych publikowanych wyników.

• Completion rate: Podziel liczbę udanych zadań przez liczbę zgłoszonych, aby zmierzyć niezawodność.
• Latency: Śledź czas przetwarzania P50 i P95, aby zrozumieć typowe doświadczenie i wolniejsze żądania.
• Prompt adherence: Użyj recenzji ludzkiej lub znormalizowanej ewaluacji, aby ocenić, jak ściśle wyniki podążają za instrukcjami.
• Temporal consistency: Sprawdź ciągłość między klatkami, aby ocenić stabilność obrazu.
• Audio sync: Przejrzyj timing i zrozumiałość, aby ocenić dialog i dźwięk.
• Cost per accepted clip: Podziel całkowite wydatki przez zaakceptowane wyniki, aby zrozumieć ekonomię działania.

Ile kosztuje CometAPI Video Generation API?

Tabela poniżej przedstawia referencyjne ceny dla API Vidu Q3 i Vidu Q3 Turbo w CometAPI. Rzeczywiste koszty mogą się różnić w zależności od modelu, rozdzielczości i ustawień generowania. Sprawdź najnowsze ceny i dostępność modeli w swoim koncie CometAPI przed oszacowaniem budżetu generowania wideo.

API Vidu Q3 Turbo w CometAPI zaczyna się od $0.028 za sekundę. Ceny mogą się różnić w zależności od rozdzielczości, trybu generowania i wersji modelu. Sprawdź bieżące stawki w swoim koncie CometAPI przed generowaniem wideo.

Powyższe przykłady cen dotyczą standardowego generowania tekst-do-wideo i obraz-do-wideo. Inne tryby generowania lub konfiguracje obrazów referencyjnych mogą mieć inne stawki. Dodatkowe koszty, w tym podatki, storage, transfer danych i powtórne próby generowania, są wyłączone.

Na podstawie stawek referencyjnych, pięciosekundowe wideo 720p kosztuje około $0.616 dla Vidu Q3 lub $0.308 dla Vidu Q3 Turbo. W 540p odpowiadające szacunki to $0.280 i $0.140. Te wartości to przykładowe kalkulacje, a nie gwarantowane opłaty. Dla dokładnego budżetowania porównuj szacowane koszty z rzeczywistym użyciem API i rekordami rozliczeń.

Jak migrować istniejący generator wideo do Bolt + CometAPI?

Migruj stopniowo za adapterem dostawcy. Waliduj żądania i zachowanie wyjść, zacznij od małej grupy użytkowników, porównuj odsetek sukcesów i opóźnienie, oraz utrzymuj trasę wycofania, dopóki wydajność nie będzie akceptowalna.

Najczęściej zadawane pytania

Jak sprawić, aby zatwierdzony styl wizualny dało się powtarzać w serii?

Traktuj zatwierdzony klip jako odtwarzalną specyfikację kreatywną: zapisz dokładny prompt, model i trasę, czas trwania, rozdzielczość, wersję zasobu referencyjnego i identyfikator wyniku. Używaj niewielkiego zestawu obrazów referencyjnych oraz spójnego opisu oświetlenia, obiektywu, palety i szczegółów dotyczących tematu. Zmieniaj jedną główną zmienną na iterację, aby móc zidentyfikować, co pomogło. Powtórzony prompt nie gwarantuje tego samego wyniku; jeśli trasa ujawnia seed, zapisz go, ale mimo to przejrzyj każdy klip pod kątem ciągłości przed złożeniem sekwencji.

Jak utrzymać spójność wieloujęciowej historii, gdy każde generowanie to krótki klip?

Podziel scenariusz na ujęcia z jedną klarowną akcją i zdefiniowaną kompozycją otwarcia i zamknięcia. Prowadź kartę ciągłości dla wyglądu postaci, kostiumu, rekwizytów, oświetlenia i kierunku kamery. Tam, gdzie to możliwe, przekaż zatwierdzoną klatkę do następnego ujęcia jako obraz referencyjny zamiast polegać wyłącznie na opisie. Montuj, przycinaj i balansuj audio w oddzielnej ścieżce edycyjnej. Przeglądaj przejścia jako sekwencję: klip, który wygląda dobrze samodzielnie, może nadal złamać ciągłość obok innego.

Co zrobić, gdy przeglądarka przekroczy limit czasu po opłaconym zgłoszeniu?

Traktuj to jako niepewny wynik, dopóki zapisane zadanie dostawcy nie zostanie uzgodnione. Zachowaj lokalny identyfikator żądania aplikacji i jego identyfikator zadania dostawcy, pozwól użytkownikowi ponownie otworzyć to zadanie i wznowić sprawdzanie statusu. Jeśli samo zgłoszenie przekroczyło limit czasu przed zwróceniem identyfikatora, przejrzyj dostępne logi żądań i rekordy użycia przed zaproponowaniem kolejnej próby. Nie obiecuj, że timeout HTTP oznacza brak naliczonej opłaty. Każdą nową płatną próbę oznacz wyraźnie i użyj blokady żądania na poziomie aplikacji, aby zapobiec podwójnym kliknięciom.

Co należy sprawdzić przed przyjęciem prywatnych referencyjnych obrazów klientów?

Zdecyduj, jakie zasoby twoja aplikacja może przyjmować, czy przesyłający ma uprawnienie do ich użycia i które usługi downstream je otrzymają. Sprawdź aktualne warunki dostawcy dotyczące retencji, logowania, usuwania i dozwolonego wykorzystania, zanim obiecasz poufność. Unikaj osobistych lub poufnych materiałów referencyjnych w publicznych demonstracjach. Minimalizuj to, co przechowujesz, izoluj prywatne obiekty per użytkownik i zdefiniuj proces wygaśnięcia i usunięcia zarówno uploadów, jak i wygenerowanych plików. Prywatny bucket storage aplikacji sam w sobie nie opisuje polityki retencji dostawcy modelu.

Jak utrzymać przenośność projektu, jeśli zmieni się backend lub dostawca wideo?

Utrzymuj interfejs zależny od schematu zadań będącego własnością aplikacji, z polami żądania i mapowaniem statusów specyficznymi dla dostawcy wewnątrz oddzielnego adaptera. Zapisz zarówno wewnętrzny identyfikator zadania, jak i identyfikator zadania dostawcy oraz zachowaj referencje do zasobów potrzebnych do ponownego wygenerowania żądania. Utrzymuj wygenerowany przez Bolt kod aplikacji i konfigurację pod kontrolą wersji. Przy wymianie backendu migruj rekordy użytkowników i zadań, testuj granice dostępu, podpisane URL-e i historyczne pobrania przed przełączeniem ruchu; sam export kodu nie przenosi żywej bazy danych ani zapisanych plików wideo.

Podsumowanie

Bolt + CometAPI to praktyczna podstawa dla aplikacji generowania wideo: Bolt przyspiesza tworzenie aplikacji webowej, a CometAPI dostarcza dostęp do wspieranych modeli wideo. Zacznij od bezpiecznego workflow tekst-do-wideo, udowodnij, że cykl życia zadania i kontrola rozliczeń działają, następnie dodaj obrazy referencyjne, historię generacji, wybór modelu i zaawansowane narzędzia kreatywne. Oddzielenie interakcji frontendu od płatnej inferencji po stronie serwera jest kluczowe dla bezpiecznego i niezawodnego produktu.