Ashish Kumar

Ashish Kumar

Data Scientist | Traveller |
Trekker | Dog Father

Turn Jupyter Notebook into a Standalone Web Application using Binder

Posted: 3 minute read

notebook-to-app

Being a Data Scientist, there are situations when we feel that our findings can be better explained with the help of a working prototype. A prototype can be very helpful in giving a birds-eye view of the solution to stakeholders. But due to limited or no knowledge of web development, we either end up looking for some help and if this doesn’t work or takes time, we give up on the idea of creating a prototype.

We can overcome this limitation by creating an application in Jupyter Notebook using ipywidgets (aka jupyter widgets) and deploy it as a standalone web application using voilà and Binder. Let’s look at a short description of what these tools do as per the description on their website.

  • ipywidgets - It is also known as jupyter-widgets or simply widgets, are interactive HTML widgets for Jupyter notebooks and the IPython kernel. Learning becomes an immersive, fun experience. Researchers can easily see how changing inputs to a model impact the results.
  • Voilà - Voilà is used to run, convert, and serve a Jupyter notebook as a standalone app.
  • Binder - An online service for building and sharing reproducible and interactive computational environments from online repositories.

I created a standalone web application using these tools to classify an image of a German Traffic Sign. We will use it to describe the steps required to create your own web application. Click here. to view the jupyter notebook used for creating this application.

If you are interested in dataset used, exploratory data analysis or model development please click here.

Requirements

Binder and Voilà help us to deploy our notebook app directly from a GitHub repository. We will need the following files in our GitHub repository.

  • Requirements.txt file - It contains details of all python packages required for this app to work.
  • Our trained model - This is the model we trained on our dataset.
  • Supporting files - Any extra files required either for the model to work or used by the application to simplify the results.

Create an application in Jupyter notebook

Our web application looks like the below image. It only displays the Markdown text in Jupyter Notebook along with the application.

gtsr-mybinder-app

It’s a very simple web application which takes an image as input, classifies it using our model and also provides the confidence score. We are using the upload FileUpload widget to create an upload button and also have an on_click event attached to it. Once the user selects the file to be uploaded, it automatically triggers the on_click event. on_click event is where our model is being consumed and we get the predictions. We also have a few widgets for Labels and display output.

All these widgets are arranged in a grid layout as per requirement and aesthetics.

Note: Currently this application is accepting one image at a time, but one can modify it to accept multiple files or files in other formats based on requirements.

Refer this notebook to go through the coding part.

Binder Configuration

Once we have created our application in the jupyter notebook, and uploaded all the required files in our GitHub repository, we are ready to launch our application using Binder.

Open Binder and fill in the details as per the below image.

gtsr-mybinder-img

  1. GitHub repository name or URL: This will be the URL for your GitHub repository.
  2. Branch: Name of the Git branch which contains the code to be deployed.
  3. Path to a notebook file: Mention the name of the notebook which contains the application after/voila/render/. Your Path should look like /voila/render/notebook_name.ipynb
  4. URL: Since we are triggering it through the GitHub URL, we need to selct URL from the drop down.
  5. Launch: This will start building your application.
  6. Application URL: You can share the autogenerated URL with stakeholders.

Binder can be used to create an application out of any GitHub repository with the required files. For example, anyone can deploy German Traffic Sign Classification App from my repository and get a hang of it. It gives life to our repository codes and anyone can deploy a prototype application to get more details about the projects.

Note: Binder is ideally suited for relatively short sessions. Click here to refer its usage guidelines.

Hope you enjoyed reading. Happy Learning..!!

You may also enjoy

Are error metrics and loss the same during model training?

1 minute read

A “Loss” and “Metric” are the 2 things which we look at the end of each epoch1 to check the performance of a model. These are very closely related but are not exactly the same. Let’s look at their significance. An Epoch is an event when our model has looked at each of the data points in the training set once. ↩

Worry about the concepts and techniques and not about the libraries or software used?

less than 1 minute read

It doesn’t matter what software and libraries we learn because it only takes a few days to switch from one software or library to another. Whatever tools we use the concept remains the same. These libraries will be updated at a much faster pace in the coming time as more people will be getting into this field, with different skillsets and idea...

Is your Machine Learning model serving the right purpose?

2 minute read

In my earlier blog, we looked at the similarities and differences between our machine learning or deep learning model and regular computer program. If you have not gone through it, I would request you to go through it by clicking here.