File size: 5,117 Bytes
c9f9492
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f8b7d96
c9f9492
 
f8b7d96
 
 
a602f57
f8b7d96
 
 
c9f9492
 
f8b7d96
c9f9492
f8b7d96
 
c9f9492
 
 
f8b7d96
 
 
 
 
 
 
 
 
 
c9f9492
 
 
f8b7d96
 
 
 
0fa0230
f8b7d96
 
 
0fa0230
 
 
 
 
 
 
 
 
 
 
 
 
c115d30
 
c9f9492
f8b7d96
c9f9492
a602f57
c9f9492
 
0fa0230
c9f9492
 
 
 
 
 
c115d30
 
f8b7d96
 
c115d30
 
 
 
c9f9492
 
 
f8b7d96
c9f9492
 
 
 
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
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Video Display</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0;
            padding: 0;
            background-color: #f8f9fa;
        }
        .container {
            margin: 50px auto;
            width: 80%;
        }
        .header {
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 5px;
            margin-bottom: 20px;
        }
        .header h1 {
            font-size: 24px;
            margin: 0;
        }
        .video-container {
            display: flex;
            justify-content: center;
            margin-bottom: 20px;
        }
        video {
            width: 640px;
            height: 480px;
            border: 2px solid #dee2e6;
            border-radius: 5px;
        }
        .footer {
            font-size: 14px;
            color: #6c757d;
        }
    </style>
</head>
<body>
    <div class="container">
        <!--
        <div class="header clearfix">
            <h3 class="text-muted"> American Sign Langage Translation - Flask Demo</h3>
        </div>
        -->
        <div class="jumbotron">
            <h1>Text to American Sign Langage translator - Flask Demo</h1>
        </div>
        <form action="{{ url_for('result') }}" method="post">
            <div class="form-group row">
                <label for="inputSentence" class="col-sm-3 col-form-label">Put your text to translate here</label>
                <div class="col-sm-8">
                 <input type="text" class="form-control" id="inputSentence" name="inputSentence" placeholder="text to translate">
                </div>
            </div>              
            <div class="form-group row">
                <div class="col-sm-5">
                  <button type="submit" class="btn btn-primary">Translate</button>
                </div>
            </div>
        </form>
        <div class="container">
            <div class="row">
                <div class="col-8" style="background-color: lightblue;">
                    Text to translate
                </div>
                <div class="col-4" style="background-color: lightgreen;">
                    <div id="output" class="border p-2">
                        {{ sentence }}
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-8" style="background-color: lightblue;">
                    Text translation in gloss before synonyms:
                </div>
                <div class="col-4" style="background-color: lightgreen;">
                    <div id="output" class="border p-2">
                        {{ gloss_sentence_before_synonym }}
                    </div>
                </div>
            </div>
        </div>
        <div class="container">
            <div class="row">
                <div class="col-8" style="background-color: lightblue;">
                    Text translation in gloss after synonyms:
                </div>
                <div class="col-4" style="background-color: lightgreen;">
                    <div id="output" class="border p-2">
                        {{ gloss_sentence_after_synonym }}
                    </div>
                </div>
            </div>
        </div>
        <div class="header">
            <h3> Sign Langage Translation </h3>
        </div>
        <div class="video-container">
            <img id="stream" data-gloss-sentence="{{ gloss_sentence_after_synonym }}" src="{{ url_for('video_feed', gloss_sentence_before_synonym=gloss_sentence_before_synonym, loss_sentence_after_synonym=gloss_sentence_after_synonym) }}" alt="Streaming video">
        </div>
        <script>
            // Variable globale pour contrôler le rafraîchissement de l'image
            var refresh = true;
            // Fonction pour rafraîchir l'image toutes les 40ms (25 FPS)
            function refreshImage() {
              if (!refresh) return; // Arrête le rafraîchissement si la variable est définie sur false
              var img = document.getElementById('stream');
              var gloss_sentence_to_display = img.getAttribute('data-gloss-sentence'); // Récupère la phrase depuis l'attribut data-sentence
              img.src = "{{ url_for('video_feed') }}" + "?gloss_sentence_to_display=" + encodeURIComponent(gloss_sentence_to_display) + "&t=" + new Date().getTime(); // Ajoute un paramètre de requête unique pour forcer le rafraîchissement de l'image
              setTimeout(refreshImage, 40); // Appel récursif pour rafraîchir l'image
              }
                  // Démarrer le rafraîchissement de l'image
                  refreshImage();
        </script>
        <button onclick="window.history.back()">Back</button>
        <div class="footer">
            © Sign Language Project
        </div>
    </div>
</body>
</html>