/rpsnode

Rock-paper-scissors workshop for Azure Custom Vision showcase

Primary LanguageJavaScriptMIT LicenseMIT

Rock-paper-scissors

Code for "Rock-paper-scissors" game used at Azure Custom Vision hands-on workshop

Prerequisites

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

Setup

Azure Subscription

Open Azure Portal - https://portal.azure.com

Create a new resource group

  • Open "Resource groups" module and add new resource group

    Add new resource group

  • Fill-in the form (Subscription - <your_subscription>, Resource group - "RPS_ResourceGroup", Region - "West Europe")

    Fill-in the form

  • Click "Review + create"

  • Verify the values and click create

    Verify the values and click create

  • Wait until resource group is create and click "Go to resource group"

    Wait until resource group is create and click "Go to resource group"

Create a new Custom Vision resource

  • Create new resource

    Create new resource

  • Search for "Custom Vision" in the Marketplace and click on it

    Search for "Custom Vision" in the Marketplace and click on it

  • Click Create

    Click Create

  • Fill-in the form (Name - "RPSCustomVision", Subscription - <your_subscription>, Resource group - "RPS_ResourceGroup", Location - "West Europe", Pricing tiers for training and predition - "F0") and click create. Wait until resource is created

    Fill-in the form and click create

Create a new AppService resource

  • Open your resource group and verify that you now have two resources with "Cognitive Service" type and click "Add" to add another resource

    Open your resource group and verify that you now have two resources with "Cognitive Service" type and click "Add" to add another resource

  • Search for "Web App" in the Marketplace and click on it

    Search for "Web App" in the Marketplace and click on it

  • Click Create

    Click Create

  • Fill-in the form (Subscription - <your_subscription>, Resource group name - "RPS_ResourceGroup", Name - <choose_unique_name>, Publish - "Code", "Runtime stack" - "Node 10.14", Operating system - "Windows", Region - "West Europe") and click "Change size" for App Service Plan

    Fill-in the form and and click "Change size" for App Service Plan

  • Select "Dev / Test" plan and "F1" pricing tier, then click "Apply"

    Select "Dev / Test" plan and "F1" pricing tier, then click "Apply"

  • Click "Review and create"

    Click "Review and create"

  • Verify values and click "Create"

    Verify values and click "Create"

  • Wait for Web App deployment

    Wait for Web App deployment

  • 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 - "RPS", Resource - "RPSCustomVision[F0]", Project Type - "Classification", Classification Types - "MMulticlass", 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 steps:

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

Azure deployment

Azure dseployment is the same for all steps:

  1. Open "StepN" folder
  2. Run npm install
  3. Create zip archive with contents of "StepN" folder
  4. Open <choose_unique_name>.scm.azurewebsites.net
  5. navigate to Tools -> Zip Push Deploy
  6. Drag-and-drop zip archive to /wwwroot
  7. 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)