Skip to main content

Documentation Index

Fetch the complete documentation index at: https://tech.illasoft.com/llms.txt

Use this file to discover all available pages before exploring further.

​
概述

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。

​
消息类型

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

​
poisson-function 消息标记

AI 返回的工具调用在消息中使用特殊 marker 格式： 
::::poisson-function function=generateVideo description=生成视频
{"prompt":"...","duration":"5"}
::::
前端解析后打开对应 Selector。

​
工具调用流程

1

用户输入

用户输入 “去掉背景”
2

AI 响应

AI 返回 tool-call: removeBackground
3

打开 Selector

前端打开对应 Selector 组件
4

用户确认

用户确认/调整参数
5

执行

调用后端 API 执行
6

返回结果

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

​
工具栏功能

工具组件EditModetoolName (analytics)
滤镜FilterSelector / ChooseFilterSelectorfilter / chooseFilterapplyFilter / getFilterChoiceFromUser
调整PCAdjustSelector / MobileAdjustSelectoradjustapplyAdjust
裁剪PCCropSelector / MobileCropSelectorcropgetAutoCropResultFromUser
放大UpscaleSelectorupscaleapplyUpscale
擦除EraserSelectoreraserapplyEraser
重绘InpaintSelectorinpaintapplyInpaint
扩展ExpandSelectorexpand—
换背景ReplaceBgSelectorreplaceBgapplyReplaceBg
图片生成GenerateImageSelectorgenerateImagegenerateImageWithAI
视频生成VideoSelectorgenerateVideogenerateVideo
视频修剪VideoTrimSelectortrimVideotrimVideo
视频编辑VideoEditSelectorvideoEditvideoEdit
视频延长VideoExtendSelectorvideoExtendvideoExtend
Motion ControlMotionControlSelectormotionControlmotionControl
歌曲生成MusicSelectorgenerateMusicgenerateMusic
器乐生成InstrumentalSelectorgenerateInstrumentalgenerateInstrumental
添加人声AddVocalsSelectoraddVocalsaddVocals
音频修剪AudioTrimSelectortrimAudiotrimAudio
工具文件位置：components/feature/common/generator/tool/
Selector 文件位置：components/feature/common/generator/*-selector.tsx

​
数据流

​
媒体类型切换

Generator 页面根据 mediaType 切换三种模式： 
// mediaType === "image" → ImagePanel + ImageToolBar
// mediaType === "video" → CanvasVideoPlayer + VideoToolBar
// mediaType === "audio" → AudioPlayerCard + AudioToolBar

​
图片状态管理

// store/poisson.ts:8-29 (权威)
type EditMode =
  | "chat" | "upscale" | "filter" | "adjust" | "crop" | "chooseFilter"
  | "inpaint" | "expand" | "replaceBg" | "eraser" | "mask"
  | "generateVideo" | "generateMusic" | "generateInstrumental" | "addVocals"
  | "generateImage"
  | "trimVideo" | "trimAudio" | "motionControl" | "videoExtend" | "videoEdit";

// State 按 threadId 存储（poissonMap[threadId]）
interface Poisson {
  currentImage: Image;
  currentSelectVideo?: Video;
  currentSelectAudio?: Audio;
  currentSelectMediaType: "image" | "video" | "audio";
  editMode: EditMode;
  editModeData?: any;
  // ...
}

// Action
setEditMode(threadId, mode, data?)
store 代码位于仓库根目录 store/（不是 src/store/）。详见 State 文档。

​
键盘快捷键

以下快捷键尚未验证，仅供参考（TBD）。
快捷键功能
Ctrl/Cmd + Z撤销
Ctrl/Cmd + S保存
Ctrl/Cmd + E导出
Space平移图片
+/-缩放