@xiaoluo_aigc0708/aigc-sdk
Version:
AI智能建筑 - 完整的AIGC图片生成SDK
346 lines (277 loc) • 8.69 kB
Markdown
[](https://www.npmjs.com/package/@ai-building/aigc-sdk)
[](https://opensource.org/licenses/MIT)
一个功能完整的AI图像生成SDK，支持文生图、图生图、OSS云存储等功能。基于ComfyUI后端，提供TypeScript类型支持。
- 🎨 **文生图功能** - 基于文本提示生成图像
- 🖼️ **图生图功能** - 基于图像和文本生成新图像
- ☁️ **OSS云存储** - 支持阿里云OSS文件上传
- 🔧 **智能工作流** - 自动选择最适合的ComfyUI工作流
- 📦 **模块化设计** - 核心功能、UI组件、类型定义分离
- 🛡️ **TypeScript支持** - 完整的类型定义和智能提示
- 🔄 **重试机制** - 内置请求重试和错误处理
- 📱 **React组件** - 提供完整的UI组件库
```bash
npm install @ai-building/aigc-sdk
```
```typescript
import { AIGCCore, validateAIGCConfig } from '@ai-building/aigc-sdk';
// 配置SDK
const config = {
comfyui: {
apiUrl: 'http://your-comfyui-server:7865/api/comfy/run_workflow',
imageServiceUrl: 'http://your-comfyui-server:8288'
},
oss: {
region: 'cn-beijing',
accessKeyId: 'your-access-key-id',
accessKeySecret: 'your-access-key-secret',
bucket: 'your-bucket-name',
endpoint: 'oss-cn-beijing.aliyuncs.com'
}
};
// 验证配置
const validation = validateAIGCConfig(config);
if (!validation.isValid) {
console.error('配置错误:', validation.errors);
return;
}
// 初始化SDK
const aigcCore = new AIGCCore(config);
// 文生图
const result = await aigcCore.generateTextToImage({
prompt: '一幅美丽的山水画',
width: 1024,
height: 1024,
n_iter: 2
});
console.log('生成结果:', result);
```
```tsx
import React from 'react';
import {
PromptInput,
ParameterPanel,
GenerationGallery,
GenerationRecords
} from '@ai-building/aigc-ui';
function MyAIGCApp() {
const [prompt, setPrompt] = useState('');
const [parameters, setParameters] = useState({});
return (
<div>
<PromptInput
value={prompt}
onChange={setPrompt}
negativeValue={negativePrompt}
onNegativeChange={setNegativePrompt}
placeholder="输入你想生成的图片描述..."
suggestions={['美丽的风景画', '科幻城市']}
showWordCount={true}
showNegative={true}
showSuggestions={true}
maxLength={500}
/>
<ParameterPanel
parameters={parameters}
onChange={setParameters}
mode="text2img"
/>
<GenerationGallery
images={images}
onImageSelect={handleImageSelect}
/>
<GenerationRecords
records={records}
onClearRecords={handleClearRecords}
onImageClick={handleImageClick}
getImageUrl={(filename) => `http://server/view?filename=${filename}`}
showStats={true}
maxHeight="100vh"
/>
</div>
);
}
```
主要的SDK核心类，提供所有AI图像生成功能。
```typescript
class AIGCCore {
constructor(config: AIGCConfig)
// 文生图
async generateTextToImage(params: TextToImageParams): Promise<GenerationResult>
// 图生图
async generateImageToImage(params: ImageToImageParams): Promise<GenerationResult>
// 文件上传
async uploadFile(file: File, path?: string): Promise<OSSUploadResult>
async uploadStyleImage(file: File): Promise<OSSUploadResult>
async uploadBaseImage(file: File): Promise<OSSUploadResult>
// 工具方法
getImageUrl(filename: string): string
validateWorkflowParams(params: object): ValidationResult
getWorkflowInfo(): WorkflowInfo
}
```
#### 参数类型
```typescript
interface TextToImageParams {
prompt: string; // 文本提示
width?: number; // 图像宽度 (默认: 1024)
height?: number; // 图像高度 (默认: 1024)
n_iter?: number; // 生成数量 (默认: 2)
styleImage?: File; // 风格参考图片 (可选)
}
interface ImageToImageParams {
prompt: string; // 文本提示
init_images: string[]; // 基础图片URL数组
batch_size?: number; // 生成数量 (默认: 2)
styleImage?: File; // 风格参考图片 (可选)
}
```
```tsx
<PromptInput
value={prompt}
onChange={setPrompt}
negativeValue={negativePrompt}
onNegativeChange={setNegativePrompt}
placeholder="输入你想生成的图片描述..."
suggestions={['美丽的风景画', '科幻城市']}
showWordCount={true}
showNegative={true}
showSuggestions={true}
maxLength={500}
/>
```
```tsx
<ParameterPanel
parameters={parameters}
onChange={setParameters}
mode="text2img" // 或 "img2img"
groups={['basic', 'sampling', 'quantity']}
accordion={false}
/>
```
```tsx
<GenerationGallery
images={images}
onImageSelect={handleImageSelect}
onImageDelete={handleImageDelete}
onImageDownload={handleImageDownload}
layout="grid" // 或 "list"
columns={3}
showMetadata={true}
showActions={true}
/>
```
```tsx
<GenerationRecords
records={records}
onClearRecords={handleClearRecords}
onImageClick={handleImageClick}
getImageUrl={(filename) => `http://server/view?filename=${filename}`}
showStats={true}
maxHeight="100vh"
/>
```
```typescript
interface AIGCConfig {
comfyui: {
apiUrl: string; // ComfyUI API地址
imageServiceUrl: string; // ComfyUI图片服务地址
timeout?: number; // 请求超时时间 (默认: 30000ms)
retryTimes?: number; // 重试次数 (默认: 3)
};
oss: {
region: string; // OSS区域
accessKeyId: string; // OSS访问密钥ID
accessKeySecret: string; // OSS访问密钥Secret
bucket: string; // OSS存储桶名称
endpoint: string; // OSS终端节点
};
ui?: {
theme?: 'light' | 'dark'; // UI主题
primaryColor?: string; // 主色调
};
}
```
```typescript
// 开发测试时可以使用测试凭据
const testConfig = {
comfyui: {
apiUrl: 'http://localhost:7865/api/comfy/run_workflow',
imageServiceUrl: 'http://localhost:8288'
},
oss: {
region: 'cn-beijing',
accessKeyId: 'test-key-id', // 测试凭据
accessKeySecret: 'test-key-secret', // 测试凭据
bucket: 'test-bucket',
endpoint: 'oss-cn-beijing.aliyuncs.com'
}
};
```
```bash
git clone <repository-url>
cd aigc-sdk
npm install
npm run build
npm test
```
```
aigc-sdk/
├── packages/
│ ├── types/
│ ├── core/
│ ├── comfyui-client/
│ ├── oss-storage/
│ └── ui/
├── build.js
├── package.json
└── README.md
```
SDK支持4种ComfyUI工作流：
1. **文生图（无参考）** - `render_text`
2. **文生图（有参考）** - `render_ref-text`
3. **图生图（无参考）** - `QH_image-text`
4. **图生图（有参考）** - `QH_image-ref-text`
SDK会根据输入参数自动选择最合适的工作流。
- 🎉 首个正式版本发布
- ✨ 支持文生图和图生图功能
- ☁️ 集成阿里云OSS存储
- 📦 提供完整的React UI组件库
- 🛡️ 完整的TypeScript类型支持
欢迎提交Issue和Pull Request！
MIT License
如果遇到问题，请：
1. 查看文档和示例
2. 提交Issue到GitHub
3. 联系技术支持
---
**AI智能建筑 © 2024**