In this tutorial, we will walk you through creating a brain tumor prediction web application using Django, a popular web framework for Python. This project will allow users to upload an MRI image and receive a prediction on whether the brain tumor is present, as well as what type of tumor it is, using a pre-trained machine learning model. We will explain each step in detail, so even beginner-level students can follow along.
Prerequisites
Before we start, make sure you have the following tools installed:
Python 3.x: You can download Python from the official site here.
Django: We will use Django to build our web application.
Project Overview
We will divide the project into several stages:
Set up a Django project and virtual environment.
Create the necessary Django app for brain tumor detection.
Build forms to upload images.
Integrate a machine learning model to make predictions.
Display the prediction results to the user.
Step 1: Setting Up the Django Project
Create a directory for your project and navigate to it using the terminal.
mkdir brain_tumor_prediction
cd brain_tumor_prediction
Create a virtual environment using the following command:
python -m venv env
Activate the virtual environment:
On Windows:
env\Scripts\activate
On macOS/Linux:
source env/bin/activate
Install Django within the virtual environment:
pip install django
Create a new Django project:
django-admin startproject brain_tumor
Navigate into the project directory:
cd brain_tumor
Run the Django development server:
python manage.py runserver
If everything is set up correctly, you should see the default Django welcome page in your browser at http://127.0.0.1:8000/.
Step 2: Create the Brain Tumor Detection App
Create a Django app within your project:
python manage.py startapp brain_tumor_detection
Add the new app to your Django project's INSTALLED_APPS in the settings.py file:
INSTALLED_APPS = [
# other default apps
'brain_tumor_detection',
]
Step 3: Setting Up the Folder Structure and Files
In the brain_tumor project folder, your structure will look like this:
brain_tumor/
│
├── brain_tumor/
│ ├── __init__.py
│ ├── settings.py
│ ├── urls.py
│ ├── wsgi.py
│ ├── asgi.py
│ └── ...
│
├── brain_tumor_detection/
│ ├── migrations/
│ ├── __init__.py
│ ├── admin.py
│ ├── apps.py
│ ├── models.py
│ ├── forms.py
│ ├── views.py
│ ├── urls.py
│ └── templates/
│ ├── upload_image.html
│ └── prediction_result.html
│
├── db.sqlite3
├── manage.py
└── ...
Code for apps.py
We will create a model for storing the uploaded images and their corresponding predictions.
from django.apps import AppConfig
class BrainTumorDetectionConfig(AppConfig):
default_auto_field = "django.db.models.BigAutoField"
name = "brain_tumor_detection"
Code for forms.py
Here, we will create a form to handle image uploads.
from django import forms
class ImageUploadForm(forms.Form):
image_file = forms.ImageField(
label='Upload Image',
widget=forms.ClearableFileInput(attrs={'class': 'upload-input'}),
)
Step 4: Setting Up URLs
We need to define URL patterns to handle the image upload and display the prediction result.
Code for urls.py in the brain_tumor_detection folder:
from django.urls import path
from .views import upload_image, prediction_result
app_name = 'brain_tumor_detection'
urlpatterns = [
path('', upload_image, name='upload_image'),
path('prediction/<int:image_id>/', prediction_result, name='prediction_result'),
]
In the main brain_tumor/urls.py, include the app's URLs:
from django.contrib import admin
from django.urls import include, path
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
path("admin/", admin.site.urls),
path('', include('brain_tumor_detection.urls')),
]
if settings.DEBUG:
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
Step 5: Setting Up Views
We will now handle the logic for processing image uploads and making predictions using a pre-trained model.
Code for views.py:
from django.shortcuts import render, redirect
from .forms import ImageUploadForm
from .models import Image
import tensorflow as tf
import numpy as np
from PIL import Image as PilImage
import io
# Load your trained model
model = tf.keras.models.load_model('./brain_tumor_detection/best_model.h5')
# Define a function for image prediction
def predict_image(image):
# Preprocess the image if necessary (e.g., resize, normalize, etc.)
image = image.resize((150, 150)) # Resize the image to match your model input shape
image = np.array(image) / 255.0 # Normalize pixel values between 0 and 1
# Expand dimensions to create a batch of size 1
image = np.expand_dims(image, axis=0)
if image.shape[-1] != 3:
image = image[:,:,:,:3]
# Perform prediction
prediction = model.predict(image)
# Get the predicted class index
predicted_class_index = np.argmax(prediction)
# Define your class labels
class_labels = ['Sorry you have Glioma Tumor',
'Sorry you have Meningioma Tumor',
'Hey! you do not have any Tumor',
'Sorry you have Pituitary Tumor']
# Get the predicted class label
predicted_class_label = class_labels[predicted_class_index]
return predicted_class_label
def prediction_result(image_id):
image = Image.objects.get(id=image_id)
context = {'image': image}
return context
def upload_image(request):
if request.method == 'POST':
form = ImageUploadForm(request.POST, request.FILES)
if form.is_valid():
image_file = form.cleaned_data['image_file']
# Create a PIL Image object from the uploaded file
pil_image = PilImage.open(image_file)
# Perform prediction on the image
prediction = predict_image(pil_image)
# Create a new Image instance and save the prediction
image = Image(image_file=image_file, prediction=prediction)
image.save()
context = prediction_result(image.id)
return render(request, 'prediction_result.html', context)
else:
form = ImageUploadForm()
context = {'form': form}
return render(request, 'upload_image.html', context)
Step 6: Creating HTML Templates
We'll now create the front-end for our app to allow users to upload images and view predictions.
upload_image.html
This page allows users to upload an image.
<!DOCTYPE html>
<html>
<head>
<title>Brain Tumor Detection</title>
<style>
body {
font-family: Arial, sans-serif;
}
.container {
display: flex;
align-items: center;
justify-content: center;
height: 90%;
}
.heading-container {
background-color: skyblue;
display: flex;
align-items: top;
justify-content: center;
height: 10%;
width: 30%;
margin-left: 35%;
border-radius: 10px;
}
.left-panel {
background-color: lightslategray;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 5%;
margin: 5%;
border-radius: 10px;
}
.right-panel {
background-color: white;
flex: 1;
display: flex;
align-items: center;
justify-content: center;
margin: 5%;
padding: 2%;
}
#image-preview {
max-width: 400px;
max-height: 400px;
}
.button {
margin-bottom: 10px;
padding: 10px 20px;
border-radius: 5px;
background-color: #4CAF50;
color: white;
font-size: 16px;
text-align: center;
cursor: pointer;
}
.button:hover {
background-color: #45a049;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div class="heading-container">
<h1>
Brain Tumor Detection
</h1>
</div>
<div class="container">
<div class="left-panel">
<h2>Choose/ Upload Image</h2>
<form id="upload-form" method="post" enctype="multipart/form-data" action="">
{% csrf_token %}
<input type="file" id="image-upload" name="image_file" class="hidden">
<label for="image-upload" class="button">Choose Image</label>
<button type="submit" id="predict-button" class="button" disabled>Predict</button>
</form>
</div>
<div class="right-panel">
<img id="image-preview" src="#" alt="Preview" class="hidden">
</div>
</div>
<script>
const imageUpload = document.getElementById('image-upload');
const predictButton = document.getElementById('predict-button');
const imagePreview = document.getElementById('image-preview');
const uploadForm = document.getElementById('upload-form');
imageUpload.addEventListener('change', function(e) {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onload = function() {
imagePreview.src = reader.result;
imagePreview.classList.remove('hidden');
predictButton.disabled = false;
}
reader.readAsDataURL(file);
}
});
</script>
</body>
</html>
prediction_result.html
This page shows the prediction result after the image has been uploaded.
<!DOCTYPE html>
<html>
<head>
<title>Prediction Result</title>
<style>
body {
font-family: Arial, sans-serif;
color: #fff;
margin: 2;
padding: 0;
min-height: 100vh;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.prediction-card {
width: 400px;
margin: 0 auto;
background: linear-gradient(to bottom right, #3498db, #2c3e50);;
border-radius: 5px;
padding: 20px;
text-align: center;
}
.prediction-card h2 {
margin-top: 0;
}
.prediction-card p {
margin-bottom: 20px;
}
.back-button {
display: block;
width: 100px;
margin: 20px auto;
background-color: #3498db;
color: #fff;
padding: 10px 20px;
text-decoration: none;
text-align: center;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Prediction Result</h1>
<div class="prediction-card">
<h2 style="color: black;">Prediction:</h2>
<p style="color: black;">{{ image.prediction }}</p>
<img src="{{ MEDIA_URL }}{{ image.image_file.url }}" alt="Uploaded Image" width="200">
</div>
</body>
</html>
Step 7: Setting Up Static and Media Files
In your settings.py, add the following to handle media files:
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
This allows Django to serve the uploaded images properly.
Step 8: Running Migrations
Before running the application, apply migrations to set up the database:
python manage.py migrate
Step 9: Testing the Application
Start the server:
python manage.py runserver
Open http://127.0.0.1:8000/Â in your browser. You should see the image upload form.
After uploading an MRI image, the prediction result will be displayed on the results page.
Project Demo Video
You can see we have successfully built a brain tumor prediction web application using Django. This tutorial covers how to create the basic app structure, set up forms, and integrate a machine learning model for image classification. You can now expand this project by adding more features, such as user authentication, more advanced image processing, or even deploying the app to a cloud platform.
If you require any assistance with this project or Machine Learning projects, please do not hesitate to contact us. We have a team of experienced developers who specialize in Machine Learning and can provide you with the necessary support and expertise to ensure the success of your project. You can reach us through our website or by contacting us directly via email or phone.
Comments