test-deerflow.html
7.24 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DeerFlow 连接测试</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 50px auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
margin-bottom: 20px;
}
button {
background: #409eff;
color: white;
border: none;
padding: 12px 24px;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-right: 10px;
margin-bottom: 10px;
}
button:hover {
background: #66b1ff;
}
#result {
margin-top: 20px;
padding: 15px;
background: #f9f9f9;
border-radius: 4px;
white-space: pre-wrap;
font-family: "Courier New", monospace;
font-size: 12px;
max-height: 400px;
overflow-y: auto;
}
.success {
color: #67c23a;
}
.error {
color: #f56c6c;
}
.info {
color: #409eff;
}
</style>
</head>
<body>
<div class="container">
<h1>🔍 DeerFlow 连接测试工具</h1>
<p>此工具用于测试 DeerFlow 服务是否正常运行</p>
<div>
<button onclick="testConfig()">1️⃣ 测试配置接口</button>
<button onclick="testStream()">2️⃣ 测试流式接口</button>
<button onclick="clearResult()">🗑️ 清空结果</button>
</div>
<div id="result"></div>
</div>
<script>
const DEERFLOW_BASE_URL = "http://192.168.0.193:8000";
function log(message, type = "info") {
const resultDiv = document.getElementById("result");
const timestamp = new Date().toLocaleTimeString();
const className = type;
resultDiv.innerHTML += `<div class="${className}">[${timestamp}] ${message}</div>`;
resultDiv.scrollTop = resultDiv.scrollHeight;
}
function clearResult() {
document.getElementById("result").innerHTML = "";
}
async function testConfig() {
clearResult();
log("开始测试配置接口...", "info");
log(`请求 URL: ${DEERFLOW_BASE_URL}/api/config`, "info");
try {
const response = await fetch(`${DEERFLOW_BASE_URL}/api/config`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
});
log(
`响应状态: ${response.status} ${response.statusText}`,
response.ok ? "success" : "error",
);
if (!response.ok) {
const text = await response.text();
log(`错误信息: ${text}`, "error");
return;
}
const data = await response.json();
log("✅ 配置接口正常!", "success");
log("返回数据:", "info");
log(JSON.stringify(data, null, 2), "info");
} catch (error) {
log(`❌ 请求失败: ${error.message}`, "error");
log("可能的原因:", "error");
log("1. DeerFlow 服务未启动", "error");
log("2. 端口 8000 不正确", "error");
log("3. 网络连接问题", "error");
log("4. CORS 跨域问题", "error");
}
}
async function testStream() {
clearResult();
log("开始测试流式接口...", "info");
log(`请求 URL: ${DEERFLOW_BASE_URL}/api/chat/stream`, "info");
const requestBody = {
messages: [{ role: "user", content: "你好，这是一个测试消息" }],
thread_id: `test_${Date.now()}`,
resources: [],
max_plan_iterations: 1,
max_step_num: 1,
max_search_results: 10,
auto_accepted_plan: true,
interrupt_feedback: "",
mcp_settings: {},
enable_background_investigation: false,
report_style: "academic",
enable_deep_thinking: false,
};
log("请求参数:", "info");
log(JSON.stringify(requestBody, null, 2), "info");
try {
const response = await fetch(`${DEERFLOW_BASE_URL}/api/chat/stream`, {
method: "POST",
headers: {
"Content-Type": "application/json",
Accept: "text/event-stream",
},
body: JSON.stringify(requestBody),
});
log(
`响应状态: ${response.status} ${response.statusText}`,
response.ok ? "success" : "error",
);
if (!response.ok) {
const text = await response.text();
log(`错误信息: ${text}`, "error");
return;
}
log("✅ 流式接口连接成功!", "success");
log("正在接收流式数据...", "info");
const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");
let buffer = "";
let eventCount = 0;
while (true) {
const { done, value } = await reader.read();
if (done) {
log("流式传输完成", "success");
break;
}
buffer += decoder.decode(value, { stream: true });
let eventIndex;
while ((eventIndex = buffer.indexOf("\n\n")) !== -1) {
const eventData = buffer.slice(0, eventIndex);
buffer = buffer.slice(eventIndex + 2);
if (eventData.startsWith(":")) continue;
const lines = eventData.split("\n");
let data = "";
for (const line of lines) {
if (line.startsWith("data:")) {
data = line.substring(5).trim();
break;
}
}
if (data) {
eventCount++;
try {
const parsed = JSON.parse(data);
log(
`📦 事件 ${eventCount}: ${parsed.type || "未知类型"}`,
"success",
);
if (parsed.content) {
log(
` 内容: ${parsed.content.substring(0, 100)}...`,
"info",
);
}
} catch (e) {
log(`解析事件失败: ${data}`, "error");
}
}
}
// 只接收前 10 个事件用于测试
if (eventCount >= 10) {
log("已接收 10 个事件，测试成功！", "success");
reader.cancel();
break;
}
}
} catch (error) {
log(`❌ 请求失败: ${error.message}`, "error");
log("可能的原因:", "error");
log("1. DeerFlow 服务未启动", "error");
log("2. 端口 8000 不正确", "error");
log("3. 网络连接问题", "error");
log("4. CORS 跨域问题", "error");
log("5. 请求参数格式错误", "error");
}
}
</script>
</body>
</html>