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

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

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. image.png

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. image.png 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

Recommended Posts

"Classification des déchets par image!" Journal de création d'application jour3 ~ Application Web avec Django ~
"Classer les déchets par image!" Journal de création d'application day8 ~ déploiement heroku ~
"Classer les déchets par image!" Journal de création d'application jour6 ~ Correction de la structure des répertoires ~
"Classer les déchets par image!" Journal de création d'application day2 ~ Mise au point avec VGG16 ~
"Classer les déchets par image!" Journal de création d'application jour1 ~ Création de l'ensemble de données ~
Créer une application Web avec Django
"Classer les déchets par image!" Journal de création d'application day5 ~ Préparez le frontal avec Bootstrap 2 ~
"Classer les déchets par image!" Journal de création d'application day4 ~ Préparez le frontal avec Bootstrap ~
Créer une application Web avec Django
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Page de création de décalage)
J'ai fait une application WEB avec Django
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Introduction)
Développement d'une application WEB avec Django [Création de l'écran d'administration]
Jusqu'à la création de l'application Django par terminal (environnement de développement)
Essayez de créer une application Web avec Vue.js et Django (édition Mac) - (1) Construction d'environnement, création d'application
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Ecrire un modèle de base)
Application Web réalisée avec Python3.4 + Django (Construction de l'environnement Part.1)
Pratique de développement d'applications Web: Créez une page de création d'équipe avec Django! (Conception du modèle de base de données)
Classification d'images avec un réseau de neurones auto-fabriqué par Keras et PyTorch
[Apprentissage en profondeur] Classification d'images avec un réseau neuronal convolutif [DW jour 4]
Développement d'applications Web avec Flask
Collection d'images avec scraping Web
Application Web avec Python + Flask ② ③
Web en temps réel avec les chaînes Django
Application Web avec Python + Flask ④
Défi la classification des images par TensorFlow2 + Keras 4 ~ Prédisons avec un modèle entraîné ~
Lancement d'une application Web sur AWS avec django et modification des tâches