Upload app.py

app.py

@@ -0,0 +1,243 @@
+"""
+UI Regression Testing Tool v2.1 - Enhanced Transparency
+Full visibility into what's being compared and how.
+"""
+
+import gradio as gr
+import os
+import sys
+from datetime import datetime
+from pathlib import Path
+
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+
+from workflow import run_workflow
+from utils.report_generator import generate_transparency_report
+
+LOG_FILE = "app.log"
+
+
+def clear_logs():
+    with open(LOG_FILE, "w") as f:
+        f.write(f"===== Session: {datetime.now()} =====\n\n")
+
+
+def get_logs():
+    try:
+        with open(LOG_FILE, "r") as f:
+            return f.read()
+    except:
+        return "Logs will appear here..."
+
+
+def run_full_analysis(figma_key, figma_id, url, hf_token, progress=gr.Progress()):
+    """Run analysis with full transparency reporting."""
+    clear_logs()
+    
+    print(f"\n{'='*60}")
+    print(f"🚀 UI REGRESSION TEST v2.1 (Enhanced Transparency)")
+    print(f"{'='*60}")
+    print(f"⏰ {datetime.now()}")
+    print(f"🌐 Website: {url}")
+    print(f"📁 Figma: {figma_id}")
+    print(f"🤗 HF Token: {'✅ Provided' if hf_token else '❌ Not provided'}")
+    print(f"{'='*60}\n")
+    
+    if not figma_key or not figma_id or not url:
+        return (
+            "❌ Missing required fields:\n- Figma API Key\n- Figma File ID\n- Website URL",
+            "", "", "", "", None, None, None, None, None, None, get_logs()
+        )
+    
+    execution_id = f"exec_{datetime.now().strftime('%Y%m%d_%H%M%S')}"
+    thread_id = f"thread_{execution_id}"
+    
+    try:
+        progress(0.1, desc="🎨 Extracting from Figma...")
+        print("Starting workflow...")
+        
+        state = run_workflow(figma_id, figma_key, url, execution_id, thread_id, hf_token)
+        
+        if not state or not state.values:
+            return (
+                "❌ Workflow failed to return results",
+                "", "", "", "", None, None, None, None, None, None, get_logs()
+            )
+        
+        values = state.values
+        
+        if "failed" in values.get("status", ""):
+            error = values.get("error_message", "Unknown error")
+            return (
+                f"❌ Workflow Failed:\n{error}",
+                "", "", "", "", None, None, None, None, None, None, get_logs()
+            )
+        
+        progress(0.8, desc="📊 Generating transparency report...")
+        
+        # Generate detailed transparency report
+        report = generate_transparency_report(values, execution_id)
+        
+        # Extract data
+        overall_score = values.get("overall_score", 0)
+        viewport_scores = values.get("similarity_scores", {})
+        element_diffs = values.get("element_differences", [])
+        ai_analysis = values.get("ai_analysis", {})
+        figma_sum = values.get("figma_element_summary", {})
+        website_sum = values.get("website_element_summary", {})
+        
+        # Status summary
+        score_emoji = "🟢" if overall_score >= 90 else "🟡" if overall_score >= 70 else "🔴"
+        status = f"## {score_emoji} Overall Similarity: {overall_score:.1f}%\n\n"
+        
+        status += "### Viewport Scores\n"
+        for vp in ["desktop", "mobile"]:
+            if vp in viewport_scores:
+                sc = viewport_scores[vp]
+                e = "✅" if sc >= 90 else "⚠️" if sc >= 70 else "❌"
+                status += f"- {e} **{vp.capitalize()}**: {sc:.1f}%\n"
+            else:
+                status += f"- ❌ **{vp.capitalize()}**: NOT PROCESSED\n"
+        
+        status += f"\n**Total Differences:** {len(element_diffs)}\n"
+        
+        # AI summary
+        ai_summary = "## 🤖 AI Analysis\n\n"
+        ai_summary += f"**Mode:** {'AI-Enhanced' if ai_analysis.get('ai_enhanced') else 'Rule-based'}\n\n"
+        ai_summary += ai_analysis.get("summary", "Analysis complete.") + "\n\n"
+        
+        issues = ai_analysis.get("priority_issues", [])
+        if issues:
+            ai_summary += "### Priority Issues\n"
+            for i, issue in enumerate(issues, 1):
+                ai_summary += f"{i}. {issue}\n"
+        
+        # All differences
+        all_diffs = f"## 🔍 All Differences ({len(element_diffs)})\n\n"
+        
+        by_cat = {}
+        for d in element_diffs:
+            cat = d.get("category", "other")
+            by_cat.setdefault(cat, []).append(d)
+        
+        for cat in sorted(by_cat.keys()):
+            diffs = by_cat[cat]
+            emoji = {"size": "📐", "color": "🎨", "typography": "✏️", 
+                    "missing": "❌", "border": "🔲"}.get(cat, "•")
+            all_diffs += f"### {emoji} {cat.upper()} ({len(diffs)})\n\n"
+            
+            for d in diffs:
+                sev = "🔴" if d.get("severity") == "high" else "🟡"
+                elem = d.get("element_name", "?")
+                desc = d.get("description", "")
+                vp = d.get("viewport", "")
+                f_val = d.get("figma_value", "")
+                w_val = d.get("website_value", "")
+                
+                all_diffs += f"- {sev} **{elem}** [{vp}]: {desc}\n"
+                if f_val and w_val:
+                    all_diffs += f"  - Figma: `{f_val}` → Website: `{w_val}`\n"
+        
+        # Get images
+        figma_shots = values.get("figma_screenshots", {})
+        website_shots = values.get("website_screenshots", {})
+        comparison_imgs = values.get("comparison_images", {})
+        
+        progress(1.0, desc="✅ Complete!")
+        
+        return (
+            status,
+            ai_summary,
+            all_diffs,
+            report.get("workflow_log", ""),
+            report.get("viewport_status", "") + "\n" + report.get("ai_status", ""),
+            figma_shots.get("desktop"),
+            website_shots.get("desktop"),
+            comparison_imgs.get("desktop"),
+            figma_shots.get("mobile"),
+            website_shots.get("mobile"),
+            comparison_imgs.get("mobile"),
+            get_logs()
+        )
+        
+    except Exception as e:
+        import traceback
+        print(f"❌ Error: {e}")
+        traceback.print_exc()
+        return (
+            f"❌ Error: {str(e)}",
+            "", "", "", "", None, None, None, None, None, None, get_logs()
+        )
+
+
+def create_interface():
+    with gr.Blocks(title="UI Regression v2.1") as demo:
+        gr.Markdown("""
+        # 🎨 UI Regression Testing v2.1
+        *Element-level comparison with full transparency*
+        """)
+        
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Markdown("### ⚙️ Configuration")
+                figma_key = gr.Textbox(label="Figma API Key *", type="password")
+                figma_id = gr.Textbox(label="Figma File ID *")
+                website_url = gr.Textbox(label="Website URL *")
+                hf_token = gr.Textbox(label="HF Token (Optional)", type="password")
+                btn = gr.Button("🚀 Run Analysis", variant="primary", size="lg")
+                
+                gr.Markdown("""
+                **Figma Requirements:**
+                - Frame with "Desktop" in name (~1440px)
+                - Frame with "Mobile" in name (~375px)
+                """)
+            
+            with gr.Column(scale=2):
+                status_box = gr.Markdown("*Run analysis to see results*")
+        
+        with gr.Tabs():
+            with gr.TabItem("🤖 AI Insights"):
+                ai_box = gr.Markdown()
+            with gr.TabItem("🔍 All Differences"):
+                diff_box = gr.Markdown()
+            with gr.TabItem("📋 Workflow Log"):
+                workflow_box = gr.Markdown()
+            with gr.TabItem("🔧 Debug Info"):
+                debug_box = gr.Markdown()
+        
+        gr.Markdown("### 🖥️ Desktop")
+        with gr.Row():
+            figma_desktop = gr.Image(label="Figma", height=250)
+            website_desktop = gr.Image(label="Website", height=250)
+        comparison_desktop = gr.Image(label="Diff", height=350)
+        
+        gr.Markdown("### 📱 Mobile")
+        with gr.Row():
+            figma_mobile = gr.Image(label="Figma", height=350)
+            website_mobile = gr.Image(label="Website", height=350)
+        comparison_mobile = gr.Image(label="Diff", height=450)
+        
+        with gr.Accordion("📜 Logs", open=False):
+            log_box = gr.Code(language="python", lines=15)
+        
+        btn.click(
+            run_full_analysis,
+            inputs=[figma_key, figma_id, website_url, hf_token],
+            outputs=[
+                status_box, ai_box, diff_box, workflow_box, debug_box,
+                figma_desktop, website_desktop, comparison_desktop,
+                figma_mobile, website_mobile, comparison_mobile, log_box
+            ]
+        )
+    
+    return demo
+
+
+if __name__ == "__main__":
+    Path(LOG_FILE).parent.mkdir(parents=True, exist_ok=True)
+    with open(LOG_FILE, "w") as f:
+        f.write(f"===== Startup: {datetime.now()} =====\n\n")
+    
+    print(f"🚀 UI Regression v2.1 - {datetime.now()}")
+    demo = create_interface()
+    demo.launch(server_name="0.0.0.0", server_port=7860)