Einführung

"Müll nach Bild klassifizieren!" Heute, am 4. Tag des Tagebuchs zur App-Erstellung, möchte ich Bootstrap verwenden, um das Frontend vorzubereiten.

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 day3 ~ Web-App mit Django ~
"Müll nach Bild klassifizieren!" Tagebuch zur App-Erstellung Tag4 ~ Bereiten Sie das Frontend mit Bootstrap vor ~ ← Imakoko
"Müll nach Bild klassifizieren!" App-Erstellungstagebuch Tag 5 ~ Bereiten Sie das Frontend mit Bootstrap 2 vor ~
"Müllklassifizierung nach Bild!" App-Erstellungstagebuch Tag6 ~ Korrektur der Verzeichnisstruktur ~

Synopse bis zum letzten Mal

In den vorherigen Artikeln habe ich eine Bilderkennungsanwendung implementiert und auf Django gestellt. Dieses Mal werde ich das Frontend vorbereiten.

Bildschirm

Zunächst gab es ein Problem, dass das Bild nicht als vorherige Ausgabe angezeigt werden konnte. Ich werde die Gegenmaßnahmen schreiben.

Um das Bild anzuzeigen, müssen Sie es zunächst in HTML lesen, indem Sie das Bild auf der Webseite platzieren und den Pfad angeben. Wenn Sie das Bild auf der Rückseite gespeichert haben, geben Sie es mit dem Pfad an und implementieren Sie es, indem Sie es auf der Vorderseite lesen. (Es scheint, dass Javascript so etwas wie einen virtuellen Link nur im Browser mit Blob-URL erstellen kann, aber ich wusste nicht, ob Django etwas Ähnliches tun kann.)

Vorbereitung

Es müssen Einstellungen hinzugefügt werden, damit Bilder verarbeitet werden können.

`garbage_proj/setting.py`


#TEMPLATES Kontext_Fügen Sie Folgendes in Prozessoren hinzu
'django.template.context_processors.media',

#Fügen Sie am Ende Folgendes hinzu
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Ändern Sie auch die URLs, damit Sie routen können.

`garbage/urls.py`


# urlpatterns = []Fügen Sie nach der Liste von Folgendes hinzu
 + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Mit dieser Einstellung können Sie festlegen, dass auf media (Verzeichnis in derselben Zeile wie garbage, garbage_proj) verwiesen wird, wenn der Zugriff auf garbege / media erfolgt. Das heißt, der Link wird durch etwas wie "" verbunden.

Vorlagendatei

Schreiben wir nun die Vorlagendatei.

`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/bootstrap.css' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
	<img src="./media/images/title.png " alt="Müllklassifizierung nach Bild!" class="m-4" id="title">
	<div class="container row">
		<div class="col-lg-6 offset-lg-3 col-md-8 offset-md-2">
			<div class="container card p-4 mt-4">
				<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" class="mt-3">Senden</button>
				</form>
			</div>
		</div>
	</div>
	<h4>Verwenden Sie vorhandene Bilder</h4>
	<div class="container row">
		<div class="col-md-6 p-3">
			<img src="./media/images/temp1.jpg " alt="Bild 1" class="sample-img">
		</div>
		<div class="col-md-6 p-3">
			<img src="./media/images/temp2.jpg " alt="Bild 2" class="sample-img">
		</div>
	</div>
</body>
</html>

Es wäre schön, mit dem Grid-System von Bootstrap problemlos reagieren zu können. Das tatsächliche Design ist wie folgt. ps-1

`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/bootstrap.css' %}" />
	<link rel="stylesheet" type="text/css" href="{% static 'garbage/css/style.css' %}" />
</head>
<body>
	<img src="./media/images/title.png " alt="Müllklassifizierung nach Bild!" class="m-4" id="title">
	<div class="container row">
		<div class="col-lg-8 offset-lg-2">
			<div class="container card p-3 my-4 px-5">
				<h2 class="m-3">Klassifizierungsergebnis</h2>
				<img src="./media/images/image.png " alt="Bild" id="result-img">
				<div class="container">
					<table class="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" %}">Zurück nach oben</a>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

In pred sind jede Klassifizierung und ihre Wahrscheinlichkeit wie eine Liste von Tapples. Dies ist auch wie folgt. ps-2

CSS sieht übrigens so aus.

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


body{
	text-align: center;
	background-color: rgb(239, 239, 240);
}

#title{
	float: center;
	width: 50%;
}

#result-img{
	width: 100%;
	height: auto;
}

.sample-img{
	width: 90%;
}

Ich schreibe hauptsächlich die Anpassung des Bildes mit CSS, aber ansonsten werfe ich es im Grunde genommen in den Bootstrap.

Das nächste Mal möchte ich mit der Ansicht spielen oder JavaScript schreiben, damit das Beispiel funktioniert.

Artikelliste

Verweise

So implementieren Sie die Funktion zum Hochladen von Django-Bildern

[PYTHON] "Müll nach Bild klassifizieren!" App-Erstellungstagebuch Tag4 ~ Bereiten Sie das Frontend mit Bootstrap ~ vor

Einführung

Synopse bis zum letzten Mal

Bildschirm

Vorbereitung

garbage_proj/setting.py

garbage/urls.py