chatGPT流式输出的几种方式

这篇具有很好参考价值的文章主要介绍了chatGPT流式输出的几种方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

chatGPT是一款高效强大的语言模型,能够给我们的生活带来极大的改变。无论是学习知识还是工作效率,chatGPT都能为我们提供有力的帮助。它可以帮助我们快速获取所需的知识,同时可以帮助我们提高工作效率,包括写文章、文案、推荐策略、生成代码、写周报,流程图等等。此外,它还可以成为您智能的助手,帮您打理日常事务,如一键预约、贴心提醒等。对于小朋友们来说,他还可以为他们写作文。总之,chatGPT是一个多功能的智能管家,不管您的需求是什么,它都能为您提供强大的支持。欢迎有需要的朋友戳链接体验:Talk-Bot,不喜勿喷,广交益友

废话不多说,直接上代码

SseEmitter

这种方式比较常用,我们这里引入github上PlexPt大神封装好的类直接引用即可,地址为:chatgpt-java,也可以自己封装哈

<dependency>
    <groupId>com.github.plexpt</groupId>
    <artifactId>chatgpt</artifactId>
    <version>4.0.7</version>
</dependency>
   private static final String OPENAI_API_HOST = "https://api.openai.com/";
    
   @PostMapping(value = "/v1/stream")
   public SseEmitter streamEvents(@RequestBody  ChatRequest chatRequest) {
	  SseEmitter sseEmitter = new SseEmitter(-1L);
	    
	   // 不需要代理的话,注销此行
	   Proxy proxy = Proxys.http("192.168.1.98", 7890);
	   ChatGPTStream chatGPTStream = ChatGPTStream.builder()
	           .timeout(600)
	           .apiKey("你的openApiKey")
	           .proxy(proxy)
	           .apiHost(OPENAI_API_HOST)
	           .build()
	           .init();

       SseStreamListener listener = new SseStreamListener(sseEmitter);
	   Message message = Message.of(chatRequest.getInput());
	   ChatCompletion chatCompletion = ChatCompletion.builder()
	        .model(ChatCompletion.Model.GPT_3_5_TURBO.getName())
	        .messages(Arrays.asList(message))
	        .build();
	   chatGPTStream.streamChatCompletion(chatCompletion, listener);
	   listener.setOnComplate(msg -> {
	       //回答完成,可以做一些事情
	       sseEmitter.complete();
	   });
	   return sseEmitter;
	}

前端调用,这里使用fetchEventSource,普通的eventSource不能发送post参数

import { fetchEventSource } from '@microsoft/fetch-event-source';
const reqData = {
   id: '111',
   input: 'java编码实现快速排序算法',
   chatlog: [],
 };
 const headers = {
   'Content-Type': 'application/json',
 };
const eventSource = new fetchEventSource('/api/v1/stream', {
	method: 'POST',
	headers: headers,
	// 设置下,不然请求会一直重发
	openWhenHidden: truebody: JSON.stringify(reqData),
	onopen(response) {
		console.info('eventSource open: ', response);
     },
     onmessage(event) {
          console.log('eventSource msg: ', event.data);
     },
     onerror(err) {
         console.log('eventSource error: ' + err);
     },
     onclose() {
        console.log('eventSource close'); 
     }
});
HTTP Chunked方式

Message、ChatCompletion、ChatCompletionResponse 类都是根据官方需要的参数封装的实体,这里暂不能提供了,主要看思路吧

<dependency>
      <groupId>cn.hutool</groupId>
      <artifactId>hutool-all</artifactId>
      <version>5.8.22</version>
 </dependency>
 private static final String OPENAI_API_HOST = "https://api.openai.com/";

 private static final Map<String, Integer> API_KEY_MAP = new LinkedHashMap<String, Integer>() {
     {
         put("你的openApiKey", 5);
         put("你的openApiKey", 5); 
     }
 };
 @PostMapping("/v1/stream")
 public void streamHandler(@RequestBody ChatRequest chatRequest, HttpServletResponse response) throws Exception {
     String input = chatRequest.getInput();
     //按权重分配key
     List<String> weightList = new ArrayList<>(API_KEY_MAP.entrySet().size());
     for (Map.Entry<String, Integer> entry : API_KEY_MAP.entrySet()) {
         String element = entry.getKey();
         Integer weight = entry.getValue();
         for (int i = 0; i < weight; i++) {
             weightList.add(element);
         }
     }

    // 不需要代理的话,注销此行
     proxy = new Proxy(Proxy.Type.HTTP, new InetSocketAddress("192.168.1.98", 7890));
     Message message = Message.builder().role(Message.Role.USER).content(input).build();
     ChatCompletion chatCompletion = ChatCompletion.builder().messages(Arrays.asList(message)).stream(true).build();
     
     String requestBody = JSONUtil.toJsonStr(chatCompletion);
     HttpRequest client = HttpRequest.post(OPENAI_API_HOST + "v1/chat/completions")
             .contentType(ContentType.JSON.getValue())
             .bearerAuth(RandomUtil.randomEle(weightList))
             .keepAlive(true)
             .setProxy(proxy)
             .timeout(300000)
             .body(requestBody);

     BufferedReader reader = new BufferedReader(new InputStreamReader(client.executeAsync().bodyStream()));
     String line;
       try {
		     while ((line = reader.readLine()) != null) {
		         line = StrUtil.replace(line, "data: ", "");
		         if (StrUtil.isEmpty(line)) {
		             continue;
		         }
		         if (!StrUtil.equals("[DONE]", line)) {
		            ChatCompletionResponse chatCompletionResponse;
					try {
						// 官方错误返回不是一个json格式的,这里兼容下
						chatCompletionResponse = JSONUtil.toBean(line, ChatCompletionResponse.class);
					} catch (Exception e) {
					   // 自己打印日志
						continue;
					}
					if (Objects.isNull(chatCompletionResponse) || Objects.isNull(chatCompletionResponse.getChoices()) || chatCompletionResponse.getChoices().isEmpty()) {
						continue;
					}
		             if (!StrUtil.equals("stop", chatCompletionResponse.getChoices().get(0).getFinishReason())) 		    {
		                 String content = chatCompletionResponse.getChoices().get(0).getDelta().getContent();
		                 if (StrUtil.isEmpty(content)) {
		                     continue;
		                 }
		                 response.getWriter().write(content);
		                 response.getWriter().flush();
		             }
		         }
		     }
     } catch (Exception e) {
          // 自己打印日志,line = reader.readLine()这行代码读取会出现超时的情况,所以加了个try catch
      }
     reader.close();
     response.getWriter().close();
 }

nginx配置,这个必须加上

 proxy_http_version 1.1;

前端调用,这里使用axios,比较简单

import axios from 'axios';

const reqData = {
   id: '111',
   input: 'java编码实现快速排序算法',
   chatlog: [],
 };
 const headers = {
   'Content-Type': 'application/json',
 };
axios.post('/api/v1/stream', reqData , { headers }).then(
function (response) {
	console.log(response);
}).catch(function (error) {
	console.log(error);
});
WebSocket方式

这种方式实现起来稍微复杂些,跟SseEmitter实现方式差别不大,感兴趣的可以用chatGPT生成一下,哈哈哈,链接戳:Talk-Bot(请各位大佬手下留情啊!!!!)文章来源地址https://www.toymoban.com/news/detail-460309.html

到了这里,关于chatGPT流式输出的几种方式的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端实现chatGpt流式输出 - SSE

    一、chatGpt流式输出技术分析 在使用ChatGPT时,模型的回复内容是连续输出,而不是整段话直接出现,因为模型需要不断预测接下来要回复什么内容,如果等整段回复生成之后再输出到网页,用户体验就会很差,后面才了解到使用SSE技术可以实现。 相关知识小tips 长轮询:客户

    2024年03月18日
    浏览(47)
  • Python Flask 封装ChatGPT流式输出接口

    首先, 恭喜你搜到了这篇文章, 因为, 我解决这个问题时, 也搜了很久的博客, 结果都无法正确实现 截至今日, 快有半年博客没有更新了, 今天忙里偷闲, 将最近在忙的事情做一个总结 之前搞了个域名, 做了个chatgpt的工具站, 欢迎大家体验, 可以评论区留下宝贵建议: www.ktatom.com 封

    2024年02月11日
    浏览(38)
  • chatGPT流式输出前端实现fetch、SSE、websocket

    fetch 本身不直接支持流式输出,但你可以使用 ReadableStream 和 TextDecoder 等 Web Streams API 来实现类似的效果。 在 SSE 中,浏览器通过发送 HTTP GET 请求到服务器上特定的 SSE 端点(endpoint),然后服务器通过该连接发送事件(event)和相关数据到客户端,故SSE 主要使用 GET 请求。E

    2024年02月04日
    浏览(41)
  • 在python中查看输出结果的几种方法

    在Python中,查看代码的输出结果通常有多种方法,这取决于你的开发环境、代码结构以及代码运行的上下文。下面列举了一些常见的查看Python代码输出结果的方法,并为每种方法提供了相应的代码示例。  1. 使用 `print()` 语句: `print()` 是最简单直接的输出方法,可以在代码中

    2024年03月18日
    浏览(67)
  • MCU输出日志和调试信息的几种方法

    基于MCU的嵌入式软件开发,可能在某些情况下没有多余存储空间,从而没有在本地有效保存调试和日志信息。 这时,通过某种方式把调试(Debug)和日志(Log)信息输出就显得有意义了。 下面就来讲讲关于嵌入式开发中输出调试和日志信息的几点内容。 标准库 printf 直接输出

    2024年03月15日
    浏览(66)
  • 求1000以内所有素数并输出的几种方法

    今天咱们来点不一样的,来看一下这样的一道题目,他要求我们把1-1000的素数全部找到并且输出 那我们先要了解什么是素数, 所谓素数,就是指在大于1的自然数中,除了1和它本身以外不再有其他因数的自然数 。而合数则恰巧与素数相反,是指在大于1的整数中除了能被1和本

    2024年02月06日
    浏览(57)
  • 【Qt】qDebug() 输出16进制数的几种方法

    Qt qDebug() 输出16进制数字的几种方法整理:

    2024年04月28日
    浏览(38)
  • 织梦CMS常用的几种字段判断输出实例详解

    我们在使用织梦CMS制作网站时,对于某个字段,无论是默认字段还是自定义字段,偶尔会使用一些判断语句来实现我们的需求。下边列出了几种常见的需求。以及字段的判断输出实例。 第一种:织梦自定义字段,如果没有值的时候要显示指定的默认内容, \\\"; } {/dede:field} 第二

    2024年02月02日
    浏览(66)
  • ChatGPT垂直行业私有数据知识库功能-咨询接口采用流式响应输出-JS和Golang实现流式响应

    近期开发私有数据知识库功能,想要实现和ChatGPT聊天效果类似的逐字流式输出展示效果。 GPT3.5本身就有流式聊天补全接口,后端Golang对接后,也需要能流式输出。下面就介绍下前端JS后端Golang来实现这种输出效果   大部分介绍是使用EventStream来实现,我现在不使用EventStream也

    2023年04月10日
    浏览(44)
  • chatgpt 逐字输出 使用fetch/eventSource/fetchEventSouce进行sse流式处理

    前端使用vue 先贴最后成功使用的 使用fetchEventSource方法 参考代码:https://blog.csdn.net/cuiyuchen111/article/details/129468291 参考/下载文档:https://www.npmjs.com/package/@microsoft/fetch-event-source?activeTab=readme 以下为后端接口要求 前端代码 遇到的问题: 1.只调用一次事件 但fetch请求发送了两次或

    2024年02月07日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包