#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include <WiFiClientSecure.h>
#include <ArduinoJson.h>
#include <LiquidCrystal_I2C.h>
#include <Wire.h>
#define LCD_I2C_ADDR 0x27
#define LCD_COLS 16
#define LCD_ROWS 2
#define SDA_PIN 4 // D2 on NodeMCU
#define SCL_PIN 5 // D1 on NodeMCU
struct Config {
const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";
const char* openai_api_key = "YOUR_OPENAI_API_KEY";
const char* openai_host = "api.openai.com";
const int openai_port = 443;
};
Config config;
ESP8266WebServer server(80);
LiquidCrystal_I2C lcd(LCD_I2C_ADDR, LCD_COLS, LCD_ROWS);
WiFiClientSecure client;
String lastSpeechText = "";
String lastAiResponse = "";
bool processing = false;
const char* htmlPage = R"rawliteral(
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ESP8266 AI Speech Assistant</title>
<style>
:root {
--primary: #3498db;
--primary-dark: #2980b9;
--secondary: #e74c3c;
--background: #f9f9f9;
--text: #333;
--light-text: #666;
--border: #ddd;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: var(--background);
color: var(--text);
line-height: 1.6;
padding: 20px;
max-width: 800px;
margin: 0 auto;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: var(--primary-dark);
}
.container {
background: white;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-bottom: 20px;
}
.btn-group {
display: flex;
justify-content: center;
margin-bottom: 20px;
}
button {
background-color: var(--primary);
color: white;
border: none;
padding: 12px 24px;
font-size: 16px;
border-radius: 50px;
cursor: pointer;
margin: 0 10px;
transition: background-color 0.3s, transform 0.2s;
display: flex;
align-items: center;
}
button:hover {
background-color: var(--primary-dark);
transform: translateY(-2px);
}
button:disabled {
background-color: var(--border);
cursor: not-allowed;
transform: none;
}
#stopBtn {
background-color: var(--secondary);
}
.card {
border: 1px solid var(--border);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
}
.card-header {
font-weight: bold;
margin-bottom: 10px;
color: var(--primary-dark);
border-bottom: 1px solid var(--border);
padding-bottom: 5px;
}
#speechResult, #aiResponse {
min-height: 80px;
white-space: pre-wrap;
}
.listening {
color: var(--secondary);
font-weight: bold;
}
.status {
text-align: center;
font-size: 14px;
margin-top: 20px;
color: var(--light-text);
}
.icon {
margin-right: 8px;
}
@media (max-width: 500px) {
.btn-group {
flex-direction: column;
}
button {
margin: 5px 0;
}
}
</style>
</head>
<body>
<h1>ESP8266 AI Speech Assistant</h1>
<div class="container">
<div class="btn-group">
<button id="startBtn">
<span class="icon">
</span> Start Listening </button>
<button id="stopBtn" disabled>
<span class="icon">
</span> Stop </button>
<button id="askAiBtn" disabled>
<span class="icon">
</span> Ask AI </button>
</div>
<div class="card">
<div class="card-header">Your Speech</div>
<div id="speechResult">Speak something to see your words here...</div>
</div>
<div class="card">
<div class="card-header">AI Response</div>
<div id="aiResponse">AI response will appear here...</div>
</div>
<div class="status" id="status"></div>
</div>
<script>
const startBtn = document.getElementById('startBtn');
const stopBtn = document.getElementById('stopBtn');
const askAiBtn = document.getElementById('askAiBtn');
const speechResult = document.getElementById('speechResult');
const aiResponse = document.getElementById('aiResponse');
const statusEl = document.getElementById('status');
let recognition;
let resultText = "";
function setStatus(message, isError = false) {
statusEl.textContent = message;
statusEl.style.color = isError ? 'red' : 'var(--light-text)';
}
function resetButtons(listening = false) {
startBtn.disabled = listening;
stopBtn.disabled = !listening;
askAiBtn.disabled = !resultText.trim();
}
function initSpeechRecognition() {
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = true;
recognition.interimResults = true;
recognition.lang = 'en-US'; // Set language - change as needed
recognition.onstart = function() {
resetButtons(true);
speechResult.classList.add('listening');
speechResult.textContent = "Listening...";
setStatus("Listening for speech");
};
recognition.onresult = function(event) {
resultText = "";
for (let i = event.resultIndex; i < event.results.length; i++) {
if (event.results[i].isFinal) {
resultText += event.results[i][0].transcript;
}
}
speechResult.textContent = resultText;
askAiBtn.disabled = !resultText.trim();
if (resultText.trim() !== "") {
// Automatically send to ESP if needed
// sendToESP(resultText);
}
};
recognition.onerror = function(event) {
console.error('Speech recognition error:', event.error);
setStatus(`Error: ${event.error}`, true);
speechResult.textContent = "Error: " + event.error;
resetButtons();
};
recognition.onend = function() {
speechResult.classList.remove('listening');
resetButtons();
setStatus("Speech recognition ended");
};
return true;
} else {
alert("Your browser doesn't support speech recognition. Please try Chrome or Edge.");
return false;
}
}
function sendToESP(text, endpoint = '/process') {
setStatus("Sending to ESP...");
return fetch(`${endpoint}?text=${encodeURIComponent(text)}`)
.then(response => {
if (!response.ok) {
throw new Error(`Server returned ${response.status}`);
}
return response.text();
})
.then(data => {
setStatus("ESP processed successfully");
return data;
})
.catch(error => {
console.error('Error sending to ESP:', error);
setStatus(`Error: ${error.message}`, true);
throw error;
});
}
function askAI() {
if (!resultText.trim()) return;
askAiBtn.disabled = true;
aiResponse.textContent = "Processing request...";
setStatus("Sending to AI...");
sendToESP(resultText, '/ask')
.then(data => {
if (data) {
// Poll for result
checkAIResponse();
}
})
.catch(() => {
aiResponse.textContent = "Failed to process your request.";
askAiBtn.disabled = false;
});
}
function checkAIResponse() {
fetch('/ai-response')
.then(response => response.json())
.then(data => {
if (data.processing) {
aiResponse.textContent = "AI is thinking...";
setTimeout(checkAIResponse, 2000);
} else if (data.response) {
aiResponse.textContent = data.response;
setStatus("Response received");
askAiBtn.disabled = false;
} else {
aiResponse.textContent = "No response from AI.";
setStatus("No response", true);
askAiBtn.disabled = false;
}
})
.catch(error => {
console.error('Error checking AI response:', error);
aiResponse.textContent = "Error checking response status.";
setStatus("Error checking response", true);
askAiBtn.disabled = false;
});
}
// Initialize
if (initSpeechRecognition()) {
startBtn.addEventListener('click', function() {
recognition.start();
});
stopBtn.addEventListener('click', function() {
recognition.stop();
});
askAiBtn.addEventListener('click', askAI);
}
// Check for ongoing processes on page load
fetch('/status')
.then(response => response.json())
.then(data => {
if (data.lastSpeech) {
resultText = data.lastSpeech;
speechResult.textContent = resultText;
askAiBtn.disabled = false;
}
if (data.lastResponse) {
aiResponse.textContent = data.lastResponse;
}
if (data.processing) {
askAiBtn.disabled = true;
setStatus("AI request in progress...");
checkAIResponse();
}
})
.catch(error => {
console.error('Error fetching status:', error);
});
</script>
</body>
</html>
)rawliteral";
void displayLcdMessage(String line1, String line2 = "") {
lcd.clear();
lcd.setCursor(0, 0);
lcd.print(line1.substring(0, min(LCD_COLS, (int)line1.length())));
if (line2.length() > 0) {
lcd.setCursor(0, 1);
lcd.print(line2.substring(0, min(LCD_COLS, (int)line2.length())));
}
}
void setupWifi() {
WiFi.mode(WIFI_STA);
WiFi.begin(config.ssid, config.password);
displayLcdMessage("Connecting WiFi");
int attempts = 0;
while (WiFi.status() != WL_CONNECTED && attempts < 20) {
delay(500);
Serial.print(".");
attempts++;
}
if (WiFi.status() == WL_CONNECTED) {
Serial.println("\nWiFi Connected");
Serial.print("IP Address: ");
Serial.println(WiFi.localIP());
displayLcdMessage("WiFi Connected", WiFi.localIP().toString());
} else {
Serial.println("\nWiFi connection failed");
displayLcdMessage("WiFi Failed", "Check settings");
}
}
void setupServer() {
server.on("/", HTTP_GET, []() {
server.send(200, "text/html", htmlPage);
});
server.on("/process", HTTP_GET, handleSpeechText);
server.on("/ask", HTTP_GET, handleAskAI);
server.on("/ai-response", HTTP_GET, handleAIResponse);
server.on("/status", HTTP_GET, handleStatus);
server.onNotFound([]() {
server.send(404, "text/plain", "Not Found");
});
server.begin();
Serial.println("Web Server started");
}
void setup() {
Serial.begin(115200);
Serial.println("\nESP8266 AI Speech Assistant");
Wire.begin(SDA_PIN, SCL_PIN);
lcd.begin(LCD_COLS, LCD_ROWS);
lcd.backlight();
displayLcdMessage("AI Speech", "Assistant v1.0");
delay(2000);
setupWifi();
client.setInsecure(); // Note: For production, consider using proper certificate verification
setupServer();
Serial.println("Ready! Open browser at http://" + WiFi.localIP().toString());
}
void loop() {
server.handleClient();
}
void handleSpeechText() {
if (server.hasArg("text")) {
String text = server.arg("text");
text.trim();
lastSpeechText = text;
Serial.println("[Speech] " + text);
displayLcdMessage("Speech:", text);
server.send(200, "text/plain", "Speech received");
} else {
server.send(400, "text/plain", "No text parameter");
}
}
String callOpenAI(String prompt) {
if (!client.connect(config.openai_host, config.openai_port)) {
Serial.println("Connection to OpenAI failed");
return "Connection failed";
}
// Create JSON payload
DynamicJsonDocument requestDoc(1024);
requestDoc["model"] = "gpt-3.5-turbo";
JsonArray messages = requestDoc.createNestedArray("messages");
JsonObject systemMessage = messages.createNestedObject();
systemMessage["role"] = "system";
systemMessage["content"] = "You are a helpful assistant. Keep responses concise as they will be displayed on a small LCD screen.";
JsonObject userMessage = messages.createNestedObject();
userMessage["role"] = "user";
userMessage["content"] = prompt;
requestDoc["max_tokens"] = 150;
requestDoc["temperature"] = 0.7;
String jsonPayload;
serializeJson(requestDoc, jsonPayload);
// Prepare HTTP request
String request = "POST /v1/chat/completions HTTP/1.1\r\n";
request += "Host: " + String(config.openai_host) + "\r\n";
request += "Content-Type: application/json\r\n";
request += "Authorization: Bearer " + String(config.openai_api_key) + "\r\n";
request += "Content-Length: " + String(jsonPayload.length()) + "\r\n";
request += "Connection: close\r\n\r\n";
request += jsonPayload;
// Send request
client.print(request);
// Wait for response
long timeout = millis() + 10000;
while (client.available() == 0) {
if (millis() > timeout) {
Serial.println("OpenAI request timeout");
client.stop();
return "Request timeout";
}
delay(100);
}
// Read headers
String line;
while (client.available()) {
line = client.readStringUntil('\n');
if (line == "\r") {
break;
}
}
// Read body
String response = "";
while (client.available()) {
response += client.readString();
}
// Parse JSON response
DynamicJsonDocument responseDoc(2048);
DeserializationError error = deserializeJson(responseDoc, response);
if (error) {
Serial.print("JSON parsing failed: ");
Serial.println(error.c_str());
return "JSON parsing failed";
}
// Extract content
String content = "";
if (responseDoc.containsKey("choices") &&
responseDoc["choices"].size() > 0 &&
responseDoc["choices"][0].containsKey("message") &&
responseDoc["choices"][0]["message"].containsKey("content")) {
content = responseDoc["choices"][0]["message"]["content"].as<String>();
} else if (responseDoc.containsKey("error")) {
content = "API Error: " + responseDoc["error"]["message"].as<String>();
} else {
content = "Unknown response format";
}
return content;
}
void handleAskAI() {
if (!server.hasArg("text")) {
server.send(400, "text/plain", "No text parameter");
return;
}
String text = server.arg("text");
text.trim();
if (text.isEmpty()) {
server.send(400, "text/plain", "Empty text");
return;
}
lastSpeechText = text;
processing = true;
server.send(200, "text/plain", "Processing");
// Process OpenAI request in a non-blocking way
displayLcdMessage("Processing...", "Please wait");
// In a real implementation, you'd use AsyncTCP or similar
// Since ESP8266 doesn't multitask well, we'll just do it here
lastAiResponse = callOpenAI(text);
processing = false;
// Display result on LCD
displayLcdMessage("AI Response:", lastAiResponse);
}
void handleAIResponse() {
DynamicJsonDocument doc(512);
doc["processing"] = processing;
doc["response"] = lastAiResponse;
String jsonResponse;
serializeJson(doc, jsonResponse);
server.send(200, "application/json", jsonResponse);
}
void handleStatus() {
DynamicJsonDocument doc(512);
doc["processing"] = processing;
doc["lastSpeech"] = lastSpeechText;
doc["lastResponse"] = lastAiResponse;
String jsonResponse;
serializeJson(doc, jsonResponse);
server.send(200, "application/json", jsonResponse);
}
