Skip to content

Commit 0e17a91

Browse files
itzdineshxitzdineshx
authored
Add files via upload
1 parent b8cdd4c commit 0e17a91

File tree

1 file changed

+127
-0
lines changed

1 file changed

+127
-0
lines changed

‎index.html

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Handwritten Digit Recognition</title>
8+
9+
<!-- Google Fonts -->
10+
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;600&family=Poppins:wght@600&family=Lora:wght@600&family=Pacifico&display=swap" rel="stylesheet">
11+
12+
<!-- Bootstrap CSS -->
13+
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
14+
15+
<!-- Font Awesome Icons -->
16+
<script src="https://kit.fontawesome.com/b3aed9cb07.js" crossorigin="anonymous"></script>
17+
18+
<!-- Custom CSS -->
19+
<link rel="stylesheet" href="css/styles.css">
20+
21+
<!-- TensorFlow.js -->
22+
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest"></script>
23+
24+
</head>
25+
26+
<body onload="init()">
27+
28+
<!-- Theme Toggle Button -->
29+
<div class="theme-toggle">
30+
<button id="theme-toggle-btn" class="btn" onclick="toggleTheme()">
31+
<i id="theme-icon" class="fas fa-moon"></i>
32+
</button>
33+
</div>
34+
35+
<!-- Welcome Section -->
36+
<header class="welcome">
37+
<h1>Welcome to the Future of Handwritten Digit Recognition!</h1>
38+
</header>
39+
40+
<!-- Title Section -->
41+
<section id="title" class="text-center py-5">
42+
<h2 class="heading">Handwritten Digit Recognition Web App</h2>
43+
<p>
44+
This app allows you to draw a digit on the canvas, and it will instantly recognize it using a deep learning model. The app uses a Convolutional Neural Network (CNN) trained on the MNIST dataset for highly accurate predictions.
45+
</p>
46+
</section>
47+
48+
<!-- Tutorial Section -->
49+
<section id="tutorial" class="py-5">
50+
<div class="container">
51+
<h2 class="heading text-center">How to Use the Handwritten Digit Recognition App</h2>
52+
<div class="row">
53+
<div class="col-md-4">
54+
<div class="step">
55+
<h4>Step 1: Draw a Digit</h4>
56+
<p>Click and draw any digit from 0 to 9 on the canvas. The app will detect your drawing in real time.</p>
57+
</div>
58+
</div>
59+
<div class="col-md-4">
60+
<div class="step">
61+
<h4>Step 2: Click "Predict"</h4>
62+
<p>Once you've finished drawing the digit, click on the <strong>"Predict"</strong> button to get the prediction.</p>
63+
</div>
64+
</div>
65+
<div class="col-md-4">
66+
<div class="step">
67+
<h4>Step 3: View the Prediction</h4>
68+
<p>After a few seconds, the app will display the predicted digit and the confidence level of the prediction.</p>
69+
</div>
70+
</div>
71+
</div>
72+
</div>
73+
</section>
74+
75+
<!-- Content Section -->
76+
<section id="content" class="d-flex justify-content-center align-items-center flex-column py-4">
77+
<div id="sketchpadapp" class="row w-75">
78+
<div class="col-md-6 text-center">
79+
<canvas id="sketchpad" height="300" width="300"></canvas>
80+
<div class="buttons_div">
81+
<button type="button" class="btn" id="predict_button">Predict</button>
82+
<button type="button" class="btn" id="clear_button">Clear</button>
83+
</div>
84+
</div>
85+
<div class="predicted_answer col-md-6 text-center">
86+
<h2 id="prediction_heading">Prediction</h2>
87+
<h1 id="result">-</h1>
88+
<p id="confidence">Confidence: -</p>
89+
</div>
90+
</div>
91+
</section>
92+
93+
<!-- Footer -->
94+
<footer id="footer" class="text-center py-3">
95+
<a href="https://www.linkedin.com/in/dinesh-x/" target="_blank" class="social-media-icon mx-3">
96+
<i class="fab fa-linkedin fa-2x"></i>
97+
</a>
98+
<a href="https://github.com/itzdineshx" target="_blank" class="social-media-icon mx-3">
99+
<i class="fab fa-github fa-2x"></i>
100+
</a>
101+
</footer>
102+
103+
<!-- Custom Script -->
104+
<script src="js/main.js"></script>
105+
106+
<!-- Dark/Light Mode Toggle Script -->
107+
<script>
108+
function toggleTheme() {
109+
const body = document.body;
110+
const icon = document.getElementById("theme-icon");
111+
112+
// Toggle between dark and light mode
113+
body.classList.toggle("dark-mode");
114+
115+
// Change icon based on mode
116+
if (body.classList.contains("dark-mode")) {
117+
icon.classList.remove("fa-moon");
118+
icon.classList.add("fa-sun");
119+
} else {
120+
icon.classList.remove("fa-sun");
121+
icon.classList.add("fa-moon");
122+
}
123+
}
124+
</script>
125+
126+
</body>
127+
</html>

0 commit comments

Comments
 (0)