From 7d3d8a17812b2d0b92c61205c9ab18dbcb2edd76 Mon Sep 17 00:00:00 2001 From: tanxing Date: Thu, 14 Aug 2025 09:10:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=E6=9F=A5=E8=AF=A2?= =?UTF-8?q?=E6=97=B6=E5=8A=A8=E6=80=81=E6=A0=B7=E5=BC=8F=20=20=20=20=20?= =?UTF-8?q?=E5=9C=A8"=E6=AD=A3=E5=9C=A8=E5=A4=84=E7=90=86"=E4=BD=8D?= =?UTF-8?q?=E7=BD=AE=E5=A2=9E=E5=8A=A0=E4=B8=80=E4=B8=AA=E6=97=8B=E8=BD=AC?= =?UTF-8?q?=E5=9C=88=EF=BC=8C=E5=8F=AF=E4=BB=A5=E7=9B=B4=E8=A7=82=E7=9A=84?= =?UTF-8?q?=E7=A1=AE=E8=AE=A4=E6=9F=A5=E8=AF=A2=E6=AD=A3=E5=9C=A8=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- deepsearcher/backend/templates/index.html | 27 ++-- simplified_message_format.md | 180 ---------------------- 2 files changed, 18 insertions(+), 189 deletions(-) delete mode 100644 simplified_message_format.md diff --git a/deepsearcher/backend/templates/index.html b/deepsearcher/backend/templates/index.html index b7f847c..4addf3f 100644 --- a/deepsearcher/backend/templates/index.html +++ b/deepsearcher/backend/templates/index.html @@ -164,18 +164,24 @@ background-color: #fffbeb; color: var(--warning-color); border: 1px solid var(--warning-color); + display: flex; + align-items: center; } .loading-spinner { display: none; - width: 20px; - height: 20px; + width: 12px; + height: 12px; border: 2px solid #f3f3f3; - border-top: 2px solid var(--primary-color); + border-top: 2px solid var(--warning-color); border-radius: 50%; animation: spin 1s linear infinite; - margin-right: 10px; - vertical-align: middle; + flex-shrink: 0; + align-items: center; + } + + .status-loading .loading-spinner { + display: inline-block; } @keyframes spin { @@ -366,8 +372,6 @@ // 工具函数：显示状态信息 function showStatus(elementId, message, type) { const statusElement = document.getElementById(elementId); - statusElement.textContent = message; - statusElement.className = 'status visible'; // 清除之前的类型类 statusElement.classList.remove('status-success', 'status-error', 'status-loading'); @@ -375,11 +379,16 @@ // 添加新的类型类 if (type === 'success') { statusElement.classList.add('status-success'); + statusElement.innerHTML = message; } else if (type === 'error') { statusElement.classList.add('status-error'); + statusElement.innerHTML = message; } else if (type === 'loading') { statusElement.classList.add('status-loading'); + statusElement.innerHTML = `${message}`; } + + statusElement.classList.add('visible'); } // 工具函数：显示消息流 @@ -519,7 +528,7 @@ break; case 'start': console.log('Query started:', message.content); - showStatus('queryStatus', '正在处理...', 'loading'); + showStatus('queryStatus', ' 正在处理...', 'loading'); addMessageToContainer(message); break; case 'complete': @@ -769,7 +778,7 @@ eventSource.onopen = function(event) { console.log('EventSource connection opened for query'); - showStatus('queryStatus', '正在处理...', 'loading'); + showStatus('queryStatus', ' 正在处理...', 'loading'); }; eventSource.onmessage = function(event) { diff --git a/simplified_message_format.md b/simplified_message_format.md deleted file mode 100644 index a0440e2..0000000 --- a/simplified_message_format.md +++ /dev/null @@ -1,180 +0,0 @@ -# 简化消息格式 - -## 概述 - -为了简化前后端的消息通信，我们将原来的多种消息类型统一为简单的 `type` 和 `content` 格式。 - -## 消息格式 - -所有消息都遵循以下统一格式： - -```json -{ - "type": "消息类型", - "content": "消息内容", - "timestamp": 时间戳, - "metadata": {} -} -``` - -## 消息类型 - -### 1. start - 开始消息 -- **用途**: 表示查询或操作的开始 -- **示例**: -```json -{ - "type": "start", - "content": "开始处理查询: 请写一篇关于Milvus向量数据库的报告" -} -``` - -### 2. info - 信息消息 -- **用途**: 表示处理过程中的信息、状态更新、迭代信息等 -- **示例**: -```json -{ - "type": "info", - "content": "iteration 1: 正在搜索相关文档..." -} -``` - -### 3. answer - 答案消息 -- **用途**: 表示最终答案或重要结果 -- **示例**: -```json -{ - "type": "answer", - "content": "Milvus的详细报告: ..." -} -``` - -### 4. complete - 完成消息 -- **用途**: 表示操作完成 -- **示例**: -```json -{ - "type": "complete", - "content": "查询完成" -} -``` - -### 5. error - 错误消息 -- **用途**: 表示错误信息 -- **示例**: -```json -{ - "type": "error", - "content": "查询失败: 无法连接到数据库" -} -``` - -## 使用示例 - -### 后端使用 - -```python -from deepsearcher.utils.message_stream import ( - send_start, send_info, send_answer, send_complete, send_error -) - -# 发送开始消息 -send_start("开始处理查询: 请写一篇关于Milvus的报告") - -# 发送信息消息 -send_info("iteration 1: 正在搜索相关文档...") -send_info("找到5个相关文档片段") - -# 发送答案消息 -send_answer("Milvus的详细报告: ...") - -# 发送完成消息 -send_complete("查询完成") - -# 发送错误消息 -send_error("查询失败: 无法连接到数据库") -``` - -### 前端处理 - -```javascript -// 处理消息流 -function handleStreamMessage(data) { - const message = JSON.parse(data); - - switch (message.type) { - case 'start': - console.log('开始:', message.content); - break; - case 'info': - console.log('信息:', message.content); - break; - case 'answer': - console.log('答案:', message.content); - break; - case 'complete': - console.log('完成:', message.content); - break; - case 'error': - console.error('错误:', message.content); - break; - } -} -``` - -## 优势 - -1. **简化格式**: 统一的消息格式，易于理解和处理 -2. **类型清晰**: 5种基本类型覆盖所有使用场景 -3. **易于扩展**: 可以轻松添加新的消息类型 -4. **前端友好**: 前端处理逻辑更加简单 -5. **调试方便**: 消息格式清晰，便于调试和日志记录 - -## 迁移说明 - -### 从旧格式迁移 - -| 旧类型 | 新类型 | 说明 | -|--------|--------|------| -| `search` | `info` | 搜索相关信息 | -| `think` | `info` | 思考过程信息 | -| `answer` | `answer` | 保持不变 | -| `complete` | `complete` | 保持不变 | -| `query_start` | `start` | 查询开始 | -| `query_error` | `error` | 查询错误 | -| `stream_error` | `error` | 流错误 | - -### 代码更新 - -所有使用旧消息类型的代码都需要更新： - -```python -# 旧代码 -send_search("搜索内容...") -send_think("思考内容...") - -# 新代码 -send_info("搜索内容...") -send_info("思考内容...") -``` - -## 测试 - -可以使用以下方式测试消息格式： - -```python -from deepsearcher.utils.message_stream import get_message_stream - -# 获取消息流实例 -message_stream = get_message_stream() - -# 获取所有消息 -messages = message_stream.get_messages_as_dicts() - -# 验证格式 -for msg in messages: - assert 'type' in msg - assert 'content' in msg - assert 'timestamp' in msg - print(f"类型: {msg['type']}, 内容: {msg['content']}") -```