我在 Vue3 里给猫穿上了冰球护具——一个还没做完但超上头的 AI 小项目

wwwwW
48 阅读3分钟

我在 Vue3 里给猫穿上了冰球护具——一个还没做完但超上头的 AI 小项目

“你家主子能打冰球吗？”
——现在，答案是：只要我点下“生成”。

这不是营销话术，这是我昨晚熬夜写到凌晨三点的真实进展。今天想和你聊聊这个我正在做的小玩意儿：用 Vue3 + Coze AI 工作流，把宠物照片变成冰球运动员形象。它还没上线，但已经让我自己笑出声好几次。

🧠 为什么做这个？因为“好玩”本身就是生产力

冰球协会想找点轻量互动玩法，我想：不如让用户上传自家宠物，AI 给它套上冰球装备？守门员、前锋、后卫任选，红蓝绿白黑队服可配，还能指定“左手持杆”还是“右手开火”——甚至支持乐高风、国漫风、油画风输出。

这不比普通滤镜有意思多了？

关键是：它必须快、直观、有反馈。用户不能点完“生成”就干等十秒，一脸懵：“到底跑没跑？”

所以，前端体验成了第一战场。

💻 代码怎么写的？来看几个关键设计

我用的是 Vue3 的 <script setup> + Composition API，干净利落，状态一目了然。

1. 图片预览：不让用户猜

大图上传慢？先给预览！
我用 FileReader.readAsDataURL() 把文件转成 Base64，立刻渲染到 <img :src="imgPreview">：

const updateImageData = () => {
  const input = uploadImage.value;
  if (!input?.files?.length) return;

  const file = input.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = (e) => {
    imgPreview.value = e.target.result; // 响应式更新，预览即刻出现
  };
};

用户一选图，马上看到“主角登场”——心理预期稳了。

2. 表单状态：全靠 ref 驱动

所有配置项都是 ref，天然响应式：

const uniform_number = ref(10);
const uniform_color = ref('红');
const position = ref(0);        // 0: 守门员, 1: 前锋...
const shooting_hand = ref(0);   // 0: 左, 1: 右
const style = ref('写实');

配合 v-model，用户改下拉框，数据自动同步。后续调 API 时，直接打包这些值就行。

3. 生成流程：状态必须透明

最怕“点了没反应”。所以我加了 status 状态提示：

const status = ref('');
const imgUrl = ref('');

const generate = async () => {
  status.value = '图片上传中...';
  
  // TODO: 这里会把 imgPreview（Base64）和表单数据 POST 到 Coze 工作流
  // const res = await api.generate({ image: imgPreview.value, ...otherFields });
  
  // 模拟中...
  await new Promise(r => setTimeout(r, 1500));
  
  status.value = 'AI 正在合成冰球战袍...';
  await new Promise(r => setTimeout(r, 1000));
  
  // 实际会拿到 CDN 图片 URL
  imgUrl.value = 'https://example.com/generated-pet-hockey.png';
  status.value = '';
};

哪怕现在只是模拟，我也要让用户知道：“系统在干活，别急”。

🎨 为什么选择 Coze 工作流？

因为我不想从零训模型。Coze 提供了成熟的图像生成工作流能力——我只需要把 原始图 + prompt（含位置、风格、装备描述） 传过去，它就能返回一张合成好的图。

这意味着：前端专注交互，AI 专注创意。解耦清晰，迭代飞快。

🔜 下一步要加什么？

  • ✅ 真实调用 Coze API（现在是 mock）
  • ✅ 上传进度条 or loading 动画（Base64 虽快，但大图仍需优化）
  • ✅ 生成后一键分享到微信/朋友圈（带项目 logo 水印）
  • ✅ 错误处理：网络失败、AI 超时、图片格式不支持……

最后说句实在话

这个项目很小，但它让我重新感受到：写代码不只是实现需求，更是把一个荒诞又可爱的念头，变成别人手机上能点、能看、能笑出声的真实体验。

你家那只整天睡觉的猫，可能下一秒就在冰面上扑救射门——而这一切，始于几行 Vue3 代码和一次大胆的 fetch 调用。

技术很酷，但让技术变得有趣，才是我们该干的事。

如果你也喜欢这种“边写代码边造梦”的感觉，欢迎一起搞点有意思的 AI 小应用。毕竟，世界需要更多会打冰球的狗。

avatar
文章
阅读
粉丝