266 lines
9.1 KiB
TypeScript
266 lines
9.1 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { Model, CreateDynamicRequest, AIModelOption } from '../types/model';
|
|
import {
|
|
XMarkIcon,
|
|
PhotoIcon,
|
|
SparklesIcon,
|
|
CpuChipIcon,
|
|
VideoCameraIcon
|
|
} from '@heroicons/react/24/outline';
|
|
|
|
interface CreateDynamicModalProps {
|
|
model: Model;
|
|
onSubmit: (data: CreateDynamicRequest) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const CreateDynamicModal: React.FC<CreateDynamicModalProps> = ({
|
|
model,
|
|
onSubmit,
|
|
onCancel
|
|
}) => {
|
|
const [formData, setFormData] = useState({
|
|
prompt: '',
|
|
source_image_path: '',
|
|
ai_model: '极梦',
|
|
video_count: 1
|
|
});
|
|
const [errors, setErrors] = useState<Record<string, string>>({});
|
|
const [isSubmitting, setIsSubmitting] = useState(false);
|
|
|
|
// 可用的AI模型选项
|
|
const aiModelOptions: AIModelOption[] = [
|
|
{
|
|
id: 'jimeng',
|
|
name: '极梦',
|
|
description: '高质量视频生成模型',
|
|
is_available: true,
|
|
max_video_count: 9
|
|
}
|
|
];
|
|
|
|
const handleInputChange = (field: string, value: any) => {
|
|
setFormData(prev => ({ ...prev, [field]: value }));
|
|
// 清除对应字段的错误
|
|
if (errors[field]) {
|
|
setErrors(prev => ({ ...prev, [field]: '' }));
|
|
}
|
|
};
|
|
|
|
const handleImageSelect = async () => {
|
|
try {
|
|
// TODO: 实现图片选择功能
|
|
// const selectedPath = await systemService.selectImageFile();
|
|
// if (selectedPath) {
|
|
// handleInputChange('source_image_path', selectedPath);
|
|
// }
|
|
console.log('选择图片功能待实现');
|
|
} catch (error) {
|
|
console.error('选择图片失败:', error);
|
|
}
|
|
};
|
|
|
|
const validateForm = () => {
|
|
const newErrors: Record<string, string> = {};
|
|
|
|
if (!formData.prompt.trim()) {
|
|
newErrors.prompt = '请输入提示词';
|
|
}
|
|
|
|
if (!formData.source_image_path) {
|
|
newErrors.source_image_path = '请选择源图片';
|
|
}
|
|
|
|
if (formData.video_count < 1 || formData.video_count > 9) {
|
|
newErrors.video_count = '视频个数必须在1-9之间';
|
|
}
|
|
|
|
setErrors(newErrors);
|
|
return Object.keys(newErrors).length === 0;
|
|
};
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
setIsSubmitting(true);
|
|
try {
|
|
const submitData: CreateDynamicRequest = {
|
|
model_id: model.id,
|
|
title: undefined,
|
|
description: '模特动态', // 使用默认描述
|
|
prompt: formData.prompt.trim(),
|
|
source_image_path: formData.source_image_path,
|
|
ai_model: formData.ai_model,
|
|
video_count: formData.video_count
|
|
};
|
|
|
|
onSubmit(submitData);
|
|
} catch (error) {
|
|
console.error('提交失败:', error);
|
|
} finally {
|
|
setIsSubmitting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fade-in">
|
|
<div className="bg-white rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-hidden animate-scale-in">
|
|
{/* 头部 */}
|
|
<div className="flex items-center justify-between p-6 border-b border-gray-200">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-10 h-10 bg-gradient-to-br from-primary-500 to-primary-600 rounded-lg flex items-center justify-center">
|
|
<SparklesIcon className="h-5 w-5 text-white" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold text-gray-900">生成视频</h2>
|
|
<p className="text-sm text-gray-500">为 {model.name} 生成AI视频</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={onCancel}
|
|
className="p-2 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
<XMarkIcon className="h-5 w-5 text-gray-500" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* 表单内容 */}
|
|
<form onSubmit={handleSubmit} className="p-6 space-y-6 overflow-y-auto max-h-[calc(90vh-140px)]">
|
|
|
|
{/* 提示词 */}
|
|
<div>
|
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
|
<SparklesIcon className="h-4 w-4" />
|
|
AI提示词 *
|
|
</label>
|
|
<textarea
|
|
value={formData.prompt}
|
|
onChange={(e) => handleInputChange('prompt', e.target.value)}
|
|
placeholder="描述您希望生成的视频内容..."
|
|
rows={4}
|
|
className={`w-full px-3 py-2 border rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors resize-none ${
|
|
errors.prompt ? 'border-red-300' : 'border-gray-300'
|
|
}`}
|
|
/>
|
|
{errors.prompt && (
|
|
<p className="mt-1 text-sm text-red-600">{errors.prompt}</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* 源图片 */}
|
|
<div>
|
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
|
<PhotoIcon className="h-4 w-4" />
|
|
源图片 *
|
|
</label>
|
|
<div className="space-y-3">
|
|
<button
|
|
type="button"
|
|
onClick={handleImageSelect}
|
|
className={`w-full p-4 border-2 border-dashed rounded-lg transition-colors ${
|
|
errors.source_image_path
|
|
? 'border-red-300 bg-red-50'
|
|
: 'border-gray-300 hover:border-primary-400 hover:bg-primary-50'
|
|
}`}
|
|
>
|
|
<div className="flex flex-col items-center gap-2">
|
|
<PhotoIcon className="h-8 w-8 text-gray-400" />
|
|
<span className="text-sm text-gray-600">点击选择图片</span>
|
|
</div>
|
|
</button>
|
|
|
|
{formData.source_image_path && (
|
|
<div className="relative">
|
|
<img
|
|
src={formData.source_image_path}
|
|
alt="源图片预览"
|
|
className="w-full h-48 object-contain bg-gray-50 rounded-lg"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => handleInputChange('source_image_path', '')}
|
|
className="absolute top-2 right-2 p-1 bg-red-500 text-white rounded-full hover:bg-red-600 transition-colors"
|
|
>
|
|
<XMarkIcon className="h-4 w-4" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{errors.source_image_path && (
|
|
<p className="text-sm text-red-600">{errors.source_image_path}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* AI模型选择 */}
|
|
<div>
|
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
|
<CpuChipIcon className="h-4 w-4" />
|
|
AI模型
|
|
</label>
|
|
<select
|
|
value={formData.ai_model}
|
|
onChange={(e) => handleInputChange('ai_model', e.target.value)}
|
|
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors"
|
|
>
|
|
{aiModelOptions.map((option) => (
|
|
<option key={option.id} value={option.name} disabled={!option.is_available}>
|
|
{option.name} - {option.description}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
{/* 视频个数 */}
|
|
<div>
|
|
<label className="flex items-center gap-2 text-sm font-medium text-gray-700 mb-2">
|
|
<VideoCameraIcon className="h-4 w-4" />
|
|
生成视频个数
|
|
</label>
|
|
<div className="flex items-center gap-4">
|
|
<input
|
|
type="range"
|
|
min="1"
|
|
max="9"
|
|
value={formData.video_count}
|
|
onChange={(e) => handleInputChange('video_count', parseInt(e.target.value))}
|
|
className="flex-1"
|
|
/>
|
|
<span className="text-sm font-medium text-gray-700 min-w-[2rem]">
|
|
{formData.video_count}
|
|
</span>
|
|
</div>
|
|
{errors.video_count && (
|
|
<p className="mt-1 text-sm text-red-600">{errors.video_count}</p>
|
|
)}
|
|
</div>
|
|
</form>
|
|
|
|
{/* 底部按钮 */}
|
|
<div className="flex items-center justify-end gap-3 p-6 border-t border-gray-200">
|
|
<button
|
|
type="button"
|
|
onClick={onCancel}
|
|
className="px-4 py-2 text-gray-700 hover:bg-gray-100 rounded-lg transition-colors"
|
|
>
|
|
取消
|
|
</button>
|
|
<button
|
|
onClick={handleSubmit}
|
|
disabled={isSubmitting}
|
|
className="px-6 py-2 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-sm hover:shadow-md font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{isSubmitting ? '生成中...' : '开始生成'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default CreateDynamicModal;
|