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

最近ChatGPT 实在是太火啦，但是由于是国外网站，导致很多小白不知道怎么使用。
今天带来一个html版的，可以给任何网站增加一个chatgpt机器人聊天窗口，只需插入html代码的，都是可以直接使用。
可自定义头像，粘贴即用！可以用在网站任何界面上只需要您的系统支持编辑文章html发布！
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
<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; // 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();
 
    // 监听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 } = Vue
    createApp({
        data() {
            return {
                navVisible: true,
                api: '本代码由我的站长站分享：www.wdzzz.com',
                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 = false
                    this.sentext = '发送'
                }).catch(error => {
                    alert(error);//弹出异常
                    let text = "" //重置text
                    this.msgList.push({
                        "msg": "服务异常，请重新发送..",
                        "my": false
                    })
                    this.msgContent += (text + "\n")
                    this.msgLoad = false
                    this.sentext = '发送'//再次点击发送
                });
 
            },
 
 
        }
    }).mount('#app')
    //这段代码的作用是将当前对话中的一条消息添加到聊天记录中，并将聊天记录存储在本地的localStorage中。
 
    // 首先，代码通过localStorage.getItem('chatHistory')获取了本地存储的聊天记录，如果没有聊天记录则初始化为空数组'[]'。接着，代码使用JSON.parse将获取到的聊天记录字符串解析为数组类型。此时，chatHistory变量中保存的就是之前存储在本地的聊天记录。
 
    // 然后，代码向chatHistory数组中添加了一条消息对象。该对象有两个属性，"msg"表示消息内容，"my"表示消息是否是自己发送的（即是否是用户自己发出的消息，true表示是，false表示否）。
 
    // 最后，代码使用localStorage.setItem将更新后的chatHistory数组再次存储到本地。这里需要使用JSON.stringify将数组转换为字符串格式，才能存储到localStorage中。
 
    // 这样一来，每次用户发送一条消息时，代码都会将该消息添加到聊天记录中，并将聊天记录保存到本地。下次用户再次访问页面时，就可以从localStorage中加载之前的聊天记录。
</script>