Update app_gradio.py

app_gradio.py

@@ -200,9 +200,7 @@ def generate_output(image, prompt: str, num_seeds: int = 3, lambda_value: float
     
     return filtered_gifs
 
-
-def create_gradio_interface():
-    with gr.Blocks(css="""
+css="""
         .container {
             max-width: 1200px;
             margin: 0 auto;
@@ -260,8 +258,12 @@ def create_gradio_interface():
             opacity: 0.7;
             cursor: not-allowed;
         }
-    """) as demo:
-        gr.Markdown(
+    """
+
+def create_gradio_interface():
+    with gr.Blocks(css=css) as demo:
+        with gr.Column():
+            gr.Markdown(
             """
                         
             <div align="center" id = "user-content-toc">
@@ -272,75 +274,69 @@ def create_gradio_interface():
             </div>
 
             """
-        )
+            )
         
-        with gr.Tabs() as tabs:
-            # First tab: Examples (Secure)
-            with gr.Tab("Examples"):
-                gr.Markdown("## Step 1 👉  &nbsp; &nbsp; &nbsp; Select a sketch from the gallery of sketches")
-                examples_dir = "static/examples"
-                if os.path.exists(examples_dir):
-                    example_images = []
-                    for example in os.listdir(examples_dir):
-                        if example.endswith(('.png', '.jpg', '.jpeg')):
-                            example_path = os.path.join(examples_dir, example)
-                            example_images.append(Image.open(example_path))
-                    
-                    example_selection = gr.Gallery(
-                        example_images,
-                        label="Sketch Gallery",
-                        elem_classes="example-gallery",
-                        columns=4,
-                        rows=2,
-                        height="auto",
-                        allow_preview=False,  # Disable preview expansion
-                        show_share_button=False,
-                        interactive=False,
-                        selected_index=None  # Don't pre-select any image
+        with gr.Row():
+            with gr.Column():        
+                
+                input_sketch = gr.Image(
+                    type="pil",
+                    label="Selected Sketch",
+                    scale=1,
+                    interactive=True,
+                    height=300  # Fixed height for consistency
+                )
+               
+                motion_prompt = gr.Textbox(
+                    label="Prompt",
+                    placeholder="Describe the motion...",
+                    lines=3
+                )
+
+               gr.Examples(
+                    examples=[
+                        ['./static/examples/sketch1.png', 'The camel walks slowly'],
+                        ['./static/examples/sketch2.png', 'The wine in the wine glass sways from side to side'],
+                        ['./static/examples/sketch3.png', 'The squirrel is eating a nut'],
+                        ['./static/examples/sketch4.png', 'The surfer surfs on the waves'],
+                        ['./static/examples/sketch5.png', 'A galloping horse'],
+                        ['./static/examples/sketch6.png', 'The cat walks forward'],
+                        ['./static/examples/sketch7.png', 'The eagle flies in the sky'],
+                        ['./static/examples/sketch8.png', 'The flower is blooming slowly'],
+                        ['./static/examples/sketch9.png', 'The reindeer looks around'],
+                        ['./static/examples/sketch10.png', 'The cloud floats in the sky'],
+                        ['./static/examples/sketch11.png', 'The jazz saxophonist performs on stage with a rhythmic sway, his upper body sways subtly to the rhythm of the music.'],
+                        ['./static/examples/sketch12.png', 'The biker rides on the road']
+                   ],
+                   inputs=[input_sketche, motion_prompt],
+                   examples_per_page=1
+               )
+                
+                with gr.Row():
+                    num_seeds = gr.Slider(
+                        minimum=1, 
+                        maximum=10, 
+                        value=5, 
+                        step=1, 
+                        label="Seeds"
                     )
-                gr.Markdown("## Step 2 👉  &nbsp; &nbsp; &nbsp; Describe the motion you want to generate")
-                with gr.Group(elem_classes="selected-example"):
-                    with gr.Row():
-                        selected_example = gr.Image(
-                            type="pil",
-                            label="Selected Sketch",
-                            scale=1,
-                            interactive=False,
-                            show_download_button=False,
-                            height=300  # Fixed height for consistency
-                        )
-                        with gr.Column(scale=2):
-                            example_prompt = gr.Textbox(
-                                label="Prompt",
-                                placeholder="Describe the motion...",
-                                lines=3
-                            )
-                            with gr.Row():
-                                example_num_seeds = gr.Slider(
-                                    minimum=1, 
-                                    maximum=10, 
-                                    value=5, 
-                                    step=1, 
-                                    label="Seeds"
-                                )
-                                example_lambda = gr.Slider(
-                                    minimum=0, 
-                                    maximum=1, 
-                                    value=0.5, 
-                                    step=0.1, 
-                                    label="Motion Strength"
-                                )
-                            example_generate_btn = gr.Button(
-                                "Generate Animation",
-                                variant="primary",
-                                elem_classes="generate-btn",
-                                interactive=True,
-                            )
+                    lambda_ = gr.Slider(
+                        minimum=0, 
+                        maximum=1, 
+                        value=0.5, 
+                        step=0.1, 
+                        label="Motion Strength"
+                    )
+                generate_btn = gr.Button(
+                    "Generate Animation",
+                    variant="primary",
+                    elem_classes="generate-btn",
+                    interactive=True,
+                )
 
-                            
+            with gr.Column():              
                 
-                gr.Markdown("## Result 👉 &nbsp; &nbsp; &nbsp; Generated Animations ❤️")
-                example_gallery = gr.Gallery(
+                output_gallery = gr.Gallery(
                     label="Results",
                     elem_classes="output-gallery",
                     columns=3,
@@ -352,111 +348,18 @@ def create_gradio_interface():
                     preview=False
                 )
             
-            # Second tab: Upload
-            with gr.Tab("Upload Your Sketch"):
-                with gr.Group(elem_classes="selected-example"):
-                    with gr.Row():
-                        upload_image = gr.Image(
-                            type="pil",
-                            label="Upload Your Sketch",
-                            scale=1,
-                            height=300,  # Fixed height for consistency
-                            show_download_button=False,
-                            sources=["upload"],
-                        )
-                        with gr.Column(scale=2):
-                            upload_prompt = gr.Textbox(
-                                label="Prompt",
-                                placeholder="Describe what you want to generate...",
-                                lines=3
-                            )
-                            with gr.Row():
-                                upload_num_seeds = gr.Slider(
-                                    minimum=1,
-                                    maximum=10,
-                                    value=5,
-                                    step=1,
-                                    label="Number of Variations"
-                                )
-                                upload_lambda = gr.Slider(
-                                    minimum=0,
-                                    maximum=1,
-                                    value=0.5,
-                                    step=0.1,
-                                    label="Motion Strength"
-                                )
-                            upload_generate_btn = gr.Button(
-                                "Generate Animation",
-                                variant="primary",
-                                elem_classes="generate-btn",
-                                size="lg",
-                                interactive=True,
-                            )
-                    
-                gr.Markdown("## Result 👉 &nbsp; &nbsp; &nbsp; Generated Animations ❤️")
-                upload_gallery = gr.Gallery(
-                    label="Results",
-                    elem_classes="output-gallery",
-                    columns=3,
-                    rows=2,
-                    height="auto",
-                    allow_preview=False,  # Disable preview expansion
-                    show_share_button=False,
-                    object_fit="cover",
-                    preview=False
-                )
+           
         
         # Event handlers
-        def select_example(evt: gr.SelectData):
-            prompts = {'sketch1.png': 'The camel walks slowly',
-                'sketch2.png': 'The wine in the wine glass sways from side to side',
-                'sketch3.png': 'The squirrel is eating a nut',
-                'sketch4.png': 'The surfer surfs on the waves',
-                'sketch5.png': 'A galloping horse',
-                'sketch6.png': 'The cat walks forward',
-                'sketch7.png': 'The eagle flies in the sky',
-                'sketch8.png': 'The flower is blooming slowly',
-                'sketch9.png': 'The reindeer looks around',
-                'sketch10.png': 'The cloud floats in the sky',
-                'sketch11.png': 'The jazz saxophonist performs on stage with a rhythmic sway, his upper body sways subtly to the rhythm of the music.',
-                'sketch12.png': 'The biker rides on the road',}
-            if evt.index < len(example_images):
-                example_img = example_images[evt.index]
-                prompt_text = prompts.get(os.path.basename(example_img.filename), "")
-                
-
-                return [
-                    example_img,
-                    prompt_text
-                ]
-            return [None, ""]
-        
-        example_selection.select(
-            select_example,
-            None,
-            [selected_example, example_prompt]
-        )
-        
         example_generate_btn.click(
             fn=generate_output,
             inputs=[
-                selected_example,
-                example_prompt,
-                example_num_seeds,
-                example_lambda
-            ],
-            outputs=example_gallery
-        )
-        
-        upload_generate_btn.click(
-            fn=generate_output,
-            inputs=[
-                upload_image,
-                upload_prompt,
-                upload_num_seeds,
-                upload_lambda
+                input_sketch,
+                motion_prompt,
+                num_seeds,
+                lambda_
             ],
-            outputs=upload_gallery
+            outputs=output_gallery
         )
     
     return demo