feat: improve layout and organization of example selection

app.py

@@ -304,13 +304,14 @@ 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"]
+        [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():
@@ -319,8 +320,11 @@ def load_example(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]
+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:
@@ -338,85 +342,84 @@ with demo:
                         label="Or Paste SVG Code",
                         lines=8.4,
                     )
-                
+
                 # Add example dropdown
                 example_dropdown = gr.Dropdown(
-                    choices=example_choices,
-                    label="Try an Example",
-                    value=None
+                    choices=example_choices, label="Try an Example", value=None
                 )
 
     # Add dropdown change event
     example_dropdown.change(
-        fn=load_example,
-        inputs=[example_dropdown],
-        outputs=[svg_file]
+        fn=load_example, inputs=[example_dropdown], outputs=[svg_file]
     )
 
-    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("## 💡 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,
-            )
+    with gr.Column(scale=1):
+        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,
+                )
+            with gr.Column(scale=1):
+                gr.Markdown("## 🎯 Animation Design")
+                animation_suggestion = gr.Textbox(
+                    label="AI Suggestions",
+                    placeholder="MLLM will suggest animations based on the decomposed structure...",
+                    lines=14.5,
+                )
+        with gr.Row(scale=1):
+            with gr.Column(scale=1):
+                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(
+                    "💭 Apply Decomposition Feedback", variant="primary"
+                )
+            with gr.Column(scale=1):
+                gr.Markdown("## ✨ Create Animation")
+                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")
 
-            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>
+        with gr.Row(scale=3):
+            with gr.Column(scale=1):
+                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>
-    </div>
-    """,
-            )
-            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>
-    """,
-            )
+        """,
+                )
+            with gr.Column(scale=1):
+                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,