Update playwright_model.py

playwright_model.py

@@ -1,28 +1,26 @@
-import asyncio
 import os
-from playwright.async_api import async_playwright
+from playwright.sync_api import sync_playwright
 from PIL import Image
 from fpdf import FPDF
 
 OUTPUT_DIR = "static/outputs"
 
-async def capture_workflows(public_url: str, pdf_filename: str = "workflow_screens.pdf"):
+def capture_workflows(public_url: str, pdf_filename: str = "workflow_screens.pdf"):
     os.makedirs(OUTPUT_DIR, exist_ok=True)
     pdf_path = os.path.join(OUTPUT_DIR, pdf_filename)
 
-    async with async_playwright() as p:
-        browser = await p.chromium.launch(headless=True)
-        page = await browser.new_page()
+    with sync_playwright() as p:
+        browser = p.chromium.launch(headless=True)
+        page = browser.new_page()
         print(f"Opening page: {public_url}")
-        await page.goto(public_url, wait_until="load")
+        page.goto(public_url, wait_until="load")
 
-        # --- Utility: wait for stable layout ---
-        async def wait_for_layout_stable():
-            await page.evaluate("""
-                (async () => {
+        def wait_for_layout_stable():
+            page.evaluate("""
+                (() => {
                     let stableCount = 0;
                     let lastHeight = document.body.scrollHeight;
-                    await new Promise((resolve) => {
+                    return new Promise((resolve) => {
                         const check = setInterval(() => {
                             const current = document.body.scrollHeight;
                             if (Math.abs(current - lastHeight) < 1) {
@@ -40,69 +38,128 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                 })();
             """)
 
-        # --- Fix only sidebar; keep top bar dynamic per screen ---
-        async def fix_layout_dynamically():
+        def fix_layout_dynamically():
             try:
-                await page.evaluate("""
-                    const sidebar = document.querySelector('aside, .sidebar, nav');
-                    const topbar = document.querySelector('.top-bar, header, .app-header, .navbar, .page-header');
-
-                    // Reset old fixed styles
-                    [sidebar, topbar].forEach(el => {
-                        if (!el) return;
-                        el.style.position = '';
-                        el.style.top = '';
-                        el.style.left = '';
-                        el.style.width = '';
-                        el.style.height = '';
-                        el.style.zIndex = '';
-                        el.style.overflow = '';
-                        el.style.transition = '';
-                    });
-
-                    // Fix sidebar only (topbar remains dynamic)
-                    if (sidebar) {
-                        const rect = sidebar.getBoundingClientRect();
-                        const sidebarWidth = rect.width || sidebar.offsetWidth || 220;
-                        const topOffset = topbar ? topbar.offsetHeight || 60 : 60;
-
-                        sidebar.style.position = 'fixed';
-                        sidebar.style.top = topOffset + 'px';
-                        sidebar.style.left = '0';
-                        sidebar.style.height = `calc(100vh - ${topOffset}px)`;
-                        sidebar.style.width = sidebarWidth + 'px';
-                        sidebar.style.zIndex = '1000';
-                        sidebar.style.overflow = 'auto';
-                        sidebar.style.transition = 'none';
-                        sidebar.dataset.locked = 'true';
-                    }
-
-                    const main = document.querySelector('main, .main-content, .app-body, .content');
-                    if (main && sidebar) {
-                        main.style.marginLeft = sidebar.offsetWidth + 'px';
-                        main.style.marginTop = topbar ? (topbar.offsetHeight || 60) + 'px' : '0';
-                        main.style.position = 'relative';
-                    }
-
-                    window.scrollTo(0, 0);
+                page.evaluate("""
+                    (() => {
+                        console.log('🔧 Fixing layout...');
+                        
+                        // Reset all layout elements
+                        const resetSelectors = [
+                            '.top-bar, header, .app-header, .navbar, .page-header',
+                            'aside, .sidebar, nav',
+                            'main, .main-content, .app-body, .content, .page-content'
+                        ];
+                        
+                        resetSelectors.forEach(selector => {
+                            document.querySelectorAll(selector).forEach(el => {
+                                if (el) {
+                                    el.style.position = '';
+                                    el.style.top = '';
+                                    el.style.left = '';
+                                    el.style.width = '';
+                                    el.style.height = '';
+                                    el.style.zIndex = '';
+                                    el.style.overflow = '';
+                                    el.style.transition = '';
+                                    el.style.marginLeft = '';
+                                    el.style.marginTop = '';
+                                    el.style.paddingTop = '';
+                                }
+                            });
+                        });
+                        
+                        document.body.style.marginTop = '';
+                        
+                        // Get accurate height including margins
+                        const getAccurateHeight = (element) => {
+                            if (!element) return 60;
+                            element.offsetHeight; // Force reflow
+                            const rect = element.getBoundingClientRect();
+                            const style = window.getComputedStyle(element);
+                            const marginTop = parseInt(style.marginTop) || 0;
+                            const marginBottom = parseInt(style.marginBottom) || 0;
+                            return Math.max(rect.height, element.offsetHeight) + marginTop + marginBottom;
+                        };
+                        
+                        // Fix topbar with highest priority
+                        const topbarSelectors = '.top-bar, header, .app-header, .navbar, .page-header';
+                        const topbar = document.querySelector(topbarSelectors);
+                        let topOffset = 60;
+                        
+                        if (topbar) {
+                            topOffset = getAccurateHeight(topbar);
+                            
+                            topbar.style.position = 'fixed';
+                            topbar.style.top = '0';
+                            topbar.style.left = '0';
+                            topbar.style.width = '100%';
+                            topbar.style.zIndex = '10000';
+                            topbar.style.transition = 'none';
+                            topbar.style.boxSizing = 'border-box';
+                            
+                            // Push page down to reveal content
+                            document.body.style.marginTop = topOffset + 'px';
+                            console.log('✅ Topbar height:', topOffset, 'px');
+                        }
+                        
+                        // Fix sidebar below topbar
+                        const sidebarSelectors = 'aside, .sidebar, nav';
+                        const sidebar = document.querySelector(sidebarSelectors);
+                        
+                        if (sidebar) {
+                            const sidebarWidth = sidebar.offsetWidth || 220;
+                            
+                            sidebar.style.position = 'fixed';
+                            sidebar.style.top = topOffset + 'px';
+                            sidebar.style.left = '0';
+                            sidebar.style.height = `calc(100vh - ${topOffset}px)`;
+                            sidebar.style.width = sidebarWidth + 'px';
+                            sidebar.style.zIndex = '9999';
+                            sidebar.style.overflow = 'auto';
+                            sidebar.style.transition = 'none';
+                            sidebar.style.boxSizing = 'border-box';
+                            
+                            console.log('✅ Sidebar top:', topOffset, 'px');
+                            
+                            // Fix content spacing
+                            const contentSelectors = 'main, .main-content, .app-body, .content, .page-content';
+                            document.querySelectorAll(contentSelectors).forEach(el => {
+                                if (el) {
+                                    el.style.marginLeft = sidebarWidth + 'px';
+                                    el.style.position = 'relative';
+                                    el.style.paddingTop = '20px'; // Add breathing room for titles
+                                }
+                            });
+                        }
+                        
+                        // Hide any duplicate title bars
+                        document.querySelectorAll('.title-bar:not(.top-bar):not(header)').forEach(el => {
+                            if (window.getComputedStyle(el).position === 'fixed') {
+                                el.style.display = 'none';
+                            }
+                        });
+                        
+                        window.scrollTo(0, 0);
+                        console.log('✅ Layout fix completed');
+                    })();
                 """)
             except Exception as e:
                 print(f"[WARN] Layout fix failed: {e}")
 
-        # --- Wait until sidebar exists ---
-        await page.wait_for_selector("aside, .sidebar, nav", timeout=5000)
-        await wait_for_layout_stable()
-        await fix_layout_dynamically()
-        await asyncio.sleep(1)
+        # Wait for sidebar and stabilize
+        page.wait_for_selector("aside, .sidebar, nav", timeout=5000)
+        wait_for_layout_stable()
+        fix_layout_dynamically()
+        page.wait_for_timeout(2000)  # Increased wait for rendering
 
-        # --- JS Logic: detect workflows and tabs dynamically ---
+        # JS logic for capturing workflows
         js_logic = """
         (function(){
           const menus=[...document.querySelectorAll('.menu-item')];
           const screens=[...document.querySelectorAll('.screen')];
           window.__ordered=[];
           const seen=new Set();
-
           for(const m of menus){
             let id=m.dataset.screen||m.dataset.target;
             if(!id){
@@ -112,15 +169,12 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             const s=screens.find(x=>x.id===id);
             if(s && !seen.has(s)){seen.add(s);window.__ordered.push({menu:m,screen:s});}
           }
-
           for(const s of screens)
             if(!seen.has(s))
               window.__ordered.push({menu:null,screen:s});
-
           window.__visitedWorkflows=[];
           window.__currentIndex=0;
           window.__done=false;
-
           window.__getSubScreens = function(screen){
             const tabs=[...screen.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
             const list=[];
@@ -130,21 +184,17 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             }
             return list;
           };
-
-          window.__captureNext=async function(){
+          window.__captureNext=function(){
             if(window.__done) return false;
             if(window.__currentIndex>=window.__ordered.length){window.__done=true;return false;}
-
             const pair=window.__ordered[window.__currentIndex];
             const {menu,screen}=pair;
             if(!screen){window.__done=true;return false;}
-
             const wfName=screen.id || screen.getAttribute('data-name') || ('screen_'+window.__currentIndex);
             if(window.__visitedWorkflows.includes(wfName)){
               window.__currentIndex++;
               return window.__captureNext();
             }
-
             window.__visitedWorkflows.push(wfName);
             document.querySelectorAll('.screen').forEach(s=>s.classList.remove('active'));
             document.querySelectorAll('.menu-item').forEach(m=>m.classList.remove('active'));
@@ -152,12 +202,10 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             if(menu) menu.classList.add('active');
             screen.scrollIntoView({behavior:'smooth',block:'center'});
             window.__currentIndex++;
-
             const subs = window.__getSubScreens(screen);
             return {screenName:wfName, subScreens:subs};
           };
-
-          window.__clickSubScreen = async function(name){
+          window.__clickSubScreen = function(name){
             const tabs=[...document.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
             const t=tabs.find(x=>x.textContent.trim()===name);
             if(t){t.click(); return true;}
@@ -165,15 +213,15 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
           };
         })();
         """
-        await page.evaluate(js_logic)
-        await asyncio.sleep(1)
+        page.evaluate(js_logic)
+        page.wait_for_timeout(1000)
 
         screenshots = []
         index = 0
 
-        # --- Capture all screens ---
+        # Capture all screens
         while True:
-            result = await page.evaluate("window.__captureNext()")
+            result = page.evaluate("window.__captureNext()")
             if not result:
                 break
 
@@ -182,16 +230,16 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
             screenshot_path = os.path.join(OUTPUT_DIR, f"{screen_name}.png")
             print(f"📸 Capturing main screen: {screen_name}")
 
-            await wait_for_layout_stable()
-            await fix_layout_dynamically()
-            await asyncio.sleep(1.0)
-            await page.screenshot(path=screenshot_path, full_page=True)
+            wait_for_layout_stable()
+            fix_layout_dynamically()
+            page.wait_for_timeout(1000)
+            page.screenshot(path=screenshot_path, full_page=True)
             screenshots.append(screenshot_path)
 
-            # --- Capture sub-tabs ---
+            # Capture sub-tabs
             first_active_skipped = False
             for sub in sub_screens:
-                is_active = await page.evaluate(
+                is_active = page.evaluate(
                     """(subText) => {
                         const tabs=[...document.querySelectorAll('.tab, .nav-link, [role="tab"], [data-tab], .sub-tab, .tab-item')];
                         const t=tabs.find(x=>x.textContent.trim()===subText);
@@ -206,21 +254,21 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
                     continue
 
                 print(f"   ↳ Capturing sub-screen: {sub}")
-                await page.evaluate(f"window.__clickSubScreen('{sub}')")
-                await wait_for_layout_stable()
-                await fix_layout_dynamically()
-                await asyncio.sleep(1.0)
+                page.evaluate(f"window.__clickSubScreen('{sub}')")
+                wait_for_layout_stable()
+                fix_layout_dynamically()
+                page.wait_for_timeout(1000)
 
                 sub_name_clean = sub.replace(" ", "_").lower()
                 sub_path = os.path.join(OUTPUT_DIR, f"{screen_name}_{sub_name_clean}.png")
-                await page.screenshot(path=sub_path, full_page=True)
+                page.screenshot(path=sub_path, full_page=True)
                 screenshots.append(sub_path)
 
             index += 1
 
-        await browser.close()
+        browser.close()
 
-        # --- Generate PDF ---
+        # Generate PDF
         if not screenshots:
             raise RuntimeError("No screenshots captured — check if .screen elements exist!")
 
@@ -239,5 +287,4 @@ async def capture_workflows(public_url: str, pdf_filename: str = "workflow_scree
         print(f"✅ PDF generated successfully: {pdf_path}")
         return pdf_path
 
-
 generate_ui_report = capture_workflows