Generator 是 Kira 的核心工作区，用于 AI 图片生成、视频生成、音乐生成和编辑。根据 mediaType 自动切换图片、视频和音频模式。
组件层次
AI 对话集成
使用 Vercel AI SDK v6 与后端通信：
import { useKiraChat } from '@/lib/chat';
interface UseKiraChatOptions {
threadId: string;
resourceId: string;
onToolCall?: (params: { toolCall: ToolCall }) => void;
onFinish?: (params: { message: UIMessage }) => void | Promise<void>;
}
const { append, reload, stop } = useKiraChat({
threadId,
resourceId,
onToolCall: ({ toolCall }) => {
// 处理工具调用，打开对应 Selector
},
onFinish: ({ message }) => {
// 消息完成回调
},
});
api 和 body 不是 useKiraChat 的直接参数，它们在内部 ChatManager 中配置。实际代码位于 lib/chat/kirachat.tsx。
消息类型
| 类型 | 说明 |
|---|
text | AI 文本回复 |
tool-call | 工具调用请求 |
tool-result | 工具执行结果 |
工具调用流程
AI 响应
AI 返回 tool-call: removeBackground
打开 Selector
前端打开对应 Selector 组件
返回结果
返回 tool-result (新图片 URL) → 更新 ImagePanel
工具栏功能
| 工具 | 组件 | 说明 |
|---|
| 滤镜 | FilterSelector | AI 风格滤镜、预设滤镜 |
| 调整 | PCAdjustSelector / MobileAdjustSelector | 亮度、对比度、饱和度等 |
| 裁剪 | PCCropSelector / MobileCropSelector | 自由裁剪、比例裁剪 |
| 放大 | UpscaleSelector | 2x/4x 超分辨率 |
| 擦除 | EraserSelector | AI 智能擦除 |
| 重绘 | InpaintSelector | 局部重绘 |
| 扩展 | ExpandSelector | 图片扩展 |
| 换背景 | ReplaceBgSelector | 背景替换 |
| 导出 | ImageExport | 下载图片 |
| 视频生成 | VideoSelector | AI 视频生成 (t2v / i2v) |
| 视频导出 | VideoExport | 下载视频（带/不带水印） |
| 歌曲生成 | MusicSelector | AI 歌曲生成（含歌词） |
| 器乐生成 | InstrumentalSelector | AI 器乐生成 |
| 添加人声 | AddVocalsSelector | 为器乐添加人声 |
| 音频导出 | AudioExport | 下载音频 |
| 图片生成 | GenerateImageSelector | AI 图片生成（独立面板） |
数据流
媒体类型切换
Generator 页面根据 mediaType 切换三种模式：
// mediaType === "image" → ImagePanel + ImageToolBar
// mediaType === "video" → CanvasVideoPlayer + VideoToolBar
// mediaType === "audio" → AudioPlayerCard + AudioToolBar
图片状态管理
// usePoissonStore
type EditMode = "chat" | "upscale" | "filter" | "adjust" | "crop" | "chooseFilter"
| "inpaint" | "expand" | "replaceBg" | "eraser" | "mask" | "video"
| "generateMusic" | "generateInstrumental" | "addVocals" | "generateImage";
// State is per-thread, accessed via poissonMap[threadId]
interface PoissonState {
// Accessed via getCurrentImage(threadId), getEditMode(threadId)
currentImage: Image;
editMode: EditMode;
editModeData?: any;
// Actions require threadId as first parameter
setCurrentImage: (threadId: string, image: Image) => void;
setEditMode: (threadId: string, mode: EditMode, editModeData?: any) => void;
}
键盘快捷键
| 快捷键 | 功能 |
|---|
Ctrl/Cmd + Z | 撤销 |
Ctrl/Cmd + S | 保存 |
Ctrl/Cmd + E | 导出 |
Space | 平移图片 |
+/- | 缩放 |
