Scribblr

A Javascript Deep Learning Project of an online game that uses an AI to guess what players are drawing.
Visit the Website »

Report Bug · Request Feature . Discord Server

Table of Contents

1. About The Project
   • Features
   • Built With
2. Getting Started
   • Installation
3. Usage
4. Roadmap
5. Contributing
6. License
7. Contact

About The Project

An AI web based game that challenges players to sketch objects after which a CNN model makes prediction of what thst object is.

Similar to Quick, Draw by Google.

Note

This is a demonstration project and is intended to showcase the methods that can be used to embed machine learning models directly inside website with the use of javascript

(back to top)

Features

Scribblr is made in HTML5 using Phaser 2 framework and TensorFlow.js library.

To classify images Convolutional Neural Network (CNN) is used.

The model was trained on a small subset of the Quick Draw Dataset.

Built With

• HTML5
• Phaser 2
• TensorFlow.js
• Quick Draw Dataset

(back to top)

Getting Started

You can view the live demo of the project at https://scribblr.oxlac.com

If you want to run the website locally on your machine follow the instructions in the below install section.

Installation

1. Clone the repo

   git clone https://github.com/oxlac/sribblr.git

2. Open the cloned folder in VS Code

   code sribblr

3. Use the VS Code Live Server Extension to run the website locally on your machine.

(back to top)

Usage

Once the game is initialized and training is completed, The left table will show the samples from the dataset and the models prediction.

The wrong predictions will be marked 'Red' and correct predictions will be marked 'Green'.

You can test with more samples by clicking on 'Next Test' Button.

Initially, The model is trained for 50 epochs. If you are not satisfied with the model predictions, You can train the model more by clicking the 'Train More' Button.

You can start sketching any objects as mentioned in the status bar, and the model will predict your drawing.

(back to top)

Roadmap

• Adding more drawing categories from the Quick Draw Dataset.

• Tune Model Architecture for more accuracy.

• Multiplayer game support

• Enhance the UI

• Authentication

• Create rooms and compete with friends to see who can accurately draw an object that the model can identify first.

See the open issues for a full list of proposed features (and known issues). If you have any other ideas, please open an issue and let us know.

(back to top)

Contributing

Contributions are what makes the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)

Contact

Your Name - @Oxlac_ - contact@oxlac.com

Discord Server - https://discord.gg/2YdnSGHdET

Project Link: https://github.com/oxlac/sribblr

(back to top)