Interactive debugging method, device and equipment for AI generation webpage front end and medium

Abstract

The invention discloses an interactive debugging method, an interactive debugging device, interactive debugging equipment and an interactive debugging medium for a front end of an AI generation webpage, and aims to solve the problem that an effective man-machine cooperation tool is lacked when an existing AI generation code is solved.According to the method, a webpage file generated by the AI and related information of the webpage file serve as a data packet to be sent to a debugging client side; and the webpage content is loaded and displayed by utilizing the embedded browser engine, so that a user can intuitively operate and put forward modification suggestions. The operation of the user generates a debugging script through a browser engine and feeds back the debugging script to the AI, so that the real-time operation of the AI side is realized, and a feedback script is generated and displayed to the user through the browser again. Through interaction of the debugging script and the feedback script which are delivered for multiple times, an efficient communication channel is established between the user and the AI, and finally an expected debugging result is obtained and a corresponding environment file list is exported. Therefore, the efficiency and accuracy of man-machine cooperation are effectively improved.

Description

Technical Field

[0001] The present invention relates to the field of artificial intelligence technology, and in particular to an interactive debugging method, device, equipment and medium for generating an AI-generated webpage front end. Background Art

[0002] Currently, when AI is used to generate web front-ends, it is usually not possible to meet all user needs in one go. Therefore, users are required to keep abreast of the current version generated by AI, make adjustments and provide feedback, so that AI can make repeated revisions until the final product is produced. Currently, there is a lack of solutions and system tools for AI to interact with humans on the market, and the immediate human adjustments to AI are not timely, resulting in low iteration efficiency of AI-generated front-end code. Summary of the invention

[0003] This patent proposes an interactive debugging method, device, equipment and medium for AI-generated web front-end, aiming to solve the problem of lack of effective human-computer collaboration tools when existing AI generates code.

[0004] In a first aspect, an embodiment of the present invention provides an interactive debugging method for an AI-generated webpage front end, comprising: Send the AI-generated web page file and its related information as a data packet to the debugging client; Loading the data packet and displaying the content of the web page file through a browser engine, wherein the browser engine is embedded in the debugging client; Generate a debugging script based on the user's operation and modification suggestions on the webpage file through the browser engine and send it to the AI ​​side; Generate a feedback script based on the AI ​​side’s real-time operation on the webpage file and display it to the user side through the browser engine; An expected debugging result is obtained through the delivery interaction of a plurality of the debugging scripts and the feedback scripts, and an environment file list of the expected debugging result is exported and saved.

[0005] In a second aspect, an embodiment of the present invention further provides an interactive debugging device for an AI-generated web page front end, comprising a unit of the interactive debugging method for an AI-generated web page front end as described above.

[0006] In a third aspect, an embodiment of the present invention further provides a computer device, comprising a memory and a processor connected to the memory; the memory is used to store a computer program; the processor is used to run the computer program stored in the memory to execute the steps of the above-mentioned AI-generated interactive debugging method for a web page front end.

[0007] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium, wherein the storage medium stores a computer program, wherein the computer program includes program instructions, and wherein the program instructions, when executed by a processor, can implement the steps of the above-mentioned AI-generated interactive debugging method for a web page front end.

[0008] Compared with the prior art, the present invention has the following beneficial effects: In the technical solution of the present invention, the web page file generated by AI and its related information are sent as a data packet to the debugging client, and the web page content is loaded and displayed using the embedded browser engine, so that users can intuitively operate and make modification suggestions. The user's operation generates a debugging script through the browser engine and feeds back to the AI, thereby realizing instant operation on the AI ​​side and generating a feedback script, which is displayed to the user through the browser again. Through the interaction of the debugging script and the feedback script delivered multiple times, an efficient communication channel is established between the user and the AI, and the expected debugging results are finally obtained and the corresponding environment file list is exported. This method effectively improves the efficiency and accuracy of human-computer collaboration, making AI more flexible and intelligent in the process of generating and debugging the front-end of the web page. BRIEF DESCRIPTION OF THE DRAWINGS

[0009] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the accompanying drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of the present invention. For ordinary technicians in this field, other accompanying drawings can be obtained based on these accompanying drawings without paying any creative work.

[0010] Figure 1 A flowchart of the interactive debugging method for generating a web page front end by AI provided by the present invention; Figure 2 The first sub-flow chart of the interactive debugging method for generating a webpage front end by AI provided by the present invention; Figure 3 A sub-flowchart of the first sub-flowchart of the interactive debugging method for generating a webpage front end by AI provided by the present invention; Figure 4 A second sub-flow chart of the interactive debugging method for generating a webpage front end by AI provided by the present invention; Figure 5 A third sub-flow chart of the interactive debugging method for generating a webpage front end by AI provided by the present invention; Figure 6 A fourth sub-flow chart of the interactive debugging method for generating a webpage front end by AI provided by the present invention; Figure 7 A fifth sub-flow chart of the interactive debugging method for generating a webpage front end by AI provided by the present invention; Figure 8A schematic block diagram of units of an interactive debugging device for generating a webpage front end using AI provided by the present invention; Fig. 9 A schematic block diagram of a computer device provided in an embodiment of the present invention. DETAILED DESCRIPTION

[0011] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.

[0012] It should be understood that when used in this specification and the appended claims, the terms "include" and "comprises" indicate the presence of described features, integers, steps, operations, elements and / or components, but do not exclude the presence or addition of one or more other features, integers, steps, operations, elements, components and / or combinations thereof.

[0013] It should also be understood that the terms used in this specification of the present invention are only for the purpose of describing specific embodiments and are not intended to limit the present invention. As used in the specification of the present invention and the appended claims, the singular forms "a", "an" and "the" are intended to include plural forms unless the context clearly indicates otherwise.

[0014] It should be further understood that the term "and / or" used in the present description and the appended claims refers to and includes any and all possible combinations of one or more of the associated listed items.

[0015] In order to solve the problem of lack of effective human-computer collaboration tools when existing AI generates code under the prior art, the present invention provides an interactive debugging method for AI-generated web page front end, referring to Figures 1 to 7 , which includes: S110, sending the web page file generated by AI and related information as a data packet to the debugging client; S120, loading the data packet and displaying the content of the webpage file through a browser engine, wherein the browser engine is embedded in the debugging client; S130, generating a debugging script based on the user's operation and modification suggestions on the webpage file through the browser engine and sending it to the AI ​​side; S140: Generate a feedback script based on the AI ​​side's real-time operation on the webpage file and display it to the user side through the browser engine; S150: Obtain an expected debugging result through delivery interaction of a plurality of the debugging scripts and the feedback scripts, and export and save an environment file list of the expected debugging result.

[0016] In the present invention, the interactive collaboration between people (users) and AI is mainly undertaken by the debugging client. By developing an independent debugging client tool and embedding a browser engine to realize web page display. First, the AI ​​side generates a data packet and sends it, and the client automatically identifies and loads the data packet sent by AI. After receiving the data packet, the client automatically identifies the source information of the file and determines whether the corresponding file can be loaded. If the file source is generated by AI, the client will load these files locally and display the web page content through the embedded browser engine. The debugger previews the web page interface generated by AI in real time. The embedded browser engine enables the debugger to directly edit and modify the web page file, so that the debugger can directly modify the web page content in the browser, and generate a debugging script through the client, and feedback to AI for adjustment. The debugger can select text or controls and interact with AI in real time by injecting JavaScript code. The modification opinions are fed back to AI through the debugging script, and AI generates new code based on the feedback and returns it through the feedback script. When the debugger believes that the debugging work has been completed, if the current function meets the requirements, the file list of the current web page can be exported. The exported file is used for persistent storage for subsequent viewing or modification, or published as an independent website for other non-debugging personnel to access.

[0017] Further, refer to Figure 2 , S110 includes: S111, generating a plurality of web page files through a plurality of collaborative BOTs disposed on the AI ​​side; S112, the publishing BOT on the AI ​​side packages the plurality of web page files into the data packet; S113: Send the data packet to the debugging client.

[0018] Take the example of generating web front-end code for large-scale text generation through multi-AI collaboration. The user starts a new project, uploads the original requirement file as a resource, and uses a human-machine interface Bot with a chat function to inform the relevant Bot to start the process. Multiple Bots in the project collaborate to read and understand the requirement file, and communicate with the user through the human-machine interface Bot to confirm the understanding of the requirements. The so-called human-machine interface Bot includes but is not limited to the debugging client in the present invention. The so-called multiple Bots mainly refer to AI Bot. In this process, multiple Bots in the project collaborate to decompose the requirements layer by layer and develop a version. The release Bot responsible for publishing in the project uploads each file of this version as a resource, and generates a package with the path and resource index, as additional data of the text, and sends it to the conversation. The user uses the debugging client of the present invention to load these resources, display the AI-developed page through the embedded browser, and start verification. Multiple web page files generated by the AI ​​side, each file can represent a web page component, module or different pages. All generated web page files and related information will be integrated and packaged into a data package by the release BOT, and the related information includes file path, file name, resource location, etc.

[0019] Further, see Figure 3 , after S112, the following steps are also included S112a, the plurality of collaborative BOTs generate the web page file including the HTML file, and assign a random DOM element ID to the tag in the HTML file; S112b, the publishing BOT adds the source, name and path of each web page file to the data packet; S112c, the publishing BOT adds a version identifier of each web page file to the data packet.

[0020] Under the joint action of multiple collaborative BOTs on the AI ​​side, multiple web page files are generated. The generated multiple web page files (including HTML, CSS, JavaScript, etc.) will be packaged and processed by the publishing BOT on the AI ​​side. Web page files mainly include HTML files, which are the core part of building the front end of the web page. The collaborative BOT on the AI ​​side will generate these files according to user needs and templates, and assign a randomly generated DOM element ID to the tag in each HTML file. The random DOM element ID is used to ensure that each web page tag can be uniquely identified during the debugging process and avoid conflicts with other tags. The HTML file generated by AI marks each tag in this way, allowing debuggers to easily operate through these IDs. This design ensures that even tags without clear interaction requirements (such as text paragraphs, buttons, etc.) can be accurately located through IDs, which is convenient for debuggers to quickly identify and modify in subsequent operations. Each file will be marked with its source information in the data packet, indicating whether the file is generated by AI, provided by the debugger, or from other external resources.

[0021] The release BOT attaches various relevant information to the data package. Each web page file will clearly indicate the file name and its storage path in the data package. The path information helps the debugging client determine the location of the file so that it can accurately find the resource when loading and debugging. Each web page file will also be accompanied by a version identifier to facilitate version management in multiple rounds of debugging. The version identifier helps debuggers distinguish between different versions of web page files and ensure that the debugging operation matches the target file version. Finally, the data package packaged by the release BOT will contain all generated web page files, related information and other auxiliary resources (such as pictures, fonts, JS scripts, etc.).

[0022] Further, refer to Figure 4 , S120 includes: S121, decompressing the data packet sent by the AI ​​through the debugging client; S122, establishing a mapping relationship between three source files based on the source, name and path through the debugging client; S123, establishing a DOM element mapping relationship by using a parent node recursive algorithm based on the random DOM element ID through the debugging client; S124: Load and display the corresponding web page file according to the version identifier through the browser engine.

[0023] When the debugging client receives the data packet sent by AI, the client will first perform an unzip operation. The data packet contains multiple web page files and related metadata, such as file source, name, path, etc. After decompression, the client will establish a file mapping relationship based on the source information, file name and path. During the debugging process, the debugging client uses the random DOM element ID and the parent node recursive algorithm to establish the mapping relationship of DOM elements. Specifically, the client parses the DOM structure in the HTML file, traverses all elements, and identifies and stores the random DOM element ID of each element. When establishing the mapping relationship, the client uses a recursive algorithm to find the parent node of each element to accurately determine its position and hierarchical relationship. This allows debuggers to quickly locate any element in the web page. During the debugging process, the debugging client will load the corresponding web page file based on the version identifier. The client ensures that the latest version is loaded during the debugging process by reading the version identifier of the file to avoid loading outdated or incorrect files. The debugging client updates the web page content in the embedded browser based on the loaded version information, and the browser engine will render the web page on demand and display the current version of the web page to the debugger.

[0024] Further, refer to Figure 5 , S130 includes: S131, capturing the operations performed by the user on the browser engine to obtain user operation records; S132, obtaining the modification suggestion input by the user through the browser engine; S133, converting the user operation record into a structured instruction containing a version association path according to the three source file mapping relationships, the DOM element mapping relationship and the version identifier; S134: Generate a debugging script based on the structured instruction and the modification suggestion and send it to the AI ​​side.

[0025] During the debugging process, the browser engine embedded in the debugging client is responsible for capturing all operations of the user on the web page. Including but not limited to: click events, when the user clicks any button, link or other interactive element on the web page; input events, when the user enters text or data in a text box or form; selection operations, when the user selects specific text, images or other elements on the web page; other interactions, when the user scrolls the page, drags elements and other interactive behaviors. All these operations will be recorded to form a user operation record, including the timestamp of the operation, the target element, the event type and related parameters. These records will provide detailed operation tracks for the subsequent generation of debugging scripts.

[0026] In addition to operation records, the debugging client also captures modification opinions entered by the user. These opinions are usually transmitted to the debugging client through a text box set in the browser, comment function or other means. The debugging client collects these modification opinions and associates them with the user operation records to further generate debugging scripts.

[0027] Based on the previously established three-source file mapping relationship and DOM element mapping relationship, as well as user operation records and modification opinions, the debugging client will generate structured instructions. Specifically, the DOM element mapping relationship is used to map user operations, determine the specific elements involved in the user operations, and convert them into structured instructions. For example, clicking a button may be converted to: "Click the element with button ID 'submitBtn'". A version identifier is embedded in each operation record to ensure that the instruction is associated with a specific version of the web page file. Through the version identifier, the debugger can clearly know which version of the web page the operation belongs to. Convert user operations and modification opinions into structured instructions containing version association paths, for example, "Change the font size of the element with ID 'header' to 24px". This structured instruction facilitates subsequent AI to perform automated processing based on user feedback.

[0028] After combining all structured instructions and modification suggestions, the debugging client will generate the final debugging script. Specifically, the debugging script may include: specific instructions for modification operations such as page text modification, element position adjustment, style change, etc.; version information used to make each modification operation contain a clear version identifier to ensure that AI can make corresponding adjustments to a specific version of the web page; the order of operations organized according to the user's interaction trajectory to ensure that the operations in the debugging process conform to the actual modification order, both of which are collectively referred to as the execution order. The generated debugging script will then be sent to the AI ​​side through the client. AI will make adjustments based on these scripts and generate a new version of the web page file.

[0029] Further, refer to Figure 6 , S140 includes: S141, the AI ​​side obtains the debugging script, generates a modification plan and executes it; S142, the AI ​​side generates a feedback script according to the current environment detection results and dynamic feedback results during the execution process; S143: The AI ​​side sends the feedback script to the debugging client for parsing and displays it to the user side through the browser engine.

[0030] After the user generates and sends the debugging script through the debugging client, the AI ​​side will parse the script and generate a corresponding modification plan based on the parsing results. AI will extract modification suggestions, user operation records, and other dynamic feedback information from the received debugging script. Based on the parsed content, AI determines the parts of the web page that need to be adjusted and generates a specific modification plan. These modifications may include adjustments to the page structure, changes in style, or functional repairs. AI will perform corresponding code updates based on the generated modification plan, and will directly modify source files such as HTML, CSS, and JavaScript during execution to ensure that user needs are met.

[0031] When AI executes the modification plan, it also needs to detect and evaluate the status of the current web page to ensure the correctness of the modification and its impact on the overall web page effect. Specifically, AI will perform environmental detection on the web page displayed in the debugging client and collect the status information of the current page, such as DOM structure, page style, response time, error log, etc. Based on the detection results, AI will generate feedback scripts. These feedback scripts will include feedback information such as page loading time, response speed of interactive effects, whether there are any front-end errors, and whether the page style meets the design requirements. The results of the detection and feedback process will be converted into a structured feedback script and contain the required repair measures or operation suggestions. The format of the feedback script is similar to that of the debugging script, and also includes a version identifier and corresponding operation steps. In the actual operation process, AI will try to understand through dialogue by sending information to the user. Or AI will write a piece of JavaScript code as additional information to the text. The feedback information varies depending on the JavaScript written by AI. It may be only for the debugger to view, or the debugger may need to send it back to AI. The specific operation refers to the text information sent by AI and is processed by the debugger.

[0032] Furthermore, the interactive debugging method of the AI-generated webpage front end of the present invention also includes: S111a, the AI ​​side adds a file cleaning mark for each of the webpage files to the data packet; S111b. The debugging client overwrites and replaces existing files with the same name in the debugging client according to the cleaning mark, deletes the specified path records, or clears all of them.

[0033] When AI generates debugging results and packages them to send to the debugging client, if the AI ​​side finds that the files generated during the debugging process have the same name and path as the files currently existing in the debugging client, AI will attach a file cleanup mark to the data packet. Such marks can be: overwrite marks, indicating that the current version of the file will overwrite the existing files with the same name on the client; delete marks, indicating that the client needs to delete the file records under a specific path; full clear marks, indicating that all existing web page files in the debugging client should be deleted to ensure that the client and AI files are consistent. File cleanup marks are stored in the metadata part of the debugging package to ensure that the debugging client can perform corresponding cleanup or replacement operations based on these marks when loading the debugging package.

[0034] When the debugging client receives a data packet sent by AI containing a cleanup mark and file information, the client will identify the file cleanup mark in the data packet and take corresponding actions based on the mark. When the file cleanup mark indicates that an overwrite is required, the client will replace the existing file with the same name with the new file, so that the client always keeps the latest file version. If the mark specifies that certain files should be deleted, the debugging client will delete these file records locally and clean up old files that are no longer needed. When the package comes with a full cleanup mark, the client will delete all existing files and completely clear all history records in the debugging environment to ensure that the environment is clean every time it is debugged.

[0035] In addition, debuggers can also switch project stages through the client, such as from the development stage to the testing stage, so that AI or other Bots can continue to perform subsequent operations. This stage switching ensures that the project can be seamlessly connected between multiple stages and automatically processed.

[0036] Compared with the prior art, in the technical solution of the present invention, the web page file generated by AI and its related information are sent as a data packet to the debugging client, and the web page content is loaded and displayed using the embedded browser engine, so that users can intuitively operate and make modification suggestions. The user's operation generates a debugging script through the browser engine and feeds back to the AI, thereby realizing instant operation on the AI ​​side and generating a feedback script, which is displayed to the user through the browser again. Through the interaction of the debugging script and the feedback script delivered multiple times, an efficient communication channel is established between the user and the AI, and the expected debugging results are finally obtained and the corresponding environment file list is exported. This method effectively improves the efficiency and accuracy of human-computer collaboration, making AI more flexible and intelligent in the process of generating and debugging the front-end of the web page.

[0037] Figure 8 Schematic block diagram of an interactive debugging device for an AI-generated webpage front end provided by an embodiment of the present invention. Figure 8As shown, corresponding to the above AI generated webpage front-end interactive debugging method, the present invention also provides an AI generated webpage front-end interactive debugging device 600. The AI ​​generated webpage front-end interactive debugging device 600 includes a unit for executing the above AI generated webpage front-end interactive debugging device method, and the device can be configured in a desktop computer, tablet computer, smart phone, etc. terminal. Specifically, please refer to Figure 8 , the interactive debugging device 600 for generating a webpage front end by AI includes: The data packet sending unit 601 is used to send the web page file generated by AI and its related information as a data packet to the debugging client; A browser loading unit 602, configured to load the data packet and display the content of the web page file through a browser engine, wherein the browser engine is embedded in the debugging client; A debugging script generating unit 603 is used to generate a debugging script based on the user's operation and modification suggestions on the webpage file through the browser engine and send it to the AI ​​side; A feedback script generating unit 604, configured to generate a feedback script according to the instant operation of the AI ​​side on the webpage file and display it to the user side through the browser engine; The result exporting unit 605 is used to obtain the expected debugging result through the delivery interaction of the plurality of debugging scripts and the feedback scripts, and to export and save the environment file list of the expected debugging result.

[0038] The interactive debugging device 600 for generating a webpage front end by AI can be implemented in the form of a computer program. Fig. 9 Runs on the computer device shown.

[0039] See also Fig. 9 , Fig. 9 5 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device 500 may be a terminal or a server, wherein the terminal may be an electronic device with communication functions such as a desktop computer, a tablet computer, a smart phone, etc. The server may be an independent server or a server cluster composed of multiple servers.

[0040] See also Fig. 9 The computer device 500 includes a processor 502 , a memory and a network interface 505 connected via a system bus 501 , wherein the memory may include a non-volatile storage medium 503 and an internal memory 504 .

[0041] The non-volatile storage medium 503 can store an operating system 5031 and a computer program 5032. The computer program 5032 includes program instructions, and when the program instructions are executed, the processor 502 can execute an interactive debugging method for generating a webpage front end using AI.

[0042] The processor 502 is used to provide computing and control capabilities to support the operation of the entire computer device 500 .

[0043] The internal memory 504 provides an environment for the operation of the computer program 5032 in the non-volatile storage medium 503. When the computer program 5032 is executed by the processor 502, the processor 502 can execute an interactive debugging method for generating a web page front end using AI.

[0044] The network interface 505 is used to communicate with other devices over the network. Those skilled in the art will appreciate that Fig. 9 The structure shown in the figure is merely a block diagram of a portion of the structure related to the solution of the present application, and does not constitute a limitation on the computer device 500 to which the solution of the present application is applied. The specific computer device 500 may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0045] The processor 502 is used to run a computer program 5032 stored in the memory to implement the steps of the above method.

[0046] It should be understood that in the embodiment of the present application, the processor 502 may be a central processing unit (CPU), and the processor 502 may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0047] It can be understood by those skilled in the art that all or part of the processes in the method for implementing the above embodiment can be completed by instructing the relevant hardware through a computer program. The computer program includes program instructions, and the computer program can be stored in a storage medium, which is a computer-readable storage medium. The program instructions are executed by at least one processor in the computer system to implement the process steps of the embodiment of the above method.

[0048] Therefore, the present invention also provides a storage medium. The storage medium may be a computer-readable storage medium. The storage medium stores a computer program, wherein the computer program includes program instructions. When the program instructions are executed by a processor, the processor executes the steps of the above method.

[0049] The storage medium may be a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk, or an optical disk, etc., which are computer-readable storage media that can store program codes.

[0050] Those of ordinary skill in the art will appreciate that the units and algorithm steps of each example described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, computer software, or a combination of the two. In order to clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described in terms of function in the above description. Whether these functions are performed in hardware or software depends on the specific application and design constraints of the technical solution. Professional and technical personnel can use different methods to implement the described functions for each specific application, but such implementation should not be considered to be beyond the scope of the present invention.

[0051] In the several embodiments provided by the present invention, it should be understood that the disclosed devices and methods can be implemented in other ways. For example, the device embodiments described above are only schematic. For example, the division of each unit is only a logical function division, and there may be other division methods in actual implementation. For example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed.

[0052] The steps in the method of the embodiment of the present invention can be adjusted in order, combined and deleted according to actual needs. The units in the device of the embodiment of the present invention can be combined, divided and deleted according to actual needs. In addition, the functional units in the various embodiments of the present invention can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit.

[0053] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a storage medium. Based on this understanding, the technical solution of the present invention is essentially or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, terminal, or network device, etc.) to perform all or part of the steps of the method described in each embodiment of the present invention.

[0054] The above is only a specific embodiment of the present invention, but the protection scope of the present invention is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed by the present invention, and these modifications or replacements should be included in the protection scope of the present invention. Therefore, the protection scope of the present invention shall be based on the protection scope of the claims.

Claims

1. An interactive debugging method for AI-generated web page front end, characterized in that: include: Send the AI-generated web page file and its related information as a data packet to the debugging client; Loading the data packet and displaying the content of the web page file through a browser engine, wherein the browser engine is embedded in the debugging client; Generate a debugging script based on the user's operation and modification suggestions on the webpage file through the browser engine and send it to the AI ​​side; Generate a feedback script based on the AI ​​side’s real-time operation on the webpage file and display it to the user side through the browser engine; An expected debugging result is obtained through the delivery interaction of a plurality of the debugging scripts and the feedback scripts, and an environment file list of the expected debugging result is exported and saved.

2. The interactive debugging method for AI-generated webpage front end according to claim 1, characterized in that: The step of sending the multiple web page files generated by AI and related information as data packets to the debugging client includes: Generate multiple web page files through multiple collaborative BOTs located on the AI ​​side; The publishing BOT on the AI ​​side packages the plurality of web page files into the data packet; The data packet is sent to the debugging client.

3. The interactive debugging method for AI-generated webpage front end according to claim 2, characterized in that: After the step of packaging the plurality of web page files into the data packet by the publishing BOT on the AI ​​side, the step further includes: The web page file including the HTML file is generated by the plurality of the collaborative BOTs, and a random DOM element ID is assigned to the tag in the HTML file; The publishing BOT adds the source, name and path of each web page file in the data packet; The publishing BOT adds a version identifier of each of the web page files to the data packet.

4. The interactive debugging method for AI-generated webpage front end according to claim 3, characterized in that: The step of loading the data packet and displaying the content of the webpage file through a browser engine, wherein the browser engine is embedded in the debugging client, comprises: Decompressing the data packet sent by the AI ​​through the debugging client; Establishing a three-source file mapping relationship based on the source, name and path through the debugging client; Establishing a DOM element mapping relationship by using a parent node recursive algorithm based on the random DOM element ID through the debugging client; The corresponding web page file is loaded and displayed through the browser engine according to the version identifier.

5. The interactive debugging method for AI-generated webpage front end according to claim 4, characterized in that: The step of generating a debugging script based on the user's operation and modification suggestions on the webpage file through the debugging client and sending it to the AI ​​side includes: Capturing the operations performed by the user on the browser engine to obtain user operation records; Acquiring modification opinions input by the user through the browser engine; Converting the user operation record into a structured instruction containing a version association path according to the three source file mapping relationships, the DOM element mapping relationship and the version identifier; A debugging script is generated by combining the structured instructions and the modification suggestions and sent to the AI ​​side.

6. The interactive debugging method for AI-generated webpage front end according to claim 5, characterized in that: The step of generating a feedback script based on the AI ​​side's real-time operation on the webpage file and displaying it to the user side through the browser engine includes: The AI ​​side obtains the debugging script, generates a modification plan, and executes the modification plan; The AI ​​side generates a feedback script according to the current environment detection results and dynamic feedback results during the execution process; The AI ​​side sends the feedback script to the debugging client for parsing and displays it to the user side through the browser engine.

7. The interactive debugging method for AI-generated webpage front end according to any one of claims 1 to 6, characterized in that: Exporting and saving the environment file list of the expected debugging result also includes: The AI ​​side adds a file cleaning mark for each of the webpage files to the data packet; The debugging client overwrites and replaces existing files with the same name in the debugging client according to the cleaning mark, deletes the specified path record, or clears all of them.

8. An interactive debugging device for an AI-generated webpage front end, characterized in that: A unit comprising an interactive debugging method for an AI-generated web page front end as described in any one of claims 1 to 7.

9. A computer device, characterized in that: The computer device comprises a memory and a processor connected to the memory; the memory is used to store a computer program; the processor is used to run the computer program stored in the memory to execute the steps of the method as claimed in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that: The storage medium stores a computer program, wherein the computer program includes program instructions, and when the program instructions are executed by a processor, the steps of the method according to any one of claims 1 to 7 can be implemented.

Images