大佬您好，我是新手，没有学过前端后端的东西，请问您的项目是如何使用的。 #1

sarakii · 2023-10-13T14:38:02Z

我在您的项目的基础上修改了我自己的API和wifi的ssid和密码，烧录进ESP32后，串口显示esp32连接上wifi后就没反应了。然后我试着把index.h改成index.html后，发现有个聊天界面，但是输入完问题后，点击send也是没有反应，求助 T_T

blueokanna · 2023-10-14T04:02:36Z

其实 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 软件
https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json // Arduino IDE 里面的 File> Preferences

sarakii · 2023-10-14T08:47:02Z

我按方法二做了，现在执行到这一步，串口发送消息没反应，在index.html里面点击send也没反应 T_T 不知道下一步怎么做

blueokanna · 2023-10-14T09:00:20Z

你看到你的串口打印出来，有一个 Intenet IP 的打印消息，你需要打开浏览器，在地址栏输入（根据你图片给我提供的）192.168.137.54:80

AsyncWebServer server(80);  //Web Page IP:80

这个是默认的端口，你可以改成别的，比如把 80 改成 8888这样，然后重烧录，可以在串口的输出窗口看到IP地址，比如你这个是 192.168.137.54:8888 这样

sarakii · 2023-10-14T09:29:55Z

原来是这样使用的，感谢大佬。但是我点击send后，串口正常显示我的提问，但是网页一直在转，得不到回复，这可能是什么原因造成的？

blueokanna · 2023-10-14T09:39:24Z

1.有可能是你的网络问题，串口显示的是你发送的消息，而网页需要加载这个情况
2。有可能是你的配置出了问题。我看你的 Arduino 的显示的 index.h 是正常的，方法二的用法是当 index.h 没有办法显示出来的时候才要修改的，所以方法二我是不推荐的，其中方法一是最简单的，只要修改你家中的网络，你的 ChatGLM API 以及你想要更新 NTP（可以选，但是我这里用的是阿里云的，国内不用修改）

sarakii · 2023-10-14T11:34:33Z

好的，谢谢哥^_^

sarakii · 2023-10-14T12:01:55Z

成功运行了，使用体验是：反应速度稍慢，排版看着有点别扭

感谢大佬的开源^_^

sarakii · 2023-10-14T12:09:02Z

大佬，我后续打算实现直接在ESP32的串口监视器上向AI提问和接收回答，可以在您的代码的基础上修改出来吗？

blueokanna · 2023-10-14T13:54:15Z

排版的话是根据类似于微信那样的，只是没有画泡泡，当然串口是完全可以的，我前期也是利用串口测试的。速度慢也要看网络，ESP32板子等原因，希望你用的愉快 😆

blueokanna closed this as completed Oct 15, 2023

blueokanna reopened this Oct 19, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

大佬您好，我是新手，没有学过前端后端的东西，请问您的项目是如何使用的。 #1

大佬您好，我是新手，没有学过前端后端的东西，请问您的项目是如何使用的。 #1

sarakii commented Oct 13, 2023

blueokanna commented Oct 14, 2023 •

edited

Loading

sarakii commented Oct 14, 2023

blueokanna commented Oct 14, 2023

sarakii commented Oct 14, 2023

blueokanna commented Oct 14, 2023

sarakii commented Oct 14, 2023

sarakii commented Oct 14, 2023

sarakii commented Oct 14, 2023

blueokanna commented Oct 14, 2023 •

edited

Loading

大佬您好，我是新手，没有学过前端后端的东西，请问您的项目是如何使用的。 #1

大佬您好，我是新手，没有学过前端后端的东西，请问您的项目是如何使用的。 #1

Comments

sarakii commented Oct 13, 2023

blueokanna commented Oct 14, 2023 • edited Loading

方法一：

方法二：

sarakii commented Oct 14, 2023

blueokanna commented Oct 14, 2023

sarakii commented Oct 14, 2023

blueokanna commented Oct 14, 2023

sarakii commented Oct 14, 2023

sarakii commented Oct 14, 2023

sarakii commented Oct 14, 2023

blueokanna commented Oct 14, 2023 • edited Loading

blueokanna commented Oct 14, 2023 •

edited

Loading

blueokanna commented Oct 14, 2023 •

edited

Loading