Update app.py

app.py

@@ -28,11 +28,10 @@ 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
-    with gr.Scroll(height=150):  # Scrollable area for the configurations
-        with gr.Row():
-            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)
+    # 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)
     
     # Outputs (display the images side by side and set a smaller size for the images)
     with gr.Row():
@@ -43,6 +42,14 @@ with gr.Blocks() as demo:
     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;
+}
+"""
+
 # Launch the app
 if __name__ == "__main__":
     demo.launch()