User interface design draft acquisition method and device and storage medium
By generating user interface design drafts that match natural language requirements through recommendation matching models and optimized design models, the problem of poor design draft management and reuse in existing technologies is solved, and efficient storage and high-quality design draft retrieval are achieved.
Patent Information
- Application Number
- CN202511381562.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2025-09-25
- Publication Date
- 2026-11-06
AI Technical Summary
In existing technologies, the management and reuse of user interface design drafts are ineffective, the accuracy of matching results is not high, and designers need to make a lot of adaptive modifications.
The storage structure data and alternative component set are obtained through a recommendation matching model. An optimized design draft is generated using an optimization design model and then recursively restored to obtain a user interface design draft that matches the natural language requirements. The design draft is optimized by combining format scoring, content scoring, and performance scoring. Component updates and variant replacements are performed using a large language model.
It achieves efficient storage of user interface design drafts, reduces storage resource consumption, improves the reusability of design drafts, and enhances the matching degree between design drafts and user needs.
Smart Images

Figure CN123048076A_ABST
Abstract
Description
Technical Field
[0001] This invention relates to the field of artificial intelligence, specifically to the application of large models in the field of financial technology, and particularly to a method, apparatus, and storage medium for obtaining user interface design drafts. Background Technology
[0002] User Interface Design Mockups (UI) are visual prototypes used in the UI design process to present the core solutions for interface layout, visual elements, and interaction logic. How to manage and reuse UI design mockups has become a key focus in the industry.
[0003] In existing technologies, for existing user interface design drafts, designers usually assign design tags to them to record the applicable business scenarios and other key information of the design draft. Alternatively, keywords can be extracted and used as tag information for the design draft. Then, when user design requirements are obtained, the design requirements can be matched using the tag information.
[0004] However, this management and reuse method not only results in poor accuracy of matching results, but even if the user interface design draft is accurately matched, it often cannot directly meet the user's design needs and still requires designers to make adaptive modifications, resulting in poor reuse of user interface design drafts. Summary of the Invention
[0005] This invention provides a method, apparatus, electronic device, and storage medium for obtaining user interface design drafts, in order to solve the problem of poor reusability of user interface design drafts.
[0006] According to another aspect of the present invention, a method for obtaining a user interface design draft is provided, comprising:
[0007] Based on the user's input of natural language requirements, the corresponding storage structure data and a set of alternative components are obtained through a recommendation matching model; wherein, the storage structure data is a tree structure data generated based on historical user interface design drafts;
[0008] Based on the storage structure data and the set of alternative components, the corresponding optimized design draft is obtained through at least one optimized design model;
[0009] The optimized design draft is recursively restored to obtain a user interface design draft that matches the natural language requirements.
[0010] The step of obtaining the corresponding optimized design draft through at least one optimized design model based on the storage structure data and the set of candidate components includes: obtaining candidate design drafts through multiple optimized design models based on the storage structure data and the set of candidate components; and obtaining the optimized design draft from each of the candidate design drafts based on format score, content score, and performance score.
[0011] The step of obtaining an optimized design draft from the candidate design drafts based on format score, content score, and performance score includes: performing compliance verification on each candidate design draft to obtain a valid candidate design draft; wherein, the compliance verification includes structural integrity verification, length threshold verification, and node relationship verification; and obtaining an optimized design draft from the valid candidate design drafts based on format score, content score, and performance score.
[0012] The step of recursively restoring the optimized design draft to obtain a user interface design draft that matches the optimized design draft also includes: preloading the parsed components and replacing variant components and updating attributes based on path indexes.
[0013] The method for obtaining user interface design drafts further includes: obtaining attribute information of each node in historical user interface design drafts; wherein the attribute information includes basic attributes and style attributes; obtaining storage structure data based on the attribute information of each node in historical user interface design drafts, and recording the nesting path, attribute content, and attribute path of variant sets based on the storage structure data; storing the storage structure data in a design library, and configuring association information for the storage structure data; wherein the association information includes component identifiers, channel identifiers, and scene identifiers.
[0014] The multiple optimization design models include a basic general large model, an inference optimization large model, and a lightweight inference model; wherein, the basic general large model is constructed based on a hybrid expert architecture; the inference optimization large model is obtained based on the basic general large model and inference reinforcement training; and the lightweight inference model is obtained based on the inference optimization large model and a knowledge distillation mechanism.
[0015] The step of obtaining an optimized design draft from each of the valid candidate design drafts based on format score, content score, and performance score includes: obtaining the format weight, content weight, and performance weight corresponding to the format score, content score, and performance score, respectively, based on user feedback results and expert evaluation results; and obtaining an optimized design draft from each of the valid candidate design drafts based on the format score, content score, performance score, format weight, content weight, and performance weight.
[0016] According to another aspect of the present invention, a user interface design draft acquisition device is provided, comprising:
[0017] The structure data acquisition module is used to acquire the corresponding storage structure data and a set of alternative components based on the natural language requirements input by the user through a recommendation matching model; wherein, the storage structure data is a tree structure data generated based on historical user interface design drafts;
[0018] The optimization design acquisition module is used to obtain the corresponding optimization design draft through at least one optimization design model based on the storage structure data and the set of candidate components.
[0019] The design draft acquisition module is used to recursively restore the optimized design draft to obtain a user interface design draft that matches the natural language requirements.
[0020] According to another aspect of the present invention, an electronic device is provided, the electronic device comprising: at least one processor; and a memory communicatively connected to the at least one processor; wherein the memory stores a computer program executable by the at least one processor, the computer program being executed by the at least one processor to enable the at least one processor to perform the user interface design draft acquisition method according to any embodiment of the present invention.
[0021] According to another aspect of the present invention, a computer-readable storage medium is provided, the computer-readable storage medium storing computer instructions, the computer instructions being configured to cause a processor to execute and implement the user interface design draft acquisition method described in any embodiment of the present invention.
[0022] According to another aspect of the present invention, a computer program product is provided, comprising a computer program that, when executed by a processor, implements the user interface design draft acquisition method described in any embodiment of the present invention.
[0023] The technical solution of this invention, based on the user's input natural language requirements, obtains a set of corresponding candidate components and tree structure data generated based on historical user interface design drafts through a recommendation matching model; based on the stored structure data and the set of candidate components, obtains a corresponding optimized design draft through at least one optimization design model; and recursively restores the optimized design draft to obtain a user interface design draft that matches the natural language requirements. This not only achieves efficient storage of user interface design drafts and reduces the storage resources occupied, but also completes the component updates of historical user interface design drafts, improving the reusability of user interface design drafts.
[0024] It should be understood that the description in this section is not intended to identify key or essential features of the embodiments of the present invention, nor is it intended to limit the scope of the invention. Other features of the invention will become readily apparent from the following description. Attached Figure Description
[0025] To more clearly illustrate the technical solutions in the embodiments of the present invention, the accompanying drawings used in the description of the embodiments will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0026] Figure 1 This is a flowchart of a method for obtaining a user interface design draft according to Embodiment 1 of the present invention;
[0027] Figure 2 This is a flowchart of another method for obtaining user interface design drafts according to Embodiment 2 of the present invention;
[0028] Figure 3 This is a flowchart of another method for obtaining user interface design drafts according to Embodiment 3 of the present invention;
[0029] Figure 4 This is a schematic diagram of a user interface design draft acquisition system according to Embodiment 4 of the present invention;
[0030] Figure 5 This is a flowchart of the user interface design draft acquisition system performing the user interface design draft acquisition method according to Embodiment 4 of the present invention;
[0031] Figure 6 This is a schematic diagram of a user interface design draft acquisition device according to Embodiment 5 of the present invention;
[0032] Figure 7 This is a schematic diagram of the structure of an electronic device that implements the user interface design draft acquisition method of this invention. Detailed Implementation
[0033] To enable those skilled in the art to better understand the present invention, the technical solutions of the present invention will be clearly and completely described below with reference to the accompanying drawings of the embodiments of the present invention. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort should fall within the scope of protection of the present invention.
[0034] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover a non-exclusive inclusion; for example, a process, method, system, product, or apparatus that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or apparatus.
[0035] Example 1
[0036] Figure 1 This is a flowchart of a user interface design draft acquisition method provided in Embodiment 1 of the present invention. This embodiment is applicable to situations where user interface design drafts are reused through recommended matching models and optimized design models. This method can be executed by a user interface design draft acquisition device, which can be implemented in hardware and / or software. The user interface design draft acquisition device can be configured in a user interface design draft acquisition system, which can be configured in electronic devices such as servers. Figure 1 As shown, the method includes:
[0037] S101. Based on the natural language requirements input by the user, obtain the corresponding storage structure data and a set of alternative components through a recommendation matching model; wherein, the storage structure data is a tree structure data generated based on historical user interface design drafts.
[0038] The stored structure data is a tree-like data structure formed by extracting node information from completed user interface design drafts (i.e., historical user interface design drafts). It records the structural characteristics of each node and the nesting relationships between nodes. The tree data structure refers to a data structure that expresses the parent-child node relationship through nesting, such as a directory tree and a component tree. The stored structure data can be represented as a tree structure in JSON (JavaScript Object Notation) format to reduce the data volume and improve parsing speed and readability.
[0039] In user interface design, a node is the basic unit that constitutes the hierarchical structure of interface elements. Different types of nodes perform different functions. Nodes can specifically include container nodes, text nodes, component nodes, and element nodes. Among them, container nodes, such as frame containers and group containers, serve as parent containers for other nodes and are used to organize the layout and control the arrangement and nesting relationships of child elements.
[0040] Text nodes (Text) are used to carry text content and are also the basic information units in the UI, including attributes such as font, color, and alignment; component nodes, such as Component and Instance, refer to reusable predefined elements (e.g., buttons and input boxes), which include interactive states (e.g., normal state, hover state, and disabled state); element nodes (Element) are the basic graphics or controls in the UI (e.g., icons and shapes); optionally, in this embodiment of the invention, the node types in the UI design draft are not specifically limited.
[0041] The recommendation matching model is based on a large language model (LLM) from deep learning. It can be an existing general-purpose large model, or a large language model trained and optimized using training samples from the design domain to meet the design requirements of the user interface. After the natural language requirements are sent to the recommendation matching model, the model compares the obtained requirement text with the label information of various storage structures in the design library, and also with the label information of various components in the component library.
[0042] Based on this, the recommended matching model obtains a design draft (i.e., storage structure data) that matches the above-mentioned requirement text, as well as a set of alternative components containing one or more components; wherein, a component is the smallest functional unit in the user interface that can exist independently and be reused, and includes visual elements (e.g., buttons, labels, and input boxes) and interaction logic; the component library is a pre-designed and encapsulated set of components; in the embodiments of the present invention, each storage structure data is pre-stored in the design library, and each component is pre-stored in the component library.
[0043] S102. Based on the storage structure data and the set of alternative components, obtain the corresponding optimized design draft through at least one optimized design model.
[0044] The optimization design model is also a large language model based on deep learning. It can be an existing general large model, or an optimization model based on an existing general large model with improved inference capabilities through reinforcement learning. After sending the storage structure data and the set of candidate components to the optimization design model, the optimization design model updates the storage structure data, including replacing the components in the storage structure data with components from the set of candidate components, and deleting redundant components in the storage structure data, thereby obtaining the optimized storage structure data, i.e., the optimization design draft.
[0045] S103. Recursively restore the optimized design draft to obtain a user interface design draft that matches the natural language requirements.
[0046] Since the optimized design draft is still a tree-like data structure with a large number of nested structures, it is necessary to recursively traverse each node in a depth-first manner (e.g., from the root node to the leaf node) to dynamically generate the corresponding user interface components. For example, if the current node describes a button, a corresponding component instance is created and its style is set accordingly. Then, the style of each dynamically generated user interface component is restored. For example, by parsing the numerical parameters in the optimized design draft, the angle of the linear gradient needs to be converted into a value in the coordinate system, and the offset and blur radius of the shadow extension need to be handled. This achieves the separation of data and user interface, and at the same time obtains an editable high-fidelity user interface design draft. Users only need to modify the data of the generated components to update the user interface.
[0047] Optionally, in this embodiment of the invention, the step of recursively restoring the optimized design draft to obtain a user interface design draft that matches the optimized design draft further includes: preloading the parsed components and completing the replacement of variant components and attribute updates based on the path index.
[0048] Specifically, firstly, the parsed components are preloaded into the cache, avoiding the overhead of repeated parsing and creation. For example, once a button component is cached, it can be directly read from the cache during multiple calls. Secondly, the cached components are located based on the path index (e.g., component identifier or nested path), and the state or style of the variant components are replaced and the attribute information is updated. This not only avoids the overhead of repeated parsing and creation of components through component preloading, but also enables fast location of variant components based on the path index, improving the efficiency of obtaining user interface design drafts.
[0049] The technical solution of this invention, based on the user's input natural language requirements, obtains a set of corresponding candidate components and tree structure data generated based on historical user interface design drafts through a recommendation matching model; based on the stored structure data and the set of candidate components, obtains a corresponding optimized design draft through at least one optimization design model; and recursively restores the optimized design draft to obtain a user interface design draft that matches the natural language requirements. This not only achieves efficient storage of user interface design drafts and reduces the storage resources occupied, but also completes the component updates of historical user interface design drafts, improving the reusability of user interface design drafts.
[0050] It should be noted that all information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for display, data used for analysis, etc.) involved in this disclosure are information and data authorized by the user or fully authorized by all parties, and the collection, use and processing of the relevant data comply with the relevant laws, regulations and standards of the relevant regions.
[0051] Example 2
[0052] Figure 2 This is a flowchart of a method for obtaining user interface design drafts according to Embodiment 2 of the present invention. The relationship between this embodiment and the above embodiments is that the historical user interface design drafts are converted into tree structure data and stored, such as... Figure 2 As shown, the method also includes:
[0053] S201. Obtain the attribute information of each node in the historical user interface design draft; wherein, the attribute information includes basic attributes and style attributes.
[0054] Basic attributes define the structure and function of nodes, such as node type (e.g., container nodes, text nodes, component nodes, and element nodes mentioned above), globally unique identifier, coordinates, size, rotation angle, transparency, hierarchy, and interactive events; style attributes control the visual appearance of nodes, such as color (e.g., fill color array), gradient (e.g., gradient transformation matrix), independent rounded corner configuration, text style, background, and border.
[0055] S202. Based on the attribute information of each node in the historical user interface design draft, obtain the storage structure data, and record the nesting path, attribute content, and attribute path of the variant set according to the storage structure data.
[0056] Based on the attribute information of each node in the historical user interface design drafts, the storage structure of the constructed tree data structure records the nesting path, attribute content, and attribute path of the variant set. Among them, the variant set refers to the collection of different states or styles of the same component (e.g., the default, floating, and disabled states of a button), the nesting path refers to the path to locate the variant in the tree data structure, which can be used to quickly locate the specific variant, the attribute content refers to the attribute value that the variant covers relative to the parent node, including the value before and after the attribute modification, and the attribute path is the position of the value attribute in the tree data structure.
[0057] S203. Store the storage structure data in the design library and configure association information for the storage structure data; wherein, the association information includes component identifier, channel identifier and scene identifier.
[0058] The design library stores tree-structured data generated from historical user interface design drafts. It can be a relational database. The tree-structured data is compressed before being stored in the design library to reduce storage space and improve transmission efficiency. Simultaneously, association information is configured for the stored structure data. Among these, the component identifier is a unique identifier for each component, indicating which identifiers the stored structure data specifically calls from the component library; the channel identifier indicates the carrier of the usage scenario, such as mobile, web, or mini-program; and the scenario identifier indicates the specific application scenario, such as financial services, e-commerce, or social services. For example, if a stored structure data has a channel identifier for mobile and a scenario identifier for financial services, it specifically indicates that the UI design draft recorded in this tree-structured data can be applied to mobile financial services.
[0059] The technical solution of this invention, after obtaining the basic attributes and style attributes of each node in the historical user interface design draft, obtains storage structure data based on the attribute information of each node in the historical user interface design draft. This storage structure data is used to record the nesting path, attribute content, and attribute path of the variant set. Finally, the storage structure data is stored in the design library, and component identifiers, channel identifiers, and scene identifiers are configured for the storage structure data. Thus, by converting historical user interface design drafts into tree-structured data and storing it in the design library, not only is the component hierarchy and variant logic preserved through the tree data structure, ensuring the accuracy and integrity of the stored data, but also the structured storage of user interface design drafts is achieved, enabling efficient management and reuse of the design drafts.
[0060] Example 3
[0061] Figure 3 This is a flowchart of a method for obtaining user interface design drafts according to Embodiment 3 of the present invention. The relationship between this embodiment and the above embodiments is that candidate design drafts are obtained through multiple optimized design models, such as... Figure 3 As shown, the method also includes:
[0062] S301. Based on the natural language requirements input by the user, obtain the corresponding storage structure data and a set of alternative components through a recommendation matching model; wherein, the storage structure data is a tree structure data generated based on historical user interface design drafts.
[0063] S302. Based on the storage structure data and the set of alternative components, candidate design drafts are obtained through multiple optimization design models.
[0064] After obtaining the storage structure data and the set of candidate components, the storage structure data and the set of candidate components are sent to multiple optimization design models with different structures, and the candidate design drafts output by each optimization design model are obtained respectively.
[0065] S303. Based on the format score, content score, and performance score, obtain the optimized design draft from each of the candidate design drafts.
[0066] Formatting score is a score obtained after verifying whether the data format meets the preset structural requirements. It includes verifying whether the hierarchy of the tree data structure is closed (for example, if there is a mismatch in the nested hierarchy, the formatting score will be reduced, and the more times it occurs, the lower the formatting score will be), and whether the required attributes exist (for example, if a required field is missing, the formatting score will also be reduced, and the more required fields are missing, the lower the formatting score will be). In this way, a quality evaluation result is given from the perspective of the integrity and parsability of the data structure.
[0067] Content scoring assesses the structural rationality of the content based on the number of nodes, nesting level, and adherence to spacing rules. A higher score is awarded when the number of nodes is close to a preset threshold, avoiding both insufficient information due to too few nodes and structural redundancy due to too many nodes. Similarly, a higher score is awarded when the node level is close to a preset threshold (e.g., 3 levels). A higher score is also awarded when the spacing between adjacent nodes meets the minimum spacing requirements specified in the design guidelines, thus balancing information density and readability in the user interface design and ensuring the content is both complete and easy to parse. Based on format, content, and performance scores, and their respective weights, the highest-scoring optimized design is selected from multiple candidate designs. This ensures high design quality in the selected optimized design, improves the match between the design and the user's natural language requirements, and satisfies the user interface design needs.
[0068] S304. Recursively restore the optimized design draft to obtain a user interface design draft that matches the natural language requirements.
[0069] Optionally, in this embodiment of the invention, obtaining an optimized design draft from each of the candidate design drafts based on format score, content score, and performance score includes: performing compliance verification on each of the candidate design drafts to obtain a valid candidate design draft; wherein, the compliance verification includes structural integrity verification, length threshold verification, and node relationship verification; and obtaining an optimized design draft from each of the valid candidate design drafts based on format score, content score, and performance score.
[0070] Specifically, structural integrity verification includes checking whether the header and footer identifiers of the candidate design drafts match and whether data blocks are corrupted, to ensure that the basic framework of the design drafts is complete and without anomalies; length threshold verification includes verifying whether the size of the candidate design drafts (e.g., number of bytes and number of pages) is within a preset range, to avoid system processing anomalies caused by being too short or too long; node relationship verification involves checking whether the logical relationships between nodes in the candidate design drafts are reasonable, such as whether parent and child nodes form circular references, to avoid infinite recursion. Thus, by performing compliance verification on each candidate design draft, phenomena such as missing basic frameworks, abnormal number of nodes, and infinite recursion are avoided, ensuring the design compliance of the optimized design drafts.
[0071] Optionally, in this embodiment of the invention, the plurality of optimized design models include a basic general large model, an inference optimized large model, and a lightweight inference model; wherein, the basic general large model is constructed based on a hybrid expert architecture; the inference optimized large model is obtained based on the basic general large model and inference reinforcement training; and the lightweight inference model is obtained based on the inference optimized large model and a knowledge distillation mechanism.
[0072] Specifically, basic general large models, such as large language models built on the Mixture of Experts (MoE) architecture and Multi-Head Latent Attention (MLA) mechanism, are characterized by high output efficiency and low output illusion. Among them, the Mixture of Experts model is an architecture in which multiple sub-models (i.e., experts) collaborate to complete the task. Each expert is responsible for processing a specific part of the input data, thereby achieving efficient use of computing resources. The Multi-Head Attention mechanism is a mechanism that improves the ability to understand complex semantics by capturing the dependencies of different dimensions in the input sequence in parallel.
[0073] Reasoning-Optimized Models are large language models obtained by performing reasoning reinforcement learning (e.g., adding chained reasoning structures) on top of basic general-purpose large models, characterized by strong reasoning capabilities. Lightweight Reasoning Models are lightweight models obtained through knowledge distillation mechanisms on top of reasoning-optimized large models, characterized by high output efficiency and a moderate balance between reasoning capability and output efficiency. The knowledge distillation mechanism transfers knowledge from large models to smaller models to improve model performance and generalization ability. By constructing multiple large models with different structural features, multiple different candidate design drafts are obtained, ensuring the diversity of content in the candidate design drafts and thus improving the matching between the optimized design drafts and user needs.
[0074] Optionally, the step of obtaining an optimized design draft from each of the valid candidate design drafts based on the format score, content score, and performance score includes: obtaining the format weight, content weight, and performance weight corresponding to the format score, content score, and performance score, respectively, based on user feedback results and expert evaluation results; and obtaining an optimized design draft from each of the valid candidate design drafts based on the format score, content score, performance score, format weight, content weight, and performance weight.
[0075] Specifically, after each recursive restoration and display of the optimized design draft to the user, the user's feedback on the design draft is obtained. This feedback records the user's satisfaction with the format, content, and performance. The worse the satisfaction with a particular item, the higher its weight; the better the satisfaction with a particular item, the lower its weight. Based on the feedback from different users, the format weight, content weight, and performance weight are dynamically configured.
[0076] Simultaneously, experts can evaluate each existing design draft, and the format weight, content weight, and performance weight can be configured and updated based on expert opinions. In this way, the format weight, content weight, and performance weight are dynamically updated based on user feedback and expert evaluation results. Then, based on the format score, content score, performance score, format weight, content weight, and performance weight, the optimized design draft is obtained from each valid candidate design draft, further improving the design quality of the selected optimized design draft.
[0077] The technical solution of this invention obtains candidate design drafts through multiple optimization design models based on storage structure data and a set of alternative components; and selects an optimized design draft from among the candidate design drafts based on format scoring, content scoring, and performance scoring. This ensures high design quality of the selected optimized design drafts, improves the matching degree between the design drafts and the user's natural language requirements, and meets the design requirements of the user interface.
[0078] Example 4
[0079] Figure 4 This is a schematic diagram of a user interface design draft acquisition system provided in Embodiment 4 of the present invention, as shown below. Figure 4 As shown, the system specifically includes: a data preprocessing module, an intelligent reasoning module, and a design draft generation module; wherein, the data preprocessing module is used to store historical user interface design drafts, the intelligent reasoning module is used to parse and match natural language requirements, and the design draft generation module is used to parse and restore the user interface design drafts.
[0080] Specifically, such as Figure 4 and Figure 5 As shown, the data preprocessing module first obtains the attribute information of each node in the historical user interface design draft through the design draft parser to form a tree-shaped data structure (e.g., JSON structure) storage structure data; then, the storage structure data is stored in the relational database as a design draft template; at the same time, the component library pre-stores various components.
[0081] The intelligent inference module first performs a first-level database interaction based on the user's input natural language requirements. This involves querying a relational database using a template component selector to obtain various design templates and querying a component library to obtain various components. Then, it performs a first-level model inference using a recommendation matching model to determine the matching design template and a set of candidate components (e.g., including 10 components). Next, it performs a second-level database interaction, selecting and obtaining the aforementioned design template and candidate component set. Then, it performs a second-level model inference based on the design generator, concurrently calling multiple optimization design models to generate a candidate design set (i.e., a JSON candidate set). Finally, it selects the optimal design from these candidate designs using a JSON validator. Finally, it performs compliance verification on the optimized design to ensure that the selected optimized design passes the compliance check.
[0082] After obtaining the optimized design draft, the design draft generation module recursively restores the optimized design draft to restore it into a user interface design draft that matches the requirements of natural language. Then, the user interface design draft is rendered by the rendering engine and displayed to the user through the online design platform to form an editable, high-fidelity design draft.
[0083] The technical solution of this invention, based on the user's input natural language requirements, obtains a set of corresponding candidate components and tree structure data generated based on historical user interface design drafts through a recommendation matching model; based on the stored structure data and the set of candidate components, obtains a corresponding optimized design draft through at least one optimization design model; and recursively restores the optimized design draft to obtain a user interface design draft that matches the natural language requirements. This not only achieves efficient storage of user interface design drafts and reduces the storage resources occupied, but also completes the component updates of historical user interface design drafts, improving the reusability of user interface design drafts.
[0084] Example 5
[0085] Figure 6 This is a structural block diagram of a user interface design draft acquisition device provided in Embodiment 5 of the present invention. The device specifically includes:
[0086] The structure data acquisition module 501 is used to acquire the corresponding storage structure data and a set of alternative components based on the natural language requirements input by the user through a recommendation matching model; wherein, the storage structure data is tree structure data generated based on historical user interface design drafts;
[0087] The optimization design acquisition module 502 is used to acquire the corresponding optimization design draft through at least one optimization design model based on the storage structure data and the set of alternative components.
[0088] The design draft acquisition module 503 is used to recursively restore the optimized design draft to obtain a user interface design draft that matches the natural language requirements.
[0089] The technical solution of this invention, based on the user's input natural language requirements, obtains a set of corresponding candidate components and tree structure data generated based on historical user interface design drafts through a recommendation matching model; based on the stored structure data and the set of candidate components, obtains a corresponding optimized design draft through at least one optimization design model; and recursively restores the optimized design draft to obtain a user interface design draft that matches the natural language requirements. This not only achieves efficient storage of user interface design drafts and reduces the storage resources occupied, but also completes the component updates of historical user interface design drafts, improving the reusability of user interface design drafts.
[0090] Optionally, the optimization design acquisition module 502 is specifically used to acquire candidate design drafts through multiple optimization design models based on the storage structure data and the set of alternative components; and to acquire an optimized design draft from each of the candidate design drafts based on format score, content score and performance score.
[0091] Optionally, the optimized design acquisition module 502 is further used to perform compliance verification on each of the candidate design drafts to obtain valid candidate design drafts; wherein, the compliance verification includes structural integrity verification, length threshold verification and node relationship verification; and to obtain the optimized design draft from each of the valid candidate design drafts based on format score, content score and performance score.
[0092] Optionally, the design draft acquisition module 503 is specifically used to preload the parsed and acquired components, and to complete the replacement of variant components and the updating of attributes based on the path index.
[0093] Optionally, the user interface design draft acquisition device is further configured to acquire attribute information of each node in the historical user interface design draft; wherein the attribute information includes basic attributes and style attributes; based on the attribute information of each node in the historical user interface design draft, acquire storage structure data to record the nesting path, attribute content, and attribute path of the variant set according to the storage structure data; store the storage structure data in the design library, and configure association information for the storage structure data; wherein the association information includes component identifier, channel identifier, and scene identifier.
[0094] Optionally, the multiple optimized design models include a basic general large model, an inference optimized large model, and a lightweight inference model; wherein, the basic general large model is constructed based on a hybrid expert architecture; the inference optimized large model is obtained based on the basic general large model and inference reinforcement training; and the lightweight inference model is obtained based on the inference optimized large model and a knowledge distillation mechanism.
[0095] Optionally, the optimized design acquisition module 502 is further configured to acquire the format weight, content weight, and performance weight corresponding to the format score, content score, and performance score, respectively, based on user feedback results and expert evaluation results; and to acquire an optimized design draft from each of the valid candidate design drafts based on the format score, content score, performance score, format weight, content weight, and performance weight.
[0096] The above-described apparatus can execute the user interface design draft acquisition method provided in any embodiment of the present invention, and has the corresponding functional modules and beneficial effects of the method. Technical details not described in detail in this embodiment can be found in the user interface design draft acquisition method provided in any embodiment of the present invention.
[0097] Example 6
[0098] Figure 7A schematic diagram of an electronic device 10, which can be used to implement embodiments of the present invention, is shown. The electronic device is intended to represent various forms of digital computers, such as laptop computers, desktop computers, workstations, personal digital assistants, electronic devices, blade electronic devices, mainframe computers, and other suitable computers. The electronic device can also represent various forms of mobile devices, such as personal digital processors, cellular phones, smartphones, wearable devices (such as helmets, glasses, watches, etc.), and other similar computing devices. The components shown herein, their connections and relationships, and their functions are merely illustrative and are not intended to limit the implementation of the invention described and / or claimed herein.
[0099] like Figure 7 As shown, the electronic device 10 includes at least one processor 11 and a memory, such as a read-only memory (ROM) 12 or a random access memory (RAM) 13, communicatively connected to the at least one processor 11. The memory stores computer programs executable by the at least one processor. The processor 11 can perform various appropriate actions and processes based on the computer program stored in the ROM 12 or loaded from storage unit 18 into the RAM 13. The RAM 13 can also store various programs and data required for the operation of the electronic device 10. The processor 11, ROM 12, and RAM 13 are interconnected via a bus 14. An input / output (I / O) interface 15 is also connected to the bus 14.
[0100] Multiple components in electronic device 10 are connected to I / O interface 15, including: input unit 16, such as keyboard, mouse, etc.; output unit 17, such as various types of displays, speakers, etc.; storage unit 18, such as disk, optical disk, etc.; and communication unit 19, such as network card, modem, wireless transceiver, etc. Communication unit 19 allows electronic device 10 to exchange information / data with other devices through computer networks such as the Internet and / or various telecommunications networks.
[0101] Processor 11 can be a variety of general-purpose and / or special-purpose processing components with processing and computing capabilities. Some examples of processor 11 include, but are not limited to, a central processing unit (CPU), a graphics processing unit (GPU), various special-purpose artificial intelligence (AI) computing chips, various processors running machine learning model algorithms, a digital signal processor (DSP), and any suitable processor, controller, microcontroller, etc. Processor 11 performs the various methods and processes described above, such as the user interface design draft acquisition method.
[0102] In some embodiments, the user interface design draft acquisition method may be implemented as a computer program tangibly contained in a computer-readable storage medium, such as a storage unit. In some embodiments, part or all of the computer program may be loaded and / or installed on a heterogeneous hardware accelerator via ROM and / or a communication unit. When the computer program is loaded into RAM and executed by a processor, one or more steps of the user interface design draft acquisition method described above may be performed. Alternatively, in other embodiments, the processor may be configured to perform the user interface design draft acquisition method by any other suitable means (e.g., by means of firmware).
[0103] Various embodiments of the systems and techniques described above herein can be implemented in digital electronic circuit systems, integrated circuit systems, field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-a-chip (SoCs), payload-programmable logic devices (CPLDs), computer hardware, firmware, software, and / or combinations thereof. These various embodiments may include implementations in one or more computer programs that can be executed and / or interpreted on a programmable system including at least one programmable processor, which may be a dedicated or general-purpose programmable processor, capable of receiving data and instructions from a storage system, at least one input device, and at least one output device, and transmitting data and instructions to the storage system, the at least one input device, and the at least one output device.
[0104] Computer programs used to implement the methods of the present invention may be written in any combination of one or more programming languages. These computer programs may be provided to a processor of a general-purpose computer, a special-purpose computer, or other programmable data processing device, such that when executed by the processor, the computer programs cause the functions / operations specified in the flowcharts and / or block diagrams to be performed. The computer programs may be executed entirely on a machine, partially on a machine, or as a standalone software package, partially on a machine and partially on a remote machine, or entirely on a remote machine or server.
[0105] In the context of this invention, a computer-readable storage medium can be a tangible medium that may contain or store a computer program for use by or in conjunction with an instruction execution system, apparatus, or device. A computer-readable storage medium may include, but is not limited to, electronic, magnetic, optical, electromagnetic, infrared, or semiconductor systems, apparatus, or devices, or any suitable combination thereof. Alternatively, a computer-readable storage medium may be a machine-readable signal medium. More specific examples of machine-readable storage media include electrical connections based on one or more wires, portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fibers, portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof.
[0106] To provide user interaction, the systems and techniques described herein can be implemented on a heterogeneous hardware accelerator, which includes: a display device (e.g., a CRT (cathode ray tube) or LCD (liquid crystal display) monitor) for displaying information to the user; and a keyboard and pointing device (e.g., a mouse or trackball) through which the user provides input to the heterogeneous hardware accelerator. Other types of devices can also be used to provide user interaction; for example, feedback provided to the user can be any form of sensory feedback (e.g., visual feedback, auditory feedback, or haptic feedback); and input from the user can be received in any form (including sound input, voice input, or haptic input).
[0107] The systems and technologies described herein can be implemented in computing systems that include backend components (e.g., as data servers), or middleware components (e.g., application servers), or frontend components (e.g., user computers with graphical user interfaces or web browsers through which users can interact with implementations of the systems and technologies described herein), or any combination of such backend, middleware, or frontend components. The components of the system can be interconnected via digital data communication of any form or medium (e.g., communication networks). Examples of communication networks include local area networks (LANs), wide area networks (WANs), blockchain networks, and the Internet.
[0108] A computing system can include clients and servers. Clients and servers are generally located far apart and typically interact through communication networks. The client-server relationship is created by computer programs running on the respective computers and having a client-server relationship with each other. The server can be a cloud server, also known as a cloud computing server or cloud host, which is a hosting product within the cloud computing service system to address the shortcomings of traditional physical hosts and VPS services, such as high management difficulty and weak business scalability.
[0109] It should be understood that the various forms of processes shown above can be used, with steps reordered, added, or deleted. For example, the steps described in this invention can be executed in parallel, sequentially, or in different orders, as long as the desired result of the technical solution of this invention can be achieved, and this is not limited herein.
[0110] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can be made according to design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.
Claims
1. A method for obtaining user interface design drafts, characterized in that, include: Based on the user's input of natural language requirements, the corresponding storage structure data and a set of alternative components are obtained through a recommendation matching model; wherein, the storage structure data is a tree structure data generated based on historical user interface design drafts; Based on the storage structure data and the set of alternative components, the corresponding optimized design draft is obtained through at least one optimized design model; The optimized design draft is recursively restored to obtain a user interface design draft that matches the natural language requirements.
2. The method for obtaining user interface design drafts according to claim 1, characterized in that, The step of obtaining the corresponding optimized design draft through at least one optimized design model based on the storage structure data and the set of candidate components includes: Based on the storage structure data and the set of alternative components, candidate design drafts are obtained through multiple optimization design models. Based on format score, content score, and performance score, the optimized design draft is selected from each of the candidate design drafts.
3. The method for obtaining user interface design drafts according to claim 2, characterized in that, The process of obtaining an optimized design draft from the candidate design drafts based on format scoring, content scoring, and performance scoring includes: Each candidate design draft is subjected to compliance verification to obtain a valid candidate design draft; wherein, the compliance verification includes structural integrity verification, length threshold verification, and node relationship verification; Based on format score, content score, and performance score, the optimized design draft is selected from the valid candidate design drafts.
4. The method for obtaining user interface design drafts according to claim 1, characterized in that, The step of recursively restoring the optimized design draft to obtain a user interface design draft that matches the optimized design draft also includes: The parsed components are preloaded, and variant component replacement and attribute updates are completed based on the path index.
5. The method for obtaining user interface design drafts according to claim 1, characterized in that, The method for obtaining user interface design drafts also includes: Obtain the attribute information of each node in the historical user interface design draft; wherein, the attribute information includes basic attributes and style attributes; Based on the attribute information of each node in the historical user interface design draft, the storage structure data is obtained, and the nesting path, attribute content and attribute path of the variant set are recorded according to the storage structure data. The storage structure data is stored in the design library, and associated information is configured for the storage structure data; wherein, the associated information includes component identifier, channel identifier, and scene identifier.
6. The method for obtaining user interface design drafts according to claim 2, characterized in that, The multiple optimization design models include a basic general large model, an inference optimization large model, and a lightweight inference model; wherein, the basic general large model is constructed based on a hybrid expert architecture; the inference optimization large model is obtained based on the basic general large model and inference reinforcement training; and the lightweight inference model is obtained based on the inference optimization large model and a knowledge distillation mechanism.
7. The method for obtaining user interface design drafts according to claim 2, characterized in that, The process of obtaining an optimized design draft from among the valid candidate design drafts based on format scoring, content scoring, and performance scoring includes: Based on user feedback and expert evaluation results, obtain the format weight, content weight, and performance weight corresponding to the format score, content score, and performance score, respectively. Based on the format score, content score, performance score, format weight, content weight, and performance weight, an optimized design draft is obtained from each of the valid candidate design drafts.
8. A user interface design draft acquisition device, characterized in that, include: The structure data acquisition module is used to acquire the corresponding storage structure data and a set of alternative components based on the natural language requirements input by the user through a recommendation matching model; wherein, the storage structure data is a tree structure data generated based on historical user interface design drafts; The optimization design acquisition module is used to obtain the corresponding optimization design draft through at least one optimization design model based on the storage structure data and the set of candidate components. The design draft acquisition module is used to recursively restore the optimized design draft to obtain a user interface design draft that matches the natural language requirements.
9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions that are used to cause a processor to execute the user interface design draft acquisition method according to any one of claims 1-6.
10. A computer program product comprising a computer program that, when executed by a processor, implements the user interface design draft acquisition method according to any one of claims 1-6.
