用 Vue3 打造趣味 AI 冰球头像生成器：从上传到预览的完整体验

秃头敲码小姐姐
59 阅读3分钟

今天我动手实现了一个超有趣的前端小项目——AI 冰球运动员形象生成器！只需上传一张宠物（或任何人）的照片，再选择队服编号、颜色、场上位置、持杆习惯和艺术风格，就能一键生成专属的冰球明星形象 🎨🏒。这不仅是一次对 Vue3 Composition API 的实战演练，也让我深入理解了文件处理、响应式状态管理与用户体验设计的融合之道。

🧠 核心思路：以数据驱动 UI，聚焦用户状态

整个应用的核心理念非常清晰：一切围绕“状态”展开。我们有以下关键状态：

  • imgPreview：用于实时预览用户刚选中的图片；
  • 表单配置项（如 uniform_number、uniform_color、position 等）；
  • status：提示当前操作阶段（“上传中”、“生成中”…）；
  • imgurl：最终由 AI 生成的图像 URL。

这些状态全部使用 ref() 声明，确保在 Vue3 的响应式系统中自动追踪变化并更新视图。

const uniform_number = ref(10);
const uniform_color = ref('红');
const position = ref(0);
const shooting_hand = ref(0);
const style = ref('写实');
const status = ref('');
const imgurl = ref('');
const imgPreview = ref('');

📤 图片上传与即时预览：FileReader + Base64

为了让用户“所见即所得”，我在用户选择图片后立即展示预览图。这里的关键是 HTML5 的 FileReader API：

const updateImageData = () => {
  const input = uploadImage.value;
  if (!input.files || input.files.length === 0) return;
  
  const file = input.files[0];
  const reader = new FileReader();
  reader.readAsDataURL(file); // 转为 base64 字符串
  reader.onload = (e) => {
    imgPreview.value = e.target.result; // 赋值给响应式变量
  };
};

🌟 小知识：readAsDataURL() 返回的是形如 data:image/png;base64,... 的字符串，可直接作为 <img> 的 src，无需额外请求服务器！

这样，即使图片尚未上传到后端，用户也能立刻看到自己选了什么，大大提升了交互信心 ✅。

⚙️ 表单配置：细粒度控制生成风格

用户可通过下拉菜单和数字输入框，精细定制 AI 输出效果：

  • 队服编号：数字输入（默认 10 号）；
  • 队服颜色：红 / 蓝 / 绿 / 粉；
  • 场上位置：守门员 / 前锋 / 后卫；
  • 持杆手：左手 or 右手；
  • 艺术风格：写实、乐高、国漫、日漫、油画、涂鸦、素描……

这些选项未来将作为参数传递给后端的 AI 工作流（比如通过 Coze 平台），驱动图像生成逻辑。

🚀 “生成”按钮：连接前端与 AI 能力

点击“生成”后，应用会先更新状态为“图片上传中...”，后续可在此处集成真正的 API 调用：

const generate = async () => {
  status.value = '图片上传中...';
  // TODO: 调用 AI 工作流 API，传入 base64 图片 + 表单参数
  // const result = await fetch('/api/generate', { ... });
  // imgurl.value = result.image_url;
  // status.value = '生成成功！';
};

虽然目前只是占位逻辑，但架构已预留好扩展点，随时可接入真实 AI 服务 🔌。

🎨 UI 与体验：简洁、直观、有反馈

  • 使用 flex 布局实现左右分区：左侧配置区 + 右侧结果预览；
  • 按钮明确标注“生成”，避免用户困惑；
  • 状态文字实时反馈进度（“上传中…”），减少等待焦虑；
  • 预览图与生成图均居中显示，视觉舒适。

💡 用户体验黄金法则：让用户知道“系统正在工作”，而不是面对一片空白干等。

🌈 总结：小项目，大收获

这个看似简单的冰球头像生成器，其实涵盖了现代前端开发的多个核心技能点：

  • Vue3 Composition API 的熟练使用；
  • 文件 API 与 Base64 编码实践；
  • 响应式状态管理；
  • 用户体验细节打磨；
  • 与 AI 后端服务的对接准备。

更重要的是——它有趣！能激发用户上传、尝试、分享的欲望，这正是优秀 Web 应用的灵魂所在 ❤️。

下一步，我打算接入真实的 AI 工作流，让这张宠物照片真的变成穿着红队10号球衣、右手持杆、日漫风格的冰球前锋！你准备好让你的猫主子上场了吗？🐱‍🏒

技术很酷，但让技术变得好玩，才是真正的魔法✨。

avatar
文章
阅读
粉丝