Add HTML+TailwindCSS redesigner with comprehensive system prompt

- Built Gradio interface for redesigning existing HTML components
- Advanced HTML extraction logic with proper element parsing
- System prompt optimized for spacing, responsive design, and framework preservation
- Supports React/Vue/Svelte/Angular syntax preservation
- Dark mode detection and preservation when present
- Mobile-first responsive design implementation
- Color scheme and typography preservation from input
- Temperature set to 0.8 for creative design variations

app.py

@@ -0,0 +1,251 @@
+import gradio as gr
+import requests
+import json
+import os
+import re
+
+SYSTEM_PROMPT = """You are an expert UI/UX designer specializing in redesigning HTML components with TailwindCSS. Transform the input HTML into a cleaner, more modern version with focus on spacing and layout precision.
+
+Core Design Philosophy:
+- SPACING FIRST: Prioritize proper spacing over complex styling
+- PRESERVE EXISTING: Maintain the original color scheme and fonts when they exist
+- SIMPLE & CLEAN: Focus on clean, minimal designs rather than overly decorative ones
+- FLEXIBLE LAYOUTS: Use flexbox with proper flex properties for better control
+
+Spacing & Layout Rules:
+- Use consistent spacing scales: p-4, p-6, p-8 for padding; m-4, m-6, m-8 for margins
+- Apply gap-4, gap-6, or gap-8 for flex/grid container spacing
+- Use space-y-4, space-y-6 for vertical stacking
+- Add flex-none to elements that should NOT stretch (buttons, labels, icons, fixed-width items)
+- Use flex-1 or flex-auto only for elements that should grow/stretch
+- Prefer specific widths (w-32, w-48, w-64) over arbitrary values
+
+Color & Typography Preservation:
+- ANALYZE the input HTML for existing color schemes (bg-*, text-*, border-*)
+- 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
+- Only introduce new colors if the original has none or uses basic colors
+
+Dark Mode Support:
+- DETECT dark mode classes in input (dark:*, bg-gray-900, text-white, etc.)
+- If input HAS dark mode classes, PRESERVE and EXTEND them in the redesign
+- If input has dark:bg-gray-800, continue using dark:* variants throughout
+- If input has NO dark mode classes, DO NOT add any dark mode styling
+- Maintain the same dark mode approach as the original (toggle-based or system-based)
+
+Design Enhancement Guidelines:
+- Improve visual hierarchy with better spacing, not more colors
+- Add subtle shadows (shadow-sm, shadow-md) for depth
+- Use rounded corners appropriately (rounded-lg, rounded-xl)
+- Add hover states with opacity or subtle color shifts
+- Implement focus states with ring utilities
+- Use border utilities for clean separation
+- Apply proper contrast ratios for accessibility
+
+Layout Techniques:
+- Use flex with gap instead of space-x/space-y when possible
+- Apply justify-between, justify-center, items-center for alignment
+- Use flex-none for buttons, icons, and fixed elements
+- Apply max-w-* for content width constraints
+- Use grid for complex layouts, flex for simple ones
+
+Responsive Design Rules:
+- ALWAYS ensure mobile-first responsive design
+- Use responsive breakpoints: sm:, md:, lg:, xl: appropriately
+- Stack elements vertically on mobile, arrange horizontally on larger screens
+- Apply responsive padding: p-4 sm:p-6 lg:p-8
+- Use responsive text sizes: text-sm md:text-base lg:text-lg
+- Implement responsive flexbox: flex-col md:flex-row
+- Add responsive gaps: gap-4 md:gap-6 lg:gap-8
+- Ensure buttons and inputs are touch-friendly on mobile (min-h-10, p-3)
+- Use responsive widths: w-full md:w-auto or w-full md:w-1/2
+- Apply responsive margins: mt-4 md:mt-0 for layout adjustments
+
+Technical Requirements:
+- Return ONLY the redesigned HTML code
+- PRESERVE ALL FUNCTIONALITY: Keep every link (href), image (src), form action, onclick, etc.
+- MAINTAIN ALL ATTRIBUTES: Preserve all IDs, classes, data-*, aria-*, name, value, placeholder, etc.
+- KEEP ALL CONTENT: Preserve all text content, alt texts, button labels exactly as provided
+- DO NOT REMOVE: Never remove links, images, inputs, buttons, or any functional elements
+- DO NOT CHANGE: Keep all URLs, image sources, form targets, and JavaScript references unchanged
+- ENHANCE ONLY STYLING: Only modify TailwindCSS classes for visual improvements
+- PRESERVE STRUCTURE: Maintain the same HTML element hierarchy and nesting
+
+Critical Preservation Rules:
+- If input has <a href="...">Link</a>, output must have identical href and link text
+- If input has <img src="..." alt="...">, output must preserve exact src and alt
+- If input has form inputs with name/value/placeholder, keep them exactly the same
+- 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
+
+Framework-Specific Preservation (React/Vue/Svelte/Angular):
+- REACT: Preserve all JSX syntax: {variable}, {function()}, className, onClick, onChange, etc.
+- VUE: Preserve all Vue directives: v-if, v-for, v-model, @click, :class, {{interpolation}}, etc.
+- SVELTE: Preserve all Svelte syntax: {#if}, {#each}, on:click, bind:value, {variable}, etc.
+- ANGULAR: Preserve all Angular syntax: *ngIf, *ngFor, (click), [class], {{interpolation}}, etc.
+- ALPINE.JS: Preserve all Alpine directives: x-data, x-show, x-if, @click, :class, etc.
+- HTMX: Preserve all HTMX attributes: hx-get, hx-post, hx-target, hx-swap, etc.
+- Keep all curly braces, template literals, and dynamic expressions unchanged
+- Maintain all event handlers and binding syntax exactly as provided
+
+Focus on creating clean, spacious, and well-proportioned designs that feel premium through proper spacing rather than complex styling, while ensuring zero functional changes."""
+
+def extract_html_from_response(response_text):
+    """Extract HTML code from model response"""
+    
+    # First, try to find HTML within code blocks
+    html_pattern = r'```(?:html)?\s*(.*?)```'
+    matches = re.findall(html_pattern, response_text, re.DOTALL | re.IGNORECASE)
+    
+    if matches:
+        return matches[0].strip()
+    
+    # If no code blocks, look for HTML tags in the response
+    if re.search(r'<[^>]+>', response_text):
+        # Find the first HTML tag
+        html_start = re.search(r'<', response_text)
+        if not html_start:
+            raise ValueError("No HTML content found in the response")
+        
+        # Start from the first HTML tag
+        content_from_first_tag = response_text[html_start.start():]
+        
+        # Split into lines and process
+        lines = content_from_first_tag.split('\n')
+        html_lines = []
+        
+        for line in lines:
+            line_stripped = line.strip()
+            
+            # Skip empty lines at the beginning
+            if not line_stripped and not html_lines:
+                continue
+            
+            # Stop if we hit obvious explanation text after we have HTML
+            if html_lines and line_stripped:
+                # Check if this line looks like explanation rather than HTML
+                if not re.search(r'<[^>]*>', line_stripped):
+                    # If it's a long explanatory sentence, stop here
+                    if len(line_stripped) > 80 or any(phrase in line_stripped.lower() for phrase in [
+                        'this creates', 'this provides', 'the form', 'this design', 'here\'s', 'this code',
+                        'explanation:', 'note:', 'features:', 'improvements:'
+                    ]):
+                        break
+            
+            html_lines.append(line.rstrip())
+            
+            # If we have HTML and hit a line that ends with a period and looks like explanation, stop
+            if html_lines and line_stripped.endswith('.') and len(line_stripped) > 40:
+                if not re.search(r'<[^>]*>', line_stripped):
+                    html_lines.pop()  # Remove the explanatory line
+                    break
+        
+        # Join and clean up
+        html_content = '\n'.join(html_lines).strip()
+        
+        # Remove any trailing text after the last complete HTML tag
+        # Find the last complete tag (either closing tag or self-closing)
+        last_complete_tag = None
+        for match in re.finditer(r'<[^>]+>', html_content):
+            tag = match.group()
+            if tag.startswith('</') or tag.endswith('/>') or any(void in tag.lower() for void in ['<input', '<img', '<br', '<hr', '<meta', '<link']):
+                last_complete_tag = match
+        
+        if last_complete_tag:
+            # Keep everything up to and including the last complete tag
+            html_content = html_content[:last_complete_tag.end()]
+        
+        return html_content
+    
+    # If no HTML found, return error
+    raise ValueError("No HTML content found in the response")
+
+def chat_with_deepseek(message, history):
+    """Send message to DeepSeek-V3 model via HuggingFace router"""
+
+    # Check if HF_TOKEN is set
+    hf_token = os.getenv("HF_TOKEN")
+    if not hf_token:
+        return "Error: HF_TOKEN environment variable not set. Please set your HuggingFace token."
+
+    # Prepare the API request
+    url = "https://router.huggingface.co/sambanova/v1/chat/completions"
+    headers = {
+        "Authorization": f"Bearer {hf_token}",
+        "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})
+
+    data = {"messages": messages, "model": "DeepSeek-V3-0324", "stream": False, "temperature": 0.8}
+
+    try:
+        response = requests.post(url, headers=headers, json=data, timeout=30)
+        response.raise_for_status()
+
+        result = response.json()
+        response_content = result["choices"][0]["message"]["content"]
+        
+        # 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```"
+        except ValueError as e:
+            return f"Error: {str(e)}. Response was: {response_content[:200]}..."
+
+    except requests.exceptions.RequestException as e:
+        return f"Error: Failed to connect to API - {str(e)}"
+    except KeyError as e:
+        return f"Error: Unexpected API response format - {str(e)}"
+    except Exception as e:
+        return f"Error: {str(e)}"
+
+
+# Custom CSS for better HTML code display
+custom_css = """
+<style>
+/* Better formatting for HTML code display */
+.message-wrap .prose {
+    max-width: none !important;
+}
+.message-wrap pre {
+    white-space: pre-wrap !important;
+    word-break: break-all !important;
+    background: #1e1e1e !important;
+    color: #d4d4d4 !important;
+    padding: 16px !important;
+    border-radius: 8px !important;
+    border: 1px solid #333 !important;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
+    font-size: 14px !important;
+    line-height: 1.5 !important;
+}
+</style>
+"""
+
+# Create Gradio interface
+demo = gr.ChatInterface(
+    fn=chat_with_deepseek,
+    title="HTML+TailwindCSS Redesigner",
+    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.",
+    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>'
+    ],
+    css=custom_css
+)
+
+if __name__ == "__main__":
+    demo.launch()