AI Image Generator

AI图片生成组件，支持文生图和风格转绘功能。

功能特性

• ✨ 文生图 - 支持多种模型（即梦4.0、通用3.0、即梦3.0、即梦3.1、千问3.0、灵犀2.0）
• 🎨 风格转绘 - 支持多种艺术风格转换
• 📷 多图参考 - 支持最多6张参考图
• 🔧 丰富配置 - 支持比例、尺寸、数量等参数自定义
• 💡 智能扩写 - AI辅助提示词优化

安装

npm install @todou/ai-image-generator
# or
yarn add @todou/ai-image-generator
# or
pnpm add @todou/ai-image-generator

使用

<template>
  <AiImageGenerator
    :api-config="apiConfig"
    @success="handleSuccess"
  />
</template>

<script setup>
import { AiImageGenerator, initApi } from '@todou/ai-image-generator'
import '@todou/ai-image-generator/dist/style.css'

const apiConfig = {
  baseUrl: 'https://your-api.com',
  fileUrl: 'https://your-file-api.com',
  seUrl: 'https://your-search-api.com', // 可选，图片库搜索引擎URL
}

// 初始化API
initApi(apiConfig)

const handleSuccess = (data) => {
  console.log('生成成功', data)
  // data 包含生成的图片信息
}
</script>

注意： 组件已内置 AI扩写对话框 和 图片库对话框，无需在父组件中处理这些对话框逻辑。

API配置

Props

| 参数 | 说明 | 类型 | 必填 | 默认值 | |------|------|------|------|--------| | apiConfig | API配置 | ApiConfig | 是 | - | | initialText | 初始提示词 | string | 否 | '' | | eventBus | 事件总线 | Emitter | 否 | 内部创建 |

ApiConfig

interface ApiConfig {
  baseUrl: string;        // API基础URL
  fileUrl: string;        // 文件上传URL
  seUrl?: string;         // 搜索引擎URL（可选，用于图片库）
  getCookie?: (name: string) => string;  // 获取Cookie方法
  getScore?: () => Promise<number>;       // 获取积分方法
  onUnauthorized?: () => void;  // 未授权回调
}

Events

| 事件名 | 说明 | 参数 | |--------|------|------| | success | 生成成功 | data: 生成结果数据对象 |

注意： ai-expand 和 open-stock-dialog 事件已废弃。组件内部已集成 AI扩写对话框和图片库对话框，无需父组件处理。

Methods

通过 ref 可以访问以下方法：

// 更新图片URL
updateImageUrl(url: string): void

// 重新提交
handleReSubmit(taskData: any): Promise<void>

// 设置表单
setForm(taskData: any): void

// 从图库添加图片
addImageFromStock(url: string): void

完整示例

<template>
  <div class="app">
    <AiImageGenerator
      ref="generatorRef"
      :api-config="apiConfig"
      :initial-text="initialText"
      @success="handleSuccess"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { AiImageGenerator, initApi } from '@todou/ai-image-generator'
import '@todou/ai-image-generator/dist/style.css'

const generatorRef = ref()
const initialText = ref('一只可爱的小猫')

const apiConfig = {
  baseUrl: import.meta.env.VITE_APP_DEV_PATH,
  fileUrl: import.meta.env.VITE_APP_FILE_PATH,
  seUrl: import.meta.env.VITE_APP_SE_PATH, // 可选
  getCookie: (name) => {
    // 实现获取cookie逻辑
    return document.cookie.split('; ')
      .find(row => row.startsWith(name))
      ?.split('=')[1] || ''
  },
  getScore: async () => {
    // 实现获取积分逻辑
    const res = await fetch('/api/user/dept/currentScore')
    const data = await res.json()
    return data.data.currentScore
  },
  onUnauthorized: () => {
    // 处理未授权情况
    console.warn('登录失效')
  }
}

// 初始化API配置
initApi(apiConfig)

const handleSuccess = (data) => {
  console.log('图片生成成功！', data)
  // data 包含生成的图片信息
  // 可以在这里刷新历史记录等
}

// 从外部设置表单数据
const loadTask = (taskData) => {
  generatorRef.value?.setForm(taskData)
}

// 组件内部已处理AI扩写和图片库，无需额外处理
</script>

自定义样式

组件使用 CSS 变量，可以通过覆盖变量来自定义样式：

:root {
  --ai-primary-color: #2c5bff;
  --ai-border-radius: 8px;
  --ai-bg-color: #f6f8fd;
}

常见问题

样式说明

组件需要手动导入 CSS 文件：

<script setup>
import { AiImageGenerator, initApi } from '@todou/ai-image-generator'
import '@todou/ai-image-generator/dist/style.css'
</script>

构建工具配置

确保你的构建工具能够处理 CSS：

• Vite: 开箱即用，无需额外配置
• Webpack: 确保配置了 css-loader 和 style-loader
• Nuxt: 通常自动支持，如遇问题可在 nuxt.config.ts 中添加：

  build: {
    transpile: ['@todou/ai-image-generator']
  }

License

MIT