본문 바로가기

ESP32

ESP32S3 Super Mini 블루투스 ChatGPT 4

반응형

ESP32S3에서 WiFiClient와 HTTPClient를 사용하는 방법 배우기 - XIAO ESP32S3 및 ChatGPT 실용적 응용 프로그램

 

개요

 

ChatGPT는 인공지능 연구 실험실 OpenAI가 2022년 11월 30일에 출시한 새로운 챗봇 모델입니다. 인공지능 기술로 구동되는 자연어 처리 도구입니다.

 

인간의 언어를 배우고 이해하여 대화를 수행할 수 있으며, 채팅 맥락에 따라 상호작용하여 사람처럼 진정한 채팅과 소통을 할 수 있습니다. 심지어 이메일 작성, 영상 대본 작성, 카피라이터, 번역, 코딩 등의 작업도 수행할 수 있습니다. 

 

본 튜토리얼의 전체 포스팅 내용입니다.

 

ESP32S3 Super Mini 시작하기 1

ESP32S3 Super Mini WiFi 사용 2

ESP32S3 Super Mini 블루투스 사용법 3

ESP32S3 Super Mini 블루투스 ChatGPT 4

ESP32S3 Super Mini GPIO 핀 사용법 5 

 

아두이노, 라즈베리파이b5, ESP32, OpenCV에 관한 빠르게 시작하기 기술 문서는 다음 링크에서 다운받으세요.

캐어랩 기술 문서 다운로드

 

 

 

 

 

임베디드 시스템에서 ChatGPT는 간단한 프로그램을 작성하고 프로그램의 버그를 검사하고 수정하는 데 도움이 되는 좋은 도구가 될 수 있습니다.

 

흥미로운 점은 OpenAI가 공식적으로 GPT-3.5 모델을 호출하기 위한 인터페이스를 제공한다는 것입니다. 이를 통해 이러한 인터페이스를 호출하고 다양한 방법을 통해 이 뛰어난 모델을 자체 임베디드 시스템에 배포할 수 있습니다.

 

ESP32S3SuperMini는 Espressif ESP32-S3 듀얼 모드 WiFi/블루투스 칩을 기반으로 하는 미니 IoT 개발 보드입니다. 뛰어난 RF 성능을 제공하며 IEEE 802.11 b/g/n WiFi 및 Bluetooth 5(LE) 프로토콜을 지원합니다. 공식 ESP32 WiFi 클라이언트 및 WiFi 서버 서비스를 완벽하게 지원합니다. 물론 아두이노도 완벽하게 지원합니다.

 

따라서 이 튜토리얼에서는 ESP32S3 WiFiClient 및 HTTPClient 라이브러리를 배우고 사용하는 방법, 네트워크 연결 방법, 웹 페이지 게시 방법, 그리고 HTTP GET 및 POST의 기본 사항을 안내합니다. OpenAI ChatGPT를 호출하여 나만의 질의응답 웹사이트를 만드는 것이 목표입니다.

 

시작하기

 

이 튜토리얼에서는 ESP32S3 Super Mini를 사용하여 자체 ChatGPT Q&A 페이지를 구성해 보겠습니다. 이 페이지에서 질문을 입력할 수 있습니다. ESP32S3 Super Mini는 질문을 기록하고 OpenAI에서 제공하는 API 호출 메서드를 사용하여 HTTP 클라이언트를 통해 요청 명령을 전송하여 ChatGPT의 답변을 받아 직렬 포트에 출력합니다.

 

이 튜토리얼의 작업은 다음의 네 가지 주요 단계로 나눌 수 있습니다.

 

  • ESP32S3SuperMini를 구성하여 네트워크에 연결합니다. 이 단계에서는 ESP32S3SuperMini를 사용하여 기본적인 WiFi 구성 프로세스를 배우고 네트워크 구성, 네트워크 서비스 연결, IP 주소 획득과 같은 ESP32S3SuperMini의 기본 동작을 이해합니다.
  • 임베디드 웹 페이지 구축: 이 단계에서는 WiFi 클라이언트 라이브러리를 주로 다룹니다. 이 라이브러리의 GET 및 POST 함수를 사용하여 HTML로 Q&A 웹 페이지를 직접 작성하고 ESP32S3SuperMini에 배포할 수 있습니다.
  • 내장 웹 페이지를 통한 질문 제출: 이 단계에서는 HTTP 클라이언트의 POST 메서드를 사용하여 OpenAI API 표준에 따라 질문을 POST 전송하는 방법을 알아봅니다. 웹 페이지에서 질문을 수집하고 저장하는 과정에 중점을 둘 것입니다.
  • ChatGPT에서 답변 받기: 이 단계에서는 HTTP 클라이언트에서 POST 메서드를 사용하고 반환된 메시지에서 필요한 질문에 대한 답변을 추출하는 방법을 알아봅니다. 마지막 단계는 코드 구조를 정리하고 최종 통합을 수행하는 것입니다.

 

재료 사전 준비

 

다음을 준비해야 합니다.

 

  • 1 ESP32S3슈퍼미니
  • 1대의 컴퓨터
  • 1 USB Type-C 케이블
  • 1 ChatgptAPI (없으면 그룹에 가입하여 그룹 소유자에게 연락할 수 있습니다)

 

팁!

 

일부 USB 케이블은 전원만 공급하고 데이터 전송은 불가능합니다. USB 케이블이 없거나 USB 케이블의 데이터 전송 가능 여부를 모르는 경우, Type-C 데이터 케이블을 구매하세요.

 

1단계. USB Type-C 케이블을 통해 ESP32S3SuperMini를 컴퓨터에 연결합니다.

 

 

1단계. 운영 체제에 따라 최신 버전의 Arduino IDE를 다운로드하고 설치하세요.

 

 

다운로드가 느리다면 국내 아두이노 커뮤니티에서 ArduinoIDE 다운로드 주소를 받아 다운로드하시면 됩니다.

 

2단계. Arduino 애플리케이션 시작

 

3단계. Arduino IDE에 ESP32 보드 패키지 추가

 

파일 > 환경 설정으로 이동하여 "추가 Boards Manager URL"에 다음 URL을 입력하세요.

 

https://raw.githubusercontent.com/espressif/arduino-esp32/gh-pages/package_esp32_index.json

 

 

도구 > 보드 > 보드 관리자...로 이동하고 검색창에 "esp32"라는 키워드를 입력한 다음, 최신 버전의 esp32를 선택하여 설치합니다.

 

 

 

도구 > 보드 > ESP32 Arduino로 이동하여 "ESP32S3 Dev Module"을 선택하세요. 보드 목록이 다소 길어서 맨 아래로 스크롤해야 합니다.

 

 

 

도구 > 포트로 이동하여 연결된 ESP32S3SuperMini의 직렬 포트 이름을 선택하세요. 아마도 COM3 이상일 것입니다(COM1과 COM2는 일반적으로 하드웨어 직렬 포트용으로 예약되어 있습니다).

 

ESP32S3를 네트워크에 연결하도록 구성

 

ESP32 Super Mini WiFi 사용 튜토리얼에는 자세한 소개가 있습니다.

 

ESP32를 Wi-Fi 모드로 설정하면 다른 네트워크(예: 라우터)에 연결할 수 있습니다. 이 경우 라우터는 ESP32 보드에 고유한 IP 주소를 할당합니다.

 

ESP32 Wi-Fi 기능을 사용하려면 먼저 아래와 같이 코드에 WiFi.h 라이브러리를 포함해야 합니다.

 

#include <WiFi.h>

 

ESP32를 특정 Wi-Fi 네트워크에 연결하려면 해당 네트워크의 SSID와 비밀번호를 알아야 합니다. 또한, 해당 네트워크는 ESP32 Wi-Fi 범위 내에 있어야 합니다.

 

먼저 Wi-Fi 모드를 설정하세요. ESP32를 다른 네트워크(액세스 포인트/핫스팟)에 연결할 경우, 반드시 스테이션 모드로 설정해야 합니다.

 

WiFi.mode(WIFI_STA);

 

그런 다음 WiFi.begin()을 사용하여 네트워크에 연결합니다. 네트워크 SSID와 비밀번호를 매개변수로 전달해야 합니다.

 

Wi-Fi 네트워크에 연결하는 데 시간이 걸릴 수 있으므로, 일반적으로 WiFi.status()를 사용하여 연결이 설정되었는지 지속적으로 확인하는 while 루프를 추가합니다. 연결이 성공적으로 설정되면 WL_CONNECTED가 반환됩니다.

 

ESP32를 Wi-Fi 스테이션으로 설정하면 다른 네트워크(예: 라우터)에 연결할 수 있습니다. 이 경우 라우터는 ESP32 보드에 고유한 IP 주소를 할당합니다. 보드의 IP 주소를 얻으려면 네트워크 연결을 설정한 후 WiFi.localIP()를 호출해야 합니다.

 

void WiFiConnect(void){
    WiFi.begin(ssid, password);
    Serial.print("Connecting to ");
    Serial.println(ssid);

    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }

    Serial.println("");
    Serial.println("WiFi connected!");
    Serial.print("IP address: ");
    Serial.println(WiFi.localIP());
}

 

변수 password와 ssid에는 연결하려는 네트워크의 비밀번호와 WIFI가 저장됩니다.

 

// Replace with your network credentials
const char* ssid = "REPLACE_WITH_YOUR_SSID";
const char* password = "REPLACE_WITH_YOUR_PASSWORD";

 

아주 간단한 WiFi 연결 프로그램입니다. 프로그램을 ESP32S3SuperMini에 업로드한 후, 시리얼 포트 어시스턴트를 열고 통신 속도를 115200으로 설정하세요. 연결이 성공하면 IP 주소가 출력됩니다.

 

 

 

WiFi에서 ESP32S3의 응용 프로그램과 기능에 대해 더 자세히 알고 싶다면

 

Random Nerd Tutorials를 읽어보시기 바랍니다 .

 

임베디드 웹 페이지 구축

 

ESP32는 WiFi 라이브러리에 매우 유용한 WiFiClient 함수를 많이 통합하여 추가 라이브러리를 추가하지 않고도 내장된 웹 페이지를 디자인하고 개발할 수 있습니다.

 

XIAO ESP32S3에서 구축한 IoT 서버를 제어하는 ​​데 사용할 수 있도록 새로운 WiFiServer 객체를 생성합니다.

 

WiFiServer server(80);

WiFiClient client1;

 

위 단계에서는 ESP32S3SuperMini를 WiFi에 연결했습니다. WiFi 연결이 성공하면 시리얼 모니터에서 현재 ESP32S3SuperMini의 IP 주소를 확인할 수 있습니다. 이제 ESP32S3SuperMini가 웹 서버를 성공적으로 설정한 것입니다. ESP32S3SuperMini의 IP 주소를 사용하여 웹 서버에 접속할 수 있습니다.

 

ESP32S3SuperMini의 IP 주소가 192.168.7.152라고 가정해 보겠습니다. 그러면 브라우저에 이 IP 주소를 입력할 수 있습니다.

 

 

이 IP 주소를 입력하면 빈 페이지만 표시될 수 있습니다. 이는 아직 해당 페이지의 콘텐츠가 게시되지 않았기 때문입니다.

 

이제 레이아웃하려는 페이지 내용, 즉 HTML 코드를 저장하기 위한 배열을 C로 만들어 보겠습니다.

 

const char html_page[] PROGMEM = {
    "HTTP/1.1 200 OK\r\n"
    "Content-Type: text/html\r\n"
    "Connection: close\r\n"  // the connection will be closed after completion of the response
    //"Refresh: 1\r\n"         // refresh the page automatically every n sec
    "\r\n"
    "<!DOCTYPE HTML>\r\n"
    "<html>\r\n"
    "<head>\r\n"
      "<meta charset=\"UTF-8\">\r\n"
      "<title>Cloud Printer: ChatGPT</title>\r\n"
      "<link rel=\"icon\" href=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/chatgpt-logo.png\" type=\"image/x-icon\">\r\n"
    "</head>\r\n"
    "<body>\r\n"
    "<p style=\"text-align:center;\">\r\n"
    "<img alt=\"ChatGPT\" src=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/chatgpt-logo.png\" height=\"200\" width=\"200\">\r\n"
    "<h1 align=\"center\">Cloud Printer</h1>\r\n" 
    "<h1 align=\"center\">OpenAI ChatGPT</h1>\r\n" 
    "<div style=\"text-align:center;vertical-align:middle;\">"
    "<form action=\"/\" method=\"post\">"
    "<input type=\"text\" placeholder=\"Please enter your question\" size=\"35\" name=\"chatgpttext\" required=\"required\"/>\r\n"
    "<input type=\"submit\" value=\"Submit\" style=\"height:30px; width:80px;\"/>"
    "</form>"
    "</div>"
    "</p>\r\n"
    "</body>\r\n"
    "<html>\r\n"
};

 

이 코드는 아래 그림에 표시된 페이지 효과를 보여줍니다.

 

 

 

웹 페이지의 HTML 구문은 이 튜토리얼의 범위를 벗어납니다. HTML을 직접 배우거나 기존 코드 생성 도구를 사용할 수 있습니다. HTML 생성기를 사용하는 것을 권장합니다 . C 프로그램에서 "\"와 """는 특수 문자라는 점에 유의해야 합니다. 프로그램 내에서 특수 문자의 기능을 유지하려면 앞에 오른쪽 슬래시를 추가해야 합니다.

 

Client1은 웹 서버가 설정한 소켓 클라이언트를 나타냅니다. 다음 코드는 웹 서버의 처리 과정입니다.

 

client1 = server.available();
if (client1){
    Serial.println("New Client.");           // print a message out the serial port
    // an http request ends with a blank line
    boolean currentLineIsBlank = true;    
    while (client1.connected()){
        if (client1.available()){  // Check if the client is connected
            char c = client1.read();
            json_String += c;
            if (c == '\n' && currentLineIsBlank) {                                 
                dataStr = json_String.substring(0, 4);
                Serial.println(dataStr);
                if(dataStr == "GET "){
                    client1.print(html_page);  //Send the response body to the client
                }         
                else if(dataStr == "POST"){
                    json_String = "";
                    while(client1.available()){
                        json_String += (char)client1.read();
                    }
                    Serial.println(json_String); 
                    dataStart = json_String.indexOf("chatgpttext=") + strlen("chatgpttext=");
                    chatgpt_Q = json_String.substring(dataStart, json_String.length());                    
                    client1.print(html_page);        
                    // close the connection:
                    delay(10);
                    client1.stop();       
                }
                json_String = "";
                break;
            }
            if (c == '\n') {
                // you're starting a new line
                currentLineIsBlank = true;
            }
            else if (c != '\r') {
                // you've gotten a character on the current line
                currentLineIsBlank = false;
            }
        }
    }
}

 

위 예제 프로그램에서 IoT 서버를 시작하려면 server.begin()을 사용해야 합니다. 이 명령문은 setup 함수에 추가해야 합니다.

 

void setup()
{
    Serial.begin(115200);
 
    // Set WiFi to station mode and disconnect from an AP if it was previously connected
    WiFi.mode(WIFI_STA);
    WiFi.disconnect();
    while(!Serial);

    Serial.println("WiFi Setup done!");
    WiFiConnect();

    // Start the TCP server server
    server.begin();
}

 

위 프로그램을 실행하고 ESP32S3SuperMini의 IP 주소를 브라우저에 입력하면(호스트 컴퓨터도 ESP32S3SuperMini와 동일한 Wi-Fi에 연결되어 있다고 가정), WiFiClient GET 단계가 시작됩니다. 이 시점에서 클라이언트 측 print 메서드를 사용하여 페이지의 HTML 코드를 제출합니다.

 

if(dataStr == "GET "){
    client1.print(html_page);
}

 

 

우리는 페이지에 문제 입력을 위한 입력란을 설계했습니다. 사용자가 내용을 입력하고 제출 버튼을 클릭하면, 웹페이지는 버튼의 상태를 확인하고 입력된 문제를 문자열 변수 `weight`에 저장합니다.

 

json_String = "";
while(client1.available()){
    json_String += (char)client1.read();
}
Serial.println(json_String); 
dataStart = json_String.indexOf("chatgpttext=") + strlen("chatgpttext=");
chatgpt_Q = json_String.substring(dataStart, json_String.length());                    
client1.print(html_page);        
// close the connection:
delay(10);
client1.stop();

 

 

실행 효과는 다음과 같습니다.

 

 

Chatgpt에 질문을 제출하세요

 

이전 단계의 페이지에는 입력란이 있습니다. 여기에 사용자가 묻고 싶은 질문을 입력해야 합니다. OpenAI에서 제공하는 API를 통해 이 질문을 전송하기만 하면 됩니다.

 

1단계: OpenAI 계정을 등록하세요. (중국에서는 등록이 불가능하므로 Baidu에서 검색하세요.)

 

여기를 클릭하여 OpenAI 등록 주소를 입력하세요 . 이미 계정을 등록한 적이 있다면 이 단계는 건너뛸 수 있습니다.

 

 

2단계. OpenAI API를 받으세요.

 

OpenAI 웹사이트 에 로그인하고 오른쪽 상단의 계정 아바타를 클릭한 다음, API 키 보기를 선택하세요.

 

 

새 팝업 페이지에서 + 새 키 만들기를 선택한 다음 키를 복사하여 저장합니다.

 

 

동시에, 프로그램에서 문자열 변수를 생성하고 거기에 이 키를 복사할 수 있습니다.

 

char chatgpt_token[] = "sk**********Rj9DYWSDFNA";

 

3단계. OpenAI의 HTTP 요청을 기반으로 프로그램을 작성합니다.

 

OpenAI는 사용자가 자신의 API 키를 사용하여 ChatGPT를 호출할 수 있도록 매우 자세한 API 사용 튜토리얼을 제공합니다.

 

ChatGPT 문서에 따르면, 우리가 보내야 할 요청의 형식은 다음과 같습니다.

 

curl https://api.openai.com/v1/completions \
-H "Content-Type: application/json" \
-H "Authorization: Bearer YOUR_API_KEY" \
-d '{"model": "text-davinci-003", "prompt": "Say this is a test", "temperature": 0, "max_tokens": 7}'

 

 

HTTP(Hypertext Transfer Protocol)는 클라이언트와 서버 간의 요청-응답 프로토콜입니다. GET은 지정된 리소스에 데이터를 요청하는 데 사용되며, 일반적으로 API에서 값을 가져오는 데 사용됩니다. POST는 리소스를 생성하거나 업데이트하기 위해 서버로 데이터를 전송하는 데 사용됩니다. ESP32는 URL 인코딩, JSON 객체 또는 일반 텍스트의 세 가지 유형의 본문 요청을 사용하여 HTTP POST 요청을 수행할 수 있습니다. 이는 가장 일반적인 방법이며 대부분의 API 또는 웹 서비스와 통합되어야 합니다.

 

위 정보는 매우 중요하며 HTTP POST 프로그램 작성에 이론적 기반을 제공합니다. 먼저 HTTPClient 라이브러리를 임포트합니다.

 

#include <HTTPClient.h>

 

ESP32S3가 ChatGPT에 질문을 게시할 수 있도록 OpenAI 도메인도 입력해야 합니다. 그리고 OpenAI API 키도 잊지 마세요.

 

HTTPClient https;
const char* chatgpt_token = "YOUR_API_KEY";
char chatgpt_server[] = "https://api.openai.com/v1/completions";

 

JSON 객체를 사용하여 HTTP POST 요청을 해야 합니다.

 

if (https.begin(chatgpt_server)) {  // HTTPS
    https.addHeader("Content-Type", "application/json"); 
    String token_key = String("Bearer ") + chatgpt_token;
    https.addHeader("Authorization", token_key);
    String payload = String("{\"model\": \"text-davinci-003\", \"prompt\": \"") + chatgpt_Q + String("\", \"temperature\": 0, \"max_tokens\": 100}"); //Instead of TEXT as Payload, can be JSON as Paylaod
    httpCode = https.POST(payload);   // start connection and send HTTP header
    payload = "";
}
else {
    Serial.println("[HTTPS] Unable to connect");
    delay(1000);
}

 

프로그램에서 POST() 메서드를 통해 페이로드를 서버로 전송합니다. chatgpt_Q는 ChatGPT에 전송하려는 질문 내용이며, "질문 받기" 페이지에서 확인할 수 있습니다.

 

ESP32S3 HTTPClient의 더 많은 기능에 관심이 있다면 Arduino IDE를 사용한 ESP32 HTTP GET 및 HTTP POST를 읽어보시기 바랍니다 .

 

chatgpt에서 답변을 받으세요

 

다음은 전체 튜토리얼의 마지막 단계인 ChatGPT의 답변을 얻고 기록하는 방법입니다.

 

{
    "id": "cmpl-GERzeJQ4lvqPk8SkZu4XMIuR",
    "object": "text_completion",
    "created": 1586839808,
    "model": "text-davinci:003",
    "choices": [
        {
            "text": "\n\nThis is indeed a test",
            "index": 0,
            "logprobs": null,
            "finish_reason": "length"
        }
    ],
    "usage": {
        "prompt_tokens": 5,
        "completion_tokens": 7,
        "total_tokens": 12
    }
}

 

ChatGPT에서 반환된 메시지 콘텐츠의 구조를 이해하기 위해 OpenAI에서 제공하는 API 문서를 계속 읽고 있습니다. 이를 통해 필요한 콘텐츠를 파싱하는 프로그램을 작성할 수 있을 것입니다.

 

OpenAI에서 제공한 참조 문서를 보면 인터페이스에서 반환된 메시지의 질문에 대한 답변 위치는 {"choices": [{"text": "\n\nxxxxxxx",}]}라는 것을 알 수 있습니다.

 

이제 필요한 "답"이 \n\n으로 시작하고 ,로 끝나야 한다는 것을 알 수 있습니다. 그런 다음 프로그램에서 indexOf() 메서드를 사용하여 텍스트의 시작과 끝 위치를 가져오고, 반환된 답의 내용을 저장할 수 있습니다.

 

dataStart = payload.indexOf("\\n\\n") + strlen("\\n\\n");
dataEnd = payload.indexOf("\",\"", dataStart); 
chatgpt_A = payload.substring(dataStart, dataEnd);

 

요약하자면, switch 메서드를 사용하면 프로그램의 현재 상태에 따라 프로그램의 어느 단계를 실행해야 할지 결정할 수 있습니다.

 

typedef enum 
{
  do_webserver_index,
  send_chatgpt_request,
  get_chatgpt_list,
}STATE_;

STATE_ currentState;

switch(currentState){
    case do_webserver_index:
        ...
    case send_chatgpt_request:
        ...
    case get_chatgpt_list:
        ...
}

 

이제 전체 프로그램의 로직이 구성되었습니다. 아래 이미지를 클릭하여 전체 프로그램 코드를 확인하세요. 프로그램 업로드를 서두르지 마세요. 프로그램의 SSID, 비밀번호, chatgpt_token을 사용자 설정으로 변경해야 합니다.

 

샘플 코드

 

// Load Wi-Fi library
#include "WiFi.h"
#include <HTTPClient.h>

// Replace with your network credentials
const char* ssid     = "WIFI账号";
const char* password = "WIFI密码"; 
//chatgpt api
const char* chatgpt_token = "有的openAPI-Key";

char chatgpt_server[] = "https://api.openai.com/v1/completions";

// Set web server port number to 80
WiFiServer server(80);
WiFiClient client1;

HTTPClient https;

String chatgpt_Q;
String chatgpt_A;
String json_String;
uint16_t dataStart = 0;
uint16_t dataEnd = 0;
String dataStr;
int httpCode = 0;

typedef enum 
{
  do_webserver_index,
  send_chatgpt_request,
  get_chatgpt_list,
}STATE_;

STATE_ currentState;

void WiFiConnect(void){
    WiFi.begin(ssid, password);
    Serial.print("Connecting to ");
    Serial.println(ssid);
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    Serial.println("");
    Serial.println("WiFi connected!");
    Serial.print("IP address: ");
    Serial.println(WiFi.localIP());
    currentState = do_webserver_index;
}

const char html_page[] PROGMEM = {
    "HTTP/1.1 200 OK\r\n"
    "Content-Type: text/html\r\n"
    "Connection: close\r\n"  // the connection will be closed after completion of the response
    //"Refresh: 1\r\n"         // refresh the page automatically every n sec
    "\r\n"
    "<!DOCTYPE HTML>\r\n"
    "<html>\r\n"
    "<head>\r\n"
      "<meta charset=\"UTF-8\">\r\n"
      "<title>Cloud Printer: ChatGPT</title>\r\n"
      "<link rel=\"icon\" href=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/chatgpt-logo.png\" type=\"image/x-icon\">\r\n"
    "</head>\r\n"
    "<body>\r\n"
    "<p style=\"text-align:center;\">\r\n"
    "<img alt=\"ChatGPT\" src=\"https://files.seeedstudio.com/wiki/xiaoesp32c3-chatgpt/chatgpt-logo.png\" height=\"200\" width=\"200\">\r\n"
    "<h1 align=\"center\">Cloud Printer</h1>\r\n" 
    "<h1 align=\"center\">OpenAI ChatGPT</h1>\r\n" 
    "<div style=\"text-align:center;vertical-align:middle;\">"
    "<form action=\"/\" method=\"post\">"
    "<input type=\"text\" placeholder=\"Please enter your question\" size=\"35\" name=\"chatgpttext\" required=\"required\"/>\r\n"
    "<input type=\"submit\" value=\"Submit\" style=\"height:30px; width:80px;\"/>"
    "</form>"
    "</div>"
    "</p>\r\n"
    "</body>\r\n"
    "<html>\r\n"
};
 
void setup()
{
    Serial.begin(115200);
 
    // Set WiFi to station mode and disconnect from an AP if it was previously connected
    WiFi.mode(WIFI_STA);
    WiFi.disconnect();
    while(!Serial);

    Serial.println("WiFi Setup done!");
    
    WiFiConnect();
    // Start the TCP server server
    server.begin();
}
 
void loop()
{
  switch(currentState){
    case do_webserver_index:
      Serial.println("Web Production Task Launch");
      client1 = server.available();              // Check if the client is connected
      if (client1){
        Serial.println("New Client.");           // print a message out the serial port
        // an http request ends with a blank line
        boolean currentLineIsBlank = true;    
        while (client1.connected()){
          if (client1.available()){
            char c = client1.read();             // Read the rest of the content, used to clear the cache
            json_String += c;
            if (c == '\n' && currentLineIsBlank) {                                 
              dataStr = json_String.substring(0, 4);
              Serial.println(dataStr);
              if(dataStr == "GET "){
                client1.print(html_page);        //Send the response body to the client
              }         
              else if(dataStr == "POST"){
                json_String = "";
                while(client1.available()){
                  json_String += (char)client1.read();
                }
                Serial.println(json_String); 
                dataStart = json_String.indexOf("chatgpttext=") + strlen("chatgpttext="); // parse the request for the following content
                chatgpt_Q = json_String.substring(dataStart, json_String.length());                    
                client1.print(html_page);
                Serial.print("Your Question is: ");
                Serial.println(chatgpt_Q);
                // close the connection:
                delay(10);
                client1.stop();       
                currentState = send_chatgpt_request;
              }
              json_String = "";
              break;
            }
            if (c == '\n') {
              // you're starting a new line
              currentLineIsBlank = true;
            }
            else if (c != '\r') {
              // you've gotten a character on the current line
              currentLineIsBlank = false;
            }
          }
        }
      }
      delay(1000);
      break;
    case send_chatgpt_request:
      Serial.println("Ask ChatGPT a Question Task Launch");
      if (https.begin(chatgpt_server)) {  // HTTPS
        https.addHeader("Content-Type", "application/json"); 
        String token_key = String("Bearer ") + chatgpt_token;
        https.addHeader("Authorization", token_key);
        String payload = String("{\"model\": \"text-davinci-003\", \"prompt\": \"") + chatgpt_Q + String("\", \"temperature\": 0, \"max_tokens\": 100}"); //Instead of TEXT as Payload, can be JSON as Paylaod
        httpCode = https.POST(payload);   // start connection and send HTTP header
        payload = "";
        currentState = get_chatgpt_list;
      }
      else {
        Serial.println("[HTTPS] Unable to connect");
        delay(1000);
      }
      break;
    case get_chatgpt_list:
      Serial.println("Get ChatGPT Answers Task Launch");
      // httpCode will be negative on error      
      // file found at server
      if (httpCode == HTTP_CODE_OK || httpCode == HTTP_CODE_MOVED_PERMANENTLY) {
        String payload = https.getString();
//        Serial.println(payload);
        dataStart = payload.indexOf("\\n\\n") + strlen("\\n\\n");
        dataEnd = payload.indexOf("\",\"", dataStart); 
        chatgpt_A = payload.substring(dataStart, dataEnd);
        Serial.print("ChatGPT Answer is: ");
        Serial.println(chatgpt_A);
        Serial.println("Wait 10s before next round...");
        currentState = do_webserver_index;
      }
      else {
        Serial.printf("[HTTPS] GET... failed, error: %s\n", https.errorToString(httpCode).c_str());
        while(1);
      }
      https.end();
      delay(10000);
      break;
  }
}

 

 

이 코드는 코드 주소 에서 나옵니다.

 

 

 

 

 

 

반응형

캐어랩 고객 지원

취업, 창업의 막막함, 외주 관리, 제품 부재!

당신의 고민은 무엇입니까? 현실과 동떨어진 교육, 실패만 반복하는 외주 계약, 아이디어는 있지만 구현할 기술이 없는 막막함.

우리는 알고 있습니다. 문제의 원인은 '명확한 학습, 실전 경험과 신뢰할 수 있는 기술력의 부재'에서 시작됩니다.

이제 고민을 멈추고, 캐어랩을 만나세요!

코딩(펌웨어), 전자부품과 디지털 회로설계, PCB 설계 제작, 고객(시장/수출) 발굴과 마케팅 전략으로 당신을 지원합니다.

제품 설계의 고수는 성공이 만든 게 아니라 실패가 만듭니다. 아이디어를 양산 가능한 제품으로!

귀사의 제품을 만드세요. 교육과 개발 실적으로 신뢰할 수 있는 파트너를 확보하세요.

지난 30년 여정, 캐어랩이 얻은 모든 것을 함께 나누고 싶습니다.

카카오 채널 추가하기

카톡 채팅방에서 무엇이든 물어보세요

당신의 성공을 위해 캐어랩과 함께 하세요.

캐어랩 온라인 채널 바로가기

캐어랩