主界面组件

相关源文件

• modules/img2img.py
• modules/processing.py
• modules/sd_samplers.py
• modules/shared.py
• modules/txt2img.py
• modules/ui.py

本文档详细介绍了 Stable Diffusion Web UI 中的主要用户界面组件。它涵盖了用户交互的核心 UI 元素之间的组织、功能和关系。有关特定生成控件的详细信息，请参阅图像生成控件。有关扩展面板的信息，请参阅附加网络面板。

概述

Stable Diffusion Web UI 提供了一个全面的界面，用于使用 Stable Diffusion 模型生成和操作图像。该界面使用 Gradio 库构建，并组织成几个主要选项卡，每个选项卡都包含用于图像生成不同方面的各种组件。

主界面分为以下主要组件

• 顶行：包含提示输入、生成按钮和实用功能
• 选项卡导航：允许在不同的功能模式之间切换
• 生成设置：用于配置图像生成过程的控件
• 输出面板：显示生成的图像和信息

UI 结构

来源：modules/ui.py253-506 该图显示了主 UI 组件及其层次结构。

顶行组件

顶行包含最常用的控件，并且在主要的生成选项卡（txt2img 和 img2img）之间是一致的。它通过 Toprow 类实现。

提示界面

提示界面包括

1. 提示区域：用户在此文本区域输入正面提示，描述他们希望在图像中看到的内容
2. 负面提示区域：用户在此文本区域输入负面提示，描述他们希望排除的内容
3. 样式下拉菜单：用于选择和应用预定义的提示样式
4. 令牌计数器：显示输入提示的令牌计数
5. 生成按钮：启动生成过程
6. 实用按钮：包括随机种子、恢复进度和清除提示选项

来源：modules/ui.py66-84 modules/ui.py254-263 modules/ui.py283-286

顶行实现是在 create_ui() 函数中为 txt2img 和 img2img 界面创建的，其中 Toprow 类负责创建提示字段和相关按钮。

主选项卡

UI 由几个主选项卡组成，每个选项卡提供不同的功能

Tab键	描述	主要功能
txt2img	文本到图像生成	从文本提示生成图像
img2img	图像到图像转换	使用提示修改现有图像
Extras	后期处理工具	放大、修复人脸和处理图像
PNG Info	图像元数据查看器	查看和提取图像中的生成参数
训练	模型训练工具	训练 embeddings、hypernetworks
设置	UI 配置	配置应用程序设置
扩展	扩展管理	管理和配置已安装的扩展

txt2img 选项卡

txt2img 选项卡是使用文本提示生成图像的主要界面。它包括：

1. 生成设置：用于配置生成过程的控件
2. 附加网络面板：访问 LoRA 和 embeddings 等附加模型
3. 输出面板：显示生成图像的位置

txt2img 选项卡是在 create_ui() 函数中使用 Gradio Blocks 布局创建的。

来源：modules/ui.py267-497

img2img 选项卡

img2img 选项卡允许使用文本提示转换现有图像。它包括：

1. 输入图像选项卡:

   • img2img：基本的图像到图像
   • Sketch：绘制草图进行转换
   • Inpaint：选择性地修改图像的某些部分
   • Inpaint sketch：在现有图像上绘制草图
   • Inpaint upload：上传单独的图像和蒙版
   • Batch：处理多个图像

2. 生成设置：与 txt2img 类似，但具有去噪强度等附加参数

3. 输出面板：显示转换后的图像

img2img 选项卡是在 create_ui() 函数中，在 txt2img 选项卡之后创建的。

来源：modules/ui.py502-616 modules/img2img.py152-253

生成设置

生成设置控制图像的创建方式。这些设置分为几部分：

尺寸控件

用于设置输出图像尺寸的控件

• 宽度和高度滑块
• 尺寸工具（切换宽度/高度，从输入图像检测）
• 批次计数和尺寸控件

来源：modules/ui.py288-300 modules/ui.py622-660

采样控件

用于采样过程的控件

• 采样方法选择
• 步数控制
• CFG Scale 滑块
• 种子设置

采样器选择决定了用于生成图像的算法。采样器通过 sd_samplers.py 模块进行管理。

来源：modules/ui.py301-304 modules/sd_samplers.py10-59

Hires Fix 手风琴

Hires Fix 功能允许生成初始低分辨率图像，然后进行放大和优化

• 启用/禁用开关
• Upscaler 选择
• 去噪强度
• 分辨率控件
• 可选的独立采样器和提示设置

来源：modules/ui.py310-339

输出面板

输出面板显示生成结果，并提供处理生成图像的工具

1. 画廊：以网格形式显示生成的图像
2. 生成信息：显示用于生成图像的参数
3. Infotext：技术细节，包括提示和设置
4. 发送至按钮：将图像发送到其他选项卡或外部工具的选项
5. 保存按钮：保存图像或其参数的选项

输出面板是使用 create_output_panel() 函数创建的。

来源：modules/ui.py230-231 modules/ui.py379

处理流程

下图说明了用户输入如何流经系统以生成图像

来源：modules/processing.py817-863 modules/txt2img.py14-120 modules/img2img.py152-253

UI 组件到代码映射

下图将 UI 组件映射到它们对应的代码实体

来源：modules/ui.py253-263 modules/processing.py136-227 modules/txt2img.py14-54 modules/img2img.py152-215

关键 UI 代码组件

UI 主要通过 modules/ui.py 中的 create_ui() 函数构建，该函数使用 Gradio 组件设置整个界面。代码中的关键结构包括：

1. Gradio Blocks：用于创建整体 UI 结构
2. Tabs 和 TabItems：用于在不同功能之间导航
3. FormRow 和 FormGroup：用于将控件组织成逻辑组
4. 自定义 UI 组件：在 modules/ui_components.py 中定义，用于专用 UI 元素

UI 创建遵循以下通用模式：

1. 创建主 Gradio blocks 容器
2. 设置 txt2img 界面
3. 设置 img2img 界面
4. 设置附加选项卡（Extras、PNG Info 等）
5. 连接事件处理程序以实现交互功能

来源：modules/ui.py253-616

界面配置和自定义

UI 可通过以下方式进行自定义：

1. 命令行选项：在启动时设置，并存储在 cmd_opts 中
2. 设置选项卡：存储在配置文件中的持久化选项
3. UI 脚本：可以添加或修改 UI 元素的扩展

UI 的外观和行为由 shared.opts 对象中的选项控制，该对象从配置文件和命令行参数初始化。

来源： modules/shared.py14-46 modules/ui.py261-263