Browse Source

feat: 添加查询时动态样式

在"正在处理"位置增加一个旋转圈,可以直观的确认查询正在进行
main
tanxing 4 days ago
parent
commit
7d3d8a1781
  1. 27
      deepsearcher/backend/templates/index.html
  2. 180
      simplified_message_format.md

27
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 = `<div class="loading-spinner"></div>${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) {

180
simplified_message_format.md

@ -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']}")
```
Loading…
Cancel
Save