Spaces:

wuhp
/

jsbrowser

Sleeping

App Files Files Community

wuhp commited on 24 days ago

Commit

a2c6146

verified ·

1 Parent(s): 5d33ebb

Update app.py

Browse files

Files changed (1) hide show

app.py +134 -166

app.py CHANGED Viewed

@@ -1,9 +1,8 @@
 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()
@@ -11,211 +10,177 @@ 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
@@ -223,50 +188,53 @@ async def ws(ws: WebSocket):
     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)

 import asyncio
 import json
 import os
 from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import HTMLResponse
 from playwright.async_api import async_playwright
 app = FastAPI()
 PORT = int(os.environ.get("PORT", 7860))
 BASE = os.getcwd()
 SCRIPTS = os.path.join(BASE, "scripts")
+FILES = os.path.join(BASE, "files")
+HAR_DIR = os.path.join(BASE, "har")
 os.makedirs(SCRIPTS, exist_ok=True)
+os.makedirs(FILES, exist_ok=True)
+os.makedirs(HAR_DIR, exist_ok=True)
+# =========================
+# BROWSER STATE (MULTI TAB)
+# =========================
+pw = None
 browser = None
 context = None
+pages = []
+active_tab = 0
 # =========================
 # SMART NAVIGATION FIX
 # =========================
+def resolve_input(q: str):
+    q = q.strip()
+    if not q:
         return "https://example.com"
+    if q.startswith("http://") or q.startswith("https://"):
+        return q
+    if "." in q and " " not in q:
+        return "https://" + q
+    return "https://www.google.com/search?q=" + q.replace(" ", "+")
+# =========================
+# INIT BROWSER
+# =========================
+async def start_browser():
+    global pw, browser, context, pages
+    pw = await async_playwright().start()
+    browser = await pw.chromium.launch(
+        headless=True,
+        args=["--no-sandbox","--disable-dev-shm-usage"]
+    )
+    context = await browser.new_context()
+    page = await context.new_page()
+    await page.goto("https://example.com")
+    pages.append(page)
+@app.on_event("startup")
+async def startup():
+    await start_browser()
 # =========================
+# UI
 # =========================
 HTML = """
 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
+<title>HF Dev Browser</title>
 <style>
+body{margin:0;background:#0b0b0b;color:white;font-family:sans-serif;overflow:hidden}
+#top{display:flex;background:#1a1a1a;padding:6px}
+input{flex:1;background:#222;color:white;border:none;padding:6px}
+button{background:#333;color:white;border:none;margin-left:5px;padding:6px}
+#canvas{width:100vw;height:calc(100vh - 40px)}
+#panel{
+position:absolute;right:10px;top:50px;background:#111;padding:10px;display:none
+}
+#tabs{
+position:absolute;bottom:0;left:0;background:#111;width:100%;display:flex
 }
+.tab{padding:5px;background:#222;margin:2px;cursor:pointer}
 </style>
 </head>
 <body>
+<div id="top">
+<button onclick="back()">←</button>
+<button onclick="fwd()">→</button>
+<button onclick="reload()">⟳</button>
+<input id="q">
 <button onclick="go()">Go</button>
+<button onclick="toggle()">⋮</button>
 </div>
+<canvas id="c"></canvas>
+<div id="panel">
+<button onclick="pick()">Inspect</button><br>
+<button onclick="logs()">Network</button><br>
+<button onclick="newTab()">New Tab</button><br>
 </div>
+<div id="tabs"></div>
 <script>
+let ws=new WebSocket(`ws://${location.host}/ws`)
+let c=document.getElementById("c")
+let x=c.getContext("2d")
+function r(){
+c.width=innerWidth
+c.height=innerHeight-40
 }
+onresize=r;r()
+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({t:"goto",q:document.getElementById("q").value})}
+function back(){send({t:"back"})}
+function fwd(){send({t:"forward"})}
+function reload(){send({t:"reload"})}
+function toggle(){
+let p=document.getElementById("panel")
+p.style.display=p.style.display=="block"?"none":"block"
 }
+function newTab(){send({t:"tab"})}
+function pick(){send({t:"inspect"})}
+function logs(){send({t:"logs"})}
+c.onclick=e=>{
+send({t:"click",x:e.offsetX,y:e.offsetY})
 }
+document.onkeydown=e=>{
+send({t:"key",k:e.key})
 }
 </script>
 </body>
 </html>
 """
 # =========================
+# WEBSOCKET ENGINE
 # =========================
 @app.websocket("/ws")
 async def ws(ws: WebSocket):
     await ws.accept()
+    global active_tab
     async def stream():
         while True:
             try:
+                img = await pages[active_tab].screenshot(type="jpeg", quality=55)
                 await ws.send_bytes(img)
+                await asyncio.sleep(0.03)
             except:
                 break
     try:
         while True:
+            msg=json.loads(await ws.receive_text())
+            t=msg["t"]
+            page=pages[active_tab]
+            if t=="goto":
+                url=resolve_input(msg["q"])
                 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["k"])
+            elif t=="tab":
+                p=await context.new_page()
+                pages.append(p)
+                active_tab=len(pages)-1
+            elif t=="inspect":
+                await page.evaluate("""
+                document.body.style.outline='2px solid red'
                 """)
+            elif t=="logs":
+                await page.route("**/*", lambda route: route.continue_())
     except WebSocketDisconnect:
         pass
 # =========================
+# RUN
 # =========================
+@app.get("/")
+async def home():
+    return HTMLResponse(HTML)
+if __name__=="__main__":
     import uvicorn
+    uvicorn.run(app,host="0.0.0.0",port=PORT)