* Dynamic Webpage

* Page will now only load stuff depending on the url parameters
cyberofficial · Aug 8, 2023 · 705f8d6 · 705f8d6
1 parent 6d13879
commit 705f8d6
Show file tree

Hide file tree

Showing 5 changed files with 85 additions and 20 deletions.
diff --git a/html_data/index.html b/html_data/index.html
@@ -5,7 +5,47 @@
     <link rel="stylesheet" type="text/css" href="/static/styles.css?q={{q}}">
 </head>
 <body>
-    <h1 class="center-text"><span id="header-text"></span></h1>
+    <h2 id="header-text" class="hidden"></h2>
+    <h2 id="translated-header" class="hidden"></h2>
+    <h2 id="transcribed-header" class="hidden"></h2>
     <script src="/static/update_header.js"></script>
+    <script>
+        function showElementById(id) {
+            const element = document.getElementById(id);
+            if (element) {
+                element.classList.remove("hidden");
+            }
+        }
+
+        function hideElementById(id) {
+            const element = document.getElementById(id);
+            if (element) {
+                element.classList.add("hidden");
+            }
+        }
+
+        document.addEventListener("DOMContentLoaded", function() {
+            const params = new URLSearchParams(window.location.search);
+            const showOriginal = params.has("showoriginal");
+            const showTranslation = params.has("showtranslation");
+            const showTranscription = params.has("showtranscription");
+
+            if (showOriginal) {
+                showElementById("header-text");
+            } else {
+                showElementById("header-text");
+                showElementById("translated-header");
+                showElementById("transcribed-header");
+            }
+
+            if (showTranslation) {
+                showElementById("translated-header");
+            }
+
+            if (showTranscription) {
+                showElementById("transcribed-header");
+            }
+        });
+    </script>
 </body>
 </html>
diff --git a/html_data/static/styles.css b/html_data/static/styles.css
@@ -1,14 +1,3 @@
-.center-text {
-    text-align: center;
-}
-
-.blue-text {
-    color: blue;
-    text-align: center;
-}
-
-.bordered-box {
-    border: 1px solid black;
-    padding: 10px;
-    margin: 10px;
+.hidden {
+    display: none;
 }
diff --git a/html_data/static/update_header.js b/html_data/static/update_header.js
@@ -1,11 +1,23 @@
 document.addEventListener("DOMContentLoaded", function() {
-    function updateHeader() {
+    function updateHeaders() {
         fetch("/update-header")
             .then(response => response.text())
-            .then(text => {
-                document.getElementById("header-text").innerText = text;
+            .then(originalText => {
+                document.getElementById("header-text").innerText = "Detected: " + originalText;
+            });
+
+        fetch("/update-translated-header")
+            .then(response => response.text())
+            .then(translatedText => {
+                document.getElementById("translated-header").innerText = "Translated: " + translatedText;
+            });
+
+        fetch("/update-transcribed-header")
+            .then(response => response.text())
+            .then(transcribedText => {
+                document.getElementById("transcribed-header").innerText = "Transcribed: " + transcribedText;
             });
     }
 
-    setInterval(updateHeader, 100); // Update every 3 seconds (adjust as needed)
+    setInterval(updateHeaders, 100);
 });
diff --git a/modules/api_backend.py b/modules/api_backend.py
@@ -3,12 +3,22 @@
 from flask import Flask, send_from_directory, url_for
 from threading import Thread
 
-header_text = "Welcome to the Test Page"
+header_text = ""
+translated_header_text = ""
+transcribed_header_text = ""
 
 def update_header(new_header):
     global header_text
     header_text = new_header
 
+def update_translated_header(new_header):
+    global translated_header_text
+    translated_header_text = new_header
+
+def update_transcribed_header(new_header):
+    global transcribed_header_text
+    transcribed_header_text = new_header
+
 def flask_server(operation, portnumber):
     if operation == "start":
         # Define paths
@@ -55,6 +65,16 @@ def serve_static(filename):
         def update_header_route():
             return header_text
 
+        # Route for updating the translated header dynamically
+        @app.route('/update-translated-header')
+        def update_translated_header_route():
+            return translated_header_text
+
+        # Route for updating the transcribed header dynamically
+        @app.route('/update-transcribed-header')
+        def update_transcribed_header_route():
+            return transcribed_header_text
+
         # Generate URL for static file in index.html
         @app.context_processor
         def override_url_for():
@@ -70,7 +90,7 @@ def dated_url_for(endpoint, **values):
         # Function to run the server
         def run():
             try:
-                app.run(host='localhost', port=port)
+                app.run(host='0.0.0.0', port=port)
             except Exception as e:
                 print(f"Server crashed due to {e}")
                 app.do_teardown_appcontext()

diff --git a/transcribe_audio.py b/transcribe_audio.py
@@ -518,10 +518,14 @@ def is_input_device(device_index):
                     if args.translate and translated_text:
                         print(f"{'-' * int((shutil.get_terminal_size().columns - 15) / 2)} EN Translation {'-' * int((shutil.get_terminal_size().columns - 15) / 2)}")
                         print(f"{translated_text}\n")
+                        new_header = f"{translated_text}"
+                        api_backend.update_translated_header(new_header)
 
                     if args.transcribe and transcribed_text:
                         print(f"{'-' * int((shutil.get_terminal_size().columns - 15) / 2)} {detected_language} -> {target_language} {'-' * int((shutil.get_terminal_size().columns - 15) / 2)}")
                         print(f"{transcribed_text}\n")
+                        new_header = f"{transcribed_text}"
+                        api_backend.update_transcribed_header(new_header)
 
                 else:
                     for original_text, translated_text, transcribed_text, detected_language in transcription: