# ai-img-element

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

## 特性

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

## 安装

```bash
npm install ai-img-element
```

## 使用方法

### 在 React/Vue 中使用

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

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

### 在 HTML 中使用

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

### CDN 引入

```html
<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)

配置全局参数

```typescript
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 请求：

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

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

## 开发

```bash
# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build
```

## License

MIT