विजन LLM वेब स्क्रैपिंग: स्क्रीनशॉट पढ़ें, DOM नहीं

विज़न मॉडल आपके HTML को नहीं पढ़ता; यह पृष्ठ की एक चित्र को पढ़ता है। इससे "स्क्रैपिंग" का मतलब बदल जाता है: मूल्य रखने वाले चयनकर्ता की खोज करने के बजाय, आप एक स्क्रीनशॉट एक मॉडल को देते हैं और पूछते हैं कि इसे क्या दिखता है। स्क्रैपलेस स्क्रैपिंग ब्राउज़र उस स्क्रीनशॉट को बादलों में Chrome DevTools प्रोटोकॉल के माध्यम से ले जाता है, और एक मल्टीमोडल मॉडल पिक्सेल को संरचित डेटा में बदल देता है।

यह उपकरण तब तक पहुंचने के लिए है जब DOM आपके खिलाफ हो — एक छवि में बेक किया गया मूल्य, एक चार्ट जिसमें कोई मूल तालिका नहीं है, एक कैनवास-निर्मित विजेट, या एक लेआउट जहाँ अर्थ स्थिति में है न कि टैग्स में। यह गाइड स्क्रैपिंग ब्राउज़र से जुड़ता है, एक रेंडर किया गया पृष्ठ का स्क्रीनशॉट कैप्चर करता है, और एक विज़न मॉडल छवि से JSON लौटाता है, हर कदम लाइव क्रियान्वित किया जाता है।

DOM के बजाय स्क्रीनशॉट क्यों पढ़ें

चयनकर्ता-आधारित स्क्रैपिंग यह मानती है कि आप जो डेटा चाहते हैं वह मार्कअप में एक मूल्य है। अक्सर ऐसा नहीं होता। एक स्टोरफ्रंट कीमतों को छवियों के रूप में प्रस्तुत कर सकता है ताकि बॉट्स को हतोत्साहित किया जा सके, एक डैशबोर्ड संख्याओं को एक कैनवास तत्व पर खींच सकता है जिसमें कोई पाठ नहीं होता, और एक मार्केटिंग पृष्ठ पूरी तरह से दृश्य लेआउट में तुलना को कोड कर सकता है। ऐसे मामलों में HTML या तो मूल्य के लिए खाली है या इतना उलझा हुआ है कि चयनकर्ता उस चीज़ से अधिक नाजुक है जिस पर यह इंगित करता है।

एक विज़न मॉडल मार्कअप को दरकिनार करता है। यह वही देखता है जो एक व्यक्ति देखता है — रेंडर किया गया, लेआउट पृष्ठ — और छवि से मूल्यों को पढ़ता है। स्क्रीनशॉट को वफ़ादार होना चाहिए, यही कारण है कि यह एक असली ब्राउज़र से आता है: स्क्रैपिंग ब्राउज़र पृष्ठ को सर्वर-साइड पर रेंडर करता है, उसके स्क्रिप्ट्स को चलाता है, और उस फ्रेम को कैप्चर करता है जो एक उपयोगकर्ता देखेगा, ताकि मॉडल समाप्त पृष्ठ के बारे में तर्क कर सके न कि एक आधा बना हुआ एक।

पूर्वआवश्यकताएँ

आपको Python 3.9 या नया, playwright क्लाइंट और requests, ब्राउज़र सत्र के लिए एक स्क्रैपलेस API कुंजी, और एक मल्टीमोडल मॉडल के लिए एक कुंजी की आवश्यकता है। स्क्रैपलेस कुंजी को मुफ्त योजना पर app.scrapeless.com पर प्राप्त करें। दोनों कुंजी को पर्यावरण चर में रखें; वे एक कनेक्शन URL और एक प्रमाणीकरण हेडर में यात्रा करते हैं, कभी भी स्रोत में नहीं।

स्थापित करें

pip install playwright requests

कॉन्फ़िगर करें

export SCRAPELESS_API_KEY="your_scrapeless_api_key"
export OPENROUTER_API_KEY="your_model_api_key"

स्क्रैपिंग ब्राउज़र के साथ स्क्रीनशॉट कैप्चर करें

CDP के माध्यम से क्लाउड ब्राउज़र से कनेक्ट करें, पृष्ठ खोलें, और व्यू पोर्ट को कैप्चर करें। स्क्रीनशॉट एक PNG है जो उसी Chromium द्वारा उत्पन्न होता है जिसने पृष्ठ को रेंडर किया, इसलिए जो मॉडल प्राप्त करता है वह बिल्कुल वही है जो एक आगंतुक देखेगा। कैप्चर Chrome DevTools प्रोटोकॉल के माध्यम से होता है और PNG छवि प्रारूप में बाइट्स लौटाता है:

import os
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

print("स्क्रीनशॉट बाइट्स:", len(png))
print("PNG हस्ताक्षर ठीक है:", png[:8] == b"\x89PNG\r\n\x1a\n")

रन वास्तविक छवि लौटने की पुष्टि करता है:

स्क्रीनशॉट बाइट्स: 55462
PNG हस्ताक्षर ठीक है: True

अपनी API कुंजी मुफ्त योजना पर प्राप्त करें: app.scrapeless.com

स्क्रीनशॉट को विज़न मॉडल के साथ पढ़ें

PNG को एक बेस64 डेटा URL के रूप में एन्कोड करें, इसे आपूर्ति की जाने वाली स्कीमा के साथ एक मल्टीमोडल मॉडल में भेजें, और प्रतिक्रिया को JSON में सीमित करें। मॉडल रेंडर किए गए पृष्ठ को पढ़ता है और क्षेत्र वापस करता है — कोई चयनकर्ता नहीं, कोई DOM यात्रा नहीं। बेस64 बेस64 डेटा-एन्कोडिंग मानक का पालन करता है, जो यह बताता है कि छवि JSON अनुरोध के अंदर कैसे यात्रा करती है। पूरा कैप्चर-और-पढ़ने का पाइपलाइन:

import os, base64, json, requests
from urllib.parse import urlencode
from playwright.sync_api import sync_playwright

def browser_url():
    return "wss://browser.scrapeless.com/api/v2/browser?" + urlencode(
        {"token": os.environ["SCRAPELESS_API_KEY"], "sessionTTL": 180, "proxyCountry": "US"})

with sync_playwright() as p:
    browser = p.chromium.connect_over_cdp(browser_url())
    page = browser.new_page(viewport={"width": 1280, "height": 900})
    page.goto("https://quotes.toscrape.com/", wait_until="networkidle")
    png = page.screenshot()
    browser.close()

img = "data:image/png;base64," + base64.b64encode(png).decode()
resp = requests.post(
    "https://openrouter.ai/api/v1/chat/completions", 
    headers={"Authorization": f"Bearer {os.environ['OPENROUTER_API_KEY']}", "Content-Type": "application/json"},
    json={"model": "google/gemini-2.5-flash-lite",
          "messages": [{"role": "user", "content": [
              {"type": "text", "text": 'इस उद्धरण पृष्ठ के स्क्रीनशॉट से, पहले 3 उद्धरणों के लिए JSON '
                                       '{"quotes":[{"author":..., "text":...}]} वापस करें जो आप देख सकते हैं। केवल JSON ही लौटाएं.'},
              {"type": "image_url", "image_url": {"url": img}}]}],
          "response_format": {"type": "json_object"}, "temperature": 0},
    timeout=120,
)
resp.raise_for_status()
quotes = json.loads(resp.json()["choices"][0]["message"]["content"])["quotes"]
print("छवि से निकाले गए उद्धरण:", len(quotes))
print("छवि से पहला लेखक:", quotes[0]["author"])

मॉडल पिक्सेल को पढ़ता है और रिकॉर्ड लौटाता है:

छवि से निकाले गए उद्धरण: 3
छवि से पहला लेखक: अल्बर्ट आइंस्टाइन

छवि को कभी भी HTML के रूप में पार्स नहीं किया गया। लेखकों का नाम उस स्क्रीनशॉट में प्रदर्शित पाठ से आया, यही कारण है कि यह दृष्टिकोण एक पृष्ठ को सहन करता है जो एक छवि टैग या कैनवास के पीछे समान मान को छिपाता है।

जब दृष्टि अपनी लागत कमाती है, और जब नहीं

दृष्टि स्क्रैपिंग मुफ्त नहीं है - एक छवि HTML के उस स्निपेट की तुलना में बहुत अधिक टोकन है जो समान मान रखता है, और मॉडल छोटे या कम कंट्रास्ट वाले पाठ को गलत पढ़ सकता है। इसलिए इसे जानबूझकर पकड़ें। यह तब लाभदायक होता है जब मान वास्तव में दृश्य हो: छवियों में बेक किया गया पाठ, चार्ट और कैनवास विजेट, पृष्ठ पर निर्मित PDFs, या एक लेआउट जिसका अर्थ स्थानिक हो। जब डेटा DOM में साफ पाठ हो, तो एक चयनकर्ता सस्ता, तेज और सटीक होता है, और इसे मार्कअप से पढ़ना बेहतर विकल्प है। स्क्रैपिंग ब्राउज़र को दृष्टि मॉडल के साथ जोड़ने की ताकत यह है कि आप एक ही प्रदर्शित सत्र के खिलाफ दोनों के बीच स्विच कर सकते हैं - जहां भरोसेमंद है वहां DOM को पार्स करें, और जहां नहीं है वहां स्क्रीनशॉट लें और पढ़ें।

निष्कर्ष

दृष्टि-प्रतिमान स्क्रैपिंग उस तरीके से पृष्ठ को पढ़ती है जैसे एक व्यक्ति पढ़ता है। स्क्रैपलेस स्क्रैपिंग ब्राउज़र लक्ष्य को रूपांतरित करता है और CDP के माध्यम से क्लाउड में एक सच्चा स्क्रीनशॉट कैप्चर करता है, और एक मल्टीमोडल मॉडल उस छवि को संरचित JSON में बदल देता है। ऊपर चलाने से तीन उद्धरण और लेखक "अल्बर्ट आइंस्टाइन" पिक्सेल से खींचे गए, बिना कोड में कहीं भी चयनकर्ता के। इसका उपयोग तब करें जब DOM मान नहीं रख सकता है, और उन पृष्ठों के भागों के लिए चयनकर्ताओं को बनाए रखें जो पहले से साफ पाठ रखते हैं - LLM स्क्रैपर क्या है पर व्याख्याता मॉडल के प्रविष्टि में कहां फिट होते हैं, को रूपरेखा दें। स्क्रैपिंग ब्राउज़र उत्पाद पृष्ठ पर क्षमताओं को पढ़ें और इससे पहले कि आप इसे बड़े पैमाने पर चलाएं, मूल्य निर्धारण पृष्ठ के खिलाफ छवि मात्रा को तौलें।

हमारे समुदाय में शामिल हों और एक मुफ्त योजना को प्राप्त करें और अन्य डेवलपर्स के साथ ध्यान-साझा करें जो निष्कर्ष पाइपलाइन बना रहे हैं: डिस्कॉर्ड · टेलीग्राम।

सामान्य प्रश्न

प्र: मुझे HTML पार्स करने के बजाय स्क्रीनशॉट द्वारा स्क्रैपिंग कब करनी चाहिए?

जब मान दृश्यात्मक हो बजाय पाठात्मक के - एक छवि के रूप में प्रदर्शित मूल्य, कैनवास पर खींची गई संख्याएँ, बिना आधारभूत तालिका के चार्ट, या एक लेआउट जो स्थिति द्वारा अर्थ को एन्कोड करता है। जब डेटा DOM में साफ पाठ हो, तो CSS चयनकर्ता सस्ता और अधिक सटीक होता है।

प्र: स्क्रीनशॉट को स्क्रैपिंग ब्राउज़र के बजाय स्थानीय क्यों कैप्चर करें?

क्योंकि मॉडल केवल वही पढ़ सकता है जो स्क्रीनशॉट दिखाता है। स्क्रैपिंग ब्राउज़र पृष्ठ को सर्वर-साइड पर रेंडर करता है, उसके स्क्रिप्ट चलाता है, और क्लाउड क्रोमियम से समाप्त फ्रेम को कैप्चर करता है, इसलिए छवि पूरी तरह से रेंडर की गई पृष्ठ होती है न कि किसी स्थानीय हेडलेस ब्राउज़र से जो आपको भी बनाए रखनी होती है।

प्र: छवि कैसे अनुरोध में जाती है?

PNG बाइट्स को data:image/png;base64,... URL में बेस64-कोडित किया जाता है और पाठ प्रॉम्प्ट के साथ image_url सामग्री भाग के रूप में भेजा जाता है। मॉडल छवि को उसी JSON अनुरोध में एक साथ निर्देशों के रूप में प्राप्त करता है।

प्र: क्या मॉडल विश्वसनीय संरचना लौटाता है?

प्रति उत्तर को JSON ऑब्जेक्ट में सीमित करें और इसे एक स्पष्ट स्कीमा दें, जैसा कि उदाहरण में है। मॉडल तब केवल उन क्षेत्रों को लौटाता है जिनकी आपने मांग की थी। छोटे या कम-प्रतिविम्ब पाठों के दृश्य पढ़ने के साथ सावधानी बरतें और उन मूल्यों को मान्य करें जो बिल्कुल सही होने चाहिए।

प्र: क्या यह DOM स्क्रैपिंग से महंगा है?

हां। एक छवि समान HTML स्निपेट की तुलना में बहुत अधिक टोकन की खपत करती है, इसलिए दृष्टि स्क्रैपिंग प्रति पृष्ठ अधिक महंगा होता है। इसका उपयोग तब करें जब यह एक वास्तविक समस्या को दूर करता है - केवल दृश्य डेटा - और DOM को पार्स करें जहां पाठ पहले से उपलब्ध है।

प्र: क्या मैं दोनों दृष्टिकोणों को मिला सकता हूँ?

हाँ, और यह अक्सर सही डिज़ाइन होता है। एकल स्क्रैपिंग ब्राउज़र सत्र दोनों कार्य कर सकता है: उन क्षेत्रों के लिए DOM को पार्स करें जो स्वच्छ मार्कअप में रहते हैं और उस क्षेत्र का स्क्रीनशॉट लें जो नहीं है, ताकि पृष्ठ का प्रत्येक भाग सबसे सस्ती और विश्वसनीय तरीके से पढ़ा जा सके।