Refactor space loading functionality in space_loader_tab.py to streamline the selection and display of popular Hugging Face Spaces. Replace dropdown and button with a dynamic interface that shows the selected space directly, enhancing user experience and code clarity.

space_loader_tab.py

@@ -2,35 +2,23 @@ import gradio as gr
 
 POPULAR_SPACES = [
     "gradio/calculator",
-    "gradio/image-classification",
     "huggingface-projects/llama-2-7b-chat",
-    "gradio/englishtranslator",
-    "gradio/blocks-gallery"
 ]
 
 def gr_load_tab():
     gr.Markdown("## Load a Popular Hugging Face Space (gr.load)")
-    space_dropdown = gr.Dropdown(POPULAR_SPACES, label="Popular Spaces", interactive=True)
-    load_btn = gr.Button("Load Space")
-    error_box = gr.Markdown(visible=False)
-    with gr.Column():
-        gr.Markdown("### gr.load() Interface")
-        loaded_interface = gr.Blocks()
+    dropdown = gr.Dropdown(POPULAR_SPACES, label="Popular Spaces", value=POPULAR_SPACES[0])
+    space_blocks = []
+    for space in POPULAR_SPACES:
+        with gr.Column(visible=(space == POPULAR_SPACES[0])) as col:
+            gr.load(space, src="spaces")
+        space_blocks.append(col)
 
-    def load_space(space):
-        if not space or "/" not in space:
-            return gr.update(visible=True, value="**Error:** Please select a valid space name."), None
-        try:
-            interface = gr.load(space, src="spaces")
-        except Exception as e:
-            return gr.update(visible=True, value=f"**Error loading space:** {e}"), None
-        return gr.update(visible=False), interface
+    def show_space(selected):
+        return [gr.Column(visible=(selected == space)) for space in POPULAR_SPACES]
+
+    dropdown.change(fn=show_space, inputs=dropdown, outputs=space_blocks)
 
-    load_btn.click(
-        fn=load_space,
-        inputs=space_dropdown,
-        outputs=[error_box, loaded_interface]
-    )
 
 def iframe_loader_tab():
     gr.Markdown("## Load Any Hugging Face Space (iframe)")