[PYTHON] "Müll nach Bild klassifizieren!" App-Erstellungstagebuch Tag5 ~ Bereiten Sie das Frontend mit Bootstrap 2 ~ vor
Einführung
"Müll nach Bild klassifizieren!" Heute, am 5. 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 Tag3 ~ Web-App mit Django ~
- "Papierkorbklassifizierung nach Bild!" Tagebuch zur App-Erstellung Tag4 ~ Frontend mit Bootstrap vorbereiten ~
- "Müll nach Bild klassifizieren!" Tagebuch zur App-Erstellung Tag5 ~ Frontend mit Bootstrap 2 vorbereiten ~ ← Imakoko
- "Müllklassifizierung nach Bild!" App-Erstellungstagebuch Tag6 ~ Korrektur der Verzeichnisstruktur ~
Synopse bis zum letzten Mal
In den vorherigen Artikeln habe ich eine Bilderkennungsanwendung implementiert, sie auf Django gestellt und sogar das Frontend vorbereitet. In diesem Artikel werde ich Funktionen hinzufügen und die views.py- und Vorlagendateien entsprechend anpassen.
Funktionen zum Hinzufügen
Folgende Funktionen müssen hinzugefügt werden.
- Ausführung mit Beispielbild
- Implementierung des Seitenmenüs --Futter Implementierung
Ausführung mit Beispielbild
Lassen Sie zunächst zu, dass das Bild als Link im Index angezeigt wird.
garbage/templates/garbage/index.html
<h4>Verwenden Sie vorhandene Bilder</h4>
<div class="container row">
<div class="col-md-6 p-3">
<a href="{% url "garbage:sample1" %}">
<img src="./media/images/temp1.jpg " alt="Bild 1" class="sample-img">
</a>
</div>
<div class="col-md-6 p-3">
<a href="{% url "garbage:sample2" %}">
<img src="./media/images/temp2.jpg " alt="Bild 2" class="sample-img">
</a>
</div>
</div>
Als Routing
garbage/urls.py
path("sample1", views.sample1, name="sample1"),
path("sample2", views.sample2, name="sample2"),
Auf diese Weise werden sie an verschiedene Funktionen übergeben. Übergeben Sie es ursprünglich als "<a href="{% url "garbage:sample" num: 1%} ">" und "path" ("sample / <int: num>", views.sample, name = "sample". Ich denke, dass es als "),` verarbeitet werden sollte, aber da der Pfad des Bildes auf der Übergangszielseite als relativer Pfad angegeben ist, geschieht dies, weil der Link seltsam wird. Daher möchte ich mich verbessern, wenn es eine Möglichkeit gibt, einen statischen Ordner mit Bildern zu laden.
Und die Ansichtsdatei sieht folgendermaßen aus: Ich würde es gerne mit dem Ergebnis kombinieren, wenn es als Parameter übergeben werden kann, aber ich wollte, dass es vorerst funktioniert, daher ist es umständlich, aber es hat die hier angegebene Form.
garbage/views.py
def sample1(request):
img = "./media/images/temp1.jpg "
pred = predict(img)
params = {
"img":img,
"pred":pred
}
return render(request, "garbage/result.html", params)
Implementierung des Seitenmenüs
Hier setzen wir in HTML und CSS. Zunächst wird HTML wie folgt geschrieben (Link lässt Anforderungsparameter weg).
garbage/templates/garbage/index.html
<div class="container row">
<div class="card col-md-4 py-4 px-0 d-none d-md-block">
<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" 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" class="btn btn-default border-dark mb-1 rounded-0" role="button" target="_blank" rel="noopener noreferrer">Müll trennen und entsorgen</a>
</div>
Zunächst versuche ich, zwei Arten von Dingen in das Seitenmenü einzufügen. Für die Linkklassifizierung verwende ich eine Schaltfläche, die nicht mit grauem Hintergrund gedrückt werden kann, und für den Link verwende ich eine Schaltfläche mit einem gepunkteten Rand. Ich werde. Das p-Element ist eine dunkle Schaltfläche, und Bootstrap gibt an, dass die Ecken geschärft und die Farbe festgelegt werden. Der Link wird auf einer anderen Registerkarte geöffnet.
Stellen Sie andererseits CSS wie folgt ein.
garbage/static/garbage/css/style.css
a[role="button"]{
width: 90%;
border: dotted 1px;
}
p[role="button"]{
width: 90%;
}
p[role="button"]:not(:disabled):not(.disabled) {
cursor: default;
}
p[role="button"]:hover{
background-color: #6c757d ;
}
Da es mit Bootstrap nicht möglich ist, die Breite um 90% und den Rand auf die gepunktete Linie festzulegen, schreiben Sie diese mit CSS. Außerdem ist es für Schaltflächen, die nicht gedrückt werden können, verwirrend, wenn sie zu Zeigern werden oder sich die Hintergrundfarbe ändert. Daher habe ich eine Einstellung geschrieben, die die von Bootstrap willkürlich angegebene Pseudoklasse überschreibt. (Der Grund, warum Bootstrap eine Schaltfläche erstellt, selbst wenn Sie dies tun, liegt darin, dass die Schaltfläche für den Link verwendet wird. Es sieht also besser aus, wenn Sie auch die Klassifizierungsschaltfläche entsprechend erstellen.)
Fußzeilenimplementierung
Das Schreiben von HTML ist wie folgt.
garbage/templates/garbage/index.html
<footer>
<p id="copyright" class="mb-0">Copyright © 2020 eycjur All Rights Reserved.</p>
</footer>
Wenden Sie dazu CSS wie folgt an
garbage/static/garbage/css/style.css
#wrapper{
min-height: 100vh;
position: relative;
padding-bottom: 40px;
}
footer{
position: absolute;
bottom: 0;
width: 100%;
}
Durch Einstellen von "min-height" wird verhindert, dass die Fußzeile schwebt. Es verhindert auch, dass Sie es tragen, wenn Sie mit "Polsterung" durch das Bild scrollen. Wenn Sie "Position" auf "Relativ" und die Fußzeile auf "Absolut" setzen, wird dies an einer festen Position angezeigt.
Der mit den oben genannten drei Funktionen ausgestattete Bildschirm sieht folgendermaßen aus.
schließlich
Dieses Mal konnte ich nicht viel darüber schreiben, weil es so war, als würde ich die Ohren hochheben. Im Gegenteil, für jede Funktion ist es möglich, detaillierte Artikel für jede zu schreiben, und ich denke, dass es mehr Nachfrage gibt, aber da es sich um ein Entwicklungstagebuch handelt, möchte ich manchmal Artikel entsprechend meinem Arbeitstempo schreiben. Ich mache mir wirklich Sorgen darüber, was ich tun soll.
Nächstes Mal denke ich darüber nach, Smartphones in der Seitenleiste zu unterstützen!
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 ~ Web-App mit Django ~
- "Papierkorbklassifizierung nach Bild!" Tagebuch zur App-Erstellung Tag4 ~ Frontend mit Bootstrap vorbereiten ~
- "Müll nach Bild klassifizieren!" Tagebuch zur App-Erstellung Tag5 ~ Frontend mit Bootstrap 2 vorbereiten ~ ← Imakoko
- "Müllklassifizierung nach Bild!" App-Erstellungstagebuch Tag6 ~ Korrektur der Verzeichnisstruktur ~
Recommended Posts