Easily Deploy Your Machine Learning Model into a Web App Using Netlify

M
Muhammad 15 Apr, 2021
5 min read
This article was published as a part of the Data Science Blogathon.

Web App Using NetlifyHalGatewood.com on Unsplash

Prerequisites: Basic machine learning (ML) and basic web development.

All the resources used in this article can be downloaded here. However, I encourage you to re-type or re-build your own model so that you’ll get more understanding. “Learning by doing”, they said.

 

Why deploying it

Deploying an ML model is actually the main reason an ML model is built. Getting a high-accuracy model is not the finish line. Accuracy is not the goal, it’s just a number to evaluate the performance of our model.

Our model is supposed to be useful for people, and we don’t expect people will use Jupiter-Notebook or Python command line to do a prediction. Therefore we need to deploy our model into something that can be easily used by many people.

 

What we need to do

  • Build a machine learning model (Python & Tensorflow)
  • Convert the ML model (Tensorflow.js)
  • Build a web app (Basic HTML, CSS, and JS)
  • Deploy it into the cloud (Netlify)

Build the model

The model that we will deploy in this article is specifically a model based on Tensorflow. We will build a model that classifies whether or not a patient has heart disease. The dataset along with the description can be downloaded on Kaggle.

The dataset is originated from the UCI machine learning repository. It’s in structured/tabular format. It’s consists of thirteen attributes that correspond to the medical condition of the patient, and one column corresponds to the label of the data.

These are the codes of our model

import tensorflow as tf
from sklearn.model_selection import train_test_split
import pandas as pd
df = pd.read_csv("heart_cleveland_upload.csv", sep="," )
X = df.iloc[:,0:13]
Y = df.iloc[:,13]
x_train,x_test,y_train,y_test=train_test_split(X, Y, test_size=0.3, random_state=1)
model = tf.keras.models.Sequential()
model.add(tf.keras.layers.Dense(8, input_shape=(13,), activation=tf.nn.relu))
model.add(tf.keras.layers.Dropout(0.5))
model.add(tf.keras.layers.Dense(1, activation=tf.nn.sigmoid)) 
model.compile(optimizer="adam", loss="binary_crossentropy", metrics=["accuracy"])
history = model.fit(x=x_train, y=y_train, epochs=150,
                    validation_data=(x_test, y_test), verbose=0)
val_loss, val_acc = model.evaluate(x=x_test, y=y_test)
themodel = "./heart_ann.h5"
model.save(themodel)

The code from the penultimate rows will save the model into a Hierarchical Data Format version 5 (HDF5).

 

TensorFlow.JS

TensorFlow.js is a library for ML in JavaScript which enables us to develop ML models in JavaScript and use ML directly in the browser.

To use TensorFlow.JS, we need to convert our h5 model into JSON and binary format. We can do it easily using tensorflowjs converter.

First, we need to install it

pip install tensorflowjs

and then convert the model using this line

!tensorflowjs_converter --input_format=keras {themodel} ./

The code above assuming that you do it in the Jupyter Notebook continued with the previous code. If you use the console, then you can do it like this

tensorflowjs_converter --input_format=keras ./heart_ann.h5 ./

This will generate a .json file and a .bin file. These two files are the model that we will use in the web app.

 

Creating web app

We will need a basic HTML input form to get the input from the user. You can use the index.html from the downloadable project files to see the whole code. The most important part is in the javascript. The inference/prediction is done in the javascript.

We need to include the tensorflow.js inside the <head> tag

<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>

and then we add the script to collect the input from the user, and then predict the result via model.predict(input) function.

<script>
      async function run() {
        event.preventDefault();
        const MODEL_URL = "./heart-model.json";
        const model = await tf.loadLayersModel(MODEL_URL);
        console.log("model loaded");
        const age = Number(document.getElementById("age").value);
        const sex = Number(document.getElementById("sex").value);
        const cp = Number(document.getElementById("cp").value);
        const trestbps = Number(document.getElementById("trestbps").value);
        const chol = Number(document.getElementById("chol").value);
        const fbs = Number(document.getElementById("fbs").value);
        const restecg = Number(document.getElementById("restecg").value);
        const thalach = Number(document.getElementById("thalach").value);
        const exang = Number(document.getElementById("exang").value);
        const oldpeak = Number(document.getElementById("oldpeak").value);
        const slope = Number(document.getElementById("slope").value);
        const ca = Number(document.getElementById("ca").value);
        const thal = Number(document.getElementById("thal").value);
        const input = tf.tensor2d([
          [age,sex,cp,trestbps,chol,fbs,restecg,thalach,exang,oldpeak,slope,ca,thal],
        ]);
        const result = model.predict(input).arraySync()[0];
        var rslt = "<p>The result:</p>";
        if (result >= 0.5) {
          rslt +=
            "<div class='alert alert-danger' role='alert'><strong>Positive</strong> ";
        } else {
          rslt +=
            "<div class='alert alert-success' role='alert'><strong>Negative</strong> ";
        }
        const prsn = result * 100;
        rslt += "Probability: " + prsn.toFixed(2) + "% </div>";
        document.getElementById("rslt-text").innerHTML = rslt;
      }
</script>

In the Analyze button, we call the run() function to trigger the prediction on click.

<button class="w-100 btn btn-primary btn-lg" onclick="run()" type="submit">
     Analyze <i class="bi bi-search"></i>
</button>

Netlify

Netlify is the platform that we will use to instantly build and deploy our model into a web app. It’s easy to use and free. You can access and create a Netlify account here.

Deploying into Netlify

Deploying an ML model into Netlify is so easy. We can just drag and drop our files and that’s it. The model will be ready to use in the browser.

On your Netlify account, open the Sites menu

Deploying into Netlify

Then drag and drop the files into the placeholder, marked with the red arrow. The files should be in a folder, containing index.html file, along with the converted model in a JSON and a bin file.

Once the files successfully uploaded, you’ll see this notification with a random domain name.

random domain name

You can also change it with a custom name, by clicking the Domain settings button.

custom name

You’ll see this screen, and click on the Options button, and click on the Edit site name.

Edit site name Netlify

Type any domain name that you like, and then save the changes. Done.

Now you can access your model via the given URL.

 

The result

Let’s access the model that has been deployed in this URL https://heart-disease-detection.netlify.app/, or you can access your own model. This is how it looks like.

This is how it looks like.

Let’s fill in some data, and click on the Analyze button.

Analyze

The model successfully predicts the given data. The result is Negative heart disease with a probability of 9.30%.

 

What’s next

  • Build model with another dataset
  • Deploy different model
  • Deploy ML using a different type of dataset

 

Short Author Bio

My name is Muhammad Arnaldo, a machine learning and data science enthusiast. Currently a master’s student of computer science in Indonesia.

The media shown in this article are not owned by Analytics Vidhya and is used at the Author’s discretion. 

blogathonNetlifyweb development
M
Muhammad 15 Apr, 2021

Machine Learning Basics for a Newbie
6 Steps of Machine learning Lifecycle Introduction to Predictive Modeling
Introduction to Exploratory Data Analysis & Data Insights Descriptive Statistics Inferential Statistics How to Understand Population Distributions?
Reading Data Files into Python Different Variable Datatypes
Probability for Data Science Basic Concepts of Probability Axioms of Probability Conditional Probability
Central Tendencies for Continuous Variables Spread of Data KDE plots for Continuous Variable Overview of Distribution for Continuous variables Normal Distribution Skewed Distribution Skeweness and Kurtosis Distribution for Continuous Variable
Central Tendencies for Categorical Variables Understanding Discrete Distributions Performing EDA on Categorical Variables
Dealing with Missing Values Understanding Outliers Identifying Outliers in Data Outlier Detection in Python Outliers Detection Using IQR, Z-score, LOF and DBSCAN
Sample and Population Central Limit Theorem Confidence Interval and Margin of Error
Bivariate Analysis Introduction
Covariance Pearson Correlation Spearman's Correlation & Kendall's Tau Correlation versus Causation Tabular and Graphical methods for Bivariate Analysis Performing Bivariate Analysis on Continuous-Continuous Variables
Tabular and Graphical methods for Continuous-Categorical Variables Introduction to Hypothesis Testing P-value Two sample Z-test T-test T-test vs Z-test Performing Bivariate Analysis on Continuous-Catagorical variables
Chi-Squares Test Bivariate Analysis on Categorical Categorical Variables
Multivariate Analysis A Comprehensive Guide to Data Exploration The Data Science behind IPL
Supervised Learning vs Unsupervised Learning Reinforcement Learning Generative and Descriminative Models Parametric and Non Parametric model
Machine Learning Pipeline Preparing Dataset Build a Benchmark Model: Regression Build a Benchmark Model: Classification
Evaluation Metrics for Machine Learning Everyone should know Confusion Matrix Accuracy Precision and Recall AUC-ROC Log Loss R2 and Adjusted R2
Dealing with Missing Values Replacing Missing Values Imputing Missing Values in Data Working with Categorical Variables Working with Outliers Preprocessing Data for Model Building
Understanding Cost Function Understanding Gradient Descent Math Behind Gradient Descent Assumptions of Linear Regression Implement Linear Regression from Scratch Train Linear Regression in Python Implementing Linear Regression in R Diagnosing Residual Plots in Linear Regression Models Generalized Linear Models Introduction to Logistic Regression Odds Ratio Implementing Logistic Regression from Scratch Introduction to Scikit-learn in Python Train Logistic Regression in python Multiclass using Logistic Regression How to use Multinomial and Ordinal Logistic Regression in R ? Challenges with Linear Regression Introduction to Regularisation Implementing Regularisation Ridge Regression Lasso Regression
Introduction to K Nearest Neighbours Determining the Right Value of K in KNN Implement KNN from Scratch Implement KNN in Python
Bias Variance Tradeoff Introduction to Overfitting and Underfitting Visualizing Overfitting and Underfitting Selecting the Right Model What is Validation? Hold-Out Validation Understanding K Fold Cross Validation
Introduction to Feature Selection Feature Selection Algorithms Missing Value Ratio Low Variance Filter High Correlation Filter Backward Feature Elimination Forward Feature Selection Implement Feature Selection in Python Implement Feature Selection in R
Introduction to Decision Tree Purity in Decision Tree Terminologies Related to Decision Tree How to Select Best Split Point in Decision Tree? Chi-Squares Information Gain Reduction in Variance Optimizing Performance of Decision Tree Train Decision Tree using Scikit Learn Pruning of Decision Trees
Introduction to Feature Engineering Feature Transformation Feature Scaling Feature Engineering Frequency Encoding Automated Feature Engineering: Feature Tools
Introduction to Naive Bayes Conditional Probability and Bayes Theorem Introduction to Bayesian Adjustment Rating: The Incredible Concept Behind Online Ratings! Working of Naive Bayes Math behind Naive Bayes Types of Naive Bayes Implementation of Naïve Bayes
Understanding how to solve Multiclass and Multilabled Classification Problem Evaluation Metrics: Multi Class Classification
Introduction to Ensemble Techniques Basic Ensemble Techniques Implementing Basic Ensemble Techniques Finding Optimal Weights of Ensemble Learner using Neural Network Why Ensemble Models Work well?
Introduction to Stacking Implementing Stacking Variants of Stacking Implementing Variants of Stacking Introduction to Blending Bootstrap Sampling Introduction to Random Sampling Hyper-parameters of Random Forest Implementing Random Forest Out-of-Bag (OOB) Score in the Random Forest IPL Team Win Prediction Project Using Machine Learning Introduction to Boosting Gradient Boosting Algorithm Math behind GBM Implementing GBM in python Regularized Greedy Forests Extreme Gradient Boosting Implementing XGBM in python Tuning Hyperparameters of XGBoost in Python Implement XGBM in R/H2O Adaptive Boosting Implementing Adaptive Boosing LightGBM Implementing LightGBM in Python Catboost Implementing Catboost in Python
Different Hyperparameter Tuning methods Implementing Different Hyperparameter Tuning methods GridsearchCV RandomizedsearchCV Bayesian Optimization for Hyperparameter Tuning Hyperopt
Understanding SVM Algorithm SVM Kernels In-depth Intuition and Practical Implementation SVM Kernel Tricks Kernels and Hyperparameters in SVM Implementing SVM from Scratch in Python and R
Introduction to Principal Component Analysis Steps to Perform Principal Compound Analysis Computation of Covariance Matrix Finding Eigenvectors and Eigenvalues Implementing PCA in python Visualizing PCA A Brief Introduction to Linear Discriminant Analysis Introduction to Factor Analysis
Introduction to Clustering Applications of Clustering Evaluation Metrics for Clustering Understanding K-Means Implementation of K-Means in Python Implementation of K-Means in R Choosing Right Value for K Profiling Market Segments using K-Means Clustering Hierarchical Clustering Implementation of Hierarchial Clustering DBSCAN Defining Similarity between clusters Build Better and Accurate Clusters with Gaussian Mixture Models
Understand Basics of Recommendation Engine with Case Study
8 Proven Ways for improving the “Accuracyâ€_x009d_ of a Machine Learning Model
Introduction to Dask Working with CuML
Introduction to Machine Learning Interpretability Framework and Interpretable Models model Agnostic Methods for Interpretability Implementing Interpretable Model Understanding SHAP Out-of-Core ML Introduction to Interpretable Machine Learning Models Model Agnostic Methods for Interpretability Game Theory & Shapley Values
Introduction to AutoML Implementation of MLBox Introduction to PyCaret TPOT Auto-Sklearn EvalML
Pickle and Joblib Introduction to Model Deployment
Model Deployment in Android Model Deployment in Iphone

Frequently Asked Questions

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

Responses From Readers

Clear

Harish
Harish 15 Apr, 2021

Very nice

123

Write for us

Write, captivate, and earn accolades and rewards for your work
  • Reach a Global Audience
  • Get Expert Feedback
  • Build Your Brand & Audience
  • Cash In on Your Knowledge
  • Join a Thriving Community
  • Level Up Your Data Science Game
imag
Rahul Shah img

Rahul Shah

27
Sion Chakrabarti img

Sion Chakrabarti

16
CHIRAG GOYAL img

CHIRAG GOYAL

87
Barney Darlington img

Barney Darlington

5
Suvojit Hore img

Suvojit Hore

9
Arnab Mondal img

Arnab Mondal

15
Prateek Majumder img

Prateek Majumder

68