1
POST
2
http://localhost:11434/api/chat
3
{
4
    "model": "qwen3:0.6b",
5
    "messages": [
6
        {
7
            "role": "user",
8
            "content": "你是谁?"
9
        }
10
    ],
11
    "think": true,
12
    "stream": false
13
}

1
{
2
    "choices": [
3
        {
4
            "message": {
5
                "role": "assistant",
6
                "content": "以下是根据最新信息整理的几条重要新闻，均已标注准确日期：\n\n*   **2026年大规模设备更新和消费品以旧换新政策将实施**：国家发展改革委、财政部于2025年12月30日印发《关于2026年实施大规模设备更新和消费品以旧换新政策的通知》。\n*   **韩国总统李在明将访华**：外交部发言人于2025年12月30日就韩国总统李在明将访华一事答记者问。\n*   **中柬泰三方再次聚首并达成共识**：外交部于2025年12月30日表示，中柬泰三方再次聚首并达成共识，充分彰显了中国负责任大国的形象。\n*   **我国力争到2030年累计制修订制造业中试标准100项以上**：工业和信息化部于2025年12月30日发布相关通知，提出此目标。\n*   **宁夏数据条例将于2026年1月1日起施行**：该条例于2025年12月30日公布。\n*   **国家智慧教育公共服务平台用户总量突破1.78亿**：此数据于2025年12月30日发布。\n*   **国务院公布《中华人民共和国增值税法实施条例》**：李强签署国务院令，于2025年12月30日公布该条例。"
7
            },
8
            "finish_reason": "stop",
9
            "index": 0,
10
            "logprobs": null
11
        }
12
    ],
13
    "object": "chat.completion",
14
    "usage": {
15
        "prompt_tokens": 4301,
16
        "completion_tokens": 322,
17
        "total_tokens": 4623,
18
        "prompt_tokens_details": {
19
            "cached_tokens": 0
20
        }
21
    },
22
    "created": 1767105514,
23
    "system_fingerprint": null,
24
    "model": "qwen-flash",
25
    "id": "chatcmpl-ab754db3-709e-99fe-bde5-fd30f18b9aee"
26
}

1
<dependency>
2
    <groupId>dev.langchain4j</groupId>
3
    <artifactId>langchain4j-spring-boot-starter</artifactId>
4
    <version>1.0.1-beta6</version>
5
</dependency>

1
public interface ConsultantService {
2
    //用于聊天的方法,message为用户输入的内容
3
    String chat(String message);
4
}

1
@Configuration
2
public class CommonConfig {
3
    @Autowired
4
    private OpenAiChatModel model;
5
    @Bean
6
    public ConsultantService consultantService() {
7
        ConsultantService cs = AiServices.builder(ConsultantService.class)
8
                .chatModel(model)//设置对话时使用的模型对象
9
                .build();
10
        return cs;
11
    }
12
}

1
@RestController
2
public class ChatController {
3
    @Autowired
4
    private ConsultantService consultantService;    // // 不再注入OpenAiChatModel了，而是注入接口的代理对象
5
    @RequestMapping("/chat")
6
    public String chat(String message){
7
        String result = consultantService.chat(message);
8
        return result;
9
    }
10
}

1
@AiService(
2
        wiringMode = AiServiceWiringMode.EXPLICIT,  // 手动装配
3
        chatModel = "openAiChatModel"           // 指定模型
4
)
5
public interface ConsultantService {
6
       //用于聊天的方法,message为用户输入的内容
7
    public String chat(String message);
8
}

1
@AiService
2
public interface ConsultantService {
3
       //用于聊天的方法,message为用户输入的内容
4
    String chat(String message);
5
}

1
<dependency>
2
    <groupId>org.springframework.boot</groupId>
3
    <artifactId>spring-boot-starter-webflux</artifactId>
4
 </dependency>
5
 <dependency>
6
    <groupId>dev.langchain4j</groupId>
7
    <artifactId>langchain4j-reactor</artifactId>
8
    <version>1.0.1-beta6</version>
9
 </dependency>

1
langchain4j:
2
  open-ai:
3
    chat-model:
4
      base-url: https://dashscope.aliyuncs.com/compatible-mode/v1
5
      api-key: ${API_KEY}
6
      model-name: qwen-plus
7
      log-requests: true
8
      log-responses: true
9
    streaming-chat-model:       # 新增
10
      base-url: https://dashscope.aliyuncs.com/compatible-mode/v1
11
      api-key: ${API_KEY}
12
      model-name: qwen-plus
13
      log-requests: true
14
      log-responses: true
15
logging:
16
  level:
17
    dev.langchain4j: debug

1
@AiService(
2
        wiringMode = AiServiceWiringMode.EXPLICIT,
3
        chatModel = "openAiChatModel",
4
        streamingChatModel = "openAiStreamingChatModel"
5
)
6
public interface ConsultantService {
7
    public Flux<String> chat(String message);
8
}

1
@RestController
2
public class ChatController {
3
    @Autowired
4
    private ConsultantService consultantService;
5

6
    @RequestMapping(value = "/chat",produces = "text/html;charset=utf-8")       // 解决乱码问题
7
    public Flux<String> chat(String memoryId,String message){
8
        Flux<String> result = consultantService.chat(memoryId,message);
9
        return result;
10
    }
11
}

1
<!DOCTYPE html>
2
<html lang="zh-CN">
3
<head>
4
    <meta charset="UTF-8">
5
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
    <title>AI志愿填报顾问</title>
7
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
8
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
9
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.31/dist/vue.global.min.js"></script>
10
    <style>
11
        body {
12
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
13
        }
14

15
        /* 滚动条样式 */
16
        ::-webkit-scrollbar {
17
            width: 6px;
18
        }
19

20
        ::-webkit-scrollbar-track {
21
            background: #f1f1f1;
22
        }
23

24
        ::-webkit-scrollbar-thumb {
25
            background: #c1c1c1;
26
            border-radius: 3px;
27
        }
28

29
        ::-webkit-scrollbar-thumb:hover {
30
            background: #a8a8a8;
31
        }
32

33
        /* 输入框自适应高度 */
34
        textarea {
35
            min-height: 44px;
36
            max-height: 200px;
37
            transition: height 0.2s;
38
        }
39

40
        /* 加载动画 */
41
        @keyframes pulse {
42
            0%, 100% {
43
                opacity: 0.5;
44
            }
45
            50% {
46
                opacity: 1;
47
            }
48
        }
49

50
        .animate-pulse {
51
            animation: pulse 1.5s infinite;
52
        }
53

54
        .delay-100 {
55
            animation-delay: 0.1s;
56
        }
57

58
        .delay-200 {
59
            animation-delay: 0.2s;
60
        }
61

62
        /* 打字机效果 */
63
        .typing-cursor::after {
64
            content: "|";
65
            animation: blink 1s step-end infinite;
66
        }
67

68
        @keyframes blink {
69
            from, to {
70
                opacity: 1;
71
            }
72
            50% {
73
                opacity: 0;
74
            }
75
        }
76
    </style>
77
</head>
78
<body>
79
<div id="app" class="flex flex-col h-screen bg-gray-50">
80
    <!-- 顶部导航栏 -->
81
    <header class="bg-white shadow-sm py-3 px-4 flex items-center justify-between">
82
        <div class="flex items-center">
83
            <div class="text-xl font-bold text-blue-600">AI志愿填报顾问</div>
84
        </div>
85
        <div class="flex items-center space-x-3">
86
            <button
87
                    @click="startNewConversation"
88
                    class="ml-2 p-3 rounded-lg bg-green-500 hover:bg-green-600 text-white" style="width: 50px">
89
                <i class="fas fa-plus"></i>
90
            </button>
91
            <button @click="toggleDarkMode" class="p-2 rounded-full hover:bg-gray-100">
92
                <i :class="darkMode ? 'fas fa-moon text-gray-600' : 'fas fa-sun text-gray-600'"></i>
93
            </button>
94
        </div>
95
    </header>
96

97
    <!-- 聊天内容区域 -->
98
    <main class="flex-1 overflow-y-auto p-4 space-y-6" ref="chatContainer" :class="{ 'bg-gray-800': darkMode }">
99
        <div v-for="(message, index) in messages" :key="index" class="max-w-3xl mx-auto">
100
            <div :class="['flex', message.role === 'user' ? 'justify-end' : 'justify-start']">
101
                <div :class="['flex items-start space-x-3', message.role === 'user' ? 'flex-row-reverse space-x-reverse' : '']">
102
                    <div :class="['w-8 h-8 rounded-full flex items-center justify-center',
103
                                    message.role === 'user' ? 'bg-blue-100 text-blue-600' : 'bg-green-100 text-green-600',
104
                                    darkMode && message.role === 'assistant' ? 'bg-gray-700 text-green-400' : '']">
105
                        <i :class="message.role === 'user' ? 'fas fa-user' : 'fas fa-robot'"></i>
106
                    </div>
107
                    <div :class="['p-3 rounded-lg max-w-lg',
108
                                    message.role === 'user'
109
                                        ? 'bg-blue-500 text-white'
110
                                        : darkMode
111
                                            ? 'bg-gray-700 text-gray-100 border-gray-600'
112
                                            : 'bg-white shadow border border-gray-100']">
113
                        <div v-if="message.role === 'assistant' && message.isLoading" class="flex space-x-2">
114
                            <div :class="['w-2 h-2 rounded-full', darkMode ? 'bg-gray-400' : 'bg-gray-300', 'animate-pulse']"></div>
115
                            <div :class="['w-2 h-2 rounded-full', darkMode ? 'bg-gray-400' : 'bg-gray-300', 'animate-pulse delay-100']"></div>
116
                            <div :class="['w-2 h-2 rounded-full', darkMode ? 'bg-gray-400' : 'bg-gray-300', 'animate-pulse delay-200']"></div>
117
                        </div>
118
                        <div v-else class="whitespace-pre-wrap">
119
                                <span v-for="(char, charIndex) in message.content" :key="charIndex"
120
                                      :class="{'opacity-0': charIndex >= message.visibleChars, 'fade-in': charIndex < message.visibleChars}">
121
                                    {{ char }}
122
                                </span>
123
                            <span v-if="message.isStreaming" class="typing-cursor"></span>
124
                        </div>
125
                    </div>
126
                </div>
127
            </div>
128
        </div>
129
    </main>
130

131
    <!-- 输入框区域 -->
132
    <footer :class="['border-t p-4', darkMode ? 'bg-gray-800 border-gray-700' : 'bg-white border-gray-200']">
133
        <div class="max-w-3xl mx-auto relative">
134
            <div class="flex items-center">
135
                    <textarea
136
                            v-model="userInput"
137
                            @keydown.enter.exact.prevent="sendMessage"
138
                            @keydown.ctrl.enter.exact.prevent="sendMessage"
139
                            @keydown.esc.exact="stopResponse"
140
                            placeholder="输入您的问题..."
141
                            :class="['flex-1 border rounded-lg py-3 px-4 pr-12 focus:outline-none focus:ring-2 resize-none',
142
                                darkMode
143
                                    ? 'bg-gray-700 border-gray-600 text-white focus:ring-blue-400 placeholder-gray-400'
144
                                    : 'border-gray-300 focus:ring-blue-500 focus:border-transparent']"
145
                            rows="1"
146
                            ref="textarea"
147
                            @input="adjustTextareaHeight"
148
                    ></textarea>
149
                <!-- 新建会话按钮 -->
150

151
                <button
152
                        @click="isLoading ? stopResponse() : sendMessage()"
153
                        :disabled="!userInput.trim() && !isLoading"
154
                        :class="['ml-2 p-3 rounded-lg',
155
                                isLoading
156
                                    ? 'bg-red-500 hover:bg-red-600 text-white'
157
                                    : 'bg-blue-500 hover:bg-blue-600 text-white',
158
                                'disabled:opacity-50 disabled:cursor-not-allowed']"
159
                >
160
                    <i :class="isLoading ? 'fas fa-stop' : 'fas fa-paper-plane'"></i>
161
                </button>
162
            </div>
163
        </div>
164
    </footer>
165
</div>
166

167
<script>
168
    const {createApp, ref, nextTick, onMounted, watch} = Vue;
169

170
    createApp({
171
        setup() {
172
            const messages = ref([]);
173
            const userInput = ref('');
174
            const isLoading = ref(false);
175
            const chatContainer = ref(null);
176
            const textarea = ref(null);
177
            const darkMode = ref(false);
178

179
            const memoeryId = ref(Date.now().toString());
180
            let controller = null;
181
            let typingInterval = null;
182
            let currentTypingIndex = 0;
183

184
            // 调整文本区域高度
185
            const adjustTextareaHeight = () => {
186
                const textareaEl = textarea.value;
187
                textareaEl.style.height = 'auto';
188
                textareaEl.style.height = `${Math.min(textareaEl.scrollHeight, 200)}px`;
189
            };
190

191
            // 滚动到底部
192
            const scrollToBottom = () => {
193
                nextTick(() => {
194
                    if (chatContainer.value) {
195
                        chatContainer.value.scrollTop = chatContainer.value.scrollHeight;
196
                    }
197
                });
198
            };
199

200
            // 切换暗黑模式
201
            const toggleDarkMode = () => {
202
                darkMode.value = !darkMode.value;
203
                localStorage.setItem('darkMode', darkMode.value);
204
            };
205

206
            // 新建会话
207
            const startNewConversation = () => {
208
                // 清空聊天记录
209
                messages.value = [];
210
                // 生成新的 memoryId
211
                memoeryId.value = Date.now().toString();
212
                // 添加欢迎消息
213
                messages.value.push({
214
                    role: 'assistant',
215
                    content: '你好！我是zzy教育提供的AI志愿填报顾问，请问有什么能帮到您？',
216
                    isLoading: false,
217
                    visibleChars: 0,
218
                    isStreaming: false
219
                });
220
                // 确保欢迎消息完全可见
221
                messages.value[0].visibleChars = messages.value[0].content.length;
222
                // 滚动到底部
223
                scrollToBottom();
224
                // 聚焦输入框
225
                nextTick(() => {
226
                    textarea.value.focus();
227
                });
228
            };
229

230
            // 模拟逐字打印效果
231
            const startTypingEffect = (messageIndex) => {
232
                const message = messages.value[messageIndex];
233
                if (!message || message.visibleChars >= message.content.length) {
234
                    clearInterval(typingInterval);
235
                    typingInterval = null;
236
                    messages.value[messageIndex].isStreaming = false;
237
                    return;
238
                }
239

240
                messages.value[messageIndex].visibleChars++;
241
                scrollToBottom();
242
            };
243

244
            // 发送消息
245
            const sendMessage = async () => {
246
                if (!userInput.value.trim() || isLoading.value) return;
247

248
                // 中止之前的请求
249
                if (controller) {
250
                    controller.abort();
251
                }
252
                controller = new AbortController();
253

254
                const userMessage = {
255
                    role: 'user',
256
                    content: userInput.value.trim(),
257
                    isLoading: false,
258
                    visibleChars: userInput.value.trim().length,
259
                    isStreaming: false
260
                };
261

262
                messages.value.push(userMessage);
263

264
                const assistantMessage = {
265
                    role: 'assistant',
266
                    content: '',
267
                    isLoading: true,
268
                    visibleChars: 0,
269
                    isStreaming: true
270
                };
271

272
                messages.value.push(assistantMessage);
273

274
                userInput.value = '';
275
                adjustTextareaHeight();
276
                scrollToBottom();
277

278
                isLoading.value = true;
279

280
                try {
281
                    const response = await fetch(`/chat?message=${encodeURIComponent(userMessage.content)}&memoryId=${memoeryId.value}`, {
282
                        signal: controller.signal
283
                    });
284

285
                    if (!response.ok) {
286
                        throw new Error(`HTTP error! status: ${response.status}`);
287
                    }
288

289
                    const reader = response.body.getReader();
290
                    const decoder = new TextDecoder('utf-8');
291
                    let buffer = '';
292
                    let messageIndex = messages.value.length - 1;
293

294
                    // 先清除之前的打字效果
295
                    if (typingInterval) {
296
                        clearInterval(typingInterval);
297
                        typingInterval = null;
298
                    }
299

300
                    // 开始流式处理
301
                    while (true) {
302
                        const {done, value} = await reader.read();
303
                        if (done) break;
304

305
                        const chunk = decoder.decode(value, {stream: true});
306
                        buffer += chunk;
307

308
                        // 直接更新内容
309
                        messages.value[messageIndex].content = buffer;
310
                        messages.value[messageIndex].isLoading = false;
311

312
                        // 启动打字效果
313
                        if (!typingInterval) {
314
                            typingInterval = setInterval(() => {
315
                                startTypingEffect(messageIndex);
316
                            }, 20); // 调整这个值可以改变打字速度
317
                        }
318

319
                        scrollToBottom();
320
                    }
321

322
                } catch (error) {
323
                    if (error.name === 'AbortError') {
324
                        console.log('请求被用户中止');
325
                    } else {
326
                        console.error('请求出错:', error);
327
                        const lastMessage = messages.value[messages.value.length - 1];
328
                        lastMessage.content = '抱歉，请求过程中出现错误: ' + error.message;
329
                        lastMessage.visibleChars = lastMessage.content.length;
330
                    }
331
                } finally {
332
                    const lastMessage = messages.value[messages.value.length - 1];
333
                    lastMessage.isLoading = false;
334
                    lastMessage.isStreaming = false;
335

336
                    // 确保所有字符都可见
337
                    if (lastMessage.visibleChars < lastMessage.content.length) {
338
                        lastMessage.visibleChars = lastMessage.content.length;
339
                    }
340

341
                    isLoading.value = false;
342
                    controller = null;
343

344
                    if (typingInterval) {
345
                        clearInterval(typingInterval);
346
                        typingInterval = null;
347
                    }
348

349
                    scrollToBottom();
350
                }
351
            };
352

353
            // 停止响应
354
            const stopResponse = () => {
355
                if (controller) {
356
                    controller.abort();
357
                    const lastMessage = messages.value[messages.value.length - 1];
358
                    lastMessage.isLoading = false;
359
                    lastMessage.isStreaming = false;
360

361
                    if (lastMessage.visibleChars < lastMessage.content.length) {
362
                        lastMessage.visibleChars = lastMessage.content.length;
363
                    }
364

365
                    isLoading.value = false;
366
                    controller = null;
367

368
                    if (typingInterval) {
369
                        clearInterval(typingInterval);
370
                        typingInterval = null;
371
                    }
372
                }
373
            };
374

375
            // 初始化
376
            onMounted(() => {
377
                // 检查暗黑模式偏好
378
                darkMode.value = localStorage.getItem('darkMode') === 'true' ||
379
                    (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
380

381
                // 添加欢迎消息
382
                messages.value.push({
383
                    role: 'assistant',
384
                    content: '你好！我是传智教育提供的AI志愿填报顾问，请问有什么能帮到您？',
385
                    isLoading: false,
386
                    visibleChars: 0,
387
                    isStreaming: false
388
                });
389

390
                // 确保欢迎消息完全可见
391
                messages.value[0].visibleChars = messages.value[0].content.length;
392
                scrollToBottom();
393

394
                // 聚焦输入框
395
                nextTick(() => {
396
                    textarea.value.focus();
397
                });
398
            });
399

400
            // 监听消息变化自动滚动
401
            watch(messages, scrollToBottom, {deep: true});
402

403
            return {
404
                messages,
405
                userInput,
406
                isLoading,
407
                darkMode,
408
                chatContainer,
409
                textarea,
410
                sendMessage,
411
                stopResponse,
412
                toggleDarkMode,
413
                adjustTextareaHeight,
414
                startNewConversation
415
            };
416
        }
417
    }).mount('#app');
418
</script>
419
</body>
420
</html>