seftimie / Rock-Paper-Scissors-with-Google-Teachable-Machine

Rock Paper Scissors with Google Teachable Machine, Vue JS, Tailwind CSS, Laracasts illustrations and Minions (sounds)

Rock Paper Scissors with Google Teachable Machine

• Play the game
• Video Demo

I have used again the magic of Google to train a visual machine learning model and turn everything into a classic game for my kids: Rock Paper Scissors.

Step 01: using Teachable Machine, Preparing training data (classes)

Open your webcam and grab some picture for every class:

• 👊 0 = Rock
• 🤚 1 = Paper
• ✌️ 2 = Scissors
• None = a default class

Step 02: using Teachable Machine, Training (Don't switch tabs!)

In less than 1 min you will have your model ready for testing.

Step 03: Preview and test the Model

Do some testing

Step 04: Export the model (using Tensorflow.js option with Upload my model).

Grab the snippet code generated and let's create the game.

Step 05: import Vue JS, Tailwind CSS, Tensorflow js + Teachable Machine in html file.

Mix all things together. Add some sounds with Minions (winning/losing part).

Step 06: test the game

If everythings Ok... then upload all code on github and host the game on firebase hosting. When playing, I recommand using a "white background" or (re)train with better images, export the model and then replace line 145: const URL = "https://teachablemachine.withgoogle.com/models/l02IbpV7q/"; from index.html with your model url.

Enjoy it.