Spaces:

Keyurjotaniya007
/

gemini-html-css-chatbot

Running

App Files Files Community

Keyurjotaniya007 commited on Jul 26

Commit

b4cb782

verified ·

1 Parent(s): 7f101d9

Update chatbot.py

Browse files

Files changed (1) hide show

chatbot.py +123 -92

chatbot.py CHANGED Viewed

@@ -1,102 +1,136 @@
 import time
 import base64
 import io
-import cssutils
 from PIL import Image
 from bs4 import BeautifulSoup
 from langchain_google_genai import ChatGoogleGenerativeAI
 from langchain_core.messages import HumanMessage
-def resize_and_encode_image(image_file, max_size=(400, 400)):
     img = Image.open(image_file)
-    img.thumbnail(max_size)
     buffered = io.BytesIO()
-    img.save(buffered, format="JPEG")
     image_bytes = buffered.getvalue()
     base64_str = base64.b64encode(image_bytes).decode("utf-8")
-    return f"data:image/jpeg;base64,{base64_str}"
 def beautify_html(html_code):
     soup = BeautifulSoup(html_code, "html.parser")
     return soup.prettify()
-def apply_css_rules(soup, css_code):
-    sheet = cssutils.parseString(css_code)
-    for rule in sheet:
-        if rule.type == rule.STYLE_RULE:
-            selector = rule.selectorText.strip()
-            styles = rule.style.cssText
-            if selector.startswith('.'):
-                class_name = selector[1:]
-                elements = soup.find_all(class_=class_name)
-                for el in elements:
-                    if 'display: none' in styles:
-                        el.decompose()
-                    else:
-                        el['style'] = styles
-            elif selector.startswith('#'):
-                id_name = selector[1:]
-                el = soup.find(id=id_name)
-                if el:
-                    if 'display: none' in styles:
-                        el.decompose()
-                    else:
-                        el['style'] = styles
-    return soup
 def generate_html_css_from_image(image_file):
     image_data_url = resize_and_encode_image(image_file)
     prompt_text = """
-You are an expert front-end developer.
-The input is a screenshot of a website UI. Carefully analyze its layout and generate accurate, semantic, and maintainable HTML and CSS.
-[TRUNCATED for brevity in this view — keep full original prompt_text block unchanged]
-Follow these professional guidelines:
-1) Structure & Semantics:
-- Use HTML5 semantic tags that match the visual hierarchy (e.g., <header>, <nav>, <main>, <section>, <article>, <aside>, <footer>)
-- Reflect layout grouping using appropriate containers and divs where needed
-2) Layout & Responsiveness:
-- Use Flexbox or CSS Grid for layout
-- Include responsive breakpoints (mobile-first) with at least one media query
-- Ensure layout adapts well to mobile screen sizes
-3) CSS Practices:
-- Keep CSS in a <style> block or separate file (no inline styles)
-- Use class names that follow a clean naming convention (e.g., BEM or descriptive naming)
-- Group CSS rules logically (layout, typography, components)
-4) Accessibility & UX:
-- Add accessible markup: alt text, ARIA roles, labels
-- Ensure good contrast and keyboard navigability
-5) Content & Comments:
-- Use meaningful placeholder text (not lorem ipsum)
-- Add short code comments to explain each major section
-6) Output:
-- The output should be a complete single HTML file with embedded CSS
-- Preserve the visual structure and content flow of the original screenshot as closely as possible
-- Do not skip or summarize any sections
-Assume this is for real production-ready front-end code generation from a web UI screenshot.
 """
     prompt = [
         HumanMessage(
             content=[
                 {"type": "text", "text": prompt_text},
-                {"type": "image_url", "image_url": {"url": image_data_url, "mime_type": "image/jpeg"}}
             ]
         )
     ]
     llm = ChatGoogleGenerativeAI(model="gemini-2.5-flash", temperature=0)
-    max_retries = 3
     generated_code = None
     for attempt in range(max_retries):
@@ -112,35 +146,32 @@ Assume this is for real production-ready front-end code generation from a web UI
                     .strip()
                 )
-            break
-        except Exception as e:
-            if "ResourceExhausted" in str(e) or "429" in str(e):
                 time.sleep(30 * (attempt + 1))
             else:
-                raise e
     if generated_code:
-        soup = BeautifulSoup(generated_code, "html.parser")
-        style_tag = soup.find("style")
-        css_code = style_tag.string if style_tag else ""
-        html_without_style = str(soup).replace(str(style_tag), "") if style_tag else str(soup)
-        soup = apply_css_rules(BeautifulSoup(html_without_style, "html.parser"), css_code)
-        cleaned_html = beautify_html(str(soup))
-        final_output = f"""<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="UTF-8">
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<style>
-{css_code}
-</style>
-</head>
-<body>
-{cleaned_html}
-</body>
-</html>"""
         return final_output
     else:

 import time
 import base64
 import io
 from PIL import Image
 from bs4 import BeautifulSoup
 from langchain_google_genai import ChatGoogleGenerativeAI
 from langchain_core.messages import HumanMessage
+def resize_and_encode_image(image_file, max_size=(768, 768)):
     img = Image.open(image_file)
+    img.thumbnail(max_size, Image.Resampling.LANCZOS)
     buffered = io.BytesIO()
+    img.save(buffered, format="PNG")
     image_bytes = buffered.getvalue()
     base64_str = base64.b64encode(image_bytes).decode("utf-8")
+    return f"data:image/png;base64,{base64_str}"
 def beautify_html(html_code):
     soup = BeautifulSoup(html_code, "html.parser")
     return soup.prettify()
 def generate_html_css_from_image(image_file):
     image_data_url = resize_and_encode_image(image_file)
     prompt_text = """
+You are an expert front-end developer tasked with converting a UI screenshot into a single, production-ready HTML file with embedded CSS.
+Analyze the provided screenshot meticulously and generate the corresponding HTML and CSS code.
+Here are the strict guidelines you must follow:
+    1.  *Complete HTML Structure*:
+        * Generate a full HTML5 document including ⁠ <!DOCTYPE html> ⁠, ⁠ <html> ⁠, ⁠ <head> ⁠, ⁠ <body> ⁠.
+        * Include essential meta tags: ⁠ charset="UTF-8" ⁠, ⁠ name="viewport" ⁠, ⁠ initial-scale=1.0" ⁠.
+        * The CSS MUST be embedded within a ⁠ <style> ⁠ tag inside the ⁠ <head> ⁠ section. DO NOT use inline styles.
+        * Use semantic HTML5 tags (e.g., ⁠ <header> ⁠, ⁠ <nav> ⁠, ⁠ <main> ⁠, ⁠ <section> ⁠, ⁠ <article> ⁠, ⁠ <aside> ⁠, ⁠ <footer> ⁠, ⁠ <button> ⁠, ⁠ <a> ⁠, ⁠ <h1> ⁠ to ⁠ <h6> ⁠, ⁠ <p> ⁠) to accurately reflect the visual hierarchy and content purpose.
+        * Organize content logically with ⁠ <div> ⁠ elements where semantic tags are not appropriate, using classes for styling.
+    2.  *Layout and Responsiveness*:
+        * Employ modern CSS layout techniques: primarily *Flexbox* or *CSS Grid* for main layouts and component arrangements.
+        * Implement *mobile-first responsive design*. Include at least one ⁠ @media ⁠ query to adapt the layout for larger screens (e.g., tablets and desktops).
+        * Ensure elements maintain their relative positions, sizing, and spacing as seen in the screenshot across different screen sizes. Pay close attention to padding, margins, and alignment.
+    3.  *Visual Fidelity (Pixel-Perfect Approach)*:
+        * Match the colors (backgrounds, text, buttons), font styles (font-family, font-size, font-weight), text alignment, and spacing (padding, margin, gap) as precisely as possible to the screenshot.
+        * Accurately reproduce element dimensions (width, height) where visually apparent.
+        * Replicate borders, shadows, and any other visual effects.
+        * If specific fonts are not easily identifiable, use common web-safe fonts like Arial, Helvetica, or sans-serif, but prioritize replicating the visual weight and size.
+        * For icons or images, use placeholder ⁠ <div>`s with appropriate dimensions and background colors/gradients, or `<img> ⁠ tags with ⁠ alt ⁠ attributes and placeholder ⁠ src ⁠ if specific image content isn't clearly inferable (though try to match the shape and size).
+    4.  *CSS Best Practices*:
+        * Use descriptive and consistent class names (e.g., following a BEM-like convention or clear, semantic names like ⁠ header-nav ⁠, ⁠ hero-section ⁠, ⁠ feature-card ⁠).
+        * Group related CSS properties together (e.g., layout, then typography, then colors).
+        * Add concise CSS comments for major sections or complex styles.
+        * Avoid redundant or unnecessary CSS.
+    5.  *Content Accuracy*:
+        * Reproduce all visible text content verbatim from the screenshot.
+        * For interactive elements (buttons, links), ensure they have appropriate tags (⁠<button> ⁠, ⁠<a>) and placeholder text.
+    6.  *Code Quality*:
+        * The generated code must be clean, well-formatted, and easy to read.
+        * Do not include any JavaScript unless explicitly requested (and it's not requested here).
+        * The output must be ONLY the HTML and CSS, without any conversational text or explanations. Wrap the entire output in a single Markdown HTML block (⁠  html...  ⁠).
+    7.  *Example Output Format (Strictly Adhere to this structure)*:
+    ⁠```html
+    <!DOCTYPE html>
+    <html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <title>Generated UI</title>
+        <style>
+            /* Global styles */
+            body {
+                font-family: Arial, sans-serif;
+                margin: 0;
+                padding: 0;
+                box-sizing: border-box;
+                background-color: #ffffff; /* Adjust based on screenshot */
+            }
+            /* Header styles */
+            .header {
+                /* ... CSS for header ... */
+            }
+            /* Hero section styles */
+            .hero-section {
+                /* ... CSS for hero section ... */
+            }
+            /* Features section styles */
+            .features-section {
+                /* ... CSS for features section ... */
+            }
+            /* Media queries for responsiveness */
+            @media (min-width: 768px) {
+                /* ... responsive styles ... */
+            }
+        </style>
+    </head>
+    <body>
+        <header class="header">
+            </header>
+        <main>
+            <section class="hero-section">
+                </section>
+            <section class="features-section">
+                </section>
+        </main>
+        <footer class="footer">
+            </footer>
+    </body>
+    </html>
+    ```
 """
     prompt = [
         HumanMessage(
             content=[
                 {"type": "text", "text": prompt_text},
+                {"type": "image_url", "image_url": {"url": image_data_url, "mime_type": "image/png"}}
             ]
         )
     ]
     llm = ChatGoogleGenerativeAI(model="gemini-2.5-flash", temperature=0)
+    max_retries = 5
     generated_code = None
     for attempt in range(max_retries):
                     .strip()
                 )
+            elif generated_code.strip().startswith("<!DOCTYPE html>"):
+                pass
+            else:
+                start_index = generated_code.find("<!DOCTYPE html>")
+                if start_index != -1:
+                    generated_code = generated_code[start_index:].strip()
+            if "<html" in generated_code.lower() and "<body" in generated_code.lower():
+                break
+            else:
+                print(f"Attempt {attempt+1}: Generated code missing HTML/BODY tags. Retrying...")
+                time.sleep(5)
+         except Exception as e:
+            if "ResourceExhausted" in str(e) or "429" in str(e) or "500" in str(e):
+                print(f"Attempt {attempt+1}: Rate limit or server error. Retrying in {30 * (attempt + 1)} seconds...")
                 time.sleep(30 * (attempt + 1))
             else:
+                print(f"Attempt {attempt+1}: Unexpected error: {e}. Retrying...")
+                time.sleep(5)
     if generated_code:
+        final_output = beautify_html(generated_code)
+        if not final_output.strip().startswith("<!DOCTYPE html>"):
+            final_output = "<!DOCTYPE html>\n" + final_output
         return final_output
     else: