Deploy minimal smoke test app for startup diagnostics

app.py

@@ -1,1922 +1,14 @@
-"""
-Desant Phishing Detection — Hugging Face Space Demo
-====================================================
-Interactive demo for the CLIP-based phishing screenshot classifier
-by Desant.ai. Sends screenshots to the production inference backend
-at api.ernacyberops.com and displays results.
-"""
-
-import html
-import io
-import ipaddress
-import json
-import logging
-import os
-import re
-import secrets
-import socket
-import subprocess
-import threading
-import time
-import uuid
-from collections import defaultdict
-from urllib.parse import urlparse
-
 import gradio as gr
-import requests
-from PIL import Image
-
-MAX_IMAGE_PIXELS = 25_000_000
-Image.MAX_IMAGE_PIXELS = MAX_IMAGE_PIXELS
-MAX_IMAGE_DIMENSION = 4096
-MAX_IMAGE_BYTES = 10 * 1024 * 1024
-MAX_API_RESPONSE_BYTES = 5 * 1024 * 1024
-
-# ---------------------------------------------------------------------------
-# Configuration — sensitive values come from HF Space Secrets
-# ---------------------------------------------------------------------------
-API_BASE_URL = os.environ.get("API_BASE_URL", "https://api.ernacyberops.com")
-DEMO_EXTENSION_ID = os.environ.get("DEMO_EXTENSION_ID", "huggingface-demo-desantai")
-DEMO_INSTALLATION_ID = os.environ.get("DEMO_INSTALLATION_ID", uuid.uuid4().hex)
-
-logging.basicConfig(level=logging.INFO)
-logger = logging.getLogger("erna-demo")
-
-# ---------------------------------------------------------------------------
-# SSRF protection — URL validation
-# ---------------------------------------------------------------------------
-_BLOCKED_NETWORKS = [
-    ipaddress.ip_network("0.0.0.0/8"),
-    ipaddress.ip_network("10.0.0.0/8"),
-    ipaddress.ip_network("100.64.0.0/10"),
-    ipaddress.ip_network("127.0.0.0/8"),
-    ipaddress.ip_network("169.254.0.0/16"),
-    ipaddress.ip_network("172.16.0.0/12"),
-    ipaddress.ip_network("192.0.0.0/24"),
-    ipaddress.ip_network("192.0.2.0/24"),
-    ipaddress.ip_network("192.88.99.0/24"),
-    ipaddress.ip_network("192.168.0.0/16"),
-    ipaddress.ip_network("198.18.0.0/15"),
-    ipaddress.ip_network("198.51.100.0/24"),
-    ipaddress.ip_network("203.0.113.0/24"),
-    ipaddress.ip_network("224.0.0.0/4"),
-    ipaddress.ip_network("240.0.0.0/4"),
-    ipaddress.ip_network("255.255.255.255/32"),
-    ipaddress.ip_network("::1/128"),
-    ipaddress.ip_network("fc00::/7"),
-    ipaddress.ip_network("fe80::/10"),
-    ipaddress.ip_network("::ffff:127.0.0.0/104"),
-    ipaddress.ip_network("::ffff:10.0.0.0/104"),
-    ipaddress.ip_network("::ffff:172.16.0.0/108"),
-    ipaddress.ip_network("::ffff:192.168.0.0/112"),
-    ipaddress.ip_network("::ffff:169.254.0.0/112"),
-]
-
-_BLOCKED_HOSTNAMES = {
-    "localhost",
-    "metadata.google.internal",
-    "metadata.google.com",
-    "metadata",
-}
-
-
-def _validate_url(raw_url: str) -> str:
-    """Validate and sanitize a URL, blocking SSRF targets. Returns the safe URL."""
-    raw_url = raw_url.strip()
-    if not raw_url:
-        raise gr.Error("URL cannot be empty.")
-
-    if not re.match(r"^https?://", raw_url, re.IGNORECASE):
-        raw_url = "https://" + raw_url
-
-    parsed = urlparse(raw_url)
-
-    if parsed.scheme not in ("http", "https"):
-        raise gr.Error("Only http and https URLs are allowed.")
-
-    hostname = parsed.hostname
-    if not hostname:
-        raise gr.Error("Invalid URL: no hostname found.")
-
-    if hostname in _BLOCKED_HOSTNAMES:
-        raise gr.Error("This hostname is not allowed.")
-
-    if parsed.username or parsed.password:
-        raise gr.Error("URLs with embedded credentials are not allowed.")
-
-    if re.match(r"^\d{1,3}(\.\d{1,3}){3}$", hostname) or ":" in hostname:
-        try:
-            addr = ipaddress.ip_address(hostname)
-        except ValueError:
-            raise gr.Error("Invalid IP address in URL.")
-        for network in _BLOCKED_NETWORKS:
-            if addr in network:
-                raise gr.Error("URLs pointing to internal/private networks are not allowed.")
-    else:
-        try:
-            resolved = socket.getaddrinfo(hostname, None, socket.AF_UNSPEC, socket.SOCK_STREAM)
-        except socket.gaierror:
-            raise gr.Error("Could not resolve hostname. Please check the URL.")
-        for family, _, _, _, sockaddr in resolved:
-            ip_str = sockaddr[0]
-            try:
-                addr = ipaddress.ip_address(ip_str)
-            except ValueError:
-                continue
-            for network in _BLOCKED_NETWORKS:
-                if addr in network:
-                    raise gr.Error("This URL resolves to an internal/private address and is not allowed.")
-
-    if parsed.port and parsed.port not in (80, 443, 8080, 8443):
-        raise gr.Error("Non-standard ports are not allowed for security reasons.")
-
-    return raw_url
-
-
-# ---------------------------------------------------------------------------
-# SSRF route guard — real-time DNS check for Playwright sub-requests
-# ---------------------------------------------------------------------------
-_ALLOWED_BROWSER_SCHEMES = frozenset({"http", "https"})
-
-
-def _is_safe_request_target(url: str, dns_cache: dict | None = None) -> bool:
-    """Return True if *url* does not target internal/private networks.
-
-    Used by the Playwright route handler to perform DNS validation at
-    actual request time, closing the TOCTOU window between the initial
-    ``_validate_url`` check and the browser's own DNS resolution.
-
-    *dns_cache* is an optional ``{hostname: bool}`` dict scoped to a
-    single page-load.  It avoids redundant ``getaddrinfo`` calls for the
-    dozens of sub-resources a typical page fetches, which otherwise push
-    the page-load past the navigation timeout.
-    """
-    try:
-        parsed = urlparse(url)
-    except Exception:
-        return False
-    if parsed.scheme not in _ALLOWED_BROWSER_SCHEMES:
-        return False
-    hostname = parsed.hostname
-    if not hostname:
-        return False
-    if hostname in _BLOCKED_HOSTNAMES:
-        return False
-
-    if dns_cache is not None and hostname in dns_cache:
-        return dns_cache[hostname]
-
-    safe = True
-    if re.match(r"^\d{1,3}(\.\d{1,3}){3}$", hostname) or ":" in hostname:
-        try:
-            addr = ipaddress.ip_address(hostname)
-        except ValueError:
-            safe = False
-        else:
-            for network in _BLOCKED_NETWORKS:
-                if addr in network:
-                    safe = False
-                    break
-    else:
-        try:
-            resolved = socket.getaddrinfo(
-                hostname, None, socket.AF_UNSPEC, socket.SOCK_STREAM
-            )
-        except socket.gaierror:
-            safe = False
-        else:
-            for _family, _, _, _, sockaddr in resolved:
-                try:
-                    addr = ipaddress.ip_address(sockaddr[0])
-                except ValueError:
-                    continue
-                for network in _BLOCKED_NETWORKS:
-                    if addr in network:
-                        safe = False
-                        break
-                if not safe:
-                    break
-
-    if dns_cache is not None:
-        dns_cache[hostname] = safe
-    return safe
-
-
-def _make_ssrf_route_guard(dns_cache: dict):
-    """Create a Playwright route handler with a shared DNS cache."""
-    def _guard(route) -> None:
-        if _is_safe_request_target(route.request.url, dns_cache):
-            route.continue_()
-        else:
-            logger.warning(
-                "Blocked browser request to restricted target: %s",
-                urlparse(route.request.url).hostname,
-            )
-            route.abort("blockedbyclient")
-    return _guard
-
-
-# ---------------------------------------------------------------------------
-# Image validation
-# ---------------------------------------------------------------------------
-def _validate_image(image: Image.Image) -> Image.Image:
-    """Validate image dimensions and apply safety limits."""
-    width, height = image.size
-    if width > MAX_IMAGE_DIMENSION or height > MAX_IMAGE_DIMENSION:
-        raise gr.Error(
-            f"Image too large ({width}x{height}). "
-            f"Maximum allowed dimension is {MAX_IMAGE_DIMENSION}px."
-        )
-    if width * height > MAX_IMAGE_PIXELS:
-        raise gr.Error("Image has too many pixels. Please use a smaller image.")
-
-    if image.mode not in ("RGB", "RGBA", "L"):
-        image = image.convert("RGB")
-
-    return image
-
-
-
-
-# ---------------------------------------------------------------------------
-# Rate limiting — per-feature, in-memory
-# ---------------------------------------------------------------------------
-class _RateLimiter:
-    """Simple sliding-window rate limiter keyed by client identifier."""
-
-    def __init__(self, max_calls: int, window_seconds: float):
-        self._max_calls = max_calls
-        self._window = window_seconds
-        self._calls: dict[str, list[float]] = defaultdict(list)
-        self._lock = threading.Lock()
-
-    def check(self, key: str = "global") -> None:
-        now = time.monotonic()
-        with self._lock:
-            timestamps = self._calls[key]
-            cutoff = now - self._window
-            self._calls[key] = [t for t in timestamps if t > cutoff]
-            if len(self._calls[key]) >= self._max_calls:
-                raise gr.Error(
-                    "Rate limit exceeded. Please wait a moment before trying again."
-                )
-            self._calls[key].append(now)
-
-
-_screenshot_limiter = _RateLimiter(max_calls=5, window_seconds=60)
-_predict_limiter = _RateLimiter(max_calls=20, window_seconds=60)
-
-
-# ---------------------------------------------------------------------------
-# JWT token management — thread-safe
-# ---------------------------------------------------------------------------
-_token_cache: dict = {"access_token": None, "refresh_token": None, "expires_at": 0}
-_token_lock = threading.Lock()
-
-
-def _get_jwt_token() -> str:
-    """Obtain a valid JWT access token, refreshing or generating as needed."""
-    with _token_lock:
-        now = time.time()
-
-        if _token_cache["access_token"] and now < _token_cache["expires_at"] - 60:
-            return _token_cache["access_token"]
-
-        if _token_cache["refresh_token"]:
-            try:
-                resp = requests.post(
-                    f"{API_BASE_URL}/auth/refresh",
-                    json={
-                        "refresh_token": _token_cache["refresh_token"],
-                        "extension_id": DEMO_EXTENSION_ID,
-                    },
-                    timeout=10,
-                    verify=True,
-                )
-                if resp.status_code == 200:
-                    data = resp.json()
-                    tokens = data.get("tokens", data)
-                    _token_cache["access_token"] = tokens["access_token"]
-                    _token_cache["refresh_token"] = tokens.get(
-                        "refresh_token", _token_cache["refresh_token"]
-                    )
-                    _token_cache["expires_at"] = now + tokens.get("expires_in", 3600)
-                    logger.info("JWT token refreshed successfully")
-                    return _token_cache["access_token"]
-            except Exception as exc:
-                logger.warning("Token refresh failed: %s", type(exc).__name__)
-
-        try:
-            resp = requests.post(
-                f"{API_BASE_URL}/auth/token",
-                json={
-                    "extension_id": DEMO_EXTENSION_ID,
-                    "installation_id": DEMO_INSTALLATION_ID,
-                    "grant_type": "client_credentials",
-                },
-                timeout=10,
-                verify=True,
-            )
-            resp.raise_for_status()
-            data = resp.json()
-            tokens = data.get("tokens", data)
-            _token_cache["access_token"] = tokens["access_token"]
-            _token_cache["refresh_token"] = tokens.get("refresh_token")
-            _token_cache["expires_at"] = now + tokens.get("expires_in", 3600)
-            logger.info("New JWT tokens generated successfully")
-            return _token_cache["access_token"]
-        except Exception as exc:
-            logger.error("Token generation failed: %s", type(exc).__name__)
-            raise gr.Error(
-                "Could not authenticate with the Erna backend. "
-                "Please try again later or contact support."
-            )
-
-
-# ---------------------------------------------------------------------------
-# Playwright browser management — persistent instance for fast screenshots
-#
-# Playwright's sync API uses greenlets that are bound to the OS thread that
-# created them.  Gradio dispatches requests across a thread-pool, so we
-# funnel *all* Playwright work through a single dedicated worker thread via
-# a ThreadPoolExecutor(max_workers=1).  The Chromium process stays alive
-# between requests, eliminating the ~10 s cold-start overhead.
-# ---------------------------------------------------------------------------
-from concurrent.futures import ThreadPoolExecutor
-
-_browser_installed: bool = False
-_pw_instance = None
-_pw_browser = None
-
-_CHROMIUM_ARGS = [
-    "--no-sandbox",
-    "--disable-dev-shm-usage",
-    "--disable-background-networking",
-    "--disable-default-apps",
-    "--disable-extensions",
-    "--disable-sync",
-    "--disable-translate",
-    "--no-first-run",
-]
-
-_pw_executor = ThreadPoolExecutor(max_workers=1, thread_name_prefix="playwright")
-
-
-def _ensure_playwright_browser() -> None:
-    """Install the Playwright Chromium browser if it hasn't been installed yet."""
-    global _browser_installed
-    if _browser_installed:
-        return
-    try:
-        subprocess.run(
-            ["playwright", "install", "chromium"],
-            check=True,
-            capture_output=True,
-            timeout=180,
-        )
-        _browser_installed = True
-        logger.info("Playwright Chromium installed successfully")
-    except FileNotFoundError:
-        raise gr.Error(
-            "Playwright is not installed. Cannot capture screenshots from URLs. "
-            "Please upload a screenshot manually."
-        )
-    except subprocess.TimeoutExpired:
-        raise gr.Error(
-            "Browser installation timed out. Please try again or upload a screenshot manually."
-        )
-    except subprocess.CalledProcessError:
-        logger.error("Playwright install failed", exc_info=True)
-        raise gr.Error(
-            "Could not install the browser engine. Please upload a screenshot manually."
-        )
-
-
-def _launch_browser() -> None:
-    """(Re)launch the persistent Chromium browser.  Runs inside _pw_executor."""
-    global _pw_instance, _pw_browser
-
-    if _pw_browser:
-        try:
-            _pw_browser.close()
-        except Exception:
-            pass
-    if _pw_instance:
-        try:
-            _pw_instance.stop()
-        except Exception:
-            pass
-
-    _ensure_playwright_browser()
-
-    from playwright.sync_api import sync_playwright
-
-    _pw_instance = sync_playwright().start()
-    _pw_browser = _pw_instance.chromium.launch(
-        headless=True, args=_CHROMIUM_ARGS,
-    )
-    logger.info("Persistent Chromium browser launched")
-
-
-def _take_screenshot(url: str) -> Image.Image:
-    """Navigate to *url* and return a PIL screenshot.  Runs inside _pw_executor."""
-    global _pw_browser
-
-    if not _pw_browser or not _pw_browser.is_connected():
-        _launch_browser()
-
-    context = _pw_browser.new_context(
-        viewport={"width": 1280, "height": 720},
-        java_script_enabled=True,
-        bypass_csp=False,
-    )
-    try:
-        page = context.new_page()
-        page.route("**/*", _make_ssrf_route_guard(dns_cache={}))
-
-        page.goto(url, wait_until="networkidle", timeout=30_000)
-        page.wait_for_timeout(1_000)
-
-        final_url = page.url
-        _validate_url(final_url)
-
-        png_bytes = page.screenshot(type="png", full_page=False)
-        return Image.open(io.BytesIO(png_bytes))
-    finally:
-        try:
-            context.close()
-        except Exception:
-            pass
-
-
-# Preload can add significant cold-start time on Spaces.
-# Keep it opt-in; on-demand launch still works in _take_screenshot().
-if os.environ.get("PREWARM_BROWSER", "0") == "1":
-    _pw_executor.submit(_launch_browser)
-
-
-def _capture_screenshot_from_url(url: str) -> Image.Image:
-    """Navigate to *url* in a headless browser and return a PIL screenshot."""
-    url = _validate_url(url)
-    _screenshot_limiter.check()
-
-    try:
-        future = _pw_executor.submit(_take_screenshot, url)
-        return future.result(timeout=45)
-    except gr.Error:
-        raise
-    except TimeoutError:
-        raise gr.Error(
-            "Screenshot capture timed out. "
-            "Please try again or upload a screenshot manually."
-        )
-    except Exception:
-        logger.error("Screenshot capture failed for URL", exc_info=True)
-        raise gr.Error(
-            "Could not capture a screenshot of the provided URL. "
-            "Please check the URL and try again, or upload a screenshot manually."
-        )
-
-
-# ---------------------------------------------------------------------------
-# Prediction helper
-# ---------------------------------------------------------------------------
-def _call_predict(image: Image.Image, url: str | None = None) -> dict:
-    """Send an image to the /predict endpoint and return the JSON response."""
-    _predict_limiter.check()
-    token = _get_jwt_token()
-
-    buf = io.BytesIO()
-    image.save(buf, format="PNG")
-    buf.seek(0)
-
-    if buf.getbuffer().nbytes > MAX_IMAGE_BYTES:
-        raise gr.Error(
-            f"Encoded image exceeds {MAX_IMAGE_BYTES // (1024 * 1024)}MB limit."
-        )
-
-    headers = {
-        "Authorization": f"Bearer {token}",
-        "X-CSRF-Token": secrets.token_hex(16),
-        "X-Extension-ID": DEMO_EXTENSION_ID,
-        "X-Installation-ID": DEMO_INSTALLATION_ID,
-        "X-Extension-Version": "hf-demo-1.0",
-    }
-    if url:
-        headers["X-Source-URL"] = url
-
-    files = {"image": ("screenshot.png", buf, "image/png")}
-    form_data = {}
-    if url:
-        form_data["url"] = url
-
-    resp = requests.post(
-        f"{API_BASE_URL}/predict",
-        headers=headers,
-        files=files,
-        data=form_data,
-        timeout=30,
-        verify=True,
-    )
-
-    if resp.status_code == 401:
-        with _token_lock:
-            _token_cache["access_token"] = None
-        token = _get_jwt_token()
-        headers["Authorization"] = f"Bearer {token}"
-        buf.seek(0)
-        files = {"image": ("screenshot.png", buf, "image/png")}
-        resp = requests.post(
-            f"{API_BASE_URL}/predict",
-            headers=headers,
-            files=files,
-            data=form_data,
-            timeout=30,
-            verify=True,
-        )
-
-    resp.raise_for_status()
-    if len(resp.content) > MAX_API_RESPONSE_BYTES:
-        raise gr.Error("API response exceeds the allowed size limit.")
-    return resp.json()
-
-
-# ---------------------------------------------------------------------------
-# Safe numeric extraction from API response
-# ---------------------------------------------------------------------------
-def _safe_float(value: object, default: float = 0.0) -> float:
-    """Coerce a value to float, returning *default* on failure."""
-    try:
-        result = float(value)
-    except (TypeError, ValueError):
-        return default
-    if not (result == result):  # NaN check
-        return default
-    return result
-
-
-def _safe_int(value: object, default: int = -1) -> int:
-    try:
-        return int(value)
-    except (TypeError, ValueError):
-        return default
-
-
-# ---------------------------------------------------------------------------
-# SVG Icons — static, safe, no user input
-# ---------------------------------------------------------------------------
-_SHIELD_CHECK_SVG = (
-    '<svg width="52" height="52" viewBox="0 0 24 24" fill="none" '
-    'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'
-    '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" '
-    'fill="currentColor" opacity="0.12"/>'
-    '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" '
-    'stroke="currentColor" stroke-width="1.5" fill="none"/>'
-    '<path d="M9 12l2 2 4-4" stroke="currentColor" stroke-width="2" '
-    'stroke-linecap="round" stroke-linejoin="round"/>'
-    '</svg>'
-)
-
-_SHIELD_ALERT_SVG = (
-    '<svg width="52" height="52" viewBox="0 0 24 24" fill="none" '
-    'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'
-    '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" '
-    'fill="currentColor" opacity="0.12"/>'
-    '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" '
-    'stroke="currentColor" stroke-width="1.5" fill="none"/>'
-    '<path d="M12 8v4" stroke="currentColor" stroke-width="2" '
-    'stroke-linecap="round"/>'
-    '<circle cx="12" cy="16" r="1" fill="currentColor"/>'
-    '</svg>'
-)
-
-_LINK_SVG = (
-    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" '
-    'stroke="currentColor" stroke-width="2" aria-hidden="true">'
-    '<path d="M10 13a5 5 0 007.54.54l3-3a5 5 0 00-7.07-7.07l-1.72 1.71"/>'
-    '<path d="M14 11a5 5 0 00-7.54-.54l-3 3a5 5 0 007.07 7.07l1.71-1.71"/>'
-    '</svg>'
-)
-
-_BOLT_SVG = (
-    '<svg width="14" height="14" viewBox="0 0 24 24" fill="none" '
-    'stroke="currentColor" stroke-width="2" aria-hidden="true">'
-    '<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>'
-    '</svg>'
-)
-
-_PLACEHOLDER_SVG = (
-    '<svg width="64" height="64" viewBox="0 0 24 24" fill="none" '
-    'xmlns="http://www.w3.org/2000/svg" aria-hidden="true">'
-    '<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" '
-    'fill="none" stroke="currentColor" stroke-width="1" opacity="0.3"/>'
-    '<path d="M12 8v4M12 16h.01" stroke="currentColor" stroke-width="1.5" '
-    'stroke-linecap="round" opacity="0.3"/>'
-    '</svg>'
-)
-
-
-# ---------------------------------------------------------------------------
-# HTML Templates — static content, no user input
-# ---------------------------------------------------------------------------
-_HERO_HTML = f"""
-<div class="erna-hero">
-    <div class="erna-hero__scanline" aria-hidden="true"></div>
-    <div class="erna-hero__content">
-        <div class="erna-hero__badge">DESANT.AI</div>
-        <h1 class="erna-hero__title">Phishing Detection Engine</h1>
-        <p class="erna-hero__subtitle">
-            CLIP-based deep learning model for real-time phishing screenshot
-            classification. Upload a screenshot or paste a URL and our AI will
-            analyze it for phishing indicators.
-        </p>
-        <div class="erna-hero__tags">
-            <span class="erna-tag">GPU Inference</span>
-            <span class="erna-tag">OpenCLIP RN50x64</span>
-            <span class="erna-tag">Real-time Analysis</span>
-            <span class="erna-tag">Production API</span>
-        </div>
-    </div>
-</div>
-"""
-
-_PLACEHOLDER_HTML = f"""
-<div class="erna-placeholder" role="status">
-    <div class="erna-placeholder__icon">{_PLACEHOLDER_SVG}</div>
-    <p class="erna-placeholder__text">Upload a screenshot or enter a URL to begin security analysis</p>
-    <p class="erna-placeholder__hint">Results will appear here after analysis</p>
-</div>
-"""
-
-
-def _build_error_html(message: str) -> str:
-    safe_msg = (
-        message.replace("&", "&amp;").replace("<", "&lt;").replace(">", "&gt;")
-    )
-    return (
-        '<div class="erna-placeholder" role="alert">'
-        '<div class="erna-placeholder__icon">'
-        '<svg width="48" height="48" viewBox="0 0 24 24" fill="none" '
-        'stroke="#f87171" stroke-width="2" stroke-linecap="round" '
-        'stroke-linejoin="round">'
-        '<circle cx="12" cy="12" r="10"/>'
-        '<line x1="15" y1="9" x2="9" y2="15"/>'
-        '<line x1="9" y1="9" x2="15" y2="15"/>'
-        '</svg></div>'
-        f'<p class="erna-placeholder__text" style="color:#f87171">{safe_msg}</p>'
-        '</div>'
-    )
-
-
-_HOW_IT_WORKS_HTML = """
-<div class="erna-how">
-    <p class="erna-how__title">How it works</p>
-    <div class="erna-how__steps">
-        <div class="erna-how__step">
-            <span class="erna-how__num">1</span>
-            <span class="erna-how__label">Upload screenshot or paste URL</span>
-        </div>
-        <div class="erna-how__step">
-            <span class="erna-how__num">2</span>
-            <span class="erna-how__label">AI scans visual patterns</span>
-        </div>
-        <div class="erna-how__step">
-            <span class="erna-how__num">3</span>
-            <span class="erna-how__label">Instant threat verdict</span>
-        </div>
-    </div>
-</div>
-"""
-
-_FOOTER_HTML = """
-<div class="erna-footer">
-    <div class="erna-footer__row">
-        <span class="erna-footer__item">
-            <strong>Model:</strong> CLIP RN50x64 + custom classifier head
-        </span>
-        <span class="erna-footer__sep" aria-hidden="true"></span>
-        <span class="erna-footer__item">
-            <strong>Backend:</strong> GPU inference at
-            <code>api.ernacyberops.com</code>
-        </span>
-        <span class="erna-footer__sep" aria-hidden="true"></span>
-        <span class="erna-footer__item">
-            <strong>Built by:</strong>
-            <a href="https://desant.ai" target="_blank" rel="noopener noreferrer">
-                Desant.ai
-            </a>
-        </span>
-    </div>
-    <p class="erna-footer__note">
-        This demo sends your screenshot to our secure API for analysis.
-        No images are stored permanently. Rate-limited to prevent abuse.
-        Also powering the
-        <a href="https://chromewebstore.google.com/detail/desant-phishing-detector/alfnmlahonkioonhdghhdnflnoeeegdp"
-           target="_blank" rel="noopener noreferrer">
-            Desant Anti-Phishing Chrome Extension
-        </a>.
-    </p>
-</div>
-"""
-
-
-# ---------------------------------------------------------------------------
-# Rich HTML result builder
-# ---------------------------------------------------------------------------
-def _build_results_html(
-    prediction: int,
-    malicious_prob: float,
-    safe_prob: float,
-    confidence: float,
-    threshold: float,
-    perf: dict,
-    url: str | None,
-) -> str:
-    """
-    Build the rich HTML results card.
-
-    Security: All dynamic values are either validated floats (from
-    _safe_float/_safe_int) or html.escape()'d strings. No user-controlled
-    content is rendered unescaped. (ANTI_PATTERNS Pattern 3: XSS)
-    """
-    is_malicious = prediction == 1
-
-    verdict_class = "danger" if is_malicious else "safe"
-    icon_svg = _SHIELD_ALERT_SVG if is_malicious else _SHIELD_CHECK_SVG
-    title = "PHISHING DETECTED" if is_malicious else "LEGITIMATE PAGE"
-    subtitle = (
-        "This page exhibits high-confidence phishing indicators"
-        if is_malicious
-        else "No phishing indicators detected in this page"
-    )
-
-    mal_pct = f"{malicious_prob * 100:.1f}"
-    safe_pct = f"{safe_prob * 100:.1f}"
-    conf_pct = f"{confidence * 100:.1f}"
-    thr_pct = f"{threshold * 100:.1f}"
-
-    prep_ms = html.escape(str(perf.get("preprocessing_time_ms", "\u2014")))
-    infer_ms = html.escape(str(perf.get("inference_time_ms", "\u2014")))
-    total_ms = html.escape(str(perf.get("total_request_time_ms", "\u2014")))
-
-    url_section = ""
-    if url:
-        escaped_url = html.escape(url, quote=True)
-        url_section = (
-            f'<div class="erna-result__url">'
-            f'{_LINK_SVG}'
-            f'<span>Source: {escaped_url}</span>'
-            f'</div>'
-        )
-
-    return f"""
-    <div class="erna-result erna-result--{verdict_class}" role="alert">
-        <div class="erna-result__header">
-            <div class="erna-result__icon">{icon_svg}</div>
-            <div class="erna-result__titles">
-                <h2 class="erna-result__title">{title}</h2>
-                <p class="erna-result__subtitle">{subtitle}</p>
-            </div>
-        </div>
-
-        <div class="erna-gauge" aria-label="Threat level gauge">
-            <div class="erna-gauge__header">
-                <span class="erna-gauge__label">Threat Level</span>
-                <span class="erna-gauge__value erna-gauge__value--{verdict_class}">{mal_pct}%</span>
-            </div>
-            <div class="erna-gauge__track">
-                <div class="erna-gauge__fill erna-gauge__fill--{verdict_class}"
-                     style="width:{mal_pct}%"
-                     role="progressbar"
-                     aria-valuenow="{mal_pct}"
-                     aria-valuemin="0"
-                     aria-valuemax="100"></div>
-                <div class="erna-gauge__threshold" style="left:{thr_pct}%"
-                     aria-label="Decision threshold at {thr_pct}%"></div>
-            </div>
-            <div class="erna-gauge__scale">
-                <span>0% Safe</span>
-                <span>Threshold {thr_pct}%</span>
-                <span>100% Malicious</span>
-            </div>
-        </div>
-
-        <div class="erna-metrics">
-            <div class="erna-metric erna-metric--{verdict_class}">
-                <span class="erna-metric__value">{mal_pct}%</span>
-                <span class="erna-metric__label">Phishing Score</span>
-            </div>
-            <div class="erna-metric">
-                <span class="erna-metric__value">{safe_pct}%</span>
-                <span class="erna-metric__label">Safe Score</span>
-            </div>
-            <div class="erna-metric">
-                <span class="erna-metric__value">{conf_pct}%</span>
-                <span class="erna-metric__label">Confidence</span>
-            </div>
-        </div>
-
-        <div class="erna-perf">
-            <div class="erna-perf__header">
-                {_BOLT_SVG}
-                <span>Performance</span>
-            </div>
-            <div class="erna-perf__grid">
-                <div class="erna-perf__item">
-                    <span class="erna-perf__val">{prep_ms}<small>ms</small></span>
-                    <span class="erna-perf__lbl">Preprocessing</span>
-                </div>
-                <div class="erna-perf__item">
-                    <span class="erna-perf__val">{infer_ms}<small>ms</small></span>
-                    <span class="erna-perf__lbl">Inference</span>
-                </div>
-                <div class="erna-perf__item">
-                    <span class="erna-perf__val">{total_ms}<small>ms</small></span>
-                    <span class="erna-perf__lbl">Total</span>
-                </div>
-            </div>
-        </div>
-
-        {url_section}
-    </div>
-    """
-
-
-# ---------------------------------------------------------------------------
-# Gradio inference function
-# ---------------------------------------------------------------------------
-def analyze_screenshot(
-    image: Image.Image | None, url: str,
-) -> tuple[Image.Image | None, str, str]:
-    """
-    Main Gradio handler — takes an uploaded screenshot and/or a URL,
-    returns (thumbnail, results_html, raw_json).  The thumbnail is fed
-    back into the Image component so the user always sees the image that
-    was analysed (especially useful when a URL was the only input).
-    """
-    url = url.strip() if url else None
-
-    if url:
-        try:
-            image = _capture_screenshot_from_url(url)
-        except gr.Error:
-            return None, _build_error_html(
-                "Could not capture a screenshot of the provided URL. "
-                "Please check the URL and try again, or upload a "
-                "screenshot manually."
-            ), ""
-    elif image is None:
-        raise gr.Error("Please upload a screenshot or provide a URL.")
-
-    image = _validate_image(image)
-
-    try:
-        result = _call_predict(image, url)
-    except requests.exceptions.HTTPError as exc:
-        status = exc.response.status_code if exc.response is not None else "unknown"
-        raise gr.Error(f"Backend returned an error (HTTP {status}).") from exc
-    except requests.exceptions.ConnectionError:
-        raise gr.Error(
-            "Cannot reach the Erna backend. The server may be temporarily offline."
-        )
-    except gr.Error:
-        raise
-    except Exception:
-        logger.error("Prediction failed", exc_info=True)
-        raise gr.Error("An unexpected error occurred. Please try again later.")
-
-    res = result.get("results", {})
-    perf = result.get("performance", {})
-
-    prediction = _safe_int(res.get("prediction"), default=-1)
-    malicious_prob = _safe_float(res.get("malicious_probability"))
-    safe_prob = _safe_float(res.get("safe_probability"))
-    confidence = _safe_float(res.get("confidence"))
-    threshold = _safe_float(res.get("threshold"), default=0.5)
-
-    results_html = _build_results_html(
-        prediction=prediction,
-        malicious_prob=malicious_prob,
-        safe_prob=safe_prob,
-        confidence=confidence,
-        threshold=threshold,
-        perf=perf,
-        url=url,
-    )
-
-    raw_json = json.dumps(result, indent=2, default=str)
-
-    return image, results_html, raw_json
-
-
-# ---------------------------------------------------------------------------
-# Custom CSS — CyberShield Dark Theme
-# ---------------------------------------------------------------------------
-_FONT_HEAD = (
-    '<link rel="preconnect" href="https://fonts.googleapis.com">'
-    '<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>'
-    '<link href="https://fonts.googleapis.com/css2?'
-    'family=Inter:wght@300;400;500;600;700;800&'
-    'family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">'
-)
-
-_CUSTOM_CSS = """
-:root {
-    --erna-bg-deep: #050816;
-    --erna-bg-primary: #0a0e1a;
-    --erna-bg-secondary: #111827;
-    --erna-bg-card: #141b2d;
-    --erna-border: #1e293b;
-    --erna-border-glow: rgba(0, 212, 255, 0.2);
-    --erna-text-primary: #f0f4f8;
-    --erna-text-secondary: #94a3b8;
-    --erna-text-muted: #64748b;
-    --erna-cyan: #00d4ff;
-    --erna-cyan-soft: rgba(0, 212, 255, 0.08);
-    --erna-safe: #00e68a;
-    --erna-safe-soft: rgba(0, 230, 138, 0.08);
-    --erna-danger: #ff4757;
-    --erna-danger-soft: rgba(255, 71, 87, 0.08);
-    --erna-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace;
-}
-
-/* === Global Overrides === */
-body, .gradio-container, .main, .app,
-body.dark, .dark .gradio-container {
-    background: var(--erna-bg-deep) !important;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-}
-
-.gradio-container {
-    max-width: 1120px !important;
-}
-
-footer {
-    display: none !important;
-}
-
-/* Gradio component overrides */
-.block {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-}
-
-.block.padded {
-    padding: 0 !important;
-}
-
-.panel {
-    background: var(--erna-bg-primary) !important;
-    border: 1px solid var(--erna-border) !important;
-    border-radius: 12px !important;
-}
-
-/* Input styling */
-.wrap.svelte-1qxcj04,
-input[type="text"],
-textarea,
-.input-text input,
-.textbox textarea {
-    background: var(--erna-bg-primary) !important;
-    border: 1px solid var(--erna-border) !important;
-    color: var(--erna-text-primary) !important;
-    border-radius: 10px !important;
-    font-family: var(--erna-mono) !important;
-    font-size: 14px !important;
-    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
-}
-
-input[type="text"]:focus,
-textarea:focus {
-    border-color: var(--erna-cyan) !important;
-    box-shadow: 0 0 0 3px var(--erna-cyan-soft) !important;
-    outline: none !important;
-}
-
-/* Label styling */
-label span, .label-text, .block-label,
-span[data-testid="block-info"],
-.block .label-wrap span {
-    color: var(--erna-text-secondary) !important;
-    font-weight: 500 !important;
-    font-size: 13px !important;
-    letter-spacing: 0.02em !important;
-    text-transform: uppercase !important;
-}
-
-/* Image upload area */
-.image-container, .upload-area, .image-frame,
-[data-testid="image"] .upload-area,
-[data-testid="image"] {
-    background: var(--erna-bg-primary) !important;
-    border: 2px dashed var(--erna-border) !important;
-    border-radius: 12px !important;
-    transition: border-color 0.2s ease !important;
-}
-
-[data-testid="image"]:hover .upload-area,
-.image-container:hover {
-    border-color: var(--erna-cyan) !important;
-}
-
-/* Primary button */
-.primary {
-    background: linear-gradient(135deg, #00bcd4, #00d4ff) !important;
-    color: #050816 !important;
-    font-weight: 700 !important;
-    font-size: 15px !important;
-    letter-spacing: 0.04em !important;
-    text-transform: uppercase !important;
-    border: none !important;
-    border-radius: 10px !important;
-    padding: 14px 28px !important;
-    box-shadow: 0 4px 20px rgba(0, 212, 255, 0.25) !important;
-    transition: all 0.3s ease !important;
-}
-
-.primary:hover {
-    box-shadow: 0 6px 30px rgba(0, 212, 255, 0.4) !important;
-    transform: translateY(-1px) !important;
-}
-
-.primary:active {
-    transform: translateY(0) !important;
-}
-
-/* Accordion */
-.accordion {
-    background: var(--erna-bg-primary) !important;
-    border: 1px solid var(--erna-border) !important;
-    border-radius: 12px !important;
-    overflow: hidden !important;
-}
-
-.accordion .label-wrap {
-    background: var(--erna-bg-primary) !important;
-    padding: 14px 20px !important;
-}
-
-.accordion .label-wrap span {
-    text-transform: none !important;
-    font-size: 14px !important;
-    font-weight: 500 !important;
-}
-
-/* Code block in accordion */
-.code-block, .cm-editor, pre, code {
-    font-family: var(--erna-mono) !important;
-    background: var(--erna-bg-deep) !important;
-    color: var(--erna-text-primary) !important;
-    border-radius: 8px !important;
-    font-size: 12.5px !important;
-}
-
-/* === Hero Section === */
-.erna-hero {
-    position: relative;
-    padding: 48px 40px 40px;
-    margin-bottom: 4px;
-    border-radius: 16px;
-    overflow: hidden;
-    background:
-        linear-gradient(rgba(0, 212, 255, 0.025) 1px, transparent 1px),
-        linear-gradient(90deg, rgba(0, 212, 255, 0.025) 1px, transparent 1px),
-        linear-gradient(180deg, var(--erna-bg-primary), var(--erna-bg-deep));
-    background-size: 48px 48px, 48px 48px, 100% 100%;
-    border: 1px solid var(--erna-border);
-}
-
-.erna-hero__scanline {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: linear-gradient(90deg, transparent, var(--erna-cyan), transparent);
-    animation: scanline 4s ease-in-out infinite;
-    opacity: 0.6;
-}
-
-@keyframes scanline {
-    0% { top: 0; opacity: 0; }
-    10% { opacity: 0.6; }
-    90% { opacity: 0.6; }
-    100% { top: 100%; opacity: 0; }
-}
-
-.erna-hero__content {
-    position: relative;
-    z-index: 1;
-}
-
-.erna-hero__badge {
-    display: inline-block;
-    font-family: var(--erna-mono);
-    font-size: 11px;
-    font-weight: 600;
-    letter-spacing: 0.15em;
-    color: var(--erna-cyan);
-    background: var(--erna-cyan-soft);
-    border: 1px solid rgba(0, 212, 255, 0.15);
-    padding: 5px 14px;
-    border-radius: 6px;
-    margin-bottom: 16px;
-}
-
-.erna-hero__title {
-    font-size: 32px;
-    font-weight: 800;
-    color: var(--erna-text-primary);
-    margin: 0 0 12px;
-    letter-spacing: -0.02em;
-    line-height: 1.2;
-}
-
-.erna-hero__subtitle {
-    font-size: 15px;
-    color: var(--erna-text-secondary);
-    line-height: 1.7;
-    margin: 0 0 20px;
-    max-width: 640px;
-}
-
-.erna-hero__tags {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 8px;
-}
-
-.erna-tag {
-    font-family: var(--erna-mono);
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--erna-text-secondary);
-    background: var(--erna-bg-secondary);
-    border: 1px solid var(--erna-border);
-    padding: 4px 12px;
-    border-radius: 20px;
-    letter-spacing: 0.02em;
-}
-
-/* === Placeholder State === */
-.erna-placeholder {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    min-height: 380px;
-    color: var(--erna-text-muted);
-    text-align: center;
-    padding: 40px 20px;
-}
-
-.erna-placeholder__icon {
-    margin-bottom: 20px;
-    opacity: 0.4;
-    color: var(--erna-text-muted);
-}
-
-.erna-placeholder__text {
-    font-size: 15px;
-    font-weight: 500;
-    color: var(--erna-text-secondary);
-    margin: 0 0 8px;
-}
-
-.erna-placeholder__hint {
-    font-size: 13px;
-    color: var(--erna-text-muted);
-    margin: 0;
-}
-
-/* === Results Card === */
-.erna-result {
-    animation: fadeInUp 0.5s ease-out;
-    border-radius: 14px;
-    padding: 28px;
-    border: 1px solid var(--erna-border);
-    background: var(--erna-bg-card);
-}
-
-.erna-result--safe {
-    border-color: rgba(0, 230, 138, 0.2);
-    background: linear-gradient(180deg, rgba(0, 230, 138, 0.04), var(--erna-bg-card));
-}
-
-.erna-result--danger {
-    border-color: rgba(255, 71, 87, 0.2);
-    background: linear-gradient(180deg, rgba(255, 71, 87, 0.04), var(--erna-bg-card));
-}
-
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(16px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
-.erna-result__header {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-    margin-bottom: 24px;
-    padding-bottom: 20px;
-    border-bottom: 1px solid var(--erna-border);
-}
-
-.erna-result--safe .erna-result__icon { color: var(--erna-safe); }
-.erna-result--danger .erna-result__icon { color: var(--erna-danger); }
-
-.erna-result__titles {
-    flex: 1;
-}
-
-.erna-result__title {
-    font-size: 22px;
-    font-weight: 800;
-    margin: 0 0 4px;
-    letter-spacing: 0.03em;
-}
-
-.erna-result--safe .erna-result__title { color: var(--erna-safe); }
-.erna-result--danger .erna-result__title { color: var(--erna-danger); }
-
-.erna-result__subtitle {
-    font-size: 13px;
-    color: var(--erna-text-secondary);
-    margin: 0;
-    font-weight: 400;
-}
-
-/* === Threat Gauge === */
-.erna-gauge {
-    margin-bottom: 24px;
-}
-
-.erna-gauge__header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 10px;
-}
-
-.erna-gauge__label {
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--erna-text-secondary);
-}
-
-.erna-gauge__value {
-    font-family: var(--erna-mono);
-    font-size: 20px;
-    font-weight: 700;
-}
-
-.erna-gauge__value--safe { color: var(--erna-safe); }
-.erna-gauge__value--danger { color: var(--erna-danger); }
-
-.erna-gauge__track {
-    position: relative;
-    height: 10px;
-    background: var(--erna-bg-deep);
-    border-radius: 5px;
-    overflow: visible;
-}
-
-.erna-gauge__fill {
-    height: 100%;
-    border-radius: 5px;
-    transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1);
-    animation: gaugeGrow 0.8s cubic-bezier(0.22, 1, 0.36, 1);
-}
-
-.erna-gauge__fill--safe {
-    background: linear-gradient(90deg, #00e68a, #00cc7a);
-    box-shadow: 0 0 12px rgba(0, 230, 138, 0.3);
-}
-
-.erna-gauge__fill--danger {
-    background: linear-gradient(90deg, #ff8a47, #ff4757);
-    box-shadow: 0 0 12px rgba(255, 71, 87, 0.3);
-}
-
-@keyframes gaugeGrow {
-    from { width: 0 !important; }
-}
-
-.erna-gauge__threshold {
-    position: absolute;
-    top: -4px;
-    width: 2px;
-    height: 18px;
-    background: var(--erna-text-secondary);
-    border-radius: 1px;
-    transform: translateX(-1px);
-    opacity: 0.6;
-}
-
-.erna-gauge__threshold::after {
-    content: '';
-    position: absolute;
-    top: -3px;
-    left: -3px;
-    width: 8px;
-    height: 8px;
-    background: var(--erna-text-secondary);
-    border-radius: 50%;
-    opacity: 0.5;
-}
-
-.erna-gauge__scale {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 8px;
-    font-size: 10px;
-    font-family: var(--erna-mono);
-    color: var(--erna-text-muted);
-    letter-spacing: 0.03em;
-}
-
-/* === Score Metrics === */
-.erna-metrics {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 12px;
-    margin-bottom: 20px;
-}
-
-.erna-metric {
-    text-align: center;
-    padding: 16px 12px;
-    background: var(--erna-bg-deep);
-    border-radius: 10px;
-    border: 1px solid var(--erna-border);
-}
-
-.erna-metric--safe {
-    border-color: rgba(0, 230, 138, 0.15);
-    background: var(--erna-safe-soft);
-}
-
-.erna-metric--danger {
-    border-color: rgba(255, 71, 87, 0.15);
-    background: var(--erna-danger-soft);
-}
-
-.erna-metric__value {
-    display: block;
-    font-family: var(--erna-mono);
-    font-size: 22px;
-    font-weight: 700;
-    color: var(--erna-text-primary);
-    line-height: 1.2;
-}
-
-.erna-metric--safe .erna-metric__value { color: var(--erna-safe); }
-.erna-metric--danger .erna-metric__value { color: var(--erna-danger); }
-
-.erna-metric__label {
-    display: block;
-    font-size: 11px;
-    font-weight: 500;
-    color: var(--erna-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.06em;
-    margin-top: 6px;
-}
-
-/* === Performance Section === */
-.erna-perf {
-    border-top: 1px solid var(--erna-border);
-    padding-top: 16px;
-}
-
-.erna-perf__header {
-    display: flex;
-    align-items: center;
-    gap: 6px;
-    margin-bottom: 12px;
-    font-size: 12px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.08em;
-    color: var(--erna-text-secondary);
-}
-
-.erna-perf__header svg {
-    color: var(--erna-cyan);
-}
-
-.erna-perf__grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 10px;
-}
-
-.erna-perf__item {
-    text-align: center;
-    padding: 10px 8px;
-    background: var(--erna-bg-deep);
-    border-radius: 8px;
-}
-
-.erna-perf__val {
-    display: block;
-    font-family: var(--erna-mono);
-    font-size: 16px;
-    font-weight: 600;
-    color: var(--erna-cyan);
-}
-
-.erna-perf__val small {
-    font-size: 11px;
-    font-weight: 400;
-    opacity: 0.7;
-    margin-left: 1px;
-}
-
-.erna-perf__lbl {
-    display: block;
-    font-size: 10px;
-    color: var(--erna-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    margin-top: 4px;
-}
-
-/* === Source URL === */
-.erna-result__url {
-    display: flex;
-    align-items: center;
-    gap: 8px;
-    margin-top: 16px;
-    padding-top: 16px;
-    border-top: 1px solid var(--erna-border);
-    font-family: var(--erna-mono);
-    font-size: 12px;
-    color: var(--erna-text-muted);
-    word-break: break-all;
-}
-
-.erna-result__url svg {
-    flex-shrink: 0;
-    color: var(--erna-text-muted);
-}
-
-/* === How It Works === */
-.erna-how {
-    margin-top: 20px;
-    padding: 16px 20px;
-    background: var(--erna-bg-primary);
-    border: 1px solid var(--erna-border);
-    border-radius: 10px;
-}
-
-.erna-how__title {
-    font-size: 11px;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.1em;
-    color: var(--erna-text-muted);
-    margin: 0 0 14px;
-}
-
-.erna-how__steps {
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
-}
-
-.erna-how__step {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-}
-
-.erna-how__num {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 24px;
-    height: 24px;
-    font-family: var(--erna-mono);
-    font-size: 11px;
-    font-weight: 600;
-    color: var(--erna-cyan);
-    background: var(--erna-cyan-soft);
-    border: 1px solid rgba(0, 212, 255, 0.12);
-    border-radius: 6px;
-    flex-shrink: 0;
-}
-
-.erna-how__label {
-    font-size: 13px;
-    color: var(--erna-text-secondary);
-}
-
-/* === Footer === */
-.erna-footer {
-    text-align: center;
-    padding: 28px 20px 16px;
-    border-top: 1px solid var(--erna-border);
-    margin-top: 8px;
-}
-
-.erna-footer__row {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    gap: 8px 20px;
-    margin-bottom: 12px;
-}
-
-.erna-footer__item {
-    font-size: 12px;
-    color: var(--erna-text-secondary);
-}
-
-.erna-footer__item strong {
-    color: var(--erna-text-primary);
-    font-weight: 600;
-}
-
-.erna-footer__item code {
-    font-family: var(--erna-mono);
-    font-size: 11px;
-    padding: 2px 6px;
-    background: var(--erna-bg-secondary);
-    border-radius: 4px;
-    color: var(--erna-cyan);
-}
-
-.erna-footer__item a {
-    color: var(--erna-cyan);
-    text-decoration: none;
-    font-weight: 500;
-}
-
-.erna-footer__item a:hover {
-    text-decoration: underline;
-}
-
-.erna-footer__sep {
-    width: 4px;
-    height: 4px;
-    background: var(--erna-border);
-    border-radius: 50%;
-}
-
-.erna-footer__note {
-    font-size: 11px;
-    color: var(--erna-text-muted);
-    line-height: 1.6;
-    margin: 0;
-}
-
-.erna-footer__note a {
-    color: var(--erna-cyan);
-    text-decoration: none;
-}
-
-.erna-footer__note a:hover {
-    text-decoration: underline;
-}
-
-/* === Responsive === */
-@media (max-width: 768px) {
-    .erna-hero {
-        padding: 32px 24px;
-    }
-
-    .erna-hero__title {
-        font-size: 24px;
-    }
-
-    .erna-result {
-        padding: 20px;
-    }
-
-    .erna-result__header {
-        flex-direction: column;
-        text-align: center;
-    }
-
-    .erna-result__title {
-        font-size: 18px;
-    }
-
-    .erna-metrics {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 8px;
-    }
-
-    .erna-metric__value {
-        font-size: 18px;
-    }
-
-    .erna-perf__grid {
-        grid-template-columns: repeat(3, 1fr);
-        gap: 8px;
-    }
-
-    .erna-footer__row {
-        flex-direction: column;
-        gap: 8px;
-    }
-
-    .erna-footer__sep {
-        display: none;
-    }
-}
-
-/* === Loading State Enhancement === */
-.wrap.generating {
-    border-color: var(--erna-cyan) !important;
-}
-
-.progress-bar {
-    background: linear-gradient(90deg, var(--erna-cyan), #00e68a) !important;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-    width: 8px;
-    height: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: var(--erna-bg-deep);
-}
-
-::-webkit-scrollbar-thumb {
-    background: var(--erna-border);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: var(--erna-text-muted);
-}
-
-/* Hide the "Paste from clipboard" source-tab button if present */
-#screenshot-input button[aria-label="Paste from clipboard"],
-[data-testid="image"] button[aria-label="Paste from clipboard"],
-.gradio-image button[aria-label="Paste from clipboard"],
-button.icon[aria-label="Paste from clipboard"] {
-    display: none !important;
-}
-"""
-
-
-# ---------------------------------------------------------------------------
-# Gradio Theme
-# ---------------------------------------------------------------------------
-_erna_theme = gr.themes.Base(
-    font=gr.themes.GoogleFont("Inter"),
-    font_mono=gr.themes.GoogleFont("JetBrains Mono"),
-    primary_hue=gr.themes.Color(
-        c50="#ecfeff", c100="#cffafe", c200="#a5f3fc",
-        c300="#67e8f9", c400="#22d3ee", c500="#00d4ff",
-        c600="#0891b2", c700="#0e7490", c800="#155e75",
-        c900="#164e63", c950="#083344",
-    ),
-    secondary_hue="emerald",
-    neutral_hue="slate",
-).set(
-    body_background_fill="#050816",
-    body_background_fill_dark="#050816",
-    body_text_color="#e2e8f0",
-    body_text_color_dark="#e2e8f0",
-    body_text_color_subdued="#94a3b8",
-    body_text_color_subdued_dark="#94a3b8",
-    background_fill_primary="#0a0e1a",
-    background_fill_primary_dark="#0a0e1a",
-    background_fill_secondary="#111827",
-    background_fill_secondary_dark="#111827",
-    border_color_primary="#1e293b",
-    border_color_primary_dark="#1e293b",
-    border_color_accent="#00d4ff",
-    border_color_accent_dark="#00d4ff",
-    color_accent="#00d4ff",
-    color_accent_soft="rgba(0, 212, 255, 0.08)",
-    color_accent_soft_dark="rgba(0, 212, 255, 0.08)",
-    block_background_fill="#0f1629",
-    block_background_fill_dark="#0f1629",
-    block_border_color="#1e293b",
-    block_border_color_dark="#1e293b",
-    block_label_background_fill="#111827",
-    block_label_background_fill_dark="#111827",
-    block_label_text_color="#94a3b8",
-    block_label_text_color_dark="#94a3b8",
-    input_background_fill="#0a0e1a",
-    input_background_fill_dark="#0a0e1a",
-    input_border_color="#1e293b",
-    input_border_color_dark="#1e293b",
-    input_border_color_focus="#00d4ff",
-    input_border_color_focus_dark="#00d4ff",
-    input_placeholder_color="#4a5568",
-    input_placeholder_color_dark="#4a5568",
-    button_primary_background_fill="#00d4ff",
-    button_primary_background_fill_dark="#00d4ff",
-    button_primary_background_fill_hover="#00bce6",
-    button_primary_background_fill_hover_dark="#00bce6",
-    button_primary_text_color="#050816",
-    button_primary_text_color_dark="#050816",
-    button_secondary_background_fill="#111827",
-    button_secondary_background_fill_dark="#111827",
-    button_secondary_text_color="#e2e8f0",
-    button_secondary_text_color_dark="#e2e8f0",
-    shadow_drop="0 2px 8px rgba(0, 0, 0, 0.3)",
-    shadow_drop_lg="0 4px 16px rgba(0, 0, 0, 0.4)",
-    shadow_spread="0 0 0 3px rgba(0, 212, 255, 0.08)",
-    panel_background_fill="#0a0e1a",
-    panel_background_fill_dark="#0a0e1a",
-    panel_border_color="#1e293b",
-    panel_border_color_dark="#1e293b",
-)
-
-
-# ---------------------------------------------------------------------------
-# JavaScript — clipboard paste handler + auto-analyze
-# ---------------------------------------------------------------------------
-_PASTE_JS = """
-function() {
-    function imgRoot() {
-        return document.getElementById('screenshot-input')
-            || document.querySelector('[data-testid="image"]')
-            || document.querySelector('.gradio-image')
-            || document.body;
-    }
-
-    /* ---- helper: push an image File into the Gradio Image component ---- */
-    function pushFile(file) {
-        var root = imgRoot();
-        var fi = root.querySelector('input[type="file"]')
-              || document.querySelector('input[type="file"][accept*="image"]');
-        if (!fi) return false;
-        var dt = new DataTransfer();
-        dt.items.add(file);
-        fi.files = dt.files;
-        fi.dispatchEvent(new Event('change', {bubbles: true}));
-        return true;
-    }
-
-    function autoAnalyze() {
-        setTimeout(function() {
-            var btn = document.getElementById('analyze-btn');
-            if (btn) btn.click();
-        }, 800);
-    }
-
-    /* ---- 1. Global Ctrl-V / Cmd-V paste handler ---- */
-    document.addEventListener('paste', function(event) {
-        var items = event.clipboardData && event.clipboardData.items;
-        if (!items) return;
-        for (var i = 0; i < items.length; i++) {
-            if (items[i].type.indexOf('image') === -1) continue;
-            var file = items[i].getAsFile();
-            if (!file) continue;
-            if (pushFile(file)) {
-                event.preventDefault();
-                autoAnalyze();
-            }
-            break;
-        }
-    });
-
-    /* ---- 2. Patch the Gradio "Paste from clipboard" button ---- */
-    function patchPasteBtn() {
-        var container = imgRoot();
-        container.querySelectorAll('button').forEach(function(btn) {
-            if (btn._pastePatch) return;
-            var txt = (btn.textContent || '') + (btn.getAttribute('aria-label') || '');
-            if (txt.toLowerCase().indexOf('paste') === -1 &&
-                txt.toLowerCase().indexOf('clipboard') === -1) return;
-            btn._pastePatch = true;
-            btn.addEventListener('click', function(e) {
-                e.stopImmediatePropagation();
-                e.preventDefault();
-                if (!navigator.clipboard || !navigator.clipboard.read) {
-                    alert('Your browser does not support direct clipboard access.\\n'
-                        + 'Please press Ctrl+V (Cmd+V on Mac) to paste a screenshot.');
-                    return;
-                }
-                navigator.clipboard.read().then(function(clipItems) {
-                    for (var ci = 0; ci < clipItems.length; ci++) {
-                        var imgType = null;
-                        for (var t = 0; t < clipItems[ci].types.length; t++) {
-                            if (clipItems[ci].types[t].startsWith('image/')) {
-                                imgType = clipItems[ci].types[t]; break;
-                            }
-                        }
-                        if (!imgType) continue;
-                        clipItems[ci].getType(imgType).then(function(blob) {
-                            var f = new File([blob], 'clipboard.png', {type: blob.type});
-                            if (pushFile(f)) autoAnalyze();
-                        });
-                        return;
-                    }
-                    alert('No image found in your clipboard.\\n'
-                        + 'Copy a screenshot first, then click Paste or press Ctrl+V.');
-                }).catch(function() {
-                    alert('Clipboard access was blocked by your browser.\\n'
-                        + 'Please press Ctrl+V (Cmd+V on Mac) to paste a screenshot instead.');
-                });
-            }, true);
-        });
-    }
-    /* ---- 3. Rewrite drop-zone text to "Upload image" ---- */
-    var WANTED = 'Upload image';
-    function tweakImageUI() {
-        var root = imgRoot();
-        var walker = document.createTreeWalker(
-            root, NodeFilter.SHOW_TEXT, null, false);
-        var node;
-        while (node = walker.nextNode()) {
-            var t = node.nodeValue.trim();
-            if (!t || t === WANTED) continue;
-            if (/drop.*image/i.test(t) || /paste from clipboard/i.test(t)
-                || /upload.*file/i.test(t)) {
-                node.nodeValue = WANTED;
-            } else if (/click to upload/i.test(t)
-                || t === '- or -' || t === 'or'
-                || t === '-' || t === '--') {
-                node.nodeValue = '';
-            }
-        }
-    }
-
-    function applyAll() { patchPasteBtn(); tweakImageUI(); }
-    setTimeout(applyAll, 1500);
-    setInterval(tweakImageUI, 1000);
-}
-"""
-
-
-# ---------------------------------------------------------------------------
-# Gradio UI — CyberShield Layout
-# ---------------------------------------------------------------------------
-with gr.Blocks(
-    theme=_erna_theme,
-    title="Desant Phishing Detection \u2014 Desant.ai",
-    css=_CUSTOM_CSS,
-    head=_FONT_HEAD,
-    js=_PASTE_JS,
-) as demo:
-
-    gr.HTML(_HERO_HTML)
-
-    with gr.Row():
-        with gr.Column(scale=5):
-            img_input = gr.Image(
-                type="pil",
-                label="Screenshot",
-                height=380,
-                show_label=True,
-                sources=["upload"],
-                elem_id="screenshot-input",
-            )
-            url_input = gr.Textbox(
-                label="Target URL",
-                placeholder="https://example.com/login",
-                max_lines=1,
-                info="Paste a URL to auto-capture a screenshot via headless browser",
-            )
-            analyze_btn = gr.Button(
-                "\u25b6  ANALYZE THREAT",
-                variant="primary",
-                size="lg",
-                elem_id="analyze-btn",
-            )
-            gr.HTML(_HOW_IT_WORKS_HTML)
-
-        with gr.Column(scale=7):
-            results_output = gr.HTML(
-                value=_PLACEHOLDER_HTML,
-                label="Analysis Results",
-            )
-
-    with gr.Accordion("Raw API Response", open=False):
-        json_output = gr.Code(language="json", label="JSON Response")
-
-    analyze_btn.click(
-        fn=analyze_screenshot,
-        inputs=[img_input, url_input],
-        outputs=[img_input, results_output, json_output],
-    )
 
-    gr.HTML(_FOOTER_HTML)
+def ping(name: str):
+    return f"Smoke app is running, {name or 'friend'}"
 
+with gr.Blocks(title="Smoke Test") as demo:
+    gr.Markdown("# Smoke test app")
+    inp = gr.Textbox(label="Name")
+    out = gr.Textbox(label="Output")
+    btn = gr.Button("Run")
+    btn.click(fn=ping, inputs=inp, outputs=out)
 
-# ---------------------------------------------------------------------------
-# Launch
-# ---------------------------------------------------------------------------
 if __name__ == "__main__":
     demo.launch(server_name="0.0.0.0", server_port=7860)