Fix browser use to adapt new runtime version

Fix browser use to adapt new runtime version

Author: rayrayraykk

browser_use/browser_use_fullstack_runtime/backend/agentscope_browseruse_agent.py

@@ -49,7 +49,7 @@
     run_shell_command,
 )
 
-from .prompts import SYSTEM_PROMPT
+from prompts import SYSTEM_PROMPT
 
 if os.path.exists(".env"):
     from dotenv import load_dotenv
@@ -130,11 +130,9 @@ async def connect(self) -> None:
 
         if len(sandboxes) > 0:
             sandbox = sandboxes[0]
-            js = sandbox.get_info()
-            ws = js["front_browser_ws"]
-            self.ws = ws
+            self.desktop_url = sandbox.desktop_url
         else:
-            self.ws = ""
+            self.desktop_url = ""
 
         runner = Runner(
             agent=self.agent,

browser_use/browser_use_fullstack_runtime/backend/async_quart_service.py

@@ -96,8 +96,8 @@ async def stream():
 
 @app.route("/env_info", methods=["GET"])
 async def get_env_info():
-    if agent.ws is not None:
-        url = agent.ws
+    if agent.desktop_url is not None:
+        url = agent.desktop_url
         logger.info(url)
         return jsonify({"url": url})
     else:

browser_use/browser_use_fullstack_runtime/backend/requirements.txt

@@ -1,5 +1,5 @@
 pyyaml>=6.0.2
 quart>=0.8.0
 quart-cors>=0.8.0
-agentscope-runtime>=0.1.5
+agentscope-runtime>=0.1.6
 agentscope[full]>=1.0.5

browser_use/browser_use_fullstack_runtime/frontend/src/App.tsx

@@ -6,14 +6,13 @@ import type { InputRef } from "antd";
 
 import { Image, Avatar, Spin } from "antd";
 import { Flex } from "antd";
-import Browser from "./Browser";
 
 const { Content, Footer } = Layout;
 
 const REACT_APP_API_URL =
   process.env.REACT_APP_API_URL || "http://localhost:9000";
 const BACKEND_URL = REACT_APP_API_URL + "/v1/chat/completions";
-const BACKEND_WS_URL = REACT_APP_API_URL + "/env_info";
+const BACKEND_DESLKTOP_URL = REACT_APP_API_URL + "/env_info";
 const DEFAULT_MODEL = "qwen-max";
 const systemMessage = {
   role: "system",
@@ -37,7 +36,7 @@ const { Search } = Input;
 const App: React.FC = () => {
   const inputRef = useRef<InputRef>(null);
   const listRef = useRef<HTMLDivElement>(null);
-  const [webSocketUrl, setWebSocketUrl] = useState("");
+  const [desktopUrl, setDesktopUrl] = useState("");
   const handleFocus = () => {
     if (inputRef.current) {
       inputRef.current.select();
@@ -57,8 +56,8 @@ const App: React.FC = () => {
   ]);
   const [isTyping, setIsTyping] = useState(false);
 
-  async function get_ws() {
-    const response = await fetch(BACKEND_WS_URL, {
+  async function get_desktop_url() {
+    const response = await fetch(BACKEND_DESLKTOP_URL, {
       method: "GET",
       headers: {
         "Content-Type": "application/json",
@@ -74,11 +73,11 @@ const App: React.FC = () => {
 
     const data = await response.json();
     console.log(data);
-    setWebSocketUrl(data.url);
+    setDesktopUrl(data.url);
   }
 
   const handleSend = async (message: string) => {
-    await get_ws();
+    await get_desktop_url();
     setCollapsed(true);
     if (message.trim() === "") {
       return;
@@ -254,7 +253,13 @@ const App: React.FC = () => {
                 )}
               </Flex>
 
-              <Browser webSocketUrl={webSocketUrl} activeKey={"3"} />
+              {desktopUrl && (
+                <iframe
+                  src={desktopUrl}
+                  style={{ width: '1280px', height: '800px', border: 'none' }}
+                  title="DesktopPage"
+                />
+              )}
             </Flex>
           </Flex>
         </div>