fixed image cropping issue and added result display

templates/browser-detect.html

@@ -25,19 +25,7 @@
   
   
 <style>
-/* Copyright 2023 The MediaPipe Authors.
 
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-     http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License. */
 
 body {
   font-family: roboto;
@@ -78,13 +66,14 @@ limitations under the License. -->
 
 
     <div id="liveView" class="videoView">
-      <img id="output_image"></img>
+      <img id="output_image" style="display:none"></img>
       <button id="webcamButton">
         <span>ENABLE WEBCAM</span>
       </button>
+      <span id="predicted_result"></span>
       <div style="position: relative;">
-        <video id="webcam" style="position: absolute" autoplay="" playsinline=""></video>
-        <canvas class="output_canvas" id="output_canvas" style="position: absolute; left: 0px; top: 0px; display:none"></canvas>
+        <video id="webcam" style="position: absolute;  display:none" autoplay="" playsinline=""></video>
+        <canvas class="output_canvas" id="output_canvas" style="position: absolute; left: 0px; top: 0px; display:block"></canvas>
       </div>
     </div>
     
@@ -254,7 +243,7 @@ for (const landmarks of results.landmarks) {
             });
             drawLandmarks(canvasCtx, landmarks, { color: "#FF0000", lineWidth: 2 });
         }
-var dataurl=cropCanvas(canvasElement,crop_left,crop_top,244,244).toDataURL("image/jpeg", 2);
+var dataurl=cropCanvas(canvasElement,crop_left,crop_top,crop_right-crop_left, crop_bottom-crop_top).toDataURL("image/jpeg", 2);
 document.getElementById("output_image").src=dataurl
         
 //# sourceURL=pen.js
@@ -268,12 +257,14 @@ function iterate(x,y){
 
 const cropCanvas = (sourceCanvas,left,top,width,height) => {
     let destCanvas = document.createElement('canvas');
-    destCanvas.width = width;
-    destCanvas.height = height;
+    destCanvas.width = 244;
+    var cropAspectRatio = width / height;
+
+    destCanvas.height = 244 / cropAspectRatio
     destCanvas.getContext("2d").drawImage(
         sourceCanvas,
         left,top,width,height,  // source rect with content to crop
-        0,0,width,height);      // newCanvas, same size as source 
+        0,0,244,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))
@@ -286,7 +277,7 @@ async function predict(inputTensor){
     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
-
+        document.getElementById("predicted_result").innerText=letter_list[predictedClass]
     console.log(letter_list[predictedClass]);
 }, function (err) {
     console.log(err);