Update app.py

app.py

@@ -26,7 +26,41 @@ def interface():
                 error_output = gr.Textbox(label="Error", interactive=False)
         
         code_input.change(fn=update_ui, inputs=code_input, outputs=[ui_preview, error_output])
-    
+        with gr.Accordion("HTML/CSS Code Examples", open=False):
+            with gr.Column():
+                example_buttons = []
+                example_codes = [
+                    ('<h1>Hello World</h1>', "Basic Heading"),
+                    ('<p style="color: red;">This is a paragraph.</p>', "Styled Paragraph"),
+                    ('<button onclick="alert(\'Button clicked!\')">Click me</button>', "Interactive Button"),
+                    ("""
+                    <style>
+                    .box {
+                        width: 100px;
+                        height: 100px;
+                        background-color: blue;
+                    }
+                    </style>
+                    <div class="box"></div>
+                    """, "CSS Box"),
+                    ("""
+                    <style>
+                    .container {
+                        display: flex;
+                        justify-content: space-between;
+                    }
+                    </style>
+                    <div class="container">
+                        <div style="background-color: red; width: 50px; height: 50px;"></div>
+                        <div style="background-color: green; width: 50px; height: 50px;"></div>
+                    </div>
+                    """, "Flexbox Layout"),
+                ]
+
+                for code, label in example_codes:
+                    button = gr.Button(label)
+                    example_buttons.append(button)
+                    button.click(fn=lambda x=code: x, outputs=code_input)
     return demo
 
 if __name__ == "__main__":