工信部 网站备案 上传电子37网页游戏中心

当前位置： 首页 > news >正文

工信部 网站备案 上传电子,37网页游戏中心,工厂管理系统软件,学生教育平台入口postman测试gtp接口 https://platform.openai.com/docs/api-reference/chat/create?langcurl 导入到postman中 记得弄一个gtp的key 然后请求测试gtp接口#xff1a; 纯前端实现gtp请求页面 目录结构#xff1a; 部分参考#xff1a;GitHub - xxxjkk/chat-website: 简易版c…postman测试gtp接口 https://platform.openai.com/docs/api-reference/chat/create?langcurl 导入到postman中 记得弄一个gtp的key 然后请求测试gtp接口 纯前端实现gtp请求页面  目录结构 部分参考GitHub - xxxjkk/chat-website: 简易版chat网站拿来即用静态部署  index.html !DOCTYPE html html langenheadscriptvar password var realpassword atob(NjY4OA)password prompt(请输入密码 (本网站需输入密码才可进入):, )if (password ! realpassword) {alert(密码不正确,无法进入本站!!)// 密码不正确就关闭open(location, _self).close()} /scriptmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0!– 设置小图标 –link relicon typeimages/x-icon href./static/images/favicon.icolink relstylesheet hrefhttps://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.csslink relstylesheet href./static/css/bootstrap.min.csslink relstylesheet href./static/css/style.csstitleac-chat/titlestyle#output {display: inline;}.cursor {display: inline-block;width: 10px;height: 20px;background-color: black;vertical-align: text-bottom;animation: blink 1s infinite;}keyframes blink {50% {opacity: 0;}}/style /headbodydiv classcontainerdiv classrowdiv classcol-xs-12div classtitleh2 classtext-centerChatGTP/h2/divdiv classkeydiv classinput-group col-sm-6span classinput-group-addoninput typecheckbox classipt-1/spaninput typepassword classform-control ipt-2 placeholder使用自己的api key/div/divdiv classanswerdiv classtips text-centerh3 classlead仅做技术研究探讨使用/h3/divdiv idchatWindow/divdiv classinput-group iptdiv classcol-xs-12textarea idchatInput classform-control rows1 stylemin-height: 40px;/textarea/divbutton idchatBtn classbtn btn-primary typebuttonGo !/button/div/div/div/divdiv classrow footfooter classcol-xs-12 stylemargin-top: 10px;p classlead text-center“抢走工作的不会是AI而是率先掌握AI能力的人”/p/footer/div/div/bodyscript src./static/js/jquery-2.1.1.js/script script srchttps://code.jquery.com/ui/1.13.1/jquery-ui.min.js/script script src./static/js/bootstrap.min.js/script script src./static/js/layer/layer.js/script script src./static/js/custom.js/script/html custom.js // 封装弹窗layer组件等 var common_ops {// 封装layer.alert(content, options, yes) - 普通信息框alert: function (msg, cb) {layer.alert(msg, {yes: function (index) {if (typeof cb function) {cb();}layer.close(index);}});},// 封装layer.confirm(content, options, yes, cancel) - 询问框confirm: function (msg, callback) {callback (callback ! undefined) ? callback : { ok: null, cancel: null };layer.confirm(msg, {btn: [确定, 取消]}, function (index) {//确定事件if (typeof callback.ok function) {callback.ok();}layer.close(index);}, function (index) {//取消事件if (typeof callback.cancel function) {callback.cancel();}layer.close(index);});} };\((document).ready(function () {// 查询按钮var chatBtn \)(#chatBtn);// 查询内容var chatInput \((#chatInput);\)(#chatInput).resizable();// 中间内容var chatWindow \((#chatWindow);// 存储对话信息,实现连续对话var messages []// 移除加载效果function deleteLoading() {chatWindow.find(#loading).remove();}// 将 HTML 字符串转义为纯文本function escapeHtml(html) {var text document.createTextNode(html);var div document.createElement(div);div.appendChild(text);return div.innerHTML;}// 创建输入的文本function addLoading() {// 隐藏 “仅做技术研究探讨使用”\)(.answer .tips).css({ display: none });// 输入框清空chatInput.val();// 加载动画var messageElement \((div idloading classrow message-bubbleimg classchat-icon src./static/images/chatgpt.pngp classmessage-textimg src./static/images/loading-1.gif alt加载动画/p/div);chatWindow.append(messageElement);}function scrollToBottom(id) {var element document.getElementById(id);element.scrollTop element.scrollHeight;}// 添加消息到窗口 用户跟gtp文本消息function addMessage(message, imgName) {\)(.answer .tips).css({ display: none });chatInput.val();var escapedMessage escapeHtml(message);var messageElement \((div classrow message-bubbleimg classchat-icon src./static/images/ imgName p classmessage-text escapedMessage /p/div);chatWindow.append(messageElement);}// 添加消息到窗口 自定义添加消息(异常啥的)function addFailMessage(message) {\)(.answer .tips).css({ display: none });chatInput.val();var messageElement \((div classrow message-bubbleimg classchat-icon src./static/images/chatgpt.pngp classmessage-text message /p/div);chatWindow.append(messageElement);}// 处理用户输入chatBtn.click(function () {// 解绑键盘事件 回车之后解绑防止未获得结果时 又发一个请求chatInput.off(keydown, handleEnter);// 保存api key与对话数据var data {apiKey: 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, // 这里填写固定 apiKey}// 判断是否使用自己的api keyif (\)(.key .ipt-1).prop(checked)) {var apiKey \((.key .ipt-2).val();if (apiKey.length 20) {common_ops.alert(请输入正确的 api key , function () {chatInput.val();// 重新绑定键盘事件chatInput.on(keydown, handleEnter);})return} else {data.apiKey apiKey}}var message chatInput.val();if (message.length 0) {common_ops.alert(请输入内容, function () {chatInput.val();// 重新绑定键盘事件chatInput.on(keydown, handleEnter);})return}// 创建用户对话行addMessage(message, avatar.png);// 将用户消息保存到数组messages.push({ role: user, content: message })// 收到回复前让按钮不可点击chatBtn.attr(disabled, true)data.prompt messages// 出现loading动画addLoading();// 发送信息到后台\).ajax({url: https://open.aiproxy.xyz/v1/chat/completions,method: POST,headers: {Content-Type: application/json,Authorization: Bearer data.apiKey},data: JSON.stringify({messages: data.prompt,model: gpt-3.5-turbo,max_tokens: 2048,temperature: 0.5,top_p: 1,n: 1}),success: function (res) {const resp res[choices][0][message];// 创建回复对话行addMessage(resp.content, chatgpt.png);// 收到回复让按钮可点击chatBtn.attr(disabled, false)// 重新绑定键盘事件chatInput.on(keydown, handleEnter);// 去除loading动画deleteLoading()// 将回复添加到数组messages.push(resp)},error: function (jqXHR, textStatus, errorThrown) {// 去除loading动画deleteLoading()addFailMessage(span stylecolor:red; 出错啦请稍后再试! /span);chatBtn.attr(disabled, false)chatInput.on(keydown, handleEnter);messages.pop() // 失败就让用户输入信息从数组删除}});});// Enter键盘事件function handleEnter(e) {if (e.keyCode 13) {chatBtn.click();}}// 绑定Enter键盘事件chatInput.on(keydown, handleEnter);// 禁用右键菜单document.addEventListener(contextmenu,function(e){e.preventDefault(); // 阻止默认事件});// 禁止键盘F12键document.addEventListener(keydown,function(e){if(e.key F12){e.preventDefault(); // 如果按下键F12,阻止事件}}); });现在请求到数据之后是一下子全部显示纯前端如何实现一字一字输出的打字效果呢 !DOCTYPE html html langenheadmeta charsetUTF-8meta namereferrer contentno-referrer /meta nameviewport contentwidthdevice-width, initial-scale1.0title打字效果/titlestyle#output {display: inline;}.cursor {display: inline-block;width: 10px;height: 20px;background-color: black;vertical-align: text-bottom;animation: blink 1s infinite;}keyframes blink {50% {opacity: 0;}}/style /headbodyh1ChatGPT Typing Effect/h1div idoutput/divspan classcursor idcursor/spandiv idgivenText styledisplay: none;strong加粗文本/strongbrem斜体文本/embru下划线文本/ubrspan stylecolor: red;红色文本/spanbrspan stylefont-size: 24px;大字体文本/spanbra hrefhttps://github.com/azhu021/链接示例/a/divscriptconst outputElement document.getElementById(output);const cursorElement document.getElementById(cursor);const givenTextElement document.getElementById(givenText);const givenText givenTextElement.innerHTML;let currentIndex 0;let currentHTML ;function typeText() {if (currentIndex givenText.length) {const currentChar givenText.charAt(currentIndex);if (currentChar ) {const closingTagIndex givenText.indexOf(, currentIndex);currentHTML givenText.slice(currentIndex, closingTagIndex 1);currentIndex closingTagIndex 1;} else {currentHTML currentChar;currentIndex;}outputElement.innerHTML currentHTML;setTimeout(typeText, 100); // 设置打字速度单位为毫秒} else {// 当打印完成时移除光标的闪烁效果cursorElement.classList.remove(cursor);}}typeText();/script /body/html 将其效果移植到custom.js中 //XXXXXXXXXXXXXXXXXXXXXXXXlet currentIndex 0;let currentHTML ;function addMessageTwo(id, message) {if (currentIndex message.length) {currentHTML currentHTML message.slice(0, currentIndex 1);\((#\){id}).text(currentHTML)currentIndexsetTimeout(() addMessageTwo(id, message), 100);} else {currentIndex 0}}// 处理用户输入chatBtn.click(function () {//XXXXXXXXXXXXXXXXXXXXXXXX// 发送信息到后台\(.ajax({url: https://open.aiproxy.xyz/v1/chat/completions,method: POST,headers: {Content-Type: application/json,Authorization: Bearer data.apiKey},data: JSON.stringify({//XXXXXXXXXXXXXXXXXXXXXXXX}),success: function (res) {const resp res[choices][0][message];// 创建回复对话行// addMessage(resp.content, chatgpt.png);\)(.answer .tips).css({ display: none });chatInput.val();var escapedMessage escapeHtml(resp.content);var messageElement $(div classrow message-bubbleimg classchat-icon src./static/images/chatgpt.pngp id res[id] classmessage-text/p/div);chatWindow.append(messageElement);addMessageTwo(res[id], escapedMessage)//XXXXXXXXXXXXXXXXXXXXXXXX},});});//XXXXXXXXXXXXXXXXXXXXXXXX 上述通过前端的js实现一字一字打字输出效果但还有问题请求完获取数据之后才开始一字一字输出如何返回的文本过长 需要等待很久显然这种方式不行那有没有那种实时的逐字输出呢 SSE SSESever-sent Events)  服务器发送事件Server-sent Events简称 SSE是一种在客户端浏览器和服务器之间进行单向通信的 Web 技术。它允许服务器向客户端推送数据而不需要客户端主动请求。 SSEServer-sent Events和 WebSocket 的区别 单向 vs 双向通信 SSE 是一种单向通信机制只能服务器向客户端发送数据。客户端无法主动向服务器发送消息。WebSocket 是一种双向通信机制允许客户端和服务器之间进行双向实时通信。客户端和服务器都可以主动发送和接收消息。 连接建立 SSE 基于传统的 HTTP 协议连接通过 HTTP 请求建立并保持长时间打开。因此SSE 连接始终由客户端发起。WebSocket 是一种独立的协议它在创建连接时需要使用特殊的 WebSocket 握手协议。WebSocket 连接可以由客户端或服务器发起。 数据格式 SSE 使用简单的文本格式或者 JSON 格式来传输数据。服务器以文本块的形式将数据发送给客户端。WebSocket 可以传输任意格式的数据例如文本、二进制数据等。 app.js const express require(express); const app express() const router express.Router();app.use((req, res, next) {res.setHeader(Access-Control-Allow-Origin, *);res.setHeader(Access-Control-Allow-Headers, Origin, X-Requested-With, Content-Type, Accept);next(); });router.get(/sse, (req, res) {res.setHeader(Content-Type, text/event-stream);res.setHeader(Cache-Control, no-cache);res.setHeader(Connection, keep-alive);const answer 众所周知ChatGPT API 是一个OpenAI 的聊天机器人接口它可以根据用户的输入生成智能的回复为了提高聊天的流畅性和响应速度采用流失输出的响应方式类似打字机的呈现效果;let i 0;const intervalId setInterval(() {res.write(data: answer[i] \n\n);i;if (i answer.length) {clearInterval(intervalId);res.write(event:end\ndata: \n\n); }}, 100); }); app.use(/, router) app.listen(3333, function () {console.log(api server running at http://127.0.0.1:3333) })
index.html !DOCTYPE html html meta charsetUTF-8 meta namereferrer contentno-referrer /headtitleSSE Example/title /headbodyh1SSE Example/h1button idstartButton开始/buttondiv idoutput回答/divscriptconst startButton document.getElementById(startButton);const outputElement document.getElementById(output);startButton.addEventListener(click, function () {let eventSource new EventSource(http://172.21.2.52:3333/sse);eventSource.onopen function (event) {console.log(成功)};eventSource.onmessage function (event) {const message event.data;outputElement.innerHTML message;};});/script /body/html 效果图