位置: IT常识 - 正文

自己的智能AI聊天机器人,可自定义头像,免费html源码分享,粘贴即用!(自己的智能ai聊天怎么用)

编辑:rootadmin
自己的智能AI聊天机器人,可自定义头像,免费html源码分享,粘贴即用! 1.展示效果

推荐整理分享自己的智能AI聊天机器人,可自定义头像,免费html源码分享,粘贴即用!(自己的智能ai聊天怎么用),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:你的智能聊天是怎么使用呢,智能ai聊天软件,ai智能对话app,自己的智能ai聊天软件,ai智能语音聊天系统,自己的智能ai聊天在哪里,智能ai聊天,自己的智能ai聊天怎么用,内容如对您有帮助,希望把文章链接给更多的朋友!

效果预览图:

新增小功能:

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

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

②实时监控本地储存空间余量(5MB)

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

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

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

自己的智能AI聊天机器人,可自定义头像,免费html源码分享,粘贴即用!(自己的智能ai聊天怎么用)

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

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

2.修改头像の步骤

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

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

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

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

3.查看本地存档

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

找到应用程序,点进去

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

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

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

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

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script src="https://unpkg.com/axios/dist/axios.min.js"></script><!-- 用来显示本地存储还有多少空间 --><div id="storageInfo"></div><!-- 清空本地储存可以写在标签内的炫酷一点的按钮 --><button style="align-items: center;background: linear-gradient(45deg, #F44336, #FFEB3B, #4CAF50, #2196F3, #9C27B0);background-size: 400%;animation: rainbow 10s ease infinite;color: white;padding: 10px 20px;border: none;border-radius: 30px;box-shadow: 0px 4px 10px rgba(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: 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;} */</style><div id="app" style="display: flex;flex-flow: column;margin: 20 "><scroll-view scroll-with-animation scroll-y="true" style="width: 100%;"><!-- 用来获取消息体高度 --><view id="okk" scroll-with-animation><!-- 消息 --><view v-for="(x,i) in msgList" :key="i"><!-- 用户消息 头像可选加入--><view v-if="x.my" style="display: flex;flex-direction: column;align-items: flex-end;"><view style="width: 400rpx; display: flex; align-items: center;"><view style="border-radius: 35rpx;"><text style="word-break: break-all;">{{x.msg}}&nbsp;&nbsp;</text></view><image src="您的头像地址哦" style="width: 40px; height: 40px; border-radius: 20px;"></image><!-- <image src="https://img2.woyaogexing.com/2017/07/07/67ca73a32fe97f63!400x400_big.jpg" style="width: 40px; height: 40px; border-radius: 80rpx;"></image> --></view></view><!-- 机器人消息 --><view v-if="!x.my" style="display: flex;flex-direction: row;align-items: flex-start;"><view style="width: 500rpx;display: flex; align-items: center;"><image src="机器人的头像地址哦" style="width: 40px; height: 40px; border-radius: 20px;"></image><view style="border-radius: 35rpx;background-color: #f9f9f9;"><text style="word-break: break-all;">&nbsp;&nbsp;{{x.msg}}</text><!-- &nbsp;加两个空格,美观一些 --></view></view></view></view><view style="height: 130rpx;"></view></view></scroll-view><!-- 底部导航栏 --><view ref="toggleView" style="position: fixed;bottom:0px;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;"><view style="font-size: 55rpx;display: flex;flex-direction: row;justify-content: space-around;align-items: center;width: 75%;margin: 20;"><input v-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><!-- 点击按钮显示/隐藏导航栏 --><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></div><!-- 实时显示所剩余的本地储存内存大小 --><script>function updateStorageInfo() {const usedSpace = JSON.stringify(localStorage).length;const totalSpace = 5 * 1024 * 1024; // 5MBconst freeSpace = totalSpace - usedSpace;const usedPercentage = (usedSpace / totalSpace) * 100;const storageInfoDiv = 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>function confirmClearLocalStorage() {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: '换成你的api哦,使用上有疑问可以联系我企鹅756639910,记得备注来意哈',msgLoad: false,anData: {},sentext: '发送',animationData: {},showTow: false,msgList: [{my: false,msg: "你好我是openAI机器人,请问有什么问题可以帮助您?"}],msgContent: "",msg: "",//navVisible: true // 控制导航栏的显示/隐藏}},methods: {toggleNav() {//const toggleBtn = document.getElementById('toggleBtn');//const toggleView = document.getElementById('toggleView');const toggleView = 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 == "") {return 0;}this.sentext = '请求中'this.msgList.push({"msg": this.msg,"my": true})console.log(this.msg);this.msgContent += ('YOU:' + this.msg + "\n")// 添加聊天记录到localStorage中let chatHistory = 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);let text = 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中let chatHistory = 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);//弹出异常let text = "" //重置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>悄咪咪的说:

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

本文链接地址:https://www.jiuchutong.com/zhishi/297297.html 转载请保留说明!

上一篇:XGBoost模型调参:GridSearchCV方法网格搜索优化参数(模型调参是调节什么)

下一篇:JS实现把表格数据导出,并生成为excel下载到本地(js处理表格数据)

  • 小米手表color2可以下载微信吗(小米手表Color2可以和其他手机)

    小米手表color2可以下载微信吗(小米手表Color2可以和其他手机)

  • vivox50pro+是否有耳机孔呢(我vivox50pro)

    vivox50pro+是否有耳机孔呢(我vivox50pro)

  • 知道微信名可以加好友吗(知道微信名可以找到人吗)

    知道微信名可以加好友吗(知道微信名可以找到人吗)

  • 华为荣耀9x没有深色模式吗(华为荣耀9x没有地震预警怎么办)

    华为荣耀9x没有深色模式吗(华为荣耀9x没有地震预警怎么办)

  • wifi已连接dns未响应(无线连接dns未响应)

    wifi已连接dns未响应(无线连接dns未响应)

  • 云录制是什么(腾讯会议云录制是什么)

    云录制是什么(腾讯会议云录制是什么)

  • nat模式是什么意思(nat设置有什么用)

    nat模式是什么意思(nat设置有什么用)

  • 拼多多还差一人拼成是什么意思(拼多多还差一人,商家可以自己拍吗)

    拼多多还差一人拼成是什么意思(拼多多还差一人,商家可以自己拍吗)

  • 微信视频不清晰怎么调(苹果微信视频不清晰)

    微信视频不清晰怎么调(苹果微信视频不清晰)

  • 朋友圈说闪现是什么意思(朋友圈说闪现是啥意思啊)

    朋友圈说闪现是什么意思(朋友圈说闪现是啥意思啊)

  • 投诉卖家不撤销会怎样(不撤销投诉 卖家就不发货)

    投诉卖家不撤销会怎样(不撤销投诉 卖家就不发货)

  • 表示媒体的是什么(表示媒体有哪些类型)

    表示媒体的是什么(表示媒体有哪些类型)

  • 载入照片时出错怎么办(载入照片时出错还能恢复吗)

    载入照片时出错怎么办(载入照片时出错还能恢复吗)

  • 打开相册一片空白怎么回事(为什么相册点进去有图片打开是空白)

    打开相册一片空白怎么回事(为什么相册点进去有图片打开是空白)

  • 怎么把qq气泡变成白色的(怎么把qq气泡变成纯粉红色)

    怎么把qq气泡变成白色的(怎么把qq气泡变成纯粉红色)

  • ios12.4.3更新了什么(ios12.4.5更新了什么)

    ios12.4.3更新了什么(ios12.4.5更新了什么)

  • 微信受限制几天能恢复(微信受限制几天会解封)

    微信受限制几天能恢复(微信受限制几天会解封)

  • ipad5代是什么处理器(苹果ipad5代是什么型号)

    ipad5代是什么处理器(苹果ipad5代是什么型号)

  • cache属于内存储器吗(cache是不是内存的一部分)

    cache属于内存储器吗(cache是不是内存的一部分)

  • 激光投影机和普通投影机的区别(激光投影仪和普通)

    激光投影机和普通投影机的区别(激光投影仪和普通)

  • 文件名后缀叫什么(文件名后缀的含义)

    文件名后缀叫什么(文件名后缀的含义)

  • 电脑虾米音乐怎么下载歌词(电脑虾米音乐怎么下载到u盘)

    电脑虾米音乐怎么下载歌词(电脑虾米音乐怎么下载到u盘)

  • qq上原文件失效怎么办(qq文件失效可以恢复吗)

    qq上原文件失效怎么办(qq文件失效可以恢复吗)

  • 苹果xs电池多少毫安(苹果xs电池多少豪安)

    苹果xs电池多少毫安(苹果xs电池多少豪安)

  • 电信4g+是什么意思(电信4g+是什么频段)

    电信4g+是什么意思(电信4g+是什么频段)

  • 看对方抖音他知道吗(看对方的抖音)

    看对方抖音他知道吗(看对方的抖音)

  • 若依管理系统RuoYi-Vue(前后端分离版)项目启动教程(若依管理系统前端代码分析)

    若依管理系统RuoYi-Vue(前后端分离版)项目启动教程(若依管理系统前端代码分析)

  • 【Spring Boot】SpringBoot设计了哪些可拓展的机制?(spring boot s)

    【Spring Boot】SpringBoot设计了哪些可拓展的机制?(spring boot s)

  • 未达起征点的增值税要交企业所得税吗
  • 固定资产的折余价值计算公式
  • 服务费的增值税怎么算
  • 整形医院有收费标准么
  • 金蝶专业版仓库反审核怎么做
  • 个人经营所得税减免税优惠政策
  • 管理费用当月可以有余额吗
  • 个人公积金计入什么会计科目
  • 属于期间费用抵减项目
  • 发票领用簿怎么领发票
  • 往年预付账款错了,应如何调?
  • 提前预支费用怎么写
  • 应付账款少记违反什么认定
  • 营改增后纳税人可以使用的发票种类
  • 玻璃制品有哪些
  • 增值税发票是否含税
  • 个体工商户税务登记证需要什么资料
  • 仅提供发票
  • 税费五个点怎么算
  • 积分兑换内容
  • 所得税费用属于损失吗
  • 存货变卖残值取得的收益计入哪个科目
  • 委托进口代理协议
  • mac怎么打开hosts文件
  • 禁止局域网用户访问权限
  • 无形资产如何评估作价
  • 广告传媒公司的成本是什么
  • 应收账款坏账收回影响利润么
  • perl.exe是什么程序?
  • 暂估入库的处理方式有哪三种
  • 专用发票增量申请流程
  • 如何快速判断
  • 新购固定资产账务处理
  • 对账小技巧
  • 自费出版的书籍可以售卖吗
  • 损益类科目月末结转到哪个科目
  • redistemplate获取value
  • 会计准则长期待摊费用开始计提摊销的时间
  • 文件不小心删除了怎么恢复
  • Vue3通透教程【一】Vue3现状—必然趋势?
  • 公益组织可以开公司吗
  • 会计报表逾期未申报
  • 一般纳税人开普票税率是3%还是13%
  • jvm jmm
  • mysql的删除
  • 个税手续费返还计入哪个科目
  • 无法支付款项是否缴纳增值税
  • 单位收到已交个人社保
  • 通货紧缩的影响简答题
  • 收回已确认并转销的应收账款会导致坏账准备的金额增加
  • 净利润率的计算方法公式
  • 现金比率合适范围
  • 未开票收入如何申报
  • 公司车辆违章
  • 营业外支出贷方余额
  • 发票勾选认证成功了是不是就可以抵扣呀
  • 购买土地会计分录及摊销分录
  • 关闭terminal monitor
  • winxp 移动硬盘
  • fedora update-grub
  • 电脑怎么装双系统win10和linux
  • 支持iphone
  • 远程操作win10
  • linux批量清空文件内容
  • linux查看指定内容
  • 微信小程序上传文件的API是
  • 如何在eclipse
  • 如何使用灭火器
  • 飞行歌曲
  • linux与windows
  • Knockout visible绑定使用方法
  • linux内核结构详解
  • javascript中的getElementById
  • javascript超链接的onclick
  • mvp 框架
  • jquery中有几种方法可以来设置和获取样式
  • css怎么设置
  • 工会经费扣除标准2022
  • 一个人可以申请
  • 信用体系建设
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设