Open sarakii opened 10 months ago
其实 index.h 改成 index.html 的话打开网页会发现在左上角会出现那个 const char *html ...
的,其实他是可以放在 ChatGLM.ino
的文件里面,只是放在主程序里面太挤了。
你需要一个相同名字的文件夹,比如我的程序是ChatGLM.ino那么你需要创建一个文件名字叫做ChatGLM(大小写要一致),然后你在正确修改 CustomJWT.h
后,将 ChatGLM.ino
和 index.h
放在一个文件夹里面(然后我是使用 Arduino 打开这个文件夹,他就会出现了 index.h
的文件)。
如果实在不行的话可以将 index.h
的文件全部拷贝放入 ChatGLM.ino
中,把这个删掉:
#include "index.h"
把 index.h
的文件的内容(就把下面的代码这些)原封不动拷贝粘贴到 ChatGLM.ino
文件里面,可以直接替换掉上面删除的内容,然后再进行烧录
const char *html = R"(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>ESP32 Chat AI Charactor Bot</title>
<link
rel="icon"
type="image/x-icon"
href="https://cdn-icons-png.flaticon.com/512/724/724715.png?ga=GA1.1.1207828738.1694336906"
style="color: transparent"
/>
<style>
body {
background-image: url("https://images.pexels.com/photos/5865634/pexels-photo-5865634.jpeg");
background-size: cover;
background-repeat: no-repeat;
font-family: Arial, sans-serif;
color: #333;
margin: 0;
padding: 0;
}
.dark-mode {
border-radius: 25px;
color: #e3e3e3;
}
.dark-mode .chat-container {
width: 780px;
height: auto;
padding: 10px;
border-radius: 20px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.1);
}
.dark-mode h1 {
color: #6ec6ff;
}
p {
color: #ffffff;
margin-bottom: 20px;
}
h3 {
display: block;
font-size: 1.17em;
margin-top: 1em;
margin-bottom: 1em;
margin-left: 0;
margin-right: 0;
font-weight: bold;
color: skyblue;
}
.chat-popup {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.form-container {
width: auto;
background-color: rgba(175, 236, 255, 0.281);
padding: 10px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
align-items: center;
}
textarea::placeholder {
color: white;
}
textarea {
width: 100%;
height: 100vh;
padding: px;
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 10px;
font-size: 16px;
resize: vertical;
}
#input-box {
height: auto;
text-align: start;
background-color: transparent;
color: aliceblue;
padding: 8px;
margin: 0 10px 0 0;
font-size: 16px;
border: 2px solid #adadad;
border-radius: 13px;
}
.chat-box {
display: flex;
flex-direction: unset;
align-items: baseline;
justify-content: space-between;
}
#user_message_box {
max-height: 100px;
text-align: right;
}
#receive-box {
height: 250px;
text-align: start, center;
}
.btn {
background-color: #6ec6ff;
color: #131313;
font-size: 16px;
padding: 10px 20px;
border: none;
border-radius: 8px;
cursor: pointer;
width: 100%;
font-weight: bold;
}
#send-button {
width: 30%;
align-self: start;
}
.btn:hover {
background-color: #0050a5ec;
}
#waiting-circle {
height: auto;
border: 6px solid #f3f3f3;
border-top: 6px solid #3498db;
border-radius: 50%;
width: 50px;
height: 50px;
align-self: center;
margin: 0 auto;
animation: spin 8s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body class="dark-mode">
<div class="chat-popup" id="myForm">
<div class="chat-container">
<h1>ESP32 Q&A Artificial Intelligence Chat</h1>
<p>Have a light platform conversation by ChatGLM AI</p>
<div class="form-container">
<h3>Chat with ESP32 AI</h3>
<div
id="user_message_box"
class="chat-box-container"
style="overflow: auto"
></div>
<br />
<div id="waiting-circle"></div>
<div
id="receive-box"
class="chat-box-container"
style="overflow: auto"
></div>
<br />
<div class="chat-box">
<textarea
id="input-box"
tabindex="0"
data-id="root"
required
placeholder="Type message..."
></textarea>
<button id="send-button" class="btn" data-id="root">Send</button>
</div>
<br />
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
const inputBox = document.getElementById("input-box");
const userMessageElement = document.getElementById("user_message_box");
const receiveBox = document.getElementById("receive-box");
const sendButton = document.getElementById("send-button");
const waiting_circle = document.getElementById("waiting-circle");
let message;
let debounceTimer;
let intervalId;
waiting_circle.style.display = "none";
sendButton.addEventListener("click", async () => {
message = inputBox.value.trim();
if (message !== "") {
try {
const response = await fetch(
"/send?message=" + encodeURIComponent(message)
);
waiting_circle.style.display = "flex";
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
inputBox.value = "";
if (debounceTimer) {
clearTimeout(debounceTimer);
}
debounceTimer = setTimeout(pollForResponse, 9000);
} catch (error) {
console.error("Error:", error);
}
}
});
function pollForResponse() {
intervalId = setInterval(async () => {
try {
const response = await fetch("/receiveTextMessage");
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
if (data.data.choices && data.data.choices.length > 0) {
waiting_circle.style.display = "none";
const aiResponse = data.data.choices[0].content
.replace(/^\"\s([\s\S]+)\"$/, "$1")
.replaceAll("\\n", "\n")
.replaceAll('\\"', '"');
displayMessages(message, aiResponse);
clearInterval(intervalId);
} else {
waiting_circle.style.display = "flex";
console.error("No choices found in the response.");
}
} catch (error) {
console.error("Error:", error);
}
}, 3000);
}
function displayMessages(userMessage, aiResponse) {
userMessageElement.innerHTML = marked.parse(userMessage);
receiveBox.innerHTML = marked.parse(aiResponse);
}
</script>
</body>
</html>
)";
下载 Arduino 网址以及需要的 Arduino IDE 里面需要的 Additional Board Manager URLs:
- https://www.arduino.cc/en/software //Arduino 软件
我按方法二做了,现在执行到这一步,串口发送消息没反应,在index.html里面点击send也没反应 T_T 不知道下一步怎么做
你看到你的串口打印出来,有一个 Intenet IP 的打印消息,你需要打开浏览器,在地址栏输入(根据你图片给我提供的)192.168.137.54:80
AsyncWebServer server(80); //Web Page IP:80
这个是默认的端口,你可以改成别的,比如把 80 改成 8888这样,然后重烧录,可以在串口的输出窗口看到IP地址,比如你这个是 192.168.137.54:8888 这样
原来是这样使用的,感谢大佬。但是我点击send后,串口正常显示我的提问,但是网页一直在转,得不到回复,这可能是什么原因造成的?
1.有可能是你的网络问题,串口显示的是你发送的消息,而网页需要加载这个情况 2。有可能是你的配置出了问题。我看你的 Arduino 的显示的 index.h 是正常的,方法二的用法是当 index.h 没有办法显示出来的时候才要修改的,所以方法二我是不推荐的,其中方法一是最简单的,只要修改你家中的网络,你的 ChatGLM API 以及你想要更新 NTP(可以选,但是我这里用的是阿里云的,国内不用修改)
好的,谢谢哥^_^
成功运行了,使用体验是:反应速度稍慢,排版看着有点别扭
感谢大佬的开源^_^
大佬,我后续打算实现直接在ESP32的串口监视器上向AI提问和接收回答,可以在您的代码的基础上修改出来吗?
排版的话是根据类似于微信那样的,只是没有画泡泡,当然串口是完全可以的,我前期也是利用串口测试的。速度慢也要看网络,ESP32板子等原因,希望你用的愉快 😆
我在您的项目的基础上修改了我自己的API和wifi的ssid和密码,烧录进ESP32后,串口显示esp32连接上wifi后就没反应了。然后我试着把index.h改成index.html后,发现有个聊天界面,但是输入完问题后,点击send也是没有反应,求助 T_T