Come creare un generatore di video basato su IA con Bolt & CometAPI: guida passo-passo

TL;DR

Bolt può generare l’interfaccia dell’applicazione, mentre CometAPI fornisce l’API per la generazione video. Conserva la chiave CometAPI sul server, invia le attività Vidu tramite POST /v1/videos, interroga periodicamente l’ID attività restituito ed esponi il video completato tramite route autenticate di anteprima e download. Ti serviranno un progetto Bolt, un account CometAPI con credito e accesso al modello selezionato, e un runtime per funzioni server; gli esempi seguenti insegnano il nucleo dell’integrazione, mentre autenticazione, quote, verifiche di proprietà e registri di attività persistenti devono essere implementati prima del lancio.

Key Takeaways

• Bolt genera un’interfaccia studio video responsive a partire da una specifica applicativa in linguaggio naturale.

• CometAPI fornisce l’inferenza video tramite modelli supportati di generazione, usando una chiave API protetta lato server.

• Inizia con text-to-video; estendi a image-to-video dopo aver verificato il ciclo di vita dell’attività.

• La produzione richiede autenticazione, quote, verifiche di proprietà delle attività, retry e archiviazione durevole degli output.

• Misura il valore reale con tasso di completamento, latenza, costo per clip accettata e aderenza al prompt.

What Are Bolt and CometAPI for AI Video Generation?

Bolt costruisce l’interfaccia, la logica applicativa e il workflow di pubblicazione. Bolt Cloud fornisce servizi di progetto come database, hosting, autenticazione, storage e funzioni server. CometAPI fornisce accesso all’API dei modelli, inclusi modelli video supportati ed endpoint di inferenza. Mantieni l’inferenza a pagamento dietro funzioni server autenticate, con registri delle attività persistenti, verifiche di proprietà e controlli di fatturazione.

Is CometAPI OpenAI-Compatible?

CometAPI offre interfacce compatibili con OpenAI per modelli di testo e chat supportati. Configura endpoint e modello per l’SDK e la route specifici che utilizzi; la compatibilità non implica che ogni modello accetti lo stesso schema di richiesta.

L’API video Vidu è separata dall’interfaccia chat compatibile con OpenAI. La creazione video utilizza POST /v1/videos con multipart/form-data, quindi l’applicazione deve chiamare l’endpoint video direttamente da una funzione lato server protetta.

How Does the CometAPI Vidu Video API Work?

Create a video task

Crea un’attività tramite POST /v1/videos usando multipart/form-data. Questo tutorial usa viduq3; viduq3-turbo è un’altra opzione documentata. Conferma l’accesso al modello per la tua chiave API e conserva l’ID attività restituito. Vedi la documentazione dell’API di creazione.

POST /v1/videos parameters

La tabella seguente contiene gli input di creazione. Invia i campi scalari del form come stringhe. Per seconds, usa una stringa con valore intero da "1" a "16"; l’applicazione può validare una durata numerica prima della serializzazione. Il limite di 2.000 caratteri del prompt in questo tutorial è una policy applicativa.

Il server restituisce id come identificatore dell’attività; non è un parametro di creazione. Salvalo con il record dell’attività dell’utente richiedente e usalo per richieste successive di stato e contenuto. La riga barrata id sopra è mantenuta solo per mostrare l’eliminazione.

• Fascia 540p: usa il valore API 960x528 per gli esperimenti.
• Fascia 720p: usa 1280x720 per le anteprime web.
• Fascia 1080p: usa 1920x1080 per consegna di qualità superiore.

La validazione lato server deve rifiutare combinazioni non supportate e impedire agli utenti di richiedere generazioni a pagamento non limitate.

Poll the task status

Verifica GET /v1/videos/{task_id} dal backend dopo aver verificato la proprietà dell’attività. Continua finché l’attività non raggiunge uno stato terminale; conserva l’ID attività in modo che un refresh della pagina o un timeout del browser possano riprendere la stessa attività.

Download the completed video

Dopo il completamento, richiedi GET /v1/videos/{task_id}/content tramite il backend e trasmetti il risultato in streaming oppure conservalo in uno storage controllato. Il walkthrough di implementazione qui sotto mostra come collegare queste operazioni a Bolt.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Apri Bolt e chiedigli di creare un progetto React + TypeScript. Incolla questa specifica nella casella di prompt, poi rivedi l’interfaccia generata prima di collegare la generazione a pagamento:

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

Crea una chiave API in CometAPI, quindi aggiungi un secret backend denominato COMETAPI_KEY. Non conservarla mai nei file di sorgente del frontend, non esporla al codice del browser e non usare una variabile di ambiente con prefisso VITE_.

Nelle impostazioni del tuo progetto Bolt, aggiungi COMETAPI_KEY tramite l’interfaccia di gestione dei secret lato server del progetto. Non inserirla nel codice sorgente del frontend né esporla a JavaScript del browser. Considera la riga seguente come un esempio di denominazione, non come un file .env del frontend.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

La seguente funzione in stile Deno fornisce il nucleo della richiesta al provider. Deve essere incapsulata con reale validazione di sessione, quote e record di attività di proprietà dell’utente prima del deployment.

Questo esempio usa un layout di funzione edge Deno in stile Supabase. Chiedi a Bolt di posizionarla nel runtime server effettivamente configurato per il tuo progetto. I commenti su autenticazione e persistenza sono punti di integrazione, non protezioni implementate: non distribuire questo scheletro come endpoint pubblico a pagamento.

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

L’invio restituisce un ID di attività asincrono. Verifica GET /v1/videos/{task_id} tramite un endpoint server dopo aver verificato che l’utente richiedente possieda l’attività.

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

L’attività parte in queued, può passare a in_progress e si conclude in completed, failed o error. Abilita anteprima e download solo dopo completed; mostra un errore e consenti una nuova richiesta per stati terminali di fallimento.

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

I percorsi /api/ sono route applicative che devi configurare. Per le funzioni server di Bolt Cloud, usa il client backend generato e gli URL degli endpoint autenticati. Interrompi il polling quando il componente viene smontato e usa un backoff limitato per risposte 429/5xx. Una scadenza del polling nel browser non prova un errore del provider: conserva l’ID attività e riprendi i controlli di stato prima di creare un’altra attività a pagamento.

Step 6: Preview and download the result

Quando un’attività è completa, il backend recupera GET /v1/videos/{task_id}/content. Trasmetti i dati in streaming al proprietario autenticato dell’attività oppure salvali in uno storage oggetti controllato e fornisci un URL autorizzato. Non esporre mai la chiave bearer di CometAPI nel browser.

La tua applicazione dovrebbe esporre una route di contenuto di proprietà dell’utente o un URL di storage autorizzato per il componente di anteprima. Un URL firmato è accessibile a chiunque lo possieda fino alla scadenza; mantienine breve la durata. Per download affidabili, usa una route same-origin con un’intestazione Content-Disposition appropriata, poiché i browser possono ignorare l’attributo download per URL cross-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

Testa prima una richiesta da cinque secondi a 540p: “Un primo piano cinematografico di uno smartwatch argento su una scrivania scura. La camera si muove lentamente da sinistra a destra. La luce morbida del mattino si riflette sul metallo.” Verifica che una richiesta crei una sola attività, lo stato avanzi, il risultato venga riprodotto e il download riesca. Prima della pubblicazione testa prompt non validi, sessioni scadute, rate limiting, proprietà dell’attività e failure del provider.

Verifica finale: accedi come secondo utente e conferma che il job del primo utente non possa essere letto o scaricato; aggiorna la pagina durante il rendering e conferma che l’attività salvata possa essere recuperata; ispeziona le richieste del browser e gli asset generati per individuare un’eventuale esposizione accidentale della chiave. Pubblica solo dopo che tutti e tre i controlli sono superati, oltre a riproduzione e download.

How Can You Add Image-to-Video Generation?

Per l’image-to-video, aggiungi un solo file immagine validato come input_reference nel body multipart. La route attuale documenta un massimo di 20 MB per immagine; applica un limite applicativo inferiore se necessario e valida tipo di contenuto e contenuto reale del file sul server. Passa l’immagine tramite il backend autenticato; non inviare la chiave CometAPI con l’upload dal 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);

Per input immagine, descrivi il movimento desiderato e l’azione della camera invece di ripetere semplicemente la scena: “Il personaggio si gira verso la finestra. Le tende si muovono dolcemente nella brezza. Preserva volto, abiti e illuminazione. Usa un leggero movimento di camera in avanti.”

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

Confronta i modelli sugli stessi prompt, durata, risoluzione e criteri di accettazione. Questa sezione definisce un metodo di confronto; non afferma un vincitore testato. Registra la versione del modello, la route, la data del test e il numero di campioni per qualsiasi risultato pubblicato.

• Tasso di completamento: dividi i job riusciti per i job inviati per misurare l’affidabilità.
• Latenza: traccia P50 e P95 dei tempi di elaborazione per comprendere l’esperienza tipica e le richieste più lente.
• Aderenza al prompt: usa revisione umana o valutazioni standardizzate per misurare quanto gli output seguano le istruzioni richieste.
• Coerenza temporale: controlla la continuità frame-to-frame per valutare la stabilità visiva.
• Sincronizzazione audio: rivedi tempi e intelligibilità per valutare dialoghi e suono.
• Costo per clip accettata: dividi la spesa totale per gli output approvati per comprendere l’economia operativa.

How Much Does the CometAPI Video Generation API Cost?

La tabella seguente fornisce prezzi di riferimento per le API Vidu Q3 e Vidu Q3 Turbo in CometAPI. I costi effettivi possono variare in base a modello, risoluzione e impostazioni di generazione. Verifica i prezzi più recenti e la disponibilità dei modelli nel tuo account CometAPI prima di stimare il budget per la generazione video.

L’API Vidu Q3 Turbo in CometAPI parte da $0.028 al secondo. I prezzi possono variare per risoluzione, modalità di generazione e versione del modello. Verifica le tariffe correnti nel tuo account CometAPI prima di generare video.

Gli esempi di prezzo sopra si applicano a generazione standard text-to-video e image-to-video. Altre modalità di generazione o configurazioni con immagini di riferimento possono avere tariffe differenti. Costi aggiuntivi, incluse tasse, storage, banda e tentativi ripetuti di generazione, sono esclusi.

In base alle tariffe di riferimento, un video da cinque secondi a 720p costa circa $0.616 con Vidu Q3 o $0.308 con Vidu Q3 Turbo. A 540p, le stime corrispondenti sono $0.280 e $0.140. Queste cifre sono calcoli illustrativi e non addebiti garantiti. Per un budget accurato, confronta i costi stimati con l’uso reale dell’API e i record di fatturazione.

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

Migra gradualmente dietro un adapter del provider. Valida richieste e comportamento degli output, inizia con una piccola quota di utenti, confronta tassi di successo e latenza e mantieni una route di rollback finché le prestazioni non sono accettabili.

FAQ

Come posso rendere ripetibile uno stile visivo approvato su una serie?

Tratta una clip approvata come una specifica creativa riproducibile: salva prompt esatto, modello e route, durata, risoluzione, versione dell’asset di riferimento e identificatore dell’output. Usa un piccolo set di immagini di riferimento e una descrizione coerente di illuminazione, lente, palette e dettagli del soggetto. Cambia una sola variabile importante per iterazione, così puoi identificare cosa ha aiutato. Un prompt ripetuto non garantisce lo stesso output; se la route espone un seed, registralo, ma rivedi comunque ogni clip per la continuità prima di assemblare una sequenza.

Come può una storia multi-shot restare coerente quando ogni generazione è una clip breve?

Scompone la sceneggiatura in inquadrature con un’unica azione chiara e una composizione di apertura e chiusura definita. Mantieni un foglio di continuità per aspetto dei personaggi, guardaroba, oggetti di scena, illuminazione e direzione della camera. Dove supportato, passa un frame approvato nello shot successivo come immagine di riferimento invece di affidarti solo al testo. Assembla, rifila ed equilibra l’audio in un passaggio di editing separato. Rivedi le transizioni come sequenza: una clip che funziona da sola può rompere la continuità quando è accostata a un’altra.

Cosa dovrebbe accadere se il browser va in timeout dopo un invio a pagamento?

Tratta questo caso come esito incerto finché l’attività del provider salvata non viene riconciliata. Conserva un identificatore di richiesta applicativa locale e il relativo ID attività del provider, consenti all’utente di riaprire quel job e riprendi i controlli di stato. Se l’invio stesso è andato in timeout prima di restituire un ID, ispeziona i log di richiesta disponibili e i record di utilizzo prima di offrire un altro tentativo. Non promettere che un timeout HTTP implichi assenza di addebito. Rendi esplicito ogni nuovo tentativo a pagamento e usa un lock a livello applicativo per evitare invii doppi con doppio clic.

Cosa dovrei rivedere prima di accettare immagini di riferimento private dei clienti?

Decidi quali asset la tua applicazione può accettare, se chi carica ha il permesso di usarli e quali servizi downstream li riceveranno. Verifica i termini correnti del provider per conservazione, logging, eliminazione e usi consentiti prima di promettere riservatezza. Evita materiale personale o confidenziale nelle dimostrazioni condivise. Minimizza ciò che archivi, isola gli oggetti privati per utente e definisci un workflow di scadenza ed eliminazione sia per upload sia per file generati. Un bucket di storage privato dell’applicazione non descrive di per sé la policy di conservazione del provider del modello.

Come posso mantenere portabile il progetto se cambiano backend o provider video?

Mantieni l’interfaccia dipendente da uno schema delle attività di proprietà dell’applicazione, con campi specifici di richiesta del provider e mappatura degli stati all’interno di un adapter separato. Salva sia il tuo ID attività interno sia l’ID attività del provider e conserva i riferimenti agli asset necessari per rigenerare una richiesta. Tieni il codice e la configurazione dell’app generata con Bolt sotto controllo versione. Quando sostituisci un backend, migra record di utenti e attività e testa confini di accesso, URL firmati e download storici prima di spostare il traffico; un export del codice da solo non trasferisce un database live o i suoi file video archiviati.

Conclusion

Bolt + CometAPI è una base pratica per un’app di generazione video: Bolt accelera la creazione del web app, e CometAPI fornisce accesso a modelli video supportati. Inizia con un workflow text-to-video sicuro, dimostra che ciclo di vita delle attività e controlli di fatturazione funzionano, quindi aggiungi immagini di riferimento, cronologia delle generazioni, selezione del modello e strumenti creativi avanzati. La separazione tra interazioni frontend e inferenza a pagamento lato server è essenziale per un prodotto sicuro e affidabile.