Update app.py

app.py

@@ -484,22 +484,19 @@ def process_hdf5_file(uploaded_file, percentage):
 ######################## Define the Gradio interface ###############################
 detect_theme_js = """
 <script>
-function detectTheme() {
-    if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        return 'dark';
-    } else {
-        return 'light';
+    function detectTheme() {
+        const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
+        return isDarkMode ? 'dark' : 'light';
     }
-}
-
-window.onload = function() {
-    const theme = detectTheme();
-    const themeTextbox = document.getElementById('theme_output');
-    if (themeTextbox) {
-        themeTextbox.value = theme;
-        themeTextbox.dispatchEvent(new Event('change')); // Manually trigger change event
-    }
-};
+
+    window.onload = function() {
+        const theme = detectTheme();
+        const themeTextbox = document.getElementById('theme_output');
+        if (themeTextbox) {
+            themeTextbox.value = theme; 
+            themeTextbox.dispatchEvent(new Event('input'));  // Fire an input event to notify Gradio of the change
+        }
+    };
 </script>
 """
 
@@ -560,10 +557,12 @@ with gr.Blocks(css="""
     </div>
     """)
 
+    theme_output = gr.Textbox(label="Theme", value="light", visible=False)
+    
     # Tab for Beam Prediction Task
     with gr.Tab("Beam Prediction Task"):
         #gr.Markdown("### Beam Prediction Task")
-
+        
         # Explanation section with creative spacing and minimal design
         gr.Markdown("""
             <div style="background-color: var(--primary-background); padding: 15px; border-radius: 10px; color: var(--text-primary);">
@@ -586,11 +585,6 @@ with gr.Blocks(css="""
             with gr.Column():
                 data_percentage_slider = gr.Slider(label="Data Percentage for Training", minimum=10, maximum=100, step=10, value=10)
                 task_complexity_dropdown = gr.Dropdown(label="Task Complexity (Number of Beams)", choices=[16, 32, 64, 128, 256], value=16)
-                
-                gr.HTML(detect_theme_js)
-            
-                # Hidden textbox to store the detected theme
-                theme_output = gr.Textbox(label="Theme", value="light", visible=False, interactive=False)  # Hidden by default
 
         with gr.Row():
             raw_img_bp = gr.Image(label="Raw Channels", type="pil", width=300, height=500)
@@ -599,8 +593,9 @@ with gr.Blocks(css="""
         # Update the confusion matrices whenever sliders change
         data_percentage_slider.change(fn=beam_prediction_task, inputs=[data_percentage_slider, task_complexity_dropdown, theme_output], outputs=[raw_img_bp, embeddings_img_bp])
         task_complexity_dropdown.change(fn=beam_prediction_task, inputs=[data_percentage_slider, task_complexity_dropdown, theme_output], outputs=[raw_img_bp, embeddings_img_bp])
-        theme_output.change(fn=beam_prediction_task, inputs=[data_percentage_slider, task_complexity_dropdown, theme_output], outputs=[raw_img_bp, embeddings_img_bp])
-
+        
+        theme_output.render()
+        
         # Add a conclusion section at the bottom
         gr.Markdown("""
             <div class="explanation-box">