Enforce mandatory text-balance class for all titles and headings; enhance redesign function to accept custom user instructions

app.py

@@ -24,7 +24,7 @@ Color & Typography Preservation:
 - REUSE those exact color classes in the redesigned version
 - If input uses blue-500, continue using blue-* variants throughout
 - If input has specific font classes (font-medium, text-lg), maintain that typography scale
-- Use text-balance class on titles and headings for better text wrapping and visual balance
+- MANDATORY: ALWAYS add text-balance class to ALL titles and headings (h1, h2, h3, h4, h5, h6, and any element with large text like text-xl, text-2xl, etc.) for better text wrapping and visual balance
 - Only introduce new colors if the original has none or uses basic colors
 
 Dark Mode Support:
@@ -79,6 +79,7 @@ Critical Preservation Rules:
 - If input has buttons with onclick or type attributes, preserve them completely
 - If input has any data attributes (data-*), maintain them unchanged
 - All original text content must remain identical
+- MANDATORY TEXT-BALANCE RULE: Every heading (h1-h6) and large text element (text-xl, text-2xl, text-3xl, etc.) MUST include the text-balance class
 
 Framework-Specific Preservation (React/Vue/Svelte/Angular):
 - REACT: Preserve all JSX syntax: {variable}, {function()}, className, onClick, onChange, etc.
@@ -111,7 +112,7 @@ def extract_html_from_response(response_text):
     raise ValueError("No HTML content found in the response")
 
 
-def redesign_html(html_input: str) -> str:
+def redesign_html(html_input: str, user_prompt: str = "") -> str:
     """
     Redesign HTML+TailwindCSS code with improved spacing, responsive design, and modern aesthetics.
 
@@ -124,6 +125,10 @@ def redesign_html(html_input: str) -> str:
     Args:
         html_input (str): The HTML code with TailwindCSS classes to be redesigned.
                          Can include React/Vue/Svelte/Angular syntax which will be preserved.
+        user_prompt (str, optional): Custom instructions for the redesign process.
+                                   Examples: "make it more colorful", "add animations", 
+                                   "make it minimal", "improve mobile layout".
+                                   If empty, uses default redesign approach.
 
     Returns:
         str: The redesigned HTML code with improved TailwindCSS styling, preserving all
@@ -137,6 +142,7 @@ def redesign_html(html_input: str) -> str:
     - Adds proper flex-none for non-stretching elements
     - Ensures mobile-first responsive design
     - Supports dark mode when present in input
+    - Accepts custom user instructions for targeted redesign approaches
     """
 
     # Check if HF_TOKEN is set
@@ -151,10 +157,14 @@ def redesign_html(html_input: str) -> str:
         "Content-Type": "application/json",
     }
 
-    # Build messages with system prompt
+    # Build messages with system prompt and user prompt
+    user_content = html_input
+    if user_prompt.strip():
+        user_content = f"User instructions: {user_prompt.strip()}\n\nHTML to redesign:\n{html_input}"
+    
     messages = [
         {"role": "system", "content": SYSTEM_PROMPT},
-        {"role": "user", "content": html_input},
+        {"role": "user", "content": user_content},
     ]
 
     data = {
@@ -211,12 +221,20 @@ custom_css = """
 # Create Gradio interface
 demo = gr.Interface(
     fn=redesign_html,
-    inputs=gr.Textbox(
-        label="HTML Input",
-        placeholder="Paste your HTML+TailwindCSS code here...",
-        lines=10,
-        value='<div class="p-4 border"><h1 class="text-xl">Welcome</h1><p>This is a basic card</p><button class="bg-blue-500 text-white px-4 py-2">Click me</button></div>',
-    ),
+    inputs=[
+        gr.Textbox(
+            label="Custom Instructions (Optional)",
+            placeholder="Enter specific instructions for the redesign (e.g., 'make it more colorful', 'add animations', 'make it minimal')...",
+            lines=2,
+            value="",
+        ),
+        gr.Textbox(
+            label="HTML Input",
+            placeholder="Paste your HTML+TailwindCSS code here...",
+            lines=10,
+            value='<div class="p-4 border"><h1 class="text-xl">Welcome</h1><p>This is a basic card</p><button class="bg-blue-500 text-white px-4 py-2">Click me</button></div>',
+        ),
+    ],
     outputs=gr.Code(language="html", label="Redesigned HTML"),
     title="Redesigner (MCP Server)",
     description="""
@@ -238,12 +256,15 @@ demo = gr.Interface(
     """,
     examples=[
         [
+            "Make it more modern and colorful",
             '<div class="p-4 border"><h1 class="text-xl">Welcome</h1><p>This is a basic card</p><button class="bg-blue-500 text-white px-4 py-2">Click me</button></div>'
         ],
         [
+            "Add subtle animations and improve spacing",
             '<form class="space-y-4"><input type="email" placeholder="Email" class="border p-2 w-full"><input type="password" placeholder="Password" class="border p-2 w-full"><button type="submit" class="bg-green-500 text-white p-2">Login</button></form>'
         ],
         [
+            "",
             '<nav class="flex justify-between p-4 bg-gray-100"><div class="font-bold">Logo</div><ul class="flex space-x-4"><li><a href="#" class="text-blue-500">Home</a></li><li><a href="#" class="text-blue-500">About</a></li></ul></nav>'
         ],
     ],