// SERVO ROTATING MULTIPLE TIME
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Teachable Machine + Arduino (Safe)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TensorFlow.js and Teachable Machine image library (browser-safe builds) -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
h2 { color: #333; }
button { padding: 10px 15px; margin: 5px; cursor: pointer; }
#webcam-container, #label-container { margin-top: 15px; }
.error { color: red; margin-top: 10px; }
.status { margin-top: 10px; color: green; }
</style>
</head>
<body>
<h2>Teachable Machine Image Model + Arduino Uno (Safe Version)</h2>
<button onclick="init()">Start Camera & Model</button>
<button onclick="connectToArduino()">Connect to Arduino</button>
<button onclick="sendManualCommand()">Send TEST Command</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<div id="status" class="status"></div>
<div id="error" class="error"></div>
<script>
const URL = "https://teachablemachine.withgoogle.com/models/gXFa-npbx/";
let model, webcam, labelContainer, maxPredictions;
let port, writer;
function setStatus(msg) {
document.getElementById("status").textContent = msg;
}
function setError(msg) {
document.getElementById("error").textContent = msg;
}
// Initialize Teachable Machine model and webcam
async function init() {
setError("");
setStatus("Loading model...");
if (typeof tmImage === "undefined") {
setError("ERROR: Teachable Machine library did not load.");
return;
}
try {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
const flip = true;
webcam = new tmImage.Webcam(200, 200, flip);
await webcam.setup();
await webcam.play();
window.requestAnimationFrame(loop);
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
labelContainer.innerHTML = "";
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement("div"));
}
setStatus("Model and webcam started.");
} catch (err) {
setError("Webcam or model failed: " + err.message);
console.error(err);
}
}
async function loop() {
if (webcam && webcam.canvas) {
webcam.update();
await predict();
}
window.requestAnimationFrame(loop);
}
async function predict() {
if (!model || !webcam || !webcam.canvas) return;
const prediction = await model.predict(webcam.canvas);
let detectedClass = "";
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
if (prediction[i].probability > 0.8) {
detectedClass = prediction[i].className;
}
}
if (detectedClass && writer) {
let cleanLabel = detectedClass.toLowerCase().trim().replace(/[^a-z0-9 ]/g, "");
console.log("Detected:", cleanLabel);
try {
await writer.write(new TextEncoder().encode(cleanLabel + "\n"));
} catch (err) {
setError("Failed to send to Arduino: " + err.message);
console.error(err);
}
}
}
async function connectToArduino() {
setError("");
setStatus("Requesting Arduino port...");
if (!("serial" in navigator)) {
setError("Web Serial API not supported in this browser.");
return;
}
try {
port = await navigator.serial.requestPort(); // user must pick port
await port.open({ baudRate: 9600 });
writer = port.writable.getWriter();
setStatus("Connected to Arduino successfully.");
} catch (err) {
if (err.name === "NotFoundError") {
setError("No port selected by user.");
} else {
setError("Could not connect to Arduino: " + err.message);
}
console.error(err);
}
}
async function sendManualCommand() {
if (!writer) {
setError("Arduino not connected.");
return;
}
try {
await writer.write(new TextEncoder().encode("test\n"));
setStatus("TEST command sent to Arduino");
console.log("TEST command sent to Arduino");
} catch (err) {
setError("Failed to send test command: " + err.message);
}
}
</script>
</body>
</html>
//ARDUINO CODE
#include <Servo.h>
Servo myServo;
int servoPin = 9;
String inputString = "";
String sanitize(String s) {
s.trim();
s.toLowerCase();
String clean = "";
for (int i = 0; i < s.length(); i++) {
char c = s.charAt(i);
if ((c >= 'a' && c <= 'z') || (c >= '0' && c <= '9') || c == ' ') {
clean += c;
}
}
return clean;
}
void setup() {
Serial.begin(9600);
myServo.attach(servoPin);
myServo.write(0); // initial position
Serial.println("Arduino ready");
}
void loop() {
while (Serial.available() > 0) {
char c = Serial.read();
if (c == '\n') {
inputString = sanitize(inputString);
Serial.print("Command received: ");
Serial.println(inputString);
if (inputString == "waste water") {
myServo.write(160); // CHANGED angle to 160°
Serial.println("Servo -> 160°");
}
else if (inputString == "motor stay off") {
myServo.write(0);
Serial.println("Servo -> 0°");
}
inputString = "";
} else {
inputString += c;
}
}
}
LADAKH TRAINED MODEL
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Teachable Machine + Arduino (Safe)</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- TensorFlow.js and Teachable Machine image library (browser-safe builds) -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/image@latest/dist/teachablemachine-image.min.js"></script>
<style>
body { font-family: Arial, sans-serif; padding: 20px; }
h2 { color: #333; }
button { padding: 10px 15px; margin: 5px; cursor: pointer; }
#webcam-container, #label-container { margin-top: 15px; }
.error { color: red; margin-top: 10px; }
.status { margin-top: 10px; color: green; }
</style>
</head>
<body>
<h2>Teachable Machine Image Model + Arduino Uno (Safe Version)</h2>
<button onclick="init()">Start Camera & Model</button>
<button onclick="connectToArduino()">Connect to Arduino</button>
<button onclick="sendManualCommand()">Send TEST Command</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<div id="status" class="status"></div>
<div id="error" class="error"></div>
<script>
const URL = "https://teachablemachine.withgoogle.com/models/tPVETubWb/";
let model, webcam, labelContainer, maxPredictions;
let port, writer;
function setStatus(msg) { document.getElementById("status").textContent = msg; }
function setError(msg) { document.getElementById("error").textContent = msg; }
// Initialize Teachable Machine model and webcam
async function init() {
setError("");
setStatus("Loading model...");
if (typeof tmImage === "undefined") {
setError("ERROR: Teachable Machine library did not load.");
return;
}
try {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
const flip = true;
webcam = new tmImage.Webcam(200, 200, flip);
await webcam.setup();
await webcam.play();
window.requestAnimationFrame(loop);
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
labelContainer.innerHTML = "";
for (let i = 0; i < maxPredictions; i++) {
labelContainer.appendChild(document.createElement("div"));
}
setStatus("Model and webcam started.");
} catch (err) {
setError("Webcam or model failed: " + err.message);
console.error(err);
}
}
async function loop() {
if (webcam && webcam.canvas) {
webcam.update();
await predict();
}
window.requestAnimationFrame(loop);
}
async function predict() {
if (!model || !webcam || !webcam.canvas) return;
const prediction = await model.predict(webcam.canvas);
let detectedClass = "";
for (let i = 0; i < maxPredictions; i++) {
const classPrediction = prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
if (prediction[i].probability > 0.8) {
detectedClass = prediction[i].className;
}
}
if (detectedClass && writer) {
let cleanLabel = detectedClass.toLowerCase().trim().replace(/[^a-z0-9 ]/g, "");
console.log("Detected:", cleanLabel);
try {
await writer.write(new TextEncoder().encode(cleanLabel + "\n"));
} catch (err) {
setError("Failed to send to Arduino: " + err.message);
console.error(err);
}
}
}
async function connectToArduino() {
setError("");
setStatus("Requesting Arduino port...");
if (!("serial" in navigator)) {
setError("Web Serial API not supported in this browser.");
return;
}
try {
port = await navigator.serial.requestPort();
await port.open({ baudRate: 9600 });
writer = port.writable.getWriter();
setStatus("Connected to Arduino successfully.");
} catch (err) {
if (err.name === "NotFoundError") {
setError("No port selected by user.");
} else {
setError("Could not connect to Arduino: " + err.message);
}
console.error(err);
}
}
async function sendManualCommand() {
if (!writer) {
setError("Arduino not connected.");
return;
}
try {
await writer.write(new TextEncoder().encode("test\n"));
setStatus("TEST command sent to Arduino");
console.log("TEST command sent to Arduino");
} catch (err) {
setError("Failed to send test command: " + err.message);
}
}
</script>
</body>
</html>
No comments:
Post a Comment