-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
226 lines (202 loc) · 10.2 KB
/
index.html
File metadata and controls
226 lines (202 loc) · 10.2 KB
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
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Handwritten Digit Classification</title>
<!-- Add any additional meta tags, CSS links, or other head content here -->
<link href="https://fonts.googleapis.com/css2?family=Google+Sans&display=swap" rel="stylesheet">
<style>
/* Add your custom CSS styles here */
body {
margin: 0;
padding-top: 60px;
}
header {
/* background-color: black; */
color: black;
text-align: center;
padding-left: 20%;
padding-right: 20%;
}
main {
padding-left: 17%;
padding-right: 17%;
letter-spacing: 0.5px;
}
body, h1, h2, h3, h4, h5, h6, main, footer {
font-family: 'Google Sans', 'Times New Roman', Times, serif; /* Fallback font in case the custom font fails to load */
}
h1 {
letter-spacing: 1;
}
p {
letter-spacing: 0.25;
}
.video-container {
position: relative;
width: 800px;
height: 450px;
margin: 0 auto;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.image-container {
display: flex;
justify-content: center;
margin-bottom: 20px;
text-align: center;
}
.image-container img {
width: 85%;
height: auto;
text-align: center;
}
.caption {
text-align: center;
}
.video-container {
position: relative;
width: 80%;
/* padding-top: 45%; */
}
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<header>
<h1 style="margin-bottom: 25px;">Handwritten Digit Classification Using Traditional<br>Machine Learning Techniques</h1>
<p style="font-size: larger;">
<a href="https://www.linkedin.com/in/rishabh-acharya912/" style="color:black">Rishabh Acharya</a><sup>1</sup>  
<a href="https://www.linkedin.com/in/pujit-jha-a10aa0258/" style="color: black">Pujit Jha</a><sup>1</sup>  
<a href="https://www.linkedin.com/in/ankit-kumar-097b72255/" style="color: black">Ankit Kumar</a><sup>1</sup>  
<a href="https://www.linkedin.com/in/ayush-pekamwar/" style="color: black">Ayush Pekamwar</a><sup>1</sup>  
<a href="https://github.com/alphaatom" style="color: black">Raj Nandan Singh</a><sup>1</sup>
</p>
<p style="font-size: 13px;"><sup>1</sup> <a href="https://www.iitj.ac.in/" style="color: black">IIT Jodhpur</a></p>
<p style="font-size: 17px; margin-top: 20px;"><b>
<a href="https://huggingface.co/spaces/rishz09/prml-project" style="color: black">Interface</a> |
<a href="static/report.pdf" style="color: black">Report</a> |
<a href="https://github.com/rishz09/prml-course-project" style="color: black">GitHub Repo</a> |
<a href="https://git-disl.github.io/GTDLBench/datasets/mnist_datasets/" style="color: black">Dataset</a> |
<a href="static/slides.pdf" style="color: black">Slides</a> |
<a href="https://www.youtube.com/watch?v=PFfeS9J3eS8" style="color: black">Spotlight Presentation</a></b>
</p>
</header>
<main>
<section style="margin-top: 40px;">
<div class="image-container">
<div>
<img src="static/training_2numbers_eachlabel_resize.png" alt="MNIST Digits">
</div>
</div>
</section>
<section style="margin-top: 40px;">
<h2>Abstract</h2>
<p style="letter-spacing: 0.3px; word-spacing: 1px; text-align: justify; line-height: 1.5;">
This report presents a methodical approach to enhancing classification accuracy on the MNIST
dataset, and using it to classify handwritten digits into one of the ten decimal digits. Our approach
incorporates a meticulous blend of feature extraction methods, dimensionality reduction techniques,
and diverse classifiers, all strategically combined to optimize performance metrics while ensuring
computational efficiency. In this project, we investigate the efficacy of two distinct feature extractors:
Edge Detection and a bespoke Custom Feature Extractor, coupled with two well-established
dimensionality reduction algorithms, namely Linear Discriminant Analysis (LDA) and Principal
Component Analysis (PCA). Through rigorous experimentation and evaluation, incorporating advanced
techniques like data augmentation to enrich training datasets, we systematically refine and
validate our models based on a robust set of performance metrics.. Our findings culminate in the
development of an optimized model that combines the strengths of the Custom Feature Extractor
with a Random Forest classifier, further enhanced by augmented data samples. This optimized
model achieved a stellar classification accuracy of 97.78%, demonstrating both the effectiveness of
our approach and its applicability to real-world image classification tasks. Our findings underscore
the critical role of thoughtful feature extraction, judicious model selection, and strategic data augmentation
in not only improving classification outcomes but also in enhancing the robustness and
generalizability of machine learning models across diverse datasets and real-world scenarios.
</p>
<p style="letter-spacing: 0.3px; word-spacing: 1px; text-align: justify;"><b>Keywords:</b> MNIST, digit classification, feature extractor, data augmentation, predictions</p>
</section>
<section style="margin-top: 40px;">
<h2>Dataset</h2>
<div class="image-container", style="margin-bottom: 40px;">
<div>
<img src="static/train_set_distn.png" alt="Training Set Distribution">
<div class="caption"><b>Training Set Distribution</b></div>
</div>
<div>
<img src="static/test_set_distn.png" alt="Test Set Distribution">
<div class="caption"><b>Test Set Distribution</b></div>
</div>
</div>
</section>
<section style="margin-top: 60px;">
<h2>Preprocessing on User Images</h2>
<div class="image-container", style="margin-bottom: 40px;">
<div>
<img src="static/my_3_resized.png" alt="Image Preprocessing">
</div>
</div>
</section>
<section style="margin-top: 60px;">
<h2>Custom Feature Extraction on Preprocessed User Image</h2>
<div class="image-container", style="margin-bottom: 40px;">
<div>
<img src="static/my_3_transformed.png" alt="Custom Feature Extractor">
</div>
</div>
</section>
<section style="margin-top: 60px;">
<h2>Results</h2>
<div class="image-container", style="margin-bottom: 40px;">
<div>
<img src="static/acc_vs_model.png" alt="Accuracy vs Model">
<!-- <div class="Accuracy vs Model"><b>Training Set Distribution</b></div> -->
</div>
<div>
<img src="static/time_vs_model.png" alt="Time vs Model">
<!-- <div class="Time vs Model"><b>Test Set Distribution</b></div> -->
</div>
</div>
</section>
<section style="margin-top: 60px;">
<h2>Interface (<a href="https://huggingface.co/spaces/rishz09/prml-project" style="color: black">website</a>)</h2>
<div class="video-container">
<video src="static/hf_vid_edited.mp4" controls autoplay loop></video>
</div>
</section>
<section style="padding-top: 18px;">
<h2>Spotlight Presentation</h2>
<div class="video-container">
<iframe width="800px" height="450px" src="https://www.youtube.com/embed/PFfeS9J3eS8" frameborder="0" allowfullscreen></iframe>
</div>
</section>
<section style="padding-top: 18px;">
<h2>Contact</h2>
<p>Rishabh Acharya: <a href= "#" onclick="composeEmail('b22cs090@iitj.ac.in')" style="color: black">b22cs090@iitj.ac.in</a></p>
<p>Pujit Jha: <a href= "#" onclick="composeEmail('b22cs091@iitj.ac.in')" style="color: black">b22cs091@iitj.ac.in</a></p>
<p>Ankit Kumar: <a href= "#" onclick="composeEmail('b22cs076@iitj.ac.in')" style="color: black">b22cs076@iitj.ac.in</a></p>
<p>Ayush Pekamwar: <a href= "#" onclick="composeEmail('b22ee084@iitj.ac.in')" style="color: black">b22ee084@iitj.ac.in</a></p>
<p>Raj Nandan Singh: <a href= "#" onclick="composeEmail('b22ee052@iitj.ac.in')" style="color: black">b22ee052@iitj.ac.in</a></p>
<script>
function composeEmail(emailId) {
var gmailComposeURL = "https://mail.google.com/mail/?view=cm&fs=1&to=" + encodeURIComponent(emailId);
window.location.href = gmailComposeURL;
}
</script>
</section>
<section style="padding-top: 18px; text-align: center">
<h2>Group 32</h2>
</section>
</main>
</body>
</html>