119 lines
3.9 KiB
Markdown
119 lines
3.9 KiB
Markdown
|
# 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 添加模型工厂
|
|||
|
|
1. 用户点击"添加模型"或"API-Key"按钮
|
|||
|
|
2. 根据工厂类型打开对应的配置模态框
|
|||
|
|
3. 用户填写必要的配置信息（API Key、Base URL 等）
|
|||
|
|
4. 提交配置，系统验证并保存
|
|||
|
|
|
|||
|
|
### 5.2 管理已有模型
|
|||
|
|
1. 查看模型工厂卡片，显示基本信息和标签
|
|||
|
|
2. 点击"显示更多模型"查看具体模型列表
|
|||
|
|
3. 对单个模型进行编辑或删除操作
|
|||
|
|
4. 删除整个模型工厂
|
|||
|
|
|
|||
|
|
### 5.3 系统设置
|
|||
|
|
1. 设置系统默认使用的 LLM 模型
|
|||
|
|
2. 配置模型监控和分析工具
|
|||
|
|
|
|||
|
|
## 技术特点
|
|||
|
|
|
|||
|
|
### 6.1 模块化设计
|
|||
|
|
- 每个模型工厂都有独立的配置组件
|
|||
|
|
- 统一的状态管理和操作接口
|
|||
|
|
- 可扩展的架构设计
|
|||
|
|
|
|||
|
|
### 6.2 用户体验
|
|||
|
|
- 直观的卡片式布局
|
|||
|
|
- 标签系统清晰显示模型能力
|
|||
|
|
- 折叠/展开功能优化空间利用
|
|||
|
|
- 确认对话框防止误操作
|
|||
|
|
|
|||
|
|
### 6.3 数据处理
|
|||
|
|
- 支持多种配置参数
|
|||
|
|
- 实时验证和错误处理
|
|||
|
|
- 本地和云端模型统一管理
|
|||
|
|
|
|||
|
|
## 实现要点
|
|||
|
|
|
|||
|
|
1. **组件复用**: 通用的模态框组件可以复用基础结构
|
|||
|
|
2. **状态管理**: 使用 hooks 统一管理各种模态框的显示状态
|
|||
|
|
3. **类型安全**: 严格的 TypeScript 类型定义
|
|||
|
|
4. **错误处理**: 完善的表单验证和错误提示
|
|||
|
|
5. **国际化**: 支持多语言界面
|