Generation method and device of interactive graphical interface and electronic equipment
By using large language models to generate code in interface development and combining canvas containers for rendering, the problems of low interface development efficiency and poor rendering performance in traditional technologies are solved, and more efficient interface development and rendering performance improvements are achieved.
Patent Information
- Application Number
- CN202411829769.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-12-11
- Publication Date
- 2025-04-15
AI Technical Summary
Traditional interface development relies on HTML DOM, resulting in low development efficiency, inconsistent rendering across operating system interfaces, and low rendering performance of interactive graphical interfaces.
By receiving operation information on the target interface, using a large language model to generate corresponding code files, and drawing and rendering in a pre-configured canvas container, to generate an interactive graphical interface for the target.
It improves interface development efficiency and interactive graphical interface generation efficiency, improves rendering performance and enhances customization capabilities, and solves the problems of low rendering performance and limited customization capabilities in traditional technologies.
Smart Images

Figure CN119829056A_ABST
Abstract
Description
Technical Field
[0001] The present application relates to the field of artificial intelligence, and more specifically, to a method, device and electronic device for generating an interactive graphical interface. Background Art
[0002] Traditional interface development usually relies on the Document Object Model (DOM) of Hypertext Markup Language (HTML) to generate the user interface. This approach is inefficient, with inconsistent interface rendering across operating systems. Complex layouts and frequent DOM updates affect performance, causing page freezes and rendering performance bottlenecks. In addition, some complex visual effects need to be implemented in conjunction with other drawing interfaces, making data transfer cumbersome and limiting customization capabilities.
[0003] To address the above-mentioned problems, no effective solution has been proposed yet. Summary of the invention
[0004] The embodiments of the present application provide a method, device and electronic device for generating an interactive graphical interface, so as to at least solve the technical problems in the related art of using a document object model suitable for hypertext markup language to generate a user interface during interface development, which has low development efficiency, inconsistent interface rendering across operating systems and low rendering performance of the interactive graphical interface.
[0005] According to one aspect of an embodiment of the present application, a method for generating an interactive graphical interface is provided, comprising: receiving operation information of a target object through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface; obtaining a code file corresponding to the target interactive graphical interface based on the operation information, wherein the code file is generated by a large language model based on preset description information; and performing drawing and rendering based on a pre-configured canvas container and the code file to generate the target interactive graphical interface.
[0006] Furthermore, obtaining a code file corresponding to the target interactive graphical interface according to the operation information includes: parsing the operation information to obtain identification information of the target interactive graphical interface; and loading the code file in a running page of the target interface according to the identification information.
[0007] Furthermore, drawing and rendering are performed based on a pre-configured canvas container and code file to generate a target interactive graphical interface, including: initializing the environment of the canvas container, and parsing the code file to obtain the interface description information contained in the code file; based on the interface description information, components are drawn on the canvas using a preset interface, and animation effects and interaction logic are bound to the drawn components to obtain the target interactive graphical interface.
[0008] Furthermore, a code file is generated through the following steps: receiving preset description information through a large language model, and performing semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; generating a corresponding user interface component object based on the component object information, and determining position information of the user interface component object based on the layout information; and generating a code file based on the user interface component object and the position information.
[0009] Furthermore, generating a corresponding user interface component object based on the component object information includes: constructing an object template based on the component object information, and configuring properties of the object template to obtain a configured object template; defining states and interactive behaviors of the configured object template to obtain a user interface component object.
[0010] Furthermore, generating a corresponding user interface component object according to the component object information includes: obtaining an object template corresponding to the component type information from a preset component library according to the component type information in the component object information, and obtaining the user interface component object.
[0011] Furthermore, determining the position information of the user interface component object based on the layout information includes: determining the baseline coordinates of the user interface component object based on the layout information; determining the arrangement information of the user interface component object based on a preset layout strategy; and determining the position information of the user interface component object based on the baseline coordinates and the arrangement information.
[0012] Furthermore, before generating a code file based on the user interface component object and location information, the method also includes: obtaining rule information contained in the preset description information, wherein the rule information is used to constrain the code file; and determining the hierarchical relationship corresponding to the user interface component object based on the rule information.
[0013] Furthermore, after generating the target interactive graphical interface, the method further includes: if an input event of the target object is detected, determining the target component according to the input event, and triggering a component state change corresponding to the target component.
[0014] According to another aspect of an embodiment of the present application, a method for generating an interactive graphical interface is also provided, including: obtaining operation information of a target object uploaded by a client, wherein the operation information is used to request generation of a target interactive graphical interface; obtaining a code file corresponding to the target interactive graphical interface in a cloud server based on the operation information, wherein the code file is generated by a large language model based on preset description information; and feeding the code file back to the client for drawing and rendering based on a pre-configured canvas container and the code file to generate the target interactive graphical interface.
[0015] According to another aspect of an embodiment of the present application, a device for generating an interactive graphical interface is also provided, including: a receiving unit, used to receive operation information of a target object through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface; a first acquisition unit, used to acquire a code file corresponding to the target interactive graphical interface based on the operation information, wherein the code file is generated by a large language model based on preset description information; a first generation unit, used to perform drawing and rendering based on a pre-configured canvas container and code file to generate a target interactive graphical interface.
[0016] Furthermore, the first acquisition unit includes: a first parsing subunit, used to parse the operation information to obtain identification information of the target interactive graphical interface; and a first processing subunit, used to load the code file in the running page of the target interface according to the identification information.
[0017] Furthermore, the first generation unit includes: a second parsing sub-unit, used to initialize the environment of the canvas container and parse the code file to obtain the interface description information contained in the code file; a second processing sub-unit, used to draw components on the canvas based on the interface description information using a preset interface, and to perform animation effects and interaction logic binding on the drawn components to obtain a target interactive graphical interface.
[0018] Furthermore, the device also includes the following units, which are used to generate a code file through the following steps: a processing unit, which is used to receive preset description information through a large language model, and perform semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; a first determination unit, which is used to generate a corresponding user interface component object based on the component object information, and determine the position information of the user interface component object based on the layout information; a second generation unit, which is used to generate a code file based on the user interface component object and the position information.
[0019] Furthermore, the first determination unit includes: a third processing sub-unit, used to construct an object template based on component object information, and configure properties of the object template to obtain a configured object template; a fourth processing sub-unit, used to define the state and interactive behavior of the configured object template to obtain a user interface component object.
[0020] Furthermore, the first determination unit also includes: a fifth processing subunit, which is used to obtain an object template corresponding to the component type information from a preset component library according to the component type information in the component object information, and obtain a user interface component object.
[0021] Furthermore, the first determination unit also includes: a first determination sub-unit, used to determine the baseline coordinates of the user interface component object based on the layout information; a second determination sub-unit, used to determine the arrangement information of the user interface component object based on the preset layout strategy; and a third determination sub-unit, used to determine the position information of the user interface component object based on the baseline coordinates and the arrangement information.
[0022] Furthermore, the device also includes: a second acquisition unit, used to obtain rule information contained in the preset description information before generating a code file based on the user interface component object and location information, wherein the rule information is used to constrain the code file; a second determination unit, used to determine the hierarchical relationship corresponding to the user interface component object based on the rule information.
[0023] Furthermore, the device also includes: a third determination unit, which is used to determine the target component according to the input event after generating the target interactive graphical interface, if an input event of the target object is detected, and trigger a component state change corresponding to the target component.
[0024] According to another aspect of an embodiment of the present invention, there is also provided an electronic device, comprising: a memory storing an executable program; and a processor for running the program, wherein when the program is running, any one of the above-mentioned methods for generating an interactive graphical interface is executed.
[0025] According to another aspect of an embodiment of the present invention, a computer-readable storage medium is provided, wherein the storage medium stores a program, wherein when the program is running, the device where the storage medium is located is controlled to execute any of the above-mentioned methods for generating an interactive graphical interface.
[0026] According to another aspect of an embodiment of the present invention, a computer program product is provided, including a computer program or instructions, and when the computer program or instructions are executed by a processor, any of the above methods for generating an interactive graphical interface is implemented.
[0027] In an embodiment of the present application, operation information of a target object is received through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface; a code file corresponding to the target interactive graphical interface is obtained based on the operation information, wherein the code file is generated by a large language model based on preset description information; and a target interactive graphical interface is generated by drawing and rendering based on a pre-configured canvas container and code file. The large language model and the canvas container are combined, a code file for drawing a user interface is generated through the large language model, and the canvas container is used as a drawing area for a page, thereby effectively improving development efficiency and rendering performance, thereby achieving the purpose of significantly improving rendering performance and customization capabilities, thereby achieving the technical effect of improving interface development efficiency and improving the generation efficiency of an interactive graphical interface, thereby solving the technical problems in the related art of using a document object model suitable for a hypertext markup language to generate a user interface during interface development, resulting in low development efficiency, inconsistent interface rendering across operating systems, and low rendering performance of an interactive graphical interface. BRIEF DESCRIPTION OF THE DRAWINGS
[0028] The drawings described herein are used to provide a further understanding of the present application and constitute a part of the present application. The illustrative embodiments of the present application and their descriptions are used to explain the present application and do not constitute an improper limitation on the present application. In the drawings:
[0029] Figure 1 is a schematic diagram of a computer terminal provided according to Embodiment 1 of the present application;
[0030] Figure 2 is a flowchart of a method for generating an interactive graphical interface according to Embodiment 1 of the present application;
[0031] Figure 3 is a schematic diagram of a generation framework of an optional interactive graphical interface provided according to Embodiment 1 of the present application;
[0032] Figure 4 It is a schematic diagram of the optional component development provided according to the first embodiment of the present application;
[0033] Figure 5 It is a schematic diagram of optional page development provided according to the first embodiment of the present application;
[0034] Figure 6 is a flowchart of a method for generating an interactive graphical interface according to Embodiment 2 of the present application;
[0035] Figure 7 is a schematic diagram of a device for generating an interactive graphical interface according to Embodiment 3 of the present application;
[0036] Figure 8It is a structural block diagram of an electronic device provided according to Embodiment 4 of the present application. DETAILED DESCRIPTION
[0037] In order to enable those skilled in the art to better understand the present application, the technical solutions in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work should fall within the scope of protection of this application.
[0038] It should be noted that the terms "first", "second", etc. in the specification and claims of the present application and the above-mentioned drawings are used to distinguish similar objects, and are not necessarily used to describe a specific order or sequence. It should be understood that the data used in this way can be interchangeable where appropriate, so that the embodiments of the present application described herein can be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any of their variations are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device comprising a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.
[0039] It should be noted that 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, stored data, displayed data, etc.) involved in this application are all information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of relevant data must comply with relevant laws, regulations and standards in the relevant regions, and provide corresponding operation entrances for users to choose to authorize or refuse.
[0040] Example 1
[0041] According to an embodiment of the present application, a method for generating an interactive graphical interface is also provided. It should be noted that the steps shown in the flowchart of the accompanying drawings can be executed in a computer system such as a set of computer executable instructions, and although a logical order is shown in the flowchart, in some cases, the steps shown or described can be executed in an order different from that shown here.
[0042] The method embodiment provided in the first embodiment of the present application can be executed in a mobile terminal, a computer terminal or a similar computing device. Figure 1 The hardware structure block diagram of a computer terminal (or mobile device) for implementing a method for generating an interactive graphical interface is shown. Figure 1As shown, the computer terminal (or mobile device) 10 may include a processor set 102 (the processor set 102 may include but is not limited to a processing device such as a microprocessor (Microcontroller Unit, referred to as MCU) or a programmable logic device (Field Programmable Gate Array, referred to as FPGA), and the processor set 102 may include a processor set, Figure 1 102a, 102b, ..., 102n are used to illustrate), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a Universal Serial Bus (USB) port (which may be included as one of the ports of the BUS bus), a network interface, a power supply and / or a camera. It can be understood by those skilled in the art that Figure 1 The structure shown is only for illustration and does not limit the structure of the above electronic device. Figure 1 More or fewer components as shown, or with Figure 1 Different configurations shown.
[0043] It should be noted that the one or more processors 102 and / or other data processing circuits described above may generally be referred to herein as "data processing circuits". The data processing circuits may be embodied in whole or in part as software, hardware, firmware, or any other combination thereof. In addition, the data processing circuits may be a single independent processing module, or may be integrated in whole or in part into any of the other components in the computer terminal 10 (or mobile device).
[0044] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the method for generating an interactive graphical interface in the embodiment of the present application. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, that is, the method for generating an interactive graphical interface described above is realized. The memory 104 may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include a memory remotely arranged relative to the processor 102, and these remote memories may be connected to the computer terminal 10 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0045] The transmission device 106 is used to receive or send data via a network. The specific example of the above network may include a wireless network provided by a communication provider of the computer terminal 10. In one example, the transmission device 106 includes a network adapter (Network Interface Controller, referred to as NIC), which can be connected to other network devices through a base station so as to communicate with the Internet. In one example, the transmission device 106 can be a radio frequency (RF) module, which is used to communicate with the Internet wirelessly.
[0046] The display may be a touch screen type liquid crystal display that enables a user to interact with a user interface of the computer terminal 10 (or mobile device).
[0047] Traditional interface development usually relies on HTML DOM to generate user interfaces. This approach is inefficient, with inconsistent interface rendering across operating systems. Complex layouts and frequent DOM updates can affect performance, causing page freezes and rendering performance bottlenecks. In addition, some complex visual effects need to be implemented in conjunction with other drawing interfaces, making data transfer cumbersome and limiting customization capabilities.
[0048] In the above technical background, the present application provides Figure 2 A method for generating an interactive graphical interface as shown. Figure 2 This is a flow chart of a method for generating an interactive graphical interface according to the first embodiment of the present application. The method includes:
[0049] Step S201: receiving operation information of a target object through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface.
[0050] Optionally, taking the target interface as a shopping interface, the target object may be a user using the shopping interface, and the operation information may be the search information entered by the user in the shopping interface. For example, if the user enters "dress" in the search bar of the shopping interface, the target interactive graphical interface may be a list interface displaying product cards of multiple dresses.
[0051] Step S202: acquiring a code file corresponding to the target interactive graphical interface according to the operation information, wherein the code file is generated by a large language model according to preset description information.
[0052] Optionally, a code file corresponding to the target interactive graphical interface is obtained according to the operation information, for example, a code file corresponding to the list interface of the product cards showing multiple dresses is obtained. The code file is generated by a large language model (LLM) according to preset description information. The large language model can be a pre-trained large language model based on the encapsulated Canvas component framework combined with the information retrieval and enhanced generation (RAG) technology. The preset description information includes at least the role definition information, skill definition information and function information to be implemented of the large language model, as shown below:
[0053] Role: Senior front-end development engineer.
[0054] Skills: Proficient in all front-end technologies, especially Canvas-related skills, and all frameworks and libraries.
[0055] Action: Implement a top-down structured product card, including product images, product titles, product descriptions, product prices, product tags, store tag information, etc., and render it visually through Canvas. The overall size of the card is 200px wide and 400px high, and the product card has an 8px rounded corner.
[0056] Constraints: Ensure that all content does not exceed the card range; the code logic must comply with the above format requirements; the spacing and style of the rendered cards must be accurate to ensure that there is no style confusion.
[0057] In an optional embodiment, the large language model can also be used as a front end to interact with developers. For example, the large language model can receive description information input by the developer and directly display the corresponding user interface.
[0058] Step S203 , drawing and rendering are performed according to the pre-configured canvas container and code file to generate a target interactive graphical interface.
[0059] Optionally, the pre-configured canvas container is a Web standard Canvas container, and the target interactive graphical interface can be generated by drawing and rendering according to the Canvas container and the code file. For example, the basic components in the user interface can be drawn on the canvas using the Canvas API according to the static component description in the code file.
[0060] In this solution, a large language model and a canvas container are combined, a code file for drawing a user interface is generated through the large language model, and the canvas container is used as the drawing area of the page, which effectively improves development efficiency while improving rendering performance, thereby achieving the purpose of significantly improving rendering performance and customization capabilities, thereby achieving the technical effect of improving interface development efficiency and improving the efficiency of generating interactive graphical interfaces, and further solving the technical problems in related technologies of using a document object model suitable for a hypertext markup language to generate a user interface during interface development, resulting in low development efficiency, inconsistent interface rendering across operating systems, and low rendering performance of interactive graphical interfaces.
[0061] In order to obtain the code file corresponding to the target interactive graphical interface, in the method for generating an interactive graphical interface provided in Example 1 of the present application, obtaining the code file corresponding to the target interactive graphical interface based on operation information includes: parsing the operation information to obtain identification information of the target interactive graphical interface; and loading the code file in the running page of the target interface based on the identification information.
[0062] Optionally, by parsing the operation information, the identification information of the target interactive graphical interface (such as a dress) can be obtained, and then the code file generated by the large language model can be loaded into the interface environment (such as an HTML running page) based on the identification information and executed immediately to update the user interface.
[0063] By loading the code file in the running page of the target interface, the generation efficiency of the interactive graphical interface is improved.
[0064] In order to generate a target interactive graphical interface, in the method for generating an interactive graphical interface provided in the first embodiment of the present application, drawing and rendering are performed based on a pre-configured canvas container and code file, and generating the target interactive graphical interface includes: initializing the environment of the canvas container, and parsing the code file to obtain the interface description information contained in the code file; based on the interface description information, using a preset interface to draw components on the canvas, and animating the drawn components and binding the interaction logic to obtain the target interactive graphical interface.
[0065] Optionally, first initialize the Canvas environment, for example, create or obtain an existing Canvas element, and set its width, height and other attributes to ensure that it matches the size of the target interactive graphical interface, initialize the Canvas context, and load necessary resources, such as fonts, pictures, predefined shapes and colors, etc., then parse the code file to obtain the interface description information contained in the code file, such as the type, attribute, position, size, color, font, and animation and interaction logic settings of the component, and then use the preset interface (such as Canvas API) to draw the component on the canvas according to the interface description information. For example, according to the static component description in the code file, use the Canvas API to draw the basic component on the canvas, such as using the FillRect function to draw a rectangular background, and the FillText function to add text, etc. Then, the drawn components are bound with animation effects and interaction logic to obtain the target interactive graphical interface. For example, for dynamic components and animation effects, set the corresponding initial state and parameters, such as the starting position, animation duration, easing function, etc.; register event listeners to capture input events such as mouse, touch and keyboard to achieve interaction and response between components.
[0066] In an optional embodiment, a dirty rectangle update strategy is adopted to redraw only the areas that have actually changed, avoiding unnecessary global redrawing. For complex components, such as dynamic charts or video players, they can be rendered in an off-screen Canvas in advance, and then the results can be merged into the main canvas to reduce the overhead of real-time calculations.
[0067] By using the preset interface to draw components on the canvas, the drawing capabilities are distributed to the client Canvas rendering, which can efficiently generate and update the target interactive graphical interface in the interface environment, and use the characteristics of Canvas to achieve high-performance dynamic effects and animations, thereby improving the user experience.
[0068] In order to improve the efficiency of interface development, in the method for generating an interactive graphical interface provided in Example 1 of the present application, a code file is generated through the following steps: receiving preset description information through a large language model, and performing semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; generating a corresponding user interface component object based on the component object information, and determining the location information of the user interface component object based on the layout information; and generating a code file based on the user interface component object and the location information.
[0069] Optionally, when developing the interface, the developer can input the description information of the aforementioned example into the large language model. After receiving the description information, the large language model performs semantic analysis and can learn its own role and skills, as well as the component object information (for example, component type information, attribute information, interactive behavior information, etc.) and layout information (for example, relative position information of each component, etc.) of the target interactive graphical interface. Then, the corresponding user interface component object (such as product title, product price, product label, etc.) can be generated based on the component object information, and the position information of the user interface component object can be determined based on the layout information (such as the product title is directly above the product price, etc.), and then a code file can be generated based on the user interface component object and the position information.
[0070] By generating code files for drawing user interfaces through a large language model, development efficiency is effectively improved, thereby improving the efficiency of generating interactive graphical interfaces.
[0071] In order to obtain a user interface component object, in the method for generating an interactive graphical interface provided in Example 1 of the present application, generating a corresponding user interface component object based on component object information includes: constructing an object template based on the component object information, and configuring the attributes of the object template to obtain a configured object template; defining the state and interactive behavior of the configured object template to obtain a user interface component object.
[0072] Optionally, firstly, the object template is constructed based on the component object information using the large language model, and the object template is configured with attributes to obtain a configured object template, and then the state and interactive behavior of the configured object template are defined to obtain a user interface component object. For example, a class or object template is defined for each component type and attribute mapping is performed, for example, the attribute information "the background color of the button is red" is mapped to the background color attribute of the button object, and the state and interactive behavior are defined, for example, according to "the background turns blue when the mouse hovers", different states (such as hovering state) and corresponding interactive behaviors (such as style changes when hovering) are defined for the component.
[0073] In order to obtain a user interface component object, in the method for generating an interactive graphical interface provided in Example 1 of the present application, generating a corresponding user interface component object based on component object information includes: based on component type information in the component object information, obtaining an object template corresponding to the component type information from a preset component library to obtain the user interface component object.
[0074] Optionally, a component library (i.e., a preset component library) is constructed in advance using a large language model. When generating a component object, an object template corresponding to the component type information can be obtained from the preset component library based on the component type information in the component object information to obtain a user interface component object, thereby further improving development efficiency.
[0075] In order to obtain position information, in the method for generating an interactive graphical interface provided in Example 1 of the present application, determining the position information of the user interface component object based on the layout information includes: determining the baseline coordinates of the user interface component object based on the layout information; determining the arrangement information of the user interface component object based on a preset layout strategy; and determining the position information of the user interface component object based on the baseline coordinates and the arrangement information.
[0076] Optionally, the layout information at least includes the relative position, size, hierarchical relationship of the components and the layout strategy of the container (such as grid, flow, fixed, etc.). First, the baseline coordinates of the user interface component object are determined according to the layout information. For example, the baseline coordinates of the component are determined according to the coordinates of the container or parent component in the layout information. The baseline coordinates are the starting point for the component drawing reference, which can be the upper left corner, center point or other predefined reference point of the container. Then, the arrangement information of the user interface component object is determined according to the preset layout strategy, that is, the layout strategy is applied to the component object to calculate its arrangement information. For example, for flow layout, the components will be arranged from left to right or from top to bottom until a row or a column is filled; for grid layout, the components will be evenly distributed according to the settings of rows and columns; for adaptive layout, the position and size of the components need to be dynamically adjusted according to the screen size. Then, the position information of the user interface component object is determined according to the baseline coordinates and the arrangement information, that is, the position information of the component is calculated based on the baseline coordinates and the layout strategy, including left, top, width and height.
[0077] It should be noted that the position information of the user interface component object can be determined based on the baseline coordinates and the layout strategy, ensuring that the position of the component in the canvas is accurate.
[0078] In order to constrain the uncertainty of the large language model, in the method for generating an interactive graphical interface provided in Example 1 of the present application, before generating a code file based on the user interface component object and location information, rule information contained in the preset description information is obtained, wherein the rule information is used to constrain the code file; and the hierarchical relationship corresponding to the user interface component object is determined based on the rule information.
[0079] Optionally, the rule information can be the Constrains in the description information of the above example, that is, ensure that all content does not exceed the card range; the code logic must comply with the above format requirements; the spacing and style of the rendered cards must be accurate to ensure that there is no style confusion. It can also include hierarchical information between component objects, for example, the full-discount activity label of the product is the first level, and the free shipping label is the second level, etc. The hierarchical relationship corresponding to the user interface component objects can be determined based on the rule information, for example, the full-discount activity label is displayed first, and then the free shipping label is displayed.
[0080] By obtaining the rule information contained in the preset description information, it is possible to ensure that the generated component objects and layouts conform to the expected interaction logic and design specifications, avoiding logical conflicts and errors.
[0081] In order to achieve dynamic updating and redrawing, in the method for generating an interactive graphical interface provided in Example 1 of the present application, after generating the target interactive graphical interface, if an input event of the target object is detected, the target component is determined based on the input event, and the component state change corresponding to the target component is triggered.
[0082] Optionally, if an input event of the target object is detected, for example, when a user operation is received or an event (such as a mouse click) is triggered, the corresponding target component can be determined based on the input event, and the component state change corresponding to the target component can be triggered. For example, according to the event type and the preset logic in the code file, the update of the component state or the generation of a new component is calculated, and the affected area is redrawn based on the change in the component state, rather than the entire canvas, to improve rendering efficiency.
[0083] It should be noted that the state change of the component is triggered by the input event, which realizes the real-time update of the component object state, so that the component can be re-rendered according to the new state to achieve dynamic interaction. Using the Canvas animation system, dynamic interaction design such as smooth transition and easing effect can be realized, which significantly improves the rendering performance.
[0084] In an optional embodiment, it is possible to use Figure 3 The schematic diagram shown in FIG. 1 realizes the generation of an interactive graphical interface. Figure 3 is a schematic diagram of an optional interactive graphical interface generation framework provided according to the first embodiment of the present application, such as Figure 3As shown, a user can open an application interface through a terminal device with different operating systems (operating system A, operating system B, ..., operating system N). The interface is initialized as a full-screen blank Web Canvas canvas, and the corresponding interface and interactive logic code (for example, the code file PageA.js of page A) is loaded through the Web Canvas container. The interface drawing and interactive logic are completed by calling the standard Web Canvas API or WebGL graphics library, wherein the code is generated by a pre-trained large language model, for example, the code file PageA.js of page A is generated by the pre-trained large language model based on the description information file prompt.md of page A. The pre-trained large language model is implemented based on the encapsulated Canvas component framework combined with RAG technology. The Canvas component framework layer encapsulates and implements basic elements (such as pictures, texts, buttons, etc.), animation effects and interactive event systems, wherein the Canvas component framework layer is also generated by a large language model, for example, the code file Button.js of a button is generated by the pre-trained large language model based on the description information file prompt.md of the button.
[0085] In an optional embodiment, the interactive graphical interface generation system includes a component management module, an event processing module, an animation system, a drawing engine, a rule engine, and a large language model. Among them, the component management module is responsible for the creation, update and rendering of components, the event processing module is responsible for the capture and processing of user input (mouse, keyboard, touch, etc.), the animation system supports the dynamic changes and transition effects of components, the drawing engine is responsible for using the Canvas API for efficient drawing, the rule engine is responsible for business rule description, constraining the uncertainty of the large language model, and the large language model is responsible for realizing intelligent code generation and automated interaction.
[0086] The system supports the creation and management of a variety of basic components, including but not limited to: button components, which can be configured with styles and states (such as normal, hover, and click), and support click events; text components, which support style settings such as fonts, colors, and alignments, and can handle multiple lines of text; list components, which support dynamic addition, deletion, and sorting functions, and can use custom rendering logic; card components, which can contain images, text, and buttons, and support styles such as shadows and rounded corners; form input components, which support interactions such as text input and selection boxes, and handle user input and verification; data visualization components, which support data visualization displays, such as line charts and bar charts.
[0087] The system uses event processing modules to capture user input events, such as mouse events, which support click and drag interactions of components; touch events, which support event processing such as movement of touch-screen devices; and keyboard events, which capture keyboard input and support text component input and shortcut key operations.
[0088] The dynamic changes of components are realized through the animation system, such as: smooth transition, which supports frame-by-frame changes of component properties (such as position, color, transparency, etc.); easing effect, which can use different easing functions to achieve natural animation effects, such as linear, acceleration, deceleration, etc.; frame animation, which supports time-based animation.
[0089] The drawing engine uses HTML5 Canvas API to achieve efficient rendering and has the following features: off-screen Canvas, used to cache complex components and improve performance; custom drawing, components can customize drawing logic and support flexible visual performance; update and cleanup, only redraw the areas that need to be updated, avoiding unnecessary global redrawing and improving rendering efficiency.
[0090] By integrating a large language model, the system gives users the following capabilities: intelligent component generation, where users can describe their needs in natural language, and the system automatically generates corresponding user interface (UI) components, significantly reducing the design threshold and development time; dynamic interaction design, which automatically adjusts and optimizes component layout and style based on user behavior and input to enhance user experience; automated workflow, where the system can automatically execute page drawing and interactive actions based on the user's preset needs, thereby improving development efficiency and consistency.
[0091] Figure 4 is a schematic diagram of the optional component development provided in the first embodiment of the present application, such as Figure 4 As shown, developers can develop user interface components based on the large language model, that is, generate a code file for drawing the user interface through the large language model, and generate the corresponding user interface through the canvas container.
[0092] Figure 5 is a schematic diagram of optional page development provided according to the first embodiment of the present application, such as Figure 5 As shown, developers can develop mobile pages based on the large language model, that is, generate code files for drawing user interfaces through the large language model, and generate corresponding display pages through the canvas framework.
[0093] It should be noted that the Canvas rendering driven by the large language model has a higher degree of freedom. Developers can draw any custom components on the Canvas to achieve complex graphics and animation effects that are difficult to achieve with DOM; refined user interaction can be achieved through event monitoring, and complex physical animations (such as dragging and inertia) can be supported; real-time response, Canvas supports high-frame rate animation rendering, and dynamic updates can be achieved with the large language model; there is a large space for performance optimization, and only necessary parts are redrawn through dirty rectangle updates, merged drawing, etc., to reduce performance overhead; reduce DOM operation overhead, avoid frequent DOM operations and layout rearrangements, and improve rendering performance; lightweight interface rendering, avoid redundant nodes in HTML; cross-platform consistency, HTML5 Canvas performs consistently on browsers, and can be embedded in web pages, desktops, and mobile applications; high reusability, the interface rendered by Canvas can be seamlessly ported to different platforms without the need to develop separately for each platform. The ability to generate UI through natural language allows developers and non-technical personnel to easily participate in UI design and achieve efficient dynamic interactive experience.
[0094] In an embodiment of the present application, operation information of a target object is received through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface; a code file corresponding to the target interactive graphical interface is obtained based on the operation information, wherein the code file is generated by a large language model based on preset description information; and a target interactive graphical interface is generated by drawing and rendering based on a pre-configured canvas container and code file. The large language model and the canvas container are combined, a code file for drawing a user interface is generated through the large language model, and the canvas container is used as a drawing area for a page, thereby effectively improving development efficiency and rendering performance, thereby achieving the purpose of significantly improving rendering performance and customization capabilities, thereby achieving the technical effect of improving interface development efficiency and improving the generation efficiency of an interactive graphical interface, thereby solving the technical problems in the related art of using a document object model suitable for a hypertext markup language to generate a user interface during interface development, resulting in low development efficiency, inconsistent interface rendering across operating systems, and low rendering performance of an interactive graphical interface.
[0095] It should be noted that, for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.
[0096] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods of each embodiment of the present application.
[0097] Example 2
[0098] According to an embodiment of the present application, a method for generating an interactive graphical interface is also provided, such as Figure 6 As shown, the method includes:
[0099] Step S601, obtaining operation information of a target object uploaded by a client, wherein the operation information is used to request generation of a target interactive graphical interface;
[0100] Step S602, obtaining a code file corresponding to the target interactive graphical interface in the cloud server according to the operation information, wherein the code file is generated by the large language model according to the preset description information;
[0101] Step S603, feeding back the code file to the client, so as to perform drawing and rendering according to the pre-configured canvas container and the code file, and generate a target interactive graphical interface.
[0102] Through the above scheme, the large language model and the canvas container are combined, the code file for drawing the user interface is generated by the large language model, and the canvas container is used as the drawing area of the page, which effectively improves the development efficiency and the rendering performance. The purpose of significantly improving the rendering performance and customization capabilities is achieved, thereby achieving the technical effect of improving the interface development efficiency and improving the efficiency of generating interactive graphical interfaces. This solves the technical problems in the related technology of using the document object model suitable for hypertext markup language to generate the user interface during interface development, resulting in low development efficiency, inconsistent interface rendering across operating systems, and low rendering performance of the interactive graphical interface.
[0103] In the cloud server, the specific method for generating the interactive graphical interface is the same as the method in the first embodiment, and will not be repeated here.
[0104] It should be noted that, for the aforementioned method embodiments, for the sake of simplicity, they are all expressed as a series of action combinations, but those skilled in the art should be aware that the present application is not limited by the described order of actions, because according to the present application, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also be aware that the embodiments described in the specification are all preferred embodiments, and the actions and modules involved are not necessarily required by the present application.
[0105] Through the description of the above implementation methods, those skilled in the art can clearly understand that the method according to the above embodiment can be implemented by means of software plus a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, or network device, etc.) to execute the methods of each embodiment of the present application.
[0106] Example 3
[0107] According to an embodiment of the present application, a device for generating an interactive graphical interface for implementing the above-mentioned method for generating an interactive graphical interface is also provided. Figure 7 As shown, the device includes: a receiving unit 701, a first acquiring unit 702, and a first generating unit 703.
[0108] The receiving unit 701 is used to receive operation information of a target object through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface;
[0109] A first acquisition unit 702 is used to acquire a code file corresponding to a target interactive graphical interface according to the operation information, wherein the code file is generated by a large language model according to preset description information;
[0110] The first generating unit 703 is used to perform drawing and rendering according to the pre-configured canvas container and code file to generate a target interactive graphical interface.
[0111] In the device for generating an interactive graphical interface provided in the third embodiment of the present application, the receiving unit 701 receives the operation information of the target object through the target interface, wherein the operation information is used to request the generation of the target interactive graphical interface; the first acquisition unit 702 acquires the code file corresponding to the target interactive graphical interface according to the operation information, wherein the code file is generated by the large language model according to the preset description information; the first generation unit 703 draws and renders according to the pre-configured canvas container and the code file to generate the target interactive graphical interface. In this solution, the large language model and the canvas container are combined, the code file for drawing the user interface is generated by the large language model, and the canvas container is used as the drawing area of the page, which effectively improves the development efficiency and the rendering performance, and achieves the purpose of significantly improving the rendering performance and customization capabilities, thereby achieving the technical effect of improving the interface development efficiency and the generation efficiency of the interactive graphical interface, and then solves the technical problems of low development efficiency, inconsistent cross-operating system interface rendering, and low rendering performance of the interactive graphical interface when the interface is developed in the related technology, using the document object model suitable for the hypertext markup language to generate the user interface.
[0112] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the first acquisition unit 702 includes: a first parsing sub-unit, used to parse the operation information to obtain identification information of the target interactive graphical interface; and a first processing sub-unit, used to load the code file in the running page of the target interface based on the identification information.
[0113] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the first generating unit 703 includes: a second parsing subunit, used to initialize the environment of the canvas container, and parse the code file to obtain the interface description information contained in the code file; a second processing subunit, used to draw components on the canvas based on the interface description information using a preset interface, and perform animation effects and interaction logic binding on the drawn components to obtain a target interactive graphical interface.
[0114] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the device also includes the following units, which are used to generate a code file through the following steps: a processing unit, which is used to receive preset description information through a large language model, and perform semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; a first determination unit, which is used to generate a corresponding user interface component object based on the component object information, and determine the location information of the user interface component object based on the layout information; and a second generation unit, which is used to generate a code file based on the user interface component object and the location information.
[0115] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the first determination unit includes: a third processing sub-unit, used to construct an object template based on component object information, and configure properties of the object template to obtain a configured object template; a fourth processing sub-unit, used to define the state and interactive behavior of the configured object template to obtain a user interface component object.
[0116] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the first determination unit also includes: a fifth processing sub-unit, which is used to obtain an object template corresponding to the component type information from a preset component library based on the component type information in the component object information, and obtain a user interface component object.
[0117] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the first determination unit also includes: a first determination sub-unit, used to determine the baseline coordinates of the user interface component object based on the layout information; a second determination sub-unit, used to determine the arrangement information of the user interface component object based on a preset layout strategy; and a third determination sub-unit, used to determine the position information of the user interface component object based on the baseline coordinates and the arrangement information.
[0118] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the device also includes: a second acquisition unit, used to obtain rule information contained in preset description information before generating a code file based on the user interface component object and location information, wherein the rule information is used to constrain the code file; and a second determination unit, used to determine the hierarchical relationship corresponding to the user interface component object based on the rule information.
[0119] Optionally, in the device for generating an interactive graphical interface provided in Example 3 of the present application, the device also includes: a third determination unit, which is used to determine the target component based on the input event after generating the target interactive graphical interface, if an input event of the target object is detected, and trigger a component state change corresponding to the target component.
[0120] It should be noted that the above-mentioned receiving unit 701, first obtaining unit 702, and first generating unit 703 correspond to steps S201 to S203 in Example 1, and the above-mentioned units and corresponding steps implement the same examples and application scenarios, but are not limited to the contents disclosed in the above-mentioned Example 1. It should be noted that the above-mentioned modules as part of the device can be run in the computer terminal 10 provided in Example 1.
[0121] It should be noted that the preferred implementation scheme involved in the above embodiments of the present application is the same as the scheme provided in Example 1, as well as the application scenario and implementation process, but is not limited to the scheme provided in Example 1.
[0122] Example 4
[0123] The embodiment of the present application may provide an electronic device, which may be any electronic device in a group of electronic devices. Optionally, in this embodiment, the electronic device may also be replaced by a terminal device such as a mobile terminal.
[0124] Optionally, in this embodiment, the electronic device may be located in at least one network device among a plurality of network devices of a computer network.
[0125] In this embodiment, the above-mentioned electronic device can execute the program code of the following steps in the method for generating an interactive graphical interface: receiving operation information of the target object through the target interface, wherein the operation information is used to request generation of a target interactive graphical interface; obtaining a code file corresponding to the target interactive graphical interface based on the operation information, wherein the code file is generated by a large language model based on preset description information; and drawing and rendering are performed based on a pre-configured canvas container and code file to generate a target interactive graphical interface.
[0126] The electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: parsing the operation information to obtain the identification information of the target interactive graphical interface; and loading the code file in the running page of the target interface according to the identification information.
[0127] The above-mentioned electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: initialize the environment of the canvas container, and parse the code file to obtain the interface description information contained in the code file; based on the interface description information, use the preset interface to draw components on the canvas, and perform animation effects and interactive logic binding on the drawn components to obtain the target interactive graphical interface.
[0128] The above-mentioned electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: receiving preset description information through a large language model, and performing semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; generating a corresponding user interface component object based on the component object information, and determining the location information of the user interface component object based on the layout information; and generating a code file based on the user interface component object and the location information.
[0129] The above-mentioned electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: constructing an object template based on component object information, and configuring the attributes of the object template to obtain a configured object template; defining the state and interactive behavior of the configured object template to obtain a user interface component object.
[0130] The electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: based on the component type information in the component object information, obtain the object template corresponding to the component type information from the preset component library to obtain the user interface component object.
[0131] The above-mentioned electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: determining the baseline coordinates of the user interface component object based on the layout information; determining the arrangement information of the user interface component object based on the preset layout strategy; determining the position information of the user interface component object based on the baseline coordinates and the arrangement information.
[0132] The above-mentioned electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: before generating a code file based on the user interface component object and location information, obtaining rule information contained in the preset description information, wherein the rule information is used to constrain the code file; determining the hierarchical relationship corresponding to the user interface component object based on the rule information.
[0133] The above electronic device can also execute the program code of the following steps in the method for generating an interactive graphical interface: after generating the target interactive graphical interface, if an input event of the target object is detected, the target component is determined based on the input event, and the component state change corresponding to the target component is triggered.
[0134] Optionally, Figure 8 is a structural block diagram of an electronic device according to an embodiment of the present application. Figure 8 As shown, the electronic device 80 may include: one or more ( Figure 8 Only one is shown in the figure) processor 802 and memory 804. The electronic device 80 may also include a storage controller, through which the memory 804 is controlled and managed; the electronic device 80 may also include a peripheral interface, through which the radio frequency module, audio module and display screen are connected.
[0135] Among them, the memory can be used to store software programs and modules, such as the program instructions / modules corresponding to the method and device for generating an interactive graphical interface in the embodiment of the present application. The processor executes various functional applications and data processing by running the software programs and modules stored in the memory, that is, the method for generating an interactive graphical interface described above is realized. The memory may include a high-speed random access memory, and may also include a non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory may further include a memory remotely arranged relative to the processor, and these remote memories may be connected to the terminal 10 via a network. Examples of the above-mentioned network include, but are not limited to, the Internet, an intranet, a local area network, a mobile communication network, and combinations thereof.
[0136] The processor can call the information and application stored in the memory through the transmission device to perform the following steps: receive operation information of the target object through the target interface, wherein the operation information is used to request generation of a target interactive graphical interface; obtain a code file corresponding to the target interactive graphical interface based on the operation information, wherein the code file is generated by a large language model based on preset description information; draw and render based on a pre-configured canvas container and code file to generate a target interactive graphical interface.
[0137] Optionally, the processor may also execute program codes of the following steps: parsing the operation information to obtain identification information of the target interactive graphical interface; and loading the code file in the running page of the target interface according to the identification information.
[0138] Optionally, the processor may also execute the following program code steps: initialize the environment of the canvas container, and parse the code file to obtain the interface description information contained in the code file; based on the interface description information, use a preset interface to draw components on the canvas, and perform animation effects and interaction logic binding on the drawn components to obtain the target interactive graphical interface.
[0139] Optionally, the processor may also execute the program code of the following steps: receiving preset description information through a large language model, and performing semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; generating a corresponding user interface component object based on the component object information, and determining the location information of the user interface component object based on the layout information; and generating a code file based on the user interface component object and the location information.
[0140] Optionally, the processor may also execute the following program code: construct an object template based on component object information, and configure the properties of the object template to obtain a configured object template; define the state and interactive behavior of the configured object template to obtain a user interface component object.
[0141] Optionally, the processor may also execute the program code of the following steps: based on the component type information in the component object information, obtain an object template corresponding to the component type information from a preset component library to obtain a user interface component object.
[0142] Optionally, the processor may also execute program code of the following steps: determining the baseline coordinates of the user interface component object based on layout information; determining arrangement information of the user interface component object based on a preset layout strategy; and determining position information of the user interface component object based on the baseline coordinates and arrangement information.
[0143] Optionally, the processor may also execute program code of the following steps: before generating a code file based on the user interface component object and location information, obtaining rule information contained in preset description information, wherein the rule information is used to constrain the code file; and determining the hierarchical relationship corresponding to the user interface component object based on the rule information.
[0144] Optionally, the processor may also execute program code of the following steps: after generating the target interactive graphical interface, if an input event of the target object is detected, determining the target component based on the input event, and triggering a component state change corresponding to the target component.
[0145] It can be understood by those skilled in the art that Figure 8 The structure shown is for illustration only, and the electronic device may also be a smart phone (such as an Android phone, an iOS phone, etc.), a tablet computer, a PDA, a mobile Internet device (Mobile Internet Devices, MID), a PAD, and other terminal devices. Figure 8 The structure of the electronic device is not limited. Figure 8 More or fewer components (such as network interfaces, display devices, etc.) shown in, or having Figure 8 Different configurations shown.
[0146] A person of ordinary skill in the art can understand that all or part of the steps in the various methods of the above embodiments can be completed by instructing the hardware related to the terminal device through a program, and the program can be stored in a computer-readable storage medium, and the storage medium may include: a flash drive, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk, etc.
[0147] Example 5
[0148] The embodiment of the present application further provides a computer-readable storage medium. Optionally, in this embodiment, the storage medium can be used to store the program code executed by the method for generating an interactive graphical interface provided in the first embodiment.
[0149] Optionally, in this embodiment, the above storage medium may be located in any electronic device in a group of electronic devices in a computer network, or in any mobile terminal in a group of mobile terminals.
[0150] Example 6
[0151] The embodiment of the present application further provides a computer program product. Optionally, in this embodiment, the computer program product may include a computer program, and when the computer program is executed by a processor, the method for generating an interactive graphical interface provided in the first embodiment is implemented.
[0152] The serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.
[0153] In the above embodiments of the present application, the description of each embodiment has its own emphasis. For parts that are not described in detail in a certain embodiment, please refer to the relevant description of other embodiments.
[0154] In the several embodiments provided in this application, it should be understood that the disclosed technical content can be implemented in other ways. Among them, the device embodiments described above are only schematic, for example, the division of units is only a logical function division, and there may be other division methods in actual implementation, for example, multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interfaces, indirect coupling or communication connection of units or modules, which can be electrical or other forms.
[0155] The units described as separate components may or may not be physically separated, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed on multiple network units. Some or all of the units may be selected according to actual needs to achieve the purpose of the solution of this embodiment.
[0156] In addition, each functional unit in each embodiment of the present application may be integrated into one processing unit, or each unit may exist physically separately, or two or more units may be integrated into one unit. The above-mentioned integrated unit may be implemented in the form of hardware or in the form of software functional units.
[0157] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art or all or part of the technical solution, can be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for a computer device (which can be a personal computer, server or network device, etc.) to perform all or part of the steps of each embodiment method of the present application. The aforementioned storage medium includes: U disk, read-only memory (ROM, Read-Only Memory), random access memory (RAM, Random Access Memory), mobile hard disk, disk or optical disk, etc. Various media that can store program codes.
[0158] The above are only preferred implementations of the present application. It should be pointed out that for ordinary technicians in this technical field, several improvements and modifications can be made without departing from the principles of the present application. These improvements and modifications should also be regarded as the scope of protection of the present application.
Claims
1. A method for generating an interactive graphical interface, characterized in that: include: Receiving operation information of a target object through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface; Acquire a code file corresponding to the target interactive graphical interface according to the operation information, wherein the code file is generated by a large language model according to preset description information; Drawing and rendering are performed according to the preconfigured canvas container and the code file to generate the target interactive graphical interface.
2. The method according to claim 1, characterized in that: Acquiring a code file corresponding to the target interactive graphical interface according to the operation information includes: Parsing the operation information to obtain identification information of the target interactive graphical interface; The code file is loaded into the running page of the target interface according to the identification information.
3. The method according to claim 1, characterized in that Drawing and rendering are performed according to the preconfigured canvas container and the code file to generate the target interactive graphical interface, including: Initializing the environment of the canvas container, and parsing the code file to obtain the interface description information contained in the code file; According to the interface description information, components are drawn on the canvas using a preset interface, and animation effects and interaction logic binding are performed on the drawn components to obtain the target interactive graphical interface.
4. The method according to claim 1, characterized in that: Generate the code file by following the steps below: Receiving the preset description information through the large language model, and performing semantic analysis on the preset description information to obtain component object information and layout information of the target interactive graphical interface contained in the preset description information; Generate a corresponding user interface component object according to the component object information, and determine position information of the user interface component object according to the layout information; The code file is generated according to the user interface component object and the position information.
5. The method according to claim 4, characterized in that Generating a corresponding user interface component object according to the component object information includes: Constructing an object template according to the component object information, and configuring the attributes of the object template to obtain a configured object template; The state and interaction behavior of the configured object template are defined to obtain the user interface component object.
6. The method according to claim 4, characterized in that Generating a corresponding user interface component object according to the component object information includes: According to the component type information in the component object information, an object template corresponding to the component type information is acquired from a preset component library to obtain the user interface component object.
7. The method according to claim 4, characterized in that Determining the position information of the user interface component object according to the layout information includes: Determining the baseline coordinates of the user interface component object according to the layout information; Determining arrangement information of the user interface component objects according to a preset layout strategy; The position information of the user interface component object is determined according to the baseline coordinates and the arrangement information.
8. The method according to claim 4, characterized in that Before generating the code file according to the user interface component object and the position information, the method further includes: Acquire rule information contained in the preset description information, wherein the rule information is used to constrain the code file; The hierarchical relationship corresponding to the user interface component objects is determined according to the rule information.
9. The method according to claim 1, characterized in that: After generating the target interactive graphical interface, the method further includes: If an input event of the target object is detected, a target component is determined according to the input event, and a component state change corresponding to the target component is triggered.
10. A method for generating an interactive graphical interface, characterized in that: include: Acquire operation information of the target object uploaded by the client, wherein the operation information is used to request generation of a target interactive graphical interface; Acquire, in the cloud server, a code file corresponding to the target interactive graphical interface according to the operation information, wherein the code file is generated by a large language model according to preset description information; The code file is fed back to the client so as to perform drawing and rendering according to the pre-configured canvas container and the code file to generate the target interactive graphical interface.
11. A device for generating an interactive graphical interface, characterized in that: include: A receiving unit, configured to receive operation information of a target object through a target interface, wherein the operation information is used to request generation of a target interactive graphical interface; A first acquisition unit is used to acquire a code file corresponding to the target interactive graphical interface according to the operation information, wherein the code file is generated by a large language model according to preset description information; The first generating unit is used to perform drawing and rendering according to the pre-configured canvas container and the code file to generate the target interactive graphical interface.
12. An electronic device, characterized in that: include: A memory storing an executable program; A processor is used to run the program, wherein the program, when running, executes the method for generating an interactive graphical interface according to any one of claims 1 to 10.
13. A computer program product, characterized in that The invention comprises a computer program or an instruction, which, when executed by a processor, implements the method for generating an interactive graphical interface according to any one of claims 1 to 10.
Citation Information
Cited By
Web workflow generation method and device based on large language model, equipment and medium
CN120631314A