-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
68 lines (65 loc) · 3.86 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GestureGenius</title>
<script src="/script.js"></script>
<link rel="stylesheet" type="text/css" href="/home.css">
<script src="https://kit.fontawesome.com/7648d40860.js" crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
</head>
<body onload="load()">
<div id="header">
<h1>GestureGenius</h1>
<h3>Learn American Sign Language with ease</h3>
<a class="about" href="#section3">About</a>
</div>
<a href="#section2"><i class="fa-regular fa-hand-point-down icon" id="icon"></i></a>
<div id="section2">
<div id="carousel">
<a class="pile" id="alphabet" href="/learn">
<div class="card">
Learn the Alphabet
<i class="fa-solid fa-arrow-down-a-z icon2"></i>
</div>
</a>
<a class="pile" id="name" href="/name">
<div class="card">
Spell your Name
<i class="fa-solid fa-signature icon2"></i>
</div>
</i>
</a>
<a class="pile" id="greetings" href="/learn">
<div class="card">
Greetings (Soon™)
<i class="fa-regular fa-handshake icon2"></i>
</div>
</i>
</a>
<a class="pile" id="numbers" href="/learn">
<div class="card">
Numbers (Soon™)
<i class="fa-solid fa-arrow-down-1-9 icon2"></i>
</div>
</a>
</div>
</div>
<div id="section3">
<h1>Gesture Genius</h1>
<div id="section3-text">
<p>Gesture Genius is our submission for BrisHack 2023, a web application designed to assist people in learning American Sign Language. The app can also be extended to include additional words and various sign languages, depending on the data available. Currently, there are two modes available in the app:</p>
<ul>
<li>A learning mode that displays flashcards showing letters and their corresponding gestures on the screen, requiring the user to replicate the gesture. Once the user has learned the gesture, only the letter is displayed to test their memory.</li>
<li>A typing mode that helps users learn how to signal their name without any assistance.</li>
</ul>
<p>To detect hand gestures, we utilize TensorFlow.js. We extract hand coordinates using the MediaPipe hand landmark model, then run the outputs through our custom classification model. Our classification model was trained on a mash-up of ASL letter datasets, where hand positions were extracted and used to train the classifier. The resulting model runs comfortably at 30 fps and achieves approximately 84% accuracy on validation. However, since the training images used had slightly different hand positions from the label images, users may need to adjust their hand position before the app detects the gesture.</p>
<p>We built the website from scratch using HTML/CSS/JavaScript, except for TensorFlow.js. We included placeholders for other gestures, but due to time constraints, we were unable to implement them. Some of the more complex ASL words are represented as motions rather than static gestures, and while our model can recognize motions in principle by adding an extra LSTM layer and storing the last few frames, the training datasets for dynamic gestures are much larger and require authorization before they can be downloaded.</p>
</div>
<a href="https://github.com/Sank6/GestureGenius" target="_blank">
<i class="fa-brands fa-github icon3"></i>
</a>
</div>
</body>
</html>