3.9 KiB
3.9 KiB
Models Setting 页面功能分析
概述
Models Setting 页面是一个复杂的模型管理界面，主要用于管理 LLM 模型工厂和用户的个人模型配置。
主要功能模块
1. 核心数据结构
- LLM Factory: 模型工厂列表，包含各种 AI 服务提供商
- My LLM: 用户已配置的模型列表
- Model Types: 支持多种模型类型（LLM、TEXT EMBEDDING、TEXT RE-RANK、TTS、SPEECH2TEXT、IMAGE2TEXT、MODERATION）
2. 支持的模型工厂
根据参考代码，支持以下模型工厂：
- OpenAI: 通用 API Key 配置
- Azure OpenAI: 需要特殊配置的 Azure 服务
- Google Cloud: Google 云服务模型
- AWS Bedrock: Amazon 的 AI 服务
- Ollama: 本地部署模型
- VolcEngine: 火山引擎
- Tencent HunYuan: 腾讯混元
- XunFei Spark: 讯飞星火
- Baidu YiYan: 百度一言
- Fish Audio: 语音合成服务
- Tencent Cloud: 腾讯云
- Langfuse: 模型监控和分析
3. 主要组件结构
3.1 主页面组件 (index.tsx)
- ModelCard: 模型工厂卡片组件
- 显示工厂信息、支持的模型类型标签
- 提供配置按钮（API Key 或添加模型）
- 显示/隐藏模型列表功能
- 删除工厂功能
- 模型列表: 展示每个工厂下的具体模型
- 模型名称和类型
- 编辑和删除操作
3.2 配置模态框组件
每个模型工厂都有对应的配置模态框：
-
api-key-modal: 通用 API Key 配置
- API Key 输入
- Base URL 配置（OpenAI 等）
- Group ID 配置（Minimax 等）
-
azure-openai-modal: Azure OpenAI 特殊配置
-
google-modal: Google Cloud 配置
-
bedrock-modal: AWS Bedrock 配置
-
ollama-modal: Ollama 本地模型配置
-
volcengine-modal: 火山引擎配置
-
hunyuan-modal: 腾讯混元配置
-
spark-modal: 讯飞星火配置
-
yiyan-modal: 百度一言配置
-
fish-audio-modal: Fish Audio 配置
-
next-tencent-modal: 腾讯云配置
3.3 系统设置
- system-model-setting-modal: 系统默认模型设置
- langfuse: 模型监控和分析配置
4. 状态管理 (hooks.ts)
提供统一的状态管理 hooks：
- useSubmitApiKey: API Key 配置状态管理
- useSubmitAzure: Azure 配置状态管理
- useSubmitGoogle: Google 配置状态管理
- useSubmitBedrock: Bedrock 配置状态管理
- useSubmitOllama: Ollama 配置状态管理
- useSubmitSystemModelSetting: 系统模型设置状态管理
- useHandleDeleteLlm: 删除模型操作
- useHandleDeleteFactory: 删除工厂操作
5. 常量配置 (constant.ts)
- BedrockRegionList: AWS Bedrock 支持的区域列表
用户交互流程
5.1 添加模型工厂
- 用户点击"添加模型"或"API-Key"按钮
- 根据工厂类型打开对应的配置模态框
- 用户填写必要的配置信息（API Key、Base URL 等）
- 提交配置，系统验证并保存
5.2 管理已有模型
- 查看模型工厂卡片，显示基本信息和标签
- 点击"显示更多模型"查看具体模型列表
- 对单个模型进行编辑或删除操作
- 删除整个模型工厂
5.3 系统设置
- 设置系统默认使用的 LLM 模型
- 配置模型监控和分析工具
技术特点
6.1 模块化设计
- 每个模型工厂都有独立的配置组件
- 统一的状态管理和操作接口
- 可扩展的架构设计
6.2 用户体验
- 直观的卡片式布局
- 标签系统清晰显示模型能力
- 折叠/展开功能优化空间利用
- 确认对话框防止误操作
6.3 数据处理
- 支持多种配置参数
- 实时验证和错误处理
- 本地和云端模型统一管理
实现要点
- 组件复用: 通用的模态框组件可以复用基础结构
- 状态管理: 使用 hooks 统一管理各种模态框的显示状态
- 类型安全: 严格的 TypeScript 类型定义
- 错误处理: 完善的表单验证和错误提示
- 国际化: 支持多语言界面