如何给网站增加一个chatgpt机器人聊天窗口

 5435

最近ChatGPT 实在是太火啦,但是由于是国外网站,导致很多小白不知道怎么使用。

今天带来一个html版的,可以给任何网站增加一个chatgpt机器人聊天窗口,只需插入html代码的,都是可以直接使用。

可自定义头像,粘贴即用!可以用在网站任何界面上 只需要您的系统支持编辑文章html发布!

  1. <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  2. <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  3.   
  4. <!-- 用来显示本地存储还有多少空间 -->
  5. <div id="storageInfo"></div>
  6. <!-- 清空本地储存可以写在标签内的炫酷一点的按钮 -->
  7. <button style=" 
  8.   align-items: center;
  9.   background: linear-gradient(45deg, #F44336, #FFEB3B, #4CAF50, #2196F3, #9C27B0);
  10.   background-size: 400%;
  11.   animation: rainbow 10s ease infinite;
  12.   color: white;
  13.   padding: 10px 20px;
  14.   border: none;
  15.   border-radius: 30px;
  16.   box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
  17.   cursor: pointer;
  18.   font-size: 16px;
  19.   font-weight: bold;
  20.   letter-spacing: 1px;
  21.   outline: none;
  22.   text-transform: uppercase;"
  23.   onclick="confirmClearLocalStorage()">
  24.   清空localStorage
  25. </button>
  26. <style>
  27.     button {
  28.         display: block;
  29.         margin: 0 auto;
  30.     }
  31.     @keyframes rainbow {
  32.       0% {
  33.         background-position: 0%;
  34.       }
  35.       50% {
  36.         background-position: 100%;
  37.       }
  38.       100% {
  39.         background-position: 0%;
  40.       }
  41.     }
  42.   
  43.     #chat-container {
  44.             position: relative;
  45.             width: 500px;
  46.             height: 500px;
  47.         }
  48.   
  49.         #chat-window {
  50.             position: absolute;
  51.             top: 50px;
  52.             left: 50px;
  53.             width: 400px;
  54.             height: 400px;
  55.             background-color: #fff;
  56.             overflow-y: scroll;
  57.         }
  58.   
  59.     /* 使view标签隐藏 */
  60.     /* .show {
  61.         display: flex;
  62.     }
  63.     .hide {
  64.         display: none;
  65.     } */
  66.     /* .nav-visible .toggle-view {
  67.         display: flex;
  68.     }
  69.     .nav-hidden .toggle-view {
  70.         display: none;
  71.     } */
  72.   </style>
  73.   
  74. <div id="app" style="display: flex;flex-flow: column;margin: 20 ">
  75.     <scroll-view scroll-with-animation scroll-y="true" style="width: 100%;">
  76.         <!-- 用来获取消息体高度 -->
  77.         <view id="okk" scroll-with-animation>
  78.             <!-- 消息 -->
  79.             <view v-for="(x,i) in msgList" :key="i">
  80.                 <!-- 用户消息 头像可选加入-->
  81.                 <view v-if="x.my" style="display: flex;
  82.                 flex-direction: column;
  83.                 align-items: flex-end;">
  84.   
  85.                     <view style="width: 400rpx; display: flex; align-items: center;">                        
  86.                         <view style="border-radius: 35rpx;">
  87.                             <text style="word-break: break-all;">{{x.msg}}&nbsp;&nbsp;</text>
  88.                         </view>
  89.                         <image src="您的头像地址哦" style="width: 40px; height: 40px; border-radius: 20px;"></image>
  90.                         <!-- <image src="https://img2.woyaogexing.com/2017/07/07/67ca73a32fe97f63!400x400_big.jpg" style="width: 40px; height: 40px; border-radius: 80rpx;"></image> -->
  91.                     </view>
  92.   
  93.                 </view>
  94.                 <!-- 机器人消息 -->
  95.                 <view v-if="!x.my" style="display: flex;
  96.                 flex-direction: row;
  97.                 align-items: flex-start;">
  98.   
  99.                     <view style="width: 500rpx;display: flex; align-items: center;">
  100.                         <image src="机器人的头像地址哦" style="width: 40px; height: 40px; border-radius: 20px;"></image>
  101.                         <view style="border-radius: 35rpx;background-color: #f9f9f9;">
  102.                             <text style="word-break: break-all;">&nbsp;&nbsp;{{x.msg}}</text>
  103.                             <!-- &nbsp;加两个空格,美观一些 -->
  104.                         </view>
  105.                     </view>
  106.                 </view>
  107.             </view>
  108.   
  109.   
  110.             <view style="height: 130rpx;">
  111.   
  112.             </view>
  113.         </view>
  114.   
  115.     </scroll-view>
  116.   
  117.     
  118.   
  119.     <!-- 底部导航栏 -->
  120.     <view   ref="toggleView"   style="position: fixed;bottom:0px;width: 100%;display: flex;
  121.     flex-direction: column;
  122.     justify-content: center;
  123.     align-items: center;">
  124.         <view style="font-size: 55rpx;display: flex;
  125.         flex-direction: row;
  126.         justify-content: space-around;
  127.         align-items: center;width: 75%;
  128.     margin: 20;">
  129.   
  130.             <input v-model="msg" type="text" style="width: 75%;
  131.             height: 45px;
  132.             border-radius: 50px;
  133.             padding-left: 20px;
  134.             margin-left: 10px;background-color: #f0f0f0;" @confirm="sendMsg" confirm-type="search"
  135.                 placeholder-class="my-neirong-sm" placeholder="用一句简短的话描述您的问题" />
  136.             <button @click="sendMsg" :disabled="msgLoad" style="height: 45px;
  137.             width: 20%;;
  138.     color: #030303;    border-radius: 2500px;">{{sentext}}</button>
  139.         </view>
  140.     </view>
  141.   
  142.   
  143.   
  144.   
  145.     </view>
  146.   
  147.     <!-- 点击按钮显示/隐藏导航栏 -->
  148.     <button  v-on:click="toggleNav" style="position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; background-color: #999; border: none; border-radius: 50%; color: #fff; font-size: 24px; text-align: center; line-height: 50px;"> {{ navVisible ? '显':'隐'}}</button>
  149.   
  150. </div>
  151.   
  152.   
  153.   
  154. <!-- 实时显示所剩余的本地储存内存大小 -->
  155. <script>
  156.     function updateStorageInfo() {
  157.     const usedSpace = JSON.stringify(localStorage).length;
  158.     const totalSpace = 5 * 1024 * 1024; // 5MB
  159.     const freeSpace = totalSpace - usedSpace;
  160.     const usedPercentage = (usedSpace / totalSpace) * 100;
  161.    
  162.     const storageInfoDiv = document.getElementById("storageInfo");
  163.     storageInfoDiv.innerHTML = `localStorage已使用 ${usedPercentage.toFixed(2)}%(${(usedSpace / 1024).toFixed(2)}KB),剩余 ${(freeSpace / 1024).toFixed(2)}KB`;
  164.     }
  165.   
  166.     // 在页面加载时更新一次localStorage的使用情况
  167.     updateStorageInfo();
  168.   
  169.     // 监听localStorage的变化,当有新的数据添加到localStorage中时更新使用情况
  170.     window.addEventListener("storage", function() {
  171.     updateStorageInfo();
  172.     });
  173.     // 在以上代码中,updateStorageInfo()函数会根据localStorage的占用大小和总大小计算出剩余大小和使用百分比,然后将这些信息显示在id为storageInfo的div元素中。
  174.     // 为了保证在页面加载时就能显示localStorage的使用情况,我们在代码中首先调用了updateStorageInfo()函数。
  175.     // 此外,为了实现实时更新localStorage使用情况的功能,我们还添加了一个storage事件监听器。当页面中有其他代码向localStorage中写入数据时,该事件监听器会自动被调用,从而更新localStorage的使用情况。
  176.   
  177. </script>
  178.   
  179.   
  180.   
  181.   
  182. <!-- 清空本地储存 -->
  183. <script>
  184.     function confirmClearLocalStorage() {
  185.         if (confirm("您确定要清空localStorage吗?此操作不可撤销!")) {
  186.             localStorage.clear();
  187.             alert("localStorage已清空");
  188.         }
  189.     }
  190.     // 当点击按钮后,会调用clearLocalStorage函数,该函数会调用localStorage.clear()方法来清空所有的localStorage数据。最后弹出一个提示框,告诉用户localStorage已经被清空了。
  191.     //改进后↓
  192.     // 当用户点击按钮后,会调用confirmClearLocalStorage函数,该函数会弹出一个确认框,询问用户是否确定要清空localStorage。如果用户点击确认,函数会调用localStorage.clear()方法来清空localStorage中的所有数据,并弹出提示框告诉用户localStorage已经被清空了。如果用户点击取消,则不会执行清空localStorage的操作。
  193. </script>
  194.   
  195. <script>
  196.      
  197.     const { createApp } = Vue
  198.     createApp({
  199.         data() {
  200.             return {
  201.                 navVisible: true,
  202.                 api: '本代码由我的站长站分享:www.wdzzz.com',
  203.                 msgLoad: false,
  204.                 anData: {},
  205.                 sentext: '发送',
  206.   
  207.                 animationData: {},
  208.                 showTow: false,
  209.                 msgList: [{
  210.                     my: false,
  211.                     msg: "你好我是openAI机器人,请问有什么问题可以帮助您?"
  212.                 }],
  213.                 msgContent: "",
  214.                 msg: "",
  215.                 //navVisible: true // 控制导航栏的显示/隐藏
  216.             }
  217.         },
  218.         methods: {
  219.             toggleNav() {
  220.                 //const toggleBtn = document.getElementById('toggleBtn');
  221.                 //const toggleView = document.getElementById('toggleView');
  222.                 const toggleView = this.$refs.toggleView; // 通过 ref 获取元素
  223.   
  224.                     //toggleView.classList.toggle('hide');
  225.                     this.navVisible = !this.navVisible;
  226.                     
  227.                     console.log(this.navVisible);
  228.                     if(this.navVisible){
  229.                         toggleView.style.display = 'flex';
  230.                     }
  231.                     else{
  232.                         toggleView.style.display = 'none';
  233.                     }
  234.                      
  235.                  
  236.             },
  237.             
  238.             sendMsg() {
  239.   
  240.                 // 消息为空不做任何操作
  241.                 if (this.msg == "") {
  242.                     return 0;
  243.                 }
  244.                 this.sentext = '请求中'
  245.                 this.msgList.push({
  246.                     "msg": this.msg,
  247.                     "my": true
  248.                 })
  249.                 console.log(this.msg);
  250.                 this.msgContent += ('YOU:' + this.msg + "\n")
  251.   
  252.                 // 添加聊天记录到localStorage中
  253.                 let chatHistory = localStorage.getItem('chatHistory') || '[]';
  254.                 chatHistory = JSON.parse(chatHistory);
  255.                 chatHistory.push({
  256.                     "msg": this.msg,
  257.                     "my": true
  258.                 });
  259.                 localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
  260.                  
  261.                 this.msgLoad = true
  262.                 // 清除消息
  263.                 this.msg = ""
  264.                 axios.post('https://api.openai.com/v1/completions', {
  265.                     prompt: this.msgContent, max_tokens: 2048, model: "text-davinci-003"
  266.                 }, {
  267.                     headers: { 'content-type': 'application/json', 'Authorization': 'Bearer ' + this.api }
  268.                 }).then(res => {
  269.                     console.log(res);
  270.                     let text = res.data.choices[0].text.replace("openai:", "").replace("openai:", "").replace(/^\n|\n$/g, "")
  271.                     console.log(text);
  272.                     this.msgList.push({
  273.                         "msg": text,
  274.                         "my": false
  275.                     })
  276.                     this.msgContent += (text + "\n")
  277.   
  278.                      // 添加聊天记录到localStorage中
  279.                     let chatHistory = localStorage.getItem('chatHistory') || '[]';
  280.                     chatHistory = JSON.parse(chatHistory);
  281.                     chatHistory.push({
  282.                         "msg": text,
  283.                         "my": false
  284.                     });
  285.                     localStorage.setItem('chatHistory', JSON.stringify(chatHistory));
  286.   
  287.                     this.msgLoad = false
  288.                     this.sentext = '发送'
  289.                 }).catch(error => {
  290.                     alert(error);//弹出异常
  291.                     let text = "" //重置text
  292.                     this.msgList.push({
  293.                         "msg": "服务异常,请重新发送..",
  294.                         "my": false
  295.                     })
  296.                     this.msgContent += (text + "\n")
  297.                     this.msgLoad = false
  298.                     this.sentext = '发送'//再次点击发送
  299.                 });
  300.   
  301.             },
  302.   
  303.   
  304.         }
  305.     }).mount('#app')
  306.     //这段代码的作用是将当前对话中的一条消息添加到聊天记录中,并将聊天记录存储在本地的localStorage中。
  307.   
  308.     // 首先,代码通过localStorage.getItem('chatHistory')获取了本地存储的聊天记录,如果没有聊天记录则初始化为空数组'[]'。接着,代码使用JSON.parse将获取到的聊天记录字符串解析为数组类型。此时,chatHistory变量中保存的就是之前存储在本地的聊天记录。
  309.   
  310.     // 然后,代码向chatHistory数组中添加了一条消息对象。该对象有两个属性,"msg"表示消息内容,"my"表示消息是否是自己发送的(即是否是用户自己发出的消息,true表示是,false表示否)。
  311.   
  312.     // 最后,代码使用localStorage.setItem将更新后的chatHistory数组再次存储到本地。这里需要使用JSON.stringify将数组转换为字符串格式,才能存储到localStorage中。
  313.   
  314.     // 这样一来,每次用户发送一条消息时,代码都会将该消息添加到聊天记录中,并将聊天记录保存到本地。下次用户再次访问页面时,就可以从localStorage中加载之前的聊天记录。
  315. </script>


本文网址:https://www.zztuku.com/detail-13923.html
站长图库 - 如何给网站增加一个chatgpt机器人聊天窗口
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐

    抖音快手无水印解析APi代码实例