Sign-Language-Interpreter

Runtime error

App Files Files Community

HuggingFace-SK commited on Oct 15, 2024

Commit

ecf406d

1 Parent(s): b4adec0

color the connections and nodes as the tflite model expects

Browse files

Files changed (1) hide show

templates/browser-detect.html +99 -36

templates/browser-detect.html CHANGED Viewed

@@ -1,29 +1,9 @@
 <!DOCTYPE html>
 <html lang="en"><head></head>
   <meta charset="UTF-8">
-    <link rel="apple-touch-icon" type="image/png" href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
-    <meta name="apple-mobile-web-app-title" content="CodePen">
-    <link rel="shortcut icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
-    <link rel="mask-icon" type="image/x-icon" href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg" color="#111">
-    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js"></script>
-  <title>CodePen - MediaPipe HandLandmarker Task for web</title>
-    <link rel="canonical" href="https://codepen.io/mediapipe-preview/pen/gOKBGPN">
 <style>
@@ -45,19 +25,6 @@ body {
 </head>
 <body translate="no">
-  <!-- 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. -->
 <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
@@ -236,13 +203,89 @@ canvasCtx.stroke();
 }
-for (const landmarks of results.landmarks) {
             drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {
                 color: "#00FF00",
                 lineWidth: 5
             });
             drawLandmarks(canvasCtx, landmarks, { color: "#FF0000", lineWidth: 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
@@ -285,6 +328,26 @@ async function predict(inputTensor){
 }
     </script>

 <!DOCTYPE html>
 <html lang="en"><head></head>
   <meta charset="UTF-8">
+  <title>Sign Language Interpreter</title>
 <style>
 </head>
 <body translate="no">
 <script src="https://cdn.jsdelivr.net/npm/@mediapipe/drawing_utils/drawing_utils.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/@mediapipe/hands/hands.js" crossorigin="anonymous"></script>
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-core"></script>
 }
+/* for (const landmarks of results.multiHandLandmarks) {
             drawConnectors(canvasCtx, landmarks, HAND_CONNECTIONS, {
                 color: "#00FF00",
                 lineWidth: 5
             });
             drawLandmarks(canvasCtx, landmarks, { color: "#FF0000", lineWidth: 2 });
+        }*/
+console.log(results)
+const landmarks = results.landmarks;
+    if(landmarks[0]){
+        var hand=landmarks[0]
+// Thumb connections
+drawConnection(hand[4], hand[3], '#ffe5b4', 5); // 4-3
+drawConnection(hand[3], hand[2], '#ffe5b4', 5); // 3-2
+drawConnection(hand[2], hand[1], '#ffe5b4', 5); // 2-1
+// Index connections
+drawConnection(hand[8], hand[7], '#804080', 5); // 8-7
+drawConnection(hand[7], hand[6], '#804080', 5); // 7-6
+drawConnection(hand[6], hand[5], '#804080', 5); // 6-5
+// Middle connections
+drawConnection(hand[12], hand[11], '#ffcc00', 5); // 12-11
+drawConnection(hand[11], hand[10], '#ffcc00', 5); // 11-10
+drawConnection(hand[10], hand[9], '#ffcc00', 5); // 10-9
+// Ring connections
+drawConnection(hand[16], hand[15], '#30ff30', 5); // 16-15
+drawConnection(hand[15], hand[14], '#30ff30', 5); // 15-14
+drawConnection(hand[14], hand[13], '#30ff30', 5); // 14-13
+// Pinky connections
+drawConnection(hand[20], hand[19], '#1565c0', 5); // 20-19
+drawConnection(hand[19], hand[18], '#1565c0', 5); // 19-18
+drawConnection(hand[18], hand[17], '#1565c0', 5); // 18-17
+drawConnection(hand[0], hand[1], '#808080', 5); // 0-1
+drawConnection(hand[0], hand[5], '#808080', 5); // 0-5
+drawConnection(hand[0], hand[17], '#808080', 5); // 0-17
+drawConnection(hand[5], hand[9], '#808080', 5); // 5-9
+drawConnection(hand[9], hand[13], '#808080', 5); // 9-13
+drawConnection(hand[13], hand[17], '#808080', 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)
+    }
+  // Add more drawing calls for each landmark collection as needed
 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
 }
+function drawLandmarks(canvasCtx, landmarks, color) {
+  canvasCtx.fillStyle = color;
+  canvasCtx.strokeStyle = 'white';
+  canvasCtx.lineWidth = 1;
+  canvasCtx.beginPath();
+  canvasCtx.arc(landmarks.x * video.videoWidth, landmarks.y*video.videoHeight, 6, 0, 2 * Math.PI);
+  canvasCtx.fill();
+  canvasCtx.stroke();
+}
+function drawConnection(startNode, endNode, strokeColor, strokeWidth) {
+  canvasCtx.strokeStyle = strokeColor;
+  canvasCtx.lineWidth = strokeWidth;
+  canvasCtx.beginPath();
+  canvasCtx.moveTo(startNode.x * video.videoWidth, startNode.y*video.videoHeight,);
+  canvasCtx.lineTo(endNode.x * video.videoWidth, endNode.y*video.videoHeight);
+  canvasCtx.stroke();
+}
     </script>