Update app.py

app.py

@@ -20,18 +20,19 @@ def display_images(percentage, complexity):
     return raw_image, embeddings_image
 
 # Define the Gradio interface
-data_percentage_options = [10, 30, 50, 70, 100]
-task_complexity_options = [16, 32]
+# Use sliders to make the user interaction smoother
+data_percentage_range = (10, 100)  # Allow percentages between 10 and 100
+task_complexity_range = (16, 32)   # Allow complexity between 16 and 32
 
 # Define the layout and appearance of the UI
 with gr.Blocks() as demo:
     gr.Markdown("# Raw vs. Embeddings Inference Results")
     gr.Markdown("Select a data percentage and task complexity to view the corresponding inference result for raw channels and embeddings.")
     
-    # Add scrollable area for configurations (using CSS)
-    with gr.Column(elem_id="scrollable-configs"):  # Add custom CSS for scrollable behavior
-        percentage_dropdown = gr.Dropdown(data_percentage_options, label="Percentage of Data for Training", value=10)
-        complexity_radio = gr.Radio(task_complexity_options, label="Task Complexity", value=16)
+    # Inputs (using sliders for smoother tuning)
+    with gr.Column():
+        percentage_slider = gr.Slider(minimum=10, maximum=100, step=10, label="Percentage of Data for Training", value=10)
+        complexity_slider = gr.Slider(minimum=16, maximum=32, step=4, label="Task Complexity", value=16)
     
     # Outputs (display the images side by side and set a smaller size for the images)
     with gr.Row():
@@ -39,16 +40,8 @@ with gr.Blocks() as demo:
         embeddings_img = gr.Image(label="Embeddings", type="pil", width=300, height=300, interactive=False)  # Smaller image size
     
     # Trigger image updates when inputs change
-    percentage_dropdown.change(fn=display_images, inputs=[percentage_dropdown, complexity_radio], outputs=[raw_img, embeddings_img])
-    complexity_radio.change(fn=display_images, inputs=[percentage_dropdown, complexity_radio], outputs=[raw_img, embeddings_img])
-
-# Add custom CSS for scrollable area
-demo.css = """
-#scrollable-configs {
-    max-height: 150px;
-    overflow-y: auto;
-}
-"""
+    percentage_slider.change(fn=display_images, inputs=[percentage_slider, complexity_slider], outputs=[raw_img, embeddings_img])
+    complexity_slider.change(fn=display_images, inputs=[percentage_slider, complexity_slider], outputs=[raw_img, embeddings_img])
 
 # Launch the app
 if __name__ == "__main__":