{"id":10951,"date":"2021-11-16T10:00:00","date_gmt":"2021-11-16T01:00:00","guid":{"rendered":"https:\/\/www.gigas-jp.com\/appnews\/?p=10951"},"modified":"2021-11-15T18:52:07","modified_gmt":"2021-11-15T09:52:07","slug":"deploying-a-machine-learning-model-into-a-web-application-with-django","status":"publish","type":"post","link":"https:\/\/www.gigas-jp.com\/appnews\/archives\/10951","title":{"rendered":"Deploying a machine learning model into a web application with Django"},"content":{"rendered":"\n

Today, I would like to sh<\/font>are about deploying a machine learning model into a web application using Django<\/font>.<\/font><\/p>\n\n\n\n

Note : In this article, I will focus only how to deploy a trained machine learning model in a web application with django rather than about the steps of machine learning processes.<\/strong><\/em><\/p>\n\n\n\n

First, I will create a simple ML model using multinomial Naive Bayes Classifier with the spam text dataset (spam.csv). The following code is to create spam text detection model.<\/p>\n\n\n\n

First, import the necessary libraries.<\/p>\n\n\n\n

import pandas as pd\nimport numpy as np\nfrom sklearn.feature_extraction.text import CountVectorizer\nfrom sklearn.model_selection import train_test_split\nfrom sklearn.naive_bayes import MultinomialNB<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
And load dataset file with pandas.<\/font><\/p>\n\n\n\n
data = pd.read_csv(\"D:\\Python\\datasets\\spam.csv\", encoding= 'latin-1')\ndata.head()\nThen extract features and labels using CountVectorizer.\ndata = data[[\"class\", \"message\"]]\nx = np.array(data[\"message\"])\ny = np.array(data[\"class\"])\ncv = CountVectorizer()\nX = cv.fit_transform(x) # Fit the Data\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
let\u2019s split this dataset into training and test sets and train the model to detect spam messages<\/p>\n\n\n\n
<\/p>\n\n\n\n
X_train, X_test, y_train, y_test = train_test_split(X, y, test_size=0.33, random_state=42)\nclf = MultinomialNB()\nclf.fit(X_train,y_train)\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
And save the model.<\/p>\n\n\n\n
<\/p>\n\n\n\n
import pickle\npickle.dump(clf,open(\"spamdetection_model.sav\", \"wb\"))\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
This will output spamdetection_model.sav file. This file will be used in the web app later.<\/p>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/font><\/p>\n\n\n\n
So, Let\u2019s start to develop a Django web app.<\/p>\n\n\n\n
mkdir Spamdetection<\/strong> – First make a directory named \/Spamdetection<\/strong> for the Django project.<\/p>\n\n\n\n
cd Spamdetection<\/strong> \u2013 Change directory into the folder created<\/p>\n\n\n\n
And to create a Django project, it is needed to run the following command.<\/p>\n\n\n\n
D:\/Spamdetection>django-admin startproject spamdetectapp<\/strong><\/p>\n\n\n\n
This command create a new directory named spamdetectapp.<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
<\/p>\n\n\n\n
To run the djangoapp, the following command is typed in the spamdetectapp directory created.<\/p>\n\n\n\n
python manage.py runserver<\/strong><\/p>\n\n\n\n
Copy and open the link http:\/\/127.0.0.1:8000\/<\/a> in a web browser. You should see Django Home page.<\/p>\n\n\n\n
Then create views.py<\/strong> inside the same folder to work for getting inputs from users. In the main project folder, create a new folder named \u2018templates\u2019 to work with html files and new folders named \u2018datasets\u2019<\/strong> and \u2018mlmodels\u2019<\/strong>. Then move spam.csv<\/strong> dataset file into the datasets folder and spamdetection_model.sav<\/strong> file into the mlmodels<\/strong> folder.<\/p>\n\n\n\n
Now our project folder will be like that.<\/p>\n\n\n\n
\"\"
<\/figcaption><\/figure>\n\n\n\n
Now open settings.py and add \u2018templates<\/strong>\u2019 to register in \u2018DIRS\u2019<\/strong> list in the \u2018TEMPLATES<\/strong>\u2019 list.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
Now inside the urls.py file, add the following codes to configure the urls.<\/p>\n\n\n\n
from django.contrib import admin\nfrom django.urls import path\n\nfrom spamdetectapp import views # add this new line to import views files\n\nurlpatterns = [\n    path('admin\/', admin.site.urls),\n    \n    # add these new two lines to configure for home page and result page\n    path('', views.home, name='home'), \n    path('result\/', views.result, name='result'),\n]\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
And define two functions for home and result in views.py. And create a libs.py in mlmodels folder. In libs.py, we will define a getResult()<\/strong> function to get results from model prediction and use it in views.py.<\/p>\n\n\n\n
<\/p>\n\n\n\n
v<\/font>i<\/font>e<\/font>w<\/font>s<\/font>.<\/font>p<\/font>y<\/strong><\/font><\/p>\n\n\n\n
from django.shortcuts import render\nfrom mlmodels.libs import getResult\n\n# for default home page view\ndef home(request):    \n    return render(request, 'index.html')\n\n# for result page view\ndef result(request):\t\n    message = request.POST['message']\n    result = getResult(message)\n    return render(request, 'result.html', {'result':result , 'message':message})\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
libs.py<\/strong><\/p>\n\n\n\n
import pandas as pd\nimport numpy as np\nfrom sklearn.feature_extraction.text import CountVectorizer\nfrom sklearn.model_selection import train_test_split\n\ndef getResult(message):\n    import pickle\n    data = pd.read_csv(\"D:\\Spamdetection\\spamdetectapp\\datasets\\spam.csv\", encoding= 'latin-1')\n    data.head()\n\n    data = data[[\"class\", \"message\"]]\n    x = np.array(data[\"message\"])\n    y = np.array(data[\"class\"])\n    cv = CountVectorizer()\n    X = cv.fit_transform(x) # Fit the Data\n\n    model= pickle.load(open(\"D:\\Spamdetection\\spamdetectapp\\mlmodels\\spamdetection_model.sav\", \"rb\"))\n\n    data = cv.transform([message]).toarray()    \n    prediction = model.predict(data)\n    if prediction == 'ham':\n        return 'OK'\n    elif prediction == 'spam':\n        return 'SPAM'\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
Now we have done for backend. So, for frontend pages, let\u2019s create index.html and result.html in templates folder.<\/p>\n\n\n\n
Index.html<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Spam Text Detection<\/title>\n<\/head>\n<body>\n    <h1>Spam Text detection<\/h1>\n    <form action=\"{% url 'result' %}\" method=\"post\">\n        {% csrf_token %}\n        <p>Message:<\/p>\n        <input type=\"text\" name=\"message\">\n        <br>\n        <br>\n        <input type=\"submit\" value='Predict\u2019>\n    <\/form>\n<\/body>\n\n<\/html>\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
result.html<\/strong><\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Spam Text Detection<\/title>\n<\/head>\n<body>\n    <h1>Prediction<\/h1>\n    The Message[{{message}}] is <b>{{result}}<\/b><\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
<\/p>\n\n\n\n
\n\n\n\n
<\/p>\n\n\n\n
<\/p>\n\n\n\n
Now all is done. Once the above steps are completed, to stop and restart the server press Ctrl+C and run this command:<\/p>\n\n\n\n
D:\/Spamdetection\/spamdetectapp> python manage.py runserver<\/strong><\/p>\n\n\n\n
And reopen the link in the browser. You will see the index home page.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
<\/p>\n\n\n\n
Let\u2019s test with some messages.<\/p>\n\n\n\n
When message is \u2018Hello, How are you?\u2019, the result is as follow.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
When the message is \u2018You got $1000 prize at our shop.\u2019, the result is as follow.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Hope you all enjoyed about this article.<\/p>\n\n\n\n
By Asahi<\/p>\n\n\n\n
<\/p>\n
\n            
<\/g:plusone><\/div>\n            
 \"\u3053\u306e\u30a8\u30f3\u30c8\u30ea\u30fc\u3092\u306f\u3066\u306a\u30d6\u30c3\u30af\u30de\u30fc\u30af\u306b\u8ffd\u52a0\"<\/a>