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

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

✨ 主要特性

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

📦 安装

npm install @ai-building/aigc-sdk

🚀 快速开始

基础使用

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

React组件使用

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

📖 详细文档

核心API

AIGCCore

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

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
}

参数类型

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

React组件

PromptInput - 提示词输入组件

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

ParameterPanel - 参数控制面板

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

GenerationGallery - 图片展示画廊

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

GenerationRecords - 生成记录组件

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

🔧 配置选项

AIGCConfig

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

测试模式配置

// 开发测试时可以使用测试凭据
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'
  }
};

🛠️ 开发指南

本地开发

# 克隆项目
git clone <repository-url>
cd aigc-sdk

# 安装依赖
npm install

# 构建
npm run build

# 测试
npm test

目录结构

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会根据输入参数自动选择最合适的工作流。

📝 更新日志

v1.0.0 (2024-XX-XX)

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

🤝 贡献指南

欢迎提交Issue和Pull Request！

📄 许可证

MIT License

🆘 技术支持

如果遇到问题，请：

1. 查看文档和示例
2. 提交Issue到GitHub
3. 联系技术支持

AI智能建筑 © 2024