在 Coze 中构建“冰球宠物拟人化”AI 工作流：从输入到图像生成的全流程实战

wwwwW
112 阅读6分钟

在 Coze 中构建“冰球宠物拟人化”AI 工作流：从输入到图像生成的全流程实战

项目背景：字节跳动实习生节日活动项目（双十二、圣诞节、元旦），旨在通过 AI 技术提升会员互动体验。用户上传宠物照片，系统自动将其转化为拟人化的冰球运动员形象，结合趣味性与科技感，打造品牌记忆点。

一、项目目标

实现一个端到端的 AI 图像生成工作流，核心功能如下：

  • 用户上传宠物图片
  • 输入角色属性：队服编号、颜色、位置、持杆手、风格
  • 调用 Coze 工作流进行参数处理 + 图像生成
  • 输出一张高还原度的“拟人化冰球宠物”图像

本文将基于您提供的 Coze 工作流图 和 自定义代码节点，深入解析整个流程的设计逻辑与技术细节，突出关键优化点。

二、Coze 工作流架构概览

整体流程图（简化版）：

[开始] → [代码节点] → [图像生成] → [结束]
           ↓
      [imgUnderstand] → [特征提取]

🔍 实际执行顺序：

  • 开始：接收用户上传的图片和参数
  • 代码节点：处理参数，生成标准化输出
  • imgUnderstand：分析图像内容（可选）
  • 特征提取：使用豆包模型提取图像语义信息（如动物种类、表情等）
  • 图像生成：结合文本 prompt 和参考图生成最终图像
  • 结束：返回结果 URL 或 Base64 数据

三、核心组件详解

1. 开始节点（Start Node）

输入字段：

  • picture: 用户上传的宠物照片（文件类型）
  • style: 风格选择（写实 / 卡通 / 国漫 等）
  • uniform_number: 球衣号码（默认 10）
  • position: 位置（0=守门员, 1=前锋, 2=后卫）
  • shooting_hand: 持杆手（0=左手, 1=右手）
  • uniform_color: 球衣颜色（红/蓝/黄）

✅ 支持前端 Vue 页面动态传参，灵活可控。

2. 代码节点（Code Node）—— 核心参数处理逻辑

这是本工作流的灵魂所在，负责将原始输入转换为结构化、标准化的数据。

✅ 代码如下：
const random = (start: number, end: number) => {
    const p = Math.random();
    return Math.floor(start * (1 - p) + end * p);
}

async function main({ params }: Args): Promise<Output> {
    // 如果未指定位置，则随机分配（0~2）
    if (params.position == null) params.position = random(0, 3);
    // 如果未指定持杆手，则随机分配（0~1）
    if (params.shooting_hand == null) params.shooting_hand = random(0, 2);

    const style = params.style || '写实';
    const uniform_number: string = (params.uniform_number || 10).toString();
    const uniform_color = params.uniform_color || '红';

    // 映射数字为中文名称
    const position = params.position === 0 ? '守门员' : 
                    (params.position === 1 ? '前锋' : '后卫');
    const shooting_hand = params.shooting_hand === 0 ? '左手' : '右手';

    // 构建返回对象
    const ret = {
        style,
        uniform_number,
        uniform_color,
        position,
        shooting_hand,
    };

    return ret;
}
🔍 关键设计亮点：
功能实现方式优势
参数补全random() 函数当用户不填时自动填充，提升体验
默认值设置`
数值转文本=== 判断 + 字符串映射避免拼写错误，增强可读性
类型安全TypeScript 类型注解提前发现潜在 bug

💡 建议：未来可扩展为枚举表或配置文件管理，便于维护。

3. imgUnderstand 节点 —— 图像理解（可选）

此节点调用视觉大模型（如豆包·1.5-Pro-32k）对上传的宠物图像进行分析。

作用：

  • 识别动物种类（猫、狗、兔子等）
  • 分析表情、姿态、毛色等特征
  • 输出描述性文本（可用于增强 prompt）

🚀 示例输出：

{
  "content": "一只橙色虎斑猫，眼神专注，耳朵竖立"
}

⚠️ 注意：该节点为非必需，主要用于高级定制化生成，可在后期迭代中启用。

4. 特征提取节点 —— 结合上下文生成 prompt

该节点接收 imgUnderstand 的输出，并结合 代码节点 的参数，生成更精准的 图像生成提示词（prompt） 。

示例 Prompt 构造逻辑：
A {style} image of a cute {animal_type} playing hockey.
The animal is wearing a {uniform_color} jersey with number {uniform_number}.
Position: {position}, holding the stick with {shooting_hand} hand.
On an ice rink, wearing helmet and gear, ready to play.
High detail, vibrant colors, playful expression.

✅ 可根据 imgUnderstand 返回的内容动态插入动物特征，使生成结果更具个性。

5. 图像生成节点（Image Generation）

模型选择：推荐使用 通用 模型或 Stable Diffusion XL，支持以下能力：

  • 图像-to-图像（Img2Img） ：以原始宠物图为参考，保留面部特征
  • 风格控制：通过 style 参数调节画风
  • 文本提示工程：精准控制角色设定
  • 参考图一致性：开启“形象一致”选项，确保生成人物与原图相似
输入示例：
{
  "description": "一只橙色虎斑猫，身穿红色8号球衣，担任守门员，右手持杆",
  "uniform_color": "红",
  "uniform_number": "8",
  "style": "国漫",
  "reference_image_url": "https://example.com/cat.jpg"
}
输出：
  • 生成图像 URL 或 Base64 编码数据
  • 可直接嵌入前端页面展示

6. 结束节点（End Node）

将生成的图像链接或数据返回给前端，供 Vue 页面渲染。

{
  "answer": "https://coze.ai/generated/hockey-cat.png"
}

四、前端 Vue 集成简要说明

<template>
  <div class="container">
    <h2>上传你的宠物，变成冰球明星！</h2>

    <input type="file" @change="handleFileChange" accept="image/*" />

    <div class="inputs">
      <input v-model="number" placeholder="球衣号码" />
      <select v-model="color">
        <option value="红">红</option>
        <option value="蓝">蓝</option>
        <option value="黄">黄</option>
      </select>
      <!-- 其他下拉框略 -->
    </div>

    <button @click="generate">生成</button>

    <img v-if="resultUrl" :src="resultUrl" alt="冰球宠物" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      file: null,
      number: '8',
      color: '红',
      position: 0,
      shootingHand: 1,
      style: '写实',
      resultUrl: ''
    }
  },
  methods: {
    handleFileChange(e) {
      this.file = e.target.files[0]
    },
    async generate() {
      const formData = new FormData()
      formData.append('picture', this.file)
      formData.append('uniform_number', this.number)
      formData.append('uniform_color', this.color)
      formData.append('position', this.position)
      formData.append('shooting_hand', this.shootingHand)
      formData.append('style', this.style)

      const res = await fetch('/api/coze-workflow', {
        method: 'POST',
        body: formData
      })
      const data = await res.json()
      this.resultUrl = data.answer
    }
  }
}
</script>

五、关键亮点总结

特性实现方式优势
低代码 + 高灵活性Coze 编辑器 + 自定义代码快速部署，无需复杂后端
智能参数补全random() 函数 + 默认值用户体验友好
多模态融合图像理解 + 文本 prompt生成结果更自然
风格可控style 参数映射支持国漫、写实等多种风格
形象一致性参考图模式保留宠物原有特征

六、未来优化方向

  1. 引入 LLM 优化 prompt：使用豆包或 Qwen 大模型动态生成更优 prompt
  2. 支持语音输入：用户说“我的猫是8号前锋”，自动解析参数
  3. AR 展示：扫码看宠物在冰球场上滑行
  4. NFT 化：生成专属数字收藏卡，增加分享价值
  5. 排行榜机制：用户上传后可参与“最佳冰球宠”评选

七、结语

通过 Coze 平台的低代码能力与您精心设计的代码节点，我们成功构建了一个高效、稳定、富有创意的“冰球宠物拟人化”AI 工作流。它不仅满足了节日活动的需求，也展示了 AI 在品牌营销中的无限可能。

🎯 核心理念：让技术变得简单，让创意变得无限。

📌 附录：Coze 工作流截图示意

image.png

avatar
文章
阅读
粉丝