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

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

功能特性

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

安装

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

使用方法

基础用法

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 视觉模型进行更准确的识别：

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

构造函数选项

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