小智AI 如何自定义唤醒词+背景图：原理+流程拆解 - 文章 - 开发者社区

picture.image

猴哥的第 207 期分享，欢迎追看

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

picture.image

实现效果如下：

picture.image

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

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

设备端

首先，我们要了解 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.1 前端交互页面

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

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

picture.image

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

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

picture.image

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

picture.image

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

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

2.2 后端处理逻辑

先看流程图：

picture.image

具体执行步骤如下:

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;  
    });