Comment créer un générateur de vidéos par IA avec Bolt & CometAPI : guide étape par étape

TL;DR

Bolt peut générer l’interface de l’application, tandis que CometAPI fournit l’API de génération vidéo. Conservez la clé CometAPI sur le serveur, soumettez les tâches Vidu via POST /v1/videos, sondez l’ID de tâche renvoyé et exposez la vidéo terminée via des routes d’aperçu et de téléchargement authentifiées. Vous aurez besoin d’un projet Bolt, d’un compte CometAPI approvisionné avec accès au modèle sélectionné, et d’un environnement d’exécution pour fonctions serveur ; les exemples ci-dessous enseignent l’intégration cœur, tandis que l’authentification, les quotas, les vérifications de propriété et des enregistrements de tâches persistants doivent être mis en place avant le lancement.

Key Takeaways

• Bolt génère une interface de studio vidéo réactive à partir d’une spécification d’application en langage naturel.

• CometAPI fournit l’inférence vidéo via des modèles de génération pris en charge, en utilisant une clé API protégée côté serveur.

• Commencez par le texte vers vidéo ; étendez au image vers vidéo après avoir vérifié le cycle de vie des tâches.

• La préparation à la production nécessite l’authentification, des quotas, des vérifications de propriété des tâches, des reprises, et un stockage durable des sorties.

• Mesurez la valeur réelle avec le taux de complétion, la latence, le coût des clips acceptés et la conformité au prompt.

What Are Bolt and CometAPI for AI Video Generation?

Bolt construit l’interface, la logique applicative et le workflow de publication. Bolt Cloud fournit des services de projet tels que base de données, hébergement, authentification, stockage et fonctions serveur. CometAPI fournit l’accès aux modèles via API, incluant les modèles vidéo pris en charge et les endpoints d’inférence. Placez l’inférence payante derrière des fonctions serveur authentifiées, avec des enregistrements de tâches persistants, des vérifications de propriété et des contrôles de facturation.

Is CometAPI OpenAI-Compatible?

CometAPI propose des interfaces compatibles OpenAI pour les modèles de texte et de chat pris en charge. Configurez l’endpoint et le modèle pour le SDK et la route spécifiques que vous utilisez ; la compatibilité ne signifie pas que chaque modèle accepte le même schéma de requête.

L’API vidéo Vidu est distincte de l’interface de chat compatible OpenAI. La création vidéo utilise POST /v1/videos avec multipart/form-data, donc l’application doit appeler l’endpoint vidéo directement depuis une fonction serveur protégée.

How Does the CometAPI Vidu Video API Work?

Create a video task

Créez une tâche via POST /v1/videos en utilisant multipart/form-data. Ce tutoriel utilise viduq3 ; viduq3-turbo est une autre option documentée. Confirmez l’accès au modèle pour votre clé API et conservez l’ID de tâche renvoyé. Voir la référence de l’API de création.

POST /v1/videos parameters

Le tableau ci-dessous répertorie les entrées de création. Envoyez les champs scalaires de formulaire en tant que chaînes. Pour seconds, utilisez une chaîne à valeur entière de "1" à "16" ; l’application peut valider une durée numérique avant sérialisation. La limite de prompt de 2,000 caractères dans ce tutoriel est une politique applicative.

Le serveur renvoie id comme identifiant de tâche ; ce n’est pas un paramètre de création. Enregistrez-le avec la tâche de l’utilisateur demandeur et utilisez-le pour les requêtes ultérieures de statut et de contenu. La ligne id barrée ci-dessus est conservée uniquement pour montrer la suppression.

• Palier 540p : utilisez la valeur d’API 960x528 pour les expérimentations.
• Palier 720p : utilisez 1280x720 pour les aperçus web.
• Palier 1080p : utilisez 1920x1080 pour une livraison de meilleure qualité.

La validation côté serveur doit rejeter les combinaisons non prises en charge et empêcher les utilisateurs de demander une génération payante non bornée.

Poll the task status

Vérifiez GET /v1/videos/{task_id} depuis le backend après avoir vérifié la propriété de la tâche. Continuez jusqu’à ce que la tâche atteigne un état terminal ; conservez l’ID de tâche pour qu’un rafraîchissement de page ou un timeout du navigateur puisse reprendre la même tâche.

Download the completed video

Après achèvement, demandez GET /v1/videos/{task_id}/content via le backend et diffusez le résultat ou conservez-le dans un stockage contrôlé. Le guide d’implémentation ci-dessous montre comment connecter ces opérations à Bolt.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Ouvrez Bolt et demandez-lui de créer un projet React + TypeScript. Collez cette spécification dans la boîte de prompt, puis examinez l’interface générée avant de connecter la génération payante :

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

Créez une clé API dans CometAPI, puis ajoutez un secret backend nommé COMETAPI_KEY. Ne la stockez jamais dans les fichiers source frontend, ne l’exposez pas au code du navigateur, et n’utilisez pas de variable d’environnement préfixée VITE_.

Dans les paramètres de votre projet Bolt, ajoutez COMETAPI_KEY via l’interface de gestion des secrets côté serveur du projet. Ne la placez pas dans le code source frontend ni ne l’exposez au JavaScript du navigateur. Traitez la ligne suivante comme un exemple de nommage, pas comme un fichier .env frontend.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

La fonction de style Deno suivante fournit le cœur de la requête au fournisseur. Elle doit être enveloppée avec une validation de session réelle, des quotas, et des enregistrements de tâches appartenant à l’utilisateur avant le déploiement.

Cet exemple utilise une disposition de fonction edge Deno de type Supabase. Demandez à Bolt de la placer dans l’environnement serveur réellement configuré pour votre projet. Les commentaires sur l’authentification et la persistance sont des points d’intégration, pas des protections implémentées : ne déployez pas ce squelette comme un endpoint payant public.

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

La soumission renvoie un ID de tâche asynchrone. Vérifiez GET /v1/videos/{task_id} via un endpoint serveur après avoir confirmé que l’utilisateur demandeur possède la tâche.

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

La tâche démarre à queued, peut passer à in_progress, et se termine par completed, failed, ou error. Activez l’aperçu et le téléchargement uniquement après completed ; affichez une erreur et autorisez une nouvelle demande pour les états d’échec terminaux.

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

Les chemins /api/ sont des routes d’application que vous devez configurer. Pour les fonctions serveur Bolt Cloud, utilisez le client backend généré et des URLs d’endpoints authentifiés. Annulez le polling lorsque le composant est démonté et utilisez un backoff borné pour les réponses 429/5xx. Une date limite de sondage côté navigateur ne prouve pas un échec du fournisseur : conservez l’ID de tâche et reprenez les vérifications de statut avant de créer une autre tâche payante.

Step 6: Preview and download the result

Lorsqu’un job est terminé, le backend récupère GET /v1/videos/{task_id}/content. Diffusez les données au propriétaire authentifié du job ou enregistrez-les dans un stockage d’objets contrôlé et fournissez une URL autorisée. N’exposez jamais la clé Bearer CometAPI dans le navigateur.

Votre application doit exposer une route de contenu appartenant à l’utilisateur ou une URL de stockage autorisée pour le composant d’aperçu. Une URL signée est accessible à toute personne la détenant jusqu’à expiration ; maintenez sa durée de vie courte. Pour des téléchargements fiables, utilisez une route de même origine avec un en-tête Content-Disposition approprié, car les navigateurs peuvent ignorer l’attribut download pour les URLs 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

Testez d’abord une requête de cinq secondes en 540p : “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.” Vérifiez qu’une requête crée une tâche, que le statut progresse, que le résultat se lit et que le téléchargement réussit. Testez les prompts invalides, les sessions expirées, la limitation de débit, la propriété des tâches et les échecs du fournisseur avant la publication.

Contrôle final : connectez-vous en tant que second utilisateur et confirmez que le job du premier utilisateur ne peut pas être lu ni téléchargé ; rafraîchissez la page pendant le rendu et confirmez que la tâche sauvegardée peut être récupérée ; inspectez les requêtes du navigateur et les assets construits pour détecter une exposition accidentelle de clé. Publiez uniquement après que ces trois vérifications, en plus de la lecture et du téléchargement, sont réussies.

How Can You Add Image-to-Video Generation?

Pour le image vers vidéo, ajoutez un fichier image validé en tant que input_reference dans le corps multipart. La route actuelle documente un maximum de 20 MB par image ; imposez une limite applicative plus petite si nécessaire et validez le type de contenu et le contenu réel du fichier côté serveur. Faites transiter l’image via le backend authentifié ; n’envoyez pas la clé CometAPI avec le téléversement du navigateur.

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

Pour les entrées image, décrivez le mouvement et l’action de caméra souhaités plutôt que de simplement répéter la scène : “The character turns toward the window. Curtains move gently in the breeze. Preserve face, clothing, and lighting. Use a subtle forward camera motion.”

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

Comparez les modèles avec les mêmes prompts, durée, résolution et critères d’acceptation. Cette section définit une méthode de comparaison ; elle ne revendique pas de gagnant éprouvé. Enregistrez la version du modèle, la route, la date de test et le nombre d’échantillons pour tout résultat publié.

• Taux de complétion : divisez les jobs réussis par les jobs soumis pour mesurer la fiabilité.
• Latence : suivez les temps de traitement P50 et P95 pour comprendre l’expérience typique et les requêtes plus lentes.
• Conformité au prompt : utilisez une revue humaine ou une évaluation standardisée pour mesurer la fidélité aux instructions demandées.
• Cohérence temporelle : vérifiez la continuité image par image pour évaluer la stabilité visuelle.
• Synchronisation audio : examinez le timing et l’intelligibilité pour évaluer les dialogues et le son.
• Coût par clip accepté : divisez la dépense totale par les sorties approuvées pour comprendre l’économie d’exploitation.

How Much Does the CometAPI Video Generation API Cost?

Le tableau ci-dessous fournit des prix de référence pour les APIs Vidu Q3 et Vidu Q3 Turbo dans CometAPI. Les coûts réels peuvent varier selon le modèle, la résolution et les paramètres de génération. Vérifiez les derniers tarifs et la disponibilité des modèles dans votre compte CometAPI avant d’estimer votre budget de génération vidéo.

L’API Vidu Q3 Turbo dans CometAPI commence à $0.028 par seconde. Les prix peuvent varier selon la résolution, le mode de génération et la version du modèle. Vérifiez les tarifs actuels dans votre compte CometAPI avant de générer des vidéos.

Les exemples de prix ci-dessus s’appliquent à la génération standard texte vers vidéo et image vers vidéo. D’autres modes de génération ou configurations d’image de référence peuvent avoir des tarifs différents. Les coûts supplémentaires, y compris taxes, stockage, bande passante et tentatives de génération répétées, sont exclus.

Sur la base des tarifs de référence, une vidéo de cinq secondes en 720p coûte environ $0.616 avec Vidu Q3 ou $0.308 avec Vidu Q3 Turbo. En 540p, les estimations correspondantes sont $0.280 et $0.140. Ces chiffres sont des calculs illustratifs et non des charges garanties. Pour une budgétisation précise, comparez les coûts estimés à l’usage réel de l’API et aux relevés de facturation.

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

Migrez progressivement derrière un adaptateur de fournisseur. Validez les requêtes et le comportement de sortie, commencez avec une petite part d’utilisateurs, comparez taux de succès et latence, et conservez une route de rollback jusqu’à ce que les performances soient acceptables.

FAQ

How can I make an approved visual style repeatable across a series?

Traitez un clip approuvé comme une spécification créative reproductible : enregistrez le prompt exact, le modèle et la route, la durée, la résolution, la version de l’actif de référence et l’identifiant de sortie. Utilisez un petit ensemble d’images de référence et une description cohérente de l’éclairage, de la lentille, de la palette et des détails du sujet. Ne changez qu’une variable majeure par itération pour identifier ce qui a aidé. Un prompt répété ne garantit pas la même sortie ; si la route expose un seed, enregistrez-le, mais examinez tout de même chaque clip pour la continuité avant d’assembler une séquence.

How should a multi-shot story stay coherent when each generation is a short clip?

Découpez le script en plans avec une action claire et une composition d’ouverture et de fermeture définies. Maintenez une fiche de continuité pour l’apparence des personnages, la garde-robe, les accessoires, l’éclairage et la direction de la caméra. Lorsque c’est pris en charge, passez une image approuvée dans le plan suivant comme référence, plutôt que de compter uniquement sur le texte. Assemblez, coupez et équilibrez l’audio dans une passe de montage séparée. Passez en revue les transitions en séquence : un clip qui semble solide seul peut briser la continuité une fois placé à côté d’un autre.

What should happen if the browser times out after a paid submission?

Traitez ceci comme un résultat incertain jusqu’à ce que la tâche fournisseur sauvegardée soit réconciliée. Conservez un identifiant de requête applicatif local et son ID de tâche fournisseur, permettez à l’utilisateur de rouvrir ce job et reprenez les vérifications de statut. Si la soumission elle-même a expiré avant de retourner un ID, inspectez les journaux de requêtes disponibles et les relevés d’usage avant de proposer une autre tentative. Ne promettez pas qu’un timeout HTTP signifie qu’aucune facturation n’a eu lieu. Rendez explicite toute nouvelle tentative payante et utilisez un verrou de requête au niveau applicatif pour empêcher les double-clics.

What should I review before accepting private customer reference images?

Décidez quels assets votre application est autorisée à accepter, si l’uploader a la permission de les utiliser, et quels services en aval les recevront. Vérifiez les conditions actuelles du fournisseur concernant la rétention, la journalisation, la suppression et l’usage autorisé avant de promettre la confidentialité. Évitez le matériel personnel ou confidentiel dans des démonstrations partagées. Minimisez ce que vous stockez, isolez les objets privés par utilisateur, et définissez un workflow d’expiration et de suppression pour les téléchargements et les fichiers générés. Un bucket de stockage privé d’application ne décrit pas à lui seul la politique de rétention d’un fournisseur de modèle.

How can I keep the project portable if my backend or video provider changes?

Gardez l’interface dépendante d’un schéma de job appartenant à l’application, avec les champs de requête spécifiques au fournisseur et la cartographie des statuts à l’intérieur d’un adaptateur séparé. Enregistrez à la fois votre ID de job interne et l’ID de tâche du fournisseur, et conservez les références aux assets nécessaires pour régénérer une requête. Conservez le code et la configuration générés par Bolt sous contrôle de version. Lors du remplacement d’un backend, migrez les enregistrements utilisateurs et de jobs et testez les frontières d’accès, les URLs signées et les téléchargements historiques avant de basculer le trafic ; une exportation de code seule ne transfère pas une base de données active ni ses fichiers vidéo stockés.

Conclusion

Bolt + CometAPI constitue une base pratique pour une application de génération vidéo : Bolt accélère la création d’applications web, et CometAPI fournit l’accès aux modèles vidéo pris en charge. Commencez par un workflow sécurisé texte vers vidéo, prouvez que le cycle de vie des tâches et les contrôles de facturation fonctionnent, puis ajoutez des images de référence, un historique de génération, la sélection de modèles et des outils créatifs avancés. La séparation des interactions frontend de l’inférence payante côté serveur est essentielle pour un produit sûr et fiable.