Как создать генератор видео на основе ИИ с помощью Bolt & CometAPI: пошаговое руководство

TL;DR

Bolt может сгенерировать интерфейс приложения, а CometAPI предоставляет API для генерации видео. Храните ключ CometAPI на сервере, отправляйте задания Vidu через POST /v1/videos, опрашивайте возвращенный идентификатор задачи и предоставляйте готовое видео через аутентифицированные маршруты предпросмотра и скачивания. Вам понадобятся проект Bolt, пополненный аккаунт CometAPI с доступом к выбранной модели и среда выполнения серверных функций; примеры ниже обучают ядру интеграции, аутентификация, квоты, проверки владения и постоянные записи задач должны быть реализованы до запуска.

Key Takeaways

• Bolt генерирует адаптивный UI видеостудии на основе спецификации приложения на естественном языке.

• CometAPI предоставляет видео-инференс через поддерживаемые модели генерации с защищенным серверным API-ключом.

• Начните с текст-видео; расширьте до изображение-видео после проверки жизненного цикла заданий.

• Готовность к продакшну требует аутентификации, квот, проверок владения задачами, повторных попыток и долговременного хранения результатов.

• Измеряйте реальную ценность по доле завершений, латентности, стоимости принятых клипов и соблюдению промпта.

What Are Bolt and CometAPI for AI Video Generation?

Bolt создает интерфейс, логику приложения и рабочий процесс публикации. Bolt Cloud предоставляет сервисы проекта, такие как база данных, хостинг, аутентификация, хранилище и серверные функции. CometAPI обеспечивает доступ к API моделей, включая поддерживаемые видеомодели и конечные точки инференса. Держите платный инференс за аутентифицированными серверными функциями с постоянными записями задач, проверками владения и контролем биллинга.

Is CometAPI OpenAI-Compatible?

CometAPI предлагает совместимые с OpenAI интерфейсы для поддерживаемых текстовых и чат-моделей. Настройте конечную точку и модель для конкретного SDK и маршрута, который вы используете; совместимость не означает, что каждая модель принимает одинаковую схему запроса.

Видео-API Vidu отделен от совместимого с OpenAI чат-интерфейса. Создание видео использует POST /v1/videos с multipart/form-data, поэтому приложение должно вызывать видео-эндпоинт напрямую из защищенной серверной функции.

How Does the CometAPI Vidu Video API Work?

Create a video task

Создайте задачу через POST /v1/videos, используя multipart/form-data. В этом руководстве используется viduq3; viduq3-turbo — еще одна документированная опция. Подтвердите доступ к модели для вашего API-ключа и сохраните возвращенный идентификатор задачи. См. creation API reference.

POST /v1/videos parameters

Ниже приведена таблица входных параметров создания. Отправляйте скалярные поля формы строками. Для seconds используйте строку-целое значение от "1" до "16"; приложение может валидировать числовую длительность до сериализации. Ограничение промпта 2000 символов в этом руководстве — это политика приложения.

Сервер возвращает id в качестве идентификатора задачи; это не параметр создания. Сохраните его в записи задания пользователя и используйте для последующих запросов статуса и контента. Зачеркнутая строка id выше сохранена только для демонстрации удаления.

• Уровень 540p: используйте значение размера API 960x528 для экспериментов.
• Уровень 720p: используйте 1280x720 для веб-предпросмотра.
• Уровень 1080p: используйте 1920x1080 для более качественной доставки.

Серверная валидация должна отклонять неподдерживаемые комбинации и предотвращать неограниченную платную генерацию по запросу пользователей.

Poll the task status

Проверяйте GET /v1/videos/{task_id} на бэкенде после проверки владения заданием. Продолжайте, пока задача не достигнет терминального состояния; сохраняйте идентификатор задачи, чтобы при обновлении страницы или тайм-ауте браузера можно было возобновить ту же задачу.

Download the completed video

После завершения запросите GET /v1/videos/{task_id}/content через бэкенд и транслируйте результат или сохраните его в контролируемом хранилище. Ниже в пошаговой реализации показано, как связать эти операции с Bolt.

How to Build an AI Video Generator Using Bolt + CometAPI

Step 1: Create the project in Bolt

Откройте Bolt и попросите его создать проект React + TypeScript. Вставьте эту спецификацию в поле подсказки, затем проверьте сгенерированный интерфейс перед подключением платной генерации:

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

Создайте API-ключ в CometAPI, затем добавьте серверный секрет с именем COMETAPI_KEY. Никогда не храните его в исходниках фронтенда, не раскрывайте в браузерном коде и не используйте переменную окружения с префиксом VITE_.

В настройках проекта Bolt добавьте COMETAPI_KEY через интерфейс управления серверными секретами проекта. Не размещайте его в исходном коде фронтенда и не раскрывайте в JavaScript браузера. Рассматривайте следующую строку как пример именования, а не как фронтенд-файл .env.

COMETAPI_KEY=your_actual_cometapi_api_key

Step 3: Submit a video-generation task

Следующая функция в стиле Deno предоставляет ядро запроса к провайдеру. Перед развертыванием она должна быть обернута реальной проверкой сессии, квотами и записями задач с привязкой к пользователю.

Этот пример использует верстку edge-функции Deno в стиле Supabase. Попросите Bolt разместить ее в серверной среде выполнения, фактически настроенной для вашего проекта. Комментарии про аутентификацию и персистентность — точки интеграции, а не реализованные защиты: не разворачивайте этот скелет как публичный платный эндпоинт.

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

Отправка возвращает асинхронный идентификатор задания. Проверяйте GET /v1/videos/{task_id} через серверный эндпоинт после подтверждения, что запрашивающий пользователь владеет задачей.

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

Задача стартует в состоянии queued, может перейти в in_progress и завершится в completed, failed или error. Включайте предпросмотр и скачивание только после completed; показывайте ошибку и разрешайте новый запрос для терминальных состояний сбоев.

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

Маршруты /api/ — это маршруты вашего приложения, которые вы должны настроить. Для серверных функций Bolt Cloud используйте сгенерированный бэкенд-клиент и аутентифицированные URL-адреса эндпоинтов. Отменяйте опрос при размонтировании компонента и используйте ограниченный бэкофф для ответов 429/5xx. Дедлайн опроса в браузере не доказывает сбой у провайдера: сохраняйте идентификатор задачи и возобновляйте проверки статуса перед созданием еще одного платного задания.

Step 6: Preview and download the result

Когда задание завершено, бэкенд получает GET /v1/videos/{task_id}/content. Транслируйте данные аутентифицированному владельцу задачи или сохраните их в контролируемом объектном хранилище и предоставьте авторизованный URL. Никогда не раскрывайте bearer-ключ CometAPI в браузере.

Ваше приложение должно предоставлять маршрут контента, принадлежащий пользователю, или авторизованный URL из хранилища для компонента предпросмотра. Подписанный URL доступен любому, у кого он есть, до истечения срока; держите его время жизни коротким. Для надежных загрузок используйте маршрут того же происхождения с соответствующим заголовком Content-Disposition, поскольку браузеры могут игнорировать атрибут download для кросс-доменных URL.

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

Сначала протестируйте запрос на пять секунд 540p: «Кинематографический крупный план серебристых умных часов на темном столе. Камера медленно движется слева направо. Мягкий утренний свет отражается от металла». Проверьте, что одному запросу соответствует одна задача, статус продвигается, результат воспроизводится, а скачивание успешно. Перед публикацией протестируйте некорректные промпты, просроченные сессии, ограничение частоты, владение задачами и сбои у провайдера.

Проверка завершенности: войдите как второй пользователь и убедитесь, что задания первого пользователя не читаются и не скачиваются; обновите страницу во время рендеринга и убедитесь, что сохраненную задачу можно восстановить; проверьте запросы браузера и собранные артефакты на случайное раскрытие ключей. Публикуйте только после прохождения всех трех проверок, помимо воспроизведения и скачивания.

How Can You Add Image-to-Video Generation?

Для режима изображение-видео добавьте один валидированный файл изображения как input_reference в тело multipart. Текущий маршрут документирует максимум 20 МБ на изображение; при необходимости примените меньшее ограничение на уровне приложения и валидируйте content type и реальные содержимые файла на сервере. Передавайте изображение через аутентифицированный бэкенд; не отправляйте ключ CometAPI с загрузкой из браузера.

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

Для входных изображений описывайте желаемое движение и работу камеры, а не просто повторяйте сцену: «Персонаж поворачивается к окну. Шторы мягко колышутся на ветру. Сохранить лицо, одежду и освещение. Использовать легкое поступательное движение камеры вперед».

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

Сравнивайте модели по одинаковым промптам, длительности, разрешению и критериям приемки. Этот раздел определяет метод сравнения; он не заявляет о проверенном победителе. Записывайте версию модели, маршрут, дату теста и размер выборки для любых публикуемых результатов.

• Доля завершений: разделите успешные задания на отправленные, чтобы измерить надежность.
• Латентность: отслеживайте P50 и P95 времени обработки, чтобы понять типичный опыт и более медленные запросы.
• Соблюдение промпта: используйте ручной обзор или стандартизованную оценку, чтобы оценить, насколько точно выходы следуют инструкциям.
• Темпоральная согласованность: проверяйте непрерывность от кадра к кадру для оценки визуальной стабильности.
• Синхронизация аудио: оценивайте тайминг и разборчивость для диалогов и звука.
• Стоимость за принятый клип: делите общие затраты на одобренные выходы, чтобы понять экономику эксплуатации.

How Much Does the CometAPI Video Generation API Cost?

В таблице ниже приведены справочные цены для API Vidu Q3 и Vidu Q3 Turbo в CometAPI. Фактические расходы могут различаться в зависимости от модели, разрешения и настроек генерации. Проверьте актуальные цены и доступность моделей в вашем аккаунте CometAPI перед оценкой бюджета на генерацию видео.

API Vidu Q3 Turbo в CometAPI начинается от $0.028 за секунду. Цены могут варьироваться по разрешению, режиму генерации и версии модели. Проверьте текущие ставки в своем аккаунте CometAPI перед генерацией видео.

Приведенные выше примеры цен относятся к стандартным режимам текст-видео и изображение-видео. Другие режимы генерации или конфигурации с референс-изображениями могут иметь иные ставки. Дополнительные расходы, включая налоги, хранилище, трафик и повторные попытки генерации, не включены.

По справочным ставкам пятисекундное видео 720p стоит приблизительно $0.616 на Vidu Q3 или $0.308 на Vidu Q3 Turbo. Для 540p соответствующие оценки — $0.280 и $0.140. Эти цифры — иллюстративные расчеты, а не гарантированные суммы. Для точного бюджетирования сравнивайте оценочные затраты с фактическим использованием API и биллингом.

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

Мигрируйте постепенно за адаптером провайдера. Валидируйте запросы и поведение выхода, начните с небольшой доли пользователей, сравнивайте долю успеха и латентность и сохраняйте маршрут отката, пока производительность не станет приемлемой.

FAQ

Как сделать одобренный визуальный стиль воспроизводимым в серии?

Относитесь к одобренному клипу как к воспроизводимой креативной спецификации: сохраните точный промпт, модель и маршрут, длительность, разрешение, версию референс-актива и идентификатор выхода. Используйте небольшой набор референс-изображений и последовательное описание освещения, объектива, палитры и деталей субъекта. Меняйте по одному крупному параметру за итерацию, чтобы понимать, что помогло. Повторение промпта не гарантирует того же выхода; если маршрут предоставляет seed, фиксируйте его, но все равно проверяйте каждый клип на согласованность перед сборкой последовательности.

Как сохранить связность многокадровой истории, когда каждое поколение — короткий клип?

Разбейте сценарий на планы с одним понятным действием и определенной начальной и конечной композицией. Ведите лист непрерывности для внешности персонажей, костюмов, реквизита, освещения и направлений камеры. Где поддерживается, передавайте одобренный кадр в следующий шот как референс-изображение, а не полагайтесь только на текст. Собирать, подрезать и балансировать аудио следует в отдельном этапе монтажа. Проверяйте переходы как последовательность: клип, выглядящий сильным отдельно, может нарушать непрерывность рядом с другим.

Что делать, если браузер истекает по тайм-ауту после платной отправки?

Считайте исход неопределенным, пока сохраненная задача провайдера не будет сверена. Храните локальный идентификатор запроса приложения и его идентификатор задачи у провайдера, позвольте пользователю заново открыть это задание и возобновить проверки статуса. Если тайм-аут произошел на этапе отправки до возврата идентификатора, изучите доступные журналы запросов и записи использования, прежде чем предлагать новую попытку. Не обещайте, что HTTP-тайм-аут означает отсутствие списания. Делайте новую платную попытку явной и используйте блокировку на уровне приложения, чтобы предотвратить двойные клики.

Что следует проверить перед приемом приватных референс-изображений клиента?

Определите, какие активы ваше приложение разрешает принимать, есть ли у загрузчика права на их использование и какие последующие сервисы их получат. Проверьте текущие условия провайдера по хранению, логированию, удалению и допустимому использованию, прежде чем обещать конфиденциальность. Избегайте персональных или конфиденциальных референсов в общих демонстрациях. Минимизируйте то, что вы храните, изолируйте приватные объекты по пользователям и определите сроки и процесс удаления как для загрузок, так и для сгенерированных файлов. Частное хранилище приложения само по себе не описывает политику удержания у провайдера моделей.

Как сохранить портируемость проекта при смене бэкенда или видеопровайдера?

Сделайте интерфейс зависимым от принадлежащей приложению схемы задач, с провайдер-специфичными полями запроса и маппингом статусов внутри отдельного адаптера. Сохраняйте как внутренний ID задания, так и ID задачи провайдера, и держите ссылки на активы, необходимые для регенерации запроса. Держите сгенерированный Bolt код и конфигурацию под контролем версий. При замене бэкенда мигрируйте записи пользователей и задач, протестируйте границы доступа, подписанные URL и исторические загрузки до переключения трафика; один лишь экспорт кода не переносит живую базу данных или ее сохраненные видео.

Conclusion

Bolt + CometAPI — практичная основа для приложения генерации видео: Bolt ускоряет создание веб-приложений, а CometAPI обеспечивает доступ к поддерживаемым видеомоделям. Начните с безопасного контура текст-видео, докажите работоспособность жизненного цикла заданий и контроля биллинга, затем добавьте референс-изображения, историю генераций, выбор модели и продвинутые творческие инструменты. Разделение фронтенд-взаимодействий и платного серверного инференса — ключ к безопасному и надежному продукту.