视频生成器组件

概述

VideoGeneratorInput 是 VideoFly 的核心组件，提供完整的 AI 视频生成输入界面。

实时演示

选择 AI 模型

Sora 2

Wan 2.6

Veo 3.1

Seedance 1.5

提示词

生成参数

宽高比

16:9

9:16

1:1

时长

10s

预计消耗：10 积分

这是一个组件预览。完整功能请查看视频生成器组件文档

导入

import { VideoGeneratorInput, DEFAULT_CONFIG } from '@/components/video-generator';

基本用法

'use client';
 
import { VideoGeneratorInput, DEFAULT_CONFIG } from '@/components/video-generator';
 
export default function GeneratePage() {
  const handleSubmit = async (data: VideoGenerationParams) => {
    // 处理生成请求
    const response = await fetch('/api/v1/video/generate', {
      method: 'POST',
      body: JSON.stringify(data),
    });
  };
 
  return (
    <VideoGeneratorInput
      config={DEFAULT_CONFIG}
      onSubmit={handleSubmit}
    />
  );
}

属性

Prop	Type	Default
`config`	`GeneratorConfig`	-
`onSubmit`	`(data: VideoGenerationParams) => void \| Promise<void>`	-
`defaultModel`	`string`	`第一个可用模型`
`disabled`	`boolean`	`false`
`className`	`string`	-

提交数据结构

当用户提交时，onSubmit 回调接收以下数据：

interface VideoGenerationParams {
  // 提示词
  prompt: string;
 
  // 负面提示词（可选）
  negativePrompt?: string;
 
  // 模型名称
  model: string;
 
  // AI 提供商
  provider: 'evolink' | 'kie';
 
  // 生成模式
  mode: 'text-to-video' | 'image-to-video';
 
  // 宽高比
  aspectRatio: '16:9' | '9:16' | '1:1';
 
  // 时长（秒）
  duration?: number;
 
  // 起始图片 URL（图生视频模式）
  startImageUrl?: string;
}

支持的模型

模型	提供商	文生视频	图生视频	积分消耗
sora-2	Evolink	✅	✅	10
wan2.6	Evolink	✅	✅	8
veo-3.1	Evolink	✅	✅	12
seedance-1.5-pro	Evolink	✅	✅	5
sora-2-text-to-video	Kie	✅	❌	10

生成模式

文本生成视频

从文本描述生成视频：

<VideoGeneratorInput
  config={DEFAULT_CONFIG}
  defaultModel="sora-2"
  onSubmit={handleSubmit}
/>

图片生成视频

从静态图片生成动态视频：

<VideoGeneratorInput
  config={{
    ...DEFAULT_CONFIG,
    defaultMode: 'image-to-video',
  }}
  onSubmit={handleSubmit}
/>

积分系统集成

组件可以显示和验证用户积分：

'use client';
 
import { VideoGeneratorInput, DEFAULT_CONFIG } from '@/components/video-generator';
 
export default function GeneratePage() {
  const [credits, setCredits] = useState(100);
 
  return (
    <VideoGeneratorInput
      config={DEFAULT_CONFIG}
      userCredits={credits}
      onInsufficientCredits={() => {
        // 显示积分不足提示
        alert('积分不足，请充值');
      }}
      onSubmit={handleSubmit}
    />
  );
}

自定义配置

您可以自定义可用模型和设置：

import { VideoGeneratorInput } from '@/components/video-generator';
import type { GeneratorConfig } from '@/components/video-generator';
 
const customConfig: GeneratorConfig = {
  models: [
    {
      id: 'sora-2',
      name: 'Sora 2',
      provider: 'evolink',
      modes: ['text-to-video', 'image-to-video'],
      aspectRatios: ['16:9', '9:16', '1:1'],
      durations: [5, 10],
      credits: 10,
    },
  ],
};
 
<VideoGeneratorInput config={customConfig} onSubmit={handleSubmit} />

状态管理

使用内置 Hook 管理生成状态：

import { useVideoGeneration } from '@/components/video-generator/generator-hooks';
 
function VideoGenerator() {
  const { generate, isGenerating, progress, error } = useVideoGeneration();
 
  return (
    <VideoGeneratorInput
      config={DEFAULT_CONFIG}
      onSubmit={generate}
      disabled={isGenerating}
    />
  );
}

概述