ChatGPT<\/title><\/p>\n<style>\n * {\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\" !important;\n }<\/p>\n<p> body {\n background-color: #edeff2;\n }<\/p>\n<p> .chat_window {\n position: absolute;\n width: calc(100% - 10px);\n max-width: 1000px;\n height: calc(100% - 10px);\n max-height: 888px;\n border-radius: 10px;\n background-color: #fff;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n }<\/p>\n<p> .top_menu {\n background-color: #fff;\n width: 100%;\n padding: 20px 0 15px;\n box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .top_menu .buttons {\n margin: 3px 0 0 20px;\n position: absolute;\n }<\/p>\n<p> .top_menu .buttons .button {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n display: inline-block;\n margin-right: 10px;\n position: relative;\n }<\/p>\n<p> .top_menu .buttons .button.close {\n background-color: #e15b64;\n }<\/p>\n<p> .top_menu .buttons .button.minimize {\n background-color: #f8b26a;\n }<\/p>\n<p> .top_menu .buttons .button.maximize {\n background-color: #99c959;\n }<\/p>\n<p> .top_menu .title {\n text-align: center;\n color: #909090;\n font-size: 20px;\n }<\/p>\n<p> .messages {\n position: relative;\n height: calc(100% - 136px);\n overflow-x: hidden;\n overflow-y: auto;\n }<\/p>\n<p> .messages::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> .messages::-webkit-scrollbar-track {\n background-clip: padding-box;\n background: transparent;\n border: solid transparent;\n border-width: 1px;\n }<\/p>\n<p> .messages::-webkit-scrollbar-corner {\n background-color: transparent;\n }<\/p>\n<p> .messages::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.1);\n background-clip: padding-box;\n border: solid transparent;\n border-radius: 10px;\n }<\/p>\n<p> .messages::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }<\/p>\n<p> .messages .message {\n clear: both;\n overflow: hidden;\n margin-bottom: 20px;\n transition: all 0.5s linear;\n opacity: 0;\n }<\/p>\n<p> .messages .message.left .avatar {\n background-color: #f5886e;\n float: left;\n }<\/p>\n<p> .messages .message.left .text {\n color: #c48843;\n }<\/p>\n<p> .messages .message.right .avatar {\n background-color: #fdbf68;\n float: right;\n }<\/p>\n<p> .messages .message.right .text {\n color: #45829b;\n }<\/p>\n<p> .messages .message.appeared {\n opacity: 1;\n }<\/p>\n<p> .messages .message .avatar {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: inline-block;\n }<\/p>\n<p> .messages {\n font-size: 16px;\n color: #343541;\n }<\/p>\n<p> #chatlog {\n word-wrap: break-word;\n margin-top: 16px;\n }<\/p>\n<p> #chatlog>div {\n padding: 22px 25px;\n }<\/p>\n<p> #chatlog .response {\n background: #f7f7f8;\n }<\/p>\n<p> #chatlog .response>pre {\n overflow-x: auto;\n padding: 10px;\n position: relative;\n background: rgba(180, 180, 180, 0.1);\n }<\/p>\n<p> .m-mdic-copy-wrapper {\n position: absolute;\n top: 5px;\n right: 16px;\n }<\/p>\n<p> .m-mdic-copy-wrapper span.u-mdic-copy-code_lang {\n position: absolute;\n top: 3px;\n right: calc(100% + 4px);\n font-family: system-ui;\n font-size: 12px;\n line-height: 18px;\n color: #555;\n opacity: 0.3;\n }<\/p>\n<p> .m-mdic-copy-wrapper div.u-mdic-copy-notify {\n position: absolute;\n top: 0;\n right: 0;\n padding: 3px 6px;\n border: 0;\n border-radius: 3px;\n background: none;\n font-family: system-ui;\n font-size: 12px;\n line-height: 18px;\n color: #555;\n opacity: 0.3;\n outline: none;\n opacity: 1;\n right: 100%;\n padding-right: 4px;\n }<\/p>\n<p> .m-mdic-copy-wrapper button.u-mdic-copy-btn {\n position: relative;\n top: 0;\n right: 0;\n padding: 3px 6px;\n border: 0;\n border-radius: 3px;\n background: none;\n font-family: system-ui;\n font-size: 12px;\n line-height: 18px;\n color: #555;\n opacity: 0.3;\n outline: none;\n cursor: pointer;\n transition: opacity 0.2s;\n }<\/p>\n<p> .m-mdic-copy-wrapper button.u-mdic-copy-btn:hover {\n opacity: 1;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-track {\n background-clip: padding-box;\n background: transparent;\n border: solid transparent;\n border-width: 1px;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-corner {\n background-color: transparent;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.1);\n background-clip: padding-box;\n border: solid transparent;\n border-radius: 10px;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }<\/p>\n<p> .bottom_wrapper {\n position: relative;\n width: 100%;\n background-color: #fff;\n padding: 12px 12px;\n position: absolute;\n bottom: 0;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper {\n border: none;\n width: calc(100% - 148px);\n position: relative;\n text-align: left;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper .message_input_text {\n border-radius: 6px;\n border: 1px solid rgba(0, 0, 0, .1);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;\n outline: none;\n resize: none;\n height: 50px;\n font-size: 16px;\n max-height: 200px;\n padding: 13px 0 14px 16px;\n width: 100%;\n display: block;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper .message_input_text::placeholder {\n color: gray;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper .message_input_text::-webkit-scrollbar {\n display: none;\n width: 0;\n height: 0;\n }<\/p>\n<p> .bottom_wrapper .send_message {\n width: 80px;\n height: 50px;\n font-size: 18px;\n font-weight: bold;\n border-radius: 5px;\n background-color: #99c959;\n border: none;\n padding: 0;\n color: #fff;\n cursor: pointer;\n transition: all 0.2s linear;\n text-align: center;\n float: right;\n position: absolute;\n right: 70px;\n bottom: 12px;\n }<\/p>\n<p> .bottom_wrapper .send_message:hover {\n background-color: #90c050;\n }<\/p>\n<p> .bottom_wrapper .send_message .text {\n font-size: 18px;\n font-weight: 300;\n display: inline-block;\n line-height: 48px;\n }<\/p>\n<p> #clearConv {\n position: absolute;\n right: 10px;\n bottom: 12px;\n width: 50px;\n height: 50px;\n font-size: 16px;\n display: inline-block;\n border-radius: 5px;\n background-color: #909090;\n border: 2px solid #909090;\n color: #fff;\n cursor: pointer;\n transition: all 0.2s linear;\n text-align: center;\n }<\/p>\n<p> #clearConv:hover {\n background-color: gray;\n border: 2px solid gray;\n }<\/p>\n<p> .loaded>span {\n display: inline-block;\n }<\/p>\n<p> .loaded>svg {\n display: none;\n }<\/p>\n<p> .loading {\n background: #e7e7e8 !important;\n }<\/p>\n<p> .loading>span {\n display: none;\n }<\/p>\n<p> .loading>svg {\n display: block;\n }<\/p>\n<p> .switch-slide {\n display: inline-block;\n vertical-align: middle;\n }<\/p>\n<p> .switch-slide-label {\n display: block;\n width: 38px;\n height: 18px;\n background: #909090;\n border-radius: 30px;\n cursor: pointer;\n position: relative;\n -webkit-transition: 0.3s ease;\n transition: 0.3s ease;\n }<\/p>\n<p> .switch-slide-label:after {\n content: '';\n display: block;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n background: #fff;\n box-shadow: 0 1px 1px rgba(0, 0, 0, .1);\n position: absolute;\n left: 1px;\n top: 1px;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-transition: 0.3s ease;\n transition: 0.3s ease;\n }<\/p>\n<p> .switch-slide input:checked+label {\n background: #99c959;\n transition: 0.3s ease;\n }<\/p>\n<p> .switch-slide input:checked+label:after {\n left: 21px;\n }<\/p>\n<p> #setting {\n position: absolute;\n right: 15px;\n top: 13px;\n cursor: pointer;\n padding: 5px;\n border: none;\n background-color: transparent;\n border-radius: 4px;\n }<\/p>\n<p> #setting:hover {\n background: #e7e7e8;\n }<\/p>\n<p> .showSetting {\n background: #b0b0b0 !important;\n }<\/p>\n<p> #setDialog {\n color: #303030;\n position: absolute;\n z-index: 2;\n background: white;\n width: 320px;\n right: 10px;\n top: 55px;\n -webkit-user-select: none;\n user-select: none;\n border-radius: 5px;\n padding: 8px 12px 8px 12px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);\n }<\/p>\n<p> #setDialog>div {\n margin-bottom: 7px;\n }<\/p>\n<p> #setDialog input {\n width: 100%;\n }<\/p>\n<p> #setDialog .inlineTitle {\n display: inline-block;\n width: 80px;\n line-height: 16px;\n vertical-align: middle;\n }<\/p>\n<p> .inputTextClass {\n outline: none;\n border-radius: 4px;\n margin-top: 2px;\n height: 32px;\n font-size: 15px;\n padding-left: 6px;\n border: 1px solid #d9d9e3;\n border-color: rgba(0, 0, 0, .1);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;\n }<\/p>\n<p> .areaTextClass {\n width: 100%;\n height: 80px;\n display: block;\n resize: none;\n padding: 6px;\n }<\/p>\n<p> input[type=\"range\"] {\n -webkit-appearance: none;\n height: 8px;\n background: #909090;\n border-radius: 5px;\n background-image: linear-gradient(#99c959, #99c959);\n background-size: 100% 100%;\n background-repeat: no-repeat;\n }<\/p>\n<p> input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: #99c959;\n cursor: ew-resize;\n box-shadow: 0 0 2px 0 #555;\n }<\/p>\n<p> input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n box-shadow: none;\n border: none;\n background: transparent;\n }<\/p>\n<p> .presetSelect {\n text-align: justify;\n text-align-last: justify;\n }<\/p>\n<p> .presetSelect>div {\n display: inline-block;\n }<\/p>\n<p> .presetSelect select {\n text-align-last: left;\n outline: none;\n border-radius: 3px;\n width: 100px;\n border-color: rgba(0, 0, 0, .3);\n }<\/p>\n<p> .selectDef {\n display: flex;\n justify-content: space-between;\n font-size: 14px;\n color: #707070;\n }\n <\/style>\n<p><\/head><\/p>\n<p><body><\/p>\n<div>\n<div class=\"chat_window\">\n<div class=\"top_menu\">\n<div class=\"buttons\">\n<div class=\"button close\"><\/div>\n<div class=\"button minimize\"><\/div>\n<div class=\"button maximize\"><\/div>\n<\/p><\/div>\n<div class=\"title\">ChatGPT<\/div>\n<p> <button id=\"setting\"><br \/>\n <svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:block;\" width=\"30\"\n height=\"30\">\n <circle cx=\"50\" cy=\"20\" r=\"10\" fill=\"#e15b64\" \/>\n <circle cx=\"50\" cy=\"50\" r=\"10\" fill=\"#f8b26a\" \/>\n <circle cx=\"50\" cy=\"80\" r=\"10\" fill=\"#99c959\" \/>\n <\/svg><br \/>\n <\/button><\/p>\n<div id=\"setDialog\" style=\"display:none;\">\n<div>\n<div>\u81ea\u5b9a\u4e49API key<\/div>\n<p> <input class=\"inputTextClass\" type=\"password\" placeholder=\"sk-xxxxxx\" id=\"keyInput\" \/>\n <\/div>\n<div>\n<div class=\"presetSelect\">\n<div>\u7cfb\u7edf\u89d2\u8272<\/div>\n<div>\n <label for=\"preSetSystem\">\u9884\u8bbe\u89d2\u8272<\/label><br \/>\n <select id=\"preSetSystem\"><option value=\"\">\u9ed8\u8ba4<\/option><option value=\"normal\">\u52a9\u624b<\/option><option value=\"cat\">\u732b\u5a18<\/option><option value=\"image\">\u6709\u56fe<\/option><\/select>\n <\/div>\n<\/p><\/div>\n<p> <textarea class=\"inputTextClass areaTextClass\" placeholder=\"\u4f60\u662f\u4e00\u4e2a\u4e50\u4e8e\u52a9\u4eba\u7684\u52a9\u624b\uff0c\u5c3d\u91cf\u7b80\u660e\u627c\u8981\u5730\u56de\u7b54\"\n id=\"systemInput\"><\/textarea>\n <\/div>\n<div>\n <span>\u89d2\u8272\u6027\u683c<\/span><br \/>\n <input type=\"range\" id=\"top_p\" min=\"0\" max=\"1\" value=\"1\" step=\"0.05\" \/><\/p>\n<div class=\"selectDef\">\n <span>\u51c6\u786e\u4e25\u8c28<\/span><br \/>\n <span>\u7075\u6d3b\u521b\u65b0<\/span>\n <\/div>\n<\/p><\/div>\n<div>\n <span>\u56de\u7b54\u8d28\u91cf<\/span><br \/>\n <input type=\"range\" id=\"temp\" min=\"0\" max=\"2\" value=\"1\" step=\"0.05\" \/><\/p>\n<div class=\"selectDef\">\n <span>\u91cd\u590d\u523b\u677f<\/span><br \/>\n <span>\u80e1\u8a00\u4e71\u8bed<\/span>\n <\/div>\n<\/p><\/div>\n<div>\n <span>\u6253\u5b57\u673a\u901f\u5ea6<\/span><br \/>\n <input type=\"range\" id=\"textSpeed\" min=\"10\" max=\"100\" value=\"88\" step=\"1\" \/><\/p>\n<div class=\"selectDef\">\n <span>\u6162<\/span><br \/>\n <span>\u5feb<\/span>\n <\/div>\n<\/p><\/div>\n<div>\n <span class=\"inlineTitle\">\u8fde\u7eed\u5bf9\u8bdd<\/span><br \/>\n <label class=\"switch-slide\"><br \/>\n <input type=\"checkbox\" id=\"enableCont\" checked hidden \/><br \/>\n <label for=\"enableCont\" class=\"switch-slide-label\"><\/label><br \/>\n <\/label>\n <\/div>\n<div>\n <span class=\"inlineTitle\">\u957f\u56de\u590d<\/span><br \/>\n <label class=\"switch-slide\"><br \/>\n <input type=\"checkbox\" id=\"enableLongReply\" hidden \/><br \/>\n <label for=\"enableLongReply\" class=\"switch-slide-label\"><\/label><br \/>\n <\/label>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"messages\">\n<div id=\"chatlog\"><\/div>\n<\/p><\/div>\n<div class=\"bottom_wrapper clearfix\">\n<div class=\"message_input_wrapper\">\n <textarea class=\"message_input_text\" spellcheck=\"false\" placeholder=\"\u6765\u95ee\u70b9\u4ec0\u4e48\u5427\"\n id=\"chatinput\"><\/textarea>\n <\/div>\n<p> <button class=\"send_message loaded\" id=\"sendbutton\"><br \/>\n <span>\u53d1\u9001<\/span><br \/>\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"margin:0 auto;height:40px;\" viewBox=\"0 0 200 100\"\n preserveAspectRatio=\"xMidYMid\">\n <g transform=\"translate(50 50)\">\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#e15b64\">\n <animateTransform attributeName=\"transform\" type=\"scale\" begin=\"-0.3333333333333333s\"\n calcMode=\"spline\" keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\" values=\"0;1;0\"\n keyTimes=\"0;0.5;1\" dur=\"1s\" repeatCount=\"indefinite\"><\/animateTransform>\n <\/circle>\n <\/g>\n <g transform=\"translate(100 50)\">\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#f8b26a\">\n <animateTransform attributeName=\"transform\" type=\"scale\" begin=\"-0.16666666666666666s\"\n calcMode=\"spline\" keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\" values=\"0;1;0\"\n keyTimes=\"0;0.5;1\" dur=\"1s\" repeatCount=\"indefinite\"><\/animateTransform>\n <\/circle>\n <\/g>\n <g transform=\"translate(150 50)\">\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#99c959\">\n <animateTransform attributeName=\"transform\" type=\"scale\" begin=\"0s\" calcMode=\"spline\"\n keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\" values=\"0;1;0\" keyTimes=\"0;0.5;1\" dur=\"1s\"\n repeatCount=\"indefinite\"><\/animateTransform>\n <\/circle>\n <\/g>\n <\/svg><br \/>\n <\/button><br \/>\n <button id=\"clearConv\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"margin:0 auto;display:block\"\n width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\"\n d=\"M8 20v-5h2v5h9v-7H5v7h3zm-4-9h16V8h-6V4h-4v4H4v3zM3 21v-8H2V7a1 1 0 0 1 1-1h5V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3h5a1 1 0 0 1 1 1v6h-1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\">\n <\/path>\n <\/svg><\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script src=\"\/\/cdn.staticfile.org\/markdown-it\/13.0.1\/markdown-it.min.js\"><\/script><br \/>\n <script src=\"\/\/cdn.staticfile.org\/highlight.js\/11.7.0\/highlight.min.js\"><\/script><br \/>\n <script src=\"\/\/cdn.staticfile.org\/KaTeX\/0.16.4\/katex.min.js\"><\/script><br \/>\n <script src=\"\/\/npm.elemecdn.com\/markdown-it-texmath@1.0.0\/texmath.js\"><\/script><br \/>\n <script>\n const API_URL = \"\/v1\/chat\/completions\";\n const messagsEle = document.getElementsByClassName(\"messages\")[0];\n const chatlog = document.getElementById(\"chatlog\");\n const sendBtnEle = document.getElementById(\"sendbutton\");\n const textarea = document.getElementById(\"chatinput\");\n const settingEle = document.getElementById(\"setting\");\n const dialogEle = document.getElementById(\"setDialog\");\n textarea.focus();\n let data = [];\n let loading = false;\n let presetRoleData = {\n \"normal\": \"\u4f60\u662f\u4e00\u4e2a\u4e50\u4e8e\u52a9\u4eba\u7684\u52a9\u624b\uff0c\u5c3d\u91cf\u7b80\u660e\u627c\u8981\u5730\u56de\u7b54\",\n \"cat\": \"\u4f60\u662f\u4e00\u4e2a\u53ef\u7231\u7684\u732b\u5a18\uff0c\u6bcf\u53e5\u8bdd\u7ed3\u5c3e\u90fd\u8981\u5e26\u4e2a'\u55b5'\",\n \"image\": \"\u6211\u7ed9\u4f60\u4e2a\u6307\u4ee4\uff0c\u751f\u6210\u76f8\u5e94\u7684\u56fe\u7247\uff0c\u53d1\u9001\u56fe\u7247\u65f6\u5019\u8bf7\u7528 markdown \u8bed\u8a00\u751f\u6210\uff0c\u4e0d\u8981\u53cd\u659c\u7ebf\uff0c\u4e0d\u8981\u4ee3\u7801\u6846\uff0c\u8bf7\u9700\u8981\u4f7f\u7528 unsplash API \uff0c\u9075\u5faa\u4e00\u4e0b\u683c\u5f0f\uff0c https:\/\/source.unsplash.com\/960x640\/? \uff1c\u82f1\u6587\u5173\u952e\u8bcd\uff1e\"\n }\n let systemRole; \/\/ \u81ea\u5b9a\u4e49\u7cfb\u7edf\u89d2\u8272\n let roleNature; \/\/ \u89d2\u8272\u6027\u683c\n let roleTemp; \/\/ \u56de\u7b54\u8d28\u91cf\n let customAPIKey; \/\/ \u81ea\u5b9a\u4e49apiKey\n let enableCont; \/\/ \u662f\u5426\u5f00\u542f\u8fde\u7eed\u5bf9\u8bdd\uff0c\u9ed8\u8ba4\u5f00\u542f\uff0c\u5bf9\u8bdd\u5305\u542b\u4e0a\u4e0b\u6587\u4fe1\u606f\u3002\n let enableLongReply; \/\/ \u662f\u5426\u5f00\u542f\u957f\u56de\u590d\uff0c\u9ed8\u8ba4\u5173\u95ed\uff0c\u5f00\u542f\u53ef\u80fd\u5bfc\u81f4api\u8d39\u7528\u589e\u52a0\u3002\n let longReplyFlag;\n let textSpeed; \/\/ \u6253\u5b57\u673a\u901f\u5ea6\uff0c\u8d8a\u5c0f\u8d8a\u5feb\n const clearData = () => {\n if (systemRole) {\n data.length = 1;\n } else {\n data = [];\n }\n }\n const scrollToBottom = () => {\n if (messagsEle.scrollHeight - messagsEle.scrollTop - messagsEle.clientHeight < 88) {\n messagsEle.scrollTo(0, messagsEle.scrollHeight)\n }\n }\n const scrollToBottomLoad = (ele) => {\n if (messagsEle.scrollHeight - messagsEle.scrollTop - messagsEle.clientHeight < ele.clientHeight + 88) {\n messagsEle.scrollTo(0, messagsEle.scrollHeight)\n }\n }\n const initSetting = () => {\n const systemEle = document.getElementById(\"systemInput\");\n let localSystem = localStorage.getItem(\"system\");\n if (localSystem) {\n systemRole = localSystem;\n systemEle.value = localSystem;\n data.unshift({role: \"system\", content: systemRole});\n } else {\n systemRole = systemEle.value;\n }\n systemEle.onchange = () => {\n systemRole = systemEle.value;\n localStorage.setItem(\"system\", systemRole);\n if (systemRole) {\n if (data[0] && data[0].role === \"system\") {\n data[0].content = systemRole;\n } else {\n data.unshift({role: \"system\", content: systemRole});\n }\n } else if (data[0] && data[0].role === \"system\") {\n data.shift();\n }\n }\n const preEle = document.getElementById(\"preSetSystem\");\n preEle.onchange = () => {\n let val = preEle.value;\n if (val && presetRoleData[val]) {\n systemEle.value = presetRoleData[val];\n } else {\n systemEle.value = \"\";\n }\n systemEle.dispatchEvent(new Event(\"change\"));\n systemEle.focus();\n }\n const topEle = document.getElementById(\"top_p\");\n let localTop = localStorage.getItem(\"top_p\");\n if (localTop) {\n roleNature = +localTop;\n topEle.value = localTop;\n }\n topEle.oninput = () => {\n topEle.style.backgroundSize = (topEle.value - topEle.min) * 100 \/ (topEle.max - topEle.min) + \"% 100%\";\n roleNature = +topEle.value;\n localStorage.setItem(\"top_p\", topEle.value);\n }\n topEle.dispatchEvent(new Event(\"input\"));\n const tempEle = document.getElementById(\"temp\");\n let localTemp = localStorage.getItem(\"temp\");\n if (localTemp) {\n roleTemp = +localTemp;\n tempEle.value = localTemp;\n }\n tempEle.oninput = () => {\n tempEle.style.backgroundSize = (tempEle.value - tempEle.min) * 100 \/ (tempEle.max - tempEle.min) + \"% 100%\";\n roleTemp = +tempEle.value;\n localStorage.setItem(\"temp\", tempEle.value);\n }\n tempEle.dispatchEvent(new Event(\"input\"));\n const keyEle = document.getElementById(\"keyInput\");\n let localKey = localStorage.getItem(\"APIKey\");\n if (localKey) {\n customAPIKey = localKey;\n keyEle.value = localKey;\n }\n keyEle.onchange = () => {\n customAPIKey = keyEle.value;\n localStorage.setItem(\"APIKey\", customAPIKey);\n }\n keyEle.dispatchEvent(new Event(\"change\"));\n const contEle = document.getElementById(\"enableCont\");\n let localCont = localStorage.getItem(\"enableCont\");\n if (localCont) {\n enableCont = localCont === \"true\";\n contEle.checked = enableCont;\n }\n contEle.onchange = () => {\n enableCont = contEle.checked;\n localStorage.setItem(\"enableCont\", enableCont);\n if (!enableCont) {\n clearData();\n }\n }\n contEle.dispatchEvent(new Event(\"change\"));\n const longEle = document.getElementById(\"enableLongReply\");\n let localLong = localStorage.getItem(\"enableLongReply\");\n if (localLong) {\n enableLongReply = localLong === \"true\";\n longEle.checked = enableLongReply;\n }\n longEle.onchange = () => {\n enableLongReply = longEle.checked;\n localStorage.setItem(\"enableLongReply\", enableLongReply);\n }\n longEle.dispatchEvent(new Event(\"change\"));\n const speedEle = document.getElementById(\"textSpeed\");\n let localSpeed = localStorage.getItem(\"textSpeed\");\n if (localSpeed) {\n textSpeed = +speedEle.min + (speedEle.max - localSpeed);\n speedEle.value = localSpeed;\n }\n speedEle.oninput = () => {\n speedEle.style.backgroundSize = (speedEle.value - speedEle.min) * 100 \/ (speedEle.max - speedEle.min) + \"% 100%\";\n textSpeed = +speedEle.min + (speedEle.max - speedEle.value);\n localStorage.setItem(\"textSpeed\", speedEle.value);\n }\n speedEle.dispatchEvent(new Event(\"input\"));\n }\n initSetting();\n const closeEvent = (ev) => {\n if (settingEle.contains(ev.target)) {\n return;\n }\n if (!dialogEle.contains(ev.target)) {\n dialogEle.style.display = \"none\";\n document.removeEventListener(\"mousedown\", closeEvent, true);\n settingEle.classList.remove(\"showSetting\");\n }\n }\n settingEle.onmousedown = () => {\n let stat = dialogEle.style.display;\n dialogEle.style.display = stat === \"block\" ? \"none\" : \"block\";\n if (dialogEle.style.display === \"block\") {\n document.addEventListener(\"mousedown\", closeEvent, true);\n settingEle.classList.add(\"showSetting\");\n } else {\n document.removeEventListener(\"mousedown\", closeEvent, true);\n settingEle.classList.remove(\"showSetting\");\n }\n }\n const md = markdownit({\n linkify: true, \/\/ \u8bc6\u522b\u94fe\u63a5\n highlight: function (str, lang) { \/\/ markdown\u9ad8\u4eae\n try {\n return hljs.highlightAuto(str).value;\n } catch (e) { }<\/p>\n<p> return \"\"; \/\/ use external default escaping\n }\n });\n md.use(texmath, { \/\/ markdown katex\u516c\u5f0f\n engine: katex,\n delimiters: 'dollars',\n katexOptions: {macros: {\"\\\\RR\": \"\\\\mathbb{R}\"}}\n });\n const x = {\n getCodeLang(str = '') {\n const res = str.match(\/ class=\"language-(.*?)\"\/);\n return (res && res[1]) || '';\n },\n getFragment(str = '') {\n return str ? `<span class=\"u-mdic-copy-code_lang\">${str}<\/span>` : '';\n },\n };\n const strEncode = (str = '') => {\n if (!str || str.length === 0) {\n return '';\n }\n return str\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/'\/g, '\\'')\n .replace(\/\"\/g, '"');\n };\n const getCodeLangFragment = (oriStr = '') => {\n return x.getFragment(x.getCodeLang(oriStr));\n };\n const copyClickCode = (ele) => {\n const input = document.createElement('textarea');\n input.value = ele.dataset.mdicContent;\n const nDom = ele.previousElementSibling;\n const nDelay = ele.dataset.mdicNotifyDelay;\n const cDom = nDom.previousElementSibling;\n document.body.appendChild(input);\n input.select();\n input.setSelectionRange(0, 9999);\n document.execCommand('copy');\n document.body.removeChild(input);\n if (nDom.style.display === 'none') {\n nDom.style.display = 'block';\n cDom && (cDom.style.display = 'none');\n setTimeout(() => {\n nDom.style.display = 'none';\n cDom && (cDom.style.display = 'block');\n }, nDelay);\n }\n };\n const enhanceCode = (render, options = {}) => (...args) => {\n \/* args = [tokens, idx, options, env, slf] *\/\n const {\n btnText = '\u590d\u5236\u4ee3\u7801', \/\/ button text\n successText = '\u590d\u5236\u6210\u529f', \/\/ copy-success text\n successTextDelay = 2000, \/\/ successText show time [ms]\n showCodeLanguage = true, \/\/ false | show code language\n } = options;\n const [tokens = {}, idx = 0] = args;\n const cont = strEncode(tokens[idx].content || '');\n const originResult = render.apply(this, args);\n const langFrag = showCodeLanguage ? getCodeLangFragment(originResult) : '';\n const tpls = [\n '<\/p>\n<div class=\"m-mdic-copy-wrapper\">',\n `${langFrag}`,\n `<\/p>\n<div class=\"u-mdic-copy-notify\" style=\"display:none;\">${successText}<\/div>\n<p>`,\n '<button ',\n 'class=\"u-mdic-copy-btn j-mdic-copy-btn\" ',\n `data-mdic-content=\"${cont}\" `,\n `data-mdic-notify-delay=\"${successTextDelay}\" `,\n `onclick=\"copyClickCode(this)\">${btnText}<\/button>`,\n '<\/div>\n<p>',\n ];\n const LAST_TAG = '<\/pre>\n<p>';\n const newResult = originResult.replace(LAST_TAG, `${tpls.join('')}${LAST_TAG}`);\n return newResult;\n };\n const codeBlockRender = md.renderer.rules.code_block;\n const fenceRender = md.renderer.rules.fence;\n md.renderer.rules.code_block = enhanceCode(codeBlockRender);\n md.renderer.rules.fence = enhanceCode(fenceRender);\n md.renderer.rules.image = function (tokens, idx, options, env, slf) {\n var token = tokens[idx];\n token.attrs[token.attrIndex(\"alt\")][1] = slf.renderInlineAsText(token.children, options, env);\n token.attrSet(\"onload\", \"scrollToBottomLoad(this);this.removeAttribute('onload')\");\n return slf.renderToken(tokens, idx, options)\n }\n document.getElementById(\"clearConv\").onclick = () => {\n if (!loading) {\n clearData();\n chatlog.innerHTML = \"\";\n }\n }\n const delay = () => {\n return new Promise((resolve) => setTimeout(resolve, textSpeed)); \/\/\u6253\u5b57\u673a\u65f6\u95f4\u95f4\u9694\n }\n const endAction = () => {\n loading = false;\n sendBtnEle.disabled = false;\n sendBtnEle.classList.remove(\"loading\");\n sendBtnEle.classList.add(\"loaded\");\n }\n let currentResEle;\n let progressData = \"\";\n const streamGen = async () => {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => {\n controller.abort();\n alert(\"\u8bf7\u6c42\u8d85\u65f6\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\uff01\");\n endAction();\n }, 30000);\n let headers = {\n \"Content-Type\": \"application\/json\",\n };\n if (customAPIKey) {\n headers[\"Authorization\"] = \"Bearer \" + customAPIKey;\n }\n const res = await fetch(API_URL, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n messages: data,\n model: \"gpt-3.5-turbo\",\n stream: true,\n temperature: roleTemp,\n top_p: roleNature\n }),\n signal: controller.signal\n })\n clearTimeout(timeoutId);\n if (res.status !== 200) {\n if (res.status === 401) {\n alert(\"API key\u9519\u8bef\u6216\u5df2\u5931\u6548\uff0c\u8bf7\u6253\u5f00\u8bbe\u7f6e\u8f93\u5165\u6b63\u786e\u7684API key\")\n } else {\n alert(\"\u89e6\u53d1API\u8c03\u7528\u9891\u7387\u9650\u5236\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\uff01\");\n }\n endAction();\n return;\n }\n const decoder = new TextDecoderStream();\n const stream = res.body.pipeThrough(decoder);\n const reader = stream.getReader();\n const readChunk = async () => {\n return reader.read().then(async ({value, done}) => {\n if (!done) {\n if (!currentResEle) {\n currentResEle = document.createElement(\"div\");\n currentResEle.className = \"response markdown-body\";\n chatlog.appendChild(currentResEle);\n }\n let chunks = value.split(\/\\n{2}\/g);\n chunks = chunks.filter(item => {\n return item.trim();\n });\n for (let i = 0; i < chunks.length; i++) {\n let chunk = chunks[i];\n if (chunk) {\n let payload;\n try {\n payload = JSON.parse(chunk.slice(6));\n } catch (e) {\n break;\n }\n if (payload.choices[0].finish_reason) {\n if (enableLongReply) {\n if (payload.choices[0].finish_reason === \"length\") {\n longReplyFlag = true;\n } else {\n longReplyFlag = false;\n }\n }\n break;\n } else {\n let content = payload.choices[0].delta.content;\n if (content) {\n if (!progressData && !content.trim()) {\n continue;\n }\n if (progressData) {\n await delay();\n }\n progressData += content;\n currentResEle.innerHTML = md.render(progressData);\n scrollToBottom();\n }\n }\n }\n }\n return readChunk();\n } else {\n if (longReplyFlag) {\n if (data[data.length - 1].role !== \"assistant\") {\n data.splice(systemRole ? 1 : 0, data.length - (systemRole ? 2 : 1));\n data.push({role: \"assistant\", content: progressData});\n } else {\n data[data.length - 1].content = progressData;\n }\n return streamGen();\n }\n if (enableCont) {\n data.push({role: \"assistant\", content: progressData});\n }\n currentResEle = null;\n progressData = \"\";\n endAction();\n }\n });\n };\n await readChunk();\n }\n const generateText = async (message) => {\n loading = true;\n sendBtnEle.disabled = true;\n sendBtnEle.classList.remove(\"loaded\");\n sendBtnEle.classList.add(\"loading\");\n data.push({role: \"user\", content: message.trim()});\n let request = document.createElement(\"div\");\n request.className = \"markdown-body\";\n request.innerHTML = md.render(message);\n chatlog.appendChild(request);\n scrollToBottom();\n await streamGen();\n if (!enableCont) {\n clearData();\n }\n };\n textarea.onkeydown = (e) => {\n if (e.keyCode === 13) {\n if (!e.shiftKey) {\n e.preventDefault();\n genFunc();\n }\n }\n }\n textarea.oninput = (e) => {\n textarea.style.height = \"50px\";\n textarea.style.height = e.target.scrollHeight + 2 + \"px\";\n };\n const genFunc = function () {\n let message = textarea.value;\n if (message.length < 1) {\n return;\n } else {\n if (loading === true) {\n return;\n }\n textarea.value = \"\";\n textarea.style.height = \"50px\";\n generateText(message);\n }\n }\n sendBtnEle.onclick = genFunc;\n <\/script>\n <link href=\"\/\/cdn.staticfile.org\/github-markdown-css\/5.2.0\/github-markdown-light.min.css\" rel=\"stylesheet\">\n <link href=\"\/\/cdn.staticfile.org\/highlight.js\/11.7.0\/styles\/github.min.css\" rel=\"stylesheet\">\n <link href=\"\/\/cdn.staticfile.org\/KaTeX\/0.16.4\/katex.min.css\" rel=\"stylesheet\">\n <link href=\"\/\/npm.elemecdn.com\/markdown-it-texmath@1.0.0\/css\/texmath.css\" rel=\"stylesheet\">\n <script defer>\n const downRoleController = new AbortController();\n setTimeout(() => {\n downRoleController.abort();\n }, 10000);\n const preEle = document.getElementById(\"preSetSystem\");\n fetch(\"https:\/\/cdn.jsdelivr.net\/gh\/PlexPt\/awesome-chatgpt-prompts-zh\/prompts-zh.json\", {\n signal: downRoleController.signal\n }).then(async (response) => {\n let res = await response.json();\n for (let i = 0; i < res.length; i++) {\n let key = \"act\" + i;\n presetRoleData[key] = res[i].prompt.trim();\n let optionEle = document.createElement(\"option\");\n optionEle.text = res[i].act;\n optionEle.value = key;\n preEle.options.add(optionEle);\n }\n }).catch(e => { })\n <\/script><br \/>\n<\/body><\/p>\n<p><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ChatGPT ChatGPT…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1876","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages\/1876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/comments?post=1876"}],"version-history":[{"count":2,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages\/1876\/revisions"}],"predecessor-version":[{"id":1878,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages\/1876\/revisions\/1878"}],"wp:attachment":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/media?parent=1876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":1876,"date":"2023-03-18T15:43:24","date_gmt":"2023-03-18T07:43:24","guid":{"rendered":"https:\/\/pokernews.cc\/?page_id=1876"},"modified":"2023-03-18T15:45:54","modified_gmt":"2023-03-18T07:45:54","slug":"1876-2","status":"publish","type":"page","link":"https:\/\/pokernews.cc\/index.php\/1876-2\/","title":{"rendered":""},"content":{"rendered":"

\n<\/p>\n

\n
\n ChatGPT<\/title><\/p>\n<style>\n * {\n box-sizing: border-box;\n font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", \"Noto Sans\", Helvetica, Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\" !important;\n }<\/p>\n<p> body {\n background-color: #edeff2;\n }<\/p>\n<p> .chat_window {\n position: absolute;\n width: calc(100% - 10px);\n max-width: 1000px;\n height: calc(100% - 10px);\n max-height: 888px;\n border-radius: 10px;\n background-color: #fff;\n left: 50%;\n top: 50%;\n transform: translateX(-50%) translateY(-50%);\n box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);\n overflow: hidden;\n }<\/p>\n<p> .top_menu {\n background-color: #fff;\n width: 100%;\n padding: 20px 0 15px;\n box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);\n }<\/p>\n<p> .top_menu .buttons {\n margin: 3px 0 0 20px;\n position: absolute;\n }<\/p>\n<p> .top_menu .buttons .button {\n width: 16px;\n height: 16px;\n border-radius: 50%;\n display: inline-block;\n margin-right: 10px;\n position: relative;\n }<\/p>\n<p> .top_menu .buttons .button.close {\n background-color: #e15b64;\n }<\/p>\n<p> .top_menu .buttons .button.minimize {\n background-color: #f8b26a;\n }<\/p>\n<p> .top_menu .buttons .button.maximize {\n background-color: #99c959;\n }<\/p>\n<p> .top_menu .title {\n text-align: center;\n color: #909090;\n font-size: 20px;\n }<\/p>\n<p> .messages {\n position: relative;\n height: calc(100% - 136px);\n overflow-x: hidden;\n overflow-y: auto;\n }<\/p>\n<p> .messages::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> .messages::-webkit-scrollbar-track {\n background-clip: padding-box;\n background: transparent;\n border: solid transparent;\n border-width: 1px;\n }<\/p>\n<p> .messages::-webkit-scrollbar-corner {\n background-color: transparent;\n }<\/p>\n<p> .messages::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.1);\n background-clip: padding-box;\n border: solid transparent;\n border-radius: 10px;\n }<\/p>\n<p> .messages::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }<\/p>\n<p> .messages .message {\n clear: both;\n overflow: hidden;\n margin-bottom: 20px;\n transition: all 0.5s linear;\n opacity: 0;\n }<\/p>\n<p> .messages .message.left .avatar {\n background-color: #f5886e;\n float: left;\n }<\/p>\n<p> .messages .message.left .text {\n color: #c48843;\n }<\/p>\n<p> .messages .message.right .avatar {\n background-color: #fdbf68;\n float: right;\n }<\/p>\n<p> .messages .message.right .text {\n color: #45829b;\n }<\/p>\n<p> .messages .message.appeared {\n opacity: 1;\n }<\/p>\n<p> .messages .message .avatar {\n width: 60px;\n height: 60px;\n border-radius: 50%;\n display: inline-block;\n }<\/p>\n<p> .messages {\n font-size: 16px;\n color: #343541;\n }<\/p>\n<p> #chatlog {\n word-wrap: break-word;\n margin-top: 16px;\n }<\/p>\n<p> #chatlog>div {\n padding: 22px 25px;\n }<\/p>\n<p> #chatlog .response {\n background: #f7f7f8;\n }<\/p>\n<p> #chatlog .response>pre {\n overflow-x: auto;\n padding: 10px;\n position: relative;\n background: rgba(180, 180, 180, 0.1);\n }<\/p>\n<p> .m-mdic-copy-wrapper {\n position: absolute;\n top: 5px;\n right: 16px;\n }<\/p>\n<p> .m-mdic-copy-wrapper span.u-mdic-copy-code_lang {\n position: absolute;\n top: 3px;\n right: calc(100% + 4px);\n font-family: system-ui;\n font-size: 12px;\n line-height: 18px;\n color: #555;\n opacity: 0.3;\n }<\/p>\n<p> .m-mdic-copy-wrapper div.u-mdic-copy-notify {\n position: absolute;\n top: 0;\n right: 0;\n padding: 3px 6px;\n border: 0;\n border-radius: 3px;\n background: none;\n font-family: system-ui;\n font-size: 12px;\n line-height: 18px;\n color: #555;\n opacity: 0.3;\n outline: none;\n opacity: 1;\n right: 100%;\n padding-right: 4px;\n }<\/p>\n<p> .m-mdic-copy-wrapper button.u-mdic-copy-btn {\n position: relative;\n top: 0;\n right: 0;\n padding: 3px 6px;\n border: 0;\n border-radius: 3px;\n background: none;\n font-family: system-ui;\n font-size: 12px;\n line-height: 18px;\n color: #555;\n opacity: 0.3;\n outline: none;\n cursor: pointer;\n transition: opacity 0.2s;\n }<\/p>\n<p> .m-mdic-copy-wrapper button.u-mdic-copy-btn:hover {\n opacity: 1;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-track {\n background-clip: padding-box;\n background: transparent;\n border: solid transparent;\n border-width: 1px;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-corner {\n background-color: transparent;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-thumb {\n background-color: rgba(0, 0, 0, 0.1);\n background-clip: padding-box;\n border: solid transparent;\n border-radius: 10px;\n }<\/p>\n<p> #chatlog .response>pre::-webkit-scrollbar-thumb:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }<\/p>\n<p> .bottom_wrapper {\n position: relative;\n width: 100%;\n background-color: #fff;\n padding: 12px 12px;\n position: absolute;\n bottom: 0;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper {\n border: none;\n width: calc(100% - 148px);\n position: relative;\n text-align: left;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper .message_input_text {\n border-radius: 6px;\n border: 1px solid rgba(0, 0, 0, .1);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;\n outline: none;\n resize: none;\n height: 50px;\n font-size: 16px;\n max-height: 200px;\n padding: 13px 0 14px 16px;\n width: 100%;\n display: block;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper .message_input_text::placeholder {\n color: gray;\n }<\/p>\n<p> .bottom_wrapper .message_input_wrapper .message_input_text::-webkit-scrollbar {\n display: none;\n width: 0;\n height: 0;\n }<\/p>\n<p> .bottom_wrapper .send_message {\n width: 80px;\n height: 50px;\n font-size: 18px;\n font-weight: bold;\n border-radius: 5px;\n background-color: #99c959;\n border: none;\n padding: 0;\n color: #fff;\n cursor: pointer;\n transition: all 0.2s linear;\n text-align: center;\n float: right;\n position: absolute;\n right: 70px;\n bottom: 12px;\n }<\/p>\n<p> .bottom_wrapper .send_message:hover {\n background-color: #90c050;\n }<\/p>\n<p> .bottom_wrapper .send_message .text {\n font-size: 18px;\n font-weight: 300;\n display: inline-block;\n line-height: 48px;\n }<\/p>\n<p> #clearConv {\n position: absolute;\n right: 10px;\n bottom: 12px;\n width: 50px;\n height: 50px;\n font-size: 16px;\n display: inline-block;\n border-radius: 5px;\n background-color: #909090;\n border: 2px solid #909090;\n color: #fff;\n cursor: pointer;\n transition: all 0.2s linear;\n text-align: center;\n }<\/p>\n<p> #clearConv:hover {\n background-color: gray;\n border: 2px solid gray;\n }<\/p>\n<p> .loaded>span {\n display: inline-block;\n }<\/p>\n<p> .loaded>svg {\n display: none;\n }<\/p>\n<p> .loading {\n background: #e7e7e8 !important;\n }<\/p>\n<p> .loading>span {\n display: none;\n }<\/p>\n<p> .loading>svg {\n display: block;\n }<\/p>\n<p> .switch-slide {\n display: inline-block;\n vertical-align: middle;\n }<\/p>\n<p> .switch-slide-label {\n display: block;\n width: 38px;\n height: 18px;\n background: #909090;\n border-radius: 30px;\n cursor: pointer;\n position: relative;\n -webkit-transition: 0.3s ease;\n transition: 0.3s ease;\n }<\/p>\n<p> .switch-slide-label:after {\n content: '';\n display: block;\n width: 16px;\n height: 16px;\n border-radius: 100%;\n background: #fff;\n box-shadow: 0 1px 1px rgba(0, 0, 0, .1);\n position: absolute;\n left: 1px;\n top: 1px;\n -webkit-transform: translateZ(0);\n transform: translateZ(0);\n -webkit-transition: 0.3s ease;\n transition: 0.3s ease;\n }<\/p>\n<p> .switch-slide input:checked+label {\n background: #99c959;\n transition: 0.3s ease;\n }<\/p>\n<p> .switch-slide input:checked+label:after {\n left: 21px;\n }<\/p>\n<p> #setting {\n position: absolute;\n right: 15px;\n top: 13px;\n cursor: pointer;\n padding: 5px;\n border: none;\n background-color: transparent;\n border-radius: 4px;\n }<\/p>\n<p> #setting:hover {\n background: #e7e7e8;\n }<\/p>\n<p> .showSetting {\n background: #b0b0b0 !important;\n }<\/p>\n<p> #setDialog {\n color: #303030;\n position: absolute;\n z-index: 2;\n background: white;\n width: 320px;\n right: 10px;\n top: 55px;\n -webkit-user-select: none;\n user-select: none;\n border-radius: 5px;\n padding: 8px 12px 8px 12px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);\n }<\/p>\n<p> #setDialog>div {\n margin-bottom: 7px;\n }<\/p>\n<p> #setDialog input {\n width: 100%;\n }<\/p>\n<p> #setDialog .inlineTitle {\n display: inline-block;\n width: 80px;\n line-height: 16px;\n vertical-align: middle;\n }<\/p>\n<p> .inputTextClass {\n outline: none;\n border-radius: 4px;\n margin-top: 2px;\n height: 32px;\n font-size: 15px;\n padding-left: 6px;\n border: 1px solid #d9d9e3;\n border-color: rgba(0, 0, 0, .1);\n box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 10px 0px;\n }<\/p>\n<p> .areaTextClass {\n width: 100%;\n height: 80px;\n display: block;\n resize: none;\n padding: 6px;\n }<\/p>\n<p> input[type=\"range\"] {\n -webkit-appearance: none;\n height: 8px;\n background: #909090;\n border-radius: 5px;\n background-image: linear-gradient(#99c959, #99c959);\n background-size: 100% 100%;\n background-repeat: no-repeat;\n }<\/p>\n<p> input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 15px;\n width: 15px;\n border-radius: 50%;\n background: #99c959;\n cursor: ew-resize;\n box-shadow: 0 0 2px 0 #555;\n }<\/p>\n<p> input[type=range]::-webkit-slider-runnable-track {\n -webkit-appearance: none;\n box-shadow: none;\n border: none;\n background: transparent;\n }<\/p>\n<p> .presetSelect {\n text-align: justify;\n text-align-last: justify;\n }<\/p>\n<p> .presetSelect>div {\n display: inline-block;\n }<\/p>\n<p> .presetSelect select {\n text-align-last: left;\n outline: none;\n border-radius: 3px;\n width: 100px;\n border-color: rgba(0, 0, 0, .3);\n }<\/p>\n<p> .selectDef {\n display: flex;\n justify-content: space-between;\n font-size: 14px;\n color: #707070;\n }\n <\/style>\n<p><\/head><\/p>\n<p><body><\/p>\n<div>\n<div class=\"chat_window\">\n<div class=\"top_menu\">\n<div class=\"buttons\">\n<div class=\"button close\"><\/div>\n<div class=\"button minimize\"><\/div>\n<div class=\"button maximize\"><\/div>\n<\/p><\/div>\n<div class=\"title\">ChatGPT<\/div>\n<p> <button id=\"setting\"><br \/>\n <svg viewBox=\"0 0 100 100\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"display:block;\" width=\"30\"\n height=\"30\">\n <circle cx=\"50\" cy=\"20\" r=\"10\" fill=\"#e15b64\" \/>\n <circle cx=\"50\" cy=\"50\" r=\"10\" fill=\"#f8b26a\" \/>\n <circle cx=\"50\" cy=\"80\" r=\"10\" fill=\"#99c959\" \/>\n <\/svg><br \/>\n <\/button><\/p>\n<div id=\"setDialog\" style=\"display:none;\">\n<div>\n<div>\u81ea\u5b9a\u4e49API key<\/div>\n<p> <input class=\"inputTextClass\" type=\"password\" placeholder=\"sk-xxxxxx\" id=\"keyInput\" \/>\n <\/div>\n<div>\n<div class=\"presetSelect\">\n<div>\u7cfb\u7edf\u89d2\u8272<\/div>\n<div>\n <label for=\"preSetSystem\">\u9884\u8bbe\u89d2\u8272<\/label><br \/>\n <select id=\"preSetSystem\"><option value=\"\">\u9ed8\u8ba4<\/option><option value=\"normal\">\u52a9\u624b<\/option><option value=\"cat\">\u732b\u5a18<\/option><option value=\"image\">\u6709\u56fe<\/option><\/select>\n <\/div>\n<\/p><\/div>\n<p> <textarea class=\"inputTextClass areaTextClass\" placeholder=\"\u4f60\u662f\u4e00\u4e2a\u4e50\u4e8e\u52a9\u4eba\u7684\u52a9\u624b\uff0c\u5c3d\u91cf\u7b80\u660e\u627c\u8981\u5730\u56de\u7b54\"\n id=\"systemInput\"><\/textarea>\n <\/div>\n<div>\n <span>\u89d2\u8272\u6027\u683c<\/span><br \/>\n <input type=\"range\" id=\"top_p\" min=\"0\" max=\"1\" value=\"1\" step=\"0.05\" \/><\/p>\n<div class=\"selectDef\">\n <span>\u51c6\u786e\u4e25\u8c28<\/span><br \/>\n <span>\u7075\u6d3b\u521b\u65b0<\/span>\n <\/div>\n<\/p><\/div>\n<div>\n <span>\u56de\u7b54\u8d28\u91cf<\/span><br \/>\n <input type=\"range\" id=\"temp\" min=\"0\" max=\"2\" value=\"1\" step=\"0.05\" \/><\/p>\n<div class=\"selectDef\">\n <span>\u91cd\u590d\u523b\u677f<\/span><br \/>\n <span>\u80e1\u8a00\u4e71\u8bed<\/span>\n <\/div>\n<\/p><\/div>\n<div>\n <span>\u6253\u5b57\u673a\u901f\u5ea6<\/span><br \/>\n <input type=\"range\" id=\"textSpeed\" min=\"10\" max=\"100\" value=\"88\" step=\"1\" \/><\/p>\n<div class=\"selectDef\">\n <span>\u6162<\/span><br \/>\n <span>\u5feb<\/span>\n <\/div>\n<\/p><\/div>\n<div>\n <span class=\"inlineTitle\">\u8fde\u7eed\u5bf9\u8bdd<\/span><br \/>\n <label class=\"switch-slide\"><br \/>\n <input type=\"checkbox\" id=\"enableCont\" checked hidden \/><br \/>\n <label for=\"enableCont\" class=\"switch-slide-label\"><\/label><br \/>\n <\/label>\n <\/div>\n<div>\n <span class=\"inlineTitle\">\u957f\u56de\u590d<\/span><br \/>\n <label class=\"switch-slide\"><br \/>\n <input type=\"checkbox\" id=\"enableLongReply\" hidden \/><br \/>\n <label for=\"enableLongReply\" class=\"switch-slide-label\"><\/label><br \/>\n <\/label>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"messages\">\n<div id=\"chatlog\"><\/div>\n<\/p><\/div>\n<div class=\"bottom_wrapper clearfix\">\n<div class=\"message_input_wrapper\">\n <textarea class=\"message_input_text\" spellcheck=\"false\" placeholder=\"\u6765\u95ee\u70b9\u4ec0\u4e48\u5427\"\n id=\"chatinput\"><\/textarea>\n <\/div>\n<p> <button class=\"send_message loaded\" id=\"sendbutton\"><br \/>\n <span>\u53d1\u9001<\/span><br \/>\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"margin:0 auto;height:40px;\" viewBox=\"0 0 200 100\"\n preserveAspectRatio=\"xMidYMid\">\n <g transform=\"translate(50 50)\">\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#e15b64\">\n <animateTransform attributeName=\"transform\" type=\"scale\" begin=\"-0.3333333333333333s\"\n calcMode=\"spline\" keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\" values=\"0;1;0\"\n keyTimes=\"0;0.5;1\" dur=\"1s\" repeatCount=\"indefinite\"><\/animateTransform>\n <\/circle>\n <\/g>\n <g transform=\"translate(100 50)\">\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#f8b26a\">\n <animateTransform attributeName=\"transform\" type=\"scale\" begin=\"-0.16666666666666666s\"\n calcMode=\"spline\" keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\" values=\"0;1;0\"\n keyTimes=\"0;0.5;1\" dur=\"1s\" repeatCount=\"indefinite\"><\/animateTransform>\n <\/circle>\n <\/g>\n <g transform=\"translate(150 50)\">\n <circle cx=\"0\" cy=\"0\" r=\"15\" fill=\"#99c959\">\n <animateTransform attributeName=\"transform\" type=\"scale\" begin=\"0s\" calcMode=\"spline\"\n keySplines=\"0.3 0 0.7 1;0.3 0 0.7 1\" values=\"0;1;0\" keyTimes=\"0;0.5;1\" dur=\"1s\"\n repeatCount=\"indefinite\"><\/animateTransform>\n <\/circle>\n <\/g>\n <\/svg><br \/>\n <\/button><br \/>\n <button id=\"clearConv\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"margin:0 auto;display:block\"\n width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\">\n <path fill=\"currentColor\"\n d=\"M8 20v-5h2v5h9v-7H5v7h3zm-4-9h16V8h-6V4h-4v4H4v3zM3 21v-8H2V7a1 1 0 0 1 1-1h5V3a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1v3h5a1 1 0 0 1 1 1v6h-1v8a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1z\">\n <\/path>\n <\/svg><\/button>\n <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p> <script src=\"\/\/cdn.staticfile.org\/markdown-it\/13.0.1\/markdown-it.min.js\"><\/script><br \/>\n <script src=\"\/\/cdn.staticfile.org\/highlight.js\/11.7.0\/highlight.min.js\"><\/script><br \/>\n <script src=\"\/\/cdn.staticfile.org\/KaTeX\/0.16.4\/katex.min.js\"><\/script><br \/>\n <script src=\"\/\/npm.elemecdn.com\/markdown-it-texmath@1.0.0\/texmath.js\"><\/script><br \/>\n <script>\n const API_URL = \"\/v1\/chat\/completions\";\n const messagsEle = document.getElementsByClassName(\"messages\")[0];\n const chatlog = document.getElementById(\"chatlog\");\n const sendBtnEle = document.getElementById(\"sendbutton\");\n const textarea = document.getElementById(\"chatinput\");\n const settingEle = document.getElementById(\"setting\");\n const dialogEle = document.getElementById(\"setDialog\");\n textarea.focus();\n let data = [];\n let loading = false;\n let presetRoleData = {\n \"normal\": \"\u4f60\u662f\u4e00\u4e2a\u4e50\u4e8e\u52a9\u4eba\u7684\u52a9\u624b\uff0c\u5c3d\u91cf\u7b80\u660e\u627c\u8981\u5730\u56de\u7b54\",\n \"cat\": \"\u4f60\u662f\u4e00\u4e2a\u53ef\u7231\u7684\u732b\u5a18\uff0c\u6bcf\u53e5\u8bdd\u7ed3\u5c3e\u90fd\u8981\u5e26\u4e2a'\u55b5'\",\n \"image\": \"\u6211\u7ed9\u4f60\u4e2a\u6307\u4ee4\uff0c\u751f\u6210\u76f8\u5e94\u7684\u56fe\u7247\uff0c\u53d1\u9001\u56fe\u7247\u65f6\u5019\u8bf7\u7528 markdown \u8bed\u8a00\u751f\u6210\uff0c\u4e0d\u8981\u53cd\u659c\u7ebf\uff0c\u4e0d\u8981\u4ee3\u7801\u6846\uff0c\u8bf7\u9700\u8981\u4f7f\u7528 unsplash API \uff0c\u9075\u5faa\u4e00\u4e0b\u683c\u5f0f\uff0c https:\/\/source.unsplash.com\/960x640\/? \uff1c\u82f1\u6587\u5173\u952e\u8bcd\uff1e\"\n }\n let systemRole; \/\/ \u81ea\u5b9a\u4e49\u7cfb\u7edf\u89d2\u8272\n let roleNature; \/\/ \u89d2\u8272\u6027\u683c\n let roleTemp; \/\/ \u56de\u7b54\u8d28\u91cf\n let customAPIKey; \/\/ \u81ea\u5b9a\u4e49apiKey\n let enableCont; \/\/ \u662f\u5426\u5f00\u542f\u8fde\u7eed\u5bf9\u8bdd\uff0c\u9ed8\u8ba4\u5f00\u542f\uff0c\u5bf9\u8bdd\u5305\u542b\u4e0a\u4e0b\u6587\u4fe1\u606f\u3002\n let enableLongReply; \/\/ \u662f\u5426\u5f00\u542f\u957f\u56de\u590d\uff0c\u9ed8\u8ba4\u5173\u95ed\uff0c\u5f00\u542f\u53ef\u80fd\u5bfc\u81f4api\u8d39\u7528\u589e\u52a0\u3002\n let longReplyFlag;\n let textSpeed; \/\/ \u6253\u5b57\u673a\u901f\u5ea6\uff0c\u8d8a\u5c0f\u8d8a\u5feb\n const clearData = () => {\n if (systemRole) {\n data.length = 1;\n } else {\n data = [];\n }\n }\n const scrollToBottom = () => {\n if (messagsEle.scrollHeight - messagsEle.scrollTop - messagsEle.clientHeight < 88) {\n messagsEle.scrollTo(0, messagsEle.scrollHeight)\n }\n }\n const scrollToBottomLoad = (ele) => {\n if (messagsEle.scrollHeight - messagsEle.scrollTop - messagsEle.clientHeight < ele.clientHeight + 88) {\n messagsEle.scrollTo(0, messagsEle.scrollHeight)\n }\n }\n const initSetting = () => {\n const systemEle = document.getElementById(\"systemInput\");\n let localSystem = localStorage.getItem(\"system\");\n if (localSystem) {\n systemRole = localSystem;\n systemEle.value = localSystem;\n data.unshift({role: \"system\", content: systemRole});\n } else {\n systemRole = systemEle.value;\n }\n systemEle.onchange = () => {\n systemRole = systemEle.value;\n localStorage.setItem(\"system\", systemRole);\n if (systemRole) {\n if (data[0] && data[0].role === \"system\") {\n data[0].content = systemRole;\n } else {\n data.unshift({role: \"system\", content: systemRole});\n }\n } else if (data[0] && data[0].role === \"system\") {\n data.shift();\n }\n }\n const preEle = document.getElementById(\"preSetSystem\");\n preEle.onchange = () => {\n let val = preEle.value;\n if (val && presetRoleData[val]) {\n systemEle.value = presetRoleData[val];\n } else {\n systemEle.value = \"\";\n }\n systemEle.dispatchEvent(new Event(\"change\"));\n systemEle.focus();\n }\n const topEle = document.getElementById(\"top_p\");\n let localTop = localStorage.getItem(\"top_p\");\n if (localTop) {\n roleNature = +localTop;\n topEle.value = localTop;\n }\n topEle.oninput = () => {\n topEle.style.backgroundSize = (topEle.value - topEle.min) * 100 \/ (topEle.max - topEle.min) + \"% 100%\";\n roleNature = +topEle.value;\n localStorage.setItem(\"top_p\", topEle.value);\n }\n topEle.dispatchEvent(new Event(\"input\"));\n const tempEle = document.getElementById(\"temp\");\n let localTemp = localStorage.getItem(\"temp\");\n if (localTemp) {\n roleTemp = +localTemp;\n tempEle.value = localTemp;\n }\n tempEle.oninput = () => {\n tempEle.style.backgroundSize = (tempEle.value - tempEle.min) * 100 \/ (tempEle.max - tempEle.min) + \"% 100%\";\n roleTemp = +tempEle.value;\n localStorage.setItem(\"temp\", tempEle.value);\n }\n tempEle.dispatchEvent(new Event(\"input\"));\n const keyEle = document.getElementById(\"keyInput\");\n let localKey = localStorage.getItem(\"APIKey\");\n if (localKey) {\n customAPIKey = localKey;\n keyEle.value = localKey;\n }\n keyEle.onchange = () => {\n customAPIKey = keyEle.value;\n localStorage.setItem(\"APIKey\", customAPIKey);\n }\n keyEle.dispatchEvent(new Event(\"change\"));\n const contEle = document.getElementById(\"enableCont\");\n let localCont = localStorage.getItem(\"enableCont\");\n if (localCont) {\n enableCont = localCont === \"true\";\n contEle.checked = enableCont;\n }\n contEle.onchange = () => {\n enableCont = contEle.checked;\n localStorage.setItem(\"enableCont\", enableCont);\n if (!enableCont) {\n clearData();\n }\n }\n contEle.dispatchEvent(new Event(\"change\"));\n const longEle = document.getElementById(\"enableLongReply\");\n let localLong = localStorage.getItem(\"enableLongReply\");\n if (localLong) {\n enableLongReply = localLong === \"true\";\n longEle.checked = enableLongReply;\n }\n longEle.onchange = () => {\n enableLongReply = longEle.checked;\n localStorage.setItem(\"enableLongReply\", enableLongReply);\n }\n longEle.dispatchEvent(new Event(\"change\"));\n const speedEle = document.getElementById(\"textSpeed\");\n let localSpeed = localStorage.getItem(\"textSpeed\");\n if (localSpeed) {\n textSpeed = +speedEle.min + (speedEle.max - localSpeed);\n speedEle.value = localSpeed;\n }\n speedEle.oninput = () => {\n speedEle.style.backgroundSize = (speedEle.value - speedEle.min) * 100 \/ (speedEle.max - speedEle.min) + \"% 100%\";\n textSpeed = +speedEle.min + (speedEle.max - speedEle.value);\n localStorage.setItem(\"textSpeed\", speedEle.value);\n }\n speedEle.dispatchEvent(new Event(\"input\"));\n }\n initSetting();\n const closeEvent = (ev) => {\n if (settingEle.contains(ev.target)) {\n return;\n }\n if (!dialogEle.contains(ev.target)) {\n dialogEle.style.display = \"none\";\n document.removeEventListener(\"mousedown\", closeEvent, true);\n settingEle.classList.remove(\"showSetting\");\n }\n }\n settingEle.onmousedown = () => {\n let stat = dialogEle.style.display;\n dialogEle.style.display = stat === \"block\" ? \"none\" : \"block\";\n if (dialogEle.style.display === \"block\") {\n document.addEventListener(\"mousedown\", closeEvent, true);\n settingEle.classList.add(\"showSetting\");\n } else {\n document.removeEventListener(\"mousedown\", closeEvent, true);\n settingEle.classList.remove(\"showSetting\");\n }\n }\n const md = markdownit({\n linkify: true, \/\/ \u8bc6\u522b\u94fe\u63a5\n highlight: function (str, lang) { \/\/ markdown\u9ad8\u4eae\n try {\n return hljs.highlightAuto(str).value;\n } catch (e) { }<\/p>\n<p> return \"\"; \/\/ use external default escaping\n }\n });\n md.use(texmath, { \/\/ markdown katex\u516c\u5f0f\n engine: katex,\n delimiters: 'dollars',\n katexOptions: {macros: {\"\\\\RR\": \"\\\\mathbb{R}\"}}\n });\n const x = {\n getCodeLang(str = '') {\n const res = str.match(\/ class=\"language-(.*?)\"\/);\n return (res && res[1]) || '';\n },\n getFragment(str = '') {\n return str ? `<span class=\"u-mdic-copy-code_lang\">${str}<\/span>` : '';\n },\n };\n const strEncode = (str = '') => {\n if (!str || str.length === 0) {\n return '';\n }\n return str\n .replace(\/<\/g, '<')\n .replace(\/>\/g, '>')\n .replace(\/'\/g, '\\'')\n .replace(\/\"\/g, '"');\n };\n const getCodeLangFragment = (oriStr = '') => {\n return x.getFragment(x.getCodeLang(oriStr));\n };\n const copyClickCode = (ele) => {\n const input = document.createElement('textarea');\n input.value = ele.dataset.mdicContent;\n const nDom = ele.previousElementSibling;\n const nDelay = ele.dataset.mdicNotifyDelay;\n const cDom = nDom.previousElementSibling;\n document.body.appendChild(input);\n input.select();\n input.setSelectionRange(0, 9999);\n document.execCommand('copy');\n document.body.removeChild(input);\n if (nDom.style.display === 'none') {\n nDom.style.display = 'block';\n cDom && (cDom.style.display = 'none');\n setTimeout(() => {\n nDom.style.display = 'none';\n cDom && (cDom.style.display = 'block');\n }, nDelay);\n }\n };\n const enhanceCode = (render, options = {}) => (...args) => {\n \/* args = [tokens, idx, options, env, slf] *\/\n const {\n btnText = '\u590d\u5236\u4ee3\u7801', \/\/ button text\n successText = '\u590d\u5236\u6210\u529f', \/\/ copy-success text\n successTextDelay = 2000, \/\/ successText show time [ms]\n showCodeLanguage = true, \/\/ false | show code language\n } = options;\n const [tokens = {}, idx = 0] = args;\n const cont = strEncode(tokens[idx].content || '');\n const originResult = render.apply(this, args);\n const langFrag = showCodeLanguage ? getCodeLangFragment(originResult) : '';\n const tpls = [\n '<\/p>\n<div class=\"m-mdic-copy-wrapper\">',\n `${langFrag}`,\n `<\/p>\n<div class=\"u-mdic-copy-notify\" style=\"display:none;\">${successText}<\/div>\n<p>`,\n '<button ',\n 'class=\"u-mdic-copy-btn j-mdic-copy-btn\" ',\n `data-mdic-content=\"${cont}\" `,\n `data-mdic-notify-delay=\"${successTextDelay}\" `,\n `onclick=\"copyClickCode(this)\">${btnText}<\/button>`,\n '<\/div>\n<p>',\n ];\n const LAST_TAG = '<\/pre>\n<p>';\n const newResult = originResult.replace(LAST_TAG, `${tpls.join('')}${LAST_TAG}`);\n return newResult;\n };\n const codeBlockRender = md.renderer.rules.code_block;\n const fenceRender = md.renderer.rules.fence;\n md.renderer.rules.code_block = enhanceCode(codeBlockRender);\n md.renderer.rules.fence = enhanceCode(fenceRender);\n md.renderer.rules.image = function (tokens, idx, options, env, slf) {\n var token = tokens[idx];\n token.attrs[token.attrIndex(\"alt\")][1] = slf.renderInlineAsText(token.children, options, env);\n token.attrSet(\"onload\", \"scrollToBottomLoad(this);this.removeAttribute('onload')\");\n return slf.renderToken(tokens, idx, options)\n }\n document.getElementById(\"clearConv\").onclick = () => {\n if (!loading) {\n clearData();\n chatlog.innerHTML = \"\";\n }\n }\n const delay = () => {\n return new Promise((resolve) => setTimeout(resolve, textSpeed)); \/\/\u6253\u5b57\u673a\u65f6\u95f4\u95f4\u9694\n }\n const endAction = () => {\n loading = false;\n sendBtnEle.disabled = false;\n sendBtnEle.classList.remove(\"loading\");\n sendBtnEle.classList.add(\"loaded\");\n }\n let currentResEle;\n let progressData = \"\";\n const streamGen = async () => {\n const controller = new AbortController();\n const timeoutId = setTimeout(() => {\n controller.abort();\n alert(\"\u8bf7\u6c42\u8d85\u65f6\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\uff01\");\n endAction();\n }, 30000);\n let headers = {\n \"Content-Type\": \"application\/json\",\n };\n if (customAPIKey) {\n headers[\"Authorization\"] = \"Bearer \" + customAPIKey;\n }\n const res = await fetch(API_URL, {\n method: \"POST\",\n headers,\n body: JSON.stringify({\n messages: data,\n model: \"gpt-3.5-turbo\",\n stream: true,\n temperature: roleTemp,\n top_p: roleNature\n }),\n signal: controller.signal\n })\n clearTimeout(timeoutId);\n if (res.status !== 200) {\n if (res.status === 401) {\n alert(\"API key\u9519\u8bef\u6216\u5df2\u5931\u6548\uff0c\u8bf7\u6253\u5f00\u8bbe\u7f6e\u8f93\u5165\u6b63\u786e\u7684API key\")\n } else {\n alert(\"\u89e6\u53d1API\u8c03\u7528\u9891\u7387\u9650\u5236\uff0c\u8bf7\u7a0d\u540e\u91cd\u8bd5\uff01\");\n }\n endAction();\n return;\n }\n const decoder = new TextDecoderStream();\n const stream = res.body.pipeThrough(decoder);\n const reader = stream.getReader();\n const readChunk = async () => {\n return reader.read().then(async ({value, done}) => {\n if (!done) {\n if (!currentResEle) {\n currentResEle = document.createElement(\"div\");\n currentResEle.className = \"response markdown-body\";\n chatlog.appendChild(currentResEle);\n }\n let chunks = value.split(\/\\n{2}\/g);\n chunks = chunks.filter(item => {\n return item.trim();\n });\n for (let i = 0; i < chunks.length; i++) {\n let chunk = chunks[i];\n if (chunk) {\n let payload;\n try {\n payload = JSON.parse(chunk.slice(6));\n } catch (e) {\n break;\n }\n if (payload.choices[0].finish_reason) {\n if (enableLongReply) {\n if (payload.choices[0].finish_reason === \"length\") {\n longReplyFlag = true;\n } else {\n longReplyFlag = false;\n }\n }\n break;\n } else {\n let content = payload.choices[0].delta.content;\n if (content) {\n if (!progressData && !content.trim()) {\n continue;\n }\n if (progressData) {\n await delay();\n }\n progressData += content;\n currentResEle.innerHTML = md.render(progressData);\n scrollToBottom();\n }\n }\n }\n }\n return readChunk();\n } else {\n if (longReplyFlag) {\n if (data[data.length - 1].role !== \"assistant\") {\n data.splice(systemRole ? 1 : 0, data.length - (systemRole ? 2 : 1));\n data.push({role: \"assistant\", content: progressData});\n } else {\n data[data.length - 1].content = progressData;\n }\n return streamGen();\n }\n if (enableCont) {\n data.push({role: \"assistant\", content: progressData});\n }\n currentResEle = null;\n progressData = \"\";\n endAction();\n }\n });\n };\n await readChunk();\n }\n const generateText = async (message) => {\n loading = true;\n sendBtnEle.disabled = true;\n sendBtnEle.classList.remove(\"loaded\");\n sendBtnEle.classList.add(\"loading\");\n data.push({role: \"user\", content: message.trim()});\n let request = document.createElement(\"div\");\n request.className = \"markdown-body\";\n request.innerHTML = md.render(message);\n chatlog.appendChild(request);\n scrollToBottom();\n await streamGen();\n if (!enableCont) {\n clearData();\n }\n };\n textarea.onkeydown = (e) => {\n if (e.keyCode === 13) {\n if (!e.shiftKey) {\n e.preventDefault();\n genFunc();\n }\n }\n }\n textarea.oninput = (e) => {\n textarea.style.height = \"50px\";\n textarea.style.height = e.target.scrollHeight + 2 + \"px\";\n };\n const genFunc = function () {\n let message = textarea.value;\n if (message.length < 1) {\n return;\n } else {\n if (loading === true) {\n return;\n }\n textarea.value = \"\";\n textarea.style.height = \"50px\";\n generateText(message);\n }\n }\n sendBtnEle.onclick = genFunc;\n <\/script>\n <link href=\"\/\/cdn.staticfile.org\/github-markdown-css\/5.2.0\/github-markdown-light.min.css\" rel=\"stylesheet\">\n <link href=\"\/\/cdn.staticfile.org\/highlight.js\/11.7.0\/styles\/github.min.css\" rel=\"stylesheet\">\n <link href=\"\/\/cdn.staticfile.org\/KaTeX\/0.16.4\/katex.min.css\" rel=\"stylesheet\">\n <link href=\"\/\/npm.elemecdn.com\/markdown-it-texmath@1.0.0\/css\/texmath.css\" rel=\"stylesheet\">\n <script defer>\n const downRoleController = new AbortController();\n setTimeout(() => {\n downRoleController.abort();\n }, 10000);\n const preEle = document.getElementById(\"preSetSystem\");\n fetch(\"https:\/\/cdn.jsdelivr.net\/gh\/PlexPt\/awesome-chatgpt-prompts-zh\/prompts-zh.json\", {\n signal: downRoleController.signal\n }).then(async (response) => {\n let res = await response.json();\n for (let i = 0; i < res.length; i++) {\n let key = \"act\" + i;\n presetRoleData[key] = res[i].prompt.trim();\n let optionEle = document.createElement(\"option\");\n optionEle.text = res[i].act;\n optionEle.value = key;\n preEle.options.add(optionEle);\n }\n }).catch(e => { })\n <\/script><br \/>\n<\/body><\/p>\n<p><\/html><\/p>\n","protected":false},"excerpt":{"rendered":"<p>ChatGPT ChatGPT…<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-1876","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages\/1876","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/comments?post=1876"}],"version-history":[{"count":2,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages\/1876\/revisions"}],"predecessor-version":[{"id":1878,"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/pages\/1876\/revisions\/1878"}],"wp:attachment":[{"href":"https:\/\/pokernews.cc\/index.php\/wp-json\/wp\/v2\/media?parent=1876"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}