🏒 用 Coze + Vue3 把你家主子变成冰球巨星！AI 应用开发实战指南

生椰丝绒拿铁
49 阅读4分钟

“我家猫要是打冰球，一定是守门员——因为它只会在门口蹲着等外卖。”

在 AI 狂飙突进的 2025 年，我们早已不满足于“识别猫狗”这种基础操作。现在，我们要让宠物穿上冰球战袍、手握球杆、眼神坚毅地站在 NHL 赛场上——哪怕它现实中连滑板都不敢站！

今天，就带你用 Vue3 + Coze 工作流，打造一个“宠物变冰球运动员”的趣味 AI 小应用。不仅能上传照片生成酷炫形象，还能自定义队服颜色、号码、持杆手、画风……最后一键分享到朋友圈，收获满屏“666”。

🎯 项目目标：让 AI 给你的毛孩子“整活”

这个应用的核心逻辑非常简单：

  1. 用户上传一张宠物（或自己）的照片；
  2. 前端预览图片，提升体验；
  3. 调用 Coze 的文件上传接口，把图片传到云端；
  4. 再调用 Coze 的工作流（Workflow），传入图片 ID 和用户选择的参数；
  5. 工作流内部用大模型 + 图像生成能力，输出一张“冰球运动员”风格图；
  6. 前端展示结果，用户疯狂截图发群。

听起来是不是有点像“魔法”？其实，背后全是 API 和状态管理的精密配合。

🧱 技术栈：轻量但强大

  • 前端框架：Vue3（<script setup> + Composition API）

  • AI 平台：Coze（字节跳动推出的 AI 应用开发平台）

  • 核心能力：

    • 文件上传（FormData + fetch）
    • 工作流调用（带参数的 POST 请求）
    • 响应式状态管理（ref 控制 loading、图片 URL 等）

💡 为什么选 Coze？
因为它把复杂的 AI 模型链路封装成了“工作流”，你只需传参，就能获得结果。不用写一行 Python，也不用部署 GPU 服务器——简直是前端工程师的 AI 入口！

🖼️ 第一步：图片预览 —— 让用户知道“我在干啥”

用户上传一张 10MB 的高清猫照，网络慢点可能要几秒。如果页面毫无反馈，用户会以为“卡了”或者“没传上”。

所以我们先做本地预览：

const imgPreview = ref('');
const uploadImage = ref(null);

const updateImageData = () => {
  const file = uploadImage.value?.files?.[0];
  if (!file) return;
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    imgPreview.value = e.target.result; // base64 字符串直接当 src
  };
};

✅ 效果：用户一选图，立刻看到缩略图，心里踏实了。

☁️ 第二步：上传图片到 Coze

Coze 提供了 /v1/files/upload 接口，支持直接传文件。注意两点：

  1. 必须带 Bearer Token（PAT Token）；
  2. 用 FormData 传文件，不能 JSON。
const uploadFile = async () => {
  const formData = new FormData();
  formData.append('file', uploadImage.value.files[0]);

  const res = await fetch('https://api.coze.cn/v1/files/upload', {
    method: 'POST',
    headers: { Authorization: `Bearer ${import.meta.env.VITE_PAT_TOKEN}` },
    body: formData,
  });

  const ret = await res.json();
  if (ret.code !== 0) {
    status.value = ret.msg;
    return null;
  }
  return ret.data.id; // 拿到 file_id
};

⚠️ 别忘了把 VITE_PAT_TOKEN 放 .env 里，别提交到 Git！

🤖 第三步：调用 Coze 工作流 —— AI 开始“整活”

这才是魔法发生的地方！

你在 Coze 后台创建一个工作流（比如 ID 是 7584046133803843611），里面配置好：

  • 输入：picture（file_id）、style、uniform_color 等；
  • 节点：图像理解 → 提示词生成 → 文生图（如 DALL·E、Stable Diffusion）；
  • 输出：生成图的 URL。

前端只需把参数打包 POST 过去：

const parameters = {
  picture: 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('https://api.coze.cn/v1/workflow/run', {
  method: 'POST',
  headers: {
    Authorization: `Bearer ${patToken}`,
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ workflow_id, parameters }),
});

🎨 用户可玩性拉满：7 种画风任选！

为了让应用更有趣，我们加了这些选项：

参数可选项
队服颜色红、蓝、绿、白、黑
位置守门员、前锋、后卫
持杆手左手、右手
风格写实、乐高、国漫、日漫、油画、涂鸦、素描

想象一下：

  • 你家橘猫穿红色 10 号球衣，左手持杆，日漫画风 → 瞬间变身《灌篮高手》冰球版主角！
  • 你家柯基穿黑色守门员服，油画风格 → 直接进卢浮宫展览！

🚨 踩坑记录：那些让我熬夜的“小细节”

  1. Token 问题
    错误信息：cannot get access token from Authorization header
    → 原因：请求头写错了，必须是 Authorization: Bearer xxx，不能漏 Bearer。
  2. 工作流接口不存在
    错误：GET /v1/workflow/run does not exist
    → 正确方法：用 POST，且 body 是 JSON，不是 query 参数。
  3. file_id 传递格式
    Coze 工作流中如果变量类型是“文件”，需传 { "file_id": "xxx" }，所以前端要 JSON.stringify({ file_id })。

🌟 总结：前端也能玩转 AI 应用！

过去，AI 是算法工程师的专属玩具；
现在，只要你会调 API，就能做出惊艳的 AI 产品。

这个“宠物冰球”应用虽然小，但它完整展示了：

  • 用户交互设计（预览 + loading 状态）
  • 文件上传处理
  • AI 工作流集成
  • 错误处理与反馈

更重要的是——它好玩！而“好玩”，往往是病毒式传播的第一步。

技术不应该是冰冷的代码，而是让人会心一笑的魔法。
用 Coze + Vue3，你离“让全世界看到你家主子打冰球”的梦想，只差一个周末。

快去试试吧！🏒🐱

avatar
文章
阅读
粉丝