1. 技术栈 链接到标题

  • 前端：React + Vite + TailwindCSS
  • 后端：Flask + YOLOv8 + CLIP + YoudaoAPI
  • 部署：Cloudflare Pages + Cloudflare Tunnel

2. 前端 链接到标题

  1. 初始化项目

    • 使用 Vite 脚手架快速创建 React 项目
    • 安装依赖：React、TailwindCSS、Vite 插件
    • 配置启动、构建、预览脚本，确保本地开发与生产构建命令统一

  2. 页面结构构建

    • 导航栏（Nav）：左侧 Logo + 应用名称，右侧“关于”“联系”等链接
    • 上传区域：支持点击和拖拽，外观为虚线边框大方框，内部提示文字
    • 预览 & 操作区：展示上传后的图片预览，加载完成后显示“开始识别”按钮
    • 结果展示区：检测框覆盖在图片上方，下方以卡片列表形式展示每个识别结果
    • 通用 UI：全局 Loading 遮罩、Toast 弹窗提示、响应式布局适配移动端

  3. 上传 & 预览逻辑

    • 文件选择：监听 <input type="file"> 的 onChange，并支持外层容器的 onDrop 拖拽事件
    • 图片预览：URL.createObjectURL 生成临时地址渲染 <img>，在 onLoad 中获取真实宽高并保存
    • 调用接口：构造 FormData，将选中文件添加到 file 字段，通过 fetch POST 到后端 /tag
    • 结果过滤：根据返回结果中的 YOLO 置信度和 CLIP 相似度阈值筛选，剔除低置信项
    • 异常提示：空结果时弹出 Toast；网络或服务器错误时显示失败提示

  4. 本地调试

    • 开发服务器：npm run dev 启动 Vite 本地热更新

3. 后端 链接到标题

  1. 环境准备

    • 在项目根目录创建 Python 虚拟环境并激活：
    • 安装核心依赖：

  2. 模型加载与初始化

    • 加载 YOLOv8 用于目标检测，预加载 COCO 类别名称
    • 加载 CLIP 模型用于图像与文本相似度计算
    • 读取本地词表 vocab.csv，构建文本提示列表并批量编码、归一化

  3. 文本预处理与向量计算

    • 使用 CLIP 的 tokenizer 对所有提示短语进行分词
    • 调用 CLIP 模型生成文本向量，并统一做 L2 归一化
    • 将所有文本向量保存在内存，后续对每个检测框生成的图像向量做相似度计算

  4. 接口设计与实现

    • 统一使用 Flask 提供 /tag POST 接口，接收表单上传的图片
    • 构建处理流程

  5. 跨域支持与本地调试

    • 启动后端服务：
    • 查看返回的 JSON 结构，确认字段 name、yoloConf、clipSim、translation 等正确

4. 部署 链接到标题

4.1 前端部署 链接到标题

  1. 创建 Pages 项目

    • 在 Cloudflare 控制台选择 “Pages” → “Create a project”
    • 关联 GitHub 上的 heirenlop/wordcam 仓库

  2. 构建配置

  3. 环境变量设置

  4. 绑定自定义域名

  5. 验证预览

4.2 后端部署 链接到标题

  1. 安装 cloudflared

    curl -L https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb -o cloudflared.deb
sudo dpkg -i cloudflared.deb

  2. 登录并创建隧道

    cloudflared login
cloudflared tunnel create shicijing-backend

  3. 配置隧道 (~/.cloudflared/config.yml)

  • 指定 origincert 路径
  • 填写隧道 ID 和本地服务地址
  1. DNS 路由 
     cloudflared tunnel route dns shicijing-backend api.shicijing.cloud
  2. 启动隧道 
    cloudflared tunnel run shicijing-backend