• 【gtp&JavaScript】使用JavaScript实现套壳gtp与gtp打字输出效果

    postman测试gtp接口

    https://platform.openai.com/docs/api-reference/chat/create?lang=curl

    导入到postman中

    记得弄一个gtp的key

    然后请求测试gtp接口：

    纯前端实现gtp请求页面 

    目录结构：

     

    部分参考：GitHub - xxxjkk/chat-website: 简易版chat网站，拿来即用，静态部署 

     index.html

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.   <script>
    6.     var password = ""
    7.     var realpassword = atob("NjY4OA==")
    8.     password = prompt('请输入密码 (本网站需输入密码才可进入):', '')
    9.     if (password != realpassword) {
    10.       alert("密码不正确,无法进入本站!!")
    11.       // 密码不正确就关闭
    12.       open(location, '_self').close()
    13.     }  
    14.   script>
    15.  
    16.   <meta charset="UTF-8">
    17.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    18.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    19.   
    20.   <link rel="icon" type="images/x-icon" href="./static/images/favicon.ico">
    21.   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    22.   <link rel="stylesheet" href="./static/css/bootstrap.min.css">
    23.   <link rel="stylesheet" href="./static/css/style.css">
    24.   <title>ac-chattitle>
    25.   <style>
    26.     #output {
    27.       display: inline;
    28.     }
    29.  
    30.     .cursor {
    31.       display: inline-block;
    32.       width: 10px;
    33.       height: 20px;
    34.       background-color: black;
    35.       vertical-align: text-bottom;
    36.       animation: blink 1s infinite;
    37.     }
    38.  
    39.     @keyframes blink {
    40.       50% {
    41.         opacity: 0;
    42.       }
    43.     }
    44.   style>
    45. head>
    46.  
    47. <body>
    48.   <div class="container">
    49.     <div class="row">
    50.       <div class="col-xs-12">
    51.         <div class="title">
    52.           <h2 class="text-center">ChatGTPh2>
    53.         div>
    54.  
    55.         <div class="key">
    56.           <div class="input-group col-sm-6">
    57.             <span class="input-group-addon">
    58.               <input type="checkbox" class="ipt-1">
    59.             span>
    60.             <input type="password" class="form-control ipt-2" placeholder="使用自己的api key">
    61.           div>
    62.         div>
    63.  
    64.         <div class="answer">
    65.           <div class="tips text-center">
    66.             <h3 class="lead">仅做技术研究探讨使用！h3>
    67.           div>
    68.           <div id="chatWindow">div>
    69.           <div class="input-group ipt">
    70.             <div class="col-xs-12">
    71.               <textarea id="chatInput" class="form-control" rows="1" style="min-height: 40px;">textarea>
    72.             div>
    73.             <button id="chatBtn" class="btn btn-primary" type="button">Go !button>
    74.           div>
    75.         div>
    76.       div>
    77.     div>
    78.  
    79.     <div class="row foot">
    80.       <footer class="col-xs-12" style="margin-top: 10px;">
    81.         <p class="lead text-center">“抢走工作的不会是AI，而是率先掌握AI能力的人”p>
    82.       footer>
    83.     div>
    84.   div>
    85.  
    86. body>
    87.  
    88. <script src="./static/js/jquery-2.1.1.js">script>
    89. <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js">script>
    90. <script src="./static/js/bootstrap.min.js">script>
    91. <script src="./static/js/layer/layer.js">script>
    92. <script src="./static/js/custom.js">script>
    93.  
    94. html>

    custom.js

    1. // 封装弹窗layer组件等
    2. var common_ops = {
    3.   // 封装layer.alert(content, options, yes) - 普通信息框
    4.   alert: function (msg, cb) {
    5.     layer.alert(msg, {
    6.       yes: function (index) {
    7.         if (typeof cb == "function") {
    8.           cb();
    9.         }
    10.         layer.close(index);
    11.       }
    12.     });
    13.   },
    14.   // 封装layer.confirm(content, options, yes, cancel) - 询问框
    15.   confirm: function (msg, callback) {
    16.     callback = (callback != undefined) ? callback : { 'ok': null, 'cancel': null };
    17.     layer.confirm(msg, {
    18.       btn: ['确定', '取消']
    19.     }, function (index) {
    20.       //确定事件
    21.       if (typeof callback.ok == "function") {
    22.         callback.ok();
    23.       }
    24.       layer.close(index);
    25.     }, function (index) {
    26.       //取消事件
    27.       if (typeof callback.cancel == "function") {
    28.         callback.cancel();
    29.       }
    30.       layer.close(index);
    31.     });
    32.   }
    33. };
    34.  
    35. $(document).ready(function () {
    36.   // 查询按钮
    37.   var chatBtn = $('#chatBtn');
    38.   // 查询内容
    39.   var chatInput = $('#chatInput');
    40.   $("#chatInput").resizable();
    41.   // 中间内容
    42.   var chatWindow = $('#chatWindow');
    43.  
    44.   // 存储对话信息,实现连续对话
    45.   var messages = []
    46.  
    47.   // 移除加载效果
    48.   function deleteLoading() {
    49.     chatWindow.find('#loading').remove();
    50.   }
    51.  
    52.  
    53.   // 将 HTML 字符串转义为纯文本
    54.   function escapeHtml(html) {
    55.     var text = document.createTextNode(html);
    56.     var div = document.createElement('div');
    57.     div.appendChild(text);
    58.     return div.innerHTML;
    59.   }
    60.  
    61.   // 创建输入的文本
    62.   function addLoading() {
    63.     // 隐藏 “仅做技术研究探讨使用！”
    64.     $(".answer .tips").css({ "display": "none" });
    65.     // 输入框清空
    66.     chatInput.val('');
    67.     // 加载动画
    68.     var messageElement = $('
      加载动画
      '      );
    69.     chatWindow.append(messageElement);
    70.   }
    71.  
    72.   function scrollToBottom(id) {
    73.     var element = document.getElementById(id);
    74.     element.scrollTop = element.scrollHeight;
    75.   }
    76.  
    77.  
    78.   // 添加消息到窗口 用户跟gtp文本消息
    79.   function addMessage(message, imgName) {
    80.     $(".answer .tips").css({ "display": "none" });
    81.     chatInput.val('');
    82.     var escapedMessage = escapeHtml(message);
    83.     var messageElement = $('
      '">
      ' + escapedMessage + '
      '      );
    84.     chatWindow.append(messageElement);
    85.   }
    86.  
    87.   // 添加消息到窗口 自定义添加消息(异常啥的)
    88.   function addFailMessage(message) {
    89.     $(".answer .tips").css({ "display": "none" });
    90.     chatInput.val('');
    91.     var messageElement = $('
      ' + message + '
      '      );
    92.     chatWindow.append(messageElement);
    93.   }
    94.  
    95.   // 处理用户输入
    96.   chatBtn.click(function () {
    97.     // 解绑键盘事件 回车之后解绑，防止未获得结果时 又发一个请求
    98.     chatInput.off("keydown", handleEnter);
    99.  
    100.     // 保存api key与对话数据
    101.     var data = {
    102.       "apiKey": "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", // 这里填写固定 apiKey
    103.     }
    104.  
    105.     // 判断是否使用自己的api key
    106.     if ($(".key .ipt-1").prop("checked")) {
    107.       var apiKey = $(".key .ipt-2").val();
    108.       if (apiKey.length < 20) {
    109.         common_ops.alert("请输入正确的 api key ！", function () {
    110.           chatInput.val('');
    111.           // 重新绑定键盘事件
    112.           chatInput.on("keydown", handleEnter);
    113.         })
    114.         return
    115.       } else {
    116.         data.apiKey = apiKey
    117.       }
    118.     }
    119.  
    120.     var message = chatInput.val();
    121.     if (message.length == 0) {
    122.       common_ops.alert("请输入内容！", function () {
    123.         chatInput.val('');
    124.         // 重新绑定键盘事件
    125.         chatInput.on("keydown", handleEnter);
    126.       })
    127.       return
    128.     }
    129.  
    130.     // 创建用户对话行
    131.     addMessage(message, "avatar.png");
    132.  
    133.     // 将用户消息保存到数组
    134.     messages.push({ "role": "user", "content": message })
    135.  
    136.     // 收到回复前让按钮不可点击
    137.     chatBtn.attr('disabled', true)
    138.  
    139.     data.prompt = messages
    140.  
    141.     // 出现loading动画
    142.     addLoading();
    143.  
    144.     // 发送信息到后台
    145.     $.ajax({
    146.       url: 'https://open.aiproxy.xyz/v1/chat/completions',
    147.       method: 'POST',
    148.       headers: {
    149.         'Content-Type': 'application/json',
    150.         'Authorization': 'Bearer ' + data.apiKey
    151.       },
    152.       data: JSON.stringify({
    153.         "messages": data.prompt,
    154.         "model": "gpt-3.5-turbo",
    155.         "max_tokens": 2048,
    156.         "temperature": 0.5,
    157.         "top_p": 1,
    158.         "n": 1
    159.       }),
    160.       success: function (res) {
    161.         const resp = res["choices"][0]["message"];
    162.         // 创建回复对话行
    163.         addMessage(resp.content, "chatgpt.png");
    164.         // 收到回复，让按钮可点击
    165.         chatBtn.attr('disabled', false)
    166.         // 重新绑定键盘事件
    167.         chatInput.on("keydown", handleEnter);
    168.         // 去除loading动画
    169.         deleteLoading()
    170.         // 将回复添加到数组
    171.         messages.push(resp)
    172.       },
    173.       error: function (jqXHR, textStatus, errorThrown) {
    174.         // 去除loading动画
    175.         deleteLoading()
    176.  
    177.         addFailMessage('' + '出错啦！请稍后再试!' + '');
    178.         chatBtn.attr('disabled', false)
    179.         chatInput.on("keydown", handleEnter);
    180.         messages.pop() // 失败就让用户输入信息从数组删除
    181.       }
    182.     });
    183.   });
    184.  
    185.   // Enter键盘事件
    186.   function handleEnter(e) {
    187.     if (e.keyCode == 13) {
    188.       chatBtn.click();
    189.     }
    190.   }
    191.  
    192.   // 绑定Enter键盘事件
    193.   chatInput.on("keydown", handleEnter);
    194.  
    195.   // 禁用右键菜单
    196.   document.addEventListener('contextmenu',function(e){
    197.     e.preventDefault();  // 阻止默认事件
    198.   });
    199.  
    200.   // 禁止键盘F12键
    201.   document.addEventListener('keydown',function(e){
    202.     if(e.key == 'F12'){
    203.         e.preventDefault(); // 如果按下键F12,阻止事件
    204.     }
    205.   });
    206. });

    现在请求到数据之后是一下子全部显示，纯前端如何实现一字一字输出的打字效果呢？

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     
    7. <meta name="referrer" content="no-referrer" />
    8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    9.     <title>打字效果title>
    10.     <style>
    11.         #output {
    12.             display: inline;
    13.         }
    14.  
    15.         .cursor {
    16.             display: inline-block;
    17.             width: 10px;
    18.             height: 20px;
    19.             background-color: black;
    20.             vertical-align: text-bottom;
    21.             animation: blink 1s infinite;
    22.         }
    23.  
    24.         @keyframes blink {
    25.             50% {
    26.                 opacity: 0;
    27.             }
    28.         }
    29.     style>
    30. head>
    31.  
    32. <body>
    33.     <h1>ChatGPT Typing Effecth1>
    34.     <div id="output">div><span class="cursor" id="cursor">span>
    35.     <div id="givenText" style="display: none;">
    36.         <strong>加粗文本strong><br>
    37.         <em>斜体文本em><br>
    38.         <u>下划线文本u><br>
    39.         <span style="color: red;">红色文本span><br>
    40.         <span style="font-size: 24px;">大字体文本span><br>
    41.         <a href="https://github.com/azhu021/">链接示例a>
    42.     div>
    43.  
    44.     <script>
    45.         const outputElement = document.getElementById("output");
    46.         const cursorElement = document.getElementById("cursor");
    47.         const givenTextElement = document.getElementById("givenText");
    48.         const givenText = givenTextElement.innerHTML;
    49.         let currentIndex = 0;
    50.         let currentHTML = "";
    51.  
    52.         function typeText() {
    53.             if (currentIndex < givenText.length) {
    54.                 const currentChar = givenText.charAt(currentIndex);
    55.                 if (currentChar === "<") {
    56.                     const closingTagIndex = givenText.indexOf(">", currentIndex);
    57.  
    58.                     currentHTML += givenText.slice(currentIndex, closingTagIndex + 1);
    59.                     currentIndex = closingTagIndex + 1;
    60.                 } else {
    61.                     currentHTML += currentChar;
    62.                     currentIndex++;
    63.                 }
    64.                 outputElement.innerHTML = currentHTML;
    65.                 setTimeout(typeText, 100); // 设置打字速度，单位为毫秒
    66.             } else {
    67.                 // 当打印完成时，移除光标的闪烁效果
    68.                 cursorElement.classList.remove("cursor");
    69.             }
    70.         }
    71.         typeText();
    72.     script>
    73. body>
    74.  
    75. html>

    将其效果移植到custom.js中

    1. //XXXXXXXXXXXXXXXXXXXXXXXX
    2.  
    3.   let currentIndex = 0;
    4.   let currentHTML = "";
    5.   function addMessageTwo(id, message) {
    6.     if (currentIndex < message.length) {
    7.       currentHTML = ''
    8.       currentHTML += message.slice(0, currentIndex + 1);
    9.  
    10.       $(`#${id}`).text(currentHTML)
    11.       currentIndex++
    12.       setTimeout(() => addMessageTwo(id, message), 100);
    13.     } else {
    14.       currentIndex = 0
    15.     }
    16.   }
    17.   // 处理用户输入
    18.   chatBtn.click(function () {
    19.  
    20. //XXXXXXXXXXXXXXXXXXXXXXXX
    21.  
    22.     // 发送信息到后台
    23.     $.ajax({
    24.       url: 'https://open.aiproxy.xyz/v1/chat/completions',
    25.       method: 'POST',
    26.       headers: {
    27.         'Content-Type': 'application/json',
    28.         'Authorization': 'Bearer ' + data.apiKey
    29.       },
    30.       data: JSON.stringify({
    31.         //XXXXXXXXXXXXXXXXXXXXXXXX
    32.       }),
    33.       success: function (res) {
    34.         const resp = res["choices"][0]["message"];
    35.         // 创建回复对话行
    36.         // addMessage(resp.content, "chatgpt.png");
    37.         $(".answer .tips").css({ "display": "none" });
    38.         chatInput.val('');
    39.         var escapedMessage = escapeHtml(resp.content);
    40.         var messageElement = $('
      '      );
    41.         chatWindow.append(messageElement);
    42.         addMessageTwo(res["id"], escapedMessage)
    43.  
    44.         //XXXXXXXXXXXXXXXXXXXXXXXX
    45.       },
    46.     });
    47.   });
    48.  
    49.   //XXXXXXXXXXXXXXXXXXXXXXXX
    50.

    上述通过前端的js实现一字一字打字输出效果，但还有问题：请求完获取数据之后才开始一字一字输出，如何返回的文本过长 需要等待很久，显然这种方式不行，那有没有那种实时的逐字输出呢？ SSE

    SSE（Sever-sent Events) 

    服务器发送事件（Server-sent Events，简称 SSE）是一种在客户端浏览器和服务器之间进行单向通信的 Web 技术。它允许服务器向客户端推送数据，而不需要客户端主动请求。

    SSE（Server-sent Events）和 WebSocket 的区别

    单向 vs 双向通信

    • SSE 是一种单向通信机制，只能服务器向客户端发送数据。客户端无法主动向服务器发送消息。
    • WebSocket 是一种双向通信机制，允许客户端和服务器之间进行双向实时通信。客户端和服务器都可以主动发送和接收消息。

    连接建立

    • SSE 基于传统的 HTTP 协议，连接通过 HTTP 请求建立，并保持长时间打开。因此，SSE 连接始终由客户端发起。
    • WebSocket 是一种独立的协议，它在创建连接时需要使用特殊的 WebSocket 握手协议。WebSocket 连接可以由客户端或服务器发起。

    数据格式

    • SSE 使用简单的文本格式或者 JSON 格式来传输数据。服务器以文本块的形式将数据发送给客户端。
    • WebSocket 可以传输任意格式的数据，例如文本、二进制数据等。

    app.js

    1. const express = require('express');
    2. const app = express()
    3. const router = express.Router();
    4.  
    5. app.use((req, res, next) => {
    6. 	res.setHeader('Access-Control-Allow-Origin', '*');
    7. 	res.setHeader('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
    8. 	next();
    9. });
    10.  
    11. router.get('/sse', (req, res) => {
    12.  
    13. 	res.setHeader('Content-Type', 'text/event-stream');
    14. 	res.setHeader('Cache-Control', 'no-cache');
    15. 	res.setHeader('Connection', 'keep-alive');
    16.  
    17. 	const answer = '众所周知，ChatGPT API 是一个OpenAI 的聊天机器人接口，它可以根据用户的输入生成智能的回复，为了提高聊天的流畅性和响应速度，采用流失输出的响应方式，类似打字机的呈现效果';
    18.  
    19. 	let i = 0;
    20. 	const intervalId = setInterval(() => {
    21. 		res.write('data:' + answer[i] + '\n\n');
    22. 		i++;
    23. 		if (i == answer.length) {
    24. 			clearInterval(intervalId);
    25. 			res.write('event:end\ndata: \n\n');  
    26. 		}
    27. 	}, 100);
    28. });
    29. app.use('/', router)
    30. app.listen(3333, function () {
    31. 	console.log('api server running at http://127.0.0.1:3333')
    32. })

    index.html

    1. DOCTYPE html>
    2. <html>
    3. <meta charset="UTF-8">
    4. <meta name="referrer" content="no-referrer" />
    5.  
    6. <head>
    7.     <title>SSE Exampletitle>
    8. head>
    9.  
    10. <body>
    11.     <h1>SSE Exampleh1>
    12.     <button id="startButton">开始button>
    13.     <div id="output">回答：div>
    14.     <script>
    15.         const startButton = document.getElementById('startButton');
    16.         const outputElement = document.getElementById('output');
    17.         startButton.addEventListener('click', function () {
    18.             let eventSource = new EventSource('http://172.21.2.52:3333/sse');
    19.             eventSource.onopen = function (event) {
    20.                 console.log('成功')
    21.             };
    22.             eventSource.onmessage = function (event) {
    23.                 const message = event.data;
    24.                 outputElement.innerHTML += message;
    25.             };
    26.         });
    27.     script>
    28. body>
    29.  
    30. html>

    效果图：

  • 相关阅读:
    云上攻防-云服务篇&对象存储&Bucket桶&任意上传&域名接管&AccessKey泄漏
    upload-labs通关(Pass01-Pass05)
    Kafka KRaft模式探索
    Jmeter快速入门
    三个烂怂八股文，变成两个场景题，打得我一脸问号。
    【数据库】openGauss3.1.0版本做了哪些优化
    elment-plus图标input上面带的图标为什么不显示
    【LeetCode-简单】121. 买卖股票的最佳时机（详解）
    网络链接失败怀疑是服务器处于非正常状态？如何用本地电脑查看服务器是否正常？
    HCIA网络课程第九周作业
  • 原文地址：https://blog.csdn.net/weixin_52479803/article/details/132575564