小智AI 如何自定义唤醒词+背景图：原理+流程拆解-程序员充电站

小智AI 从v2.0.x版本开始，支持用户自定义唤醒词+表情包+背景图：

实现效果如下：

有朋友好奇：如何实现的？

本文，将尝试拆解这部分的基本原理和实现思路。

1. 设备端

首先，我们要了解 ESP32 芯片中的数据是如何存储的，已了解的朋友可跳过。

以常见的ESP32s3-N16R8为例，这里的N16R8分别代表啥？

1.1 ESP32中的存储

按照是否在芯片上，存储分两种：

1. 片上存储器（On-chip Memory）

内部ROM（384KB）：存储启动代码和关键的系统函数
内部SRAM（512KB）：用于运行时变量、堆栈等，访问速度快，断电后数据丢失
RTC存储器（16KB）：8KB快速存储器，8KB慢速存储器

可以理解为计算机的内存。

2. 片外存储器（Off-chip Memory）

Flash存储器：容量通常为8MB或16MB，用于存储程序代码、常量数据和文件系统
PSRAM（可选）：伪静态随机存储器，用于扩展运行时内存，通过SPI接口连接

可以理解为计算机的硬盘、虚拟内存。

N16R8就代表 16M 的 Flash 和 8M 的 PSRAM。

硬盘空间有限，为了充分利用，有了分区的概念。

1.2 Flash中的分区

以ESP32s3的 16M 为例，它的分区表如下：

# Name, Type, SubType, Offset, Size, Flags nvs, data, nvs, 0x9000, 0x4000, otadata, data, ota, 0xd000, 0x2000, phy_init, data, phy, 0xf000, 0x1000, ota_0, app, ota_0, 0x20000, 0x3f0000, ota_1, app, ota_1, , 0x3f0000, assets, data, spiffs, 0x800000, 8M

上表中，Offset代表分区的起点，Size代表分区的大小。

那为啥nvs是从0x9000开始呢？

因为，0x1000-0x9000另有他用：

Bootloader（0x1000-0x8000）：存储启动引导程序
分区表（0x8000-0x9000）：描述Flash中各分区的信息

这些分区分别是干啥呢？

NVS分区（0x9000开始，16KB）：存储配置参数和键值对数据
OTA数据分区（0xd000开始，8KB）：存储OTA更新相关的元数据
PHY初始化数据（0xf000开始，4KB）：存储射频校准数据
OTA固件分区（两个，约3.9MB）：存储主应用程序代码，支持固件更新和回滚
Assets分区（8MB）：存储资源文件（图片、音频、字体等）

上述分区，有哪些优势？

充分利用 Flash 的所有空间；
ota_0 和 ota_1 交替使用，当前分区处于"活动"状态，另一分区接收新固件；
分区分工明确，OTA固件分区和Assets分区独立更新，互不干扰

而用来自定义唤醒词+表情包+背景图的，正是这里的Assets分区。

问题来了，Assets分区里放的啥，设备端又如何接收更新呢？

下面来看，服务端要做哪些工作。

2. 服务端

2.1 前端交互页面

前端代码已开源：https://github.com/78/xiaozhi-assets-generator

首先，服务端会读取的设备系统信息：

然后，用户可以自定义的选项如下：

唤醒词：内置 esp32 官方训好的唤醒词
字体
表情
背景图

最后，前端否则把上述文件打包成assets.bin:

这个assets.bin就是塞进Assets分区的文件。

问题来了，放在你浏览器中的assets.bin如何送到设备中去的？

2.2 后端处理逻辑

先看流程图：

具体执行步骤如下:

step 1：前端和后端保持 websocket 长连接，将assets.bin发送到后端服务器，生成一个url

step 2：通过callMcpTool实现工具调用，本质是给后端发 POST 请求。

step 2.1：调用self.assets.set_download_url把url送给设备端。

云端调用该工具后，设备端会将url保存到设置中。

AddUserOnlyTool("self.assets.set_download_url", "Set the download url for the assets", PropertyList({ Property("url", kPropertyTypeString) }), [](const PropertyList& properties) -> ReturnValue { auto url = properties["url"].value<std::string>(); Settings settings("assets", true); settings.SetString("download_url", url); return true; });

step 2.2：调用self.reboot，设备重启。

step 2.3：设备重启后，根据url下载assets.bin到Assets分区。

自此，设备端更新生效。

问题来了，上述工具调用，不都是 MCPTool 吗？

而要实现tool/call，底层还得通过MQTT，所以前端给后端发了 POST 请求后，后端是给MQTT broker的 topic 发了这条指令，最终这条指令，被设备端执行。