Spaces:

hackerbhai
/

RemBG_API

Paused

App Files Files Community

Arena Agent commited on 15 days ago

Commit

a250d07

1 Parent(s): e6da5aa

Replace remote browser with safe screenshot testing

Browse files

Files changed (6) hide show

Dockerfile +11 -21
README.md +12 -9
app.py +512 -0
browser-ui/index.html +0 -55
requirements.txt +3 -0
start-browser.sh +0 -57

Dockerfile CHANGED Viewed

@@ -1,31 +1,21 @@
-FROM debian:bookworm-slim
-ENV DEBIAN_FRONTEND=noninteractive \
-    DISPLAY=:99 \
-    LANG=C.UTF-8 \
-    LC_ALL=C.UTF-8
 WORKDIR /app
 RUN apt-get update \
-    && apt-get install -y --no-install-recommends \
-       ca-certificates \
-       chromium \
-       fluxbox \
-       fonts-liberation \
-       fonts-noto-color-emoji \
-       novnc \
-       websockify \
-       x11vnc \
-       xvfb \
     && rm -rf /var/lib/apt/lists/*
-RUN mkdir -p /opt/browser-ui \
-    && cp -a /usr/share/novnc/. /opt/browser-ui/
-COPY browser-ui/index.html /opt/browser-ui/index.html
-COPY start-browser.sh /usr/local/bin/start-browser.sh
-RUN chmod +x /usr/local/bin/start-browser.sh
 EXPOSE 7860
-CMD ["/usr/local/bin/start-browser.sh"]

+FROM python:3.11-slim
+ENV PYTHONDONTWRITEBYTECODE=1 \
+    PYTHONUNBUFFERED=1 \
+    PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
 WORKDIR /app
 RUN apt-get update \
+    && apt-get install -y --no-install-recommends ca-certificates \
     && rm -rf /var/lib/apt/lists/*
+COPY requirements.txt .
+RUN pip install --no-cache-dir --upgrade pip \
+    && pip install --no-cache-dir -r requirements.txt \
+    && python -m playwright install --with-deps chromium
+COPY app.py .
 EXPOSE 7860
+CMD ["gunicorn", "--bind", "0.0.0.0:7860", "--workers", "1", "--threads", "4", "--timeout", "90", "app:app"]

README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
-title: Live Browser Lab
-emoji: 🌐
 colorFrom: indigo
 colorTo: blue
 sdk: docker
@@ -8,14 +8,17 @@ app_port: 7860
 pinned: false
 ---
-# Live Browser Lab
-An interactive remote Chromium browser streamed through noVNC.
-## Use
-1. Open the Space and click **Open live browser**.
-2. Use the visible Chromium address bar to search, type, click, scroll, and navigate.
-3. Optional: add `BROWSER_PASSWORD` or `VNC_PASSWORD` in **Settings → Variables and secrets** to protect the VNC connection. Without a password, anyone with this public URL can control the browser.
-The browser starts on DuckDuckGo. This Space is public, so do not enter sensitive credentials or private information. Use it only for websites you are authorized to access.

 ---
+title: Web Test Lab
+emoji: 🧪
 colorFrom: indigo
 colorTo: blue
 sdk: docker
 pinned: false
 ---
+# Web Test Lab
+A safe screenshot-based website testing dashboard powered by Playwright and Chromium.
+## Features
+- Test public HTTP and HTTPS websites
+- Desktop, tablet, and mobile viewport profiles
+- HTTP status, page title, load time, final URL, and screenshot
+- Search page at `/search`
+- Browser test page at `/`
+- Health check at `/health`
+The service returns screenshots and search results; it does not provide a remote interactive browser. Localhost and private-network addresses are blocked. Use it only on websites you own or are authorized to test.

app.py ADDED Viewed

	@@ -0,0 +1,512 @@

+import base64
+import ipaddress
+import socket
+import time
+from threading import Lock
+from time import perf_counter
+from urllib.parse import parse_qs, urlencode, urlparse
+from flask import Flask, jsonify, request
+from playwright.sync_api import TimeoutError as PlaywrightTimeoutError
+from playwright.sync_api import sync_playwright
+app = Flask(__name__)
+app.config["MAX_CONTENT_LENGTH"] = 32 * 1024
+TEST_TIMEOUT_MS = 20_000
+RATE_WINDOW_SECONDS = 60
+RATE_LIMIT = 12
+RATE_LOCK = Lock()
+RATE_BUCKETS = {}
+BROWSER_LOCK = Lock()
+PLAYWRIGHT = None
+BROWSER = None
+DEVICES = {
+    "desktop": {"viewport": {"width": 1440, "height": 900}},
+    "tablet": {
+        "viewport": {"width": 834, "height": 1112},
+        "is_mobile": True,
+        "has_touch": True,
+    },
+    "mobile": {
+        "viewport": {"width": 390, "height": 844},
+        "is_mobile": True,
+        "has_touch": True,
+    },
+}
+INDEX_HTML = r"""
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Web Test Lab</title>
+  <style>
+    :root {
+      color-scheme: dark;
+      --bg: #090d18;
+      --panel: rgba(20, 27, 49, .82);
+      --panel-strong: #151d35;
+      --line: rgba(148, 163, 184, .18);
+      --text: #f8fafc;
+      --muted: #93a4c3;
+      --blue: #6d8cff;
+      --cyan: #39d9c4;
+      --danger: #ff7b91;
+      --shadow: 0 24px 70px rgba(0, 0, 0, .35);
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      min-height: 100vh;
+      color: var(--text);
+      font: 15px/1.55 Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+      background:
+        radial-gradient(circle at 15% 0%, rgba(109, 140, 255, .24), transparent 33rem),
+        radial-gradient(circle at 95% 15%, rgba(57, 217, 196, .13), transparent 28rem),
+        var(--bg);
+    }
+    a { color: #9bb5ff; }
+    .shell { width: min(1160px, calc(100% - 36px)); margin: 0 auto; padding: 34px 0 54px; }
+    .topbar { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 46px; }
+    .brand { display: flex; align-items: center; gap: 12px; font-weight: 800; letter-spacing: .04em; }
+    .brand-mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: #07111e; background: linear-gradient(135deg, var(--cyan), var(--blue)); box-shadow: 0 8px 26px rgba(57, 217, 196, .22); }
+    .brand small { display: block; color: var(--muted); font-weight: 500; letter-spacing: 0; }
+    .engine { display: inline-flex; align-items: center; gap: 8px; color: #b6c4de; font-size: 13px; }
+    .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }
+    .hero { max-width: 760px; margin-bottom: 30px; }
+    .eyebrow { margin: 0 0 12px; color: var(--cyan); font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
+    h1 { max-width: 680px; margin: 0; font-size: clamp(2.4rem, 6vw, 4.8rem); line-height: .98; letter-spacing: -.065em; }
+    .hero p { max-width: 620px; margin: 20px 0 0; color: var(--muted); font-size: 17px; }
+    .workspace { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 18px; align-items: start; }
+    .card { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); backdrop-filter: blur(18px); }
+    .controls { padding: 22px; position: sticky; top: 18px; }
+    .card-title { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 20px; font-weight: 750; }
+    .badge { padding: 5px 9px; border: 1px solid rgba(57, 217, 196, .26); border-radius: 999px; color: var(--cyan); background: rgba(57, 217, 196, .08); font-size: 11px; font-weight: 700; }
+    label { display: block; margin: 18px 0 8px; color: #c8d4ea; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
+    input[type=url] { width: 100%; padding: 13px 14px; border: 1px solid var(--line); border-radius: 12px; outline: 0; color: var(--text); background: rgba(5, 10, 22, .64); font: inherit; }
+    input[type=url]:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(109, 140, 255, .14); }
+    .presets { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+    .preset, .device { border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font: inherit; }
+    .preset { padding: 6px 9px; font-size: 12px; }
+    .preset:hover, .device:hover { border-color: var(--blue); color: var(--text); }
+    .devices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
+    .device { padding: 10px 5px; }
+    .device.active { border-color: var(--blue); color: white; background: rgba(109, 140, 255, .16); }
+    .run { width: 100%; margin-top: 24px; padding: 14px 16px; border: 0; border-radius: 12px; color: #07111e; background: linear-gradient(100deg, var(--cyan), #85a0ff); box-shadow: 0 12px 26px rgba(66, 137, 255, .2); cursor: pointer; font: inherit; font-weight: 850; }
+    .run:disabled { opacity: .55; cursor: wait; }
+    .notice { margin: 18px 0 0; color: var(--muted); font-size: 12px; }
+    .results { padding: 22px; min-height: 480px; }
+    .result-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
+    .result-head h2 { margin: 0; font-size: 18px; }
+    #status { color: var(--muted); font-size: 13px; }
+    #status.error { color: var(--danger); }
+    #status.success { color: var(--cyan); }
+    .metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
+    .metric { min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7, 12, 27, .42); }
+    .metric-label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; }
+    .metric-value { overflow: hidden; margin-top: 4px; font-size: 17px; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
+    .preview { display: grid; place-items: center; min-height: 330px; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #0a1020; }
+    .preview.empty::before { content: "Your browser screenshot will appear here"; color: #60708f; }
+    #screenshot { display: block; width: 100%; max-height: 610px; object-fit: contain; }
+    .result-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; color: var(--muted); font-size: 12px; }
+    .download { display: none; color: #b9c8ff; font-weight: 700; text-decoration: none; }
+    .download.show { display: inline; }
+    @media (max-width: 820px) { .workspace { grid-template-columns: 1fr; } .controls { position: static; } .topbar { margin-bottom: 32px; } }
+    @media (max-width: 520px) { .shell { width: min(100% - 24px, 1160px); padding-top: 20px; } .engine { display: none; } .metrics { grid-template-columns: 1fr; } .result-foot { flex-direction: column; } }
+  </style>
+</head>
+<body>
+  <main class="shell">
+    <header class="topbar">
+      <div class="brand"><div class="brand-mark">✦</div><div>WEB TEST LAB<small>Browser-powered checks</small></div></div>
+      <div class="engine"><a href="/search">Search web ↗</a><span class="dot"></span> Chromium ready</div>
+    </header>
+    <section class="hero">
+      <p class="eyebrow">Live website testing</p>
+      <h1>See how your site behaves before users do.</h1>
+      <p>Enter a public URL, choose a device profile, and run a real headless Chromium check with a visual screenshot. Need to find something? <a href="/search">Search the web</a>.</p>
+    </section>
+    <section class="workspace">
+      <aside class="card controls">
+        <div class="card-title"><span>Test setup</span><span class="badge">SECURE PREVIEW</span></div>
+        <form id="test-form">
+          <label for="url">Website URL</label>
+          <input id="url" type="url" value="https://example.com" placeholder="https://your-site.com" required>
+          <div class="presets">
+            <button class="preset" type="button" data-url="https://example.com">Example</button>
+            <button class="preset" type="button" data-url="https://huggingface.co">Hugging Face</button>
+          </div>
+          <label>Viewport</label>
+          <div class="devices">
+            <button class="device active" type="button" data-device="desktop">Desktop</button>
+            <button class="device" type="button" data-device="tablet">Tablet</button>
+            <button class="device" type="button" data-device="mobile">Mobile</button>
+          </div>
+          <button class="run" id="run" type="submit">Run browser test →</button>
+        </form>
+        <p class="notice">Only public HTTP and HTTPS websites are allowed. Use this tool only on sites you own or are authorized to test.</p>
+      </aside>
+      <section class="card results">
+        <div class="result-head"><h2>Test result</h2><span id="status">Ready when you are</span></div>
+        <div class="metrics">
+          <div class="metric"><div class="metric-label">HTTP status</div><div class="metric-value" id="http-status">—</div></div>
+          <div class="metric"><div class="metric-label">Load time</div><div class="metric-value" id="load-time">—</div></div>
+          <div class="metric"><div class="metric-label">Page title</div><div class="metric-value" id="page-title">—</div></div>
+        </div>
+        <div class="preview empty" id="preview"><img id="screenshot" alt="Website screenshot" hidden></div>
+        <div class="result-foot"><span id="final-url">No test run yet</span><a class="download" id="download" download="website-screenshot.png">Download screenshot</a></div>
+      </section>
+    </section>
+  </main>
+  <script>
+    const form = document.getElementById('test-form');
+    const urlInput = document.getElementById('url');
+    const runButton = document.getElementById('run');
+    const status = document.getElementById('status');
+    const preview = document.getElementById('preview');
+    const screenshot = document.getElementById('screenshot');
+    const download = document.getElementById('download');
+    const httpStatus = document.getElementById('http-status');
+    const loadTime = document.getElementById('load-time');
+    const pageTitle = document.getElementById('page-title');
+    const finalUrl = document.getElementById('final-url');
+    let device = 'desktop';
+    document.querySelectorAll('.device').forEach((button) => button.addEventListener('click', () => {
+      device = button.dataset.device;
+      document.querySelectorAll('.device').forEach((item) => item.classList.toggle('active', item === button));
+    }));
+    document.querySelectorAll('.preset').forEach((button) => button.addEventListener('click', () => { urlInput.value = button.dataset.url; }));
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      runButton.disabled = true;
+      status.className = '';
+      status.textContent = 'Opening Chromium…';
+      preview.classList.add('empty');
+      screenshot.hidden = true;
+      download.classList.remove('show');
+      try {
+        const response = await fetch('/api/test', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: urlInput.value, device }) });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || `Request failed: ${response.status}`);
+        httpStatus.textContent = data.status ?? '—';
+        loadTime.textContent = `${data.load_time_ms} ms`;
+        pageTitle.textContent = data.title || '(untitled)';
+        finalUrl.textContent = data.url;
+        screenshot.src = `data:image/png;base64,${data.screenshot}`;
+        screenshot.hidden = false;
+        preview.classList.remove('empty');
+        download.href = screenshot.src;
+        download.classList.add('show');
+        status.className = data.ok ? 'success' : 'error';
+        status.textContent = data.ok ? 'Test completed' : 'Page returned an error status';
+      } catch (error) {
+        status.className = 'error';
+        status.textContent = error.message;
+        httpStatus.textContent = '—';
+        loadTime.textContent = '—';
+        pageTitle.textContent = '—';
+        finalUrl.textContent = 'Test did not complete';
+      } finally {
+        runButton.disabled = false;
+      }
+    });
+  </script>
+</body>
+</html>
+"""
+SEARCH_HTML = r"""
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Web Search · Web Test Lab</title>
+  <style>
+    :root { color-scheme: dark; --bg:#080c17; --panel:#121a30; --line:rgba(148,163,184,.18); --text:#f8fafc; --muted:#92a2bf; --blue:#7b96ff; --cyan:#43ddc6; --pink:#ff8eaa; }
+    * { box-sizing:border-box; }
+    body { margin:0; min-height:100vh; color:var(--text); font:15px/1.55 Inter,ui-sans-serif,system-ui,sans-serif; background:radial-gradient(circle at 20% 0%,rgba(123,150,255,.24),transparent 34rem),radial-gradient(circle at 90% 15%,rgba(67,221,198,.13),transparent 30rem),var(--bg); }
+    a { color:#abc0ff; }
+    .wrap { width:min(940px,calc(100% - 32px)); margin:0 auto; padding:28px 0 56px; }
+    nav { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:68px; }
+    .brand { display:flex; align-items:center; gap:10px; color:var(--text); font-weight:850; letter-spacing:.05em; text-decoration:none; }
+    .mark { display:grid; place-items:center; width:35px; height:35px; border-radius:11px; color:#07111e; background:linear-gradient(135deg,var(--cyan),var(--blue)); }
+    .engine { color:var(--muted); font-size:13px; }
+    .hero { text-align:center; }
+    .eyebrow { margin:0 0 14px; color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
+    h1 { margin:0; font-size:clamp(2.5rem,8vw,5.2rem); line-height:.95; letter-spacing:-.07em; }
+    .hero p { max-width:600px; margin:20px auto 0; color:var(--muted); font-size:17px; }
+    .search-box { display:flex; gap:10px; max-width:760px; margin:32px auto 0; padding:8px; border:1px solid rgba(123,150,255,.38); border-radius:16px; background:rgba(11,17,34,.8); box-shadow:0 20px 60px rgba(0,0,0,.25); }
+    input { min-width:0; flex:1; padding:13px 14px; border:0; outline:0; color:var(--text); background:transparent; font:inherit; }
+    button { padding:0 22px; border:0; border-radius:11px; color:#07111e; background:linear-gradient(100deg,var(--cyan),#8da6ff); cursor:pointer; font:inherit; font-weight:850; }
+    button:disabled { opacity:.55; cursor:wait; }
+    .chips { display:flex; justify-content:center; flex-wrap:wrap; gap:8px; margin-top:16px; }
+    .chip { padding:7px 11px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:transparent; cursor:pointer; font:inherit; font-size:12px; }
+    .chip:hover { border-color:var(--blue); color:var(--text); }
+    .meta { min-height:23px; margin:42px 0 14px; color:var(--muted); font-size:13px; }
+    .results { display:grid; gap:10px; }
+    .result { padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:rgba(18,26,48,.78); transition:transform .16s,border-color .16s; }
+    .result:hover { transform:translateY(-2px); border-color:rgba(123,150,255,.55); }
+    .result-top { display:flex; gap:13px; align-items:flex-start; }
+    .num { flex:0 0 auto; display:grid; place-items:center; width:27px; height:27px; border-radius:9px; color:var(--cyan); background:rgba(67,221,198,.1); font-size:12px; font-weight:800; }
+    .title { display:block; color:#c4d1ff; font-size:17px; font-weight:750; text-decoration:none; }
+    .title:hover { text-decoration:underline; }
+    .url { overflow:hidden; margin-top:3px; color:#6fcdbd; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
+    .snippet { margin:10px 0 0 40px; color:var(--muted); }
+    .empty { padding:42px 20px; border:1px dashed var(--line); border-radius:16px; color:var(--muted); text-align:center; }
+    footer { margin-top:42px; color:#6d7b96; font-size:12px; text-align:center; }
+    @media (max-width:560px) { .wrap{width:min(100% - 22px,940px);padding-top:18px;} nav{margin-bottom:48px;} .engine{display:none;} .search-box{margin-top:25px;} button{padding:0 15px;} .snippet{margin-left:0;} }
+  </style>
+</head>
+<body>
+  <main class="wrap">
+    <nav><a class="brand" href="/"><span class="mark">✦</span> WEB TEST LAB</a><span class="engine">Chromium-powered web search</span></nav>
+    <section class="hero">
+      <p class="eyebrow">Search the open web</p>
+      <h1>Find what you need.</h1>
+      <p>Search from a clean headless Chromium browser and open results in a new tab.</p>
+      <form class="search-box" id="search-form">
+        <input id="query" type="search" placeholder="Search the web…" autocomplete="off" required>
+        <button id="search-button" type="submit">Search</button>
+      </form>
+      <div class="chips"><button class="chip" type="button" data-query="web development news">Web development</button><button class="chip" type="button" data-query="AI tools">AI tools</button><button class="chip" type="button" data-query="Bengaluru weather">Bengaluru weather</button></div>
+    </section>
+    <div class="meta" id="meta">Search results will appear here</div>
+    <section class="results" id="results"><div class="empty">Enter a search query to begin.</div></section>
+    <footer>Search uses public web results. Use this service responsibly and follow each website's terms.</footer>
+  </main>
+  <script>
+    const form = document.getElementById('search-form');
+    const queryInput = document.getElementById('query');
+    const button = document.getElementById('search-button');
+    const meta = document.getElementById('meta');
+    const results = document.getElementById('results');
+    document.querySelectorAll('.chip').forEach((chip) => chip.addEventListener('click', () => { queryInput.value = chip.dataset.query; form.requestSubmit(); }));
+    form.addEventListener('submit', async (event) => {
+      event.preventDefault();
+      const query = queryInput.value.trim();
+      if (!query) return;
+      button.disabled = true;
+      button.textContent = 'Searching…';
+      meta.textContent = 'Opening Chromium and searching…';
+      results.textContent = '';
+      try {
+        const response = await fetch('/api/search', { method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({query}) });
+        const data = await response.json();
+        if (!response.ok) throw new Error(data.error || `Search failed: ${response.status}`);
+        meta.textContent = `${data.results.length} results for “${data.query}” · ${data.elapsed_ms} ms`;
+        if (!data.results.length) { results.innerHTML = '<div class="empty">No results found. Try a different search.</div>'; return; }
+        data.results.forEach((item, index) => {
+          const card = document.createElement('article'); card.className = 'result';
+          const top = document.createElement('div'); top.className = 'result-top';
+          const num = document.createElement('span'); num.className = 'num'; num.textContent = String(index + 1);
+          const body = document.createElement('div');
+          const title = document.createElement('a'); title.className = 'title'; title.href = item.url; title.target = '_blank'; title.rel = 'noopener noreferrer'; title.textContent = item.title || item.url;
+          const url = document.createElement('div'); url.className = 'url'; url.textContent = item.url;
+          const snippet = document.createElement('p'); snippet.className = 'snippet'; snippet.textContent = item.snippet || 'Open this result in a new tab.';
+          body.append(title, url); top.append(num, body); card.append(top, snippet); results.append(card);
+        });
+      } catch (error) {
+        meta.textContent = error.message;
+        results.innerHTML = '<div class="empty">Search could not be completed. Please try again.</div>';
+      } finally { button.disabled = false; button.textContent = 'Search'; }
+    });
+  </script>
+</body>
+</html>
+"""
+def _client_key():
+    forwarded = request.headers.get("X-Forwarded-For", "")
+    return (forwarded.split(",")[0].strip() or request.remote_addr or "unknown")
+def _within_rate_limit():
+    now = time.time()
+    key = _client_key()
+    with RATE_LOCK:
+        recent = [stamp for stamp in RATE_BUCKETS.get(key, []) if now - stamp < RATE_WINDOW_SECONDS]
+        if len(recent) >= RATE_LIMIT:
+            RATE_BUCKETS[key] = recent
+            return False
+        recent.append(now)
+        RATE_BUCKETS[key] = recent
+        return True
+def _public_url(value):
+    if not isinstance(value, str) or len(value.strip()) > 2048:
+        raise ValueError("Enter a valid public URL")
+    value = value.strip()
+    parsed = urlparse(value)
+    if parsed.scheme not in {"http", "https"} or not parsed.hostname:
+        raise ValueError("URL must start with http:// or https://")
+    if parsed.username or parsed.password:
+        raise ValueError("URLs with embedded credentials are not allowed")
+    host = parsed.hostname.lower().rstrip(".")
+    if host in {"localhost", "localhost.localdomain"} or host.endswith(".local"):
+        raise ValueError("Local network URLs are not allowed")
+    try:
+        addresses = {info[4][0] for info in socket.getaddrinfo(host, None)}
+    except socket.gaierror as exc:
+        raise ValueError("The hostname could not be resolved") from exc
+    if not addresses or any(not ipaddress.ip_address(address).is_global for address in addresses):
+        raise ValueError("Only public internet URLs are allowed")
+    return value
+def _route_guard(route):
+    target = route.request.url
+    if target.startswith(("data:", "blob:", "about:", "chrome:")):
+        route.continue_()
+        return
+    try:
+        _public_url(target)
+    except ValueError:
+        route.abort()
+    else:
+        route.continue_()
+def _browser_test(target_url, device):
+    global PLAYWRIGHT, BROWSER
+    with BROWSER_LOCK:
+        if BROWSER is None or not BROWSER.is_connected():
+            if PLAYWRIGHT is not None:
+                PLAYWRIGHT.stop()
+            PLAYWRIGHT = sync_playwright().start()
+            BROWSER = PLAYWRIGHT.chromium.launch(
+                headless=True,
+                args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
+            )
+        context = BROWSER.new_context(**DEVICES[device])
+        page = context.new_page()
+        page.route("**/*", _route_guard)
+        started = perf_counter()
+        try:
+            response = page.goto(target_url, wait_until="domcontentloaded", timeout=TEST_TIMEOUT_MS)
+            page.wait_for_timeout(500)
+            screenshot = base64.b64encode(page.screenshot(type="png", full_page=False)).decode("ascii")
+            status_code = response.status if response is not None else None
+            return {
+                "ok": status_code is not None and 200 <= status_code < 400,
+                "status": status_code,
+                "title": page.title(),
+                "url": page.url,
+                "load_time_ms": round((perf_counter() - started) * 1000),
+                "screenshot": screenshot,
+            }
+        finally:
+            context.close()
+def _web_search(query):
+    global PLAYWRIGHT, BROWSER
+    search_url = "https://html.duckduckgo.com/html/?" + urlencode({"q": query})
+    with BROWSER_LOCK:
+        if BROWSER is None or not BROWSER.is_connected():
+            if PLAYWRIGHT is not None:
+                PLAYWRIGHT.stop()
+            PLAYWRIGHT = sync_playwright().start()
+            BROWSER = PLAYWRIGHT.chromium.launch(
+                headless=True,
+                args=["--no-sandbox", "--disable-dev-shm-usage", "--disable-gpu"],
+            )
+        context = BROWSER.new_context(viewport={"width": 1280, "height": 900})
+        page = context.new_page()
+        page.route("**/*", _route_guard)
+        started = perf_counter()
+        try:
+            page.goto(search_url, wait_until="domcontentloaded", timeout=TEST_TIMEOUT_MS)
+            page.wait_for_timeout(700)
+            rows = page.locator("a.result__a, a[data-testid='result-title-a']").evaluate_all(
+                """
+                (links) => links.slice(0, 8).map((link) => {
+                  const result = link.closest('.result') || link.closest('[data-testid="result"]') || link.parentElement;
+                  const snippet = result?.querySelector('.result__snippet')?.innerText || '';
+                  return { title: link.innerText.trim(), url: link.href, snippet: snippet.trim() };
+                })
+                """
+            )
+            results = []
+            for row in rows:
+                href = row.get("url", "")
+                parsed = urlparse(href)
+                if parsed.hostname in {"duckduckgo.com", "www.duckduckgo.com"} and parsed.path.startswith("/l/"):
+                    href = parse_qs(parsed.query).get("uddg", [href])[0]
+                try:
+                    href = _public_url(href)
+                except ValueError:
+                    continue
+                results.append({
+                    "title": row.get("title") or href,
+                    "url": href,
+                    "snippet": row.get("snippet", ""),
+                })
+            return {
+                "query": query,
+                "results": results,
+                "elapsed_ms": round((perf_counter() - started) * 1000),
+            }
+        finally:
+            context.close()
+@app.get("/")
+def home():
+    return INDEX_HTML
+@app.get("/search")
+def search_page():
+    return SEARCH_HTML
+@app.post("/api/search")
+def search_api():
+    if not _within_rate_limit():
+        return jsonify({"error": "Rate limit reached. Please wait a minute."}), 429
+    payload = request.get_json(silent=True) or {}
+    query = payload.get("query", "")
+    if not isinstance(query, str) or not 2 <= len(query.strip()) <= 200:
+        return jsonify({"error": "Enter a search query between 2 and 200 characters."}), 400
+    try:
+        return jsonify(_web_search(query.strip()))
+    except PlaywrightTimeoutError:
+        return jsonify({"error": "The search took too long to complete."}), 504
+    except Exception:
+        app.logger.exception("Web search failed")
+        return jsonify({"error": "The web search could not be completed."}), 502
+@app.post("/api/test")
+def run_test():
+    if not _within_rate_limit():
+        return jsonify({"error": "Rate limit reached. Please wait a minute."}), 429
+    payload = request.get_json(silent=True) or {}
+    device = payload.get("device", "desktop")
+    if device not in DEVICES:
+        return jsonify({"error": "Unknown viewport"}), 400
+    try:
+        target_url = _public_url(payload.get("url"))
+        return jsonify(_browser_test(target_url, device))
+    except ValueError as exc:
+        return jsonify({"error": str(exc)}), 400
+    except PlaywrightTimeoutError:
+        return jsonify({"error": "The page took too long to load."}), 504
+    except Exception:
+        app.logger.exception("Browser test failed")
+        return jsonify({"error": "The browser test could not be completed."}), 502
+@app.get("/health")
+def health_check():
+    return jsonify({"status": "healthy", "browser": "chromium"}), 200
+if __name__ == "__main__":
+    app.run(host="0.0.0.0", port=7860)

browser-ui/index.html DELETED Viewed

@@ -1,55 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <title>Live Browser Lab</title>
-  <style>
-    :root { color-scheme: dark; --bg:#090d18; --panel:#151d35; --line:rgba(148,163,184,.18); --muted:#96a7c4; --text:#f8fafc; --cyan:#43ddc6; --blue:#8198ff; }
-    * { box-sizing:border-box; }
-    body { min-height:100vh; margin:0; color:var(--text); font:15px/1.55 system-ui,sans-serif; background:radial-gradient(circle at 15% 0%,rgba(129,152,255,.26),transparent 34rem),radial-gradient(circle at 95% 20%,rgba(67,221,198,.14),transparent 30rem),var(--bg); }
-    .wrap { width:min(900px,calc(100% - 32px)); margin:0 auto; padding:42px 0; }
-    .brand { display:flex; align-items:center; gap:11px; color:var(--text); font-weight:850; letter-spacing:.06em; }
-    .mark { display:grid; place-items:center; width:40px; height:40px; border-radius:13px; color:#07111e; background:linear-gradient(135deg,var(--cyan),var(--blue)); box-shadow:0 10px 30px rgba(67,221,198,.2); }
-    .hero { margin-top:76px; max-width:700px; }
-    .eyebrow { color:var(--cyan); font-size:12px; font-weight:800; letter-spacing:.15em; text-transform:uppercase; }
-    h1 { margin:12px 0 0; font-size:clamp(2.8rem,8vw,5.8rem); line-height:.92; letter-spacing:-.075em; }
-    .hero p { max-width:620px; margin:22px 0 0; color:var(--muted); font-size:18px; }
-    .panel { margin-top:34px; padding:24px; border:1px solid var(--line); border-radius:24px; background:rgba(21,29,53,.78); box-shadow:0 25px 80px rgba(0,0,0,.3); backdrop-filter:blur(15px); }
-    .panel-head { display:flex; align-items:center; justify-content:space-between; gap:14px; }
-    .panel-head h2 { margin:0; font-size:19px; }
-    .live { display:inline-flex; align-items:center; gap:8px; color:var(--cyan); font-size:12px; font-weight:750; }
-    .dot { width:8px; height:8px; border-radius:50%; background:var(--cyan); box-shadow:0 0 15px var(--cyan); }
-    .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:22px 0; }
-    .step { padding:14px; border:1px solid var(--line); border-radius:14px; color:var(--muted); }
-    .step strong { display:block; margin-bottom:4px; color:var(--text); }
-    .step span { font-size:13px; }
-    .launch { display:inline-flex; align-items:center; justify-content:center; width:100%; padding:15px 18px; border-radius:12px; color:#07111e; background:linear-gradient(100deg,var(--cyan),#91a6ff); font-weight:850; text-decoration:none; box-shadow:0 12px 28px rgba(67,221,198,.15); }
-    .launch:hover { filter:brightness(1.08); }
-    .note { margin:16px 0 0; color:var(--muted); font-size:12px; }
-    footer { margin-top:24px; color:#71809a; font-size:12px; }
-    @media (max-width:600px) { .wrap{width:min(100% - 22px,900px);padding-top:25px;} .hero{margin-top:52px;} .steps{grid-template-columns:1fr;} }
-  </style>
-</head>
-<body>
-  <main class="wrap">
-    <div class="brand"><span class="mark">✦</span> LIVE BROWSER LAB</div>
-    <section class="hero">
-      <div class="eyebrow">Interactive remote Chromium</div>
-      <h1>A real browser, live in your tab.</h1>
-      <p>Launch a private streamed browser session. Use the address bar, search the web, click links, type, scroll, and navigate just like a normal browser.</p>
-    </section>
-    <section class="panel">
-      <div class="panel-head"><h2>Ready to connect</h2><span class="live"><span class="dot"></span> Browser online</span></div>
-      <div class="steps">
-        <div class="step"><strong>1 · Launch</strong><span>Open the live session below.</span></div>
-        <div class="step"><strong>2 · Connect</strong><span>Enter your Space secret when asked.</span></div>
-        <div class="step"><strong>3 · Browse</strong><span>Search and use the browser normally.</span></div>
-      </div>
-      <a class="launch" href="/vnc.html?autoconnect=true&resize=scale">Open live browser →</a>
-      <p class="note">The browser starts on DuckDuckGo. No password is required in the current configuration, so anyone with this public URL may control the session. Add <code>BROWSER_PASSWORD</code> later if you want to turn protection on.</p>
-    </section>
-    <footer>Only browse websites you are authorized to access. Do not enter banking, email, or other sensitive credentials into a shared remote browser.</footer>
-  </main>
-</body>
-</html>

requirements.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+Flask>=3.0,<4
+playwright>=1.45,<2
+gunicorn>=22,<24

start-browser.sh DELETED Viewed

@@ -1,57 +0,0 @@
-#!/usr/bin/env bash
-set -Eeuo pipefail
-# Password protection is optional. If no secret is configured, the live browser
-# will be public to anyone who can open this Space URL.
-PASSWORD="${BROWSER_PASSWORD:-${VNC_PASSWORD:-}}"
-if [ -n "$PASSWORD" ]; then
-  if [ "${#PASSWORD}" -lt 8 ]; then
-    echo "The browser password must contain at least 8 characters. x11vnc uses the first 8 characters." >&2
-    exit 1
-  fi
-  x11vnc -storepasswd "${PASSWORD:0:8}" /tmp/vnc.pass >/dev/null
-  AUTH_ARGS=(-rfbauth /tmp/vnc.pass)
-else
-  echo "WARNING: no browser password configured; the public Space can control this browser." >&2
-  AUTH_ARGS=(-nopw)
-fi
-export DISPLAY=:99
-export HOME=/tmp/browser-home
-mkdir -p "$HOME" /tmp/browser-profile
-Xvfb :99 -screen 0 1440x900x24 -ac +extension GLX +render -noreset >/tmp/xvfb.log 2>&1 &
-fluxbox -display :99 >/tmp/fluxbox.log 2>&1 &
-sleep 1
-x11vnc \
-  -display :99 \
-  -forever \
-  -shared \
-  -localhost \
-  -rfbport 5900 \
-  "${AUTH_ARGS[@]}" \
-  -noxdamage \
-  -repeat >/tmp/x11vnc.log 2>&1 &
-chromium \
-  --display=:99 \
-  --no-sandbox \
-  --disable-dev-shm-usage \
-  --disable-gpu \
-  --start-maximized \
-  --no-first-run \
-  --no-default-browser-check \
-  --disable-session-crashed-bubble \
-  --user-data-dir=/tmp/browser-profile \
-  https://duckduckgo.com/ >/tmp/chromium.log 2>&1 &
-NOVNC_PROXY=/usr/share/novnc/utils/novnc_proxy
-if [ ! -x "$NOVNC_PROXY" ]; then
-  NOVNC_PROXY="$(command -v novnc_proxy)"
-fi
-exec "$NOVNC_PROXY" \
-  --vnc localhost:5900 \
-  --listen 7860 \
-  --web /opt/browser-ui