Einführung

"Müll nach Bild klassifizieren!" App-Erstellungstagebuch Heute, am 6. Tag, werden wir die Verzeichnisstruktur korrigieren. Es ist hell, weil ich heute beschäftigt war.

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!" App-Erstellungstagebuch Tag4 ~ Bereiten Sie das Frontend mit Bootstrap vor ~
"Müll nach Bild klassifizieren!" App-Erstellungstagebuch Tag 5 ~ Bereiten Sie das Frontend mit Bootstrap 2 vor ~

Synopse bis zum letzten Mal

In den vorherigen Artikeln habe ich eine Bilderkennungsanwendung implementiert und auf Django gestellt und dann Bootstrap verwendet, um das Frontend vorzubereiten. Das erste Problem an dieser Stelle besteht darin, dass die Index- und Ergebnisvorlagendateien doppelte Beschreibungen enthalten, die durch Erstellen einer Basisdatei behoben werden können. Das zweite Problem ist, dass ich die Bilddatei aus HTML mit einem relativen Pfad referenziere, sodass ich sie aus dem statischen Ordner lesen möchte.

Base.html erstellen

Migrieren Sie doppelte Beschreibungen im Index und Ergebnis zur Basis. Dies liegt daran, dass es ineffizient ist, jedes Mal, wenn Sie das Design in Zukunft ändern, mit zwei Dateien herumzuspielen.

`garbage/templates/garbage/base.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" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
	<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>
	<div id="wrapper">
		<button class="toggler d-md-none" type="button" id="toggler" data-toggle="collapse-side" data-target=".side-collapse">
			<i class="fas fa-bars fa-2x"></i>
		</button>
		<img src="{% static 'garbage/media/images/title.png' %}" alt="Müllklassifizierung nach Bild!" class="m-4 pb-3" id="title">

		<div class="container row">
			<div class="card col-md-4 py-4 px-0 d-none d-md-block h-100" id="sidebar">
				<p role="button" class="mb-2 btn border-dark rounded-0 btn-secondary">Externe Links</p>
				<a href="https://manage.delight-system.com/threeR/web/bunbetsu?menu=bunbetsu&jichitaiId=kashiwashi&areaId=22125&areaName=%2F&lang=ja&benriCateId=7&bunbetsuCateId=7&faqCateId=%2F&howToCateId=&search=%E3%83%9A%E3%83%83%E3%83%88%E3%83%9C%E3%83%88%E3%83%AB&dummy=" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">Sortierte Suche</a>
				<a href="https://manage.delight-system.com/threeR/web/benri?menu=benri&jichitaiId=kashiwashi&areaId=22125&benriCateId=7&bunbetsuCateId=7&faqCateId=%2f&lang=ja" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">Müll trennen und entsorgen</a>
			</div>

			{% block main %}{% endblock main %}

		</div>

		{% block second %}{% endblock second %}
		
		<footer>
			<p id="copyright" class="mb-0">Copyright &copy; 2020 eycjur All Rights Reserved.</p>
		</footer>
	</div>
</body>
</html>

Verwenden Sie base, da die Beschreibung am Anfang und die Seitenleiste häufig sind. Die Beschreibung für jede Datei wird anstelle von "{% block main%} {% endblock main%}" eingegeben.

Wenn Sie sich also ansehen, wie jede Datei tatsächlich aussieht,

`garbage/templates/garbage/index.html`


{% extends "garbage/base.html" %}
{% load static %}

{% block main %}
<div class="col-md-8">
	<div class="container card p-4 h-100">
		<p>Bitte geben Sie das Bild ein, dessen Klassifizierung Sie überprüfen möchten</p>
		<form action="{% url "garbage:result" %}" method="post" enctype="multipart/form-data">
			{% csrf_token %}
			{{ form }}
			<br>
			<button type="submit" class="mt-3 wait-disappear">Rausfinden!</button>
		</form>
	</div>
</div>
{% endblock main %}

{% block second %}
<h4>Verwenden Sie vorhandene Bilder</h4>
<div class="container row">
	<div class="col-md-6 p-3">
		<a href='{% url "garbage:result_num" num=1 %}'>
			<img src="{% static 'garbage/media/images/temp1.jpg' %}" alt="Bild 1" class="sample-img">
		</a>
	</div>
	<div class="col-md-6 p-3">
		<a href='{% url "garbage:result_num" num=2 %}'>
			<img src="{% static 'garbage/media/images/temp2.jpg' %}" alt="Bild 2" class="sample-img">
		</a>
	</div>
</div>
{% endblock second %}

Wenn Sie nur den minimalen Teil schreiben, können Sie meiner Meinung nach vermitteln, dass er so ordentlich ist.

Korrigieren Sie die Platzierung von Bilddateien

Vollständiges Bild

Entscheiden Sie zunächst, welche Art von Verzeichnisstruktur Sie möchten. Diesmal ist die Konfiguration wie folgt.

garbage_proj ├garbage_proj │ └settings.py etc. ├garbage │ └views.py etc. └static 　 └garbage 　　├css 　　│　└style.css 　　 └media 　　　└images └image.png etc.

statische und Medienpfade

Lassen Sie uns zunächst die statischen und Medienpfade festlegen.

`garbage_proj/setting.py`


STATIC_URL = '/static/'
STATICFILES_DIRS = (os.path.join(BASE_DIR, "static"),)

MEDIA_ROOT = os.path.join(BASE_DIR, 'static/garbage/media')
MEDIA_URL = '/media/'

Da BASE_DIR nun der ursprüngliche Ordner garbage_proj ist, können Sie sehen, dass Sie den statischen Ordner bzw. den Medienordner angeben können. Auf diese Weise können Sie es verwenden, indem Sie das statische Verzeichnis lesen. Geben Sie das Bild daher in der Vorlagendatei als "" an. Ich kann es schaffen

Ich werde darauf basierend beschreiben.

`garbage/templates/garbage/result.html`


{% extends "garbage/base.html" %}
{% load static %}

{% block main %}
<div class="col-md-8">
	<div class="container card p-4 px-5">
		<h2 class="m-3">Klassifizierungsergebnis</h2>
		<img src="{% static 'garbage/media/images/image.png' %}" alt="Bild" id="result-img">
		<div class="container">
			<table class="table">
				<tr><th>Einstufung</th><td>Wahrscheinlichkeit</td><td>Abholtag</td></tr>
				{% for key, value, day in pred %}
				<tr><th>{{ key }}</th><td>{{ value }}%</td><td>{{ day }}</td></tr>
				{% endfor %}
			</table>
			<a href="{% url "garbage:index" %}">Zurück nach oben</a>
		</div>
	</div>
</div>
{% endblock main %}

Wenn Sie auf diese Weise schreiben, müssen Sie keine relativen Pfade schreiben, sodass Sie das Routing vereinheitlichen können.

`garbage/templates/garbage/index.html`


{% extends "garbage/base.html" %}
{% load static %}

{% block main %}
<div class="col-md-8">
	<div class="container card p-4 h-100">
		<p>Bitte geben Sie das Bild ein, dessen Klassifizierung Sie überprüfen möchten</p>
		<form action="{% url "garbage:result" %}" method="post" enctype="multipart/form-data">
			{% csrf_token %}
			{{ form }}
			<br>
			<button type="submit" class="mt-3 wait-disappear">Rausfinden!</button>
		</form>
	</div>
</div>
{% endblock main %}

{% block second %}
<h4>Verwenden Sie vorhandene Bilder</h4>
<div class="container row">
	<div class="col-md-6 p-3">
		<a href='{% url "garbage:result_num" num=1 %}'>
			<img src="{% static 'garbage/media/images/temp1.jpg' %}" alt="Bild 1" class="sample-img">
		</a>
	</div>
	<div class="col-md-6 p-3">
		<a href='{% url "garbage:result_num" num=2 %}'>
			<img src="{% static 'garbage/media/images/temp2.jpg' %}" alt="Bild 2" class="sample-img">
		</a>
	</div>
</div>
{% endblock second %}

Der Parameter num wird angegeben und an result_num der Garbage-Anwendung übergeben. Außerdem sieht die urls.py, die dies behandelt, folgendermaßen aus:

`garbage/urls.py`


from django.urls import path
from django.conf import settings
from django.conf.urls.static import static
from . import views

app_name="garbage"
urlpatterns = [
    path("", views.index, name="index"),
    path("result", views.result, name="result"),
    path("result/<int:num>", views.result, name="result_num"),
]

Die gleiche Funktion namens "result" wird result_num zugewiesen, wobei Parameter übergeben werden.

`garbage/views.py (teilweise weggelassen)`


def result(request, num=0):
    if num:
        img = "./static/garbage/media/images/" + ["temp1.jpg ", "temp2.jpg "][num-1]

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

    pred = predict(img)

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

Ich konnte das vorhandene Bild verwenden, als das Beispiel ausgewählt wurde.

schließlich

Mit dem oben Gesagten denke ich, dass die Dateistruktur viel einfacher zu verstehen ist. Die zukünftige Entwicklung wird viel einfacher! Übrigens, als ich diesen Artikel schrieb, habe ich zum ersten Mal gelernt, dass die Sprache Django im Codeblock angegeben werden kann. Dies ist sehr praktisch, da es die HTML-Syntax-Highlights erbt und die Anzeige der Django-Vorlage erleichtert.

[PYTHON] "Müll nach Bild klassifizieren!" App-Erstellungstagebuch Tag6 ~ Korrektur der Verzeichnisstruktur ~

Einführung

Synopse bis zum letzten Mal

Base.html erstellen

garbage/templates/garbage/base.html

garbage/templates/garbage/index.html

Korrigieren Sie die Platzierung von Bilddateien

Vollständiges Bild

statische und Medienpfade

garbage_proj/setting.py

garbage/templates/garbage/result.html

garbage/templates/garbage/index.html

garbage/urls.py

garbage/views.py (teilweise weggelassen)

schließlich

`garbage/templates/garbage/base.html`

`garbage/templates/garbage/index.html`

`garbage_proj/setting.py`

`garbage/templates/garbage/result.html`

`garbage/templates/garbage/index.html`

`garbage/urls.py`

`garbage/views.py (teilweise weggelassen)`