Update app.py

app.py

@@ -56,11 +56,10 @@ def reload_tools_from_url(mcp_url_input):
 
 with gr.Blocks() as demo:
     gr.HTML("""
-            <div style="text-align:center; max-width: 100%; margin-bottom: 20px;">
-                <h1 style="font-size: 2em; margin-bottom: 0.5em;">
+                <h1 style="text-align:center; font-size: 2em; margin-bottom: 0.5em;">
                     🚀 MCP Explorer – Agents-MCP-Hackathon (June 2025)
                 </h1>
-                <p style="font-size: 1em; line-height: 1.5em; margin: 0 auto; max-width: 600px;">
+                <p style="text-align:center; font-size: 1em; line-height: 1.5em; margin: 0 auto; max-width: 600px;">
                     🔍 Query any MCP-compatible endpoint, 🛠️ browse available tools in a clean table view, and 🤖 test real-time interactions using a <code>smolagent</code> powered by <code>HuggingFace</code>.<br/>
                     Perfect for 🧪 exploring fellow participants’ tools or 🧰 debugging your own MCP server during the event!<br/>
                     🍒 As a cherry on the cake, the list of the tools developed for the hackathon will be updated here from time to time (see <code>src/bonus.py</code>):<br/>
@@ -68,74 +67,75 @@ with gr.Blocks() as demo:
                         Ready to use hackathon MCP tools list
                     </a>
                 </p>
-            </div>
             """
            )
-    gr.Markdown("""
-        <div align="center">
-            <h2>🛠️ Set an MCP server and discover its tools</h2>
-        </div>
-        """)
-    source_selector = gr.Radio(
-        choices=["Hackathon candidates", "Custom MCP URL"],
-        label="🔀 Source",
-        value="Hackathon candidates"
-    )
-    
-    hackathon_dropdown = gr.Dropdown(
-        label="Select a MCP server from the hackathon organisation",
-        choices=get_mcp_space_endpoints(),
-        value=DEFAULT_MCP_URL,
-        interactive=True,
-        visible=True
-    )
-
-    custom_url_input = gr.Textbox(
-        label="Enter custom MCP server URL",
-        value="https://agents-mcp-hackathon-mcp-server-demo.hf.space/gradio_api/mcp/sse",
-        visible=False
-    )
-    
-    def toggle_url_input(source):
-        return (
-            gr.update(visible=(source == "Hackathon candidates")),
-            gr.update(visible=(source == "Custom MCP URL"))
-        )
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("""
+                <div align="center">
+                    <h2>🛠️ Set an MCP server and discover its tools</h2>
+                </div>
+                """)
+            source_selector = gr.Radio(
+                choices=["Hackathon candidates", "Custom MCP URL"],
+                label="🔀 Source",
+                value="Hackathon candidates"
+            )
+            
+            hackathon_dropdown = gr.Dropdown(
+                label="Select a MCP server from the hackathon organisation",
+                choices=get_mcp_space_endpoints(),
+                value=DEFAULT_MCP_URL,
+                interactive=True,
+                visible=True
+            )
         
-    def reload_tools_router(source, dropdown_val, custom_val):
-        selected_url = dropdown_val if source == "Hackathon candidates" else custom_val
-        return reload_tools_from_url(selected_url)
-
-    source_selector.change(fn=toggle_url_input, inputs=source_selector, outputs=[hackathon_dropdown, custom_url_input])
-    
-    #print("[MCP] Endpoints loaded:", get_mcp_space_endpoints())
-    tool_table = gr.DataFrame(headers=["Tool name", "Description", "Params"], interactive=False, label="🔧 MCP Tools availables", wrap=True)
-    reload_btn = gr.Button("🔄 Refresh and set MCP tools list")
-    reload_btn.click(
-        fn=reload_tools_router,
-        inputs=[source_selector, hackathon_dropdown, custom_url_input],
-        outputs=tool_table
-    )
-    hackathon_dropdown.change(
-        fn=reload_tools_router,
-        inputs=[source_selector, hackathon_dropdown, custom_url_input],
-        outputs=tool_table
-    )
-    custom_url_input.submit(
-        fn=reload_tools_router,
-        inputs=[source_selector, hackathon_dropdown, custom_url_input],
-        outputs=tool_table
-    ) 
+            custom_url_input = gr.Textbox(
+                label="Enter custom MCP server URL",
+                value="https://agents-mcp-hackathon-mcp-server-demo.hf.space/gradio_api/mcp/sse",
+                visible=False
+            )
+            
+            def toggle_url_input(source):
+                return (
+                    gr.update(visible=(source == "Hackathon candidates")),
+                    gr.update(visible=(source == "Custom MCP URL"))
+                )
+                
+            def reload_tools_router(source, dropdown_val, custom_val):
+                selected_url = dropdown_val if source == "Hackathon candidates" else custom_val
+                return reload_tools_from_url(selected_url)
+        
+            source_selector.change(fn=toggle_url_input, inputs=source_selector, outputs=[hackathon_dropdown, custom_url_input])
             
-    gr.Markdown("""
-        <div align="center">
-            <h2>🔎 Test them with smolagents</h2>
-        </div>
-        """)
-    chatbot = gr.ChatInterface(
-        fn=lambda message, history: str(agent.run(message)),
-        type="messages", 
-    )
+            #print("[MCP] Endpoints loaded:", get_mcp_space_endpoints())
+            tool_table = gr.DataFrame(headers=["Tool name", "Description", "Params"], interactive=False, label="🔧 MCP Tools availables", wrap=True)
+            reload_btn = gr.Button("🔄 Refresh and set MCP tools list")
+            reload_btn.click(
+                fn=reload_tools_router,
+                inputs=[source_selector, hackathon_dropdown, custom_url_input],
+                outputs=tool_table
+            )
+            hackathon_dropdown.change(
+                fn=reload_tools_router,
+                inputs=[source_selector, hackathon_dropdown, custom_url_input],
+                outputs=tool_table
+            )
+            custom_url_input.submit(
+                fn=reload_tools_router,
+                inputs=[source_selector, hackathon_dropdown, custom_url_input],
+                outputs=tool_table
+            ) 
+        with gr.Column():
+            gr.Markdown("""
+                <div align="center">
+                    <h2>🔎 Test them with smolagents</h2>
+                </div>
+                """)
+            chatbot = gr.ChatInterface(
+                fn=lambda message, history: str(agent.run(message)),
+                type="messages", 
+            )
 
 demo.launch()