update app with sidebar

app.py

@@ -597,24 +597,49 @@ def process_two_videos(
 
 
 
+# Custom CSS for collapsible sidebar
+custom_css = """
+#sidebar-toggle {
+    position: sticky;
+    top: 10px;
+    z-index: 1000;
+    margin-bottom: 10px;
+}
+
+/* Make sidebar full height */
+.gradio-container .gradio-row:has(#sidebar-column) {
+    min-height: calc(100vh - 200px);
+}
+
+/* Smooth transition for sidebar (if supported) */
+#sidebar-column {
+    transition: width 0.3s ease;
+}
+"""
+
 # Create Gradio interface
 try:
     # Try with theme (Gradio 4.0+)
-    demo = gr.Blocks(title="RFM Evaluation Server", theme=gr.themes.Soft())
+    demo = gr.Blocks(title="RFM Evaluation Server", theme=gr.themes.Soft(), css=custom_css)
 except TypeError:
     # Fallback for older Gradio versions without theme support
-    demo = gr.Blocks(title="RFM Evaluation Server")
+    try:
+        demo = gr.Blocks(title="RFM Evaluation Server", css=custom_css)
+    except TypeError:
+        # Even older versions may not support css parameter
+        demo = gr.Blocks(title="RFM Evaluation Server")
 
 with demo:
     # Header with title and toggle button
     with gr.Row():
-        sidebar_toggle_btn = gr.Button("☰ Toggle Sidebar", variant="secondary", size="sm", elem_id="sidebar-toggle")
-        gr.Markdown(
-            """
-            # RFM (Reward Foundation Model) Evaluation Server
-            """,
-            elem_id="main-title",
-        )
+        sidebar_toggle_btn = gr.Button("☰ Hide Sidebar", variant="secondary", size="sm", elem_id="sidebar-toggle", scale=0)
+        with gr.Column(scale=1):
+            gr.Markdown(
+                """
+                # RFM (Reward Foundation Model) Evaluation Server
+                """,
+                elem_id="main-title",
+            )
 
     # Hidden state to store server URL and model mapping (define before use)
     server_url_state = gr.State(value=None)
@@ -708,15 +733,15 @@ with demo:
         new_visible = not visible
         button_text = "☰ Show Sidebar" if not new_visible else "☰ Hide Sidebar"
         return (
-            new_visible,
-            gr.update(visible=new_visible),
-            gr.update(value=button_text),
+            new_visible,  # Update state
+            gr.update(visible=new_visible),  # Update sidebar visibility
+            gr.update(value=button_text),  # Update button text
         )
 
     # Main layout with sidebar and content area
     with gr.Row():
         # Sidebar for model selection and info (controlled by visibility state)
-        sidebar_column = gr.Column(scale=1, min_width=300, visible=True)
+        sidebar_column = gr.Column(scale=1, min_width=300, visible=True, elem_id="sidebar-column")
         with sidebar_column:
             gr.Markdown("### 🔧 Model Configuration")
             
@@ -761,13 +786,6 @@ with demo:
 
         # Main content area with tabs
         with gr.Column(scale=4):
-            # Wire up the toggle button
-            sidebar_toggle_btn.click(
-                fn=toggle_sidebar,
-                inputs=[sidebar_visible_state],
-                outputs=[sidebar_visible_state, sidebar_column, sidebar_toggle_btn],
-            )
-            
             with gr.Tabs():
                 with gr.Tab("Progress Prediction"):
                     gr.Markdown("### Progress & Success Prediction")
@@ -1509,6 +1527,13 @@ with demo:
                         api_name="process_two_videos",
                     )
 
+    # Wire up the sidebar toggle button (can be anywhere in the demo block)
+    sidebar_toggle_btn.click(
+        fn=toggle_sidebar,
+        inputs=[sidebar_visible_state],
+        outputs=[sidebar_visible_state, sidebar_column, sidebar_toggle_btn],
+    )
+
 
 def main():
     """Launch the Gradio app."""