Hugging Face's logo

Spaces:
ginigen
/
Sign-language
Building

App Files Community
ginipick commited on
Commit
5e91f68
·
verified ·
1 Parent(s): a9522e9

Update src/templates/translate.html

Browse files
Files changed (1) hide show
  1. src/templates/translate.html +97 -87
src/templates/translate.html CHANGED
@@ -4,128 +4,138 @@
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Video Display</title>
 
7
  <style>
8
  body {
9
  font-family: Arial, sans-serif;
10
- text-align: center;
11
- margin: 0;
12
- padding: 0;
13
  background-color: #f8f9fa;
14
  }
15
  .container {
 
16
  margin: 50px auto;
17
- width: 80%;
18
  }
19
  .header {
20
  background-color: #e9ecef;
21
  padding: 20px;
22
- border-radius: 5px;
23
- margin-bottom: 20px;
 
24
  }
25
- .header h1 {
26
- font-size: 24px;
27
- margin: 0;
 
 
 
 
 
 
 
 
 
28
  }
29
  .video-container {
30
  display: flex;
31
  justify-content: center;
32
- margin-bottom: 20px;
33
  }
34
- video {
35
- width: 640px;
36
- height: 480px;
37
- border: 2px solid #dee2e6;
38
- border-radius: 5px;
 
39
  }
40
  .footer {
41
- font-size: 14px;
 
42
  color: #6c757d;
43
  }
 
 
 
 
44
  </style>
45
  </head>
46
  <body>
47
  <div class="container">
48
- <!--
49
- <div class="header clearfix">
50
- <h3 class="text-muted"> American Sign Langage Translation - Flask Demo</h3>
51
- </div>
52
- -->
53
- <div class="jumbotron">
54
- <h1>Text to American Sign Langage translator - Flask Demo</h1>
55
  </div>
56
- <form action="{{ url_for('result') }}" method="post">
57
- <div class="form-group row">
58
- <label for="inputSentence" class="col-sm-3 col-form-label">Put your text to translate here</label>
59
- <div class="col-sm-8">
60
- <input type="text" class="form-control" id="inputSentence" name="inputSentence" placeholder="text to translate">
61
- </div>
62
- </div>
63
- <div class="form-group row">
64
- <div class="col-sm-5">
65
- <button type="submit" class="btn btn-primary">Translate</button>
66
- </div>
67
  </div>
68
- </form>
69
- <div class="container">
70
- <div class="row">
71
- <div class="col-8" style="background-color: lightblue;">
72
- Text to translate
73
- </div>
74
- <div class="col-4" style="background-color: lightgreen;">
75
- <div id="output" class="border p-2">
76
- {{ sentence }}
77
- </div>
78
  </div>
79
- </div>
 
80
  </div>
81
- <div class="container">
82
- <div class="row">
83
- <div class="col-8" style="background-color: lightblue;">
84
- Text translation in gloss before synonyms:
85
- </div>
86
- <div class="col-4" style="background-color: lightgreen;">
87
- <div id="output" class="border p-2">
88
- {{ gloss_sentence_before_synonym }}
89
- </div>
90
- </div>
91
  </div>
92
- </div>
93
- <div class="container">
94
- <div class="row">
95
- <div class="col-8" style="background-color: lightblue;">
96
- Text translation in gloss after synonyms:
97
- </div>
98
- <div class="col-4" style="background-color: lightgreen;">
99
- <div id="output" class="border p-2">
100
- {{ gloss_sentence_after_synonym }}
101
- </div>
102
- </div>
103
  </div>
104
  </div>
105
- <div class="header">
106
- <h3> Sign Langage Translation </h3>
107
- </div>
108
  <div class="video-container">
109
- <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">
 
 
 
 
 
 
 
 
 
110
  </div>
111
- <script>
112
- // Variable globale pour contrôler le rafraîchissement de l'image
113
- var refresh = true;
114
- // Fonction pour rafraîchir l'image toutes les 40ms (25 FPS)
115
- function refreshImage() {
116
- if (!refresh) return; // Arrête le rafraîchissement si la variable est définie sur false
117
- var img = document.getElementById('stream');
118
- var gloss_sentence_to_display = img.getAttribute('data-gloss-sentence'); // Récupère la phrase depuis l'attribut data-sentence
119
- 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
120
- setTimeout(refreshImage, 40); // Appel récursif pour rafraîchir l'image
121
- }
122
- // Démarrer le rafraîchissement de l'image
123
- refreshImage();
124
- </script>
125
- <button onclick="window.history.back()">Back</button>
126
  <div class="footer">
127
- © Ginipick
128
  </div>
129
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
130
  </body>
131
- </html>
 
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
  <title>Video Display</title>
7
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
8
  <style>
9
  body {
10
  font-family: Arial, sans-serif;
 
 
 
11
  background-color: #f8f9fa;
12
  }
13
  .container {
14
+ max-width: 1200px;
15
  margin: 50px auto;
16
+ padding: 0 20px;
17
  }
18
  .header {
19
  background-color: #e9ecef;
20
  padding: 20px;
21
+ border-radius: 10px;
22
+ margin-bottom: 30px;
23
+ text-align: center;
24
  }
25
+ .translation-form {
26
+ background-color: white;
27
+ padding: 30px;
28
+ border-radius: 10px;
29
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
30
+ margin-bottom: 30px;
31
+ }
32
+ .instruction-box {
33
+ background-color: #e7f3ff;
34
+ padding: 15px;
35
+ border-radius: 8px;
36
+ margin-bottom: 20px;
37
  }
38
  .video-container {
39
  display: flex;
40
  justify-content: center;
41
+ margin: 30px 0;
42
  }
43
+ .result-box {
44
+ background-color: white;
45
+ padding: 20px;
46
+ border-radius: 10px;
47
+ margin-bottom: 20px;
48
+ box-shadow: 0 2px 10px rgba(0,0,0,0.1);
49
  }
50
  .footer {
51
+ text-align: center;
52
+ padding: 20px;
53
  color: #6c757d;
54
  }
55
+ .example-text {
56
+ color: #0d6efd;
57
+ font-style: italic;
58
+ }
59
  </style>
60
  </head>
61
  <body>
62
  <div class="container">
63
+ <div class="header">
64
+ <h1 class="mb-3">Text to American Sign Language Translator</h1>
65
+ <p class="text-muted">Translate text to ASL with proper noun handling</p>
 
 
 
 
66
  </div>
67
+
68
+ <div class="translation-form">
69
+ <div class="instruction-box">
70
+ <h5>How to use:</h5>
71
+ <p>For proper nouns (names, places, etc.), enclose them in single quotes (')</p>
72
+ <p>Examples:</p>
73
+ <ul>
74
+ <li><span class="example-text">'한국'은 아름다운 나라입니다.</span></li>
75
+ <li><span class="example-text">'John'이 'New York'에 갑니다.</span></li>
76
+ </ul>
 
77
  </div>
78
+
79
+ <form action="{{ url_for('result') }}" method="post">
80
+ <div class="mb-3">
81
+ <label for="inputSentence" class="form-label">Enter text to translate:</label>
82
+ <input type="text"
83
+ class="form-control"
84
+ id="inputSentence"
85
+ name="inputSentence"
86
+ placeholder="Enter your text here..."
87
+ required>
88
  </div>
89
+ <button type="submit" class="btn btn-primary">Translate</button>
90
+ </form>
91
  </div>
92
+
93
+ {% if sentence %}
94
+ <div class="result-box">
95
+ <h4>Translation Results</h4>
96
+ <div class="row mb-3">
97
+ <div class="col-4">Original Text:</div>
98
+ <div class="col-8">{{ sentence }}</div>
 
 
 
99
  </div>
100
+ <div class="row mb-3">
101
+ <div class="col-4">Gloss Before Synonyms:</div>
102
+ <div class="col-8">{{ gloss_sentence_before_synonym }}</div>
103
+ </div>
104
+ <div class="row mb-3">
105
+ <div class="col-4">Gloss After Synonyms:</div>
106
+ <div class="col-8">{{ gloss_sentence_after_synonym }}</div>
 
 
 
 
107
  </div>
108
  </div>
109
+
 
 
110
  <div class="video-container">
111
+ <img id="stream"
112
+ data-gloss-sentence="{{ gloss_sentence_after_synonym }}"
113
+ src="{{ url_for('video_feed', gloss_sentence_before_synonym=gloss_sentence_before_synonym, gloss_sentence_after_synonym=gloss_sentence_after_synonym) }}"
114
+ alt="Sign language video stream"
115
+ class="rounded">
116
+ </div>
117
+ {% endif %}
118
+
119
+ <div class="text-center mt-4">
120
+ <button onclick="window.history.back()" class="btn btn-secondary">Back</button>
121
  </div>
122
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
123
  <div class="footer">
124
+ <p>© 2024 Sign Language Translator. All rights reserved.</p>
125
  </div>
126
  </div>
127
+
128
+ <script>
129
+ var refresh = true;
130
+ function refreshImage() {
131
+ if (!refresh) return;
132
+ var img = document.getElementById('stream');
133
+ var gloss_sentence_to_display = img.getAttribute('data-gloss-sentence');
134
+ img.src = "{{ url_for('video_feed') }}?gloss_sentence_to_display=" +
135
+ encodeURIComponent(gloss_sentence_to_display) + "&t=" + new Date().getTime();
136
+ setTimeout(refreshImage, 40);
137
+ }
138
+ refreshImage();
139
+ </script>
140
  </body>
141
+ </html>