import gradio as gr import gradio.themes import numpy as np from style import js_func, css_func import tempfile import pandas as pd from shared_functions import greet, calculator, sepia, download_text, download_csv from greeting_tab import greeting_tab from calculator_tab import calculator_tab from sepia_tab import sepia_tab from space_loader_tab import gr_load_tab, iframe_loader_tab import json print("Gradio version:", gradio.__version__) theme = gr.Theme.from_hub("LPX55/modal_ai") with gr.Blocks(theme=theme, js=js_func, css=css_func) as demo: show_space_tab = gr.State(False) # Iframe lazy load pattern heavy_iframe_src = gr.State("") with gr.Tab("Heavy Space (iframe - lazy load)", visible=False) as heavy_iframe_tab: iframe_html = gr.HTML("") close_btn = gr.Button("Close Tab") def close_heavy_iframe_tab(): return gr.Tab(visible=False), "" close_btn.click(fn=close_heavy_iframe_tab, outputs=[heavy_iframe_tab, iframe_html]) def open_heavy_iframe_tab(): src = '' return gr.Tab(visible=True), src # Iframe always loaded pattern with gr.Tab("Heavy Space (iframe - always loaded)", visible=False) as heavy_iframe_always_tab: gr.HTML('') close_btn2 = gr.Button("Close Tab") def close_heavy_iframe_always_tab(): return gr.Tab(visible=False) close_btn2.click(fn=close_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab) def open_heavy_iframe_always_tab(): return gr.Tab(visible=True) with gr.Sidebar(width="25vw"): gr.Markdown(""" # 🤖 API + MCP Demo _Dynamically load tabs 🤫_ --- **Ways to load the remote SAM2.1 Masking Tool:** - **gr.load()**: Loads the remote interface at startup, just hidden until shown. - **iframe**: Loads the remote UI only when you click the button (no API integration). - **API Proxy**: Upload an image, and the backend will call the remote Space's API and show the result. - **Open in New Tab**: Opens the remote Space in a new browser tab. --- **Navigation** - [Greeting](#greeting) - [Calculator](#calculator) - [Sepia Image](#sepia-image) - [Custom IFrame Loader](#custom-iframe-loader) - [Space Loader](#space-loader) --- ### [GitHub Repo](https://github.com/yourrepo) | [Docs](https://yourdocs) --- **Tips:** - Try the examples in each tab! - Download your results with the button on the right. """) gr.Code( """from gradio_client import Client client = Client("YOUR_URL") print(client.predict("Alex", 5, False, api_name="/greet")) """, language="python", label="**API Example:**" ) gr.Button("Reset All", elem_id="reset-btn") load_space_btn = gr.Button("Load Extra Space", elem_id="load-space-btn") load_sam_btn = gr.Button("Load SAM2.1 Masking Tool (gr.load)", elem_id="load-sam-btn") load_sam_iframe_btn = gr.Button("Load SAM2.1 Masking Tool (iframe)", elem_id="load-sam-iframe-btn") load_sam_api_btn = gr.Button("Load SAM2.1 Masking Tool (API Proxy)", elem_id="load-sam-api-btn") open_sam_tab_btn = gr.Button("Open SAM2.1 Masking Tool in New Tab", elem_id="open-sam-tab-btn") open_heavy_iframe_btn = gr.Button("Open Heavy Space (iframe - lazy load)") open_heavy_iframe_btn.click(fn=open_heavy_iframe_tab, outputs=[heavy_iframe_tab, iframe_html]) open_heavy_iframe_always_btn = gr.Button("Open Heavy Space (iframe - always loaded)") open_heavy_iframe_always_btn.click(fn=open_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab) # All tabs grouped together for a unified tab bar shared_state = gr.State({"greeting": None, "calculation": None}) shared_state_box = gr.JSON(label="Shared Data Between Tabs") def pretty_json(state): return json.dumps(state, indent=2, ensure_ascii=False) with gr.Tab("Greeting"): name = gr.Textbox(label="Name", info="Enter your name", placeholder="e.g. Alex") intensity = gr.Slider(1, 20, value=3, step=1, label="Intensity", info="How excited should the greeting be?") with gr.Accordion("Advanced Options", open=False): exclaim = gr.Checkbox(label="Shout (all caps)", info="Make the greeting all uppercase and add exclamations") greet_btn = gr.Button("Greet") greet_output = gr.Textbox(label="Greeting", lines=2) download_greet_btn = gr.DownloadButton(label="Download Greeting", value=download_text, inputs=greet_output) gr.Examples( [["Jill", 1, False], ["Sam", 3, True], ["Alex", 5, False]], inputs=[name, intensity, exclaim], outputs=greet_output, fn=greet ) def update_greeting_state(greeting, state): state = dict(state) state["greeting"] = greeting return state greet_btn.click(greet, [name, intensity, exclaim], greet_output).then(update_greeting_state, [greet_output, shared_state], shared_state) with gr.Tab("Calculator"): num1 = gr.Number(label="Number 1", info="First number") operation = gr.Radio(["add", "subtract", "multiply", "divide"], label="Operation", info="Choose the operation") num2 = gr.Number(label="Number 2", info="Second number") calc_btn = gr.Button("Calculate") calc_output = gr.Number(label="Result") download_calc_btn = gr.DownloadButton(label="Download Result", value=download_csv, inputs=calc_output) gr.Examples( [[45, "add", 3], [3.14, "divide", 2], [144, "multiply", 2.5], [0, "subtract", 1.2]], inputs=[num1, operation, num2], outputs=calc_output, fn=calculator ) def update_calc_state(result, state): state = dict(state) state["calculation"] = result return state calc_btn.click(calculator, [num1, operation, num2], calc_output).then(update_calc_state, [calc_output, shared_state], shared_state) with gr.Tab("Sepia Image"): sepia_tab() with gr.Tab("Space Loader (gr.load)"): gr_load_tab() with gr.Tab("Space Loader (iframe)"): iframe_loader_tab() with gr.Tab("Extra Space", visible=False) as extra_space_tab: gr.Markdown("## External Gradio Space") gr.HTML('') close_btn = gr.Button("Close Tab") def close_tab(): return gr.Tab(visible=False) close_btn.click(fn=close_tab, outputs=extra_space_tab) with gr.Tab("Custom IFrame Loader") as custom_iframe_tab: gr.Markdown("## Load Any IFrame URL") custom_url = gr.Textbox(label="IFrame URL", placeholder="https://example.com") load_custom_iframe_btn = gr.Button("Load IFrame") custom_iframe = gr.HTML(visible=True) def load_custom_iframe(url): if not url: return "
Please enter a URL.
" return f'' load_custom_iframe_btn.click(fn=load_custom_iframe, inputs=custom_url, outputs=custom_iframe) close_btn = gr.Button("Close Tab") def close_tab_custom(): return gr.Tab(visible=False) close_btn.click(fn=close_tab_custom, outputs=custom_iframe_tab) # Add state variables for each dynamic tab extra_space_open = gr.State(True) sam_tab_open = gr.State(True) sam_iframe_tab_open = gr.State(True) sam_api_tab_open = gr.State(True) custom_iframe_tab_open = gr.State(True) def show_tab(): return gr.Tab(visible=True) load_space_btn.click(fn=show_tab, outputs=[extra_space_tab]) def show_sam_api_tab(): return gr.Tab(visible=True) def open_in_new_tab(): # This function does nothing server-side, but the button will have a link pass open_sam_tab_btn.click(fn=open_in_new_tab, inputs=None, outputs=None, js="window.open('https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space', '_blank')") shared_state.change(pretty_json, shared_state, shared_state_box) demo.queue(default_concurrency_limit=2, max_size=10).launch(mcp_server=True)