Upload 2 files

src/templates/translate.html

@@ -77,7 +77,7 @@
                     </div>
                 </div>
             </div>
-            <div class="container">
+            <!--<div class="container">
                 <div class="row">
                     <div class="col-8" style="background-color: lightblue;">
                         This is the text gloss list we have generated:
@@ -88,30 +88,38 @@
                         </div>
                     </div>
                 </div>
+            </div>-->
+            <div class="container">
+                <div class="row">
+                    <div class="col-8" style="background-color: lightblue;">
+                        This is the gloss list we have generated:
+                    </div>
+                    <div class="col-4" style="background-color: lightgreen;">
+                        <div id="output" class="border p-2">
+                            {{ gloss_sentence }}
+                        </div>
+                    </div>
+                </div>
             </div>
         <div class="header">
             <h1>🌸🌺 Sign Langage Translation 🌺🌸</h1>
         </div>
         <div class="video-container">
-            <img id="stream" data-sentence="{{ sentence }}" src="{{ url_for('video_feed', sentence=sentence) }}" alt="Streaming video">
+            <img id="stream" data-gloss-sentence="{{ gloss_sentence }}" src="{{ url_for('video_feed', gloss_sentence=gloss_sentence) }}" 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 sentence = img.getAttribute('data-sentence');  // Récupère la phrase depuis l'attribut data-sentence
-                img.src = "{{ url_for('video_feed') }}" + "?sentence=" + encodeURIComponent(sentence) + "&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();
+              if (!refresh) return; // Arrête le rafraîchissement si la variable est définie sur false
+              var img = document.getElementById('stream');
+              var gloss_sentence = img.getAttribute('data-gloss-sentence'); // Récupère la phrase depuis l'attribut data-sentence
+              img.src = "{{ url_for('video_feed') }}" + "?gloss_sentence=" + encodeURIComponent(gloss_sentence) + "&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">