Fixed bug in not binarizing the input data

docs/index.html

@@ -129,7 +129,6 @@
     </footer>
     <script src="./js/tutorial.js"></script>
     <script src="https://cdn.jsdelivr.net/npm/tesseract.js@4/dist/tesseract.min.js"></script>
-    <script src="./js/parser.js"></script>
     <script>
         const fileInput = document.getElementById('fileInput');
 
@@ -207,8 +206,11 @@
         const script = document.createElement('script');
         script.src = './src/sudoku_solver.js';
         document.body.appendChild(script);
+
+
         function solveSudoku() {
             const boardStr = readBoard();
+            console.log(boardStr);
             if (boardStr.length !== 81) {
                 alert('Please fill all cells with valid numbers');
                 return;
@@ -221,6 +223,7 @@
             const csp = new Module.SudokuCSP(boardStr);
             csp.solve();
             const solvedBoardStr = csp.getBoard();
+            console.log(solvedBoardStr);
             updateBoard(solvedBoardStr);
 
             celebrate();
@@ -287,6 +290,8 @@
     }
 
     </script>
+        <script src="./js/parser.js"></script>
+
 </body>
 
 </html>

docs/js/parser.js

@@ -170,6 +170,8 @@ function processImage(src) {
             reject(new Error("No image source provided."));
             return;
         }
+        // make black and white and extream contrast (black and white)
+
 
         const img = new Image();
         img.onload = function () {
@@ -181,7 +183,10 @@ function processImage(src) {
             ctx.drawImage(img, 0, 0, targetWidth, targetHeight);
 
             // Binarize and enhance the image
+
             let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            imageData = binarizeImage(imageData);
+
             ctx.putImageData(imageData, 0, 0);
 
             const processedImageSrc = canvas.toDataURL();