A front-end data capture and transmission method, apparatus, system, and storage medium

Abstract

This invention provides a front-end data capture and transmission method, apparatus, system, and storage medium, relating to the fields of data capture and financial technology. The front-end data capture and transmission method includes: obtaining a capture instruction; obtaining system information and content information according to the capture instruction, using the system information and content information as a response body; acquiring the runtime base file and packaging the response body to generate a capture data packet and transmitting it to the corresponding database. This invention eliminates the need for manual collection, organization, and filling in of page data, which wastes manpower, and supports rapid switching of login test accounts and rapid collection of page display statuses for different test account permissions, thereby greatly improving the efficiency of information organization, collection, and submission.

Description

Technical Field

[0001] This invention relates to the fields of data capture and financial technology, and more specifically, to a front-end data capture and transmission method, apparatus, system, and storage medium. Background Technology

[0002] "Product front-end" refers to the role of a front-end developer in building and maintaining the user interface of a digital product. This role focuses on translating the visual design and user experience concepts of designers and product managers into actual front-end code and functionality. Product front-end developers typically need skills related to user interface design, user experience design, and product function interaction. The main tasks of a product front-end developer include: interface development, user experience implementation, collaborating with the design team, working with product managers, front-end coding, performance optimization, responsive design, browser compatibility, testing and debugging, security, and documentation.

[0003] In the fintech field, front-end engineers frequently need to handle the handover of page information, API names, API return data, page content, and page status. This work requires manually organizing and filling in information, as well as communicating and handing it over between different projects and pages. However, existing technologies have several problems in this regard, including low data collection efficiency, high labor costs, and unstable testing environments.

[0004] Current technology typically requires front-end developers to manually organize page information, API names, API return data, and page status during handover. This includes manually entering this information into a page status management system. This manual work requires significant manpower and time, especially when handling different projects and pages. Front-end developers have to spend a lot of time organizing and recording information, which reduces work efficiency.

[0005] Furthermore, the instability of the testing environment presents several issues. When multiple people use the same test account, account hijacking and data source loss can occur. This means that front-end developers may face unpredictable problems during data collection, further increasing the uncertainty of their work.

[0006] In summary, existing technologies for front-end data organization, handover, and transfer suffer from several problems, including low data organization efficiency, high labor costs, and unstable testing environments. These issues limit the efficiency and accuracy of front-end engineers, necessitating more effective solutions to improve data handover and management processes. Summary of the Invention

[0007] In view of the above, and to address the aforementioned technical problems, this invention provides a front-end data capture and transmission method applicable to the field of fintech or related technical fields, comprising:

[0008] Get the scraping instructions for the current front-end data;

[0009] According to the capture instruction, obtain the system information and content information of the front-end data in the current system environment, and use the system information and content information as the response body;

[0010] Obtain the basic operating files of the current system environment, package them together with the response body to generate a capture data packet, and transmit it to the corresponding database according to the capture instructions.

[0011] Preferably, the method for obtaining system information of the front-end data includes:

[0012] Based on the crawling instructions, obtain the basic page information and API request information of the current page; and determine the interface information corresponding to the API request information;

[0013] The basic page information and the interface information are displayed in the control panel as system information.

[0014] Preferably, obtaining the basic page information and API request information of the current page includes:

[0015] The basic information of the page is obtained through document.getElementsByTagName; and the API request information is obtained through chrome.devtools.network.getHAR.

[0016] The basic page information includes the page URL, title, pageID, and page status.

[0017] Preferably, the method for determining the interface information includes:

[0018] Iterate through the API request information and filter out interaction requests of type xhr.

[0019] Extract the request interface name from the returned request.url, the request parameters from request.postData, and the request response body from response as the interface information.

[0020] Preferably, the method for obtaining the content information includes:

[0021] Determine whether the current page containing the aforementioned front-end data in the current system environment contains video data;

[0022] If not, extract the text information and image information from the current page, as well as the graphic style attribute information corresponding to the text information and image information;

[0023] The text information and / or the image information, along with the corresponding graphic style attribute information, are used as the content information.

[0024] Preferably, after determining whether the current page containing the front-end data in the current system environment contains video data, the method further includes:

[0025] If so, the video data is simplified to generate a video-processed file corresponding to the video data, and the video style attribute information corresponding to the video data is obtained.

[0026] Extract the text and image information from the current page, as well as the graphic style attribute information corresponding to the text and image information;

[0027] The text information and / or the image information, together with the corresponding graphic style attribute information, and the video data processed file and the corresponding video style attribute information, are used together as the content information.

[0028] Preferably, the simplification process includes:

[0029] Extract and analyze the video data to obtain timestamps of scene changes and / or content changes and / or character changes in the video data;

[0030] The screenshot corresponding to the timestamp in the video data is obtained as a keyframe;

[0031] The timestamp corresponding to each keyframe is taken as the end time, the previous keyframe is taken as the start time, and the video between the start time and the end time is taken as an analysis interval corresponding to the keyframe.

[0032] Based on natural language processing technology, the audio in the analysis interval is converted into text using the ASR engine, and then the text data is cleaned to obtain the text data.

[0033] Visual technology is used to identify the object content, scene content, and action content in the images within the analysis range to obtain image analysis results;

[0034] By integrating text data and image analysis results, integrated information corresponding to the analysis interval is obtained;

[0035] The integrated information is then processed using text summarization technology to extract keywords, key sentences, and key paragraphs. These keywords, key sentences, and key paragraphs are then integrated to obtain key information.

[0036] Using the timestamps as the order, the keyframes and corresponding key information are combined to form multiple dynamically displayed image information arranged based on the timestamps.

[0037] Furthermore, to address the aforementioned problems, the present invention also provides a front-end data capture and transmission device, comprising:

[0038] The instruction module is used to obtain scraping instructions for the current front-end data;

[0039] The acquisition module is also used to acquire system information and content information of the front-end data in the current system environment according to the capture instruction, and to use the system information and content information as a response body;

[0040] The packaging module is used to obtain the basic files of the current system environment, package them together with the response body to generate a capture data packet, and transmit it to the corresponding database according to the capture instructions.

[0041] In addition, to solve the above problems, the present invention also provides a front-end data capture and transmission system, including a memory and a processor. The memory stores a front-end data capture and transmission program, and the processor runs the front-end data capture and transmission program to enable the front-end data capture and transmission system to perform the front-end data capture and transmission method as described above.

[0042] In addition, to solve the above problems, the present invention also provides a computer-readable storage medium storing a front-end data capture and transmission program, which, when executed by a processor, implements the front-end data capture and transmission method as described above.

[0043] This invention provides a front-end data capture and transmission method, apparatus, system, and storage medium. The method includes: obtaining a capture instruction for current front-end data; obtaining system information and content information of the front-end data in the current system environment according to the capture instruction, and using the system information and content information as a response body; obtaining the runtime base files of the current system environment, packaging them together with the response body to generate a capture data packet, and transmitting it to the corresponding database according to the capture instruction.

[0044] This invention, based on front-end page data, employs a plugin embedded in the page to identify and store the page access path, page name, page API requests, and the returned content of those requests after the page loads. This data can then be collected and submitted according to instructions. This invention eliminates the need for manual data collection, organization, and entry, thus reducing manpower wasted on manual page data handover. It also supports rapid switching between login test accounts and quickly collecting page display statuses based on different test account permissions, significantly improving the efficiency of information organization, collection, and submission. Attached Figure Description

[0045] Figure 1 This is a schematic diagram of the hardware operating environment involved in an embodiment of the front-end data capture and transmission method of the present invention;

[0046] Figure 2 This is a flowchart illustrating Embodiment 1 of the front-end data capture and transmission method of the present invention;

[0047] Figure 3 This is a detailed flowchart of step S200 in Embodiment 2 of the front-end data capture and transmission method of the present invention;

[0048] Figure 4 This is a flowchart illustrating the refinement of step S200 (system information) in Embodiment 2 of the front-end data capture and transmission method of the present invention;

[0049] Figure 5 This is a flowchart illustrating the refinement (content information) of step S200 in Embodiment 3 of the front-end data capture and transmission method of the present invention;

[0050] Figure 6 This is a detailed flowchart of step S260 in embodiment 3 of the front-end data capture and transmission method of the present invention;

[0051] Figure 7 This is a schematic diagram of the module connection of the front-end data capture and transmission device of the present invention.

[0052] The realization of the objective, functional features and advantages of the present invention will be further explained in conjunction with the embodiments and with reference to the accompanying drawings. Detailed Implementation

[0053] The embodiments of the present invention are described in detail below, wherein the same or similar reference numerals denote the same or similar elements or elements having the same or similar functions throughout.

[0054] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this invention, "a plurality of" means two or more, unless otherwise explicitly specified.

[0055] In this invention, unless otherwise explicitly specified and limited, the terms "installation," "connection," "linking," and "fixing," etc., should be interpreted broadly. For example, they can refer to a fixed connection, a detachable connection, or an integral part; they can refer to a mechanical connection or an electrical connection; they can refer to a direct connection or an indirect connection through an intermediate medium; they can refer to the internal communication of two components or the interaction between two components. Those skilled in the art can understand the specific meaning of the above terms in this invention according to the specific circumstances.

[0056] It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.

[0057] like Figure 1 The diagram shown is a structural schematic of the hardware operating environment of the terminal involved in an embodiment of the present invention.

[0058] The front-end data capture and transmission system of this invention can be a PC, or a mobile terminal device such as a smartphone, tablet, or portable computer. This front-end data capture and transmission system may include: a processor 1001, such as a CPU; a network interface 1004; a user interface 1003; a memory 1005; and a communication bus 1002. The communication bus 1002 is used to enable communication between these components. The user interface 1003 may include a display screen, an input unit such as a keyboard, or a remote control; optionally, the user interface 1003 may also include a standard wired interface or a wireless interface. The network interface 1004 may optionally include a standard wired interface or a wireless interface (such as a Wi-Fi interface). The memory 1005 may be a high-speed RAM memory or a stable memory, such as a disk storage device. Optionally, the memory 1005 may also be a storage device independent of the aforementioned processor 1001. Optionally, the front-end data capture and transmission system may also include RF (Radio Frequency) circuitry, audio circuitry, a Wi-Fi module, etc. In addition, the front-end data capture and transmission system can also be configured with other sensors such as gyroscopes, barometers, hygrometers, thermometers, and infrared sensors, which will not be elaborated here.

[0059] Those skilled in the art will understand that Figure 1The front-end data capture and transmission system shown is not intended to limit it and may include more or fewer components than illustrated, or combine certain components, or have different component arrangements. Figure 1 As shown, the memory 1005, which is a computer-readable storage medium, may include an operating system, a data interface control program, a network connection program, and a front-end data capture and transmission program.

[0060] In summary, this invention, based on front-end page data, employs a method whereby, after embedding a plugin within the page, the plugin identifies and stores the page access path, page name, page API requests, and the returned content of those requests. This data can then be collected and submitted according to instructions. This invention eliminates the need for manual collection, organization, and data entry—processes that waste manpower—and supports rapid switching between login test accounts and quick collection of page display statuses based on different test account permissions, thereby significantly improving the efficiency of information organization, collection, and submission.

[0061] Example 1:

[0062] Reference Figure 2 Embodiment 1 of the present invention provides a front-end data capture and transmission method, including:

[0063] Step S100: Obtain the scraping instructions for the current front-end data;

[0064] In this embodiment, it can be applied to data capture and transmission between end-to-end devices.

[0065] The steps described above involve identifying and parsing the data scraping requirements of the front-end page. The plugin needs to be able to understand the page structure and identify which data needs to be scraped (such as page name, API requests and their responses, etc.).

[0066] This step automates the identification and crawling of requirements, reducing the need for manual configuration and improving efficiency. Specifically, this can be achieved through DOM analysis or by using the APIs of front-end frameworks.

[0067] Step S200: According to the capture instruction, obtain the system information and content information of the front-end data in the current system environment, and use the system information and content information as the response body;

[0068] In this step, the plugin collects specific information about the current page, including system information (such as browser type, version, etc.) and content information (such as page elements, API requests and responses, etc.).

[0069] This step provides detailed page and system environment information, which helps in better understanding page performance and potential problems. This can be achieved through browser APIs and network request monitoring.

[0070] Step S300: Obtain the basic files of the current system environment, package them together with the response body to generate a capture data packet, and transmit it to the corresponding database according to the capture instructions.

[0071] This step involves packaging the collected data and sending it to a specified database or backend service according to instructions. Automated data uploading in this step reduces errors and time consumption associated with manual data uploads. Specifically, AJAX or other HTTP client libraries can be used to implement data uploads.

[0072] For example, it can be implemented in the following way:

[0073] (1) Page analysis: Use JavaScript to traverse the DOM tree and identify key elements and data.

[0074] (2) Network request monitoring: Use the APIs provided by the browser (such as XMLHttpRequest or fetch API) to monitor network requests and responses.

[0075] (3) Data serialization and packaging: Format the collected information into JSON or other formats in preparation for uploading.

[0076] (4) Security and access control: Ensure that the plugin runs only in an authorized environment to avoid data leakage.

[0077] (5) Error handling and logging: In order to deal with network or data problems, error handling and logging functions need to be added to the plugin.

[0078] The advantages of the solution provided in this embodiment are automation and accuracy, which reduce the possibility of human error and greatly improve work efficiency.

[0079] This embodiment, based on front-end page data, employs a plugin embedded in the page to identify and store the page access path, page name, page API requests, and the returned content of those requests after the page loads. This data can then be collected and submitted according to instructions. This invention eliminates the need for manual collection, organization, and data entry, thus reducing manpower wasted on page data handover. It also supports rapid switching between login test accounts and quickly collecting page display statuses based on different test account permissions, significantly improving the efficiency of information organization, collection, and submission.

[0080] Example 2:

[0081] Reference Figure 3 Embodiment 2 of the present invention provides a front-end data capture and transmission method. Based on Embodiment 1 above, step S200, the method for obtaining system information of the front-end data, includes:

[0082] Step S210: According to the crawling instruction, obtain the basic page information and API request information of the current page; and determine the interface information corresponding to the API request information;

[0083] Step S220: Display the basic page information and the interface information in the control panel as the system information.

[0084] The above steps are used to obtain and display basic page information and API request information.

[0085] The step of obtaining page and API information aims to collect basic information about the page (such as URL, title, page ID, status, etc.) as well as information about the API requests made by the page. This is accomplished by analyzing the DOM structure and listening to network requests.

[0086] Displayed on the control panel means that the collected information is displayed on a user-interactive control panel.

[0087] The steps described above provide a detailed overview of the page and API requests, including the page's basic attributes and interactions with the server. This allows front-end developers to intuitively understand and access key page information, facilitating debugging and optimization.

[0088] Further reference Figure 4 Step S210, obtaining the basic page information and API request information of the current page, includes:

[0089] Step S211: Obtain the basic page information using document.getElementsByTagName; and obtain the API request information using chrome.devtools.network.getHAR; wherein the basic page information includes the page URL, title, pageID, and page status.

[0090] The main purpose of the above steps is to provide details on obtaining basic page information and API request information.

[0091] This includes detailed information retrieval: deeper analysis of the page's HTML structure and API requests. HTML analysis provides page structure information, while the getHAR method captures network activity, particularly API calls.

[0092] By following the steps above, more granular page and network request data can be obtained. This provides developers with richer data, helping them better understand page behavior and performance bottlenecks.

[0093] Specifically, this can be achieved through: HTML analysis: using JavaScript to manipulate the DOM and obtain information such as URL and title; and network request capture: listening for and analyzing requests made through the XHR or Fetch API.

[0094] Further reference Figure 4 The method for determining interface information in step S210 includes:

[0095] Step S212: Traverse the API request information and filter out interaction requests of type xhr;

[0096] Step S213: Extract the request interface name from the returned request.url, the request body parameters from request.postData, and the request response body from response as the interface information.

[0097] The above steps were used to determine the interface information. This included filtering and analyzing API requests: selecting XHR type requests from all captured network requests and extracting key information such as the request URL, request body, and response body.

[0098] The steps outlined above in this method provide a detailed understanding of each API call, including how they interact with backend services. This enables developers to more accurately identify problems and optimize API usage and performance.

[0099] The implementation method may include: first, filtering requests, that is, identifying XHR type requests among the captured network requests; then, extracting information, such as the URL, request parameters and response content from the XHR request.

[0100] By following the steps above, you can quickly locate problems with pages or APIs, improving the efficiency of data acquisition and transmission.

[0101] To better illustrate the method provided in this embodiment, front-end data capture and transmission are demonstrated through the following example:

[0102] 1. This example allows users to quickly obtain the basic information of the project page they need, including API request links, page names, page API information, and page API responses. Specifically:

[0103] (1) First, based on the given page address (URL), obtain the asynchronous API interface service request in the page and obtain its response body.

[0104] (2) Users can view the currently displayed response body on the page and modify the information that needs to be uploaded.

[0105] (3) Clicking submit will organize and store it in the database of the "Page Status Management System".

[0106] 2. Technical implementation of page information, interface name, interface returned data, and page status.

[0107] (1) Create a browser plugin based on the Chrome browser and create a browser devtools panel window using the chrome.devtools.panels.create method as the user interface;

[0108] The interface includes a 'Get Page Information' button, a page information display area (page URL, page title, pageID, page status, list of server interaction request APIs for the page request and corresponding content), and a 'Submit Page Information' button.

[0109] (2) When the 'Get Page Information' button is clicked, the HTML document.getElementsByTagName and the Chrome browser chrome.devtools.network.getHAR methods are called to obtain the required page information.

[0110] (3) Page information: Use document.getElementsByTagName to get the unique information such as name and content in the meta node of the page.

[0111] (4) Interface name and interface returned data: Use chrome.devtools.network.getHAR provided by the Chrome browser to obtain all the request API information of the current page, call the request and filter it as 'xhr' type according to the resource request type, that is, XHLHttpRequest server interaction request, and extract the request interface name of the returned request.url, the request body request parameters of request.postData, and the request response body of response.

[0112] (5) The default page status uses the name of the current page. If there are different display situations, you can manually modify its information.

[0113] (6) Click the 'Submit Page Information' button to call the upload information interface provided by the "Page Status Management System" and upload the above information to the "Page Status Management System".

[0114] The above example can achieve the following effect:

[0115] (1) The plugin directly obtains page data and displays it locally without manual collection; (2) The plugin automatically organizes page data information and beautifies the display for easy modification; (3) The plugin directly uploads page data information with one click without manual filling in the page status management system; (4) Test accounts can be mounted in the plugin and different login accounts can be switched.

[0116] Example 3:

[0117] Reference Figure 5 Embodiment 3 of the present invention provides a front-end data capture and transmission method. Based on Embodiment 1 above, step S200, the method for obtaining content information, includes:

[0118] Step S230: Determine whether the current page containing the front-end data in the current system environment contains video data;

[0119] In addition to acquiring system information from the front-end data, it is necessary to acquire content information from the page or system display interface in order to better restore the current front-end state of the interface, maintain the front-end code, and further optimize performance and conduct browser compatibility testing in a more targeted manner.

[0120] The content information may include, but is not limited to, controls with different functionalities, such as any one or more of the following: Text input box: for users to enter text or data. Checkbox: allows users to select one or more options. Radio button: for selecting an option from a set of options. Drop-down menu: provides a list of options for users to choose from. Button: triggers a specific action or submits form data. Hyperlink: used to navigate to other pages or resources. Images and icons: used to display images or icons to enhance the user interface. Tabs: display different content areas on the same page, which users can switch between. Progress bar: displays the completion progress of a task or operation. Slider: used to adjust values ​​or selection ranges. Calendar selector: allows users to select dates or times. File upload control: allows users to select and upload files. Pop-ups and prompts: display prompts, warnings, or confirmation dialog boxes. Tables: used to display and edit data in tabular form. Navigation menu: provides page navigation links or menus.

[0121] In addition, it can include image files or data, such as pictures, GIFs, video data, etc.

[0122] In order to better acquire functional space and image files and avoid large video files and video data that would occupy a lot of space, increase data acquisition time, and increase data transmission time, and since it is not necessary to acquire the complete original video data during the front-end development stage, this embodiment filters the content information to confirm whether it contains video data, and processes it separately according to whether it contains video data.

[0123] Step S240: If not, extract the text information and image information in the current page, as well as the graphic style attribute information corresponding to the text information and the image information;

[0124] If there is no video data, meaning the current front-end page does not contain video data, then we can further extract image and text information from the content.

[0125] First, the corresponding image and text style attribute information is obtained. Specifically, this includes, but is not limited to, the page position, width, height, border, margin, padding, alignment, float, transparency, and background of the image and text information. These are some common examples of image and file style attributes. In practice, CSS can be used to further customize and adjust the styles of images and files to meet the needs of web design. In this embodiment, by obtaining the image and text style attribute information corresponding to each image and text information, the original state of the content information can be better restored.

[0126] Step S250: The text information and / or the image information, along with the corresponding graphic style attribute information, are used as the content information.

[0127] Each piece of text information and / or image information, along with its corresponding image and text style attributes, is combined to form content information for storage and retrieval. This allows for a better restoration of the original content information on the current front-end page, resulting in higher fidelity. This facilitates further system testing, front-end development, compatibility testing, and other development work, and provides a more accurate testing environment.

[0128] Furthermore, after determining whether the current page containing the front-end data in the current system environment contains video data in step S230, the method further includes:

[0129] Step S260: If yes, then the video data is simplified to generate a video-processed file corresponding to the video data, and the video style attribute information corresponding to the video data is obtained.

[0130] If the content information contains video data, in order to ensure that all data of the current front-end page or the targeted page can be obtained when acquiring the content information, with higher fidelity, and at the same time, to avoid the video files of the current page occupying a large amount of space, causing long data acquisition time, long data transmission time, and waste of network and system resources, this embodiment adopts a simplified processing method, converting each video data into its corresponding processed video file.

[0131] Step S270: Extract the text information and image information from the current page, as well as the graphic style attribute information corresponding to the text information and the image information;

[0132] Step S280: The text information and / or the image information, together with the corresponding graphic style attribute information, and the video data processed file and the corresponding video style attribute information, are used together as the content information.

[0133] In addition, after simplifying the video data, text information, image information, and their corresponding graphic style attribute information, as well as the processed video file and its corresponding video style information, are stored together as content information.

[0134] Further reference Figure 6 Step S260, the simplification process, includes:

[0135] Step S261: Extract and analyze the video data to obtain the timestamps of scene changes and / or content changes and / or character changes in the video data;

[0136] In order to reduce the consumption of system resources, space and network resources by video data, while maintaining the integrity and fidelity of the data, this embodiment simplifies the video data and converts it into the corresponding processed video file.

[0137] Specifically, the first step is to analyze the video data. This step can be done by using a trained recognition model to identify the video data into several single-frame images. Then, the single-frame images are identified to obtain the timestamps of scene changes, content changes, and task changes in all single-frame images. This allows the single-frame images to be classified into two types: those with changes and those without changes. The timestamps of the single-frame images that have produced the preset types of changes are then extracted.

[0138] Step S262: Obtain the screenshot corresponding to the timestamp in the video data as a keyframe;

[0139] Step S263: Take the timestamp corresponding to each key frame as the end time, take the previous key frame as the start time, and take the video between the start time and the end time as an analysis interval corresponding to the key frame.

[0140] Capture screenshots of the video corresponding to the timestamps as keyframes. Furthermore, obtain the end time of each keyframe and the start time of the previous keyframe, using this interval as the analysis interval.

[0141] If the keyframe is the first keyframe, then the 0th moment of the video can be used as the start time, and the time corresponding to the timestamp of the keyframe can be used as the end time, thereby determining the analysis interval of the first keyframe.

[0142] Step S264: Based on natural language processing technology, the audio of the analysis interval is converted into text using the ASR engine, and the text data is cleaned to obtain the text data.

[0143] Step S265: Use visual technology to identify the object content, scene content and action content in the image of the analysis area to obtain the image analysis result;

[0144] Videos can be categorized into two types: information expressed through human language or information expressed through images and scenes. These two types of information are analyzed separately to obtain corresponding analytical results.

[0145] In this embodiment, two processing steps are performed on an analysis interval through steps S264 and S265 respectively. The first step is to use natural language processing technology to analyze the audio contained therein through the ASR engine and convert it into text data.

[0146] Natural language processing (NLP) technology analyzes audio corpora to obtain text, and then uses a trained recognition model to classify and remove punctuation marks, interjections, and irrelevant text without actual meaning, thereby obtaining text data.

[0147] At the same time, visual technology is used to analyze the analysis area, and the object content, scene content and action content in the image are identified separately, thereby obtaining the image analysis results.

[0148] Step S266: Integrate the text data and image analysis results to obtain integrated information corresponding to the analysis interval;

[0149] The image analysis results can also be in text form, providing textual descriptions of the object content, scene content, and action content of the image.

[0150] By integrating text data and image analysis results, we can obtain integrated information for the analysis range.

[0151] Step S267: Extract keywords, key sentences, and key paragraphs from the integrated information using text summarization technology, and integrate the keywords, key sentences, and key paragraphs to obtain key information;

[0152] Text summarization is a natural language processing technique that aims to extract the most important information from text and present it to users in a concise manner. Text summarization can be divided into two methods: extractive summarization and generative summarization. Extractive summarization extracts key sentences or paragraphs from the original text, while generative summarization generates new summary content based on the understanding and generalization of the text.

[0153] Keyword extraction typically uses statistical methods such as term frequency (TF-IDF) to determine the most representative and important words in a text. Key sentence extraction can be determined by utilizing features such as sentence coherence, importance, and contextual relevance. Key paragraph extraction can consider factors such as thematic consistency and information richness within the paragraph.

[0154] When integrating the key information, the extracted keywords, key sentences, and key paragraphs can be combined to convey the core content and main theme of the text.

[0155] In summary, text summarization technology analyzes and processes text to extract keywords, key sentences, and key paragraphs to summarize the main information of the text, helping users quickly understand and obtain the core content of the text.

[0156] In addition, the amount of information obtained from key points can be limited by preset field length and byte length, thereby achieving simplification.

[0157] Step S268: Using the timestamps as the order, combine the keyframes and corresponding key information to form multiple dynamically displayed image information arranged based on the timestamps.

[0158] By integrating keyframes with corresponding key information, the key information can be overlaid onto specific positions of the keyframes. For example, by identifying the blank areas of the keyframes, the key information can be overlaid and displayed in the blank areas, thus avoiding obscuring the information of the keyframes.

[0159] Each keyframe and its corresponding key information are combined to form an independent single frame. Furthermore, these independent single frames are arranged in timestamp order and merged to form an image information that can be dynamically displayed. This combination of keyframes and key information significantly reduces the original video file's size while still restoring its original appearance, understanding, and readability. This avoids the problems of long data acquisition and transmission times caused by large original video files, prevents waste of system resources, and improves data capture efficiency.

[0160] In addition, refer to Figure 7 This embodiment also provides a front-end data capture and transmission device, including:

[0161] Instruction module 10 is used to obtain scraping instructions for the current front-end data;

[0162] The acquisition module 20 is further configured to acquire system information and content information of the front-end data in the current system environment according to the capture instruction, and use the system information and content information as a response body;

[0163] The packaging module 30 is used to obtain the basic files of the current system environment, package them together with the response body to generate a capture data packet, and transmit it to the corresponding database according to the capture instructions.

[0164] In addition, this embodiment also provides a front-end data capture and transmission system, including a memory and a processor. The memory stores a front-end data capture and transmission program, and the processor runs the front-end data capture and transmission program to enable the front-end data capture and transmission system to perform the front-end data capture and transmission method as described above.

[0165] In addition, this embodiment also provides a computer-readable storage medium storing a front-end data capture and transmission program, which, when executed by a processor, implements the front-end data capture and transmission method as described above.

[0166] In summary, this invention, based on front-end page data, employs a method whereby, after embedding a plugin within the page, the plugin identifies and stores the page access path, page name, page API requests, and the returned content of those requests. This data can then be collected and submitted according to instructions. This invention eliminates the need for manual collection, organization, and data entry—processes that waste manpower—and supports rapid switching between login test accounts and quick collection of page display statuses based on different test account permissions, thereby significantly improving the efficiency of information organization, collection, and submission.

[0167] The sequence numbers of the above embodiments of the present invention are for descriptive purposes only and do not represent the superiority or inferiority of the embodiments.

[0168] Through the above description of the embodiments, those skilled in the art can clearly understand that the methods of the above embodiments can be implemented by means of software plus necessary general-purpose hardware platforms. Of course, they can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes several instructions to cause a terminal device (which may be a mobile phone, computer, server, or network device, etc.) to execute the methods described in the various embodiments of the present invention. The above are only preferred embodiments of the present invention and do not limit the patent scope of the present invention. Any equivalent structural or procedural transformations made based on the content of the present invention specification and drawings, or direct or indirect applications in other related technical fields, are similarly included within the patent protection scope of the present invention.

Claims

1. A front-end data capture and transmission method, characterized in that, include: Get the scraping instructions for the current front-end data; According to the capture instruction, obtain the system information and content information of the front-end data in the current system environment, and use the system information and content information as the response body; Obtain the basic operating files of the current system environment, package them together with the response body to generate a capture data packet, and transmit it to the corresponding database according to the capture instructions.

2. The front-end data capture and transmission method as described in claim 1, characterized in that, The method for obtaining system information from the front-end data includes: Based on the crawling instructions, obtain the basic page information and API request information of the current page; and determine the interface information corresponding to the API request information; The basic page information and the interface information are displayed in the control panel as system information.

3. The front-end data capture and transmission method as described in claim 2, characterized in that, The process of obtaining the basic page information and API request information of the current page includes: The basic information of the page is obtained through document.getElementsByTagName; and the API request information is obtained through chrome.devtools.network.getHAR. The basic page information includes the page URL, title, pageID, and page status.

4. The front-end data capture and transmission method as described in claim 3, characterized in that, The method for determining the interface information includes: Iterate through the API request information and filter out interaction requests of type xhr. Extract the request interface name from the returned request.url, the request parameters from request.postData, and the request response body from response as the interface information.

5. The front-end data capture and transmission method as described in claim 1, characterized in that, The methods for obtaining the content information include: Determine whether the current page containing the aforementioned front-end data in the current system environment contains video data; If not, extract the text information and image information from the current page, as well as the graphic style attribute information corresponding to the text information and image information; The text information and / or the image information, along with the corresponding graphic style attribute information, are used as the content information.

6. The front-end data capture and transmission method as described in claim 5, characterized in that, After determining whether the current page containing the front-end data in the current system environment contains video data, the method further includes: If so, the video data is simplified to generate a video-processed file corresponding to the video data, and the video style attribute information corresponding to the video data is obtained. Extract the text and image information from the current page, as well as the graphic style attribute information corresponding to the text and image information; The text information and / or the image information, together with the corresponding graphic style attribute information, and the video data processed file and the corresponding video style attribute information, are used together as the content information.

7. The front-end data capture and transmission method as described in claim 6, characterized in that, The simplification process includes: Extract and analyze the video data to obtain timestamps of scene changes and / or content changes and / or character changes in the video data; The screenshot corresponding to the timestamp in the video data is obtained as a keyframe; The timestamp corresponding to each keyframe is taken as the end time, the previous keyframe is taken as the start time, and the video between the start time and the end time is taken as an analysis interval corresponding to the keyframe. Based on natural language processing technology, the audio in the analysis range is converted into text using the ASR engine, and then the text data is cleaned to obtain the text data. Visual technology is used to identify the object content, scene content, and action content in the images within the analysis range to obtain image analysis results; By integrating text data and image analysis results, integrated information corresponding to the analysis interval is obtained; The integrated information is then processed using text summarization technology to extract keywords, key sentences, and key paragraphs. These keywords, key sentences, and key paragraphs are then integrated to obtain key information. Using the timestamps as the order, the keyframes and corresponding key information are combined to form multiple dynamically displayed image information arranged based on the timestamps.

8. A front-end data capture and transmission device, characterized in that, include: The instruction module is used to obtain scraping instructions for the current front-end data; The acquisition module is also used to acquire system information and content information of the front-end data in the current system environment according to the capture instruction, and to use the system information and content information as a response body; The packaging module is used to obtain the basic files of the current system environment, package them together with the response body to generate a capture data packet, and transmit it to the corresponding database according to the capture instructions.

9. A front-end data capture and transmission system, characterized in that, The system includes a memory and a processor. The memory stores a front-end data capture and transmission program, and the processor runs the front-end data capture and transmission program to enable the front-end data capture and transmission system to perform the front-end data capture and transmission method as described in any one of claims 1-7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a front-end data capture and transmission program, which, when executed by a processor, implements the front-end data capture and transmission method as described in any one of claims 1-7.

Images