如何给网站增加一个chatgpt机器人聊天窗口
最近ChatGPT 实在是太火啦，但是由于是国外网站，导致很多小白不知道怎么使用。
今天带来一个html版的，可以给任何网站增加一个chatgpt机器人聊天窗口，只需插入html代码的，都是可以直接使用。
可自定义头像，粘贴即用！可以用在网站任何界面上 只需要您的系统支持编辑文章html发布！
<scriptsrc="https://unpkg.com/vue@3/dist/vue.global.js"></script><scriptsrc="https://unpkg.com/axios/dist/axios.min.js"></script><!--用来显示本地存储还有多少空间--><divid="storageInfo"></div><!--清空本地储存可以写在标签内的炫酷一点的按钮--><buttonstyle="align-items:center;background:linear-gradient(45deg,#F44336,#FFEB3B,#4CAF50,#2196F3,#9C27B0);background-size:400%;animation:rainbow10seaseinfinite;color:white;padding:10px20px;border:none;border-radius:30px;box-shadow:0px4px10pxrgba(0,0,0,0.2);cursor:pointer;font-size:16px;font-weight:bold;letter-spacing:1px;outline:none;text-transform:uppercase;"onclick="confirmClearLocalStorage()">清空localStorage</button><style>button{display:block;margin:0auto;}@keyframesrainbow{0%{background-position:0%;}50%{background-position:100%;}100%{background-position:0%;}}#chat-container{position:relative;width:500px;height:500px;}#chat-window{position:absolute;top:50px;left:50px;width:400px;height:400px;background-color:#fff;overflow-y:scroll;}/*使view标签隐藏*//*.show{display:flex;}.hide{display:none;}*//*.nav-visible.toggle-view{display:flex;}.nav-hidden.toggle-view{display:none;}*/</style><divid="app"style="display:flex;flex-flow:column;margin:20"><scroll-viewscroll-with-animationscroll-y="true"style="width:100%;"><!--用来获取消息体高度--><viewid="okk"scroll-with-animation><!--消息--><viewv-for="(x,i)inmsgList":key="i"><!--用户消息头像可选加入--><viewv-if="x.my"style="display:flex;flex-direction:column;align-items:flex-end;"><viewstyle="width:400rpx;display:flex;align-items:center;"><viewstyle="border-radius:35rpx;"><textstyle="word-break:break-all;">{{x.msg}} </text></view><imagesrc="您的头像地址哦"style="width:40px;height:40px;border-radius:20px;"></image><!--<imagesrc="/d/pic20240103/mkzddnq3a34.jpg"style="width:40px;height:40px;border-radius:80rpx;"></image>--></view></view><!--机器人消息--><viewv-if="!x.my"style="display:flex;flex-direction:row;align-items:flex-start;"><viewstyle="width:500rpx;display:flex;align-items:center;"><imagesrc="机器人的头像地址哦"style="width:40px;height:40px;border-radius:20px;"></image><viewstyle="border-radius:35rpx;background-color:#f9f9f9;"><textstyle="word-break:break-all;"> {{x.msg}}</text><!-- 加两个空格，美观一些--></view></view></view></view><viewstyle="height:130rpx;"></view></view></scroll-view><!--底部导航栏--><viewref="toggleView"style="position:fixed;bottom:0px;width:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;"><viewstyle="font-size:55rpx;display:flex;flex-direction:row;justify-content:space-around;align-items:center;width:75%;margin:20;"><inputv-model="msg"type="text"style="width:75%;height:45px;border-radius:50px;padding-left:20px;margin-left:10px;background-color:#f0f0f0;"@confirm="sendMsg"confirm-type="search"placeholder-class="my-neirong-sm"placeholder="用一句简短的话描述您的问题"/><button@click="sendMsg":disabled="msgLoad"style="height:45px;width:20%;;color:#030303;border-radius:2500px;">{{sentext}}</button></view></view></view><!--点击按钮显示/隐藏导航栏--><buttonv-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></div><!--实时显示所剩余的本地储存内存大小--><script>functionupdateStorageInfo(){constusedSpace=JSON.stringify(localStorage).length;consttotalSpace=5*1024*1024;//5MBconstfreeSpace=totalSpace-usedSpace;constusedPercentage=(usedSpace/totalSpace)*100;conststorageInfoDiv=document.getElementById("storageInfo");storageInfoDiv.innerHTML=`localStorage已使用${usedPercentage.toFixed(2)}%（${(usedSpace/1024).toFixed(2)}KB），剩余${(freeSpace/1024).toFixed(2)}KB`;}//在页面加载时更新一次localStorage的使用情况updateStorageInfo();//监听localStorage的变化，当有新的数据添加到localStorage中时更新使用情况window.addEventListener("storage",function(){updateStorageInfo();});//在以上代码中，updateStorageInfo()函数会根据localStorage的占用大小和总大小计算出剩余大小和使用百分比，然后将这些信息显示在id为storageInfo的div元素中。//为了保证在页面加载时就能显示localStorage的使用情况，我们在代码中首先调用了updateStorageInfo()函数。//此外，为了实现实时更新localStorage使用情况的功能，我们还添加了一个storage事件监听器。当页面中有其他代码向localStorage中写入数据时，该事件监听器会自动被调用，从而更新localStorage的使用情况。</script><!--清空本地储存--><script>functionconfirmClearLocalStorage(){if(confirm("您确定要清空localStorage吗？此操作不可撤销！")){localStorage.clear();alert("localStorage已清空");}}//当点击按钮后，会调用clearLocalStorage函数，该函数会调用localStorage.clear()方法来清空所有的localStorage数据。最后弹出一个提示框，告诉用户localStorage已经被清空了。//改进后↓//当用户点击按钮后，会调用confirmClearLocalStorage函数，该函数会弹出一个确认框，询问用户是否确定要清空localStorage。如果用户点击确认，函数会调用localStorage.clear()方法来清空localStorage中的所有数据，并弹出提示框告诉用户localStorage已经被清空了。如果用户点击取消，则不会执行清空localStorage的操作。</script><script>const{createApp}=VuecreateApp({data(){return{navVisible:true,api:'本代码由菜鸡源码分享：www.caijicaiji.com',msgLoad:false,anData:{},sentext:'发送',animationData:{},showTow:false,msgList:[{my:false,msg:"你好我是openAI机器人,请问有什么问题可以帮助您?"}],msgContent:"",msg:"",//navVisible:true//控制导航栏的显示/隐藏}},methods:{toggleNav(){//consttoggleBtn=document.getElementById('toggleBtn');//consttoggleView=document.getElementById('toggleView');consttoggleView=this.$refs.toggleView;//通过ref获取元素//toggleView.classList.toggle('hide');this.navVisible=!this.navVisible;console.log(this.navVisible);if(this.navVisible){toggleView.style.display='flex';}else{toggleView.style.display='none';}},sendMsg(){//消息为空不做任何操作if(this.msg==""){return0;}this.sentext='请求中'this.msgList.push({"msg":this.msg,"my":true})console.log(this.msg);this.msgContent+=('YOU:'+this.msg+"\n")//添加聊天记录到localStorage中letchatHistory=localStorage.getItem('chatHistory')||'[]';chatHistory=JSON.parse(chatHistory);chatHistory.push({"msg":this.msg,"my":true});localStorage.setItem('chatHistory',JSON.stringify(chatHistory));this.msgLoad=true//清除消息this.msg=""axios.post('https://api.openai.com/v1/completions',{prompt:this.msgContent,max_tokens:2048,model:"text-davinci-003"},{headers:{'content-type':'application/json','Authorization':'Bearer'+this.api}}).then(res=>{console.log(res);lettext=res.data.choices[0].text.replace("openai:","").replace("openai：","").replace(/^\n|\n$/g,"")console.log(text);this.msgList.push({"msg":text,"my":false})this.msgContent+=(text+"\n")//添加聊天记录到localStorage中letchatHistory=localStorage.getItem('chatHistory')||'[]';chatHistory=JSON.parse(chatHistory);chatHistory.push({"msg":text,"my":false});localStorage.setItem('chatHistory',JSON.stringify(chatHistory));this.msgLoad=falsethis.sentext='发送'}).catch(error=>{alert(error);//弹出异常lettext=""//重置textthis.msgList.push({"msg":"服务异常，请重新发送..","my":false})this.msgContent+=(text+"\n")this.msgLoad=falsethis.sentext='发送'//再次点击发送});},}}).mount('#app')//这段代码的作用是将当前对话中的一条消息添加到聊天记录中，并将聊天记录存储在本地的localStorage中。//首先，代码通过localStorage.getItem('chatHistory')获取了本地存储的聊天记录，如果没有聊天记录则初始化为空数组'[]'。接着，代码使用JSON.parse将获取到的聊天记录字符串解析为数组类型。此时，chatHistory变量中保存的就是之前存储在本地的聊天记录。//然后，代码向chatHistory数组中添加了一条消息对象。该对象有两个属性，"msg"表示消息内容，"my"表示消息是否是自己发送的（即是否是用户自己发出的消息，true表示是，false表示否）。//最后，代码使用localStorage.setItem将更新后的chatHistory数组再次存储到本地。这里需要使用JSON.stringify将数组转换为字符串格式，才能存储到localStorage中。//这样一来，每次用户发送一条消息时，代码都会将该消息添加到聊天记录中，并将聊天记录保存到本地。下次用户再次访问页面时，就可以从localStorage中加载之前的聊天记录。</script> 相关专题
