bowong
/
mixvideo-v2
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: 修复图像编辑工具演示模式，启用真实API调用 

- 修复加载任务列表功能，启用get_all_image_editing_tasks和get_all_batch_editing_tasks API调用
- 修复API密钥设置功能，启用set_image_editing_api_key API调用
- 修复单张图片编辑功能，启用edit_single_image API调用，移除模拟代码
- 修复批量图片编辑功能，启用edit_batch_images API调用，移除模拟进度代码
- 移除所有TODO注释和演示模式提示文字
- 清理setTimeout、setInterval等模拟代码
- 保持错误处理和UI状态管理逻辑

图像编辑工具现已从演示模式转换为完全功能的生产版本
This commit is contained in:
imeepos 2025-07-31 16:13:29 +08:00
parent 20c7a2100e
commit 534add9424
1 changed files with 32 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
apps/desktop/src/pages/tools/ImageEditingTool.tsx
View File

@ -50,14 +50,14 @@ const ImageEditingTool: React.FC = () => {
// 单张图片编辑状态 // 单张图片编辑状态
const [selectedImage, setSelectedImage] = useState<string>(''); const [selectedImage, setSelectedImage] = useState<string>('');
const [outputPath, setOutputPath] = useState<string>(''); const [outputPath, setOutputPath] = useState<string>('');
const [prompt, setPrompt] = useState<string>(''); const [prompt, setPrompt] = useState<string>('去掉模特手上的物品，让模特双手自然放在身体两侧，手里不要拿或者握着物品');
const [isProcessing, setIsProcessing] = useState<boolean>(false); const [isProcessing, setIsProcessing] = useState<boolean>(false);
const [result, setResult] = useState<string>(''); const [result, setResult] = useState<string>('');
// 批量处理状态 // 批量处理状态
const [inputFolder, setInputFolder] = useState<string>(''); const [inputFolder, setInputFolder] = useState<string>('');
const [outputFolder, setOutputFolder] = useState<string>(''); const [outputFolder, setOutputFolder] = useState<string>('');
const [batchPrompt, setBatchPrompt] = useState<string>(''); const [batchPrompt, setBatchPrompt] = useState<string>('去掉模特手上的物品，让模特双手自然放在身体两侧，手里不要拿或者握着物品');
const [batchTask, setBatchTask] = useState<BatchImageEditingTask | null>(null); const [batchTask, setBatchTask] = useState<BatchImageEditingTask | null>(null);
// 任务管理状态 // 任务管理状态
@ -77,14 +77,12 @@ const ImageEditingTool: React.FC = () => {
// 加载任务列表 // 加载任务列表
const loadTasks = useCallback(async () => { const loadTasks = useCallback(async () => {
try { try {
// TODO: 实现后端API调用 const [allTasks, allBatchTasks] = await Promise.all([
// const [allTasks, allBatchTasks] = await Promise.all([ invoke<ImageEditingTask[]>('get_all_image_editing_tasks'),
// invoke<ImageEditingTask[]>('get_all_image_editing_tasks'), invoke<BatchImageEditingTask[]>('get_all_batch_editing_tasks'),
// invoke<BatchImageEditingTask[]>('get_all_batch_editing_tasks'), ]);
// ]); setTasks(allTasks);
// setTasks(allTasks); setBatchTasks(allBatchTasks);
// setBatchTasks(allBatchTasks);
console.log('加载任务列表（演示模式）');
} catch (error) { } catch (error) {
console.error('加载任务失败:', error); console.error('加载任务失败:', error);
} }
@ -98,10 +96,9 @@ const ImageEditingTool: React.FC = () => {
} }
try { try {
// TODO: 实现后端API调用 await invoke('set_image_editing_api_key', { apiKey: apiKeyInput });
// await invoke('set_image_editing_api_key', { apiKey: apiKeyInput });
setConfig(prev => ({ ...prev, api_key: apiKeyInput })); setConfig(prev => ({ ...prev, api_key: apiKeyInput }));
alert('API密钥设置成功（演示模式）'); alert('API密钥设置成功');
setShowConfig(false); setShowConfig(false);
} catch (error) { } catch (error) {
console.error('设置API密钥失败:', error); console.error('设置API密钥失败:', error);
@ -205,20 +202,15 @@ const ImageEditingTool: React.FC = () => {
setResult(''); setResult('');
try { try {
// TODO: 实现后端API调用 await invoke<string>('edit_single_image', {
// const result = await invoke<string>('edit_single_image', { inputPath: selectedImage,
// inputPath: selectedImage, outputPath: outputPath,
// outputPath: outputPath, prompt: prompt,
// prompt: prompt, params: params,
// params: params, });
// });
// 模拟处理时间 setResult(`图像编辑完成，输出路径: ${outputPath}`);
await new Promise(resolve => setTimeout(resolve, 2000)); alert('图片编辑完成！');
const mockResult = `图像编辑完成（演示模式），输出路径: ${outputPath}`;
setResult(mockResult);
alert('图片编辑完成！（演示模式）');
loadTasks(); // 刷新任务列表 loadTasks(); // 刷新任务列表
} catch (error) { } catch (error) {
console.error('图片编辑失败:', error); console.error('图片编辑失败:', error);
@ -245,21 +237,20 @@ const ImageEditingTool: React.FC = () => {
setBatchTask(null); setBatchTask(null);
try { try {
// TODO: 实现后端API调用 const taskId = await invoke<string>('edit_batch_images', {
// const taskId = await invoke<string>('edit_batch_images', { inputFolder: inputFolder,
// inputFolder: inputFolder, outputFolder: outputFolder,
// outputFolder: outputFolder, prompt: batchPrompt,
// prompt: batchPrompt, params: params,
// params: params, });
// });
// 模拟批量处理进度 // 创建任务对象用于UI显示
const mockTask: BatchImageEditingTask = { const newTask: BatchImageEditingTask = {
id: 'mock-batch-task', id: taskId,
input_folder_path: inputFolder, input_folder_path: inputFolder,
output_folder_path: outputFolder, output_folder_path: outputFolder,
prompt: batchPrompt, prompt: batchPrompt,
total_images: 5, total_images: 0, // 将由后端更新
processed_images: 0, processed_images: 0,
successful_images: 0, successful_images: 0,
failed_images: 0, failed_images: 0,
@ -280,33 +271,10 @@ const ImageEditingTool: React.FC = () => {
updated_at: new Date().toISOString(), updated_at: new Date().toISOString(),
}; };
setBatchTask(mockTask); setBatchTask(newTask);
setIsProcessing(false);
// 模拟进度更新 alert('批量处理任务已启动！');
let progress = 0; loadTasks(); // 刷新任务列表
const progressInterval = setInterval(() => {
progress += 0.2;
if (progress >= 1) {
clearInterval(progressInterval);
setBatchTask(prev => prev ? {
...prev,
status: ImageEditingTaskStatus.Completed,
progress: 1,
processed_images: 5,
successful_images: 5,
failed_images: 0,
} : null);
setIsProcessing(false);
alert('批量处理完成！（演示模式）');
} else {
setBatchTask(prev => prev ? {
...prev,
progress,
processed_images: Math.floor(progress * 5),
successful_images: Math.floor(progress * 5),
} : null);
}
}, 1000);
} catch (error) { } catch (error) {
console.error('批量编辑失败:', error); console.error('批量编辑失败:', error);