Git Product home page Git Product logo

chessboardfentensorflowjs's Introduction

TensorflowJs Chessboard Prediction from Screenshots in HTML5

Given a screenshot of a chessboard from lichess.org/chess.com, it tries to find the chessboard and pieces on it, Try it yourself.

image

How it works

This uses a frozen Tensorflow Chessbot model. Unlike that repo this runs completely in javascript using TensorflowJs, all client-side.

Board detection

Finds and separates out the chessboard into a 256x256 px image containing the 32x32 tiles of the chessboard. A very simplified chessboard detector is implemented. It requires the board to mostly fill up the image, be very well aligned and centered. In comparison chessfenbot can find aligned chessboards all around the image. Issue #2

The image is blurred and then the sobel gradients X and Y are used to find strong vertical and horizontal edges in the image corresponding to the chessboard. This is used to guess the bounds of the chessboard, and then generate a 256x256 px grayscale image as input for the tensorflow model.

ML Prediction

Given 256x256px aligned chessboard image, it runs a TensorflowJs model to predict pieces on it.

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, and load it up in Javascript using TensorflowJs, allowing everything to run without a server.

image

Running locally

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

For example, one can use

python -m http.server

or

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.