---
title: AI 像素屏文生图方案 - AI 文生图
summary: AI 像素屏文生图方案的 AI 文生图模块，基于 On-App AI 端侧能力通过标签实现 1-2 秒像素图生成。涵盖功能介绍（本地生成、收藏夹、BLE 传输到设备）、交互流程时序图、动态数据集生成管线（品类→标签→参考图→预处理→提示词→生成→数据集）及核心代码逻辑（模型初始化、标签获取、图片生成、消息流更新、收藏与发送）。
---

<h2 id="AI文生图" class="nx-font-semibold nx-tracking-tight nx-text-slate-900 dark:nx-text-slate-100 nx-mt-10 nx-border-b nx-pb-1 nx-text-3xl nx-border-neutral-200/70 contrast-more:nx-border-neutral-400 dark:nx-border-primary-100/10 contrast-more:dark:nx-border-neutral-400">AI 文生图<span className="tag_h2">On-App AI</span></h2>

<Image
  src='/images/solution/aiTextToImage/textToImg3.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
    maxWidth: '240px',
    marginTop: '20px',
    marginRight: '10px',
  }}
/>
<Image
  src='/images/solution/aiTextToImage/textToImg5.png'
  style={{
    borderRadius: '10px',
    boxShadow: '0 0 5px rgba(0,0,0,0.3)',
    maxWidth: '240px',
    marginTop: '20px',
  }}
/>


### 功能介绍

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

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

### 功能说明

1. **标签生成图像**

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

2. **收藏图片**

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

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

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


### 交互流程

```mermaid
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: 显示确认
```

### 动态数据集

```mermaid
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 模型初始化

进入页面时：
```ts
if (!hasModelInit) {
  pixelImageInit(); // 初始化本地 AI 模型
  fetchPixelImageCategoryInfo(); // 拉取标签
}
```
#### 2. 拉取标签列表

本地模型初始化完成后，会返回可用标签：
```ts
const labelInfo = await fetchPixelImageCategoryInfo();
dispatch(updateLabelAsync(labelInfo));
```
#### 3. 生成像素图

点击标签后，通过客户端本地模型生成图片：
```ts
generationPixelImage({
  deviceId: devInfo.devId,
  label,
  imageWidth: 462,
  imageHeight: 462,
  outImagePath: localPath,
});
```
#### 4. 更新对话消息流

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

- 添加用户消息

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

- 替换为真实图像内容

```ts
updateMessages([...messages, newMsg]);
```
#### 5. 收藏与发送

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

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

```ts
sendImageToDevice(path);
```