Update app.py

app.py

@@ -154,88 +154,78 @@ body {
 
 # --- Gradio Interface ---
 
-# Define demo OUTSIDE the blocks
-demo = gr.Blocks(css=css)
-
-# Initial Welcome Screen
-with gr.Blocks() as welcome_screen:
-    with gr.Row():
-        logo = gr.Image(
-            value="http://disneypixaraigenerator.com/wp-content/uploads/2023/12/cropped-android-chrome-512x512-1.png",
-            elem_id="logo",
-            height=200,
-            width=300
-        )
-
-    with gr.Row():
-        title = gr.Markdown("<h1 style='text-align: center;'>Disney Pixar AI Generator</h1>", elem_id="title")
-
-    with gr.Row():
-        start_button = gr.Button("Get Started", variant='primary', elem_id="start-button")
-
-# Main Generation Screen (Now use the defined 'demo')
-with demo:
-    with gr.Row():
-        gr.Markdown("<h1 style='text-align: center;'>Create Your Disney Pixar AI Poster</h1>", elem_id="title")
-
-    with gr.Row(elem_id="image-output-container"):
-        image_output = gr.Image(
-            value="https://cdn-uploads.huggingface.co/production/uploads/noauth/XWJyh9DhMGXrzyRJk7SfP.png",
-            label="Generated Image",
-            elem_id="image-output"
-        )
-
-    with gr.Row(elem_id="settings"):
-        with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
-            prompt = gr.Textbox(
-                "space warrior, beautiful, female, ultrarealistic, soft lighting, 8k",
-                placeholder="Enter your prompt here...", 
-                show_label=False, 
-                lines=3, 
-                elem_id="prompt-input"
-            )
-            negative_prompt = gr.Textbox(
-                placeholder="Enter negative prompts (optional)...", 
-                show_label=False, 
-                lines=3, 
-                value="3d, cartoon, anime, (deformed eyes, nose, ears, nose), bad anatomy, ugly"
-            )
-            text_button = gr.Button("Generate", variant='primary', elem_id="generate") 
-
-        with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
-            model = gr.Dropdown(
-                interactive=True,
-                value="sd_xl_base_1.0.safetensors [be9edd61]", 
-                show_label=True, 
-                label="Model", 
-                choices=prodia_client.list_models()
-            )
-            sampler = gr.Dropdown(
-                value="DPM++ 2M Karras", 
-                show_label=True, 
-                label="Sampling Method", 
-                choices=prodia_client.list_samplers()
-            )
-            steps = gr.Slider(label="Sampling Steps", minimum=1, maximum=25, value=20, step=1)
-
-        with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
-            width = gr.Slider(label="Width", minimum=512, maximum=1536, value=1024, step=8)
-            height = gr.Slider(label="Height", minimum=512, maximum=1536, value=1024, step=8)
-            cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, value=7, step=1)
-            seed = gr.Number(label="Seed", value=-1)
+with gr.Blocks(css=css) as demo:
+    state = gr.State(value="Welcome Screen")  # To control the visibility of tabs
+
+    with gr.Tabs() as tabs:
+        with gr.TabItem("Welcome Screen"):
+            with gr.Row():
+                logo = gr.Image(
+                    value="http://disneypixaraigenerator.com/wp-content/uploads/2023/12/cropped-android-chrome-512x512-1.png",
+                    elem_id="logo",
+                    height=200,
+                    width=300
+                )
+
+            with gr.Row():
+                title = gr.Markdown("<h1 style='text-align: center;'>Disney Pixar AI Generator</h1>", elem_id="title")
+
+            with gr.Row():
+                start_button = gr.Button("Get Started", variant='primary', elem_id="start-button")
+
+        with gr.TabItem("Main Generation Screen"):
+            with gr.Row():
+                gr.Markdown("<h1 style='text-align: center;'>Create Your Disney Pixar AI Poster</h1>", elem_id="title")
+
+            with gr.Row(elem_id="image-output-container"):
+                image_output = gr.Image(
+                    value="https://cdn-uploads.huggingface.co/production/uploads/noauth/XWJyh9DhMGXrzyRJk7SfP.png",
+                    label="Generated Image",
+                    elem_id="image-output"
+                )
+
+            with gr.Row(elem_id="settings"):
+                with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
+                    prompt = gr.Textbox(
+                        "space warrior, beautiful, female, ultrarealistic, soft lighting, 8k",
+                        placeholder="Enter your prompt here...", 
+                        show_label=False, 
+                        lines=3, 
+                        elem_id="prompt-input"
+                    )
+                    negative_prompt = gr.Textbox(
+                        placeholder="Enter negative prompts (optional)...", 
+                        show_label=False, 
+                        lines=3, 
+                        value="3d, cartoon, anime, (deformed eyes, nose, ears, nose), bad anatomy, ugly"
+                    )
+                    text_button = gr.Button("Generate", variant='primary', elem_id="generate") 
+
+                with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
+                    model = gr.Dropdown(
+                        interactive=True,
+                        value="sd_xl_base_1.0.safetensors [be9edd61]", 
+                        show_label=True, 
+                        label="Model", 
+                        choices=prodia_client.list_models()
+                    )
+                    sampler = gr.Dropdown(
+                        value="DPM++ 2M Karras", 
+                        show_label=True, 
+                        label="Sampling Method", 
+                        choices=prodia_client.list_samplers()
+                    )
+                    steps = gr.Slider(label="Sampling Steps", minimum=1, maximum=25, value=20, step=1)
+
+                with gr.Column(scale=1, min_width=300, elem_classes="setting-group"):
+                    width = gr.Slider(label="Width", minimum=512, maximum=1536, value=1024, step=8)
+                    height = gr.Slider(label="Height", minimum=512, maximum=1536, value=1024, step=8)
+                    cfg_scale = gr.Slider(label="CFG Scale", minimum=1, maximum=20, value=7, step=1)
+                    seed = gr.Number(label="Seed", value=-1)
 
     text_button.click(flip_text, inputs=[prompt, negative_prompt, model, steps, sampler, cfg_scale, width, height, seed], outputs=image_output)
-
-# Tabs to switch between screens
-tabs = gr.Tabs()
-with tabs:
-    with gr.TabItem("Welcome Screen"):
-        welcome_screen
-    with gr.TabItem("Main Generation Screen"):
-        demo
-
-# Connect Welcome Screen to Generation Screen 
-start_button.click(fn=lambda: tabs.set_selected("Main Generation Screen"))
+    start_button.click(fn=lambda: "Main Generation Screen", inputs=None, outputs=state)
+    state.change(fn=lambda x: gr.update(visible=(x == "Main Generation Screen")), inputs=state, outputs=tabs)
 
 # Launch the Gradio app
-tabs.launch(max_threads=128)
+demo.launch(max_threads=128)