Interactive Debugging Method, Device, Equipment and Medium for AI-Generated Web Front-End

Abstract

The present invention discloses an interactive debugging method, device, equipment and medium for AI-generated web front-ends, aiming to solve the problem of the lack of effective human-machine collaboration tools when AI generates code. The method sends the web page files generated by AI and their related information as data packets to the debugging client, loads and displays the web page content by using the embedded browser engine, enabling users to intuitively operate and put forward modification opinions. The operations of the users generate debugging scripts through the browser engine and are fed back to the AI, thus realizing instant operations on the AI side and generating feedback scripts, which are again displayed to the users through the browser. Through the interaction of such repeatedly delivered debugging scripts and feedback scripts, an efficient communication channel is established between the users and the AI, and finally the expected debugging results are obtained and the corresponding list of environment files is exported. Thereby, the efficiency and accuracy of human-machine collaboration are effectively improved.

Description

Technical Field

[0001] The present invention relates to the field of artificial intelligence technology, and particularly to an interactive debugging method, device, equipment and medium for AI to generate the front end of a web page. Background Art

[0002] Currently, when AI is used to generate the front end of a web page, it usually cannot meet all the user's requirements in one generation. Therefore, the user needs to always understand the current version generated by AI, make adjustment opinions and feedback, and let AI modify repeatedly until the final product. At present, there is a lack of solutions and system tools for AI-human interaction on the market, and the immediate human adjustment for AI is not timely, resulting in low iteration efficiency of the front-end code generated by AI. Summary of the Invention

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

[0004] In the first aspect, an embodiment of the present invention provides an interactive debugging method for AI to generate the front end of a web page, including:

[0005] Sending the web page file generated by AI and its related information to a debugging client as a data packet;

[0006] Loading the data packet through a browser engine and displaying the content of the web page file, where the browser engine is embedded in the debugging client;

[0007] Generating a debugging script according to the operations and modification opinions of the web page file by the user side through the browser engine and sending it to the AI side;

[0008] Generating a feedback script according to the immediate operations of the web page file by the AI side and displaying it to the user side through the browser engine;

[0009] Obtaining an expected debugging result through the delivery and interaction of multiple debugging scripts and feedback scripts, and exporting and saving the environment file list of the expected debugging result.

[0010] In the second aspect, an embodiment of the present invention further provides an interactive debugging device for AI to generate the front end of a web page, including units of the above interactive debugging method for AI to generate the front end of a web page.

[0011] In the third aspect, an embodiment of the present invention further provides a computer device, where the computer device includes 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 interactive debugging method for AI to generate the front end of a web page.

[0012] In a fourth aspect, an embodiment of the present invention further provides a computer-readable storage medium. The storage medium stores a computer program, and the computer program includes program instructions. When the program instructions are executed by a processor, the steps of the above-mentioned interactive debugging method for AI to generate a web page front end can be implemented.

[0013] Compared with the prior art, the beneficial effects of the present invention are as follows:

[0014] In the technical solution of the present invention, by sending the web page file generated by AI and its related information as a data packet to a debugging client, using the embedded browser engine to load and display the web page content, enabling users to intuitively operate and put forward modification opinions. The operations of the users generate debugging scripts through the browser engine and are fed back to the AI, thereby realizing immediate operations on the AI side and generating feedback scripts, which are again displayed to the users through the browser. Through the interaction of such repeatedly delivered debugging scripts and feedback scripts, an efficient communication channel is established between the users and the AI, and finally the expected debugging results are obtained and the corresponding list of environment files is exported. This method effectively improves the efficiency and accuracy of human-machine collaboration, making the AI more flexible and intelligent in the process of generating and debugging the web page front end. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions of the embodiments of the present invention, the following will briefly introduce the drawings required for the description of the embodiments. Obviously, the following drawings are some embodiments of the present invention. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0016] Figure 1 It is a flowchart of the interactive debugging method for AI to generate a web page front end provided by the present invention;

[0017] Figure 2 It is the first sub-flowchart of the interactive debugging method for AI to generate a web page front end provided by the present invention;

[0018] Figure 3 It is the sub-flowchart of the first sub-flowchart of the interactive debugging method for AI to generate a web page front end provided by the present invention;

[0019] Figure 4 It is the second sub-flowchart of the interactive debugging method for AI to generate a web page front end provided by the present invention;

[0020] Figure 5 It is the third sub-flowchart of the interactive debugging method for AI to generate a web page front end provided by the present invention;

[0021] Figure 6This is the fourth sub - flowchart of the interactive debugging method for the AI - generated web front - end provided by the present invention;

[0022] Figure 7 This is the fifth sub - flowchart of the interactive debugging method for the AI - generated web front - end provided by the present invention;

[0023] Figure 8 This is a schematic block diagram of a unit of the interactive debugging device for the AI - generated web front - end provided by the present invention;

[0024] Figure 9 This is a schematic block diagram of a computer device provided by an embodiment of the present invention. Detailed implementation manners

[0025] Next, the technical solutions in the embodiments of the present invention will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present invention. Obviously, the described embodiments are some, but not all, of the embodiments of the present invention. All other embodiments obtained by those of ordinary skill in the art based on the embodiments of the present invention without creative efforts shall fall within the protection scope of the present invention.

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

[0027] 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 this specification of the present invention and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an", and "the" are intended to include the plural forms.

[0028] It should be further understood that the term " / and" used in this specification of the present invention and the appended claims refers to any combination and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0029] In order to solve the problem of the lack of effective human - machine collaboration tools when existing AI generates code in the prior art, the present invention provides an interactive debugging method for the AI - generated web front - end. Refer to Figures 1 to 7 , which includes:

[0030] S110. Send the web page file generated by the AI and its related information as a data packet to the debugging client;

[0031] S120. Load the data packet through the browser engine and display the content of the web page file, where the browser engine is embedded in the debugging client;

[0032] S130. Generate a debugging script according to the operations and modification suggestions of the user side on the web page file through the browser engine and send it to the AI side;

[0033] S140. Generate a feedback script according to the instant operations of the AI side on the web page file and display it to the user side through the browser engine;

[0034] S150. Obtain the expected debugging result through the delivery and interaction of multiple debugging scripts and feedback scripts, and export and save the environment file list of the expected debugging result.

[0035] In the present invention, the interactive cooperation between humans (users) and AI is mainly borne by the debugging client. By developing an independent debugging client tool and embedding a browser engine to achieve web page display. First, the AI side generates a data packet and sends it. The client automatically identifies and loads the data packet sent by the AI. After receiving the data packet, the client will automatically identify according to the source information of the file and judge whether the corresponding file can be loaded. If the file source is generated by the 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 the AI in real time. The embedded browser engine enables the debugger to directly edit and modify the web page file interactively. Thus, the debugger can directly modify the web page content in the browser and generate a debugging script through the client to feedback to the AI for adjustment. The debugger can select text or controls and interact with the AI in real time by injecting JavaScript code. The modification suggestions are fed back to the AI through the debugging script, and the AI generates new code according to the feedback and returns it through the feedback script. When the debugger believes that the debugging work is completed, such as the current function meets the requirements, the file list of the current web page can be exported. The exported files are used for persistent storage for subsequent viewing or modification, or published as an independent website for other non-debuggers to access.

[0036] Further, referring to Figure 2 , S110 includes:

[0037] S111. Generate multiple web page files through multiple collaborative BOTs provided on the AI side;

[0038] S112. Package multiple web page files into the data packet by the publishing BOT on the AI side;

[0039] S113. Send the data packet to the debugging client.

[0040] Taking the generation of front-end code for a web page by multi-AI collaboration to generate large-scale text as an example. The user starts a new project, uploads the original requirement document 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 document 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 Bots. 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 release in the project uploads each file of this version as a resource, generates a package with the path and resource index, and sends it as additional data of the text to the conversation. The user uses the debugging client of the present invention to load these resources and displays the page developed by AI through the embedded browser to start verification. Multiple web page files generated on the AI side, each file can represent a web page component, module, or different page. All the generated web page files and related information will be integrated and packaged into a data packet by the release BOT. The related information includes file path, file name, resource location, etc.

[0041] Further, referring to Figure 3 , after S112, the following steps are further included

[0042] S112a. Generate the web page files including HTML files by multiple said collaborative Bots, and assign random DOM element IDs to the tags in the HTML files;

[0043] S112b. The release Bot attaches the source, name, and path of each said web page file to the data packet;

[0044] S112c. The release Bot attaches the version identifier of each said web page file to the data packet.

[0045] With the combined 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 by the publishing BOT on the AI side. The web page files mainly include HTML files, which are the core part of building the front end of the web page. The collaborative BOTs on the AI side will generate these files according to user requirements and templates, and assign a randomly generated DOM element ID to each tag in the 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 files generated by the AI mark each tag in this way, enabling debuggers to easily operate through these IDs. This design ensures that even tags without explicit interaction requirements (such as text paragraphs, buttons, etc.) can be accurately located through the IDs, facilitating quick identification and modification by debuggers in subsequent operations. Each file in the data packet will be marked with its source information, indicating whether the file is generated by the AI, provided by the debugger, or from other external resources.

[0046] The publishing BOT attaches various relevant information to the data packet, and each web page file will clearly indicate its file name and storage path in the data packet. The path information helps the debug client determine the location of the file so as to accurately find the resources when loading and debugging. Each web page file will also be accompanied by a version identifier to facilitate version management during multiple rounds of debugging. The version identifier helps debuggers distinguish different versions of web page files and ensures that the debugging operations match the target file version. Finally, the data packet packaged by the publishing BOT will contain all the generated web page files, relevant information, and other auxiliary resources (such as pictures, fonts, JS scripts, etc.).

[0047] Furthermore, referring to Figure 4 , S120 includes:

[0048] S121. Unzip the data packet sent by the AI through the debug client;

[0049] S122. Establish a three-source file mapping relationship through the debug client based on the source, name, and path;

[0050] S123. Establish a DOM element mapping relationship through the debug client based on the random DOM element ID using the parent node recursive algorithm;

[0051] S124. Load and display the corresponding web page file according to the version identifier through the browser engine.

[0052] After the debugging client receives the data packet sent by the AI, the client will first perform an unpacking operation. The data packet contains multiple web page files and related metadata, such as file source, name, path, etc. After unpacking, 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 a random DOM element ID and a parent node recursive algorithm to establish a 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 in order to accurately determine its position and hierarchical relationship. This enables the debugger to quickly locate any element on the web page. During the debugging process, the debugging client will load the corresponding web page file according to the version identifier. The client reads the version identifier of the file to ensure that the latest version during the debugging process is loaded to avoid loading outdated or incorrect files. The debugging client updates the web page content in the embedded browser according to the loaded version information, and the browser engine will render the web page as needed and display the current version of the web page to the debugger.

[0053] Further, referring to Figure 5 , S130 includes:

[0054] S131. Capture the operations performed by the user side on the browser engine to obtain user operation records;

[0055] S132. Obtain the modification opinions input by the user side through the browser engine;

[0056] S133. Convert the user operation records into structured instructions with version-related paths according to the three-source file mapping relationship, the DOM element mapping relationship, and the version identifier;

[0057] S134. Generate a debugging script by combining the structured instructions and the modification opinions and send it to the AI side.

[0058] 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. These include but are not limited to: click events, where the user clicks on any button, link, or other interactive element on the web page; input events, where the user enters text or data in a text box or form; selection operations, where the user selects specific text, images, or other elements on the web page; and other interactions, such as the user scrolling the page, dragging elements, etc. 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 a detailed operation track for generating the debugging script later.

[0059] In addition to operation records, the debugging client also captures the modification suggestions input by the user. These suggestions are usually passed to the debugging client through text boxes, comment functions, or other means set within the browser. The debugging client collects these modification suggestions and associates them with the user operation records for further generation of debugging scripts.

[0060] Based on the previously established three-source file mapping relationship and DOM element mapping relationship, as well as user operation records and modification suggestions, the debugging client will generate structured instructions. Specifically, it uses the DOM element mapping relationship to map user operations, determines the specific elements involved in the user operations, and converts them into structured instructions. For example, clicking a button may be converted to: "Click on the element with button ID'submitBtn'". Embed a version identifier in each operation record to ensure that the instructions are 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 suggestions into structured instructions containing version-associated paths, such as, "Change the font size of the element with ID 'header' to 24px". Such structured instructions facilitate subsequent automated processing by AI based on user feedback.

[0061] After combining all the structured instructions and modification suggestions, the debugging client will generate the final debugging script. Specifically, the debugging script can include: specific instruction 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 for a specific version of the web page; and the operation sequence organized according to the user's interaction trajectory to ensure that the operations during the debugging process conform to the actual modification sequence, both of which are collectively referred to as the execution sequence. The generated debugging script will then be sent to the AI side through the client. The AI will make adjustments based on these scripts and generate a new version of the web page file.

[0062] Furthermore, referring to Figure 6 , S140 includes:

[0063] S141. After obtaining the debugging script, the AI side generates a modification plan and executes it;

[0064] S142. The AI side generates a feedback script based on the current environment detection results and dynamic feedback results during the execution process;

[0065] 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.

[0066] After the user generates and sends a debugging script through the debugging client, the AI side will parse the script and generate a corresponding modification plan based on the parsing results. The AI will extract modification suggestions, user operation records, and other dynamic feedback information from the received debugging script. According to the parsed content, the 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 styles, or functional fixes, etc. Based on the generated modification plan, the AI performs corresponding code updates, directly modifying source files such as HTML, CSS, and JavaScript during the execution process to ensure that the user's needs are met.

[0067] When the 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, the AI will perform an environment detection on the web page displayed in the debugging client, collecting the status information of the current page, such as including the DOM structure, page styles, response time, error logs, etc. Based on the detection results, the AI will generate feedback scripts. These feedback scripts will include feedback information content such as page loading time, response speed of interactive effects, whether there are any front-end errors, and whether the page styles meet the design requirements. The results of the detection and feedback process will be converted into structured feedback scripts and include 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. During the actual operation process, the AI will try to communicate with the user by sending information or by writing a piece of JavaScript code as additional information. The feedback information varies according to the JavaScript written by the AI. It may be only for the debugger to view, or the debugger may need to send it back to the AI. The specific operation refers to the text information sent by the AI and is handled by the debugger.

[0068] Furthermore, the AI-generated interactive debugging method for the web page front end of the present invention further includes:

[0069] S111a. The AI side attaches a file cleaning mark for each of the web page files in the data packet;

[0070] S111b. The debugging client overwrites and replaces the existing files with the same name in the debugging client, deletes the specified path records, or clears them completely according to the cleaning mark.

[0071] When the AI generates debug results and packages them for sending to the debug client, if the AI side discovers that there are files with the same name and in the same path as the existing files on the debug client during the debugging process, the AI will attach a file cleaning flag to the data packet. Such flags can be: an overwrite flag, indicating that the current version of the file will overwrite the existing file with the same name on the client; a delete flag, indicating that the client needs to delete the file records in a specific path; a full clear flag, indicating that all existing web files in the debug client should be deleted to ensure that the files on the client are consistent with those of the AI. The file cleaning flags are stored in the metadata section of the debug package to ensure that the debug client can perform corresponding cleaning or replacement operations based on these flags when loading the debug package.

[0072] When the debug client receives a data packet sent by the AI that contains cleaning flags and file information, the client will identify the file cleaning flags in the data packet and take corresponding actions according to the flags. When the file cleaning flag indicates an overwrite is needed, the client will replace the existing file with the same name with the new file, so that the client always maintains the latest file version. If the flag specifies deleting certain files, the debug client will delete these file records locally to clean up the old files that are no longer needed. When the full clear flag is attached in the packet, the client will delete all existing files and completely clear all historical records in the debug environment to ensure that the environment for each debugging is clean.

[0073] In addition, the debug personnel can also switch the project phase through the client, for example, from the development phase to the testing phase, so that the AI or other Bots can continue to perform subsequent operations. This phase switch ensures seamless connection between multiple phases of the project and enables automated processing.

[0074] Compared with the prior art, in the technical solution of the present invention, by sending the web page files generated by the AI and their related information as data packets to the debug client, using the embedded browser engine to load and display the web page content, users can intuitively perform operations and put forward modification opinions. The operations of the users generate debug scripts through the browser engine and are fed back to the AI, thus enabling the AI side to perform immediate operations and generate feedback scripts, which are again displayed to the users through the browser. Through this interaction of multiple deliveries of debug scripts and feedback scripts, an efficient communication channel is established between the users and the AI, and finally the expected debug results are obtained and the corresponding list of environment files is exported. This method effectively improves the efficiency and accuracy of human-machine collaboration, making the AI more flexible and intelligent in the generation and debugging process of the web page front end.

[0075] Figure 8 is a schematic block diagram of an interactive debugging device for the AI to generate the web page front end provided by an embodiment of the present invention. As Figure 8As shown, corresponding to the above interactive debugging method for the AI-generated web page front-end, the present invention also provides an interactive debugging device 600 for the AI-generated web page front-end. The interactive debugging device 600 for the AI-generated web page front-end includes units for executing the above interactive debugging method for the AI-generated web page front-end, and this device can be configured in terminals such as desktop computers, tablet computers, smart phones, etc. Specifically, please refer to Figure 8 , the interactive debugging device 600 for the AI-generated web page front-end includes:

[0076] A data packet sending unit 601, configured to send the web page file generated by the AI and its related information as data packets to the debugging client;

[0077] A browser loading unit 602, configured to load the data packets through a browser engine and display the content of the web page file, and the browser engine is embedded in the debugging client;

[0078] A debugging script generation unit 603, configured to generate a debugging script according to the operations and modification opinions of the user side on the web page file through the browser engine and send it to the AI side;

[0079] A feedback script generation unit 604, configured to generate a feedback script according to the immediate operations of the AI side on the web page file and display it to the user side through the browser engine;

[0080] An export result unit 605, configured to obtain an expected debugging result through the delivery interaction of multiple said debugging scripts and said feedback scripts, and export and save the environment file list of the expected debugging result.

[0081] The above interactive debugging device 600 for the AI-generated web page front-end can be implemented in the form of a computer program, and this computer program can run on a computer device as shown in Figure 9 .

[0082] Please refer to Figure 9 , Figure 9 is a schematic block diagram of a computer device provided by an embodiment of the present application. The computer device 500 can be a terminal or a server. Among them, the terminal can be an electronic device with communication functions such as a desktop computer, a tablet computer, a smart phone, etc. The server can be an independent server or a server cluster composed of multiple servers.

[0083] Refer to Figure 9 , the computer device 500 includes a processor 502, a memory, and a network interface 505 connected through a system bus 501. Among them, the memory can include a non-volatile storage medium 503 and an internal memory 504.

[0084] The non-volatile storage medium 503 can store an operating system 5031 and a computer program 5032. The computer program 5032 includes program instructions which, when executed, can cause the processor 502 to execute an interactive debugging method for an AI-generated web front-end.

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

[0086] 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, it can cause the processor 502 to execute an interactive debugging method for an AI-generated web front-end.

[0087] The network interface 505 is used for network communication with other devices. Those skilled in the art can understand that Figure 9 the structure shown in is only a block diagram of some structures related to the solution of this application, and does not constitute a limitation on the computer device 500 to which the solution of this application is applied. The specific computer device 500 may include more or fewer components than those shown in the figure, or combine some components, or have different component arrangements.

[0088] Among them, the processor 502 is used to run the computer program 5032 stored in the memory to implement the steps of the above method.

[0089] It should be understood that in the embodiments of this 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 (DSPs), application specific integrated circuits (ASICs), off-the-shelf programmable gate arrays (FPGAs) 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.

[0090] Those of ordinary skill in the art can understand that all or part of the processes in the methods of the above embodiments can be completed by instructing 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 embodiments of the above method.

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

[0092] The storage medium can be a variety of computer-readable storage media such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a magnetic disk, or an optical disc, etc., which can store program codes.

[0093] Those of ordinary skill in the art can realize that the units and algorithm steps of each example described in combination with the embodiments disclosed herein can be implemented by electronic hardware, computer software, or a combination of the two. To clearly illustrate the interchangeability of hardware and software, the composition and steps of each example have been generally described according to functions in the above description. Whether these functions are executed in a hardware or software manner depends on the specific application and design constraints of the technical solution. Professional technicians can use different methods to implement the described functions for each specific application, but such implementation should not be considered to exceed the scope of the present invention.

[0094] In 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 merely illustrative. For example, the division of each unit is only a logical function division, and there can 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.

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

[0096] 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, in essence, 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 causing a computer device (which can be a personal computer, a terminal, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present invention.

[0097] As described above, it is only the specific implementation manner of the present invention, but the protection scope of the present invention is not limited thereto. Any person skilled in the art within the technical scope disclosed by the present invention can easily think of various equivalent modifications or substitutions, and these modifications or substitutions should be covered within the protection scope of the present invention. Therefore, the protection scope of the present invention shall be subject to the protection scope of the claims.

Claims

1. An interactive debugging method for AI-generated web page front end, characterized in that: include: The web page files generated by the AI ​​and related information thereof are sent as a data packet to the debugging client, including: generating a plurality of the web page files by a plurality of collaborative BOTs arranged on the AI ​​side; packaging the plurality of the web page files into the data packet by the publishing BOT on the AI ​​side; and sending the data packet to the debugging client; The step of packaging the plurality of web page files into the data packet by the publishing BOT on the AI ​​side includes: generating the web page files including HTML files by the plurality of the collaborative BOTs, and assigning random DOM element IDs to tags in the HTML files; the publishing BOT attaching the source, name and path of each web page file to the data packet; the publishing BOT attaching the version identifier of each web page file to the data packet; The data packet is loaded through a browser engine and the content of the web page file is displayed, the browser engine is embedded in the debugging client, wherein the loading of the data packet through the browser engine and the content of the web page file includes: 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 based on the random DOM element ID by using a parent node recursive algorithm through the debugging client; and loading and displaying the corresponding web page file according to the version identifier through the browser engine; 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; The expected debugging result is obtained through the delivery interaction of multiple debugging scripts and feedback scripts, and the environmental file list of the expected debugging result is exported and saved, including: the AI ​​side attaches a file cleanup mark for each web page file in the data packet; the debugging client overwrites and replaces existing files with the same name in the debugging client according to the cleanup mark, deletes the specified path record, or clears all of them.

2. The interactive debugging method for AI-generated webpage front end according to claim 1, 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.

3. The interactive debugging method for AI-generated webpage front end according to claim 2, 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.

4. An interactive debugging device for AI-generated web page 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 3.

5. 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 3.

6. 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 3 can be implemented.

Images