Image, Video & Audio Generation
Generate images, video and audio with Replicate in the Nuxt template.
The template includes asynchronous AI media Examples for image, video, and audio generation. Each capability uses the same provider-factory shape, with Replicate as the only built-in provider.
Architecture
Each index.ts owns a singleton factory, defaults to replicate, and only
registers Replicate*Provider when runtimeConfig.replicateApiToken exists.
The types define createTask/queryTask interfaces and normalized statuses:
pending, processing, succeeded, failed, and canceled.
Setup and routes
NUXT_REPLICATE_API_TOKEN=your-replicate-api-token| Capability | Create | Query |
|---|---|---|
| Image | POST /api/ai/image | POST /api/ai/image/query |
| Video | POST /api/ai/video | POST /api/ai/video/query |
| Audio | POST /api/ai/audio | POST /api/ai/audio/query |
Create routes validate their media-specific payload and return a taskId plus
initial status. Query routes accept a non-empty taskId, ask Replicate for the
prediction, normalize its status, and extract URL arrays from common output
shapes.
All six routes call requireAiAuth and use Zod. A session is required unless
NUXT_PUBLIC_AI_PUBLIC_DEMO=true; keep that flag false in production.
Included pages and defaults
| Page/component | Modes and current model options | Polling |
|---|---|---|
/ai/image / ImageGenerator.vue | Text/image input; black-forest-labs/flux-2-pro (default), bytedance/seedream-3; three aspect ratios | 5 s, 5 min timeout |
/ai/video / VideoGenerator.vue | Text/image/video input; Kling 2.5 Turbo Pro (default), Veo 3.1, Sora 2 | 15 s, 10 min timeout |
/ai/audio / AudioGenerator.vue | Text-to-audio and audio-to-audio; qwen/qwen3-tts; language selector | 5 s, 5 min timeout |
The image provider maps the three sizes to 1:1, 16:9, and 9:16, and sends
source data as input_images. Video input keys vary for Veo, Sora, and the
generic path. The Qwen adapter maps text, language, voice/clone mode, and an
optional reference audio URL.
Change a model
Update the component's model options and verify the provider's input mapping
against that model's current Replicate schema. A shared owner/model string is
not enough: prompt, aspect ratio, reference image, duration, language, and
output shapes often differ between models.
For image/audio defaults, also update the fallback in the corresponding
Replicate provider if callers may omit model. Video requires a model in its
Zod schema.
Add another provider
Implement the capability interface in a new provider, extend its
*ProviderType union, register it in the factory, and extend the create/query
Zod provider enum. Keep normalized statuses and URL fields stable so the Vue
components remain provider-agnostic.
Production gaps
These examples do not persist jobs or ownership. Query routes trust a valid provider task ID and do not verify that it belongs to the current user. Replicate result URLs are also not a durable product storage strategy.
Before launch, add per-user quotas and cost caps, job/owner persistence, query authorization, exponential polling backoff, cancellation, durable result storage, retention/cleanup, provider timeouts, moderation, and observability. Rate limiting is a recommended add-on, not a shipped feature. Uploaded reference images also need the production storage hardening described in Storage.
Verify
- Each create route rejects logged-out and malformed requests.
- Each task moves through normalized statuses and returns playable URLs.
- Failure and timeout states stop polling and surface useful feedback.
- Every visible model uses the correct current Replicate input mapping.
- Users cannot query another user's task after ownership is added.
- Generated assets survive provider URL expiry after durable storage is added.