Add image processing feature to the web app

This commit adds the image processing feature to the web app.The parsing utilize tessaract.js to extract the puzzle from the image. The extracted puzzle is then displayed on the screen and the user can solve it using the app's solver.
Dor-sketch · Jun 25, 2024 · 7818b0f · 7818b0f
1 parent 040b956
commit 7818b0f
Show file tree

Hide file tree

Showing 10 changed files with 1,202 additions and 905 deletions.
diff --git a/docs/css/parser.css b/docs/css/parser.css
@@ -0,0 +1,42 @@
+        body {
+            font-family: Arial, sans-serif;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+        }
+        #sudoku-board {
+            display: grid;
+            grid-template-columns: repeat(9, 1fr);
+            grid-template-rows: repeat(9, 1fr);
+            gap: 1px;
+            background-color: #333;
+            margin-top: 20px;
+        }
+        .cell {
+            width: 40px;
+            height: 40px;
+            text-align: center;
+            font-size: 20px;
+            line-height: 40px;
+            border: 1px solid #ddd;
+            background-color: #fff;
+        }
+        .actions {
+            margin-top: 20px;
+        }
+        button {
+            padding: 10px 20px;
+            font-size: 16px;
+        }
+        canvas {
+            display: none; /* Hidden canvas element for image processing */
+        }
+        img {
+            max-width: 100%;
+            height: auto;
+            margin-top: 20px;
+        }