-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
92 lines (86 loc) · 5.54 KB
/
index.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
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>MNIST Digit Playground</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<script src="script/canvas.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"
rel="stylesheet">
</head>
<link rel="stylesheet" href="styles/style.css" />
<script src="script/model.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
<!-- Import tfjs-vis -->
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-vis@1.0.2/dist/tfjs-vis.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<body>
<img id="selectedImage" src="#" alt="Selected Image" style="display: none" />
<div class="container-fluid">
<div class="row h-100">
<div class="col d-flex justify-content-center align-items-center">
<div class="container">
<h1 class="w-100 text-center p-5">MNIST Digit Classifier Using TensorFlow.js</h1>
<div class="row">
<div class="col">
<div class="card">
<div class="card-body">
<div class="row">
<canvas id="myCanvas"
style="border: 0.5px solid #333333; padding: 0; width: auto; aspect-ratio: 1; margin: auto; border-radius: 5px;"
width="560" height="560"></canvas>
</div>
<div class="row px-3 pt-3">
<button id="predictButton" class="btn col m-1 d-flex align-items-center justify-content-center"><svg
xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor"
viewBox="0 0 16 16" class="mx-1">
<path
d="M6.5 13a6.47 6.47 0 0 0 3.845-1.258h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1A6.47 6.47 0 0 0 13 6.5 6.5 6.5 0 0 0 6.5 0a6.5 6.5 0 1 0 0 13m0-8.518c1.664-1.673 5.825 1.254 0 5.018-5.825-3.764-1.664-6.69 0-5.018" />
</svg>Predict</a>
<button id="clearButton" onclick="resetCanvas()" class="btn col m-1">
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor" class="mx-1"
viewBox="0 0 16 16">
<path
d="M2.5 1a1 1 0 0 0-1 1v1a1 1 0 0 0 1 1H3v9a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V4h.5a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H10a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1zm3 4a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 .5-.5M8 5a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-1 0v-7A.5.5 0 0 1 8 5m3 .5v7a.5.5 0 0 1-1 0v-7a.5.5 0 0 1 1 0" />
</svg>Clear</a>
</div>
</div>
</div>
</div>
<div class="col">
<div class="row">
<div class="card">
<div class="card-body m-auto">
<h2 class="card-title">Predicted Result: <i id="predictionResult">0</i></h2>
</div>
</div>
</div>
<div class="row mt-3">
<div class="card">
<div class="card-body">
<h5 class="card-title">About the Project</h5>
<p class="card-text">
This model is a convolutional neural network (CNN) optimized for identifying handwritten digits. It uses two convolutional layers followed by max-pooling layers with ReLU activation and variance scaling for extracting features. The output is then flattened and connected to a dense layer with 10 neurons and softmax activation for class probability predictions. It is trained using the Adam optimizer with categorical cross-entropy loss.
</p>
<a href="https://github.com/Rrrinav/MNIST-Digit-Classifier"
class="btn d-flex align-items-center justify-content-center" target="_blank"><svg
xmlns="http://www.w3.org/2000/svg" width="17" height="17" fill="currentColor" class="mx-1"
viewBox="0 0 16 16">
<path
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8" />
</svg>Github</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>