Using The Microsoft Face API to Create Mario Kart Astrology
Tags: beginners, productivity, opensource, azure
Published: 2019-05-20 23:51:21

---
title: "Using The Microsoft Face API to Create Mario Kart Astrology"
published: true
description: "How to use the Azure Face API to detect emotion through uploaded images."
tags: beginners, productivity, opensource, azure
cover_image: https://cdn-images-1.medium.com/max/1200/1*lS6wVhWjsW7Mfc7HNaNTdA.png
canonical_url: https://medium.com/@chloecondon/using-the-microsoft-face-api-to-create-mario-kart-astrology-9a187cec4f35
---

*The following blog post will walk you through how to use the Microsoft Azure [Face API](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon) to detect emotions from images. If you’re looking for a quick summary and overview on the Face API, I recommend starting here with our [documentation](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon), or taking 5 minutes to complete a [Quickstart Tutorial](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon), so you have some context on how to use the API and deploy a React App to GitHub pages. You can also view the [GitHub repo here](https://github.com/ChloeCodesThings/Mario-Kart-Astrology).*

*If you’d like to skip straight to the code, scroll down to the Let’s get to the code! ​section below.*

*🍄⭐️🏁 Or, if you want to skip ahead and see what your Mario Kart player says about you (based on my personal and very non-scientific analysis), go here: https://chloecodesthings.github.io/Mario-Kart-Astrology/ 🏁⭐️🍄*

*Happy learning!*

*-Chloe*

**P.S. For folks who prefer to listen/watch, there's a video of me talking about this on [YouTube](https://youtu.be/2JkebaN5CW0)! 🍿🎬**

{% youtube 2JkebaN5CW0 %}

###### 👉[Optional sound](https://www.youtube.com/watch?v=ve8r3OjrZhM) bite to get this party started. 🍄⭐️🕹

## It all began with a tweet a couple months ago:


{% twitter 1108738908999700480 %}


It was something silly and fun that I thought I’d share with the internet (for context, [most of my tweets](https://twitter.com/ChloeCondon) are really [bad engineering dad jokes](https://twitter.com/ChloeCondon/status/980816863344050176)). I had always been interested in astrology- it’s by no means science, but I found it interesting that folks have historically attached meaning to the stars. While I find star signs and horoscopes to be interesting, I have never assigned too much value to them. It felt like a lot of generalizations based on my date of birth, which I had zero control over. Also, perhaps I was a little over being called “Miss Cleo” all through elementary and middle school… thanks 90s television commercials 😑

![miss cleo](https://media.giphy.com/media/KwtBAp8ximz2E/giphy.gif)

However, in my mind, choosing a Mario Kart player has a lot more accurate data about my personality than my horoscope sign ever has. Your player isn’t something randomly assigned to you, it’s a big personal choice (Mario Kart race-to-race, that is). It not only says something about your personality, but it also speaks to what you value in a player. For me, I have always gone the small/cute/pink route. Usually I play as Peach, Toadette, or an occasional “wild” moment where I’ll be Yoshi. I like these characters because they are lightweight and move fast. I’ve always noticed that my boyfriend [Ty Smith](https://twitter.com/tsmith) has played as Bowser, Wario, and Dry Bones- all very “evil” and somewhat large characters. I asked him why he chooses these and he said “They’re fun- and the idea of a big lizard on a go-kart is kind of funny”. So, in short my boyfriend is big and evil… just kidding- he’s a pretty small dude who is very nice. So, while I didn’t think they were accurate representations of people’s likes/moods/etc., they were fun to think about and create correlations. Much like its fun to notice folks who look similar to/have personality traits similar to their dogs.

![dog with lady](https://cdn-images-1.medium.com/max/800/1*Mc9HgGfPNrF3MhKCx71SMg.jpeg)

The more I read the comments in my tweets, the more interested I was in the correlation. Folks began to comment asking what their player said about them, and as I joke I began to respond to comments like these:

![twitter image 1](https://cdn-images-1.medium.com/max/1400/1*9gkw3k0eZ0jl2Cu6_NHeCw.png)

![twitter image 2](https://cdn-images-1.medium.com/max/1400/1*gVE6DeuoTd2ZUCPJWrPnHw.png)

![twitter image 3](https://cdn-images-1.medium.com/max/1400/1*X9Zu1NCVFX-8gWpOMoy7VQ.png)


Which then led to [Stephen Radachy](https://twitter.com/StephenRadachy) to make this…:


{% twitter 1108952768037810177 %}

And then make [this amazingness](https://stephenradachy.github.io/Mario-Kart-Astrology/):

{% twitter 1109364608639348742 %}

Yes, Twitter can be trash at times, but then something magical like this happens. 🔮 Stephen made [this adorable site](https://stephenradachy.github.io/Mario-Kart-Astrology/) using React, [NES.css](https://nostalgic-css.github.io/NES.css/), [nes-react](https://www.npmjs.com/package/nes-react), and the [Super Mario Wiki](https://www.mariowiki.com/Mario_Kart_8_Deluxe#Characters) and posted it on Twitter. Here’s a screenshot:

![screenshot of github page](https://thepracticaldev.s3.amazonaws.com/i/zi7nf59k5p78mlyoili3.png)

The most amazing part? He made it all open source! To quote Stephen, “open source is the best source”! So, after a bit of travel, and playing around with the Microsoft [Face API](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon), I finally got around to making my very own Mario Kart Astrology using Microsoft Face algorithms, GitHub pages, and a little creativity. Here’s how I did it!

“Let’s-a-go!” ⭐️🍄

Before we get into the technical details, here’s a diagram of what I built and what I’ll be walking you through:

![diagram](https://thepracticaldev.s3.amazonaws.com/i/d10xbapfst5izy5thl6p.png)

## 🏁 Let’s get to the code! 🏁
### Step 1: Use the Microsoft Face API

![image showing face rectangle](https://cdn-images-1.medium.com/max/1600/0*2HQmJ06ewjvXKqO0.jpg)
###### A sample image of the Face API from the Microsoft Docs

If you’re unfamiliar with the Azure [Face API](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon), it’s a cognitive service that provides algorithms for detecting, recognizing, and analyzing human faces in images. Its capabilities range from face detection, face verification, finding similar faces, face grouping, and person identification. For my project, I wanted to be able to detect emotion (to then translate to a silly “horoscope” type message on my own).

After learning about the Face API with [Suz Hinton](https://twitter.com/noopkat) earlier this year and seeing [Susan Ibach](https://twitter.com/HockeyGeekGirl)’s Confoo talk in Montreal (she used hockey player images to analyze emotion and sentiment- you can view the [code examples and slide deck here](https://github.com/hockeygeekgirl/TextandSentimentAnalytics)), I knew I just had to build something fun and creative with it. After reading the [Face API](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon) docs, and completing a free [Python Quickstart](https://docs.microsoft.com/en-us/azure/cognitive-services/face/QuickStarts/Python/?WT.mc_id=devto-blog-chcondon) on [Microsoft Learn](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon) (don’t worry- there are [other languages]((https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon)) for the quickstarts, too!), I was ready to assess my data and start building!

But I quickly ran into a problem… it wasn’t able to detect anything from an animated cartoon face. 😭

![princess peach gif](https://media.giphy.com/media/tq1IS1nFpiaju/giphy.gif)

So, I put on my creative hat and found a workaround: I couldn’t use animated Mario characters, but I **could** use Mario cosplay images! And so, I ran the following on various URLS of cosplayers:

Here's the code (don’t worry- we’ll break this down in a sec!)

{% gist https://gist.github.com/ChloeCodesThings/decb8d4b65c3df847dd9a09ffade65cb %}

Starting with the code from the [Python Quickstart](https://docs.microsoft.com/en-us/azure/cognitive-services/face/QuickStarts/Python?WT.mc_id=devto-blog-chcondon), I began playing with photos I found on the internet of Mario Kart cosplayers. I only needed data returned to me about the emotions of the characters, but I kept elements like “facialHair” and “age” for fun to see if it detected that the images of Baby Mario I used in fact confirmed it was a baby (spoiler alert: it did 👶🏻), and if a fake mustache on a Mario cosplayer would register (another spoiler alert: it did 👨🏻). Once I determined that there were enough images online for me to make “horoscopes” for a majority of Mario Kart characters (sadly, there aren’t too many folks dressing up as [Iggy](https://www.mariowiki.com/iggy_Koopa) or [Ludwig](https://www.mariowiki.com/Ludwig_von_Koopa) 😭), I began processing images of all the characters. Here is an example and breakdown of the results the FaceAPI returned on a character:

The image below features the Mario Kart character [Lemmy Koopa](https://www.mariowiki.com/Lemmy_Koopa). He’s a rainbow… turtle-looking(?) creature who appears to be pretty happy. He’s also considered a villain in the Mario universe.

![lemmy koopa](https://thepracticaldev.s3.amazonaws.com/i/08dhp3ug1mefge8l4zh9.png)

Below is a cosplay image I used to run through the Face API to determine the character emotions.

![lemmy cosplay](https://thepracticaldev.s3.amazonaws.com/i/x2lmndv2ooi5pfaryi33.jpeg)

Then I ran the following to get results back on the emotions detected in this image. You’ll notice that I have kept other attributes (in addition to emotion) just for fun under params.

{% gist https://gist.github.com/chloecodesthings/c067aae0e8f1e7e72a896214624d3ef9 %}

###### NOTE: You’ll have to insert and include YOUR-SUBSCRIPTION-KEY & YOUR-FACEAPI-URL from your Microsoft account. Read the [FaceAPI documentation](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon) for more info.

Then, after running my Python file with the command…

`python detect-face.py`

…the following data is returned.

```
[{“faceId”: “06d686ab-66d7–4d57-b9a3–4e0bfb0e80de”, “faceRectangle”: {“width”: 147, “top”: 174, “height”: 147, “left”: 695}, “faceAttributes”: {“emotion”: {“sadness”: 0.0, “neutral”: 0.27, “contempt”: 0.001, “disgust”: 0.0, “anger”: 0.0, “surprise”: 0.0, “fear”: 0.0, “happiness”: 0.729, “age”: 26.0, “makeup”: {“lipMakeup”: false, “eyeMakeup”: false}, “accessories”: [{“confidence”: 0.89, “type”: “glasses”}], “facialHair”: {“sideburns”: 0.1, “moustache”: 0.1, “beard”: 0.1}, “hair”: {“invisible”: false, “hairColor”: [{“color”: “black”, “confidence”: 0.83}, {“color”: “other”, “confidence”: 0.64}, {“color”: “brown”, “confidence”: 0.46}, {“color”: “blond”, “confidence”: 0.4}, {“color”: “gray”, “confidence”: 0.4}, {“color”: “red”, “confidence”: 0.23}], “bald”: 0.27}, “headPose”: {“yaw”: 10.7, “roll”: 24.2, “pitch”: -8.0}, “smile”: 0.729}}]
```

Ok, that’s a bunch of text! Let’s break it down in a more readable format.

### Face ID

Each face in the image (only 1 in this case) is given a unique persisted face ID.

`faceId: 06d686ab-66d7–4d57-b9a3–4e0bfb0e80de`

### Face Rectangle


![father and son face rectangle image](https://thepracticaldev.s3.amazonaws.com/i/e9qfr6rf7gp0vwh9ag47.jpeg)

Every face detected in the image corresponds to a faceRectangle field in the response. It is a set of pixel coordinates (left, top, width, height) marking the located face. Using these coordinates, you can get the location of the face as well as its size. In the API response, faces are listed in size order from largest to smallest.

`width: 147, top: 174, height: 147, left: 695`

### Emotions

According to my results, Lemmy is overall a pretty happy Koopa. He shows a small amount of contempt, and is otherwise neutral. Based on these results, I’ll create a fun horoscope later.

`sadness: 0.0, neutral: 0.27, contempt: 0.001, disgust: 0.0, anger: 0.0, surprise: 0.0, fear: 0.0, happiness: 0.729`

### MakeUp/Accessories/Facial Hair/Hair/Head Pose/Smile

In this sample, I also included some parameters in addition to emotion. You’ll notice below that it was able to estimate the age of the person, if they’re wearing makeup, accessories (it’s 0.89 confident on Lemmy wearing glasses- which I agree with since it’s technically a mask). On this particular image, we aren’t returned much data on sideburns/mustache/beard since this person is wearing a wig and mask. We’re detecting a multitude of hair colors since its a rainbow wig. The headpose is also listed- if we specify this attribute when detecting faces (see [How to Detect Faces](https://docs.microsoft.com/en-us/azure/cognitive-services/face/face-api-how-to-topics/howtodetectfacesinimage?WT.mc_id=devto-blog-chcondon)), you will be able to query it later (you can read more about the [capabilities of headpose here](https://docs.microsoft.com/en-us/azure/cognitive-services/face/face-api-how-to-topics/how-to-use-headpose?WT.mc_id=)). And last but not least- smile (pretty self explanatory)!

```
age: 26.0
makeup
lipMakeup: false
eyeMakeup: false
accessories
confidence”: 0.89
type: glasses
facialHair
sideburns: 0.1
moustache: 0.1
beard: 0.1
hair: 
invisible: false
hairColor
color: black, confidence: 0.83
color: other, confidence: 0.64
color: brown, confidence: 0.46
color: blond, confidence: 0.4
color: gray, confidence: 0.4
color: red, confidence: 0.23 
bald: 0.27
headPose
yaw: 10.7, roll: 24.2, pitch: -8.0
smile: 0.729
```

Needless to say, this was some of the most fun data entry I’ve ever done.

![mario kart gif](https://media.giphy.com/media/FpLzrNVJ97uta/giphy.gif)

### Step 2: Write Some Silly “Horoscopes” Based on the Data

![bowser sample](https://thepracticaldev.s3.amazonaws.com/i/ah7hcroijqxl7miwvap6.png)
###### (About as accurate as my horoscope this week.)

Once I obtained data on the moods of the cosplay images, I got creative and made fun short & sweet horoscopes based on them. This didn’t use any technology except for my own brain, but was a fun part of the project!

### Step 3: Add some NES.css, and deploy to GitHub Pages!

![nes.css image](https://thepracticaldev.s3.amazonaws.com/i/ac00kao8qcts64jk2aft.png)

Last, but not least (and perhaps one of my favorite takeaways from this project) I took some time to learn about and play with [NES.css](https://nostalgic-css.github.io/NES.css/). It’s an adorable CSS framework that has the cutest 8-bit NES theme you’ve ever seen. [Stephen](https://twitter.com/StephenRadachy) had used it in his original site, and I’m so glad he did! Now I want to add it to everything I make. 😍

And now, you can view it live on [GitHub Pages](https://chloecodesthings.github.io/Mario-Kart-Astrology/)! If you’re looking for info on how to deploy your own React project to [GitHub Pages](https://chloecodesthings.github.io/Mario-Kart-Astrology/), check out [this great tutorial](https://codeburst.io/deploy-react-to-github-pages-to-create-an-amazing-website-42d8b09cd4d) by Gurjot Singh Makkar.

This project may have been a silly one, but it was a fun way to play with the [Face API](https://docs.microsoft.com/en-us/azure/cognitive-services/face/face-api-how-to-topics/howtodetectfacesinimage?WT.mc_id=devto-blog-chcondon), learn more about the capabilities of [Azure Cognitive Services](https://azure.microsoft.com/en-us/services/cognitive-services/?WT.mc_id=devto-blog-chcondon), and [display the data](https://chloecodesthings.github.io/Mario-Kart-Astrology/) in a creative way. Want to play with the Face API yourself? Try out the [5 Minute Quickstarts](https://docs.microsoft.com/en-us/azure/cognitive-services/face/?WT.mc_id=devto-blog-chcondon) for free in the Microsoft docs! I’m looking forward to seeing your horoscopes featuring cosplay of Pokemon, Disney Princesses, and the Rick and Morty characters in the future 😉🔮

![thank you mario gif](https://media.giphy.com/media/13qctMBrrgbwJi/giphy.gif)

Thanks for reading this far! And special thanks to Suz Hinton, Christoffer Noring, Brandon Minnick, and Susan Ibach. Extra special thanks to Stephen Radachy for the original concept, as well as B.C.Rikko, Igor Guastalla de Lima, Trezy, and all the other amazing contributors to NES.css! 🍄⭐️🎮