EagleEye实操手册：EagleEye前端Streamlit源码修改与自定义UI扩展指南
1. 为什么需要修改EagleEye的Streamlit前端？
你刚跑通EagleEye，打开浏览器看到那个简洁的检测界面——上传图片、滑动阈值、结果实时渲染，一切都很顺。但很快你就发现：
- 想把公司Logo加在左上角，却找不到入口；
- 检测框颜色固定为红色，客户要求改成蓝色系；
- 侧边栏只有“置信度”一个参数，而你实际还需要调节NMS阈值、是否启用后处理开关；
- 希望在结果图下方直接显示检测目标数量统计，而不是只靠肉眼数框。
这些都不是模型能力问题，而是前端交互层的表达限制。EagleEye默认提供的Streamlit界面是开箱即用的“最小可行UI”，它服务于通用演示，而非你的具体业务场景。
本文不讲YOLO原理，不调TinyNAS超参，只聚焦一件事：如何安全、可维护、不破坏原有逻辑地，修改EagleEye的Streamlit源码，实现真正属于你自己的UI定制。所有操作均基于官方开源结构，无需重写后端，不改动模型推理核心，改完即可热重载生效。
2. 理解EagleEye的Streamlit项目结构
2.1 找到真正的入口文件
EagleEye的Streamlit应用并非单个.py文件，而是一个模块化组织的Python包。进入你克隆或部署的项目根目录后，关键路径如下：
eagleeye/ ├── app/ ← Streamlit主应用目录（重点！） │ ├── __init__.py │ ├── main.py ← Streamlit入口文件（浏览器访问的起点） │ ├── ui/ ← UI组件封装目录（核心改造区） │ │ ├── __init__.py │ │ ├── layout.py ← 页面布局、侧边栏、主区域划分 │ │ ├── components.py ← 可复用UI元素：上传区、结果显示区、参数控件 │ │ └── renderer.py ← 结果图绘制逻辑（含bbox渲染、文字标注） │ └── core/ ← 与后端模型交互的胶水层 │ ├── __init__.py │ └── detector.py ← 封装DAMO-YOLO TinyNAS推理调用 ├── models/ │ └── damo_yolo_tinynas/ ← 模型权重与配置 └── requirements.txt关键认知：
app/main.py只是调度器，真正决定“长什么样”的是app/ui/下的三个文件。修改它们，就能控制整个UI的骨架、皮肤和行为。
2.2 main.py：轻量级调度，不碰逻辑
打开app/main.py，你会看到极简代码：
import streamlit as st from app.ui.layout import render_layout st.set_page_config( page_title="EagleEye - DAMO-YOLO TinyNAS", layout="wide", initial_sidebar_state="expanded" ) render_layout()它只做两件事：设置页面基础配置、调用render_layout()。这意味着——
你可以放心修改layout.py，无需动main.py；
❌不要在这里写业务逻辑或渲染代码，否则后续升级会覆盖。
3. 修改UI布局：从“标准模板”到“专属大屏”
3.1 自定义顶部标题栏（加Logo、改文案）
默认标题是Streamlit自动生成的st.title("EagleEye")。要替换为带Logo的企业级标题，修改app/ui/layout.py中的render_layout()函数：
# app/ui/layout.py import streamlit as st from app.ui.components import render_upload_area, render_result_display, render_sidebar_controls def render_layout(): # === 新增：自定义顶部横幅 === col1, col2 = st.columns([4, 1]) with col1: st.markdown("### 🦅 EagleEye 智能视觉分析平台") st.caption("基于达摩院DAMO-YOLO TinyNAS | 毫秒级工业检测引擎") with col2: # 本地Logo路径（需提前放入static/logo.png） st.image("static/logo.png", width=120) # === 原有主体内容保持不变 === st.markdown("---") col_left, col_right = st.columns([1, 1]) with col_left: render_upload_area() with col_right: render_result_display() # 侧边栏保持在页面最右侧（Streamlit默认行为） render_sidebar_controls()实操提示：
- 在项目根目录新建
static/文件夹，放入logo.png（推荐尺寸200×60px）；st.image()支持URL或本地路径，本地路径会自动映射为/static/；- 使用
st.markdown("### ...")替代st.title()，避免字体过大破坏布局。
3.2 重构侧边栏：从单滑块到多参数控制面板
原版侧边栏仅有一个置信度滑块。现在我们扩展为专业级参数面板，支持动态控制三项关键参数：
# app/ui/components.py import streamlit as st def render_sidebar_controls(): st.sidebar.markdown("## ⚙ 检测参数配置") # === 1. 置信度阈值（原功能保留）=== conf_threshold = st.sidebar.slider( " 置信度阈值 (Confidence)", min_value=0.0, max_value=1.0, value=0.5, step=0.05, help="高于此值的检测框才会显示。值越高越严格，越少误报。" ) # === 2. NMS阈值（新增）=== nms_threshold = st.sidebar.slider( "🧩 NMS抑制阈值 (IoU)", min_value=0.1, max_value=0.9, value=0.45, step=0.05, help="重叠框合并的相似度阈值。值越低，保留更多相邻框。" ) # === 3. 后处理开关（新增）=== enable_postprocess = st.sidebar.checkbox( "🔧 启用后处理增强", value=True, help="开启边缘平滑、小目标放大等优化，提升视觉清晰度。" ) # === 将参数打包为字典，供detector调用 === return { "conf_threshold": conf_threshold, "nms_threshold": nms_threshold, "enable_postprocess": enable_postprocess }关键设计：
- 所有参数控件返回一个字典，
render_layout()中调用时直接解包传入检测器；help=参数提供悬停提示，降低用户学习成本；- 标签使用emoji+中文，直观易懂（如🔧代表“设置”）。
4. 扩展结果渲染：不止于画框，还要懂业务
4.1 在结果图下方添加结构化统计信息
用户不只想看图，更想快速获取数字结论。我们在render_result_display()后追加统计模块：
# app/ui/components.py import cv2 import numpy as np from app.core.detector import run_detection def render_result_display(): # ... 原有图像显示逻辑（略）... # === 新增：检测结果统计卡片 === if st.session_state.get("detection_result"): result = st.session_state.detection_result boxes = result["boxes"] labels = result["labels"] scores = result["scores"] st.markdown("### 检测结果概览") col1, col2, col3 = st.columns(3) with col1: st.metric("总目标数", len(boxes)) with col2: st.metric("最高置信度", f"{max(scores):.2%}") with col3: # 统计各类别数量（示例：person/car/bike） from collections import Counter class_counts = Counter(labels) top_class = class_counts.most_common(1)[0] if class_counts else ("N/A", 0) st.metric("最多类别", f"{top_class[0]} ({top_class[1]})") # === 新增：类别分布条形图 === if len(class_counts) > 0: st.markdown("#### 类别分布") st.bar_chart(class_counts)效果：
- 三张实时更新的指标卡片，一目了然；
- 条形图直观展示各目标类型占比；
- 所有数据来自
detector.py返回的原始结果，零额外计算。
4.2 自定义检测框样式与标签位置
默认的红色框+白色文字可能不符合企业VI。修改app/ui/renderer.py中的绘制逻辑：
# app/ui/renderer.py import cv2 import numpy as np def draw_detections(image, boxes, labels, scores, conf_threshold): # 定义企业色系（示例：科技蓝 #2563EB） COLORS = { "person": (37, 99, 235), # BGR格式 "car": (34, 197, 94), "bike": (139, 92, 246), "default": (59, 130, 246) } font = cv2.FONT_HERSHEY_SIMPLEX for i, (box, label, score) in enumerate(zip(boxes, labels, scores)): if score < conf_threshold: continue x1, y1, x2, y2 = map(int, box) color = COLORS.get(label, COLORS["default"]) # 绘制加粗边框（厚度=3） cv2.rectangle(image, (x1, y1), (x2, y2), color, 3) # 绘制半透明背景标签 text = f"{label} {score:.2%}" (w, h), _ = cv2.getTextSize(text, font, 0.6, 1) cv2.rectangle(image, (x1, y1 - h - 10), (x1 + w, y1), color, -1) cv2.putText(image, text, (x1, y1 - 5), font, 0.6, (255, 255, 255), 1) return image优势：
- 颜色按类别区分，便于快速识别；
- 标签背景半透明，文字始终清晰；
- 所有样式集中管理，一处修改全局生效。
5. 进阶技巧：热重载调试与生产化建议
5.1 开发时启用Streamlit热重载
每次改完代码都要Ctrl+C再streamlit run app/main.py？太慢。启动时加--server.port=8501 --server.fileWatcherType=poll：
streamlit run app/main.py --server.port=8501 --server.fileWatcherType=poll--server.fileWatcherType=poll：强制轮询检测文件变化（对Docker挂载卷更稳定）；- 浏览器访问
http://localhost:8501，保存.py文件后，Streamlit自动刷新，无需重启服务。
5.2 生产环境UI加固建议
- 禁用开发者工具：在
app/main.py顶部添加：st.markdown(""" <style> #MainMenu {visibility: hidden;} footer {visibility: hidden;} </style> """, unsafe_allow_html=True) - 静态资源CDN化：将
static/文件夹托管到Nginx，通过/static/反向代理，减轻Streamlit服务压力； - 参数持久化：用
st.session_state保存用户最后选择的参数，刷新页面不丢失； - 错误友好化：在
components.py中所有st.image()前加st.empty().caption("加载中...")，避免白屏等待。
6. 总结：你已掌握EagleEye UI定制的核心方法论
本文没有教你“如何写Streamlit”，而是带你走通一条真实工程落地路径：
定位准确：明确app/ui/是唯一需要修改的目录，避开模型与配置陷阱；
分层改造：布局（layout.py）→ 控件（components.py）→ 渲染（renderer.py），层层解耦；
业务驱动：所有修改都源于真实需求——加Logo、调多参数、看统计数据、换配色；
安全可控：不侵入main.py和core/，升级时只需合并ui/目录，冲突极少；
即改即用：热重载支持，改一行代码，浏览器立刻看到效果。
EagleEye的价值，从来不只是“能检测”，而是“能为你所用”。当你能把毫秒级的TinyNAS引擎，包裹进符合企业VI、匹配业务流程、承载决策数据的UI中，它才真正从一个技术Demo，蜕变为生产力工具。
获取更多AI镜像
想探索更多AI镜像和应用场景？访问 CSDN星图镜像广场，提供丰富的预置镜像，覆盖大模型推理、图像生成、视频生成、模型微调等多个领域，支持一键部署。
