Using The Microsoft Face API to Create Mario Kart “Astrology”

Chloe Condon
May 17 · 9 min read
More accurate than a ouija board…
Optional sound bite to get this party started. ☝🏻🍄⭐️🕹

It all began with a tweet a couple months ago:

“CALL ME NOW!” 🔮
Pet goals. tbh.
So. Stinkin’. Cute.

Let’s get to the code!

Step 1: Use the Microsoft Face API

Dramatic reenactment of me discovering this.
Don’t worry- we’ll break this down in a sec.
NOTE: You’ll have to insert and include YOUR-SUBSCRIPTION-KEY & YOUR-FACEAPI-URL from your Microsoft account. Read the FaceAPI documentation for more info.
python detect-face.py
[{“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}}]
faceId: 06d686ab-66d7–4d57-b9a3–4e0bfb0e80de
Faces! Rectangles! Beanies! Oh my!
width: 147, top: 174, height: 147, left: 695
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.0makeup
lipMakeup: false
eyeMakeup: falseaccessories
confidence”: 0.89
type: glassesfacialHair
sideburns: 0.1
moustache: 0.1
beard: 0.1hair: 
invisible: falsehairColor
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.27headPose
yaw: 10.7, roll: 24.2, pitch: -8.0smile: 0.729
Choose your driver… 🔮

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

About as accurate as my horoscope this week.

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

A screenshot of NES.css
Thanks y’all!

Microsoft Azure

Any language. Any platform. Our team is focused on making the world more amazing for developers and IT operations communities with the best that Microsoft Azure can provide. If you want to contribute in this journey with us, contact us at medium@microsoft.com

Chloe Condon

Written by

Musical theatre actress turned developer evangelist.

Microsoft Azure

Any language. Any platform. Our team is focused on making the world more amazing for developers and IT operations communities with the best that Microsoft Azure can provide. If you want to contribute in this journey with us, contact us at medium@microsoft.com