Refactor HTML extraction logic and update interface title for improved clarity

app.py

@@ -1,6 +1,5 @@
 import gradio as gr
 import requests
-import json
 import os
 import re
 
@@ -92,76 +91,96 @@ Framework-Specific Preservation (React/Vue/Svelte/Angular):
 
 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*(.*?)```'
+    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):
+    if re.search(r"<[^>]+>", response_text):
         # Find the first HTML tag
-        html_start = re.search(r'<', response_text)
+        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():]
-        
+        content_from_first_tag = response_text[html_start.start() :]
+
         # Split into lines and process
-        lines = content_from_first_tag.split('\n')
+        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 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:'
-                    ]):
+                    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):
+            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()
-        
+        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):
+        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']):
+            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()]
-        
+            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"""
 
@@ -179,13 +198,18 @@ def chat_with_deepseek(message, history):
 
     # 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}
+    data = {
+        "messages": messages,
+        "model": "DeepSeek-V3-0324",
+        "stream": False,
+        "temperature": 0.8,
+    }
 
     try:
         response = requests.post(url, headers=headers, json=data, timeout=30)
@@ -193,7 +217,7 @@ def chat_with_deepseek(message, history):
 
         result = response.json()
         response_content = result["choices"][0]["message"]["content"]
-        
+
         # Extract HTML from the response
         try:
             html_content = extract_html_from_response(response_content)
@@ -235,16 +259,16 @@ custom_css = """
 # Create Gradio interface
 demo = gr.ChatInterface(
     fn=chat_with_deepseek,
-    title="HTML+TailwindCSS Redesigner",
+    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.",
     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="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
+    css=custom_css,
 )
 
 if __name__ == "__main__":