Free · Educational simulation · Runs offline

See how a search engine turns your HTML into a vector

An interactive, in-browser walkthrough of a Google-style annotator: structural weighting, Knowledge Graph entities, sparse hashing and cosine similarity — nothing uploaded.

A four-stage look inside semantic indexing

Structural weight heatmap

Paste HTML and watch every text node get a tag-hierarchy multiplier — headings 5.0×, emphasis 3.0×, paragraphs 1.0×, footers 0.2× — shown as a colour heatmap and an interactive DOM tree.

Knowledge Graph alignment

Matched entities are highlighted in place, disambiguated by context (Apple Inc. vs the fruit), scored TF-IDF style, and rendered as a radial anchor map with their Knowledge Graph IDs.

Live MurmurHash3 terminal

See the “hashing trick” in action: tokens hash straight to a bucket index with no stored vocabulary. Type your own word to watch it light up a cell in the 256-slot sparse grid.

Dense embedding & cosine match

The document and your search query are projected into a 2-D latent space. A full cosine-similarity ledger shows the vectors, dot product, magnitudes and the resulting match percentage.

Dual-document comparator

Score two HTML documents against one query side by side, with match bars, an overlaid latent map, and a plain-language verdict on which page wins and exactly why.

Private, offline, no sign-up

Every calculation runs in your browser — your HTML never leaves the page. Install it as an app and the whole visualizer keeps working with no connection.

How it works

  1. 1

    Drop in HTML

    Paste markup, drag an .html file onto the editor, or load a built-in sample (Tech, Crop or Spam) in the single-document sandbox.

  2. 2

    Step through the pipeline

    Move between the four stages with the stepper, or hit Auto-play to cycle them. Every panel recomputes live as you edit.

  3. 3

    Test a query — or compare two pages

    Type a search query to see the match percentage, or switch to the comparator to pit Document A against Document B on one shared query.

Understanding each option

Sandbox vs comparator

The two tabs at the top switch modes. Single-document sandbox walks one page through all four stages. Dual-document comparator runs the full pipeline on two pages against one query and declares a winner.

Weight heatmap & DOM tree

In Stage 1, toggle Weight heatmap for a colour-coded list of text nodes by multiplier, or DOM tree for a compact hierarchy with word counts. Hover any node for a plain-English note on why its weight matters.

Entities & the anchor map

Stage 2 highlights matched entities in the text and lists them with their Knowledge Graph ID, category and TF-IDF score. Click any entity — in the text, the table, or a row — to re-centre the radial anchor map and read its definition.

The hashing terminal

Stage 3 logs each token’s MurmurHash3 hex digest and its % 256 bucket. Type any word into the > prompt and press Hash to append it and light its cell. Hover a grid cell to see exactly which tokens landed there.

Query tester & the ledger

Stage 4’s search box moves the blue query dot around the latent map. The similarity ledger shows the document and query vectors, their dot product, both magnitudes and the cosine result — the number behind the “Query match %”.

Running a comparison

In the comparator, edit the query or either document and the scorecard marks itself out of date until you press Run comparison. Preset chips fill common queries; the Tech / Crop / Spam chips load samples into each document.

Frequently asked questions

Is this Google's real FatCat algorithm?

No. It is an educational simulation. It reproduces the widely-discussed shape of a Google-style annotator pipeline — structural weighting, Knowledge Graph entities, sparse hashing and dense embeddings — using transparent, deterministic maths so you can learn the concepts. It is not Google's production code and does not call any Google service.

Does my HTML get uploaded anywhere?

No. Everything runs entirely in your browser. Your pasted or dropped HTML, your query and every calculation stay on your device — there is no server, no upload and no analytics. You can even use it offline once installed.

What do the structural weights (5.0×, 3.0×, 1.0×, 0.2×) mean?

They are the multipliers the parser assigns by tag hierarchy: headings and header/title elements get 5.0×, emphasis tags such as b, strong, em, i, blockquote and mark get 3.0×, ordinary paragraph text gets 1.0×, and footer, nav, small and aside metadata get 0.2×. Higher-weight text has more influence on the document's semantic vector.

How are entities matched and disambiguated?

The tool scans your text for a built-in set of Knowledge Graph entities and their aliases, and resolves ambiguous terms by context — for example it decides whether “Apple” means Apple Inc. or the fruit by weighing tech versus agriculture keywords in the whole document. Prominent capitalised words that are not in the set are picked up as dynamic custom entities. Each match gets a TF-IDF-style score built from its frequency, the entity's base weight and its node's structural weight.

What is the “hashing trick” and the 256-cell grid?

MurmurHash3 turns any string directly into a bucket index (hash modulo 256) without keeping a stored vocabulary list. The 16×16 grid is a 256-slot window onto a much larger sparse vector; lit cells are buckets that at least one token or entity hashed into. You can type your own token into the terminal to watch where it lands.

How is the query match percentage calculated?

Each matched entity has a position in a 2-D latent space. The document vector is the weighted centroid of its entities; the query vector is built from the entities your query mentions. The match percentage is the cosine similarity between those two vectors — the angle between them — so a query aimed at the same semantic region as the document scores higher.

What does the dual-document comparator do?

It runs the full pipeline on two documents against one shared query, then shows each document's match score, the entities each aligned to, an overlay of both centroids and the query in latent space, and a plain-language verdict explaining which document wins and why. Edit an input and the scorecard marks itself out of date until you re-run the comparison.