Happy, Sad, Angry Workshop

February 25, 2020 ยท View on GitHub

This workshop shows how to build a web based game called Happy, Sad, Angry using Python and Flask along with some HTML and JavaScript running on Microsoft Azure. This game selects an emotion, and you have to try your best to show that emotion on your face. Once you have your best emotion face on, you take a picture with your camera and the web game will check to see what emotion you are showing using the Azure Face API. If it is the same as the one you were asked to show, you win.

The game results showing one game won, and one lost

This workshop is designed for students, and can be run using the free services available as part of the Azure for students offer.

Prerequisites

To complete this workshop, you will need:

  • An Azure account. Sign up for free using Azure for students, or the Azure free account if you are not at an academic institution.

  • Python

    • Windows:

      You can install Python from the Windows Store. This configures Python correctly on your PATH, and there are no further steps.

      If you don't want to use the store, you can install from the Python Downloads page. If you do this, ensure you check the Add Python to PATH option.

      The python installer dialog highlighting the Add Python 3.8 to PATH option

    • macOS

      You can install Python from the Python Downloads page.

      When Python is installed it will open a Finder window. Run the following scripts from inside that Finder window to set up certificates and add Python to your PATH:

      1. Update Shell Profile.command
      2. Install Certificates.command

  • Visual Studio Code

  • The Python Extension for Visual Studio Code. This can be installed from inside VS Code using the Extensions tab.

    The Python extension in Visual Studio Code

  • The Azure App Service Extension for Visual Studio Code. This can be installed from inside VS Code using the Extensions tab.

    The Azure App Service extension in Visual Studio Code

  • A laptop with a Web Cam, or an external camera.

Code format

All code in this sample is shown in code blocks like this one:

print('Here is some code')

Ellipses will be used to indicate other code, removed to make new code or the code that is being discussed easier to see. For example a code block like this:

def func():
  ...
  print('end of the suite')

means that the print('end of the suite') will need to go inside the func function, but after all existing code in this function

Steps

The steps for this workshop are:

  1. Create the Flask web app
  2. Create a web page for the game
  3. Deploy the Web app to the cloud using Azure App Service
  4. Create a Face API resource
  5. Build out the game to capture from the camera and check for emotion
  6. Clean up

Code

For reference, you can find the final code for this workshop in the Code folder.

Clean up Azure resources

This workshop uses resources that are available in the Azure for Students account as free services. As there are limits on the number of free services you can create, you may want to delete the resources created once you are done. The instructions to do this are in the last step - Clean up.