Hack4PWD-Sign-Language-Translator/index.html at main · tbgcollab/Hack4PWD-Sign-Language-Translator · GitHub

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
<!--
Index.html is the User Interface for the Sign Language Translator.
It contains the Welcome Screen, Title Bar, Status Bar, Translator Window, and Video Call frame.

To Learn More how to run this code, visit README.md
Fix Alerts
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <!--Sets up stylesheet and script file linking. Adds favicon and site title as well-->
    <meta charset="UTF-8">
    <link rel="shortcut icon" type="image/png" href="Images/asl_logo.ico" />
    <title>BeMyMouth</title>
    <link href="https://fonts.googleapis.com/css?family=Google+Sans:100,300,400,500" rel="stylesheet">
    <link rel="stylesheet" href="CSS/style.css">
    <link rel="stylesheet" href="CSS/animate.css">
    <script src="dist/build.js"></script>
</head>

<body>
    <!--Welcome Screen-->
    <div id="welcomeContainer" class="animated">
        <div id="welcomeScreen">
            <h1>Welcome to BeMyMouth A sign language translator</h1>
            <h3 class="animated fadeInUp delay-2s">By Banny Ercy Ndikuriyo🔥 </h3>
        </div>
        <button id="proceedButton">Proceed😊</button>
    </div>

    <!--Title bar explains the stage of the program
    (eg: instructions for Training, Prediction, and Video Chat)-->
    <div id="titleBar">
        <h1 id="stage">Train Gestures</h1>
        <h3 id="steps">Train about 30 samples of your Start Gesture and 30 for your idle, Stop Gesture.</h3>
        <button id="nextButton" class="animated flash delay-3s">Next</button>
        <button id="predictButton" class="animated flash slideInRight faster">Translate</button>
        <button id="backButton" class="animated slideInLeft faster">Back to Training</button>
        <button id="videoCallBtn" class="videoCallBtn animated slideInRight faster">Video Call</button>
    </div>

    <!--Status bar shows the status of translation-->
    <div id="status">
        <p id="status-text">Status: Not Ready</p>
    </div>

    <!--The Translator Window displays the video of the user, various buttons, and holds
    the training and translation screens-->
    <div id="translatorWindow">

        <!--Initial Training Holder creates the screen where users train Start and Stop Gestures-->
        <div id="initialTrainingHolder">
            <img src="" alt="checkmark" id="checkmark_startButton" class="checkMark">
            <button id="startButton" class="trainButton ">Start Gesture</button>
            <button id="clear_startButton" class="clearButton">Clear</button>
            <h3 id="counter_startButton" class="counter"></h3>

            <button id="stopButton" class="trainButton ">Stop Gesture</button>
            <button id="clear_stopButton" class="clearButton">Clear</button>
            <h3 id="counter_stopButton" class="counter"></h3>
            <img src="" alt="checkmark" id="checkmark_stopButton" class="checkMark">
        </div>

        <!--Video Holder displays the video feed from the user for training and translation.
        It also displays the Video Call feed once the user decides to do that-->
        <div id="videoHolder" class="videoContainerTrain">
            <video id="video" class="videoTrain" src='' muted autoplay playsinline></video>
            <iframe src="https://tokbox.com/embed/embed/ot-embed.js?embedId=f37957b6-0f91-4fc5-90ce-f818cc85b5bf&room=DEFAULT_ROOM&iframe=true"
                width=650 height=370 allow="microphone; camera" id="videoCall"></iframe>
        </div>

        <!--Training Holder displays the screen where users add and train new gestures-->
        <div id="trainingHolder">
            <h5 id="add-gesture">Add Gesture</h5>
            <img src="Images/plus_sign.svg" alt="Plus Sign" id="plus_sign" class="plus_sign animated">
            <form id="add-word" autocomplete="off">
                <input type="text" id="new-word" placeholder="New Gesture Title">
                <input type="submit" id="submit-word" value="Add Word &#9658;">
            </form>
            <button id="doneRetrain" class="doneRetrain">Done Retraining</button>

            <div id="trainingCommands"></div>
        </div>

        <!--Translation Holder is where the Gesture Card and Text that was translated is displayed.-->
        <div id="translationHolder">
            <div id="translatedCard">
            </div>
            <h3 id="translationText">Start Signing!</h3>
        </div>
    </div>

    <!--Trained Card Holder contains all the trained gestures' cards.
    It is outside the Training and Translation Windows because it has to be displayed on both screens-->
    <div id="trainedCardsHolder">
    </div>
</body>

</html>