DEV Community: Doyin Elugbadebo

Flask-Powered Object Detection for Real-Time Analysis

Doyin Elugbadebo — Sat, 15 Mar 2025 17:21:21 +0000

Computer vision is revolutionizing industries, from autonomous driving to real-time surveillance and healthcare diagnostics. One of the most powerful techniques in this field is the YOLO (You Only Look Once) - a state-of-the-art computer vision framework, known for its speed and accuracy in detecting multiple objects in a single image.

In this article, we'll walk through the process of building a Flask-based real-time object detection the YOLO framework.

By the end of this tutorial, you'll have a fully functional Flask Application that not only serves a single YOLO-based object detection, but also allows you to upload multiple images, process them in parallel, and download the results as a ZIP file.

Prerequisites

Before getting started, ensure you have the following:

Python 3.8+ installed and properly set up
Basic understanding of Flask, and HTTP requests
A basic understanding of what object detection means

The Yolo Framework

YOLO (You Only Look Once) is a state-of-the-art object detection algorithm known for its speed and accuracy. Unlike traditional object detection methods that rely on region proposals and multiple passes over an image (e.g. R-CNN, Faster R-CNN), YOLO treats detection as a single regression problem, predicting bounding boxes and class probabilities in one forward pass of the neural network.

We'll be using both YOLOv3 and YOLOv12 to gain a broader understanding of the YOLO framework and its evolution over time. Here's why:

YOLOv3 has been a time-tested model known for its balance between computational efficiency and detection accuracy, thanks to its Darknet-53 backbone. It remains widely used for real-time object detection tasks.
YOLOv12, the latest iteration in the YOLO family, released on February 18th, 2025. It introduces modern enhancements, improved accuracy, and better optimization for various hardware. The model achieves both a lower latency and higher mAP when benchmarked on the Microsoft COCO dataset.

By working with both versions, you'll not only master object detection but also learn how to transition between models efficiently for different use cases.

Why use the Flask Framework

If you're new to Flask, it's a lightweight and flexible micro web framework for Python, designed to make web development quick and easy. According to the Flask website, it provides the essentials for building web applications without enforcing too many restrictions.

That being said, being a minimalistic framework doesn't mean Flask lacks power. On the contrary, it offers extensive flexibility. You can extend it with various extensions and third-party libraries to add features like authentication, database integration, and more, making it suitable for production-ready applications.

Let's dive in!.

STEP 1: Setting Up Your Virtual Environment

When working on machine learning projects, it's always a good practice to use a virtual environment to isolate dependencies and avoid conflicts.

Create and activate the virtual environment using:

# Create virtual environment
python -m venv flask_env

# Activate it: on Windows:
flask_env\Scripts\activate

# On Linux/macOS:
source flask_env/bin/activate

Once the virtual environment is activated, install Flask an other necessary dependencies such as Numpy and OpenCV (essential for image processing).

pip install flask
pip install opencv-python opencv-python-headless numpy

STEP 2: Set Up the Flask Application

Flask prioritizes simplicity. Its minimalist design allows you to run an entire Flask app with just a single app.py file.

That's exactly what we'll do.

To proceed, make sure your virtual environment is activated. Next, create a directory for your project:

mkdir flask_object_detection  
cd flask_object_detection

Next, create a new app.py file with the following code:

from flask import Flask

# Create an instance of the Flask class
app = Flask(__name__)

# Define a route and a view function
@app.route('/')
def home():
    return "Hello, Flask!"

# Run the app
if __name__ == '__main__':
    app.run(debug=True)

This script initializes a Flask web application by importing the Flask class from the flask module. It creates an instance of the Flask application, named app, and defines a route ('/') that maps to the home function.

When accessed, this route returns a simple "Hello, Flask!" message. Additionally, the script includes a condition to ensure that the Flask application starts in debug mode, which is particularly useful for auto-reloading and detailed error tracking during development.

Now start the Flask server

python app.py

By default, Flask runs on http://127.0.0.1:5000/.

Open this URL in your browser, and you should see "Hello, Flask!" displayed.

STEP 3: Set Up Image Upload Functionality in Flask

Now that our basic Flask app is up and running, the next step is to implement image upload functionality.

To do this, we'll configure an upload folder to store incoming images and create a dedicated route to handle the upload process. We'll also import the necessary libraries that will support image processing and detection as we move forward.

Go ahead and update your app.py file with the following code:

from flask import Flask, request, render_template, send_file, flash, redirect, url_for, send_from_directory
from werkzeug.utils import secure_filename
import cv2
import numpy as np
import random
import os
import uuid
import zipfile
from io import BytesIO

app = Flask(__name__)
app.secret_key = os.urandom(24)

# Configure upload folders
app.config['UPLOAD_FOLDER'] = ‘uploads’
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'bmp', 'tiff'}
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']


# ---------- other code here -----------


if __name__ == "__main__":
     app.run(debug=True, use_reloader=False)

Code Explanation:

UPLOAD_FOLDER specifies the directory where uploaded images will be saved. It’s set to 'uploads', and the directory is automatically created at runtime using os.makedirs() if it doesn’t already exist.
ALLOWED_EXTENSIONS defines a set of accepted image file types. Only files with these extensions will be allowed during upload (e.g., .png, .jpg, .jpeg, etc.).
The allowed_file() function is a helper that checks whether an uploaded file has a valid extension. It ensures that only image files (based on the defined set) are processed by the app.
app.secret_key is required by Flask to securely sign session cookies and enable features like flashing messages. It's generated here using os.urandom(24), which provides a cryptographically secure random value.

Step 4: Download and Set Up YOLO Pre-trained Files

To begin with, download the YOLO pre-trained weights and configuration files from this link.

Once downloaded, create a new folder named "models" at the root folder of the application and extract the downloaded files there.

Ensure that your folder contains the following essential files:

yolov3.weights: This file contains the pre-trained weights for the YOLOv3 model. These weights enable the model to perform object detection based on the features it has learned during training.
yolov3.cfg: The configuration file that defines the model's architecture, including layer configurations, filter sizes, and other parameters necessary for building the YOLOv3 network.
coco.names: A text file that lists the class names from the COCO dataset. The YOLOv3 model has been retrained on the COCO dataset, which includes more than 80 common object categories such as people, animals, and everyday objects.
yolov12nt: The Tiny version of YOLOv12 Nano, designed for ultra-fast performance with lower computational requirements.

The first three files are required by YOLOv3 while YOLOv12 makes use of the last file.

STEP 5: Modelling Using Yolov3:

YOLOv3 is a significant iteration in the YOLO series, known for its remarkable object detection capabilities. Developed by Joseph Redmon and Ali Farhadi, YOLOv3 improves upon its predecessors (YOLOv1 and YOLOv2) by leveraging a deep neural network with multiple detection scales.

To work with YOlOv3, we'll be using OpenCV DNN module.

Now, make sure you have the extracted files in the models folder. Once that's settled, paste the following code after the configuration code in app.py:

# Load the YOLOv3 model configuration and weights
model = cv2.dnn.readNet('models/yolov3.weights', 'models/yolov3.cfg')

# Get all the layer names from the YOLO model
layer_names = model.getLayerNames()

# Identify the output layers (layers with no connections going forward)
unconnected_layers = model.getUnconnectedOutLayers()
output_layers = [layer_names[i[0] - 1] if isinstance(i, np.ndarray) else layer_names[i - 1] 
                 for i in unconnected_layers]

# Load COCO class names from file
with open('models/coco.names', 'r') as f:
    classes = [line.strip() for line in f.readlines()]

This code sets up the YOLOv3 object detection model by first loading its pre-trained weights and configuration using cv2.dnn.readNet(), then retrieving all the layer names from the model with getLayerNames(). It identifies the output layers—which are the layers responsible for generating detection results—using getUnconnectedOutLayers(), and formats them correctly depending on whether the output is an array or integer. Finally, it loads the list of object class names from the COCO dataset by reading each line from the coco.names file and storing them as a stripped string in the classes list. This setup fully prepares the YOLO model to perform object detection tasks.

With this setup, your YOLO model is now ready to perform object detection using the COCO dataset. You can move on to building the detection logic that takes an image input, runs inference, and draws bounding boxes.

STEP 6: Define Routes and Templates for Image Processing

To handle image uploads and display the results, you'll need to define the necessary Flask routes and create corresponding HTML templates.

Start by creating a templates/ directory at the root of your project.

Inside this folder, create a file named index.html and paste the following HTML code into it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object Detection</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <nav class="navbar navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">Object Detection</a>
        </div>
    </nav>

    <div class="container py-5">
        <div class="text-center mb-4">
            <h1 class="display-4 text-primary">Object Detection</h1>
            <p class="lead">Upload images to detect objects using Yolov3 or Yolo11 Algorithms</p>
        </div>

        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card shadow">
                    <div class="card-body">
                        <form action="/process" method="post" enctype="multipart/form-data" id="uploadForm">
                            <div class="mb-3">
                                <input type="file" name="files" 
                                       class="form-control" accept="image/*" multiple>
                                <div class="form-text">
                                    Select one or multiple images (PNG, JPG, JPEG, BMP, TIFF)
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary w-100">
                                Process Image
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div> 

        <!-- Loading Spinner -->
        <div id="loadingSpinner" class="d-none mt-4 text-center">
            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-3 text-muted">Processing images, please wait...</p>
        </div>  
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        document.getElementById('uploadForm').addEventListener('submit', function() {
            document.getElementById('loadingSpinner').classList.remove('d-none');
            this.querySelector('button').disabled = true;
        });
    </script>
</body>
</html>

Also create a result.html file inside the templates folder. This page will display the image after processing:

`result.html` – Displaying the Processed Image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Processing Result</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
    <nav class="navbar navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" href="/">Object Detection</a>
        </div>
    </nav>

    <div class="container py-5">
        <div class="card shadow">
            <div class="card-body text-center">
                <h3 class="mb-4">✅ Processed Successfully</h3>
                <div class="alert alert-success">
                    Image processed with ID: {{ process_id }}
                </div>
                <img src="{{ image_url }}" class="img-fluid rounded" alt="Processed Result">
                <div class="mt-4">
                    <a href="/" class="btn btn-primary">Process Another Image</a>
                </div>
        </div>
        </div>
    </div>
</body>
</html>

Your project folder should look like this:

flask_object_detection/
├── app.py
├── templates/
│   ├── index.html
│   └── result.html
└── static/
    └── uploads/       # This folder will store uploaded images

After this, replace the index route in app.py with this:

@app.route('/')
def index():
    return render_template('index.html')

Next, define routes to handle file uploads, image processing and post-processing

@app.route('/uploads/<filename>')
def serve_processed_image(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

@app.route('/process', methods=['POST'])
def process_files():
    if 'files' not in request.files:
        flash('No files selected', 'error')
        return redirect(url_for('index'))

    files = request.files.getlist('files')
    if len(files) == 0 or files[0].filename == '':
        flash('No files selected', 'error')
        return redirect(url_for('index'))

    process_id = uuid.uuid4().hex  # Unique ID for this processing session
    processed_files = []

    for file in files:
        if file and allowed_file(file.filename):
            try:
                # Process image
                img = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)

                #YOLOv3 detection and drawing code:
                boxes, confidences, class_ids, indexes = detect_objects(img)
                if len(indexes) > 0:
                    for i in indexes.flatten():
                        x, y, w, h = boxes[i]
                        label = f"{classes[class_ids[i]]}: {confidences[i]:.2f}"
                        color = [random.randint(0, 255) for _ in range(3)]
                        cv2.rectangle(img, (x, y), (x + w, y + h), color, 2)
                        cv2.putText(img, label, (x, y - 5), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)

                # Save processed image with unique name
                filename = f"{process_id}_{secure_filename(file.filename)}"
                save_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
                cv2.imwrite(save_path, img) #YOLOv3 Implementation
                processed_files.append(filename)

            except Exception as e:
                app.logger.error(f"Error processing {file.filename}: {str(e)}")
                flash(f'Error processing {file.filename}', 'error')

    if len(processed_files) == 0:
        flash('No files processed successfully', 'error')
        return redirect(url_for('index'))

    # Handle single file response
    if len(processed_files) == 1:
        return render_template('result.html', 
                             image_url=url_for('serve_processed_image', 
                             filename=processed_files[0]),
                             process_id=process_id)

To make sure we're on the same page, here is the updated app.py at this point

from flask import Flask, request, render_template, send_file, flash, redirect, url_for, send_from_directory
from werkzeug.utils import secure_filename
import cv2
import numpy as np
import random
import os
import uuid
import zipfile
from io import BytesIO

app = Flask(__name__)
app.secret_key = os.urandom(24)


# Configure upload folders
#-------------------------------------
app.config['UPLOAD_FOLDER'] = 'static/uploads'
app.config['ALLOWED_EXTENSIONS'] = {'png', 'jpg', 'jpeg', 'bmp', 'tiff'}
os.makedirs(app.config['UPLOAD_FOLDER'], exist_ok=True)

def allowed_file(filename):
    return '.' in filename and \
           filename.rsplit('.', 1)[1].lower() in app.config['ALLOWED_EXTENSIONS']


#Yolov3 Implementation
#--------------------------------------
# Load the YOLO model configuration and weights
model = cv2.dnn.readNet('models/yolov3.weights', 'models/yolov3.cfg')
# Get all the layer names from the YOLO model
layer_names = model.getLayerNames()
# Identify the output layers (layers with no connections going forward)
unconnected_layers = model.getUnconnectedOutLayers()
output_layers = [layer_names[i[0] - 1] if isinstance(i, np.ndarray) else layer_names[i - 1] 
                 for i in unconnected_layers]

# Load COCO class names from file
with open('models/coco.names', 'r') as f:
    classes = [line.strip() for line in f.readlines()]


# Routes
#----------------------------------------
@app.route('/')
def index():
    return render_template('index.html')

@app.route('/uploads/<filename>')
def serve_processed_image(filename):
    return send_from_directory(app.config['UPLOAD_FOLDER'], filename)

@app.route('/process', methods=['POST'])
def process_files():
    if 'files' not in request.files:
        flash('No files selected', 'error')
        return redirect(url_for('index'))

    files = request.files.getlist('files')
    if len(files) == 0 or files[0].filename == '':
        flash('No files selected', 'error')
        return redirect(url_for('index'))

    process_id = uuid.uuid4().hex  # Unique ID for this processing session
    processed_files = []

    for file in files:
        if file and allowed_file(file.filename):
            try:
                # Process image
                img = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)

                #YOLOv3 detection and drawing code:
                boxes, confidences, class_ids, indexes = detect_objects(img)
                if len(indexes) > 0:
                    for i in indexes.flatten():
                        x, y, w, h = boxes[i]
                        label = f"{classes[class_ids[i]]}: {confidences[i]:.2f}"
                        color = [random.randint(0, 255) for _ in range(3)]
                        cv2.rectangle(img, (x, y), (x + w, y + h), color, 2)
                        cv2.putText(img, label, (x, y - 5), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)

                # Save processed image with unique name
                filename = f"{process_id}_{secure_filename(file.filename)}"
                save_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
                cv2.imwrite(save_path, img) #YOLOv3 Implementation
                processed_files.append(filename)

            except Exception as e:
                app.logger.error(f"Error processing {file.filename}: {str(e)}")
                flash(f'Error processing {file.filename}', 'error')

    if len(processed_files) == 0:
        flash('No files processed successfully', 'error')
        return redirect(url_for('index'))

    # Handle single file response
    if len(processed_files) == 1:
        return render_template('result.html', 
                             image_url=url_for('serve_processed_image', 
                             filename=processed_files[0]),
                             process_id=process_id)

if __name__ == "__main__":
     app.run(debug=True, use_reloader=False)

STEP 7: Start the Application

Start your Flask application by running:

python app.py

Then, open your web browser and navigate to http://localhost:5000/.

You should see the index page with the upload form. When we upload an image, it should be processed, and the result displayed on the result page.

However, the app won't process any images at this point because we've not defined the function that will handle the actual object detection process.

Here is the terminal output:

[2025-03-12 05:41:51,484] ERROR in app: Error processing 0_lCB37mwYtKFKJcrI.jpg: name 'detect_objects' is not defined

The error occurs because the detect_objects function is used in the '/process' route but hasn't been defined yet. Specifically, the issue arises from this line: boxes, confidences, class_ids, indexes = detect_objects(img), where the function is called but not implemented beforehand.

To handle the image processing logic, go back to app.py and paste the following code immediately after YOLOv3 implementation.

def detect_objects(img):
    height, width = img.shape[:2]
    blob = cv2.dnn.blobFromImage(img, 1/255.0, (416, 416), swapRB=True, crop=False)
    model.setInput(blob)
    outputs = model.forward(output_layers)

    boxes, confidences, class_ids = [], [], []
    for output in outputs:
        for detection in output:
            scores = detection[5:]
            class_id = np.argmax(scores)
            confidence = scores[class_id]
            if confidence > 0.5:
                box = detection[0:4] * np.array([width, height, width, height])
                (center_x, center_y, w, h) = box.astype("int")
                x = int(center_x - (w / 2))
                y = int(center_y - (h / 2))
                boxes.append([x, y, int(w), int(h)])
                confidences.append(float(confidence))
                class_ids.append(class_id)

    indexes = cv2.dnn.NMSBoxes(boxes, confidences, 0.5, 0.4)
    return boxes, confidences, class_ids, indexes

The detect_objects(img) function processes an input image by extracting its dimensions and converting it into a blob for a deep learning model, which then performs object detection. It filters detections with confidence above 0.5, calculates bounding box coordinates, and applies Non-Maximum Suppression (NMS) to remove redundant boxes before returning the final detections, confidence scores, class IDs, and retained indexes.

Restart the server and test again:

python app.py

Terminal output:

0: 448x640 1 person, 7506.0ms
Speed: 934.0ms preprocess, 7506.0ms inference, 1403.0ms postprocess per image at shape (1, 3, 448, 640)

0: 448x640 1 person, 831.0ms
Speed: 11.0ms preprocess, 831.0ms inference, 12.0ms postprocess per image at shape (1, 3, 448, 640)
127.0.0.1 - - [12/Mar/2025 05:33:36] "POST /process HTTP/1.1" 200 -
127.0.0.1 - - [12/Mar/2025 05:33:39] "GET /uploads/cb53a67b6db04b82910a1895d1a1887d_0_lCB37mwYtKFKJcrI_-_Copy_-_Copy.jpg HTTP/1.1" 200 -

STEP 8: Processing Multiple Images

Now, let’s process multiple Image file uploads. Go back to app.py and paste this after the single file code code snippet

# Handle multiple files as zip
    zip_filename = f"processed_images_{process_id}.zip"
    zip_buffer = BytesIO()

    with zipfile.ZipFile(zip_buffer, 'w', zipfile.ZIP_DEFLATED) as zip_file:
        for filename in processed_files:
            file_path = os.path.join(app.config['UPLOAD_FOLDER'], filename)
            zip_file.write(file_path, filename)

    zip_buffer.seek(0)

    response = send_file(zip_buffer,
                        mimetype='application/zip',
                        as_attachment=True,
                        download_name=zip_filename)

    # Add custom header to identify zip response
    response.headers['X-Content-Type'] = 'application/zip'
    return response

Ensure the server is running, then upload multiple image files through the application. The app will begin processing the images and automatically zip all the processed files.

Once processing is complete, the zipped file will be downloaded to your default Downloads directory.

With that, we can now switch from YOLOv3 model to YOLOv12.

STEP 9: Switching to Yolov12

YOLOv12 is an advanced object detection model that emphasizes attention mechanisms to enhance detection accuracy while maintaining real-time processing speeds. It was released on February 18, 2025 and was developed by Yunjie Tian, Qixiang Ye, David Doermann (Read the paper here). This model surpasses previous iterations, such as YOLOv10 and YOLOv11, by achieving higher mean Average Precision (mAP) scores with comparable or faster inference times.

Its architecture supports various tasks, including object detection, segmentation, classification, keypoint detection, and oriented bounding box detection.

First things first, note that YOLOv3 uses OpenCV’s DNN module, while YOLOv12 is accessed via ultralytics library, which has a different API.

So, go ahead to install ultralytics library

pip install ultralytics:

One more thing:- the original code for YOLOv3 involves loading the model with cv2.dnn.readNet, processing blobs, and handling outputs through specific layers. For YOLOv12, the Ultralytics model is more straightforward. The model is loaded directly with YOLO('model.pt'), and predictions are made with model.predict(), which returns a Results object.

Essentially, the key changes when transitioning to YOLOv12 lie in how the model is loaded and how the detection function is implemented. The traditional detect_objects function used in YOLOv3 where outputs are manually parsed and bounding boxes are manually calculated, will be replaced with a much simpler approach.

YOLOv12 handles most of the processing internally, allowing you to extract bounding boxes, confidence scores, and class IDs directly from the Results object. Additionally, YOLOv12 provides a built-in plot() method that automatically annotates the detected objects on the image. These improvements make the new detect_objects function significantly shorter, typically 5–10x more concise—and much less error-prone, as you no longer need to manually compute box coordinates or apply post-processing logic.

Now let's upgrade from the legacy YOLOv3 model to the more modern and efficient Ultralytics YOLO implementation.

In your app.py file, locate and replace the existing YOLOv3 model loading and the detect_objects() function with the Ultralytics-based approach.

Specifically, replace this section:

# ========== YOLOv3 Implementation (Original) ==========
model = cv2.dnn.readNet('models/yolov3.weights', 'models/yolov3.cfg')
layer_names = model.getLayerNames()
unconnected_layers = model.getUnconnectedOutLayers()
output_layers = [layer_names[i[0] - 1] if isinstance(i, np.ndarray) else layer_names[i - 1] 
                  for i in unconnected_layers]

def detect_objects(img):
    height, width = img.shape[:2]
    blob = cv2.dnn.blobFromImage(img, 1/255.0, (416, 416), swapRB=True, crop=False)
    model.setInput(blob)
    outputs = model.forward(output_layers)
    # ... rest of detection logic ...

With this:

# ========== YOLOv12 Implementation (New) ==========
from ultralytics import YOLO

# Load YOLOv12 model
model = YOLO('models/yolov12n.pt')  

def detect_objects(img):
    results = model.predict(img)
    return results[0].plot()  # Returns the annotated image directly

Also, replace this section under @app.route('/process', methods=['POST']):

# ======== REPLACE THIS SECTION ========
                 Old YOLOv3 detection and drawing code:
                 boxes, confidences, class_ids, indexes = detect_objects(img)
                 if len(indexes) > 0:
                     for i in indexes.flatten():
                         x, y, w, h = boxes[i]
                         label = f"{classes[class_ids[i]]}: {confidences[i]:.2f}"
                         color = [random.randint(0, 255) for _ in range(3)]
                         cv2.rectangle(img, (x, y), (x + w, y + h), color, 2)
                         cv2.putText(img, label, (x, y - 5), cv2.FONT_HERSHEY_SIMPLEX, 0.5, color, 2)

With this:

# New YOLOv12 detection and auto-annotation:
                results = model.predict(img)
                annotated_img = detect_objects(img)

Then immediately after that, replace:

cv2.imwrite(save_path, img)

with this:

cv2.imwrite(save_path, annotated_img)

Now, go ahead and test both single and multiple file uploads again. The images will be processed and outputted as expected.

There's More!

Congrats on making it this far! Now that we've reached the end of the guide, there are still several ways to enhance the app:

Improved File Handling: Currently, the app processes multiple images only as a zipped file and automatically downloads them. You can enhance this by displaying all processed images in a grid layout with an option to download them individually.
Video Processing Support: Right now, object detection works only for images. Extend the app to support video processing, allowing users to upload videos directly, analyze YouTube videos, or even process surveillance feeds in real time.
Authenticated API & User Dashboard: You can implement an authentication system where only registered users can access the app. Provide users with a dashboard where they can choose different object detection and segmentation methods for their needs.

If you need further customizations or guidance, feel free to reach out.

You can download the full code from the GitHub repo

Love the guide?

Your support will be appreciated

Conclusion

In conclusion, this guide has provided a comprehensive overview of how to build and deploy a real-time object detection API using Flask and YOLOv3 and YOLOv12. By examining the strengths and differences between these two versions of the YOLO framework, you now have a deeper understanding of how to optimize object detection models for speed, accuracy, and scalability.

References

How to Customize Django Authentication with Email Login

Doyin Elugbadebo — Fri, 14 Mar 2025 22:59:45 +0000

Introduction

An authentication system is a crucial component of any application that manages user access. Django, by default, uses a built-in user model that relies on a username field. While this is suitable for many use cases, it can be limiting if you need more flexibility, such as authenticating users with an email address or adding custom user fields. In such cases, you'll need to define a custom user model and extend the default authentication system to suit your project's requirements.

This article will guide you through building a custom user authentication system in Django. You'll learn how to:

Create a custom user model using email instead of username
Extend the default Django AbstractBaseUser and BaseUserManager
Configure Django to use your custom user model
Set up registration and login views and forms
Securely handle user passwords and sessions

Prerequisites:

Before you begin, make sure you have the following:

Familiarity with Django models, views, and forms (https://www.djangoproject.com/).
Understand fundamentals of HTML and Bootstrap.
Python installed on your system

Understanding Authentication and Authorization

When building secure web applications or services, two key concepts often arise: authentication and authorization. Although these terms are sometimes used interchangeably, they refer to distinct processes with different roles.

Authentication is the act of confirming the identity of a user or system. It answers the question, "Who are you?" This process ensures that the entity attempting to gain access is legitimate. Common methods include username-password combinations, biometric scans, and multi-factor authentication (MFA)

Authorization, in contrast, determines what an authenticated user or system is allowed to do. It answers the question, "What can you access?" Authorization defines access levels, dictating which resources or actions are available to a particular user based on roles, permissions, or policies. For example, an authenticated user may log into a system, but their authorization level will determine whether they can view, edit, or delete certain data.

NOTE: While Django provides several authentication methods, including token-based and social authentication. For this guide, we will use Django's built-in authentication system, which primarily relies on session-based authentication.

STEP 1: Setting Up Your Environment

To start with, let's create a virtual environment. It's best practice to always use one to manage your project dependencies efficiently.

# create a virtual environment 
python -m venv django_env 

# Activate it
cd django_env/bin/activate.

Install Django

Once the virtual environment is activated, install Django:

pip install Django

Next, create a new Django project.

django-admin startproject django_auth
cd django_auth

Lastly, create a new Django app.

python manage.py startapp userauth

Update settings.py

Make sure to add userauth to the INSTALLED_APPS list in settings.py

# django_auth_project/settings.py
INSTALLED_APPS = [
    …
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",

    'userauth.apps.UserauthConfig', # Add this line for the new auth app
]

Once done, proceed to start the development server:

python manage.py runserver

Navigate to http://127.0.0.1:8000/ to view the app.

At this point, the default homepage will be displayed. It is quite basic. So, in the next steps, we'll create a more appealing homepage.

Note: After starting the server, you might notice warnings about unapplied migrations. For now, you can ignore them—we’ll address migrations later when we extend the Django User model to include additional profile_picture and email fields.

You have 18 unapplied migration(s). Your project may not work properly until you apply the migrations for app(s): admin, auth, contenttypes, sessions.
Run 'python manage.py migrate' to apply them.
January 18, 2025 - 07:38:10
Django version 4.2.13, using settings 'djangoCustomLoginAndRegistrationSystem.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CTRL-BREAK.

STEP 2: Creating an Index Page

Let's create an index page for our application, which will also serve as a test endpoint for redirection after logout. Before that, you need to understand how Django manages template files-at the project level and the app level.

We'll use the app-level approach since it allows for better organization.

Inside the userauth app folder, create a new folder named templates. Within the templates folder, create another folder named userauth.

Once the folders are set up, create a file named index.html with the following content:

<!-- /userauth/templates/userauth/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Auth Application</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
    .bg-custom-grey {
        background-color: #eeeeee; /* Light grey color */
    }

     /* Custom teal color for the heading */
        .text-teal {
            color: #008080; /* Teal color */
        }
</style>
</head>
<body>
    <!-- Navbar Section -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-0">
        <div class="container">
            <a class="navbar-brand" href="#">Auth App</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Register</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

     <!-- Hero Section with Grey Background -->
    <section class="bg-custom-grey text-center py-5" style="height:370px;">
        <div class="container" style="padding-top: 40px;">
            <h1 class="display-4 text-teal">Django Authentication System</h1>
            <p class="lead"><em>A Bespoke user authentication system using Django's built-in authentication tools.</em></p>
            <a href="#" class="btn btn-light btn-lg">Learn More</a>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

The main highlights here are:

<a class="nav-link" href="#">Login</a>: A link to a login page.
<a class="nav-link" href="#">Register</a>: A link to a registration page.

Integrating the View into Django's MVC Architecture.

Django follows the MVC (Model-View-Controller) architecture, though it is commonly referred to as MVT (Model-View-Template) in Django terminology.

At this stage, we have created the necessary index template file, but we still need to define the view and set up the corresponding URL configuration (which acts as the controller) to complete this setup.

A model is not required at this point since we are not interacting with a database yet. However, as we progress and define a custom user model, we will fully implement the MVC/MVT architecture, integrating models for data management and persistence.

Let's start with the View Component

STEP 3: Define the View

Navigate to views.py inside the userauth app folder and add the following code:

# django_auth/userauth/views.py 
from django.shortcuts import render

# Homepage view
def index(request):
    return render(request, 'userauth/index.html')

Map the View to a URL

To make the view accessible, we need to define a URL route for it.
Create an urls.py file inside the userauth app folder (if it doesn’t already exist) and add the following code:

#django_auth/userauth/urls.py 
from django.urls import path
from . import views

urlpatterns = [
    path('', views.index, name='index'),  # Homepage route
]

Register App URLs in the Project-Level urls.py

Next, include the app-level urls.py in the project-level urls.py.

Open django_auth/urls.py and update it as follows:

#djangoCustomLoginAndRegistrationSystem/urls.py 
from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path("admin/", admin.site.urls),
    path('', include('userauth.urls')),  # Include `userauth` app URLs
]

Start the Server

After completing all the steps, start the Django development server:

python manage.py runserver

Now, visit http://127.0.0.1:8000/ in your browser. You should see the homepage successfully displayed.

Great!.

Now that our homepage is set up, let's integrate the Model component.

STEP 4: Creating Custom User Model

At the core of Django's built-in authentication system is the User model. This model stores essential user information such as: username, first_name, last_name, date_joined, and more.

While Django’s default authentication system is fully functional, there are cases where you might need additional fields—such as phone numbers, or profile pictures.

To handle this, Django provides the AbstractUser class, which allows us to extend the default User Model and introduce custom fields without modifying Django’s built-in structure.

Since our system will include a profile picture and email, we’ll extend the AbstractUser model to include these fields.

The Custom User Model

Open the models.py file inside your userauth app.

Paste the following code:

# /userauth/models.py 
from django.contrib.auth.models import AbstractUser
from django.db import models

class CustomUser(AbstractUser):
    profile_pic = models.ImageField(upload_to='profile_pics/', blank=True, null=True)
    email = models.EmailField(unique=True)  # Enforce unique emails

    # Fix reverse accessor conflicts with unique related names
    groups = models.ManyToManyField(
        'auth.Group',
        related_name='custom_users',
        blank=True,
        help_text='The groups this user belongs to. A user will get all permissions granted to each of their groups.',
        verbose_name='groups',
    )
    user_permissions = models.ManyToManyField(
        'auth.Permission',
        related_name='custom_users_permissions',
        blank=True,
        help_text='Specific permissions for this user.',
        verbose_name='user permissions',
    )

Highlights:

The code above sets up a custom user model by extending Django’s AbstractUser class. This approach inherits all the standard functionality of AbstractUser while enhancing it with additional fields, such as profile_pic and email.

The profile_pic field stores the user's profile picture, using models.ImageField to handle image uploads. The upload_to='profile_pics/' argument specifies the directory where uploaded images will be saved.
Setting blank=True and null=True ensures these fields can remain empty if needed.

Additionally, including the groups and user_permissions fields in a custom user model allows for integration with Django’s built-in permission and group management systems.

Note: If you want to create an entirely new user model from scratch without retaining the default fields of Django’s user model, you should use the AbstractBaseUser class instead of AbstractUser. This provides complete control over the user model’s structure and behavior.

With this in place, we now have a custom user model that supports profile picture and email field. But before then, we have to configure Django to recognize and use this model as the default authentication model.

So, open settings.py and add this line:

AUTH_USER_MODEL = ' userauth.CustomUser'

Now, it’s time to apply migrations.

For this demo, we’ll use SQLite, Django’s default database. However, you can easily switch to more robust databases like PostgreSQL or MySQL based on your project requirements.

To create the database, run the migrations by executing the following command:

python manage.py makemigrations userauth
python manage.py migrate

This will set up the necessary database tables and prepare your application for use.

OUTPUT:

Migrations for 'userauth':
  userauth\migrations\0001_initial.py
    - Create model CustomUser

Operations to perform:
  Apply all migrations: admin, auth, contenttypes, sessions, userauth
Running migrations:
  Applying contenttypes.0001_initial... OK
  Applying contenttypes.0002_remove_content_type_name... OK
  Applying auth.0001_initial... OK
  Applying auth.0002_alter_permission_name_max_length... OK
  Applying auth.0003_alter_user_email_max_length... OK
  Applying auth.0004_alter_user_username_opts... OK
  Applying auth.0005_alter_user_last_login_null... OK
  Applying auth.0006_require_contenttypes_0002... OK
  Applying auth.0007_alter_validators_add_error_messages... OK
  Applying auth.0008_alter_user_username_max_length... OK
  Applying auth.0009_alter_user_last_name_max_length... OK
  Applying auth.0010_alter_group_name_max_length... OK
  Applying auth.0011_update_proxy_permissions... OK
  Applying auth.0012_alter_user_first_name_max_length... OK
  Applying userauth.0001_initial... OK
  Applying admin.0001_initial... OK
  Applying admin.0002_logentry_remove_auto_add... OK
  Applying admin.0003_logentry_add_action_flag_choices... OK
  Applying sessions.0001_initial... OK

Next, we’ll need to create forms for user registration and login in userauth/forms.py.

STEP 5: Create Registration Form

Django's authentication system comes with built-in features like LoginView and LogoutView, along with their corresponding routes and base forms such as the AuthenticationForm. This setup simplifies the login and logout processes, requiring only the creation of template views.

However, Django does not provide a built-in solution for registration or sign-up forms. This means you’ll need to create a custom registration form to handle user sign-ups.

To achieve this, we'll create a CustomUserCreationForm by subclassing Django's generic UserCreationForm.

The UserCreationForm is designed to handle user creation but is tied to Django's default User model. By customizing it, we can adapt it to work with our custom user model- in this case, using an email address as the primary identifier.

So, inside your userauth app, create a new file named forms.py and add the following code:

# /userauth/forms.py 
from django import forms
from django.contrib.auth.forms import UserCreationForm
from .models import CustomUser

class CustomUserCreationForm(UserCreationForm):
    email = forms.EmailField(required=True, max_length=254)  # Make email required

    class Meta:
        model = CustomUser
        fields = ['username', 'email', 'password1', 'password2']
        widgets = {
            'username': forms.TextInput(attrs={'class': 'form-control'}),
            'email': forms.EmailInput(attrs={'class': 'form-control'}),
            'password1': forms.PasswordInput(attrs={'class': 'form-control'}),
            'password2': forms.PasswordInput(attrs={'class': 'form-control'}),
        }

Note: In the form, I included both username and email fields. Both fields are configured to be unique, and they will work seamlessly together because we extended the AbstractUser class. This approach retains the existing user model fields while adding new ones. Alternatively, you can simplify the registration process by using only the email field for sign-up and allowing users to choose a unique username later on their profile page.

Next Steps?

Now that we've created our registration form, the next steps are to:

Set up authentication views to handle registration, login, and logout.
Create corresponding HTML templates for user input and interaction.

Let's move on to implementing the views!

STEP 6: Create Views for Registration, Login, and Logout

Before diving into the code, let’s quickly understand the workflow:

Registration Workflow:

When a user accesses the registration page, the RegisterView class handles the process. It renders the CustomUserCreationForm using the register.html template (which we'll create later).
When the user submits the form, the system validates the input fields. If the form is valid, the user's credentials are saved, and the user is automatically logged in and redirected to their profile page (profile.html), where a welcome message displays their username.

Profile Access Workflow:

Accessing the profile page requires authentication.
If a logged-in user accesses the profile page, the profile.html template is rendered.
If an unauthenticated user tries to access the profile page, they are redirected to the login page (login.html).

Login and Logout Workflow:

The CustomLoginView handles user login, rendering the login.html template.
Upon successful login, the user is redirected to their profile page.
The LogoutView handles user logout, redirecting the user to the homepage (index.html) after logout.

Implementing the Logic

Open your views.py file and add the following code:

# userauth/views.py
from django.shortcuts import render, redirect
from django.urls import reverse_lazy
from django.views.generic import TemplateView, CreateView
from django.contrib.auth import login
from django.contrib.auth.mixins import LoginRequiredMixin
from django.contrib.messages.views import SuccessMessageMixin
from .forms import CustomUserCreationForm
from django.contrib.auth.views import LoginView

# Homepage view
def index(request):
    return render(request, 'userauth/index.html')

class RegisterView(SuccessMessageMixin, CreateView):
    template_name = 'userauth/register.html'
    form_class = CustomUserCreationForm
    success_url = reverse_lazy('profile')
    success_message = "Registration successful. Welcome!"

    def form_valid(self, form):
        # Save the user and log them in
        user = form.save()
        login(self.request, user)
        return super().form_valid(form)

class CustomLoginView(LoginView):
    template_name = 'userauth/login.html'

class ProfileView(LoginRequiredMixin, TemplateView):
    template_name = 'userauth/profile.html'

Explanation of the Code:

The above code uses CustomUserCreationForm to handle user registration, with a logic designed to automatically logs in the user after successful registration and redirects them to the profile page. For login access, CustomLoginView is called which renders the login.html template and subsequently redirect authenticated users to their profile page. The ProfileView requires authentication (using LoginRequiredMixin); renders the profile.html template and passes the logged-in user’s username to the context.(check auhenticity). Lastly, the CustomLogoutView handles user logout and redirects to the homepage (index.html).

Note: Django offers two types of views, - The function-based view and class-based view. I have used the class-based form here by subclassing the Django generic view CreateView class for the RegisterView and LoginView for CustomLoginView class

Now that we've completed the views, let's map their corresponding URLs to them.

STEP 7: Create URLs for the Views

Here, we'll define URLs for registration, login, and logout and profile views.

Update userauth/urls.py with the following code

# userauth/urls.py
from django.urls import path
from django.contrib.auth.views import LogoutView
from .views import RegisterView, ProfileView, CustomLoginView
from . import views

urlpatterns = [
    path('', views.index, name='index'),  # Home page view
    path('register/', RegisterView.as_view(), name='register'),
    path('profile/', ProfileView.as_view(), name='profile'),
    path('login/', CustomLoginView.as_view(), name='login'),
    path('logout/', LogoutView.as_view(next_page='index'), name='logout'),  # Redirect to index page after logout
]

Great! Now, let's integrate the final piece of the puzzle—creating template files—to complete our user authentication system. We'll start with the registration template.

STEP 8: Creating the Registration Template

Navigate to the userauth/templates/userauth/ directory and create a new file named register.html. Once created, add the following code inside it:

<!-- /userauth/templates/userauth/register.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Registration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    {% if messages %}
    <div class="messages">
    <!--<div class="container mt-3">-->
        {% for message in messages %}
            <div class="alert alert-{{ message.tags|default:'info' }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    </div>
    {% endif %}

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-0">
        <div class="container">
            <a class="navbar-brand" href="#">Auth App</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'register' %}">Register</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="container-fluid vh-100 d-flex">
        <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
            <h2 class="mb-4">Create an account</h2>
            <form id="register-form" class="w-75" method="post" action="{% url 'register' %}">
                {% csrf_token %}
                {{ form.as_p }}
                <div class="d-grid">
                    <button type="submit" class="btn btn-dark">Register</button>
                </div>
            </form>
            <p class="mt-3">Already have an account? <a href="{% url 'login' %}" class="text-dark fw-bold text-decoration-none">Log in</a></p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Now, start the development server:

python manage.py runserver

Then, navigate to http://localhost:8000/register in your browser.

At this point, the registration page is displayed. However, the design is quite plain, and Django's default warning messages don't align with our intended UI. To achieve a better user experience, we will replace the existing register.html template with a more visually appealing one.

Replace `register.html`

Replace current register.html with the following code:

<!-- /userauth/templates/userauth/register.html -->

{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid vh-100 d-flex">
        <!-- Left Section -->
        <div class="col-lg-6 bg-dark text-white d-flex flex-column justify-content-center align-items-center">
            <h1 class="mb-3">Pi-Health Hub</h1>
            <p class="mb-5">Create your account to get started</p>
            <img src="{% static 'assets/mri.png' %}" alt="Checkout Illustration" class="img-fluid" style="max-width: 400px;">
        </div>

        <!-- Right Section -->
        <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
            <h2 class="mb-4">Create an account</h2>
            <form id="register-form" class="w-75" method="post">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="username" class="form-label">Username</label>
                    <input type="text" id="username" name="username" class="form-control" placeholder="Choose a username" required>
                </div>
                <div class="mb-3">
                    <label for="email" class="form-label">Email Address</label>
                    <input type="email" id="email" name="email" class="form-control" placeholder="Enter your email" required>
                </div>
                <div class="mb-3">
                    <label for="password1" class="form-label">Password</label>
                    <input type="password" id="password1" name="password1" class="form-control" placeholder="Enter a password" required>
                </div>
                <div class="mb-3">
                    <label for="password2" class="form-label">Confirm Password</label>
                    <input type="password" id="password2" name="password2" class="form-control" placeholder="Confirm your password" required>
                </div>
                <div class="d-grid">
                    <button type="submit" class="btn btn-dark">Register</button>
                </div>
            </form>
            <p class="mt-3">Already have an account? <a href="{% url 'login' %}" class="text-dark fw-bold text-decoration-none">Log in</a></p>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Create **login.html**

Create a new file named login.html and add the following code:

<!-- /userauth/templates/userauth/login.html -->
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container-fluid vh-100 d-flex">
        <!-- Left Section -->
        <div class="col-lg-6 bg-dark text-white d-flex flex-column justify-content-center align-items-center">
            <h1 class="mb-3">Pi-Health Hub</h1>
            <p class="mb-5">Login to access your account</p>
            <img src="{% static 'assets/mri.png' %}" alt="Checkout Illustration" class="img-fluid" style="max-width: 400px;">
        </div>

        <!-- Right Section -->
        <div class="col-lg-6 d-flex flex-column justify-content-center align-items-center">
            <h2 class="mb-4">Login to your account</h2>
            <form id="login-form" method="post" action="{% url 'login' %}" class="w-75">
                {% csrf_token %}
                <div class="mb-3">
                    <label for="id_username" class="form-label">Username</label>
                    <input type="text" name="username" id="id_username" class="form-control" placeholder="Enter your username" required>
                </div>
                <div class="mb-3 position-relative">
                    <label for="id_password" class="form-label">Password</label>
                    <input type="password" name="password" id="id_password" class="form-control" placeholder="Enter your password" required>
                    <br>
                    <a href="#" class="small position-absolute end-0 mt-1 text-decoration-none">Reset Password!</a>
                    <br>
                </div>
                {% if form.errors %}
                    <div class="alert alert-danger">
                        {% for field in form %}
                            {% for error in field.errors %}
                                <p>{{ error }}</p>
                            {% endfor %}
                        {% endfor %}
                        {% for error in form.non_field_errors %}
                            <p>{{ error }}</p>
                        {% endfor %}
                    </div>
                {% endif %}
                <div class="d-grid">
                    <button type="submit" class="btn btn-dark">Log in</button>
                </div>
            </form>
            <p class="mt-3">New user? <a href="{% url 'register' %}" class="text-dark fw-bold text-decoration-none">Create an account</a></p>

        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Create profile.html

Also, create a new file named profile.html and add the following code:

<!-- /userauth/templates/userauth/profile.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-0">
        <div class="container">
            <a class="navbar-brand" href="#">Auth App</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
        {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                        </li>

                        <!-- Display Profile Pic or Default Image if not available -->
                        <li class="nav-item">
                            <img 
                                src="{% if user.profile_pic %}{{ user.profile_pic.url }}{% else %}/static/assets/male-avatar.jpeg{% endif %}" 
                                alt="Profile Picture" 
                                class="profile-pic ms-2"
                                style="width: 40px; height: 40px; object-fit: cover; border-radius: 50%;">
                        </li>
        {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <div class="container vh-100 d-flex" style="margin-top: 30px;">
    Welcome, {{ user.username }}!
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Also, we need to modify index.html template

Update index.html

Replace the content of index.html to conditionally display content based on the user's authentication status:

<!-- /userauth/templates/userauth/index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Django Auth Application</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <style>
    .bg-custom-grey {
        background-color: #eeeeee; /* Light grey color */
    }

     /* Custom teal color for the heading */
        .text-teal {
            color: #008080; /* Teal color */
        }
</style>
</head>
<body>
    <!-- Navbar Section -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-0">
        <div class="container">
            <a class="navbar-brand" href="#">Auth App</a>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
         {% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                        </li>

                        <!-- Display Profile Pic or Default Image if not available -->
                        <li class="nav-item">
                            <img 
                                src="{% if user.profile_pic %}{{ user.profile_pic.url }}{% else %}/static/male-avatar.jpeg{% endif %}" 
                                alt="Profile Picture" 
                                class="profile-pic ms-2"
                                style="width: 40px; height: 40px; object-fit: cover; border-radius: 50%;">

                        </li>

                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'login' %}">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'register' %}">Register</a>
                    </li>
    {% endif %}
                </ul>
            </div>
        </div>
    </nav>

    <!-- Hero Section with Grey Background -->
   <!-- Hero Section with Increased Height -->
<section class="bg-custom-grey text-center py-5" style="min-height: 350px; display: flex; align-items: center;">
    <div class="container" style="margin-top: -40px;">
    <h2 class="display-4 text-teal">Django Authentication System</h2>
    <p class="lead"><em>A Bespoke user authentication system using Django's built-in authentication tools.</em></p>
    <a href="#" class="btn btn-light btn-lg" style="margin-top: 25px;">Learn More</a>
</div>

</section>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

</body>
</html>

Code Explanation:

The navigation bar in index.html dynamically adapts based on whether the user is authenticated or not:

If the user is authenticated, the navbar displays a logout option and the user’s profile picture (a default avatar is used if no picture is uploaded).
If the user is not logged in, it provides options to log in or register.
This dynamic rendering is made possible using Django’s template tags:

{% if user.is_authenticated %}
                        <li class="nav-item">
                            <a class="nav-link" href="{% url 'logout' %}">Logout</a>
                        </li>

                        <!-- Display Profile Pic or Default Image if not available -->
                        <li class="nav-item">
                            <img 
                                src="{% if user.profile_pic %}{{ user.profile_pic.url }}{% else %}/static/male-avatar.jpeg{% endif %}" 
                                alt="Profile Picture" 
                                class="profile-pic ms-2"
                                style="width: 40px; height: 40px; object-fit: cover; border-radius: 50%;">

                        </li>

                    {% else %}
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'login' %}">Login</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{% url 'register' %}">Register</a>
                    </li>
        {% endif %}

One more thing—if you’ve noticed, I have imported {% load static %} at the top of the HTML files. This is necessary because we need to render static files, such as the profile picture avatar and the authentication interface image.

Steps to Set Up Static Files:

Download the image files from here.
Create a static folder inside the userauth folder.
Inside the static folder, create another folder named assets.
Extract the downloaded images into the assets folder.

That’s it! The images will now be displayed correctly in the specified locations in our HTML files.

One last thing, we need to specify login redirects in settings.py

Update Django Settings

To ensure users are redirected to their profile page after logging in, add the following line to settings.py:

# settings.py
LOGIN_REDIRECT_URL = '/profile/'  # Redirect to profile after login

This tells Django to redirect authenticated users to the profile page after logging in.

Save and Rerun the Server

Save all the changes and restart the development server:

python manage.py runserver

Now, you should have beautifully styled registration (http://localhost:8000/register) and login (http://localhost:8000/login) pages.

Registration Interface

Login Interface

STEP 9: Testing User Registration

Navigate to the registration page (http://localhost:8000/register).

Fill in the required credentials (username, email, password, etc.). Ensure your username and password are unique and not too similar. Once done, click the Register button to create the user.

Oops! Encountering a 404 Error

After registering, you may encounter the following error:

Page not found (404)
Request Method: GET
Request URL: http://localhost:8000/accounts/login/?next=/profile/

Understanding and Fixing the Error

Don't panic! This error occurs because Django's authentication system defaults to using /accounts/login/ for login redirection, which doesn't exist in our setup.

To fix this, we need to explicitly set the login URL in settings.py:

#settings.py
LOGIN_URL = '/login/'

Save the changes and restart the server again:

python manage.py runserver

Now, everything should work smoothly!

Go ahead to test the registration, login, and profile access workflows again.

What's Next

Congrats on making it this far! We’ve successfully built our custom authentication system, but there’s always room for improvement. Here are a few areas where you can enhance the system further:

Refactoring Repetitive HTML Code: Some HTML structures are repeated across multiple pages. Instead of duplicating code, you can leverage Django’s template inheritance to maintain a cleaner, more efficient codebase. Create a base template that includes common elements (e.g., navbar, footer), and let other pages extend from it.
Profile Picture Uploads: Currently, users are assigned a default profile picture, but they cannot update their photo. You can allow users to upload and manage their profile images through the authentication system.
Enhancing Account Management: You can implement additional features such as password reset, email verification, and two-factor authentication (2FA) to improve security and user experience.
User Permissions & Access Control: Once a user is authenticated, what actions should they be allowed to perform? You can implement role-based access control (RBAC) to define different levels of permissions for users (e.g., admin, editor, viewer).

You can download the full code from the GitHub repo

If you need further customizations or guidance, feel free to reach out. Happy coding!

Love the guide?

Your support will be appreciated

Conclusion

In this guide, we've built a custom Django Login and Registration system, covering everything from setting up the project to implementing user authentication and profile functionality.

DEV Community: Doyin Elugbadebo

Flask-Powered Object Detection for Real-Time Analysis

Prerequisites

The Yolo Framework

Why use the Flask Framework

STEP 1: Setting Up Your Virtual Environment

STEP 2: Set Up the Flask Application

STEP 3: Set Up Image Upload Functionality in Flask

Step 4: Download and Set Up YOLO Pre-trained Files

STEP 5: Modelling Using Yolov3:

STEP 6: Define Routes and Templates for Image Processing

result.html – Displaying the Processed Image

STEP 7: Start the Application

STEP 8: Processing Multiple Images

STEP 9: Switching to Yolov12

There's More!

Conclusion

References

How to Customize Django Authentication with Email Login

Introduction

Prerequisites:

Understanding Authentication and Authorization

STEP 1: Setting Up Your Environment

STEP 2: Creating an Index Page

Integrating the View into Django's MVC Architecture.

STEP 3: Define the View

Start the Server

STEP 4: Creating Custom User Model

STEP 5: Create Registration Form

STEP 6: Create Views for Registration, Login, and Logout

Implementing the Logic

STEP 7: Create URLs for the Views

STEP 8: Creating the Registration Template

Replace register.html

Update Django Settings

Save and Rerun the Server

STEP 9: Testing User Registration

What's Next

Conclusion

`result.html` – Displaying the Processed Image

Replace `register.html`