多模型同屏对比体验（同步输出）

## 多模型多厂商对比（Markdown输出）操作文档
多模型同屏对比支持最多6个厂商不同模型同步输出，方便大家根据各对比模型输出内容质量、响应速度，使用日志价格等，选择更合适自己使用的模型。
体验网址：https://try.cxsee.com/chat/compare/

## 1. 功能简介

“多模型厂商对比（Markdown输出）”支持把**同一个问题一次性发送给 1~6 个模型**，并在同一页面中**并发流式显示**各模型回答，便于快速横向比较：

- 回答质量（内容、结构、准确性）
- 响应速度（耗时）
- Token 消耗（输入/输出/总计）
- 输出格式（Markdown 渲染效果）

---

![](/uploads/editor/20260323/img_69c0347ea41f83.11570855.png)

## 2. 页面入口与主要区域

页面分为两部分：

1. **顶部工具栏（可滚动隐藏）**
   - 标题与说明
   - 返回首页
   - API设置（弹窗）
   - 提问输入框
   - 模型槽位配置区（1~6）
   - 操作按钮：添加、移除、开始生成、停止、清空

![](/uploads/editor/20260323/img_69c03544273b62.04448197.png)

2. **下方结果区**
   - 每个槽位一个结果卡片
   - 展示模型名称、Markdown 渲染内容、统计信息
   - 支持复制 Markdown / 复制 HTML

![](/uploads/editor/20260323/img_69c03599dadac6.69663848.png)

---

## 3. 首次使用前：API设置（必做）

### 3.1 打开 API 设置
点击右上角 **“API设置”** 按钮，弹出设置框。

### 3.2 设置项说明
- **Base URL（固定）**
  固定为：`https://api.cxsee.com/v1/chat/completions`
  只读，不可修改。
- **API Key**
  输入你的 API Key（通常以 `sk-` 开头）。

### 3.3 保存
点击 **“保存”** 后，Key 会保存在浏览器本地（localStorage）中。
若未设置 Key，点击“开始生成”会提示先设置。

![](/uploads/editor/20260323/img_69c035cda6ab83.29020049.png)

### 3.4 测试按钮说明
“测试”目前做轻量格式检查（是否 `sk-` 开头），不发真实请求。

---

## 4. 配置模型对比槽位

默认 1 个槽位，可最多扩展到 6 个。

每个槽位包含：
- **模型厂商下拉**（Claude / Gemini / OpenAI / DeepSeek / X.AI / MiniMax / 火山豆包 / 智谱 / 千问 等）
- **模型下拉**（随厂商联动）
- **启用复选框**（默认勾选）

> 只有“启用”的槽位会参与本次并发请求。

### 4.1 添加槽位
点击 **“+ 添加对比模型厂商”**
- 最多支持 6 个
- 新增槽位默认启用

### 4.2 移除槽位
点击 **“- 移除最后模型厂商”**
- 至少保留 1 个
- 移除前会先停止进行中的请求

---

## 5. 发起一次对比

### 操作步骤
1. 在输入框填写问题（Prompt）
2. 选择每个槽位的厂商与模型
3. 勾选要参与的槽位
4. 点击 **“开始生成”**

### 执行效果
- 各模型并发请求
- 结果流式返回（边生成边显示）
- 每个槽位状态显示：待机 / 生成中 / 完成 / 已停止 / 错误

---

## 6. 查看结果与指标

每个结果卡片包含：

1. **标题区**
   - 模型厂商X
   - 模型标签（厂商 + 模型名）

2. **正文区**
   - Markdown 渲染后的回答内容

3. **统计区**
   - Token：输入 / 输出 / 总计
   - 耗时（ms）
   - 分片数（chunks）
   - 字符数（chars）

---

## 7. 复制功能

每个卡片右上角有两个按钮：

1. **复制Markdown**
   - 复制原始 Markdown 文本

2. **复制HTML**
   - 优先复制富文本 HTML（兼容时）
   - 若浏览器不支持 HTML 剪贴板，自动降级复制 Markdown 文本

---

## 8. 停止与清空

### 停止
点击 **“停止”**：
- 中断所有正在进行的流请求
- 槽位状态变为“已停止”

### 清空
点击 **“清空”**：
- 先停止全部请求
- 清空输入框、回答区、统计信息
- 槽位状态重置为“待机”

---

事件类型：
- `start`：开始
- `chunk`：增量文本
- `meta`：usage/headers 元信息
- `error`：错误信息
- `done`：完成（含耗时、统计）

---

## 11. 常见问题（FAQ）

### Q1：点“开始生成”提示要先设置 API Key
A：说明浏览器中未保存 Key。点击右上角“API设置”填写后保存。

### Q2：为什么某个槽位没出结果？
A：检查以下几项：
- 该槽位是否启用
- 模型是否已选择
- API Key 是否有效
- 网络是否可访问上游地址

### Q3：显示 upstream http 4xx/5xx 是什么问题？
A：是上游接口返回错误，常见原因：
- Key 无效或权限不足
- 模型名不可用
- 请求参数不合法

### Q4：复制 HTML 不生效？
A：部分浏览器限制 HTML 剪贴板。系统会自动降级为复制纯文本 Markdown。

### Q5：为什么看不到推理过程？
A：当前前端仅展示 `answer` 通道内容，`reasoning` 通道被过滤，不显示。

---

## 12. 安全与使用建议

- 当前版本 API Key 存在浏览器 localStorage，适合内部体验环境。
- 正式生产建议改为：
  - 前端不落地 Key
  - Key 存 PHP Session 或服务端密钥系统
  - 增加接口鉴权、频率限制、审计日志

上一篇：Responses（联网搜索）下一篇：聊天（对话）