❌

普通视图

发现新文章，点击刷新页面。
昨天 — 2025年12月21日首页

Vue3 项目：宠物照片变身冰球运动员的 AI 应用

✇掘金 前端
作者 ouma_syu
2025年12月21日 17:53

Vue3 项目：宠物照片变身冰球运动员的 AI 应用

这是一个有趣的 AI 图像生成应用，使用 Vue 3 构建前端，用户上传宠物（或任何）照片，选择冰球运动员的队服颜色、编号、位置、持杆手和风格，然后调用 Coze 平台的 AI 工作流生成一张宠物穿冰球装备的趣味图像。

整个业务逻辑清晰、模块化，主要分为图片预览、参数配置、文件上传和AI 生成四个核心部分。

1. 应用整体流程

  1. 用户选择本地图片文件。
  2. 前端立即预览图片（提升用户体验，避免上传等待时感到空白）。
  3. 用户配置冰球运动员参数（队服颜色、编号、位置、持杆、风格）。
  4. 点击“生成”按钮：
    • 先将图片上传到 Coze 服务器，获取文件 ID（file_id）。
    • 然后调用 Coze 工作流 API，传入 file_id 和其他参数。
    • Coze 工作流内部使用 AI 模型（可能是图像融合或文生图变体）生成新图片。
    • 返回生成的图片 URL，前端显示。
  5. 过程中通过状态文本提示用户进度（上传中 → 生成中 → 成功/失败）。

2. 图片预览模块：本地即时预览

  • 为什么需要预览？
    图片上传可能需要时间（尤其是大文件），即时预览让用户知道“操作已生效”，提升体验。同时避免用户误以为卡顿。

  • 实现原理：

    • 使用 HTML <input type="file"> 监听 @change 事件。
    • 获取选中的文件后，使用浏览器内置的 FileReader API 将文件读取为 Base64 编码的 Data URL（字符串形式）。
    • 将这个字符串赋值给响应式变量 imgPreview，绑定到 <img :src="imgPreview"> 上即可显示。

  • 关键代码逻辑：

    const updateImageData = () => {
  const file = uploadImage.value.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);  // 异步读取
  reader.onload = (e) => {
    imgPreview.value = e.target.result;  // Base64 字符串，直接作为 src
  };
};

  • 优点：纯前端操作，无需上传服务器，速度快。

3. 参数配置：响应式表单数据

  • 使用 Vue 3 的 ref 定义响应式变量：
    • uniform_number（编号，默认 7）
    • uniform_color（颜色，默认 “白”）
    • position（位置：0-守门员、1-前锋、2-后卫）
    • shooting_hand（持杆：0-左手、1-右手）
    • style（风格：写实、乐高、国漫 等）
  • 通过 v-model 双向绑定到表单控件，用户修改即时更新这些变量。
  • 这些参数后续会作为工作流输入，直接影响 AI 生成的图像效果。

4. 文件上传到 Coze：获取 file_id

  • 为什么先上传文件？
    Coze 工作流不支持直接接收文件字节流，而是需要一个文件 ID（file_id）。Coze 会自动将 file_id 转换为内部可访问的 URL 供 AI 使用。

  • API 详情：

    • 端点：https://api.coze.cn/v1/files/upload
    • 方法：POST
    • Headers：Authorization: Bearer <PAT_TOKEN>
    • Body：FormData，键为 file，值为文件对象
    • 成功响应：{ code: 0, data: { id: "文件ID" } }

  • 实现逻辑：

    • 创建 FormData，append 用户选择的文件。
    • 使用 fetch 发送请求。
    • 检查 code === 0，返回 file_id，否则显示错误消息。

  • 状态更新：上传前设置 status = "图片上传中..."，成功后更新为“上传成功，正在生成中...”。

5. 调用 Coze 工作流：生成图像

  • API 详情：
    • 端点：https://api.coze.cn/v1/workflow/run
    • 方法：POST
    • Headers：
      • Authorization: Bearer <PAT_TOKEN>
      • Content-Type: application/json
    • Body： 
      {
  "workflow_id": "固定工作流 ID",
  "parameters": {
    "picture": "{\"file_id\": \"上传得到的ID\"}",
    "style": "用户选择的风格",
    "position": ...,
    // 其他参数
  }
}
    • 注意：图片参数必须是 JSON 字符串化的对象 { "file_id": "xxx" }，Coze 会自动解析为文件 URL。
  • 响应处理：
    • 成功：ret.code === 0，ret.data 是字符串（工作流输出），需 JSON.parse(ret.data) 获取实际数据，通常包含生成的图像 URL（如 data.data）。
    • 设置 imgUrl.value = imageUrl，前端显示新图片。
    • 更新状态为“生成成功”或错误消息。
  • 安全与配置：
    • PAT Token（Personal Access Token）通过环境变量 VITE_PAT_TOKEN 注入，避免硬编码。
    • 工作流 ID 固定硬编码（实际项目可配置化）。

6. 用户体验优化点

  • 状态提示：status 变量实时反馈进度和错误。
  • 错误处理：统一检查 API 的 code 字段，非 0 时显示 msg。
  • 布局：左侧输入区（上传 + 参数），右侧输出区（预览 + 生成结果），响应式友好。
  • 扩展性：参数易增减，适合类似“宠物变身其他角色”的变体应用。

总结

这个项目巧妙结合了 Vue 3 的响应式系统、前端文件处理能力和 Coze 的 AI 工作流 API，实现了从上传到生成的完整闭环。

❌
❌