Spaces:

hackerbhai
/

RemBG_API

Paused

App Files Files Community

Arena Agent commited on 16 days ago

Commit

e23ad3a

1 Parent(s): 4a95464

Add interactive live Chromium browser

Browse files

Files changed (6) hide show

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

Dockerfile CHANGED Viewed

@@ -1,21 +1,31 @@
-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"]

+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"]

README.md CHANGED Viewed

@@ -1,6 +1,6 @@
 ---
-title: Web Test Lab
-emoji: 🧪
 colorFrom: indigo
 colorTo: blue
 sdk: docker
@@ -8,17 +8,15 @@ app_port: 7860
 pinned: false
 ---
-# Web Test Lab
-A browser-based website testing dashboard powered by headless Chromium and Playwright.
-## Features
-- Search the public web from a clean Chromium browser at `/search`
-- Test public HTTP and HTTPS websites from a clean browser session
-- Desktop, tablet, and mobile viewport profiles
-- HTTP status, page title, load time, final URL, and screenshot
-- Browser test UI available at `/`
-- Health check available at `/health`
-Only test websites that you own or are authorized to test. Localhost, private-network addresses, and URLs containing credentials are blocked.

 ---
+title: Live Browser Lab
+emoji: 🌐
 colorFrom: indigo
 colorTo: blue
 sdk: docker
 pinned: false
 ---
+# Live Browser Lab
+An interactive remote Chromium browser streamed through noVNC.
+## Use
+1. In **Settings → Variables and secrets**, create `BROWSER_PASSWORD` with at least 8 characters.
+2. Open the Space and click **Open live browser**.
+3. Enter the first 8 characters of the password when noVNC asks.
+4. Use the visible Chromium address bar to search, type, click, scroll, and navigate.
+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.

app.py DELETED Viewed

@@ -1,512 +0,0 @@
-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 ADDED Viewed

	@@ -0,0 +1,55 @@

+<!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. VNC authentication protects this public Space; use the first 8 characters of your <code>BROWSER_PASSWORD</code> Space secret.</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 DELETED Viewed

@@ -1,3 +0,0 @@
-Flask>=3.0,<4
-playwright>=1.45,<2
-gunicorn>=22,<24

start-browser.sh ADDED Viewed

	@@ -0,0 +1,51 @@

+#!/usr/bin/env bash
+set -Eeuo pipefail
+: "${BROWSER_PASSWORD:?Set BROWSER_PASSWORD in Space Settings → Variables and secrets}"
+if [ "${#BROWSER_PASSWORD}" -lt 8 ]; then
+  echo "BROWSER_PASSWORD must contain at least 8 characters. x11vnc uses the first 8 characters." >&2
+  exit 1
+fi
+export DISPLAY=:99
+export HOME=/tmp/browser-home
+mkdir -p "$HOME" /tmp/browser-profile
+# VNC authentication is required because this Space is publicly reachable.
+x11vnc -storepasswd "${BROWSER_PASSWORD:0:8}" /tmp/vnc.pass >/dev/null
+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 \
+  -rfbauth /tmp/vnc.pass \
+  -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