Update app.py

app.py

@@ -55,7 +55,7 @@ def demo_card_click(evt: gr.EventData):
 with gr.Blocks(
     theme=gr.themes.Base(
         primary_hue="blue",
-        secondary_hue="blue",
+        secondary_hue="sky",  # Changed secondary hue for a more modern palette
         neutral_hue="gray",
         font=gr.themes.GoogleFont("Inter"),
         font_mono=gr.themes.GoogleFont("JetBrains Mono"),
@@ -75,7 +75,7 @@ with gr.Blocks(
     open_panel = gr.State(None)
     last_login_state = gr.State(None)
 
-    with gr.Row():
+    with gr.Row(equal_height=False):  # Ensure columns can have different heights
         with gr.Column(scale=1):
             gr.Markdown("## Controls", elem_classes=["col-header"])
             input = gr.Textbox(
@@ -106,7 +106,7 @@ with gr.Blocks(
                 label="UI design image",
                 visible=False  # Hidden by default; shown only for ERNIE-VL or GLM-VL
             )
-            with gr.Row():
+            with gr.Row(equal_height=True):  #Keep buttons vertically aligned
                 btn = gr.Button("Generate", variant="primary", size="lg", scale=2, interactive=False)
                 clear_btn = gr.Button("Clear", variant="secondary", size="sm", scale=1)
             
@@ -130,12 +130,13 @@ with gr.Blocks(
             )
             
             with gr.Accordion("Advanced Settings", open=False):
-                systemPromptInput = gr.Textbox(
+                system_prompt_input = gr.Textbox(
                     value=HTML_SYSTEM_PROMPT,
                     label="System Prompt",
                     lines=5
                 )
-                save_prompt_btn = gr.Button("Save Prompt", variant="secondary", size="sm")
+                save_prompt_btn = gr.Button("Save Prompt", variant="secondary", size="sm", min_width=100)
+
         
         with gr.Column(scale=3):
             model_display = gr.Markdown(f"**Model:** {AVAILABLE_MODELS[0]['name']}", visible=True)
@@ -145,13 +146,13 @@ with gr.Blocks(
                         language="html", 
                         lines=28, 
                         interactive=False,
-                        label="Generated Code"
+                        label="Generated Code",
                     )
                 with gr.Tab("Preview"):
                     sandbox = gr.HTML(label="Live Preview")
                 with gr.Tab("History"):
                     history_output = gr.Chatbot(show_label=False, height=600, type="messages")
-
+    
     # --- Event Handlers ---
     def on_model_change(model_name):
         for m in AVAILABLE_MODELS:
@@ -187,7 +188,7 @@ with gr.Blocks(
         inputs=model_dropdown,
         outputs=[current_model, model_display, image_input]
     )
-    save_prompt_btn.click(save_prompt, inputs=systemPromptInput, outputs=setting)
+    save_prompt_btn.click(save_prompt, inputs=system_prompt_input, outputs=setting)
     # Update preview when code or language changes
     language_dropdown.change(update_code_language, inputs=language_dropdown, outputs=code_output)
     code_output.change(preview_logic, inputs=[code_output, language_dropdown], outputs=sandbox)