A page editing method, system, device, and storage medium

Abstract

This disclosure provides a page editing method, system, device, and storage medium. The page editing method can provide a target editor with collaborative editing capabilities for non-development users without development experience without changing the existing front-end engineering technology stack and code repository structure. This allows the editing operations performed by non-development users on the preview page within the target editor to be converted into input data for a large language model. The large language model outputs target code that matches the above editing operations, and updates the preview page displayed in the target editor based on the target code. This allows non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative page editing for the preview page.

Description

Technical Field

[0001] This application relates to the field of Internet technology, and more specifically, to a page editing method, system, device, and storage medium. Background Technology

[0002] In the daily iteration of internet products, web page development based on modern front-end engineering (such as React / Vue) has become mainstream. Non-development roles such as product managers, operations, and designers frequently request page changes such as copy optimization, style tweaks, and component layout adjustments. These changes are usually small in scale but occur frequently.

[0003] Currently, the common practice in existing technologies is as follows: developers build the front-end application locally or in a CI environment, deploy the results to a test or pre-release environment, and then the product and design teams conduct a review. Issues discovered during the review are reported to the developers via defect tickets or instant messaging tools, who then modify the code, rebuild, and deploy until the page meets the requirements. However, because the above editing process involves multiple rounds of communication, packaging, and deployment, it results in low efficiency for collaborative page editing. Summary of the Invention

[0004] In view of this, this application provides a page editing method, system, device, and storage medium that can provide non-development users without development experience with a target editor capable of collaborative editing without changing the existing front-end engineering technology stack and code repository structure. This allows the editing operations performed by non-development users on the preview page within the target editor to be converted into input data for a large language model. The large language model outputs target code that matches the above editing operations, and updates the preview page displayed in the target editor based on the target code. This enables non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative page editing for the preview page.

[0005] To make the above-mentioned objectives, features and advantages of this application more apparent and understandable, preferred embodiments are described below in detail with reference to the accompanying drawings.

[0006] In a first aspect, embodiments of this application provide a page editing method, the page editing method comprising: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

[0007] Secondly, embodiments of this application provide a page editing system, the page editing system comprising: a collaboration platform and at least one terminal device establishing a communication connection with the collaboration platform, wherein a first terminal device among the terminal devices is used for: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

[0008] Thirdly, embodiments of this application provide a computer device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the page editing method described above.

[0009] Fourthly, embodiments of this application provide a computer-readable storage medium storing a computer program, which, when executed by a processor, performs the steps of the above-described method for editing the page of materials.

[0010] The technical solutions provided by the embodiments of this application may include the following beneficial effects: This application provides a page editing method, system, device, and storage medium that, without altering the existing front-end engineering technology stack and code repository structure, provides a target editor with collaborative editing capabilities for non-development users lacking development experience. This allows editing operations performed by non-development users on the preview page within the target editor to be converted into input data for a large language model. The large language model outputs target code matching the editing operations, and the preview page displayed in the target editor is updated based on the target code. This enables non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative page editing for the preview page. Attached Figure Description

[0011] To more clearly illustrate the technical solutions of the embodiments of this application, the accompanying drawings used in the embodiments will be briefly introduced below. It should be understood that the following drawings only show some embodiments of this application and should not be regarded as a limitation of the scope. For those skilled in the art, other related drawings can be obtained based on these drawings without creative effort.

[0012] Figure 1 This paper shows a schematic diagram of the structure of a page editing system provided in an embodiment of this application; Figure 2 A flowchart illustrating a page editing method provided in an embodiment of this application is shown; Figure 3 A schematic diagram of the editing interface of a target editor provided in an embodiment of this application is shown; Figure 4 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application. Detailed Implementation

[0013] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. It should be understood that the accompanying drawings in this application are for illustrative and descriptive purposes only and are not intended to limit the scope of protection of this application. Furthermore, it should be understood that the schematic drawings are not drawn to scale. The flowcharts used in this application illustrate operations implemented according to some embodiments of this application. It should be understood that the operations in the flowcharts may not be implemented in sequence, and steps without logical contextual relationships may be reversed or implemented simultaneously. In addition, those skilled in the art, guided by the content of this application, may add one or more other operations to the flowcharts, or remove one or more operations from the flowcharts.

[0014] Furthermore, the described embodiments are merely some, not all, of the embodiments of this application. The components of the embodiments of this application described and illustrated herein can typically be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of this application provided in the accompanying drawings is not intended to limit the scope of the claimed application, but merely to illustrate selected embodiments of the application. All other embodiments obtained by those skilled in the art based on the embodiments of this application without inventive effort are within the scope of protection of this application.

[0015] It should be noted that the term "comprising" will be used in the embodiments of this application to indicate the presence of the features declared thereafter, but does not exclude the addition of other features.

[0016] A page editing method in one embodiment of this application can run in a page editing system, wherein, as Figure 1 As shown, the page editing system includes: a collaboration platform and at least one terminal device that establishes a communication connection with the collaboration platform. The terminal device may include terminal devices corresponding to non-development users and terminal devices corresponding to development users (i.e., terminal devices can be divided into development-side terminal devices and non-development-side terminal devices). This application embodiment does not limit the specific number or type of terminal devices.

[0017] Specifically, the collaboration platform can receive page editing requests initiated by non-developer users' terminal devices, determine the code repository corresponding to the target project for which page editing is required according to the non-developer user's instructions, and generate a collaborative code branch based on the code repository. This collaborative code branch will carry the code changes corresponding to this page editing. The collaboration platform can also generate a preview URL corresponding to the front-end runtime of the target project based on the collaborative code branch, and send the generated preview URL to the non-developer user's terminal device.

[0018] Based on the received preview URL, the terminal device of a non-developer can display the editing interface of the target editor on its own graphical user interface. By loading the preview URL, a preview page corresponding to the target project can be displayed in the editing interface. The editing operations performed by the non-developer on the preview page within the target editor can be converted into input data for a large language model. The large language model outputs target code matching the editing operations, and the preview page displayed in the target editor is updated according to the target code. This allows the non-developer to more conveniently and directly view the edited page effect. After obtaining a satisfactory preview page, the non-developer can send a code submission request to the collaboration platform through the target editor. The collaboration platform can then generate a code merge request to merge the code modified by the non-developer with the main code branch of the target project. Following the normal code review process, the code merge request is assigned to a developer for code review, thereby reducing communication costs between non-developer and developer users and effectively improving the efficiency of collaborative editing of the preview page.

[0019] To facilitate understanding of the embodiments of this application, a page editing method, system, device, and storage medium provided in the embodiments of this application will be described in detail below.

[0020] Reference Figure 2 As shown, Figure 2 The diagram illustrates a flowchart of a page editing method provided in an embodiment of this application, wherein the page editing method includes steps S201-S205; specifically: S201, The editing interface within the target editor is displayed on the first graphical user interface of the first terminal device.

[0021] In this embodiment, the first terminal device is a terminal device used by a non-development user (such as a product planner, visual designer, or other non-development user without extensive development experience). The first terminal device establishes a communication connection with the collaboration platform. The non-development user can initiate a page editing request for the target project to the collaboration platform through the first terminal device. In response to the received page editing request, the collaboration platform can generate a preview URL corresponding to the front-end runtime of the target project and send the generated preview URL to the non-development user's first terminal device. This allows the first terminal device to embed the front-end runtime (which is also equivalent to the front-end runtime environment) with collaborative editing capabilities into the target editor based on the received preview URL. This results in the display of the editing interface of the target editor on the first graphical user interface of the first terminal device, allowing the non-development user to edit and modify the page corresponding to the target project through the target editor.

[0022] It should be noted that the collaboration platform is responsible for creating an independent front-end runtime environment (i.e., front-end runtime) for each page collaboration (i.e., a page collaborative editing task initiated by a non-developer user) based on the existing code repository. Within this front-end runtime environment, the platform provides the target editor with an accessible page preview address (i.e., preview URL). The target editor itself is a web application; it does not directly run business code but acts as a "shell interface." By receiving the preview URL sent by the collaboration platform, the target editor can display a preview page of the target project within the editing interface. In addition to the preview page, the editing interface also displays a target panel to support dialogue between non-developer users and the large language model. This allows non-developer users to input supplementary descriptive information about their page editing needs into the large language model during the page editing process, enabling the large language model to more accurately understand the non-developer user's page editing requirements for the preview page.

[0023] Specifically, step S201 above can be achieved through the following steps a1-a4: Step a1: In response to a page editing request for the target project, generate a collaborative code branch that matches the main code branch in the code repository corresponding to the target project.

[0024] Here, in step a1, when a non-developer needs to edit a web page in a target project, they can initiate a page editing request to the collaboration platform through the first terminal device. The specific way to initiate a page editing request is as follows: the non-developer obtains a GitLab link (containing target project and code branch information) provided by the developer, enters the GitLab link in the collaboration platform, and clicks the target virtual control (i.e., the virtual control used to indicate the start of collaborative page editing). At this time, the first terminal device responds to the click operation on the target virtual control and can initiate a page editing request for the target project to the collaboration platform based on the target project contained in the GitLab link.

[0025] Specifically, after receiving the page editing request, the collaboration platform can call its internal Git integration module to derive a collaborative code branch (i.e., a collaborative code branch that matches the main code branch) from the code repository corresponding to the target project. This collaborative code branch is specifically used to carry all code changes generated during this page editing process, thereby isolating the collaborative editing activity from the main code and avoiding direct impact on the existing project code.

[0026] Step a2: Perform compile-time injection on the source code of the collaborative code branch to generate the front-end runtime corresponding to the target project and the preview URL corresponding to the front-end runtime.

[0027] Here, after creating and generating the aforementioned collaborative code branch, the collaboration platform can pull the source code of the collaborative code branch and trigger the build process for the aforementioned front-end runtime (i.e., the front-end runtime environment) through a specific collaborative build mode (e.g., identifying the collaborative development environment configuration by using NODE_ENV=collab or through a specific build command).

[0028] Specifically, during the construction of the aforementioned front-end runtime, the collaboration platform can enable the Babel plugin as the target compilation tool. This tool performs compile-time injection into the source code of the collaborative code branch, resulting in the pre-injected source code used as the front-end runtime. After the build process is complete, the collaboration platform can start a front-end dev server or static server to generate a preview URL corresponding to the front-end runtime.

[0029] Specifically, the compile-time injection part in step a2 above can be implemented through the following steps b1-b4: Step b1: Traverse the abstract syntax tree of the source code and identify the target page elements in the source code that conform to the editable rules from the abstract syntax tree.

[0030] Here, when step b1 is executed in the collaboration platform, the platform can parse the source code using a target compilation tool to generate the corresponding Abstract Syntax Tree (AST). By traversing and analyzing the AST, page elements in the source code that conform to preset editable rules are identified (such as text nodes containing text content, container components with style attributes, interactive buttons or links, etc.). These identified page elements are the target page elements, which will subsequently become the page elements in the preview page that support collaborative editing by users through interactive operations (i.e., page elements with collaborative editing capabilities).

[0031] It should be noted that the above identification process is based on matching the node types and attribute features of the AST, which can accurately locate the page components that need to be made available for editing by non-development users without modifying the business code logic.

[0032] Step b2: Assign a collaboration identifier to the target page element, and inject the position information of the target page element in the source code into the collaboration identifier.

[0033] In step b2, for each identified target page element, the target compilation tool assigns it a globally unique collaboration identifier. Simultaneously, the tool injects the element's location information within the source code into the metadata associated with the collaboration identifier. This location information may include the relative path of the file containing the element, its starting and ending line and column numbers, and its path within the component hierarchy (i.e., the nesting relationship between the root component and the current element). By injecting collaboration identifiers and source code location information into each editable element, the system establishes a precise mapping from "visible elements on the page" to "specific locations in the source code." This ensures that every visual editing operation performed by non-developer users on the page can be accurately traced back to the corresponding source code segment, providing a reliable contextual basis for the automatic generation of code changes by the LLM model (i.e., the Large Language Model).

[0034] It should be noted that the above collaboration identifier is a globally unique identifier assigned by the system to each editable element (i.e., the target page element that conforms to the editable rules). Its data structure includes, but is not limited to: the identifier string, the file path where the element is located, the starting row and column number of the element in the file, and the path of the element in the component hierarchy.

[0035] Step b3: For the preset page elements in the target page elements, generate the wrapper component corresponding to the preset page element.

[0036] In step b3, the target compilation tool selects preset page elements from the target page elements that require interactive enhancement (e.g., component nodes that need to support click selection) and generates corresponding wrapper components (e.g., EditableElement) for these preset page elements. This wrapper component can intercept user click events on elements at runtime and receive attribute update instructions from the collaborative editor, thereby enabling collaborative functions such as element selection and temporary attribute modification. For page elements that do not require wrapping (e.g., plain text nodes), collaborative capabilities can be enabled by injecting attributes without changing their original component structure.

[0037] Step b4: Insert the import statements and registration entry code required by the front-end runtime into the source code to obtain the front-end runtime composed of the rewritten source code and the wrapper component.

[0038] In step b4, the target compiler automatically inserts dependency import statements (such as import statements for the collaborative runtime library) and registration entry code (such as code snippets that call the collaborative runtime registration interface during application initialization) required by the front-end runtime into the rewritten source code. This inserted code ensures that all marked elements are automatically and uniformly registered with the collaborative runtime when the page loads. After the above compile-time injection process, the final front-end artifact is a collaborative front-end runtime. This front-end runtime differs from ordinary build artifacts in that it includes collaborative interaction capabilities such as element selection, attribute modification, and metadata reporting. Furthermore, these capabilities are only effective in collaborative build mode and do not conflict with ordinary development builds or production builds.

[0039] Here, after completing the compile-time injection and generating the front-end runtime, the collaboration platform starts the front-end development server (dev server) or static file server, deploys the front-end runtime to an accessible network address, and generates a corresponding preview URL (Uniform Resource Locator). This preview URL is the access address used to load the preview page in the target editor later.

[0040] Step a3: Embed the front-end runtime into the target editor by loading the preview URL.

[0041] In step a3, the collaboration platform returns the generated preview URL to the target editor running on the first terminal device. The target editor loads the front-end runtime corresponding to this preview URL within the preview area of ​​its editing interface, using an iframe or other page embedding method. It should be noted that during the embedding and loading process, the wrapper components and collaboration runtime code in the front-end runtime are initialized along with the page, and all target page elements are registered during the page rendering phase, preparing the runtime environment for subsequent collaborative editing operations.

[0042] Step a4: In response to the completion of the embedding, the editing interface is displayed on the first graphical user interface.

[0043] Here, in step a4, after the preview page (i.e., the front-end runtime) is successfully loaded and embedded into the target editor, the target editor displays the complete editing interface to the user in its first graphical user interface. This editing interface can be divided into several functional areas: the central area is the preview area, used to display the preview page of the target project (i.e., the embedded front-end runtime); one side is the target panel, used to display element attributes, receive user input intent description information (Prompt), and display dialogue interactions with the large language model; the other side can be used to display a list of change requests, facilitating user management of multiple change records in the current collaborative session. At this point, non-developer users can begin visually editing the target project's pages in this editing interface.

[0044] S202, in response to a session creation operation for the editing interface, a target editing session is created.

[0045] In this embodiment, the aforementioned target editing session refers to the change session created by a non-developer user during page editing. Specifically, after the editing interface loads, the user can be provided with an operation entry point such as "Create Change" (e.g., presented as a "+" button or a "Create Change" menu item) within the editing interface of the target editor. When a non-developer user needs to modify the content in the preview page, they can trigger a session creation operation for the editing interface by clicking this operation entry point. In response to this session creation operation, the target editor creates a target editing session within the current collaborative session context.

[0046] Specifically, the target editing session can be understood as a logically independent unit for recording change requests. After the target editing session is created, the editor will automatically set the session as the currently active editing session. Thereafter, interactive editing operations performed by non-developer users on the preview page (such as element selection and attribute modification operations) will be recorded in chronological order and automatically attributed to the target editing session.

[0047] Simultaneously, the intent description information (Prompt text) entered by the user in the target panel will also be associated with the target editing session. Through this session management mechanism, the system can structurally aggregate the multi-step editing operations and text descriptions involved in a complete change request, providing an orderly and complete data input foundation for the subsequent accurate submission of change requests to the large language model for code generation.

[0048] An exemplary description, Figure 3 A schematic diagram of the editing interface of a target editor provided in an embodiment of this application is shown, such as... Figure 3As shown, the editing interface 300 of the target editor displays a preview page 302, a target panel 303, and a task operation page 310 for triggering the creation of an editing session. The task operation page 310 includes an operation entry 301 for triggering the creation of an editing session. When the user clicks the operation entry 301, the target editing session can be created to record all editing operations and input information during the current page editing process.

[0049] Here, regarding the aforementioned target editing session and the aforementioned collaboration session, it should be noted that: the aforementioned target editing session is a logically independent change request unit within the collaboration session, used to aggregate a complete page editing operation and related intent description information; while the aforementioned collaboration session is a logical unit that identifies the entire page collaborative editing task, and may contain one or more target editing sessions.

[0050] S203, in response to an editing operation on the preview page, generate a page editing instruction matching the editing operation, and assign the page editing instruction to the target editing session.

[0051] In this embodiment, when a non-developer performs editing operations on an embedded preview page within the preview area of ​​the target editor, the system needs to convert these visual interactive behaviors into structured page editing instructions and associate them with the currently active target editing session. Specifically, generating page editing instructions matching the editing operation in response to the preview page can be achieved through the following steps c1-c4: Step c1: In response to an editing operation on a first page element in the preview page, the editing event on the first page element is intercepted by the wrapping component corresponding to the first page element; wherein, the first page element belongs to the preset page element.

[0052] In step c1, non-developer users can initiate editing operations on a page element displayed on the preview page through mouse clicks, touch clicks, or other interactive methods. For ease of description, the page element being edited is referred to as the first page element. This first page element is one of the preset page elements determined by the target compilation tool in step S101 above, which has been assigned a collaboration identifier and generated a corresponding wrapper component during compilation. When the user's click or other interactive behavior acts on the first page element, the corresponding wrapper component (such as EditableElement) intercepts the element editing event triggered by the interactive behavior at runtime, preventing it from continuing to propagate to the original business logic, thereby switching the interactive behavior from "normal page browsing" to "collaborative selection" mode. Through this wrapper component interception mechanism, the system can redefine the user's click operation as an element editing event of the page element without interfering with the original business code logic.

[0053] Step c2: Report an editing event carrying a first collaboration identifier to the target editor through the packaging component; wherein the first collaboration identifier represents the collaboration identifier assigned to the first page element.

[0054] In step c2, after intercepting the user's edit event on the first page element, the wrapper component calls the reporting interface provided by the front-end runtime to send a structured edit event message to the target editor. This edit event message carries a first collaboration identifier, which is a unique collaboration identifier assigned to the first page element at compile time. Since this collaboration identifier contains location metadata such as the file path, row and column number, and component hierarchy path of the first page element in the source code, by reporting this collaboration identifier, the target editor can accurately know which specific element in the source code the user has currently selected. It should be noted that this reporting process can be completed through a real-time communication channel between the target editor and the preview page (e.g., a TLS-based WebSocket connection), and the specific communication method can be flexibly selected according to the system architecture.

[0055] Step c3: Using the target editor, highlight the first page element in the preview page and display the attribute information of the first page element in the editing interface.

[0056] In step c3, after receiving the edit event carrying the first collaboration identifier, the target editor performs two aspects of response processing. Firstly, the target editor sends a highlight instruction to the preview page, visually selecting the first page element. This can be achieved by adding a highlight border, changing the background color, or displaying a selection box, allowing non-developer users to intuitively confirm the position and scope of the currently selected element. Secondly, the target editor parses the metadata carried in the first collaboration identifier to obtain the current attribute information of the first page element (such as text content, font size, color value, spacing parameters, image address, and other style and content attributes), and displays this attribute information in the target panel of the editing interface. By displaying the attribute information, non-developer users can clearly understand all the editable attributes of the currently selected element without viewing the source code, providing a visual reference for subsequent attribute modification operations.

[0057] Step c4: In response to the modification operation on the attribute information, generate an attribute information modification instruction that matches the modification operation as the page editing instruction.

[0058] In step c4, after non-developer users view the attribute information of the first page element in the target panel, they can modify one or more of the attributes, such as changing text content, adjusting font size, changing color values, and modifying margin parameters. The target editor responds to the user's modification of the attribute information by generating a corresponding attribute modification instruction. This instruction records the attribute difference before and after modification (i.e., a comparison of the old and new values), the identifier of the modified attribute, and the corresponding first collaboration identifier. Simultaneously, the target editor treats this attribute modification instruction as a page editing instruction and automatically assigns it to the currently active target editing session. Furthermore, the target editor also sends this attribute modification instruction to the preview page via a real-time communication channel. The front-end runtime locates the corresponding first page element based on the collaboration identifier and immediately applies the temporary attribute modification without refreshing the entire page, allowing the preview page to display the modified effect in real time. This "what you see is what you get" instant feedback mechanism allows non-developer users to continuously observe page changes during the editing process, ensuring that every modification meets expectations.

[0059] Through steps c1-c4 above, this embodiment of the application transforms the user's visual editing operations on the preview page into structured page editing instructions, and systematically aggregates these instructions into the corresponding target editing sessions. Each page editing instruction not only records the user's specific modifications but also precisely links to a specific location in the source code through collaboration identifiers, providing a complete and traceable data foundation for subsequent large language model analysis of change intent and generation of accurate code changes.

[0060] S204, in response to a text input operation on the target panel, generate intent description information matching the text input operation, and assign the intent description information to the target editing session.

[0061] In this embodiment, the target panel is the change panel or dialogic interface provided to the user in the collaborative editor. Functionally, it serves as an interactive channel for users to communicate their intentions and supplement information with the collaborative platform (especially with the large language model). After the user completes the selection of elements and the visual modification of attributes on the preview page in step S103, although these operations have been accurately recorded as structured page editing instructions, for some complex modification intentions, business constraints, or expected visual effects, the attribute difference record alone may not be sufficient to fully convey the user's entire idea. Therefore, the system provides users with the ability to supplement the change description with natural language through the target panel.

[0062] Specifically, the target panel can provide text input boxes or conversational message input areas. When non-developer users want to supplement their explanations of changes required in the current target editing session, they can enter text content in natural language (i.e., Prompt or intent description text) in the target panel. For example, users can enter intent description information such as "Adjust the button color to a blue consistent with the homepage's main color scheme, while maintaining the rounded corner style," "This prompt text needs to be more user-friendly, while ensuring the font size on mobile devices is no less than 14px," and "Adjust the spacing of this area based on the homepage banner style." This text content can cover various types of supplementary information, including explanations of modification intent, business rule constraints, style reference guidelines, and descriptions of expected effects.

[0063] It's important to note that the text input operations in the target panel and the editing operations on the preview page can have a flexible temporal relationship. In one scenario, a user can first select an element and modify several attributes on the preview page, then input text in the target panel to further explain their intended changes. In this case, the text input and visual editing together constitute a complete change request. In another scenario, a user can first describe a complete change request in text, then refine it using visual operations on the page; or even express their desired changes directly through text description without performing any visual editing. The target editor supports all these different operation sequences and combinations, providing users with a flexible and convenient way to express change requests.

[0064] When a non-developer enters text in the target panel and performs a confirmation or save operation (e.g., clicking the "Save Changes" button), the target editor responds to this text input operation by generating intent description information that matches the entered text content and structurally assigns this intent description information to the currently active target editing session. At this point, the target editing session not only contains the various page editing instructions generated in the preceding steps (such as attribute modification instructions) but also the intent description information entered by the user through text. By unifying visual operation records and natural language semantic descriptions into a single change request, the system provides the large language model with a comprehensive input that includes both precise structured editing data and natural language semantic guidance. This allows the large language model to more comprehensively and accurately understand the user's true modification intent during subsequent code generation, thereby generating target code that better meets business expectations. Simultaneously, the intent description information assigned to the target editing session can also serve as the contextual basis for subsequent conversational interactions, supporting multiple rounds of communication and iterative corrections by the user during the code generation process.

[0065] S205, in response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model, the target code matching the target editing session is generated through the large language model, and the preview page is updated according to the target code.

[0066] In this embodiment of the application, when a non-developer user has completed the visual editing operation of the preview page and supplemented the intent description information through the target panel in the aforementioned steps, if the user believes that the change requirements in the current target editing session have been fully expressed, the code generation process can be triggered through the confirmation operation entry in the target editor (e.g., clicking the "Submit to Generate Code" button).

[0067] Specifically, in response to a confirmation operation for a target editing session, the target editor first structures and organizes all page editing instructions and intent descriptions collected within that target editing session. The page editing instructions include detailed records of the user's attribute modifications to various page elements on the preview page, such as a comparison of attribute values ​​before and after modification, identifiers of the modified attributes, and collaboration identifiers for the corresponding page elements. The intent descriptions are natural language text entered by the user through the target panel to explain the modification intent, constraints, or expected results.

[0068] Subsequently, based on the collaboration identifier carried in the page editing instructions, the collaboration platform retrieves the specific location information of each modified page element in the source code from the metadata mapping table injected during compilation. This includes the relative path of the file, the starting line number, and the column number. Based on this location information, the collaboration platform extracts source code fragments related to the current change requirements from the source code repository corresponding to the collaboration code branch (such as the component code block where the modified element is located, related style definition file fragments, etc.), serving as an important reference for the large language model to understand the code context.

[0069] After completing the above data preparation, the collaboration platform uses the following information as input to the large language model: structured page editing instructions (to accurately describe the specific editing operations performed by the user on the preview page), natural language intent description information (to supplement the description of the user's editing intent on the preview page), and source code snippets and page metadata related to this page editing, providing the original context of the code implementation. This combination of multi-dimensional information enables the large language model to comprehensively understand change requirements from three levels: precise change records, user semantic expression, and existing code implementation.

[0070] After receiving the input information, the large language model analyzes and processes it to generate target code that matches the target editing session. This target code can be a modification of the attribute value of a component in the source code, a style adjustment, or a text content replacement. It can also be a structural adjustment based on user intent, such as a component layout change or a fine-tuning of logic. In this process, the large language model can fully leverage its code understanding and generation capabilities to translate the user's page-level operation intent into substantial code changes that conform to project code standards and contextual information.

[0071] After generating the target code, the collaboration platform applies it to the collaborative build environment. Specific application methods may include: pushing the target code as a hot-update module to the running front-end runtime, or writing the changes to the source code file and triggering incremental compilation on the front-end development server, allowing the preview service to obtain the latest page rendering result containing the code changes. Subsequently, the preview service automatically refreshes or partially updates the preview page embedded in the target editor, enabling non-developer users to immediately see the latest page effect rendered by the code generated based on the large language model in the editing interface.

[0072] Through the above steps, this embodiment of the application achieves a complete closed loop from "user visual editing on the page" to "automatic code generation by the large language model" and then to "real-time page update feedback." Non-development users do not need to write any code; they can modify the page and intuitively see the actual effect after the code implementation simply by directly operating on the preview page and using natural language descriptions. Meanwhile, because the large language model fully considers the source code context and user intent descriptions when generating code, the generated target code has high accuracy and usability, effectively reducing the workload of subsequent developer corrections and significantly improving the efficiency of collaborative page editing. If users still have adjustments needed to the generated page effect, they can continue to communicate and correct with the large language model through the target panel in a dialog-based manner, forming an iterative collaborative editing experience.

[0073] Specifically, once non-developer users are satisfied with the edited preview page, they can send the corresponding code changes to the developer side for code review via the collaboration platform using the following steps d1-d2: Step d1: In response to the code commit operation for the target panel, the target code is written into the collaborative code branch in the form of a commit, resulting in the updated collaborative code branch.

[0074] In this embodiment, once a non-developer confirms in the target editor that the code changes generated by the large language model meet the requirements (i.e., the generation of the target code and the update confirmation of the preview page are completed through the aforementioned step S205), the edited result can be officially submitted to the code repository. Specifically, the target editor's target panel can provide a code submission operation entry (e.g., "Submit Code" or "Merge Code" buttons). When the user clicks this operation entry, the target editor sends a code submission request to the collaboration platform.

[0075] After receiving the code commit request, the collaboration platform invokes its internal Git integration module to write the target code generated by the large language model corresponding to the current target editing session into the collaborative code branch created in step S101, in the form of one or more commits. This commit operation may include automatically generated commit information, such as change notes generated based on user intent descriptions and page editing instruction summaries, to facilitate understanding of the purpose and content of this commit during subsequent code reviews. After successful commit, the collaborative code branch contains all code changes generated during this collaborative editing session; this branch is the updated collaborative code branch.

[0076] It's important to note that the code commit operation described above can be performed not only on a single target editing session, but also allows users to commit multiple change requests corresponding to multiple target editing sessions together, merging them into one or more commits and writing them to a collaborative code branch. This flexible commit strategy allows non-developer users to independently decide the timing and granularity of code commits based on the actual editing progress and the relevance of requirements.

[0077] Step d2: Create a code merge request for the updated collaborative code branch and the main code branch, and assign the code merge request to the development side node for review.

[0078] After the target code is successfully written to the collaborative code branch, the collaboration platform automatically creates a merge request (MR) for the updated collaborative code branch and the main code branch through the Git integration module, based on the interface provided by the code hosting platform (such as GitLab). This merge request is a standard request object used for code change review and merging in the code hosting platform. It contains all code differences between the collaborative code branch and the main code branch, commit history, and associated change description information.

[0079] When creating a code merge request, the collaboration platform can automatically populate the description of the merge request with information such as the intent description from the target editing session, the summary of page editing instructions, and the code generation instructions of the large language model. This allows developers to fully understand the background, intent, and specific content of the change during the review process, reducing information asymmetry.

[0080] Subsequently, the collaboration platform assigns the code merge request to a development-side node for review. This development-side node refers to the terminal device used by the developer or their account on the code hosting platform. Assignment methods may include: assigning the merge request to a pre-defined code reviewer, notifying the project maintainer, or sending a review reminder to relevant developers via instant messaging. Upon receiving the code merge request, the developer can review the automatically generated code changes according to the existing code review process, including checking code quality, assessing the impact of the changes on existing functionality, and conducting necessary testing and verification.

[0081] If developers find issues with code changes or require further adjustments during the review process, they can submit feedback through the code merge request's comment function. Non-developers can then use this feedback to continue interacting with the collaboration platform and the large language model in the target editor to optimize the code. If the review is approved, developers can merge the code merge request into the main code branch, completing the full loop from requirement initiation to code implementation for this page edit.

[0082] By incorporating collaborative changes into the standard code review process, this embodiment of the application enables non-developer users to efficiently edit code on their own, while ensuring that automatically generated code changes are always under the review and control of professional developers, effectively avoiding code quality degradation or project architecture risks. Furthermore, this solution leverages the existing branch management and merge request capabilities of the code hosting platform, eliminating the need for a new deployment and release system, thus facilitating smooth implementation and widespread adoption in large-scale projects.

[0083] Specifically, if non-developer users are not satisfied with the edits made to the preview page, they can continue to modify the code corresponding to the preview page by instructing the large language model through the target panel, as shown in steps e1-e4 below: Step e1: In response to the preview page completing the update, a prompt message about the update completion is displayed on the target panel.

[0084] In this embodiment, after the large language model generates the target code and updates the preview page in step S205, the target editor will display a notification message indicating that the update is complete in the target panel. This notification message may include a status indicator indicating successful code generation, a list of files involved in the modification, a brief summary of the changes, and confirmation that the current preview page has been updated to the latest state. By proactively presenting the update completion status feedback in the target panel, the system can help non-developer users clearly understand the results of code generation and application, avoiding user confusion about whether the content presented on the current preview page reflects the latest modifications.

[0085] Step e2: In response to an input operation on the target panel, generate text description information matching the input operation and input the text description information into the large language model.

[0086] When non-development users view the updated preview page, they may find that the style, layout, or text of the page still differs from the expected effect, or they may have new ideas for modification. At this time, users do not need to recreate the target editing session or start visual editing from scratch. Instead, they can directly input their modification requirements or supplementary explanations for the current page effect in natural language within the current target panel. This input operation is consistent with the method of supplementing intent description information in step S204 above, and can be text input in the text input box or dialog input area of ​​the target panel.

[0087] The target editor responds to the input by generating a text description that matches the input (i.e., a natural language description of the user's new modification request) and sends this text description to the collaboration platform. The collaboration platform then inputs this text description, along with the context history of the current session (including previously generated page editing instructions, intent descriptions, and applied target code), into the large language model. This input method, carrying session context, allows the large language model to understand that the user's current modification request is a further adjustment based on existing changes, rather than a completely new, independent change request. This facilitates the generation of coherent code consistent with previous modification logic.

[0088] Step e3: Modify the target code according to the text description information using the large language model to generate modified code that matches the text description information.

[0089] After receiving the aforementioned text description information and conversation context, the large language model analyzes the user's modification requirements and, based on this, incrementally modifies and adjusts the previously generated target code. Unlike the method of generating target code from scratch in step S205, the focus of the large language model at this stage is on "secondary modification based on existing code changes." That is, while retaining the previously generated code change logic, the model makes targeted adjustments, optimizations, or extensions to the code according to the user's newly proposed text description information.

[0090] For example, if a user requested "change the button color to blue" in the previous round, but found the blue color didn't match the background well after the update, they could enter "change the button color to dark blue and add a hover effect" in the target panel. The large language model will then further adjust the color value to dark blue based on the previous code that changed the button color to blue, and add style definitions for the hover state, ultimately generating change code that matches the current text description. This incremental modification method avoids redundant calculations of existing code changes and better maintains the continuity and traceability of code changes.

[0091] Step e4: Update the preview page according to the change code.

[0092] After generating the change code, the collaboration platform uses the same application method as in step S205 above to push the change code to the running front-end runtime, or write it into the source code file and trigger incremental compilation, so that the preview service can obtain the page rendering result containing the latest modifications. Subsequently, the preview service automatically updates the preview page embedded in the target editor, allowing non-developer users to immediately see the page effect modified according to the new requirements.

[0093] Through the above steps, this embodiment of the application establishes a conversational interaction mechanism between the target editor and the LLM. When non-developer users are dissatisfied with the generated page effect or need further adjustments, they do not need to initiate a new session or re-execute visual editing operations. Instead, they can directly communicate and iteratively correct through the target panel using natural language and a large language model. After each conversation, the system automatically completes a closed loop of "understanding user intent → modifying code → updating preview." Users can continuously observe the modification effects and continue to raise adjustment requests until the page effect reaches a satisfactory state. This conversational iterative collaborative editing mode significantly reduces the operational threshold and communication costs for non-developer users to fine-tune the page effect, while effectively improving the overall efficiency of page editing and the quality of the final result.

[0094] On the collaboration platform side, after injecting the source code of the aforementioned collaboration code branch during compilation, the platform can also generate QR code information to support mobile devices in scanning and previewing the aforementioned preview page, as shown in steps f1-f4 below. This allows non-development users, in addition to the aforementioned first terminal device, to view the actual page effect of the preview page in real time using their own mobile devices. Specifically: Step f1: Generate a preview QR code corresponding to the front-end runtime, and classify the preview QR code, the collaborative code branch, and the preview URL into the same collaborative session; wherein, the collaborative session is used to identify the page collaborative editing task corresponding to the page editing request.

[0095] In this embodiment, after the collaboration platform completes the compile-time injection of the collaborative code branch source code and generates the front-end runtime and its corresponding preview URL, in order to support non-development users to view and confirm the page editing effect on different types of terminal devices (especially to verify the responsive layout and mobile interaction performance of the page on real mobile devices), the collaboration platform further generates a corresponding preview QR code for the front-end runtime.

[0096] Specifically, the collaboration platform encodes the preview URL into a QR code image. This QR code contains the necessary information for accessing the collaboration session, including the session identifier (sessionId) and the preview URL itself. This collaboration session is a logical identifier unit used to uniformly associate the collaborative code branches, preview URLs, front-end runtime, generated preview QR codes, and subsequent accessing terminal devices involved in a single page collaborative editing task. By grouping the preview QR code, collaborative code branches, and preview URLs into the same collaboration session, the system ensures that different terminal devices, after scanning the code to access the same editing task, can access the same set of code build artifacts, thus guaranteeing the consistency of the pages seen by each terminal.

[0097] Step f2: Display the preview QR code on the first graphical user interface.

[0098] After generating the preview QR code, the target editor displays it to the user on its primary graphical user interface. The display location can be the toolbar area of ​​the editing interface, a specific area of ​​the target panel, or a pop-up window. Non-developer users can scan the displayed preview QR code using their mobile devices (such as smartphones).

[0099] Step f3: Scan the preview QR code using the second terminal device, parse the session identifier corresponding to the collaborative session from the scanned QR code information, and establish a first communication channel with the second terminal device based on the session identifier.

[0100] In this step, the second terminal device is the mobile terminal device used by the non-developer user, which can be a smartphone, tablet, or other mobile device with QR code scanning capabilities. The second terminal device scans the preview QR code displayed on the first graphical user interface through a browser application or an application with an embedded WebView installed on its own device.

[0101] After a successful scan, the second terminal device parses the session identifier and preview URL corresponding to the collaborative session from the information contained in the QR code. Based on the parsed session identifier, the second terminal device initiates a connection request to the collaborative platform. The collaborative platform includes the second terminal device in the corresponding collaborative session based on the session identifier and establishes a first communication channel between the collaborative platform and the second terminal device. This first communication channel can be a TLS-based WebSocket long connection or other protocol channels that support real-time bidirectional communication. Through this first communication channel, the collaborative platform can perform real-time message routing and data forwarding between the first terminal device (running the target editor) and the second terminal device (running the mobile preview).

[0102] Step f4: Display a first preview page on the second graphical user interface of the second terminal device through the first communication channel; wherein the first preview page is synchronized with the preview page displayed on the first graphical user interface.

[0103] After the first communication channel is successfully established, the second terminal device initiates a page loading request to its built-in browser or WebView component based on the preview URL parsed from the QR code, obtains and displays the page corresponding to the front-end runtime on the second graphical user interface, namely the first preview page.

[0104] It's important to note that the first preview page and the preview page displayed in the target editor on the first graphical user interface essentially load the same set of front-end runtime code. Therefore, their page content and structure are identical upon initial loading. More importantly, when both are active simultaneously, the collaboration platform uses the established real-time communication channel to synchronously reflect editing operations performed on the first terminal device (such as attribute modifications and style adjustments) onto the first preview page on the second terminal device. This ensures that the page effect seen by the user on the mobile device remains synchronized with the preview in the desktop editor. Similarly, interactive feedback from the mobile device can also be synchronously transmitted back. This synchronization mechanism allows non-developer users to easily perform editing operations in the desktop editor while simultaneously viewing the page effect on a real mobile device, thus providing a more comprehensive evaluation of the page's performance across multiple terminals. The specific synchronization and switching mechanisms will be discussed in more detail in subsequent steps.

[0105] In this embodiment of the application, in order to simplify state management and reduce page synchronization costs, the system can also adopt a single-instance preview strategy within the same collaborative session, that is, only one active preview end is maintained at any time, and the system switches between the embedded preview on the desktop and the QR code preview on the mobile end through a preemption mechanism.

[0106] Based on the above single-instance preview strategy, after the second terminal device takes over the preview of the preview page, the system can also hide and display the preview page in the editing interface on the first graphical user interface.

[0107] In this embodiment, when the second terminal device (i.e., the mobile terminal device) successfully joins the collaboration session by scanning the preview QR code and begins displaying the first preview page on its second graphical user interface, the session state management module within the collaboration platform switches the active preview endpoint marker for this collaboration session from the first terminal device to the second terminal device. Here, the active preview endpoint refers to the currently unique preview instance within the same collaboration session that receives editor control commands and maintains state synchronization.

[0108] Specifically, once the second terminal device successfully connects and declares itself to the collaboration platform as ready, the collaboration platform sends a session state change notification to the target editor running on the first terminal device, informing it that the activity preview has been switched to the second terminal device. Upon receiving this notification, the target editor automatically performs two response actions: firstly, it hides the preview page that was originally embedded and displayed via iframe or similar methods within the editing interface on the first graphical user interface, for example, by setting the iframe element in the preview area to invisible or collapsed; secondly, it stops issuing any subsequent structured control commands (such as element selection commands, attribute modification commands, page navigation commands, etc.) to the hidden preview page instance.

[0109] Through the aforementioned hidden processing and command suspension mechanism, this embodiment of the application ensures that when a mobile device accesses the system, the system maintains only the second terminal device as the sole active preview instance for the collaborative session. This guarantees that the page effect seen by the user on the mobile device remains precisely consistent with the editor's command state, avoiding potential state conflicts and synchronization complexity that may occur when multiple preview endpoints exist simultaneously. This single-instance preview strategy enables the system to support multi-terminal preview capabilities on both desktop and mobile devices while significantly simplifying the preview state management logic and reducing inconsistencies that may be introduced by multi-terminal synchronization.

[0110] Furthermore, when the second terminal device disconnects from the collaboration platform due to reasons such as the user closing the page, network abnormality, or heartbeat timeout, the system can also restore the display of the preview page in the editing interface on the first graphical user interface in response to the disconnection of the first communication channel; wherein, the page content of the restored preview page is determined according to the page content of the first preview page before the first communication channel was disconnected.

[0111] In this embodiment, the disconnection of the first communication channel may be caused by various reasons, such as the user of the second terminal device actively closing the preview page of the mobile browser, the network connection of the mobile device being interrupted, or the heartbeat detection between the collaboration platform and the second terminal device timeout. When any of the above situations occur, the first communication channel between the collaboration platform and the second terminal device will enter a disconnected state.

[0112] After the collaboration platform's session state management module detects that the first communication channel has been disconnected, it confirms that the current active preview client (i.e., the second terminal device) for the collaboration session is no longer available. At this time, the collaboration platform will reset the active preview client state of the collaboration session, reverting the active preview client marker from the second terminal device back to the first terminal device. Subsequently, the collaboration platform sends a session state recovery notification to the target editor running on the first terminal device.

[0113] Upon receiving the notification, the target editor restores the previously hidden preview page within the editing interface of the first graphical user interface (e.g., redisplaying the iframe containing the embedded preview area). It's important to note that during the hiding period, although the target editor ceases issuing control commands to the hidden preview page instance, the collaboration platform records and saves all page state changes generated or applied on the second terminal device during this time (e.g., user-triggered interactions on the mobile device, page scroll position, changes in page state variables, and all code changes previously issued by the editor, generated by the large language model, and applied to the first preview page on the mobile device). When the target editor restores the preview page, the collaboration platform synchronizes this latest page state information from the first preview page on the second terminal device before the first communication channel was disconnected to the restored preview page instance on the first terminal device. This ensures that the preview page content seen by non-developer users on the first terminal device accurately reflects the latest state of the first preview page on the mobile device before the disconnection.

[0114] This automatic rollback and state synchronization mechanism allows users to seamlessly continue viewing and editing the page in the desktop editor after the mobile preview ends (whether actively closed or accidentally disconnected), without the need for manual refresh or re-operation, ensuring the continuity and smoothness of the collaborative editing experience. At the same time, by maintaining only one logical instance of the active preview, the system effectively reduces the implementation complexity and potential consistency maintenance costs of multi-device preview state synchronization.

[0115] Furthermore, under the aforementioned single-instance preview strategy, when a new mobile device (i.e., a third terminal device) preempts the second terminal device's preview of the preview page, the system can resolve the issue of the new device preempting the old preview using the methods shown in steps g1-d2 below: Step g1: In response to the third terminal device accessing the collaborative session via the preview QR code, the first communication channel with the second terminal device is disconnected, and a second communication channel is established with the third terminal device.

[0116] In this embodiment of the application, the aforementioned third terminal device refers to another new mobile terminal device (such as another collaborating user's mobile phone, or another mobile device changed by the same user) attempting to access the collaborative session by scanning the same preview QR code generated in the aforementioned steps, when the second terminal device is already connected as the active preview end of the current collaborative session.

[0117] Specifically, when a third-party terminal device scans the preview QR code, parses the session identifier corresponding to the collaborative session, and initiates an access request to the collaborative platform, the platform detects that an active preview endpoint (i.e., the second terminal device) already exists for that collaborative session. According to the single-instance preview strategy adopted by this system, only one active preview endpoint is allowed to exist in the same collaborative session at any given time to avoid state synchronization conflicts and management complexity caused by multiple preview endpoints existing simultaneously. Therefore, after confirming that the third-party terminal device is a legitimate access device, the collaborative platform will perform a preemptive handover process.

[0118] The preemptive switching process involves the collaboration platform first proactively disconnecting the established first communication channel with the second terminal device (e.g., proactively closing the WebSocket connection with the second terminal device), causing the second terminal device to exit the active preview client role in the current collaboration session. Subsequently, the collaboration platform establishes a new second communication channel with the third terminal device and updates the active preview client marker for the collaboration session to the third terminal device. Through this preemptive mechanism, the system ensures that at most one mobile preview instance is active at any given time, effectively avoiding potential issues such as ambiguous command distribution and inconsistent page states when multiple devices coexist.

[0119] Step g2: Display a second preview page on the third graphical user interface of the third terminal device through the second communication channel; wherein the second preview page is synchronized with the preview page displayed on the first graphical user interface.

[0120] After the second communication channel is successfully established, the third terminal device initiates a page loading request to its built-in browser or WebView component based on the preview URL parsed from the QR code. It then retrieves the corresponding page from the front-end runtime and displays it on its third graphical user interface—the second preview page. Since the active preview client of the collaboration session has now switched to the third terminal device, the collaboration platform routes all structured control commands (such as element selection commands and attribute modification commands) issued by the target editor to the third terminal device through the second communication channel. The third terminal device then executes the corresponding page updates on the second preview page, ensuring that the second preview page remains synchronized with the page state maintained by the target editor on the first graphical user interface.

[0121] It should be further noted that during the process of a third terminal device connecting and replacing the second terminal device, the preview page displayed in the target editor on the first graphical user interface (if previously hidden due to the connection of the second terminal device) remains hidden and will not be restored due to the switching of the active preview client between mobile devices. Only after all mobile preview devices have disconnected will the preview page in the desktop editor be restored according to the aforementioned fallback mechanism. This design ensures that the role of the active preview client remains clear and unambiguous throughout the entire collaborative editing process, and the maintenance logic for the preview state is simple and reliable.

[0122] Here, while both the desktop (i.e., the first terminal device) and the mobile (i.e., the second terminal device) are communicating with the collaboration platform, based on the methods shown in steps h1-h3 below, the user can continue to edit the preview page on the desktop side. Simultaneously, based on the single-instance preview strategy, after the user edits the preview page, the system can synchronously update the preview page displayed on the second terminal device side. Specifically: Step h1: In response to detecting an editing operation for the preview page in the target editor, generate a structured control instruction that matches the editing operation.

[0123] In this embodiment, when a non-developer performs editing operations on the preview page within the target editor of the first terminal device (e.g., clicking to select a page element on the preview page, modifying the text content of a page element displayed in the target panel, adjusting the style attributes of a page element, or triggering page navigation), the target editor will detect and capture these editing operations. It should be noted that these editing operations are not directly generated by the user on the first preview page of the second terminal device, but rather by the user manipulating the preview page or modifying attribute information in the target panel within the target editor's UI.

[0124] After detecting the aforementioned editing operation, the target editor encapsulates the specific content and intent of the operation into a structured control instruction. This structured control instruction has a predefined instruction format, which may include the following information: an instruction type identifier (used to distinguish whether it is an element selection instruction, a text modification instruction, a style adjustment instruction, or a page jump instruction, etc.), a collaboration identifier for the target page element (i.e., a unique collaboration identifier injected at compile time, used to accurately locate the target element in the preview page), and specific operation parameters (such as the modified attribute name and value, the adjusted style parameters, the target jump path, etc.). By encapsulating the editing operation into a structured control instruction, the system ensures that the instruction can be accurately parsed and executed when transmitted across devices, avoiding execution deviations caused by differences in data types or inconsistent transmission formats.

[0125] Step h2: Send the structured control command to the second terminal device through the first communication channel.

[0126] After generating the structured control instructions, the target editor relays these instructions through the collaboration platform and sends them to the second terminal device via the previously established first communication channel (i.e., the real-time communication connection between the collaboration platform and the second terminal device). Specifically, the sending process can be as follows: the first terminal device sends the structured control instructions to the collaboration platform, which then routes the instructions to the second terminal device based on the active preview endpoint identifier of the current collaboration session. Since the second terminal device has already connected via QR code and is acting as the active preview endpoint for the current collaboration session, the collaboration platform can accurately deliver the instructions to the target device. The first communication channel, established as a long-lived connection channel based on TLS-based WebSocket or other real-time communication protocols, ensures low latency and reliability in instruction transmission, allowing user actions in the editor to be reflected almost in real-time on the mobile preview page.

[0127] Step h3: Update the first preview page using the second terminal device according to the received structured control instructions.

[0128] After receiving the structured control command through the first communication channel, the second terminal device's locally running front-end runtime (i.e., the front-end runtime code corresponding to the first preview page) parses the command. Based on the collaboration identifier carried in the command, the front-end runtime locates the corresponding target page element in its own runtime registry. Subsequently, according to the operation parameters carried in the command, it performs partial updates to the target page element without refreshing the entire page, such as replacing text content, modifying CSS style properties, changing component states, or executing page route jumps. Because the update is executed directly in the local runtime environment without reloading the entire page, the update process is fast and smooth, achieving a synchronous experience where "editing operations are performed on the desktop, and page effects are instantly presented on the mobile device."

[0129] Through the aforementioned command issuance and synchronous execution mechanism, non-developer users can perform various page editing operations in the desktop editor on the first terminal device, while the mobile preview page on the second terminal device can respond instantly and display the actual mobile page effect after editing. This cross-device real-time synchronization capability allows users to conveniently utilize the advantages of large-screen editing on the desktop for precise operations, while intuitively verifying the mobile presentation effect of the page on a real mobile device, effectively improving the efficiency and experience of multi-terminal page collaborative editing.

[0130] Here, while both the desktop (i.e., the first terminal device) and the mobile (i.e., the second terminal device) are communicating with the collaboration platform simultaneously, based on the methods shown in steps i1-i3 below, the user can continue to edit the preview page on the mobile device. Simultaneously, based on the single-instance preview strategy, after the user edits the preview page, the system can synchronously update the preview page displayed on the first terminal device. Specifically: Step i1: In response to detecting a change in the page state of the first preview page, the target event used to indicate the change in the page state of the first preview page is encapsulated as structured information.

[0131] In this embodiment, when the first preview page on the second terminal device is in an active display state, its page state may change in various ways due to user interaction or the page's own operating logic. These page state changes may include, but are not limited to: the user clicking a page element on the first preview page on the mobile device via touch operation; the user scrolling on the first preview page causing a change in the visible area of ​​the page; the state of components within the page being updated due to animation or timer triggers; and layout reordering being triggered after the page completes asynchronous loading of specific resources. When the front-end runtime of the second terminal device detects any of the above page state changes, it will determine the corresponding event that triggered the change as the target event.

[0132] Subsequently, the front-end runtime of the second terminal device encapsulates the target event into structured information with a predefined format. This structured information may include the following: an event type identifier (used to distinguish different types such as element selection events, page scrolling events, component state change events, and page lifecycle events), a collaboration identifier of the page element that triggered the event (if the event is associated with a page element whose collaboration identifier is injected at compile time, such as when a user clicks on an element), and state parameters or context data related to the event (such as the page offset after scrolling, the current display state of the element, the current routing path of the page, etc.). By encapsulating the page state change event into structured information, the system ensures the integrity and parsability of the event during cross-device transmission.

[0133] Step i2: Send the structured information to the first terminal device through the first communication channel.

[0134] After the target event is encapsulated into structured information, the second terminal device sends this structured information to the first terminal device via the collaboration platform through the previously established first communication channel. The specific sending path is as follows: the second terminal device sends the structured information to the collaboration platform, and the collaboration platform routes the information to the first terminal device running the target editor based on the session identifier of the current collaboration session. Since the first communication channel is a bidirectional long-connection channel established based on a real-time communication protocol (such as WebSocket), the event reporting process can be completed with low latency, ensuring that the first terminal device can obtain near real-time information about the state changes occurring on the first preview page on the second terminal device.

[0135] Step i3: Update the editing interface using the first terminal device according to the received structured information.

[0136] After receiving the structured information through the collaboration platform, the target editor on the first terminal device parses the structured information, identifies the event types and related parameters carried in it, and updates the editing interface accordingly based on the parsing results.

[0137] Specific update processes can include the following aspects: First, regarding the synchronous update of element selection status, if a user selects a page element through touch operation on the first preview page of the second terminal device, after the second terminal device encapsulates and reports the element selection event, the target editor on the first terminal device will synchronously update the element's selection status within the editing interface. This could involve displaying the selected element's attribute information in the target panel, highlighting it at the corresponding position on the preview page, etc., ensuring consistency between the selection status of the desktop editor and the mobile preview. Second, regarding page context positioning, if the structured information carries information related to the page scroll position or the current visible area, the target editor can adjust the view positioning of the preview area in the editing interface based on this information, or record the current browsing context of the mobile device in the collaboration session for reference in subsequent change logs and code generation. Furthermore, regarding collaboration process recording, the target editor can store the received structured information as part of the collaboration process data for reference when analyzing user interaction behavior using a large language model, or add contextual descriptions related to user interaction to the change request list.

[0138] Through the aforementioned event reporting and synchronization update mechanism, this embodiment of the application realizes a reverse information transmission channel from the mobile preview page to the desktop editor. Combined with the forward channel of "the editor sending control commands to the preview terminal" in the previous steps, the two together form a two-way real-time communication closed loop between the editor and the active preview terminal. This two-way communication capability allows non-developer users to operate in the desktop editor and see the effects in real time on the mobile terminal, as well as interact on the mobile terminal and feed the interaction results back to the desktop editor, thereby obtaining a more complete and convenient multi-terminal collaborative editing experience.

[0139] Based on the page editing method provided in this application embodiment, without changing the existing front-end engineering technology stack and code repository structure, a target editor with collaborative editing capabilities can be provided for non-development users without development experience. This allows the editing operations performed by non-development users on the preview page within the target editor to be converted into input data for a large language model. The large language model outputs target code that matches the editing operations, and updates the preview page displayed in the target editor based on the target code. This enables non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative editing of the preview page.

[0140] Based on the same inventive concept, this application also provides a page editing system corresponding to the above-described page editing method. Since the principle of the page editing system in this application is similar to that of the page editing method in this application, the implementation of the page editing system can refer to the implementation of the above-described page editing method, and the repeated parts will not be described again.

[0141] Reference Figure 1 As shown, Figure 1 The diagram illustrates a structural schematic of a page editing system provided in an embodiment of this application. The page editing system includes: a collaboration platform and at least one terminal device that establishes a communication connection with the collaboration platform. The first terminal device among the terminal devices is used for: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

[0142] In one alternative implementation, when the editing interface within the target editor is displayed on the first graphical user interface of the first terminal device, the collaboration platform is used to: In response to a page editing request for the target project, a collaborative code branch matching the main code branch is generated based on the main code branch in the code repository corresponding to the target project. The source code of the collaborative code branch is injected at compile time to generate the front-end runtime corresponding to the target project and the preview URL corresponding to the front-end runtime; The front-end runtime is embedded into the target editor by loading the preview URL; In response to the completion of the embedding, the editing interface is displayed on the first graphical user interface.

[0143] In one alternative implementation, during the compile-time injection of the source code of the collaborative code branch, the collaboration platform is configured to: Traverse the abstract syntax tree of the source code and identify the target page elements in the source code that conform to the editable rules from the abstract syntax tree; Assign a collaboration identifier to the target page element, and inject the position information of the target page element in the source code into the collaboration identifier; For the preset page elements in the target page elements, generate the corresponding wrapper component for the preset page element; By inserting the import statements and registration entry code required by the front-end runtime into the source code, the front-end runtime, consisting of the rewritten source code and the wrapper component, is obtained.

[0144] In one optional implementation, when generating a page editing instruction matching the editing operation in response to an editing operation on the preview page, the first terminal device is configured to: In response to an editing operation on a first page element in the preview page, the editing event on the first page element is intercepted by the wrapper component corresponding to the first page element; wherein the first page element belongs to the preset page element; The wrapper component reports an editing event carrying a first collaboration identifier to the target editor; wherein the first collaboration identifier represents the collaboration identifier assigned to the first page element. The first page element in the preview page is highlighted using the target editor, and the attribute information of the first page element is displayed in the editing interface. In response to a modification operation on the attribute information, an attribute information modification instruction matching the modification operation is generated as the page editing instruction.

[0145] In one optional implementation, the first terminal device is further configured to: In response to the preview page completing the update, a notification message indicating that the update is complete is displayed on the target panel; In response to an input operation on the target panel, text description information matching the input operation is generated, and the text description information is input into the large language model; Using the large language model, the target code is modified according to the text description information to generate modified code that matches the text description information; The preview page is updated according to the change code.

[0146] In one alternative implementation, the collaboration platform is also used for: In response to the code commit operation for the target panel, the target code is written to the collaborative code branch in the form of a commit, resulting in an updated collaborative code branch; Create a code merge request for the updated collaborative code branch and the main code branch, and assign the code merge request to the development side node for review.

[0147] In one alternative implementation, after the compile-time injection of the source code of the collaborative code branch, the collaboration platform is further configured to: Generate a preview QR code corresponding to the front-end runtime, and classify the preview QR code, the collaborative code branch, and the preview URL into the same collaborative session; wherein, the collaborative session is used to identify the page collaborative editing task corresponding to the page editing request; Display the preview QR code on the first graphical user interface; The preview QR code is scanned by the second terminal device, the session identifier corresponding to the collaborative session is parsed from the scanned QR code information, and a first communication channel is established with the second terminal device based on the session identifier. A first preview page is displayed on a second graphical user interface of the second terminal device via the first communication channel; wherein the first preview page is synchronized with the preview page displayed on the first graphical user interface.

[0148] In one alternative implementation, after displaying the first preview page on the second graphical user interface of the second terminal device, the first terminal device is further configured to: The preview page is hidden within the editing interface on the first graphical user interface.

[0149] In one alternative implementation, the collaboration platform is also used for: In response to a third terminal device accessing the collaborative session via the preview QR code, the first communication channel with the second terminal device is disconnected, and a second communication channel is established with the third terminal device. A second preview page is displayed on the third graphical user interface of the third terminal device via the second communication channel; wherein the second preview page is synchronized with the preview page displayed on the first graphical user interface.

[0150] In one alternative implementation, the collaboration platform is also used for: In response to the disconnection of the first communication channel, the preview page is restored to be displayed in the editing interface on the first graphical user interface; wherein the page content of the restored preview page is determined according to the page content of the first preview page before the first communication channel was disconnected.

[0151] In one alternative implementation, the collaboration platform is also used for: In response to detecting an editing operation on the preview page within the target editor, a structured control instruction matching the editing operation is generated; The structured control command is sent to the second terminal device through the first communication channel; The second terminal device updates the first preview page according to the received structured control instructions.

[0152] In one alternative implementation, the collaboration platform is also used for: In response to detecting a change in the page state of the first preview page, the target event used to indicate the change in the page state of the first preview page is encapsulated as structured information; The structured information is sent to the first terminal device through the first communication channel; The editing interface is updated using the first terminal device according to the received structured information.

[0153] Based on the page editing system provided in this application embodiment, it can provide a target editor with collaborative editing capabilities for non-development users without development experience without changing the existing front-end engineering technology stack and code repository structure. This allows the editing operations performed by non-development users on the preview page in the target editor to be converted into input data for a large language model. The large language model outputs target code that matches the above editing operations, and updates the above preview page displayed in the target editor according to the target code. This allows non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative editing of the preview page.

[0154] Based on the same inventive concept, this application also provides an electronic device corresponding to the above-described page editing method. Since the principle of solving the problem by the electronic device in the embodiments of this application is similar to that of the above-described page editing method in the embodiments of this application, the implementation of the electronic device can refer to the implementation of the above-described page editing method, and the repeated parts will not be described again.

[0155] Figure 4 A schematic diagram of the structure of an electronic device 400 provided in this application embodiment includes: a processor 401, a memory 402, and a bus 403. The memory 402 stores machine-readable instructions executable by the processor 401. When the electronic device runs a page editing method as described in the embodiment, the processor 401 communicates with the memory 402 via the bus 403. The processor 401 executes the machine-readable instructions, wherein the processor 401 executes the machine-readable instructions to perform the following steps, specifically: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

[0156] In an optional implementation, when the editing interface within the target editor is displayed on the first graphical user interface of the first terminal device, the processor 401 is configured to: In response to a page editing request for the target project, a collaborative code branch matching the main code branch is generated based on the main code branch in the code repository corresponding to the target project. The source code of the collaborative code branch is injected at compile time to generate the front-end runtime corresponding to the target project and the preview URL corresponding to the front-end runtime; The front-end runtime is embedded into the target editor by loading the preview URL; In response to the completion of the embedding, the editing interface is displayed on the first graphical user interface.

[0157] In one alternative implementation, during the compile-time injection of the source code of the cooperative code branch, the processor 401 is configured to: Traverse the abstract syntax tree of the source code and identify the target page elements in the source code that conform to the editable rules from the abstract syntax tree; Assign a collaboration identifier to the target page element, and inject the position information of the target page element in the source code into the collaboration identifier; For the preset page elements in the target page elements, generate the corresponding wrapper component for the preset page element; By inserting the import statements and registration entry code required by the front-end runtime into the source code, the front-end runtime, consisting of the rewritten source code and the wrapper component, is obtained.

[0158] In one alternative implementation, when generating a page editing instruction matching the editing operation in response to an editing operation on the preview page, the processor 401 is configured to: In response to an editing operation on a first page element in the preview page, the editing event on the first page element is intercepted by the wrapper component corresponding to the first page element; wherein the first page element belongs to the preset page element; The wrapper component reports an editing event carrying a first collaboration identifier to the target editor; wherein the first collaboration identifier represents the collaboration identifier assigned to the first page element. The first page element in the preview page is highlighted using the target editor, and the attribute information of the first page element is displayed in the editing interface. In response to a modification operation on the attribute information, an attribute information modification instruction matching the modification operation is generated as the page editing instruction.

[0159] In an alternative implementation, the processor 401 is further configured to: In response to the preview page completing the update, a notification message indicating that the update is complete is displayed on the target panel; In response to an input operation on the target panel, text description information matching the input operation is generated, and the text description information is input into the large language model; Using the large language model, the target code is modified according to the text description information to generate modified code that matches the text description information; The preview page is updated according to the change code.

[0160] In an alternative implementation, the processor 401 is further configured to: In response to the code commit operation for the target panel, the target code is written to the collaborative code branch in the form of a commit, resulting in an updated collaborative code branch; Create a code merge request for the updated collaborative code branch and the main code branch, and assign the code merge request to the development side node for review.

[0161] In an alternative implementation, after the compile-time injection of the source code of the cooperative code branch, the processor 401 is further configured to: Generate a preview QR code corresponding to the front-end runtime, and classify the preview QR code, the collaborative code branch, and the preview URL into the same collaborative session; wherein, the collaborative session is used to identify the page collaborative editing task corresponding to the page editing request; Display the preview QR code on the first graphical user interface; The preview QR code is scanned by the second terminal device, the session identifier corresponding to the collaborative session is parsed from the scanned QR code information, and a first communication channel is established with the second terminal device based on the session identifier. A first preview page is displayed on a second graphical user interface of the second terminal device via the first communication channel; wherein the first preview page is synchronized with the preview page displayed on the first graphical user interface.

[0162] In an optional implementation, after displaying the first preview page on the second graphical user interface of the second terminal device, the processor 401 is further configured to: The preview page is hidden within the editing interface on the first graphical user interface.

[0163] In an alternative implementation, the processor 401 is further configured to: In response to a third terminal device accessing the collaborative session via the preview QR code, the first communication channel with the second terminal device is disconnected, and a second communication channel is established with the third terminal device. A second preview page is displayed on the third graphical user interface of the third terminal device via the second communication channel; wherein the second preview page is synchronized with the preview page displayed on the first graphical user interface.

[0164] In an alternative implementation, the processor 401 is further configured to: In response to the disconnection of the first communication channel, the preview page is restored to be displayed in the editing interface on the first graphical user interface; wherein the page content of the restored preview page is determined according to the page content of the first preview page before the first communication channel was disconnected.

[0165] In an alternative implementation, the processor 401 is further configured to: In response to detecting an editing operation on the preview page within the target editor, a structured control instruction matching the editing operation is generated; The structured control command is sent to the second terminal device through the first communication channel; The second terminal device updates the first preview page according to the received structured control instructions.

[0166] In an alternative implementation, the processor 401 is further configured to: In response to detecting a change in the page state of the first preview page, the target event used to indicate the change in the page state of the first preview page is encapsulated as structured information; The structured information is sent to the first terminal device through the first communication channel; The editing interface is updated using the first terminal device according to the received structured information.

[0167] The electronic device provided in this application embodiment can provide a collaborative editing capability for non-development users without development experience without changing the existing front-end engineering technology stack and code repository structure. This allows the editing operations performed by non-development users on the preview page within the target editor to be converted into input data for a large language model. The large language model outputs target code that matches the editing operations, and updates the preview page displayed in the target editor based on the target code. This enables non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative editing of the preview page.

[0168] Based on the same inventive concept, embodiments of this application also provide a computer-readable storage medium storing a computer program, which is executed by a processor, wherein the processor performs the following steps: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

[0169] In one optional implementation, when the editing interface within the target editor is displayed on the first graphical user interface of the first terminal device, the processor is configured to: In response to a page editing request for the target project, a collaborative code branch matching the main code branch is generated based on the main code branch in the code repository corresponding to the target project. The source code of the collaborative code branch is injected at compile time to generate the front-end runtime corresponding to the target project and the preview URL corresponding to the front-end runtime; The front-end runtime is embedded into the target editor by loading the preview URL; In response to the completion of the embedding, the editing interface is displayed on the first graphical user interface.

[0170] In one alternative implementation, during the compile-time injection of the source code of the collaborative code branch, the processor is configured to: Traverse the abstract syntax tree of the source code and identify the target page elements in the source code that conform to the editable rules from the abstract syntax tree; Assign a collaboration identifier to the target page element, and inject the position information of the target page element in the source code into the collaboration identifier; For the preset page elements in the target page elements, generate the corresponding wrapper component for the preset page element; By inserting the import statements and registration entry code required by the front-end runtime into the source code, the front-end runtime, consisting of the rewritten source code and the wrapper component, is obtained.

[0171] In one alternative implementation, when generating a page editing instruction matching the editing operation in response to an editing operation on the preview page, the processor is configured to: In response to an editing operation on a first page element in the preview page, the editing event on the first page element is intercepted by the wrapper component corresponding to the first page element; wherein the first page element belongs to the preset page element; The wrapper component reports an editing event carrying a first collaboration identifier to the target editor; wherein the first collaboration identifier represents the collaboration identifier assigned to the first page element. The first page element in the preview page is highlighted using the target editor, and the attribute information of the first page element is displayed in the editing interface. In response to a modification operation on the attribute information, an attribute information modification instruction matching the modification operation is generated as the page editing instruction.

[0172] In one alternative implementation, the processor is further configured to: In response to the preview page completing the update, a notification message indicating that the update is complete is displayed on the target panel; In response to an input operation on the target panel, text description information matching the input operation is generated, and the text description information is input into the large language model; Using the large language model, the target code is modified according to the text description information to generate modified code that matches the text description information; The preview page is updated according to the change code.

[0173] In one alternative implementation, the processor is further configured to: In response to the code commit operation for the target panel, the target code is written to the collaborative code branch in the form of a commit, resulting in an updated collaborative code branch; Create a code merge request for the updated collaborative code branch and the main code branch, and assign the code merge request to the development side node for review.

[0174] In one alternative implementation, after the compile-time injection of the source code of the cooperative code branch, the processor is further configured to: Generate a preview QR code corresponding to the front-end runtime, and classify the preview QR code, the collaborative code branch, and the preview URL into the same collaborative session; wherein, the collaborative session is used to identify the page collaborative editing task corresponding to the page editing request; Display the preview QR code on the first graphical user interface; The preview QR code is scanned by the second terminal device, the session identifier corresponding to the collaborative session is parsed from the scanned QR code information, and a first communication channel is established with the second terminal device based on the session identifier. A first preview page is displayed on a second graphical user interface of the second terminal device via the first communication channel; wherein the first preview page is synchronized with the preview page displayed on the first graphical user interface.

[0175] In one alternative implementation, after displaying the first preview page on the second graphical user interface of the second terminal device, the processor is further configured to: The preview page is hidden within the editing interface on the first graphical user interface.

[0176] In one alternative implementation, the processor is further configured to: In response to a third terminal device accessing the collaborative session via the preview QR code, the first communication channel with the second terminal device is disconnected, and a second communication channel is established with the third terminal device. A second preview page is displayed on the third graphical user interface of the third terminal device via the second communication channel; wherein the second preview page is synchronized with the preview page displayed on the first graphical user interface.

[0177] In one alternative implementation, the processor is further configured to: In response to the disconnection of the first communication channel, the preview page is restored to be displayed in the editing interface on the first graphical user interface; wherein the page content of the restored preview page is determined according to the page content of the first preview page before the first communication channel was disconnected.

[0178] In one alternative implementation, the processor is further configured to: In response to detecting an editing operation on the preview page within the target editor, a structured control instruction matching the editing operation is generated; The structured control command is sent to the second terminal device through the first communication channel; The second terminal device updates the first preview page according to the received structured control instructions.

[0179] In one alternative implementation, the processor is further configured to: In response to detecting a change in the page state of the first preview page, the target event used to indicate the change in the page state of the first preview page is encapsulated as structured information; The structured information is sent to the first terminal device through the first communication channel; The editing interface is updated using the first terminal device according to the received structured information.

[0180] The computer-readable storage medium provided in this application embodiment enables a collaborative editing tool for non-development users without development experience, without altering the existing front-end engineering technology stack and code repository structure. This allows editing operations performed by non-development users on the preview page within the target editor to be converted into input data for a large language model. The large language model outputs target code matching the editing operations, and the preview page displayed in the target editor is updated based on the target code. This allows non-development users to more conveniently and directly view the edited page effect, effectively improving the efficiency of collaborative editing of the preview page.

[0181] In this embodiment, the computer-readable storage medium can also execute other machine-readable instructions when the processor runs, to perform the page editing method as described in other embodiments. For details on the specific page editing method steps and principles, please refer to the description of the method-side embodiment, which will not be repeated here.

[0182] In the embodiments provided in this application, it should be understood that the disclosed systems and methods can be implemented in other ways. The system embodiments described above are merely illustrative. For example, the division of units is only a logical functional division, and there may be other division methods in actual implementation. Furthermore, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Additionally, the coupling or direct coupling or communication connection shown or discussed may be through some communication interface; the indirect coupling or communication connection between systems or units may be electrical, mechanical, or other forms.

[0183] The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0184] In addition, the functional units in the embodiments provided in this application 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.

[0185] If the aforementioned functions are implemented as software functional units and sold or used as independent products, they can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of this application. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0186] It should be noted that similar labels and letters in the following figures indicate similar items. Therefore, once an item is defined in one figure, it does not need to be further defined and explained in subsequent figures. In addition, the terms "first", "second", "third", etc. are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0187] Finally, it should be noted that the above-described embodiments are merely specific implementations of this application, used to illustrate the technical solutions of this application, and not to limit them. The protection scope of this application is not limited thereto. Although this application has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that any person skilled in the art can still modify or easily conceive of changes to the technical solutions described in the foregoing embodiments, or make equivalent substitutions for some of the technical features, within the scope of the technology disclosed in this application; and these modifications, changes, or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of this application. All should be covered within the protection scope of this application. Therefore, the protection scope of this application should be determined by the protection scope of the claims.

Claims

1. A page editing method, characterized in that, The page editing method includes: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

2. The page editing method according to claim 1, characterized in that, Displaying the editing interface within the target editor on the first graphical user interface of the first terminal device includes: In response to a page editing request for the target project, a collaborative code branch matching the main code branch is generated based on the main code branch in the code repository corresponding to the target project. The source code of the collaborative code branch is injected at compile time to generate the front-end runtime corresponding to the target project and the preview URL corresponding to the front-end runtime; The front-end runtime is embedded into the target editor by loading the preview URL; In response to the completion of the embedding, the editing interface is displayed on the first graphical user interface.

3. The page editing method according to claim 2, characterized in that, The compile-time injection of the source code of the collaborative code branch includes: Traverse the abstract syntax tree of the source code and identify the target page elements in the source code that conform to the editable rules from the abstract syntax tree; Assign a collaboration identifier to the target page element, and inject the position information of the target page element in the source code into the collaboration identifier; For the preset page elements in the target page elements, generate the corresponding wrapper component for the preset page element; By inserting the import statements and registration entry code required by the front-end runtime into the source code, the front-end runtime, consisting of the rewritten source code and the wrapper component, is obtained.

4. The page editing method according to claim 3, characterized in that, The step of generating page editing instructions matching the editing operation in response to an editing operation on the preview page includes: In response to an editing operation on a first page element in the preview page, the editing event on the first page element is intercepted by the wrapper component corresponding to the first page element; wherein the first page element belongs to the preset page element; The wrapper component reports an editing event carrying a first collaboration identifier to the target editor; wherein the first collaboration identifier represents the collaboration identifier assigned to the first page element. The first page element in the preview page is highlighted using the target editor, and the attribute information of the first page element is displayed in the editing interface. In response to a modification operation on the attribute information, an attribute information modification instruction matching the modification operation is generated as the page editing instruction.

5. The page editing method according to claim 1, characterized in that, The page editing method also includes: In response to the preview page completing the update, a notification message indicating that the update is complete is displayed on the target panel; In response to an input operation on the target panel, text description information matching the input operation is generated, and the text description information is input into the large language model; Using the large language model, the target code is modified according to the text description information to generate modified code that matches the text description information; The preview page is updated according to the change code.

6. The page editing method according to claim 2, characterized in that, The page editing method also includes: In response to the code commit operation for the target panel, the target code is written to the collaborative code branch in the form of a commit, resulting in an updated collaborative code branch; Create a code merge request for the updated collaborative code branch and the main code branch, and assign the code merge request to the development side node for review.

7. The page editing method according to claim 2, characterized in that, After performing compile-time injection into the source code of the collaborative code branch, the page editing method further includes: Generate a preview QR code corresponding to the front-end runtime, and classify the preview QR code, the collaborative code branch, and the preview URL into the same collaborative session; wherein, the collaborative session is used to identify the page collaborative editing task corresponding to the page editing request; Display the preview QR code on the first graphical user interface; The preview QR code is scanned by the second terminal device, the session identifier corresponding to the collaborative session is parsed from the scanned QR code information, and a first communication channel is established with the second terminal device based on the session identifier. A first preview page is displayed on a second graphical user interface of the second terminal device via the first communication channel; wherein the first preview page is synchronized with the preview page displayed on the first graphical user interface.

8. A page editing system, characterized in that, The page editing system includes: a collaboration platform and at least one terminal device that establishes a communication connection with the collaboration platform, wherein the first terminal device among the terminal devices is used for: An editing interface within a target editor is displayed on a first graphical user interface of a first terminal device; wherein the editing interface includes: a preview page of the target project and a target panel; In response to a session creation operation for the editing interface, a target editing session is created; In response to an editing operation on the preview page, a page editing instruction matching the editing operation is generated, and the page editing instruction is assigned to the target editing session; In response to a text input operation on the target panel, an intent description information matching the text input operation is generated, and the intent description information is attributed to the target editing session; In response to the confirmation operation for the target editing session, the page editing instructions and intent description information contained in the target editing session are input into the large language model. The large language model generates target code that matches the target editing session, and the preview page is updated according to the target code.

9. An electronic device, characterized in that, include: The device includes a processor, a memory, and a bus. The memory stores machine-readable instructions executable by the processor. When the electronic device is running, the processor communicates with the memory via the bus. When the machine-readable instructions are executed by the processor, they perform the steps of the page editing method as described in any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the page editing method as described in any one of claims 1 to 7.

Images