headless_browserV2

No application file

App Files Files Community

simoncck commited on Jun 17, 2025

Commit

5c659ee

verified ·

1 Parent(s): ffa3383

Update browser_automation_ui.html

Browse files

Files changed (1) hide show

browser_automation_ui.html +90 -38

browser_automation_ui.html CHANGED Viewed

@@ -1,21 +1,22 @@
 <!-- ========================= Browser Automation UI =========================
-     Full‑screen screenshot | overlay logs | collapsible side panel
-     Added: download screenshot, per‑session close, confirm on mass close,
-     Inspect overlay listing selectors with hover details
 ============================================================================ -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Headless Browser – Console</title>
-  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.css" rel="stylesheet" />
   <style>
     :root { --panel-w: 280px; --accent: #2563eb; --bg: #f8fafc; --dark: #1e293b; }
     *{box-sizing:border-box;font-family:'Inter',sans-serif;margin:0;padding:0}
-    body{height:100vh;overflow:hidden;background:#000}
-    /* ───────── Side panel */
     .side-panel{position:fixed;left:0;top:0;width:var(--panel-w);height:100%;background:var(--bg);box-shadow:2px 0 6px rgba(0,0,0,.12);transition:transform .3s ease;z-index:900;overflow-y:auto}
     .side-panel.closed{transform:translateX(-100%)}
     .panel-toggle{position:absolute;right:-24px;top:12px;width:24px;height:24px;border:none;border-radius:4px;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
@@ -28,20 +29,21 @@
     .btn-sm{padding:4px 8px;font-size:11px}
     .form-group{display:flex;flex-direction:column;margin-bottom:8px}
     .form-group input,.form-group select{padding:6px 8px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px}
-    /* ───────── Main screenshot area */
     #mainArea{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:margin-left .3s ease}
     #mainArea.with-panel{margin-left:var(--panel-w)}
     #screenshot{max-width:100%;max-height:100%;object-fit:contain;background:#000}
-    /* ───────── Log overlay */
-    #logOverlay{position:fixed;left:0;bottom:0;width:100%;height:20vh;background:rgba(30,41,59,0.7);color:#f1f5f9;font-size:12px;overflow-y:auto;padding:6px 10px;z-index:950;backdrop-filter:blur(3px)}
     #logOverlay pre{margin:0;white-space:pre-wrap;word-break:break-word}
-    /* ───────── Session list */
     .session-item{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;border-bottom:1px solid #e2e8f0;font-family:"Source Code Pro",monospace;font-size:12px}
     .session-id{cursor:pointer;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
     .session-item.active{background:#dbeafe}
     .session-close{background:none;border:none;color:#ef4444;cursor:pointer;font-size:14px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
-    /* ───────── Inspect overlay */
-    #inspectOverlay{position:fixed;right:0;top:0;width:300px;height:100%;background:rgba(15,23,42,0.9);color:#f8fafc;z-index:940;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;padding:10px;font-size:12px}
     #inspectOverlay.open{transform:translateX(0)}
     #inspectList li{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer}
     #inspectList li:hover{background:rgba(255,255,255,.08)}
@@ -49,7 +51,7 @@
   </style>
 </head>
 <body>
-  <!-- ╭──────────────────────── Side Panel ──────────────────────────────╮ -->
   <aside id="sidePanel" class="side-panel open">
     <button id="togglePanel" class="panel-toggle" title="Hide / Show panel">❮</button>
     <div class="panel-content">
@@ -65,7 +67,7 @@
         </div>
         <div class="form-group"><button class="btn btn-danger" onclick="closeAllSessions()"><i class="lucide lucide-trash-2"></i>Close All</button></div>
       </section>
-      <hr style="margin:12px 0;border:none;border-top:1px solid #e2e8f0"/>
       <!-- Element Interaction -->
       <section>
         <h3>Element</h3>
@@ -79,7 +81,7 @@
         <button class="btn btn-primary" onclick="elementAction()"><i class="lucide lucide-mouse-pointer-click"></i>Run</button>
         <button class="btn btn-secondary btn-sm" style="margin-left:6px" onclick="inspectPage()"><i class="lucide lucide-list"></i>Inspect</button>
       </section>
-      <hr style="margin:12px 0;border:none;border-top:1px solid #e2e8f0"/>
       <!-- Session Manager -->
       <section>
         <h3>Sessions</h3>
@@ -89,46 +91,96 @@
     </div>
   </aside>
-  <!-- ╭──────────────────────── Main Area ───────────────────────────────╮ -->
   <main id="mainArea" class="with-panel">
     <img id="screenshot" alt="Browser Screenshot" />
   </main>
-  <!-- ╭──────────────────────── Log Overlay ─────────────────────────────╮ -->
   <div id="logOverlay"><pre id="logText"></pre></div>
-  <!-- ╭──────────────────────── Inspect Overlay ─────────────────────────╮ -->
   <aside id="inspectOverlay">
     <h3 style="color:#38bdf8;margin-bottom:8px">Selectors</h3>
     <ul id="inspectList"></ul>
     <div id="inspectDetail"></div>
   </aside>
-  <!-- ╭──────────────────────── Scripts ────────────────────────────────╮ -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js"></script>
   <script>
-    /* ────────── Utility fetch wrappers ────────── */
-    async function api(path, body){return fetch(path,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify(body)}).then(r=>r.json())}
-    async function apiGet(path){return fetch(path).then(r=>r.json())}
-    function log(msg){const pre=document.getElementById('logText');pre.textContent+=`\n${new Date().toLocaleTimeString()}  ${msg}`;pre.parentElement.scrollTop=pre.parentElement.scrollHeight}
-    /* ────────── Global state ────────── */
-    let currentSessionId=null;let lastScreenshotData=null;
-    /* ────────── Side panel toggle ────────── */
-    const panel=document.getElementById('sidePanel');
-    const mainArea=document.getElementById('mainArea');
     document.getElementById('togglePanel').onclick=()=>{
-      panel.classList.toggle('closed');mainArea.classList.toggle('with-panel');
       document.getElementById('togglePanel').textContent=panel.classList.contains('closed')?'❯':'❮';};
-    /* ────────── Browser controls ────────── */
-    async function launchBrowser(){const res=await api('/api/browser/launch',{});if(res.session_id){currentSessionId=res.session_id;log(`Launched session ${res.session_id}`);refreshSessions();captureScreenshot();}}
-    async function navigate(){if(!currentSessionId)return alert('No session');const url=document.getElementById('navUrl').value.trim();if(!url)return;await api('/api/browser/navigate',{session_id:currentSessionId,url});log(`Navigated to ${url}`);captureScreenshot();}
-    async function captureScreenshot(){if(!currentSessionId)return;const res=await api('/api/browser/screenshot',{session_id:currentSessionId,full_page:false});if(res.screenshot){lastScreenshotData=res.screenshot;document.getElementById('screenshot').src=`data:image/png;base64,${res.screenshot}`;log('Screenshot updated');}}
-    function downloadCurrentScreenshot(){if(!lastScreenshotData)return alert('No screenshot');const a=document.createElement('a');a.href=`data:image/png;base64,${lastScreenshotData}`;a.download=`screenshot_${Date.now()}.png`;a.click();}
-    async function closeAllSessions(){const items=[...document.querySelectorAll('.session-item')];if(items.length===0)return alert('No sessions');if(!confirm(`Close ALL ${items.length} sessions?`))return;for(const li of items){await api(`/api/browser/close/${li.dataset.id}`,{});}currentSessionId=null;refreshSessions();log('Closed all sessions');document.getElementById('screenshot').src='';lastScreenshotData=null;}
     /* ────────── Element interaction ────────── */
-    document.getElementById('action').addEventListener('change',e=>{document.getElementById('typeTextGroup').style.display=e.target.value==='type'?'block':'none';});
-    async function elementAction(){if(!currentSessionId)return;const selector=document.getElementById('selector').

 <!-- ========================= Browser Automation UI =========================
+  Full‑screen screenshot • floating logs • collapsible side‑panel controls
+  Working version – buttons fixed, complete JS, download, session manager,
+  inspect overlay, confirm dialogs, log accumulation
 ============================================================================ -->
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Headless Browser Console</title>
+  <!-- Fonts & Icons -->
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Code+Pro:wght@400;500&display=swap" rel="stylesheet" />
   <link href="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.css" rel="stylesheet" />
   <style>
     :root { --panel-w: 280px; --accent: #2563eb; --bg: #f8fafc; --dark: #1e293b; }
     *{box-sizing:border-box;font-family:'Inter',sans-serif;margin:0;padding:0}
+    body{height:100vh;overflow:hidden;background:#000;color:#1e293b}
+    /* ─── Side panel ─────────────────────────────────────────────────── */
     .side-panel{position:fixed;left:0;top:0;width:var(--panel-w);height:100%;background:var(--bg);box-shadow:2px 0 6px rgba(0,0,0,.12);transition:transform .3s ease;z-index:900;overflow-y:auto}
     .side-panel.closed{transform:translateX(-100%)}
     .panel-toggle{position:absolute;right:-24px;top:12px;width:24px;height:24px;border:none;border-radius:4px;background:var(--accent);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:16px}
     .btn-sm{padding:4px 8px;font-size:11px}
     .form-group{display:flex;flex-direction:column;margin-bottom:8px}
     .form-group input,.form-group select{padding:6px 8px;border:1px solid #cbd5e1;border-radius:4px;font-size:13px}
+    hr{margin:12px 0;border:none;border-top:1px solid #e2e8f0}
+    /* ─── Main screenshot area ───────────────────────────────────────── */
     #mainArea{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:margin-left .3s ease}
     #mainArea.with-panel{margin-left:var(--panel-w)}
     #screenshot{max-width:100%;max-height:100%;object-fit:contain;background:#000}
+    /* ─── Log overlay ────────────────────────────────────────────────── */
+    #logOverlay{position:fixed;left:0;bottom:0;width:100%;height:20vh;background:rgba(30,41,59,0.75);color:#f1f5f9;font-size:12px;overflow-y:auto;padding:6px 10px;z-index:950;backdrop-filter:blur(3px)}
     #logOverlay pre{margin:0;white-space:pre-wrap;word-break:break-word}
+    /* ─── Session list ──────────────────────────────────────────────── */
     .session-item{display:flex;align-items:center;justify-content:space-between;padding:4px 6px;border-bottom:1px solid #e2e8f0;font-family:"Source Code Pro",monospace;font-size:12px}
     .session-id{cursor:pointer;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
     .session-item.active{background:#dbeafe}
     .session-close{background:none;border:none;color:#ef4444;cursor:pointer;font-size:14px;width:18px;height:18px;display:flex;align-items:center;justify-content:center}
+    /* ─── Inspect overlay ───────────────────────────────────────────── */
+    #inspectOverlay{position:fixed;right:0;top:0;width:300px;height:100%;background:rgba(15,23,42,0.95);color:#f8fafc;z-index:940;transform:translateX(100%);transition:transform .3s ease;overflow-y:auto;padding:10px;font-size:12px}
     #inspectOverlay.open{transform:translateX(0)}
     #inspectList li{padding:4px 6px;border-bottom:1px solid rgba(255,255,255,.08);cursor:pointer}
     #inspectList li:hover{background:rgba(255,255,255,.08)}
   </style>
 </head>
 <body>
+  <!-- ╭─────────────── Side Panel ────────────────╮ -->
   <aside id="sidePanel" class="side-panel open">
     <button id="togglePanel" class="panel-toggle" title="Hide / Show panel">❮</button>
     <div class="panel-content">
         </div>
         <div class="form-group"><button class="btn btn-danger" onclick="closeAllSessions()"><i class="lucide lucide-trash-2"></i>Close All</button></div>
       </section>
+      <hr/>
       <!-- Element Interaction -->
       <section>
         <h3>Element</h3>
         <button class="btn btn-primary" onclick="elementAction()"><i class="lucide lucide-mouse-pointer-click"></i>Run</button>
         <button class="btn btn-secondary btn-sm" style="margin-left:6px" onclick="inspectPage()"><i class="lucide lucide-list"></i>Inspect</button>
       </section>
+      <hr/>
       <!-- Session Manager -->
       <section>
         <h3>Sessions</h3>
     </div>
   </aside>
+  <!-- ╭─────────────── Main Area ────────────────╮ -->
   <main id="mainArea" class="with-panel">
     <img id="screenshot" alt="Browser Screenshot" />
   </main>
+  <!-- ╭─────────────── Log Overlay ────────────────╮ -->
   <div id="logOverlay"><pre id="logText"></pre></div>
+  <!-- ╭─────────────── Inspect Overlay ────────────────╮ -->
   <aside id="inspectOverlay">
     <h3 style="color:#38bdf8;margin-bottom:8px">Selectors</h3>
     <ul id="inspectList"></ul>
     <div id="inspectDetail"></div>
   </aside>
+  <!-- ╭─────────────── Scripts ────────────────╮ -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/lucide/0.263.1/lucide.min.js"></script>
   <script>
+    /* ────────── Fetch helpers ────────── */
+    const API = '/api';
+    const headers = {'Content-Type':'application/json'};
+    async function apiPost(path, body={}){
+      const res = await fetch(`${API}${path}`,{method:'POST',headers,body:JSON.stringify(body)});
+      if(!res.ok) throw new Error(await res.text());
+      return res.json();
+    }
+    async function apiGet(path){const res=await fetch(`${API}${path}`);if(!res.ok)throw new Error(await res.text());return res.json();}
+    /* ────────── State & utils ────────── */
+    let currentSessionId=null, lastScreenshot=null;
+    const logBox=document.getElementById('logText');
+    function log(msg){logBox.textContent+=`\n${new Date().toLocaleTimeString()}  ${msg}`;logBox.parentElement.scrollTop=logBox.parentElement.scrollHeight;}
+    function handleErr(e){console.error(e);log(`❗ ${e.message||e}`);alert(e.message||e);}
+    /* ────────── UI helpers ────────── */
     document.getElementById('togglePanel').onclick=()=>{
+      const panel=document.getElementById('sidePanel');panel.classList.toggle('closed');
+      document.getElementById('mainArea').classList.toggle('with-panel');
       document.getElementById('togglePanel').textContent=panel.classList.contains('closed')?'❯':'❮';};
+    document.getElementById('action').addEventListener('change',e=>{
+      document.getElementById('typeTextGroup').style.display=e.target.value==='type'?'block':'none';});
+    /* ────────── Browser / session functions ────────── */
+    async function launchBrowser(){try{
+        const res=await apiPost('/browser/launch',{});currentSessionId=res.session_id;log(`Launched ${currentSessionId}`);await refreshSessions();await captureScreenshot();}catch(e){handleErr(e)}}
+    async function navigate(){if(!currentSessionId)return alert('No session');const url=document.getElementById('navUrl').value.trim();if(!url)return;
+      try{await apiPost('/browser/navigate',{session_id:currentSessionId,url});log(`➡ ${url}`);await captureScreenshot();}catch(e){handleErr(e)}}
+    async function captureScreenshot(){if(!currentSessionId)return;try{
+      const res=await apiPost('/browser/screenshot',{session_id:currentSessionId,full_page:false});lastScreenshot=res.screenshot;document.getElementById('screenshot').src=`data:image/png;base64,${lastScreenshot}`;log('📸 screenshot');}catch(e){handleErr(e)}}
+    function downloadCurrentScreenshot(){if(!lastScreenshot)return alert('No screenshot');const a=document.createElement('a');a.href=`data:image/png;base64,${lastScreenshot}`;a.download=`screenshot_${Date.now()}.png`;a.click();}
+    async function closeSession(id){if(!confirm(`Close session\n${id}?`))return;try{
+        await apiPost(`/browser/close/${id}`,{});log(`✖ closed ${id}`);if(id===currentSessionId){currentSessionId=null;document.getElementById('screenshot').src='';}
+        await refreshSessions();}catch(e){handleErr(e)}}
+    async function closeAllSessions(){const list=document.querySelectorAll('.session-item');if(!list.length)return alert('No sessions');
+      if(!confirm(`Close ALL ${list.length} sessions?`))return;try{
+        for(const li of list){await apiPost(`/browser/close/${li.dataset.id}`,{});}currentSessionId=null;document.getElementById('screenshot').src='';lastScreenshot=null;await refreshSessions();log('✖ all sessions closed');}catch(e){handleErr(e)}}
+    async function refreshSessions(){try{
+        const res=await apiGet('/sessions');const ul=document.getElementById('sessionList');ul.innerHTML='';(res.sessions||[]).forEach(s=>{
+          const li=document.createElement('li');li.className='session-item';li.dataset.id=s.session_id;
+          li.innerHTML=`<span class='session-id'>${s.session_id}</span><button class='session-close' title='Close'>&times;</button>`;
+          if(s.session_id===currentSessionId)li.classList.add('active');
+          li.querySelector('.session-id').onclick=()=>{currentSessionId=s.session_id;log(`🔀 switched to ${s.session_id}`);refreshSessions();};
+          li.querySelector('.session-close').onclick=()=>closeSession(s.session_id);
+          ul.appendChild(li);});
+      }catch(e){handleErr(e)}}
     /* ────────── Element interaction ────────── */
+    async function elementAction(){if(!currentSessionId)return;const sel=document.getElementById('selector').value.trim();if(!sel)return alert('No selector');
+      const action=document.getElementById('action').value;const value=document.getElementById('typeText').value;
+      try{const res=await apiPost('/elements/action',{session_id:currentSessionId,selector:sel,action,value});
+        log(`✅ ${action} on ${sel}`);if(action!=='textContent')await captureScreenshot();else alert(`Element text:\n${res.text}`);}catch(e){handleErr(e)}}
+    /* ────────── Inspect overlay ────────── */
+    async function inspectPage(){if(!currentSessionId)return;const ov=document.getElementById('inspectOverlay');ov.classList.add('open');ov.querySelector('#inspectList').innerHTML='<li>Loading...</li>';
+      try{const res=await apiGet(`/elements/inspect/${currentSessionId}`);const list=ov.querySelector('#inspectList');list.innerHTML='';
+        (res.elements||[]).forEach(el=>{const li=document.createElement('li');li.textContent=el.selector;li.onmouseover=()=>{document.getElementById('inspectDetail').textContent=`<${el.tag}>  ${el.text}\n`+JSON.stringify(el.attributes,null,2)};
+          li.onclick=()=>{document.getElementById('selector').value=el.selector;document.getElementById('inspectOverlay').classList.remove('open');};list.appendChild(li);});
+      }catch(e){handleErr(e)}}
+    document.addEventListener('keydown',e=>{if(e.key==='Escape')document.getElementById('inspectOverlay').classList.remove('open');});
+    /* ────────── Initial UI setup ────────── */
+    refreshSessions();log('UI ready');
+  </script>
+</body>
+</html>