+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: Python (https://www.sickgaming.net/forum-83.html)
+--- Thread: [Tut] How I Created a Machine Learning Web Application Using Django (/thread-100906.html)
[Tut] How I Created a Machine Learning Web Application Using Django - xSicKxBot - 03-26-2023
How I Created a Machine Learning Web Application Using Django
<div>
<div class="kk-star-ratings kksr-auto kksr-align-left kksr-valign-top" data-payload='{"align":"left","id":"1242421","slug":"default","valign":"top","ignore":"","reference":"auto","class":"","count":"1","legendonly":"","readonly":"","score":"5","starsonly":"","best":"5","gap":"5","greet":"Rate this post","legend":"5\/5 - (1 vote)","size":"24","width":"142.5","_legend":"{score}\/{best} - ({count} {votes})","font_factor":"1.25"}'>
<div class="kksr-stars">
<div class="kksr-stars-inactive">
<div class="kksr-star" data-star="1" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="2" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="3" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="4" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" data-star="5" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
<div class="kksr-stars-active" style="width: 142.5px;">
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
<div class="kksr-star" style="padding-right: 5px">
<div class="kksr-icon" style="width: 24px; height: 24px;"></div>
</p></div>
</p></div>
</div>
<div class="kksr-legend" style="font-size: 19.2px;"> 5/5 – (1 vote) </div>
</p></div>
<p>Deploying a <a href="https://blog.finxter.com/deploying-a-machine-learning-model-in-fastapi/" data-type="post" data-id="22109" target="_blank" rel="noreferrer noopener">Machine Learning model</a> as a web application makes it easy for others with little or no programming experience to use it. </p>
<p>In previous tutorials, where I explained how I created a <a rel="noreferrer noopener" href="https://blog.finxter.com/how-i-built-a-house-price-prediction-app-using-streamlit/" data-type="post" data-id="1104457" target="_blank">house price prediction app</a> and a <a rel="noreferrer noopener" href="https://blog.finxter.com/how-i-built-and-deployed-a-python-loan-eligibility-prediction-app-on-streamlit/" data-type="post" data-id="1080976" target="_blank">loan eligibility app</a>, we made use of Streamlit. Streamlit is easy to use. This is why it is a popular choice for data scientists.</p>
<p>In a world where learning one framework isn’t enough, won’t it be nice to learn how to accomplish this using Django? </p>
<p>Understandably, Django can be tough for beginners. The only remedy though is constant practice. If you have been going through <a href="https://blog.finxter.com/how-i-created-a-text-to-html-converter-app-using-django/" data-type="post" data-id="1220283" target="_blank" rel="noreferrer noopener">some of my tutorials on Django</a>, there is no doubt that you have become familiar with the process.</p>
<p>Therefore, in this tutorial, we will add to your knowledge by creating a machine learning application using Django. Guess what we will used for prediction? The famous Titanic dataset!</p>
<h2>Developing Machine Learning Model</h2>
<p>The Machine Learning classification problem aims to predict the survival of the passengers based on their attributes. There are multiple steps involved in creating a Machine Learning model. To keep things simple, we will skip those steps and focus on showing how to implement Machine Learning in Django.</p>
<p>Create a folder for this project. Then, inside the folder, create a file named <code>model.py</code>. This is where we will develop our model. You can download the dataset on my <a href="https://github.com/finxter/ML_with_Django" data-type="URL" data-id="https://github.com/finxter/ML_with_Django" target="_blank" rel="noreferrer noopener">GitHub page</a>.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import pandas as pd
import numpy as np
from sklearn.model_selection import train_test_split
from sklearn.preprocessing import MinMaxScaler
from sklearn.linear_model import LogisticRegression
import pickle df = pd.read_csv('titanic.csv', index_col=0) # selecting the features we need
df = df[['Pclass', 'Sex', 'Age', 'SibSp', 'Parch', 'Fare', 'Embarked', 'Survived']] # encoding the column to a numberic value
df['Sex'] = df['Sex'].map({'male': 0, 'female': 1}) # converting the Age column to numberic type
df['Age'] = pd.to_numeric(df.Age) # filling the null values
df['Age'] = df.Age.fillna(np.mean(df.Age)) # creating additional features from Embarked columns after converting to dummy variables
dummies = pd.get_dummies(df.Embarked)
df = pd.concat([df, dummies], axis=1)
df.drop(['Embarked'], axis=1, inplace=True) X = df.drop(['Survived'], axis=1)
y = df['Survived'] # scaling the features
scaler = MinMaxScaler(feature_range=(0,1))
X_scaled = scaler.fit_transform(X) model = LogisticRegression(C=1)
model.fit(X_scaled, y) # saving model as a pickle
pickle.dump(model, open('titanic.pkl', 'wb'))
pickle.dump(scaler, open('scaler.pkl', 'wb'))
</pre>
<p>After <a href="https://blog.finxter.com/read-a-csv-file-to-a-pandas-dataframe/" data-type="post" data-id="440655" target="_blank" rel="noreferrer noopener">importing the CSV</a> file, we saw that there are missing values in the features selected. We simply fill them up with the mean of the values. We convert the Embarked column to a dummy variable. Then, we add them to the features.</p>
<p>We are using <code><a href="https://blog.finxter.com/logistic-regression-in-one-line-python/" data-type="post" data-id="2537" target="_blank" rel="noreferrer noopener">LogisticRegression</a></code> as the Machine Learning algorithm to make this prediction. Finally, we save the model as a <a href="https://blog.finxter.com/serialization-part-1/" data-type="post" data-id="173558" target="_blank" rel="noreferrer noopener">pickle object</a> to be used later.</p>
<h2>Creating Django Project</h2>
<p>As covered in previous tutorials, the steps to set up a new Django project are as follows:</p>
<ul>
<li>create and activate a <a href="https://blog.finxter.com/python-virtual-environments-with-venv-a-step-by-step-guide/" data-type="post" data-id="3393" target="_blank" rel="noreferrer noopener">virtual environment</a></li>
<li><a href="https://blog.finxter.com/how-to-install-xxx-in-python/" data-type="post" data-id="653128" target="_blank" rel="noreferrer noopener">install required libraries</a></li>
<li>create a new Django project which we will call predictions</li>
<li>create a <code>requirements.txt</code> file</li>
<li>create a new app called <code>titanic</code></li>
<li>perform a migration to set up the database</li>
<li>update <code>settings.py</code></li>
</ul>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">$ python3 -m venv venv
$ source venv/bin/activate
(venv) $ pip install django tzdata scikit-learn pandas numpy
(venv) $ pip freeze > requirements.txt
(venv) $ django-admin startproject venv_predictions .
(venv) $ python manage.py startapp titanic
(venv) $ python manage.py migrate
(venv) $ python manage.py runserver
</pre>
<p>The <code>(venv)</code> indicates that you are in the virtual environment. Don’t forget to include the dot which signifies creating the project in the current directory. You will see the image below if everything was installed successfully.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img loading="lazy" decoding="async" width="607" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-347.png" alt="" class="wp-image-1242434" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-347.png 607w, https://blog.finxter.com/wp-content/uploads/2023/03/image-347-300x197.png 300w" sizes="(max-width: 607px) 100vw, 607px" /></figure>
</div>
<p>Open the <code>settings.py</code> file to let Django know that a new app is created. We will do so in the <code>INSTALLED_APP</code> section.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">INSTALLED_APPS = [ 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', # custom app 'titanic',
]
</pre>
<p>Let’s configure the URLs for our website. Open the <code>urls.py</code> in the project folder and make it appear like this:</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from django.contrib import admin
from django.urls import path, include urlpatterns = [ path('admin/', admin.site.urls), path('', include('titanic.urls')),
]
</pre>
<p>Let’s now configure the URLs for the app. Create a <code>urls.py</code> in the app folder.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from django.urls import path
from .views import home, result urlpatterns = [ path('', home, name='home'), path('result/', result, name='result'),
]
</pre>
<p>Let’s create another file in the app folder named <code>predict.py</code>. This is where we will use the pickled files to make predictions.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">import pickle def getPrediction(pclass, sex, age, sibsp, parch, fare, C, Q, S): model = pickle.load(open('titanic.pkl', 'rb')) scaled = pickle.load(open('scaler.pkl', 'rb')) transform = scaled.transform([[pclass, sex, age, sibsp, parch, fare, C, Q, S]]) prediction = model.predict(transform) return 'Not Survived' if prediction == 0 else 'Survived' if prediction == 1 else 'error'
</pre>
<p>The function contains the exact number of features used to train the model. </p>
<p>Notice we first transform the values the user will input on the web page. Since the trained model was transformed, we have to do the same to any values the user enters. Finally, we return the results based on the prediction.</p>
<p>Alright, let’s head over to the <code>views.py</code> file in the app folder.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">from django.shortcuts import render
from .prediction import getPrediction # Create your views here.
def home(request): return render(request, 'home.html') def result(request): pclass = int(request.GET['pclass']) sex = int(request.GET['sex']) age = int(request.GET['age']) sibsp = int(request.GET['sibsp']) parch = int(request.GET['parch']) fare = int(request.GET['fare']) embC = int(request.GET['embC']) embQ = int(request.GET['embQ']) embS = int(request.GET['embS']) result = getPrediction(pclass, sex, age, sibsp, parch, fare, embC, embQ, embS) return render(request, 'result.html', {'result': result})
</pre>
<p>The <code>home()</code> function simply renders the <code>home.html</code> which contains the form where our users will input some details. Then the <code>result()</code> function will get those details, make predictions, and renders the prediction result. </p>
<p>Notice that we made sure every detail corresponds to the features used in training the model.</p>
<p>The final step is templates. Create a folder bearing the name. Make sure you are doing so in the current directory. Then register it in the <code>settings.py</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="python" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'templates')], # add these 'APP_DIRS': True, 'OPTIONS': { 'context_processors': [ 'django.template.context_processors.debug', 'django.template.context_processors.request', 'django.contrib.auth.context_processors.auth', 'django.contrib.messages.context_processors.messages', ], }, },
]
</pre>
<p>Don’t forget to import the required module. Inside the templates folder, create a <code>home.html</code> file.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><!DOCTYPE html>
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Home</title> </head> <body> <h1 style= “color:blue”>Titanic Survival Prediction</h1> <form action="{% url 'result' %}"> {% csrf_token %} <p>Passenger Class:</p> <input type="text" name="pclass"> <br> <p>Sex:</p> <input type="text" name="sex"> <br> <p>Age:</p> <input type="text" name="age"> <br> <p>Sibsp:</p> <input type="text" name="sibsp"> <br> <p>Parch:</p> <input type="text" name="parch"> <br> <p>Fare:</p> <input type="text" name="fare"> <br> <p>Embark Category C:</p> <input type="text" name="embC"> <br> <p>Embark Category Q:</p> <input type="text" name="embQ"> <br> <p>Embark Category S:</p> <input type="text" name="embS"> <br> <input type="submit" value='Predict'> </form> </body>
</html>
</pre>
<p>This syntax <code>"{% url 'result' %}"</code> is Django templating language. It’s a link to the <code>result.html</code>. Remember the name argument in the <code>path()</code> function in <code>urls.py</code>? That is another way to refer to the <code>result.html</code> URL. The <code>csrf_token</code> is for security reasons. It’s mandatory when a form is created.</p>
<p>Can you now see it’s from this form we get those names in the <code>result()</code> function? It is here that the data will be collected and sent to the <code>result()</code> function which processes the data, makes predictions, and displays the result in the <code>result.html</code>.</p>
<p>We now create the <code>result.html</code> file in the templates folder.</p>
<pre class="EnlighterJSRAW" data-enlighter-language="html" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group=""><!DOCTYPE html>
<html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Result</title> </head> <body> <h1 style=“color:blue”>Prediction</h1> <p>Verdict: {{ result }} </p> </body>
</html>
</pre>
<p>It’s very simple. The <code>{{ result }}</code> is a variable that will be rendered to this web page. Go back to your <code>result()</code> function to recall if you have forgotten.</p>
<p>That’s it. We are done. Thanks for staying with me so far in this tutorial. Let’s check what we have done. Run the local server.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="708" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-348.png" alt="" class="wp-image-1242444" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-348.png 708w, https://blog.finxter.com/wp-content/uploads/2023/03/image-348-300x169.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
</div>
<p>That is the home page. Everything in the form is displayed. Enter details and make predictions. Remember, only numbers will be in the form. If you are lost, check the dataset using Pandas.</p>
<div class="wp-block-image">
<figure class="aligncenter size-full"><img decoding="async" loading="lazy" width="708" height="398" src="https://blog.finxter.com/wp-content/uploads/2023/03/image-349.png" alt="" class="wp-image-1242445" srcset="https://blog.finxter.com/wp-content/uploads/2023/03/image-349.png 708w, https://blog.finxter.com/wp-content/uploads/2023/03/image-349-300x169.png 300w" sizes="(max-width: 708px) 100vw, 708px" /></figure>
</div>
<p>If you encounter an error saying, <code><em>“No such file or directory: 'titanic.pkl'”</em></code>, you may have to manually run the <code>model.py</code> to generate the file.</p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4a1.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Recommended</strong>: <a href="https://blog.finxter.com/pandas-quickstart/" data-type="post" data-id="16511" target="_blank" rel="noreferrer noopener">5 Minutes to Pandas</a></p>
<h2>Conclusion</h2>
<p>Congratulations!! You are not only a data scientist but also a <strong><a href="https://blog.finxter.com/django-developer-income-and-opportunity/" data-type="post" data-id="248182" target="_blank" rel="noreferrer noopener">Django developer</a></strong>. </p>
<p>In this tutorial, we performed <strong>Machine Learning using Logistic Regression</strong>. </p>
<p>We demonstrated how to implement it using Django. </p>
<p class="has-base-background-color has-background"><img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4bb.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> <strong>Exercise</strong>: As an assignment, can you use what you have learned to make predictions on the iris dataset, the hello world of data science? Give it a try using Django. </p>
<p>You are welcome. <img src="https://s.w.org/images/core/emoji/14.0.0/72x72/1f4aa.png" alt="?" class="wp-smiley" style="height: 1em; max-height: 1em;" /> </p></p>
</div>
https://www.sickgaming.net/blog/2023/03/25/how-i-created-a-machine-learning-web-application-using-django/