Publish Space copy from original source

README.md

@@ -1,12 +1,92 @@
 ---
-title: Desant Anti Phishing Inferencing Copy 20260308 222846
-emoji: 🦀
-colorFrom: green
-colorTo: indigo
+title: Desant Phishing Detection
+emoji: 🛡️
+colorFrom: red
+colorTo: green
 sdk: gradio
-sdk_version: 6.9.0
+sdk_version: "5.50.0"
 app_file: app.py
-pinned: false
+pinned: true
+license: mit
+short_description: CLIP-based phishing screenshot classifier by Desant.ai
+tags:
+  - image-classification
+  - clip
+  - openclip
+  - phishing-detection
+  - cybersecurity
+  - security
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Erna Phishing Detection.
+
+**AI-powered phishing detection using CLIP vision models — by [Desant.ai](https://desant.ai)**
+
+## What it does
+
+Upload a screenshot of any web page and our deep learning model will classify
+it as **safe** or **malicious (phishing)**. The model was trained on thousands
+of real phishing and legitimate login page screenshots.
+
+## How it works
+
+1. **You upload** a screenshot (PNG, JPEG) of a web page.
+2. **Our CLIP-based model** extracts visual features from the screenshot using a
+   frozen OpenCLIP vision encoder (ViT-B/32).
+3. **A custom classifier head** (3-layer MLP with dropout) produces a phishing
+   probability score.
+4. **The verdict** is returned: SAFE or MALICIOUS, with a confidence score and
+   detailed timing metrics.
+
+## Model Architecture
+
+```
+Input Image (screenshot)
+    │
+    ▼
+┌─────────────────────────┐
+│   OpenCLIP ViT-B/32     │  ← Frozen pre-trained encoder
+│   Vision Encoder        │
+└────────┬────────────────┘
+         │ 512-dim features
+         ▼
+┌─────────────────────────┐
+│   Classifier Head       │
+│   Dropout(0.5)          │
+│   Linear(512 → 512)     │
+│   ReLU                  │
+│   Dropout(0.3)          │
+│   Linear(512 → 128)     │
+│   ReLU                  │
+│   Dropout(0.2)          │
+│   Linear(128 → 2)       │  ← [safe, malicious]
+└────────┬────────────────┘
+         │
+         ▼
+    Softmax → Probability
+```
+
+## Training Data
+
+- **Malicious class**: Real phishing login form screenshots collected from
+  PhishTank, OpenPhish, URLhaus, and AlienVault OTX
+- **Safe class**: Legitimate login pages, search engines, and normal web pages
+- **Resolution**: 1920×941 screenshots, preprocessed to 224×224 for CLIP
+- **Augmentation**: Horizontal flip + color jitter
+
+## Performance
+
+| Metric | Score |
+|---|---|
+| Accuracy | 92–96% |
+| Malicious Recall | 90–95% |
+| False Positive Rate | 3–8% |
+
+## API
+
+This Space connects to the Erna inference API at `api.ernacyberops.com` running
+on GPU. No local model loading is required — inference happens on our servers.
+
+## Built by
+
+**[Desant.ai](https://desant.ai)** — Advanced cybersecurity through AI.

app.py

@@ -0,0 +1,1920 @@
+"""
+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: install binary + launch Chromium so the first request is fast.
+_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)
+
+
+# ---------------------------------------------------------------------------
+# Launch
+# ---------------------------------------------------------------------------
+if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860)

packages.txt

@@ -0,0 +1,23 @@
+libnss3
+libnspr4
+libatk1.0-0
+libatk-bridge2.0-0
+libcups2
+libdrm2
+libdbus-1-3
+libxkbcommon0
+libatspi2.0-0
+libx11-6
+libxcomposite1
+libxdamage1
+libxext6
+libxfixes3
+libxrandr2
+libgbm1
+libpango-1.0-0
+libcairo2
+libasound2
+libxshmfence1
+libx11-xcb1
+fonts-liberation
+fonts-noto-color-emoji

requirements.txt

@@ -0,0 +1,4 @@
+gradio==5.50.0
+requests==2.32.5
+Pillow==11.2.1
+playwright==1.50.0