Spaces:

AkashKumarave
/

editableweb

Sleeping

App Files Files Community

AkashKumarave commited on May 13

Commit

045423f

verified ·

1 Parent(s): 324c60c

Update app.py

Browse files

Files changed (1) hide show

app.py +417 -151

app.py CHANGED Viewed

@@ -1,179 +1,445 @@
-import gradio as gr
 import requests
 from bs4 import BeautifulSoup
-import json
 import base64
 from PIL import Image
-import io
-import os
-from urllib.parse import urlparse
-import re
-def clean_url(url):
-    """Ensure URL has proper protocol"""
-    if not url.startswith(('http://', 'https://')):
-        url = 'https://' + url
-    return url
-def get_page_screenshot(url):
-    """Get screenshot of the webpage using a screenshot API"""
-    try:
-        # Using a free screenshot API (limited, for demo purposes)
-        api_url = f"https://api.apiflash.com/v1/urltoimage?access_key=demo&url={url}&format=jpeg&quality=80"
-        response = requests.get(api_url)
-        if response.status_code == 200:
-            return response.content
-        else:
-            return None
-    except Exception as e:
-        print(f"Screenshot error: {str(e)}")
-        return None
-def extract_styles(element):
-    """Extract CSS styles from an element"""
-    styles = {}
-    if element.has_attr('style'):
-        style_text = element.get('style')
-        style_pairs = [s.strip() for s in style_text.split(';') if s.strip()]
-        for pair in style_pairs:
-            if ':' in pair:
-                prop, val = pair.split(':', 1)
-                styles[prop.strip()] = val.strip()
-    return styles
-def extract_colors(styles):
-    """Extract colors from CSS styles"""
-    colors = []
-    color_props = ['color', 'background-color', 'border-color']
-    for prop in color_props:
-        if prop in styles and styles[prop] not in ['transparent', 'inherit', 'initial']:
-            colors.append(styles[prop])
-    return colors
-def extract_fonts(styles):
-    """Extract fonts from CSS styles"""
-    fonts = []
-    if 'font-family' in styles:
-        font_str = styles['font-family']
-        # Split by comma and clean up quotes
-        font_list = [f.strip().strip('"\'') for f in font_str.split(',')]
-        fonts.extend(font_list)
-    return fonts
-def process_website(url):
-    """Process a website and extract design elements"""
-    url = clean_url(url)
     try:
-        # Fetch the webpage
-        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, timeout=15)
-        if response.status_code != 200:
-            return {"error": f"Failed to fetch website (Status code: {response.status_code})"}
-        # Parse HTML
-        soup = BeautifulSoup(response.text, 'html.parser')
-        # Get screenshot
-        screenshot = get_page_screenshot(url)
-        screenshot_base64 = None
-        if screenshot:
-            screenshot_base64 = base64.b64encode(screenshot).decode('utf-8')
-        # Extract text content
-        text_elements = []
-        for text_tag in soup.find_all(['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span', 'a', 'button']):
-            if text_tag.text.strip():
-                text_elements.append({
-                    "tag": text_tag.name,
-                    "text": text_tag.text.strip(),
-                    "styles": extract_styles(text_tag)
-                })
-        # Extract colors
-        all_colors = []
-        for tag in soup.find_all(True):
-            styles = extract_styles(tag)
-            colors = extract_colors(styles)
-            all_colors.extend(colors)
-        # Extract fonts
-        all_fonts = []
-        for tag in soup.find_all(True):
-            styles = extract_styles(tag)
-            fonts = extract_fonts(styles)
-            all_fonts.extend(fonts)
-        # Extract images
-        images = []
-        for img in soup.find_all('img'):
-            if img.has_attr('src'):
-                src = img['src']
-                if src.startswith('//'):
-                    src = 'https:' + src
-                elif not src.startswith(('http://', 'https://')):
-                    # Handle relative URLs
-                    base_url = '{uri.scheme}://{uri.netloc}'.format(uri=urlparse(url))
-                    if src.startswith('/'):
-                        src = base_url + src
-                    else:
-                        src = base_url + '/' + src
-                images.append({
-                    "src": src,
-                    "alt": img.get('alt', ''),
-                    "width": img.get('width', ''),
-                    "height": img.get('height', '')
-                })
-        # Create result
-        result = {
-            "url": url,
-            "title": soup.title.string if soup.title else "",
-            "screenshot": screenshot_base64,
-            "text_elements": text_elements[:50],  # Limit to 50 elements
-            "colors": list(set(all_colors))[:20],  # Remove duplicates and limit
-            "fonts": list(set(all_fonts))[:10],    # Remove duplicates and limit
-            "images": images[:20]                  # Limit to 20 images
         }
-        return result
-    except Exception as e:
-        return {"error": str(e)}
-def figma_conversion_api(url):
-    """API endpoint for Figma plugin to convert websites"""
-    if not url:
-        return {"error": "No URL provided"}
-    result = process_website(url)
-    return result
-# Create Gradio interface
-with gr.Blocks() as demo:
-    gr.Markdown("# Website to Figma Converter API")
-    with gr.Tab("API Endpoint"):
-        gr.Markdown("""
-        ## API Usage
-        This API provides website conversion functionality for the Figma plugin.
-        ### Example usage:
-        Send a POST request with a URL parameter to convert a website to Figma-compatible format.
-        """)
-    with gr.Tab("Test Interface"):
-        with gr.Row():
-            url_input = gr.Textbox(label="Enter Website URL", placeholder="https://example.com")
-            convert_button = gr.Button("Convert Website")
-        output = gr.JSON(label="Conversion Result")
-        convert_button.click(figma_conversion_api, inputs=url_input, outputs=output)
-# Mount the Gradio app
-demo.launch()

+import os
+import json
 import requests
+import traceback
+from flask import Flask, request, jsonify
 from bs4 import BeautifulSoup
+from selenium import webdriver
+from selenium.webdriver.chrome.options import Options
+from selenium.webdriver.chrome.service import Service
+import time
+import re
 import base64
+import logging
 from PIL import Image
+from io import BytesIO
+import cssutils
+import urllib.parse
+app = Flask(__name__)
+# Setup logging
+logging.basicConfig(level=logging.INFO)
+logger = logging.getLogger(__name__)
+# Configure Chrome options for headless browsing
+def get_chrome_options():
+    options = Options()
+    options.add_argument("--headless")
+    options.add_argument("--no-sandbox")
+    options.add_argument("--disable-dev-shm-usage")
+    options.add_argument("--disable-gpu")
+    options.add_argument("--window-size=1440,900")
+    return options
+@app.route('/')
+def home():
+    return '''
+    <html>
+        <head>
+            <title>Website to Figma API</title>
+            <style>
+                body {
+                    font-family: Arial, sans-serif;
+                    max-width: 800px;
+                    margin: 0 auto;
+                    padding: 20px;
+                    line-height: 1.6;
+                }
+                h1 {
+                    color: #333;
+                }
+                pre {
+                    background-color: #f5f5f5;
+                    padding: 10px;
+                    border-radius: 5px;
+                    overflow-x: auto;
+                }
+            </style>
+        </head>
+        <body>
+            <h1>Website to Figma Converter API</h1>
+            <p>This API converts websites into Figma-compatible data structures.</p>
+            <h2>API Endpoints:</h2>
+            <h3>POST /api/convert</h3>
+            <p>Converts a website to Figma elements.</p>
+            <h4>Request Body:</h4>
+            <pre>
+{
+    "url": "https://example.com",
+    "viewport_width": 1440  // Optional, defaults to 1440px
+}
+            </pre>
+            <h4>Response:</h4>
+            <pre>
+{
+    "status": "success",
+    "viewport_width": 1440,
+    "viewport_height": 900,
+    "elements": [
+        {
+            "type": "rectangle",
+            "x": 0,
+            "y": 0,
+            "width": 200,
+            "height": 100,
+            "style": {
+                "backgroundColor": "#ffffff",
+                "borderRadius": "5px"
+            }
+        },
+        // more elements...
+    ]
+}
+            </pre>
+            <p>This API is part of the Website to Figma plugin.</p>
+        </body>
+    </html>
+    '''
+@app.route('/api/convert', methods=['POST'])
+def convert_website():
     try:
+        data = request.json
+        if not data:
+            return jsonify({"error": "No data provided"}), 400
+        url = data.get('url')
+        if not url:
+            return jsonify({"error": "URL is required"}), 400
+        # Add http if not present
+        if not url.startswith('http'):
+            url = 'https://' + url
+        viewport_width = int(data.get('viewport_width', 1440))
+        viewport_height = 900  # Default height
+        logger.info(f"Converting website: {url} with viewport width: {viewport_width}")
+        # Set up Chrome driver
+        options = get_chrome_options()
+        options.add_argument(f"--window-size={viewport_width},{viewport_height}")
+        driver = webdriver.Chrome(options=options)
+        driver.set_window_size(viewport_width, viewport_height)
+        try:
+            # Load the page
+            driver.get(url)
+            # Wait for page to load (adjust as needed)
+            time.sleep(5)
+            # Get page dimensions
+            page_dimensions = driver.execute_script("""
+                return {
+                    width: Math.max(document.body.scrollWidth, document.documentElement.scrollWidth),
+                    height: Math.max(document.body.scrollHeight, document.documentElement.scrollHeight)
+                };
+            """)
+            viewport_height = page_dimensions['height']
+            # Parse the page elements
+            elements = extract_elements(driver)
+            # Get all CSS styles
+            styles = extract_styles(driver)
+            # Apply styles to elements
+            apply_styles_to_elements(elements, styles)
+            # Prepare response
+            response = {
+                "status": "success",
+                "url": url,
+                "viewport_width": viewport_width,
+                "viewport_height": viewport_height,
+                "elements": elements
+            }
+            return jsonify(response)
+        finally:
+            driver.quit()
+    except Exception as e:
+        logger.error(f"Error: {str(e)}")
+        logger.error(traceback.format_exc())
+        return jsonify({"error": str(e), "traceback": traceback.format_exc()}), 500
+def extract_elements(driver):
+    """Extract elements from the webpage"""
+    elements = []
+    # Execute JavaScript to extract elements
+    elements_data = driver.execute_script("""
+        function getElementInfo(element, depth = 0) {
+            if (!element || depth > 15) return null;
+            // Skip invisible elements
+            if (element.offsetWidth === 0 || element.offsetHeight === 0) return null;
+            // Get element position and size
+            const rect = element.getBoundingClientRect();
+            if (rect.width < 1 || rect.height < 1) return null;
+            // Create element data
+            const elementData = {
+                tagName: element.tagName.toLowerCase(),
+                id: element.id || null,
+                className: element.className || null,
+                x: rect.left,
+                y: rect.top,
+                width: rect.width,
+                height: rect.height
+            };
+            // Handle text elements
+            if (element.tagName.toLowerCase() === 'p' ||
+                element.tagName.toLowerCase() === 'h1' ||
+                element.tagName.toLowerCase() === 'h2' ||
+                element.tagName.toLowerCase() === 'h3' ||
+                element.tagName.toLowerCase() === 'h4' ||
+                element.tagName.toLowerCase() === 'h5' ||
+                element.tagName.toLowerCase() === 'h6' ||
+                element.tagName.toLowerCase() === 'span' ||
+                element.tagName.toLowerCase() === 'a') {
+                const textContent = element.textContent.trim();
+                if (textContent) {
+                    elementData.type = 'text';
+                    elementData.content = textContent;
+                    // Get computed style
+                    const style = window.getComputedStyle(element);
+                    elementData.style = {
+                        color: style.color,
+                        fontSize: style.fontSize,
+                        fontWeight: style.fontWeight,
+                        lineHeight: style.lineHeight,
+                        textAlign: style.textAlign,
+                        fontFamily: style.fontFamily
+                    };
+                }
+            }
+            // Handle image elements
+            else if (element.tagName.toLowerCase() === 'img') {
+                elementData.type = 'image';
+                elementData.src = element.src;
+                elementData.alt = element.alt || '';
+            }
+            // Handle div/container elements
+            else if (element.tagName.toLowerCase() === 'div' ||
+                    element.tagName.toLowerCase() === 'section' ||
+                    element.tagName.toLowerCase() === 'article' ||
+                    element.tagName.toLowerCase() === 'header' ||
+                    element.tagName.toLowerCase() === 'footer' ||
+                    element.tagName.toLowerCase() === 'main') {
+                elementData.type = 'div';
+                // Get background color
+                const style = window.getComputedStyle(element);
+                elementData.style = {
+                    backgroundColor: style.backgroundColor,
+                    borderRadius: style.borderRadius,
+                    borderWidth: style.borderWidth,
+                    borderColor: style.borderColor,
+                    boxShadow: style.boxShadow
+                };
+                // Check if there are direct text children
+                if (element.childNodes.length > 0) {
+                    let directText = '';
+                    for (let i = 0; i < element.childNodes.length; i++) {
+                        if (element.childNodes[i].nodeType === Node.TEXT_NODE) {
+                            const text = element.childNodes[i].textContent.trim();
+                            if (text) directText += text + ' ';
+                        }
+                    }
+                    if (directText.trim()) {
+                        elementData.type = 'text';
+                        elementData.content = directText.trim();
+                        elementData.style.color = style.color;
+                        elementData.style.fontSize = style.fontSize;
+                        elementData.style.fontWeight = style.fontWeight;
+                    }
+                }
+                // Get children
+                const children = [];
+                for (let i = 0; i < element.children.length; i++) {
+                    const childData = getElementInfo(element.children[i], depth + 1);
+                    if (childData) children.push(childData);
+                }
+                if (children.length > 0) {
+                    elementData.children = children;
+                    elementData.type = 'container';
+                }
+            }
+            // Handle button elements
+            else if (element.tagName.toLowerCase() === 'button' ||
+                    (element.tagName.toLowerCase() === 'a' && window.getComputedStyle(element).display === 'inline-block')) {
+                elementData.type = 'rectangle';
+                elementData.name = 'Button';
+                // Get style
+                const style = window.getComputedStyle(element);
+                elementData.style = {
+                    backgroundColor: style.backgroundColor,
+                    color: style.color,
+                    borderRadius: style.borderRadius,
+                    borderWidth: style.borderWidth,
+                    borderColor: style.borderColor
+                };
+                // Add text content
+                const textContent = element.textContent.trim();
+                if (textContent) {
+                    elementData.content = textContent;
+                }
+            }
+            else {
+                // Default to rectangle for other elements
+                elementData.type = 'rectangle';
+                // Get style
+                const style = window.getComputedStyle(element);
+                elementData.style = {
+                    backgroundColor: style.backgroundColor
+                };
+                // Get children
+                const children = [];
+                for (let i = 0; i < element.children.length; i++) {
+                    const childData = getElementInfo(element.children[i], depth + 1);
+                    if (childData) children.push(childData);
+                }
+                if (children.length > 0) {
+                    elementData.children = children;
+                }
+            }
+            return elementData;
         }
+        function getVisibleElements() {
+            const bodyElement = document.body;
+            const result = getElementInfo(bodyElement);
+            return result ? result.children || [] : [];
+        }
+        return getVisibleElements();
+    """)
+    return elements_data
+def extract_styles(driver):
+    """Extract CSS styles from the webpage"""
+    styles = {}
+    # Execute JavaScript to extract styles
+    css_rules = driver.execute_script("""
+        const sheets = document.styleSheets;
+        const rules = [];
+        for (let i = 0; i < sheets.length; i++) {
+            try {
+                const sheet = sheets[i];
+                const ruleList = sheet.rules || sheet.cssRules;
+                for (let j = 0; j < ruleList.length; j++) {
+                    try {
+                        const rule = ruleList[j];
+                        if (rule.selectorText) {
+                            rules.push({
+                                selector: rule.selectorText,
+                                style: rule.style.cssText
+                            });
+                        }
+                    } catch (e) {
+                        // Skip rule if it can't be accessed
+                    }
+                }
+            } catch (e) {
+                // Skip stylesheet if it can't be accessed
+            }
+        }
+        return rules;
+    """)
+    for rule in css_rules:
+        styles[rule['selector']] = rule['style']
+    return styles
+def apply_styles_to_elements(elements, styles):
+    """Apply CSS styles to elements"""
+    for element in elements:
+        if 'className' in element and element['className']:
+            class_names = element['className'].split()
+            for class_name in class_names:
+                selector = '.' + class_name
+                if selector in styles:
+                    apply_style(element, styles[selector])
+        if 'id' in element and element['id']:
+            selector = '#' + element['id']
+            if selector in styles:
+                apply_style(element, styles[selector])
+        # Apply styles to children recursively
+        if 'children' in element and element['children']:
+            apply_styles_to_elements(element['children'], styles)
+def apply_style(element, style_text):
+    """Apply a CSS style to an element"""
+    if 'style' not in element:
+        element['style'] = {}
+    # Parse CSS text to extract properties
+    style_dict = parse_css_text(style_text)
+    # Apply properties to element style
+    for key, value in style_dict.items():
+        if key not in element['style'] or not element['style'][key]:
+            element['style'][key] = value
+def parse_css_text(css_text):
+    """Parse CSS text into a dictionary"""
+    style_dict = {}
+    # Basic parsing of CSS text
+    for item in css_text.split(';'):
+        if ':' in item:
+            key, value = item.split(':', 1)
+            key = key.strip()
+            value = value.strip()
+            if key and value:
+                # Convert to camelCase for JavaScript
+                key_parts = key.split('-')
+                if len(key_parts) > 1:
+                    key = key_parts[0] + ''.join(part.capitalize() for part in key_parts[1:])
+                style_dict[key] = value
+    return style_dict
+if __name__ == "__main__":
+    port = int(os.environ.get("PORT", 7860))
+    app.run(host="0.0.0.0", port=port)