"Classer les déchets par image!" Journal de création d'application Aujourd'hui, le 6ème jour, nous allons corriger la structure des répertoires. C'est léger parce que j'étais occupé aujourd'hui.
Liste d'articles
Dans les articles précédents, j'ai implémenté une application de reconnaissance d'image et l'ai mise sur Django, puis j'ai utilisé Bootstrap pour préparer le front-end. Le premier problème à ce stade est qu'il existe des descriptions en double dans les fichiers de modèle d'index et de résultat, qui peuvent être résolus en créant un fichier de base. Le deuxième problème est que je référence le fichier image à partir du HTML avec un chemin relatif, donc j'aimerais pouvoir le lire à partir du dossier statique.
Migrez les descriptions en double dans l'index et le résultat vers la base. C'est parce qu'il est inefficace de jouer avec deux fichiers chaque fois que vous modifiez la conception à l'avenir.
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>Classement des déchets par image!</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="Classement des déchets par image!" 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">Liens externes</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">Recherche triée</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">Comment séparer et éliminer les déchets</a>
</div>
{% block main %}{% endblock main %}
</div>
{% block second %}{% endblock second %}
<footer>
<p id="copyright" class="mb-0">Copyright © 2020 eycjur All Rights Reserved.</p>
</footer>
</div>
</body>
</html>
Comme la description au début et la barre latérale sont courantes, utilisez base. La description de chaque fichier est saisie à la place de «{% block main%} {% endblock main%}».
Donc, si vous regardez à quoi ressemble chaque fichier,
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>Veuillez saisir l'image dont vous souhaitez vérifier la classification</p>
<form action="{% url "garbage:result" %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<br>
<button type="submit" class="mt-3 wait-disappear">Trouver!</button>
</form>
</div>
</div>
{% endblock main %}
{% block second %}
<h4>Utiliser des images existantes</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="Image 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="Image 2" class="sample-img">
</a>
</div>
</div>
{% endblock second %}
En n'écrivant que la partie minimale, je pense que vous pouvez dire que c'est assez soigné comme ça.
Tout d'abord, décidez du type de structure de répertoires que vous souhaitez. Cette fois, la configuration est la suivante.
garbage_proj ├garbage_proj │ └settings.py etc. ├garbage │ └views.py etc. └static └garbage ├css │ └style.css └media └images └image.png etc.
Tout d'abord, définissons les chemins statiques et multimédias.
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/'
Maintenant, puisque BASE_DIR est le dossier garbage_proj d'origine, vous pouvez voir que vous pouvez spécifier respectivement les dossiers static et media.
En faisant cela, vous pouvez l'utiliser en lisant le répertoire static, donc spécifiez l'image comme <img src =" {% static'garbage / media / images / title.png '%} "> dans le fichier modèle. Je peux le faire.
Je décrirai sur cette base.
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">Résultat de la classification</h2>
<img src="{% static 'garbage/media/images/image.png' %}" alt="image" id="result-img">
<div class="container">
<table class="table">
<tr><th>Classification</th><td>probabilité</td><td>Jour de collecte</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" %}">Retour au sommet</a>
</div>
</div>
</div>
{% endblock main %}
Écrire de cette manière élimine le besoin d'écrire des chemins relatifs, vous pouvez donc unifier le routage.
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>Veuillez saisir l'image dont vous souhaitez vérifier la classification</p>
<form action="{% url "garbage:result" %}" method="post" enctype="multipart/form-data">
{% csrf_token %}
{{ form }}
<br>
<button type="submit" class="mt-3 wait-disappear">Trouver!</button>
</form>
</div>
</div>
{% endblock main %}
{% block second %}
<h4>Utiliser des images existantes</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="Image 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="Image 2" class="sample-img">
</a>
</div>
</div>
{% endblock second %}
Le paramètre num est spécifié et passé à result_num de l'application garbage. De plus, le urls.py qui gère cela ressemble à ceci:
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"),
]
La même fonction appelée «result» est assignée à «result_num», en passant des paramètres.
garbage/views.py (partiellement omis)
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)
J'ai pu utiliser l'image existante lorsque l'échantillon a été sélectionné.
Avec ce qui précède, je pense que la structure des fichiers est devenue beaucoup plus facile à comprendre. Le développement futur sera beaucoup plus facile! D'ailleurs, lorsque j'écrivais cet article, j'ai appris pour la première fois que le langage django pouvait être spécifié dans le bloc de code. C'est très pratique car il hérite des surlignages de la syntaxe HTML et rend le modèle django plus facile à voir.