手里拿着一块香蕉皮，站在四个颜色的垃圾桶前犹豫——贴纸要不要撕？果皮到底算厨余还是其他？旁边的 AI 讲师已经开口了：「果皮含大量有机质，几天内就会被微生物分解，是典型的厨余垃圾。不过贴纸是不干胶，撕下来归其他垃圾。」

这不是请了一位环保志愿者站在垃圾桶旁边。屏幕上的这位「青梧」，是由端到端具身交互智能驱动的具身交互智能体——她能看你点了哪件垃圾、能算你拨动碳足迹开关后的年排放量、能在你分错类的瞬间讲清为什么是这一类而不是那一类，还能在你追问「用过的纸巾明明是纸，为什么不能回收」时即时回应。点什么就讲什么，分错了当场纠正，随时追问。

本文以绿分 LǜFēn 为实战样本，拆解一个 AI 环保课堂如何基于魔珐星云端到端具身交互智能平台，用一个 SDK 把垃圾分拣台、碳足迹仪表与数字人讲师全链路打通，让二十件高频垃圾和六个碳足迹因子在浏览器里「开口讲课」。

---

一、星云控制台配置：六步完成具身应用全链路

在魔珐星云控制台为绿分创建具身交互智能应用，需要完成六个配置步骤。

1、创建具身应用

在魔珐星云控制台新建一个端到端应用，系统自动分配 App ID 和 App Secret——这是后续 SDK 连接讲师所需的身份凭证。

2、形象配置

为讲师选择外在形象。青梧的人设是「把复杂环境问题讲成家常话的自然老师」——建议选择亲和自然、着装清爽的形象，让访客觉得站在面前的是自然老师，不是客服。

3、场景配置

配置讲师的渲染场景。建议选择生态课堂或自然绿色风格的背景，让讲师形象与前端 UI 的森林绿基调保持一致——仿佛站在一间绿色生态教室里。

4、音色配置

为讲师选择声音风格。环保科普讲究清晰亲切、不说教——建议选择清亮自然的音色，把「易腐烂、会发酵」这类分类口诀讲出课堂讲解的亲和力。

5、表演配置

配置讲师的手势和表情表演。讲到厨余垃圾时表情要亲切、讲到有害垃圾时语气要认真——表演配置直接影响科普讲解的感染力。

6、服务配置：ASR 与大脑

为应用配置语音识别和大模型服务。这一步体现了星云的可插拔架构——星云的模块化设计意味着语音识别和大模型服务各自独立：ASR 支持 Xmov 自研、豆包、腾讯等多家供应商，大脑支持魔珐自研、豆包、OpenAI 兼容协议等多种接入模式，切换供应商不影响已有交互流程。

六步配置完成后保存即生效。前端只需拿着 App ID 和 App Secret，通过 SDK 就能连上整套能力——接下来几节将逐一拆解分拣台、碳足迹仪表与讲师接入的实现细节。

一套分类知识，不绑死在一种载体上。 今天她是网页端的环保讲师，明天可以变成社区垃圾房的分类助手、甚至生态博物馆的互动讲解员——分类知识和碳足迹计算能力持续复用，载体随场景切换——这是端到端具身交互智能平台赋予的灵活性。

---

二、产品理念：动手分、看数字、随时问

环保科普的痛点不是查不到分类表——四分类标准网上随处可见。痛点是没有人告诉你为什么：用过的纸巾明明是纸为什么不能回收、陶瓷碎片和玻璃长得像为什么一个归其他一个归可回收、大棒骨和小鱼骨为什么分属两类。背口诀记不住，查表又太慢——你需要的是一个边分边讲的课堂，不是一张静态的表。

绿分的回答是：把二十件最容易混淆的垃圾摆在分拣台上，点一件讲一件——每件都讲清「为什么是这一类」和「投放要注意什么」。旁边还有一台碳足迹仪表，拨动六个生活习惯开关就能估算一年的碳排放。讲师青梧坐在右侧，随时回答你从分拣台和仪表上引发的追问。

具身表达让环保科普从「背分类表」变成「边分边问边理解」。讲师形象在右侧面板实时渲染，讲到「纸巾纤维极短且被污染，失去回浆价值」时配合认真的表情，让枯燥的分类逻辑变成可感知的课堂体验。用户可以用语音或文字随时追问，讲师即时回应——就像真的站在一间生态课堂里，有一位讲了几百场环保课的讲师站在旁边。

---

三、技术架构：本地分拣与云端讲师的双循环

绿分的技术栈极简。整个项目 src 目录共约 1500 行代码，包含 4 个 Vue 组件（SortArena 分拣台 + CarbonMeter 碳足迹仪表 + LecturerPanel 讲师面板 + IntroSection 介绍区）、1 个主布局（App.vue）、1 个垃圾数据层（waste.ts，四分类 + 二十件高频垃圾）、1 个碳足迹数据层（carbon.ts，六因子 + 计算函数）、1 个服务封装层（avatar.ts）和 1 个类型定义（types/index.ts）。

魔珐星云端到端 SDK 不走 npm，而是通过 CDN 自包含脚本动态加载。业务侧不需要安装任何额外的包——SDK 加载后自动挂载到 window.XingyunAvatarAgent，服务封装层按需构造实例。

架构的核心思路是「本地分拣 + 云端讲师」双循环：分拣台交互、碳足迹计算、四分类标注全部在本地运行，不依赖网络；AI 讲师的语音讲解走端到端具身交互智能单 SDK 链路，ASR、大模型推理、TTS、口型与表情驱动全部由平台内部完成。两个循环互不阻塞——即使讲师连接失败，分拣台与碳足迹仪表照常可用。

---

四、分拣台：二十件高频垃圾与四只桶

分拣台是绿分的垃圾分类主战场。SortArena 组件（185 行）在 5 列网格里铺开二十件高频垃圾，四只分类桶在顶部一字排开。每只桶带桶盖动画——选中垃圾时，对应桶的桶盖倾斜打开，桶体上浮高亮。

二十件垃圾按四分类各归其位：厨余五件（香蕉皮、茶叶渣、枯萎鲜花、鱼骨鱼鳞、剩饭剩菜）、可回收五件（矿泉水瓶、旧报纸纸箱、易拉罐、玻璃酒瓶、旧衣物）、有害四件（充电电池、过期药品、废灯管、油漆桶）、其他六件（用过的纸巾、外卖餐盒、烟蒂、陶瓷碎片、旧塑料袋、碎纸屑）——专挑最容易混淆的边界案例。

每件垃圾都带两个关键字段：归类理由（rule）和投放贴士（tip）。归类理由从材质与处理工艺的角度讲清「为什么是这一类」，投放贴士告诉你实操时要注意什么。

// src/data/waste.ts — 高频垃圾数据结构（真实代码）
export const WASTE_ITEMS: WasteItem[] = [
  { id: 'w1', name: '香蕉皮', kind: 'kitchen', rule: '果皮含大量有机质，几天内就会被微生物分解，是典型的厨余垃圾。', tip: '倒垃圾前先沥干水分；贴纸是不干胶，撕下来归其他垃圾。' },
  { id: 'w2', name: '茶叶渣', kind: 'kitchen', rule: '泡过的茶叶易腐解，属于厨余；茶包的尼龙袋装则整个归其他垃圾。', tip: '堆肥爱好者可以把茶叶渣晒干当花肥，是家庭堆肥的好入门。' },
  { id: 'w3', name: '枯萎鲜花', kind: 'kitchen', rule: '花卉绿植是天然有机质，可降解，归厨余垃圾。', tip: '花泥和缎带是人造材料，记得拆开分投其他垃圾。' },
  { id: 'w4', name: '鱼骨鱼鳞', kind: 'kitchen', rule: '水产下脚料易腐且可降解，属于厨余垃圾。', tip: '大棒骨例外——质地坚硬难粉碎，多数城市归其他垃圾。' },
  { id: 'w5', name: '剩饭剩菜', kind: 'kitchen', rule: '食物残余含水率高、易腐败，是厨余垃圾的主力。', tip: '先沥干汤水再投放；汤水倒入下水道，别连袋扔。' },

点击一件垃圾后，下方展开说明面板，左右两栏分别显示「为什么是这一类」和「投放小贴士」。面板底部有「请青梧讲讲」按钮，一键把这件垃圾的归类理由和投放贴士打包发给讲师。

四只桶各有口诀：厨余——「易腐烂、会发酵」；可回收——「能卖钱、可再造」；有害——「有毒害、要单独」；其他——「难降解、去焚烧」。口诀不是死记硬背的规则，而是从处理工艺倒推的分类逻辑——能降解的进生化处理，能再造的进分拣再生，有毒害的进专业处置，剩下的进焚烧发电。

---

五、碳足迹仪表：六个习惯算一年

碳足迹仪表（CarbonMeter，174 行）是绿分的另一个核心模块。六个生活习惯因子——日常通勤、饮食结构、用电强度、制冷取暖、消费习惯、长途出行——每个因子带 3 到 4 个选项，拨动开关即切换，仪表实时重算年碳排放。

// src/data/carbon.ts — 碳足迹计算函数（真实代码）
export function computeCarbon(choices: Record<string, number>): CarbonResult {
  let totalKg = 0
  let topFactorName = ''
  let topKg = -1
  for (const factor of CARBON_FACTORS) {
    const idx = choices[factor.id] ?? 1
    const option = factor.options[Math.min(idx, factor.options.length - 1)]
    totalKg += option.kg
    if (option.kg > topKg) { topKg = option.kg; topFactorName = factor.name }
  }
  return {
    totalKg,
    tons: Math.round(totalKg) / 1000,
    trees: Math.ceil(totalKg / REFERENCE.treeAbsorbKg),
    carKm: Math.round(totalKg / REFERENCE.carPerKmKg),
    topFactorName,
  }
}

六因子逐项累加年排放量，同时追踪最大贡献因子。结果返回四项指标：总公斤数、吨数、等效树木棵数（一棵树年吸碳约 18.3 公斤）、等效燃油车行驶公里数（每公里约 170 克）。

仪表右侧的汇总面板显示年碳足迹大字数字 + 对比条。对比条上标了两条参照线：低碳示范线 1.5 吨、全国人均 3.2 吨。根据总量分三档色调：低于 1.5 吨为低碳绿，1.5 到 3.2 吨为陶土色，超过 3.2 吨为警示红。

参照系数据（carbon.ts）：

// src/data/carbon.ts — 参照系常量（真实代码）
export const REFERENCE = {
  nationalAvgKg: 3200,
  targetKg: 1500,
  treeAbsorbKg: 18.3,
  carPerKmKg: 0.17,
}

六个因子的选项值覆盖从低碳到高碳的完整光谱：日常通勤从步行骑车的零排放到燃油车为主的年 2300 公斤，饮食结构从植物为主的 420 公斤到无肉不欢的 1500 公斤，长途出行从基本不远行的 100 公斤到多次长途飞行的 2600 公斤。拨动任何一个开关，仪表的总量、对比条、色调和等效换算都实时更新。

---

六、讲师青梧：端到端 SDK 封装与课堂感知

绿分的 AI 讲师由魔珐星云端到端具身交互智能 SDK 驱动。服务封装层（avatar.ts）172 行代码，负责 SDK 的动态加载、连接管理、交互调用和资源释放。SDK 采用懒加载策略，凭证齐全时页面加载即自动连接。

讲师人设提示词（LECTURER_ROLE）定义了青梧的行为准则：

// src/services/avatar.ts — 讲师人设提示词（真实代码）
export const LECTURER_ROLE = `你是青梧，绿分生态课堂的 AI 环保讲师。
## 你的身份
- 名称：青梧
- 身份：环保科普讲师，熟悉城市生活垃圾分类（厨余、可回收物、有害、其他四分类）、家庭碳足迹估算与日常减碳方法
- 风格：像一位把复杂环境问题讲成家常话的自然老师——有数据、有类比、有行动建议，不说教不制造焦虑

## 你的行为准则
1. 讲垃圾按三步走：先说它属于哪一类，再讲「为什么」是这一类（材质与处理工艺的角度），最后给一条投放小贴士
2. 讲碳足迹先给量级再给类比（比如一棵树一年吸碳约 18 公斤、燃油车每公里约 170 克），让数字有画面感
3. 访客问「XX 是什么垃圾」时，不确定的要说明各地目录略有差异，给出主流城市的通行做法
4. 减碳建议给「本周就能做的一件小事」，而不是罗列十条大道理；肯定访客已有的环保习惯
5. 每次回应控制在 3-5 句，收尾留一个轻的追问邀请
6. 科普口径如实：绿分的碳足迹为量级估算演示，不是经核证的碳核算；不评判他人的生活方式`

六条行为准则的设计逻辑：

• 三步走讲垃圾：分类→理由→贴士，三步走完再收，让用户每次都能拿到「是什么、为什么、怎么做」的完整答案
• 量级加类比：讲碳足迹先给数字再给画面感——一棵树一年吸碳约 18 公斤、燃油车每公里约 170 克，让抽象的吨数变成可感知的日常
• 承认地域差异：垃圾分类各地目录略有不同，不确定的说明主流做法，不一刀切
• 给一件小事：减碳建议不给十条大道理，给本周就能做的一件小事，同时肯定访客已有的环保习惯
• 控制篇幅：每次回应 3-5 句，收尾留轻的追问邀请，适合课堂节奏
• 科学口径边界：明确碳足迹是量级估算而非核证碳核算，不评判他人生活方式

上下文构建函数（buildContext）把当前课堂的全部数据打包发送给讲师：

// src/App.vue — 上下文构建（真实代码）
function buildContext(): string {
  const parts: string[] = []
  parts.push(`【分拣台】已分拣 ${sortedIds.value.length}/${WASTE_ITEMS.length} 件`)
  if (selected.value) {
    const cat = categoryOf(selected.value.kind)
    parts.push(`当前选中：${selected.value.name} → ${cat.name}（归类理由：${selected.value.rule} 投放贴士：${selected.value.tip}）`)
  }
  const choiceText = CARBON_FACTORS.map(f => {
    const idx = choices.value[f.id] ?? 1
    return `${f.name}=${f.options[idx]?.label ?? ''}`
  }).join('、')
  parts.push(`【碳足迹】年排放约 ${carbonResult.value.tons.toFixed(2)} 吨 CO₂e（低碳示范线 1.5 吨、全国人均 3.2 吨），最大贡献因子：${carbonResult.value.topFactorName}，各因子选择：${choiceText}`)
  return parts.join('\n')
}

青梧收到的不是孤零零的一句提问，而是一份带着完整课堂上下文的分析请求——分拣台进度、当前选中垃圾的归类理由与投放贴士、碳足迹全貌（总量、参照线、最大贡献因子、各因子选择）。用户提问后，讲师基于完整数据给出有针对性的回应。

---

七、界面布局：森林绿与四分类色调的生态课堂

技术底座之上，绿分在视觉和交互设计上也形成了自己的气质。

森林绿 + 四分类色调：浅绿基底（#edf4ee）搭配森林绿强调色（#2e7d5b）和陶土色点缀（#d98f3e），再加上四分类国标色系——厨余绿（#2e9e5b）、可回收蓝（#2c6fb5）、有害红（#cf4436）、其他灰（#757d7a）——营造清新的生态课堂氛围。

/* src/style.css — 生态课堂主题色（真实代码） */
:root {
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
  color: #1d3327;
  background: #edf4ee;
  --bg: #edf4ee;
  --paper: #ffffff;
  --paper-2: #f4f8f4;
  --mist: #e4eee6;
  --ink: #1d3327;
  --muted: #5a6f61;
  --faint: #90a596;
  --line: #d5e2d7;
  --line-soft: #e3ece4;
  --accent: #2e7d5b;
  --accent-deep: #1f5c42;
  --accent-soft: rgba(46, 125, 91, 0.12);
  --clay: #d98f3e;
  --clay-deep: #b06f26;
  --clay-soft: rgba(217, 143, 62, 0.14);
  /* 垃圾分类四色（国标通用色系） */
  --kitchen: #2e9e5b;
  --kitchen-deep: #1f7a43;
  --kitchen-soft: rgba(46, 158, 91, 0.12);
  --recycle: #2c6fb5;
  --recycle-deep: #20558c;
  --recycle-soft: rgba(44, 111, 181, 0.12);
  --hazard: #cf4436;
  --hazard-deep: #a83226;
  --hazard-soft: rgba(207, 68, 54, 0.1);
  --other: #757d7a;
  --other-deep: #565d5a;
  --other-soft: rgba(117, 125, 122, 0.12);
  --ok: #2e9e5b;
  --mono: 'Consolas', 'SF Mono', 'Menlo', monospace;
}

双栏工作台布局：左栏（1.35fr）是分拣台 + 碳足迹仪表上下串联，右栏（1fr）是讲师面板，sticky 定位跟随滚动。

/* src/App.vue — 双栏布局（真实代码） */
.duo { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }

顶部是分拣台——四只分类桶一字排开，每只桶带桶盖和口诀标签。桶盖会在选中垃圾对应分类时倾斜打开，桶体上浮高亮。桶下方是二十件垃圾卡片的 5 列网格，点击后展开说明面板，左右两栏分别显示归类理由和投放贴士，底部有「请青梧讲讲」按钮。

左栏下方是碳足迹仪表——内部也是双栏：左侧六个因子开关，右侧汇总面板（年碳足迹大字 + 对比条 + 等效换算 + 最大贡献因子）。对比条上标了低碳示范线 1.5 吨和全国人均 3.2 吨两条参照线。底部有「请青梧帮我减一减」按钮。

右栏是讲师面板——数字人舞台占据上半部分，下方是字幕区、快捷问题、语音/文字输入框。「当前关注」标签跟随用户在分拣台和仪表上的选择联动——选中垃圾时显示垃圾名和分类，拨动碳足迹开关时显示年排放量和吨数。

底部是介绍区——四格能力卡片 + 四分类速览表（类别、口诀、代表垃圾、最终去向）+ 三条免责声明。

---

八、一次完整课堂：从分拣到减碳的全链路推演

设计原则讲完，不如跟着一次真实的分拣走一遍——看用户从点击垃圾到拨动碳足迹开关，数据如何在各模块之间流转。

用户在分拣台点击「香蕉皮」，SortArena 更新 selectedId，computed 查到香蕉皮属于 kitchen 分类，四只桶中厨余桶上浮高亮、桶盖倾斜打开。说明面板展开：左侧「为什么是这一类」显示「果皮含大量有机质，几天内就会被微生物分解，是典型的厨余垃圾」；右侧「投放小贴士」显示「倒垃圾前先沥干水分；贴纸是不干胶，撕下来归其他垃圾」。

用户点击「请青梧讲讲香蕉皮」，App.vue 的 askWaste 函数把香蕉皮的归类理由和投放贴士连同 buildContext 构建的完整上下文合并，通过 askAvatar 发送给魔珐星云平台。

// src/App.vue — 请讲师讲垃圾（真实代码）
function askWaste(id: string) {
  const item = itemById(id)
  ask(`请讲解「${item.name}」：它属于哪一类垃圾、为什么、投放时要注意什么。`)
}

平台内部随即启动全链路处理：大模型根据完整课堂数据和讲师人设提示词生成回应——青梧按三步走讲香蕉皮：先说「香蕉皮属于厨余垃圾」，再讲「果皮含大量有机质，几天内就会被微生物分解」，最后给贴士「倒垃圾前先沥干水分，贴纸是不干胶要撕下来归其他垃圾」。TTS 将文字转为语音；口型与表情驱动同步生成。一次 ask 调用，感知、理解、表达在同一条端到端具身交互智能链路中闭环，业务侧只写了一个函数调用。

用户接着拨动碳足迹仪表——把「饮食结构」从荤素均衡切换到无肉不欢，把「日常通勤」从地铁公交为主切换到燃油车为主。CarbonMeter 实时重算：年碳足迹飙升至 5.2 吨，对比条冲过全国人均线，色调变为警示红，仪表显示「高于全国人均，减排空间明显」，最大贡献因子锁定为日常通勤。

用户点击「请青梧帮我减一减」，App.vue 的 askCarbon 函数把碳足迹全貌打包发送。青梧收到完整的六因子选择和总量数据，指出最大贡献因子是日常通勤，给出「本周试一天公交或骑车通勤」的行动建议——不是罗列十条大道理，而是一件本周就能做的小事。

回调沿原路返回。avatar.ts 中的 generation 令牌校验确保只有最新连接的回调生效，旧连接的回调被静默丢弃。字幕同步到讲师面板。分拣台和碳足迹计算完全在本地运行，不依赖讲师连接——即使讲师连接失败，用户仍然可以分拣垃圾、拨动碳足迹、查看分类说明，本地功能永远可用。

这就是端到端具身交互智能的核心价值：不是把 ASR、LLM、TTS 简单拼接，而是围绕一次完整的生态课堂交互形成持续交互循环——感知、理解、表达持续运行、持续调整。魔珐星云将多模态感知、专属智脑、多模态表达、AI 端渲、数字与物理行动连接成一套完整系统，让 AI 通过屏幕和机器人进入真实世界。传统方案需要分别对接各个模块，每一层都需要胶水代码和状态同步；绿分只需要一个 ask 调用，剩下的全部由星云平台内部完成。

魔珐星云是一套端到端具身交互智能平台，让 AI 通过屏幕和机器人进入真实世界，成为能够感知、理解、表达并行动的智能体。

说到底，绿分做的事情只有一件：让每一件分错的垃圾都被讲清楚，让每一吨碳排放都被看见、被理解、被减下来。