add text-area, stability indicator

templates/browser-detect.html

@@ -6,33 +6,13 @@
 
 
 <title>Sign Language Interpreter</title>
-<style>
-    * {
-        box-sizing: border-box;
-    }
-
-    body {
-        font-family: roboto;
-        color: #3d3d3d;
-        --mdc-theme-primary: #007f8b;
-        --mdc-theme-on-primary: #f1f3f4;
-        margin-left: 0px;
-    }
-
-    .container {
-        position: relative;
-    }
-
-    canvas {
-        background-color: lightgray;
-        /* Just for visibility */
-    }
-</style>
+
 
 <script>
     window.console = window.console || function (t) { };
 </script>
 
+<link rel="stylesheet" type="text/css" href="static/browser_detect.css" />
 
 
 </head>
@@ -48,55 +28,67 @@
 
     <div class="container">
         <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
-        <canvas class="output_canvas" id="output_canvas" style="display:block; position:relative;" width="100%"
-            height="300%"></canvas>
+        <canvas class="output_canvas" id="output_canvas" width="100%" height="300%"></canvas>
     </div>
     <center>
         <img id="output_image" style="display:none"></img>
         <button id="webcamButton">
             <span>ENABLE WEBCAM</span>
         </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>
+        <div class="wrapper_result">
+            <div id="predicted_result">></div>
+        </div>
+        <div class="wrapper_text">
+            <textarea id="text" onkeyup="set_output_array(this.value)"></textarea>
+            <button id="text-to-speech" onclick="speak(document.getElementById('text').value)">
+                <span>🔊</span>
+            </button>
+        </div>
         <center>
-<script>
+            <script>
+                var synthesis = window.speechSynthesis;
+
+                if ('speechSynthesis' in window) {
                     var synthesis = window.speechSynthesis;
+                } else {
+                    console.log('Text-to-speech not supported.');
+                }
 
-if ('speechSynthesis' in window) {
-    var synthesis = window.speechSynthesis;
-} else {
-    console.log('Text-to-speech not supported.');
-}
+                function speak(text) {
 
-function speak(text){
+                    if ('speechSynthesis' in window) {
+                        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];
 
-    // 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);
 
-    // 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;
 
-    // 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.');
+                    }
+                }
+                var word_list = []
 
-    // Speak the utterance
-    synthesis.speak(utterance);
-} else {
-    console.log('Text-to-speech not supported.');
-}
+
+function set_output_array(text) {
+    console.log(text)
+    word_list = text.split("");
+    console.log(word_list)
 }
-</script>
+
+            </script>
 
             <script type="module">
 
@@ -108,7 +100,6 @@ if ('speechSynthesis' in window) {
                 let webcamRunning = false;
                 var time_since_letter = 0
                 var last_letter_time = 0
-                var word_list = []
                 // Before we can use HandLandmarker class we must wait for it to finish
                 // loading. Machine Learning models can be large and take a moment to
                 // get everything needed to run.
@@ -192,6 +183,8 @@ if ('speechSynthesis' in window) {
                     canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
 
                     if (results.landmarks && results.handednesses[0]) {
+                        var current_time = Math.round(Date.now())
+                        document.getElementById("predicted_result").style.width = String((current_time - last_letter_time) / 10) + "%"
                         if (results.handednesses[0][0].categoryName == "Left") {
                             annotateImage()
                             console.log("LEFT")
@@ -201,14 +194,14 @@ if ('speechSynthesis' in window) {
                             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())
+
 
                             if (previous_result == current_result) {
                                 if (current_time - last_letter_time > 1000) {
                                     last_letter_time = current_time
                                     word_list.push(current_result)
                                     console.log(word_list)
-                                    document.getElementById("text").innerText = word_list.join('')
+                                    document.getElementById("text").value = word_list.join('')
                                 }
                             }
                             else {
@@ -225,17 +218,21 @@ if ('speechSynthesis' in window) {
                             var current_time = Math.round(Date.now())
                             console.log(current_time - last_letter_time)
                             if (previous_result == current_result) {
-                                if (current_time - last_letter_time > 250) {
+                                if (current_time - last_letter_time > 400) {
                                     last_letter_time = current_time
                                     word_list.pop()
                                     console.log(word_list)
-                                    document.getElementById("text").innerText = word_list.join('')
+                                    document.getElementById("text").value = word_list.join('')
                                 }
                             }
                             else {
                                 last_letter_time = current_time
                             }
-                        } else { last_letter_time = Math.round(Date.now()) }
+                        } else {
+                            last_letter_time = Math.round(Date.now())
+
+                            document.getElementById("predicted_result").style.width = String(0) + "%"
+                        }
                     }
 
                     canvasCtx.restore();
@@ -427,7 +424,7 @@ if ('speechSynthesis' in window) {
                                 last_letter_time = current_time
                                 word_list.push(current_result)
                                 console.log(word_list)
-                                document.getElementById("text").innerText = word_list.join('')
+                                document.getElementById("text").value = word_list.join('')
                             }
                         }
                         else {