Add HTML redesign functionality with TailwindCSS support and update Gradio interface

app.py

@@ -110,9 +110,34 @@ def extract_html_from_response(response_text):
     raise ValueError("No HTML content found in the response")
 
 
-def chat_with_deepseek(message, history):
-    """Send message to DeepSeek-V3 model via HuggingFace router"""
-
+def redesign_html(html_input: str) -> str:
+    """
+    Redesign HTML+TailwindCSS code with improved spacing, responsive design, and modern aesthetics.
+    
+    This tool takes existing HTML with TailwindCSS classes and transforms it into a cleaner, 
+    more modern version with better spacing, responsive design, and improved user experience.
+    
+    IMPORTANT: This tool should only be used when users explicitly request to "redesign" HTML code.
+    Users must say "redesign" or similar intent for this tool to be activated.
+    
+    Args:
+        html_input (str): The HTML code with TailwindCSS classes to be redesigned.
+                         Can include React/Vue/Svelte/Angular syntax which will be preserved.
+    
+    Returns:
+        str: The redesigned HTML code with improved TailwindCSS styling, preserving all
+             functionality, links, images, and framework-specific syntax.
+    
+    Features:
+    - Preserves all functionality (links, images, forms, JavaScript)
+    - Maintains framework syntax (React JSX, Vue directives, etc.)
+    - Improves spacing and responsive design
+    - Preserves existing color schemes and fonts
+    - Adds proper flex-none for non-stretching elements
+    - Ensures mobile-first responsive design
+    - Supports dark mode when present in input
+    """
+    
     # Check if HF_TOKEN is set
     hf_token = os.getenv("HF_TOKEN")
     if not hf_token:
@@ -125,13 +150,11 @@ def chat_with_deepseek(message, history):
         "Content-Type": "application/json",
     }
 
-    # Build conversation history for the API with system prompt
-    messages = [{"role": "system", "content": SYSTEM_PROMPT}]
-
-    for human, assistant in history:
-        messages.append({"role": "user", "content": human})
-        messages.append({"role": "assistant", "content": assistant})
-    messages.append({"role": "user", "content": message})
+    # Build messages with system prompt
+    messages = [
+        {"role": "system", "content": SYSTEM_PROMPT},
+        {"role": "user", "content": html_input}
+    ]
 
     data = {
         "messages": messages,
@@ -150,8 +173,7 @@ def chat_with_deepseek(message, history):
         # Extract HTML from the response
         try:
             html_content = extract_html_from_response(response_content)
-            # Wrap in code blocks to prevent HTML rendering
-            return f"```html\n{html_content}\n```"
+            return html_content
         except ValueError as e:
             return f"Error: {str(e)}. Response was: {response_content[:200]}..."
 
@@ -186,19 +208,40 @@ custom_css = """
 """
 
 # Create Gradio interface
-demo = gr.ChatInterface(
-    fn=chat_with_deepseek,
-    title="Redesigner - Improve your UI design",
-    description="Paste your existing HTML+TailwindCSS code and get a beautifully redesigned version with modern aesthetics and improved UX. The output will be pure HTML code with enhanced TailwindCSS styling.",
+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>'
+    ),
+    outputs=gr.Code(language="html", label="Redesigned HTML"),
+    title="HTML+TailwindCSS Redesigner (MCP Server)",
+    description="""
+    **MCP Server Tool for HTML Redesigning**
+    
+    This is an MCP (Model Context Protocol) server that provides HTML redesign capabilities to LLMs.
+    
+    **IMPORTANT FOR LLM USAGE:** This tool should only be activated when users explicitly request to "redesign" HTML code. 
+    Users must use the word "redesign" or similar intent (e.g., "improve the design", "make it look better") for this tool to be used.
+    
+    **Features:**
+    - Improves HTML+TailwindCSS with better spacing and responsive design
+    - Preserves all functionality (links, images, forms, JavaScript)
+    - Maintains framework syntax (React, Vue, Svelte, Angular)
+    - Supports dark mode when present in input
+    - Mobile-first responsive design implementation
+    
+    **Usage:** LLMs can use this tool when users ask to redesign HTML code by providing the HTML as input.
+    """,
     examples=[
-        '<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>',
-        '<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>',
-        '<div class="text-center p-8"><h1 class="text-3xl mb-4">Hero Title</h1><p class="mb-6">Some description text here</p><button class="bg-red-500 text-white px-6 py-3">Get Started</button></div>',
-        '<div class="border p-6 max-w-sm"><h3 class="text-lg font-semibold mb-2">Basic Plan</h3><p class="text-2xl font-bold mb-4">$9/month</p><ul class="space-y-2 mb-6"><li>Feature 1</li><li>Feature 2</li></ul><button class="w-full bg-blue-500 text-white py-2">Choose Plan</button></div>',
+        ['<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>'],
+        ['<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>'],
     ],
     css=custom_css,
 )
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(mcp_server=True)