feat: add example selection feature to SVG Animation Generator

app.py

@@ -299,7 +299,31 @@ def create_error_html(message: str) -> str:
     """
 
 
-with gr.Blocks(title="SVG Animation Generator", theme=gr.themes.Soft()) as demo:
+# Define examples with proper path handling and categories
+example_list = {
+    "Animals": [
+        [os.path.join(os.path.dirname(__file__), "examples/corgi.svg"), "corgi"],
+        [os.path.join(os.path.dirname(__file__), "examples/duck.svg"), "duck"],
+        [os.path.join(os.path.dirname(__file__), "examples/whale.svg"), "whale"]
+    ],
+    "Objects": [
+        [os.path.join(os.path.dirname(__file__), "examples/rocket.svg"), "rocket"]
+    ]
+}
+
+def load_example(example_choice):
+    # Find the selected example in the categories
+    for category, examples in example_list.items():
+        for example in examples:
+            if example[1] == example_choice:
+                return example[0]  # Return the file path
+    return None
+
+# Flatten choices for dropdown
+example_choices = [example[1] for category in example_list.values() for example in category]
+
+demo = gr.Blocks(title="SVG Animation Generator", theme=gr.themes.Soft())
+with demo:
     gr.Markdown("# 🎨 SVG Decomposition & Animation Generator")
     gr.Markdown(
         "Intelligent SVG decomposition and animation generation powered by MLLM. This tool decomposes SVG structures and generates animations based on your descriptions."
@@ -314,70 +338,85 @@ with gr.Blocks(title="SVG Animation Generator", theme=gr.themes.Soft()) as demo:
                         label="Or Paste SVG Code",
                         lines=8.4,
                     )
-        with gr.Row(scale=1):
-            with gr.Column(scale=1):
-                gr.Markdown("## 🔍 SVG Analysis")
-                object_name = gr.Textbox(
-                    label="Name Your Object",
-                    placeholder="Give a name to your SVG (e.g., 'dove', 'robot')",
-                    value="object",
-                )
-                process_btn = gr.Button("🔄 Decompose Structure", variant="primary")
-                groups_summary = gr.Textbox(
-                    label="Decomposition Results",
-                    placeholder="MLLM will analyze and decompose the SVG structure...",
-                    lines=6,
-                    interactive=False,
+                
+                # Add example dropdown
+                example_dropdown = gr.Dropdown(
+                    choices=example_choices,
+                    label="Try an Example",
+                    value=None
                 )
 
-                gr.Markdown("## 💡 Decomposed Elements")
-                groups_feedback = gr.Textbox(
-                    label="Element Structure",
-                    placeholder="If you have specific decomposition in mind, describe it here...",
-                    lines=2,
-                )
-                groups_feedback_btn = gr.Button(
-                    "💭 Get Decomposition Feedback", variant="primary"
-                )
+    # Add dropdown change event
+    example_dropdown.change(
+        fn=load_example,
+        inputs=[example_dropdown],
+        outputs=[svg_file]
+    )
 
-                gr.Markdown("## 🎯 Animation Design")
-                animation_suggestion = gr.Textbox(
-                    label="AI Suggestions",
-                    placeholder="MLLM will suggest animations based on the decomposed structure...",
-                    lines=4,
-                )
+    with gr.Row(scale=1):
+        with gr.Column(scale=1):
+            gr.Markdown("## 🔍 SVG Analysis")
+            object_name = gr.Textbox(
+                label="Name Your Object",
+                placeholder="Give a name to your SVG (e.g., 'dove', 'robot')",
+                value="object",
+            )
+            process_btn = gr.Button("🔄 Decompose Structure", variant="primary")
+            groups_summary = gr.Textbox(
+                label="Decomposition Results",
+                placeholder="MLLM will analyze and decompose the SVG structure...",
+                lines=6,
+                interactive=False,
+            )
 
-                gr.Markdown("## ✨ Create Animation")
-                gr.Markdown("💬 **What animation would you like to create?**")
-                describe_animation = gr.Textbox(
-                    label="Animation Description",
-                    placeholder="Describe your desired animation (e.g., 'gentle floating motion')",
-                    lines=2,
-                )
-                animate_btn = gr.Button("🎬 Generate Animation", variant="primary")
-
-            with gr.Column(scale=2):
-                svg_content_hidden = gr.Textbox(visible=False)
-                gr.Markdown("## 🖼️ Decomposed Structure")
-                decomposed_svg_viewer = gr.HTML(
-                    label="Decomposed SVG",
-                    value="""
+            gr.Markdown("## 💡 Decomposed Elements")
+            groups_feedback = gr.Textbox(
+                label="Element Structure",
+                placeholder="If you have specific decomposition in mind, describe it here...",
+                lines=2,
+            )
+            groups_feedback_btn = gr.Button(
+                "💭 Get Decomposition Feedback", variant="primary"
+            )
+
+            gr.Markdown("## 🎯 Animation Design")
+            animation_suggestion = gr.Textbox(
+                label="AI Suggestions",
+                placeholder="MLLM will suggest animations based on the decomposed structure...",
+                lines=4,
+            )
+
+            gr.Markdown("## ✨ Create Animation")
+            gr.Markdown("💬 **What animation would you like to create?**")
+            describe_animation = gr.Textbox(
+                label="Animation Description",
+                placeholder="Describe your desired animation (e.g., 'gentle floating motion')",
+                lines=2,
+            )
+            animate_btn = gr.Button("🎬 Generate Animation", variant="primary")
+
+        with gr.Column(scale=2):
+            svg_content_hidden = gr.Textbox(visible=False)
+            gr.Markdown("## 🖼️ Decomposed Structure")
+            decomposed_svg_viewer = gr.HTML(
+                label="Decomposed SVG",
+                value="""
     <div style='padding: 40px; text-align: center; color: #666; border: 2px dashed #ddd; border-radius: 10px;'>
         <div id='decomposed-svg-container' style='min-height: 150px; display: flex; justify-content: center; align-items: center; border-radius: 4px; padding: 10px;'>
             <div style='color: #999; text-align: center;'>Decomposed SVG structure will appear here</div>
         </div>
     </div>
     """,
-                )
-                gr.Markdown("## 🎭 Animation Preview")
-                animation_preview = gr.HTML(
-                    label="Live Preview",
-                    value="""
+            )
+            gr.Markdown("## 🎭 Animation Preview")
+            animation_preview = gr.HTML(
+                label="Live Preview",
+                value="""
     <div style='padding: 40px; text-align: center; color: #666; border: 2px dashed #ddd; border-radius: 10px;'>
     AI-powered animation generation</p>
     </div>
     """,
-                )
+            )
 
     process_btn.click(
         fn=predict_decompose_group,
@@ -409,6 +448,5 @@ with gr.Blocks(title="SVG Animation Generator", theme=gr.themes.Soft()) as demo:
         ],
         outputs=[animation_preview],
     )
-
 if __name__ == "__main__":
     demo.launch(share=True)