Update app.py

app.py

@@ -1,123 +1,177 @@
 import os
-from urllib.parse import urljoin, quote
+import threading
 
-import requests
-from bs4 import BeautifulSoup
-from flask import Flask, request, Response
+from flask import Flask, request, Response, jsonify
+from playwright.sync_api import sync_playwright
 
 app = Flask(__name__)
 
-DEFAULT_URL = "https://example.com"
-HEADERS = {
-    "User-Agent": (
-        "Mozilla/5.0 (compatible; HFSimpleBrowser/1.0; "
-        "+https://huggingface.co/spaces)"
-    )
-}
-
-TOPBAR_TEMPLATE = """
-<div id="__browser_topbar" style="
-    position:sticky;top:0;z-index:999999;
-    display:flex;gap:8px;align-items:center;
-    padding:10px 14px;background:#1e1e1e;
-    font-family:-apple-system,Helvetica,Arial,sans-serif;">
-  <form action="/browse" method="get" style="display:flex;gap:8px;flex:1;">
-    <input name="url" value="{url}" style="
-        flex:1;padding:8px 10px;border-radius:6px;border:none;
-        font-size:14px;" />
-    <button type="submit" style="
-        padding:8px 16px;border-radius:6px;border:none;
-        background:#4f8cff;color:white;font-size:14px;cursor:pointer;">
-      Go
-    </button>
-  </form>
+VIEWPORT = {"width": 1280, "height": 800}
+
+_lock = threading.Lock()
+_state = {"playwright": None, "browser": None, "page": None}
+
+
+def get_page():
+    if _state["page"] is None:
+        _state["playwright"] = sync_playwright().start()
+        _state["browser"] = _state["playwright"].chromium.launch(
+            headless=True,
+            args=["--no-sandbox", "--disable-dev-shm-usage"],
+        )
+        context = _state["browser"].new_context(viewport=VIEWPORT)
+        _state["page"] = context.new_page()
+        _state["page"].goto("https://example.com", wait_until="domcontentloaded")
+    return _state["page"]
+
+
+HOME = """<!DOCTYPE html>
+<html><head><meta charset="utf-8"><title>Remote Browser</title>
+<style>
+  html,body{margin:0;height:100%;background:#111;
+    font-family:-apple-system,Helvetica,Arial,sans-serif;}
+  #bar{display:flex;gap:8px;padding:10px 14px;background:#1e1e1e;}
+  #bar input{flex:1;padding:8px 10px;border-radius:6px;border:none;font-size:14px;}
+  #bar button{padding:8px 16px;border-radius:6px;border:none;
+    background:#4f8cff;color:#fff;font-size:14px;cursor:pointer;}
+  #stage{width:100%;height:calc(100vh - 52px);overflow:auto;background:#000;
+    display:flex;justify-content:center;}
+  #view{cursor:pointer;max-width:100%;display:block;}
+</style></head>
+<body>
+<div id="bar">
+  <input id="url" value="https://example.com" />
+  <button onclick="go()">Go</button>
+  <button onclick="back()">&#8592;</button>
 </div>
-"""
+<div id="stage"><img id="view" src="/screenshot?t=0" /></div>
+<script>
+const img = document.getElementById('view');
+const urlBox = document.getElementById('url');
+const vw = __VW__, vh = __VH__;
+
+function refresh() { img.src = '/screenshot?t=' + Date.now(); }
+
+async function go() {
+  await fetch('/go', {method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({url: urlBox.value})});
+  setTimeout(refresh, 400);
+}
+async function back() {
+  await fetch('/back', {method:'POST'});
+  setTimeout(refresh, 400);
+}
 
-ERROR_TEMPLATE = """
-<div style="font-family:-apple-system,Helvetica,Arial,sans-serif;
-            padding:24px;color:#c0392b;">
-  <h3>Couldn't load that page</h3>
-  <p>{message}</p>
-</div>
-"""
-
-PROXY_ATTRS = [
-    ("a", "href"),
-    ("form", "action"),
-]
-
-RESOURCE_ATTRS = [
-    ("link", "href"),
-    ("script", "src"),
-    ("img", "src"),
-    ("source", "src"),
-]
-
-
-def render_home(url=DEFAULT_URL):
-    return f"""<!DOCTYPE html>
-<html><head><meta charset="utf-8"><title>Simple Browser</title></head>
-<body style="margin:0;">
-{TOPBAR_TEMPLATE.format(url=url)}
-<iframe src="/browse?url={quote(url)}" style="
-    width:100%;height:calc(100vh - 52px);border:none;"></iframe>
+img.addEventListener('click', async (e) => {
+  const rect = img.getBoundingClientRect();
+  const x = (e.clientX - rect.left) / rect.width * vw;
+  const y = (e.clientY - rect.top) / rect.height * vh;
+  await fetch('/click', {method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({x, y})});
+  setTimeout(refresh, 300);
+});
+
+document.addEventListener('keydown', async (e) => {
+  if (document.activeElement === urlBox) return;
+  e.preventDefault();
+  await fetch('/key', {method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({key: e.key})});
+  refresh();
+});
+
+document.getElementById('stage').addEventListener('wheel', async (e) => {
+  await fetch('/scroll', {method:'POST', headers:{'Content-Type':'application/json'},
+    body: JSON.stringify({dy: e.deltaY})});
+  refresh();
+});
+
+setInterval(refresh, 1000);
+</script>
 </body></html>"""
 
 
 @app.route("/")
 def home():
-    return render_home()
-
-
-@app.route("/browse")
-def browse():
-    target = request.args.get("url", "").strip()
-    if not target:
-        return render_home()
-    if not target.startswith(("http://", "https://")):
-        target = "https://" + target
-
-    try:
-        resp = requests.get(target, headers=HEADERS, timeout=10)
-    except requests.RequestException as e:
-        body = ERROR_TEMPLATE.format(message=str(e))
-        return f"""<!DOCTYPE html><html><body style="margin:0;">
-{TOPBAR_TEMPLATE.format(url=target)}{body}</body></html>"""
-
-    content_type = resp.headers.get("Content-Type", "")
-    if "text/html" not in content_type:
-        # Non-HTML resource (image, css, etc requested directly) — pass through
-        return Response(resp.content, content_type=content_type)
-
-    soup = BeautifulSoup(resp.text, "html.parser")
-    base_tag = soup.find("base")
-    base_url = base_tag["href"] if base_tag and base_tag.get("href") else resp.url
-
-    # Resources load straight from the origin site in the visitor's browser
-    for tag_name, attr in RESOURCE_ATTRS:
-        for tag in soup.find_all(tag_name):
-            if tag.get(attr):
-                tag[attr] = urljoin(base_url, tag[attr])
-
-    # Links/forms route back through this server so navigation stays proxied
-    for tag_name, attr in PROXY_ATTRS:
-        for tag in soup.find_all(tag_name):
-            if tag.get(attr):
-                absolute = urljoin(base_url, tag[attr])
-                if absolute.startswith(("http://", "https://")):
-                    tag[attr] = "/browse?url=" + quote(absolute, safe="")
-            if tag.get("target"):
-                del tag["target"]
-
-    body_html = str(soup)
-    page = f"""<!DOCTYPE html><html><body style="margin:0;">
-{TOPBAR_TEMPLATE.format(url=target)}
-<div>{body_html}</div>
-</body></html>"""
-    return Response(page, content_type="text/html")
+    html = HOME.replace("__VW__", str(VIEWPORT["width"])).replace(
+        "__VH__", str(VIEWPORT["height"])
+    )
+    return html
+
+
+@app.route("/screenshot")
+def screenshot():
+    with _lock:
+        page = get_page()
+        try:
+            data = page.screenshot(type="jpeg", quality=60)
+        except Exception:
+            data = b""
+    return Response(data, content_type="image/jpeg")
+
+
+@app.route("/go", methods=["POST"])
+def go():
+    url = (request.json or {}).get("url", "").strip()
+    if not url:
+        return jsonify(ok=False)
+    if not url.startswith(("http://", "https://")):
+        url = "https://" + url
+    with _lock:
+        page = get_page()
+        try:
+            page.goto(url, wait_until="domcontentloaded", timeout=20000)
+        except Exception as e:
+            return jsonify(ok=False, error=str(e))
+    return jsonify(ok=True)
+
+
+@app.route("/back", methods=["POST"])
+def back():
+    with _lock:
+        page = get_page()
+        try:
+            page.go_back(timeout=10000)
+        except Exception:
+            pass
+    return jsonify(ok=True)
+
+
+@app.route("/click", methods=["POST"])
+def click():
+    data = request.json or {}
+    with _lock:
+        page = get_page()
+        try:
+            page.mouse.click(data.get("x", 0), data.get("y", 0))
+        except Exception:
+            pass
+    return jsonify(ok=True)
+
+
+@app.route("/key", methods=["POST"])
+def key():
+    data = request.json or {}
+    with _lock:
+        page = get_page()
+        try:
+            page.keyboard.press(data.get("key", ""))
+        except Exception:
+            pass
+    return jsonify(ok=True)
+
+
+@app.route("/scroll", methods=["POST"])
+def scroll():
+    data = request.json or {}
+    with _lock:
+        page = get_page()
+        try:
+            page.mouse.wheel(0, data.get("dy", 0))
+        except Exception:
+            pass
+    return jsonify(ok=True)
 
 
 if __name__ == "__main__":
     port = int(os.environ.get("PORT", 7860))
-    app.run(host="0.0.0.0", port=port)
+    app.run(host="0.0.0.0", port=port, threaded=False)