<html>
<head>
<title>Teachable Machine + Arduino</title>
</head>
<body>
<h2>Teachable Machine Audio Model</h2>
<button onclick="connectToArduino()">Connect to Arduino</button>
<button onclick="init()">Start Listening</button>
<div id="label-container"></div>
<!-- TensorFlow.js -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.3.1/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/speech-commands@0.4.0/dist/speech-commands.min.js"></script>
<script>
const URL = "https://teachablemachine.withgoogle.com/models/YXOHdOpw3/";
let port, writer;
// Connect to Arduino
async function connectToArduino() {
try {
port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
const encoder = new TextEncoderStream();
encoder.readable.pipeTo(port.writable);
writer = encoder.writable.getWriter();
alert("✅ Connected to Arduino!");
} catch (err) {
console.error("❌ Arduino connection error:", err);
}
}
async function sendToArduino(message) {
if (writer) {
await writer.write(message + "\n");
}
}
async function createModel() {
const checkpointURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
const recognizer = speechCommands.create("BROWSER_FFT", undefined, checkpointURL, metadataURL);
await recognizer.ensureModelLoaded();
return recognizer;
}
async function init() {
const recognizer = await createModel();
const classLabels = recognizer.wordLabels();
const labelContainer = document.getElementById("label-container");
labelContainer.innerHTML = "";
for (let i = 0; i < classLabels.length; i++) {
const div = document.createElement("div");
labelContainer.appendChild(div);
}
recognizer.listen(result => {
const scores = result.scores;
const helloScore = scores[0]; // Adjust these indexes if needed
const noiseScore = scores[1];
labelContainer.childNodes[0].innerHTML = "Hello: " + helloScore.toFixed(2);
labelContainer.childNodes[1].innerHTML = "Noise: " + noiseScore.toFixed(2);
if (helloScore > 0.75) {
sendToArduino("HELLO");
} else if (noiseScore > 0.75) {
sendToArduino("NOISE");
}
}, {
includeSpectrogram: true,
probabilityThreshold: 0.75,
invokeCallbackOnNoiseAndUnknown: true,
overlapFactor: 0.5
});
}
</script>
</body>
</html>
