本页目录
功能介绍功能说明交互流程动态数据集模块工作原理1. 本地 AI 模型初始化2. 拉取标签列表3. 生成像素图4. 更新对话消息流5. 收藏与发送

AI 文生图On-App AI

功能介绍

AI 像素屏文生图模块通过 On-App AI 端侧模型 实现像素图的本地生成，无需依赖云端推理能力。用户仅需选择标签，即可在 1~2 秒内实时生成像素风格图像，并支持收藏与蓝牙下发到设备端展示。

该模块适用于各种像素屏设备（车载屏、时钟屏、门铃屏、自定义像素屏等），满足用户对个性化像素图案的创作需求。

功能说明

  1. 标签生成图像

用户点击标签（如“枫树”“小鸟”“表情”等）后，客户端会调用 本地 AI 模型，生成对应尺寸的像素图片。

  1. 收藏图片

在生成的图片上点击收藏按钮，可将图像保存进本地图库，便于再次使用。

  1. 图片发送到设备（蓝牙透传）

点击图片上的“发送预览”按钮，会将生成的像素图通过 蓝牙大数据传输 发送给设备侧进行实时展示。

交互流程

sequenceDiagram
    participant U as 用户
    participant UI as 前端页面
    participant AI as 本地AI模型
    participant Dev as 设备


    U->>UI: 进入 AI 绘图页面
    UI->>UI: 检查模型是否初始化
    alt 未初始化
    UI->>AI: 调用 pixelImageInit 初始化模型
    AI-->>UI: 初始化成功
    UI->>AI: fetchPixelImageCategoryInfo 获取标签数据
    AI-->>UI: 返回标签列表
    else 已初始化
    UI->>AI: fetchPixelImageCategoryInfo 获取标签数据
    end


    U->>UI: 点击选择某个标签
    UI->>UI: 更新消息流（用户消息 + 待生成占位图）
    UI->>AI: generationPixelImage(label)
    AI-->>UI: 返回生成图片路径
    UI->>UI: 更新消息流显示图像


    U->>UI: 点击收藏按钮
    UI->>UI: 存入本地图库


    U->>UI: 点击发送预览按钮
    UI->>Dev: 蓝牙透传发送图片
    Dev-->>UI: 显示确认

动态数据集

flowchart LR
    %% --- Business Definition Module ---
    subgraph BD[业务定义]
        A[定义类目] --> B[定义标签]
        B --> C[参考图]
    end

    %% --- T2I Generation Module ---
    subgraph TG[文生图模型生成]
        C --> D[图像预处理]
        D --> E[提示词反推]
        E --> F[图像生成]
    end

    %% --- Dataset Output Module ---
    subgraph DS[数据集]
        F --> G["图像数据集\n（图像数据 + 图像标签）"]
    end

自定义像素图数据集流程说明：

  • 定义类目：例如水果类目，表情类目。
  • 定义标签：例如牛油果。
  • 参考图：选择像素风格的图像作为参考图。
  • 图像预处理：抠图处理，保留主体部分画面。
  • 提示词反推：将图像反推提示词，得到文生图的提示词。
  • 图像生成：利用提示词批量生成图像。
  • 图像数据集：包括图像数据和图像标签。

模块工作原理

模块核心基于以下逻辑：

1. 本地 AI 模型初始化

进入页面时：

if (!hasModelInit) {
  pixelImageInit(); // 初始化本地 AI 模型
  fetchPixelImageCategoryInfo(); // 拉取标签
}

2. 拉取标签列表

本地模型初始化完成后，会返回可用标签：

const labelInfo = await fetchPixelImageCategoryInfo();
dispatch(updateLabelAsync(labelInfo));

3. 生成像素图

点击标签后，通过客户端本地模型生成图片：

generationPixelImage({
  deviceId: devInfo.devId,
  label,
  imageWidth: 462,
  imageHeight: 462,
  outImagePath: localPath,
});

4. 更新对话消息流

模块以聊天形式展示生成过程：

  • 添加用户消息

  • 添加“生成中”占位消息

  • 替换为真实图像内容

updateMessages([...messages, newMsg]);

5. 收藏与发送

收藏： 将图片路径加入本地图库存储。

发送到设备： 通过蓝牙透传：

sendImageToDevice(path);