怎么个人做网站,做热处理工艺的网站有哪些,网页美工设计流程为,源码打包成app前面我们已经把Learning to See in the Dark的paper和原理进行了解读#xff0c;现在把Learning to See in the Dark#xff08;后续简称SID模型#xff09;部署看一下效果。
这篇文章选择的部署方式是gradio 本地pytorch直接推理。先看一下效果#xff1a;
对单个文件进…前面我们已经把Learning to See in the Dark的paper和原理进行了解读现在把Learning to See in the Dark后续简称SID模型部署看一下效果。
这篇文章选择的部署方式是gradio 本地pytorch直接推理。先看一下效果
对单个文件进行夜景增强
例如下面这张基本全黑的原图经过超级夜景增强功能后出图就是正常的观感。
原图增强后
对一个文件夹内的多个文件批量进行增强
对于多文件的批量处理用户可以上传文件夹中的图片然后批量自动处理在处理过程中可以看到当前正在处理的信息和进度也可以看到原图和处理后的对比图。
当前的部署提供了优美易用的UI界面而且夜景增强效果很不错。整个项目可从链接image_toolbox查看。
一、sid的网络结构
SeeInDark 的结构类似 U-Net适用于低光照图像增强任务。它采用了 编码-解码Encoder-Decoder架构通过 卷积层Conv 下采样Pooling 反卷积UpConv 像素重排Pixel Shuffle 来实现高质量的图像增强。
该网络可分为三个部分
编码Encoder用于特征提取 通过 多个 3×3 卷积 Leaky ReLULReLU 最大池化MaxPool 提取图像的层次化特征。 采用 4 层池化逐步降低分辨率同时增加通道数获取更丰富的语义信息。解码Decoder用于恢复高分辨率信息 采用 转置卷积ConvTranspose2d 跳跃连接Skip Connection 卷积 逐步恢复高分辨率特征。 通过 跳跃连接skip connection 结合低层细节信息增强重建能力避免信息丢失。像素重排Pixel Shuffle提升分辨率 在输出层 使用 Pixel Shuffle将通道信息转换为空间信息实现 超分辨率增强提升最终图像的清晰度。 class SeeInDark(nn.Module):def __init__(self, num_classes10):super(SeeInDark, self).__init__()self.conv1_1 nn.Conv2d(4, 32, kernel_size3, stride1, padding1)self.conv1_2 nn.Conv2d(32, 32, kernel_size3, stride1, padding1)self.pool1 nn.MaxPool2d(kernel_size2)self.conv2_1 nn.Conv2d(32, 64, kernel_size3, stride1, padding1)self.conv2_2 nn.Conv2d(64, 64, kernel_size3, stride1, padding1)self.pool2 nn.MaxPool2d(kernel_size2)self.conv3_1 nn.Conv2d(64, 128, kernel_size3, stride1, padding1)self.conv3_2 nn.Conv2d(128, 128, kernel_size3, stride1, padding1)self.pool3 nn.MaxPool2d(kernel_size2)self.conv4_1 nn.Conv2d(128, 256, kernel_size3, stride1, padding1)self.conv4_2 nn.Conv2d(256, 256, kernel_size3, stride1, padding1)self.pool4 nn.MaxPool2d(kernel_size2)self.conv5_1 nn.Conv2d(256, 512, kernel_size3, stride1, padding1)self.conv5_2 nn.Conv2d(512, 512, kernel_size3, stride1, padding1)self.upv6 nn.ConvTranspose2d(512, 256, 2, stride2)self.conv6_1 nn.Conv2d(512, 256, kernel_size3, stride1, padding1)self.conv6_2 nn.Conv2d(256, 256, kernel_size3, stride1, padding1)self.upv7 nn.ConvTranspose2d(256, 128, 2, stride2)self.conv7_1 nn.Conv2d(256, 128, kernel_size3, stride1, padding1)self.conv7_2 nn.Conv2d(128, 128, kernel_size3, stride1, padding1)self.upv8 nn.ConvTranspose2d(128, 64, 2, stride2)self.conv8_1 nn.Conv2d(128, 64, kernel_size3, stride1, padding1)self.conv8_2 nn.Conv2d(64, 64, kernel_size3, stride1, padding1)self.upv9 nn.ConvTranspose2d(64, 32, 2, stride2)self.conv9_1 nn.Conv2d(64, 32, kernel_size3, stride1, padding1)self.conv9_2 nn.Conv2d(32, 32, kernel_size3, stride1, padding1)self.conv10_1 nn.Conv2d(32, 12, kernel_size1, stride1)def forward(self, x):conv1 self.lrelu(self.conv1_1(x))conv1 self.lrelu(self.conv1_2(conv1))pool1 self.pool1(conv1)conv2 self.lrelu(self.conv2_1(pool1))conv2 self.lrelu(self.conv2_2(conv2))pool2 self.pool1(conv2)conv3 self.lrelu(self.conv3_1(pool2))conv3 self.lrelu(self.conv3_2(conv3))pool3 self.pool1(conv3)conv4 self.lrelu(self.conv4_1(pool3))conv4 self.lrelu(self.conv4_2(conv4))pool4 self.pool1(conv4)conv5 self.lrelu(self.conv5_1(pool4))conv5 self.lrelu(self.conv5_2(conv5))up6 self.upv6(conv5)up6 torch.cat([up6, conv4], 1)conv6 self.lrelu(self.conv6_1(up6))conv6 self.lrelu(self.conv6_2(conv6))up7 self.upv7(conv6)up7 torch.cat([up7, conv3], 1)conv7 self.lrelu(self.conv7_1(up7))conv7 self.lrelu(self.conv7_2(conv7))up8 self.upv8(conv7)up8 torch.cat([up8, conv2], 1)conv8 self.lrelu(self.conv8_1(up8))conv8 self.lrelu(self.conv8_2(conv8))up9 self.upv9(conv8)up9 torch.cat([up9, conv1], 1)conv9 self.lrelu(self.conv9_1(up9))conv9 self.lrelu(self.conv9_2(conv9))conv10 self.conv10_1(conv9)out nn.functional.pixel_shuffle(conv10, 2)return outdef _initialize_weights(self):for m in self.modules():if isinstance(m, nn.Conv2d):m.weight.data.normal_(0.0, 0.02)if m.bias is not None:m.bias.data.normal_(0.0, 0.02)if isinstance(m, nn.ConvTranspose2d):m.weight.data.normal_(0.0, 0.02)def lrelu(self, x):outt torch.max(0.2*x, x)return outtsid的网络结构相对比较简单是一个UNet结构的网络。
网络是一个4通道的输入在网络的开头通过使用kernel size3, pad1, stride1的conv来保持了特征图尺寸不变。4通道的输入来自于将raw图的rggb进行了拆分拆分到了4通道。
def pack_raw(raw,white_level,black_level):#pack Bayer image to 4 channelsim np.maximum(raw - black_level,0)/ (white_level - black_level) #subtract the black levelim np.expand_dims(im,axis2) img_shape im.shapeH img_shape[0]W img_shape[1]out np.concatenate((im[0:H:2,0:W:2,:], im[0:H:2,1:W:2,:],im[1:H:2,1:W:2,:],im[1:H:2,0:W:2,:]), axis2)#print(fpack_raw,{out.shape })return out在编码部分通过多个maxpoolconvconv的block实现了特征图的降采样。
在解码部分通过多个convconvConvTranspose的block实现了特征图的上采样。
最后还是通过使用kernel size3, pad1, stride1的conv以及kernel1pad0stride1的conv来保持特征图尺寸一致。最后通过一个nn.pixel_shuffle(Depth2Space)得到最终的RGB出图。
sid网络结构的几个问题
1. 对于图像恢复的为什么可以用MaxPool
在 SeeInDark 这个网络中MaxPool2d最大池化 的使用是合理的主要原因如下 1. 最大池化的作用
最大池化MaxPool2d 主要用于
降低特征图的分辨率减小计算量。增加感受野捕捉更大范围的特征。增强特征的稳健性减少对微小噪声的敏感性。 2. 为什么可以用 MaxPool
(1) 最大池化不会丢失关键信息
在 低光增强任务 中网络的目标是从 低光噪声图像 中提取关键特征而不是单纯地保留所有像素细节。 最大池化有助于去除 细微噪声保留主要 亮度信息 和 轮廓信息。
例如 卷积层Conv提取特征 → 最大池化MaxPool去除不必要的细节。这样可以使网络关注 大尺度的光照模式而非噪声干扰。 (2) 最大池化能提高网络的感受野
感受野Receptive Field 指的是 网络每个神经元能够看到的输入区域。 在低光增强任务中
局部像素值通常 变化较大由于噪声。但 大区域的亮度模式如光源位置、物体边界较稳定。
最大池化可以
扩大感受野让网络关注更大区域的图像信息。减少计算复杂度降低显存需求提高训练效率。 (3) U-Net 结构跳跃连接弥补池化的缺点
一个问题是最大池化可能导致细节信息的损失。然而该网络采用了 U-Net 结构具有 跳跃连接Skip Connection
在解码部分低层特征直接连接到高层保留了 局部细节。这样最大池化的 全局特征提取 能力可以与跳跃连接的 局部信息恢复 结合既减少噪声又不丢失关键信息。 (4) 对比平均池化AvgPool
另一种池化方法是 平均池化AvgPool计算局部区域的均值而非最大值。
MaxPoolAvgPool计算方式取最大值计算均值适用于纹理、边缘检测平滑、模糊效果选择最显著特征可能丢失对比度
在 低光增强任务 中图像通常很暗关键细节如亮部区域相对稀少。MaxPool 更适合提取关键亮部特征而不会导致模糊化。 3. 结论
在 SeeInDark 这种低光增强网络中使用 MaxPool2d 是合理的主要原因是
去除噪声提高稳健性避免对细微噪声过度敏感。扩大感受野让网络关注大范围的亮度信息。减少计算量提高训练效率。跳跃连接弥补了最大池化的信息损失能在解码阶段恢复细节。
因此最大池化在这个任务中能有效帮助提取关键的亮度和边缘信息是合理的设计选择。
2. 最后采用nn.PixelShuffle来实现分辨率增强相比使用ConvTranspose或者其他方式有什么优点
在 SeeInDark 网络的最后一层使用了 nn.PixelShuffle 进行 分辨率增强Super-Resolution这是一个 合理且高效 的设计选择。相比于 转置卷积ConvTranspose2d 或 插值InterpolationPixelShuffle 具有以下几个显著的优点 1. 什么是 PixelShuffle
nn.PixelShuffle(upscale_factor2) 作用是
输入通道数 (目标通道数 × upscale_factor²)通道信息转换为空间信息从而 提高分辨率。
举例
输入12 通道C12× H × W输出3 通道C3× 2H × 2WRGB 三通道图像
计算方式
12 通道的输入被重新排列为 3 × (2×2) 12 个像素块。这个重排操作直接映射到更高分辨率的图像而不需要额外计算。 2. 为什么 PixelShuffle 更适合这个任务
(1) 避免了 Checkerboard Artifacts棋盘格伪影
相比 转置卷积ConvTranspose2dPixelShuffle 不会产生棋盘格伪影checkerboard artifacts。
棋盘格伪影的来源
转置卷积ConvTranspose2d 由于 跨步stride和填充padding可能会导致像素值在上采样时分布不均匀形成棋盘格伪影。PixelShuffle 仅重新排列像素不引入额外计算避免了这一问题。 结论PixelShuffle 天然平滑没有伪影适用于 低光增强 这种对图像质量要求高的任务。 (2) 更高效的计算
PixelShuffle 主要是张量重排rearrange operation相比 转置卷积ConvTranspose2d 和 双线性插值Bilinear Interpolation计算量更小
ConvTranspose2d 需要 额外的卷积计算。插值Bilinear 或 Bicubic 需要 插值计算。PixelShuffle 只是 reshape permute计算复杂度低速度快。 结论PixelShuffle 速度更快计算量更低更节省显存。 (3) 更好地保留细节
低光增强任务需要 增强高频信息如纹理、边缘PixelShuffle 比双线性插值更能保留细节
Bilinear/Bicubic Interpolation对整个图像进行插值会导致高频细节丢失图像变模糊。PixelShuffle直接从网络的特征通道中 提取和重排高分辨率信息不会引入模糊。 结论PixelShuffle 在保持高频细节方面比插值方法更优。 (4) 适用于超分辨率任务
PixelShuffle 最早用于 超分辨率重建Super-Resolution, SR例如
EDSREnhanced Deep SRSRResNetESRGANSR-GAN
SeeInDark 需要 提升图像亮度同时增强细节使用 PixelShuffle 可以 在放大分辨率的同时恢复图像质量。 结论PixelShuffle 更适合图像增强和超分辨率任务比普通的 ConvTranspose2d 更能保留 精细纹理。 3. PixelShuffle vs ConvTranspose2d vs Interpolation 对比
方法计算量细节保持伪影风险适用场景PixelShuffle✅ 低✅ 高清晰✅ 无棋盘格超分辨率、去噪、低光增强ConvTranspose2d❌ 高 可能丢失❌ 高棋盘格生成对抗网络GAN、分割任务Bilinear Interpolation✅ 低❌ 细节丢失✅ 无一般性放大如 CNN 最后层 4. 结论
SeeInDark 采用 PixelShuffle 进行分辨率增强是一个 优雅的设计相比 ConvTranspose2d 或插值方法它的主要优势是
避免棋盘格伪影比 ConvTranspose2d 更稳定。计算量更低更快仅需 reshape 操作。更好地保留细节比双线性插值更清晰。超分辨率任务的标准做法更适合低光增强任务。
综上PixelShuffle 在 SeeInDark 网络中的使用是一个聪明的选择在保持高质量输出的同时确保了计算效率和稳定性。
二、使用gradio创建UI的方法
我们以展示的UI代码为例展开说明
class GradioUI:def __init__(self, image_processor):self.image_processor image_processorself.demo self.create_ui()def create_ui(self):with gr.Blocks() as demo:gr.Markdown(# The Image Toolbox Is All You Need)demo.css #batch-process-button {background-color: #007AFF;color: white;}with gr.Tabs() as tabs:self.create_night_enhance_tab()self.create_exif_parser_tab()self.create_image_resize_tab()return demodef create_night_enhance_tab(self):with gr.TabItem(极暗夜景增强, idnight_enhance):mode gr.Radio([单个文件处理, 批量处理], label模式选择, value单个文件处理)single_file_row, batch_file_row self.create_single_file_ui(), self.create_batch_file_ui()mode.change(self.update_ui_mode, inputs[mode], outputs[single_file_row, batch_file_row])def create_single_file_ui(self):with gr.Row(visibleTrue) as single_file_row:with gr.Column():with gr.Row():input_image gr.File(label输入RAW图像文件)output_image gr.Image(label输出图像)with gr.Row():ratio_single_bar gr.Slider(label提亮强度, minimum0, maximum300, value100, step10)with gr.Row():process_button_single gr.Button(处理, elem_idbatch-process-button)with gr.Row():error_message_box gr.Textbox(label错误提示, value, visibleFalse, interactiveFalse)with gr.Row():gr.Markdown(span stylefont-size: 18px;/span \nspan stylefont-size: 18px;请传入RAW图/span \nspan stylefont-size: 18px;当前算法只能处理肉眼看起来极暗的照片如果处理正常曝光的图片处理后就会过曝。/span)examples_data [[assets/input_0475.png, 300, assets/out_0475.png],[assets/input_0139.png, 1, assets/out_0139.png]]with gr.Row():gr.Examples(examplesexamples_data, inputs[input_image, ratio_single_bar, output_image], label示例表格)process_button_single.click(self.validate_and_process_single,inputs[input_image, ratio_single_bar],outputs[output_image, error_message_box, error_message_box])return single_file_rowdef create_batch_file_ui(self):with gr.Row(visibleFalse) as batch_file_row:with gr.Column():with gr.Row(scale1):input_folder gr.File(label选择输入文件夹选择到最底层文件夹即可不要选择单个文件, file_countdirectory)with gr.Row(scale1): output_folder gr.Dropdown(choicesself.list_non_hidden_files(os.path.expanduser(~/Pictures)), label选择输出文件夹)with gr.Row(): ratio_batch_bar gr.Slider(label提亮强度, minimum1, maximum300, value100, step1)with gr.Row():batch_process_button gr.Button(处理, elem_idbatch-process-button)with gr.Row():error_message_box gr.Textbox(label提示, value, visibleTrue, interactiveFalse)progress_display gr.Textbox(label处理进度, interactiveFalse)with gr.Row():input_image_display gr.Image(label当前输入图像, interactiveFalse)output_image_display gr.Image(label当前输出图像, interactiveFalse)batch_process_button.click(self.image_processor.enhance_night_image_batch,inputs[input_folder, output_folder, ratio_batch_bar],outputs[error_message_box, input_image_display, output_image_display, progress_display],queueTrue)return batch_file_rowdef create_exif_parser_tab(self):with gr.TabItem(EXIF解析, idexif_parser):gr.Markdown(EXIF解析功能开发中...)def create_image_resize_tab(self):with gr.TabItem(图像resize, idimage_resize):gr.Markdown(图像resize功能开发中...)staticmethoddef list_non_hidden_files(path):列出指定路径下的非隐藏文件和文件夹if not os.path.exists(path):return []return [os.path.join(path, f) for f in os.listdir(path) if not f.startswith(.)]staticmethoddef update_ui_mode(selected_mode):if selected_mode 单个文件处理:return gr.update(visibleTrue), gr.update(visibleFalse)else:return gr.update(visibleFalse), gr.update(visibleTrue)def validate_and_process_single(self, file, ratio):验证文件格式并处理单张图像allowed_extensions {.raw, .dng, .arw, .nef}if file is None:return None, 请上传一个文件。, gr.update(visibleTrue)_, ext os.path.splitext(file.name)if ext.lower() not in allowed_extensions:return None, f文件格式错误{ext}。请上传RAW格式文件例如.raw, .dng。, gr.update(visibleTrue)result self.image_processor.enhance_night_image_single(file, ratio)return result, , gr.update(visibleFalse)# def validate_and_process_batch(self, input_folder, output_folder, ratio):# 验证文件格式并处理批量图像# #return self.image_processor.enhance_night_image_batch(input_folder, output_folder, ratio)# error_message, input_image, output_image, progress_dis self.image_processor.enhance_night_image_batch(input_folder, output_folder, ratio)# return error_message, input_image, output_image, progress_disdef launch(self):self.demo.launch(shareFalse)# 主函数
def main():device DeviceChecker.get_device()image_processor NightEnhancer(device)gradio_ui GradioUI(image_processor)gradio_ui.launch()if __name__ __main__:main()Gradio UI 编程方法总结
Gradio 是一个用于快速构建 Web 界面的 Python 库适用于机器学习模型的可视化与交互。本代码展示了 Gradio UI 的完整开发流程涵盖 组件、交互逻辑、回调函数 及 多页面管理。以下是 Gradio UI 编程的主要方法总结 1. Gradio UI 的基本结构
Gradio 的 UI 由 Blocks、Tabs、Components 组成并通过 事件绑定 连接逻辑。
(1) Blocks 作为 UI 容器
在 GradioUI 类中所有 UI 组件都是在 gr.Blocks() 作用域内创建的
with gr.Blocks() as demo:Blocks 是 Gradio 的高级 UI 容器支持 多列、多行、组件交互。Tabs 用于创建多页面界面如 “夜景增强”、“EXIF解析” 等。 2. 使用 Tabs 组织多页面 UI
在 create_ui() 方法中使用 gr.Tabs() 创建多个选项卡
with gr.Tabs() as tabs:self.create_night_enhance_tab()self.create_exif_parser_tab()self.create_image_resize_tab()每个选项卡对应一个功能模块使得 UI 层次清晰适合复杂的应用。 3. UI 组件的使用
Gradio 提供多种 输入输出组件在 create_single_file_ui() 和 create_batch_file_ui() 方法中使用了多个 UI 组件
(1) 输入组件
input_image gr.File(label输入RAW图像文件)
ratio_single_bar gr.Slider(label提亮强度, minimum0, maximum300, value100, step10)
mode gr.Radio([单个文件处理, 批量处理], label模式选择, value单个文件处理)gr.File() 允许用户上传文件。gr.Slider() 创建滑块调整参数。gr.Radio() 创建单选按钮。
(2) 输出组件
output_image gr.Image(label输出图像)
error_message_box gr.Textbox(label错误提示, value, visibleFalse, interactiveFalse)gr.Image() 显示处理后的图片。gr.Textbox() 用于显示错误信息。
(3) 交互组件
process_button_single gr.Button(处理, elem_idbatch-process-button)gr.Button() 触发图像处理逻辑。 4. 组件交互事件绑定
事件绑定是 Gradio UI 的核心允许不同组件协同工作。本代码中mode.change() 绑定了单选模式的 状态更新
mode.change(self.update_ui_mode, inputs[mode], outputs[single_file_row, batch_file_row])当 mode 变化时调用 update_ui_mode()根据模式切换 单文件 / 批量 UI 的可见性。
事件绑定的通用格式
组件.事件(回调函数, inputs[输入组件], outputs[输出组件])5. 处理逻辑与验证
在 validate_and_process_single() 中进行 文件格式检查并调用 image_processor 进行图像处理 process_button_single.click(self.validate_and_process_single,inputs[input_image, ratio_single_bar],outputs[output_image, error_message_box, error_message_box]
)在这个process_button_single的按钮的点击事件上绑定的是self.validate_and_process_single函数inputs[input_image, ratio_single_bar]表示self.validate_and_process_single函数接收两个input一个是input_image一个是ratio_single_bar。outputs[output_image, error_message_box, error_message_box]表示self.validate_and_process_single的返回值与gradio的output_image, error_message_box, error_message_box这三个组件绑定函数的返回值同步到组件的update上面。def validate_and_process_single(self, file, ratio):allowed_extensions {.raw, .dng, .arw, .nef}if file is None:return None, 请上传一个文件。, gr.update(visibleTrue)_, ext os.path.splitext(file.name)if ext.lower() not in allowed_extensions:return None, f文件格式错误{ext}。请上传RAW格式文件。, gr.update(visibleTrue)result self.image_processor.enhance_night_image_single(file, ratio)return result, , gr.update(visibleFalse)检查 file 是否为空。确保文件格式为 RAW.dng, .arw, .nef。处理完成后返回 输出图像 和 错误信息。 6. 使用yield让组件交互事件绑定实时更新
在第5条组件的更新通过validate_and_process_single函数的return来把output的结果同步到gradio的UI组件上但是这样有个缺点只有当函数全部运行完成return结果后gradio的UI组件才能更新。对于单个文件处理这样是可以的。但是如果是批量文件处理我们想在多个文件处理过程中看到正在处理第几个文件的log信息使用return就不合适了return后函数就运行完成了。所以使用yield可以完成这个需求。
batch_process_button.click(self.image_processor.enhance_night_image_batch,inputs[input_folder, output_folder, ratio_batch_bar],outputs[error_message_box, input_image_display, output_image_display, progress_display],queueTrue
)#在这里我们把gradio的UI上的批量处理的按钮的点击事件绑定到self.image_processor.enhance_night_image_batch函数上。函数的实现为def enhance_night_image_batch(self, input_folder, output_folder, ratio):批量增强夜景图像allowed_extensions {.raw, .dng, .arw, .nef}total_files len(input_folder)for idx, cur_file in enumerate(input_folder):cur_file_path cur_fileif cur_file_path is None:yield 当前文件不存在, None, None, f进度{idx}/{total_files} 已处理continuecur_file_name, ext os.path.splitext(cur_file_path.name)if ext.lower() not in allowed_extensions:yield f文件{cur_file_path.name}不是raw文件略过处理。请使用raw文件例如.raw, .dng。, None, None, f进度{idx}/{total_files} 已处理continuetry:raw rawpy.imread(cur_file_path)im raw.postprocess(use_camera_wbTrue, half_sizeFalse, no_auto_brightTrue, output_bps16)scale_full np.expand_dims(np.float32(im / 65535.0), axis0) * 1scale_full scale_full[0, :, :, :]processed_image (scale_full * 255).astype(uint8)result self.enhance_night_image_single(cur_file_path, ratio)output_folder_path os.path.join(output_folder, cur_file_name _enhanced.png)if result.dtype ! np.uint8:result (result * 255).astype(np.uint8)Image.fromarray(result, RGB).save(output_folder_path)yield f文件{cur_file_path.name}处理完成已保存到{output_folder_path}, processed_image, result, f进度{idx}/{total_files} 已处理except Exception as e:yield f处理文件 {cur_file_path.name} 时发生错误,略过处理错误信息{e}, None, None, f进度{idx}/{total_files} 已处理continueyield 处理完成, None, None, f进度{total_files}/{total_files} 已处理
在enhance_night_image_batch函数中我们通过yield来返回各组件的值。例如yield f文件{cur_file_path.name}处理完成已保存到{output_folder_path}, processed_image, result, f进度{idx}/{total_files} 已处理这句根据
batch_process_button.click(self.image_processor.enhance_night_image_batch,inputs[input_folder, output_folder, ratio_batch_bar],outputs[error_message_box, input_image_display, output_image_display, progress_display],queueTrue
)的事件绑定可知yield的第一个返回值f文件{cur_file_path.name}处理完成已保存到{output_folder_path}对应的是error_message_box的信息更新 processed_image对应的是input_image_display的UI信息更新其他同理。通过yield就不用等函数全部运行完成后更新UI的组件了函数运行过程中就可以实现UI的更新。 7. 批量任务 进度更新
对于批量任务create_batch_file_ui() 中实现
batch_process_button.click(self.image_processor.enhance_night_image_batch,inputs[input_folder, output_folder, ratio_batch_bar],outputs[error_message_box, input_image_display, output_image_display, progress_display],queueTrue # 允许任务排队执行
)queueTrue 使任务支持排队适用于 长时间运行的任务。处理过程中progress_display 显示当前进度。 8. 启动 Gradio UI
launch() 方法用于启动 Web 界面
def launch(self):self.demo.launch(shareFalse)shareFalse 仅在本地运行设置为 True 可获取公网链接。 总结
Gradio UI 编程的 核心思想
使用 Blocks 组织 UI 结构支持多页面。使用 Tabs 划分功能模块如夜景增强、“EXIF解析”。使用 Radio Row 控制 UI 显示状态单个文件 vs 批量模式。组件交互事件绑定按钮触发处理单选框切换模式。使用 queueTrue 支持批量任务排队适用于长时间任务。使用 launch() 启动 Web 界面。
本代码展示了 完整的 Gradio UI 结构适用于 图像处理、机器学习模型部署 等应用。
