前言在电子制造行业，PCB（印刷电路板）质量检测是生产流程中的关键环节。传统的人工目检方式不仅效率低下、成本高昂，而且容易受到检测人员疲劳、经验等因素影响，导致漏检率和误检率居高不下。随着深度学习技术的发展，基于计算机视觉的自动化缺陷检测成为解决这一问题的有效方案。 本文将详细介绍如何从零搭建一个完整的PCB电路板瑕疵自动检测系统，涵盖前端界面、后端服务、模型训练与集成等各个方面。该系统能够自动识别PCB板上的多种缺陷类型，包括： 缺失孔洞（Missing Hole） 多余铜箔（Spurious Copper） 杂散铜（Spur） 短路（Short） 开路（Open） 鼠咬（Mouse Bite）
本项目采用现代化的技术栈： 前端：Next.js 15 + React 19 + TypeScript + ShadCN UI + Tailwind CSS 后端：FastAPI + Python + Ultralytics YOLOv8 检测模型：基于YOLOv8s训练的PCB缺陷检测专用模型 特色功能：图像/视频缺陷检测、模型管理、系统监控、大模型对话、检测结果可视化
更多内容关注公众号：DetectionHub
目录项目概述与技术选型 系统架构设计 后端开发详解 前端开发详解 核心功能实现 部署与优化 总结与展望
1. 项目概述与技术选型1.1 项目背景PCB（Printed Circuit Board，印刷电路板）是电子产品的核心部件，其质量直接影响产品的可靠性和性能。在PCB生产过程中，由于工艺、材料、环境等因素，容易产生各种缺陷，如缺失孔洞、多余铜箔、短路、开路等。传统的人工目检方式存在以下问题： 本项目基于深度学习的YOLOv8目标检测算法，构建了一个完整的PCB电路板瑕疵自动检测系统，让用户可以： 1.2 技术选型前端技术栈 | | |
|---|
| | React 全栈框架，支持 SSR/SSG，性能优秀 | | | | | | | | | | | | | | | |
后端技术栈
2. 系统架构设计2.1 整体架构系统采用前后端分离的架构设计： ┌─────────────────────────────────────────────────────────────┐
│ 用户浏览器 │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ Next.js 前端应用 │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │PCB图像检测│ │PCB视频检测│ │ 模型管理 │ │ 系统监控 │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ 数据大屏 │ │ LLM对话 │ │ 资源管理 │ │ 日志管理 │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼ HTTP/REST API
┌─────────────────────────────────────────────────────────────┐
│ FastAPI 后端服务 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ API 路由层 │ │
│ │ /api/images /api/videos /api/models /api/llm │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 业务逻辑层 │ │
│ │ 图片处理 视频处理 模型管理 系统监控 LLM调用 │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 数据存储层 │ │
│ │ 文件系统 模型文件 日志文件 配置文件 │ │
│ └─────────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────────────┐
│ YOLOv8 PCB缺陷检测模型 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 训练模型：yolov8_PCB/trained/weights/best.pt │ │
│ │ 基础模型：YOLOv8s │ │
│ │ 训练数据：PCB缺陷数据集 │ │
│ │ 检测类别：缺失孔洞、多余铜箔、短路、开路等 │ │
│ └─────────────────────────────────────────────────────┘ │
│ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │
│ │ YOLOv8n │ │ YOLOv8s │ │ YOLOv11n│ │ 自定义 │ │
│ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────────────────────────┘ |
2.2 目录结构前端目录结构shadcn-main/
├── src/
│ ├── app/ # Next.js App Router 页面
│ │ ├── layout.tsx # 根布局
│ │ ├── page.tsx # 首页
│ │ ├── image-detection/ # 图像检测页面
│ │ ├── video-detection/ # 视频检测页面
│ │ ├── dashboard/ # 数据大屏
│ │ ├── system-monitor/ # 系统监控
│ │ ├── models/ # 模型管理
│ │ ├── llm-chat/ # LLM 对话
│ │ └── ...
│ ├── components/ # 组件目录
│ │ ├── ui/ # ShadCN UI 组件
│ │ ├── AppSidebar.tsx # 侧边栏
│ │ ├── Navbar.tsx # 导航栏
│ │ └── ...
│ ├── lib/ # 工具库
│ │ ├── api.ts # API 封装
│ │ └── utils.ts # 工具函数
│ └── hooks/ # 自定义 Hooks
├── public/ # 静态资源
└── package.json # 依赖配置 |
后端目录结构backend/
├── main.py # 主入口
├── detection.py # 检测模块
├── images.py # 图片接口
├── videos.py # 视频接口
├── models.py # 模型接口
├── systems.py # 系统监控
├── llm.py # LLM 接口
├── vllm.py # 多模态接口
├── requirements.txt # 依赖列表
├── images/ # 图片存储
├── videos/ # 视频存储
├── models/ # 模型存储
└── logs/ # 日志存储 |
3. 后端开发详解3.1 FastAPI 应用初始化首先创建 FastAPI 应用并配置基础设置： from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware
from fastapi.staticfiles import StaticFiles
from contextlib import asynccontextmanager
@asynccontextmanager
asyncdeflifespan(app: FastAPI):
"""应用生命周期管理"""
logger.info("目标检测系统API服务启动中...")
init_models() # 初始化模型
yield
logger.info("目标检测系统API服务已关闭")
app = FastAPI(
title="目标检测系统 API",
description="集成 Ultralytics YOLO 目标检测模型的后端服务",
version="1.0.0",
lifespan=lifespan
)
# CORS 配置 - 允许前端跨域访问
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# 静态文件服务
app.mount("/static/images", StaticFiles(directory="images"), name="static_images")
app.mount("/static/videos", StaticFiles(directory="videos"), name="static_videos") |
3.2 YOLO PCB缺陷检测实现核心检测功能使用 Ultralytics YOLOv8，加载训练好的PCB缺陷检测模型： from ultralytics import YOLO
# 全局模型变量
current_model: Optional[YOLO] = None
# 默认使用训练好的PCB缺陷检测模型
current_model_name: str = os.path.join(
os.path.dirname(os.path.abspath(__file__)),
"yolov8_PCB", "trained", "weights", "best.pt"
)
defload_model(model_path: str = None) -> YOLO:
"""加载YOLO模型"""
global current_model, current_model_name
if model_path isNone:
model_path = current_model_name
# 检查本地模型或使用默认模型
if os.path.exists(model_path):
full_path = model_path
elif os.path.exists(os.path.join(MODELS_DIR, model_path)):
full_path = os.path.join(MODELS_DIR, model_path)
else:
full_path = model_path
current_model = YOLO(full_path)
current_model_name = os.path.basename(model_path)
return current_model
defdetect_image(image_path: str, output_dir: str, filename: str) -> dict:
"""PCB图片缺陷检测"""
model = get_model()
# 执行检测
results = model(image_path)
# 解析检测结果（缺陷类型、位置、置信度）
detections = []
for result in results:
for box in result.boxes:
detections.append({
"class_id": int(box.cls[0]),
"class_name": result.names[int(box.cls[0])], # 如：missing_hole, spurious_copper
"confidence": round(float(box.conf[0]), 4),
"box": {
"x1": int(box.xyxy[0][0]),
"y1": int(box.xyxy[0][1]),
"x2": int(box.xyxy[0][2]),
"y2": int(box.xyxy[0][3])
}
})
# 保存标注后的图片（缺陷位置用边界框标出）
annotated_frame = results[0].plot()
cv2.imwrite(os.path.join(output_dir, filename), annotated_frame)
return {"filename": filename, "detections": detections} |
4. 前端开发详解4.1 项目初始化使用 create-next-app 创建项目： npx create-next-app@latest shadcn-main --typescript --tailwind --eslint --app
cd shadcn-main
# 安装 ShadCN UI
npx shadcn@latest init
# 添加需要的组件
npx shadcn@latest add button card dialog table chart sidebar |
4.2 布局组件实现根布局组件包含侧边栏、导航栏和主题切换： // src/app/layout.tsx
import { ThemeProvider } from"@/components/providers/ThemeProvider";
import { SidebarProvider } from"@/components/ui/sidebar";
importAppSidebarfrom"@/components/AppSidebar";
importNavbarfrom"@/components/Navbar";
exportdefaultasyncfunctionRootLayout({
children,
}: { children: React.ReactNode }) {
const cookieStore = awaitcookies();
const defaultOpen = cookieStore.get("sidebar_state")?.value === "true";
return (
<htmllang="en"suppressHydrationWarning>
<bodyclassName="antialiased flex">
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
>
<SidebarProviderdefaultOpen={defaultOpen}>
<AppSidebar />
<mainclassName="w-full">
<Navbar />
<divclassName="px-4">{children}</div>
</main>
</SidebarProvider>
</ThemeProvider>
</body>
</html>
);
} |
5. 核心功能实现5.1 PCB图像缺陷检测流程用户上传PCB电路板图片到前端 前端调用后端上传接口 后端保存图片到 images/upload 目录 用户点击检测按钮 后端加载训练好的YOLOv8 PCB缺陷检测模型 模型对PCB图片进行推理，识别各类缺陷 检测结果图片（标注缺陷位置）保存到 images/detected 目录 返回检测结果（缺陷类型、位置、置信度） 前端展示检测结果和缺陷统计信息
 
支持的PCB缺陷类型： Missing Hole（缺失孔洞） Spurious Copper（多余铜箔） Spur（杂散铜） Short（短路） Open（开路） Mouse Bite（鼠咬）
5.2 PCB视频缺陷检测流程视频检测与图像检测类似，但需要逐帧处理PCB生产线视频： 用户上传PCB生产线视频文件 后端使用 OpenCV 读取视频 逐帧执行 YOLOv8 PCB缺陷检测 将检测结果（缺陷标注）绘制到每一帧 使用 VideoWriter 生成结果视频 使用 ffmpeg 转码为H.264格式（浏览器兼容） 返回检测统计信息（总帧数、缺陷数量、缺陷类型分布）
5.3 PCB缺陷检测模型管理系统支持多模型管理，可以切换不同的检测模型： 
PCB缺陷检测模型训练参数： {
"base_model": "yolov8s.pt",
"dataset": "PCB缺陷数据集",
"epochs": 100,
"batch_size": 64,
"image_size": 640,
"optimizer": "auto",
"iou_threshold": 0.7,
"confidence": "auto"
} |
5.4 PCB检测数据可视化大屏大屏展示PCB缺陷检测的统计数据：    
6. 部署与优化6.1 开发环境启动# 启动后端
cd backend
pip install -r requirements.txt
uvicorn main:app --reload --port 8887
# 启动前端
cd shadcn-main
pnpm install
pnpm dev
|
6.2 生产环境部署后端 Docker 部署FROM python:3.11-slim
WORKDIR /app
RUN apt-get update && apt-get install -y libgl1-mesa-glx libglib2.0-0
COPY requirements.txt .
RUN pip install --no-cache-dir -r requirements.txt
COPY . .
RUN mkdir -p images/upload images/detected videos/upload videos/detected models logs
EXPOSE 8887
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8887"]
|
前端部署# 构建生产版本
pnpm build
# 部署到 Vercel
vercel --prod
|
6.3 性能优化建议后端优化 使用 GPU 加速 YOLO 推理 实现模型缓存，避免重复加载 大文件使用流式处理 添加请求限流
前端优化 使用 React.memo 减少重渲染 图片懒加载 代码分割 静态资源 CDN 加速
7. 总结与展望7.1 项目总结本项目实现了一个完整的PCB电路板瑕疵自动检测系统，具有以下特点： 现代化技术栈：Next.js 15 + FastAPI + YOLOv8，确保高性能和良好的用户体验 专业的PCB缺陷检测：基于YOLOv8s训练的专用模型，可识别多种PCB缺陷类型 完整功能模块：图像/视频检测、模型管理、系统监控、数据可视化、AI 对话 高效的检测性能：相比人工质检，检测效率提升10倍以上，准确率更稳定 优秀的用户体验：响应式设计、主题切换、实时预览、流式响应 良好的代码组织：模块化设计、类型安全、API 规范
应用价值： 降低人工成本：减少对熟练检测人员的依赖 提高检测效率：自动化检测，处理速度快 提升检测质量：AI模型不受疲劳影响，检测标准统一 数据可追溯：所有检测结果可保存、查询、分析
7.2 未来展望支持实时PCB生产线视频流检测 添加缺陷严重程度分级功能 支持PCB缺陷检测模型在线训练和微调 添加检测结果导出功能（Excel、PDF报告） 集成更多工业检测场景（如焊点检测、元器件检测） 支持检测结果的统计分析和质量追溯 开发移动端应用，支持现场检测
联系方式如果您对项目有任何问题或建议，欢迎通过以下方式联系： 感谢阅读！如果觉得有帮助，请点赞、收藏、分享！ | 
夜雨聆风
