实时手机检测-通用开发者手册修改webui.py自定义检测逻辑详解1. 引言从“能用”到“好用”的跨越如果你已经体验过实时手机检测-通用模型通过那个简洁的Web界面上传一张图片点击按钮就能看到被框选出来的手机。这个过程很酷对吧但作为开发者你可能会想这个检测结果能不能直接保存下来能不能只检测特定型号的手机或者能不能把检测到的手机坐标信息实时推送到我的另一个应用里这些想法正是从“使用者”迈向“开发者”的关键一步。而实现这一切的钥匙就藏在/usr/local/bin/webui.py这个文件里。本文将带你深入这个WebUI的背后手把手教你如何修改webui.py文件来自定义检测逻辑将通用的手机检测能力无缝集成到你自己的项目流程中。无论你是想批量处理图片、开发一个手机使用监测应用还是仅仅想更深入地理解这个模型的运作方式这篇文章都将为你提供清晰的路径和实用的代码。2. 核心架构理解webui.py的工作流程在动手修改之前我们需要先理解webui.py这个文件是如何工作的。它本质上是一个桥梁连接了前端的用户界面Gradio和后端的AI模型推理ModelScope。2.1 核心组件解析整个webui.py的运作可以拆解为以下几个核心部分模型加载与初始化程序启动时从ModelScope加载预训练好的“实时手机检测-通用”模型。这个过程通常只需要执行一次。Gradio界面构建创建一个包含文件上传组件、按钮和图像显示组件的Web界面。推理函数这是整个流程的心脏。它接收用户上传的图片调用加载好的模型进行推理检测然后将检测结果带框的图片返回给前端显示。结果后处理模型输出的原始数据如边界框坐标、置信度需要被“画”到图片上生成我们最终看到的可视化结果。2.2 关键代码段定位当你打开/usr/local/bin/webui.py文件可能会看到不少代码。别担心我们只需要关注最核心的几个函数。通常它们会包含以下关键词load_model或类似函数负责加载模型。detect、inference或predict函数这是执行检测的核心函数。gr.Interface或gr.Blocks这是构建Gradio界面的代码。一个将上述函数与界面组件绑定的函数例如被gr.Interface(fn...)调用的函数。我们的自定义工作将主要围绕这个“推理函数”展开。3. 实战修改自定义你的检测逻辑现在我们进入实战环节。假设我们有一个最常见的需求不仅要在界面上显示带检测框的图片还要将检测到的每个手机的坐标和置信度信息保存到一个文本文件里。3.1 第一步备份原始文件在进行任何修改之前这是一个好习惯。cp /usr/local/bin/webui.py /usr/local/bin/webui.py.backup3.2 第二步定位并分析推理函数用你喜欢的编辑器如vim、nano或通过VS Code远程连接打开webui.py。找到那个处理图片的核心函数。它可能看起来像这样这是一个简化示例你的实际代码可能略有不同import gradio as gr from modelscope.pipelines import pipeline from modelscope.utils.constant import Tasks import cv2 import numpy as np # 1. 模型加载通常只在启动时运行一次 model pipeline(Tasks.domain_specific_object_detection, modeldamo/cv_tinynas_object-detection_damoyolo_phone) # 2. 核心推理函数 def detect_phone(input_image): 输入一张图片numpy数组或文件路径 输出带检测框的图片numpy数组 # 执行模型推理 result model(input_image) # 获取原始图片的numpy数组用于绘图 if isinstance(input_image, str): img cv2.imread(input_image) img cv2.cvtColor(img, cv2.COLOR_BGR2RGB) else: img input_image.copy() # 从结果中解析出检测框信息 # 假设result的结构是{boxes: [[x1,y1,x2,y2], ...], scores: [0.98, ...], labels: [phone, ...]} boxes result[boxes] scores result[scores] # 在图片上绘制检测框和标签 for box, score in zip(boxes, scores): x1, y1, x2, y2 map(int, box) # 转换为整数坐标 # 画矩形框 cv2.rectangle(img, (x1, y1), (x2, y2), (0, 255, 0), 2) # 添加置信度文本 label fPhone: {score:.2f} cv2.putText(img, label, (x1, y1-10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2) return img # 3. 创建Gradio界面 iface gr.Interface( fndetect_phone, # 这里绑定了我们的核心函数 inputsgr.Image(typenumpy, label上传图片), outputsgr.Image(typenumpy, label检测结果), title实时手机检测-通用, description上传包含手机的图片点击下方按钮进行检测。 ) if __name__ __main__: iface.launch(server_name0.0.0.0)3.3 第三步修改函数增加保存结果功能我们的目标是修改detect_phone函数让它多干一件事把检测结果存下来。我们将在函数内部添加文件写入的逻辑。修改后的detect_phone函数示例def detect_phone(input_image): 输入一张图片numpy数组或文件路径 输出带检测框的图片numpy数组 新增将检测结果保存到 detection_results.txt # 执行模型推理 result model(input_image) # 获取原始图片的numpy数组用于绘图 if isinstance(input_image, str): img cv2.imread(input_image) img cv2.cvtColor(img, cv2.COLOR_BGR2RGB) image_source input_image # 记录图片路径 else: img input_image.copy() image_source uploaded_image # 如果是直接上传的数组给个通用名 # 从结果中解析出检测框信息 boxes result[boxes] scores result[scores] # --- 新增部分准备保存检测结果 --- import os from datetime import datetime # 为每次检测生成一个结果文件文件名包含时间戳以避免覆盖 timestamp datetime.now().strftime(%Y%m%d_%H%M%S) result_filename fdetection_results_{timestamp}.txt with open(result_filename, w, encodingutf-8) as f: f.write(f检测时间: {datetime.now()}\n) f.write(f图片来源: {image_source}\n) f.write(f共检测到 {len(boxes)} 部手机\n) f.write(*50 \n) for i, (box, score) in enumerate(zip(boxes, scores), 1): x1, y1, x2, y2 map(int, box) width x2 - x1 height y2 - y1 # 写入格式化的结果序号坐标宽高置信度 f.write(f手机 #{i}:\n) f.write(f 左上角坐标: ({x1}, {y1})\n) f.write(f 右下角坐标: ({x2}, {y2})\n) f.write(f 宽度: {width}, 高度: {height}\n) f.write(f 置信度: {score:.4f}\n) f.write(-*30 \n) print(f[INFO] 检测结果已保存至: {os.path.abspath(result_filename)}) # --- 新增部分结束 --- # 在图片上绘制检测框和标签原有逻辑 for box, score in zip(boxes, scores): x1, y1, x2, y2 map(int, box) cv2.rectangle(img, (x1, y1), (x2, y2), (0, 255, 0), 2) label fPhone: {score:.2f} cv2.putText(img, label, (x1, y1-10), cv2.FONT_HERSHEY_SIMPLEX, 0.5, (0, 255, 0), 2) return img关键修改点说明导入模块在函数内部或文件开头添加了os和datetime模块用于处理文件和生成时间戳。生成唯一文件名使用时间戳确保每次检测生成的文件不会互相覆盖。结构化写入将检测到的每部手机的坐标、尺寸和置信度以清晰易读的格式写入文本文件。控制台提示添加print语句在服务器后台运行时也能看到文件保存的路径方便查找。3.4 第四步重启WebUI服务并测试保存webui.py文件后你需要重启Gradio服务来使修改生效。找到并终止旧进程如果你是在终端通过python webui.py启动的可以按CtrlC终止它。重新启动在终端中再次运行cd /usr/local/bin python webui.py进行测试打开浏览器访问WebUI地址上传一张图片进行检测。验证结果检测完成后检查运行webui.py的终端你应该能看到类似[INFO] 检测结果已保存至: /some/path/detection_results_20231027_143022.txt的提示。在对应的目录下你就能找到这个文本文件里面记录了详细的检测数据。4. 更多自定义思路拓展成功保存结果只是第一步。webui.py的灵活性远不止于此。你可以根据需求对推理函数进行更深入的定制4.1 修改检测阈值模型通常会返回一个置信度分数。默认的界面可能显示所有置信度大于0.5的检测框。你可以提高这个标准只显示你确信的结果。在绘制循环前添加过滤confidence_threshold 0.7 # 将阈值从默认的0.5提高到0.7 filtered_results [(box, score) for box, score in zip(boxes, scores) if score confidence_threshold] # 然后使用 filtered_results 进行绘图和保存 for box, score in filtered_results: # ... 绘图和保存逻辑4.2 添加特定品牌或状态过滤如果你想做更细粒度的分析比如只检测“正在使用”屏幕亮起的手机这需要更复杂的后处理逻辑。虽然基础模型只检测“手机”这个类别但你可以结合其他信息如颜色、形状、屏幕区域亮度分析在detect_phone函数内进行二次判断。4.3 集成到其他系统detect_phone函数本质上是一个接收图片、返回信息的Python函数。你可以轻松地将其从Gradio界面中“剥离”出来作为一个独立的模块供其他Python脚本调用。将模型加载和函数定义部分移到一个单独的模块文件如phone_detector.py中。在你的主业务代码中导入这个模块然后直接调用detect_phone(your_image, save_resultTrue)这样的函数获取检测结果进而触发后续的业务逻辑如发送警报、更新数据库等。4.4 修改可视化样式你觉得绿色的框不好看想换成红色或者加上更醒目的标签 修改cv2.rectangle和cv2.putText的参数即可(0, 255, 0)是BGR格式的绿色改成(0, 0, 255)就是红色。修改最后一个参数如从2改成3可以调整框线的粗细。修改cv2.putText的参数可以调整字体大小、样式等。5. 总结通过修改/usr/local/bin/webui.py文件我们成功地将一个开箱即用的演示工具改造成了一个能输出结构化数据、满足特定需求的开发组件。这个过程的核心在于理解“推理函数”这个枢纽并敢于在其中添加自己的业务逻辑。回顾一下关键步骤理解架构厘清模型加载、界面构建、推理函数和后处理之间的关系。定位核心在webui.py中找到执行检测的那个核心函数。大胆修改在核心函数中插入你的自定义代码如文件I/O、条件过滤。测试验证重启服务确保修改按预期工作。这种模式适用于绝大多数基于Gradio和ModelScope的AI模型WebUI。掌握了这个方法你就掌握了将AI能力快速工程化、嵌入到自己工作流中的关键技能。接下来就请发挥你的创意用这个强大的手机检测模型去构建更酷的应用吧。获取更多AI镜像想探索更多AI镜像和应用场景访问 CSDN星图镜像广场提供丰富的预置镜像覆盖大模型推理、图像生成、视频生成、模型微调等多个领域支持一键部署。