🎨 AIGC SDK - AI智能建筑图像生成工具包


一个功能完整的AI图像生成SDK，支持文生图、图生图、OSS云存储等功能。基于ComfyUI后端，提供TypeScript类型支持。

✨ 主要特性

- 🎨 文生图功能 - 基于文本提示生成图像
- 🖼️ 图生图功能 - 基于图像和文本生成新图像
- ☁️ OSS云存储 - 支持阿里云OSS文件上传
- 🔧 智能工作流 - 自动选择最适合的ComfyUI工作流
- 📦 模块化设计 - 核心功能、UI组件、类型定义分离
- 🛡️ TypeScript支持 - 完整的类型定义和智能提示
- 🔄 重试机制 - 内置请求重试和错误处理
- 📱 React组件 - 提供完整的UI组件库

📦 安装

``bash
npm install @ai-building/aigc-sdk
`

🚀 快速开始

$3

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

$3

`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 (

);
}
`

📖 详细文档

$3

#### AIGCCore

主要的SDK核心类，提供所有AI图像生成功能。

`typescript
class AIGCCore {
constructor(config: AIGCConfig)

// 文生图
async generateTextToImage(params: TextToImageParams): Promise

// 图生图
async generateImageToImage(params: ImageToImageParams): Promise

// 文件上传
async uploadFile(file: File, path?: string): Promise
async uploadStyleImage(file: File): Promise
async uploadBaseImage(file: File): Promise

// 工具方法
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; // 风格参考图片 (可选)
}
`

$3

#### PromptInput - 提示词输入组件

`tsx
value={prompt}
onChange={setPrompt}
negativeValue={negativePrompt}
onNegativeChange={setNegativePrompt}
placeholder="输入你想生成的图片描述..."
suggestions={['美丽的风景画', '科幻城市']}
showWordCount={true}
showNegative={true}
showSuggestions={true}
maxLength={500}
/>
`

#### ParameterPanel - 参数控制面板

`tsx
parameters={parameters}
onChange={setParameters}
mode="text2img" // 或 "img2img"
groups={['basic', 'sampling', 'quantity']}
accordion={false}
/>
`

#### GenerationGallery - 图片展示画廊

`tsx
images={images}
onImageSelect={handleImageSelect}
onImageDelete={handleImageDelete}
onImageDownload={handleImageDownload}
layout="grid" // 或 "list"
columns={3}
showMetadata={true}
showActions={true}
/>
`

#### GenerationRecords - 生成记录组件

`tsx
records={records}
onClearRecords={handleClearRecords}
onImageClick={handleImageClick}
getImageUrl={(filename) => http://server/view?filename=${filename}}
showStats={true}
maxHeight="100vh"
/>
`

🔧 配置选项

$3

`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; // 主色调
};
}
`

$3

`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'
}
};
`

🛠️ 开发指南

$3

`bash

克隆项目

git clone
cd aigc-sdk

安装依赖

npm install

构建

npm run build

测试

npm test
`

$3

`
aigc-sdk/
├── packages/
│ ├── types/ # 类型定义
│ ├── core/ # 核心SDK
│ ├── comfyui-client/ # ComfyUI客户端
│ ├── oss-storage/ # OSS存储客户端
│ └── ui/ # React 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会根据输入参数自动选择最合适的工作流。

📝 更新日志

$3

- 🎉 首个正式版本发布
- ✨ 支持文生图和图生图功能
- ☁️ 集成阿里云OSS存储
- 📦 提供完整的React UI组件库
- 🛡️ 完整的TypeScript类型支持

🤝 贡献指南

欢迎提交Issue和Pull Request！

📄 许可证

MIT License

🆘 技术支持

如果遇到问题，请：
1. 查看文档和示例
2. 提交Issue到GitHub
3. 联系技术支持

---

AI智能建筑 © 2024