进度与状态跟踪

1. 进度跟踪架构

进度跟踪系统分为服务器端和客户端组件，它们通过 API 端点进行通信。这种架构可在计算密集型操作期间实现实时更新，同时保持 UI 的响应能力。

架构图

来源：javascript/progressbar.js75-215 modules/progress.py87-141

组件概览

来源：modules/progress.py16-20 javascript/progressbar.js75-215

2. 任务管理

2.1 任务状态

WebUI 中的任务会经历不同的状态

待处理：任务正在队列中等待
活动：任务正在处理中
已完成：任务已处理完成

这些状态在服务器的全局变量中进行跟踪

current_task：存储当前执行任务的 ID
pending_tasks：等待处理的任务的有序字典
finished_tasks：最近完成的任务列表

来源：modules/progress.py16-20 modules/progress.py23-39

2.2 任务创建和识别

生成图像时，会在 JavaScript 中使用 randomId() 创建一个唯一的任务 ID，并将其传递给后端。此 ID 用于在任务的整个生命周期中跟踪该任务。

任务 ID 的格式为 task(TYPE-RANDOM)，其中

TYPE 标识生成类型（txt2img、img2img 等）
RANDOM 是一个唯一的字母数字字符串

来源：javascript/ui.js150-166 javascript/progressbar.js68-70 modules/progress.py40-44

3. 进度条 UI

3.1 进度条组件

进度条 UI 由多个元素组成

进度条：完成百分比的视觉指示器
文本信息：显示完成百分比和预计到达时间 (ETA)
实时预览：显示正在生成的图像的当前状态
标题更新：将进度百分比添加到浏览器标签页标题

生成过程中，提交按钮会隐藏，并被中断/跳过按钮取代。

来源：javascript/progressbar.js100-151 javascript/ui.js130-142

3.2 进度显示流程

来源：javascript/progressbar.js75-215

4. Progress API

服务器在 /internal/progress 处公开了一个内部 REST API 端点，该端点向客户端提供进度信息。此 API 是生成过程与 UI 之间的桥梁。

4.1 API 请求/响应格式

请求 (ProgressRequest)

{
  "id_task": "task(txt2img-ABC1234)",  // ID of the task to track
  "id_live_preview": 42,                // ID of last received preview
  "live_preview": true                  // Whether to include preview
}

响应 (ProgressResponse)

{
  "active": true,            // Whether task is currently being processed
  "queued": false,           // Whether task is waiting in queue
  "completed": false,        // Whether task has completed
  "progress": 0.45,          // Progress from 0 to 1
  "eta": 23.5,               // Estimated time remaining in seconds
  "live_preview": "data:...", // Base64 encoded preview image
  "id_live_preview": 43,     // ID of current preview image
  "textinfo": "Sampling..."  // Text info about the current state
}

来源：modules/progress.py55-73 modules/progress.py87-141

4.2 进度计算

进度根据以下内容计算

已完成的任务数量（job_no / job_count）
当前任务中的当前采样步数（sampling_step / sampling_steps）

该公式将这两者结合起来，得到一个从 0 到 1 的总体进度值

progress = job_no / job_count + (1 / job_count) * (sampling_step / sampling_steps)

ETA 的估算方法是：

elapsed_time = current_time - start_time
predicted_duration = elapsed_time / progress
eta = predicted_duration - elapsed_time

来源：modules/progress.py100-114

5. 实时预览

实时预览功能显示正在生成的图像的当前状态，并实时更新。

5.1 预览生成

当客户端请求带有 live_preview=true 的进度时

服务器从 shared.state.current_image 捕获当前图像状态
图像以 opts.live_previews_image_format 指定的格式（PNG 或 JPEG）进行编码
编码后的图像转换为数据 URI 并发送到客户端
客户端在画廊区域显示预览

实时预览根据图像大小进行优化，以平衡质量和性能。

来源：modules/progress.py116-140 javascript/progressbar.js178-207

6. 任务队列管理

WebUI 可以处理多个生成请求。当任务超出可用资源时，它们会被放入队列。

6.1 队列实现

任务在三个集合中移动

pending_tasks：等待处理的任务（有序字典）
current_task：当前活动的任务（单个任务 ID）
finished_tasks：最近完成的任务（列表，限制为 16 项）

来源：modules/progress.py16-20 modules/progress.py23-39

6.2 队列显示

对于排队的任务，进度条显示队列位置

"In queue: X/Y"

其中 X 是任务在队列中的位置，Y 是队列的总大小。

此信息有助于用户了解其任务何时开始处理。

来源：modules/progress.py92-98

7. 与 Gradio UI 集成

进度跟踪系统通过 JavaScript 函数与基于 Gradio 的 UI 集成，这些函数根据生成状态显示/隐藏 UI 元素。

7.1 提交按钮状态

UI 为提交按钮区域提供三种状态

正常：显示提交按钮
生成中：显示中断和跳过按钮
中断中：隐藏中断按钮，显示跳过按钮和“中断中”占位符

这些状态在生成过程中提供了视觉反馈和控件选项。

来源：javascript/ui.js130-142

7.2 进度恢复

WebUI 将活动任务 ID 存储在浏览器 localStorage 中，从而可以在页面重新加载或崩溃后恢复进度跟踪。这是通过以下方式实现的：

任务 ID 存储：localSet("txt2img_task_id", id)
进度恢复按钮：“🌀 恢复进度”
恢复函数：“restoreProgressTxt2img()” 和 “restoreProgressImg2img()”

来源：javascript/ui.js144-241

8. 键盘快捷键

进度跟踪系统与键盘快捷键系统集成，以便在生成过程中提供控件

Ctrl+Enter：重新开始生成（如果正在运行则中断，然后生成）
Alt/Option+Enter：跳过批处理中的当前图像
Esc：中断生成

这些快捷键通过提供对生成控件的快速访问来改善用户体验。

来源： script.js143-191

9. 高级功能

9.1 唤醒锁

为了防止在长时间生成过程中设备屏幕关闭，系统可以请求唤醒锁

这由 opts.prevent_screen_sleep_during_generation 设置控制。

来源： javascript/progressbar.js81-98

9.2 性能统计

生成结束后，系统会收集并显示性能统计信息

耗时
显存使用情况（如果启用了内存监控）
- 活动峰值内存
- 预留内存
- 系统内存使用情况

这些信息有助于用户了解资源使用情况并优化工作流程。

来源： modules/call_queue.py93-131