Web application

One of JustDeepIt’s unique features is its support for both GUI and CUI. For example, a researcher who is unfamiliar with programming can create models for object detection in GUI. The researcher can then work with a systems engineer to build a web application for object detection on the server which usually only supports CUI. This tutorial demonstrates how to build a simple web application using Flask.

Warning

Source code shown in this section is only an example; measures to address various security issues must be taken to build a full-fledged web application.

Preparation

Source code

The source code for this tutorial is available on GitHub (JustDeepIt/tutorials/WebApp) and can be downloaded using the following command as necessary.

git clone https://github.com/biunit/JustDeepIt

ls JustDeepIt/tutorials/WebApp
# app.py  class_label.txt  templates  uploads

Package installation

Flask is a Python package for building web application systems. It can be installed using the following command.

pip install flask

Model

We refer to quick start for Object detection to train the model, then we obtain the class_label.txt file and fasterrcnn.pth file.

Web Application

For simplicity, we create a web application with minimal functionality, allowing users to upload images, perform object detection, and show the results on the web page. We create an app.py file in the same folder as class_label.txt and write the following code.

import os
from flask import Flask, flash, request, redirect, url_for, send_from_directory, render_template
from werkzeug.utils import secure_filename
from justdeepit.models import OD


# Detection model settings
model = None
model = OD('class_label.txt',
           model_arch='fasterrcnn',
           model_weight='fasterrcnn.pth',
           workspace='tmp',
           backend='detectron2')


# Flask
app = Flask(__name__, static_folder='uploads', static_url_path='')
app.config['UPLOAD_FOLDER'] = 'uploads'


@app.route('/', methods=['GET', 'POST'])
def detection_app():
    output_fpath = None
    
    if request.method == 'POST':
        req_file = request.files['file']
        if req_file:
            # upload file
            fname = secure_filename(req_file.filename)
            fpath = os.path.join(app.config['UPLOAD_FOLDER'], fname)
            req_file.save(fpath)
            
            # detect objects and save the result
            output_fpath = fpath + '.bbox.png'
            pred_output = model.inference(fpath, cpu=1, gpu=0)
            pred_output.draw('bbox', output_fpath, label=True, score=True)
    
    return render_template('index.html', output_fpath=output_fpath)
    

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

The detection_app function first provides an image upload form. Once the image is uploaded, the function performs object detection on the image using the model, saves the detection result, and displays the result on the web page.

We then create an HTML template index.html into templates folder for uploading images and showing the detection results as follows.

<!DOCTYPE html>
<html>
<head>
    <title>WebApp</title>
    <base href="/" >
</head>
<body>
    <h1>Object Detection</h1>
    <form method="POST" enctype="multipart/form-data">
        <input type="file" name="file" />
        <input type="submit" value="Inference" />
    </form>

    {% if output_fpath is not none %}
    <h1 style="margin-top:2em">Inference Result</h1>
    <div>
        <img src="{{ output_fpath }}" style="width:50%"/>
    </div>
    {% endif %}
</body>
</html>

Finally, we run the following command to launch the web application.

FLASK_APP=app.py flask run