摘要本文设计并实现了一个基于深度学习的船舶类型智能识别与管理系统。系统采用前后端分离架构后端基于SpringBoot框架前端提供现代化的Web交互界面并利用MySQL数据库进行数据持久化管理。在核心检测算法上系统创新性地集成并对比了当前最先进的YOLO系列目标检测模型包括YOLOv8、YOLOv10、YOLOv11和YOLOv12并针对海事场景构建了涵盖10类常见船舶如散货船、集装箱船、油轮、拖船、游艇等的大规模专用数据集。深度融合了DeepSeek大型语言模型为检测结果提供智能化的海事场景分析、船舶特征描述及潜在风险评估。此外系统包含完整的用户权限管理、检测记录追溯、多维度数据可视化及管理员后台等模块。实验结果表明该系统能够高效、准确地完成复杂海事环境下的多目标船舶识别任务为港口智能管理、航道监控、海上交通服务、渔业监管等应用场景提供了一个功能强大、可扩展的智能决策支持平台。关键词船舶识别海事监控YOLO深度学习SpringBootDeepSeek智能航运Web系统目录摘要详细功能展示视频一、引言1.1 研究背景与意义1.2 国内外研究现状1.3 本文主要工作与贡献项目概述系统简介二、 系统核心特性概述功能模块登录注册模块可视化模块图像检测模块视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计模型训练结果YOLO概述YOLOv8YOLOv10YOLOv11YOLOv12主要改进前端代码展示后端代码展示详细功能展示视频详细功能展示视频船舶类型识别检测系统YOLOv8/YOLOv10/YOLOv11/YOLOv12深度学习web界面计算机视觉DeepSeek智能分析 前后端分离_哔哩哔哩_bilibili船舶类型识别检测系统YOLOv8/YOLOv10/YOLOv11/YOLOv12深度学习web界面计算机视觉DeepSeek智能分析 前后端分离_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1qwzaBUE6c/?spm_id_from333.999.0.0vd_source549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1qwzaBUE6c/一、引言1.1 研究背景与意义随着全球贸易的蓬勃发展和海洋经济的快速崛起海上交通日益繁忙港口运营、航道安全、渔业管理及海上搜救等领域对船舶的智能化监控与管理提出了更高要求。准确、实时地识别船舶类型是海事管理、船舶交通服务、智慧港口建设及海洋态势感知的核心基础。传统的船舶识别主要依赖人工瞭望、AIS自动识别系统数据或雷达信号存在识别粒度粗、依赖设备协作、无法获取视觉特征等局限性。近年来基于计算机视觉的深度学习技术特别是以YOLO为代表的高性能目标检测算法为通过光学影像实现自动化、精细化的船舶类型识别提供了全新的技术路径。通过分析船舶的外观结构特征如货舱形状、上层建筑、甲板布局等视觉识别方法能够有效区分散货船、集装箱船、油轮、客船等不同类型且不依赖于船舶主动发送的信号可作为AIS等系统的有效补充与验证。然而将先进的视觉检测算法应用于实际海事场景仍面临诸多挑战需要构建覆盖多种船型、不同视角和复杂海况的大规模数据集需要将算法模型工程化为稳定可靠、易于操作的业务系统需要对识别结果进行进一步的智能化解读以支持决策。因此开发一个集成了最新YOLO模型、具备海事领域智能分析能力和完整业务流程的船舶类型识别系统对于提升海事监管的自动化水平、保障航行安全、优化港口运营效率具有重要的理论研究价值和迫切的现实应用意义。1.2 国内外研究现状海事目标检测技术国内外研究已广泛将CNN、Faster R-CNN、YOLO、SSD等模型应用于船舶检测、舰船识别、海上目标跟踪等任务。研究重点逐渐从单一的“船舶/非船舶”二分类转向对具体船舶类型的细粒度识别。船舶数据集发展出现了如SeaShips、SMD等公开船舶数据集但类别数量、图像规模和质量仍有提升空间针对特定应用场景如港口管理的专用数据集构建是重要研究方向。YOLO算法演进YOLOv8在精度与速度上达到优秀平衡YOLOv10提出无NMS设计后续版本在模型架构和训练策略上持续创新。将其应用于类别更多、场景更复杂的船舶识别是对算法泛化能力的良好检验。1.3 本文主要工作与贡献本文的核心工作是设计并实现一个“基于YOLOv8/v10/v11/v12与SpringBoot的船舶类型识别检测系统”。具体贡献如下构建了大规模、多类别的船舶识别专用数据集针对海事监管的核心需求系统性地收集并标注了包含10类重要船舶BULK CARRIER, CONTAINER SHIP, … , YACHT的近5000张图像为模型训练与鲁棒性评估提供了高质量数据基础。打造了海事领域的多模型性能对比平台在统一的系统框架下集成了从YOLOv8到YOLOv12的多个先进检测模型使海事领域研究者与从业者能够便捷地对比不同模型在复杂船舶识别任务上的性能差异为实际部署的算法选型提供科学依据。研发了面向业务的海事智能Web应用系统采用SpringBoot后端与现代化前端技术开发了涵盖用户管理、多源视觉数据检测静态图/视频/实时流、全流程记录管理、可视化数据分析等功能的完整应用实现了从算法到海事业务场景的落地。实现了基于DeepSeek的海事场景智能分析超越传统的边框与类别输出通过集成DeepSeek大语言模型对检测到的船舶及场景进行深度语义分析如推断船舶可能状态航行/停泊/作业、分析港口区域内船舶类型构成、评估潜在交通冲突风险等显著提升了系统的辅助决策价值。建立了可追溯的海事视觉数据资产库所有识别任务、模型结果、用户操作及智能分析结论均被结构化存储于数据库中形成了宝贵的海事视觉数据资产支持历史查询、统计分析并为后续构建更专业的海事大模型提供了数据积累。项目概述系统简介本项目是一个专注于海事领域的、集成了前沿计算机视觉技术与多模态AI分析能力的综合性智能监控与管理系统。核心目标实现对港口、航道及近海区域的光学影像中多类型船舶的精准检测、定位与细粒度分类并通过功能完善的Web平台为海事管理、港航企业及研究机构提供高效的识别服务、深度的场景洞察与规范的数据管理。系统亮点算法前沿性与专业性内置基于大规模专用数据集训练集3498张训练的YOLOv8, v10, v11, v12四种高性能检测模型专门优化了对10类船舶的识别能力。模型能够有效区分外观相似但功能迥异的船舶满足海事精细化管理需求。功能体系化与场景化用户与安全完备的用户注册登录支持密码强度检测、基于角色的权限控制管理员/普通用户、个人资料管理。核心识别全面支持单张图片、监控视频文件、实时摄像头流的船舶检测与分类识别结果带标注框的图片、船舶类型列表、置信度自动归档。记录管理对图片、视频、实时流的所有识别历史进行分类存储、快速检索、详情回放与导出管理。二、 系统核心特性概述功能模块✅ 用户登录注册支持密码检测保存到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(datadata_path, epochs500, batch64, device0, workers0, projectruns, nameexp, )YOLO概述YOLOv8YOLOv8 由 Ultralytics 于 2023 年 1 月 10 日发布在准确性和速度方面提供了尖端性能。基于先前 YOLO 版本的进步YOLOv8 引入了新功能和优化使其成为各种应用中目标检测任务的理想选择。YOLOv8 的主要特性高级骨干和颈部架构YOLOv8 采用最先进的骨干和颈部架构从而改进了特征提取和目标检测性能。无锚点分离式 Ultralytics HeadYOLOv8 采用无锚点分离式 Ultralytics head与基于锚点的方法相比这有助于提高准确性并提高检测效率。优化的准确性-速度权衡YOLOv8 专注于在准确性和速度之间保持最佳平衡适用于各种应用领域中的实时对象检测任务。丰富的预训练模型:YOLOv8提供了一系列预训练模型以满足各种任务和性能要求使您更容易为特定用例找到合适的模型。YOLOv10YOLOv10 由 清华大学研究人员基于 Ultralytics Python构建引入了一种新的实时目标检测方法解决了先前 YOLO 版本中存在的后处理和模型架构缺陷。通过消除非极大值抑制 (NMS) 并优化各种模型组件YOLOv10 以显著降低的计算开销实现了最先进的性能。大量实验表明它在多个模型尺度上都具有卓越的精度-延迟权衡。概述实时目标检测旨在以低延迟准确预测图像中的对象类别和位置。YOLO 系列因其在性能和效率之间的平衡而一直处于这项研究的前沿。然而对 NMS 的依赖和架构效率低下阻碍了最佳性能。YOLOv10 通过引入用于无 NMS 训练的一致双重分配和整体效率-准确性驱动的模型设计策略来解决这些问题。架构YOLOv10 的架构建立在之前 YOLO 模型优势的基础上同时引入了几项关键创新。该模型架构由以下组件组成骨干网络负责特征提取YOLOv10 中的骨干网络使用增强版的 CSPNet (Cross Stage Partial Network)以改善梯度流并减少计算冗余。NeckNeck 的设计目的是聚合来自不同尺度的特征并将它们传递到 Head。它包括 PAN路径聚合网络层用于有效的多尺度特征融合。One-to-Many Head在训练期间为每个对象生成多个预测以提供丰富的监督信号并提高学习准确性。一对一头部在推理时为每个对象生成一个最佳预测以消除对NMS的需求从而降低延迟并提高效率。主要功能免NMS训练利用一致的双重分配来消除对NMS的需求从而降低推理延迟。整体模型设计从效率和准确性的角度对各种组件进行全面优化包括轻量级分类 Head、空间通道解耦下采样和秩引导块设计。增强的模型功能: 结合了大内核卷积和部分自注意力模块以提高性能而无需显着的计算成本。YOLOv11YOLO11 是 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)。YOLOv12YOLO12引入了一种以注意力为中心的架构它不同于之前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 classlogin-container !-- 海洋科技背景 -- div classmarine-background !-- 海洋波纹 -- div classocean-waves div classwave v-forn in 12 :keywave-${n} :stylegetWaveStyle(n)/div /div !-- 雷达扫描 -- div classradar-scan div classradar-circle/div div classradar-line/div /div !-- 船舶剪影 -- div classship-silhouettes div classship v-forn in 8 :keyship-${n} :stylegetShipStyle(n) {{ getShipIcon() }} /div /div !-- 数据点网格 -- div classdata-grid div classdata-node v-forn in 40 :keynode-${n} :stylegetNodeStyle(n) div classnode-pulse/div /div /div !-- 信号波纹 -- div classsignal-ripples div classripple v-forn in 6 :keyripple-${n} :stylegetRippleStyle(n)/div /div /div !-- 登录主容器 -- div classlogin-main !-- 雷达界面容器 -- div classradar-container div classradar-effect div classscan-line/div div classgrid-overlay/div /div !-- 系统标志 -- div classsystem-brand div classbrand-icon div classradar-icon div classradar-dish div classdish-outline/div div classdish-inner/div div classdish-center/div /div div classsignal-waves/div /div div classicon-glow/div /div div classbrand-text h1 classsystem-title span classyolo-textYOLO/span span classmarine-textDeepSeek/span /h1 p classsystem-subtitle船舶类型智能识别系统/p p classcompany-tag海洋人工智能 · 海事科技实验室/p /div /div !-- 登录面板 -- div classlogin-panel div classpanel-header div classheader-line/div h2系统访问认证/h2 div classheader-line/div /div div classpanel-content el-form :modelruleForm :rulesregisterRules refruleFormRef !-- 用户名输入 -- el-form-item propusername div classinput-field div classfield-icon div classradar-icon-small/div /div el-input v-modelruleForm.username placeholder请输入操作员ID classmarine-input sizelarge focusonInputFocus bluronInputBlur / div classfield-glow/div /div /el-form-item !-- 密码输入 -- el-form-item proppassword div classinput-field div classfield-icon div classsecure-icon/div /div el-input v-modelruleForm.password typepassword placeholder请输入安全密钥 show-password classmarine-input sizelarge focusonInputFocus bluronInputBlur / div classfield-glow/div /div /el-form-item !-- 登录按钮 -- el-form-item div classlogin-action el-button typeprimary classmarine-btn clicksubmitForm(ruleFormRef) mouseenteronBtnHover mouseleaveonBtnLeave div classbtn-content div classbtn-text span classtext-main启动船舶识别/span span classtext-subMARINE DETECTION/span /div div classbtn-signals div classsignal-dot/div div classsignal-dot/div div classsignal-dot/div /div /div div classbtn-energy/div div classbtn-particles div classparticle v-forn in 3 :keybtn-particle-${n}/div /div /el-button div classsystem-status div classstatus-indicator div classstatus-dot active/div span雷达系统就绪/span /div div classstatus-info spanv3.5.0 • YOLO优化模式/span /div /div /div /el-form-item /el-form !-- 辅助选项 -- div classpanel-options router-link to/register classoption-link div classlink-icon div classmarine-plus/div /div span注册新账户/span div classlink-trail/div /router-link /div /div /div !-- 系统信息 -- div classsystem-info div classinfo-grid div classinfo-item div classinfo-icon ship-icon/div div classinfo-content span classinfo-label船舶类型/span span classinfo-value10类/span /div /div div classinfo-item div classinfo-icon speed-icon/div div classinfo-content span classinfo-label识别速度/span span classinfo-value5ms/span /div /div div classinfo-item div classinfo-icon accuracy-icon/div div classinfo-content span classinfo-label识别精度/span span classinfo-value95.2%/span /div /div /div /div /div /div !-- 背景装饰元素 -- div classbackground-elements !-- 船舶数据流 -- div classship-stream div classdata-flow v-forn in 6 :keyflow-${n} :stylegetStreamStyle(n) span v-fori in 8 :keydata-${n}-${i} {{ getShipCode() }} /span /div /div !-- 浮动坐标 -- div classfloating-coordinates div classcoordinate v-forn in 15 :keycoord-${n} :stylegetCoordStyle(n) {{ getCoordinate() }} /div /div /div /div /template script langts 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 refFormInstance(); // 定义表单数据 const ruleForm reactive({ username: , password: , }); // 校验规则 const registerRules reactiveFormRules({ 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 getWaveStyle (index: number) { const left Math.random() * 100; const height 3 Math.random() * 5; const duration 8 Math.random() * 12; const delay Math.random() * 3; const opacity 0.1 Math.random() * 0.2; return { left: ${left}%, height: ${height}px, animationDuration: ${duration}s, animationDelay: ${delay}s, opacity: opacity }; }; // 船舶样式 const getShipStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 20 Math.random() * 30; const duration 20 Math.random() * 30; const delay Math.random() * 5; const speed 0.5 Math.random() * 1.5; return { left: ${left}%, top: ${top}%, fontSize: ${size}px, animationDuration: ${duration}s, animationDelay: ${delay}s, animationTimingFunction: linear(${speed}) }; }; // 获取船舶图标 const getShipIcon () { const ships [, ⛴️, ️, , ⛵, ️, , ]; return ships[Math.floor(Math.random() * ships.length)]; }; // 节点样式 const getNodeStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 3 Math.random() * 6; const duration 2 Math.random() * 4; const delay Math.random() * 2; const colors [#4A9EFF, #2DD4BF, #8B5CF6]; const colorIndex Math.floor(Math.random() * colors.length); return { left: ${left}%, top: ${top}%, width: ${size}px, height: ${size}px, backgroundColor: colors[colorIndex], animationDuration: ${duration}s, animationDelay: ${delay}s }; }; // 波纹样式 const getRippleStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const size 50 Math.random() * 200; const duration 3 Math.random() * 6; const delay Math.random() * 2; return { left: ${left}%, top: ${top}%, width: ${size}px, height: ${size}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() * 5; const fontSize 14 Math.random() * 8; return { left: ${left}%, animationDuration: ${duration}s, animationDelay: ${delay}s, fontSize: ${fontSize}px }; }; // 获取船舶代码 const getShipCode () { const codes [CV, DDG, FFG, LST, LPD, MSC, PSV, AHTS]; return codes[Math.floor(Math.random() * codes.length)] ; }; // 坐标样式 const getCoordStyle (index: number) { const left Math.random() * 100; const top Math.random() * 100; const duration 12 Math.random() * 18; const delay Math.random() * 4; const opacity 0.05 Math.random() * 0.1; return { left: ${left}%, top: ${top}%, animationDuration: ${duration}s, animationDelay: ${delay}s, opacity: opacity }; };后端代码展示详细功能展示视频船舶类型识别检测系统YOLOv8/YOLOv10/YOLOv11/YOLOv12深度学习web界面计算机视觉DeepSeek智能分析 前后端分离_哔哩哔哩_bilibili船舶类型识别检测系统YOLOv8/YOLOv10/YOLOv11/YOLOv12深度学习web界面计算机视觉DeepSeek智能分析 前后端分离_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1qwzaBUE6c/?spm_id_from333.999.0.0vd_source549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1qwzaBUE6c/