Bekijk vacatures > Bekijk onze vacatures

Deploy your machine learning model and get ready for production

A guide on how to deploy your models, monitor them and provide feedback on classification results using Python and Dash.

As a data scientist, you spend a lot of time crunching data and developing your models, so you really want to apply the fruits of your labour in practice. For the Big Data Expo 2018 in Amsterdam the question arose whether our team would be able to create a working game with some cool machine learning stuff, within four weeks. The goal: an interactive and fun web application that could host some state-of-the-art machine learning models. Challenge accepted: we chose to implement a face detection model and classification models for eight facial features. Besides that, Python had to be the language for both the models and the web application. We got creative and developed our own version of the game ‘Guess who?’ within 4 weeks. This is how we did it.

The game

You might have played Guess Who? when you were a kid. If not, here follows an explanation. Before the game starts, you and your opponent pick an avatar. The idea of the game is to ask the right questions about features of the characters on your play-board. Whoever guesses the avatar of the opponent first wins the game. Examples of features to be guessed are: gender, hair colour, wearing a hat or glasses. Therefore, with a technical point of view, you could argue this game is all about feature classification. This is what the game looks like if you play against an optimised computer algorithm (our opponent)

optimised computer algorithm

Now, it’s time for the computer to make a move: the computer does the same thing, only it uses entropy to calculate the optimal path within the decision tree. Or less nerdy: it quickly calculates which question it needs to ask to be able to flip as many avatars, as fast as possible. This continues until one of you has correctly guessed the character of the opponent and wins the game.

Now that you know how the game works, let’s move on to how you can use it as a playfield for your face detection and feature classification models to work in production. As you may have guessed, the use of the models will take place even before the game starts.


We built our game from scratch and implemented the following five stages:

  1. Create avatars (generate a play-board)
  2. Develop face recognition and feature classification models
  3. Analyse avatars with the models
  4. Validate the prediction of the models and change the outcome if needed
  5. Implement game logic

As this blog focuses on deployment of machine learning models I mostly elaborate on stage 3 and 4, and less on stage 1, 2 and 5. Because face detection and object classification are topics on their own, we dedicated a separate blog to it.

Stage 1: Avatar creation and face detection

We create our own avatars by taking pictures of our players while they are wearing attributes like a hat, glasses or a moustache. For this, we used the photo booth app (pre-installed on Mac). If you are a Windows or Linux user, you can use the cam (also preinstalled). After taking a picture, it must be (automatically) saved in a folder.

Before we start analysing the pictures, they should first be cropped to the facial area. This speeds up the analysing process and can improve the feature classification results. This blog will show you step by step how to do this

Stage 2: Feature classification models

Now we have cropped photos with faces, they are ready to be analysed. As said, detailed information about the models you will find here. To give you a bit of context for this blog: we came up with eight features (gender, hat, glasses, tie, facial hair, hair type, hair length and hair colour) and used a pre-trained Inception V3 network to train a model for each feature.

Stage 3: Analyse the avatars

Before we move on to the implementation, a few words about Dash and the structure of the project. Dash is a Python framework for building analytical web applications. Therefore, we decided to use Dash to create a model validation dashboard because it is an easy tool for building interactive dashboards. In this dashboard, you check the predictions of the models. If the models made a wrong prediction, you can change the outcome in this dashboard. For example: in the predictions of the image below, you want to change glasses to ‘No’ before you play the game.


In the picture below, the project structure is displayed. As you can see in the src folder, we built two apps (dashboards): a validation app and a game app. In the data folder you save the photos taken in stage 1. Within the src/validation folder you should have the script for the validation dashboard, which is called ‘’. Dash requires one .py file for the dashboard layout and an assets folder to store your css and JavaScript files in. For this project, Bulma is used as css framework. Bulma is open source and makes your css structure a lot easier.

Dash uses reactive programming and a dashboard is composed of two parts: a ‘layout’ and ‘callbacks’. The layout describes how the dashboard should look like by using html components. A callback makes the dashboard interactive and is acts like a function: it tells the ‘layout’ element what to do when an input is provided. A callback requires an Output, Input and may have a State. Like with a function call, you define an input and the callback creates an output. An output does not have to be a numeric or text output, it also can be another’s callback input. A state can be changed by the user, for example: filling an empty field with text or changing a dropdown value. Dash created several tutorials on how to use callbacks, these can be found here

How do callbacks work?

In the upper part of our validation page we select a picture to be analysed with the dropdown button.

Let’s start with how the picture end up there. In code below you can see that the callback’s input is the update button. When this update button is pressed, the get_image_dropdown_options function is called. This function makes sure the last ten photos that are added to the data folder, will be returned and put into the image-dropdown. The output of the callback is in this case another callback’s input: the image-dropdown.

Now examine the following code:

Within this callback the input is the click on the ‘Start analysis’ button. The state is the dropdown_value argument to the function. The RAW_IMAGES_DIRvariable points to the correct folder within the data folder where the raw images from stage 1 are stored. When we press the start button in the User Interface, the image will be looked up, cropped and scored. The eight models are combined in the module and the raw data (the image) will be scored by the model_scoring.predict function. This function will return a JSON object which contains a list with sorted predictions (by score) for every attribute for all features. For example, the gender model would return:

[ {key: ‘gender’, value: ‘male’, score: 0.9},

{key: ‘gender’, value: ‘female’, score: 0.1}]

You can have multiple states (which all will be an argument to the function), but only one input and output. The order Output, Input, State, is important to Dash, as well the order of the arguments matching the state.

Stage 4: Validate the prediction

To reuse the output of the data-container that was returned by the previous callback we use some JavaScript. Remember that every callback corresponds to an HTML-layout element? The callback displayed above corresponds to a ‘hidden’ div element called data-container. This data-container is an html element containing data about the picture that is hidden from the page. A simple JavaScript function as getElementById can access its data without the data-container being visible on the page. This data can be used to display some bars indicating how convinced the model was of its prediction or pre-fill the validation page with information on the predicted classes.

We use the feature keys and values as input for the callbacks in the validation page. So, if there is no data-container yet (in case the model has not run yet), the html ‘input’ components are empty. As soon as the model is done analysing and the invisible data-container has been created the input for the callbacks can be provided.

Have a look at the validation page picture again. For every attribute (feature) you need to create a separate callback. Examine the callback for the hair colour:

The callback takes as input the entire data container and retrieves the information belonging to the feature hair colour. This callback will fill the dropdown html element for hair colour with ‘Dark’.

The user could change the dropdown menus as desired (change the states) and save the correct data by clicking the ‘save button’. As you can see in the code below this callback takes as input all the changed (or unchanged) features and an avatar name. The function belonging to the callback will take the name and the correct features and create a JSON object from it. After that, the JSON object will be saved into the CHECKED_DATA_DIR. Within this directory all the avatars are stored with the correct information about their features. The files within this directory will be used as input for the game app.

Stage 5: The game

As the purpose of this blog post was to show how you can implement a machine learning model in a dashboard, I do not elaborate on the game itself. The entire code can be found on this GitHub repo. If you have any questions, do not hesitate to contact me!

Wrap up

In this blog, I showed you how you can use a Dash app to create a dashboard to deploy your machine learning model. You’ve learned how to use callbacks so you can monitor the results of your models, change the output and save the result.

Updates uit het lab.

  • Deploying a Python app on Azure

    Part 2: Using Flask, Docker and Azure App services My previous article described how we built an AI function for creating a path of similar faces from some starting image towards a celebrity. This follow-up article will describe the steps needed to bring your AI to a live website on the Azure cloud platform: Some […]

    > Verder lezen
  • AI for comedy: finding celebrity look-a-likes

    Part 1: the AI part So this comedy theatre group wanted to do a show on AI and asked us for help: can you build something smart and funny?? After many crazy, hilarious, underwhelming, outrageous and impossible ideas, we converged to the idea of an app that shows how you look like some ugly celebrity via […]

    > Verder lezen

Kom je langs?

Donker Curtiusstraat 23C
1051 JM Amsterdam

T: 020-3031414

Websitebeheer: Rivan