introduction

"Classer les déchets par image!" Aujourd'hui, au 4ème jour du journal de création de l'application, j'aimerais utiliser Bootstrap pour préparer le front-end.

Liste d'articles

"Classification de la corbeille par image!" Journal de création de l'application jour1 ~ Création de l'ensemble de données ~
"Classification de la corbeille par image!" Journal de création de l'application day2-Mise au point avec VGG16-
"Classification de la corbeille par image!" Journal de création d'application jour3 ~ Application Web avec Django ~
"Classification de la corbeille par image!" Journal de création de l'application day4 ~ Préparez le frontal avec Bootstrap ~ ← Imakoko
"Classer les déchets par image!" Journal de création d'application day5-Préparer le front-end avec Bootstrap 2-
"Classification de la corbeille par image!" Journal de création d'application jour6 ~ Correction de la structure des répertoires ~

Synopsis jusqu'à la dernière fois

Dans les articles précédents, j'ai implémenté une application de reconnaissance d'image et l'ai mise sur Django. Cette fois, je vais préparer le front-end.

Affichage de l'image

Tout d'abord, il y avait un problème en raison du fait que l'image ne pouvait pas être affichée comme le problème précédent. J'écrirai les contre-mesures.

En premier lieu, comment afficher l'image est que vous pouvez la lire en HTML en plaçant l'image sur la page Web et en spécifiant le chemin. Ainsi, une fois que vous enregistrez l'image sur le côté arrière, spécifiez-la avec le chemin et implémentez-la en la lisant sur le front-end. (Il semble que Javascript puisse créer quelque chose comme un lien virtuel uniquement dans le navigateur avec l'URL Blob, mais je ne savais pas si Django pouvait faire quelque chose de similaire)

Préparation

Il est nécessaire d'ajouter des paramètres pour qu'il puisse gérer les images.

`garbage_proj/setting.py`


#Contexte des modèles_Ajouter ce qui suit dans les processeurs
'django.template.context_processors.media',

#Ajoutez ce qui suit à la fin
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Modifiez également les URL afin de pouvoir acheminer.

`garbage/urls.py`


# urlpatterns = []Ajoutez ce qui suit après la liste des
 + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

Avec ce paramètre, vous pouvez définir pour faire référence à media (répertoire dans la même ligne que garbage, garbage_proj) lorsque l'accès à garbege / media arrive. Autrement dit, le lien est connecté en faisant quelque chose comme <img src =" ./ media / images / title.png ">.

fichier modèle

Maintenant, écrivons le fichier modèle.

`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>Classement des déchets par image!</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="Classement des déchets par image!" 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>Veuillez saisir l'image dont vous souhaitez vérifier la classification</p>
				<form action="/garbage/result" method="post" enctype="multipart/form-data">
					{% csrf_token %}
					{{ form }}
					<br>
					<button type="submit" class="mt-3">Envoyer</button>
				</form>
			</div>
		</div>
	</div>
	<h4>Utiliser des images existantes</h4>
	<div class="container row">
		<div class="col-md-6 p-3">
			<img src="./media/images/temp1.jpg " alt="Image 1" class="sample-img">
		</div>
		<div class="col-md-6 p-3">
			<img src="./media/images/temp2.jpg " alt="Image 2" class="sample-img">
		</div>
	</div>
</body>
</html>

Ce serait bien de pouvoir répondre facilement de manière réactive avec le système de grille de Bootstrap. La conception réelle est la suivante. 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>Classement des déchets par image!</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="Classement des déchets par image!" 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">Résultat de la classification</h2>
				<img src="./media/images/image.png " alt="image" id="result-img">
				<div class="container">
					<table class="table">
						<tr><th>Classification</th><td>probabilité</td></tr>
						{% for key, value in pred %}
						<tr><th>{{ key }}</th><td>{{ value }}%</td></tr>
						{% endfor %}
					</table>
					<a href="{% url "index" %}">Retour au sommet</a>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

Dans pred, chaque classification et sa probabilité sont comme une liste de tapples. C'est également comme suit. ps-2

Au fait, CSS ressemble à ceci.

`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%;
}

J'écris principalement l'ajustement de l'image avec CSS, mais à part ça, je le jette essentiellement dans le bootstrap.

La prochaine fois, j'aimerais jouer avec la vue ou écrire du JavaScript pour que l'exemple fonctionne.

Liste d'articles

Références

Comment implémenter la fonction de téléchargement d'image django

"Classer les déchets par image!" Journal de création d'application day4 ~ Préparez le frontal avec Bootstrap ~

introduction

Synopsis jusqu'à la dernière fois

Affichage de l'image

Préparation

garbage_proj/setting.py

garbage/urls.py