diff --git a/chessboard_detection.js b/chessboard_detection.js
index 0a89ed0..f9ec4c0 100644
--- a/chessboard_detection.js
+++ b/chessboard_detection.js
@@ -64,7 +64,8 @@ function processLoadedImage(img) {
// Visualize sobel image.
sobelCanvas.width = d.width;
sobelCanvas.height = d.height;
- sobelCanvas.getContext('2d').putImageData(d, 0, 0);
+ // sobelCanvas.getContext('2d').putImageData(d, 0, 0); // Draw gradient image
+ sobelCanvas.getContext('2d').drawImage(img,0,0, width, height);
// Get squashed X and Y sobels (by summing along columns and rows respectively).
squashed = squashSobels(d);
diff --git a/index.html b/index.html
index 869191d..eb07e07 100644
--- a/index.html
+++ b/index.html
@@ -28,7 +28,6 @@
-
Predicting Chessboard layouts from Screenshots using TensorflowJs
@@ -45,32 +44,42 @@
Predicting Chessboard layouts from Screenshots using TensorflowJs
Input screenshot file:
-
-
-
-
Gradient Image
-
-
-
-
-
Input to machine learning model
-
+
+
+
+
1. Input Image
+
+
+
+
+
+1
+
+
+
3. Input to machine learning model
+
+
-
Prediction
-
diff --git a/style.css b/style.css
index 99d6df1..18a12cb 100644
--- a/style.css
+++ b/style.css
@@ -6,6 +6,25 @@ body {
line-height: 1.6; /* Adjust spacing between rows */
}
+.container {
+ display: flex; /* Enable flexbox layout */
+ flex-wrap: wrap; /* Allow items to wrap into multiple rows*/
+ justify-content: space-around; /* Distribute space around sections */
+}
+
+.section {
+ width: fit-content;
+ margin-bottom: 20px;
+
+ padding: 15px;
+}
+
+h3 {
+ /* Style titles */
+ text-align: center;
+}
+
+/* fen2htmldiv styling */
#chessboard {
font-family: "Chess", sans-serif;
display: grid;