1.展示效果

效果预览图：

新增小功能：

① 在原有的基础上加入了本地实时存档的功能，按照下面的步骤便可以随时在本地查看以往和智能AI所有的聊天记录哦！再也不用担心关闭网页后先前的聊天内容全部消失啦！

PS：最新的谷歌和Edge浏览器都有本地存档这个功能哦~

②实时监控本地储存空间余量（5MB）

③还有炫酷彩虹按钮，可以一键清空自己的本地存档，这样就不会被其他人不小心看到自己的聊天记录了！

④在使用的时候发现最下方的输入框容易遮挡文字影响截图与使用，所以便加入了隐藏按钮，点击便隐藏对话框，方便查看与截图~

⑤加入了可自定的头像哦！按照下方步骤便可以更换自己与智能AI的头像哦，聊天更有代入感~

⑥当遇见服务器无法回复的情况时，会自主提出异常，不用重启网页便可以直接在发送一次哦！

原版参考：(53条消息) 网页版chatGPT,国内直接打开就用的chatgpt_小袁同学.的博客-CSDN博客

2.修改头像の步骤

修改自己头像的位置，修改src地址就可以哦，可以使用网络上和本地的图。（网络上的图片就自己用用哦，有版权风险）

智能机器人头像修改同理哦

如果是本地图片粘帖上图片在电脑中的绝对路劲就可以哦！

但如果需要放网图的话要复制图像链接哦~

3.查看本地存档

以Edge浏览器为例：右键打开菜单点击检查，将会有如右侧的控制台弹出

找到应用程序，点进去

就可以在本地储存中看到你和AI的聊天记录啦！

4.全部html代码以及注意事项

使用的前提是需要有chatGPT的账号去获取apikey,然后把拿到的apikey放在下面代码中，

可以先创建txt文本将内容粘贴进去并且填写api后，将文件后缀名改为.html哦~

  清空localStorage    button {        display: block;        margin: 0 auto;    }    @keyframes rainbow {      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;    } */                                                                                                                                                                              {{x.msg}}                                                                        <!--  -->                                                                                                                                                                    {{x.msg}}                                                                                                                                                                                   {{sentext}}                         {{ navVisible " />

悄咪咪的说：

对您有帮助的话请关注我哦~关注后小作者会受到莫大的鼓励，回复您的问题也会更加积极哦！