YOLOFuse与Vue前端联调方案：构建Web可视化检测平台-深圳市維司達科技有限公司

YOLOFuse与Vue前端联调方案：构建Web可视化检测平台

在智能安防、无人巡检和夜间监控等实际场景中，单一可见光摄像头常常“看不清”——低光照下细节丢失，烟雾遮挡中目标模糊。而红外图像虽能穿透黑暗，却缺乏纹理信息，难以精准识别物体类别。如何让AI“既看得见热源，又认得清轮廓”？多模态融合成为破局关键。

YOLOFuse 正是为解决这一问题而生的双流目标检测框架。它基于 Ultralytics YOLO 架构，原生支持 RGB 与红外（IR）图像的协同推理，并通过灵活的融合策略，在保持实时性的同时显著提升复杂环境下的检测鲁棒性。但技术价值要真正落地，还需要一个直观易用的交互入口。于是，我们选择 Vue 搭建 Web 可视化平台，将命令行中的模型能力转化为人人可用的在线服务。

多模态为何更可靠？从物理特性说起

可见光成像依赖环境光照反射，当光线不足或存在遮蔽时，图像信噪比急剧下降；而红外成像捕捉的是物体自身热辐射，不受光照影响，能在完全黑暗环境中清晰呈现温差轮廓。两者互补性强，天然适合融合使用。

YOLOFuse 的设计核心正是围绕这种互补性展开。它不是简单地把两张图拼在一起送入网络，而是根据任务需求和硬件条件，提供多种融合层级的选择：

早期融合：将 RGB 和 IR 图像通道堆叠后输入同一主干网络。实现最简单，但可能因模态差异大导致特征学习困难。
中期融合：各自提取浅层特征后进行加权、拼接或注意力机制融合。兼顾效率与性能，是推荐的默认方案。
决策级融合：两个分支独立预测，最后对边界框和置信度做非极大值抑制（NMS）合并。灵活性高，适合异构传感器数据不同步的场景。

以 LLVIP 数据集测试为例，采用“中期特征融合”的 YOLOFuse 在 mAP@50 上可达 94.7%，相比单模态 YOLOv8 提升超过 12 个百分点，尤其在行人、车辆等关键目标的漏检率上大幅降低。

更重要的是，YOLOFuse 延续了 Ultralytics 生态的简洁风格。训练接口兼容.yaml配置文件，推理支持.pt权重一键加载，甚至连标签标注都做了优化：只需为 RGB 图像准备 YOLO 格式的 txt 文件，系统会自动根据文件名匹配对应的 IR 图像，无需额外标注。

# 示例：双流推理调用（逻辑抽象） model = YOLO('best_fuse_mid.pt') results = model.predict(rgb_img, ir_image=ir_img, fuse_mode='mid')

这段代码看似普通，背后却隐藏着复杂的双路数据流管理。实际上，标准ultralytics并不直接支持双输入，因此需要自定义 Dataloader 和 Model 结构来处理成对图像。幸运的是，YOLOFuse 已封装好这些细节，开发者只需关注业务逻辑即可。

如何让非技术人员也能用上AI模型？

很多团队面临这样的困境：算法工程师跑通了模型，结果却只能在终端里用python infer.py查看；产品经理想试效果，得先装环境、配CUDA、找测试图……这严重阻碍了快速验证与协作迭代。

我们的解法是：把模型变成一个可访问的 Web 服务。

前端采用 Vue 3 + Element Plus 快速搭建响应式界面，用户只需拖拽上传一对图像（如001_rgb.jpg,001_ir.jpg），点击“开始检测”，几秒后就能看到带框的融合结果图。整个过程无需任何命令行操作，即便是零技术背景的用户也能轻松上手。

前后端通信采用 RESTful API 设计。Vue 通过 Axios 发起 POST 请求，携带 FormData 格式的图像数据到后端/api/detect接口。后端通常由 Flask 或 FastAPI 封装，负责接收文件、调用infer_dual.py脚本并返回结果路径。

<template> <el-upload action="#" :auto-upload="false" @change="handleFileSelect"> <el-button>Select Images</el-button> </el-upload> <el-button @click="submitDetection" :loading="loading">Run Detection</el-button> <img v-if="resultUrl" :src="resultUrl" alt="Result" /> </template> <script setup> import { ref } from 'vue' import axios from 'axios' const rgbFile = ref(null) const irFile = ref(null) const loading = ref(false) const resultUrl = ref('') const handleFileSelect = (file) => { if (file.name.includes('_rgb')) rgbFile.value = file.raw else if (file.name.includes('_ir')) irFile.value = file.raw } const submitDetection = async () => { if (!rgbFile.value || !irFile.value) { alert("Please upload both RGB and IR images.") return } const formData = new FormData() formData.append('rgb_image', rgbFile.value) formData.append('ir_image', irFile.value) loading.value = true try { const res = await axios.post('/api/detect', formData, { headers: { 'Content-Type': 'multipart/form-data' } }) resultUrl.value = `/results/${res.data.image_path}` } catch (err) { console.error(err) alert("Detection failed.") } finally { loading.value = false } } </script>

这个组件虽然简短，却涵盖了前端集成的关键要素：
- 利用命名规则自动区分模态；
- 使用FormData支持二进制图像上传；
- 加载状态防止重复提交；
- 错误捕获保障用户体验。

生产环境中还可进一步增强：添加文件类型校验（仅允许.jpg/.png）、前端压缩大图避免传输延迟、支持 ZIP 批量上传等。

系统架构如何协同工作？

整体采用典型的前后端分离架构，部署结构清晰：

+------------------+ +---------------------+ | Vue Frontend |<----->| Backend API Server | | (http://localhost:8080) | (Flask/FastAPI) | +------------------+ +----------+----------+ | | HTTP v +---------+----------+ | YOLOFuse Inference | | (Python Script) | | /root/YOLOFuse | +--------------------+

具体流程如下：
1. 用户访问前端页面，上传一对图像；
2. Vue 发送请求至后端 API；
3. 后端保存图像至临时目录，调用python infer_dual.py --source temp/;
4. 推理完成后，输出结果图至/runs/predict/exp/目录；
5. 后端返回 JSON 响应，包含图片相对路径；
6. 前端通过静态资源代理（如 Nginx）直接渲染图像。

其中最关键的环节之一是路径映射一致性。为了让前端能正确显示后端生成的结果图，必须配置 Web 服务器暴露指定目录。例如使用 Nginx 添加静态代理：

location /results/ { alias /root/YOLOFuse/runs/predict/exp/; }

这样前端就可以通过/results/exp/001_det.png直接访问检测结果，无需再走一次后端接口。

此外，还需考虑若干工程细节：
-安全性：限制上传类型，防止脚本注入；
-性能优化：对超大图像进行缩放处理，避免 GPU 内存溢出；
-日志追踪：记录每次请求 ID、时间戳、输入输出路径，便于调试回溯；
-模型切换：支持前端传参选择不同融合模式（如fuse_mode=late），动态加载对应权重。

实际应用中的挑战与应对

尽管技术链路清晰，但在真实项目中仍会遇到不少“坑”。

比如，有团队反馈：“为什么我上传的图片前端显示 404？” 经排查发现，是因为容器内路径与宿主机挂载不一致，导致 Nginx 实际找不到文件。解决方案是统一使用 Docker Volume 映射/results目录，并在启动时确保权限可读。

另一个常见问题是推理耗时过长引发超时。对于视频序列或多张批量处理任务，同步等待不可取。此时应引入异步任务队列（如 Celery + Redis），前端提交后返回任务 ID，通过轮询或 WebSocket 获取进度更新。

还有团队希望复用该平台做训练监控。虽然当前主要聚焦于推理可视化，但完全可以扩展功能：接入 TensorBoard 日志，或利用 ECharts 动态绘制 loss 曲线、mAP 变化趋势，实现训练全过程可观测。

为什么说这是AI工程化的关键一步？

从科研角度看，YOLOFuse 本身的技术创新值得肯定——它证明了轻量级中期融合即可取得优异性能，参数增量仅 2.61MB，非常适合边缘设备部署。但从产品视角看，真正决定其能否被广泛采纳的，反而是那个“不起眼”的 Vue 前端。

因为只有当模型能力被包装成稳定、易用、可共享的服务时，它才真正具备工程价值。研究人员可以用它快速验证新数据集上的表现；产品经理可以拿去给客户做演示原型；教学老师能将其作为实验课案例，让学生亲手体验多模态检测的魅力。

更进一步，这种“算法 + 接口 + 界面”的三位一体模式，构成了现代 AI 系统的标准交付形态。我们不再交付一段代码或一个模型文件，而是交付一个完整的交互式平台。而这，也正是 MLOps 思想的核心体现：让AI生命周期中的每个角色都能高效参与。

写在最后

YOLOFuse 与 Vue 的结合，不只是两个工具的简单拼接，而是一次从“能跑”到“好用”的跃迁。它告诉我们：优秀的AI系统不仅要聪明，更要友好。

未来，我们可以在此基础上继续演进：加入用户管理系统实现权限隔离，支持 ONNX 导出用于跨平台部署，甚至集成 Diffusion 模型生成模拟夜景数据用于训练增强。这条路没有终点，但每一步都在拉近算法与现实的距离。

正如一位工程师所说：“最好的模型，是别人愿意去用的那个。”

YOLOFuse与Vue前端联调方案：构建Web可视化检测平台