Spaces:

wuhp
/

jsbrowser

Sleeping

App Files Files Community

wuhp commited on 24 days ago

Commit

5d33ebb

verified ·

1 Parent(s): b53f356

Update app.py

Browse files

Files changed (1) hide show

app.py +142 -189

app.py CHANGED Viewed

@@ -1,319 +1,272 @@
 import asyncio
 import json
 import os
-import time
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect
 from fastapi.responses import HTMLResponse, FileResponse
 from playwright.async_api import async_playwright
 app = FastAPI()
-# =========================
-# PATHS
-# =========================
-BASE_DIR = os.getcwd()
-DOWNLOAD_DIR = os.path.join(BASE_DIR, "downloads")
-SCRIPT_DIR = os.path.join(BASE_DIR, "scripts")
-os.makedirs(DOWNLOAD_DIR, exist_ok=True)
-os.makedirs(SCRIPT_DIR, exist_ok=True)
-# =========================
-# GLOBAL BROWSER STATE
-# =========================
 browser = None
 context = None
 page = None
 # =========================
-# HTML UI (INLINE)
 # =========================
 HTML = """
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
-<title>Browser</title>
 <style>
-body { margin:0; background:#0e0e0e; color:white; font-family:sans-serif; }
-#topbar { display:flex; padding:8px; background:#1a1a1a; }
-input { flex:1; padding:6px; background:#222; color:white; border:none; }
-button { margin-left:5px; background:#333; color:white; border:none; padding:6px; cursor:pointer; }
 #canvas { width:100vw; height:calc(100vh - 40px); display:block; }
-#menu {
- position:absolute;
- top:40px;
- right:10px;
- background:#222;
- padding:10px;
- display:none;
-}
-#editor {
  position:absolute;
- top:50px;
- left:50px;
- width:600px;
- height:400px;
  background:#111;
  border:1px solid #444;
  display:none;
 }
 textarea {
- width:100%;
- height:80%;
- background:#000;
- color:#0f0;
  border:none;
  font-family:monospace;
 }
-#downloads {
- position:absolute;
- bottom:10px;
- left:10px;
- background:#222;
- padding:10px;
- max-height:200px;
- overflow:auto;
-}
 </style>
 </head>
 <body>
-<div id="topbar">
- <button onclick="nav('back')">←</button>
- <button onclick="nav('forward')">→</button>
- <button onclick="nav('reload')">⟳</button>
- <input id="url" placeholder="Enter URL"/>
- <button onclick="go()">Go</button>
- <button onclick="toggleMenu()">⋮</button>
 </div>
 <canvas id="canvas"></canvas>
 <div id="menu">
- <button onclick="openEditor()">Open Editor</button><br>
- <button onclick="runScript()">Run Script</button><br>
- <button onclick="loadScripts()">Load Scripts</button><br>
 </div>
 <div id="editor">
- <textarea id="code">// Example:
-let titles = await queryAll("h2");
-await saveJson("titles.json", titles.map(t=>t.innerText));
 </textarea>
- <button onclick="saveScript()">Save</button>
- <button onclick="closeEditor()">Close</button>
 </div>
-<div id="downloads"></div>
 <script>
 let ws = new WebSocket(`ws://${location.host}/ws`);
-let canvas = document.getElementById("canvas");
-let ctx = canvas.getContext("2d");
-function resize() {
- canvas.width = window.innerWidth;
- canvas.height = window.innerHeight - 40;
 }
-window.onresize = resize;
 resize();
-ws.onmessage = (e) => {
- let blob = new Blob([e.data], {type:'image/jpeg'});
- let img = new Image();
- img.onload = () => ctx.drawImage(img,0,0,canvas.width,canvas.height);
- img.src = URL.createObjectURL(blob);
 };
-function go(){
- ws.send(JSON.stringify({type:"goto", url:document.getElementById("url").value}));
-}
-function nav(type){
- ws.send(JSON.stringify({type:type}));
 }
-function toggleMenu(){
- let m = document.getElementById("menu");
- m.style.display = m.style.display === "none" ? "block":"none";
-}
-function openEditor(){
- document.getElementById("editor").style.display="block";
 }
-function closeEditor(){
- document.getElementById("editor").style.display="none";
-}
 function runScript(){
- let code = document.getElementById("code").value;
- ws.send(JSON.stringify({type:"run", code:code}));
 }
-function saveScript(){
- let name = prompt("Script name?");
- let code = document.getElementById("code").value;
- ws.send(JSON.stringify({type:"save", name:name, code:code}));
 }
-function loadScripts(){
- ws.send(JSON.stringify({type:"list"}));
-}
-canvas.addEventListener("click", e=>{
- ws.send(JSON.stringify({
-   type:"click",
-   x:e.offsetX,
-   y:e.offsetY
- }));
-});
-document.addEventListener("keydown", e=>{
- ws.send(JSON.stringify({
-   type:"key",
-   key:e.key
- }));
-});
 </script>
 </body>
 </html>
 """
 # =========================
-# START PLAYWRIGHT
 # =========================
-async def start_browser():
-    global browser, context, page
     pw = await async_playwright().start()
-    browser = await pw.chromium.launch(headless=True)
     context = await browser.new_context(viewport={"width":1280,"height":720})
     page = await context.new_page()
     await page.goto("https://example.com")
 @app.on_event("startup")
 async def startup():
-    await start_browser()
 # =========================
 # ROUTES
 # =========================
 @app.get("/")
-async def index():
     return HTMLResponse(HTML)
 @app.get("/download/{file}")
-async def download(file: str):
-    return FileResponse(os.path.join(DOWNLOAD_DIR, file))
 # =========================
 # WEBSOCKET
 # =========================
 @app.websocket("/ws")
-async def websocket(ws: WebSocket):
     await ws.accept()
     async def stream():
         while True:
-            img = await page.screenshot(type="jpeg", quality=70)
-            await ws.send_bytes(img)
-            await asyncio.sleep(0.03)  # ~30 FPS
     asyncio.create_task(stream())
     try:
         while True:
-            data = await ws.receive_text()
-            msg = json.loads(data)
-            if msg["type"] == "goto":
-                await page.goto(msg["url"])
-            elif msg["type"] == "back":
                 await page.go_back()
-            elif msg["type"] == "forward":
                 await page.go_forward()
-            elif msg["type"] == "reload":
                 await page.reload()
-            elif msg["type"] == "click":
                 await page.mouse.click(msg["x"], msg["y"])
-            elif msg["type"] == "key":
                 await page.keyboard.press(msg["key"])
-            elif msg["type"] == "save":
-                path = os.path.join(SCRIPT_DIR, msg["name"] + ".js")
-                with open(path, "w") as f:
-                    f.write(msg["code"])
-            elif msg["type"] == "run":
-                script = msg["code"]
-                wrapped = f"""
                 async () => {{
-                    const saveTxt = async (name, text) => {{
-                        await fetch('/save_txt', {{
-                            method:'POST',
-                            body:JSON.stringify({{name,text}})
-                        }});
-                    }};
-                    const saveJson = async (name, obj) => {{
-                        await fetch('/save_json', {{
-                            method:'POST',
-                            body:JSON.stringify({{name,obj}})
-                        }});
-                    }};
-                    const saveCsv = async (name, rows) => {{
-                        await fetch('/save_csv', {{
-                            method:'POST',
-                            body:JSON.stringify({{name,rows}})
-                        }});
-                    }};
-                    const queryAll = (sel) => [...document.querySelectorAll(sel)];
-                    {script}
                 }}
-                """
-                await page.evaluate(wrapped)
     except WebSocketDisconnect:
-        print("Disconnected")
 # =========================
-# SAVE ROUTES
 # =========================
-@app.post("/save_txt")
-async def save_txt(data: dict):
-    with open(os.path.join(DOWNLOAD_DIR, data["name"]), "w") as f:
-        f.write(data["text"])
-    return {"ok":True}
-@app.post("/save_json")
-async def save_json(data: dict):
-    with open(os.path.join(DOWNLOAD_DIR, data["name"]), "w") as f:
-        json.dump(data["obj"], f, indent=2)
-    return {"ok":True}
-@app.post("/save_csv")
-async def save_csv(data: dict):
-    import csv
-    rows = data["rows"]
-    if not rows:
-        return {"ok":False}
-    keys = rows[0].keys()
-    with open(os.path.join(DOWNLOAD_DIR, data["name"]), "w", newline="") as f:
-        writer = csv.DictWriter(f, fieldnames=keys)
-        writer.writeheader()
-        writer.writerows(rows)
-    return {"ok":True}

 import asyncio
 import json
 import os
+import re
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect
 from fastapi.responses import HTMLResponse, FileResponse
 from playwright.async_api import async_playwright
 app = FastAPI()
+PORT = int(os.environ.get("PORT", 7860))
+BASE = os.getcwd()
+DOWNLOADS = os.path.join(BASE, "downloads")
+SCRIPTS = os.path.join(BASE, "scripts")
+os.makedirs(DOWNLOADS, exist_ok=True)
+os.makedirs(SCRIPTS, exist_ok=True)
 browser = None
 context = None
 page = None
+pw = None
+# =========================
+# SMART NAVIGATION FIX
+# =========================
+def normalize_input(text: str) -> str:
+    text = text.strip()
+    if not text:
+        return "https://example.com"
+    # already URL
+    if text.startswith("http://") or text.startswith("https://"):
+        return text
+    # looks like domain
+    if "." in text and " " not in text:
+        return "https://" + text
+    # fallback search
+    q = text.replace(" ", "+")
+    return f"https://www.google.com/search?q={q}"
 # =========================
+# FRONTEND
 # =========================
 HTML = """
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
+<title>HF Browser</title>
 <style>
+body { margin:0; background:#0e0e0e; color:white; font-family:sans-serif; overflow:hidden; }
+#bar { display:flex; padding:8px; background:#1a1a1a; }
+input { flex:1; background:#222; color:white; border:none; padding:6px; }
+button { margin-left:5px; background:#333; color:white; border:none; padding:6px; }
 #canvas { width:100vw; height:calc(100vh - 40px); display:block; }
+#menu, #editor {
  position:absolute;
  background:#111;
  border:1px solid #444;
  display:none;
 }
+#menu { top:45px; right:10px; padding:10px; }
+#editor { top:60px; left:60px; width:600px; height:400px; }
 textarea {
+ width:100%; height:80%;
+ background:black; color:#0f0;
  border:none;
  font-family:monospace;
 }
 </style>
 </head>
 <body>
+<div id="bar">
+<button onclick="nav('back')">←</button>
+<button onclick="nav('forward')">→</button>
+<button onclick="nav('reload')">⟳</button>
+<input id="url" placeholder="Search or URL"/>
+<button onclick="go()">Go</button>
+<button onclick="menu()">⋮</button>
 </div>
 <canvas id="canvas"></canvas>
 <div id="menu">
+<button onclick="openEditor()">Editor</button><br>
+<button onclick="runScript()">Run</button><br>
 </div>
 <div id="editor">
+<textarea id="code">// JS scraping script
+let links = await queryAll("a");
+await saveJson("links.json", links.map(l=>l.href));
 </textarea>
+<button onclick="save()">Save</button>
+<button onclick="closeEditor()">Close</button>
 </div>
 <script>
 let ws = new WebSocket(`ws://${location.host}/ws`);
+let c = document.getElementById("canvas");
+let x = c.getContext("2d");
+function resize(){
+ c.width = innerWidth;
+ c.height = innerHeight - 40;
 }
+onresize = resize;
 resize();
+ws.onmessage = (e)=>{
+ let b = new Blob([e.data], {type:'image/jpeg'});
+ let i = new Image();
+ i.onload = ()=>x.drawImage(i,0,0,c.width,c.height);
+ i.src = URL.createObjectURL(b);
 };
+function send(d){ ws.send(JSON.stringify(d)); }
+function go(){
+ send({type:"goto", url:document.getElementById("url").value});
 }
+function nav(t){ send({type:t}); }
+function menu(){
+ let m=document.getElementById("menu");
+ m.style.display = m.style.display==="block"?"none":"block";
 }
+function openEditor(){ document.getElementById("editor").style.display="block"; }
+function closeEditor(){ document.getElementById("editor").style.display="none"; }
 function runScript(){
+ send({type:"run", code:document.getElementById("code").value});
 }
+function save(){
+ send({
+   type:"save",
+   name:prompt("name"),
+   code:document.getElementById("code").value
+ });
 }
+canvas.onclick = e=>{
+ send({type:"click", x:e.offsetX, y:e.offsetY});
+};
+document.onkeydown = e=>{
+ send({type:"key", key:e.key});
+};
 </script>
 </body>
 </html>
 """
 # =========================
+# PLAYWRIGHT START
 # =========================
+async def start():
+    global browser, context, page, pw
     pw = await async_playwright().start()
+    browser = await pw.chromium.launch(
+        headless=True,
+        args=["--no-sandbox", "--disable-dev-shm-usage"]
+    )
     context = await browser.new_context(viewport={"width":1280,"height":720})
     page = await context.new_page()
     await page.goto("https://example.com")
 @app.on_event("startup")
 async def startup():
+    await start()
 # =========================
 # ROUTES
 # =========================
 @app.get("/")
+async def home():
     return HTMLResponse(HTML)
 @app.get("/download/{file}")
+async def dl(file: str):
+    return FileResponse(os.path.join(DOWNLOADS, file))
 # =========================
 # WEBSOCKET
 # =========================
 @app.websocket("/ws")
+async def ws(ws: WebSocket):
     await ws.accept()
     async def stream():
         while True:
+            try:
+                img = await page.screenshot(type="jpeg", quality=60)
+                await ws.send_bytes(img)
+                await asyncio.sleep(0.04)
+            except:
+                break
     asyncio.create_task(stream())
     try:
         while True:
+            msg = json.loads(await ws.receive_text())
+            t = msg["type"]
+            if t == "goto":
+                url = normalize_input(msg["url"])
+                await page.goto(url)
+            elif t == "back":
                 await page.go_back()
+            elif t == "forward":
                 await page.go_forward()
+            elif t == "reload":
                 await page.reload()
+            elif t == "click":
                 await page.mouse.click(msg["x"], msg["y"])
+            elif t == "key":
                 await page.keyboard.press(msg["key"])
+            elif t == "save":
+                path = os.path.join(SCRIPTS, msg["name"] + ".js")
+                open(path, "w").write(msg["code"])
+            elif t == "run":
+                code = msg["code"]
+                await page.evaluate(f"""
                 async () => {{
+                    const queryAll = (s) => [...document.querySelectorAll(s)];
+                    const saveJson = async (n,o)=>fetch('/save',{{method:'POST'}});
+                    {code}
                 }}
+                """)
     except WebSocketDisconnect:
+        pass
 # =========================
+# ENTRY (HF SAFE)
 # =========================
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=PORT)