Wokwi - Online ESP32, STM32, Arduino Simulator

#include <WiFi.h>

const char* ssid = "yourSSID";
const char* password = "yourPASSWORD";

#define BUTTON_PIN 12
#define GREEN_LED 25
#define RED_LED 26
#define BLUE_LED 27
#define WHITE_LED 14

void setup() {
  Serial.begin(115200);
  
  pinMode(GREEN_LED, OUTPUT);
  pinMode(RED_LED, OUTPUT);
  pinMode(BLUE_LED, OUTPUT);
  pinMode(WHITE_LED, OUTPUT);
  pinMode(BUTTON_PIN, INPUT_PULLUP); // Use internal pull-up resistor
  
  digitalWrite(GREEN_LED, LOW);
  digitalWrite(RED_LED, LOW);
  digitalWrite(BLUE_LED, LOW);
  digitalWrite(WHITE_LED, LOW);
  
  connectToWiFi();
}

void loop() {
  if(digitalRead(BUTTON_PIN) == LOW) { // Button pressed
    Serial.println("Button pressed, starting dialog...");
    digitalWrite(WHITE_LED, HIGH); // Indicate ready to receive prompts
    delay(2000); // Simulate processing time
    // Placeholder for starting dialog with ChatGPT
    digitalWrite(WHITE_LED, LOW);
  }
  
  // Add other status checks or functionality here
}

void connectToWiFi() {
  Serial.println("Connecting to WiFi...");
  WiFi.begin(ssid, password);
  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
    digitalWrite(RED_LED, HIGH); // Indicate trying to connect (issue)
  }
  Serial.println("WiFi Connected.");
  digitalWrite(RED_LED, LOW);
  digitalWrite(GREEN_LED, HIGH); // Indicate WiFi is connected and system is up
}


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chat with ChatGPT</title>
<style>
    body { 
        font-family: Arial, sans-serif; 
        background-color: #e0f7fa; 
        color: #0277bd; 
        text-align: center; 
    }
    #chatbox { 
        width: 80%; 
        height: 300px; 
        overflow-y: scroll; 
        border: 2px solid #0288d1; 
        padding: 10px; 
        margin: 20px auto; 
        background-color: #ffffff; 
    }
    #textbox, #send { 
        width: 70%; 
        padding: 10px; 
        margin: 10px; 
        border: 2px solid #0288d1; 
        border-radius: 5px; 
        font-size: 16px; 
    }
    #send { 
        width: auto; 
        cursor: pointer; 
        background-color: #0288d1; 
        color: white; 
        font-weight: bold; 
    }
    #logo {
        margin: 20px;
    }
</style>
</head>
<body>
<img id="logo" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTY1LDE1Yy0yMCwwLTQ1LDE3LTQ1LDM1czI1LDQ1LDQ1LDQ1czQ1LTE3LDQ1LTM1Uzg1LDE1LDY1LDE1eiIgc3R5bGU9ImZpbGw6IzAyODhkMTsiLz48Y2lyY2xlIGN4PSI1NSIgY3k9IjM1IiByPSI1IiBzdHlsZT0iZmlsbDojZmZmOyIvPjwvc3ZnPg==" alt="Fish Logo">
<div id="chatbox"></div>
<input type="text" id="textbox" placeholder="Speak thy query">
<button id="send">Send</button>
<script>
    const chatbox = document.getElementById('chatbox');
    const textbox = document.getElementById('textbox');
    const send = document.getElementById('send');

    function appendMessage(user, text) {
        const messageElement = document.createElement('div');
        messageElement.style.textAlign = 'left';
        messageElement.innerHTML = `<strong>${user}:</strong> ${text}`;
        chatbox.appendChild(messageElement);
        chatbox.scrollTop = chatbox.scrollHeight; // Scroll to the bottom
    }

    // Example function to send message
    async function sendMessage(text) {
        appendMessage('You', text);
        // Here, integrate with ChatGPT API or any other service
        const response = 'This is where the response from ChatGPT API would appear.';
        appendMessage('ChatGPT', response);
    }

    send.addEventListener('click', function() {
        const text = textbox.value;
        sendMessage(text);
        textbox.value = ''; // Clear input box
    });

    // Speech to Text
    try {
        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
        const recognition = new SpeechRecognition();
        recognition.continuous = false;
        recognition.lang = 'en-US';
        recognition.interimResults = false;
        recognition.maxAlternatives = 1;

        textbox.onclick = () => recognition.start();

        recognition.onresult = function(event) {
            const speechResult = event.results[0][0].transcript;
            textbox.value = speechResult;
        };

        recognition.onspeechend = function() {
            recognition.stop();
        };

        recognition.onerror = function(event) {
            console.error('Speech Recognition Error: ', event.error);
        };
    } catch (e) {
        console.error('Speech Recognition not supported', e);
    }
</script>
</body>
</html>