Interface view generation method, electronic equipment and readable storage medium

Abstract

The invention provides an interface view generation method, electronic equipment and a readable storage medium, the method comprises the following steps: obtaining a view creation instruction of a user, and obtaining a plurality of first component description modes, each first component description mode describing information of one component according to a preset rule; generating first model input information according to the view creation instruction and the plurality of first component description modes; the first model input information is input into the large model, first serialized view information output by the large model is obtained, and the first serialized view information is expressed in the form of a lightweight markup language; according to the first serialized view information and a front-end frame corresponding to the target interface view, an interface view component tree matched with the front-end frame is generated through a rendering engine, and the target interface view is displayed based on the interface view component tree. The reusability, stability and quality of generated codes can be improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of computer, in particular to an interface view generation method, an electronic device and a readable storage medium. BACKGROUND

[0002] In the field of artificial intelligence (AI), generative AI technology represented by large language model (LLM) has made breakthrough progress and is gradually applied in various fields. For example, in the field of software development, LLM can be used to assist or directly generate user interfaces.

[0003] In the prior art, a user describes an interface requirement in natural language, for example, "create a form containing a username input box, a password input box and a login button". After receiving the requirement of the user, the LLM directly outputs the source code.

[0004] However, the method of the prior art is highly bound and coupled with a specific technical environment, and it is difficult to quickly reuse in different projects. In addition, the method of the prior art also has the problems of unstable generated code and uncontrollable quality. SUMMARY

[0005] The present application aims to solve the problems of poor code reusability, instability and uncontrollable quality in the prior art by providing an interface view generation method, an electronic device and a readable storage medium.

[0006] To achieve the above-mentioned purpose, the technical solutions adopted by the embodiments of the present application are as follows: In a first aspect, the present application provides an interface view generation method, comprising: obtaining a view creation instruction of a user and obtaining a plurality of first component description patterns, wherein the view creation instruction is used to describe information of a target interface view to be created in a natural language form, and each first component description pattern describes information of a component according to a preset rule; generating first model input information according to the view creation instruction and the plurality of first component description patterns; inputting the first model input information into a large model to obtain first serialized view information output by the large model, wherein the first serialized view information is represented in the form of a lightweight markup language; generating an interface view component tree adapted to a front-end framework corresponding to the target interface view through a rendering engine according to the first serialized view information and the front-end framework, and displaying the target interface view based on the interface view component tree.

[0007] In a second aspect, the present application provides an interface view generation apparatus, comprising: an acquisition module configured to acquire a view creation instruction of a user and a plurality of first component description modes, wherein the view creation instruction is used to describe information of a target interface view to be created in a natural language form, and each first component description mode describes information of a component according to a preset rule; a generation module configured to generate first model input information according to the view creation instruction and the plurality of first component description modes; a processing module configured to input the first model input information into a large model to obtain first serialized view information output by the large model, wherein the first serialized view information is represented in a form of a lightweight markup language; The generation module is further configured to generate an interface view component tree adapted to a front-end framework corresponding to the target interface view according to the first serialized view information and the front-end framework and a rendering engine, and display the target interface view based on the interface view component tree.

[0008] In a third aspect, the present application provides an electronic device, comprising a processor and a memory, wherein the memory stores machine readable instructions executable by the processor, and when the electronic device is running, the processor executes the machine readable instructions to perform the steps of the interface view generation method according to the first aspect.

[0009] In a fourth aspect, the present application provides a computer readable storage medium, wherein the computer readable storage medium stores a computer program, and when the computer program is run by a processor, the steps of the interface view generation method according to the first aspect are executed.

[0010] The interface view generation method, the electronic device and the readable storage medium provided by the application input the view creation instruction input by the user and the plurality of first component description modes into the large model, output the first serialized view information from the large model, and then the interface view component tree that can adapt to the corresponding front-end framework can be generated from the first serialized view information by the rendering engine. For the large model, on the one hand, the large model no longer directly generates code, but focuses on understanding the user's intention, and presents the result of understanding in the form of serialized view information, that is, the large model does not need to care about the syntax and specifications of the specific programming language, but only needs to focus on the semantic understanding level at which it is best at, so that the stability of the finally generated code is greatly improved. On the other hand, the large model takes the plurality of first component description modes as constraint information, so that the analysis results that do not conform to the component description mode can be rejected or corrected, thereby eliminating the generation errors of the large model. For the rendering engine, since the rendering engine runs outside the large model, it has very high stability, so based on the rendering engine to specifically generate the interface view, the controllability of the quality can be guaranteed. In addition, the large model outputs the serialized view information that is independent of the specific programming language, so it can be applied to a variety of front-end frameworks. When the front-end framework of the project changes, only the new adaptation needs to be performed by the rendering engine, that is, the output result of the large model can be applied to the new front-end framework, thereby realizing the rapid reuse of the output result of the large model. Finally, since the finally generated interface view is generated by the rendering engine, it is easier to understand than the code directly output by the large model, thereby greatly reducing the maintenance and debugging costs. BRIEF DESCRIPTION OF DRAWINGS

[0011] In order to more clearly illustrate the technical solutions of the embodiments of the application, the following will briefly introduce the drawings needed to be used in the embodiments. It should be understood that the following drawings only show some embodiments of the application, and therefore should not be regarded as a limitation on the scope. For those skilled in the art, other related drawings can also be obtained without creative labor on the basis of these drawings.

[0012] Figure 1 The scene schematic diagram of the interface view generation method provided by the application; Figure 2 The flowchart of the interface view generation method provided by the application; Figure 3 The flowchart of the interface view generation method provided by the application for generating the interface view component tree; Figure 4 The flowchart of the interface view generation method provided by the application for obtaining node information; Figure 5 The flowchart of the interface view modification of the interface view generation method provided by the application; Figure 6 A flowchart for acquiring component description information of an interface view generation method provided by the present application is shown in FIG. 1. Figure 7 A module structure diagram of an interface view generation apparatus provided by the present application is shown in FIG. 2. Figure 8 A structure diagram of an electronic device 80 provided by an embodiment of the present application is shown in FIG. 3. DETAILED DESCRIPTION

[0013] To make the objectives, technical solutions, and advantages of the embodiments of the present application clearer, the technical solutions in the embodiments of the present application will be described clearly and completely below with reference to the drawings in the embodiments of the present application. It should be understood that the drawings in the present application serve only the purpose of description and illustration, and are not used to limit the scope of protection of the present application. In addition, it should be understood that the schematic drawings are not drawn to scale. The flowcharts show the operations implemented according to some embodiments of the present application. It should be understood that the operations of the flowcharts can not be implemented in sequence, and the steps without logical context relationship can be reversed in sequence or implemented simultaneously. In addition, one or more other operations can be added to the flowcharts or one or more operations can be removed from the flowcharts under the guidance of the content of the present application.

[0014] In addition, the described embodiments are only some of the embodiments of the present application, not all the embodiments. The components of the embodiments of the present application described and shown in the drawings herein can be arranged and designed in various different configurations. Therefore, the following detailed description of the embodiments of the present application provided in the drawings is not intended to limit the scope of the claimed present application, but only represents selected embodiments of the present application. Based on the embodiments of the present application, all other embodiments obtained by those skilled in the art without creative labor fall within the scope of protection of the present application.

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

[0016] Currently, when generating a user interface using an LLM, a large model directly outputs source code according to the interface requirements described by a user in natural language. These codes may, for example, be a combination of Hyper Text Markup Language (HTML), Cascading Style Sheets (CSS), and JavaScript, or component code based on a specific front-end framework (such as React, Vue.js, Angular, Svelte, etc.).

[0017] The above processing method essentially entrusts the complex and highly deterministic coding tasks in software engineering to generative AI, which is still insufficient in logical reasoning and stability. This approach lacks the necessary abstraction and constraints, leading to unstable and uncontrollable quality of generated code, and high coupling and coupling with specific technical environments, making it difficult to quickly reuse in different projects. Specifically as follows: First, the code generated by large models is highly coupled with specific technical environments. This coupling not only exists in the choice of front-end frameworks, but also extends to the version of the framework, UI component library, state management scheme, CSS preprocessor, and even the coding specifications of the project. Once the project technology stack is upgraded or migrated, almost all the code generated by LLM needs to be discarded and cannot be quickly reused.

[0018] Second, the generated code is unstable and the quality is uncontrollable. The generation process of large language models has a certain randomness, and even for the same input prompt, the output may differ. This uncertainty leads to inconsistent quality of generated code. Common quality problems include: syntax errors: generated code does not conform to language specifications, causing compilation or runtime failures. Logic defects: such as event binding errors, incorrect state update logic, etc. Style problems: generated CSS may have layout errors, compatibility problems or design issues. Performance risks: may generate unoptimized code, causing unnecessary re-rendering or memory leaks. Violation of best practices: generated code may not comply with community-recognized best practices, such as incorrectly using useEffect in React.

[0019] Third, the maintenance and debugging cost is high. When the LLM-generated code has problems, developers need to debug it. However, understanding and debugging a piece of code generated by a "black box" model, which may have chaotic logic and lack of comments, is often much more difficult than debugging code written by oneself or colleagues. Developers need to spend a lot of time understanding the "intent" of the model and locating the root cause of the error, which greatly reduces the efficiency advantage brought by LLM code generation.

[0020] Based on the aforementioned problems, this application proposes a method for generating user interfaces (UIs). In this method, the large model no longer directly generates code but focuses on understanding user intent and presenting the results as serialized view information. For the large model, this is a task of reduced dimensionality; it doesn't need to concern itself with the syntax and specifications of specific programming languages, but only with its strongest semantic understanding. After the large model outputs serialized view information, a rendering engine outside the large model generates UIs adapted to the specific project based on this information. Since the large model only needs to focus on semantic understanding and not on specific programming languages, the stability of the generated code is greatly improved. Furthermore, the deterministic rendering engine outside the large model generates the UIs, ensuring controllable quality. Additionally, the large model outputs serialized view information independent of specific programming languages, making it applicable to various front-end frameworks. When the front-end framework of a project changes, only a new adaptation of the rendering engine is needed to apply the large model's output to the new framework, thus achieving rapid reuse of the large model's output. Finally, since the final generated UI view is generated by the rendering engine, it is easier to understand than directly outputting code from a large model, thus greatly reducing maintenance and debugging costs.

[0021] Figure 1 A schematic diagram of a scenario for the interface view generation method provided in this application, such as... Figure 1 As shown, this application can be applied to scenarios involving the automatic generation of UI view component trees. In such scenarios, a new UI view component tree can be created based on the user's view creation request, using a large model and a rendering engine. Alternatively, components in an existing UI view component tree can be added, deleted, or modified based on the user's view modification request. The rendering engine can generate a UI view component tree that adapts to the front-end framework of the actual application, ensuring that the UI view corresponding to the UI view component tree is correctly displayed in the front-end framework's interface.

[0022] Figure 2 This is a flowchart illustrating the interface view generation method provided in this application. The execution entity of this method can be any electronic device with computing capabilities. For example... Figure 2 As shown, the method includes: S201. Obtain the user's view creation instruction and obtain multiple first component description patterns, wherein the view creation instruction is used to describe the information of the target interface view to be created in natural language, and each first component description pattern describes the information of a component according to a preset rule.

[0023] Optionally, the view creation instruction is used to instruct to create a new interface view. The user can input the view creation instruction in the form of voice, text, etc. The view creation instruction can describe the information of the target interface view to be created in the form of natural language. The information of the target interface view described by the view creation instruction can include, for example, the name of the component to be displayed in the interface view, the position of the component in the interface view, the size of the component, etc. For example, a view creation instruction input by the user is "please help me generate an interface view, the first row of which displays an input box, and the second row of which displays a confirm button".

[0024] Optionally, the plurality of first component description modes are component description modes related to the target interface view to be created. Each first component description mode is a component description mode pre-registered in a component description mode library. The component description mode can also be referred to as a standardized mode of the component. As an example, the component description mode can be described by the JSON language, and accordingly, the component description mode can be referred to as JSON Schema. Before executing the technical solution of the present application, the component description mode library can be established first, and the component description modes of all components that can be used in the software project are registered in the component description mode library. Specifically, each component can have a corresponding component description mode, which describes the information of the component according to a preset rule. The preset rule can be, for example, a fixed template, etc. The information described by the component description mode can include, for example, the name of the component, the attributes involved in the component, the detailed definition of each attribute in the component, the events that can be triggered by the component, etc.

[0025] For example, all component description modes in the component description mode library include the following contents: component: is the unique identifier of the component. The component name can be, for example, dwButton, div, input, etc.

[0026] attributes: can include, for example, class, style, data-[*].

[0027] properties: detailed definition of all attributes of the component, including attribute name, data type, whether required, default value, enumeration value, etc. For example, the type attribute in a button component can be "primary" | "default" | "danger".

[0028] events: events that can be triggered by the component. For example, onClick, onChange, etc.

[0029] Since the component description mode completely describes the information of a component according to unified rules, the component description mode abstracts the component from the code implementation, forming a machine-readable and verifiable "component specification". Correspondingly, in the following steps, the plurality of first component description modes described above are input into the large model as part of the prompt word after the large model is input into the large model. This constraint makes the components in the generation result of the large model strictly conform to the constraint of the component description mode, and any attribute or usage that does not conform to the constraint can be rejected or corrected, thereby eliminating the problem of large model generation errors at the source.

[0030] S202, generating first model input information according to the view creation instruction and the plurality of first component description modes.

[0031] Optionally, the prompt word available for the large model can be generated based on the view creation instruction and the plurality of first component description modes, and the prompt word is input into the large model as the first model input information.

[0032] S203, inputting the first model input information into the large model to obtain first serialized view information output by the large model, the first serialized view information being represented in the form of a lightweight markup language.

[0033] Optionally, the large model mentioned in the present application can be a pre-trained general large language model, and the large model has strong ability in user intent understanding and semantic understanding. The present application uses the ability of the large model to understand the view creation instruction of the user, and uses the plurality of first component description modes in the first model input information as constraints to output the first serialized view information.

[0034] Optionally, the first serialized view information is used to describe the interface view indicated by the user in the view creation instruction, and the first serialized view information is represented by a lightweight markup language. Specifically, the first serialized view information is not applied to the interface view code of a specific front-end framework, but describes the information of the interface view through a lightweight markup language. Through the lightweight markup language, the component information such as the attributes of each component in the interface view can be described concisely and effectively, and the hierarchical order between each component can also be effectively described through list syntax. Using a lightweight markup language for description has the advantages of model friendliness and clear structure. At the same time, since the first serialized view information is independent of a specific front-end framework, it can be flexibly applied to various front-end frameworks as needed in subsequent steps. As an example, the first serialized view information can be described by Markdown language.

[0035] The following is an example of a fragment from the first serialized view information.

[0036] - component: dwForm(class=dw-form) - component: dwFormItem(label=Please enter stock code, type=number-input) - component: dwFormItem(label=Please select time range, type=range-picker) As can be seen from the above example, in the first serialized view information, the hierarchical order between components is represented by list syntax, and component information such as component attributes is described using concise syntax.

[0037] S204. Based on the first serialized view information and the front-end framework of the target interface view, generate an interface view component tree adapted to the front-end framework through the rendering engine, and display the target interface view based on the interface view component tree.

[0038] Optionally, the rendering engine runs outside the large model. After obtaining the first serialized view information, the rendering engine can convert the information of each component in the first serialized view information into component code under the code framework of the front-end framework according to the syntax structure of the front-end framework to be applied, while preserving the hierarchical relationship between components, thereby forming the above-mentioned interface view component tree. Specifically, the above-mentioned interface view component tree can also be called a UI Tree. Each node in the UI Tree can correspond to a component, and the content of the node can be the component code under the code framework of the front-end framework. The hierarchical relationship between the nodes in the UI Tree represents the hierarchical relationship between components.

[0039] Once the UI / UX component is loaded into the client side of the front-end framework, it will be presented as the target UI / UX after parsing and rendering.

[0040] The following are examples of adapting the first serialized view information to different front-end frameworks.

[0041] Assuming a component in the first serialized view is: { componentName: dwFormItem, props: { ...}}, then when applied to the Vue front-end framework, the h function can be used to generate... <dw-form-item v-bind="{...}" / > This component code, when applied to the React front-end framework, can be generated using React.createElement.<DwFormItem {...} / > This component's code.

[0042] In this embodiment, the view creation instruction input by the user and the plurality of first component description modes are input into the large model, the first serialized view information is output by the large model, and then the interface view component tree that can adapt to the corresponding front-end framework can be generated by the rendering engine according to the first serialized view information. For the large model, on the one hand, since the large model no longer directly generates code but focuses on understanding the user's intention and presents the result of understanding in the form of serialized view information, that is, the large model does not need to care about the syntax and specifications of specific programming languages, but only needs to focus on the semantic understanding level at which it is best at, so that the stability of the finally generated code is greatly improved. On the other hand, the large model takes the plurality of first component description modes as constraint information, so that the analysis results that do not conform to the component description modes can be rejected or corrected, thereby eliminating the generation errors of the large model. For the rendering engine, since the rendering engine runs outside the large model and has very high stability, therefore, based on the rendering engine to specifically generate the interface view, the controllability of the quality can be guaranteed. In addition, the large model outputs the serialized view information that is irrelevant to the specific programming language, so it can be applied to a variety of front-end frameworks. When the front-end framework of the project changes, only new adaptation needs to be performed by the rendering engine, that is, the output result of the large model can be applied to the new front-end framework, thereby realizing the rapid reuse of the output result of the large model. Finally, since the finally generated interface view is generated by the rendering engine, it is easier to understand than the code directly output by the large model, thereby greatly reducing the maintenance and debugging costs.

[0043] As an optional implementation, the above step S202 can include: generating a serialized component description corresponding to each first component description mode; generating a first model prompt word according to the view creation instruction and the serialized component description corresponding to each first component description mode, and taking the first model prompt word as the first model input information.

[0044] Optionally, the serialized component description corresponding to the first component description mode can be represented by a lightweight markup language. Illustratively, the Markdown language described above can be used for description. The first component description mode can be described by the JSON language as described above, and after conversion, the serialized component description corresponding to the first component description mode can be obtained, that is, the component information described using the JSON language is converted into component information described using the lightweight markup language. Since the lightweight markup language has the advantages of model-friendly and clear structure, and is independent of specific front-end frameworks, after inputting the lightweight markup language into the large model, the large model can perform a series of complex and redundant processing such as front-end architecture identification and conversion without the need for front-end architecture identification and conversion. At the same time, the large model can quickly and efficiently identify the component information carried in the serialized component description by virtue of the clear structure, and use the component information as constraint information for user intent recognition and subsequent operations. In addition, the subsequent modification operation of the large model is always performed at the level of serialized representation, and the parsing and verification link of the system ensures that each modification does not damage the effectiveness of the overall structure, thereby forming a stable and reliable closed-loop iterative system, and realizing the continuous and reliable evolution of the complex view.

[0045] Optionally, after generating the serialized component description corresponding to each first component description mode, the first model prompt word can be generated according to the view creation instruction and the serialized component description corresponding to each first component description mode, and the first model prompt word is used as the first model input information.

[0046] Illustratively, the view creation instruction and all first component description modes can be packaged to obtain packaged data, the packaged data is used as the first model prompt word, and the first model prompt word is used as the first model input information input into the large model.

[0047] In this embodiment, each first component description mode is first converted into a corresponding serialized component description, and then the view creation instruction input by the user and the serialized component description are input into the large model as prompt words. Since the serialized component description has the advantages of model-friendly, clear structure and independence from front-end frameworks, by converting the first component description mode into the corresponding serialized component description and inputting it into the large model, the large model can quickly and efficiently identify the component information carried in the serialized component description and use it as constraint information for user intent recognition and subsequent operations, thereby further improving the stability of the large model and the controllability of the quality of the output results.

[0048] Figure 3 The flowchart of generating the interface view component tree of the interface view generation method provided in the present application is shown in Figure 3As shown, the process in step S204 above, which generates a UI view component tree adapted to the front-end framework based on the first serialized view information and the front-end framework corresponding to the target UI view, may include: S301. Based on the first serialized view information, generate intermediate structure information, which describes the interface view structure in the form of an abstract syntax tree.

[0049] Optionally, the aforementioned intermediate structure information describes the interface view structure in the form of an abstract syntax tree. Therefore, the aforementioned intermediate structure information is information that is independent of specific front-end frameworks and specific technology stacks.

[0050] As an example, the intermediate structure information described above is in the form of an Abstract Syntax Tree (AST). Specifically, the interface view structure is described according to the syntax format of the AST.

[0051] In this application, after obtaining the first serialized view information output by the large model, it is not directly converted into a specific interface view component tree. Instead, intermediate structure information described in the form of an abstract syntax tree is first generated based on the first serialized view information in order to adapt to different front-end frameworks.

[0052] The following is an example of intermediate structure information in AST form.

[0053] {id: 'uuid-j35fa', component: 'dwForm', class: ['dw-form'], children: [ { id: 'uuid-j35fb', component: 'dwFormItem', props: { label: 'Please enter stock code' type: 'input'} }, { ID: 'uuid-j35fc' component: 'dwFormItem', props: { label: 'Please select a time range' type: 'range-picker' } }]} In the above example, the component information and the hierarchical relationship between components are described by a tree structure.

[0054] S302, generating, by the rendering engine, an interface view component tree adapted to the front-end framework according to the intermediate structure information and the front-end framework.

[0055] Optionally, the front-end framework is a front-end framework that the interface view component tree finally needs to apply. As mentioned above, the front-end framework may be, for example, Vue, React, etc. The user can input the name of the front-end framework that finally needs to be applied into the rendering engine, and the rendering engine selects an algorithm matched with the front-end framework according to the name of the front-end framework to convert the intermediate structure information into an interface view component tree adapted to the front-end framework.

[0056] In this embodiment, after obtaining the first serialized view information output by the large model, the intermediate structure information described in the form of an abstract syntax tree is generated according to the first serialized view information, and then the rendering engine converts the intermediate structure information into an interface view component tree adapted to the front-end framework according to the front-end framework that currently needs to be applied. Since the intermediate structure information is completely technology stack independent, it means that when a new front-end framework needs to be adapted, only a new rendering adapter needs to be developed for the front-end framework, and the same AST generated by the LLM can be applied to different technology stacks. This greatly improves the reusability and long-term value of design assets and AI-generated assets, greatly reducing the cost of responding to future technology stack changes.

[0057] As an optional implementation, the above step S301 can include: According to the hierarchical order of each component information in the above first serialized view information, each component information is parsed in turn to obtain node information corresponding to each component information; and the above intermediate structure information is generated according to the node information corresponding to each component information.

[0058] Optionally, as mentioned above, the above first serialized view information is in the form of a lightweight markup language, which not only describes the component information of each component in the interface view, such as attribute information, events, etc., but also effectively describes the hierarchical order between each component through list syntax. Accordingly, in this embodiment, the hierarchical order described in the first serialized view information can be parsed and recognized, and each component information can be parsed from the first serialized view information in turn according to this hierarchical order.

[0059] For example, regarding the fragment in the first serialized view information below, by parsing the list syntax, the hierarchical relationship can be determined as follows: dwForm is the parent component information of the two dwFormItems, and the two dwFormItems are parallel component information. Furthermore, by recognizing the keyword "component" in each level, three components—one dwForm and two dwFormItems—can be identified. The component information for each component specifically includes the information within parentheses following the component name.

[0060] - component: dwForm(class=dw-form) - component: dwFormItem(label=Please enter stock code, type=number-input) - component: dwFormItem(label=Please select time range, type=range-picker) The component information parsed through the above process can each serve as a node in the intermediate structure information. Based on this, the intermediate structure information can be generated. Specifically, the intermediate structure information in AST form contains multiple nodes in a tree structure, and the content of each node is the node information described above. Furthermore, the hierarchical order of the nodes in the tree structure of the intermediate structure information is consistent with the order of the component information in the first serialized view information.

[0061] In this embodiment, node information can be parsed sequentially according to the hierarchical order of component information in the first serialized view information, and intermediate structure information can be generated based on the node information, thereby ensuring that the generated intermediate structure information can accurately retain both component information and the hierarchical order between components.

[0062] As an optional implementation, during the process of parsing component information sequentially according to the hierarchical order of component information in the first serialized view information to obtain the corresponding node information, the component description patterns in the aforementioned component description pattern library can be used for verification to ensure the legality of the parsed node information. The following is a detailed explanation.

[0063] Figure 4 A flowchart illustrating the process of parsing and obtaining node information using the interface view generation method provided in this application is shown below. Figure 4 As shown, the process of parsing the component information sequentially according to the hierarchical order of the component information in the first serialized view information to obtain the node information corresponding to each component information may include: S401. According to the hierarchical order of the component information in the first serialized view information, sequentially analyze each component information to obtain the to-be-verified node information corresponding to each component information.

[0064] Optionally, the hierarchical relationship of the component information can be obtained by parsing the list syntax, and the component information can be obtained by identifying the keyword "component" in each layer and identifying the attributes in the subsequent parentheses. Each component information is taken as a to-be-verified node information. After the to-be-verified node information is verified by the following steps, it can be used as the node information in the intermediate structure information.

[0065] S402. Based on the component description mode corresponding to the component information, perform legality verification on the to-be-verified node information.

[0066] Optionally, the component description mode corresponding to each component information can be found from the component description mode library. For example, the component description mode with the component name in the component information can be found from the component description mode library, and the found component description mode is taken as the component description mode corresponding to the component information.

[0067] As described above, the component description mode completely describes the information of a component according to a unified rule, and is a "component specification" that abstracts the component from the code implementation and forms a machine-readable and verifiable "component specification". Therefore, the component description mode can be used as a reference standard to verify whether the component information output by the large model meets the requirements of the component description mode. Specifically, the parameters in the component information can be extracted, and it is determined whether the parameter value of the parameter exists in the corresponding component description mode or whether the parameter value meets the parameter value range defined in the component description mode. If all the extracted parameters match the conditions defined in the component description mode, it is determined that the legality verification passes, otherwise, it is determined that the legality verification fails. For example, for the dwFormItem component information, it contains a parameter icon="warning", but in the component description mode corresponding to dwFormItem, the icon attribute does not contain the value "warning", that is, the large model incorrectly outputs a parameter value that does not meet the requirements of the component description mode, so it is determined that the legality verification fails.

[0068] S403. If the legality verification passes, the to-be-verified node information is taken as the node information corresponding to the component information.

[0069] If the legality verification passes, it indicates that the component information output by the large model meets the requirements of the component description mode, so the to-be-verified node corresponding to the component information can be directly taken as a node information.

[0070] S404, if the legality verification fails, the node information corresponding to the component information is obtained by correcting the node information to be verified according to the result of the legality verification.

[0071] If the legality verification fails, it indicates that the output result of the large model has defects, in this case, a prompt information can be output, and the user manually corrects the node information to be verified, for example, modifies one of the incorrect parameter values to a correct parameter value in the component description mode. Alternatively, the available parameter value can be found from the component description mode, and the incorrect parameter value can be automatically replaced with the found available parameter value. After correcting the node information to be verified, the corrected node information to be verified can be used as the node information corresponding to the component information. Alternatively, the large model can be input again to the large model as the verification result output by the large model, and the large model can automatically correct it.

[0072] In the embodiment, in the process of analyzing the first serialized view information to obtain the node information corresponding to each component information, for the node information to be verified obtained by analysis, the node information is first verified using the corresponding component description mode, so that the incorrect output of the large model can be found and corrected in time, and the accuracy of the interface view component tree generated finally is ensured.

[0073] As an optional implementation, the step S302 can include: The rendering engine is started and run, and when the rendering engine is running, the target adapter corresponding to the front-end framework is called to generate the interface view component tree based on the view rules of the front-end framework and according to the intermediate structure information.

[0074] Optionally, the rendering engine can be an engine program running on the electronic device, and after obtaining the intermediate structure information, the rendering engine can be triggered to start and run. During the running of the rendering engine, the identifier of the front-end framework currently needed to be applied is first obtained to know the front-end framework needed to be adapted. Then, the rendering engine calls the target adapter corresponding to the front-end framework. A plurality of adapters can be provided in advance, and each adapter corresponds to a front-end framework. The adapter is used to convert the intermediate structure information into an interface view component tree conforming to the syntax structure of the corresponding front-end framework, so that when the interface view component tree is loaded to the client supporting the front-end framework, the interface view can be correctly displayed. As an example, an external calling interface can be provided for each adapter, and after the rendering engine knows the front-end framework needed to be adapted, the target adapter is called through the calling interface of the target adapter corresponding to the front-end framework, and the intermediate structure information is transmitted to the target adapter to trigger the target adapter to run. The target adapter can further convert the intermediate structure information into an interface view component tree conforming to the syntax structure of the corresponding front-end framework.

[0075] In this embodiment, a corresponding adapter is provided for each front-end framework. On the one hand, the adapter can ensure that the intermediate structure information is accurately converted into an interface view component tree that is adapted to the front-end framework. On the other hand, when a new front-end framework needs to be added, only a new adapter needs to be provided, and therefore the method has good reusability and scalability.

[0076] The process of creating a new interface view component tree according to a view creation instruction of a user is described in detail above. In actual operation, the user can need to adjust the created interface view to adapt to new requirements. The modification process of the interface view component tree is described below.

[0077] Figure 5 A flowchart of the interface view modification process of the interface view generation method provided in the present application is shown in FIG. 5, and the method comprises the following steps. Figure 5 As shown in FIG. 5, the method further comprises the following steps. S501: Obtain a view modification instruction of a user and at least one second component description mode corresponding to the view modification instruction, wherein the view modification instruction describes information of a component to be updated in a target interface view in a natural language form.

[0078] Optionally, the view modification instruction can be natural language information input by the user in the form of text or voice. The view modification instruction is used to describe information of one or more components that need to be updated in the created target interface view. The update of the component can include adding a component, deleting a component, or modifying a component. For example, the user can input a line of text “I want to search for funds and stocks simultaneously”, which is a view modification instruction. The line of text indicates that the user wants to simultaneously display a component for searching for funds and a component for searching for stocks in the interface view. If one of the components already exists in the created target interface view, the view modification instruction is used to indicate that a component is added in the target interface view. If neither a component for searching for funds nor a component for searching for stocks exists in the created target interface view, the view modification instruction is used to indicate that the two components are added in the target interface view.

[0079] Optionally, the at least one second component description mode refers to a component description mode in a component description mode library that is related to the view modification instruction. For example, for the view modification instruction “I want to search for funds and stocks simultaneously”, since searching for funds and searching for stocks both correspond to a query component, a component description mode corresponding to the query component in the component description mode library can be used as the second component description mode.

[0080] S502, generate second model input information according to the view modification instruction, the current interface view component tree of the target interface view, and the at least one second component description mode.

[0081] Optionally, the current interface view component tree has been created, and the target interface view presented after loading of the current interface view component tree has been displayed to the user. The user provides the view modification instruction for the target interface view presented after loading of the current interface view component tree. Therefore, the modification of the target interface view needs to be based on the current interface view component tree, that is, the current interface view component tree is modified. Therefore, the current interface view component tree is input into the view context input large model for modification by the large model.

[0082] On this basis, the second model input information is generated according to the view modification instruction, the at least one second component description mode, and the current interface view component tree as the view context.

[0083] S503, input the second model input information into the large model to obtain second serialized view information output by the large model.

[0084] Optionally, the second serialized view information can be regarded as modified serialized view information corresponding to the current interface view component tree. Specifically, the current interface view component tree is obtained through the method steps described in the foregoing embodiments. The large model outputs the first serialized view information described above for the view creation instruction of the user, and the first serialized view information is converted to obtain the current interface view component tree. In this step, the second serialized view information is updated serialized view information relative to the first serialized view information.

[0085] For example, it is assumed that the first serialized view information output by the large model for the view creation instruction of the user is as follows: - component: dwForm (class=dw-form) - component: dwFormItem (label=Please enter the stock code, type=number-input) - component: dwFormItem (label=Please select the time range, type=range-picker) The user gives a view modification instruction of "I want to search for funds and stocks at the same time" for the interface view converted and presented by the first serialized view information. Since the first serialized view information contains component information for searching for stocks but does not contain component information for searching for funds, the large model can add a component information for searching for funds on the basis of the first serialized view information when processing the view modification instruction, thereby obtaining second serialized view information. The second serialized view is specifically: - component: dwForm (class=dw-form) - component: dwFormItem (label=Please enter the stock code, type=input) - component: dwFormItem (label=Please enter the fund code, type=input) - component: dwFormItem (label=Please select the time range, type=range-picker) In comparison with the above example of the first serialized view information, the second serialized view information adds a component information for searching for funds.

[0086] S504, according to the above second serialized view information and the front-end framework corresponding to the target interface view, and through the rendering engine, generate a modified interface view component tree, and display an updated target interface view based on the modified interface view component tree.

[0087] In this embodiment, after receiving the view modification instruction input by the user, the second model input information is generated according to the view modification instruction, the current interface view component tree of the target interface view, and at least one second component description mode, so that the large model outputs the second serialized view information according to the second model input information. Wherein, the view modification instruction as a specific instruction, the current interface view component tree as a view context, and the second component description mode as a constraint information, through the three kinds of information, the large model can accurately modify the current interface view component tree.

[0088] As an optional implementation, the above step S502 can include: generating a serialized component description corresponding to each second component description mode; generating a serialized view context corresponding to the current interface view component tree; generating a second model prompt according to the view modification instruction, the serialized component description corresponding to each second component description mode, and the serialized view context, and taking the second model prompt as the second model input information.

[0089] Optionally, during the generation of the second model input information, each second component description pattern is converted into a serialized component description, for example, into serialized information described using the aforementioned Markdown language. Simultaneously, the current interface view component tree is converted into a serialized view context, for example, into serialized information described using the aforementioned Markdown language. Based on this, the view modification command, the serialized component descriptions corresponding to each second component description pattern, and the serialized view context are packaged into the aforementioned second model prompt, and the second model prompt is used as the second model input information.

[0090] In this embodiment, by converting each second component description mode into a serialized component description and converting the current interface view component tree into a serialized view context, the second component description modes and the current interface view component tree are converted into model-friendly and structurally clear serialized information, enabling large models to be processed quickly and accurately.

[0091] Figure 6 A flowchart illustrating the process of obtaining component description information in the interface view generation method provided in this application is shown below. Figure 6 As shown, one optional process for obtaining multiple first component description patterns in step S201 above includes: S601. Add the identifiers of each component description pattern in the component description pattern library to the identifier list.

[0092] Optionally, the identifier for the component description pattern can be, for example, the name of the component.

[0093] S602. Input the view creation command and the above-mentioned identifier list into the large model. The large model determines the component description mode to be used based on the view creation command and the identifier list, and outputs an identifier of at least one component description mode to be used.

[0094] Optionally, the large model parses the view creation command to determine the component types that the current view creation command may involve, and then combines the component identifiers in the input identifier list to determine the component identifiers in the identifier list that match the possible component types, thereby determining the component description mode to be used.

[0095] S603. Based on the identifier of each component description mode to be used, each component description mode to be used is respectively used as a first component description mode.

[0096] Optionally, based on the identifier of each component description pattern to be used, each component description pattern to be used is read from the component description pattern library, and these component description patterns to be used are used as the first component description patterns and input into the large model.

[0097] In this embodiment, through the pre-interaction with the large model, only the actually required component description mode related to the demand needs to be input into the large model for processing, without inputting all component description modes into the large model, thereby reducing the processing cost of the large model and improving the processing efficiency.

[0098] It should be noted that the specific process of obtaining at least one second component description mode in the foregoing step S501 is consistent with the processing process of obtaining a plurality of first component description modes, which can be referred to the foregoing steps S601-S603, and will not be described here.

[0099] Based on the same inventive concept, the embodiments of the present application also provide an interface view generation device corresponding to the interface view generation method. Since the principle of the device in the embodiments of the present application solves the problem similar to the interface view generation method described above, the implementation of the device can be referred to the implementation of the method, and the repeated parts will not be described here.

[0100] Figure 7 The module structure diagram of the interface view generation device provided in the present application is shown in FIG. 7, which includes: Figure 7 The obtaining module 701 is configured to obtain a view creation instruction of a user and obtain a plurality of first component description modes, wherein the view creation instruction is used to describe information of a target interface view to be created in a natural language form, and each first component description mode describes information of a component according to a preset rule.

[0101] The generation module 702 is configured to generate first model input information according to the view creation instruction and the plurality of first component description modes.

[0102] The processing module 703 is configured to input the first model input information into a large model to obtain first serialized view information output by the large model, and the first serialized view information is represented in the form of a lightweight markup language.

[0103] The generation module 702 is further configured to generate an interface view component tree adapted to a front-end framework corresponding to the target interface view through a rendering engine according to the first serialized view information and the front-end framework, and display the target interface view based on the interface view component tree.

[0104] As a possible implementation, the generation module 702 is specifically configured to: generate a serialized component description corresponding to each first component description mode; generate a first model prompt word according to the view creation instruction and the serialized component description corresponding to each first component description mode, and take the first model prompt word as the first model input information.​

[0105] As a possible implementation, the generating module 702 is specifically configured to: generate, according to the first serialized view information, intermediate structure information, the intermediate structure information describing an interface view structure in the form of an abstract syntax tree; generate, by the rendering engine, an interface view component tree adapted to the front-end framework according to the intermediate structure information and the front-end framework.

[0106] As a possible implementation, the generating module 702 is specifically configured to: sequentially parse each component information in the first serialized view information according to a hierarchical order of the component information, to obtain node information corresponding to each component information; generate the intermediate structure information according to the node information corresponding to each component information.

[0107] As a possible implementation, the generating module 702 is specifically configured to: sequentially parse each component information in the first serialized view information according to a hierarchical order of the component information, to obtain node information corresponding to each component information; perform legality verification on the to-be-verified node information based on a component description mode corresponding to the component information; if the legality verification passes, take the to-be-verified node information as the node information corresponding to the component information; if the legality verification fails, modify the to-be-verified node information according to a result of the legality verification, to obtain the node information corresponding to the component information.

[0108] As a possible implementation, the generating module 702 is specifically configured to: start and run the rendering engine; the rendering engine, when running, calls a target adapter corresponding to the front-end framework, and generates the interface view component tree based on a view rule of the front-end framework and according to the intermediate structure information by the target adapter.

[0109] As a possible implementation, the obtaining module 701 is further configured to obtain a view modification instruction of a user and at least one second component description mode corresponding to the view modification instruction, wherein the view modification instruction describes information of a component to be updated in the target interface view in a natural language form; the generating module 702 is further configured to generate second model input information according to the view modification instruction, a current interface view component tree of the target interface view, and the at least one second component description mode; The processing module 703 is further configured to input the second model input information into the large model to obtain second serialized view information output by the large model. The generation module 702 is further configured to generate a modified interface view component tree according to the second serialized view information and a front-end framework corresponding to the target interface view, and display an updated target interface view based on the modified interface view component tree.

[0110] As a possible implementation, the generation module 702 is specifically configured to: generate a serialized component description corresponding to each of the second component description modes; generate a serialized view context corresponding to the current interface view component tree; generate a second model prompt word according to the view modification instruction, the serialized component description corresponding to each of the second component description modes, and the serialized view context, and use the second model prompt word as the second model input information.

[0111] As a possible implementation, the acquisition module 701 is specifically configured to: add an identifier of each component description mode in a component description mode library to an identifier list; input the view creation instruction and the identifier list into the large model, determine a component description mode to be used by the large model according to the view creation instruction and the identifier list, and output an identifier of at least one component description mode to be used; respectively use each component description mode to be used as one of the first component description modes according to the identifier of each component description mode to be used.

[0112] The description of the processing procedure of each module in the apparatus and the interaction procedure between the modules can refer to the related description in the above method embodiments, and will not be repeated here.

[0113] The embodiments of the present application further provide an electronic device 80, as shown in the accompanying drawings, which is a structural schematic diagram of the electronic device 80 provided by the embodiments of the present application, and includes a processor 81, a memory 82, and optionally a bus 83. The memory 82 stores machine readable instructions executable by the processor 81. When the electronic device 80 is running, the processor 81 communicates with the memory 82 through the bus 83, and the processor 81 executes the machine readable instructions to perform the steps of the above interface view generation method. Figure 8

[0114] ​The embodiment of the present application further provides a computer readable storage medium, and the computer readable storage medium stores a computer program.

[0115] Those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the system and the device described above can refer to the corresponding process in the method embodiment, and the present application will not be repeated herein. In the several embodiments provided in the present application, it should be understood that the disclosed system, device and method can be implemented by other means. The device embodiments described above are only schematic, for example, the division of the modules is only a logical function division, and actual implementation can have another division manner, for example, a plurality of modules or components can be combined or integrated into another system, or some features can be ignored or not executed. In addition, the coupling or direct coupling or communication connection between the displayed or discussed each other can be indirect coupling or communication connection through some communication interface, device or module, which can be electrical, mechanical or other forms.

[0116] In addition, each functional unit in each embodiment of the present application can be integrated in one processing unit, or each unit can exist physically, or two or more units can be integrated in one unit. When the functions are realized in the form of software functional units and sold or used as independent products, the software functional units can be stored in a computer readable storage medium. Based on this understanding, the technical solutions of the present application essentially or the parts of the technical solutions that make contributions to the prior art or the parts of the technical solutions can be embodied in the form of a software product, and the computer software product is stored in a storage medium, including a plurality of instructions for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute all or part of the steps of the methods described in each embodiment of the present application. The foregoing storage medium includes: a U disk, a mobile hard disk, a read-only memory (ROM, Read-Only Memory), a random access memory (RAM, Random Access Memory), a magnetic disk or an optical disk, and various program code storage media.

[0117] The above is only a specific embodiment of the present application, but the protection scope of the present application is not limited to this, any person skilled in the art can easily think of changes or replacements within the technical range disclosed in the present application, which should be covered in the protection scope of the present application.

Claims

1. A method for generating an interface view, characterized in that, include: Obtain the user's view creation instruction and obtain multiple first component description patterns, wherein the view creation instruction is used to describe the information of the target interface view to be created in natural language, and each first component description pattern describes the information of a component according to a preset rule; Generate first model input information based on the view creation instructions and the multiple first component description patterns; The first model input information is input into the large model to obtain the first serialized view information output by the large model. The first serialized view information is represented in the form of a lightweight markup language. Based on the first serialized view information and the front-end framework corresponding to the target interface view, an interface view component tree adapted to the front-end framework is generated through the rendering engine, and the target interface view is displayed based on the interface view component tree.

2. The method according to claim 1, characterized in that, The step of generating first model input information based on the view creation instructions and the plurality of first component description patterns includes: Generate serialized component descriptions corresponding to each of the first component description patterns; Based on the view creation instruction and the serialized component description corresponding to each of the first component description modes, a first model prompt word is generated, and the first model prompt word is used as the input information of the first model.

3. The method according to claim 1, characterized in that, The step of generating an interface view component tree adapted to the front-end framework based on the first serialized view information and the front-end framework corresponding to the target interface view through a rendering engine includes: Based on the first serialized view information, intermediate structure information is generated, and the intermediate structure information describes the interface view structure in the form of an abstract syntax tree. The rendering engine generates a UI view component tree adapted to the front-end framework based on the intermediate structure information and the front-end framework.

4. The method according to claim 3, characterized in that, The step of generating intermediate structure information based on the first serialized view information includes: According to the hierarchical order of the component information in the first serialized view information, the component information is parsed sequentially to obtain the node information corresponding to each component information; The intermediate structure information is generated based on the node information corresponding to each component.

5. The method according to claim 4, characterized in that, The step of parsing each component information sequentially according to the hierarchical order of the component information in the first serialized view information to obtain the node information corresponding to each component information includes: According to the hierarchical order of the component information in the first serialized view information, each component information is parsed sequentially to obtain the node information to be verified corresponding to each component information. Based on the component description pattern corresponding to the component information, the legality of the node information to be verified is checked. If the validity check passes, the node information to be verified will be used as the node information corresponding to the component information. If the validity check fails, the node information to be verified is corrected based on the result of the validity check to obtain the node information corresponding to the component information.

6. The method according to claim 3, characterized in that, The step of generating a UI view component tree adapted to the front-end framework by the rendering engine based on the intermediate structure information and the front-end framework includes: Start and run the rendering engine; When the rendering engine runs, it calls the target adapter corresponding to the front-end framework. The target adapter generates the interface view component tree based on the view rules of the front-end framework and the intermediate structure information.

7. The method according to claim 1, characterized in that, The method further includes: Obtain the user's view modification instruction and at least one second component description pattern corresponding to the view modification instruction, wherein the view modification instruction describes the information of the component to be updated in the target interface view in natural language form; The second model input information is generated based on the view modification instruction, the current interface view component tree of the target interface view, and the at least one second component description mode; The second model input information is input into the large model to obtain the second serialized view information output by the large model; Based on the second serialized view information and the front-end framework corresponding to the target interface view, a modified interface view component tree is generated through the rendering engine, and the updated target interface view is displayed based on the modified interface view component tree.

8. The method according to claim 7, characterized in that, The step of generating second model input information based on the view modification instruction, the current interface view component tree of the target interface view, and the at least one second component description mode includes: Generate serialized component descriptions corresponding to each of the second component description patterns; Generate the serialized view context corresponding to the current interface view component tree; Based on the view modification instruction, the serialized component description corresponding to each of the second component description modes, and the serialized view context, a second model prompt word is generated, and the second model prompt word is used as the second model input information.

9. The method according to claim 1, characterized in that, The acquisition of multiple first component description patterns includes: Add the identifiers of each component description pattern in the component description pattern library to the identifier list; The view creation instruction and the identifier list are input into the large model. The large model determines the component description mode to be used based on the view creation instruction and the identifier list, and outputs an identifier of at least one component description mode to be used. Based on the identifier of each component description pattern to be used, each component description pattern to be used is respectively used as a first component description pattern.

10. An electronic device, characterized in that, include: A processor and a memory, the memory storing machine-readable instructions executable by the processor, which, when the electronic device is running, are executed by the processor to perform the steps of the interface view generation method as described in any one of claims 1 to 9.

11. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores a computer program that, when executed by a processor, performs the steps of the interface view generation method as described in any one of claims 1 to 9.

Images