Update app.py

app.py

@@ -2,33 +2,41 @@ import gradio as gr
 import os
 
 # Function to show HTML content using an iframe
-def show_html_in_iframe(page_idx):
-    # html_files = get_html_files_list(curr_split)
-    # Construct the URL using the selected index
-    url = f'https://wmtis.s3.eu-west-1.amazonaws.com/test/{html_files[page_idx]}'
+def show_html_in_iframe(mode, page_idx):
+    # Update the URL based on the selected mode
+    url = f'https://wmtis.s3.eu-west-1.amazonaws.com/{mode}/{html_files[mode][page_idx]}'
     iframe_html = f'<iframe src="{url}" width="100%" height="1000"></iframe>'
     return iframe_html
 
-# Example lists of HTML files for 'test' and 'dev' instances
-# train_html_files = [f for f in os.listdir(os.path.join("html_files", "train")) if f.endswith('.html')]
-# dev_html_files = [f for f in os.listdir(os.path.join("html_files", "dev")) if f.endswith('.html')]
-html_files = [f for f in os.listdir(os.path.join("html_files", "test")) if f.endswith('.html')]
-
-# Function to return the appropriate list based on instance type
-def get_html_files_list(instance_type):
-    if instance_type == 'train':
-        return train_html_files
-    elif instance_type == 'dev':
-        return dev_html_files
-    elif instance_type == 'test':
-        return test_html_files
+# Load HTML files for both "dev" and "train" directories
+def load_html_files():
+    modes = ["dev", "train"]
+    html_files = {}
+    for mode in modes:
+        html_files_path = os.path.join("html_files", mode)
+        files = [f for f in os.listdir(html_files_path) if f.endswith('.html')]
+        html_files[mode] = files
+    return html_files
 
+html_files = load_html_files()
 
 with gr.Blocks() as demo:
-    slider = gr.Slider(minimum=0, maximum=len(html_files)-1, step=1, label='Data Instance')
-
-    # Create the Gradio interface
-    slider.release(show_html_in_iframe, inputs=[slider], outputs=[gr.HTML()], api_name="HTML Viewer with Event Listeners")
-
-# Display the interface
-demo.launch()
+    # Create a dropdown to choose between "dev" and "train"
+    mode_dropdown = gr.Dropdown(choices=["dev", "train"], label="Mode")
+  
+    # Slider for selecting the HTML page; its maximum value is dynamically set based on the selected mode
+    slider = gr.Slider(minimum=0, maximum=1, step=1, label='Data Instance')  # Temporary maximum value, will update dynamically
+    
+    # Dynamically update the slider's maximum value based on the mode selected
+    def update_slider_options(mode):
+        max_value = len(html_files[mode]) - 1
+        slider.update(maximum=max_value)  # Update the slider's maximum value based on the selected mode
+        return max_value  # Return the new maximum value for the slider
+  
+    mode_dropdown.change(update_slider_options, inputs=[mode_dropdown], outputs=[slider])
+    
+    # Update the Gradio interface to include both the mode dropdown and the slider
+    gr.Interface(fn=show_html_in_iframe, 
+                 inputs=[mode_dropdown, slider], 
+                 outputs=[gr.HTML()],
+                 api_name="HTML Viewer with Mode and Event Listeners").launch()