多举措加强局门户网站建设,做电影网站需要注意什么,青羊区城乡建设网站,网站建设关键词布局摘要 随着人工智能与计算机视觉技术的飞速发展#xff0c;目标检测技术在游戏分析、安防监控、自动化结算等领域的应用日益深入。本文设计并实现了一个基于多版本YOLO目标检测算法与SpringBoot后端框架的扑克牌智能识别与管理系统。系统核心采用目前前沿的YOLO系列模型#…摘要随着人工智能与计算机视觉技术的飞速发展目标检测技术在游戏分析、安防监控、自动化结算等领域的应用日益深入。本文设计并实现了一个基于多版本YOLO目标检测算法与SpringBoot后端框架的扑克牌智能识别与管理系统。系统核心采用目前前沿的YOLO系列模型YOLOv8/v10/v11/v12在包含52类标准扑克牌、总计超过24000张图像的数据集上进行训练与优化实现了高精度的多类别扑克牌实时检测。系统采用前后端分离架构前端提供直观的Web交互界面后端基于SpringBoot构建集成DeepSeek大语言模型的智能分析功能可对检测结果进行语义化解读与策略分析。系统具备完整的用户认证与管理模块支持图片、视频及摄像头流的实时检测并将所有检测记录与用户操作持久化存储于MySQL数据库。测试结果表明该系统不仅识别准确率高、响应速度快而且具有良好的可扩展性与用户友好性为扑克牌相关的人工智能应用提供了一个功能完备、技术先进的解决方案。关键词目标检测YOLOSpringBoot扑克牌识别深度学习Web应用前后端分离详细功能展示视频基于深度学习的扑克牌识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibili基于深度学习的扑克牌识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1ZXkeBAEGR/?vd_source549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1ZXkeBAEGR/目录摘要详细功能展示视频1. 引言1.1 研究背景与意义1.2 国内外研究现状1.3 本文主要工作与贡献2. 系统核心技术概述2.1 YOLO目标检测算法演进2.2 SpringBoot后端框架2.3 DeepSeek大语言模型API2.5 MySQL数据库3. 系统设计与实现3.1 系统总体架构3.2 数据集与模型训练3.3 核心功能模块实现4、 系统核心特性概述功能模块登录注册模块可视化模块图像检测模块视频检测模块实时检测模块图片识别记录管理视频识别记录管理摄像头识别记录管理用户管理模块数据管理模块MySQL表设计模型训练结果YOLO概述YOLOv8YOLOv10YOLOv11YOLOv12主要改进前端代码展示后端代码展示详细功能展示视频项目安装教程1. 引言1.1 研究背景与意义扑克牌作为一种全球普及的娱乐与竞技工具其自动化识别技术在在线游戏平台、赌场监控、魔术辅助教学及智能机器人等领域具有广泛的应用需求。传统基于图像处理的识别方法在复杂背景、光照变化及卡片重叠情况下鲁棒性较差。近年来以YOLOYou Only Look Once为代表的深度学习目标检测算法凭借其端到端的高速度与高精度特性为复杂场景下的实时卡片识别提供了新的技术路径。与此同时现代Web应用开发趋向于模块化与智能化将先进的AI模型封装为易用的在线服务成为重要趋势。1.2 国内外研究现状目前基于深度学习的目标检测技术已相当成熟。从YOLOv1到最新的YOLOv12系列算法在骨干网络、特征融合、损失函数等方面持续优化在COCO等通用数据集上性能不断提升。然而针对特定细粒度目标如扑克牌的花色与点数的定制化应用研究相对较少且多数研究集中于算法本身缺少与完整业务系统、用户交互及数据管理相结合的工程化实现。1.3 本文主要工作与贡献本文的主要工作是构建一个集成了最新YOLO检测模型、现代化Web开发框架和AI智能分析的综合性扑克牌识别平台。具体贡献如下构建高质量专用数据集收集并标注了包含52类标准扑克牌的精细数据集为模型训练与评估奠定基础。多模型对比与集成在同一数据集上训练并对比了YOLOv8、YOLOv10、YOLOv11及YOLOv12等多个版本模型系统允许用户灵活切换以平衡速度与精度需求。全功能Web系统开发基于SpringBootVue.js的前后端分离架构实现了从用户交互、模型推理到数据管理的完整闭环。集成DeepSeek智能分析超越单纯的检测引入大语言模型对检测出的牌面组合进行策略分析、牌型解释或趣味性描述提升系统智能水平。完善的系统化功能涵盖用户管理、多模态输入图/视/实时流、检测记录追溯及数据可视化等企业级应用功能。2. 系统核心技术概述2.1 YOLO目标检测算法演进本系统选用了YOLO系列中四个代表性的最新版本YOLOv8Ultralytics公司发布在速度和精度上达到良好平衡提供了完善的训练生态。YOLOv10清华大学团队提出通过无NMS设计等创新进一步提升了推理效率。YOLOv11注截至当前官方YOLO版本为v8v9/v10/v11/v12多为研究社区或特定团队的改进版此处沿用项目描述通常指在v8基础上进行特定优化如注意力机制、新主干网络的变体。YOLOv12作为后续探索版本可能集成了更先进的训练策略或架构调整。系统集成多版本模型旨在提供一个性能对比平台并满足用户对不同推理速度与准确率的要求。2.2 SpringBoot后端框架SpringBoot用于快速构建高效、可扩展的RESTful API后端服务。它简化了Spring应用的初始搭建和开发过程通过自动配置、起步依赖等特性轻松集成MyBatis-Plus数据访问、Spring Security安全控制、JWT令牌认证等模块为前端提供稳定的数据接口和业务逻辑处理。2.3 DeepSeek大语言模型API通过调用DeepSeek提供的API接口将YOLO模型检测出的扑克牌序列如[‘AH‘ ‘KS‘ ‘QC‘]作为输入请求模型生成相应的分析结果.”2.5 MySQL数据库用于结构化存储系统所有数据包括用户信息账号、密码、个人信息。检测记录用户、检测时间、使用模型、输入文件、识别结果、AI分析内容等。3. 系统设计与实现3.1 系统总体架构系统采用标准的前后端分离架构。前端层用户交互界面负责接收用户输入图片/视频/摄像头流、展示检测结果、图表和AI分析。后端层SpringBoot应用Web控制层处理HTTP请求调用业务服务。业务逻辑层核心业务处理包括用户认证、模型调度、记录管理、AI分析调用。模型服务层封装多版本YOLO模型提供统一的检测接口。数据持久层MySQL数据库存储。AI服务层独立的Python服务直接通过API调用DeepSeek处理智能分析请求。数据存储层MySQL数据库与文件系统用于存储上传的媒体文件。3.2 数据集与模型训练数据集详情共包含52个类别对应扑克牌的每一种花色与点数组合如10C代表梅花10。数据集划分为训练集21203张、验证集2020张和测试集1010张确保了模型训练的充分性与评估的可靠性。模型训练使用Ultralytics YOLO框架或其他对应版本的官方代码在统一数据集上进行训练。3.3 核心功能模块实现管理模块管理员拥有用户CRUD权限。多模型检测调度模块多模态输入处理模块图片检测图片上传返回标注框和类别信息。视频检测将视频按帧处理并将结果合成为新视频。摄像头实时检测实现低延迟的实时视频流分析与反馈。DeepSeek智能分析模块检测完成后将识别出的扑克牌列表格式化后发送至DeepSeek API将返回的文本分析结果与检测记录一并保存。数据可视化与管理模块个人中心模块用户可更新头像、昵称、密码等个人信息。4、 系统核心特性概述功能模块✅ 用户登录注册支持密码检测保存到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 比率以更有效地分配计算资源。前端代码展示前端登录界面部分代码// 原有的登录逻辑保持不变 const currentTime computed(() { return formatAxis(new Date()); }); const onSignIn async () { Session.set(token, Math.random().toString(36).substr(0)); Cookies.set(userName, ruleForm.username); if (!themeConfig.value.isRequestRoutes) { const isNoPower await initFrontEndControlRoutes(); signInSuccess(isNoPower); } else { const isNoPower await initBackEndControlRoutes(); signInSuccess(isNoPower); } }; const signInSuccess (isNoPower: boolean | undefined) { if (isNoPower) { ElMessage.warning(抱歉您没有登录权限); Session.clear(); } else { let currentTimeInfo currentTime.value; if (route.query?.redirect) { router.push({ path: stringroute.query?.redirect, query: Object.keys(stringroute.query?.params).length 0 ? JSON.parse(stringroute.query?.params) : , }); } else { router.push(/); } const signInText t(message.signInText); ElMessage.success(${currentTimeInfo}${signInText}); NextLoading.start(); } }; const submitForm (formEl: FormInstance | undefined) { if (!formEl) return; formEl.validate((valid) { if (valid) { request.post(/api/user/login, ruleForm).then((res) { console.log(res); if (res.code 0) { Cookies.set(role, res.data.role); onSignIn(); } else { ElMessage({ type: error, message: res.msg, }); } }); } else { console.log(error submit!); return false; } }); }; // 初始化 onMounted(() { // 可以在这里添加初始化代码 }); /script style scoped .login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0d1b1f 0%, #1a3026 30%, #0d1b1f 70%, #1a3026 100%); padding: 20px; position: relative; overflow: hidden; font-family: Inter, Segoe UI, system-ui, sans-serif; } /* 扑克牌背景 */ .card-background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; overflow: hidden; } /* 浮动扑克牌 */ .floating-cards { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .card { position: absolute; border-radius: 8px; animation: cardFloat ease-in-out infinite alternate; opacity: 0.1; transform-style: preserve-3d; } .card-face { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: bold; backface-visibility: hidden; } .card.spade .card-face { background: white; color: black; border: 2px solid rgba(0, 0, 0, 0.8); } .card.heart .card-face { background: white; color: #C62828; border: 2px solid rgba(198, 40, 40, 0.8); } .card.club .card-face { background: white; color: black; border: 2px solid rgba(0, 0, 0, 0.8); } .card.diamond .card-face { background: white; color: #C62828; border: 2px solid rgba(198, 40, 40, 0.8); } .card-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; border-radius: 12px; background: inherit; filter: blur(15px); opacity: 0.2; } keyframes cardFloat { 0% { transform: translateY(0) rotateX(0deg); } 100% { transform: translateY(-30px) rotateX(10deg); } } /* 牌桌纹理 */ .poker-table { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .table-texture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(21, 101, 192, 0.05) 1px, transparent 1px) 0 0 / 50px 50px, linear-gradient(rgba(21, 101, 192, 0.05) 1px, transparent 1px) 0 0 / 50px 50px; background-color: #0a1519; } .table-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; background: radial-gradient(ellipse at center, rgba(21, 101, 192, 0.1) 0%, rgba(21, 101, 192, 0.05) 40%, transparent 70%); } /* 筹码粒子 */ .chip-particles { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .chip { position: absolute; border-radius: 50%; animation: chipFloat ease-in-out infinite alternate; opacity: 0.3; box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.3), 0 5px 15px rgba(0, 0, 0, 0.3); } .chip-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: 80%; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.5); box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.5), 0 0 10px rgba(255, 255, 255, 0.3); } keyframes chipFloat { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-25px) rotate(180deg); } } /* 花色网格 */ .suit-grid { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .suit-node { position: absolute; font-weight: bold; animation: suitPulse ease-in-out infinite alternate; opacity: 0.15; text-shadow: 0 0 10px currentColor; } keyframes suitPulse { 0% { opacity: 0.1; transform: scale(1) rotate(0deg); } 100% { opacity: 0.25; transform: scale(1.3) rotate(180deg); } } /* 扫描激光 */ .laser-scan { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .laser-line { position: absolute; width: 2px; height: 300px; animation: laserScan linear infinite; opacity: 0.3; } .laser-path { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, transparent, currentColor, transparent ); box-shadow: 0 0 10px currentColor, 0 0 20px currentColor; } keyframes laserScan { 0% { top: -300px; opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { top: 100%; opacity: 0; } } /* 主登录容器 */ .login-main { position: relative; z-index: 2; width: 100%; max-width: 480px; margin: 0 auto; } /* 卡牌界面容器 */ .card-container { position: relative; background: rgba(13, 27, 31, 0.85); border-radius: 20px; padding: 40px; backdrop-filter: blur(20px); border: 2px solid rgba(21, 101, 192, 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 80px rgba(21, 101, 192, 0.3), inset 0 0 20px rgba(21, 101, 192, 0.1); animation: cardAppear 1s ease-out; overflow: hidden; } keyframes cardAppear { from { opacity: 0; transform: translateY(40px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } .card-effect { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } .card-shine { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent ); animation: cardShine 8s linear infinite; } keyframes cardShine { 0% { left: -100%; } 100% { left: 100%; } } .card-connections { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, rgba(198, 40, 40, 0.6), transparent ); box-shadow: 0 0 10px rgba(198, 40, 40, 0.4); animation: cardScan 4s linear infinite; } keyframes cardScan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } } /* 系统品牌 */ .system-brand { text-align: center; margin-bottom: 40px; } .brand-icon { display: flex; justify-content: center; margin-bottom: 24px; position: relative; } .poker-icon { width: 120px; height: 120px; position: relative; z-index: 2; } .card-structure { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 112px; background: white; border-radius: 8px; border: 2px solid rgba(21, 101, 192, 0.8); animation: cardFloatIcon 4s ease-in-out infinite alternate; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); } .card-outline { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 8px; border: 1px solid rgba(198, 40, 40, 0.6); } .corner { position: absolute; font-size: 12px; font-weight: bold; color: black; } .corner.left-top { top: 8px; left: 8px; color: black; } .corner.right-top { top: 8px; right: 8px; color: #C62828; font-size: 14px; } .corner.left-bottom { bottom: 8px; left: 8px; color: black; font-size: 14px; transform: rotate(180deg); } .corner.right-bottom { bottom: 8px; right: 8px; color: #C62828; transform: rotate(180deg); } .card-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 40px; height: 40px; } .suit-large { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 36px; color: black; font-weight: bold; } .ai-core { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 16px; height: 16px; background: linear-gradient(45deg, #C62828, #1565C0); border-radius: 50%; animation: corePulse 2s ease-in-out infinite; z-index: 1; } keyframes corePulse { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; } 50% { transform: translate(-50%, -50%) scale(1.3); opacity: 1; } } keyframes cardFloatIcon { 0% { transform: translate(-50%, -50%) rotate(-5deg); } 100% { transform: translate(-50%, -55%) rotate(5deg); } } .card-aura { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 150%; height: 150%; border-radius: 20px; border: 3px solid rgba(21, 101, 192, 0.2); animation: auraExpand 4s ease-in-out infinite; } keyframes auraExpand { 0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; } 50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.6; } } .icon-glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 180px; height: 180px; background: radial-gradient(circle, rgba(21, 101, 192, 0.2) 0%, transparent 70%); z-index: 1; animation: glowPulse 5s ease-in-out infinite alternate; } keyframes glowPulse { 0% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0.4; transform: translate(-50%, -50%) scale(1.2); } } .brand-text { position: relative; z-index: 2; } .system-title { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .poker-text { font-size: 36px; font-weight: 900; background: linear-gradient(135deg, #C62828, #1565C0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(198, 40, 40, 0.3); letter-spacing: 1px; } .recognition-text { font-size: 36px; font-weight: 900; background: linear-gradient(135deg, #1565C0, #F9A825); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: 0 0 30px rgba(21, 101, 192, 0.3); letter-spacing: 1px; } .system-subtitle { font-size: 18px; color: #ffffff; margin-bottom: 8px; font-weight: 500; letter-spacing: 2px; } .company-tag { font-size: 14px; color: rgba(255, 255, 255, 0.6); letter-spacing: 3px; font-weight: 300; text-transform: uppercase; } /* 登录面板 */ .panel-header { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 40px; } .header-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(21, 101, 192, 0.5), transparent); } .panel-header h2 { color: #ffffff; font-size: 20px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; background: linear-gradient(135deg, #C62828, #1565C0); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } /* 输入字段 */ .input-field { position: relative; margin-bottom: 8px; } .field-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); z-index: 2; width: 24px; height: 24px; } .poker-icon-small, .chip-icon-small { width: 100%; height: 100%; border-radius: 6px; position: relative; display: flex; align-items: center; justify-content: center; } .poker-icon-small { background: linear-gradient(135deg, #C62828, #1565C0); } .poker-icon-small span { color: white; font-size: 16px; font-weight: bold; } .chip-icon-small { background: linear-gradient(135deg, #F9A825, #2E7D32); } .chip-mini { width: 16px; height: 16px; border-radius: 50%; background: white; border: 2px solid rgba(0, 0, 0, 0.2); position: relative; } .chip-mini::before { content: ; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.3); } .field-glow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient(135deg, rgba(198, 40, 40, 0.1), rgba(21, 101, 192, 0.1)); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; } :deep(.card-input .el-input__wrapper) { box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.3) !important; border-radius: 12px !important; padding: 0 20px 0 56px !important; background: rgba(255, 255, 255, 0.05) !important; backdrop-filter: blur(10px); border: none; height: 56px; transition: all 0.3s ease; } :deep(.card-input .el-input__inner) { color: #ffffff !important; font-size: 16px !important; font-weight: 400; letter-spacing: 0.5px; background: transparent !important; } :deep(.card-input .el-input__inner::placeholder) { color: rgba(255, 255, 255, 0.4) !important; } :deep(.card-input .el-input__wrapper:hover) { box-shadow: 0 0 0 2px rgba(21, 101, 192, 0.6) !important; background: rgba(255, 255, 255, 0.08) !important; } :deep(.card-input .el-input__wrapper.is-focus) { box-shadow: 0 0 0 2px #1565C0, 0 0 20px rgba(21, 101, 192, 0.4) !important; background: rgba(255, 255, 255, 0.1) !important; } :deep(.card-input.focused .el-input__wrapper) { box-shadow: 0 0 0 2px #1565C0, 0 0 20px rgba(21, 101, 192, 0.4) !important; background: rgba(255, 255, 255, 0.1) !important; } :deep(.card-input.focused .field-glow) { opacity: 1; } .input-hint { font-size: 12px; color: rgba(255, 255, 255, 0.4); margin-top: 6px; margin-left: 56px; font-weight: 300; letter-spacing: 0.5px; } /* 扑克按钮 */ .login-action { margin-top: 40px; } .poker-btn { width: 100%; height: 64px; padding: 0; border: none; border-radius: 16px; background: linear-gradient(135deg, rgba(198, 40, 40, 0.9) 0%, rgba(21, 101, 192, 0.9) 50%, rgba(249, 168, 37, 0.9) 100%); position: relative; overflow: hidden; transition: all 0.3s ease; transform-style: preserve-3d; perspective: 1000px; } .btn-content { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; height: 100%; transform: translateZ(20px); } .btn-text { display: flex; flex-direction: column; gap: 4px; } .text-main { color: white; font-size: 18px; font-weight: 700; letter-spacing: 1.5px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .text-sub { color: rgba(255, 255, 255, 0.8); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; } .btn-chips { display: flex; align-items: center; gap: 4px; } .chip-dot { width: 8px; height: 8px; border-radius: 50%; background: white; animation: chipPulse 1.5s ease-in-out infinite; box-shadow: 0 0 5px rgba(255, 255, 255, 0.5); } .chip-dot:nth-child(2) { animation-delay: 0.2s; } .chip-dot:nth-child(3) { animation-delay: 0.4s; } keyframes chipPulse { 0%, 100% { opacity: 0.3; transform: scale(1); } 50% { opacity: 1; transform: scale(1.3); } }后端代码展示详细功能展示视频基于深度学习的扑克牌识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibili基于深度学习的扑克牌识别检测系统DeepSeek智能分析YOLOv8/YOLOv10/YOLOv11/YOLOv12最新web界面 前后端分离_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1ZXkeBAEGR/?vd_source549d0b4e2b8999929a61a037fcce3b0fhttps://www.bilibili.com/video/BV1ZXkeBAEGR/