Update app.py

app.py

@@ -87,13 +87,8 @@ CUSTOM_CSS = """
     color: #4f46e5 !important;
     font-weight: 600 !important;
 }
-.visualization-container {
-    min-height: 600px !important;
-    margin-top: 2rem !important;
-    margin-bottom: 2rem !important;
-    border-radius: 16px !important;
-    overflow: hidden !important;
-    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
+.header-container {
+    margin-bottom: 24px !important;
 }
 .sidebar-container {
     background-color: white !important;
@@ -101,6 +96,9 @@ CUSTOM_CSS = """
     padding: 16px !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
 }
+.visualization-container {
+    margin-top: 24px !important;
+}
 .app-title {
     background: linear-gradient(90deg, #4f46e5, #8b5cf6) !important;
     -webkit-background-clip: text !important;
@@ -114,11 +112,12 @@ CUSTOM_CSS = """
     font-size: 1.25rem !important;
     margin-bottom: 2rem !important;
 }
-.graph-iframe iframe {
-    width: 100% !important;
-    height: 700px !important;
+.examples-container {
+    background-color: white !important;
     border-radius: 12px !important;
+    padding: 16px !important;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+    margin-bottom: 16px !important;
 }
 .results-container {
     background-color: #f8fafc !important;
@@ -138,6 +137,12 @@ CUSTOM_CSS = """
     font-size: 0.875rem !important;
     margin-right: 8px !important;
 }
+.graph-container iframe {
+    width: 100% !important;
+    height: 700px !important;
+    border-radius: 12px !important;
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
+}
 """
 
 # Cache directory and file paths
@@ -410,7 +415,7 @@ def create_ui():
     
     with gr.Blocks(css=CUSTOM_CSS, title=TITLE) as demo:
         # Header with enhanced styling
-        with gr.Row(elem_classes=["header-container"]):
+        with gr.Row():
             with gr.Column():
                 gr.Markdown(f"<h1 class='app-title'>{TITLE}</h1>")
                 gr.Markdown(f"<p class='app-subtitle'>{SUBTITLE}</p>")
@@ -421,52 +426,52 @@ def create_ui():
         # Main content area - redesigned layout
         with gr.Row():
             # Left panel - Input controls
-            with gr.Column(scale=1, elem_classes=["sidebar-container"]):
-                input_model = gr.Dropdown(
-                    MODEL_LIST, 
-                    label="🤖 Select Model",
-                    info="Choose a model to process your text",
-                    value=MODEL_LIST[0] if MODEL_LIST else None,
-                    elem_classes=["control-item"]
-                )
-                
-                input_text = gr.TextArea(
-                    label="📝 Input Text", 
-                    info="Enter text in any language to extract a knowledge graph",
-                    placeholder="Enter text here...",
-                    lines=8,
-                    value=EXAMPLES[0][0],  # Pre-fill with first example
-                    elem_classes=["control-item"]
-                )
-                
-                with gr.Row():
-                    submit_button = gr.Button("🚀 Extract & Visualize", variant="primary", scale=2)
-                    clear_button = gr.Button("🔄 Clear", variant="secondary", scale=1)
-                
-                # Statistics will appear here
-                stats_output = gr.Markdown("", label="🔍 Analysis Results", elem_classes=["results-container"])
+            with gr.Column(scale=1):
+                with gr.Box():
+                    input_model = gr.Dropdown(
+                        MODEL_LIST, 
+                        label="🤖 Select Model",
+                        info="Choose a model to process your text",
+                        value=MODEL_LIST[0] if MODEL_LIST else None
+                    )
+                    
+                    input_text = gr.TextArea(
+                        label="📝 Input Text", 
+                        info="Enter text in any language to extract a knowledge graph",
+                        placeholder="Enter text here...",
+                        lines=8,
+                        value=EXAMPLES[0][0]  # Pre-fill with first example
+                    )
+                    
+                    with gr.Row():
+                        submit_button = gr.Button("🚀 Extract & Visualize", variant="primary", scale=2)
+                        clear_button = gr.Button("🔄 Clear", variant="secondary", scale=1)
+                    
+                    # Statistics will appear here
+                    stats_output = gr.Markdown("", label="🔍 Analysis Results")
             
             # Right panel - Examples moved to right side
-            with gr.Column(scale=1, elem_classes=["sidebar-container"]):
-                gr.Markdown("<h3>📚 Example Texts</h3>")
-                gr.Examples(
-                    examples=EXAMPLES,
-                    inputs=input_text,
-                    label="",
-                    elem_classes=["examples-panel"]
-                )
-                
-                # JSON output moved to right side as well
-                with gr.Accordion("📊 JSON Data", open=False):
-                    output_json = gr.JSON(label="")
+            with gr.Column(scale=1):
+                with gr.Box():
+                    gr.Markdown("<h3>📚 Example Texts</h3>")
+                    # Removed elem_classes parameter that was causing the error
+                    gr.Examples(
+                        examples=EXAMPLES,
+                        inputs=input_text,
+                        label=""
+                    )
+                    
+                    # JSON output moved to right side as well
+                    with gr.Accordion("📊 JSON Data", open=False):
+                        output_json = gr.JSON(label="")
         
         # Full width visualization area at the bottom
-        with gr.Row(elem_classes=["visualization-container"]):
+        with gr.Row():
             with gr.Column():
                 # Tab container for visualizations
                 with gr.Tabs():
                     with gr.Tab("🧩 Knowledge Graph"):
-                        output_graph = gr.HTML(label="", elem_classes=["graph-iframe"])
+                        output_graph = gr.HTML(label="")
                     
                     with gr.Tab("🏷️ Entity Recognition"):
                         output_entity_viz = gr.HTML(label="")
@@ -499,7 +504,7 @@ def create_ui():
             )
         
         # Footer
-        with gr.Row(elem_classes=["footer-container"]):
+        with gr.Row():
             gr.Markdown("---")
             gr.Markdown("📋 **Instructions:** Enter text in any language, select a model, and click 'Extract & Visualize' to generate a knowledge graph.")
             gr.Markdown("🛠️ Powered by Phi-3 Instruct Graph | Emergent Methods")