From 07cf39ad4411455c124f2b2feb5c73c69147527f Mon Sep 17 00:00:00 2001 From: zca121 Date: Sat, 16 Sep 2023 18:39:41 -0400 Subject: [PATCH] On off button working --- index.html | 37 +++++++++++++++++++++++++++++-------- style.css | 4 ---- 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/index.html b/index.html index e0d75bc..d224695 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,8 @@

Gesture Genius: ASL AI Recognition

- + +
@@ -21,8 +22,30 @@

Gesture Genius: ASL AI Recognition

// the link to your model provided by Teachable Machine export panel const URL = "./model/"; + const sideLength = 200; + let isStop = true; + let isInitiated = false; let model, webcam, labelContainer, maxPredictions; + const stop = () => { + isStop = true; + document.getElementById('stop').style.display = 'none'; + document.getElementById('start').style.display = 'block'; + } + + async function start() { + isStop = false; + document.getElementById('start').style.display = 'none'; + document.getElementById('stop').style.display = 'block'; + if (!isInitiated) { + console.log(isInitiated) + await init(); + isInitiated = true; + } + + window.requestAnimationFrame(loop); + } + // Load the image model and setup the webcam async function init() { @@ -38,10 +61,9 @@

Gesture Genius: ASL AI Recognition

// Convenience function to setup a webcam const flip = true; // whether to flip the webcam - webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip + webcam = new tmImage.Webcam(sideLength, sideLength, flip); // width, height, flip await webcam.setup(); // request access to the webcam await webcam.play(); - window.requestAnimationFrame(loop); // append elements to the DOM document.getElementById("webcam-container").appendChild(webcam.canvas); @@ -54,8 +76,9 @@

Gesture Genius: ASL AI Recognition

async function loop() { webcam.update(); setTimeout(async () => { - await predict(); - }, 100, "Alice"); + if (!isStop) + await predict(); + }, 500); window.requestAnimationFrame(loop); } @@ -67,13 +90,11 @@

Gesture Genius: ASL AI Recognition

for (let i = 0; i < top5Predictions.length; i++) { const classPrediction = - top5Predictions[i].className + ": " + top5Predictions[i].probability.toFixed(2); + top5Predictions[i].className.toUpperCase() + ": " + top5Predictions[i].probability.toFixed(2); labelContainer.childNodes[i].innerHTML = classPrediction; } } - - \ No newline at end of file diff --git a/style.css b/style.css index ace2b8b..c7f5504 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,3 @@ canvas { border: 5px solid #8e3434; width: 35em; } - -label-container { - -} \ No newline at end of file