D2Snap is a first-of-its-kind DOM downsampling algorithm, designed for use with LLM-based web agents.
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
};<script src="https://cdn.jsdelivr.net/gh/webfuse-com/D2Snap@main/dist/D2Snap.browser.js"></script>npm install webfuse-com/D2SnapInstall jsdom to use the library with Node.js:
npm install jsdom
import * as D2Snap from "@webfuse-com/d2snap";<section tabindex="3" class="container" required="true">
# Our Pizza
<div class="shadow-lg">
## Margherita
A simple classic mozzarela tomatoes and basil
<button type="button">Add</button>
## Capricciosa
A rich taste A true favourite
<button type="button">Add</button>
</div>
</section>↓ D2Snap ↓
<section class="container" required="true">
# Our Pizza
<div class="shadow-lg">
## Margherita
A simple classic
<button>Add</button>
## Capricciosa
A rich taste
<button>Add</button>
</div>
</section>↓ D2Snap ↓
<section>
# Our Pizza
## Margherita
A simple classic
<button>Add</button>
## Capricciosa
A rich taste
<button>Add</button>
</section>npm install
npm install jsdomnpm run buildnpm run testProvide 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-4onpm run snapshots:create
Beyond Pixels: Exploring DOM Downsampling for LLM-Based Web Agents
Thassilo M. Schiepanski
Nicholas Piël
Surfly BV