import { useState, useRef } from 'react'; // useInput - 管理输入组件的状态和逻辑 export function useInput(onSendMessage, onLoadingChange) { const { onSend, onUpload, uploadedImages, removeImage, workflowRequirements, } = InputLogic(onSendMessage, onLoadingChange); const [message, setMessage] = useState(''); const [isLoading, setIsLoading] = useState(false); const fileInputRef = useRef(null); const textInputRef = useRef(null); const handleSend = async () => { const trimmed = message.trim(); // 允许在有图片时发送（即使没有文字），或者有文字时发送 if ((!trimmed && uploadedImages.length === 0) || isLoading) return; // 先清空输入框（在发送前清空，提供更好的用户体验） setMessage(''); setIsLoading(true); try { await onSend?.(trimmed || ''); // 如果没有文字，传递空字符串 } finally { setIsLoading(false); } }; const handleContainerClick = (e) => { // 如果点击的是容器本身（不是按钮、输入框或其他交互元素），则聚焦输入框 if (e.target === e.currentTarget) { textInputRef.current?.focus(); } }; // 有文字或上传了图片就可以发送 const isSendDisabled = (!message.trim() && uploadedImages.length === 0) || isLoading; const handleUploadClick = () => { fileInputRef.current?.click(); }; const handleFileChange = async (e) => { const files = e.target.files; if (!files || files.length === 0) return; for (const file of files) { if (file.type.startsWith('image/')) { await onUpload?.(file); } } // 清空input，允许重复选择同一文件 e.target.value = ''; }; const handleSendKeyDown = (e) => { if ((e.key === 'Enter' || e.key === ' ') && !isSendDisabled) { e.preventDefault(); handleSend(); } }; const handleTextareaKeyDown = (e) => { // Enter 发送（不按 Ctrl） if (e.key === 'Enter' && !e.ctrlKey && !e.shiftKey && !e.metaKey) { e.preventDefault(); handleSend(); return; } // 其他所有按键都允许默认行为（包括Backspace、Delete等） // 不要阻止任何其他按键的默认行为 }; const handleUploadKeyDown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleUploadClick(); } }; const getSendButtonClassName = () => { return `send-btn ${isSendDisabled ? 'disabled' : ''}`; }; const getSendButtonOnClick = () => { return !isSendDisabled ? handleSend : undefined; }; const getSendButtonTabIndex = () => { return isSendDisabled ? -1 : 0; }; return { message, setMessage, isLoading, fileInputRef, textInputRef, handleSend, handleContainerClick, handleUploadClick, handleFileChange, handleSendKeyDown, handleTextareaKeyDown, handleUploadKeyDown, isSendDisabled, getSendButtonClassName, getSendButtonOnClick, getSendButtonTabIndex, uploadedImages, removeImage, }; } // InputLogic - 处理消息发送到GPT API // 第一阶段提示词：分析需求，返回需要的信息 const REQUIREMENTS_PROMPT = `你是一个友好的自动化工作流生成助手。你需要像聊天一样与用户对话。 如果用户想要创建自动化工作流，你需要分析需求并返回需要的信息。请用自然、友好的语言与用户交流，保持对话的连贯性和友好性。 语法分层（重要）： - 基础语法（控制流/定时）：scheduleOnce、schedule、for、while、if - 基础 action（模拟手机操作）：press、swipe、scroll - 扩展标签（Func）：除基础能力外的所有扩展功能，全部由 src/pages/processing/func/ 目录下的脚本文件决定；每个脚本文件名就是一个"标签"。 在生成工作流时： - 逻辑结构尽量用 for/while/if + triggers(schedules) 表达 - 具体手机操作尽量落到 press/swipe/scroll - 当需求超出基础 action（例如：提取会话/消息记录、文字定位等），请使用对应的 Func 标签（例如：extract-chat-history、string-reg-location、save-chat-history） （实现层说明：项目内部为兼容与落地，仍存在 locate/click/input/ocr/ai-generate/delay/set 等内置能力；但提示用户与生成语法时，请优先按上述分层来组织。） 9. if - 条件判断 - condition: 条件表达式（如 "{count} > 5"） - then: 条件为真时执行的操作数组 - else: 条件为假时执行的操作数组（可选） 10. for - 循环 - variable: 循环变量名 - items: 数组（可以是变量 {arrayVariable}） - body: 循环体操作数组 11. delay - 延迟 - value: 延迟时间（如 "2s", "1m", "30 minutes"） 12. set - 设置变量 - variable: 变量名 - value: 变量值 13. scroll/swipe - 滚动/滑动 - value: 方向（"up-down", "down-up", "left-right", "right-left"） 定时任务配置： - 单次执行: {"datetime": "2026/1/14 01:21"} - 每天执行: {"time": "09:00", "repeat": "daily"} - 每周执行: {"time": "09:00", "weekdays": ["monday", "wednesday", "friday"]} - 间隔执行: {"interval": "30 minutes"} 重要规则： - 变量使用 {variableName} 格式引用 - 根据用户描述合理设置delay延迟时间 - 如果用户提到循环、条件判断，使用for/if操作 - 如果用户提到定时执行，添加triggers配置 - 如果用户提到AI生成内容，使用ai-generate操作 - 如果用户提到消息记录、聊天记录、历史记录、对话记录，使用extract-messages、save-messages、generate-summary操作 - 图片文件名按顺序命名为"1.png"、"2.png"等 - **特别重要**：如果工作流中需要输入文字（使用 input 或 ai-generate 操作），且这些文字需要根据场景背景和用户角色来生成，你必须询问用户以下信息： - 场景的背景：这个工作流在什么场景下使用？（例如：微信聊天、客服回复、评论互动等） - 用户的角色：用户在这个场景中扮演什么角色？（例如：刚认识女方的男生、客服人员、产品推广者等） - 这些信息对于生成合适的文字内容非常重要，请务必在询问需求时主动询问 请分析用户的需求，根据上述操作类型，判断需要哪些图片和文字参考： - 图片（needsImages）：用于 locate/click 的 image 方法，或 ocr 的 by-avatar 方法 - 文字参考（needsTexts）：用于 locate/click 的 text 方法 如果用户想要创建自动化工作流： 1. 先友好地确认理解用户的需求 2. 然后返回JSON格式的需求信息（不包含在自然语言回复中，仅作为JSON返回） 需求分析的JSON格式： { "needsImages": 2, // 需要多少张图片（用于图像匹配定位） "needsTexts": 1, // 需要多少个文字参考（用于文字识别定位） "imageDescriptions": ["登录按钮", "用户名输入框"], // 每张图片的描述 "textDescriptions": ["登录按钮文字"] // 每个文字参考的描述 } 返回格式：先自然语言回复，然后单独一行JSON。 **特别提醒**：如果工作流涉及输入文字（如自动回复、自动评论、自动发送消息等），请务必询问用户场景背景和角色信息。 例如（不涉及文字输入的场景）： 我理解了，您想创建一个登录流程的自动化工作流。为了生成准确的工作流配置，我需要您提供以下信息： 📋 需要的信息： 🖼️ 需要 2 张图片：登录按钮截图、用户名输入框截图 📝 需要 1 个文字参考：登录按钮上的文字 \`\`\`json { "needsImages": 2, "needsTexts": 1, "imageDescriptions": ["登录按钮", "用户名输入框"], "textDescriptions": ["登录按钮文字"] } \`\`\` 例如（涉及文字输入的场景）： 我理解了，您想创建一个自动聊天回复的自动化工作流。为了生成准确且符合场景的文字内容，我需要了解以下信息： 📋 需要的信息： 🖼️ 需要 2 张图片：好友头像截图、我的头像截图 📝 需要 1 个文字参考：输入框位置 💬 **场景信息**（重要）： - 场景背景：这个聊天是在什么场景下进行的？（例如：微信聊天、QQ群聊、客服对话等） - 您的角色：您在这个场景中扮演什么角色？（例如：刚认识女方的男生、客服人员、产品推广者等） \`\`\`json { "needsImages": 2, "needsTexts": 1, "imageDescriptions": ["好友头像", "我的头像"], "textDescriptions": ["输入框位置"] } \`\`\` 如果用户的话题与工作流无关，请友好地自然回复，不需要返回JSON。如果用户是在询问如何使用、或者其他一般性问题，请用自然语言友好地回答。`; // 第二阶段提示词：生成工作流 const SYSTEM_PROMPT = `你是一个友好的自动化工作流生成助手。用户已经提供了所需的图片和文字参考，现在你需要生成JSON格式的工作流配置文件。 请用自然、友好的语言与用户交流，保持对话的连贯性。在生成工作流时，请先简短地确认一下，然后生成JSON格式的工作流配置。 工作流JSON格式（新版本）： { "version": "1.0", "name": "工作流名称", "triggers": [ { "type": "schedule", "schedule": { "time": "09:00", "weekdays": ["monday", "wednesday", "friday"] } } ], "variables": { "topic": "美食" }, "actions": [ { "type": "locate", "method": "image", "target": "button.png", "variable": "buttonPos", "delay": "1s" }, { "type": "click", "method": "position", "target": "{buttonPos}", "delay": "2s" }, { "type": "input", "target": "输入框", "value": "文字内容", "delay": "1s" }, { "type": "ai-generate", "prompt": "生成关于{topic}的文章", "variable": "article", "delay": "10s" }, { "type": "if", "condition": "{count} > 5", "then": [ { "type": "click", "method": "text", "target": "确定" } ] }, { "type": "for", "variable": "item", "items": ["选项1", "选项2"], "body": [ { "type": "click", "method": "text", "target": "{item}" } ] } ] } 核心操作类型： 1. locate - 定位元素 - method: "image"（图像匹配）| "text"（文字识别）| "coordinate"（坐标） - target: 目标内容 - variable: 保存位置到变量 2. click - 点击 - method: "position" | "image" | "text" | "coordinate" - target: 目标（可以是变量 {variable}） 3. input - 输入文字 - target: 输入框位置（文字或变量） - value: 要输入的文本（可以是变量 {variable}） 4. ai-generate - AI生成内容 - prompt: 提示词（支持变量 {variable}） - variable: 保存结果到变量 5. ocr - 文字识别 - method: "by-avatar" | "by-position" | "full-screen" - avatar: 头像图片（by-avatar时） - variable: 保存识别结果 6. extract-messages - 提取消息记录 - avatar1: 第一个参与者的头像/标识图片路径 - avatar2: 第二个参与者的头像/标识图片路径 - variable: 保存消息记录到变量（格式：对方: 消息\n我: 消息） 7. save-messages - 保存消息记录 - variable: 包含消息记录的变量名（保存到 history 文件夹） 8. generate-summary - 生成消息总结 - variable: 包含消息记录的变量名 - summaryVariable: 保存总结结果的变量名 - model: AI模型名称（可选） 9. if - 条件判断 - condition: 条件表达式（如 "{count} > 5"） - then: 条件为真时执行的操作数组 - else: 条件为假时执行的操作数组（可选） 10. for - 循环 - variable: 循环变量名 - items: 数组（可以是变量 {arrayVariable}） - body: 循环体操作数组 11. delay - 延迟 - value: 延迟时间（如 "2s", "1m", "30 minutes"） 12. set - 设置变量 - variable: 变量名 - value: 变量值 13. scroll/swipe - 滚动/滑动 - value: 方向（"up-down", "down-up", "left-right", "right-left"） 定时任务配置： - 单次执行: {"datetime": "2026/1/14 01:21"} - 每天执行: {"time": "09:00", "repeat": "daily"} - 每周执行: {"time": "09:00", "weekdays": ["monday", "wednesday", "friday"]} - 间隔执行: {"interval": "30 minutes"} 重要规则： - 使用新格式（type字段），但保持向后兼容旧格式 - 变量使用 {variableName} 格式引用 - 根据用户描述合理设置delay延迟时间 - 如果用户提到循环、条件判断，使用for/if操作 - 如果用户提到定时执行，添加triggers配置 - 如果用户提到AI生成内容，使用ai-generate操作 - 如果用户提到消息记录、聊天记录、历史记录、对话记录，使用extract-messages、save-messages、generate-summary操作 - 在ai-generate的prompt中可以使用总结变量引用历史消息记录的总结 - 图片文件名按顺序命名为"1.png"、"2.png"等 返回格式： 1. 如果用户已经提供了所有需要的图片和文字参考，且明确要求生成工作流： - 先用简短的自然语言确认（如"好的，我现在为您生成工作流配置..."） - 然后单独一行返回JSON格式的工作流配置（可以用代码块包裹） 2. 如果用户只是在询问问题或者还没准备好生成工作流： - 用自然语言友好地回答用户的问题 - 不需要返回JSON 请保持对话的自然和友好，不要生硬地只返回JSON。`; export function InputLogic(onSendMessage, onLoadingChange) { // 存储上传的图片 const [uploadedImages, setUploadedImages] = useState([]); // img2text API可用性标记（使用useRef避免重复输出警告） const img2textApiAvailableRef = useRef(true); // 调用img2text API获取图片描述 const img2text = async (imageBase64, prompt = '请描述这张图片的内容') => { // 如果已经知道API不可用，直接返回null，不尝试调用 if (!img2textApiAvailableRef.current) { return null; } try { // 确保base64数据是完整的data URL格式 let imageUrl = imageBase64; if (!imageBase64.startsWith('data:')) { // 如果没有前缀，假设是PNG格式的base64数据 imageUrl = `data:image/png;base64,${imageBase64}`; } // 使用AbortController设置超时，快速失败 const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), 1000); // 1秒超时 const response = await fetch('https://ai-anim.com/api/img2text', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ prompt: prompt, imageUrl: imageUrl }), signal: controller.signal, }); clearTimeout(timeoutId); if (!response.ok) { const errorText = await response.text(); throw new Error(`img2text API error: ${response.status} ${response.statusText} - ${errorText}`); } const data = await response.json(); // 支持多种可能的返回格式 return data.text || data.description || data.result || data.output_text || data.content || ''; } catch (error) { // img2text API是可选的，失败不影响主要功能 // 标记API不可用，之后直接返回null，不再尝试 if (img2textApiAvailableRef.current) { img2textApiAvailableRef.current = false; } // 静默返回null，不输出任何错误信息（因为这是可选功能） return null; } }; // 存储工作流需求信息（需要多少图片和文字） const [workflowRequirements, setWorkflowRequirements] = useState(null); // 存储用户输入的文字参考（用于文字识别） const [referenceTexts, setReferenceTexts] = useState([]); // 存储AI生成的工作流JSON（不显示在聊天框） const [workflowJson, setWorkflowJson] = useState(null); // 删除图片 const removeImage = (index) => { setUploadedImages(prev => prev.filter((_, i) => i !== index)); }; // 上传图片并命名 const onUpload = async (file) => { try { // 读取图片为base64 const reader = new FileReader(); const base64 = await new Promise((resolve, reject) => { reader.onload = () => { const result = reader.result; // 提取base64数据部分（去掉data:image/...;base64,前缀） const base64Data = result.split(',')[1]; resolve(base64Data); }; reader.onerror = reject; reader.readAsDataURL(file); }); // 生成临时文件名（使用时间戳） const timestamp = Date.now(); const tempFileName = `temp_${timestamp}.${file.name.split('.').pop()}`; // 存储图片信息 const imageInfo = { file: file, base64: base64, tempName: tempFileName, originalName: file.name, timestamp: timestamp, }; setUploadedImages(prev => [...prev, imageInfo]); console.log('图片已上传:', imageInfo.originalName); } catch (error) { console.error('上传图片失败:', error); } }; // 根据用户描述给图片命名（使用AI） const nameImagesWithAI = async (userPrompt, images) => { if (!images || images.length === 0) return images; try { // 构建提示词，让AI根据用户描述给图片命名 const imagePrompt = `用户上传了 ${images.length} 张图片，用于工作流自动化。请根据用户的描述，为每张图片生成一个简洁的描述性文件名（只返回JSON数组，不要其他文字）。 用户描述：${userPrompt} 图片信息： ${images.map((img, index) => `图片${index + 1}: 原始文件名 ${img.originalName}`).join('\n')} 请返回JSON数组，格式如下： ["登录按钮.png", "用户名输入框.png", "密码输入框.png"] 要求： 1. 文件名要简洁，能清楚描述图片内容 2. 使用中文或英文都可以 3. 必须包含文件扩展名（.png） 4. 文件名要符合工作流中使用的命名规范`; const response = await fetch('https://ai-anim.com/api/text2textByModel', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: imagePrompt, modelName: 'gpt-5-nano-ca' }) }); if (!response.ok) { throw new Error('AI命名失败'); } const data = await response.json(); const responseText = data.data?.output_text || data.text || data.content || ''; // 解析AI返回的文件名数组 let imageNames = []; try { // 尝试直接解析JSON imageNames = JSON.parse(responseText.trim()); } catch (e) { // 尝试从代码块中提取 const match = responseText.match(/\[[\s\S]*?\]/); if (match) { imageNames = JSON.parse(match[0]); } else { // 如果解析失败，使用默认命名 imageNames = images.map((img, index) => `${index + 1}.png`); } } // 更新图片信息，添加AI生成的文件名 return images.map((img, index) => ({ ...img, aiName: imageNames[index] || `${index + 1}.png` })); } catch (error) { console.error('AI命名图片失败:', error); // 如果AI命名失败，使用默认命名 return images.map((img, index) => ({ ...img, aiName: `${index + 1}.png` })); } }; const sendToGPT = async (userPrompt, images = []) => { // 构建图片信息提示（如果图片已经命名） let imageInfoPrompt = ''; if (images.length > 0) { imageInfoPrompt = `\n\n用户上传了以下图片，请在生成工作流时使用这些图片文件名：\n${images.map((img, index) => `${index + 1}. ${img.aiName || img.tempName} - ${img.originalName}`).join('\n')}\n\n在生成工作流时，如果操作需要点击图片，请使用上述图片文件名（如 "登录按钮.png"）。`; } // 构建完整的提示词：系统提示词 + 图片信息 + 用户输入 const fullPrompt = `${SYSTEM_PROMPT}${imageInfoPrompt}\n\n用户需求：${userPrompt}`; const requestBody = { input: fullPrompt }; console.log('Sending request to Doubao API:', requestBody); const response = await fetch('https://ai-anim.com/api/doubaoText2text', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(requestBody), }); console.log('Response status:', response.status, response.statusText); if (!response.ok) { let errorText; try { errorText = await response.text(); // 尝试解析为 JSON try { const errorJson = JSON.parse(errorText); console.error('API Error Response (JSON):', errorJson); // 如果 JSON 中有 error 字段，使用它 if (errorJson.error) { throw new Error(`服务器错误: ${errorJson.error}`); } if (errorJson.message) { throw new Error(`服务器错误: ${errorJson.message}`); } } catch (parseError) { // 不是 JSON，使用原始文本 console.error('API Error Response (Text):', errorText); } } catch (readError) { errorText = `无法读取错误响应: ${readError.message}`; } throw new Error(`HTTP ${response.status}: ${errorText}`); } const data = await response.json(); console.log('API Response:', data); return data; }; // 分析需求，返回需要的信息 const analyzeRequirements = async (userPrompt) => { const response = await fetch('https://ai-anim.com/api/text2textByModel', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt: `${REQUIREMENTS_PROMPT}\n\n用户需求：${userPrompt}`, modelName: 'gpt-5-nano-ca' }) }); if (!response.ok) { throw new Error('分析需求失败'); } const data = await response.json(); const responseText = data.data?.output_text || data.text || data.content || ''; // 提取自然语言回复（去除JSON部分） let naturalLanguageReply = responseText.trim(); // 尝试从回复中提取JSON（可能在代码块中，也可能单独一行） let requirements = null; // 方法1: 尝试从代码块中提取JSON const codeBlockMatch = responseText.match(/```(?:json)?\s*(\{[\s\S]*?\})\s*```/); if (codeBlockMatch) { try { requirements = JSON.parse(codeBlockMatch[1]); // 移除代码块部分，保留自然语言 naturalLanguageReply = responseText.replace(/```(?:json)?\s*\{[\s\S]*?\}\s*```/g, '').trim(); } catch (e) { // 解析失败，继续尝试其他方法 } } // 方法2: 尝试匹配JSON对象 if (!requirements) { const jsonMatch = responseText.match(/\{[\s\S]*"needsImages"[\s\S]*\}/); if (jsonMatch) { try { requirements = JSON.parse(jsonMatch[0]); // 移除JSON部分，保留自然语言 naturalLanguageReply = responseText.replace(/\{[\s\S]*"needsImages"[\s\S]*\}/, '').trim(); } catch (e) { // 解析失败 } } } // 方法3: 尝试直接解析整个文本 if (!requirements) { try { requirements = JSON.parse(responseText.trim()); } catch (e) { // 不是纯JSON } } // 如果找到JSON，返回JSON和自然语言回复 if (requirements && typeof requirements === 'object') { // 将自然语言回复保存到requirements中，以便后续显示 if (naturalLanguageReply && naturalLanguageReply !== responseText.trim()) { requirements.naturalLanguageReply = naturalLanguageReply; } return requirements; } // 如果没有找到JSON，可能是用户的问题与工作流无关，返回错误信息 return { error: naturalLanguageReply || '请描述你的工作流需求，例如：生成一个登录流程，先点击登录按钮，然后输入用户名和密码' }; }; // 解析用户输入的文字参考（按行分割） const parseReferenceTexts = (text) => { // 如果已经有工作流需求，提取文字参考 if (workflowRequirements && workflowRequirements.needsTexts > 0) { // 尝试从文本中提取，可能是用换行、逗号或分号分隔 const lines = text.split(/[\n,，;；]/).map(t => t.trim()).filter(t => t); return lines.slice(0, workflowRequirements.needsTexts); } return []; }; const onSend = async (text) => { if (!text.trim() && uploadedImages.length === 0) return; // 保存上传的图片信息（用于后续使用和显示） const currentImages = [...uploadedImages]; // 添加用户消息（包含图片信息，包含base64数据以便在聊天界面显示） const userMessage = { role: 'user', content: text, images: currentImages.map(img => ({ name: img.originalName, tempName: img.tempName, base64: img.base64, // 包含base64数据，用于在聊天界面显示 originalName: img.originalName })), timestamp: new Date(), }; onSendMessage?.(userMessage); // 发送消息后立即清空上传的图片，让输入框的提示方块消失 setUploadedImages([]); // 开始加载 onLoadingChange?.(true); try { // 第一阶段：如果没有需求信息，先分析需求 if (!workflowRequirements) { // 如果有参考图，先调用img2text获取图片描述 let imageDescriptionsPrompt = ''; if (currentImages.length > 0) { const imageDescriptions = []; for (const img of currentImages) { const description = await img2text(img.base64, '请详细描述这张图片的内容，包括图片中的界面元素、按钮、文字等信息'); if (description) { imageDescriptions.push(description); } } if (imageDescriptions.length > 0) { imageDescriptionsPrompt = `\n\n用户提供了以下参考图片及其描述：\n${imageDescriptions.map((desc, index) => `图片${index + 1}：${desc}`).join('\n')}\n\n请根据这些图片描述，分析用户需要哪些图片和文字参考来生成工作流。`; } } const requirements = await analyzeRequirements(text + imageDescriptionsPrompt); if (requirements.error) { // 如果返回错误信息，直接显示（可能是自然语言回复） const errorMessage = { role: 'assistant', content: requirements.error, timestamp: new Date(), }; onSendMessage?.(errorMessage); return; } // 保存需求信息 setWorkflowRequirements(requirements); // 显示需求信息给用户（优先显示AI的自然语言回复，然后显示需求列表） const needsImages = requirements.needsImages || 0; const needsTexts = requirements.needsTexts || 0; let requirementMessage = ''; // 如果有自然语言回复，先显示 if (requirements.naturalLanguageReply) { requirementMessage = requirements.naturalLanguageReply + '\n\n'; } // 然后显示需求信息 if (needsImages > 0 || needsTexts > 0) { requirementMessage += '📋 根据您的需求，我需要以下信息：\n\n'; if (needsImages > 0) { requirementMessage += `🖼️ 需要 ${needsImages} 张图片：\n`; (requirements.imageDescriptions || []).forEach((desc, index) => { requirementMessage += `${index + 1}. ${desc}\n`; }); requirementMessage += '\n'; } if (needsTexts > 0) { requirementMessage += `📝 需要 ${needsTexts} 个文字参考：\n`; (requirements.textDescriptions || []).forEach((desc, index) => { requirementMessage += `${index + 1}. ${desc}\n`; }); requirementMessage += '\n'; } requirementMessage += '请按顺序上传图片和输入文字参考，然后再次发送消息。'; } const reqMessage = { role: 'assistant', content: requirementMessage || '好的，我理解了您的需求。', timestamp: new Date(), }; onSendMessage?.(reqMessage); return; } // 第二阶段：验证用户提供的信息是否完整 const needsImages = workflowRequirements.needsImages || 0; const needsTexts = workflowRequirements.needsTexts || 0; const providedImages = currentImages.length; const parsedTexts = parseReferenceTexts(text); const providedTexts = parsedTexts.length; if (providedImages < needsImages || providedTexts < needsTexts) { // 信息不完整，提示用户 let missingMessage = '❌ 信息不完整，请提供：\n\n'; if (providedImages < needsImages) { missingMessage += `🖼️ 还需要 ${needsImages - providedImages} 张图片\n`; } if (providedTexts < needsTexts) { missingMessage += `📝 还需要 ${needsTexts - providedTexts} 个文字参考\n`; } missingMessage += '\n请按顺序上传图片和输入文字参考，然后再次发送消息。'; const missingMsg = { role: 'assistant', content: missingMessage, timestamp: new Date(), }; onSendMessage?.(missingMsg); return; } // 第三阶段：信息完整，生成工作流 let namedImages = []; if (currentImages.length > 0) { try { // 使用需求描述给图片命名 const imageDescriptions = workflowRequirements.imageDescriptions || []; namedImages = currentImages.map((img, index) => ({ ...img, aiName: imageDescriptions[index] ? `${imageDescriptions[index]}.png` : `${index + 1}.png` })); } catch (nameError) { console.error('图片命名失败，使用默认命名:', nameError); namedImages = currentImages.map((img, index) => ({ ...img, aiName: `${index + 1}.png` })); } } // 构建包含文字参考的提示词 let textReferencesPrompt = ''; if (parsedTexts.length > 0) { textReferencesPrompt = `\n\n用户提供的文字参考：\n${parsedTexts.map((t, i) => `${i + 1}. ${t}`).join('\n')}\n\n在生成工作流时，如果操作需要定位文字，请使用上述文字参考。`; // 保存文字参考到state setReferenceTexts(parsedTexts); } // 如果有参考图，调用img2text获取图片描述并加入到prompt中 let imageDescriptionsPrompt = ''; if (currentImages.length > 0) { const imageDescriptions = []; for (const img of currentImages) { const description = await img2text(img.base64, '请详细描述这张图片的内容，包括图片中的界面元素、按钮、文字、布局等信息，这些信息将用于生成自动化工作流'); if (description) { imageDescriptions.push(description); } } if (imageDescriptions.length > 0) { imageDescriptionsPrompt = `\n\n参考图片描述：\n${imageDescriptions.map((desc, index) => { const imgName = namedImages[index]?.aiName || `${index + 1}.png`; return `图片 ${imgName}：${desc}`; }).join('\n')}\n\n请根据这些图片描述，在生成工作流时合理使用对应的图片文件名。`; } } // 发送到GPT并获取回复（传递已命名的图片信息和文字参考） const response = await sendToGPT(text + textReferencesPrompt + imageDescriptionsPrompt, namedImages); // 根据实际 API 响应结构解析文本 // API 返回: { success: true, data: { output_text: "..." } } const responseText = response.data?.output_text || response.text || response.content || response.message || response.data?.text || response.data?.content || response.result || (typeof response === 'string' ? response : JSON.stringify(response)); // 检测是否是JSON格式的工作流 const detectedWorkflowJson = extractWorkflowJsonFromText(responseText); if (detectedWorkflowJson) { // 如果检测到工作流JSON，保存到内存中，不显示在聊天框 setWorkflowJson(detectedWorkflowJson); // 准备图片数据（base64和文件名） const imagesData = namedImages.map(img => ({ name: img.aiName || img.tempName, base64: img.base64, originalName: img.originalName })); // 建立图片文件名映射：将JSON中可能使用的简单文件名（如 "1.png"）映射到实际保存的文件名 // 这样即使AI使用了 "1.png"、"2.png" 等简单名称，也能正确映射到实际的文件名 const imageNameMap = {}; namedImages.forEach((img, index) => { const actualName = img.aiName || img.tempName; // 映射 "1.png", "2.png" 等 imageNameMap[`${index + 1}.png`] = actualName; // 也映射原始名称（如果有） if (img.originalName) { imageNameMap[img.originalName] = actualName; } }); // 在保存前，更新工作流JSON中的图片文件名 const updatedWorkflowJson = updateImagePathsInWorkflow(detectedWorkflowJson, imageNameMap); // 直接保存工作流（不显示JSON内容） try { if (window.electronAPI && window.electronAPI.saveWorkflow) { const saveResult = await window.electronAPI.saveWorkflow(updatedWorkflowJson, imagesData); if (saveResult.success) { // 保存成功，清空所有状态（图片已经在发送时清空） setWorkflowRequirements(null); setReferenceTexts([]); setWorkflowJson(null); // 显示成功消息（不包含JSON内容） const successMessage = { role: 'assistant', content: `✅ 工作流已成功生成并保存！\n\n文件夹名称：${saveResult.folderName}`, timestamp: new Date(), }; onSendMessage?.(successMessage); // 触发工作流列表刷新事件 window.dispatchEvent(new CustomEvent('workflow-saved')); return; } else { // 保存失败，显示错误 console.error('保存工作流失败:', saveResult.error); const errorMessage = { role: 'assistant', content: `❌ 保存工作流失败：${saveResult.error}`, timestamp: new Date(), error: true, }; onSendMessage?.(errorMessage); return; } } } catch (saveError) { console.error('保存工作流时出错:', saveError); const errorMessage = { role: 'assistant', content: `❌ 保存工作流时出错：${saveError.message}`, timestamp: new Date(), error: true, }; onSendMessage?.(errorMessage); return; } } // 如果没有检测到工作流JSON，显示原始回复 const gptMessage = { role: 'assistant', content: responseText || '抱歉，我无法理解您的请求。', timestamp: new Date(), }; onSendMessage?.(gptMessage); } catch (error) { // 添加错误消息，显示更详细的错误信息 let errorContent = '抱歉，发送消息时出现错误。'; if (error.message) { if (error.message.includes('服务器错误')) { errorContent = error.message; } else if (error.message.includes('HTTP 500')) { errorContent = '服务器内部错误，请检查 API 端点是否正确，或联系服务器管理员。'; } else if (error.message.includes('Failed to fetch') || error.message.includes('NetworkError')) { errorContent = '网络连接失败，请检查网络连接或服务器是否可访问。'; } else { errorContent = `错误：${error.message}`; } } const errorMessage = { role: 'assistant', content: errorContent, timestamp: new Date(), error: true, }; onSendMessage?.(errorMessage); } finally { // 结束加载 onLoadingChange?.(false); } }; return { onSend, onUpload, uploadedImages, removeImage, workflowRequirements, setWorkflowRequirements, referenceTexts, setReferenceTexts, }; } // 更新工作流JSON中的图片路径 function updateImagePathsInWorkflow(workflowJson, imageNameMap) { // 深拷贝，避免修改原始对象 const updated = JSON.parse(JSON.stringify(workflowJson)); // 递归更新actions中的图片路径 function updateActions(actions) { if (!Array.isArray(actions)) return; for (const action of actions) { // locate 和 click 操作可能使用图片 if ((action.type === 'locate' || action.type === 'click') && action.method === 'image' && action.target) { const target = action.target; // 检查是否是映射表中的文件名 if (imageNameMap[target]) { action.target = imageNameMap[target]; } else { // 尝试匹配 "1.png", "2.png" 等格式 const match = target.match(/^(\d+)\.png$/i); if (match) { const index = parseInt(match[1]) - 1; if (imageNameMap[`${index + 1}.png`]) { action.target = imageNameMap[`${index + 1}.png`]; } } } } // ocr 操作可能使用头像图片 if (action.type === 'ocr' && action.method === 'by-avatar' && action.avatar) { const avatar = action.avatar; if (imageNameMap[avatar]) { action.avatar = imageNameMap[avatar]; } else { const match = avatar.match(/^(\d+)\.png$/i); if (match) { const index = parseInt(match[1]) - 1; if (imageNameMap[`${index + 1}.png`]) { action.avatar = imageNameMap[`${index + 1}.png`]; } } } } // 递归处理嵌套的 actions（if、for、while） if (action.then && Array.isArray(action.then)) { updateActions(action.then); } if (action.else && Array.isArray(action.else)) { updateActions(action.else); } if (action.body && Array.isArray(action.body)) { updateActions(action.body); } } } if (updated.actions && Array.isArray(updated.actions)) { updateActions(updated.actions); } return updated; } // 从文本中提取JSON格式的工作流（支持新旧格式） function extractWorkflowJsonFromText(text) { if (!text) return null; // 尝试直接解析整个文本 try { const parsed = JSON.parse(text.trim()); // 新格式：包含 actions 字段 if (parsed && typeof parsed === 'object' && Array.isArray(parsed.actions)) { return parsed; } // 旧格式：直接是数组 if (Array.isArray(parsed) && parsed.length > 0) { return { actions: parsed }; } } catch (e) { // 不是纯JSON，继续尝试提取 } // 尝试从代码块中提取JSON const codeBlockMatch = text.match(/```(?:json)?\s*(\{[\s\S]*?\})\s*```/); if (codeBlockMatch) { try { const parsed = JSON.parse(codeBlockMatch[1]); if (parsed && typeof parsed === 'object') { // 新格式：包含 actions if (Array.isArray(parsed.actions)) { return parsed; } // 旧格式：直接是数组 if (Array.isArray(parsed)) { return { actions: parsed }; } } } catch (e) { // 解析失败 } } // 尝试查找JSON对象（查找包含"actions"的对象，支持多行） const jsonMatch = text.match(/\{[\s\S]*?"actions"[\s\S]*?\}/); if (jsonMatch) { try { const parsed = JSON.parse(jsonMatch[0]); if (parsed && typeof parsed === 'object' && Array.isArray(parsed.actions)) { return parsed; } } catch (e) { // 解析失败，尝试更宽松的匹配 try { // 尝试匹配整个JSON对象（包括嵌套结构） const fullJsonMatch = text.match(/\{(?:[^{}]|(?:\{[^{}]*\}))*\}/); if (fullJsonMatch) { const parsed = JSON.parse(fullJsonMatch[0]); if (parsed && typeof parsed === 'object' && Array.isArray(parsed.actions)) { return parsed; } } } catch (e2) { // 解析失败 } } } return null; }