Create your own Machine Learning App with Anvil (Basic)
Photo by Austin Distel on Unsplash

Hi everyone, back with me again, with these pandemic let’s pray for everyone who fight and it will better as soon as possible. Right now, again I want to create an app, but with only Python, same as before, when I am creating house price prediction app using Streamlit, if you don’t know or for refresher, take a look at this link.

Why Anvil? Actually it started when my client searching another platform that can run application using Python, and he sent me Anvil. It is quite like Streamlit, so basically it is a web application using Python, but more easy to use. Their web is written like this. Check their web on this link.

Full stack web apps with nothing but Python

Hmm, seems interesting for me, because when they said that, of course it will be a good news for Python users, and when you check it out, there are tutorials that will help you to familiarize with Anvil. How they work and then what should we do to create an app.

Step-by-step

Create account

First thing first, you should register at Anvil web to create an application, and then you can see the interface like this, you can create your scratch app or because we are new in here, let’s check tutorials. I urge that you check this because it will help you to familiarize with how Anvil works.

Anvil web apps

Create an App

After familiarize a little bit with the interface, let’s create an app. In this phase I am going for New Blank App for interface. You will see that one advantage of using Anvil is the GUI. You can even create an app with just drag and drop. But of course using Anvil means you should know about Python, because to connect each item of them using Python, so how to do that?

User interface of Anvil

Connect with Jupyter Notebook

Yeah, you can connect your Jupyter with Anvil, so Jupyter maybe have limitation, people who dont’t understand code at all are always confused with what is our project are talking about. With Anvil, people just take a look at your app and you can care with your code, win-win solution, right?

So how to connect? Firstly click settings icon on the left area, and then click Uplink so you have options to add some key, click enable key and then key will be generated for your project. Use this for your Jupyter Notebook. But before that install anivl-uplink with pip install anvil-uplink first to adding Anvil’s package.

How to get Key for Jupyter Notebook

After you got the key, add this code to your Jupyter Notebook, for this because we have our model for article before, so we just adding to last cell of the project, using Shopee.ipynb on my project, project link.

import anvil.server anvil.server.connect("INSERT_YOUR_KEY")

Basically this code is about calling your Jupyter Notebook through connect with Anvil App, so you don’t need to scratch at Anvil. Just using your notebook.

Create function on Jupyter Notebook

Because we want to make our project can called into Anvil App, of course we should create some properly function to call. In this app I want to add function called predict_model() with several arguments.

import pickle

import anvil.server

#saving model

pickle.dump(model, open('model_new.pickle', 'wb'))

def predict_model(sqft_liv,bath,bed,floor):

model_linear = pickle.load(open('model_new.pickle', 'rb'))

predictions=model_linear.predict([[sqft_liv,bath,bed,floor]])[0]

return(predictions) @anvil .server.callabledef predict_model(sqft_liv,bath,bed,floor):model_linear = pickle.load(open('model_new.pickle', 'rb'))predictions=model_linear.predict([[sqft_liv,bath,bed,floor]])[0]return(predictions)

Basically you should need to adding anvil.server.callable to make sure that function you have been created will connect with Anvil App. Why should be four argument? Because our input for the model are four like the last article. Rest of them is always same except for load model, I am using pickle to save and load the model.

Design your App

Finally, it’s time to designing your app. Don’t worry because it is really simple, just drag and drop what do you need, like Label or Button for clicking. It is up to you to check what components are good for that. For my example, the design would be like this.

My Design

Special for Text Box, don’t forget to change it into Number type, because we want to create machine learning application.

Special case for TextBox

As you imagine, because we are want to create an app, we can design as we like, like adding an icon, or resize the label and many more, you can do anything you want to. After you design this, now it’s time to connecting your Jupyter notebook with Anvil app.

Connecting with Anvil

For connecting, because we just have one button, just click the Button design twice and then the interface will be change into Code Editor. Then you will see another function, this function are important to connect our Python into Anvil. Adding some line of code like this.

def button_1_click(self, **event_args):

"""This method is called when the button is clicked"""

results=anvil.server.call("predict_model",self.text_box_1.text,

self.text_box_2.text,

self.text_box_3.text,

self.text_box_4.text)

self.result.text = results

pass

As you can see this method only run if you click the button, and for calling the function, we should using anvil.server.call because right now our Jupyter Notebook will be server and app itself will be client. So you don’t need to add your model code on Anvil, just called it. Then predict_model is our current function at Jupyter. Self.text_box_1.text, etc is our input, so when we have four input, we should call all four input using Anvil. And self.result.text are our result who we want to show, so we are using Label with name result. I hope it is clear because I know maybe it is slightly hard to do. After this you can just run using Run icon on the upper side of Anvil app.

Your app

Voila, you have created an app using Jupyter Notebook and Anvil. If you have interested you can Publish your app and make custom domain, like this link if I am running this project, it is very interested side, but one thing that you should notice is, because your Jupyter Notebook is your server, so when you don’t activate Jupyter Notebook, the link isn’t working. So make sure that you have run your project.

That’s it. Thank you so much for reading this article, I hope it is helpful for you who maybe don’t have web skill but want to create an app. This project can be downloaded on my Github here. After that adding a code like my article and you are ready to go. Follow my Medium and Linkedin here and share it if you see it is very helpful. Feel free to ask me on Linkedin or my email here and see you soon in another article. Keep learning!
['Muhammad Sifa Ul Rizky']
['Data Science', 'Jupyter Notebook', 'Machine Learning', 'Anvil', 'Python']