Einführung

"Müll nach Bild klassifizieren!" Heute, am dritten Tag des Tagebuchs zur App-Erstellung, möchte ich Django verwenden, um daraus eine Web-App zu machen.

Artikelliste

"Müllklassifizierung nach Bild!" App-Erstellungstagebuch Tag1 ~ Datensatzerstellung ~
"Müllklassifizierung nach Bild!" Tagebuch zur App-Erstellung Tag2 - Feinabstimmung mit VGG16-
"Müllklassifizierung nach Bild!" Tagebuch zur App-Erstellung Tag3 ~ Webanwendung mit Django ~ ← Imakoko
"Papierkorbklassifizierung nach Bild!" Tagebuch zur App-Erstellung Tag4 ~ Frontend mit Bootstrap vorbereiten ~
"Müll nach Bild klassifizieren!" Tagebuch zur App-Erstellung Tag 5 ~ Bereiten Sie das Front-End mit Bootstrap 2 vor ~
"Müllklassifizierung nach Bild!" App-Erstellungstagebuch Tag6 ~ Korrektur der Verzeichnisstruktur ~

Synopse bis zum letzten Mal

Im vorherigen Artikel habe ich ein Modell durch Feinabstimmung mit VGG16 erstellt. Dieses Mal ist das Ziel, dieses Modell in einem lokalen Browser ausführen zu können.

Rauer Fluss

Legen Sie als Ablauf zunächst die ursprünglichen Einstellungen der Anwendung fest. Erstellen Sie dann ein Formular, damit Sie das Bild hochladen können. Danach werde ich es mit dem Modell reiben, das ich das letzte Mal gemacht habe. Derzeit plane ich, ab dem nächsten Mal nur das Mindestformular zu erstellen und HTML und CSS zu pflegen.

Erstellen einer Django-App

Führen Sie zunächst den Code aus, mit dem die Django-App auf der Konsole erstellt wird. VSCode öffnet den gesamten Ordner. Wenn Sie dies nicht tun, verschieben Sie ihn zuerst in das aktuelle Verzeichnis.

`console`


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

Nachdem Sie die Grundlagen kennen, beginnen wir damit.

Einstellung Einstellung

Schreiben Sie zuerst garbage_proj / settings.py neu. Ich werde es in den Codeblock einschließlich der Methode schreiben.

`garbage_proj/setting.py`



INSTALLED_Zu APPS"garbage"hinzufügen

#Schreiben Sie Folgendes neu
LANGUAGE_CODE = 'ja'
TIME_ZONE = 'Asia/Tokyo'

Das Modell ist diesmal nicht erforderlich, da es keine Funktion zum Speichern von Bildern hat. Erstellen Sie ein Formular zum Hochladen von Bildern. Erstellen Sie eine neue forms.py und schreiben Sie Folgendes.

`garbage/forms.py`



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

label ist ein Problem bei der Anzeige in HTML. Wenn Sie jedoch "{{form}}" ausführen, wird es einschließlich label angezeigt, sodass es leer bleibt. (Wenn Sie die Elemente selbst auflisten, müssen Sie sie nicht festlegen.)

Einstellungen rund um URL

Legen Sie zunächst das Routing der ursprünglichen URL fest. Fügen Sie es zu "urls.py" in "garbage_proj" hinzu.

`garbage_proj/urls.py`



from django.urls import include

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

Wenn Sie "include (" garbage.urls ")" angeben, können Sie den Vorgang überspringen, um auf "urls.py" im Ordner "garbage" zu verweisen. Ich benutze keinen Admin, also kommentiere es aus. Wenn Sie das Routing für "" "festlegen, können Sie es auch direkt öffnen, wenn Sie auf den Link klicken, der beim Starten des Servers angezeigt wird. Dies ist praktisch.

Erstellen Sie als Nächstes eine neue garbage / urls.py und schreiben Sie die Verarbeitung, wenn die Verarbeitung zu garbage übersprungen wird.

`garbage/urls.py`



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

Einstellungen anzeigen

Beschreiben Sie in Ansichten die Verarbeitung, die auf der Serverseite ausgeführt werden soll.

`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)
    #Einmal hier

In der Funktion "Ergebnis" wird das Bild durch "request.FILES" erkannt, daher verarbeiten wir es, um es abzurufen. Wenn Sie "form.cleaned_data" festlegen, wird es in einer leicht verständlichen Form zurückgegeben (es scheint, dass es nur nach Bestätigung von "form.is_valid" verwendet werden kann).

`garbage/views.py`


#Fortsetzung vom obigen Codeblock
def predict(img):
    #Lesen
    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 = ['Nicht brennbarer Abfall', 'Verpackungsbehälter Kunststoffe', 'Brennbarer Abfall', 'Schädlicher Abfall', 'Wertstoffe']

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

    #Sagen Sie die Person auf dem Bild voraus
    pred = model.predict(x)[0]
    #Ergebnisse anzeigen
    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

Grundsätzlich ist das Vorgängermodell das gleiche, aber der Pfad usw. wurde so festgelegt, dass es gut aussieht. Außerdem hat die Bilddatei ein Format wie "InMemoryUploadedFile", so dass sie mit Pillow erneut gelesen wird.

Erstellen einer Vorlagendatei

Wir werden eine Vorlage erstellen (wie die ursprüngliche HTML-Datei). Stellen Sie sicher, dass Sie einen Vorlagenordner erstellen und die Dateien darin ablegen.

`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>Müllklassifizierung nach Bild!</title>
	<link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
	<h1>Müllklassifizierung nach Bild!</h1>
	<p>Bitte geben Sie das Bild ein, dessen Klassifizierung Sie überprüfen möchten</p>
	<form action="/garbage/result" method="post" enctype="multipart/form-data">
		{% csrf_token %}
		{{ form }}
		<br>
		<button type="submit">Senden</button>
	</form>
</body>
</html>

Entschuldigen Sie, dass ich diesmal geschrieben habe, aber der Bildschirm sieht wie unten aus.

Als nächstes erstellen wir den Ergebnisbildschirm.

`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>Müllklassifizierung nach Bild!</title>
	<link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
	<h1>Müllklassifizierung nach Bild!</h1>
	<p>Ergebnis ist</p>
	<img src="../image.png " alt="Bild">
	<table>
		<tr><th>Einstufung</th><td>Wahrscheinlichkeit</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>

Sie können Python-Code schreiben, indem Sie "{%%}" in die Vorlagendatei schreiben. Die Art und Weise, die for-Anweisung zu schreiben, ist etwas Besonderes, aber sie ist so geschrieben. Wenn Sie das Bild hochladen und ausführen, wird der folgende Bildschirm angezeigt. Ich kenne die Pfadeinstellung für das Bild nicht, daher wird es nicht angezeigt, aber das Programm selbst scheint gut zu funktionieren!

Apropos, ich habe nichts über CSS geschrieben, aber ich denke, dass nur die Dateien platziert werden und auch HTML angewendet wird.

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


/*  */

Nächstes Mal werde ich etwas mehr Frontend machen.

Artikelliste

[PYTHON] "Klassifizierung von Müll nach Bild!" App-Erstellungstagebuch Tag3 ~ Webanwendung mit Django ~

Einführung

Synopse bis zum letzten Mal

Rauer Fluss

Erstellen einer Django-App

console

Einstellung Einstellung

garbage_proj/setting.py

garbage/forms.py

Einstellungen rund um URL

garbage_proj/urls.py

garbage/urls.py

Einstellungen anzeigen

garbage/views.py

garbage/views.py

Erstellen einer Vorlagendatei

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`