Update app.py

app.py

@@ -28,23 +28,33 @@ def display_images(percentage_idx, complexity_idx):
     return raw_image, embeddings_image
 
 # Define the Gradio interface
-with gr.Blocks() as demo:
+with gr.Blocks(css="""
+    .vertical-slider input[type=range] {
+        writing-mode: bt-lr; /* IE */
+        -webkit-appearance: slider-vertical; /* WebKit */
+        width: 8px;
+        height: 200px;
+    }
+    .slider-container {
+        display: inline-block;
+        margin-right: 50px;
+        text-align: center;
+    }
+""") as demo:
     gr.Markdown("# Raw vs. Embeddings Inference Results")
     gr.Markdown("Use the sliders to adjust the percentage of data for training and task complexity.")
 
-    # Layout for vertical side-by-side sliders
+    # Layout for vertical side-by-side sliders (using CSS to rotate sliders)
     with gr.Row():
         # Column for percentage slider
-        with gr.Column():
-            percentage_slider = gr.Slider(minimum=0, maximum=4, step=1, value=0, 
-                                          label="Percentage of Data for Training (10, 30, 50, 70, 100)", 
-                                          interactive=True, orientation="vertical")
-        
+        with gr.Column(elem_id="slider-container"):
+            gr.Markdown("Percentage of Data for Training")
+            percentage_slider = gr.Slider(minimum=0, maximum=4, step=1, value=0, interactive=True, elem_id="vertical-slider")
+
         # Column for complexity slider
-        with gr.Column():
-            complexity_slider = gr.Slider(minimum=0, maximum=1, step=1, value=0, 
-                                          label="Task Complexity (16, 32)", 
-                                          interactive=True, orientation="vertical")
+        with gr.Column(elem_id="slider-container"):
+            gr.Markdown("Task Complexity")
+            complexity_slider = gr.Slider(minimum=0, maximum=1, step=1, value=0, interactive=True, elem_id="vertical-slider")
 
     # Outputs (display the images side by side and set a smaller size for the images)
     with gr.Row():