Update app.py

app.py

@@ -1,119 +1,169 @@
-"""Dynamic Modular ChatGPT-Style Sidebar UI for SOG-X Platform."""
+"""
+SOG-X Modular Studio - Dynamic ChatGPT-Style Interface
+Auto-discovers backend routes via OpenAPI and generates functional UI components dynamically.
+Compatible with Gradio 6.0+
+"""
 import os
-import tempfile
 import gradio as gr
 from client import BackendClient
 
+# ── Environment Configurations ────────────────────────────────────────────
 BACKEND_URL = os.getenv("BACKEND_URL", "http://localhost:7860")
 HF_TOKEN = os.getenv("HF_TOKEN") or os.getenv("API_KEY", "")
 USER_KEY = os.getenv("USER_KEY", "samuel_super_secret_key_1234567890_key")
 
 client = BackendClient(backend_url=BACKEND_URL, token=HF_TOKEN)
 
-# ── Parse OpenAPI Schema into Sidebar Modules ─────────────────────────────
-ok, schema = client.fetch_openapi_schema(user_api_key=USER_KEY)
-modules_map = {}
-
-if ok and "paths" in schema:
-    for path, methods in schema["paths"].items():
-        for method, details in methods.items():
-            if method.lower() not in ["get", "post"]:
-                continue
-            
-            # Module grouping by Tag or Path root
-            tags = details.get("tags", ["General"])
-            tag_name = tags[0].capitalize() if tags else "General"
-            
-            summary = details.get("summary") or f"{method.upper()} {path}"
-            module_id = f"{tag_name}: {summary}"
-            
-            modules_map[module_id] = {
-                "path": path,
-                "method": method.upper(),
-                "summary": summary,
-                "description": details.get("description", "No description provided."),
-                "parameters": details.get("parameters", []),
-                "request_body": details.get("requestBody", {}),
-            }
-
-module_names = list(modules_map.keys()) if modules_map else ["No Modules Discovered"]
-
-# ── Gradio ChatGPT-Style UI ───────────────────────────────────────────────
+# ── Custom CSS for ChatGPT-style Layout ───────────────────────────────────
 custom_css = """
-.sidebar-container { background-color: #1e1e2e; padding: 15px; border-radius: 10px; }
-.main-content { padding: 20px; }
-.module-btn { text-align: left !important; justify-content: flex-start !important; margin-bottom: 5px; }
+.sidebar-container {
+    background-color: #1e1e2e;
+    padding: 16px;
+    border-radius: 12px;
+    height: 100%;
+}
+.main-content {
+    padding: 24px;
+}
+.module-radio label {
+    background-color: #2b2b3b !important;
+    border: 1px solid #3f3f56 !important;
+    border-radius: 8px !important;
+    margin-bottom: 6px !important;
+    padding: 10px 14px !important;
+    transition: all 0.2s ease;
+}
+.module-radio label:hover {
+    border-color: #6c63ff !important;
+}
 """
 
-with gr.Blocks(title="SOG-X Modular Workspace", theme=gr.themes.Soft(), css=custom_css) as demo:
-    active_module_state = gr.State(value=module_names[0] if module_names else None)
+# ── Helper to Load & Parse Backend Schema ─────────────────────────────────
+def load_backend_modules(api_key: str):
+    """Fetch live OpenAPI spec and parse available backend routes into modules."""
+    ok, schema = client.fetch_openapi_schema(user_api_key=api_key)
+    modules_map = {}
+
+    if ok and isinstance(schema, dict) and "paths" in schema:
+        for path, methods in schema["paths"].items():
+            for method, details in methods.items():
+                if method.lower() not in ["get", "post"]:
+                    continue
+
+                tags = details.get("tags", ["General"])
+                tag_name = tags[0].capitalize() if tags else "General"
+                summary = details.get("summary") or f"{method.upper()} {path}"
+                module_id = f"[{tag_name}] {summary}"
+
+                modules_map[module_id] = {
+                    "path": path,
+                    "method": method.upper(),
+                    "summary": summary,
+                    "description": details.get("description", "No description provided."),
+                    "parameters": details.get("parameters", []),
+                    "request_body": details.get("requestBody", {}),
+                }
+
+    module_names = list(modules_map.keys()) if modules_map else ["No Modules Discovered"]
+    return modules_map, module_names
+
+
+# Load initial schema at startup
+INITIAL_MAP, INITIAL_CHOICES = load_backend_modules(USER_KEY)
+
+# ── Gradio Blocks Interface (Clean Gradio 6.0 Constructor) ────────────────
+with gr.Blocks(title="SOG-X Modular Workspace") as demo:
+    # State Stores
+    schema_state = gr.State(value=INITIAL_MAP)
 
     with gr.Row():
         # ── Sidebar Navigation Column (ChatGPT Style) ─────────────────────
-        with gr.Column(scale=1, min_width=280, elem_classes=["sidebar-container"]):
+        with gr.Column(scale=1, min_width=300, elem_classes=["sidebar-container"]):
             gr.Markdown("## 🤖 SOG-X Studio")
-            
-            with gr.Accordion("🔑 API Key & Config", open=False):
+
+            with gr.Accordion("⚙️ Backend & Credentials", open=False):
                 user_key_input = gr.Textbox(
-                    label="Active User API Key",
+                    label="Active API Key",
                     value=USER_KEY,
                     type="password",
+                    placeholder="Enter your 32+ char key...",
                     interactive=True,
                 )
-                refresh_btn = gr.Button("🔄 Sync Backend Modules")
+                sync_btn = gr.Button("🔄 Sync Backend Modules", size="sm")
 
             gr.Markdown("---")
             gr.Markdown("### 📂 Active Modules")
-            
-            # Sidebar Selector (Radio buttons designed as sidebar menu items)
+
+            # Dynamic Module Navigation
             sidebar_menu = gr.Radio(
-                choices=module_names,
-                value=module_names[0] if module_names else None,
+                choices=INITIAL_CHOICES,
+                value=INITIAL_CHOICES[0] if INITIAL_CHOICES else None,
                 label="Select Module",
                 interactive=True,
+                elem_classes=["module-radio"],
             )
 
         # ── Main Content Workspace Column ─────────────────────────────────
         with gr.Column(scale=3, elem_classes=["main-content"]):
             module_title = gr.Markdown("## Select a module from the sidebar")
-            module_desc = gr.Markdown("")
-            
-            # Form Inputs
-            input_file = gr.File(label="Upload Source File (If required)", visible=True)
-            input_text = gr.Textbox(
-                label="Input Prompt / Data / Query",
-                placeholder="Enter text, URL, or JSON payload...",
-                lines=4,
-            )
-            
-            submit_btn = gr.Button("🚀 Process Request", variant="primary")
-            
+            module_desc = gr.Markdown("Choose any active backend route from the left navigation panel.")
+
+            gr.Markdown("---")
+            gr.Markdown("### 📥 Input Data")
+
+            with gr.Row():
+                input_file = gr.File(label="Upload Source File (Optional)", interactive=True)
+                input_text = gr.Textbox(
+                    label="Input Text / Query / JSON Payload",
+                    placeholder="Type your prompt, URL, query string, or payload...",
+                    lines=5,
+                    interactive=True,
+                )
+
+            submit_btn = gr.Button("🚀 Process Request", variant="primary", size="lg")
+
+            gr.Markdown("---")
             gr.Markdown("### 📤 Output Response")
-            output_display = gr.JSON(label="Response Data")
-            output_file_download = gr.File(label="Output Download Artifact", visible=True)
-
-    # ── Dynamic Module Switcher Handler ───────────────────────────────────
-    def switch_module(selected_name):
-        if not selected_name or selected_name not in modules_map:
-            return "## No Module Selected", "Please select a valid backend route from the sidebar."
-        
-        mod = modules_map[selected_name]
-        title_md = f"## [{mod['method']}] `{mod['path']}`"
+
+            output_display = gr.JSON(label="Response Payload")
+            output_file_download = gr.File(label="Generated File Download", interactive=False)
+
+    # ── Event Handlers ───────────────────────────────────────────────────
+
+    def refresh_schema_handler(active_key):
+        """Re-fetch openapi.json on user request."""
+        new_map, new_choices = load_backend_modules(active_key)
+        selected = new_choices[0] if new_choices else None
+        return new_map, gr.Radio(choices=new_choices, value=selected)
+
+    sync_btn.click(
+        fn=refresh_schema_handler,
+        inputs=[user_key_input],
+        outputs=[schema_state, sidebar_menu],
+    )
+
+    def switch_module_handler(selected_name, current_map):
+        """Update active workspace info when a sidebar module is selected."""
+        if not selected_name or selected_name not in current_map:
+            return "## No Module Selected", "Please select a valid module from the sidebar."
+
+        mod = current_map[selected_name]
+        title_md = f"## `{mod['method']}` {mod['path']}"
         desc_md = f"**Summary:** {mod['summary']}\n\n{mod['description']}"
         return title_md, desc_md
 
     sidebar_menu.change(
-        fn=switch_module,
-        inputs=[sidebar_menu],
-        outputs=[module_title, module_desc]
+        fn=switch_module_handler,
+        inputs=[sidebar_menu, schema_state],
+        outputs=[module_title, module_desc],
     )
 
-    # ── Dynamic Processing Handler ────────────────────────────────────────
-    def process_dynamic_action(selected_name, key_val, file_obj, text_val):
-        if not selected_name or selected_name not in modules_map:
-            return {"error": "Invalid module selected"}, None
+    def process_request_handler(selected_name, active_key, file_obj, text_val, current_map):
+        """Dynamically execute backend requests."""
+        if not selected_name or selected_name not in current_map:
+            return {"error": "Invalid or unselected module."}, None
 
-        mod = modules_map[selected_name]
+        mod = current_map[selected_name]
         path = mod["path"]
         method = mod["method"]
 
@@ -121,12 +171,12 @@ with gr.Blocks(title="SOG-X Modular Workspace", theme=gr.themes.Soft(), css=cust
         payload = {}
         files = {}
 
-        # Handle File Uploads
+        # Parse uploaded files
         if file_obj is not None:
             file_path = file_obj.name if hasattr(file_obj, "name") else str(file_obj)
             files["file"] = open(file_path, "rb")
 
-        # Handle Text Input / JSON payloads / Query Params
+        # Parse text input
         if text_val and text_val.strip():
             cleaned_text = text_val.strip()
             if method == "GET":
@@ -143,27 +193,26 @@ with gr.Blocks(title="SOG-X Modular Workspace", theme=gr.themes.Soft(), css=cust
             params=params,
             payload=payload,
             files=files,
-            user_api_key=key_val,
+            user_api_key=active_key,
         )
 
+        # Check for downloadable output path in JSON response
         if success and isinstance(response, dict) and "file_path" in response:
             return response, response["file_path"]
 
         return response, None
 
     submit_btn.click(
-        fn=process_dynamic_action,
-        inputs=[sidebar_menu, user_key_input, input_file, input_text],
-        outputs=[output_display, output_file_download]
+        fn=process_request_handler,
+        inputs=[sidebar_menu, user_key_input, input_file, input_text, schema_state],
+        outputs=[output_display, output_file_download],
     )
 
-demo.queue()
-
+# ── Launch Application (Gradio 6.0 Compliant) ─────────────────────────────
 if __name__ == "__main__":
     demo.launch(
         server_name="0.0.0.0",
         server_port=7860,
-        ssr=False,  # Explicitly disables the Node.js SSR proxy
         theme=gr.themes.Soft(),
         css=custom_css,
         share=False,