introduction

"Classer les déchets par image!" Aujourd'hui, troisième jour du journal de création d'application, j'aimerais utiliser Django pour en faire une application web.

Liste d'articles

"Classification de la corbeille par image!" Journal de création de l'application jour1 ~ Création de l'ensemble de données ~
"Classification de la corbeille par image!" Journal de création de l'application day2-Mise au point avec VGG16-
"Classification de la corbeille par image!" Journal de création d'application jour3 ~ Application Web avec Django ~ ← Imakoko
"Classer les déchets par image!" Journal de création de l'application day4 ~ Préparer le frontal avec Bootstrap ~
"Classer les déchets par image!" Journal de création de l'application day5 ~ Préparer le frontal avec Bootstrap 2 ~
"Classification de la corbeille par image!" Journal de création d'application day6 ~ Correction de la structure des répertoires ~

Synopsis jusqu'à la dernière fois

Dans l'article précédent, j'ai créé un modèle en peaufinant avec VGG16. Cette fois, l'objectif est de pouvoir exécuter ce modèle sur un navigateur local.

Écoulement brutal

En tant que flux, définissez d'abord les paramètres d'origine de l'application. Créez ensuite un formulaire pour pouvoir télécharger l'image. Après cela, je vais le frotter avec le modèle que j'ai fait la dernière fois. Pour le moment, je prévois de ne créer que la forme minimale et de maintenir html et css à partir de la prochaine fois.

Créer une application Django

Tout d'abord, exécutez le code qui crée l'application Django sur la console. VSCode ouvrira le dossier entier, donc si vous ne le faites pas, déplacez-le d'abord dans le répertoire actuel.

`console`


django-admin startproject garbage_proj
cd garbage_proj
python manage.py startapp garbage

Maintenant que vous avez les bases, commençons par cela.

réglage réglage

Tout d'abord, réécrivez garbage_proj / setting.py. Je vais l'écrire sur le bloc de code comprenant la méthode.

`garbage_proj/setting.py`



INSTALLED_Vers APPS"garbage"ajouter à

#Réécrivez ce qui suit
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

Le modèle n'est pas nécessaire cette fois car il n'a pas de fonction de sauvegarde des images. Créez un formulaire pour télécharger des images. Créez un nouveau forms.py et écrivez ce qui suit.

`garbage/forms.py`



from django import forms
class UploadPictureForm(forms.Form):
	img = forms.ImageField(required=True, label="")

label est un problème lors de l'affichage en html, mais si vous faites {{form}}, il sera affiché avec le label, donc il est laissé vide. (Si vous listez les éléments vous-même, vous n'avez pas besoin de les définir.)

Paramètres autour de l'URL

Tout d'abord, définissez le routage de l'URL d'origine. Ajoutez-le à urls.py dans garbage_proj.

`garbage_proj/urls.py`



from django.urls import include

urlpatterns = [
    # path('admin/', admin.site.urls),
    path("garbage/", include("garbage.urls")),
    path("", include("garbage.urls"))
]

Si vous spécifiez include (" garbage.urls "), vous pouvez ignorer le processus pour faire référence à urls.py dans le dossier garbage. Je n'utilise pas d'administrateur, alors commentez-le. De plus, si vous définissez le routage pour " ", vous pouvez l'ouvrir directement lorsque vous marchez sur le lien affiché lorsque vous démarrez le serveur, ce qui est pratique.

Ensuite, créez un nouveau garbage / urls.py et écrivez le traitement lorsque le traitement est ignoré dans garbage.

`garbage/urls.py`



from django.urls import path
from . import views
urlpatterns = [
    path("", views.index, name="index"),
    path("result", views.result, name="result"),
]

Paramètres d'affichage

Dans Vues, décrivez le traitement à effectuer côté serveur.

`garbage/views.py`


from django.shortcuts import render
from django.http import HttpResponse
from django.views.generic import TemplateView
from django.core.paginator import Paginator
from django.contrib.auth.decorators import login_required
from .forms import UploadPictureForm
from PIL import Image


def index(request):
    params = {
        "form":UploadPictureForm()
    }
    return render(request, "garbage/index.html", params)


def result(request):
    form = UploadPictureForm(request.POST, request.FILES)
    if form.is_valid():
        img = form.cleaned_data["img"]
        pred = predict(img)
    else:
        params = {
            "form":UploadPictureForm()
        }
        return render(request, "garbage/index.html", params)

    params = {
        "img":img,
        "pred":pred
    }
    return render(request, "garbage/result.html", params)
    #Une fois ici

Dans la fonction result, l'image est reconnue par request.FILES, nous sommes donc en train de la récupérer. De plus, en définissant form.cleaned_data, il sera retourné sous une forme facile à comprendre (il semble qu'il ne puisse être utilisé qu'après confirmation de form.is_valid).

`garbage/views.py`


#Suite du bloc de code ci-dessus
def predict(img):
    #Lis
    import numpy as np
    import matplotlib.pyplot as plt
    from keras.preprocessing import image
    from keras.models import model_from_json
    from PIL import Image

    model = model_from_json(open("../model.json").read())
    model.load_weights('../param.hdf5')

    img_width, img_height = 150, 150
    img = Image.open(img)
    img.save("image.png ")
    img = np.array(img.resize((img_width, img_height)))
    classes = ['Déchets non combustibles', 'Emballage en plastique de conteneur', 'Déchets combustibles', 'Déchets nocifs', 'Recyclables']

    x = image.img_to_array(img)
    x = np.expand_dims(x, axis=0)
    x = x / 255.0

    #Prédire la personne sur l'image
    pred = model.predict(x)[0]
    #Voir les résultats
    pred_dict = {c:s for (c, s) in zip(classes, pred*100)}
    pred_dict = sorted(pred_dict.items(), key=lambda x:x[1], reverse=True)
    return pred_dict

Fondamentalement, le modèle précédent est le même, mais le chemin, etc. a été corrigé pour qu'il ait l'air bien. En outre, le fichier image a un format tel que `` InMemoryUploadedFile '' tel quel, il est donc lu à nouveau avec Pillow.

Créer un fichier modèle

Nous allons créer un modèle (comme le fichier HTML d'origine). Assurez-vous de créer un dossier de modèles et d'y placer les fichiers.

`garbage/templates/garbage/index.html`


{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Classement des déchets par image!</title>
	<link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
	<h1>Classement des déchets par image!</h1>
	<p>Veuillez saisir l'image dont vous souhaitez vérifier la classification</p>
	<form action="/garbage/result" method="post" enctype="multipart/form-data">
		{% csrf_token %}
		{{ form }}
		<br>
		<button type="submit">Envoyer</button>
	</form>
</body>
</html>

Excusez-moi d'avoir écrit cette fois, mais l'écran ressemble à celui ci-dessous.

Ensuite, nous allons créer l'écran des résultats.

`garbage/templates/garbage/result.html`


{% load static %}
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Classement des déchets par image!</title>
	<link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
	<h1>Classement des déchets par image!</h1>
	<p>Le résultat est</p>
	<img src="../image.png " alt="image">
	<table>
		<tr><th>Classification</th><td>probabilité</td></tr>
		{% for key, value in pred %}
			<tr><th>{{ key }}</th><td>{{ value }}</td></tr>
		{% endfor %}
	</table>
	<a href="{% url "index" %}">Top</a>

</body>
</html>

Vous pouvez écrire du code python en écrivant «{%%}» dans le fichier modèle. La façon d'écrire l'instruction for est un peu spéciale, mais elle est écrite comme ceci. Et lorsque vous téléchargez l'image et l'exécutez, l'écran suivant s'affiche. Je ne connais pas le paramètre de chemin de l'image, donc il n'est pas affiché, mais le programme lui-même semble fonctionner correctement!

En parlant de cela, je n'ai rien écrit sur CSS, mais je pense que seuls les fichiers sont placés et que le HTML est également appliqué.

`garbage/static/garbage/css/style.css`


/*  */

La prochaine fois, je ferai un peu plus de front-end.

Liste d'articles

"Classification des déchets par image!" Journal de création d'application jour3 ~ Application Web avec Django ~

introduction

Synopsis jusqu'à la dernière fois

Écoulement brutal

Créer une application Django

console

réglage réglage

garbage_proj/setting.py

garbage/forms.py

Paramètres autour de l'URL

garbage_proj/urls.py

garbage/urls.py

Paramètres d'affichage

garbage/views.py

garbage/views.py

Créer un fichier modèle

garbage/templates/garbage/index.html

garbage/templates/garbage/result.html

garbage/static/garbage/css/style.css

`console`

`garbage_proj/setting.py`

`garbage/forms.py`

`garbage_proj/urls.py`

`garbage/urls.py`

`garbage/views.py`

`garbage/views.py`

`garbage/templates/garbage/index.html`

`garbage/templates/garbage/result.html`

`garbage/static/garbage/css/style.css`