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

+ + +
+ +
+

2. Board Overlay

+

+
+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;