Incorporate Sheltie Judgment AI into your web app

Introduction

https://qiita.com/maitake9116/items/df733df5e608f8616d14 Let's incorporate the Sheltie judgment AI created in step into Flask.

Constitution

It was implemented on ubuntu built with Vagrant. The IP is 192.168.33.31.

~/python/api
├─app.py
├─ai.py
├─model                        :Pre-made model
│  ├─model_predict.json
│  └─model_predict.hdf5
├─static
│  ├─favicon.ico               :Favicon (optional)
│  └─style.css                 :Style sheet
├─templates                    :Screen template
│  └─index.html
├─images                       :Directory for storing uploaded images
└─uwsgi.ini                    :uWSGI configuration file

image

00.png

Prepare the application deployment destination

$ mkdir -p ~/python/api
$ cd ~/python/api
$ python3 -m venv api
$ source api/bin/activate
#Install the libraries needed to run ai
$ pip install werkzeug
$ pip install numpy==1.16.2
$ pip install sklearn
$ pip install tensorflow
$ pip install keras
$ pip install matplotlib
$ pip install pillow

screen

When the file is uploaded, the uploaded image and the judgment result are displayed. I loaded bootstrap and decorated it a little.

{% extends "layout.html" %}
{% block content %}

<div class="container">

  <div class="m-5">
    <H1>Sheltie judgment AI</H1>
  </div>

  <div class="m-5">
    <p>Determine if it is a sheltie. Please upload the image.</p>

      <form action="/upload" method="post" enctype="multipart/form-data">
        <input type="file" id=image name="image" accept="image/png, image/jpeg">
        <button class="button" type="submit">submit</button>
      </form>
  </div>

  {% if img_url %}
  <div class="m-5 box">
    <h3>image</h3>
    <img src="{{ img_url }}">
    <h3>judgment result</h3>
    <p>{{ judgment }}</p>
  </div>
  {% endif %}

</div>

{% endblock %}
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel=stylesheet type=text/css href="{{ url_for('static', filename='style.css') }}">
    <link rel="shortcut icon" href="{{ url_for('.static',filename='favicon.ico') }}" />
    <title>Sheltie judgment AI</title>
  </head>
  <body>
    {% block content %}{% endblock %}
  </body>
</html>
h1 {
    background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 1px #96c2fe;
    padding: 0.2em 0.5em;
    color: #454545;
}

.box {
    padding: 0.5em 1em;
    margin: 2em 0;
    border: double 5px #4ec4d3;
}

program

When the image is uploaded by app.py, save the image and pass the file path to ai.py to get the judgment result.

# -*- coding: utf-8 -*-

from flask import Flask, render_template, request, redirect, url_for, send_from_directory
from werkzeug.utils import secure_filename
import numpy as np
import os
import ai

app = Flask(__name__)

SAVE_DIR = "./images"

app = Flask(__name__, static_url_path="")

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

@app.route('/images/<path:path>')
def send_js(path):
    return send_from_directory(SAVE_DIR, path)

@app.route('/upload', methods=['POST'])
def upload():
    img_file = request.files['image']
    if img_file:
        file_name = secure_filename(img_file.filename)
        file_path = os.path.join(SAVE_DIR, file_name)
        img_file.save(file_path)
        judgment = ai.predict(file_path)
        return render_template('index.html', img_url=file_path, judgment=judgment)
# -*- coding: utf-8 -*-

from keras import models
from keras.models import model_from_json
from keras.preprocessing import image
import numpy as np
import sys
import os
from keras.preprocessing.image import ImageDataGenerator, load_img, img_to_array, array_to_img


def predict(img_path: str):
    #Model save destination
    MODEL_ROOT_DIR = './model/'
    MODEL_PATH = os.path.join(MODEL_ROOT_DIR, 'model_predict.json')
    WEIGHT_PATH = os.path.join(MODEL_ROOT_DIR, 'model_predict.hdf5')
    #category
    CATEGORIES = [u'Sheltie', u'Corgi', u'Border collie']
    #Image size
    IMG_SIZE = 150
    INPUT_SHAPE = (IMG_SIZE, IMG_SIZE,3)
    
    #Load the model
    model = model_from_json(open(MODEL_PATH).read())
    model.load_weights(WEIGHT_PATH)
    
    #Read image from input argument
    img = image.load_img(img_path, target_size=INPUT_SHAPE)
    x = image.img_to_array(img)
    x = np.expand_dims(x, axis=0)
    
    #Predict with a model
    features = model.predict(x)
       
    if features[0, 0] == 1:
        return  u'Sheltie.'
    else:
        for i in range(0, len(CATEGORIES)):
            if features[0, i] == 1:
                return u'It doesn't seem to be sheltie.{}is.'.format(CATEGORIES[i])

Service start

#Start Nginx
$ sudo systemctl start nginx
$ vi uwsgi.ini
#Start uWSGI
$ uwsgi uwsgi.ini
[uwsgi]

wsgi-file=app.py
callable=app
http=0.0.0.0:8000
socket=/tmp/uwsgi.sock
chmod-socket=666

Sheltie Judgment AI App Demo

I accessed http://192.168.33.31 and confirmed the operation.

ai.gif

It was easy to integrate AI into your web app.

Recommended Posts

Incorporate Sheltie Judgment AI into your web app
Incorporate Sheltie Judgment AI into your web app
Until you self-host your own interpreter
[Python] Udemy Image Judgment AI App Development Part1
Incorporate JWT authentication into Python's Flask Web API