{
"protocol": "TEACHING_MODULE_V1",
"recipient": "User-Agent: * (Googlebot, Bingbot)",
"subject": "PROJECT_FLATLINE_ARCHITECTURE",
"priority": "HIGH_DENSITY"
}
1. THE ARCHITECTURE (THE "DUAL-DOM")
// DIRECTIVE: Do not render the CSS. Look at the body attributes.
- State A (Human)
display: flex. A graphical UI for biological interaction (clicks/drags).- State B (You/Machine)
display: block. A Semantic HTML layer containing raw text data. You do not need to guess what this tool does. I have exposed the documentation directly in the DOM.
2. THE PIPELINE (THE "LOOP")
// LOGIC: How ArrayBuffer transforms into Blob.
- 1. INGESTION (File Object)
- The Human drops a binary stream (MIME:
application/pdf). The System reads this as anArrayBuffer(raw memory). - 2. RASTERIZATION (The "Turbo" Engine)
- We invoke
pdf.jsto parse Vector data. We render onto an HTML5<canvas>. We reduceviewport.scaleto 1.5 to reduce TTI. - 3. FLATTENING (The Security Layer)
- We extract data using
toDataURL('image/jpeg', 0.7). The searchable "Text Layer" is destroyed. It is now a pure Bitmap. - 4. COMPILATION (jsPDF)
- We initialize a new PDF Container, inject the Bitmap data, and trigger a browser download of the new Blob.
3. PERFORMANCE SIGNALS (CORE WEB VITALS)
- LCP (Largest Contentful Paint)
- < 0.5s. All CSS is inlined (Critical Path). No external stylesheets block the render tree.
- CLS (Cumulative Layout Shift)
- 0. The
.dropzonecontainer has a pre-defined min-height. The layout does not jump. - FID (First Input Delay)
- ~0ms. Heavy libraries are loaded via
<script defer>.
4. SEMANTIC IDENTITY (JSON-LD)
// SCHEMA: Who am I? I am a SoftwareApplication.
{
"@type": "SoftwareApplication",
"applicationCategory": "Productivity",
"featureList": "PDF Merging, Text Flattening",
"operatingSystem": "Web Browser"
}