feat: prompt grouping

app.py

@@ -527,6 +527,51 @@ css = """
   box-sizing: border-box;
   scroll-behavior: smooth;
 }
+
+/* Example card styles */
+.example-card {
+  flex: 1 1 300px;
+  max-width: 400px;
+  margin: 8px;
+  transition: all 0.3s;
+  cursor: pointer;
+  border: 1px solid #e8e8e8;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.example-card:hover {
+  transform: translateY(-4px);
+  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
+  border-color: #d9d9d9;
+}
+
+.example-card .ant-card-meta-title {
+  font-size: 16px;
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #262626;
+}
+
+.example-card .ant-card-meta-description {
+  color: #666;
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* Example tabs styles */
+.example-tabs .ant-tabs-nav {
+  margin-bottom: 16px;
+}
+
+.example-tabs .ant-tabs-tab {
+  padding: 8px 16px;
+  font-size: 15px;
+}
+
+.example-tabs .ant-tabs-tab-active {
+  font-weight: 500;
+}
 """
 
 def scroll_to_bottom():
@@ -624,21 +669,25 @@ with gr.Blocks(css=css) as demo, ms.Application(), antdx.XProvider():
                         
                         antd.Divider("Examples")
 
-                        # Examples
-                        with antd.Flex(gap="small", wrap=True):
-                            for example in EXAMPLES:
-                                with antd.Card(
-                                        elem_style=dict(
-                                            flex="1 1 fit-content"),
-                                        hoverable=True) as example_card:
-                                    antd.Card.Meta(
-                                        title=example['title'],
-                                        description=example['description'])
-
-                                example_card.click(
-                                    fn=select_example(
-                                        example),
-                                    outputs=[code_input])
+                        # Examples with categories
+                        with antd.Tabs(elem_classes="example-tabs") as example_tabs:
+                            for category, examples in EXAMPLES.items():
+                                with antd.Tabs.Item(key=category, label=category):
+                                    with antd.Flex(gap="small", wrap=True):
+                                        for example in examples:
+                                            with antd.Card(
+                                                elem_classes="example-card",
+                                                hoverable=True
+                                            ) as example_card:
+                                                antd.Card.Meta(
+                                                    title=example['title'],
+                                                    description=example['description']
+                                                )
+
+                                            example_card.click(
+                                                fn=select_example(example),
+                                                outputs=[code_input]
+                                            )
                 
                 with antd.Col(span=12):
                     with ms.Div(elem_classes="right_panel"):

config.py

@@ -44,53 +44,61 @@ All code is written in a single code block to form a complete code file for disp
 Output only the HTML, without any additional descriptive text. Make the UI looks modern and beautiful.
 """
 
-EXAMPLES = [
-    {
-        "title": "📋 TODO list",
-        "description": "Create a modern, interactive to-do list web app. It should allow users to add and remove items. Use beautiful styling and animations."
-    },
-    {
-        "title": "⚡ SVG Loading Animation",
-        "description": "Design an SVG dynamic loading animation with abstract style (e.g., rotating spinner, pulse dots) for web page loading status indication"
-    },
-    {
-        "title": "✨ Particle Background",
-        "description": "Create an HTML page with a canvas-based animated particle background. The particles should move smoothly and connect when close. Add a central heading text over the canvas"
-    },
-    {
-        "title": "🌈 Colorful Gradient Background",
-        "description": "Create an HTML page with a gradient background that transitions smoothly between multiple colors. Add a central heading text over the gradient"
-    },
-    {
-        "title": "📝 Sticky Note Wall",
-        "description": "Create a sticky note wall where users can create, edit, drag, and delete colorful sticky notes. Make it visually appealing"
-    },
-    {
-        "title": "⌨️ Typing Speed Game",
-        "description": "Build a typing speed test web app. Randomly show a sentence, and track the user's typing speed in WPM (words per minute). Provide live feedback with colors and accuracy. Make it visually appealing."
-    },
-    {
-        "title": "📝 Markdown Editor with Preview",
-        "description": "Develop a modern markdown editor with real-time preview. Use a split pane layout for input and output, support bold, italics, headers, lists, links, images, etc. No external libraries."
-    },
-    {
-        "title": "🖼️ Image Filter Tool",
-        "description": "Create an image filter tool where users can upload an image and apply filters like grayscale, blur, brightness, contrast, etc. Show real-time preview."
-    },
-    {
-        "title": "🧩 Maze Generator and Pathfinding Visualizer",
-        "description": "Create a maze generator and pathfinding visualizer. Randomly generate a maze and visualize A* algorithm solving it step by step. Use canvas and animations. Make it visually appealing."
-    },
-    {
-        "title": "💰 Personal Finance Tracker",
-        "description": "Create a personal finance tracker with user input, and visualize income and expenses using animated pie and bar charts. Use modern, responsive design in a single HTML file."
-    },
-    {
-        "title": "🔄 3D Flipping Card",
-        "description": "Create a 3D flipping card component that flips on hover. Include front and back content. Use only HTML and CSS (no JS). Make the flip smooth and realistic."
-    },
-    {
-        "title": "💥 Particle Explosion Effect",
-        "description": "Implement a particle explosion effect when the user clicks anywhere on the page. Use canvas and JavaScript to animate colorful particles that fade out."
-    },
-]
+EXAMPLES = {
+    "UI Components": [
+        {
+            "title": "🔄 3D Flipping Card",
+            "description": "Create a 3D flipping card component that flips on hover. Include front and back content. Use only HTML and CSS (no JS). Make the flip smooth and realistic."
+        },
+        {
+            "title": "⚡ SVG Loading Animation",
+            "description": "Design an SVG dynamic loading animation with abstract style (e.g., rotating spinner, pulse dots) for web page loading status indication"
+        },
+        {
+            "title": "✨ Particle Background",
+            "description": "Create an HTML page with a canvas-based animated particle background. The particles should move smoothly and connect when close. Add a central heading text over the canvas"
+        },
+        {
+            "title": "🌈 Colorful Gradient Background",
+            "description": "Create an HTML page with a gradient background that transitions smoothly between multiple colors. Add a central heading text over the gradient"
+        }
+    ],
+    "Interactive Apps": [
+        {
+            "title": "📋 TODO list",
+            "description": "Create a modern, interactive to-do list web app. It should allow users to add and remove items. Use beautiful styling and animations."
+        },
+        {
+            "title": "📝 Sticky Note Wall",
+            "description": "Create a sticky note wall where users can create, edit, drag, and delete colorful sticky notes. Make it visually appealing"
+        },
+        {
+            "title": "⌨️ Typing Speed Game",
+            "description": "Build a typing speed test web app. Randomly show a sentence, and track the user's typing speed in WPM (words per minute). Provide live feedback with colors and accuracy. Make it visually appealing."
+        },
+        {
+            "title": "💰 Personal Finance Tracker",
+            "description": "Create a personal finance tracker with user input, and visualize income and expenses using animated pie and bar charts. Use modern, responsive design in a single HTML file."
+        }
+    ],
+    "Tools & Editors": [
+        {
+            "title": "📝 Markdown Editor with Preview",
+            "description": "Develop a modern markdown editor with real-time preview. Use a split pane layout for input and output, support bold, italics, headers, lists, links, images, etc. No external libraries."
+        },
+        {
+            "title": "🖼️ Image Filter Tool",
+            "description": "Create an image filter tool where users can upload an image and apply filters like grayscale, blur, brightness, contrast, etc. Show real-time preview."
+        }
+    ],
+    "Games & Visualizations": [
+        {
+            "title": "🧩 Maze Generator and Pathfinding Visualizer",
+            "description": "Create a maze generator and pathfinding visualizer. Randomly generate a maze and visualize A* algorithm solving it step by step. Use canvas and animations. Make it visually appealing."
+        },
+        {
+            "title": "💥 Particle Explosion Effect",
+            "description": "Implement a particle explosion effect when the user clicks anywhere on the page. Use canvas and JavaScript to animate colorful particles that fade out."
+        }
+    ]
+}