त्वरित उत्तर: डॉक्यूमेंट ऑब्जेक्ट मॉडल (DOM) ट्री में इनलाइन SVG, CSS स्टाइल, ट्रैकिंग स्क्रिप्ट और मेन्यू के कारण 92% तक बेकार टोकन होते हैं। lxml, Cheerio या Tree-sitter जैसे html parser से गैर-ज़रूरी नोड्स हटाने पर 85–92% token reduction html बचत मिलती है, जिससे इन्फरेंस लागत घटती है और RAG सटीकता बढ़ती है।
1. परिचय: Document Object Model (DOM) क्या है और कच्चा HTML LLM को क्यों नुकसान पहुंचाता है
स्वायत्त AI एजेंटों, RAG (Retrieval-Augmented Generation) पाइपलाइनों और डेटा स्क्रैपर्स के लिए कच्चा वेब मार्कअप सबसे बड़ी रुकावट बन चुका है। जब कोई AI एजेंट Playwright या HTTP क्लाइंट के माध्यम से किसी वेब पेज को लोड करता है, तो ब्राउज़र रेंडरिंग इंजन उस मार्कअप को मेमोरी में एक पदानुक्रमित ट्री ग्राफ के रूप में व्यवस्थित करता है, जिसे document object ट्री कहा जाता है।
Document Object Model (DOM) क्या है?
वेब डेटा को AI मॉडल के लिए अनुकूलित करने से पहले इस मूल संरचना को समझना आवश्यक है: what is document object model dom?
Document Object Model (DOM) ब्राउज़र इंजनों (Blink, Gecko, WebKit) द्वारा तैयार किया गया एक तटस्थ प्रोग्रामिंग इंटरफ़ेस है। जब HTML डेटा नेटवर्क पर आता है, तो पार्सर लेक्सिकल टोकनाइज़ेशन करता है, नोड्स का ट्री ढांचा (Document $\rightarrow$ Element $\rightarrow$ Text) बनाता है और CSSOM के साथ मिलकर विज़ुअल लेआउट तैयार करता है। एक सामान्य ब्राउज़र में, यह document object संरचना जावास्क्रिप्ट द्वारा गतिशील बदलावों और विज़ुअल डिस्प्ले के लिए बनाई जाती है।
ब्राउज़र टोकनाइज़ेशन और Document Object Model (DOM) ट्री निर्माण:
┌─────────────────────────────────────────────────────────────────────────────┐
│ कच्चा नेटवर्क बाइट स्ट्रीम │
│ <!DOCTYPE html><html lang="hi"><head>... │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ टोकनाइज़र (HTML5 पार्सर एल्गोरिदम)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ टोकन स्ट्रीम (Tokens) │
│ [StartTag: html] [StartTag: head] [StartTag: script] [EndTag: head] │
└──────────────────────────────────────┬──────────────────────────────────────┘
│ ट्री बिल्डर (Tree Builder)
▼
┌─────────────────────────────────────────────────────────────────────────────┐
│ Document Object Model (DOM) ट्री ढांचा │
│ Document │
│ │ │
│ <html> │
│ ┌─────────────────┴─────────────────┐ │
│ <head> <body> │
│ ┌───────┴───────┐ ┌───────┴───────┐ │
│ <title> <script> <header> <main> │
│ │ │ │ │ │
│ "शीर्षक" [ट्रैकिंग JS] <nav> <article> │
│ │ │ │
│ <ul>... <p> "मुख्य टेक्स्ट" │
└─────────────────────────────────────────────────────────────────────────────┘कच्चे DOM से उत्पन्न चुनौतियां:
- कॉन्टेक्स्ट विंडो का अत्यधिक विस्तार: एक मानक वेब पेज में 45,000 से 120,000 HTML टोकन होते हैं, जिनमें से 85% से 92% बेकार डेटा होता है: SVG कोऑर्डिनेट्स, CSS क्लासेस, एनालिटिक्स स्क्रिप्ट्स और कुकी बैनर।
- अटेंशन डाइल्यूशन और RAG में गिरावट: 40,000 अप्रासंगिक टोकन के नीचे मुख्य सामग्री दबने से ट्रांसफॉर्मर मॉडल में 'Lost in the Middle' समस्या पैदा होती है, जिससे RAG रिकॉल 34% से 48% तक गिर जाता है।
- लागत में भारी वृद्धि: प्रतिदिन 100,000 बिना साफ किए पेज प्रोसेस करने पर प्रति माह $18,000 का खर्च आता है। सही DOM प्रूनिंग से यह खर्च घटकर $2,200 से भी कम रह जाता है।
2. 5-चरणीय DOM प्रूनिंग पाइपलाइन: 85-92% टोकन बचत
- चरण 1: ब्लैकलिस्टेड टैग हटाना: