add default test file and edit previous file

naptha · Kishlay-notabot · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024 · Jan 26, 2024
commit b2c67500bddc2de5adcf1ed905209792e40f24dd
diff --git a/examples/browser/bounding_box_examples/basic-bounding-box.html b/examples/browser/bounding_box_examples/basic-bounding-box.html
@@ -21,13 +21,9 @@
     <span>This example uses Hindi language, but the function is universal<br>
     Check console for various outputs and logger</span>
 
-    <p>
-        <label for="upload">Upload</label>
-        <input type="file" id="upload" accept="image/*" />
-    </p>
     <div class="box-img" id="boxImg"></div>
-    <div class="box-p" id="boxText">result text will appear here
-    </div>
+    <div class="box-p" id="boxText">result text will appear here</div>
+    <div class="box-p" id="bboxInfo"></div>
 
     <script>
         var boundingBoxData = [];
@@ -56,27 +52,21 @@
             document.getElementById('boxText').innerText = text;
         }
 
-        function handleChange(e) {
-            const selectedImg = e.target.files[0];
-            if (selectedImg) {
-                displayImage(selectedImg);
-                performOCR(selectedImg);
-            }
-        }
-
         function displayImage(selectedImg) {
             const imgBox = document.getElementById('boxImg');
             imgBox.innerHTML = '';
 
             const img = document.createElement('img');
-            img.src = URL.createObjectURL(selectedImg);
+            img.src = selectedImg.src;
             img.alt = 'thumb';
             imgBox.appendChild(img);
+
+            performOCR(img);
         }
 
         function updateBoundingBoxDisplay() {
-            var boundingBoxInfoElement = document.getElementById('boxText');
-            boundingBoxInfoElement.innerHTML = '';
+            var boundingBoxInfoElement = document.getElementById('bboxInfo');
+            boundingBoxInfoElement.innerHTML = 'Bounding Box Data:<br>';
 
             boundingBoxData.forEach(function(bbox, index) {
                 var boxInfo = document.createElement('div');
@@ -85,8 +75,11 @@
             });
         }
 
-        document.getElementById('upload').addEventListener('change', handleChange);
+        const selectedImg = new Image();
+        selectedImg.src = 'photo.jpg';
+
+        displayImage(selectedImg);
     </script>
 </div>
 </body>
-</html>
+</html>
diff --git a/examples/browser/bounding_box_examples/bbox_with_borders.html b/examples/browser/bounding_box_examples/bbox_with_borders.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>OCR App</title>
+  <style>
+    #canvas {
+      position: absolute;
+      left: 0;
+    }
+  </style>
+</head>
+<body>
+  <div class="App">
+    <span>Hi<br>This example shows the confidence data, words and result with borders around the recognized image</span>
+    <div class="box-img" id="boxImg"></div>
+    <div class="box-p" id="boxText">result text will appear here</div>
+    <div class="box-p" id="bboxInfo"></div>
+    <script>
+      var wordData = [];
+      function performOCR(selectedImg) {
+        Tesseract.recognize(
+          selectedImg,
+          'hin',
+          {
+            logger: (e) => console.log(e),
+          }
+        ).then((out) => {
+          console.log(out, 'confidence:', out.data.confidence);
+          setTextResult(out.data.text);
+          saveWordData(out.data.words);
+          renderBoundingBoxes(out.data.words);
+        }).catch((error) => console.error('Error during OCR:', error));
+      }
+      function setTextResult(text) {
+        document.getElementById('boxText').innerText = text;
+      }
+      function saveWordData(words) {
+        wordData = words;
+        updateWordDisplay();
+      }
+      function updateWordDisplay() {
+        var wordInfoElement = document.getElementById('bboxInfo');
+        wordInfoElement.innerHTML = 'Word Data:<br>';
+        wordData.forEach(function (word, index) {
+          var wordInfo = document.createElement('div');
+          wordInfo.innerHTML = `Word ${index + 1}: Text - ${word.text}, Confidence - ${word.confidence}, Bounding Box - x0=${word.bbox.x0}, y0=${word.bbox.y0}, x1=${word.bbox.x1}, y1=${word.bbox.y1}`;
+          wordInfoElement.appendChild(wordInfo);
+        });
+      }
+      function renderBoundingBoxes(words) {
+        const canvas = document.getElementById('canvas');
+        const ctx = canvas.getContext('2d');
+        const img = document.querySelector('.box-img img');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        words.forEach((word) => {
+          const { x0, y0, x1, y1 } = word.bbox;
+          ctx.beginPath();
+          ctx.rect(x0, y0, x1 - x0, y1 - y0);
+          ctx.lineWidth = 2;
+          ctx.strokeStyle = 'red';
+          ctx.stroke();
+        });
+      }
+      // Fixed image path to 'photo.jpg'
+      const selectedImg = new Image();
+      selectedImg.src = 'photo.jpg';
+      document.getElementById('boxImg').appendChild(selectedImg);
+      performOCR(selectedImg);
+    </script>
+  </div>
+</body>
+</html>
diff --git a/examples/browser/bounding_box_examples/photo.jpg b/examples/browser/bounding_box_examples/photo.jpg