Introduction

"Classify garbage by image!" Today on the 4th day of the application creation diary, I would like to use Bootstrap to prepare the front end.

Article list

-"Trash classification by image!" App creation diary day1 ~ Data set creation ~ -"Trash classification by image!" App creation diary day2-Fine-tuning with VGG16- -"Trash classification by image!" App creation diary day3 ~ Web application with Django ~ -"Trash classification by image!" App creation diary day4 ~ Prepare the front end with Bootstrap ~ ← Imakoko -"Trash classification by image!" App creation diary day5-Prepare front end with Bootstrap 2- -"Trash classification by image!" App creation diary day6 ~ Correction of directory structure ~

Synopsis up to the last time

In the previous articles, I implemented an image recognition application and put it on Django. This time I will prepare the front end.

Image display

First of all, there was a problem that the image could not be displayed as the previous issue. I will write the countermeasures.

In the first place, how to display the image is that you can read it in HTML by placing the image on the web page and specifying the path. So, once save the image on the backend side, specify it with the path and implement it by reading it on the frontend. (It seems that Javascript can create something like a virtual link only in the browser with Blob URL, but I did not know if Django can do something similar)

Preparation

It is necessary to add settings so that it can handle images.

`garbage_proj/setting.py`


#TEMPLATES context_Add the following in processors
'django.template.context_processors.media',

#Add the following around the end
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
MEDIA_URL = '/media/'

Also, change the urls so that you can route.

`garbage/urls.py`


# urlpatterns = []Add the following after the list of
 + static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

With this setting, you can set to refer to media (directory in the same row as garbage, garbage_proj) when access to garbege / media comes. That is, the link is connected by doing something like <img src ="./media/images/title.png ">.

template file

Now let's write the template file.

`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>Garbage classification by 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="Garbage classification by 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>Please enter the image you want to check the classification</p>
				<form action="/garbage/result" method="post" enctype="multipart/form-data">
					{% csrf_token %}
					{{ form }}
					<br>
					<button type="submit" class="mt-3">Send</button>
				</form>
			</div>
		</div>
	</div>
	<h4>Use existing images</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>

It would be nice to be able to easily respond responsively with Bootstrap's grid system. The actual design is as follows. 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>Garbage classification by 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="Garbage classification by 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">Classification result</h2>
				<img src="./media/images/image.png " alt="image" id="result-img">
				<div class="container">
					<table class="table">
						<tr><th>Classification</th><td>probability</td></tr>
						{% for key, value in pred %}
						<tr><th>{{ key }}</th><td>{{ value }}%</td></tr>
						{% endfor %}
					</table>
					<a href="{% url "index" %}">Back to Top</a>
				</div>
			</div>
		</div>
	</div>

</body>
</html>

In pred, each classification and its probability are like a list of tuples. This is also as follows. ps-2

By the way, CSS looks like this.

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

I mainly write the adjustment of the image with CSS, but other than that, I basically throw it in bootstrap.

Next time, I'd like to play with the view or write JavaScript so that the sample works.

Article list

References

-How to implement django image upload function

"Classify garbage by image!" App creation diary day4 ~ Prepare the front end with Bootstrap ~

Introduction

Synopsis up to the last time

Image display

Preparation

garbage_proj/setting.py

garbage/urls.py