Document Layout Attention: Field Extraction (2D)
Interactive 2D simulator of multimodal document-layout attention (LayoutLM-style): watch a self-attention layer link invoice labels to their values by blending spatial position with content similarity, with a live attention-weight heatmap plus extraction accuracy, entropy and OCR-noise readouts.
Intelligent Document Processing (IDP) systems like LayoutLMv3 read a form or invoice not as a flat string of OCR text but as tokens scattered across a 2D page, each carrying both semantic content and spatial position. This simulator renders a mock invoice as a flat 2D page of labelled blocks and computes a real self-attention layer over them, blending content similarity with a spatial-proximity bias exactly as a layout-aware transformer does, then draws the resulting label→value attention links as glowing arcs plus a live N×N attention-weight heatmap. Tune the spatial bias weight, softmax temperature, simulated OCR noise and link-confidence threshold, or shuffle the layout entirely, and watch live field-extraction accuracy, link count and attention entropy respond. Drag the page to pan and scroll to zoom.
Interactive 2D simulator of multimodal document-layout attention (LayoutLM-style): watch a self-attention layer link invoice labels to their values by blending spatial position with content similarity, with a live attention-weight heatmap plus extraction accuracy, entropy and OCR-noise readouts.
2D · HTML5 Canvas 2D · 60 FPS target · runs fully client-side, no install