Skip to content

Commit

Permalink
Update README.md with latest visuals
Browse files Browse the repository at this point in the history
  • Loading branch information
Elucidation authored Feb 27, 2024
1 parent 9cd1eaf commit 8be727f
Showing 1 changed file with 15 additions and 9 deletions.
24 changes: 15 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,12 @@
# TensorflowJs Chessboard Prediction from Screenshots in HTML5

Given a screenshot which has an online chessboard in it somewhere, it finds the chessboard and predicts the layout of the pieces on it. Everything runs client-side live using [TensorflowJs](https://js.tensorflow.org/)
Given a screenshot of a chessboard from lichess.org/chess.com, it tries to find the chessboard and pieces on it, [*Try it yourself*](http://elucidation.github.io/ChessboardFenTensorflowJs/).

<img src="readme_input.png" width=300px> <img src="readme_prediction.png" width=300px>

## [Live Demo](http://elucidation.github.io/ChessboardFenTensorflowJs/)
![image](https://github.com/Elucidation/ChessboardFenTensorflowJs/assets/434925/1d348bb4-c915-413c-a3e2-cc07c70e7192)

## How it works

This uses a frozen [Tensorflow Chessbot](https://github.com/Elucidation/tensorflow_chessbot/tree/chessfenbot) model. Unlike that repo this runs completely in javascript using TensorflowJs, all client-side.
This uses a frozen [Tensorflow Chessbot](https://github.com/Elucidation/tensorflow_chessbot/tree/chessfenbot) model. Unlike that repo this runs completely in javascript using [TensorflowJs](https://js.tensorflow.org/), all client-side.

### Board detection

Expand All @@ -22,18 +20,26 @@ The image is blurred and then the sobel gradients X and Y are used to find stron
### ML Prediction

Given 256x256px aligned chessboard image, it runs a TensorflowJs model to predict pieces on it.
We freeze a model graph and weights from [Tensorflow Chessbot](https://github.com/Elucidation/tensorflow_chessbot/tree/chessfenbot), and load it up in Javascript using [TensorflowJs](https://js.tensorflow.org/), allowing everything to run locally client-side.

<img src="readme_cropped_input.png" width=300px> <img src="readme_prediction.png" width=300px>

The model was trained using 32x32 px grayscale tiles of chessboard pieces. For each tile it independently predicts one of 13 classes, 6 white pieces, 6 black pieces, or an empty tile.

We freeze the model graph and weights from [Tensorflow Chessbot](https://github.com/Elucidation/tensorflow_chessbot/tree/chessfenbot), and load it up in Javascript using TensorflowJs, allowing everything to run without a server.

![image](https://github.com/Elucidation/ChessboardFenTensorflowJs/assets/434925/24e1c90b-1f94-4f60-8dcf-bb7f8065b4b3)



## Running locally

A web server of some sort is needed to allow cross-origin sharing when running locally.

For example, one can use `http-server`.
For example, one can use

```python -m http.server```

or

```
http-server -o --cors -c-1 -a localhost
```

0 comments on commit 8be727f

Please sign in to comment.