文末附完整源码，动动手指就能让你家猫狗穿上队服打冰球！
你有没有想过——
你家那只整天瘫在沙发上的布偶猫，有一天能成为国家冰球队的王牌前锋？
或者你家边牧叼着冰球杆，在冬奥会决赛中一杆制胜？
听起来像科幻片？
不，今天我只用了 Vue3 + Coze AI 工作流，不到 200 行代码，就实现了这个“离谱但合理”的功能：
👉 用户上传一张宠物/人物照片 → 选择队服编号、颜色、位置、持杆手、风格 → 自动生成一个“冰球运动员形象照”！
是不是瞬间觉得：原来 AI 应用开发，也可以这么有趣又简单？
🔥 这不是一个正经项目，而是一场“技术+创意”的狂欢
事情是这样的。
上周看我了场冰球比赛直播，热血沸腾。突然灵光一闪：
“如果能让普通用户上传自家宠物的照片，AI 自动生成它们穿着队服、挥杆冲刺的样子……那得多好玩？发朋友圈绝对爆赞！”
于是，说干就干！
我决定用最熟悉的前端框架 Vue3（组合式 API + <script setup>） 搭建界面，再通过调用 Coze 平台的工作流 API 实现 AI 图像生成能力。
结果呢？
✅ 做出来了！
✅ 用户体验丝滑！
✅ 老板看完说：“这可以做个小程序搞联名活动！”
今天我就把这套「从零打造 AI 趣味应用」的全过程分享给你，保证你看完也能 30 分钟内复刻一个属于自己的 AI 玩意儿！
🧱 技术栈一览：轻量却强大
- 前端框架：Vue3 + Composition API（
ref,onMounted） - UI 构建：原生 HTML/CSS，无额外库，极致轻量化
- AI 能力平台：Coze（字节出品，类似低代码版 Midjourney + Node-RED）
- 核心逻辑：
- 文件预览 → 图片上传至 Coze → 触发工作流 → 获取生成图
- 关键技能点：
FileReader实现本地预览FormData提交文件fetch调用第三方 API- 状态管理（上传中 / 生成中 / 成功）
别被这些术语吓到，下面我会用“讲故事”的方式带你一步步走完流程。
🖼️ 第一步：让用户看到自己传了啥 —— 图片预览怎么做？
我们都有过这种经历：
点“上传图片”，然后……黑屏？没反应？不知道是不是传成功了？
用户体验直接扣分！
所以第一步，我们要做一个 即时预览功能。
<input type="file" ref="uploadImage" accept="image/*" @change="updateImageData" />
<img :src="imgPreview" alt="" v-if="imgPreview">
配合 JS 中的 FileReader：
const updateImageData = () => {
const file = uploadImage.value.files[0];
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
imgPreview.value = e.target.result; // base64 字符串，可直接显示
};
};
💡 小知识：readAsDataURL 会把图片转成 base64 编码字符串，可以直接作为 img 标签的 src 使用，无需请求服务器。
效果就是：
你刚选好照片，它立刻出现在页面上，仿佛在说：“嘿，我已经准备好了！”
☁️ 第二步：把图片“交给 AI” —— 如何上传到 Coze？
Coze 不允许你直接把本地文件丢给它的图像生成模型。
必须先 上传到它的文件系统，拿到一个唯一的 file_id，才能继续下一步。
这就像是去银行办业务：
你不能直接说“我要取钱”，得先刷卡、验证身份、拿号排队。
所以我们需要调一次 /v1/files/upload 接口：
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
};
📌 注意事项：
PAT Token是你在 Coze 平台生成的个人访问令牌（Settings > Personal Access Token）- 记得加
.env文件保护隐私：VITE_PAT_TOKEN=your_token_here
🤖 第三步：启动 AI 工作流 —— 让想象力起飞！
拿到了 file_id，接下来就是重头戏：
触发 Coze 的 Workflow（工作流）来生成图片！
📚 先看看这个工作流长什么样？
我在 Coze 上搭建了一个名为《冰球运动员生成器》的工作流，结构如下：
🎯 关键设计思想：
- 双线并行：一边处理你的参数（编号、颜色、风格），一边让 AI “看懂”你上传的图片。
- 容错机制：比如你忘了填编号，系统自动补默认值，不至于崩溃。
- 特征融合：不是简单贴个滤镜，而是真正理解原图内容 + 新指令，生成更合理的图像。
💬 发起请求
我们只需要调用 Coze 的运行接口即可：
const parameters = {
picture: JSON.stringify({ file_id }),
style: style.value,
uniform_number: uniform_number.value,
uniform_color: uniform_color.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: '7586136877033324607', // 我的工作流 ID
parameters
})
});
等待返回后解析结果：
const ret = await res.json();
if (ret.code !== 0) {
status.value = ret.msg;
return;
}
const data = JSON.parse(ret.data);
imgUrl.value = data.data; // 生成的图片地址
status.value = '';
整个过程就像按下火箭发射按钮：
燃料加注（上传）→ 点火倒计时（参数校验）→ 升空（AI 生成）→ 成功入轨（返回图片）🚀
🎨 支持多种艺术风格？当然可以！
你以为只是换个队服那么简单？
No no no～
我们的工作流支持 7 种画风切换：
| 风格 | 效果预览 |
|---|---|
| 写实 | 像真人在打球 |
| 乐高 | 变成积木小人 |
| 国漫 | 中国风武侠感 |
| 日漫 | 二次元热血少年 |
| 油画 | 像博物馆藏品 |
| 涂鸦 | 街头潮流范儿 |
| 素描 | 手绘草图质感 |
只需前端一个下拉框搞定：
<select v-model="style">
<option value="写实">写实</option>
<option value="乐高">乐高</option>
<option value="国漫">国漫</option>
<!-- ... -->
</select>
传给 AI 后，它就会根据指令调整生成策略。
比如选“乐高”，AI 会自动强化块状结构、高对比色彩；选“素描”则减少颜色、强调线条。
📱 最终效果展示
想象一下这个场景：
👩🦰 用户小美上传了她家金毛犬的照片，设置为：
- 队服编号：10
- 颜色：红色
- 位置：前锋
- 持杆：右手
- 风格：日漫
点击【生成】按钮后几秒钟……
点赞瞬间破百，评论区炸锅：
“求教程！”
“能不能给我家鹦鹉也来一套？”
“建议出联名盲盒！！”
🛠️ 开发启示录：为什么说这是未来开发的新范式？
这次项目让我深刻意识到：
现在的前端开发者，已经不只是“切图仔”或“表单搬运工”。
我们正在成为 “AI 应用架构师”。
以前你要做图像生成，得学 Stable Diffusion、部署 GPU 服务器、写提示词工程……门槛极高。
而现在？
只要你懂 fetch 和 FormData，就能调用世界级 AI 能力。
这就像：
- 昔日武士要亲自铸剑 → 今日战士只需按下枪械扳机
- 昔日程序员要手写汇编 → 今日用 Python 一行搞定
工具越强，创造力越自由。
📦 完整代码开源（可直接运行）
我把全部代码整理好了，放在 Gitee 上，克隆即用：
git clone https://gitee.com/little-xiaoman/lesson_zp/tree/master/ai/app/iceball
cd ice-hockey-ai-generator
npm install
npm run dev
VITE_PAT_TOKEN=your_coze_pat_token
🎁 彩蛋时间：还能怎么玩？
这个项目只是开始。你可以轻松扩展出更多玩法：
- 🐱 宠物全明星赛：生成猫咪守门员 vs 狗狗前锋
- 👨👩👧 家庭冰球队：全家福变身职业球员
- 🎮 游戏角色定制：上传自拍，生成你的虚拟运动员形象
- 🎉 社群运营神器：冰球协会用来做粉丝互动活动
甚至可以接入微信公众号、做成 H5 页面，一键分享。
✅ 总结：三个关键词掌握 AI 应用开发
| 关键词 | 解释 |
|---|---|
| 输入感知 | 让用户清楚当前状态（预览、加载提示） |
| API 编排 | 把复杂的 AI 流程拆解为简单的 HTTP 请求 |
| 创意优先 | 技术服务于想法，有趣的才是传播的 |
❤️ 写在最后
曾经，我们以为 AI 会取代程序员。
但现在我发现：
AI 替代的不是程序员，而是那些不愿意拥抱变化的人。
当你学会把 Vue 的表单和 Coze 的工作流连接起来，你就不再是单纯的“写代码的人”，而是：
一个能用技术实现奇思妙想的产品创造者。
所以下次当你看着空白编辑器发呆时，不妨问自己一句：
“如果我的用户上传一张照片，我能让他们笑出来吗？”
也许，下一个爆款 AI 应用，就藏在这个问题里。
🎁 Gitee 源码：(https://gitee.com/little-xiaoman/lesson_zp/tree/master/ai/app/iceball)
👉 快去试试把你家主子变成冰球 MVP 吧！评论区等你们的神图~ 😎
#AI应用 #Vue3实战 #Coze工作流 #前端进阶 #趣味编程 #掘金创作者计划
