Update app.py

app.py

@@ -1,216 +1,246 @@
 import gradio as gr
-import requests
+import asyncio
+from playwright.async_api import async_playwright
+from bs4 import BeautifulSoup
 import re
 import zipfile
 import io
-import cssutils
-from bs4 import BeautifulSoup
-from fake_useragent import UserAgent
 
 # ==========================================
-# 🔧 Helper Functions
+# 🔧 Playwright & Parsing Logic
 # ==========================================
 
-def fetch_page_html(url):
-    """جلب كود الصفحة مع معالجة الأخطاء الشائعة"""
-    try:
-        if not url.startswith(('http://', 'https://')):
-            url = 'https://' + url
-        
-        headers = {'User-Agent': UserAgent().random}
-        # مهلة 10 ثوانٍ لتجنب الانتظار الطويل
-        response = requests.get(url, headers=headers, timeout=10)
-        response.raise_for_status()
-        return response.text
-    except Exception as e:
-        return f"ERROR: {str(e)}"
-
-def extract_inline_styles(element):
-    """استخراج الأنماط المدمجة أو حسابات بسيطة"""
-    styles = element.get('style', '')
-    return styles
-
-def clean_component_html(element):
-    """تنظيف كود المكون وإزالة السمات غير الضرورية"""
-    # إزالة سمات التتبع والأحداث المعقدة
-    for attr in list(element.attrs.keys()):
-        if attr.startswith('data-') and 'analytics' in attr:
-            del element[attr]
-        if attr in ['onclick', 'onload', 'onerror']:
-            del element[attr]
-    return str(element)
-
-def detect_components(soup):
+async def scan_page_for_components(url):
     """
-    الخوارزمية الأساسية: مسح الـ DOM للبحث عن أنماط معروفة
+    الدالة الأساسية: تفتح الموقع في متصفح حقيقي، تنتظر التحميل، وتستخرج المكونات
     """
     components = []
     
-    # 1. اكتشاف الأزرار (Buttons)
-    buttons = soup.find_all(['button', 'a'], class_=re.compile(r'btn|button', re.I))
-    for btn in buttons:
-        if btn.get_text(strip=True): # تجاهل الأزرار الفارغة
-            components.append({
-                'type': '🔘 Button',
-                'html': clean_component_html(btn),
-                'styles': extract_inline_styles(btn),
-                'preview_text': btn.get_text(strip=True)[:20]
-            })
-
-    # 2. اكتشاف البطاقات (Cards) - العناصر التي تحتوي على صورة وعنوان
-    # نبحث عن كلاسات شائعة للبطاقات
-    card_containers = soup.find_all(class_=re.compile(r'card|product|item|post', re.I))
-    for card in card_containers:
-        # نتأكد أن البطاقة تحتوي على محتوى بصري أو نصي مميز
-        if card.find('img') or card.find(['h1', 'h2', 'h3', 'h4']):
-            # نتجنب البطاقات المتداخلة (نأخذ الأب فقط تقريباً)
-            if len(card.find_all(class_=re.compile(r'card|product|item', re.I))) <= 1:
+    async with async_playwright() as p:
+        # تشغيل المتصفح في وضع الرأس (Headless)
+        browser = await p.chromium.launch(headless=True)
+        context = await browser.new_context(
+            viewport={'width': 1920, 'height': 1080},
+            user_agent='Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36'
+        )
+        page = await context.new_page()
+        
+        try:
+            # الذهاب للرابط والانتظار حتى يصبح المحتوى تفاعلياً
+            await page.goto(url, wait_until="networkidle", timeout=30000)
+            
+            # تمرير الصفحة لأسفل وأعلى لتحميل العناصر الكسولة (Lazy Load)
+            await page.evaluate("window.scrollTo(0, document.body.scrollHeight)")
+            await page.wait_for_timeout(1000)
+            await page.evaluate("window.scrollTo(0, 0)")
+            await page.wait_for_timeout(500)
+            
+            # الحصول على محتوى HTML بعد تنفيذ الجافاسكريبت
+            html_content = await page.content()
+            soup = BeautifulSoup(html_content, 'html.parser')
+            
+            # --- خوارزمية الاكتشاف ---
+            
+            # 1. اكتشاف الأزرار (Buttons)
+            buttons = soup.find_all(['button', 'a'], class_=re.compile(r'btn|button', re.I))
+            for btn in buttons:
+                text = btn.get_text(strip=True)
+                if text and len(text) < 30: # تجاهل النصوص الطويلة جداً
+                    components.append({
+                        'type': '🔘 Button',
+                        'html': str(btn),
+                        'preview': text,
+                        'classes': btn.get('class', [])
+                    })
+
+            # 2. اكتشاف البطاقات (Cards)
+            # نبحث عن حاويات تحتوي على صورة + نص، أو كلاسات تدل على بطاقة
+            card_candidates = soup.find_all(class_=re.compile(r'card|product|item|post|entry', re.I))
+            for card in card_candidates:
+                # نتجنب العناصر الصغيرة جداً أو المخفية
+                if card.find('img') or card.find(['h1', 'h2', 'h3']):
+                    # محاولة تجنب التداخل (نأخذ العنصر الأب فقط)
+                    parent_is_card = False
+                    for parent in card.parents:
+                        if parent.get('class') and any('card' in str(c).lower() for c in parent.get('class')):
+                            parent_is_card = True
+                            break
+                    
+                    if not parent_is_card:
+                        components.append({
+                            'type': '🃏 Card',
+                            'html': str(card),
+                            'preview': 'Card Component',
+                            'classes': card.get('class', [])
+                        })
+
+            # 3. اكتشاف شريط التنقل (Navbar)
+            navs = soup.find_all(['nav', 'header'], class_=re.compile(r'nav|header|menu', re.I))
+            for nav in navs:
                 components.append({
-                    'type': '🃏 Card',
-                    'html': clean_component_html(card),
-                    'styles': extract_inline_styles(card),
-                    'preview_text': 'Card Component'
+                    'type': '🧭 Navbar',
+                    'html': str(nav),
+                    'preview': 'Navigation Bar',
+                    'classes': nav.get('class', [])
                 })
-
-    # 3. اكتشاف شريط التنقل (Navbar)
-    navs = soup.find_all(['nav', 'header'], class_=re.compile(r'nav|header|menu', re.I))
-    for nav in navs:
-        components.append({
-            'type': '🧭 Navbar',
-            'html': clean_component_html(nav),
-            'styles': extract_inline_styles(nav),
-            'preview_text': 'Navigation'
-        })
-
-    # 4. اكتشاف الأقسام الرئيسية (Hero/Sections)
-    sections = soup.find_all('section')
-    for sec in sections:
-        if sec.get('class') and any('hero' in str(c).lower() for c in sec.get('class')):
-             components.append({
-                'type': '🎨 Hero Section',
-                'html': clean_component_html(sec),
-                'styles': extract_inline_styles(sec),
-                'preview_text': 'Hero Section'
+                
+            # 4. أقسام Hero
+            sections = soup.find_all('section')
+            for sec in sections:
+                if sec.get('class') and any('hero' in str(c).lower() for c in sec.get('class')):
+                     components.append({
+                        'type': '🎨 Hero Section',
+                        'html': str(sec),
+                        'preview': 'Hero Section',
+                        'classes': sec.get('class', [])
+                    })
+
+        except Exception as e:
+            print(f"Error scanning page: {e}")
+            components.append({
+                'type': '⚠️ Error',
+                'html': f'<div style="color:red">{str(e)}</div>',
+                'preview': 'Failed to load',
+                'classes': []
             })
-
+        finally:
+            await browser.close()
+            
     return components
 
-def generate_code_snippet(comp, framework='html'):
-    """توليد الكود النهائي للعرض"""
-    if framework == 'react':
-        # تحويل بسيط لـ JSX
-        code = comp['html'].replace('class=', 'className=').replace('for=', 'htmlFor=')
-        return f"import React from 'react';\n\nexport default function Component() {{\n  return (\n    {code}\n  );\n}}"
-    return comp['html']
-
-def create_zip(components):
-    """إنشاء ملف ZIP للتحميل"""
+def clean_html_for_display(html_str):
+    """تنظيف الكود للعرض في الواجهة"""
+    # إزالة السكربتات والستايل لتجنب مشاكل العرض في Gradio
+    soup = BeautifulSoup(html_str, 'html.parser')
+    for tag in soup(['script', 'style']):
+        tag.decompose()
+    return str(soup)
+
+def generate_react_code(html_str, classes):
+    """تحويل بسيط إلى React + Tailwind"""
+    # إزالة السمات غير المتوافقة مع JSX
+    clean = html_str.replace('class=', 'className=')
+    clean = clean.replace('for=', 'htmlFor=')
+    # إضافة تعليق يوضح الكلاسات المستخرجة للمساعدة في التخصيص
+    return f"""import React from 'react';
+
+export default function ExtractedComponent() {{
+  return (
+    <>
+      {/* Detected classes: {' '.join(classes)} */}
+      {clean}
+    </>
+  );
+}}
+"""
+
+def create_zip_file(components):
+    """إنشاء ملف التحميل"""
     zip_buffer = io.BytesIO()
-    with zipfile.ZipFile(zip_buffer, "w") as zip_file:
+    with zipfile.ZipFile(zip_buffer, "w", zipfile.ZIP_DEFLATED) as zip_file:
         for i, comp in enumerate(components):
-            filename = f"component_{i+1}_{comp['type'].split()[1]}.html"
-            content = f"<!-- Type: {comp['type']} -->\n{comp['html']}"
-            zip_file.writestr(filename, content)
+            # حفظ نسخة HTML
+            zip_file.writestr(f"component_{i+1}.html", comp['html'])
+            # حفظ نسخة React
+            react_code = generate_react_code(comp['html'], comp['classes'])
+            zip_file.writestr(f"component_{i+1}.jsx", react_code)
     zip_buffer.seek(0)
     return zip_buffer
 
 # ==========================================
-# 🎨 Gradio Interface Logic
-# ==========================================
-
-def process_url(url, framework):
-    """الدالة الرئيسية التي تربط الواجهة بالخلفية"""
-    if not url:
-        return [], None, "الرجاء إدخال رابط صحيح"
-    
-    # 1. الجلب
-    html_content = fetch_page_html(url)
-    if html_content.startswith("ERROR"):
-        return [], None, html_content
-    
-    # 2. التحليل
-    soup = BeautifulSoup(html_content, 'html.parser')
-    components = detect_components(soup)
-    
-    if not components:
-        return [], None, "⚠️ لم يتم العثور على مكونات قياسية. جرب موقعاً آخر."
-    
-    # 3. تجهيز البيانات للعرض (Gallery)
-    gallery_data = []
-    for comp in components:
-        # نعرض كود المكون داخل مربع نص للعرض الأولي
-        code_view = generate_code_snippet(comp, framework)
-        
-        # نص العرض في البطاقة
-        display_name = f"{comp['type']}: {comp['preview_text']}"
-        
-        # نرجع البيانات كقاموس ليقرأها Gradio
-        gallery_data.append({
-            "name": display_name,
-            "image": None, # يمكن إضافة screenshot لاحقاً
-            "code": code_view,
-            "data": comp # نحتفظ بالبيانات الأصلية للتحميل
-        })
-        
-    return gallery_data, None, f"✅ تم العثور على {len(components)} مكونات"
-
-def download_selected(selected_components):
-    """منطق التحميل (مبسط للنموذج الأولي)"""
-    # في Gradio Gallery، نعيد قائمة البيانات المختارة
-    if not selected_components:
-        return None
-    
-    # استخراج البيانات الأصلية من كائنات العرض
-    raw_comps = [item['data'] for item in selected_components]
-    return create_zip(raw_comps)
-
-# ==========================================
-# 🚀 Launch App
+# 🎨 Gradio Interface
 # ==========================================
 
-with gr.Blocks(title="UI Component Extractor", theme=gr.themes.Soft()) as demo:
+with gr.Blocks(title="UI Extractor Pro", theme=gr.themes.Soft()) as demo:
     
     gr.Markdown("""
-    # 🛠️ UI Component Extractor
-    ### استخرج مكونات الواجهة (أزرار، بطاقات، قوائم) من أي موقع ويب واحصل على كود نظيف.
-    > ⚠️ **ملاحظة:** هذه نسخة تجريبية (MVP) تعتمد على التحليل الثابت. بعض المواقع الديناميكية قد تحتاج لمعالجة خاصة.
+    # 🚀 UI Component Extractor (Docker Edition)
+    ### يستخرج المكونات من المواقع الديناميكية باستخدام Playwright.
     """)
     
     with gr.Row():
-        url_input = gr.Textbox(label="🔗 Website URL", placeholder="example.com", scale=2)
-        framework_select = gr.Dropdown(choices=["html", "react"], value="html", label="⚙️ Output Format", scale=1)
-        extract_btn = gr.Button("🚀 Extract Components", variant="primary", scale=0)
+        url_input = gr.Textbox(label="🔗 Website URL", placeholder="https://example.com", scale=2)
+        extract_btn = gr.Button("🔍 Scan & Extract", variant="primary", scale=0)
     
-    status_text = gr.Textbox(label="Status", interactive=False)
+    status_box = gr.Textbox(label="Status", interactive=False, value="Ready")
     
-    with gr.Row():
-        # المكون السحري: Gallery تعرض المكونات وتسمح بالاختيار
-        # نستخدم خاصية show_label=False لإخفاء العناوين الداخلية للكود
-        component_gallery = gr.Gallery(
-            label="Detected Components", 
-            show_label=True, 
-            columns=[3], 
-            rows=[2], 
-            object_fit="contain",
-            height="auto"
-        )
+    # Gallery لعرض النتائج
+    # نستخدم خاصية 'preview' كنص بديل للصورة لأننا لا نولد لقطات شاشة لتوفير الموارد
+    gallery = gr.Gallery(
+        label="Detected Components", 
+        show_label=True, 
+        columns=[3], 
+        height="auto",
+        object_fit="contain"
+    )
+    
+    with gr.Accordion("📄 View Code", open=False):
+        code_display = gr.Code(label="Component Source Code", language="html")
     
     with gr.Row():
-        download_btn = gr.Button("📥 Download Selected as ZIP", variant="secondary")
-        output_file = gr.File(label="Download Ready")
+        download_btn = gr.Button("📥 Download Selected (ZIP)", variant="secondary")
+        output_file = gr.File(label="Download Link", interactive=False)
+
+    # State لتخزين البيانات الكاملة للمكونات (لأن المعرض يعرض فقط ما نريده للعرض)
+    components_state = gr.State([])
 
-    # ربط الأحداث (Events)
+    def on_extract(url):
+        if not url.startswith('http'):
+            return [], [], "Please enter a valid URL starting with http/https", ""
+        
+        yield [], [], "🔄 Connecting to browser and loading page...", ""
+        
+        # تشغيل الدالة غير المتزامنة
+        results = asyncio.run(scan_page_for_components(url))
+        
+        if not results:
+            yield [], [], "⚠️ No components found. Try a different site.", ""
+            return
+
+        # تجهيز البيانات للمعرض
+        gallery_items = []
+        for comp in results:
+            gallery_items.append({
+                "name": f"{comp['type']} - {comp['preview']}",
+                # نمرر كود نظيف جداً كـ "صورة" نصية لأننا لا نستخدم screenshots لتوفير الرام
+                # في تطبيق حقيقي، نستخدم page.screenshot للعنصر
+                "image": None, 
+                "data": comp 
+            })
+            
+        yield gallery_items, gallery_items, f"✅ Found {len(results)} components!", ""
+
+    def on_select(evt: gr.SelectData, gallery_list):
+        """عند النقر على عنصر في المعرض، اعرض الكود"""
+        if evt.index is not None and evt.index < len(gallery_list):
+            selected = gallery_list[evt.index]['data']
+            # نعرض الكود الخام
+            return clean_html_for_display(selected['html'])
+        return ""
+
+    def on_download(selected_list):
+        if not selected_list:
+            return None
+        # استخراج البيانات الأصلية
+        raw_data = [item['data'] for item in selected_list]
+        return create_zip_file(raw_data)
+
+    # ربط الأحداث
     extract_btn.click(
-        fn=process_url, 
-        inputs=[url_input, framework_select], 
-        outputs=[component_gallery, output_file, status_text]
+        fn=on_extract,
+        inputs=url_input,
+        outputs=[gallery, components_state, status_box, code_display]
+    )
+    
+    gallery.select(
+        fn=on_select,
+        inputs=[components_state],
+        outputs=[code_display]
     )
     
-    # عند اختيار عناصر من المعرض، نجهزها للتحميل
-    # ملاحظة: Gallery selection returns list of dicts
     download_btn.click(
-        fn=download_selected,
-        inputs=[component_gallery],
+        fn=on_download,
+        inputs=[components_state],
         outputs=[output_file]
     )