《DeepSeek RAG 增強檢索知識庫系統》Ollama DeepSeek 流式應答頁面對接之三

前言
自從有了 AI 工具以后，所有以前頭疼前端頁面開發的后端程序員👨🏻?💻，都漏出了友善😊微笑！

主要我們可以清楚地表達編寫頁面訴求，AI 工具就可以非常準確且迅速的完成代碼的實現。這里我們可以選擇的 AI 有很多，包括；OpenAI、DeepSeek、智譜AI等等。
功能實現
服務端接口

curl 'http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=1%2B1'

要告訴 AI 你的接口請求方式。我們這里是 GET 請求。

應答結果

[{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": "1","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}},{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": " +","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}},{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": " ","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}},{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": "1","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}},{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": " equals","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}},{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": "2","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}},{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": "STOP"},"content": null,"media": []},"metadata": {"finishReason": "STOP","contentFilterMetadata": null}}}
]

注意：原本的 json 文件很大，不適合全部發給 openai。我這里做了截取。能體現出應答和結束標識STOP即可。

整理提問

請根據以下信息，編寫UI對接服務端接口；流式GET請求接口，由 SpringBoot Spring AI 框架實現，如下；/*** curl http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=1+1*/
@RequestMapping(value = "generate_stream", method = RequestMethod.GET)
@Override
public Flux<ChatResponse> generateStream(@RequestParam String model, @RequestParam String message) {return chatClient.stream(new Prompt(message,OllamaOptions.create().withModel(model)));
}流式GET應答數據，數組中的一條對象；[{"result": {"output": {"messageType": "ASSISTANT","properties": {"id": "chatcmpl-B3HPw95SsqmhoWeJ8azGLxK1Vf4At","role": "ASSISTANT","finishReason": ""},"content": "1","media": []},"metadata": {"finishReason": null,"contentFilterMetadata": null}}}
]如描述說明，幫我編寫一款簡單的AI對話頁面。1. 輸入內容，點擊發送按鈕，調用服務端流式請求接口，前端渲染展示。
2. 以html、js代碼方式實現，css樣式使用 tailwind 編寫。
3. 通過 const eventSource = new EventSource(apiUrl); 調用api接口。    
4. 從 result.output.content 獲取，應答的文本展示。注意 content 可能為空。
5. 從 result.metadata.finishReason = STOP 獲取，結束標識。
6. 注意整體樣式的簡潔美觀。

執行過程 （v0.dev、DeepSeek）
在這里插入圖片描述
雖然有AI可以幫助生成，不過有時候并不能一次就成功。
得到實現

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>AI Chat</title><script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 h-screen">
<div class="container mx-auto max-w-3xl h-screen flex flex-col"><!-- 消息容器 --><div id="messageContainer" class="flex-1 overflow-y-auto p-4 space-y-4 bg-white rounded-lg shadow-lg"><!-- 消息歷史將在此動態生成 --></div><!-- 輸入區域 --><div class="p-4 bg-white rounded-lg shadow-lg mt-4"><div class="flex space-x-2"><inputtype="text"id="messageInput"placeholder="輸入消息..."class="flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"onkeypress="handleKeyPress(event)"><buttononclick="sendMessage()"class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">發送</button></div></div>
</div><script>// 添加消息到容器function addMessage(content, isUser = false) {const container = document.getElementById('messageContainer');const messageDiv = document.createElement('div');messageDiv.className = `flex ${isUser ? 'justify-end' : 'justify-start'}`;messageDiv.innerHTML = `<div class="max-w-[80%] p-3 rounded-lg ${isUser ? 'bg-blue-500 text-white' : 'bg-gray-200 text-gray-800'}">${content}</div>`;container.appendChild(messageDiv);container.scrollTop = container.scrollHeight; // 滾動到底部}// 發送消息async function sendMessage() {const input = document.getElementById('messageInput');const message = input.value.trim();if (!message) return;// 清空輸入框input.value = '';// 添加用戶消息addMessage(message, true);// 添加初始AI消息占位addMessage('<span class="animate-pulse">▍</span>');// 構建API URLconst apiUrl = `http://localhost:8090/api/v1/ollama/generate_stream?model=deepseek-r1:1.5b&message=${encodeURIComponent(message)}`;// 使用EventSource接收流式響應const eventSource = new EventSource(apiUrl);let buffer = '';eventSource.onmessage = (event) => {try {const data = JSON.parse(event.data);const content = data.result?.output?.content || '';const finishReason = data.result?.metadata?.finishReason;if (content) {buffer += content;updateLastMessage(buffer + '<span class="animate-pulse">▍</span>');}if (finishReason === 'STOP') {eventSource.close();updateLastMessage(buffer); // 移除加載動畫}} catch (error) {console.error('解析錯誤:', error);}};eventSource.onerror = (error) => {console.error('EventSource錯誤:', error);eventSource.close();};}// 更新最后一條消息function updateLastMessage(content) {const container = document.getElementById('messageContainer');const lastMessage = container.lastChild.querySelector('div');lastMessage.innerHTML = content;container.scrollTop = container.scrollHeight;}// 回車發送function handleKeyPress(event) {if (event.key === 'Enter' && !event.shiftKey) {event.preventDefault();sendMessage();}}</script>
</body>
</html>

在這里插入圖片描述
好了 至此 《DeepSeek RAG 增強檢索知識庫系統》Ollama DeepSeek 流式應答頁面對接之三 點點關注不迷路 老鐵們！！！！！

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/74910.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/74910.shtml
英文地址，請注明出處：http://en.pswp.cn/web/74910.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【MyBatis】深入解析 MyBatis：關于注解和 XML 的 MyBatis 開發方案下字段名不一致的的查詢映射解決方案

【MyBatis】深入解析 MyBatis：關于注解和 XML 的 MyBatis 開發方案下字段名不一致的的查詢映射解決方案

注解查詢映射 我們再來調用下面的 selectAll() 這個接口&#xff0c;執行的 SQL 是 select* from user_info&#xff0c;表示全列查詢&#xff1a; 運行測試類對應方法&#xff0c;在日志中可以看到&#xff0c;字段名一致&#xff0c;Mybatis 就成功從數據庫對應的字段中拿到…
閱讀更多...
深入理解Java性能調優與JVM底層機制

深入理解Java性能調優與JVM底層機制

Java作為一種廣泛應用的編程語言&#xff0c;在企業級應用中占據著舉足輕重的地位。隨著系統規模的擴大和業務需求的復雜化&#xff0c;性能調優成為了開發過程中不可忽視的一環。Java的性能瓶頸往往并不直接來自代碼本身&#xff0c;而是與JVM&#xff08;Java虛擬機&#xff…
閱讀更多...
odo18實施——銷售-倉庫-采購-制造-制造外包-整個流程自動化單據功能的演示教程

odo18實施——銷售-倉庫-采購-制造-制造外包-整個流程自動化單據功能的演示教程

安裝模塊 安裝銷售 、庫存、采購、制造模塊 2.開啟外包功能 在進入制造應用點擊 配置—>設置 勾選外包&#xff0c;點擊保存 添加信息 一、添加客戶信息 點擊到銷售應用 點擊訂單—>客戶 點擊新建 創建客戶1&#xff0c;及其他客戶相關信息&#xff0c;點…
閱讀更多...
Logo語言的在線課程學習

Logo語言的在線課程學習

Logo語言在線課程學習的探索 引言 在信息技術快速發展的今天&#xff0c;編程已經成為一門重要的技能。尤其隨著人工智能、數據分析和互聯網技術的普及&#xff0c;各種編程語言層出不窮&#xff0c;其中Logo語言以其獨特的教育意義和學習優勢&#xff0c;逐漸受到學校和教育…
閱讀更多...
情感語音的“開源先鋒”！網易開源

情感語音的“開源先鋒”！網易開源

語音合成技術近年來取得了顯著進步&#xff0c;特別是在語音克隆、語音助手、配音服務和有聲讀物等領域。然而&#xff0c;如何讓合成的語音更具情感&#xff0c;更貼近人類的真實表達&#xff0c;一直是這一領域的重要研究方向。今天&#xff0c;我們將為大家介紹一款由網易有…
閱讀更多...
攝像頭模塊對焦方式的類型

攝像頭模塊對焦方式的類型

攝像頭模塊的對焦方式直接影響成像清晰度和使用場景適應性&#xff0c;不同技術各有其優缺點。以下是常見對焦方式及其原理、特點和應用場景的詳細說明&#xff1a; ?1. 固定對焦&#xff08;Fixed Focus&#xff09;? ?原理?&#xff1a;鏡頭固定在特定距離&#xff08;…
閱讀更多...
使用Vue、Nodejs以及websocket搭建一個簡易聊天室

使用Vue、Nodejs以及websocket搭建一個簡易聊天室

簡易聊天室 說在前面效果展示websocketwebsocket的由來websocket的特點 vue前端靜態結構效果代碼 點擊切換用戶以及該用戶高亮實現思路效果展示 發送消息功能效果展示 連接服務端 Nodejs服務器端實現步驟代碼 說在前面 在學習計算機網絡的時候&#xff0c;看到了websocket這個…
閱讀更多...
【免費】2005-2019年各地級市綠色專利申請量數據

【免費】2005-2019年各地級市綠色專利申請量數據

2005-2019年各地級市綠色專利申請量數據 1、時間2005-2019年 2、來源&#xff1a;國家知識產權局 3、指標&#xff1a;省份、城市、年份、綠色發明專利申請量、綠色實用新型專利申請量 4、范圍&#xff1a;360地級市 5、指標解釋&#xff1a;綠色專利是指涉及環保、新能源…
閱讀更多...
架構師面試（二十六）：系統拆分

架構師面試（二十六）：系統拆分

問題 今天我們聊電商系統實際業務場景的問題&#xff0c;考查對業務系統問題的分析能力、解決問題的能力和對系統長期發展的整體規劃能力。 一電商平臺在早期階段業務發展迅速&#xff0c;DAU在 10W&#xff1b;整個電商系統按水平分層架構進行設計&#xff0c;包括【入口網關…
閱讀更多...
2. Qt界面文件原理

2. Qt界面文件原理

本節主要介紹ui文件如何與窗口關聯&#xff0c;并通過隱式連接方式顯示對話框 本文部分ppt、視頻截圖原鏈接&#xff1a;[萌馬工作室的個人空間-萌馬工作室個人主頁-嗶哩嗶哩視頻] 1 UI文件如何與窗口關聯 1.1 mainwindow.cpp的頭文件ui_mainwindow.h 根據編譯原理的基本規…
閱讀更多...
雅思大作文寫作——詞伙、簡單句、并列句的使用

雅思大作文寫作——詞伙、簡單句、并列句的使用

詞伙是一些可以表達我們常用觀點的單詞組合，這個組合可能不只是2-3個單詞，也可能是很多單詞組成的一個短句。 一、詞伙使用 1. 不要中譯英 2. 重視詞伙，而非單詞 如何替換表達 1. 如果要替換的是一個名詞，如students，則有下面的一些方法： A. 使用替換詞或者詞組：y…
閱讀更多...
?算法OJ?滑動窗口最大值【雙端隊列(deque)】Sliding Window Maximum

?算法OJ?滑動窗口最大值【雙端隊列(deque)】Sliding Window Maximum

文章目錄 雙端隊列(deque)詳解基本特性常用操作1. 構造和初始化2. 元素訪問3. 修改操作4. 容量操作 性能特點時間復雜度&#xff1a;空間復雜度&#xff1a; 滑動窗口最大值題目描述方法思路解決代碼 雙端隊列(deque)詳解 雙端隊列(deque&#xff0c;全稱double-ended queue)是…
閱讀更多...
電機的了解到調試全方面講解

電機的了解到調試全方面講解

一、什么是電機 電機是一種將電能轉換為機械能的裝置，通常由定子、轉子和電磁場組成。 當電流通過電機的繞組時，產生的磁場會與電機中的磁場相互作用，從而使電機產生旋轉運動。電機廣泛應用于各種機械設備和工業生產中，是現代社會不可或缺的重要設備之一。 常見的電機種…
閱讀更多...
分布式微服務系統架構第97集：JVM底層原理

分布式微服務系統架構第97集：JVM底層原理

加群聯系作者vx&#xff1a;xiaoda0423 倉庫地址&#xff1a;https://webvueblog.github.io/JavaPlusDoc/ https://1024bat.cn/ JVM 內存結構 Java 虛擬機的內存空間分為 5 個部分&#xff1a; 程序計數器 Java 虛擬機棧 本地方法棧 堆 方法區 JDK 1.8 同 JDK 1.7 比&…
閱讀更多...
制定大運維管理體系的標準、流程、機制、規范

制定大運維管理體系的標準、流程、機制、規范

規劃并制定大運維管理體系的標準、流程、機制、規范&#xff0c;對于確保平臺的可用性和穩定性至關重要。這一過程涉及從頂層設計到具體執行的全面考量&#xff0c;需要綜合考慮業務需求、技術架構、團隊能力等多方面因素。以下是一個基本框架&#xff0c;用于指導如何構建有效…
閱讀更多...
TruPlasma RF 3006 軟件TRUMPF HUETTINGER TRUPLASMA RF 3006 調試監控軟件

TruPlasma RF 3006 軟件TRUMPF HUETTINGER TRUPLASMA RF 3006 調試監控軟件

TruPlasma RF 3006 軟件TRUMPF HUETTINGER TRUPLASMA RF 3006 調試監控軟件
閱讀更多...
第16屆藍橋杯單片機模擬試題Ⅱ

第16屆藍橋杯單片機模擬試題Ⅱ

試題 代碼 sys.h #ifndef __SYS_H__ #define __SYS_H__#include <STC15F2K60S2.H> //ds1302.c extern unsigned char time[3]; void w_ds1302(); void r_ds1302(); //iic.c float v_adc(unsigned char addr); //sys.c extern float light_v; extern float rb2_v; exte…
閱讀更多...
清華《數據挖掘算法與應用》FP-Growth算法

清華《數據挖掘算法與應用》FP-Growth算法

【例 8.7】實現FP 樹算法,并對模擬數據集 simpDat挖掘頻繁項集,最小支持度為2,繪制 FP樹并輸出頻繁項集。 運行結果&#xff1a; 聲明&#xff1a;著作權歸作者所有。商業轉載請聯系作者獲得授權&#xff0c;非商業轉載請注明出處。 # -*- coding: utf-8 -*- ""&q…
閱讀更多...
npm 項目命名規則

npm 項目命名規則

以下是 npm 項目命名規則的詳細說明&#xff1a; 一、核心命名規則 必須使用小寫字母 名稱中不能包含大寫字母。原因&#xff1a; 跨平臺兼容性&#xff08;如 Linux 區分大小寫&#xff0c;而 Windows 不區分&#xff09;。避免命令行和 URL 中的大小寫沖突&#xff08;例如包…
閱讀更多...
Ubertool 的詳細介紹、安裝指南及使用說明

Ubertool 的詳細介紹、安裝指南及使用說明

Ubertool&#xff1a;多協議網絡分析與調試平臺 一、Ubertool 簡介 Ubertool 是一款開源的 多協議網絡分析工具&#xff0c;專為物聯網&#xff08;IoT&#xff09;、嵌入式系統和工業自動化領域設計。它支持藍牙、Wi-Fi、LoRa、CAN總線等多種通信協議的實時監控、數據包捕獲…
閱讀更多...
最新文章

Copyright @ 2022~2023