Create app.py

app.py

@@ -0,0 +1,205 @@
+
+import os
+import json
+import requests
+from bs4 import BeautifulSoup
+from flask import Flask, request, jsonify
+from flask_cors import CORS
+import cssutils
+import re
+from urllib.parse import urlparse, urljoin
+
+app = Flask(__name__)
+CORS(app)  # Enable CORS for all routes
+
+@app.route('/')
+def home():
+    return "Website to Figma Converter API - Use POST /api/convert"
+
+@app.route('/api/convert', methods=['POST'])
+def convert_website():
+    data = request.json
+    
+    if not data or 'url' not in data:
+        return jsonify({"success": False, "error": "URL is required"}), 400
+    
+    url = data['url']
+    
+    try:
+        # Fetch the website content
+        website_data = fetch_website(url)
+        
+        # Parse and convert website to Figma-compatible format
+        figma_data = convert_to_figma_format(website_data, url)
+        
+        return jsonify({
+            "success": True,
+            "data": figma_data
+        })
+    
+    except Exception as e:
+        print(f"Error converting website: {e}")
+        return jsonify({
+            "success": False,
+            "error": str(e)
+        }), 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
+
+def convert_to_figma_format(html_content, base_url):
+    """Convert website HTML to Figma-compatible format"""
+    soup = BeautifulSoup(html_content, 'html.parser')
+    
+    # Extract viewport dimensions
+    viewport_meta = soup.find('meta', attrs={'name': 'viewport'})
+    viewport_width = 1440  # Default width
+    viewport_height = 900  # Default height
+    
+    if viewport_meta and 'content' in viewport_meta.attrs:
+        viewport_content = viewport_meta['content']
+        width_match = re.search(r'width=(\d+)', viewport_content)
+        if width_match:
+            viewport_width = int(width_match.group(1))
+    
+    # Initialize the result data structure
+    result = {
+        "width": viewport_width,
+        "height": viewport_height,
+        "elements": []
+    }
+    
+    # Process the body element and its children
+    body = soup.body
+    if body:
+        result["elements"] = parse_element(body, base_url)
+    
+    return result
+
+def parse_element(element, base_url, depth=0):
+    """Recursively parse HTML elements into Figma-compatible format"""
+    if depth > 10:  # Limit recursion depth
+        return []
+    
+    elements = []
+    
+    # Process only element nodes (skip text nodes, etc.)
+    for child in element.children:
+        if not hasattr(child, 'name') or not child.name:
+            continue
+        
+        # Skip invisible elements
+        if child.name in ['script', 'style', 'meta', 'link', 'noscript']:
+            continue
+        
+        # Get element style
+        style = extract_style(child)
+        
+        element_data = {
+            "type": determine_element_type(child),
+            "tag": child.name,
+            "style": style
+        }
+        
+        # Handle text content
+        if element_data["type"] == "text":
+            element_data["content"] = child.get_text().strip()
+        
+        # Handle image elements
+        if child.name == 'img' and child.get('src'):
+            element_data["type"] = "image"
+            src = child.get('src')
+            if not src.startswith(('http://', 'https://')):
+                src = urljoin(base_url, src)
+            element_data["src"] = src
+        
+        # Handle input elements
+        if child.name == 'input':
+            input_type = child.get('type', 'text')
+            if input_type in ['submit', 'button']:
+                element_data["type"] = "button"
+                element_data["content"] = child.get('value', 'Button')
+        
+        # Handle button elements
+        if child.name == 'button':
+            element_data["type"] = "button"
+            element_data["content"] = child.get_text().strip() or 'Button'
+        
+        # Recursively process children
+        if list(child.children):
+            element_data["children"] = parse_element(child, base_url, depth + 1)
+        
+        elements.append(element_data)
+    
+    return elements
+
+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):
+    """Extract CSS styles from an HTML element"""
+    style = {}
+    
+    # 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
+    if element.name in ['div', 'section', 'article', 'main']:
+        if 'width' not in style:
+            style['width'] = '100%'
+        if 'height' not in style:
+            style['height'] = 'auto'
+    
+    # Extract colors
+    if element.get('color'):
+        style['color'] = element.get('color')
+    elif element.name in ['h1', 'h2', 'h3', 'h4', 'h5', 'h6']:
+        style['color'] = '#000000'
+    
+    # Extract font sizes
+    if element.name == 'h1':
+        style['fontSize'] = '32px'
+    elif element.name == 'h2':
+        style['fontSize'] = '24px'
+    elif element.name == 'h3':
+        style['fontSize'] = '18px'
+    elif element.name in ['p', 'span', 'a', 'li']:
+        style['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)