add tts

templates/browser-detect.html

@@ -58,42 +58,47 @@
         </button>
         <div style="position:relative" id="predicted_result"></div>
         <div style="position:relative" id="text"></div>
+        <button id="text-to-speech" onclick="speak(document.getElementById('text').innerText)">
+            <span>🔊</span>
+        </button>
         <center>
-
-
-            <script type="module">
-                var synthesis = window.speechSynthesis;
-
-                if ('speechSynthesis' in window) {
+<script>
                     var synthesis = window.speechSynthesis;
-                } else {
-                    console.log('Text-to-speech not supported.');
-                }
 
-                if ('speechSynthesis' in window) {
-                    var synthesis = window.speechSynthesis;
+if ('speechSynthesis' in window) {
+    var synthesis = window.speechSynthesis;
+} else {
+    console.log('Text-to-speech not supported.');
+}
+
+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
+    synthesis.speak(utterance);
+} else {
+    console.log('Text-to-speech not supported.');
+}
+}
+</script>
 
-                    // Regex to match all English language tags e.g en, en-US, en-GB
-                    var langRegex = /^en(-[a-z]{2})?$/i;
-
-                    // Get the available voices and filter the list to only have English speakers
-                    var voices = synthesis
-                        .getVoices()
-                        .filter((voice) => langRegex.test(voice.lang));
-
-                    // Log the properties of the voices in the list
-                    voices.forEach(function (voice) {
-                        console.log({
-                            name: voice.name,
-                            lang: voice.lang,
-                            uri: voice.voiceURI,
-                            local: voice.localService,
-                            default: voice.default,
-                        });
-                    });
-                } else {
-                    console.log('Text-to-speech not supported.');
-                }
+            <script type="module">
 
 
                 import { HandLandmarker, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0";
@@ -193,7 +198,7 @@
                             //detectSign()
                         } else {
                             console.log("RIGHT")
-                            var current_result = " "
+                            var current_result = "_"
                             var previous_result = document.getElementById("predicted_result").innerText
                             document.getElementById("predicted_result").innerText = current_result
                             var current_time = Math.round(Date.now())