本文档详细介绍 PixelPunk 的系统架构、核心流程和技术实现。
┌─────────────────────────────────────────────────────────────┐
│ 用户界面层 │
│ Vue 3 + TypeScript + Tailwind CSS │
└────────────────────────┬────────────────────────────────────┘
│ HTTP/WebSocket
▼
┌─────────────────────────────────────────────────────────────┐
│ 应用服务层 │
│ Go + Gin + JWT + Viper │
├─────────────────────────────────────────────────────────────┤
│ • 图片上传处理 • 用户认证授权 • 分类标签管理 │
│ • AI 智能分析 • 向量搜索 • 文件分享 │
│ • WebSocket 消息 • 批量操作 • 统计分析 │
└────────────────────────┬────────────────────────────────────┘
│
┌────────────────┼────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌─────────────┐ ┌────────────┐
│ MySQL │ │ Qdrant │ │ Redis │
│ :3306 │ │ :6333 │ │ :6379 │
│ │ │ │ │ │
│ • 用户数据 │ │ • 向量索引 │ │ • 会话 │
│ • 图片元数据 │ │ • 语义搜索 │ │ • 缓存 │
│ • 分类标签 │ │ • AI 向量 │ │ • 队列 │
└──────────────┘ └─────────────┘ └────────────┘
┌─────────────────────────────────────────────────────────────────────┐
│ 用户上传图片 │
│ (拖拽/选择/粘贴/批量) │
└────────────────────────────┬────────────────────────────────────────┘
│
▼
┌────────────────────────┐
│ 1. 前端预处理 │
│ • 客户端压缩 │
│ • 文件大小检查 │
│ • 格式初步验证 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 2. 服务端接收 │
│ • HTTP Multipart │
│ • 临时文件存储 │
│ • 安全性检查 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 3. 文件格式校验 │
│ • MIME 类型检测 │
│ • 文件头魔数验证 │
│ • 文件大小限制 │
│ • 恶意文件拦截 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 4. 图片基础处理 │
│ • 格式转换 (WebP) │
│ • 质量压缩 (85%) │
│ • EXIF 信息提取 │
│ • 色彩空间转换 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 5. 缩略图生成 │
│ • 小图 (150x150) │
│ • 中图 (600x600) │
│ • 大图 (1200x1200) │
│ • 保持宽高比 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 6. 文件存储 │
│ • 原图存储 │
│ • 缩略图存储 │
│ • 路径生成 │
│ • 文件去重 (Hash) │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 7. AI 图像分析 │
│ • 调用 Vision API │
│ • 图像分类 │
│ • 对象识别 │
│ • 场景检测 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 8. AI 智能打标 │
│ • 关键词提取 │
│ • 标签生成 │
│ • 描述文本生成 │
│ • 颜色主题分析 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 9. NSFW 内容审核 │
│ • 成人内容检测 │
│ • 暴力内容检测 │
│ • 敏感信息识别 │
│ • 审核结果记录 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 10. AI 向量化 │
│ • 使用 Embedding 模型 │
│ • 生成图像向量 │
│ • 存储到 Qdrant │
│ • 建立语义索引 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 11. 数据库存储 │
│ • 图片元数据 (MySQL) │
│ • 向量数据 (Qdrant) │
│ • 关联标签和分类 │
│ • 更新统计信息 │
└────────────┬───────────┘
│
▼
┌────────────────────────┐
│ 12. 后处理任务 │
│ • 生成分享链接 │
│ • 触发 WebSocket 通知 │
│ • 更新用户配额 │
│ • 记录操作日志 │
└────────────┬───────────┘
│
▼
┌────────────────────────────────────────────────────────────────────┐
│ 上传完成 ✓ │
│ 返回图片信息和访问链接 │
└────────────────────────────────────────────────────────────────────┘
┌──────────────────────────────────────────────────────────┐
│ 用户输入搜索 │
│ (文本/语义/图片/标签/组合) │
└────────────────────────┬─────────────────────────────────┘
│
┌────────┴────────┐
│ │
▼ ▼
┌───────────────────┐ ┌──────────────────┐
│ 关键词搜索 │ │ 语义搜索 │
│ (MySQL) │ │ (Qdrant) │
│ │ │ │
│ • 标题匹配 │ │ • 向量相似度 │
│ • 标签匹配 │ │ • AI 理解意图 │
│ • 描述匹配 │ │ • 跨语言搜索 │
│ • 全文检索 │ │ • 图像相似度 │
└─────────┬─────────┘ └─────────┬────────┘
│ │
└──────────┬───────────┘
│
▼
┌──────────────────┐
│ 结果融合 │
│ • 权重计算 │
│ • 相关性排序 │
│ • 去重过滤 │
│ • 分页处理 │
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 缓存优化 │
│ (Redis) │
│ • 热门搜索 │
│ • 结果缓存 │
│ • 预取策略 │
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 返回结果 │
│ • 图片列表 │
│ • 相关推荐 │
│ • 搜索建议 │
└──────────────────┘
┌──────────────────────────────────────────────────────────┐
│ PixelPunk 应用层 │
└────────────────────────┬─────────────────────────────────┘
│
┌────────────┼────────────┐
│ │ │
▼ ▼ ▼
┌───────────┐ ┌────────────┐ ┌──────────────┐
│ Vision │ │ Embedding │ │ Moderation │
│ API │ │ API │ │ API │
│ │ │ │ │ │
│ • 图像 │ │ • 文本向量 │ │ • NSFW 检测 │
│ 分类 │ │ • 图像向量 │ │ • 内容审核 │
│ • 对象 │ │ • 语义理解 │ │ • 敏感信息 │
│ 识别 │ │ • 相似度 │ │ • 风险评估 │
└─────┬─────┘ └──────┬─────┘ └──────┬───────┘
│ │ │
└──────────────┼──────────────┘
│
▼
┌──────────────────┐
│ AI 结果处理 │
│ • 结果解析 │
│ • 置信度评估 │
│ • 异常处理 │
│ • 降级策略 │
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 数据持久化 │
│ • 标签存储 │
│ • 向量存储 │
│ • 审核记录 │
└──────────────────┘
┌──────────────────────────────────────────────────────────┐
│ 用户请求 │
└────────────────────────┬─────────────────────────────────┘
│
▼
┌──────────────────┐
│ 1. SSL/TLS │ HTTPS 加密传输
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 2. CORS 检查 │ 跨域请求验证
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 3. 速率限制 │ 防止滥用攻击
│ (Rate Limit) │
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 4. JWT 验证 │ 用户身份认证
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 5. 权限检查 │ RBAC 授权
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 6. 参数验证 │ 输入校验过滤
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 7. 业务处理 │ 安全的业务逻辑
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 8. 审计日志 │ 操作记录追踪
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 返回响应 │
└──────────────────┘
┌─────────────────────────────────────────────────────────┐
│ 请求处理 │
└────────────────────────┬────────────────────────────────┘
│
▼
┌──────────────────┐
│ 1. 浏览器缓存 │ 静态资源 (CDN)
└─────────┬────────┘
│ Miss
▼
┌──────────────────┐
│ 2. Redis 缓存 │ 热点数据
│ • 用户会话 │
│ • 搜索结果 │
│ • 图片元数据 │
└─────────┬────────┘
│ Miss
▼
┌──────────────────┐
│ 3. 数据库查询 │
│ • MySQL │
│ • Qdrant │
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 写入缓存 │ 缓存预热
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 返回数据 │
└──────────────────┘
┌─────────────────────────────────────────────────────────┐
│ 图片上传请求 │
└────────────────────────┬────────────────────────────────┘
│
▼
┌──────────────────┐
│ 1. 快速响应 │ 立即返回上传成功
│ (文件保存) │
└─────────┬────────┘
│
▼
┌──────────────────┐
│ 2. 任务入队 │ Redis Queue
│ • 缩略图生成 │
│ • AI 分析 │
│ • 向量化 │
└─────────┬────────┘
│
┌────────────┼────────────┐
│ │ │
▼ ▼ ▼
┌──────────┐ ┌──────────┐ ┌──────────┐
│ Worker 1 │ │ Worker 2 │ │ Worker 3 │ 并行处理
└─────┬────┘ └─────┬────┘ └─────┬────┘
│ │ │
└────────────┼────────────┘
│
▼
┌──────────────────┐
│ 3. 处理完成 │ WebSocket 通知用户
└──────────────────┘
┌─────────────────────────────────────────────────────────┐
│ API Gateway │
│ (Nginx / Traefik) │
└────────────────────────┬────────────────────────────────┘
│
┌────────────────┼────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌─────────────┐ ┌────────────┐
│ 用户服务 │ │ 图片服务 │ │ 搜索服务 │
│ • 认证 │ │ • 上传 │ │ • 索引 │
│ • 授权 │ │ • 处理 │ │ • 查询 │
│ • 个人信息 │ │ • 存储 │ │ • 推荐 │
└──────────────┘ └─────────────┘ └────────────┘
│ │ │
└────────────────┼────────────────┘
│
┌────────────────┼────────────────┐
│ │ │
▼ ▼ ▼
┌──────────────┐ ┌─────────────┐ ┌────────────┐
│ AI 服务 │ │ 通知服务 │ │ 统计服务 │
│ • 分类 │ │ • 邮件 │ │ • 分析 │
│ • 打标 │ │ • WebSocket │ │ • 报表 │
│ • 审核 │ │ • 推送 │ │ • 监控 │
└──────────────┘ └─────────────┘ └────────────┘
- users - 用户信息
- images - 图片元数据
- categories - 分类体系
- tags - 标签系统
- image_tags - 图片标签关联
- shares - 分享记录
- folders - 文件夹结构
- ai_analysis - AI 分析结果
- image_vectors - 图片向量索引
- 维度: 1536 (OpenAI text-embedding-3-small)
- 距离算法: Cosine
- 分段策略: HNSW
- Session - 用户会话 (TTL: 7天)
- Search Results - 搜索结果 (TTL: 1小时)
- Image Metadata - 图片元数据 (TTL: 24小时)
- Hot Tags - 热门标签 (TTL: 1小时)
- Task Queue - 异步任务队列
- 高性能: 并发处理能力强
- 简洁: 代码简洁，易于维护
- 标准库: 丰富的标准库支持
- 编译型: 部署简单，性能优异
- 响应式: Composition API
- 类型安全: TypeScript 支持
- 生态丰富: 组件库和工具链完善
- 性能优秀: Virtual DOM + Vite
- MySQL: 成熟稳定的关系型数据库
- Qdrant: 专业的向量数据库，支持语义搜索
- Redis: 高性能缓存，支持多种数据结构