Refactor app.py to modularize tab functionality by introducing greeting_tab, calculator_tab, and sepia_tab functions for improved readability and maintainability

app.py

@@ -4,6 +4,9 @@ import numpy as np
 from style import js_func, css_func
 import tempfile
 import pandas as pd
+from greeting_tab import greeting_tab
+from calculator_tab import calculator_tab
+from sepia_tab import sepia_tab
 
 def greet(name="Stranger", intensity=1, exclaim=False):
     greeting = f"Hello, {name}{'!' * int(intensity)}"
@@ -94,50 +97,13 @@ print(client.predict("Alex", 5, False, api_name="/greet"))
         open_sam_tab_btn = gr.Button("Open SAM2.1 Masking Tool in New Tab", elem_id="open-sam-tab-btn")
 
     with gr.Tab("Greeting"):
-        gr.Markdown("## Greeting Generator")
-        with gr.Row():
-            with gr.Column():
-                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")
-            with gr.Column():
-                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
-                )
-        greet_btn.click(greet, [name, intensity, exclaim], greet_output)
+        greeting_tab()
 
     with gr.Tab("Calculator"):
-        gr.Markdown("## Toy Calculator")
-        with gr.Row():
-            with gr.Column():
-                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")
-            with gr.Column():
-                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
-                )
-        calc_btn.click(calculator, [num1, operation, num2], calc_output)
+        calculator_tab()
 
     with gr.Tab("Sepia Image"):
-        gr.Markdown("## Sepia Image Filter")
-        image_input = gr.Image(label="Input Image", type="numpy")
-        sepia_btn = gr.Button("Apply Sepia")
-        image_output = gr.Image(label="Sepia Image")
-        sepia_btn.click(sepia, image_input, image_output)
+        sepia_tab()
 
     # Add state variables for each dynamic tab
     extra_space_open = gr.State(True)
@@ -232,6 +198,32 @@ print(client.predict("Alex", 5, False, api_name="/greet"))
                     return gr.Tab(visible=False), False
                 close_btn.click(fn=close_tab, outputs=[custom_iframe_tab, custom_iframe_tab_open])
 
+    # 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 = '<iframe src="https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space" width="100%" height="800" style="border:none;"></iframe>'
+        return gr.Tab(visible=True), src
+    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])
+
+    # Iframe always loaded pattern
+    with gr.Tab("Heavy Space (iframe - always loaded)", visible=True) as heavy_iframe_always_tab:
+        gr.HTML('<iframe src="https://lpx55-sam2-1-image-predictor-masking-tool-cpu.hf.space" width="100%" height="800" style="border:none;"></iframe>')
+        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)
+    open_heavy_iframe_always_btn = gr.Button("Open Heavy Space (iframe - always loaded)")
+    def open_heavy_iframe_always_tab():
+        return gr.Tab(visible=True)
+    open_heavy_iframe_always_btn.click(fn=open_heavy_iframe_always_tab, outputs=heavy_iframe_always_tab)
+
     def show_tab():
         return gr.Tab(visible=True)
 

calculator_tab.py

@@ -0,0 +1,21 @@
+import gradio as gr
+from app import calculator, download_csv
+
+def calculator_tab():
+    gr.Markdown("## Toy Calculator")
+    with gr.Row():
+        with gr.Column():
+            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")
+        with gr.Column():
+            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
+            )
+    calc_btn.click(calculator, [num1, operation, num2], calc_output) 

greeting_tab.py

@@ -0,0 +1,22 @@
+import gradio as gr
+from app import greet, download_text
+
+def greeting_tab():
+    gr.Markdown("## Greeting Generator")
+    with gr.Row():
+        with gr.Column():
+            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")
+        with gr.Column():
+            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
+            )
+    greet_btn.click(greet, [name, intensity, exclaim], greet_output) 

sepia_tab.py

@@ -0,0 +1,9 @@
+import gradio as gr
+from app import sepia
+
+def sepia_tab():
+    gr.Markdown("## Sepia Image Filter")
+    image_input = gr.Image(label="Input Image", type="numpy")
+    sepia_btn = gr.Button("Apply Sepia")
+    image_output = gr.Image(label="Sepia Image")
+    sepia_btn.click(sepia, image_input, image_output)