Update templates/browser-detect.html

templates/browser-detect.html

@@ -3,14 +3,17 @@
     SignSpeak - A Communicator For Signers
    
     Copyright (C) 2025 Shantanu Khedkar
+
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
     the Free Software Foundation, either version 3 of the License, or
     (at your option) any later version.
+
     This program is distributed in the hope that it will be useful,
     but WITHOUT ANY WARRANTY; without even the implied warranty of
     MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
     GNU General Public License for more details.
+
     You should have received a copy of the GNU General Public License
     along with this program.  If not, see <https://www.gnu.org/licenses/>.
 -->
@@ -272,42 +275,34 @@
         </form>
     </section>
     <div class="bottom-nav">
-  <div id="info-" class="bottom-nav-btn">
-    <svg xmlns="http://www.w3.org/2000/svg" height="28px" width="28px" viewBox="0 0 512 512">
-      <path fill="#5d5d5d" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
-    </svg>
-  </div>
-
-  <div id="home-" class="bottom-nav-btn center-btn">
-    <img src="/static/logo_sil.svg" height="48" width="48px" alt="Home Icon" />
-  </div>
-
-  <div id="settings-" class="bottom-nav-btn">
-    <svg xmlns="http://www.w3.org/2000/svg" height="28px" width="28px" viewBox="0 0 512 512">
-      <path fill="#5d5d5d" d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
-    </svg>
-  </div>
-
-  <div id="digits-" class="bottom-nav-btn">
-    <svg xmlns="http://www.w3.org/2000/svg" height="28px" width="28px" viewBox="0 0 512 512">
-      <path fill="#5d5d5d" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM232 344V280H168c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H280v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z" />
-    </svg>
-    <button id="goDigitsBtn">Go to Digits</button>
-  </div>
-</div>
-
-<script>
-  document.getElementById("goDigitsBtn").addEventListener("click", function() {
-    window.open("https://huggingface.co/spaces/Emeritus-21/digits-signlang", "_blank");
-  });
-</script>
+        <div id="info-" class="bottom-nav-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" height="28px" width="28px"
+                viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                <path fill="#5d5d5d"
+                    d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" />
+            </svg>
+        </div>
+        <div id="home-" class="bottom-nav-btn center-btn">
+        <!--For Android
+            <img src="http://127.0.0.1:8125/assets/static/logo_sil.svg" height="48" width="48px"></img>
+        -->
+        <img src="/static/logo_sil.svg" height="48" width="48px"></img>
+        </div>
+        <div id="settings-" class="bottom-nav-btn">
+            <svg xmlns="http://www.w3.org/2000/svg" height="28px" width="28px"
+                viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
+                <path fill="#5d5d5d"
+                    d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z" />
+            </svg>
+        </div>
 
-  
+    </div>
     <script>
 var word_list = []
         var speechSupported = true
         var prevSpeech = ""
         var prevSettings = ""
+
         logUI = document.getElementById("logUI")
         const speechSynthesis = window.speechSynthesis;
         const voiceSelect = document.getElementById('voice');
@@ -318,7 +313,9 @@ var word_list = []
         const pitchInput = document.getElementById('pitch');
         const rateValue = document.getElementById('rateValue');
         const pitchValue = document.getElementById('pitchValue');
+
         let voices = [];
+
         const languageNames = {
             'en': '- English ',
             'mra': '- Marathi',
@@ -414,6 +411,7 @@ var word_list = []
             'tt': 'Tatar',
             'ur': 'Urdu',
             'vi': 'Vietnamese'
+
         };
         function undo() {
             word_list.pop()
@@ -435,6 +433,7 @@ var word_list = []
                 if (!response.ok) {
                     throw new Error(`Response status: ${response.status}`);
                 }
+
                 var voicesList = await response.text();
                 voicesList = voicesList.split('\n')
                 voicesList.pop()
@@ -455,6 +454,7 @@ var word_list = []
                 if (!response.ok) {
                     throw new Error(`Response status: ${response.status}`);
                 }
+
                 var langsList = await response.text();
                 langsList = langsList.split('\n')
                 langsList.pop()
@@ -478,12 +478,14 @@ var word_list = []
             } catch (error) {
                 console.error(error.message);
             }
+
             const optionNodes = Array.from(languageSelect.children);
             const comparator = new Intl.Collator('en'.slice(0, 2)).compare;
             optionNodes.sort((a, b) => comparator(a.textContent, b.textContent));
             optionNodes.forEach((option) => languageSelect.appendChild(option));
             languageSelect.children[0].selected = "selected"
         }
+
         function getBaseLanguageCode(lang) {
             return lang.split('-').slice(0, 2).join('-');
         }
@@ -493,9 +495,11 @@ var word_list = []
         function getModifierLanguageCode(lang) {
             return lang.split('-').slice(1, 3).join('-');
         }
+
         function updateLanguageList() {
             const uniqueLanguages = new Set(voices.map(voice => getBaseLanguageCode(voice.lang)));
             languageSelect.innerHTML = '';
+
             Object.keys(languageNames).forEach(lang => {
                 if (uniqueLanguages.has(lang)) {
                     const option = document.createElement('option');
@@ -504,6 +508,7 @@ var word_list = []
                     languageSelect.appendChild(option);
                 }
             });
+
             uniqueLanguages.forEach(lang => {
                 if (!languageNames[lang]) {
                     if (!languageNames[getBaseBaseLanguageCode(lang)]) {
@@ -520,15 +525,18 @@ var word_list = []
                     }
                 }
             });
+
             const optionNodes = Array.from(languageSelect.children);
             const comparator = new Intl.Collator('en'.slice(0, 2)).compare;
             optionNodes.sort((a, b) => comparator(a.textContent, b.textContent));
             optionNodes.forEach((option) => languageSelect.appendChild(option));
             languageSelect.children[0].selected = "selected"
         }
+
         function updateVoiceList() {
             const selectedLanguage = languageSelect.value;
             voiceSelect.innerHTML = '';
+
             voices.forEach((voice) => {
                 if (getBaseLanguageCode(voice.lang) === selectedLanguage) {
                     const option = document.createElement('option');
@@ -547,7 +555,9 @@ var word_list = []
             logUI.appendChild(span);
             logUI.appendChild(document.createElement('br')); // Add a line break
         }
+
         const originalFetch = window.fetch;
+
         // Override the fetch function
         window.fetch = async function (input, init) {
             // Convert input to URL if it's a Request object
@@ -556,22 +566,31 @@ var word_list = []
             if (url == 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm/vision_wasm_internal.wasm') {
                 //newUrl = 'http://127.0.0.1:8125/assets/static/vision_wasm_internal.wasm' //For Android
                 newUrl = 'https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0/wasm/vision_wasm_internal.wasm' // For Web
+
             }
             console.log("This was FETCHED: ", newUrl)
             // Call the original fetch function with the new URL
             return originalFetch(newUrl, init);
         };
+
+
+
+
         if ('speechSynthesis' in window) {
             speechSynthesis.onvoiceschanged = () => {
                 populateVoiceList();
             };
+
             languageSelect.addEventListener('change', updateVoiceList);
+
             rateInput.addEventListener('input', () => {
                 rateValue.textContent = rateInput.value;
             });
+
             pitchInput.addEventListener('input', () => {
                 pitchValue.textContent = pitchInput.value;
             });
+
             speakButton.addEventListener('click', () => {
                 const utterance = new SpeechSynthesisUtterance(textInput.value);
                 const selectedVoice = voices.find(voice => voice.name === voiceSelect.value);
@@ -580,14 +599,18 @@ var word_list = []
                 utterance.pitch = pitchInput.value;
                 speechSynthesis.speak(utterance);
             });
+
             populateVoiceList()
             // Create an utterance object ⣿
+
         } else {
             speechSupported = false;
             console.log('Text-to-speech not supported.');
+
             populateTTWLangs()
             populateTTWVoices()
         }
+
         function speak(toSpeak) {
             console.log("speech api support", speechSupported)
             console.log("condition: ", !speechSupported)
@@ -602,8 +625,10 @@ var word_list = []
                     audioPlayer.src = 'http://127.0.0.1:8125/speech?t=' + encodeURIComponent(toSpeak) + currSettings
                     console.log("Set src: ", audioPlayer.src)
                 }
+
                 audioPlayer.play()      // Play the audio
                     .then(() => {
+
                         console.log('Audio is playing');
                     })
                     .catch(error => {
@@ -616,6 +641,9 @@ var word_list = []
                 console.log("Text to speech is now not supported")
             }
         }
+
+
+
         function set_output_array(text) {
             console.log(text)
             word_list = text.split("");
@@ -625,12 +653,14 @@ var word_list = []
             word_list = [];
             textInput.value = ""
         }
+
     </script>
 
     <script type="module">
       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-"));
+
         //import { HandLandmarker, FilesetResolver } from "http://127.0.0.1:8125/assets/static/tasks-vision@0.10.0" // For Android
         import { HandLandmarker, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@0.10.0"; // For Web
         let handLandmarker = undefined;
@@ -640,6 +670,7 @@ var word_list = []
         var time_since_letter = 0
         var last_letter_time = 0
         var maxPercentage = 1
+
         function inputFrequency() {
             return document.getElementById('duration').value
         }
@@ -648,10 +679,10 @@ var word_list = []
         }
         document.getElementById('durationValue').innerText = inputFrequency()
         document.getElementById('repeatValue').innerText = repeatBuffer()
-         var is_first_run = 1
-        const letter_list = ["A", "B", "", "D", "E", "F", "G", "", "I", "J", "K", "L", "M", "N", "O", "P", "", "R", "S", "T", "U", "V", "W", "", "Y", "Z", ""]
-        const phrase_list = ["Ere-ọwurọ", "Bọkọ", "Bokọ???", "Ere-Alẹ", "Mo dọkpẹ", "Ẹrẹ"]
-        // const phrase_list = [" Good-morning", " Hello", " How are you", "Good-evening", " Thanks", " You"]
+        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"]
+        var index_list = letter_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.
@@ -668,10 +699,12 @@ var word_list = []
             });
         };
         createHandLandmarker();
+
         //const MODEL_PATH = "http://127.0.0.1:8125/assets/static/model.tflite" // For Android
         //const WORD_MODEL = "http://127.0.0.1:8125/assets/static/word.tflite" // For Android
         const MODEL_PATH = "/exported" // For Web
         const WORD_MODEL = "/word" // For Web
+
         const letterDetector = tflite.loadTFLiteModel(MODEL_PATH);
         const wordDetector = tflite.loadTFLiteModel(WORD_MODEL);
         var objectDetector = letterDetector
@@ -741,18 +774,23 @@ var word_list = []
                 enableWebcamButton.style = "display:none"
                 document.getElementById("switch-camera").style.display = "block"
                 document.getElementById("mode-switch").style.display = "flex"
+
             }
             // getUsermedia parameters.
             load_camera()
         }
+
         function switchPage(elem) {
             prevSpeech = ""
+
             var pH = document.getElementById("home-page")
             var pI = document.getElementById("info-page")
             var pS = document.getElementById("settings-page")
+
             pH.style.display = "none"
             pI.style.display = "none"
             pS.style.display = "none"
+
             document.getElementById(elem + "page").style.display = "block"
             if (elem != "home-") {
                 webcamRunning = false
@@ -770,6 +808,7 @@ var word_list = []
                 context.clearRect(0, 0, canvas.width, canvas.height);
             }
         }
+
         function load_camera() {
             try {
                 var stream = video.srcObject;
@@ -785,6 +824,7 @@ var word_list = []
             } catch (error) {
                 console.error(error.message);
             }
+
             const constraints = {
                 video: {
                     facingMode: video_facing_mode
@@ -821,14 +861,18 @@ var word_list = []
             }
             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);
                 document.getElementById("canvas_wrapper").style.height = (elem_rect.height | 0).toString() + "px"
+
                 is_first_run = 0
             }
+
             if (results.landmarks && results.handednesses[0]) {
                 var current_time = Math.round(Date.now())
+
                 if (results.handednesses[0][0].categoryName == "Left") {
                     if (!Array.from(document.getElementById('modeSelector').classList).includes('right')) {
                         annotateImage()
@@ -843,6 +887,8 @@ var word_list = []
                     var current_result = "_"
                     var previous_result = document.getElementById("predicted_result").innerText
                     document.getElementById("predicted_result").innerText = current_result
+
+
                     if (previous_result == current_result) {
                         if (current_time - last_letter_time > getNaturalLength(" ")) {
                             last_letter_time = current_time
@@ -861,6 +907,7 @@ var word_list = []
             else {
                 canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight / video.videoWidth) * canvasElement.width)
                 if (30 > calculateCanvasBrightness(canvasElement)) {
+
                     var current_result = "<"
                     var previous_result = document.getElementById("predicted_result").innerText
                     document.getElementById("predicted_result").innerText = current_result
@@ -879,9 +926,11 @@ var word_list = []
                     }
                 } else {
                     last_letter_time = Math.round(Date.now())
+
                     document.getElementById("predicted_result").style.width = String(0) + "%"
                 }
             }
+
             canvasCtx.restore();
             // Keep predicting
             if (webcamRunning === true) {
@@ -889,6 +938,7 @@ var word_list = []
             }
         }
         function annotateImage(firstA = true) {
+
             //console.log(results.landmarks)
             if (results.landmarks[0]) {
                 x_array = []
@@ -901,10 +951,12 @@ var word_list = []
                 var min_y = Math.min(...y_array) * image_height
                 var max_x = Math.max(...x_array) * image_width
                 var max_y = Math.max(...y_array) * image_height
+
                 var sect_height = max_y - (min_y)
                 var sect_width = max_x - (min_x)
                 var center_x = (min_x + max_x) / 2
                 var center_y = (min_y + max_y) / 2
+
                 var sect_diameter = 50
                 if (sect_height > sect_width) {
                     sect_diameter = sect_height
@@ -914,6 +966,7 @@ var word_list = []
                     sect_diameter = sect_width
                     // console.log("sect_width", sect_diameter)
                 }
+
                 sect_diameter = sect_diameter + 50
                 var sect_radius = sect_diameter / 2
                 var crop_top = center_y - sect_radius
@@ -940,11 +993,15 @@ var word_list = []
                         canvasCtx.fillStyle = "#ffffff"
                         canvasCtx.fill()
                     }
+
                 } else {
                     canvasCtx.beginPath();
                     canvasCtx.rect(crop_left, crop_top, crop_right - crop_left, crop_bottom - crop_top);
                     canvasCtx.stroke();
                 }
+
+
+
             }
             /* for (const landmarks of results.multiHandLandmarks) {
                         drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {
@@ -968,76 +1025,102 @@ var word_list = []
                 drawConnection(hand[4], hand[3], 'rgb(0, 0, 255)', 5); // 4-3 (was red)
                 drawConnection(hand[3], hand[2], 'rgb(0, 0, 255)', 5); // 3-2 (was red)
                 drawConnection(hand[2], hand[1], 'rgb(0, 0, 255)', 5); // 2-1 (was red)
+
                 // Index connections
                 drawConnection(hand[8], hand[7], 'rgb(0, 255, 0)', 5); // 8-7
                 drawConnection(hand[7], hand[6], 'rgb(0, 255, 0)', 5); // 7-6
                 drawConnection(hand[6], hand[5], 'rgb(0, 255, 0)', 5); // 6-5
+
                 // Middle connections
                 drawConnection(hand[12], hand[11], 'rgb(255, 0, 0)', 5); // 12-11 (was blue)
                 drawConnection(hand[11], hand[10], 'rgb(255, 0, 0)', 5); // 11-10 (was blue)
                 drawConnection(hand[10], hand[9], 'rgb(255, 0, 0)', 5); // 10-9 (was blue)
+
                 // Ring connections
                 drawConnection(hand[16], hand[15], 'rgb(0, 255, 255)', 5); // 16-15 (was yellow)
                 drawConnection(hand[15], hand[14], 'rgb(0, 255, 255)', 5); // 15-14 (was yellow)
                 drawConnection(hand[14], hand[13], 'rgb(0, 255, 255)', 5); // 14-13 (was yellow)
+
                 // Pinky connections
                 drawConnection(hand[20], hand[19], 'rgb(255, 0, 255)', 5); // 20-19
                 drawConnection(hand[19], hand[18], 'rgb(255, 0, 255)', 5); // 19-18
                 drawConnection(hand[18], hand[17], 'rgb(255, 0, 255)', 5); // 18-17
+
                 drawConnection(hand[0], hand[1], 'rgb(200, 200, 200)', 5); // 0-1
                 drawConnection(hand[0], hand[5], 'rgb(200, 200, 200)', 5); // 0-5
                 drawConnection(hand[0], hand[17], 'rgb(200, 200, 200)', 5); // 0-17
                 drawConnection(hand[5], hand[9], 'rgb(200, 200, 200)', 5); // 5-9
                 drawConnection(hand[9], hand[13], 'rgb(200, 200, 200)', 5); // 9-13
                 drawConnection(hand[13], hand[17], 'rgb(200, 200, 200)', 5); // 13-17
+
                 // Thumb
                 drawLandmarks(canvasCtx, hand[2], '#ffe5b4'); // Thumb tip (2)
                 drawLandmarks(canvasCtx, hand[3], '#ffe5b4'); // Thumb base (3)
                 drawLandmarks(canvasCtx, hand[4], '#ffe5b4'); // Thumb base (4)
+
                 // Index
                 drawLandmarks(canvasCtx, hand[6], '#804080'); // Index tip (6)
                 drawLandmarks(canvasCtx, hand[7], '#804080'); // Index base (7)
                 drawLandmarks(canvasCtx, hand[8], '#804080'); // Index base (8)
+
                 // Middle
                 drawLandmarks(canvasCtx, hand[10], '#ffcc00'); // Middle tip (10)
                 drawLandmarks(canvasCtx, hand[11], '#ffcc00'); // Middle base (11)
                 drawLandmarks(canvasCtx, hand[12], '#ffcc00'); // Middle base (12)
+
                 // Ring
                 drawLandmarks(canvasCtx, hand[14], '#30ff30'); // Ring tip (14)
                 drawLandmarks(canvasCtx, hand[15], '#30ff30'); // Ring base (15)
                 drawLandmarks(canvasCtx, hand[16], '#30ff30'); // Ring base (16)
+
                 // Pinky
                 drawLandmarks(canvasCtx, hand[18], '#1565c0'); // Pinky tip (18)
                 drawLandmarks(canvasCtx, hand[19], '#1565c0'); // Pinky base (19)
                 drawLandmarks(canvasCtx, hand[20], '#1565c0'); // Pinky base (20)
+
                 drawLandmarks(canvasCtx, hand[0], '#ff3030'); // Wrist (0)
+
                 drawLandmarks(canvasCtx, hand[1], '#ff3030'); // Palm base (1)
+
                 drawLandmarks(canvasCtx, hand[5], '#ff3030'); // Index palm (5)
+
                 drawLandmarks(canvasCtx, hand[9], '#ff3030'); // Middle palm (9)
+
                 drawLandmarks(canvasCtx, hand[13], '#ff3030'); // Ring palm (13)
+
                 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)
                 }
             }
             // Add more drawing calls for each landmark collection as needed
+
+
+
+
             //# sourceURL=pen.js
         }
+
+
         function iterate(x, y) {
             x_array.push(x.x)
             y_array.push(x.y)
         }
+
         const cropCanvas = (sourceCanvas, left, top, width, height) => {
             let destCanvas = document.createElement('canvas');
             destCanvas.width = 224;
             var cropAspectRatio = width / height;
+
             destCanvas.height = 224 / cropAspectRatio
             destCanvas.getContext("2d").drawImage(
                 sourceCanvas,
                 left, top, width, height,  // source rect with content to crop
                 0, 0, 224, destCanvas.height);      // newCanvas, same size as source 
             var predictionInput = tf.browser.fromPixels(destCanvas.getContext("2d").getImageData(0, 0, 224, 224))
+
             predict(tf.expandDims(predictionInput, 0));
         }
         function getNaturalLength(letter) {
@@ -1065,19 +1148,28 @@ var word_list = []
         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 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
@@ -1088,6 +1180,7 @@ var word_list = []
                 }
                 console.log("p:", previous_result, "c:", current_result)
                 if (previous_result == current_result) {
+
                     if (current_time - last_letter_time > getNaturalLength(current_result)) {
                         last_letter_time = current_time
                         word_list.push(current_result)
@@ -1103,18 +1196,25 @@ var word_list = []
             }, function (err) {
                 console.log(err);
             });
+
         }
+
         function drawLandmarks(canvasCtx, landmarks, color) {
             var image_height = (video.videoHeight / video.videoWidth) * canvasElement.width
             var image_width = canvasElement.width
+
             canvasCtx.fillStyle = `rgb(${landmarks.z},${landmarks.z},${landmarks.z})`;
             canvasCtx.beginPath();
             canvasCtx.arc(landmarks.x * image_width, landmarks.y * image_height, 8, 0, 2 * Math.PI);
             canvasCtx.fill();
+
         }
+
         function drawConnection(startNode, endNode, strokeColor, strokeWidth) {
+
             var image_height = (video.videoHeight / video.videoWidth) * canvasElement.width
             var image_width = canvasElement.width
+
             canvasCtx.strokeStyle = strokeColor;
             canvasCtx.lineWidth = strokeWidth - 1;
             canvasCtx.beginPath();
@@ -1124,23 +1224,29 @@ var word_list = []
         }
         function calculateCanvasBrightness(canvas) {
             const context = canvas.getContext('2d', { willReadFrequently: true });
+
             // Get the image data from the canvas
             const imageData = context.getImageData(0, 0, canvas.width, canvas.height);
             const data = imageData.data;
+
             let totalBrightness = 0;
             let pixelCount = 0;
+
             // Loop through each pixel
             for (let i = 0; i < data.length; i += 4) {
                 const r = data[i];     // Red
                 const g = data[i + 1]; // Green
                 const b = data[i + 2]; // Blue
+
                 // Calculate brightness for this pixel
                 const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
                 totalBrightness += brightness;
                 pixelCount++;
             }
+
             // Calculate average brightness
             const averageBrightness = totalBrightness / pixelCount;
+
             return averageBrightness;
         }
         function triggerPulse() {
@@ -1148,6 +1254,7 @@ var word_list = []
             /* Apply after working on pulse css more
   const resultWrapper = document.querySelector('.wrapper_result');
   resultWrapper.classList.add('pulse');
+
   // Remove the class after the animation ends to allow it to be triggered again
   resultWrapper.addEventListener('animationend', () => {
     resultWrapper.classList.remove('pulse');
@@ -1163,4 +1270,3 @@ var word_list = []
 </body>
 
 </html>
-