Skip to main content

​
概述

Generator 是 Kira 的核心工作区，用于 AI 图片生成和编辑。

​
组件层次

​
AI 对话集成

使用 Vercel AI SDK v5 与后端通信： 
import { useChat } from '@ai-sdk/react';

const { messages, sendMessage, isLoading } = useChat({
  api: '/agent/streaming',
  body: {
    threadId,
    thinking: enableThinking,
  },
  onToolCall: ({ toolCall }) => {
    // 处理工具调用，打开对应 Selector
  },
});

​
消息类型

类型说明
textAI 文本回复
tool-call工具调用请求
tool-result工具执行结果

​
工具调用流程

1

用户输入

用户输入 “去掉背景”
2

AI 响应

AI 返回 tool-call: removeBackground
3

打开 Selector

前端打开对应 Selector 组件
4

用户确认

用户确认/调整参数
5

执行

调用后端 API 执行
6

返回结果

返回 tool-result (新图片 URL) → 更新 ImagePanel

​
工具栏功能

工具组件说明
滤镜FilterSelectorAI 风格滤镜、预设滤镜
调整AdjustSelector亮度、对比度、饱和度等
裁剪CropSelector自由裁剪、比例裁剪
放大UpscaleSelector2x/4x 超分辨率
擦除EraserSelectorAI 智能擦除
重绘InpaintSelector局部重绘
扩展ExpandSelector图片扩展
换背景ReplaceBgSelector背景替换
导出Export下载图片

​
数据流

​
图片状态管理

// useGeneratorStore
interface GeneratorState {
  currentImage: Image | null;      // 当前图片
  images: Image[];                  // 图片列表
  activeSelector: SelectorType;     // 当前激活的工具
  isProcessing: boolean;            // 是否处理中

  setCurrentImage: (image: Image) => void;
  openSelector: (type: SelectorType) => void;
  closeSelector: () => void;
}

​
键盘快捷键

快捷键功能
Ctrl/Cmd + Z撤销
Ctrl/Cmd + S保存
Ctrl/Cmd + E导出
Space平移图片
+/-缩放