ai-img-element

一个通过自定义 HTML 标签直接生成 AI 图片的插件。极其易用，不依赖 React/Vue 等框架，支持通过 CDN 或 NPM 引入。

特性

• 🎨 使用自定义 <ai-img> 标签直接生成 AI 图片
• 🚀 极简 API，开箱即用
• 🔧 支持全局配置和提示词
• 💡 使用 Shadow DOM 封装，样式隔离
• 📦 支持 NPM 和 CDN 引入
• 🎯 支持 React、Vue 等任何框架

安装

npm install ai-img-element

使用方法

在 React/Vue 中使用

import { AIImage } from 'ai-img-element';

// 全局初始化
AIImage.config({
  baseUrl: 'https://api.your-service.com',
  globalPrompt: 'masterpiece, high-end aesthetic, 8k resolution, minimalist'
});

在 HTML 中使用

<ai-img 
  prompt="一个具有极简主义风格的科技感蓝色登录框背景" 
  width="800" 
  height="600">
</ai-img>

CDN 引入

<script type="module">
  import { AIImage } from 'https://unpkg.com/ai-img-element/dist/index.esm.js';
  
  AIImage.config({
    baseUrl: 'http://127.0.0.1:5555',
    globalPrompt: 'masterpiece, high quality'
  });
</script>

<ai-img 
  prompt="有考试通过、或者通关成功含义的图标，蓝紫渐变，毛玻璃" 
  width="400" 
  height="300">
</ai-img>

API

AIImage.config(options)

配置全局参数

AIImage.config({
  baseUrl: string;          // 必填：API 服务地址
  globalPrompt?: string;    // 可选：全局提示词前缀
  timeout?: number;         // 可选：请求超时时间（毫秒）
  retryCount?: number;      // 可选：重试次数
});

<ai-img> 标签属性

| 属性 | 类型 | 必填 | 说明 | |------|------|------|------| | prompt | string | 是 | 图片描述提示词 | | width | number | 否 | 图片宽度（默认 400） | | height | number | 否 | 图片高度（默认 300） | | alt | string | 否 | 图片 alt 文本 | | loading | 'lazy' | 'eager' | 否 | 加载方式 |

后端 API 要求

后端需要提供 /api/generate 接口，接收 POST 请求：

{
  "user_input": "图片描述提示词",
  "width": 800,
  "height": 600
}

返回生成的图片（Blob 格式）。

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

License

MIT