headless_browserV2

No application file

File size: 14,496 Bytes

<!-- ========================= 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}
    .panel-content{padding:14px 16px 40px 16px}
    h3{font-size:16px;margin-bottom:6px;color:var(--dark)}
    .btn{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:none;border-radius:6px;font-size:13px;cursor:pointer}
    .btn-primary{background:var(--accent);color:#fff}
    .btn-secondary{background:#e2e8f0;color:#334155}
    .btn-danger{background:#ef4444;color:#fff}
    .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:20px;width:24px;height:24px;display:flex;align-items:right;justify-content:right}
    /* ─── 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)}
    #inspectDetail{margin-top:6px;font-size:11px;color:#cbd5e1;white-space:pre-wrap}
  </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">
      <!-- Browser Controls -->
      <section>
        <h3>Browser</h3>
        <div class="form-group"><button class="btn btn-primary" onclick="launchBrowser()"><i class="lucide lucide-rocket"></i>Launch</button></div>
        <div class="form-group"><input id="navUrl" placeholder="https://example.com"/></div>
        <div class="form-group"><button class="btn btn-secondary" onclick="navigate()"><i class="lucide lucide-globe"></i>Navigate</button></div>
        <div class="form-group" style="display:flex;gap:6px">
          <button class="btn btn-secondary" onclick="captureScreenshot()"><i class="lucide lucide-camera"></i>Capture</button>
          <button class="btn btn-secondary" onclick="downloadCurrentScreenshot()"><i class="lucide lucide-download"></i>Download</button>
        </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>
        <div class="form-group"><input id="selector" placeholder="CSS selector"/></div>
        <div class="form-group"><select id="action">
          <option value="click">click</option>
          <option value="type">type</option>
          <option value="textContent">getText</option>
        </select></div>
        <div class="form-group" id="typeTextGroup" style="display:none"><input id="typeText" placeholder="text to type"/></div>
        <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>
        <button class="btn btn-secondary btn-sm" style="margin-bottom:6px" onclick="refreshSessions()"><i class="lucide lucide-refresh-ccw"></i>Refresh</button>
        <ul id="sessionList"></ul>
      </section>
    </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 apiDelete(path) {
      const r = await fetch('/api' + path, { method: 'DELETE' });
      if (!r.ok) throw new Error(await r.text());
      return r.json ? r.json() : {};
    }
    
    async function closeSession(id){
      if(!confirm(`Close session\n${id}?`))return;
      try{
        await apiDelete(`/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=await listSessions(); 
      if(!list.length) return alert("No sessions");
      if(!confirm("Close ALL sessions? This cannot be undone.")) return;
      try{
        for(const s of list){
          await apiDelete(`/browser/close/${s.session_id}`);
        }
        sessionId=null; refreshSessions(); appendLog("All sessions closed");
      }
      catch(e){
        appendLog(`❗ close ${s.session_id}: ${e.message}`);
      }
    }

    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>