最近ChatGPT 實在是太火啦，但是由于是國外網(wǎng)站，導致很多小白不知道怎么使用。
今天帶來一個html版的，可以給任何網(wǎng)站增加一個chatgpt機器人聊天窗口，只需插入html代碼的，都是可以直接使用。
可自定義頭像，粘貼即用！可以用在網(wǎng)站任何界面上 只需要您的系統(tǒng)支持編輯文章html發(fā)布！
<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>
<!-- 清空本地儲存可以寫在標簽內(nèi)的炫酷一點的按鈕 -->
<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}} </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;"> {{x.msg}}</text>
<!-- 加兩個空格，美觀一些 -->
</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>
<!-- 實時顯示所剩余的本地儲存內(nèi)存大小 -->
<script>
function updateStorageInfo() {
const usedSpace = JSON.stringify(localStorage).length;
const totalSpace = 5 * 1024 * 1024; // 5MB
const 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();
// 監(jiān)聽localStorage的變化，當有新的數(shù)據(jù)添加到localStorage中時更新使用情況
window.addEventListener("storage", function() {
updateStorageInfo();
});
// 在以上代碼中，updateStorageInfo()函數(shù)會根據(jù)localStorage的占用大小和總大小計算出剩余大小和使用百分比，然后將這些信息顯示在id為storageInfo的div元素中。
// 為了保證在頁面加載時就能顯示localStorage的使用情況，我們在代碼中首先調(diào)用了updateStorageInfo()函數(shù)。
// 此外，為了實現(xiàn)實時更新localStorage使用情況的功能，我們還添加了一個storage事件監(jiān)聽器。當頁面中有其他代碼向localStorage中寫入數(shù)據(jù)時，該事件監(jiān)聽器會自動被調(diào)用，從而更新localStorage的使用情況。
</script>
<!-- 清空本地儲存 -->
<script>
function confirmClearLocalStorage() {
if (confirm("您確定要清空localStorage嗎？此操作不可撤銷！")) {
localStorage.clear();
alert("localStorage已清空");
}
}
// 當點擊按鈕后，會調(diào)用clearLocalStorage函數(shù)，該函數(shù)會調(diào)用localStorage.clear()方法來清空所有的localStorage數(shù)據(jù)。最后彈出一個提示框，告訴用戶localStorage已經(jīng)被清空了。
//改進后↓
// 當用戶點擊按鈕后，會調(diào)用confirmClearLocalStorage函數(shù)，該函數(shù)會彈出一個確認框，詢問用戶是否確定要清空localStorage。如果用戶點擊確認，函數(shù)會調(diào)用localStorage.clear()方法來清空localStorage中的所有數(shù)據(jù)，并彈出提示框告訴用戶localStorage已經(jīng)被清空了。如果用戶點擊取消，則不會執(zhí)行清空localStorage的操作。
</script>
<script>
const { createApp } = Vue
createApp({
data() {
return {
navVisible: true,
api: '本代碼由我的站長站分享：www.wdzzz.com',
msgLoad: false,
anData: {},
sentext: '發(fā)送',
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 = false
this.sentext = '發(fā)送'
}).catch(error => {
alert(error);//彈出異常
let text = "" //重置text
this.msgList.push({
"msg": "服務異常，請重新發(fā)送..",
"my": false
})
this.msgContent += (text + "\n")
this.msgLoad = false
this.sentext = '發(fā)送'//再次點擊發(fā)送
});
},
}
}).mount('#app')
//這段代碼的作用是將當前對話中的一條消息添加到聊天記錄中，并將聊天記錄存儲在本地的localStorage中。
// 首先，代碼通過localStorage.getItem('chatHistory')獲取了本地存儲的聊天記錄，如果沒有聊天記錄則初始化為空數(shù)組'[]'。接著，代碼使用JSON.parse將獲取到的聊天記錄字符串解析為數(shù)組類型。此時，chatHistory變量中保存的就是之前存儲在本地的聊天記錄。
// 然后，代碼向chatHistory數(shù)組中添加了一條消息對象。該對象有兩個屬性，"msg"表示消息內(nèi)容，"my"表示消息是否是自己發(fā)送的（即是否是用戶自己發(fā)出的消息，true表示是，false表示否）。
// 最后，代碼使用localStorage.setItem將更新后的chatHistory數(shù)組再次存儲到本地。這里需要使用JSON.stringify將數(shù)組轉(zhuǎn)換為字符串格式，才能存儲到localStorage中。
// 這樣一來，每次用戶發(fā)送一條消息時，代碼都會將該消息添加到聊天記錄中，并將聊天記錄保存到本地。下次用戶再次訪問頁面時，就可以從localStorage中加載之前的聊天記錄。
</script>
