# @netless/appliance-extend-auto-draw-plugin

一个智能自动绘图插件，用于 Netless Appliance，可自动识别手绘草图并推荐匹配的图标。

## 功能特性

- 🎨 **自动草图识别**：使用铅笔工具绘制时自动分析手绘草图
- 🤖 **双重识别模式**：
  - Google 手写识别 API，基于笔迹数据快速识别
  - OpenRouter 多模态 AI 模型，基于图像的高级识别
- 🎯 **图标推荐**：根据识别结果从 Iconify 获取匹配的图标
- ⚡ **智能替换**：一键将手绘草图替换为专业图标
- ⏱️ **可配置延迟**：可自定义识别触发前的延迟时间（默认：2000ms）

## 安装

```bash
npm install @netless/appliance-extend-auto-draw-plugin
# 或
pnpm add @netless/appliance-extend-auto-draw-plugin
# 或
yarn add @netless/appliance-extend-auto-draw-plugin
```

## 使用方法

### 基础用法

```typescript
import { AutoDrawPlugin } from '@netless/appliance-extend-auto-draw-plugin';

// 创建一个容器用于显示图标建议
const iconsContainer = document.createElement('div');
document.body.appendChild(iconsContainer);

// 初始化插件
const autoDrawPlugin = new AutoDrawPlugin({
  container: iconsContainer,
  delay: 2000, // 可选：识别前的延迟时间（毫秒）
});

// 将插件挂载到你的 appliance control
control.pluginManager.addPlugin(autoDrawPlugin);
autoDrawPlugin.mount();
```

### 使用 OpenRouter API 的高级用法

使用 AI 视觉模型进行更准确的识别：

```typescript
import { AutoDrawPlugin } from '@netless/appliance-extend-auto-draw-plugin';

const iconsContainer = document.createElement('div');
document.body.appendChild(iconsContainer);

const autoDrawPlugin = new AutoDrawPlugin({
  container: iconsContainer,
  apiKey: 'your-openrouter-api-key',
  customModel: 'openai/gpt-4o', // 可选：指定自定义模型
  delay: 2000,
  uploadFile: async (file: File) => {
    // 将文件上传到你的 OSS 服务器并返回 URL
    const formData = new FormData();
    formData.append('file', file);
    const response = await fetch('https://your-oss-server.com/upload', {
      method: 'POST',
      body: formData,
    });
    const data = await response.json();
    return data.url; // 返回图片 URL
  },
});

control.pluginManager.addPlugin(autoDrawPlugin);
autoDrawPlugin.mount();
```

## API

### `AutoDrawPlugin`

#### 构造函数选项

```typescript
interface AutoDrawOptions {
  /** 用于访问 OpenRouter 所有模型的 API 密钥 */
  apiKey?: string;
  /** 自定义使用的模型 */
  customModel?: string;
  /** 用于渲染图标的容器 */
  container: HTMLDivElement;
  /** 渲染图标的延迟时间，默认为 2000ms */
  delay?: number;
  /**
   * 将文件上传到 OSS 服务器并返回 URL 地址，如果返回 undefined 则不会使用此功能
   * @param file 文件对象
   * @returns 图片 URL 字符串
   */
  uploadFile?: (file: File) => Promise<string | undefined>;
}
```

#### 方法

- `mount()`: 挂载插件并开始监听绘制事件
- `unMount()`: 卸载插件并清理资源
- `onDestroy()`: 插件销毁时调用

## 工作原理

1. **绘制检测**：插件监控铅笔工具的使用并跟踪手绘笔触
2. **识别触发**：绘制停止后，经过可配置的延迟时间（默认 2000ms）后触发识别
3. **识别过程**：
   - **模式 1（Google API）**：直接使用 Google 手写识别 API 分析笔迹数据
   - **模式 2（OpenRouter）**：捕获绘制区域的快照，上传后使用 AI 视觉模型识别内容
4. **图标获取**：根据识别结果，从 Iconify 获取匹配的图标
5. **图标显示**：在提供的容器中显示建议的图标
6. **图标选择**：用户点击图标时，手绘草图会被替换为选中的图标

## 依赖要求

- `@netless/appliance-plugin` >= 1.1.26

## 许可证

MIT