Teaching Alexa Sign Language Using Machine Learning
In this post I show the code which you can use to train alexa to understand sign language using machine learning and tensorflow.js
I have made a youtube video, in which I explain everything. You can check it out here:
https://www.youtube.com/channel/UCsr3AeLWc7NO1pNLIQrC-dA
This post contains the source code. You are accessible to you and play around with it.
First thing first, you are going to create an index.html file, in which you are going to copy the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Alexa Sign Language Translator</title>
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="dist/build.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="launchModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span id="close-modal">×</span>
<h2>Hey there!</h2>
</div>
<div class="modal-body">
</div>
</div>
</div>
<div id="status">
<p id="status-text">Status: Not Ready</p>
</div>
<video id="video" src='' muted autoplay playsinline></video>
<div class="split-left">
<div class="centered">
<h1 id="text" class="intro-steps">Step 1: Enter Words<br><span class="subtext">Add a few words below. In the next step we'll associate each word with signs from the webcam</h1>
<div id="training-list">
<div id="example-list"></div>
<div id="add">
<form id="add-word" autocomplete="off">
<input type="text" id="new-word" placeholder="Add Training word">
<br/><br/>
<label>
<input type="checkbox" id="is-terminal-word">
Is terminal word?
</label>
<br/><br/>
<input type="submit" value="Add Word">
<p><b>Terminal Word</b> - A word that appears as the last word in your query</p>
<p>e.g If you intend to ask "What's <b><em>the weather</em></b>?" & "What's <b><em>the time</em></b>?" then <b><em>the weather</em></b> and <b><em>the time</em></b> are terminal words whereas <b><em>what's</em></b> is not</p>
</form>
</div>
<p id="count">Training: 2 words</p>
<div id="action-btn"></div>
</div>
</div>
</div>
<div class="split-right">
<div class="centered">
<div id="loader"></div>
<h1>
<span id="answerText"></span>
<span id="interimText"></span>
</h1>
</div>
</div>
</body>
</html>
You can see the complete source by getting a free trial you don’t have to pay anything today, and you can copy the code!