Update app.py

app.py

@@ -1,4 +1,3 @@
-
 import os
 import json
 import requests
@@ -8,6 +7,7 @@ from flask_cors import CORS
 import cssutils
 import re
 from urllib.parse import urlparse, urljoin
+from playwright.sync_api import sync_playwright
 
 app = Flask(__name__)
 CORS(app)  # Enable CORS for all routes
@@ -26,12 +26,13 @@ def convert_website():
     url = data['url']
     
     try:
-        # Fetch the website content
+        # Fetch the website content with Playwright for dynamic content
         website_data = fetch_website(url)
         
         # Parse and convert website to Figma-compatible format
         figma_data = convert_to_figma_format(website_data, url)
         
+        print("Figma data:", json.dumps(figma_data, indent=2))  # Debug log
         return jsonify({
             "success": True,
             "data": figma_data
@@ -45,15 +46,14 @@ def convert_website():
         }), 500
 
 def fetch_website(url):
-    """Fetch website HTML content"""
-    headers = {
-        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36'
-    }
-    
-    response = requests.get(url, headers=headers)
-    response.raise_for_status()
-    
-    return response.text
+    """Fetch website HTML content using Playwright for rendered DOM"""
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        page = browser.new_page()
+        page.goto(url, wait_until="networkidle")
+        html_content = page.content()
+        browser.close()
+    return html_content
 
 def convert_to_figma_format(html_content, base_url):
     """Convert website HTML to Figma-compatible format"""
@@ -91,7 +91,6 @@ def parse_element(element, base_url, depth=0):
     
     elements = []
     
-    # Process only element nodes (skip text nodes, etc.)
     for child in element.children:
         if not hasattr(child, 'name') or not child.name:
             continue
@@ -100,7 +99,7 @@ def parse_element(element, base_url, depth=0):
         if child.name in ['script', 'style', 'meta', 'link', 'noscript']:
             continue
         
-        # Get element style
+        # Get element style (inline and computed)
         style = extract_style(child)
         
         element_data = {
@@ -111,7 +110,9 @@ def parse_element(element, base_url, depth=0):
         
         # Handle text content
         if element_data["type"] == "text":
-            element_data["content"] = child.get_text().strip()
+            text_content = child.get_text().strip()
+            if text_content:
+                element_data["content"] = text_content
         
         # Handle image elements
         if child.name == 'img' and child.get('src'):
@@ -143,19 +144,12 @@ def parse_element(element, base_url, depth=0):
 
 def determine_element_type(element):
     """Determine the Figma element type based on HTML element"""
-    # Text elements
     if element.name in ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'a', 'label', 'li']:
         return "text"
-    
-    # Image elements
     if element.name == 'img':
         return "image"
-    
-    # Button elements
     if element.name == 'button' or (element.name == 'input' and element.get('type') in ['submit', 'button']):
         return "button"
-    
-    # Default to container
     return "container"
 
 def extract_style(element):
@@ -164,42 +158,43 @@ def extract_style(element):
     
     # Extract inline styles
     if element.get('style'):
-        inline_styles = cssutils.parseStyle(element.get('style'))
-        for prop in inline_styles:
-            style[prop.name] = prop.value
-    
-    # Extract dimensions and position from attributes
-    if element.get('width'):
-        style['width'] = f"{element.get('width')}px"
-    if element.get('height'):
-        style['height'] = f"{element.get('height')}px"
-    
-    # Set default dimensions for certain elements
+        try:
+            inline_styles = cssutils.parseStyle(element['style'])
+            for prop in inline_styles:
+                style[prop.name] = prop.value
+        except Exception as e:
+            print(f"Error parsing inline styles for {element.name}: {e}")
+    
+    # Add default styles for specific elements
     if element.name in ['div', 'section', 'article', 'main']:
-        if 'width' not in style:
-            style['width'] = '100%'
-        if 'height' not in style:
-            style['height'] = 'auto'
+        style.setdefault('width', '100%')
+        style.setdefault('height', 'auto')
+        style.setdefault('display', 'block')
     
-    # Extract colors
+    # Extract colors and backgrounds
     if element.get('color'):
-        style['color'] = element.get('color')
+        style['color'] = element['color']
     elif element.name in ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']:
-        style['color'] = '#000000'
+        style.setdefault('color', '#000000')
     
     # Extract font sizes
     if element.name == 'h1':
-        style['fontSize'] = '32px'
+        style.setdefault('fontSize', '32px')
     elif element.name == 'h2':
-        style['fontSize'] = '24px'
+        style.setdefault('fontSize', '24px')
     elif element.name == 'h3':
-        style['fontSize'] = '18px'
+        style.setdefault('fontSize', '18px')
     elif element.name in ['p', 'span', 'a', 'li']:
-        style['fontSize'] = '16px'
+        style.setdefault('fontSize', '16px')
     
-    return style
-
-if __name__ == '__main__':
-    # Get port from environment variable or use default
-    port = int(os.environ.get('PORT', 7860))
-    app.run(host='0.0.0.0', port=port)
+    # Add layout-related styles
+    style.setdefault('position', 'relative')
+    style.setdefault('margin', '0')
+    style.setdefault('padding', '0')
+    style.setdefault('boxSizing', 'border-box')
+    
+    # Add computed styles (simulated)
+    if element.name in ['div', 'section', 'article']:
+        style.setdefault('backgroundColor', 'transparent')
+    
+    return style