《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.mzph.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