diff --git a/prompt.html b/prompt.html new file mode 100644 index 0000000..277370c --- /dev/null +++ b/prompt.html @@ -0,0 +1,598 @@ + + + + + + 全能AI绘画提示词工厂 公众号：AI星河 + + + + +

🎨 AI绘画提示词超级工厂

+ + +
+

1. 主体描述 (自由输入)

+ +
+ + +
+

基础参数

+
🔦 光影与照明（点击展开）
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
🎬 镜头与构图（点击展开）
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
🌍 环境场景（点击展开）
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
🎨 艺术风格（点击展开）
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
🌈 色彩与材质（点击展开）
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + +
+
+
+ + +
+ +
+
+ +
+
🎨 艺术媒介 (Pick A Medium)
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
⏳ 年代风格 (Time Travel)
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
😄 情感表达 (Emote)
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ +
+
🌈 色彩方案 (Get Colorful)
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ + + + + +
+ + + + \ No newline at end of file diff --git a/src/components/AICreationChat.tsx b/src/components/AICreationChat.tsx new file mode 100644 index 0000000..673d2b7 --- /dev/null +++ b/src/components/AICreationChat.tsx @@ -0,0 +1,356 @@ +import React, { useState, useRef, useEffect } from 'react' +import { Sparkles, Send, User, Bot, Wand2, Play, Download, Loader } from 'lucide-react' +import { Project } from '../services/projectService' +import { Model } from '../services/modelService' + +interface AICreationChatProps { + project: Project + models: Model[] + onMaterialCreated: () => void +} + +interface ChatMessage { + id: string + type: 'user' | 'assistant' | 'system' + content: string + timestamp: Date + creationTask?: CreationTask +} + +interface CreationTask { + id: string + model: Model + prompt: string + status: 'pending' | 'processing' | 'completed' | 'failed' + progress: number + result?: { + videoPath: string + thumbnailPath: string + duration: number + } + error?: string +} + +const AICreationChat: React.FC = ({ + project, + models, + onMaterialCreated +}) => { + const [messages, setMessages] = useState([ + { + id: '1', + type: 'system', + content: `欢迎使用AI创作助手！我可以帮您为项目"${project.product_name}"创作视频素材。请告诉我您想要什么样的内容。`, + timestamp: new Date() + } + ]) + const [inputText, setInputText] = useState('') + const [selectedModel, setSelectedModel] = useState(models[0] || null) + const [isCreating, setIsCreating] = useState(false) + const messagesEndRef = useRef(null) + + useEffect(() => { + scrollToBottom() + }, [messages]) + + const scrollToBottom = () => { + messagesEndRef.current?.scrollIntoView({ behavior: 'smooth' }) + } + + const handleSendMessage = async () => { + if (!inputText.trim() || !selectedModel) return + + const userMessage: ChatMessage = { + id: Date.now().toString(), + type: 'user', + content: inputText.trim(), + timestamp: new Date() + } + + setMessages(prev => [...prev, userMessage]) + setInputText('') + setIsCreating(true) + + // 模拟AI响应 + setTimeout(() => { + const assistantMessage: ChatMessage = { + id: (Date.now() + 1).toString(), + type: 'assistant', + content: `好的！我将使用模特"${selectedModel.model_number}"为您创作关于"${project.product_name}"的视频素材。正在开始创作...`, + timestamp: new Date() + } + setMessages(prev => [...prev, assistantMessage]) + + // 开始创作任务 + startCreationTask(inputText.trim(), selectedModel) + }, 1000) + } + + const startCreationTask = async (prompt: string, model: Model) => { + const taskId = Date.now().toString() + const creationTask: CreationTask = { + id: taskId, + model, + prompt, + status: 'pending', + progress: 0 + } + + const taskMessage: ChatMessage = { + id: taskId + '_task', + type: 'assistant', + content: '正在创作中...', + timestamp: new Date(), + creationTask + } + + setMessages(prev => [...prev, taskMessage]) + + // 模拟创作过程 + const steps = [ + { progress: 10, status: '初始化AI模型...' }, + { progress: 30, status: '分析模特特征...' }, + { progress: 50, status: '生成视频内容...' }, + { progress: 70, status: '渲染视频帧...' }, + { progress: 90, status: '后处理优化...' }, + { progress: 100, status: '创作完成！' } + ] + + for (const step of steps) { + await new Promise(resolve => setTimeout(resolve, 1500)) + + const updatedTask = { + ...creationTask, + status: step.progress === 100 ? 'completed' as const : 'processing' as const, + progress: step.progress, + result: step.progress === 100 ? { + videoPath: `${project.local_directory}/ai_generated_${taskId}.mp4`, + thumbnailPath: `${project.local_directory}/ai_generated_${taskId}_thumb.jpg`, + duration: 15 + } : undefined + } + + setMessages(prev => prev.map(msg => + msg.id === taskId + '_task' + ? { ...msg, creationTask: updatedTask } + : msg + )) + } + + // 添加完成消息 + setTimeout(() => { + const completionMessage: ChatMessage = { + id: (Date.now() + 2).toString(), + type: 'assistant', + content: '✨ 视频创作完成！您可以预览或下载生成的素材。需要调整什么吗？', + timestamp: new Date() + } + setMessages(prev => [...prev, completionMessage]) + setIsCreating(false) + onMaterialCreated() + }, 500) + } + + const handleKeyPress = (e: React.KeyboardEvent) => { + if (e.key === 'Enter' && !e.shiftKey) { + e.preventDefault() + handleSendMessage() + } + } + + const getStatusColor = (status: CreationTask['status']) => { + switch (status) { + case 'pending': + return 'text-yellow-600' + case 'processing': + return 'text-blue-600' + case 'completed': + return 'text-green-600' + case 'failed': + return 'text-red-600' + default: + return 'text-gray-600' + } + } + + return ( +
+ {/* 头部 */} +
+
+ +

AI创作助手

+
+ + {/* 模特选择 */} +
+ + +
+ +

+ 为项目"{project.product_name}"创作专属视频素材 +

+
+ + {/* 消息列表 */} +
+ {messages.map((message) => ( +
+
+ {/* 消息头部 */} +
+
+
+ {message.type === 'user' ? ( + + ) : message.type === 'system' ? ( + + ) : ( + + )} +
+ + {message.timestamp.toLocaleTimeString()} + +
+
+ + {/* 消息内容 */} +
+

{message.content}

+ + {/* 创作任务卡片 */} + {message.creationTask && ( +
+
+
+ + + {message.creationTask.model.model_number} + +
+ + {message.creationTask.status === 'pending' && '等待中'} + {message.creationTask.status === 'processing' && '创作中'} + {message.creationTask.status === 'completed' && '已完成'} + {message.creationTask.status === 'failed' && '失败'} + +
+ +

+ {message.creationTask.prompt} +

+ + {/* 进度条 */} + {message.creationTask.status === 'processing' && ( +
+
+ 进度 + {message.creationTask.progress}% +
+
+
+
+
+ )} + + {/* 结果操作 */} + {message.creationTask.status === 'completed' && message.creationTask.result && ( +
+ + + + {message.creationTask.result.duration}s + +
+ )} +
+ )} +
+
+
+ ))} + + {isCreating && ( +
+
+ + AI正在思考... +
+
+ )} + +
+
+ + {/* 输入区域 */} +
+
+