How to Turn Your Machine Learning Scripts into Projects You Can Demo?
Recently we published an article and video on Building a Movie Recommendation Engine and one of the most common questions that I received was — “How do I turn this script/notebook into a project that I can demo?”. So, I decided to build a front-end for our recommendation engine. You can try it out here:
Part 2 of this series is now published: Click Here
In our previous videos we have covered building a recommendation system using Collaborative Filtering. In this post, I would like to start from a point assuming that you have built a recommendation model and now want to create a web based user interface for it.
##Ingredients For this Recipe:1. Web2py Framework : Download Here
2. Recommendations Model File: item_similarity_df.csv
3. Test HTML Page: Download Here
4. Completed Application Code with all above: Download Here
Let’s go through high-level steps for building a user interface for your ML application:
- Selection of Tools and Languages
- Building APIs/Services to expose your ML model
- Building Client-side Web / Mobile App
Step 1: Selection of Tools and Programming Languages
Whether you are a veteran software developer or somebody who is just starting out, this is a crucial step that will determine how much time and efforts you will need to build the application you envisioned.
You must use the right tools for the right purpose!
Assuming you have built your ML model in Python, it makes sense to use this powerful language for your web applications/API engine as well. It also means that you don’t have to port any of your code to any other programming language. Here’s my recommendation on a stack that you can’t go wrong with:
Build APIs using a Python based framework (Flask, web2py, Django) and
Build your Front-end using JavaScript with VueJS or ReactJS
If you love Python, you would like JavaScript. Using reactive packages like VueJS/ReactJS is optional but will make your life simpler especially to build a single page app as you won’t have to worry about refreshing pages and passing parameters from one page to another!
In this post we will be using a Python based web framework called web2py for building APIs and VueJS for building reactive HTML front-end.
Step 2: Building APIs/Services to expose your ML model
Our Machine Learning models will be exposed to outside world using a web service. We can then consume this service in a mobile / web application to make our apps smarter. We will create a service called getRecommendations
@service.json
def getRecommendations(watched_movies):
##Magic with our ML model goes herereturn recommended_movies
This is a JSON API that takes in movies that a user has watched/rated in the past and returns a list of recommended movies. web2py is great for building APIs with minimal lines of code. So let’s go ahead and Download web2py from here.
Once you have extracted the archive, you should see the following directory structure:
A quick note on some important folders / files:
- Applications: All your web2py apps/projects are contained in this directory. You can backup your projects and install new ones by simply copy-pasting your project folder inside this directory.
- web2py.py: We can start our web server by running this script:
>> cd Downloads/web2py_src
>> python web2py.py
Choose a password of your choice and hit start server. Next, go to admin, use the password you just used and then create a simple application called “movies”
Now, if we want we could write the rest of the code in the buit-in web based editor that web2py provides. But I am not a huge fan of this editor! So, let’s go back to the web2py directory and edit the app in our favorite code editor— Sublime/Atom/VS Code.
Head to the applications folder and you should see a new folder created for our movies app. Here’s the directory structure of our web2py movies app:
Web2py inherently supports MVC (Model View Controller) architecture.
- Models: define database schema and validations
- Views: hosts your HTML code
- Controllers: Python code where you will write business logic and manages interactions between front-end and the database.
Even though MVC is a good architectural pattern, the world has moved on to using micro-services architecture so that our front-end is independent of the controller logic (mostly). Right now, we will be focusing only on the controllers where we will build our APIs. Open the controller file located at applications/movies/controllers/default.py
First, let me show you how easy it is to use web2py and create a simple API. let’s create an API called myapi that takes in two parameters a & b and returns a string concatenation of these two parameters:
Ok, don’t worry yet — In lines 1 through 5 we wrote some web2py specific code which is used to initialize web services in our app. The @service.json decorator tells web2py that we want to expose myapi as a JSON web service. You can also try @service.xml or @service.csv to build services in other protocols.
Now, let’s call our API from the browser and see if it actually works. Go to the following URL in your browser: http://127.0.0.1:8000/movies/default/call/json/myapi?a=3&b=2
Congratulations! you have just created your first API!
Now its time to build our Recommendations API. Recall our API signature look something like this:
@service.json
def getRecommendations(watched_movies):
##Magic with our ML model goes herereturn recommended_movies
In the first step, we will load the recommendations model that we built using Collaborative Filtering in our app. We have created an “item_similarity_df” in our collaborative filtering tutorial. Click Here to download this CSV file and place it in your applications/movies/static folder.
Since we do not want to load the data frame every time someone uses our app we will cache it using web2py’s cache.ram method.
Next up, comes the part we were waiting for: Building the recommendation API. This is pretty much the same method we created during collaborative filtering class with minute changes on the data type of watched_movies. We have also included a helper method that excludes movies that user has already watched/rated from the list of recommendations.
Testing Your Recommendations API
To test our API we need to send a POST request to the API located at /movies/default/call/json/get_recommendations with watched_movies parameter.
To make things easier for you, we have created a test HTML page that sends this request. Go ahead and download it from here and save this page in your applications/movies/static folder. Right click > Save page as (uhumm..uhumm)
You can access this page on your browser at URL http://127.0.0.1:8000/movies/static/test.html
If you see a page like this that means your API is working as expected and you are all set for the next part of this tutorial.
In the next part we will build the HTML/JavaScript based front-end using VueJS to call this API and display recommended movies for our users in a nice looking interface. We will decide to publish the next part based on the feedback and number of responses we get for this post. So if you are keen on getting the next part, please do comment on this post or reach out to us on WhatsApp.
Part 2 of this series is now published: Click Here
##Ingredients For this Recipe:1. Web2py Framework : Download Here
2. Recommendations Model File: item_similarity_df.csv
3. Test HTML Page: Download Here
4. Completed Application Code with all above: Download Here
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
