Method and device for identifying webpage list selector based on LLM, equipment and medium
By injecting custom scripts and using screenshot assistance into the browser, the problems of token cost and loss of structural information in web page list recognition by LLM are solved, achieving efficient and accurate recognition of web page list selectors.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-11-07
- Publication Date
- 2026-04-10
AI Technical Summary
In order to reduce token costs, existing LLMs often use direct conversion to Markdown or character information when extracting web page information, resulting in the loss of the original structural information of the web page and making it difficult to efficiently identify the set list of web pages.
By injecting a custom webpage data extraction script into the browser, the DOM nodes of the first two screens of the webpage are captured and unnecessary elements are filtered out. Combined with the webpage screenshot, the data is input into the LLM to obtain a target list selector.
It effectively reduces token costs, retains key structural information, and improves the accuracy and efficiency of webpage list recognition, making it suitable for recognition scenarios involving structured content.
Smart Images
Figure CN121834028A_ABST
Abstract
Description
TECHNICAL FIELD
[0001] The present application relates to the field of large language models, in particular to a method and device for identifying a webpage list selector based on an LLM. BACKGROUND
[0002] To reduce Token costs, mainstream LLMs often use two processing methods when extracting webpage information: one is to directly convert webpage content into Markdown format, and the other is to convert the entire webpage into character information with an index of interactive elements. Although these two methods can effectively control Token consumption, they will lose the original complete structure information of the webpage. Therefore, they are only suitable for extracting pure webpage text or processing simple interactive scenarios; if a webpage list needs to be efficiently identified, the LLM will often produce obvious hallucinations, resulting in inaccurate final extraction results, because the key page structure information is missing. SUMMARY
[0003] The technical problem to be solved by the present application is to provide a method and device for identifying a webpage list selector based on an LLM, which not only effectively reduces Token costs, but also provides the LLM with sufficient and effective context, enabling the efficient identification of the XPath or CSSSelector of the target webpage list.
[0004] In a first aspect, the present application provides a method for identifying a webpage list selector based on an LLM, comprising the following steps: Step 1: starting a browser and navigating to a webpage where a target list is located; Step 2: injecting a customized webpage data extraction script into the webpage through a CDP protocol, wherein the webpage data extraction script is used to extract webpage structure information; Step 3: intercepting the current webpage to obtain screenshot characters; Step 4: inputting the webpage structure information, screenshot characters, and a set of prompt words into a user-specified LLM to obtain a target list selector of the webpage.
[0005] In a second aspect, the present application provides a device for identifying a webpage list selector based on an LLM, comprising: a navigation webpage module configured to start a browser and navigate to a webpage where a target list is located; an extraction webpage information module configured to inject a customized webpage data extraction script into the webpage through a CDP protocol, wherein the webpage data extraction script is used to extract webpage structure information; an interception webpage module configured to intercept the current webpage to obtain screenshot characters; an acquisition selector module configured to input the webpage structure information, screenshot characters, and a set of prompt words into a user-specified LLM to obtain a target list selector of the webpage.
[0006] In a third aspect, the present application provides an electronic device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method of the first aspect when executing the program.
[0007] In a fourth aspect, the present application provides a computer-readable storage medium, which stores a computer program, wherein the program is executed by a processor to implement the method of the first aspect.
[0008] The one or more technical solutions provided by the present application have at least the following technical effects or advantages: 1. Focus on core content and reduce redundant data: Only the first two screens of DOM nodes are extracted, and elements such as scripts, styles, multimedia, and links that have little impact on structural identification are filtered out, greatly reducing the data volume and the Token cost and computational resource consumption of subsequent processing.
[0009] 2. Preserve key structural information: Unlike direct conversion to plain text formats such as Markdown, the code preserves the HTML tag hierarchy and node relationships by copying and simplifying the DOM, providing a foundation for identifying structured content such as web page lists and reducing identification bias caused by information loss.
[0010] 3. Purification processing improves information density: After removing irrelevant information such as inline styles, unnecessary spaces, and comments, the output HTML string is more concise, and the proportion of core content (such as text and list container tags) is higher, facilitating subsequent model rapid positioning and parsing of key structures.
[0011] 4. Strongly targeted scenarios: For scenarios such as identifying web page lists that require structural information, the balance between data simplification and structure preservation is considered, making it more accurate than plain text extraction and more efficient than full-quantity DOM extraction.
[0012] The present application optimizes the scenario of web page list identification by obtaining the DOM structure information of the first two screens, filtering out large inline styles, inline scripts, pictures, audio, video, links, and other Dom nodes, and providing a current web screenshot for LLM to assist in necessary identification, effectively reducing the Token cost and providing sufficient and effective context for LLM to efficiently identify the XPath or CSSSelector of the target web page list.
[0013] The above description is only a summary of the technical solutions of the present application. In order to more clearly understand the technical means of the present application, the specific embodiments of the present application can be implemented according to the content of the specification, and in order to make the above and other purposes, features and advantages of the present application more obvious and easy to understand, the following specific embodiments of the present application are described. BRIEF DESCRIPTION OF DRAWINGS
[0014] The application will be further described below with reference to the accompanying drawings in connection with the embodiments.
[0015] Figure 1 The flow chart of the method in the embodiment one of the application; Figure 2 The structural schematic diagram of the device in the embodiment two of the application. DETAILED DESCRIPTION
[0016] The technical solution in the embodiment of the application has the following general idea: Step 1: start the browser and jump to the webpage A of the to-be-identified list; Step 2: use CDP to inject the customized webpage data extraction script B to the webpage A, and the core code of the webpage data extraction script B is as follows: dom_content = await self.page.evaluate(""" () => { function getCleanTwoScreenHTML() { const twoScreenHeight = window.innerHeight * 2; const originalElements = document.querySelectorAll("*"); const elementsToRemove = new Set(); originalElements.forEach(el => { const rect = el.getBoundingClientRect(); if (rect.top > twoScreenHeight || rect.bottom > twoScreenHeight){ elementsToRemove.add(el.tagName + ':' + Array.from(el.parentNode.children).indexOf(el)); } }); const htmlClone = document.documentElement.cloneNode(true); htmlClone.querySelectorAll("script, style, link[rel='stylesheet']").forEach(el => el.remove()); htmlClone.querySelectorAll("head meta, head noscript").forEach(el=> el.remove()); htmlClone.querySelectorAll("svg, image, img, video, audio,canvas, iframe, embed, object, picture, source, a").forEach(el => el.remove()); const elements = htmlClone.querySelectorAll("*"); elements.forEach(el => { el.removeAttribute("style"); }); / / Compress whitespace, remove comments, noscript let html = htmlClone.outerHTML; html = html .replace( / \s+ / g,'') .replace( / >\s+< / g, '><') .replace( / \s+> / g, '>') .replace( / <\s+ / g, '<') .replace( / <!--[\s\S]*?--> / g, '') .replace( / <img[^>]*> / gi, '') .replace( / <noscript[^>]*>[\s\S]*?<\ / noscript> / gi, '') .trim(); return html; } return getCleanTwoScreenHTML();} """) The webpage data extraction script B mainly extracts the DOM nodes of the first two screens of the webpage, and filters out nodes with a lot of characters that have little impact on list recognition, such as inline styles, inline scripts, images, audio, video, and links. It also removes spaces, deletes comments, and compresses the data to obtain the processed characters C of the first two screens of the webpage.
[0017] Step 3: Use the CDP protocol to capture the current webpage and obtain the base64 screenshot character 'D'. The key code is... result = driver.execute_cdp_cmd('Page.captureScreenshot', {'fromSurface': True}) image_base64str = result['data'] Step 4: Add the character C and the screenshot character D together to the prompt word input into the LLM (this LLM is an existing LLM selected by the user according to their needs). The LLM recognizes and returns the selector of the corresponding web page list. Example
[0018] like Figure 1 As shown, this embodiment provides a method for identifying webpage list selectors based on LLM, including the following steps: Step 1: Launch your browser and navigate to the webpage containing the target list; Step 2: Inject a customized webpage data extraction script into the webpage via the CDP protocol. The webpage data extraction script is used to extract webpage structural information. Step 3: Capture the current webpage and obtain the screenshot characters; Step 4: Input the webpage structure information, screenshot characters, and set prompt words into the user-specified LLM to obtain the target list selector for the webpage.
[0019] In this embodiment, preferably, the webpage data extraction script is used to extract DOM nodes within the first two screens of the webpage; filter out nodes containing inline styles, inline scripts, images, audio, video, and links; and remove redundant spaces and comments to obtain the webpage structure information.
[0020] In this embodiment, preferably, the extraction of DOM nodes within the first two screens of the webpage specifically involves: calculating twice the current browser window height using window.innerHeight*2 as the height threshold for the first two screens; setting top and bottom thresholds based on the height threshold; and processing only DOM elements within this range; marking elements that exceed the two-screen range; first obtaining all DOM elements in the webpage; traversing each element and obtaining its position information in the viewport using getBoundingClientRect; if the top of an element is greater than the top threshold or the bottom is less than the bottom threshold, then marking the element as to be removed; after all elements are marked, removing the corresponding elements to obtain the DOM nodes.
[0021] In this embodiment, preferably, step 3 specifically involves: using the Page.captureScreenshot interface of the CDP protocol to capture the current webpage and obtain screenshot characters encoded in base64 format.
[0022] Based on the same inventive concept, this application also provides an apparatus corresponding to the method in Embodiment 1, as detailed in Embodiment 2. Example
[0023] like Figure 2 As shown, this embodiment provides an apparatus for recognizing webpage list selectors based on LLM, including: The navigation webpage module launches the browser and navigates to the webpage containing the target list. The webpage information extraction module injects a customized webpage data extraction script into the webpage via the CDP protocol. The webpage data extraction script is used to extract webpage structural information. The webpage capture module captures the current webpage and retrieves the screenshot characters; The selector module takes the webpage structure information, screenshot characters, and set prompt words as input into the user-specified LLM and obtains the target list selector for the webpage.
[0024] In this embodiment, preferably, the webpage data extraction script is used to extract DOM nodes within the first two screens of the webpage; filter out nodes containing inline styles, inline scripts, images, audio, video, and links; and remove redundant spaces and comments to obtain the webpage structure information.
[0025] In this embodiment, preferably, the extraction of DOM nodes within the first two screens of the webpage specifically involves: calculating twice the current browser window height using window.innerHeight*2 as the height threshold for the first two screens; setting top and bottom thresholds based on the height threshold; and processing only DOM elements within this range; marking elements that exceed the two-screen range; first obtaining all DOM elements in the webpage; traversing each element and obtaining its position information in the viewport using getBoundingClientRect; if the top of an element is greater than the top threshold or the bottom is less than the bottom threshold, then marking the element as to be removed; after all elements are marked, removing the corresponding elements to obtain the DOM nodes.
[0026] In this embodiment, preferably, the webpage capture module specifically involves: using the Page.captureScreenshot interface of the CDP protocol to capture the current webpage and obtain screenshot characters encoded in base64 format.
[0027] Since the apparatus described in Embodiment 2 of the present invention is an apparatus used to implement the method of Embodiment 1 of the present invention, those skilled in the art can understand the specific structure and variations of the apparatus based on the method described in Embodiment 1 of the present invention, and therefore will not be described again here. All apparatuses used in the method of Embodiment 1 of the present invention fall within the scope of protection of the present invention.
[0028] Based on the same inventive concept, this application provides an electronic device embodiment corresponding to Embodiment 1, as detailed in Embodiment 3. Example
[0029] This embodiment provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it can implement any of the implementation methods in Embodiment 1.
[0030] Since the electronic device described in this embodiment is the device used to implement the method in Embodiment 1 of this application, those skilled in the art can understand the specific implementation method and various variations of the electronic device in this embodiment based on the method described in Embodiment 1 of this application. Therefore, how the electronic device implements the method in the embodiment of this application will not be described in detail here. Any device used by those skilled in the art to implement the method in the embodiment of this application falls within the scope of protection of this application.
[0031] Based on the same inventive concept, this application provides a storage medium corresponding to Embodiment 1, as detailed in Embodiment 4. Example
[0032] This embodiment provides a computer-readable storage medium storing a computer program thereon. When the computer program is executed by a processor, it can implement any of the implementation methods in Embodiment 1.
[0033] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.
[0034] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.
[0035] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.
[0036] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.
[0037] While specific embodiments of the present invention have been described above, those skilled in the art should understand that the specific embodiments described are merely illustrative and not intended to limit the scope of the present invention. Equivalent modifications and variations made by those skilled in the art in accordance with the spirit of the present invention should be covered within the scope of protection of the claims of the present invention.
Claims
1. A method for identifying webpage list selectors based on LLM, characterized in that: Includes the following steps: Step 1: Launch your browser and navigate to the webpage containing the target list; Step 2: Inject a customized webpage data extraction script into the webpage via the CDP protocol. The webpage data extraction script is used to extract webpage structural information. Step 3: Capture the current webpage and obtain the screenshot characters; Step 4: Input the webpage structure information, screenshot characters, and set prompt words into the user-specified LLM to obtain the target list selector for the webpage.
2. The method for identifying webpage list selectors based on LLM according to claim 1, characterized in that: The webpage data extraction script is used to extract DOM nodes within the first two screens of the webpage; Filter out nodes containing inline styles, inline scripts, images, audio, video, and links; Then remove extra spaces and comments to obtain the webpage structure information.
3. The method for identifying webpage list selectors based on LLM according to claim 2, characterized in that: The specific steps for extracting DOM nodes within the first two screens of the webpage are as follows: calculate twice the current browser window height using window.innerHeight*2 as the height threshold for the first two screens, set the top and bottom thresholds based on the height threshold, and then only process DOM elements within this range. Mark elements that exceed two screen widths; first, obtain all DOM elements in the webpage; traverse each element and obtain its position information in the viewport using getBoundingClientRect; if the top of an element is greater than the top threshold or the bottom is less than the bottom threshold, mark the element as to be removed; after all elements are marked, remove the corresponding elements to obtain the DOM nodes.
4. The method for identifying webpage list selectors based on LLM according to claim 1, characterized in that: Step 3 specifically involves using the Page.captureScreenshot interface of the CDP protocol to capture the current webpage and obtain screenshot characters encoded in base64 format.
5. A device for recognizing webpage list selectors based on LLM, characterized in that: include: The navigation webpage module launches the browser and navigates to the webpage containing the target list. The webpage information extraction module injects a customized webpage data extraction script into the webpage via the CDP protocol. The webpage data extraction script is used to extract webpage structural information. The webpage capture module captures the current webpage and retrieves the screenshot characters; The selector module takes the webpage structure information, screenshot characters, and set prompt words as input into the user-specified LLM and obtains the target list selector for the webpage.
6. The apparatus for identifying a webpage list selector based on LLM according to claim 5, characterized in that: The webpage data extraction script is used to extract DOM nodes within the first two screens of the webpage; Filter out nodes containing inline styles, inline scripts, images, audio, video, and links; Then remove extra spaces and comments to obtain the webpage structure information.
7. The apparatus for identifying a webpage list selector based on LLM according to claim 6, characterized in that: The specific steps for extracting DOM nodes within the first two screens of the webpage are as follows: calculate twice the current browser window height using window.innerHeight*2 as the height threshold for the first two screens, set the top and bottom thresholds based on the height threshold, and then only process DOM elements within this range. Mark elements that exceed two screen widths; first, obtain all DOM elements in the webpage; traverse each element and obtain its position information in the viewport using getBoundingClientRect; if the top of an element is greater than the top threshold or the bottom is less than the bottom threshold, mark the element as to be removed; after all elements are marked, remove the corresponding elements to obtain the DOM nodes.
8. The apparatus for identifying a webpage list selector based on LLM according to claim 5, characterized in that: The webpage capture module specifically uses the Page.captureScreenshot interface of the CDP protocol to capture the current webpage and obtain screenshot characters encoded in base64 format.
9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the program, it implements the method as described in any one of claims 1 to 4.
10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1 to 4.