AI智能建筑 - 完整的AIGC图片生成SDK
npm install @xiaoluo_aigc0708/aigc-sdkbash
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 (
value={prompt}
onChange={setPrompt}
negativeValue={negativePrompt}
onNegativeChange={setNegativePrompt}
placeholder="输入你想生成的图片描述..."
suggestions={['美丽的风景画', '科幻城市']}
showWordCount={true}
showNegative={true}
showSuggestions={true}
maxLength={500}
/>
parameters={parameters}
onChange={setParameters}
mode="text2img"
/>
images={images}
onImageSelect={handleImageSelect}
/>
records={records}
onClearRecords={handleClearRecords}
onImageClick={handleImageClick}
getImageUrl={(filename) => http://server/view?filename=${filename}}
showStats={true}
maxHeight="100vh"
/>
);
}
`
📖 详细文档
$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`