品牌 Logo 使用规范（Brand Guidelines）模板实战：用 logo-design-skill 为小品牌编写一页式指南
2026/10/15 20:18:17
摘要
本项目旨在设计并实现一个基于先进深度学习技术与现代Web框架的自动化血液细胞检测与智能分析系统。系统核心集成了YOLO（You Only Look Once）系列目标检测模型的最新演进版本——YOLOv8、YOLOv10、YOLOv11与YOLOv12，构建了一个高精度、高效率的血小板（Platelets）、红细胞（RBC）和白细胞（WBC）三分类检测模型。该模型在特定领域数据集（共包含训练集765张、验证集73张、测试集36张图像）上进行了充分的训练与优化，能够精准定位并识别显微镜下的各类血细胞。
系统后端采用SpringBoot框架构建，实现了高性能的RESTful API服务，确保业务逻辑的清晰与稳定。前端则采用现代化的Web技术栈，构建了直观友好的交互界面，实现了真正意义上的前后端分离架构，提升了系统的可维护性与可扩展性。数据库选用MySQL，用于持久化存储用户信息、模型配置以及海量的检测记录与结果。
本系统的创新性与实用性体现在以下几个方面：第一，提供了多模型切换功能，允许用户根据不同的精度与速度需求，灵活选择最优的YOLO版本进行推理。第二，深度融合了DeepSeek大型语言模型的智能分析能力，在检测完成后，可对细胞分布、数量统计等结果生成专业的、易于理解的文本描述与健康建议，极大提升了系统的智能化水平。第三，系统功能完备，不仅支持图片、视频文件及摄像头实时流的多样化检测模式，还配备了完善的数据管理后台，包括用户登录注册、个人中心、管理员对用户与检测记录的管理等模块。第四，实现了全面的信息与数据可视化，将抽象的检测数据以图表等形式直观呈现，辅助用户进行深度分析。
综上所述，本系统不仅是一个先进的目标检测技术实践案例，更是一个集成了AI智能分析、现代化软件工程思想和实用医疗辅助功能的综合性解决方案，为临床检验、医学研究和健康筛查提供了高效、智能、可靠的数字化工具。
目录
摘要
引言
1. 研究背景与意义
2. 研究目标与内容
3. 项目主要贡献
二、 系统核心特性概述
功能模块
登录注册模块
可视化模块
图像检测模块
视频检测模块
实时检测模块
图片识别记录管理
视频识别记录管理
摄像头识别记录管理
用户管理模块
数据管理模块（MySQL表设计）
模型训练结果
YOLO概述
YOLOv8
YOLOv10
YOLOv11
YOLOv12
前端代码展示
后端代码展示
项目安装教程
详细功能展示视频
红细胞、白细胞、血小板识别检测系统（YOLOv8/YOLOv10/YOLOv11/YOLOv12+深度学习+web界面+计算机视觉+DeepSeek智能分析）_哔哩哔哩_bilibili
红细胞、白细胞、血小板识别检测系统（YOLOv8/YOLOv10/YOLOv11/YOLOv12+深度学习+web界面+计算机视觉+DeepSeek智能分析）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1uc6TBTECa/?spm_id_from=333.999.0.0&vd_source=549d0b4e2b8999929a61a037fcce3b0f
https://www.bilibili.com/video/BV1uc6TBTECa/
引言
1. 研究背景与意义
在临床医学诊断和基础生命科学研究中，血液细胞分析是一项至关重要的工作。对血液中血小板、红细胞和白细胞的数量、形态及分布进行精确检测，是诊断贫血、感染、炎症、白血病等多种疾病的关键依据。传统的血细胞分析主要依赖人工显微镜观察，该过程耗时费力、主观性强且对检验人员的经验要求极高，易产生疲劳误差。随着计算机视觉和深度学习技术的飞速发展，自动化、智能化的医学图像分析已成为必然趋势，它能够显著提升检测效率、标准化分析流程并降低人工成本。
目标检测算法，特别是YOLO系列模型，因其在速度与精度上的卓越平衡，已成为工业界和学术界实现实时对象检测的首选。从YOLOv8到近期推出的YOLOv12，每一代都在网络架构、训练策略和损失函数上进行了创新优化，为高精度的显微图像细胞检测提供了强大的算法基础。
然而，一个完整的、可落地的辅助诊断系统，不仅需要强大的核心算法模型，还需要易用的交互界面、稳定的数据服务以及智能化的结果解读能力。当前许多研究仅停留在模型训练与测试阶段，未能形成一个可供终端用户（如医生、检验师）直接使用的集成化软件产品。
2. 研究目标与内容
针对上述背景与挑战，本项目旨在开发一个集“前沿算法、智能分析、工程实践、用户友好”于一体的血液细胞检测全栈系统。具体研究内容包括：
核心检测模型构建与集成：收集并标注专业血细胞图像数据集，并基于此数据集系统性地训练、评估和比较YOLOv8至YOLOv12系列模型，筛选出最优权重，并将其集成至后端服务中，提供灵活的模型切换机制。
智能分析功能增强：突破传统检测系统仅输出边界框和标签的局限，引入DeepSeek大型语言模型。系统可将检测结果（如各类细胞数量、密度、位置分布）组织成结构化数据，由DeepSeek模型自动生成贴合医学语境的分析报告和潜在提示，实现检测结果的“智慧解读”。
现代化Web系统开发：采用SpringBoot构建稳健的后端业务逻辑与API接口，采用前后端分离架构开发响应式前端界面。系统需提供完整的用户管理体系（注册、登录、权限控制）、多模态检测入口（图片上传、视频处理、实时摄像头）以及全面的历史记录管理功能。
数据管理与可视化：设计合理的数据库 schema，持久化保存所有操作记录。开发数据可视化模块，将检测统计结果以折线图、柱状图、饼图等形式直观展示，支持用户进行趋势分析和数据导出。
3. 项目主要贡献
本项目的核心贡献在于：
技术集成创新：成功将YOLO系列最新目标检测模型、SpringBoot企业级后端框架以及DeepSeek大语言模型智能分析能力三者深度融合，构建了一个技术栈先进、功能完整的示范性应用。
功能全面实用：系统覆盖了从用户交互、多格式输入检测、智能报告生成到数据管理分析的完整业务流程，是一个“开箱即用”的软件产品，而非单纯的算法演示。
架构设计优良：前后端分离的架构设计使得系统各模块职责清晰，便于后续的功能扩展（如集成新模型、增加新的检测类别）和维护升级。
二、 系统核心特性概述
功能模块
✅ 用户登录注册：支持密码检测，保存到MySQL数据库。
✅ 支持四种YOLO模型切换，YOLOv8、YOLOv10、YOLOv11、YOLOv12。
✅ 信息可视化，数据可视化。
✅ 图片检测支持AI分析功能，deepseek
✅ 支持图像检测、视频检测和摄像头实时检测，检测结果保存到MySQL数据库。
✅ 图片识别记录管理、视频识别记录管理和摄像头识别记录管理。
✅ 用户管理模块，管理员可以对用户进行增删改查。
✅ 个人中心，可以修改自己的信息，密码姓名头像等等。
登录注册模块
可视化模块
图像检测模块
YOLO模型集成(v8/v10/v11/v12)
DeepSeek多模态分析
支持格式：JPG/PNG/MP4/RTSP
视频检测模块
实时检测模块
图片识别记录管理
视频识别记录管理
摄像头识别记录管理
用户管理模块
数据管理模块（MySQL表设计）
users- 用户信息表
imgrecords- 图片检测记录表
videorecords- 视频检测记录表
camerarecords- 摄像头检测记录表
模型训练结果
#coding:utf-8 #根据实际情况更换模型 # yolon.yaml (nano)：轻量化模型，适合嵌入式设备，速度快但精度略低。 # yolos.yaml (small)：小模型，适合实时任务。 # yolom.yaml (medium)：中等大小模型，兼顾速度和精度。 # yolob.yaml (base)：基本版模型，适合大部分应用场景。 # yolol.yaml (large)：大型模型，适合对精度要求高的任务。 from ultralytics import YOLO model_path = 'pt/yolo12s.pt' data_path = 'data.yaml' if __name__ == '__main__': model = YOLO(model_path) results = model.train(data=data_path, epochs=500, batch=64, device='0', workers=0, project='runs', name='exp', )YOLO概述
YOLOv8
YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布，在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步，YOLOv8 引入了新功能和优化，使其成为各种应用中目标检测任务的理想选择。
YOLOv8 的主要特性
- 高级骨干和颈部架构：YOLOv8 采用最先进的骨干和颈部架构，从而改进了特征提取和目标检测性能。
- 无锚点分离式 Ultralytics Head：YOLOv8 采用无锚点分离式 Ultralytics head，与基于锚点的方法相比，这有助于提高准确性并提高检测效率。
- 优化的准确性-速度权衡：YOLOv8 专注于在准确性和速度之间保持最佳平衡，适用于各种应用领域中的实时对象检测任务。
- 丰富的预训练模型:YOLOv8提供了一系列预训练模型，以满足各种任务和性能要求，使您更容易为特定用例找到合适的模型。
YOLOv10
YOLOv10 由 清华大学研究人员基于 Ultralytics Python构建，引入了一种新的实时目标检测方法，解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件，YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明，它在多个模型尺度上都具有卓越的精度-延迟权衡。
概述
实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而，对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。
架构
YOLOv10 的架构建立在之前 YOLO 模型优势的基础上，同时引入了几项关键创新。该模型架构由以下组件组成：
- 骨干网络：负责特征提取，YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)，以改善梯度流并减少计算冗余。
- Neck：Neck 的设计目的是聚合来自不同尺度的特征，并将它们传递到 Head。它包括 PAN（路径聚合网络）层，用于有效的多尺度特征融合。
- One-to-Many Head：在训练期间为每个对象生成多个预测，以提供丰富的监督信号并提高学习准确性。
- 一对一头部：在推理时为每个对象生成一个最佳预测，以消除对NMS的需求，从而降低延迟并提高效率。
主要功能
- 免NMS训练：利用一致的双重分配来消除对NMS的需求，从而降低推理延迟。
- 整体模型设计：从效率和准确性的角度对各种组件进行全面优化，包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。
- 增强的模型功能: 结合了大内核卷积和部分自注意力模块，以提高性能，而无需显着的计算成本。
YOLOv11
YOLO11 是 Ultralytics YOLO 系列实时目标检测器的最新迭代版本，它以前沿的精度、速度和效率重新定义了可能性。YOLO11 在之前 YOLO 版本的显著进步基础上，在架构和训练方法上进行了重大改进，使其成为各种计算机视觉任务的多功能选择。
主要功能
- 增强的特征提取:YOLO11 采用改进的 backbone 和 neck 架构，从而增强了特征提取能力，以实现更精确的目标检测和复杂的任务性能。
- 优化效率和速度：YOLO11 引入了改进的架构设计和优化的训练流程，从而提供更快的处理速度，并在精度和性能之间保持最佳平衡。
- 更高精度，更少参数：随着模型设计的进步，YOLO11m 在 COCO 数据集上实现了更高的 平均精度均值(mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
- 跨环境的适应性：YOLO11 可以无缝部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统，从而确保最大的灵活性。
- 广泛支持的任务范围：无论是目标检测、实例分割、图像分类、姿势估计还是旋转框检测 (OBB)，YOLO11 都旨在满足各种计算机视觉挑战。
Ultralytics YOLO11 在其前代产品的基础上进行了多项重大改进。主要改进包括：
- 增强的特征提取：YOLO11 采用了改进的骨干网络和颈部架构，增强了特征提取能力，从而实现更精确的目标检测。
- 优化的效率和速度：改进的架构设计和优化的训练流程提供了更快的处理速度，同时保持了准确性和性能之间的平衡。
- 更高精度，更少参数：YOLO11m 在 COCO 数据集上实现了更高的平均 精度均值 (mAP)，同时比 YOLOv8m 少用 22% 的参数，在不牺牲精度的情况下提高了计算效率。
- 跨环境的适应性：YOLO11 可以部署在各种环境中，包括边缘设备、云平台和支持 NVIDIA GPU 的系统。
- 广泛支持的任务范围：YOLO11 支持各种计算机视觉任务，例如目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
YOLOv12
YOLO12引入了一种以注意力为中心的架构，它不同于之前YOLO模型中使用的传统基于CNN的方法，但仍保持了许多应用所需的实时推理速度。该模型通过在注意力机制和整体网络架构方面的新颖方法创新，实现了最先进的目标检测精度，同时保持了实时性能。尽管有这些优势，YOLO12仍然是一个社区驱动的版本，由于其沉重的注意力模块，可能表现出训练不稳定、内存消耗增加和CPU吞吐量较慢的问题，因此Ultralytics仍然建议将YOLO11用于大多数生产工作负载。
主要功能
- 区域注意力机制: 一种新的自注意力方法，可以有效地处理大型感受野。它将 特征图 分成l个大小相等的区域（默认为 4 个），水平或垂直，避免复杂的运算并保持较大的有效感受野。与标准自注意力相比，这大大降低了计算成本。
- 残差高效层聚合网络（R-ELAN）：一种基于 ELAN 的改进的特征聚合模块，旨在解决优化挑战，尤其是在更大规模的以注意力为中心的模型中。R-ELAN 引入：
- 具有缩放的块级残差连接（类似于层缩放）。
- 一种重新设计的特征聚合方法，创建了一个类似瓶颈的结构。
- 优化的注意力机制架构：YOLO12 精简了标准注意力机制，以提高效率并与 YOLO 框架兼容。这包括：
- 使用 FlashAttention 来最大限度地减少内存访问开销。
- 移除位置编码，以获得更简洁、更快速的模型。
- 调整 MLP 比率（从典型的 4 调整到 1.2 或 2），以更好地平衡注意力和前馈层之间的计算。
- 减少堆叠块的深度以改进优化。
- 利用卷积运算（在适当的情况下）以提高其计算效率。
- 在注意力机制中添加一个7x7可分离卷积（“位置感知器”），以隐式地编码位置信息。
- 全面的任务支持: YOLO12 支持一系列核心计算机视觉任务：目标检测、实例分割、图像分类、姿势估计和旋转框检测 (OBB)。
- 增强的效率: 与许多先前的模型相比，以更少的参数实现了更高的准确率，从而证明了速度和准确率之间更好的平衡。
- 灵活部署: 专为跨各种平台部署而设计，从边缘设备到云基础设施。
主要改进
增强的 特征提取:
- 区域注意力: 有效处理大型感受野，降低计算成本。
- 优化平衡：改进了注意力和前馈网络计算之间的平衡。
- R-ELAN：使用 R-ELAN 架构增强特征聚合。
优化创新：
- 残差连接：引入具有缩放的残差连接以稳定训练，尤其是在较大的模型中。
- 改进的特征集成：在 R-ELAN 中实现了一种改进的特征集成方法。
- FlashAttention: 整合 FlashAttention 以减少内存访问开销。
架构效率:
- 减少参数：与之前的许多模型相比，在保持或提高准确性的同时，实现了更低的参数计数。
- 简化的注意力机制：使用简化的注意力实现，避免了位置编码。
- 优化的 MLP 比率：调整 MLP 比率以更有效地分配计算资源。
前端代码展示
登录界面一小部分代码：
<template> <div class="login-container"> <!-- 血液细胞背景 --> <div class="blood-cell-background"> <!-- 红细胞 --> <div class="red-blood-cells"> <div class="rbc" v-for="n in 25" :key="`rbc-${n}`" :style="getRBCStyle(n)"> <div class="rbc-glow"></div> </div> </div> <!-- 白细胞 --> <div class="white-blood-cells"> <div class="wbc" v-for="n in 12" :key="`wbc-${n}`" :style="getWBCStyle(n)"> <div class="wbc-nucleus"></div> <div class="wbc-aura"></div> </div> </div> <!-- 血小板 --> <div class="platelets"> <div class="platelet" v-for="n in 20" :key="`platelet-${n}`" :style="getPlateletStyle(n)"> <div class="platelet-tentacle" v-for="t in 5" :key="`tentacle-${n}-${t}`"></div> </div> </div> <!-- 血液流动效果 --> <div class="blood-flow"> <div class="flow-line" v-for="n in 6" :key="`flow-${n}`" :style="getFlowStyle(n)"></div> </div> <!-- 显微镜网格 --> <div class="microscope-grid"> <div class="grid-line horizontal" v-for="n in 11" :key="`h-line-${n}`"></div> <div class="grid-line vertical" v-for="n in 11" :key="`v-line-${n}`"></div> </div> </div> <!-- 登录主容器 --> <div class="login-main"> <!-- 显微镜观察容器 --> <div class="microscope-container"> <div class="microscope-effect"> <div class="lens-flare"></div> <div class="scan-line"></div> </div> <!-- 系统标志 --> <div class="system-brand"> <div class="brand-icon"> <div class="microscope-icon"> <div class="lens-container"> <div class="lens-outer"></div> <div class="lens-inner"> <div class="cell-sample"> <div class="red-cell"></div> <div class="white-cell"></div> <div class="platelet-cell"></div> </div> </div> </div> <div class="microscope-base"></div> </div> <div class="icon-glow"></div> </div> <div class="brand-text"> <h1 class="system-title"> <span class="yolo-text">YOLO</span> <span class="cell-text">CellDetect</span> </h1> <p class="system-subtitle">智能血细胞检测分析系统</p> <p class="company-tag">深度视觉识别 · 医学影像实验室</p> </div> </div> <!-- 登录面板 --> <div class="login-panel"> <div class="panel-header"> <div class="header-line"></div> <h2>显微分析系统登录</h2> <div class="header-line"></div> </div> <div class="panel-content"> <el-form :model="ruleForm" :rules="registerRules" ref="ruleFormRef"> <!-- 用户名输入 --> <el-form-item prop="username"> <div class="input-field"> <div class="field-icon"> <div class="user-icon"></div> </div> <el-input v-model="ruleForm.username" placeholder="请输入实验室ID" class="lab-input" size="large" @focus="onInputFocus" @blur="onInputBlur" /> <div class="field-glow"></div> </div> <div class="input-hint">研究人员身份验证</div> </el-form-item> <!-- 密码输入 --> <el-form-item prop="password"> <div class="input-field"> <div class="field-icon"> <div class="key-icon"></div> </div> <el-input v-model="ruleForm.password" type="password" placeholder="请输入访问密钥" show-password class="lab-input" size="large" @focus="onInputFocus" @blur="onInputBlur" /> <div class="field-glow"></div> </div> <div class="input-hint">实验室加密通道...</div> </el-form-item> <!-- 登录按钮 --> <el-form-item> <div class="login-action"> <el-button type="primary" class="lab-btn" @click="submitForm(ruleFormRef)" @mouseenter="onBtnHover" @mouseleave="onBtnLeave" > <div class="btn-content"> <div class="btn-text"> <span class="text-main">启动细胞分析</span> <span class="text-sub">CELL SCAN</span> </div> <div class="btn-indicator"> <div class="indicator-dot"></div> <div class="indicator-dot"></div> <div class="indicator-dot"></div> </div> </div> <div class="btn-energy"></div> <div class="btn-particles"> <div class="particle" v-for="n in 3" :key="`btn-particle-${n}`"></div> </div> </el-button> <div class="system-status"> <div class="status-indicator"> <div class="status-dot active"></div> <span>YOLO模型就绪</span> </div> <div class="status-info"> <span>v5.0 • 实时检测模式</span> </div> </div> </div> </el-form-item> </el-form> <!-- 辅助选项 --> <div class="panel-options"> <router-link to="/register" class="option-link"> <div class="link-icon"> <div class="lab-plus"></div> </div> <span>注册新账户</span> <div class="link-trail"></div> </router-link> </div> </div> </div> <!-- 系统信息 --> <div class="system-info"> <div class="info-grid"> <div class="info-item"> <div class="info-icon detection-icon"></div> <div class="info-content"> <span class="info-label">检测精度</span> <span class="info-value">92.9%</span> </div> </div> <div class="info-item"> <div class="info-icon speed-icon"></div> <div class="info-content"> <span class="info-label">处理速度</span> <span class="info-value">45ms</span> </div> </div> <div class="info-item"> <div class="info-icon cell-icon"></div> <div class="info-content"> <span class="info-label">细胞类型</span> <span class="info-value">3类</span> </div> </div> </div> </div> </div> </div> <!-- 背景装饰元素 --> <div class="background-elements"> <!-- 数据流 --> <div class="data-stream"> <div class="stream-flow" v-for="n in 5" :key="`stream-${n}`" :style="getStreamStyle(n)"> <span v-for="i in 10" :key="`data-${n}-${i}`"> {{ ['RBC','WBC','PLT','YOLO','AI','LAB'][Math.floor(Math.random() * 6)] }} </span> </div> </div> <!-- 浮动标签 --> <div class="floating-labels"> <div class="floating-label" v-for="n in 8" :key="`label-${n}`" :style="getLabelStyle(n)"> {{ ['红细胞','白细胞','血小板','检测','分析','识别'][Math.floor(Math.random() * 6)] }} </div> </div> </div> </div> </template> <script lang="ts" setup> import { reactive, ref, computed, onMounted } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import { ElMessage } from 'element-plus'; import { useI18n } from 'vue-i18n'; import Cookies from 'js-cookie'; import { storeToRefs } from 'pinia'; import { useThemeConfig } from '/@/stores/themeConfig'; import { initFrontEndControlRoutes } from '/@/router/frontEnd'; import { initBackEndControlRoutes } from '/@/router/backEnd'; import { Session } from '/@/utils/storage'; import { formatAxis } from '/@/utils/formatTime'; import { NextLoading } from '/@/utils/loading'; import type { FormInstance, FormRules } from 'element-plus'; import request from '/@/utils/request'; // 定义变量内容 const { t } = useI18n(); const storesThemeConfig = useThemeConfig(); const { themeConfig } = storeToRefs(storesThemeConfig); const route = useRoute(); const router = useRouter(); const formSize = ref('default'); const ruleFormRef = ref<FormInstance>(); // 定义表单数据 const ruleForm = reactive({ username: '', password: '', }); // 校验规则 const registerRules = reactive<FormRules>({ username: [ { required: true, message: '请输入实验室ID', trigger: 'blur' }, { min: 3, max: 20, message: '长度在3-20个字符', trigger: 'blur' }, ], password: [ { required: true, message: '请输入访问密钥', trigger: 'blur' }, { min: 5, max: 30, message: '长度在5-30个字符', trigger: 'blur' }, ], }); // 红细胞样式 const getRBCStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 40 + Math.random() * 60; const duration = 8 + Math.random() * 12; const delay = Math.random() * 5; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 白细胞样式 const getWBCStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 60 + Math.random() * 80; const duration = 12 + Math.random() * 16; const delay = Math.random() * 4; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 血小板样式 const getPlateletStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const size = 20 + Math.random() * 40; const duration = 5 + Math.random() * 8; const delay = Math.random() * 3; const rotation = Math.random() * 360; return { left: `${left}%`, top: `${top}%`, width: `${size}px`, height: `${size}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s`, transform: `rotate(${rotation}deg)` }; }; // 血液流动样式 const getFlowStyle = (index: number) => { const left = Math.random() * 100; const height = 300 + Math.random() * 600; const duration = 4 + Math.random() * 6; const delay = Math.random() * 2; return { left: `${left}%`, height: `${height}px`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 数据流样式 const getStreamStyle = (index: number) => { const left = Math.random() * 100; const duration = 10 + Math.random() * 15; const delay = Math.random() * 6; return { left: `${left}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s` }; }; // 标签样式 const getLabelStyle = (index: number) => { const left = Math.random() * 100; const top = Math.random() * 100; const duration = 15 + Math.random() * 20; const delay = Math.random() * 5; const opacity = 0.1 + Math.random() * 0.3; return { left: `${left}%`, top: `${top}%`, animationDuration: `${duration}s`, animationDelay: `${delay}s`, opacity: opacity }; }; // 事件处理 const onInputFocus = (event: Event) => { const target = event.target as HTMLElement; target.parentElement?.classList.add('focused'); }; const onInputBlur = (event: Event) => { const target = event.target as HTMLElement; target.parentElement?.classList.remove('focused'); }; const onBtnHover = (event: Event) => { const btn = event.currentTarget as HTMLElement; btn.classList.add('hover'); }; const onBtnLeave = (event: Event) => { const btn = event.currentTarget as HTMLElement; btn.classList.remove('hover'); };后端代码展示
详细功能展示视频
红细胞、白细胞、血小板识别检测系统（YOLOv8/YOLOv10/YOLOv11/YOLOv12+深度学习+web界面+计算机视觉+DeepSeek智能分析）_哔哩哔哩_bilibili
红细胞、白细胞、血小板识别检测系统（YOLOv8/YOLOv10/YOLOv11/YOLOv12+深度学习+web界面+计算机视觉+DeepSeek智能分析）_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1uc6TBTECa/?spm_id_from=333.999.0.0&vd_source=549d0b4e2b8999929a61a037fcce3b0f
https://www.bilibili.com/video/BV1uc6TBTECa/