/rock-paper-scissors-customvision

Rock-paper-scissors game example which uses CustomVision to recognize user's gestures

Primary LanguageCSSMIT LicenseMIT

description languages page_type products urlFragment
Code and tutorial for rock-paper-scissors-lizard-spock game used at Azure Custom Vision hands-on workshop
javascript
sample
azure
azure-cognitive-services
rock-paper-scissors-lizard-spock-customvision

Rock-paper-scissors-lizard-spock

Code and tutorial for "rock-paper-scissors-lizard-spock" game used at Azure Custom Vision hands-on workshop.

Contents

Outline the file contents of the repository. It helps users navigate the codebase, build configuration and any related assets.

File/folder Description
Step{1-6} Sample source code.
.gitignore Define what to ignore at commit time.
README.md This README file.
LICENSE The license for the sample.

Prerequisites

  1. Azure Subscribtion
  2. Published Custom Vision iteration and access key
  3. NodeJS

Setup

Azure Subscription

An ARM template is provided so you can create the whole infrastructure required for this training (an App Service with its Service Plan and two Cognitive Services). Deploy pressing the following button and filling up the required parameters

Deploy to Azure

  • Fill resource group name and its location. Resource deployment form filled

  • Open your resource group and verify that you have the following resources: App Service Plan, App Service and two Cognitive Services

    Open your resource group and verify that you have the following resources: App Service Plan, App Service and two Cognitive Services

Custom Vision

Sign in https://www.customvision.ai/ using created Azure account

Sign in https://www.customvision.ai/ using created Azure account

Create a new Custom Vision project

  • Click "New Project"

Click "New Project"

  • Fill-in the form (Name - "RPSLS", Resource - "rpsls-customvision [F0]", Project Type - "Classification", Classification Types - "Multiclass", Domains - "General") and click "Create project"

Fill-in the form and click "Create project"

Upload and tag images

  • In Custom Vision project click "Add images"

In Custom Vision project click "Add images"

  • Add images, select appropriate tag (e.g. paper) and click "Upload files"

Add images, select appropriate tag (e.g. paper) and click "Upload files"

  • Wait until upload is finished

Wait until upload is finished Wait until upload is finished

  • Repeat for the other folders, wait until all images are uploaded

Train a model

  • In Custom Vision project click "Train"

In Custom Vision project click "Train"

  • Select "Fast Training" and click "Train"

Select "Fast Training" and click "Train"

  • Wait for training to finish

Wait for training to finish

Manual validation

  • Click on "Quick Test"

Click on "Quick Test"

  • Upload test image

Upload test image

Prediction correction

  • Click on "Predictions"

Click on "Predictions"

  • Select incorrectly predicted image

Select incorrectly predicted image

  • Assign correct tag and click "Save and close"

Select incorrectly predicted image

(Optional) Advanced training

  • In Custom Vision project click "Train"

In Custom Vision project click "Train"

  • Select "Advanced Training" for 1 hour and click "Train"

Select "Advanced Training" for 1 hour and click "Train"

  • Wait for training to finish

Wait for training to finish

Publish iteration

  • Open "Performance" tab, select finished iteration and click "Publish"

Wait for training to finish

  • Fill-in model name, select "RPSCustomVision_Prediction" as prediction resource and click "Publish"

Fill-in model name, select "RPSCustomVision_Prediction" as prediction resource and click "Publish" Fill-in model name, select "RPSCustomVision_Prediction" as prediction resource and click "Publish"

  • Click on "Prediction URL" to see your credentials

Wait for training to finish

Web application code

Application based on code from NodeJS app on Azure example.

Structure

  • index.js - server-side logic
  • public/index.html - WebApp HTML template
  • public/css/app.css - WebApp CSS styles
  • public/js/app.js - WebApp Javascript logic

Local development

Local development is the same for all the steps:

  1. Open "StepN" folder
  2. Run npm install
  3. Run npm start
  4. Open http://localhost:1337

Azure deployment

Azure deployment is the same for all the steps:

  1. Open "StepN" folder
  2. Create zip archive with contents of "StepN" folder, except for node_modules folder
  3. Open <choose_unique_name>.scm.azurewebsites.net
  4. navigate to Tools -> Zip Push Deploy
  5. Drag-and-drop zip archive to /wwwroot
  6. Open <choose_unique_name>.azurewebsites.net and verify that site is running

Code changes are described in respective steps:

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6 (Final)

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.