Semantic Kernel 中的流式输出SSE与Vue3前端接收示例

本文将介绍如何在使用 Semantic Kernel 框架的 ASP.NET 项目中使用流式输出 SSE(Server-Sent Events),并展示如何在Vue3前端应用中接收这些数据。并介绍了如何使用 @microsoft/fetch-event-source 库使用 POST 方法来接收 SSE 数据。

1. 背景

在大模型的应用场景中,用户经常需要与模型进行实时交互,例如,生成文本、回答问题等。这些场景要求数据传输能够快速且连续,以提供流畅的用户体验。SSE作为一种基于HTTP的标准协议,允许服务器向客户端推送实时数据,非常适合于此类应用。

2. 什么是 SSE

SSE 并不是一种新的技术,但是随着 ChatGPT 的火热,这种技术又重新受到了关注。

SSE(Server-Sent Events)是一种基于 HTTP 的服务器推送技术,允许服务器实时向客户端推送数据。与 WebSocket 不同,SSE 是单向通信,只能由服务器向客户端推送数据,而客户端无法向服务器发送数据。SSE 使用简单,易于实现,适用于需要实时数据推送的场景。

SSE 的工作原理是,客户端通过 EventSource 对象与服务器建立连接,服务器端通过发送特定格式的数据(如 data: Hello, world!\n\n)来推送消息给客户端。客户端收到消息后,可以通过监听 message 事件来处理数据。

3. 在 Semantic Kernel 中使用 SSE

如果要使用 SSE,首先需要在 ASP.NET 项目正确的引入 Semantic Kernel,并在控制器中添加 SSE 的处理逻辑。

3.1. 引入 Semantic Kernel

以下是 Program.cs 中引入 Semantic Kernel 的相关代码,这里以 Azure OpenAI 做演示:

using Microsoft.SemanticKernel;

var builder = WebApplication.CreateBuilder(args);
// ··· 略去其他代码
// 添加语义内核
builder.Services.AddKernel();
builder.Services.AddOpenAIChatCompletion("gpt-4o", new OpenAIClient(new Uri("https://[your-gpt].openai.azure.com/"), new Azure.AzureKeyCredential("[your-key]")));
// ··· 略去其他代码

3.2. 控制器中添加 SSE 处理逻辑

在控制器中添加 SSE 处理逻辑,需要使用 KernelInvokePromptStreamingAsyncInvokeStreamingAsync 方法来获取模型的流式结果输出,并将输出推送给客户端。

示例代码如下:

using Sang.AspNetCore.CommonLibraries.Models;

[HttpPost("test")]
[Produces("text/event-stream")]
public async Task<IResult> SSETest()
{
    var content = _kernel.InvokePromptStreamingAsync("什么是快乐星球?");
   
    Response.Headers.ContentType = "text/event-stream";
    Response.Headers.CacheControl = "no-cache";
    await Response.Body.FlushAsync();

    if (content is null)
    {
        var error = JsonSerializer.Serialize(MessageModel<string>.Fail("生成失败"), _jsonSerializerOptions);
        await Response.WriteAsync($"data: {error}\n\n");
        await Response.Body.FlushAsync();
    }
    else
    {
        await foreach (var item in content)
        {
            await Response.WriteAsync($"data: {MessageModel<string>.Ok(item.ToString())}\n\n");
            await Response.Body.FlushAsync();
        }
    }

    // 结束标记
    await Response.WriteAsync($"data: [DONE]\n\n");
    await Response.Body.FlushAsync();
    return Results.Empty;
}

在上面额代码中,我们使用 InvokePromptStreamingAsync 方法获取模型的流式输出,并通过 Response.WriteAsync 方法将输出推送给客户端。每个完整数据包后跟随两个换行符(\n\n),这是SSE协议的要求。在客户端接收到 [DONE] 标记后,表示数据传输结束。这里的 MessageModel 是一个自定义的消息模型,可以安装 Sang.AspNetCore.CommonLibraries 包来使用,每个数据包(message)都是一个完整的 json 数据,方便解析。下图是测试结果:

在这里插入图片描述

4. 前端接收

在Vue3应用中,我们可以使用 EventSource 接口或者第三方库来接收SSE数据。对于原生使用和 EventSource 的更多信息,请参考 MDN 文档。

这里,我们将使用 @microsoft/fetch-event-source 库来演示如何接收服务器发送的数据。

首先,安装 @microsoft/fetch-event-source 库:

npm install @microsoft/fetch-event-source

然后,在Vue组件中,我们可以这样接收数据:

import { ref } from 'vue';
import { fetchEventSource } from '@microsoft/fetch-event-source';

const dataStream = ref('');

const fetchDataStream = () => {
  fetchEventSource('/test', {
    method: 'POST',
    headers: {
      "Content-Type": 'application/json',
    },
    body: JSON.stringify({ /* 请求体 */ }),
    onmessage(event) {
      if (event.data === '[DONE]') {
        console.log('Stream ended');
        return;
      }
      let data = JSON.parse(event.data);
      dataStream.value += data.data;
      // 更新UI等操作
    },
    onerror(error) {
      console.error('Stream encountered error:', error);
    }
  });
};

在上面的代码中,我们使用fetchEventSource方法订阅了服务器端的SSE。每当服务器发送新的数据时,onmessage回调就会被触发,我们可以在这里更新Vue组件的状态,以实现数据的实时展示。

注意,这里演示使用的是 POST 请求,在这个案例中直接将服务端和接收端使用 GET 请求也是可以的。但是默认浏览器 EventSource API 对允许发出的请求类型施加了一些限制作,其中就包括不允许使用 POST 请求。因此,如果需要使用 POST 请求,可以使用 @microsoft/fetch-event-source 库。具体的更多信息可以参考 GitHub 仓库 Azure/fetch-event-source。

5. 结语

SSE提供了一种高效、简单的方法,允许服务器向客户端推送实时数据。通过结合Semantic Kernel和Vue3,我们可以构建出能够实时响应大模型推理结果的Web应用,从而提供更加流畅和动态的用户体验。希望本文所介绍的内容能够帮助到你,欢迎留言讨论。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/719163.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【单片机毕业设计选题24013】-基于STM32的城市垃圾分类引导系统

系统功能: 1、系统具有语音识别功能&#xff0c;可以对厨余垃圾、其他垃圾、有害垃圾、可回收垃圾进行语音识别&#xff1b; 2、系统可根据语音识别结果直接开启对应类别的垃圾桶&#xff0c;引导分类投放&#xff1b; 3、系统具有语音播报功能&#xff0c;可以语音播报出识…

Dapr分布式应用运行时初探2

Dapr是一个很优秀的分布式应用运行时&#xff0c;在本篇里我们来说一下Dapr的几个特色功能。 为了方便介绍&#xff0c;我简单画了个思维导图&#xff0c;如下所示&#xff1a; 众所周知&#xff0c;新技术的产生是为了解决现存的问题。从上面的思维图中我们可以了解下Dapr这…

【x264】滤波模块的简单分析

【x264】滤波模块的简单分析 1. 滤波模块概述1.1 自适应边界1.2 自适应样点级滤波器1.3 滤波过程 2. 函数入口&#xff08;fdec_filter_row&#xff09;2.1 去块滤波&#xff08;x264_frame_deblock_row&#xff09;2.1.1 强滤波函数&#xff08;deblock_edge_intra&#xff09…

FPGA - 滤波器 - IIR滤波器设计

一&#xff0c;IIR滤波器 在FPGA - 滤波器 - FIR滤波器设计中可知&#xff0c;数字滤波器是一个时域离散系统。任何一个时域离散系统都可以用一个N阶差分方程来表示&#xff0c;即&#xff1a; 式中&#xff0c;x(n)和y(n)分别是系统的输入序列和输出序列&#xff1b;aj和bi均为…

vue简介实例

先看样式 再看代码 <div v-else class"relative mt-4 h-44 cursor-pointer overflow-hidden rounded-xl"><divclass"absolute flex h-44 w-full blur-lg":style"{ backgroundImage: url(${currentSongList.list[0]?.coverImgUrl}) }"…

jpg压缩在线方法,我只用这2种(无损)

在数字化的时代&#xff0c;我们经常需要分享、存储或上传各种图像文件&#xff0c;而JPG是其中最常见的图像格式之一。然而&#xff0c;大文件大小有时可能成为一个问题&#xff0c;尤其是在网络传输或存储空间有限的情况下。为了解决这一问题&#xff0c;我们可以利用在线工具…

滚球游戏笔记

1、准备工作 (1) 创建地面&#xff1a;3D Object-Plane&#xff0c;命名为Ground (2) 创建小球&#xff1a;3D Object-sphere&#xff0c;命名为Player&#xff0c;PositionY 0.5。添加Rigidbody组件 (3) 创建文件夹&#xff1a;Create-Foder&#xff0c;分别命名为Material…

Ps:条件模式更改

Ps菜单&#xff1a;文件/自动/条件模式更改 Automate/Conditional Mode Change 条件模式更改 Conditional Mode Change脚本命令可用于将图像文档的颜色模式更改为指定的模式。 既可以将指定的源颜色模式转换为目标颜色模式&#xff0c;还可以将此命令记录在动作中以便实施快速转…

单通道触摸感应开关RH6016

1.简介 SOT23-6 RH6016 封装和丝印 RH6016 是一款内置稳压模块的单通道电容式触摸感应控制开关IC&#xff0c;可以替代传统的机械式开关。 RH6016可在有介质(如玻璃、亚克力、塑料、陶瓷等)隔离保护的情况下实现触摸功能&#xff0c;安全性高。 RH6016内置高精度稳压、上电复…

Apache Doris 全新分区策略 Auto Partition 应用场景与功能详解 | Deep Dive系列

编辑&#xff1a;SelectDB 技术团队 在当今数据驱动的时代&#xff0c;如何高效、有序地管理数据库中的海量数据成为挑战。为了处理庞大的数据集&#xff0c;分布式数据库引入了类似分区和分桶策略&#xff0c;通过将数据按特定规则划分成较小的单位并分布到不同节点上&#x…

远程桌面控制

收费程序&#xff0c;白嫖党勿扰 收费金额1000元 1 概述 之前做了一个云渲染程序&#xff0c;和虚幻的像素流原理是一样的&#xff0c;不过没有虚幻做的那么完善。云渲染是使用视频流技术&#xff0c;将三维可视化画面以视频流的形式推送到服务器&#xff0c;服务器将视频转发…

28. 空间滤波器

导论&#xff1a; 几何光线追迹是光线传播的一种不完善描述。严格地说&#xff0c;光束传播是一个相干过程。当波前通过自由空间或光学介质时&#xff0c;波前会发生相干干涉。这种相干传播的建模包括物理光学领域。 物理光学传播&#xff08;POP&#xff09;是zemax的一项强…

2024年【高压电工】模拟考试题及高压电工考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2024年高压电工模拟考试题为正在备考高压电工操作证的学员准备的理论考试专题&#xff0c;每个月更新的高压电工考试试题祝您顺利通过高压电工考试。 1、【单选题】下列()安全用具是在电气操作中使用的基本安全用具。…

服务器数据恢复—KVM虚拟机被误删除如何恢复虚拟磁盘文件?

服务器数据恢复环境&故障&#xff1a; 1台服务器&#xff0c;Linux操作系统EXT4文件系统&#xff0c;部署了数台KVM虚拟机&#xff0c;每台虚拟机包含一个qcow2格式的磁盘文件&#xff0c;和一个raw格式的磁盘文件。 工作人员操作失误删除了3台服务器上的KVM虚拟机&#xf…

c# 二维图形绘制实践

1.等边三角形 1.1 概述 1.2 代码 using System; using System.Drawing; using System.Windows.Forms;public partial class TriangleForm : Form {public TriangleForm(){//InitializeComponent();// 确保窗体大小足够大&#xff0c;以容纳三角形 this.ClientSize new Siz…

springboot相关的一些知识

SpringBoot可以同时处理多少请求 SpringBoot默认的内嵌容器是Tomcat&#xff0c;所以SpringBoot可以同时处理多少请求取决于Tomcat。 SpringBoot中处理请求数量相关的参数有四个&#xff1a; server.tomcat.thread.min-spare&#xff1a;最少的工作线程数&#xff0c;默认大小…

表单中的常用元素

10.图像形式上传文件 <input type“image”>定义图像形式的提交。 src 属性和alt属性必须与<input type“image””>结合使用。 input type"image"src"img/l.jpg"alt"submit"/> 11.下拉列表框 <select>标签定义下拉列表框…

ubuntu 20.04禁止自动更新内核驱动、显卡驱动(使用命令行)

本文目录 一、禁止更新内核1.1 查看当前内核1.2 查看安装的内核1.3 根据需求&#xff0c;使用hold参数禁止固定内核1.4 查询被锁定不更新软件包的状态 二、禁止更新显卡驱动2.1 查看安装的显卡驱动2.2 查看详细的详细的显卡信息2.3 禁止显卡驱动更新2.4 查询显卡是否设置成功 前…

EE trade:现货黄金杠杆比例的计算方法

现货黄金杠杆交易是一种利用保证金进行交易的方式&#xff0c;允许投资者用较少的资金控制较大的交易量&#xff0c;从而放大收益或损失。杠杆比例的计算方法相对简单&#xff0c;主要取决于交易所需的保证金和实际交易金额之间的关系。 杠杆比例的计算公式 杠杆比例 实际交…

SoC设计更重要的是IP管理

对于大多数片上系统&#xff08;SoC&#xff09;设计来说&#xff0c;最关键的任务不是RTL编码&#xff0c;甚至不是创建芯片架构。今天&#xff0c;SoC的设计主要使用来自多个供应商的各种IP块。这使得管理硅IP成为SoC设计过程中的主要任务。 一般来说&#xff0c;新编写的RTL…