fix: 修复穿搭图片生成进度条显示问题
问题分析: - 后台任务正常执行并发送进度事件,但前端进度条显示为'等待中' - 前端只监听完成和失败事件,缺少进度事件监听 - 后台任务开始时没有更新记录状态为'生成中' - 进度回调只发送前端事件,没有更新数据库记录 解决方案: 1. 前端添加outfit_generation_progress事件监听 2. 后台任务开始时立即更新记录状态为'生成中' 3. 进度回调同时更新数据库记录和发送前端事件 4. 修复WorkflowProgress事件数据结构 技术改进: - 实时进度更新:数据库记录progress字段实时更新 - 完整事件监听:监听progress、completed、failed三种事件 - 状态同步:确保前端显示与后台任务状态一致 - 详细进度信息:包含当前步骤、总步数、状态消息等 现在前端能正确显示'生成中'状态和实时进度百分比。
This commit is contained in:
parent
dd289a8685
commit
68c0ff9469
|
|
@ -593,6 +593,16 @@ pub async fn execute_outfit_image_task(
|
||||||
style_preferences: None,
|
style_preferences: None,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 立即更新记录状态为"生成中"
|
||||||
|
if let Ok(Some(mut record)) = outfit_repo.get_record_by_id(&record_id) {
|
||||||
|
record.start_processing();
|
||||||
|
if let Err(e) = outfit_repo.update_record(&record) {
|
||||||
|
error!("更新记录状态为生成中失败: {}", e);
|
||||||
|
} else {
|
||||||
|
info!("📝 更新记录状态为生成中: {}", record_id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 在后台异步执行生成任务
|
// 在后台异步执行生成任务
|
||||||
let app_handle_clone = app_handle.clone();
|
let app_handle_clone = app_handle.clone();
|
||||||
let record_id_clone = record_id.clone();
|
let record_id_clone = record_id.clone();
|
||||||
|
|
@ -890,9 +900,29 @@ async fn perform_outfit_image_generation(
|
||||||
// 创建进度回调
|
// 创建进度回调
|
||||||
let app_handle_clone = app_handle.clone();
|
let app_handle_clone = app_handle.clone();
|
||||||
let record_id_clone = record_id.clone();
|
let record_id_clone = record_id.clone();
|
||||||
|
let outfit_repo_clone = OutfitImageRepository::new(database.clone());
|
||||||
|
|
||||||
let progress_callback = move |progress: WorkflowProgress| {
|
let progress_callback = move |progress: WorkflowProgress| {
|
||||||
|
// 更新数据库中的进度
|
||||||
|
if let Ok(Some(mut record)) = outfit_repo_clone.get_record_by_id(&record_id_clone) {
|
||||||
|
record.progress = progress.progress_percentage / 100.0; // 转换为0-1范围
|
||||||
|
if let Err(e) = outfit_repo_clone.update_record(&record) {
|
||||||
|
warn!("更新记录进度失败: {}", e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// 发送进度事件到前端
|
// 发送进度事件到前端
|
||||||
if let Err(e) = app_handle_clone.emit("outfit_generation_progress", &progress) {
|
let progress_event = serde_json::json!({
|
||||||
|
"type": "outfit_generation_progress",
|
||||||
|
"record_id": record_id_clone,
|
||||||
|
"progress_percentage": progress.progress_percentage,
|
||||||
|
"current_step": progress.current_step,
|
||||||
|
"total_steps": progress.total_steps,
|
||||||
|
"status_message": progress.status_message,
|
||||||
|
"current_node_id": progress.current_node_id
|
||||||
|
});
|
||||||
|
|
||||||
|
if let Err(e) = app_handle_clone.emit("outfit_generation_progress", &progress_event) {
|
||||||
warn!("发送进度事件失败: {}", e);
|
warn!("发送进度事件失败: {}", e);
|
||||||
}
|
}
|
||||||
info!("生成进度 - 记录ID: {}, 进度: {}%", record_id_clone, progress.progress_percentage);
|
info!("生成进度 - 记录ID: {}, 进度: {}%", record_id_clone, progress.progress_percentage);
|
||||||
|
|
|
||||||
|
|
@ -347,9 +347,16 @@ const ModelDetail: React.FC = () => {
|
||||||
loadOutfitRecords();
|
loadOutfitRecords();
|
||||||
}, [id]);
|
}, [id]);
|
||||||
|
|
||||||
// 监听穿搭图片生成完成事件
|
// 监听穿搭图片生成事件
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const setupEventListeners = async () => {
|
const setupEventListeners = async () => {
|
||||||
|
// 监听生成进度事件
|
||||||
|
const unlistenProgress = await listen('outfit_generation_progress', (event) => {
|
||||||
|
console.log('收到穿搭图片生成进度事件:', event.payload);
|
||||||
|
// 实时更新记录列表显示进度
|
||||||
|
loadOutfitRecords();
|
||||||
|
});
|
||||||
|
|
||||||
// 监听生成完成事件
|
// 监听生成完成事件
|
||||||
const unlistenCompleted = await listen('outfit_generation_completed', (event) => {
|
const unlistenCompleted = await listen('outfit_generation_completed', (event) => {
|
||||||
console.log('收到穿搭图片生成完成事件:', event.payload);
|
console.log('收到穿搭图片生成完成事件:', event.payload);
|
||||||
|
|
@ -366,6 +373,7 @@ const ModelDetail: React.FC = () => {
|
||||||
});
|
});
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
unlistenProgress();
|
||||||
unlistenCompleted();
|
unlistenCompleted();
|
||||||
unlistenFailed();
|
unlistenFailed();
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue