update to android

static/browser_detect.css

@@ -20,7 +20,7 @@ body {
   padding: 10px;
   background: #5d5d5d;
   border-radius: 12.5px;
-  min-width:min-content;
+  min-width: min-content;
   max-width: 100%;
   font-weight: bold;
   color: #DFDFDF;
@@ -376,3 +376,63 @@ margin-bottom: 40px;
   justify-content: space-evenly;
   align-items: center;
 }
+
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2196F3;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

templates/browser-detect.html

@@ -168,7 +168,7 @@
         <div class="about-card">
             <span>Version</span>
 
-            <span>1.2.3</span>
+            <span>1.2.5</span>
         </div>
         <div class="about-card">
             <span>Author</span>
@@ -254,6 +254,24 @@
                     <a>Listen 🔊</a>
                 </button>
             </div>
+            <div class="about-card">
+                <label for="duration">Input Duration <span id="durationValue"></span>(ms)</label>
+                <input type="range" id="duration" min="200" max="1500" step="1" value="300"
+                    oninput="document.getElementById('durationValue').innerText=this.value">
+            </div>
+            <div class="about-card">
+                <label for="repeat">Repeat Buffer <span id="repeatValue"></span>(ms)</label>
+                <input type="range" id="repeat" min="200" max="700" step="1" value="500"
+                    oninput="document.getElementById('repeatValue').innerText=this.value">
+            </div>
+            <div class="about-card" style="flex-direction:row; align-items: center;">
+                <label style="margin-right: 10px;" for="duration">Natural Input :</label>
+
+                <label class="switch">
+                    <input type="checkbox" id="natInp" unchecked>
+                    <span class="slider round"></span>
+                </label>
+            </div>
         </form>
     </section>
     <div class="bottom-nav">
@@ -639,7 +657,7 @@
     </script>
 
     <script type="module">
-        document.getElementById("info-").addEventListener("click", switchPage.bind(null, "info-"));
+       document.getElementById("info-").addEventListener("click", switchPage.bind(null, "info-"));
         document.getElementById("home-").addEventListener("click", switchPage.bind(null, "home-"));
         document.getElementById("settings-").addEventListener("click", switchPage.bind(null, "settings-"));
 
@@ -651,6 +669,16 @@
         let webcamRunning = false;
         var time_since_letter = 0
         var last_letter_time = 0
+        var maxPercentage = 1
+
+        function inputFrequency() {
+            return document.getElementById('duration').value
+        }
+        function repeatBuffer() {
+            return document.getElementById('repeat').value
+        }
+        document.getElementById('durationValue').innerText = inputFrequency()
+        document.getElementById('repeatValue').innerText = repeatBuffer()
         var is_first_run = 1
         const letter_list = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "#"]
         const phrase_list = [" Good", " Hello", " How're", " I'm", " Thanks", " You"]
@@ -662,7 +690,7 @@
             const vision = await FilesetResolver.forVisionTasks("https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm"); // This doesnt really matter as this is already imported somewhere else, and the code runs fine without the request
             handLandmarker = await HandLandmarker.createFromOptions(vision, {
                 baseOptions: {
-                    //modelAssetPath: `http://127.0.0.1:8125/assets/static/hand_landmarker.task`, // For Android
+                    // modelAssetPath: `http://127.0.0.1:8125/assets/static/hand_landmarker.task`, // For Android
                     modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker/float16/1/hand_landmarker.task`, // For Web
                     delegate: "GPU"
                 },
@@ -698,6 +726,7 @@
             }
         })
         var global_res = 0;
+        var global_cres = ''
         const video = document.getElementById("webcam");
         const canvasElement = document.getElementById("output_canvas");
         const canvasCtx = canvasElement.getContext("2d", { willReadFrequently: true });
@@ -832,7 +861,7 @@
             }
             canvasCtx.save();
             canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
-           
+
             if (is_first_run == 1) {
                 var elem_rect = document.getElementById("output_canvas").getBoundingClientRect()
                 console.log(elem_rect.height | 0);
@@ -843,13 +872,13 @@
 
             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) / 7) + "%"
+
                 if (results.handednesses[0][0].categoryName == "Left") {
-                    if(!Array.from(document.getElementById('modeSelector').classList).includes('right') ){
-                    annotateImage()
+                    if (!Array.from(document.getElementById('modeSelector').classList).includes('right')) {
+                        annotateImage()
                     }
                     canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
-                    annotateImage(Array.from(document.getElementById('modeSelector').classList).includes('right') )
+                    annotateImage(Array.from(document.getElementById('modeSelector').classList).includes('right'))
                     console.log("LEFT")
                     //detectSign()
                 } else {
@@ -861,7 +890,7 @@
 
 
                     if (previous_result == current_result) {
-                        if (current_time - last_letter_time > 700) {
+                        if (current_time - last_letter_time > getNaturalLength(" ")) {
                             last_letter_time = current_time
                             word_list.push(" ")
                             triggerPulse()
@@ -873,6 +902,7 @@
                         last_letter_time = current_time
                     }
                 }
+                document.getElementById("predicted_result").style.width = String((current_time - last_letter_time) / getNaturalLength(global_cres) * 100) + "%"
             }
             else {
                 canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
@@ -902,12 +932,12 @@
             }
 
             canvasCtx.restore();
-            // Kepp predicting
+            // Keep predicting
             if (webcamRunning === true) {
                 window.requestAnimationFrame(predictWebcam);
             }
         }
-        function annotateImage(firstA=true) {
+        function annotateImage(firstA = true) {
 
             //console.log(results.landmarks)
             if (results.landmarks[0]) {
@@ -955,20 +985,21 @@
                 if (crop_bottom > image_height) {
                     crop_bottom = image_height
                 }
-                if(firstA == true){
-                canvasCtx.beginPath();
-                canvasCtx.rect(crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top);
-                canvasCtx.stroke();
-                if(!Array.from(document.getElementById("modeSelector").classList).includes('right')){
-                canvasCtx.fillStyle="#ffffff"
-                canvasCtx.fill()
+                if (firstA == true) {
+                    canvasCtx.beginPath();
+                    canvasCtx.rect(crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top);
+                    canvasCtx.stroke();
+                    if (!Array.from(document.getElementById("modeSelector").classList).includes('right')) {
+                        canvasCtx.fillStyle = "#ffffff"
+                        canvasCtx.fill()
+                    }
+
+                } else {
+                    canvasCtx.beginPath();
+                    canvasCtx.rect(crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top);
+                    canvasCtx.stroke();
                 }
-            }else{
-                canvasCtx.beginPath();
-                canvasCtx.rect(crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top);
-                canvasCtx.stroke(); 
-            }
-                
+
 
 
             }
@@ -986,7 +1017,7 @@
                 const zValues = hand.map(node => node.z);
                 const maxZ = Math.max.apply(null, zValues)
                 const minZ = Math.min.apply(null, zValues)
-                const zRange = maxZ-minZ
+                const zRange = maxZ - minZ
                 hand.forEach(node => {
                     node.z = ((node.z - minZ) / zRange) * 255
                 });
@@ -1060,8 +1091,8 @@
                 drawLandmarks(canvasCtx, hand[17], '#ff3030'); // Pinky palm (17)
 
                 // Crop Canvas
-                if(firstA == true){
-                cropCanvas(canvasElement, crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top)
+                if (firstA == true) {
+                    cropCanvas(canvasElement, crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top)
                 }
             }
             // Add more drawing calls for each landmark collection as needed
@@ -1092,14 +1123,55 @@
 
             predict(tf.expandDims(predictionInput, 0));
         }
+        function getNaturalLength(letter) {
+            console.log('i got', letter, word_list[word_list.length - 1])
+            if (document.getElementById("natInp").checked) {
+                console.log('naturally:')
+                if (letter != word_list[word_list.length - 1]) {
+                    return ((inputFrequency()) * (1 / (maxPercentage / 100)))
+                } else {
+                    console.log("penalty!")
+                    var rb = Number(repeatBuffer())
+                    return ((inputFrequency()*(80/100))+400)
+                }
+            } else {
+                console.log('stably:')
+                if (letter != word_list[word_list.length - 1]) {
+                    return ((inputFrequency()))
+                } else {
+                    console.log("penalty!")
+                    var rb = Number(repeatBuffer())
+                    return ((inputFrequency()*(80/100))+rb)
+                }
+            }
+        }
+        function mapLogitsToPercentage(logits) {
+            // Apply ceiling of 260
+            const cappedLogits = logits.map(value => Math.min(value, 260));
+
+            // Map the values from 0-260 to 0-100
+            const mappedPercentages = cappedLogits.map(value => (value / 260) * 100);
+
+            return mappedPercentages;
+        }
+
+
         async function predict(inputTensor) {
 
             console.log(index_list[0])
             objectDetector.then(function (res) {
+
                 var prediction = res.predict(inputTensor);
+
                 var outputArray = prediction.dataSync(); // Get the output as an array
-                var predictedClass = outputArray.indexOf(Math.max(...outputArray)); // Get the index
+                var percentages = mapLogitsToPercentage(outputArray)
+                maxPercentage = Math.max(...percentages)
+                document.getElementById('predicted_result').style.opacity = (maxPercentage+30)+'%'
+
+                var predictedClass = percentages.indexOf(Math.max(...percentages)); // Get the index
+
                 var current_result = index_list[predictedClass]
+                global_cres = current_result
                 var previous_result = document.getElementById("predicted_result").innerText
                 document.getElementById("predicted_result").innerText = current_result
                 var current_time = Math.round(Date.now())
@@ -1108,7 +1180,8 @@
                 }
                 console.log("p:", previous_result, "c:", current_result)
                 if (previous_result == current_result) {
-                    if (current_time - last_letter_time > 700) {
+
+                    if (current_time - last_letter_time > getNaturalLength(current_result)) {
                         last_letter_time = current_time
                         word_list.push(current_result)
                         triggerPulse()
@@ -1143,7 +1216,7 @@
             var image_width = canvasElement.width
 
             canvasCtx.strokeStyle = strokeColor;
-            canvasCtx.lineWidth = strokeWidth-1;
+            canvasCtx.lineWidth = strokeWidth - 1;
             canvasCtx.beginPath();
             canvasCtx.moveTo(startNode.x * image_width, startNode.y * image_height);
             canvasCtx.lineTo(endNode.x * image_width, endNode.y * image_height);
@@ -1186,8 +1259,8 @@
   resultWrapper.addEventListener('animationend', () => {
     resultWrapper.classList.remove('pulse');
   }, { once: true });*/
-}
-    </script>
+        }
+        </script>