Major UI improvements: add theme, use Code blocks for JSON, simplify markdown, add elem_ids to fix tab rendering - 2025-10-04 15:49:03

app.py

@@ -517,88 +517,88 @@ def get_property_usage(property_name: str, class_name: str = "") -> str:
 
 # Create Gradio interface
 def create_interface():
-    # Custom CSS to make HF logo smaller and reduce page size
+    # Custom CSS to improve rendering and reduce page weight
     custom_css = """
+    /* Make HF logo smaller */
     .svelte-1rjryqp {
         max-width: 48px !important;
         max-height: 48px !important;
     }
+    
+    /* Improve container layout */
+    .gradio-container {
+        max-width: 1200px !important;
+        margin: auto !important;
+    }
+    
+    /* Fix tab rendering */
+    .tabs {
+        overflow: visible !important;
+    }
+    
+    /* Better code display */
+    .code-wrap {
+        font-family: 'Courier New', monospace !important;
+        font-size: 12px !important;
+    }
     """
     
-    with gr.Blocks(title="BIBFRAME Ontology Documentation MCP Server", css=custom_css) as demo:
+    with gr.Blocks(title="BIBFRAME Ontology Documentation MCP Server", css=custom_css, theme=gr.themes.Soft()) as demo:
         gr.Markdown(f"""
         # 📚 BIBFRAME Ontology Documentation MCP Server
         
         **Status:** {'✅ Loaded' if kb._loaded else '⚠️ Using fallback data'} - {len(kb.properties)} properties, {len(kb.classes)} classes
         
         This server provides BIBFRAME ontology documentation via MCP tools.
-        Data is loaded from the official BIBFRAME ontology at [id.loc.gov](https://id.loc.gov/ontologies/bibframe.html).
-        
-        ## Available MCP Tools:
-        - `get_property_info`: Get detailed information about a BIBFRAME property
-        - `get_class_info`: Get detailed information about a BIBFRAME class
-        - `search_ontology`: Search for properties or classes by term
-        - `get_property_usage`: Get usage information for a property in context
-        
-        ## MCP Configuration:
-        ```json
-        {{
-          "mcpServers": {{
-            "bibframe-docs": {{
-              "url": "https://your-space.hf.space/gradio_api/mcp/"
-            }}
-          }}
-        }}
-        ```
-        
-        ## Data Sources:
-        - [BIBFRAME Ontology](https://id.loc.gov/ontologies/bibframe.html) - Official ontology from Library of Congress
-        - [LC BIBFRAME Profiles](https://github.com/lcnetdev/bfe-profiles) - Application profiles
-        - [DCTap Validation](https://github.com/bf-interop/DCTap) - Community validation patterns
         """)
         
-        with gr.Tabs():
+        with gr.Tabs(visible=True, elem_id="main-tabs"):
             # Tab 1: Property Lookup
-            with gr.Tab("Property Lookup"):
+            with gr.Tab("Property Lookup", elem_id="property-tab"):
                 with gr.Row():
                     with gr.Column():
                         property_input = gr.Textbox(
                             label="Property Name",
-                            placeholder="e.g., assigner, bf:assigner, or title"
+                            placeholder="e.g., assigner, bf:assigner, or title",
+                            max_lines=1
                         )
                         property_btn = gr.Button("🔍 Look Up Property", variant="primary")
-                        property_output = gr.Textbox(label="Property Information", lines=20)
-                        
-                        property_btn.click(
-                            fn=get_property_info,
-                            inputs=[property_input],
-                            outputs=[property_output]
-                        )
+                
+                property_output = gr.Code(label="Property Information", language="json", lines=20)
+                
+                property_btn.click(
+                    fn=get_property_info,
+                    inputs=[property_input],
+                    outputs=[property_output]
+                )
             
             # Tab 2: Class Lookup
-            with gr.Tab("Class Lookup"):
+            with gr.Tab("Class Lookup", elem_id="class-tab"):
                 with gr.Row():
                     with gr.Column():
                         class_input = gr.Textbox(
                             label="Class Name",
-                            placeholder="e.g., Work, AdminMetadata, or Instance"
+                            placeholder="e.g., Work, AdminMetadata, or Instance",
+                            max_lines=1
                         )
                         class_btn = gr.Button("🔍 Look Up Class", variant="primary")
-                        class_output = gr.Textbox(label="Class Information", lines=20)
-                        
-                        class_btn.click(
-                            fn=get_class_info,
-                            inputs=[class_input],
-                            outputs=[class_output]
-                        )
+                
+                class_output = gr.Code(label="Class Information", language="json", lines=20)
+                
+                class_btn.click(
+                    fn=get_class_info,
+                    inputs=[class_input],
+                    outputs=[class_output]
+                )
             
             # Tab 3: Search
-            with gr.Tab("Search Ontology"):
+            with gr.Tab("Search Ontology", elem_id="search-tab"):
                 with gr.Row():
                     with gr.Column():
                         search_input = gr.Textbox(
                             label="Search Term",
-                            placeholder="e.g., title, agent, date, or admin"
+                            placeholder="e.g., title, agent, date, or admin",
+                            max_lines=1
                         )
                         search_type = gr.Radio(
                             label="Search Type",
@@ -606,46 +606,54 @@ def create_interface():
                             value="all"
                         )
                         search_btn = gr.Button("🔍 Search", variant="primary")
-                        search_output = gr.Textbox(label="Search Results", lines=20)
-                        
-                        search_btn.click(
-                            fn=search_ontology,
-                            inputs=[search_input, search_type],
-                            outputs=[search_output]
-                        )
+                
+                search_output = gr.Code(label="Search Results", language="json", lines=20)
+                
+                search_btn.click(
+                    fn=search_ontology,
+                    inputs=[search_input, search_type],
+                    outputs=[search_output]
+                )
             
             # Tab 4: Property Usage
-            with gr.Tab("Property Usage Context"):
+            with gr.Tab("Property Usage Context", elem_id="usage-tab"):
                 with gr.Row():
                     with gr.Column():
                         usage_prop_input = gr.Textbox(
                             label="Property Name",
-                            placeholder="e.g., assigner, title, or adminMetadata"
+                            placeholder="e.g., assigner, title, or adminMetadata",
+                            max_lines=1
                         )
                         usage_class_input = gr.Textbox(
                             label="Class Context (optional)",
-                            placeholder="e.g., AdminMetadata, Work, or Instance"
+                            placeholder="e.g., AdminMetadata, Work, or Instance",
+                            max_lines=1
                         )
                         usage_btn = gr.Button("🔍 Get Usage Info", variant="primary")
-                        usage_output = gr.Textbox(label="Usage Information", lines=20)
-                        
-                        usage_btn.click(
-                            fn=get_property_usage,
-                            inputs=[usage_prop_input, usage_class_input],
-                            outputs=[usage_output]
-                        )
+                
+                usage_output = gr.Code(label="Usage Information", language="json", lines=20)
+                
+                usage_btn.click(
+                    fn=get_property_usage,
+                    inputs=[usage_prop_input, usage_class_input],
+                    outputs=[usage_output]
+                )
         
+        # Simplified footer to reduce page weight
         gr.Markdown("""
         ---
-        ### 💡 Usage Tips:
-        - Property names can be entered with or without the `bf:` prefix
-        - Search is case-insensitive and matches against names, labels, and definitions
-        - Use the "Property Usage Context" tab to understand how properties work with specific classes
+        ### MCP Configuration:
+        ```json
+        {
+          "mcpServers": {
+            "bibframe-docs": {
+              "url": "https://your-space.hf.space/gradio_api/mcp/"
+            }
+          }
+        }
+        ```
         
-        ### 🔗 Related Resources:
-        - **For SHACL validation**: Use the [mcp4rdf validator](https://huggingface.co/spaces/jimfhahn/mcp4rdf)
-        - **BIBFRAME Homepage**: [https://www.loc.gov/bibframe/](https://www.loc.gov/bibframe/)
-        - **BIBFRAME Documentation**: [https://www.loc.gov/bibframe/docs/](https://www.loc.gov/bibframe/docs/)
+        **Resources:** [BIBFRAME Docs](https://www.loc.gov/bibframe/) | [Validator](https://huggingface.co/spaces/jimfhahn/mcp4rdf)
         """)
     
     return demo