Part 2 — How to Turn Your Machine Learning Scripts into Projects You Can Demo?

Published in

Code Heroku

6 min readJul 15, 2020

I often see folks who aspire to become machine learning engineers but who don’t have any prior experience in software development ask this question — “How do I take my python scripts and use it in a real software project?” The answer usually is to expose your machine learning models with a REST API which can be then consumed in either a mobile or web application.

In the previous part of this tutorial we gave you an approach on how to build such an API using a python based framework called web2py.

In this part of the tutorial we will walk you through the steps of building a front-end app with VueJS that will send a request to the movie recommendation API that we created in Part-1 and display the recommended movies to our users.

The End Result

Live Demo: http://www.codeheroku.com/static/movies/index.html

The screenshot below and the demo link will give you a sense of the final output that we are looking for.

We essentially need a:

A search box where the user enters the name of movies which they have seen before
Ability to Rate those movies with “Stars” and create a list of rated movies
And finally based on the rated movies, display a list of recommended movies to the user.

Download The Starter Kit

Here is everything you need:

movie recommendation part 2.zip

Edit description

drive.google.com

Extract the above zip file in your web2py project’s static folder and call it movies
Extract the posters.zip and move it inside the movies folder
Make sure your web app is up and running. (See Part-1 of this tutorial)
Open http://127.0.0.1:8000/movies/static/movies/index.html

If you like this post, please do share it with your network and give it some claps! This will encourage us to produce more such content.
If you get stuck somewhere while building this project you can reach out to us via email: hello@codeheroku.com or on WhatsApp: +91–9967578720

Why VueJS?

VueJS is arguably the most beginner friendly reactive front-end framework to build single page apps. it has grown tremendously in popularity over the past few years because of its easy to follow documentation and a smooth learning curve. Even though you can build this web page without VueJs, but using it will make your life much easier.

Step 0: Become Familiar with VueJS

When you are learning something new, never skip going over some basic examples of a new library or framework before trying to build the actual project you are working on. Most beginners take way too long to complete a project because they never take some time initially to understand the fundamentals of a library/tool and dive directly into building the intended project.

VueJS has some excellent tutorials on their official page, I suggest you at least go over the introduction section before moving forward: https://vuejs.org/v2/guide/index.html

Step 1: Create a Vue.js object

Let’s start by creating a Vue.js object, wherein we will edit the parameters to directly change the content of the HTML.

Step 2: Load List of Movies

Let’s familiarize some files in your starter kit

Posters.zip contains posters for each movie in the MovieLens dataset, filename corresponds to the ‘movieId’. It is open-sourced at: https://github.com/babu-thomas/movielens-posters
Movies.zip contains an index.html and the test.html which we built in the Part-1 of the tutorial
movies.json & movies_small.json contain list of dictionaries, containing ‘movieId’, ‘title’, ‘genres’.
Note that we’re not considering ‘genres’ in our application, which could make our application more robust! Afterwards, you can explore it on your own.

Let’s load the JSON to our HTML using Vue.js and jQuery, a popular JavaScript library designed to simplify HTML DOM tree traversal and manipulation.

Whenever index.html is called, this function would be the first to execute. You can press F12, or right-click and go to Inspect Element, open up the console and you’ll find “here”

Step 3: Create methods to add/remove a rating, and get recommendations

Here’s where we will use a modified version of post processing from the API that we created in Part-1, with a bit of JavaScript touch.

In line 52, we’re filtering out the output movie which is already in our watched movies.

In addrating and removemovie methods, after the operation, we set the search string back to an empty string (“”), and call the getrecommendations method again. The end outcome will update the predictions as soon as we add a rating, or remove an existing movie which we rated.

Step 4: Create computed property in Vue object

We will create a computed value as a derived value that will be automatically updated whenever one of the underlying values used to calculate it is updated. You don’t call a computed and it doesn’t accept any parameters, which is why it is different from method property.
Here’s a more discrete answer: https://stackoverflow.com/questions/44350862/method-vs-computed-in-vue

Notes:
1. If the search string has length less than 2, it is discarded.
2. If this.all_movies returns a False value, an empty array is taken instead.
3. In line 74–79, we’re filtering movies if their index in the array of movies is greater than -1, i.e., they’re present in the array.
4. We’re bounding the resulting array with a length of 100.

With this, we have completed writing code to render our HTML!

Step 5: Create Nav-bar

We will use one of the most pretty and responsive CSS frameworks, Bootstrap. You don’t need to download anything, we have provided the core CSS in the Starter Kit.

With this much code, you’ll get a nice top nav-bar with “Movie Recommendation Engine” in clickable format.

Step 6: Add Search Box

Seach Box connects to the addmovie function, which we created in Step 4.

To further your understanding, try to add rating numbers (1–5) in a square box, which would look like this:

Note: Answer to this is in index.html provided in the Starter Kit, but we encourage you to try it out on your own first.

Step 7: Display watched movies

The displayed movies ideally, should also have a ‘Remove’ utility, connecting to the removemovie method we created in Step 4.

With that done, after searching for a movie, and rating them, we should get something like this:

We’re close to the endgame!

Step 8: Display predictions

If the movie has a corresponding poster, display it along with star rating, otherwise display the movie name with star rating.

And, we’re done!

Open http://127.0.0.1:8000/movies/static/movies/index.html and try out your very own recommendation system.