D2Snap

D2Snap is a first-of-its-kind DOM downsampling algorithm, designed for use with LLM-based web agents.

Integrate

D2Snap.d2Snap(
  dom: DOM,
  k: number, l: number, m: number,
  options?: Options
): Promise<string>

D2Snap.adaptiveD2Snap(
  dom: DOM,
  maxTokens: number = 4096,
  maxIterations: number = 5,
  options?: Options
): Promise<string>

type DOM = Document | Element | string;
type Options = {
  assignUniqueIDs?: boolean;          // false (this option is not available with string input)
  debug?: boolean;                    // false
  keepUnknownElements?: boolean;      // false
  skipMarkdownTranslation?: boolean;  // false
};

Browser

<script src="https://cdn.jsdelivr.net/gh/surfly/D2Snap@main/dist/D2Snap.browser.js"></script>

Module

npm install surfly/D2Snap

Install jsdom to use the library with Node.js:

npm install jsdom

import D2Snap from "@surfly/d2snap";

Experiment

Setup

npm install
npm install jsdom

Build

npm run build

Test

npm run test

Evaluate

Provide LLM API provider key(s) to .env (compare example).

npm run eval:<snapshot>

<snapshot> ∈ { gui, dom, bu, D2Snap }

npm run eval:D2Snap -- --verbose --split 10,20 --provider openai --model gpt-4o

Re-create Snapshots

npm run snapshots:create

Beyond Pixels: Exploring DOM Downsampling for LLM-Based Web Agents
_{Thassilo M. Schiepanski   Nicholas Piël
Surfly BV}