-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathproject_8.html
160 lines (155 loc) · 9.02 KB
/
project_8.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Montserrat:600,700,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
<link href="https://unpkg.com/[email protected]/dist/aos.css" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<script src="https://cdn.jsdelivr.net/npm/vue"></script>>
<script src="https://cdn.jsdelivr.net/gh/google/code-prettify@master/loader/run_prettify.js"></script>
<script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
<link rel="stylesheet" href="./code.css">
<title>Pascal Schlaak | Portfolio</title>
<link rel="icon" type="image/png" href="./imgs/icons/logo_small.svg">
</head>
<body>
<div id="app">
<navbar-normal></navbar-normal>
<navbar-small></navbar-small>
<hamburger></hamburger>
<section id="project">
<img src="./imgs/dots.png" id="dots">
<div class="container project-text">
<h1>ML Web App: Which dog breed are you?</h1>
<div class="flex-row">
<div class="column-65">
<p class="text">
At the beginning of 2020 I started another project in my freetime. I wanted to create a
fullstack solution using some sort of machine learning algorithm.
My final idea intherited a web interface an user should be able to upload selfies with which
my algotihm predicts a dog breed most similar to the users facial features.
Short: A user should be able to find out which dog breed they are most similar to.
</p>
<p class="text">
Therefore I needed an architecture where a user can upload a picture through a web interace,
I can predict uploaded pictures in a back-end solution and visualize results through a web
interface back to the user.
</p>
<div class="border" style="padding: 0 20px;">
<h4>Current status: <span style="color: #2575fc;">Offline</span></h4>
<p class="text">Used up Amazon student credit for Elastic-Beanstalk service...</p>
</div>
<h2 style="padding-top: 2.5vh;"><span style="color: #DCDCDC;">#</span> Front-end</h2>
<p class="text">
Since I gained much experience with <code>Django</code> in my time at BMW, I wanted to build
my web interface with this framework in <code>Python</code>.
I wanted to build a up to date, simple and responsive website a user should intuitively be
able to use.
</p>
<img src="./imgs/project_8/whidobree_1.png" alt="Whidobree landing page" data-aos="fade-up">
<p class="text">
As you can see above, I designed this landing page quite minimalistic. A user should
instantly see what this website is about and what he needs to do.
To upload an picture I created a custom file form to read images and write them to the
back-end storage for thurder processing.
</p>
<img src="./imgs/project_8/whidobree_2.png" alt="Whidobree landing page" data-aos="fade-up">
<p class="text">
After choosing a file, the user just needs to press start to initialize processing handled
by back-end functionality.
</p>
<img src="./imgs/project_8/whidobree_3.png" alt="Whidobree landing page" data-aos="fade-up">
<p class="text">
After generating results, the user can see which dog breed he's most likely to by getting
the breeds name, prediction accuracy of this breed as well as an example picture.
If an user is not satisfied with its current results he can try to upload annother picture.
</p>
<h2 style="padding-top: 2.5vh;"><span style="color: #DCDCDC;">#</span> Back-end</h2>
<p class="text">
To predict dog breeds by images I built a Convolutional neural network trained on an own
generated dataset inheriting around 12.000 Bing-images of 65 different dog breeds.
Due to this high number of dog breeds and some random pictures in Bings search history
general performance is quite bad like expected (currently around 40% of test accuracy). I'm
using <code>Tensorflow 2 (Keras)</code> as machine learning library in <code>Python</code>.
I'm currently still working on the models architecture on Colab to try some new things I
didn't do before.
</p>
<p class="text">
General back-end functionality to predict the current image is quite simple. Back-end
functionality will be triggered if an valid file (image) was uploaded through the file form.
</p>
<pre class="prettyprint text fact">
<code class="lang-python">
# Resize image
processed_image = cv2.resize(image, (150, 150))
# Reshape image (needed for model input shape)
processed_image = np.array(processed_image).reshape(-1, 150, 150, 3)
# Convert data to float32
processed_image = np.array(processed_image, dtype=np.float32)
# Normalize data
processed_image /= 255
# Load model
model = load_model("media/model.h5")
# Predict current image
prediction = model.predict(processed_image)
# Get class and probability
index = np.argmax(prediction[0])
probability = round(float(prediction[0][index]), 2) * 100
# Get breed name
breed = CATEGORIES[index]</code>
</pre>
<p class="text">
After generating prediction, probability and breed name the result page will be rendered and
context filled with information.
</p>
<pre class="prettyprint text fact">
<code class="lang-python">
context = {
"probability": probability,
"breed": breed,
...
"image_path_dog": image_path_dog,
}
return HttpResponse(template_result.render(context, request))</code>
</pre>
<p class="text">
I published my solution through Amazons Elastic-Beanstalk service using my student credit
and free tier virtual machines which had just enough performance to process predictions.
</p>
</div>
<div>
<div class="information border">
<p class="text"><b>Type</b></p>
<p class="text">Private project</p>
<p class="text"><b>Tools</b></p>
<p class="text">Python, Django, Tensorflow 2, Numpy, OpenCV, Pillow</p>
<p class="text"><b>Partners</b></p>
<p class="text">-</p>
<p class="text"><b>Date</b></p>
<p class="text">2020-03-24</p>
<p class="text"><b>Source</b></p>
<p class="text">
<a href="https://github.com/Schlagoo/whidobree" style="color: #2F58F7">Github
repository</a>
</p>
</div>
</div>
</div>
</div>
</section>
<footer-portfolio></footer-portfolio>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#hamburger, #home, #proj, abo').click(function () {
$("#hamburger").toggleClass('open');
});
});
</script>
<script type="text/javascript" src="./main.js"></script>
</body>
</html>