app.py

"""
Web Testing Suite for Hugging Face Spaces
Interactive UI with Gradio for Performance, SEO, Security, Accessibility Testing
"""

import gradio as gr
import time
import ssl
import socket
import json
import requests
from urllib.parse import urljoin, urlparse
from bs4 import BeautifulSoup
from datetime import datetime
import re
from typing import Dict, List, Tuple

# ============================================================================
# PERFORMANCE TESTING
# ============================================================================

class PerformanceTester:
    def __init__(self, url: str):
        self.url = url
    
    def measure_ttfb(self) -> float:
        try:
            start = time.time()
            response = requests.get(self.url, stream=True, timeout=10)
            ttfb = time.time() - start
            return round(ttfb * 1000, 2)
        except Exception as e:
            return f"Error: {e}"
    
    def get_payload_size(self) -> Dict:
        try:
            response = requests.get(self.url, timeout=10)
            html_size = len(response.content)
            
            soup = BeautifulSoup(response.content, 'html.parser')
            
            scripts = len(soup.find_all('script', src=True))
            stylesheets = len(soup.find_all('link', rel='stylesheet'))
            images = len(soup.find_all('img'))
            
            return {
                'html_size_kb': round(html_size / 1024, 2),
                'script_count': scripts,
                'stylesheet_count': stylesheets,
                'image_count': images,
                'compression': response.headers.get('Content-Encoding', 'none')
            }
        except Exception as e:
            return {'error': str(e)}
    
    def test_all(self) -> str:
        result = f"⚡ **PERFORMANCE TEST RESULTS**\n\n"
        result += f"🌐 URL: {self.url}\n\n"
        recommendations = []
        
        # TTFB
        ttfb = self.measure_ttfb()
        if isinstance(ttfb, float):
            if ttfb < 200:
                status = "✅ Excellent"
            elif ttfb < 500:
                status = "⚠️ Needs Improvement"
                recommendations.append("🔧 **TTFB Issue:** Reduce server response time by:\n   • Using a CDN\n   • Optimizing database queries\n   • Enabling caching\n   • Upgrading server resources")
            else:
                status = "❌ Poor"
                recommendations.append("🚨 **Critical TTFB Issue:** Immediate action required:\n   • Check server health and resources\n   • Implement Redis/Memcached caching\n   • Use a CDN (Cloudflare, AWS CloudFront)\n   • Optimize backend code\n   • Consider server upgrade")
            result += f"⏱️ **Time To First Byte:** {ttfb} ms {status}\n"
        else:
            result += f"⏱️ **Time To First Byte:** {ttfb}\n"
        
        # Payload
        payload = self.get_payload_size()
        if 'error' not in payload:
            result += f"\n📦 **Page Size:** {payload['html_size_kb']} KB"
            if payload['html_size_kb'] > 1000:
                result += " ❌"
                recommendations.append("🚨 **Large Page Size:** Reduce HTML size:\n   • Minify HTML, CSS, and JavaScript\n   • Remove unused code\n   • Compress images\n   • Implement lazy loading")
            elif payload['html_size_kb'] > 500:
                result += " ⚠️"
                recommendations.append("🔧 **Page Size Warning:** Consider:\n   • Enabling Gzip/Brotli compression\n   • Minifying resources\n   • Optimizing images")
            else:
                result += " ✅"
            
            result += f"\n📜 **Scripts:** {payload['script_count']}"
            if payload['script_count'] > 20:
                result += " ⚠️"
                recommendations.append("🔧 **Too Many Scripts:** Reduce JavaScript files:\n   • Bundle scripts together\n   • Remove unused libraries\n   • Use async/defer attributes\n   • Implement code splitting")
            
            result += f"\n🎨 **Stylesheets:** {payload['stylesheet_count']}"
            if payload['stylesheet_count'] > 10:
                result += " ⚠️"
                recommendations.append("🔧 **Too Many Stylesheets:** Optimize CSS:\n   • Combine CSS files\n   • Remove unused styles\n   • Use CSS minification\n   • Consider critical CSS approach")
            
            result += f"\n🖼️ **Images:** {payload['image_count']}"
            result += f"\n🗜️ **Compression:** {payload['compression']}"
            if payload['compression'] == 'none':
                result += " ❌"
                recommendations.append("🚨 **No Compression:** Enable compression:\n   • Add Gzip/Brotli to server config\n   • For Apache: Enable mod_deflate\n   • For Nginx: Add gzip on;\n   • For Node.js: Use compression middleware")
        
        # Add recommendations section
        if recommendations:
            result += f"\n\n{'='*50}\n"
            result += f"💡 **RECOMMENDATIONS**\n\n"
            result += "\n\n".join(recommendations)
        
        return result


# ============================================================================
# SEO AUDITOR
# ============================================================================

class SEOAuditor:
    def __init__(self, url: str):
        self.url = url
        self.soup = None
    
    def fetch_page(self):
        try:
            response = requests.get(self.url, timeout=10)
            self.soup = BeautifulSoup(response.content, 'html.parser')
        except Exception as e:
            return False
        return True
    
    def check_meta_tags(self) -> Dict:
        title = self.soup.find('title')
        description = self.soup.find('meta', attrs={'name': 'description'})
        og_title = self.soup.find('meta', property='og:title')
        og_description = self.soup.find('meta', property='og:description')
        og_image = self.soup.find('meta', property='og:image')
        canonical = self.soup.find('link', rel='canonical')
        
        return {
            'title': title.text if title else '❌ Missing',
            'title_length': len(title.text) if title else 0,
            'description': description.get('content')[:100] + '...' if description else '❌ Missing',
            'og_title': '✅ Present' if og_title else '❌ Missing',
            'og_description': '✅ Present' if og_description else '❌ Missing',
            'og_image': '✅ Present' if og_image else '❌ Missing',
            'canonical': '✅ Present' if canonical else '❌ Missing'
        }
    
    def check_headers(self) -> Dict:
        h1 = self.soup.find_all('h1')
        h2 = self.soup.find_all('h2')
        h3 = self.soup.find_all('h3')
        
        return {
            'h1_count': len(h1),
            'h1_text': [h.text.strip()[:50] for h in h1][:3],
            'h2_count': len(h2),
            'h3_count': len(h3),
            'valid': len(h1) == 1
        }
    
    def check_sitemap(self) -> Dict:
        sitemap_url = urljoin(self.url, '/sitemap.xml')
        try:
            resp = requests.get(sitemap_url, timeout=5)
            return {'exists': resp.status_code == 200}
        except:
            return {'exists': False}
    
    def audit(self) -> str:
        result = f"🔍 **SEO AUDIT RESULTS**\n\n"
        result += f"🌐 URL: {self.url}\n\n"
        recommendations = []
        
        if not self.fetch_page():
            return result + "❌ Failed to fetch page"
        
        # Meta Tags
        meta = self.check_meta_tags()
        result += f"📝 **Meta Tags**\n"
        
        # Title
        result += f"• Title: {meta['title']}\n"
        result += f"• Title Length: {meta['title_length']} chars "
        if 50 <= meta['title_length'] <= 60:
            result += f"✅\n"
        else:
            result += f"⚠️\n"
            if meta['title'] == '❌ Missing':
                recommendations.append("🚨 **Missing Title Tag:**\n   • Add <title>Your Page Title</title> in <head>\n   • Keep it 50-60 characters\n   • Include primary keyword\n   • Make it unique for each page")
            elif meta['title_length'] < 50:
                recommendations.append("🔧 **Title Too Short:**\n   • Expand to 50-60 characters\n   • Add descriptive keywords\n   • Include brand name")
            elif meta['title_length'] > 60:
                recommendations.append("🔧 **Title Too Long:**\n   • Shorten to 50-60 characters\n   • Google truncates at ~60 chars\n   • Keep most important words first")
        
        # Description
        result += f"• Description: {meta['description']}\n"
        if meta['description'] == '❌ Missing':
            recommendations.append("🚨 **Missing Meta Description:**\n   • Add <meta name=\"description\" content=\"...\">\n   • Keep it 150-160 characters\n   • Include target keywords naturally\n   • Make it compelling for click-through")
        
        # Open Graph
        result += f"• OG Title: {meta['og_title']}\n"
        result += f"• OG Description: {meta['og_description']}\n"
        result += f"• OG Image: {meta['og_image']}\n"
        if meta['og_title'] == '❌ Missing' or meta['og_description'] == '❌ Missing' or meta['og_image'] == '❌ Missing':
            recommendations.append("⚠️ **Missing Open Graph Tags:**\n   • Add <meta property=\"og:title\" content=\"...\">\n   • Add <meta property=\"og:description\" content=\"...\">\n   • Add <meta property=\"og:image\" content=\"...\">\n   • Improves social media sharing appearance")
        
        # Canonical
        result += f"• Canonical: {meta['canonical']}\n\n"
        if meta['canonical'] == '❌ Missing':
            recommendations.append("⚠️ **Missing Canonical Tag:**\n   • Add <link rel=\"canonical\" href=\"...\">\n   • Prevents duplicate content issues\n   • Points to preferred URL version")
        
        # Headers
        headers = self.check_headers()
        result += f"📋 **Header Structure**\n"
        result += f"• H1 Count: {headers['h1_count']} {'✅' if headers['valid'] else '❌'}\n"
        if not headers['valid']:
            if headers['h1_count'] == 0:
                recommendations.append("🚨 **Missing H1 Tag:**\n   • Add exactly ONE <h1> tag per page\n   • Should describe main page content\n   • Include primary keyword\n   • Must be unique on page")
            elif headers['h1_count'] > 1:
                recommendations.append("❌ **Multiple H1 Tags:**\n   • Use only ONE <h1> per page\n   • Convert extra H1s to <h2> or <h3>\n   • Maintains proper heading hierarchy\n   • Better for SEO and accessibility")
        
        if headers['h1_text']:
            result += f"• H1 Text: {headers['h1_text'][0]}\n"
        result += f"• H2 Count: {headers['h2_count']}\n"
        result += f"• H3 Count: {headers['h3_count']}\n\n"
        
        # Sitemap
        sitemap = self.check_sitemap()
        result += f"🗺️ **Sitemap:** {'✅ Found' if sitemap['exists'] else '❌ Not Found'}\n"
        if not sitemap['exists']:
            recommendations.append("❌ **Missing Sitemap:**\n   • Create sitemap.xml file\n   • List all important pages\n   • Submit to Google Search Console\n   • Update when adding new pages\n   • Use sitemap generator tools")
        
        # Add recommendations
        if recommendations:
            result += f"\n{'='*50}\n"
            result += f"💡 **SEO RECOMMENDATIONS**\n\n"
            result += "\n\n".join(recommendations)
        
        return result


# ============================================================================
# SECURITY TESTER
# ============================================================================

class SecurityTester:
    def __init__(self, url: str):
        self.url = url
        self.domain = urlparse(url).netloc
    
    def check_ssl(self) -> Dict:
        try:
            context = ssl.create_default_context()
            with socket.create_connection((self.domain, 443), timeout=5) as sock:
                with context.wrap_socket(sock, server_hostname=self.domain) as ssock:
                    cert = ssock.getpeercert()
                    return {
                        'valid': True,
                        'expires': cert['notAfter']
                    }
        except Exception as e:
            return {'valid': False, 'error': str(e)}
    
    def check_security_headers(self) -> Dict:
        try:
            response = requests.get(self.url, timeout=10)
            headers = response.headers
            
            return {
                'hsts': headers.get('Strict-Transport-Security', '❌'),
                'x_content_type': headers.get('X-Content-Type-Options', '❌'),
                'x_frame': headers.get('X-Frame-Options', '❌'),
                'csp': headers.get('Content-Security-Policy', '❌'),
                'referrer': headers.get('Referrer-Policy', '❌')
            }
        except Exception as e:
            return {'error': str(e)}
    
    def check_mixed_content(self) -> List[str]:
        if not self.url.startswith('https'):
            return ['⚠️ Page is not HTTPS']
        
        try:
            response = requests.get(self.url, timeout=10)
            soup = BeautifulSoup(response.content, 'html.parser')
            mixed = []
            
            for tag in soup.find_all(['img', 'script', 'link']):
                src = tag.get('src') or tag.get('href', '')
                if src.startswith('http://'):
                    mixed.append(src[:50])
            
            return mixed[:5] if mixed else ['✅ No mixed content']
        except:
            return ['Error checking']
    
    def test_all(self) -> str:
        result = f"🔒 **SECURITY TEST RESULTS**\n\n"
        result += f"🌐 URL: {self.url}\n\n"
        recommendations = []
        
        # SSL
        ssl_info = self.check_ssl()
        if ssl_info['valid']:
            result += f"🔐 **SSL Certificate:** ✅ Valid\n"
            result += f"• Expires: {ssl_info['expires']}\n\n"
        else:
            result += f"🔐 **SSL Certificate:** ❌ Invalid\n\n"
            recommendations.append("🚨 **SSL Certificate Issue:**\n   • Install valid SSL certificate\n   • Use Let's Encrypt (free)\n   • Or purchase from trusted CA\n   • Configure HTTPS redirect\n   • Update all internal links to HTTPS")
        
        # Security Headers
        headers = self.check_security_headers()
        if 'error' not in headers:
            result += f"🛡️ **Security Headers**\n"
            
            # HSTS
            hsts_present = headers['hsts'] != '❌'
            result += f"• HSTS: {'✅' if hsts_present else '❌'}\n"
            if not hsts_present:
                recommendations.append("❌ **Missing HSTS Header:**\n   • Add: Strict-Transport-Security: max-age=31536000\n   • Forces HTTPS connections\n   • Prevents protocol downgrade attacks\n   • Apache: Header always set Strict-Transport-Security \"max-age=31536000\"\n   • Nginx: add_header Strict-Transport-Security \"max-age=31536000\";")
            
            # X-Content-Type-Options
            xct_present = headers['x_content_type'] != '❌'
            result += f"• X-Content-Type-Options: {'✅' if xct_present else '❌'}\n"
            if not xct_present:
                recommendations.append("❌ **Missing X-Content-Type-Options:**\n   • Add: X-Content-Type-Options: nosniff\n   • Prevents MIME type sniffing\n   • Reduces XSS attack vectors\n   • Apache: Header set X-Content-Type-Options \"nosniff\"\n   • Nginx: add_header X-Content-Type-Options \"nosniff\";")
            
            # X-Frame-Options
            xfo_present = headers['x_frame'] != '❌'
            result += f"• X-Frame-Options: {'✅' if xfo_present else '❌'}\n"
            if not xfo_present:
                recommendations.append("❌ **Missing X-Frame-Options:**\n   • Add: X-Frame-Options: SAMEORIGIN\n   • Prevents clickjacking attacks\n   • Blocks iframe embedding by other sites\n   • Apache: Header always set X-Frame-Options \"SAMEORIGIN\"\n   • Nginx: add_header X-Frame-Options \"SAMEORIGIN\";")
            
            # CSP
            csp_present = headers['csp'] != '❌'
            result += f"• Content-Security-Policy: {'✅' if csp_present else '❌'}\n"
            if not csp_present:
                recommendations.append("⚠️ **Missing Content-Security-Policy:**\n   • Add CSP header to prevent XSS\n   • Example: Content-Security-Policy: default-src 'self'\n   • Restricts resource loading sources\n   • Start with report-only mode\n   • Use CSP evaluator tools to test")
            
            # Referrer Policy
            ref_present = headers['referrer'] != '❌'
            result += f"• Referrer-Policy: {'✅' if ref_present else '❌'}\n\n"
            if not ref_present:
                recommendations.append("⚠️ **Missing Referrer-Policy:**\n   • Add: Referrer-Policy: strict-origin-when-cross-origin\n   • Controls referrer information\n   • Protects user privacy\n   • Apache: Header set Referrer-Policy \"strict-origin-when-cross-origin\"\n   • Nginx: add_header Referrer-Policy \"strict-origin-when-cross-origin\";")
        
        # Mixed Content
        mixed = self.check_mixed_content()
        result += f"📦 **Mixed Content Check**\n"
        has_mixed = False
        for item in mixed:
            result += f"• {item}\n"
            if item.startswith('http://'):
                has_mixed = True
        
        if has_mixed:
            recommendations.append("❌ **Mixed Content Detected:**\n   • Change all HTTP resources to HTTPS\n   • Update image sources\n   • Update script/stylesheet URLs\n   • Check third-party integrations\n   • Use protocol-relative URLs: //example.com")
        
        # Add recommendations
        if recommendations:
            result += f"\n{'='*50}\n"
            result += f"💡 **SECURITY RECOMMENDATIONS**\n\n"
            result += "\n\n".join(recommendations)
        
        return result


# ============================================================================
# ACCESSIBILITY TESTER
# ============================================================================

class AccessibilityTester:
    def __init__(self, url: str):
        self.url = url
        self.soup = None
    
    def fetch_page(self):
        try:
            response = requests.get(self.url, timeout=10)
            self.soup = BeautifulSoup(response.content, 'html.parser')
            return True
        except:
            return False
    
    def check_alt_attributes(self) -> Dict:
        images = self.soup.find_all('img')
        missing_alt = []
        
        for img in images:
            if not img.get('alt'):
                src = img.get('src', 'No src')[:50]
                missing_alt.append(src)
        
        return {
            'total': len(images),
            'missing': len(missing_alt),
            'samples': missing_alt[:5]
        }
    
    def check_form_labels(self) -> Dict:
        inputs = self.soup.find_all(['input', 'textarea', 'select'])
        missing_labels = 0
        
        for inp in inputs:
            input_id = inp.get('id')
            aria_label = inp.get('aria-label')
            
            if input_id:
                label = self.soup.find('label', attrs={'for': input_id})
                if not label and not aria_label:
                    missing_labels += 1
            elif not aria_label:
                missing_labels += 1
        
        return {
            'total': len(inputs),
            'missing': missing_labels
        }
    
    def test_all(self) -> str:
        result = f"♿ **ACCESSIBILITY TEST RESULTS**\n\n"
        result += f"🌐 URL: {self.url}\n\n"
        recommendations = []
        
        if not self.fetch_page():
            return result + "❌ Failed to fetch page"
        
        # Alt Attributes
        alt_check = self.check_alt_attributes()
        result += f"🖼️ **Image Alt Attributes**\n"
        result += f"• Total Images: {alt_check['total']}\n"
        result += f"• Missing Alt: {alt_check['missing']} "
        if alt_check['missing'] == 0:
            result += f"✅\n"
        else:
            result += f"❌\n"
            recommendations.append(f"❌ **Missing Alt Attributes ({alt_check['missing']} images):**\n   • Add descriptive alt text to all images\n   • Example: <img src=\"photo.jpg\" alt=\"Person coding on laptop\">\n   • Describe image content clearly\n   • Use empty alt=\"\" for decorative images\n   • Improves screen reader experience\n   • Benefits SEO")
        
        if alt_check['samples']:
            result += f"• Sample Missing Alt: {', '.join(alt_check['samples'][:2])}\n"
        result += f"\n"
        
        # Form Labels
        label_check = self.check_form_labels()
        result += f"📝 **Form Labels**\n"
        result += f"• Total Inputs: {label_check['total']}\n"
        result += f"• Missing Labels: {label_check['missing']} "
        if label_check['missing'] == 0:
            result += f"✅\n"
        else:
            result += f"❌\n"
            recommendations.append(f"❌ **Missing Form Labels ({label_check['missing']} inputs):**\n   • Add <label> for each input field\n   • Example: <label for=\"email\">Email:</label>\n   • Or use aria-label attribute\n   • Example: <input aria-label=\"Search\">\n   • Helps users understand form purpose\n   • Required for WCAG compliance\n   • Improves mobile usability")
        
        # Add recommendations
        if recommendations:
            result += f"\n{'='*50}\n"
            result += f"💡 **ACCESSIBILITY RECOMMENDATIONS**\n\n"
            result += "\n\n".join(recommendations)
            result += f"\n\n{'='*50}\n"
            result += f"📚 **Additional Resources:**\n"
            result += f"• WCAG Guidelines: https://www.w3.org/WAI/WCAG21/quickref/\n"
            result += f"• WebAIM: https://webaim.org/\n"
            result += f"• A11Y Project: https://www.a11yproject.com/\n"
        
        return result


# ============================================================================
# GRADIO INTERFACE
# ============================================================================

def run_performance_test(url):
    if not url:
        return "⚠️ Please enter a URL"
    if not url.startswith(('http://', 'https://')):
        url = 'https://' + url
    try:
        tester = PerformanceTester(url)
        return tester.test_all()
    except Exception as e:
        return f"❌ Error: {str(e)}"

def run_seo_audit(url):
    if not url:
        return "⚠️ Please enter a URL"
    if not url.startswith(('http://', 'https://')):
        url = 'https://' + url
    try:
        auditor = SEOAuditor(url)
        return auditor.audit()
    except Exception as e:
        return f"❌ Error: {str(e)}"

def run_security_test(url):
    if not url:
        return "⚠️ Please enter a URL"
    if not url.startswith(('http://', 'https://')):
        url = 'https://' + url
    try:
        tester = SecurityTester(url)
        return tester.test_all()
    except Exception as e:
        return f"❌ Error: {str(e)}"

def run_accessibility_test(url):
    if not url:
        return "⚠️ Please enter a URL"
    if not url.startswith(('http://', 'https://')):
        url = 'https://' + url
    try:
        tester = AccessibilityTester(url)
        return tester.test_all()
    except Exception as e:
        return f"❌ Error: {str(e)}"

def run_all_tests(url):
    if not url:
        return "⚠️ Please enter a URL", "", "", ""
    if not url.startswith(('http://', 'https://')):
        url = 'https://' + url
    
    perf = run_performance_test(url)
    seo = run_seo_audit(url)
    sec = run_security_test(url)
    a11y = run_accessibility_test(url)
    
    return perf, seo, sec, a11y

# Custom CSS for scrollable textboxes
custom_css = """
.scrollable-textbox textarea {
    max-height: 400px !important;
    overflow-y: auto !important;
}
"""

# Create Gradio Interface
with gr.Blocks(title="Web Testing Suite", theme=gr.themes.Soft(), css=custom_css) as demo:
    gr.Markdown("""
    # 🚀 Comprehensive Web Testing Suite
    Test any website for **Performance**, **SEO**, **Security**, and **Accessibility**
    """)
    
    with gr.Row():
        url_input = gr.Textbox(
            label="🌐 Website URL",
            placeholder="https://example.com or example.com",
            scale=3
        )
    
    with gr.Row():
        test_all_btn = gr.Button("🔍 Run All Tests", variant="primary", scale=1)
        guideline_btn = gr.Button("📖 Show Guidelines", variant="secondary", scale=1)
    
    # Guidelines Accordion
    with gr.Accordion("📋 Testing Guidelines & Features", open=False, visible=False) as guidelines_section:
        gr.Markdown("""
        ## 📦 What's Included

        ### 1. ⚡ Performance Tester
        - **TTFB** (Time To First Byte)
        - Full page load metrics with Selenium
        - DNS, TCP, and response time measurements
        - Payload size analysis (HTML, CSS, JS, images)
        - Resource count tracking
        - Lighthouse integration for Core Web Vitals (FCP, LCP, CLS, TTI)

        ### 2. 🔍 SEO Auditor
        - Meta tag validation (title, description, OG tags)
        - Title/description length optimization checks
        - Header structure analysis (H1-H3)
        - Broken internal link detection
        - Sitemap.xml verification
        - JSON-LD schema extraction

        ### 3. 🔒 Security Tester
        - SSL certificate validation & expiry check
        - Security headers audit (CSP, HSTS, X-Frame-Options, etc.)
        - Mixed content detection (HTTP on HTTPS pages)
        - Basic XSS vulnerability testing
        - CORS configuration analysis

        ### 4. ♿ Accessibility Tester
        - Missing alt attribute detection
        - ARIA role validation
        - Form label checking
        - Keyboard focus/tabindex analysis
        - WCAG compliance indicators

        ### 5. 🤖 E2E Tester (Selenium)
        - Login flow automation
        - Form submission testing
        - Button click interactions
        - Screenshot capture
        - Performance tracing
        - Custom test suite runner

        ---

        ## 💡 How to Use
        1. Enter your website URL (with or without https://)
        2. Click **"Run All Tests"** for comprehensive analysis
        3. Or click individual test buttons for specific checks
        4. View detailed results in each tab
        5. Results are scrollable for long outputs

        ## 🎯 Best Practices
        - Test after major updates
        - Regular security audits recommended
        - Fix accessibility issues for better UX
        - Monitor performance metrics monthly
        - Keep SEO elements updated
        """)
    
    with gr.Row():
        perf_btn = gr.Button("⚡ Performance", scale=1)
        seo_btn = gr.Button("🔍 SEO", scale=1)
        sec_btn = gr.Button("🔒 Security", scale=1)
        a11y_btn = gr.Button("♿ Accessibility", scale=1)
    
    with gr.Tabs():
        with gr.Tab("⚡ Performance"):
            perf_output = gr.Textbox(
                label="Performance Test Results", 
                lines=20,
                max_lines=20,
                elem_classes=["scrollable-textbox"]
            )
        
        with gr.Tab("🔍 SEO"):
            seo_output = gr.Textbox(
                label="SEO Audit Results", 
                lines=20,
                max_lines=20,
                elem_classes=["scrollable-textbox"]
            )
        
        with gr.Tab("🔒 Security"):
            sec_output = gr.Textbox(
                label="Security Test Results", 
                lines=20,
                max_lines=20,
                elem_classes=["scrollable-textbox"]
            )
        
        with gr.Tab("♿ Accessibility"):
            a11y_output = gr.Textbox(
                label="Accessibility Test Results", 
                lines=20,
                max_lines=20,
                elem_classes=["scrollable-textbox"]
            )
    
    gr.Markdown("""
    ---
    ### 📊 Quick Reference
    - ✅ **Green**: Passed / Optimal
    - ⚠️ **Yellow**: Needs Attention
    - ❌ **Red**: Failed / Critical Issue
    
    *Results are automatically scrollable when content exceeds the display area*
    """)
    
    # Toggle guidelines visibility
    def toggle_guidelines():
        return gr.Accordion(visible=True, open=True)
    
    guideline_btn.click(
        toggle_guidelines,
        outputs=[guidelines_section]
    )
    
    # Button actions
    test_all_btn.click(
        run_all_tests,
        inputs=[url_input],
        outputs=[perf_output, seo_output, sec_output, a11y_output]
    )
    
    perf_btn.click(run_performance_test, inputs=[url_input], outputs=[perf_output])
    seo_btn.click(run_seo_audit, inputs=[url_input], outputs=[seo_output])
    sec_btn.click(run_security_test, inputs=[url_input], outputs=[sec_output])
    a11y_btn.click(run_accessibility_test, inputs=[url_input], outputs=[a11y_output])

if __name__ == "__main__":
    demo.launch()