fix speech lag

templates/browser-detect.html

@@ -59,7 +59,16 @@
                 var synthesis = window.speechSynthesis;
 
                 if ('speechSynthesis' in window) {
+                    
                     var synthesis = window.speechSynthesis;
+
+                    // Get the first `en` language voice in the list
+                    var voice = synthesis.getVoices().filter(function (voice) {
+                        return voice.lang === 'en';
+                    })[0];
+
+                    // Create an utterance object
+
                 } else {
                     console.log('Text-to-speech not supported.');
                 }
@@ -67,23 +76,15 @@
                 function speak(text) {
 
                     if ('speechSynthesis' in window) {
-                        var synthesis = window.speechSynthesis;
-
-                        // Get the first `en` language voice in the list
-                        var voice = synthesis.getVoices().filter(function (voice) {
-                            return voice.lang === 'en';
-                        })[0];
-
-                        // Create an utterance object
-                        var utterance = new SpeechSynthesisUtterance(text);
-
-                        // Set utterance properties
-                        utterance.voice = voice;
-                        utterance.pitch = 0.6;
-                        utterance.rate = 0.8;
-                        utterance.volume = 0.8;
 
                         // Speak the utterance
+                    var utterance = new SpeechSynthesisUtterance(text);
+
+                    // Set utterance properties
+                    utterance.voice = voice;
+                    utterance.pitch = 0.6;
+                    utterance.rate = 0.8;
+                    utterance.volume = 0.8;
                         synthesis.speak(utterance);
                     } else {
                         console.log('Text-to-speech not supported.');
@@ -131,7 +132,7 @@
                 var objectDetector = tflite.loadTFLiteModel(MODEL_PATH);
 
                 /********************************************************************
-                // Demo 2: Continuously grab image from webcam stream and detect it.
+                // Continuously grab images
                 ********************************************************************/
                 var global_res = 0;
                 const video = document.getElementById("webcam");
@@ -205,7 +206,7 @@
                         return
                     }
                     canvasElement.width = window.innerWidth;
-                    // Now let's start detecting the stream.
+                    // Start detecting the stream.
                     if (runningMode === "IMAGE") {
                         runningMode = "VIDEO";
                         await handLandmarker.setOptions({ runningMode: "VIDEO" });
@@ -280,7 +281,7 @@
                     }
 
                     canvasCtx.restore();
-                    // Call this function again to keep predicting when the browser is ready.
+                    // Kepp predicting
                     if (webcamRunning === true) {
                         window.requestAnimationFrame(predictWebcam);
                     }