Visual code generation method and device for business travel service page

Abstract

The invention discloses a visual code generation method for a business travel service page. The method comprises the following steps: detecting operation of a user for page elements contained in the business travel service page; in response to a detected operation of a user for any target page element contained in the business travel service page, searching a page code snippet corresponding to the target page element from the page codes which correspond to the business travel service page and are subjected to visual rendering, obtaining a pre-injected code context which is contained in the page code snippet and is related to the target page element; obtaining demand data input by a user and used for modifying and updating the target page element; inputting demand data and a code context into the LLM, analyzing the demand data by the LLM to determine a modification demand of the user for the target page element, and generating a page code snippet meeting the modification demand based on the code context; and modifying and updating the target page elements based on the page code snippets generated by the LLM.

Description

Technical Field

[0001] The embodiments in this specification relate to the field of artificial intelligence technology, and in particular to a method and device for generating visual code for business travel service pages. Background Technology

[0002] On some enterprise-level service platforms, to better manage employees' daily business travel activities, the platform can provide users with a business travel service page offering end-to-end business travel services. Through this page, users can complete online tasks such as booking services related to their business travel activities (e.g., flight bookings, hotel bookings, train ticket bookings, and car rental services), expense reimbursement, and more.

[0003] In the traditional front-end development workflow, the process of transforming the aforementioned business travel service page from design drafts to final code implementation often involves a complex manual conversion process. Developers need to manually write code based on the design drafts, and when requirements change, they must reposition relevant components, understand the code structure, and modify the implementation logic. This process is not only time-consuming and labor-intensive, but also prone to code quality issues due to misunderstandings of context. Especially in the rapid iteration of business travel product development, frequent page adjustments and feature optimization requirements make the traditional "design-development-debugging" model inefficient. Summary of the Invention

[0004] Firstly, this specification proposes a method for generating visual code for a business travel service page, applied to a service program corresponding to the business travel service page; the service program includes a service program built based on LLM; the service program is used to generate page code that modifies and updates page elements contained in the business travel service page; wherein, the visually rendered page code corresponding to the business travel service page contains page code fragments corresponding to several page elements; the page code fragment corresponding to any page element contains a pre-injected code context related to the page element; the method includes: Detect user actions on page elements contained in the business travel service page; In response to a detected user action on any target page element contained in the business travel service page, the system searches for a page code fragment corresponding to the target page element from the visually rendered page code corresponding to the business travel service page, and obtains the code context related to the target page element contained in the page code fragment; and obtains user-inputted request data for modifying and updating the target page element. The requirement data and the code context are input into the LLM, so that the LLM can parse the requirement data to determine the user's modification requirements for the target page element, and generate page code snippets that meet the modification requirements based on the code context; The target page elements are modified and updated based on the page code snippet generated by the LLM.

[0005] Optionally, the front-end development framework used by the business travel service page includes a front-end development framework that supports component-based page development; the front-end development framework is configured with a coordinator for coordinating and managing the rendering tasks of the page elements contained in the business travel service page; the coordinator supports assigning different work units to each page element contained in the business travel service page; the work unit is used to execute rendering tasks for visual rendering of the page elements. Obtain the pre-injected code context contained in the page code snippet, including: The coordinator configured in the front-end development framework is invoked to traverse the work units corresponding to each page element contained in the business travel service page, which are managed by the coordinator. The target work unit corresponding to the target page element is found from the work units corresponding to each page element contained in the business travel service page, and the pre-injected code context contained in the page code snippet is further obtained through the target work unit.

[0006] Optionally, the front-end development framework includes a React-based front-end development framework; the coordinator includes a Fiber coordinator; and the work unit includes a Fiber node.

[0007] Optionally, the front-end development framework includes a front-end development framework that supports component-based page development and plug-in-based service functions; the service program includes service plugins implemented on the business travel service page based on the front-end development framework.

[0008] Optionally, the page code after visualization rendering includes HTML code; the page code fragment corresponding to the target page element includes the page code fragment related to the DOM element corresponding to the target page element contained in the HTML code; the code context is stored in the custom attributes pre-injected in the page code fragment with the prefix "data".

[0009] Optionally, inject code context related to the page elements contained in the business travel service page into the page code after the visualization rendering, including: During the stage of compiling the page code corresponding to the business travel service page developed based on the front-end development framework using the code compiler in the front-end development framework, code context related to each page element is injected into the page code fragments corresponding to each page element contained in the page code; or, During the stage of visual rendering of the compiled page code, code context related to each page element is injected into the page code fragments corresponding to each page element contained in the page code.

[0010] Optionally, the code context corresponding to the target page element includes: The path to the code file of the page code corresponding to the business travel service page; The location information of the page code snippet within the page code; The development project context associated with the development project of the page code; And, one or more of the following information in combination: The source code snippet specified from the page code; Screenshot files related to the target page element.

[0011] Optionally, the development project context includes: The technology stack used to develop the page code; and the coding standards used in the development project of the page code.

[0012] Secondly, this specification also provides 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 any of the methods described in the first aspect above.

[0013] Thirdly, this specification also provides a computer program product, including a computer program that, when executed by a processor, implements the steps of any of the methods described in the first aspect above.

[0014] In the above embodiments, by transforming the traditional "design-development-debugging" development model used when modifying page elements contained in a page into an intelligent development model of "click element-AI understanding-automatic generation," not only can development efficiency be greatly improved, but the development threshold for modifying page elements contained in a page can also be significantly reduced. This allows non-developers to quickly and accurately modify page elements contained in a page when encountering changes in requirements. Attached Figure Description

[0015] To more clearly illustrate the technical solutions of the embodiments in this specification, the drawings used in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are only some embodiments recorded in this specification. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0016] Figure 1 This is a schematic diagram of the architecture of an Internet service system shown in one embodiment of this specification; Figure 2 This is a flowchart illustrating a visual code generation method for a business travel service interface in one embodiment of this specification; Figure 3 This is an interactive flowchart illustrating a visual code generation method for a business travel service page, as shown in one embodiment of this specification. Figure 4 This is a schematic structural diagram of an electronic device shown in one embodiment of this specification; Figure 5 This is a block diagram of a visual code generation device for a business travel service interface, as shown in one embodiment of this specification. Detailed Implementation

[0017] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numerals in different drawings denote the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with one or more embodiments of this specification. Rather, they are merely examples of apparatuses and methods consistent with some aspects of one or more embodiments of this specification as detailed in the appended claims.

[0018] It should be noted that the steps of the corresponding methods are not necessarily performed in the order shown and described in this specification in other embodiments. In some other embodiments, the methods may include more or fewer steps than described in this specification. Furthermore, a single step described in this specification may be broken down into multiple steps in other embodiments; and multiple steps described in this specification may be combined into a single step in other embodiments.

[0019] The user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, data stored, data displayed, etc.) involved in this manual are all information and data authorized by the user or fully authorized by all parties. The collection, use and processing of related data shall comply with the relevant laws, regulations and standards of the relevant countries and regions, and corresponding operation portals shall be provided for users to choose to authorize or refuse.

[0020] This manual aims to propose a visual and intelligent development model for non-developers, enabling them to quickly and accurately modify and update page elements when page requirements change.

[0021] Figure 1 This is a schematic diagram of the architecture of an Internet service system provided in an exemplary embodiment. For example... Figure 1 As shown, the system may include a server 11, a network 12, and several electronic devices, such as a PC (Personal Computer) 13, a mobile phone 14, etc.

[0022] Server 11 can be a physical server containing an independent host, or server 11 can be a virtual server hosted in a host cluster. During operation, server 11 can run a server-side program of a certain service program (such as an artificial intelligence service program built based on LLM); for example, when server 11 runs the server-side program of the service program, it can act as the server of the service program.

[0023] PC13 and mobile phone 14 are just some of the types of electronic devices that users can use. In reality, users can obviously also use electronic devices such as tablets, laptops, PDAs (Personal Digital Assistants), wearable devices (such as smart glasses, smartwatches, etc.), etc., and one or more embodiments in this specification do not limit this. During operation, the electronic device can run a client-side program of a service program to implement the relevant functions of the application. For example, when the electronic device runs a user-side program of the service program, it can act as a client of the service program.

[0024] The client-side program of the aforementioned service program can be launched and run on an electronic device. This client-side program can be a native application installed on the electronic device, or it can be a mini-program, quick app, or other similar form.

[0025] Of course, when using web technologies such as HTML5 or similar, the relevant functions can be achieved through the page displayed by the browser. The browser here can be a standalone browser application or a browser module embedded in some applications.

[0026] As for the network 12 that enables interaction between electronic devices such as PC13 and mobile phone 14 and server 11, communication can be achieved using either wired or wireless networks, depending on the communication methods supported by the respective electronic devices. This specification does not impose any restrictions on this. For example, PC13 can support both wired and wireless communication, so it can use either wired or wireless networks as needed. Mobile phone 14 typically only supports wireless communication, so it can use a wireless network for communication.

[0027] It should be noted that the services provided by the above service program can include any service implemented on the Internet; for example, the services provided by the above service program can specifically include corporate travel services provided to employees on the enterprise's service platform.

[0028] The technical solution of this specification will be described in detail below with reference to the accompanying drawings.

[0029] Please see Figure 2 , Figure 2 This specification provides a flowchart of a visual code generation method for a business travel service page, including the following execution process: Step 202: Detect user actions on page elements contained in the business travel service page; The entity executing the above method may specifically include a service program corresponding to the target page. The target page may specifically include a page on the service platform that provides services to users. For example, in some embodiments, the services provided by the service platform to users may include business travel services; correspondingly, the target page may specifically include a business travel service page. Of course, in practical applications, the target page can obviously also be a service page related to other types of internet services besides business travel services.

[0030] In practical applications, the aforementioned service programs may specifically include server-side programs and client-side programs. The server-side programs and client-side programs work together to provide users with user services related to their business travel activities.

[0031] For example, in some embodiments, the execution subject of the above method process can be either the client program of the above service program or the server program of the above service program; or, some steps in the above method can run on the client program and some steps can run on the server program, and the process corresponding to the above method can be jointly executed through the mutual cooperation of the server program and the client program.

[0032] In some embodiments, the aforementioned service program may specifically include a service program built on an LLM (Large Language Model). It should be noted that a service program built on an LLM may specifically include one that uses the LLM as its core computing engine, with the LLM responsible for providing services such as natural language understanding, generation, reasoning, and decision-making capabilities.

[0033] In practical applications, the aforementioned service programs built on LLM may specifically include artificial intelligence service programs built on LLM. For example, in some embodiments, the aforementioned service program may specifically include an agent built on an LLM (Low-Level Management Model). For instance, in some examples, it could be an AI-powered intelligent assistant built on an LLM to develop and manage business travel service pages. This AI assistant can intelligently generate page code that modifies and updates the target page elements specified by the user based on the user's input of modification and update requests (such as request text input in natural language).

[0034] In some embodiments, the business travel services provided to users through the aforementioned business travel service page may specifically include various types of services; For example, the business travel services provided to users by the aforementioned service program may specifically include booking services related to users' business travel activities (such as flight bookings, hotel bookings, train ticket bookings, and car rental services), reimbursement services, and so on.

[0035] In some embodiments, the aforementioned service program can be used to generate page code that modifies and updates page elements contained in a business travel service page. When the business travel service page needs to be adjusted and some page elements contained in the page need to be modified and updated, non-developers (such as UI designers or product managers) can also use the service program to quickly generate page code that modifies and updates some page elements on the front end through visual operations.

[0036] It should be noted that, in practical applications, the page elements contained in the aforementioned business travel service page can typically include some page elements that need to participate in visual rendering (i.e., page elements that need to be displayed on the page), as well as some page elements that do not need to participate in visual rendering (i.e., hidden page elements that do not need to be displayed on the page). Since page elements that do not need to participate in visual rendering can usually only be modified and updated by developers in the backend, and cannot be modified and updated in the frontend through visual operations, the page elements contained in the business travel service page mentioned in step 202 above can specifically include the page elements contained in the aforementioned business travel service page that need to participate in visual rendering.

[0037] The page elements that need to participate in the visual rendering included in the aforementioned business travel service page can specifically include any form of page element that needs to be displayed on the page; for example, buttons, icons, text boxes, etc. included on the page.

[0038] Please see Figure 3 , Figure 3 This is an interactive flowchart illustrating a visual code generation method for a business travel service page as shown in this specification.

[0039] In some embodiments, such as Figure 3 As shown, when the aforementioned business travel service page needs to be adjusted, and some page elements contained on the page need to be modified and updated, users (such as non-developers) can first activate the service functions corresponding to the aforementioned service program on the aforementioned business travel service page.

[0040] The specific method for activating the service function corresponding to the above-mentioned service program on the aforementioned business travel service page will not be specifically limited in this instruction manual.

[0041] For example, in practical applications, users can activate the service functions corresponding to the aforementioned service program using specific shortcut keys on the business travel service page. Alternatively, the business travel service interface can provide an operation entry point (such as a button) corresponding to the aforementioned service program, in which case users can directly operate on the operation entry point (such as clicking) to activate the service functions corresponding to the aforementioned service program.

[0042] In some embodiments, please continue to see Figure 3 Once a user activates the service function corresponding to the aforementioned service program on the business travel service page, the aforementioned service program can enable the element inspection mode for the page elements contained in the business travel service interface, switch the aforementioned business travel service page from the default state to the operable state, and start detecting the user's operations on the business travel service page in the background.

[0043] In the operable state, the page elements contained in the aforementioned business travel service page will be operable.

[0044] In this state, users can manipulate the target page elements on the business travel service page that need to be modified or updated based on specific modification and update requirements, and the service program can automatically generate page code to modify and update the target page elements.

[0045] Step 204: In response to the detected user operation on any target page element contained in the business travel service page, obtain the user's input request data for modifying and updating the target page element, and search for the page code fragment corresponding to the target page element from the page code after the visual rendering corresponding to the business travel service page, and obtain the code context related to the target page element contained in the page code fragment. In some embodiments, when the service program detects that a user has performed an operation on any target page element contained in the business travel service page, on the one hand, the target page element operated by the user can be enhanced in the business travel service page (e.g., highlighted). On the other hand, an interactive interface corresponding to the AI ​​intelligent assistant can be further output on the business travel service page. At this time, the user can combine their own modification and update needs and continue to input the data (e.g., the requirement text) of the requirement to modify and update the target page element operated on using natural language in the interactive interface.

[0046] For example, in practical applications, a listening component can be implemented in the service program to monitor mouse hover and click events on the page, and a display component can be implemented to highlight the page elements clicked by the user in real time. When the user activates the service function corresponding to the aforementioned service program on the business travel service page, the listening component can start listening for mouse hover and click events on the business travel service page. If the listening component detects a mouse hover event at the location of a target page element on the business travel service page, it can respond to the mouse hover event and output a text tooltip at the location of the target page element to guide the user to operate on the target page element. If the listening component detects a click event on the target page element, it can respond to the click event and further output an interactive interface corresponding to the AI ​​intelligent assistant on the aforementioned business travel service page.

[0047] Taking the aforementioned service program as an example of an AI-powered intelligent assistant for developing and managing business travel service pages based on LLM, when the business travel service page switches from the default state to an operable state, after the user moves the cursor to the area where the target page element that needs to be modified and updated is located, a user prompt box can be displayed at the location of the target page element (such as below the page element) to guide the user to click on the target page element; for example, the user prompt box could be a text prompt box that says "Click to ask AI a question".

[0048] After a user clicks on the target page element, the target page element will be highlighted on the business travel service page. At the same time, an interactive interface corresponding to the AI ​​intelligent assistant will be displayed on the business travel service page. At this time, the user can continue to input the data for modifying and updating the target page element in natural language on the interactive interface according to their own modification and update needs.

[0049] In some embodiments, after developers complete the development of the business travel service page's page code, the page code typically needs to be compiled and rendered visually before it can be displayed to the user. After visual rendering, the page code is usually further broken down into several page code fragments corresponding one-to-one with the page elements contained in the business travel service page.

[0050] For example, the page code after visualization rendering can typically include HTML (Hyper Text Markup Language) code; and page code snippets corresponding to the various page elements contained in the business travel service page, specifically including page code snippets in the HTML code related to the DOM (Document Object Model) elements corresponding to each page element.

[0051] In practical applications, in order for the above service program to obtain a complete code context when automatically generating page code to modify and update the target page elements in response to user operations, code injection technology can be used to inject the complete code context related to the current page element in advance into the page code snippets corresponding to each page element contained in the business travel service page.

[0052] In this way, it can be ensured that the page code snippets corresponding to each page element in the page code after the visualization rendering is completed can contain the complete code context related to the current page element.

[0053] In practical applications, during the compilation stage of the page code corresponding to the business travel service page, code context related to the current page element can be injected in advance into the page code snippets corresponding to each page element. Alternatively, during the visualization rendering stage of the compiled page code corresponding to the business travel service page, code context related to the current page element can be injected in advance into the page code snippets corresponding to each page element.

[0054] In some embodiments, after the developers have developed the page code corresponding to the business travel service page based on the front-end development framework, during the stage of compiling the page code using the code compiler in the front-end development framework, the code compiler can access the original page code file stored in the code repository to obtain the complete code context related to each page element, and then use code injection technology to inject the code context related to each page element into the page code fragments corresponding to each page element contained in the page code.

[0055] The specific type of code compiler used in the aforementioned front-end development frameworks will not be specifically limited in this specification. In practical applications, different types of front-end development frameworks may use different code compilers. For example, taking the aforementioned front-end development framework as a React-based front-end development framework, the code compiler used in a React-based front-end development framework can be the Babel compiler.

[0056] In other embodiments, code injection may not be performed during the compilation stage. Instead, after the code compiler in the front-end development framework has compiled the page code corresponding to the business travel service page, the visualization renderer in the front-end development framework is used to visualize and render the compiled page code. At this time, the visualization renderer can also access the original page code files stored in the code repository to obtain the complete code context related to each page element. Then, code injection technology is used to inject the code context related to each page element into the page code fragments corresponding to each page element contained in the visualized and rendered page code.

[0057] For example, taking the aforementioned front-end development framework as an example, which is based on React-16 (a version of React), this framework typically includes a Fiber coordinator. The React-16-based framework supports component-based page development. The Fiber coordinator, introduced in React-16, is a coordination algorithm framework used to coordinate and manage the rendering and update tasks of page elements, providing fine-grained access to component information for each element. The Fiber coordinator can assign different Fiber nodes as work units to each page element to execute rendering and update tasks for that element. In this case, the fine-grained information access capabilities of the assigned Fiber nodes can be used to inject code context related to each page element into the corresponding code snippets within the compiled page code.

[0058] Of course, in practical applications, the code context related to each page element can be automatically injected by the front-end development framework in the manner described above, or it can be manually injected by the developer. This manual will not make any specific restrictions.

[0059] It should be noted that the location and method of storing the pre-injected code context related to each page element in the corresponding page code snippet can be flexibly selected based on specific needs in practical applications.

[0060] In some embodiments, during code injection, a custom attribute can be added to the page code snippet corresponding to each page element to save the injected code context related to each page element.

[0061] For example, in practical applications, the page code after visualization rendering typically includes HTML (Hypertext Markup Language) code; the page code snippets corresponding to the various page elements contained in the business travel service page can specifically include page code snippets related to the DOM (Document Object Model) elements corresponding to each page element within the HTML code. In this case, a custom attribute prefixed with "data" can be defined in the page code snippets related to the DOM elements corresponding to each page element within the HTML code, and this custom attribute can be used to store the code context corresponding to each page element. In HTML code, custom attributes prefixed with "data" are usually called custom data attributes, a feature introduced in the HTML5 standard that allows developers to store private, custom data on HTML elements for JavaScript or CSS to read and use at runtime. The specific name of the custom attribute prefixed with "data" used to store the code context corresponding to each page element can be flexibly set based on specific needs in practical applications; for example, in one example, the aforementioned custom attribute could specifically be a custom attribute named "data-find-code".

[0062] It should be noted that the code context corresponding to each page element contained in the aforementioned business travel service page can specifically include any form of context information required to generate the page code that modifies and updates that page element. In practical applications, all context information required to generate page code can be included in the scope of the aforementioned code context.

[0063] In some embodiments, the context information required to develop and generate page code that modifies and updates the page element may typically include: The path to the code file corresponding to the business travel service page; The location information of the page code snippets corresponding to the above page elements within the above page code; The development project context related to the development project of the page code mentioned above.

[0064] The code file path mentioned above may include the address information of the code file that stores the original page code; for example, the code file path may be the project address in the code repository of the development project corresponding to the business travel service page. The aforementioned location information may include any form of information that represents the specific location of the page code segment corresponding to each of the aforementioned page elements within the aforementioned page code; for example, it may include the line number, column number, etc., of the page code segment corresponding to each of the aforementioned page elements within the aforementioned page code.

[0065] The aforementioned development project context may specifically include the sum of all background information, constraints, technical environment, development goals, and other project information related to the current development project. For example, in some embodiments, the aforementioned development project context may specifically include contextual information that reflects the code development style during the code development process. For example, it may include the technology stack information used to develop the aforementioned page code, as well as the coding standards adopted by the development project of the aforementioned page code, and so on.

[0066] In some embodiments, in order to improve the accuracy of the service program in automatically generating page code that modifies and updates the target page elements, the code context corresponding to each page element may, in addition to the context information shown above, further include one or more of the following context information: The source code snippet specified in the above page code; Screenshot files related to page elements.

[0067] Specifically, the source code snippets specified in the aforementioned page code may include those source code snippets that help improve programming quality; for example, in some embodiments, the specified source code snippets may specifically include the first N lines and the last N lines of the source code in the completed page code corresponding to the aforementioned business travel service page. The value of N can be flexibly set based on actual needs.

[0068] Screenshot files related to page elements can specifically include screenshots of the page elements contained in the aforementioned business travel service page displayed to the user. These screenshot files can intuitively present the actual display effect of each page element, thus providing visual context for the LLM. For example, when the LLM building the aforementioned service program is a multimodal LLM, providing the LLM with screenshot files of each page element as context can provide visual programming constraints for the LLM, thereby helping to improve the accuracy of the page code generated by the LLM.

[0069] Of course, in practical applications, the code context corresponding to each page element, in addition to the context information shown above, may also include supplementary context information such as source code snippets specified from the page code and screenshots related to the page elements, as well as other forms of context information that help improve programming quality. These will not be listed one by one in this specification.

[0070] It should be noted that when saving the code context corresponding to the target page element in the above custom attribute, you can choose to save the entire code context in the above custom attribute, or you can choose to save only some key context information from the complete code context in the above custom attribute.

[0071] For example, in some embodiments, only key context information such as the code file path of the page code corresponding to the business travel service page and the position information of the page code fragments corresponding to the various page elements in the page code can be stored in the custom attribute. Other context information can be obtained in real time by the service program after accessing the original page code file corresponding to the business travel service page stored in the code repository based on the code file path and the position information.

[0072] In some embodiments, please continue to see Figure 3 When the service program detects that the user has performed an operation on any target page element contained in the business travel service page, on the one hand, it can search for the page code fragment corresponding to the target page element in the page code after the visual rendering of the business travel service page, and obtain the code context related to the target page element contained in the page code fragment. For example, the service program can traverse the various DOM elements contained in the HTML code of the business travel service page, find the target DOM element corresponding to the target page element, and then read the pre-injected code context corresponding to the above target page element from the custom attributes prefixed with data (such as a custom attribute named data-find-code) contained in the page code snippet related to the DOM element corresponding to the target page element.

[0073] On the other hand, it can also obtain user input data regarding the requirements for modifying and updating the target page element; For example, the user's input text requesting modification or update of the target page element can be obtained through the interactive interface; It should be noted that the steps of the above service program in finding the page code fragment corresponding to the target page element from the page code after the visual rendering of the business travel service page, and obtaining the code context related to the target page element contained in the page code fragment, and the steps of the above service program in obtaining the user's input requirement data for modifying and updating the target page element, can be executed simultaneously in practical applications, or the former can be executed before the latter, or the former can be executed after the latter. This specification will not impose any special restrictions on the execution order of the two.

[0074] For example, see Figure 3 In one example, the aforementioned service program can first search for the page code snippet corresponding to the target page element in the visually rendered page code corresponding to the business travel service page, and obtain the code context related to the target page element contained in the page code snippet. After obtaining the code context related to the target page element, the program can further output and display the code context to the user through the interactive interface, and then obtain the user's input request data for modifying and updating the target page element through the interactive interface.

[0075] In some embodiments, in order to be compatible with the front-end development framework used in the above-mentioned business travel service page, in practical applications, the code context related to the target page element can be obtained from the page code snippet corresponding to the target page element based on the information access capabilities of the front-end development framework used in the above-mentioned business travel service page itself.

[0076] The specific type of front-end development framework used in the aforementioned business travel service page will not be specifically limited in this specification. In practical applications, it can be flexibly selected based on specific needs.

[0077] In some embodiments, the front-end development framework used by the aforementioned business travel service page may specifically include a front-end development framework that supports component-based page development.

[0078] Component-based page development is a development model that breaks down the user interface into independent, reusable, and autonomous "components." Each component encapsulates a specific structure (HTML), style (CSS), and behavior (JavaScript), allowing for independent development, testing, and maintenance. These components can be combined in different scenarios to build complex user interfaces. A business travel service page developed using this front-end framework is typically logically divided into several development components, each corresponding to one or more page elements. The final page code for this business travel service page can contain several code snippets that correspond one-to-one with each page element within the page.

[0079] In some front-end development frameworks that support component-based page development, a coordinator (also known as a coordination engine) can usually be configured to coordinate and manage the rendering and update tasks of the page elements contained within the page. This coordinator typically allows assigning different work units to each page element; these work units can specifically execute rendering tasks for visually rendering page elements and update tasks for updating page elements. In addition, the coordinator can provide fine-grained access to component information for each component within the page, allowing the coordinator to precisely control the rendering and updating of each component and each page element contained within it.

[0080] By breaking down page elements into different units of work, it's no longer necessary to render and update the page as a whole. This allows for asynchronous rendering and updating of individual page elements. For example, when only some page elements need modification or updating, only those elements can be modified and updated precisely, without affecting other page elements.

[0081] In this scenario, when the aforementioned service program obtains the pre-injected code context contained in the page code snippet corresponding to the target page element, it can specifically call the coordinator configured in the front-end development framework. The coordinator then traverses the managed work units corresponding to each page element contained in the business travel service page, searches for the target work unit corresponding to the target page element from the work units corresponding to each page element contained in the business travel service page, and further obtains the pre-injected code context related to the target page element contained in the page code snippet corresponding to the target page element through the target work unit.

[0082] In some embodiments, taking a front-end development framework using JavaScript as an example (of course, it can also be a front-end development framework using other programming languages; for example, Python), the aforementioned front-end development framework may include a front-end development framework based on React-16 (a version of React), in which a Fiber coordinator can be configured; wherein, the React framework is a JavaScript library for building user interfaces, the core idea of ​​which is to break down the UI page into independent and reusable components, and achieve efficient rendering through declarative design and virtual DOM technology.

[0083] The React-16-based front-end development framework supports component-based page development. The Fiber coordinator, introduced in React-16, is a coordination algorithm framework used to coordinate and manage the rendering and updating tasks of page elements. It provides fine-grained access to component information for each component, allowing the Fiber coordinator to precisely control the rendering and updating of each component and its constituent page elements. The Fiber coordinator can assign different Fiber nodes to each page element. These Fiber nodes are used to perform rendering tasks (visual rendering) and update tasks (updating) of the page element.

[0084] In this scenario, when the service program obtains the pre-injected code context contained in the page code snippet corresponding to the target page element, it can specifically call the Fiber coordinator configured in the front-end development framework. The Fiber coordinator then traverses the managed Fiber nodes corresponding to each page element contained in the business travel service page, searches for the target Fiber corresponding to the target page element from the Fibers corresponding to each page element contained in the business travel service page, and further obtains the pre-injected code context related to the target page element contained in the page code snippet corresponding to the target page element through the target Fiber.

[0085] For example, the utility function corresponding to the target Fiber can be used to further obtain the pre-injected code context related to the target page element contained in the page code snippet corresponding to the target page element; for example, the getElementFiber function can be used to determine the Fiber node corresponding to the target page element, the getFiberName function can be used to extract the node name of the Fiber node corresponding to the target page element, and the getElementCodeInfo function can be used to extract the code context information corresponding to the target page element.

[0086] In the above embodiments, by utilizing the coordinator introduced in the front-end development framework that supports component-based page development to allocate work units to the target page elements, the code context corresponding to the target page elements can be obtained. This allows the service program to be compatible with the front-end development framework used by the business travel service page. Instead of rendering and updating the page as a whole, it can asynchronously update the target page elements operated by the user, thereby improving the compatibility of the solution and reducing the implementation cost and overhead.

[0087] For example, by utilizing the coordinator introduced in the front-end development framework that supports component-based page development to allocate work units to the target page element, the code context corresponding to the target page element can be obtained. This allows the existing information retrieval capabilities of the front-end development framework to obtain the code context related to the target page element, eliminating the need to develop a separate program in the service program to read the code context related to the target page element from the page code fragment corresponding to the target page element. In this way, not only can the compatibility of the solution be improved, but the implementation cost and overhead of the solution can also be reduced.

[0088] In some embodiments, the front-end development framework used in the aforementioned business travel service page may specifically include a front-end development framework that supports component-based page development and plug-in functionality for the provided services; in this case, the aforementioned service program may specifically include a service plugin implemented on the business travel service page based on the front-end development framework.

[0089] For example, the front-end development framework used in the aforementioned business travel service page could specifically include the UMI framework. The UMI framework is a component-based, pluggable enterprise-level front-end application framework for page development. In this case, the aforementioned service program could specifically include a UMI service plugin implemented on the business travel service page based on this UMI framework.

[0090] Step 204: Input the requirement data and the code context into the LLM, so that the LLM can parse the requirement data to determine the user's modification requirements for the target page element, and generate a page code snippet that meets the modification requirements based on the code context; Please continue reading Figure 3Once the aforementioned service program obtains the user's input request data for modifying and updating the target page element and the corresponding code context, it can input the request data and the code context into the LLM. The LLM will then perform semantic analysis on the request data to determine the user's modification request for the target page element, and generate a page code fragment that satisfies the modification request based on the code context.

[0091] For example, in some embodiments, the aforementioned service program may specifically include a server-side program and a client-side program. The server-side program may be an LLM-based page element editor implemented in the background, and the client-side program may be a service plugin (such as a UMI plugin) implemented in the business travel service interface. In this case, after the service plugin obtains the user-inputted requirement data and the code context corresponding to the target page element, it can further submit the requirement data and code context to the page element editor. The page element editor then constructs prompts based on the requirement data and code context and inputs these prompts to the LLM. The LLM then performs inference calculations based on the prompts and generates page code fragments that meet the user's modification requirements based on the code context.

[0092] Step 206: Modify and update the target page elements based on the page code snippet generated by the LLM.

[0093] Please continue reading Figure 3 Once the LLM generates a page code snippet that meets the user's modification requirements based on the code context associated with the target page element, the aforementioned service program can obtain the page code snippet returned by the LLM, and then modify and update the target page element contained in the aforementioned business travel service page based on the obtained page code snippet.

[0094] In some embodiments, after obtaining the page code snippet generated by LLM, the service program can further output and display the page code snippet to the relevant developers so that the relevant developers can manually confirm the page code snippet. After the relevant developers confirm the page code snippet, the target page elements contained in the business travel service page can be further modified and updated based on the page code snippet.

[0095] Of course, in practical applications, provided that the above code context contains sufficient contextual information, the page code snippet generated by LLM can be used instead of being output to the relevant developers for manual confirmation. Instead, the target page elements contained in the above business travel service page can be directly modified and updated based on the page code snippet.

[0096] The method of modifying and updating the target page elements contained in the aforementioned business travel service page based on the page code snippet can be either to apply the page code snippet in real time in the development project corresponding to the business travel service page to modify and update the target page elements in real time, or to modify and update the target page elements asynchronously based on the existing asynchronous modification and update mechanism of the front-end development framework.

[0097] For example, in some embodiments, please continue to see Figure 3 The aforementioned service program can replace the page code snippets corresponding to the target page element in the page code file corresponding to the business travel service page with page code snippets regenerated by LLM. Based on the existing asynchronous modification and update mechanism, the page can periodically check whether the page code snippets corresponding to each page element in the page code file have been updated. Once an update is detected for the page code snippet corresponding to the target page element, the page can further trigger the front-end development framework to recompile and re-render the page code snippet, without needing to recompile and re-render the business travel service page as a whole.

[0098] In the above embodiments, by transforming the traditional "design-development-debugging" development model used when modifying page elements contained in a page into an intelligent development model of "click element-AI understanding-automatic generation", not only can development efficiency be greatly improved, but the development threshold for modifying page elements contained in a page can also be significantly reduced. This allows non-developers to quickly and accurately modify page elements contained in business travel service pages when encountering changes in requirements.

[0099] For example, based on the intelligent development model described above, non-developers such as UI designers or product managers no longer need the assistance of developers to reposition related components, understand code structure, and modify implementation logic when page requirements change. Instead, they only need to activate the service function of the aforementioned service program on the page, operate on the page elements that need to be updated, and input their modification requirements. The service program can then automatically obtain the complete code context and accurately generate page code snippets for modifying and updating the page elements using the inference capabilities of LLM. This intelligent development model can obviously not only significantly improve development efficiency but also greatly reduce the development threshold when modifying page elements.

[0100] Corresponding to the embodiments of the foregoing methods, this specification also provides embodiments of apparatus, electronic devices, and storage media.

[0101] Figure 4This is a schematic structural diagram of an electronic device provided in an exemplary embodiment. Please refer to... Figure 4 At the hardware level, the device includes a processor 402, an internal bus 404, a network interface 406, memory 408, and non-volatile memory 410, and may also include other necessary hardware. One or more embodiments of this specification can be implemented in software, for example, the processor 402 reads the corresponding computer program from the non-volatile memory 410 into memory 408 and then runs it. Of course, in addition to software implementation, one or more embodiments of this specification do not exclude other implementation methods, such as logic devices or a combination of hardware and software, etc. That is to say, the execution subject of the following processing flow is not limited to each logic unit, but can also be hardware or logic devices.

[0102] like Figure 5 As shown, Figure 5 This specification is a block diagram illustrating a visual code generation apparatus for a business travel service interface according to an exemplary embodiment. This apparatus can be applied to applications such as... Figure 4 The illustrated electronic device is used to implement the technical solution of this specification. The device can be applied to a service program corresponding to a business travel service page; the service program includes a service program built based on LLM; the service program is used to generate page code that modifies and updates page elements contained in the business travel service page; wherein the page code after visual rendering corresponding to the business travel service page includes page code fragments corresponding to several page elements; the page code fragment corresponding to any page element includes a pre-injected code context related to the page element; the device includes: The detection module 501 detects user operations on page elements contained in the business travel service page; The acquisition module 502, in response to a detected user operation on any target page element contained in the business travel service page, searches for a page code fragment corresponding to the target page element from the page code after visual rendering corresponding to the business travel service page, and acquires the code context related to the target page element contained in the page code fragment; and acquires the user-inputted requirement data for modifying and updating the target page element. The input module 503 inputs the requirement data and the code context into the LLM, so that the LLM can parse the requirement data to determine the user's modification requirements for the target page element, and generate a page code snippet that meets the modification requirements based on the code context; The update module 504 modifies and updates the target page elements based on the page code snippet generated by the LLM.

[0103] Accordingly, this specification also provides an electronic device including a processor; a memory for storing processor-executable instructions; wherein the processor is configured to implement all the steps in the previously described method flow.

[0104] Accordingly, this specification also provides a computer-readable storage medium having stored thereon executable computer program instructions; wherein, when executed by a processor, the instructions implement all the steps in the previously described method flow.

[0105] Accordingly, this specification also provides a computer program product having executable computer program instructions stored thereon; wherein, when the computer program instructions are executed by a processor, they implement all the steps in the previously described method flow.

[0106] The systems, devices, modules, or units described in the above embodiments can be implemented by computer chips or physical entities, or by products with certain functions. A typical implementation device is a server system. Of course, it is not excluded that with the future development of computer technology, the computer implementing the functions of the above embodiments may be, for example, a personal computer, a laptop computer, an in-vehicle human-machine interaction device, a cellular phone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or any combination of these devices.

[0107] While one or more embodiments of this specification provide the operational steps of the methods described in the embodiments or flowcharts, more or fewer operational steps may be included based on conventional or non-inventive means. The order of steps listed in the embodiments is merely one possible order of execution among many steps and does not represent the only possible order. In actual device or end product execution, the methods shown in the embodiments or drawings may be executed sequentially or in parallel (e.g., in a parallel processor or multi-threaded processing environment, or even a distributed data processing environment). The terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, product, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, product, or apparatus. Without further limitations, it is not excluded that the process, method, product, or apparatus that includes the elements may also have other identical or equivalent elements. For example, the use of terms such as "first," "second," etc., is used to indicate names and does not indicate any particular order.

[0108] For ease of description, the above devices are described in terms of function, divided into various modules. Of course, when implementing one or more of these specifications, the functions of each module can be implemented in one or more software and / or hardware components, or a module that performs the same function can be implemented by a combination of multiple sub-modules or sub-units. The device embodiments described above are merely illustrative. For example, the division of units is only a logical functional division; in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the coupling or direct coupling or communication connection shown or discussed may be through some interfaces, indirect coupling or communication connection between devices or units, and may be electrical, mechanical, or other forms.

[0109] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0110] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0111] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0112] In a typical configuration, a computing device includes one or more processors (CPU), input / output interfaces, network interfaces, and memory.

[0113] Memory may include non-persistent storage in computer-readable media, such as random access memory (RAM) and / or non-volatile memory, such as read-only memory (ROM) or flash RAM. Memory is an example of computer-readable media.

[0114] Computer-readable media, including both permanent and non-permanent, removable and non-removable media, can store information using any method or technology. Information can be computer-readable instructions, data structures, program modules, or other data. Examples of computer storage media include, but are not limited to, phase-change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technologies, CD-ROM, digital versatile optical disc (DVD) or other optical storage, magnetic tape, magnetic magnetic disk storage, graphene storage or other magnetic storage devices, or any other non-transferable medium that can be used to store information accessible by a computing device. As defined herein, computer-readable media does not include transient computer-readable media, such as modulated data signals and carrier waves.

[0115] Those skilled in the art will understand that one or more embodiments of this specification can be provided as a method, system, or computer program product. Therefore, one or more embodiments of this specification may take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, one or more embodiments of this specification may take the form of a computer program product implemented on one or more computer-usable storage media (including, but not limited to, disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0116] One or more embodiments of this specification can be described in the general context of computer-executable instructions, such as program modules, that are executed by a computer. Generally, program modules include routines, programs, objects, components, data structures, etc., that perform a particular task or implement a particular abstract data type. One or more embodiments of this specification can also be practiced in distributed computing environments where tasks are performed by remote processing devices connected via a communication network. In a distributed computing environment, program modules can reside in local and remote computer storage media, including storage devices.

[0117] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, system embodiments are basically similar to method embodiments, so the description is relatively simple; relevant parts can be referred to the descriptions in the method embodiments. In the description of this specification, the terms "one embodiment," "some embodiments," "example," "specific example," or "some examples," etc., refer to specific features, structures, materials, or characteristics described in connection with that embodiment or example, which are included in at least one embodiment or example of this specification. In this specification, the illustrative expressions of the above terms do not necessarily refer to the same embodiment or example. Furthermore, the specific features, structures, materials, or characteristics described can be combined in any suitable manner in one or more embodiments or examples. Moreover, without contradiction, those skilled in the art can combine and integrate the different embodiments or examples described in this specification and the features of different embodiments or examples.

[0118] The above description is merely an embodiment of one or more embodiments of this specification and is not intended to limit the scope of this specification. Various modifications and variations can be made to the one or more embodiments of this specification by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this specification should be included within the scope of the claims.

Claims

1. A visual code generation method for a business travel service page, applied to a service program corresponding to the business travel service page; the service program includes a service program built based on LLM; the service program is used to generate page code that modifies and updates page elements contained in the business travel service page; wherein, The page code after the visual rendering corresponding to the business travel service page contains page code snippets corresponding to several page elements; The page code snippet corresponding to any page element contains a pre-injected code context related to the page element; the method includes: The system detects user actions on page elements contained in the business travel service page; in response to the detected user actions on any target page element contained in the business travel service page, it searches for the page code fragment corresponding to the target page element from the page code after visual rendering corresponding to the business travel service page, and obtains the code context related to the target page element contained in the page code fragment; and it obtains the user-inputted requirement data for modifying and updating the target page element. The requirement data and the code context are input into the LLM, so that the LLM can parse the requirement data to determine the user's modification requirements for the target page element, and generate page code snippets that meet the modification requirements based on the code context; The target page elements are modified and updated based on the page code snippet generated by the LLM.

2. The method as described in claim 1, wherein the front-end development framework used by the business travel service page includes a front-end development framework that supports component-based page development; the front-end development framework is configured with a coordinator for coordinating and managing the rendering tasks of the page elements contained in the business travel service page; the coordinator supports assigning different work units to each page element contained in the business travel service page. The working unit is used to perform rendering tasks that visualize and render page elements; Obtain the pre-injected code context contained in the page code snippet, including: The coordinator configured in the front-end development framework is invoked to traverse the work units corresponding to each page element contained in the business travel service page, which are managed by the coordinator. The target work unit corresponding to the target page element is found from the work units corresponding to each page element contained in the business travel service page, and the pre-injected code context contained in the page code snippet is further obtained through the target work unit.

3. The method as described in claim 2, wherein the front-end development framework includes a React-based front-end development framework; the coordinator includes a Fiber coordinator; and the work unit includes a Fiber node.

4. The method as described in claim 2, wherein the front-end development framework includes a front-end development framework that supports component-based page development and supports plug-in-based service functions; the service program includes service plug-ins implemented on the business travel service page based on the front-end development framework.

5. The method as described in claim 1, wherein the page code after visualization rendering includes HTML code; the page code fragment corresponding to the target page element includes the page code fragment related to the DOM element corresponding to the target page element contained in the HTML code; and the code context is stored in a custom attribute pre-injected in the page code fragment with the prefix "data".

6. The method of claim 2, wherein injecting code context related to the page elements contained in the business travel service page into the page code after the visualization rendering, includes: In the stage of compiling the page code corresponding to the business travel service page developed based on the front-end development framework using the code compiler in the front-end development framework, code context related to each page element is injected into the page code fragments corresponding to each page element contained in the page code. or, During the stage of visual rendering of the compiled page code, code context related to each page element is injected into the page code fragments corresponding to each page element contained in the page code.

7. The method as described in claim 1, wherein the code context corresponding to the target page element includes: The path to the code file of the page code corresponding to the business travel service page; The location information of the page code snippet within the page code; The development project context associated with the development project of the page code; And, one or more of the following information in combination: The source code snippet specified from the page code; Screenshot files related to the target page element.

8. The method of claim 7, wherein the development project context includes: Information on the technology stack used to develop the page code; And the coding standards adopted by the development project of the page code.

9. A computer device, comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 8.

10. A computer program product comprising a computer program that, when executed by a processor, implements the steps of the method of any one of claims 1 to 8.

Images