Vue3 + Coze 工作流：打造“AI冰球宠物”趣味应用

izx888
33 阅读3分钟

Vue3 + Coze 工作流：打造“AI冰球宠物”趣味应用

项目背景

本项目是一个面向冰球协会用户的趣味型前端活动应用，用户上传自家宠物照片后，通过 AI 能力生成其化身冰球运动员的形象图片。生成结果支持自定义队服颜色、号码、位置、持杆手及艺术风格，最终可分享至朋友圈，兼具娱乐性与社交传播力。

整个 AI 能力由 Coze 平台的工作流（Workflow） 提供，前端使用 Vue3 + Composition API 实现交互逻辑和状态管理。

核心功能模块

1. 图片上传与本地预览

为提升用户体验，在图片正式上传前提供本地预览图：

  • 使用 <input type="file"> 获取用户选择的图片文件；
  • 利用 FileReader.readAsDataURL() 将图片转为 Base64 字符串；
  • 绑定到响应式变量 imgPreview，实现即时预览。
const updateImageData = () => {
  const file = uploadImage.value.files[0];
  const reader = new FileReader();
  reader.onload = (e) => imgPreview.value = e.target.result;
  reader.readAsDataURL(file);
}

✅ 优势：避免用户在等待上传完成期间感到“无反馈”，提升操作流畅感。

2. 表单参数收集

用户可通过表单设置以下个性化选项：

参数项类型可选值
队服编号Number任意数字（默认 24）
队服颜色String红、蓝、绿、黄、橙
位置Number守门员(0)、前锋(1)、后卫(2)
持杆手String左手(0)、右手(1)
风格String写实、乐高、国漫、日漫、油画、涂鸦、素描

所有参数通过 ref() 声明为响应式数据，便于后续传递给 AI 工作流。

3. 文件上传至 Coze

由于 Coze 工作流无法直接处理前端传来的原始文件，需先将图片上传至 Coze 的文件服务：

  • 使用 FormData 构造请求体；
  • 设置 Authorization: Bearer <PAT_TOKEN>；
  • 调用 POST /v1/files/upload 接口；
  • 成功后返回 file_id，用于后续工作流调用。
const uploadFile = async () => {
  const formData = new FormData();
  formData.append('file', input.files[0]);
  const res = await fetch(uploadUrl, {
    method: 'POST',
    headers: { Authorization: `Bearer ${patToken}` },
    body: formData
  });
  const ret = await res.json();
  return ret.code === 0 ? ret.data.id : null;
}

🔒 安全提示：PAT_TOKEN（Personal Access Token）应通过环境变量 VITE_PAT_TOKEN 注入，避免硬编码泄露。

4. 调用 Coze 工作流生成图片

获取 file_id 后，构造参数对象并调用工作流：

const parameters = {
  petPhoto: JSON.stringify({ file_id }),
  style: style.value,
  uniform_color: uniform_color.value,
  uniform_number: uniform_number.value,
  position: position.value,
  shooting_hand: shooting_hand.value,
}

const res = await fetch(workflowUrl, {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${patToken}`,
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ workflow_id, parameters })
});
  • 工作流 ID 固定为 7584046463786287155；
  • 返回结果中包含生成图片的 URL（data.data）；
  • 前端将其赋值给 imgUrl，自动渲染输出区域。

⚠️ 注意：根据你提供的错误日志，GET /v1/workflow/run 不存在，说明必须使用 POST 方法调用该接口——当前代码已正确实现。

状态管理与用户反馈

为增强交互体验，引入 status 响应式变量显示操作进度：

  • 初始：空
  • 上传中：“图片上传中...”
  • 生成中：“图片上传成功, 正在生成...”
  • 出错：显示 ret.msg
  • 成功：清空状态，显示图片

这种细粒度的状态提示能显著降低用户焦虑，提升产品专业感。

总结与优化方向

✅ 当前实现亮点

  • 完整的用户操作闭环：从选图 → 预览 → 配置 → 上传 → 生成 → 展示；
  • 良好的错误处理：对上传和工作流调用均做 code !== 0 判断；
  • 安全实践：敏感 token 通过环境变量管理；
  • 响应式 UI：Vue3 Composition API 代码结构清晰、逻辑内聚。

🔧 可优化点

  1. 加载动画：在“生成中”阶段可加入 spinner 动画；
  2. 文件校验：限制图片格式（如仅允许 JPG/PNG）、大小（如 ≤5MB）；
  3. 重试机制：网络失败时提供“重新生成”按钮；
  4. 分享功能：集成微信/朋友圈分享 SDK，一键传播；
  5. 错误日志上报：将 logid（如 202509162051147FCC2ED6A641DFDD4F01）上报监控系统，便于排查。

结语

这个“AI冰球宠物”应用虽小，却完整涵盖了前端交互、文件处理、AI API 调用、状态管理等现代 Web 开发核心技能。借助 Coze 强大的工作流能力，开发者无需深入模型细节，即可快速构建富有创意的 AI 应用。未来可扩展至更多体育主题（如篮球、足球），形成系列化趣味产品矩阵。

avatar
文章
阅读
粉丝