Turning a Google Colab Notebook into a Web App - With Nothing But Python

[Music] let's say you're a data scientist and you've been asked to classify iris flowers based on their measurements you've written some code in a collab notebook that solves the problem however what you really want is to build an interactive tool so people can classify iris flowers themselves with Amber we can create our web app entirely in Python no need to wrestle HTML CSS JavaScript or web hosting for this tutorial you'll need to know the basics of python and have an understanding of how to use Google collab notebooks our app will be created in five steps first we'll create our apps user interface then we'll write client-side python code to dictate a user interface's Behavior next we will connect our app to our notebook and write a function to predict the iris species in Step 4 we will deploy our app in just two clicks and choose a URL finally we will host our model online with anvil [Music] the first thing we need is a user interface for our app let's start by logging into Amber when creating a new blank app we can rename the app to Iris classifier by clicking on the app name at the top of the Anvil editor to classify the species of an iris flower we need to collect several measurements so let's design the user interface for collecting that data we construct the UI by dragging and dropping components from the toolbox let's start by dropping a card into our form this will be a neat container for the other components next we will set up the label and text box components so that users can input the sepal length of the flower they want to classify select the label we just added and in the properties panel on the right change the text to sepal length change the role to input prompt and in the text section align the text to the right then select the text box we just added and change the name of the component to sepal underscore length let's dial the text box by changing the placeholder text to centimeters and changing the text alignment to Center lastly for our text box let's change its type to number this means the text box will only allow numbers to be entered repeat this process adding labels and text boxes for the other parameters we need separ width petal length and petal width this will capture all the information we need to classify each iris flower next let's add a button to run the classifier drag a button component from the toolbox to the bottom of our card under the properties panel will change its name to categorize underscore button and its text to categorize clicking this button will trigger a python function that sends the iris measurements to our collab notebook we'll create that function in step 2. to finish our user interface let's add a label where we'll display our results put it below the button rename it to species underscore label untick the visible tick box center the text and change its role to headline later we'll create a function that makes the label visible and change its text to the classification returned from our Google collab notebook let's move on to step 2 and write some client-side python to make the button do something when it's clicked select the button in the designer and in the properties panel on the right scroll down to the bottom click the Chevron next to the click event box this will open the code View and create a function for us from now on every time the button is clicked by the user this categorize button click function will be called we want the categorize button click function to call the predict Iris function in our Google collab notebook we'll create the predict Iris function in our notebook in step 3. we'll use anvil.server.cool and pass the predict Iris function name as the first argument we also want to pass out the measurements the user has entered into our web app the predict Iris function will have four arguments sepal length separ width petal length and petal width we'll get each one from the text property of the text boxes we added earlier finally if an iris category is returned we want to change the species label to be visible and set its property to the category with our UI built let's connect our notebook and create the predict Iris function to connect our web app to our notebook we'll use the Uplink the Uplink makes it easy to connect our web app to python code anywhere on the web select the plus icon from the sidebar menu and add the uplink then select enable server Uplink this will give us an Uplink key we can use in our Google collab notebook to connect to this app take a copy of this key we'll be using it soon now let's install the Uplink in our collab environment and connect our script using the key we just created for Simplicity I've created a notebook that handles the iris classification for us you can get your own copy of this notebook by following the link in the description in the example notebook I've written code the build and trains a very simple classification model using scikit-learn's built-in Iris data set and the K nearest neighbors algorithm how this works is beyond the scope of this tutorial but towards data science has a useful article that I've Linked In the description if you're looking for more information with our notebook open let's add pip install envelope link to the top cell this will install the envelope Link in our notebooks environment now we can import the amber.server.com module and call the anvil.server.connect function passing it the Uplink key we copied earlier that's it when we run our cell it will connect to our web app finally let's define the productivity function that will be called when the categorize button is clicked we need to add The amber.server.callable Decorator to the function so it's available to call from our app inside the function we'll use knn.predict to get the iris flowers classification and we'll return the iris species name from the iris data we loaded earlier finally at the end of our notebook we will call the way forever function this keeps our notebook running for longer so our app can call functions run the notebook you should see output like this confirming the connection has been established now we have our rapid script connected all we have to do is publish our app for other people to use click the publish button at the top right of the editor and then select publish this app and use the public URL provided or enter your own that's it our model is now deployed online for anyone to use our app has one final problem collab notebooks shut down up to a certain amount of time this means our model won't be available 24 7 and our app will stop working there are two ways of solving this firstly we can host the model on our own computer and connect our app to the model using the envelope link there's a full tutorial Linked In the description which shows you how to do this for free the second solution is to deploy our model online with Anvil this is the simplest way to deploy both our app and our model hosting the model online requires a paid account let me quickly show you how this works we'll start by going back into our collab notebook in the cell that builds and trains the iris classification model we'll import the joblib library and the files module from Google collab next we'll use joblib.com to create an object representing our model we'll name our object kn.sk model then we can download the object as a file using files.download run the cell to download the model to your computer now back in our Anvil app let's add the data file service select the plus icon from the sidebar and add data files here we can upload our model as a file and it'll be accessible in our app server code with our model uploaded we need to configure the server environment to include all the packages we need to run at we'll start by selecting the settings icon from the sidebar menu and opening python versions then in the python version drop down select python 3.10 under base packages select edit requirements.txt directly finally paste the following list of requirements into the text box the list is in the video description will use a copy with our server environment configured it's time to start using our model to start let's add a server module to our app by clicking the add server module in the app browser at the top of our server module let's import the job Loop Library we need to load our model and import load underscore iris from sklearn's built-in iOS data set the same as we did in our collab notebook let's define the product Iris function that takes the flower measurements first inside the predict Iris function we'll reconstruct our model using joblib.lode we will get the path to the model file on disk by using data underscore files brackets knn.sk model then we can return our classification using the same code we used in our collab notebook and that's it if we go to our apps URL and enter some iOS measurements our app will use our machine learning model that's deployed online with anvil Anvil is free to use head on over to ample.works today to get started if you found this video useful please like And subscribe for more animal content thanks for watching [Music]

Channel: Anvil

Views: 35,810

Keywords: Python, web development, google colab, web applications, web apps, front-end development, data science, colab notebook, anvil, gui, python gui, graphical user interface, user interface, ui, python user interface, python web app, web framework, python web framework

Id: ivWp6XTtFjo

Length: 8min 25sec (505 seconds)

Published: Thu Feb 02 2023