UI interface generation method, device, equipment, medium and program product
By combining multi-dimensional similarity matching and layout templates, the UI interface is automatically generated, solving the problems of unstable UI component matching and uncontrollable layout, and realizing an efficient and reliable UI interface generation process.
Patent Information
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- CHONGQING CHANGAN AUTOMOBILE CO LTD
- Filing Date
- 2026-04-23
- Publication Date
- 2026-06-12
AI Technical Summary
In the existing technology, the UI interface generation process is difficult to support complex semantic understanding and cross-scene reuse. UI component matching is unstable, the layout is uncontrollable, and manual code integration is required, resulting in low generation efficiency and unreliability.
By parsing instruction information to extract interface generation elements, and based on multi-dimensional similarity matching and layout templates, a list of UI components is generated, including cosine similarity filtering of functional, structural, visual, behavioral and contextual dimensions. Combined with scene information and compatibility verification, the UI interface is automatically laid out and generated.
It improves the stability, efficiency, and controllability of UI generation, ensures accurate component selection, supports reusability and cross-scenario adaptation, reduces manual intervention, and enhances the reliability and consistency of the generation process.
Smart Images

Figure CN122195432A_ABST
Abstract
Description
Technical Field
[0001] This application relates to the field of computer software technology, specifically to a method, apparatus, device, medium, and program product for generating a UI interface. Background Technology
[0002] In related technologies, when using models to generate UI interfaces, it is difficult to support complex semantic understanding and cross-scene reuse. The matching of discrete components retrieved based on semantics is unstable and cannot be automatically combined into a complete interface. Manual integration of code and layout arrangement of the interface are required. As a result, the UI interface generated by the model often cannot be directly and automatically generated into a stable, clear interface without display errors. Summary of the Invention
[0003] This application provides a method, apparatus, device, medium, and program product for generating a UI interface to solve the problems of unstable, uncontrollable, and inefficient UI generation.
[0004] Firstly, this application provides a method for generating a UI interface, the method comprising: parsing instruction information for generating the UI interface and extracting interface generation elements associated with generating the UI interface from the instruction information; performing multi-dimensional similarity matching on UI components in a UI component library based on the interface generation elements to obtain an initial UI component list for assembling the UI interface; adjusting the initial UI component list based on vehicle operation scenario information to obtain a target UI component list for the UI interface, wherein the scenario information includes the operating environment and user state; arranging the UI components in the UI component list based on a UI interface layout template to generate a UI interface description file; and generating the UI interface based on the description file.
[0005] Based on the aforementioned technical means, accurate capture of user intent is achieved by parsing instruction information and extracting interface generation elements. Multi-dimensional similarity matching solves the problem of UI component functionality not being systematically represented in multiple dimensions, improving the accuracy and reusability of component selection. Component orchestration based on layout templates solves the problem of manual integration of discrete components, achieving automated layout at the component level. This improves the efficiency, stability, and deployability of UI interface generation, effectively addressing the challenges of unstable UI component matching and uncontrollable layout in traditional technologies.
[0006] In one optional implementation, based on interface generation elements, the UI components in the UI component library are matched for similarity across multiple dimensions to obtain an initial list of UI components for building the UI interface. This includes: calculating the cosine similarity between the interface generation elements and the corresponding UI component description information in the UI component library from various dimensions, where the UI component description information is used to characterize the linguistic description information of the UI component; and selecting the initial list of UI components for building the UI interface from the UI component library based on the magnitude of the cosine similarity.
[0007] Based on the above technical means, not only is the accuracy and stability of UI component matching improved, ensuring that the selected components can accurately reflect the user's intent, but also the functional, visual and behavioral characteristics of UI components can be effectively represented and utilized through systematic multi-dimensional description and quantitative matching, enhancing the reliability of UI interface generation and the reusability of components, laying a solid foundation for subsequent UI interface arrangement and generation.
[0008] In one optional implementation, the dimensions include at least one of the following: functional dimension, structural dimension, visual dimension, behavioral dimension, and contextual dimension. The functional dimension is used to characterize the functional description of the UI component; the structural dimension includes the DOM structure, nesting relationship, and / or API structure definition of the UI component; the behavioral dimension includes the interaction logic between the UI component and the user, and / or the state machine definition of the UI component; the visual dimension includes the style of the UI component, the theme of the UI component, and / or the type of the UI component icon; and the contextual dimension includes the use case of the UI component, the layout position of the UI component, and / or the compatibility of the UI component.
[0009] Based on the aforementioned technical means, by constructing a refined multi-dimensional component description, high-quality input is provided for the subsequent generation of the UI component list, thereby ensuring the stability and controllability of the final UI interface generation process.
[0010] In one optional implementation, an initial list of UI components for constructing the UI interface is selected from the UI component library based on the magnitude of cosine similarity. This includes: sorting the UI components in the UI component library in descending order of similarity based on at least one of functional cosine similarity, visual cosine similarity, contextual cosine similarity, structural cosine similarity, and behavioral cosine similarity; selecting the first preset number of UI components from the sequence to form a component candidate set; performing compatibility checks on the UI components in the component candidate set; and selecting target UI components that meet the compatibility conditions to obtain the initial list of UI components.
[0011] Based on the above technical means, the stability and consistency of UI interface generation are improved, making the generation process from instruction information to complete UI interface more controllable and reliable, and solving the problems of inaccurate component selection and lack of compatibility in existing technologies.
[0012] In one optional implementation, the initial UI component list is adjusted based on the vehicle's operating scenario information to obtain a target UI component list for the UI interface. This includes: determining the vehicle's operating environment and user status, wherein the operating environment includes at least one of vehicle speed, location, weather, and road congestion information, and the user status includes at least one of fatigue status, attention status, and emotional status; and adjusting the initial UI component list to obtain a target UI component list adapted to the vehicle's operating environment and the user status.
[0013] Based on the aforementioned technical means, the list of UI components can be adjusted according to the driver's actual needs and changes in the driving environment.
[0014] In an optional implementation, the method further includes: monitoring the operating environment and user status of the vehicle; and when changes in the operating environment and / or user status meet preset conditions, performing the step of adjusting the initial UI component list based on the scenario information of the vehicle operation to obtain the target UI component list of the UI interface.
[0015] Based on the aforementioned technical means, the UI interface can be adjusted in real time and intelligently according to the driver's actual needs and changes in the driving environment.
[0016] In one optional implementation, based on a layout template for the UI interface, the UI components in the UI component list are arranged to generate a description file for the UI interface, including: selecting a layout template for the UI interface from a resource library according to the usage scenario of the UI interface, wherein the layout template includes the size attributes of the UI interface; generating a top-level container and several component containers according to the selected layout template; filling the UI components in the UI component list into the corresponding component containers, and filling the component containers into the top-level container, and then generating a description file for the UI interface based on the filled top-level container.
[0017] Based on the above technical means, the UI components in the UI component list are automatically populated into the corresponding containers and finally a description file is generated. This reduces manual intervention, improves the efficiency and reliability of UI interface generation, solves the problems of component integration difficulties and layout conflicts, and makes the generation process from instruction information to complete UI interface more stable, controllable and efficient.
[0018] In one optional implementation, filling the UI components in the UI component list into the corresponding component containers includes: prioritizing the UI components in the UI component list according to their priority weights; and filling the UI components into the corresponding component containers according to the priority ranking.
[0019] Based on the above technical means, when combined with the technical solution of generating top-level containers and several component containers based on UI interface layout templates, priority sorting can more intelligently guide the placement of components, making the generated UI interface more reasonable in structure and more complete in function, effectively reducing the need for manual intervention, and improving the stability and efficiency of UI interface generation.
[0020] In one alternative implementation, after populating the UI components into the corresponding component containers according to priority, the method further includes: obtaining image information corresponding to the UI components populated into the component containers from the resource library, and injecting the image information into the attribute fields of the corresponding UI components.
[0021] Based on the above technical means, visual content is processed only after the layout is stable, avoiding layout conflicts that may be caused by image loading during the layout stage, thus making the entire UI interface generation process more stable and controllable.
[0022] In one alternative implementation, before generating a description file of the UI interface based on the filled top-level container, the method further includes: when layout conflicts occur between UI components, redistributing the layout of the UI components according to their priority weights.
[0023] Based on the above technical means, before generating the UI interface description file based on the filled top-level container, an automated layout conflict handling mechanism is introduced. This application can effectively solve the layout conflict problem that may occur during the UI component orchestration process.
[0024] In one optional implementation, the instruction information used to generate the UI interface is parsed, and the interface generation elements associated with generating the UI interface in the instruction information are extracted, including: parsing the instruction information to generate a structured semantic tree; extracting keywords associated with the UI interface in the structured semantic tree; classifying the keywords to obtain interface generation elements corresponding to each descriptive dimension of the UI component.
[0025] Based on the above technical means, the accuracy and completeness of the extraction of interface generation elements are improved, thus laying the foundation for the accurate matching of subsequent UI components and the stable generation of UI interfaces. This avoids problems such as "illusion components" and parameter confusion caused by inaccurate or incomplete element extraction, ensuring the quality of the generated UI interface and user experience.
[0026] Secondly, this application provides a UI interface generation apparatus, comprising: a parsing module for parsing instruction information for generating a UI interface and extracting interface generation elements associated with generating the UI interface from the instruction information; a matching module for performing multi-dimensional similarity matching on UI components in a UI component library based on the interface generation elements to obtain an initial UI component list for assembling the UI interface; an arrangement module for arranging the UI components in the UI component list based on a layout template of the UI interface to generate a description file of the UI interface; and a generation module for generating the UI interface based on the description file.
[0027] Thirdly, this application provides an electronic device, including: a memory and a processor, which are communicatively connected to each other. The memory stores computer instructions, and the processor executes the computer instructions to perform the UI interface generation method of the first aspect or any corresponding embodiment described above.
[0028] Fourthly, this application provides a computer-readable storage medium storing computer instructions for causing a computer to execute the UI interface generation method of the first aspect or any corresponding embodiment described above.
[0029] Fifthly, this application provides a computer program product, including computer instructions for causing a computer to execute the method for generating a UI interface according to the first aspect or any corresponding embodiment described above. Attached Figure Description
[0030] To more clearly illustrate the technical solutions in the specific embodiments of this application or the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this application. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.
[0031] Figure 1 This is a schematic diagram of the first method for generating a UI interface according to an embodiment of this application; Figure 2 This is a schematic diagram of a second method for generating a UI interface according to an embodiment of this application; Figure 3 This is a schematic diagram of a third method for generating a UI interface according to an embodiment of this application; Figure 4 This is a schematic diagram of the fourth process of generating a UI interface according to an embodiment of this application; Figure 5 This is a structural block diagram of a UI interface generation device according to an embodiment of this application; Figure 6 This is a structural block diagram of a UI interface generation system according to an embodiment of this application; Figure 7 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of this application. Detailed Implementation
[0032] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.
[0033] It is understood that before using the technical solutions disclosed in the various embodiments of this application, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this application in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.
[0034] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this application, "multiple" means two or more, unless otherwise explicitly specified.
[0035] In related technologies, UI interface generation technology suffers from several problems in the process of generating a complete UI interface from natural language. These problems include weak generalization ability of template-driven methods, error-prone generation of UI code from large models, lack of standardized multi-dimensional modeling system for UI components, lack of resource management mechanisms, and lack of component-level layout and orchestration capabilities. These problems lead to unstable UI component matching, uncontrollable generation process, low reusability, and the need for manual code integration. The overall process does not form an engineering closed loop, affecting generation efficiency, stability, and deployability.
[0036] In response, this application proposes a method for generating a UI interface, such as... Figure 1 As shown, the method includes: Step S101: parse the instruction information used to generate the UI interface, and extract the interface generation elements associated with generating the UI interface from the instruction information.
[0037] The UI (User Interface) refers to the graphical or text-based interface through which users interact with the software system. It typically consists of multiple UI components used to display information and receive user input.
[0038] Instruction information refers to the input information used to instruct the system to generate a specific UI interface. It can be expressed in the form of natural language text, structured data, or preset commands.
[0039] Interface generation elements refer to key information points extracted from instruction information that are directly related to the UI interface generation process, and are used to guide the matching and layout of UI components.
[0040] Specifically, the instruction information can be a natural language description, such as "Generate an e-commerce homepage containing a search box and a product list." One approach is to manually read the instruction information and identify and record keywords or phrases related to UI generation, using them as UI generation elements. Another approach is to pre-set a set of rules, such as based on regular expressions or a simple keyword list, to scan the instruction information and automatically extract text fragments that match the pre-set pattern as UI generation elements.
[0041] Step S102: Based on the interface generation elements, perform multi-dimensional similarity matching on the UI components in the UI component library to obtain an initial list of UI components for building the UI interface.
[0042] A UI component library is a collection of various predefined UI components. For example, each UI component has specific functions, structure, visual style and behavioral logic, and can be reused to build different UI interfaces.
[0043] UI components refer to the basic reusable units that make up a UI interface, such as buttons, text boxes, images, lists, etc., which have independent attributes and behaviors.
[0044] A UI component list refers to a collection of UI components selected for building a specific UI interface after similarity matching.
[0045] Specifically, for example, interface generation elements might include "search," "products," and "list." One approach is to manually compare the text descriptions of the interface generation elements with those of UI components in a UI component library, selecting suitable UI components based on the degree of match as determined by the human assessment. Another approach is to pre-define a set of tags for each UI component, then perform simple string matching between the interface generation elements and these tags, adding UI components with a matching score reaching a certain threshold to the UI component list. Yet another approach is to perform simple word frequency statistics on the descriptions of the interface generation elements and UI components, then determine similarity based on the degree of overlap in word frequencies, and select UI components accordingly.
[0046] Step S103: Adjust the initial UI component list based on the vehicle operation scenario information to obtain the target UI component list of the UI interface.
[0047] The scenario information includes the operating environment and user status. In one example, the operating environment may include vehicle speed, location, road conditions, weather, battery level, traffic congestion, and other external and driving status information of the vehicle. The user status mainly includes in-vehicle occupant status information such as driver fatigue, concentration, emotional state, and operating habits. By sensing the above information in real time, the system determines the security level and information priority of the current interface interaction and dynamically filters, removes, or enhances the initial component list.
[0048] The system verifies and prioritizes the initial UI component list according to preset scenario adaptation rules, removing components with high interaction complexity, high visual interference, or incompatibility with the current scenario, retaining and strengthening core components related to driving safety and information display, and supplementing auxiliary components adapted to the current scenario, ultimately forming a stable and more adaptable target UI component list, ensuring that the generated interface has safety, simplicity, and usability under different driving conditions.
[0049] Step S104: Based on the layout template of the UI interface, arrange the UI components in the UI component list to generate the description file of the UI interface.
[0050] Among them, layout templates refer to predefined UI interface structure frameworks, which specify the arrangement, size attributes, and interrelationships of UI components in the interface.
[0051] A description file is a UI interface structure and attribute information represented in a specific format, such as JSON, XML, or DSL, which is used to guide the actual rendering and generation of the UI interface.
[0052] Specifically, for example, a UI component manifest might contain a search box component, a product list component, and a navigation bar component. One implementation is to pre-define a fixed layout template, such as a two-column layout or a top navigation layout, and then place the UI components from the manifest into the available positions of the template in a pre-defined order, generating a description file. Another implementation is to manually drag and drop the UI components from the manifest into designated areas of a pre-prepared layout template, manually adjust their position and size, and then export them as a description file.
[0053] Step S105: Generate the UI interface based on the description file.
[0054] Specifically, for example, the description file can be a JSON-formatted configuration file that defines in detail the structure, component properties, and layout information of the UI interface. One implementation approach is to use a general-purpose UI rendering engine that can parse the structural and attribute information in the description file and convert it into visual UI elements. Another approach is to convert the description file into code in a specific programming language (such as HTML / CSS / JavaScript, React Native, or Flutter), and then render the UI interface using the appropriate compiler or interpreter.
[0055] It is understood that the method in this embodiment achieves accurate capture of user intent by parsing instruction information and extracting interface generation elements. Through multi-dimensional similarity matching, it solves the problem of UI component functionality not being systematically represented in multiple dimensions, improving the accuracy and reusability of component selection. By using layout template-based component orchestration, it solves the problem of manually integrating discrete components, achieving automated layout at the component level. This improves the efficiency, stability, and deployability of UI interface generation, effectively addressing the challenges of unstable UI component matching and uncontrollable layout in traditional technologies.
[0056] In some of the embodiments described above in this application, a similarity matching based on multiple dimensions of interface generation elements is proposed to match suitable UI components from the UI component library to build a UI interface. However, in its implementation, due to unclear dimension definitions and inconsistent calculation methods, the matching accuracy is low and the component selection is unstable, which affects the reliability and reusability of interface generation. Specifically, the functional, visual and behavioral characteristics of components are not systematically represented, and high-precision retrieval and combination cannot be achieved.
[0057] In response, this application further proposes a method for generating a UI interface, such as... Figure 2 As shown, the method includes: Step S201: Parse the instruction information used to generate the UI interface, and extract the interface generation elements associated with generating the UI interface from the instruction information. See details... Figure 1 Step S101 in the embodiment will not be repeated here.
[0058] Step S202: Based on the interface generation elements, perform multi-dimensional similarity matching on the UI components in the UI component library to obtain an initial list of UI components for assembling the UI interface. Specifically, this includes: Step S2021: Calculate the cosine similarity between the interface generation elements and the corresponding UI component description information in the UI component library from various dimensions. The UI component description information is used to represent the language description information of the UI component.
[0059] Specifically, when calculating the cosine similarity between the interface-generated elements and the corresponding UI component descriptions in the UI component library from various dimensions, the interface-generated elements are parsed and extracted from the instruction information, representing the user's specific needs for the UI interface, such as keywords, phrases, or structured data, used to describe the UI interface's functionality, visual style, interactive behavior, or context. The UI component library is a collection of predefined UI components, each accompanied by its own UI component description information. UI component description information is linguistic description information used to characterize the characteristics of a UI component; it can be structured metadata, such as the component's name, functional description, visual attributes, behavioral logic, or applicable scenarios. The various dimensions are ways to classify and quantify the characteristics of UI components, such as functional dimensions, structural dimensions, visual dimensions, behavioral dimensions, and contextual dimensions, each corresponding to a portion of the UI component description information. When calculating cosine similarity, the interface-generated elements and UI component descriptions can be converted into high-dimensional vectors using word embedding models such as Word2Vec and GloVe, or large language models such as BERT and GPT series. Then, for each dimension, feature sub-vectors corresponding to that dimension are extracted from these vectors, and the cosine similarity between these sub-vectors is calculated. Alternatively, a set of keywords or feature labels can be predefined for each dimension. The interface-generated elements and UI component descriptions are parsed and mapped to these keywords or labels in each dimension, forming sparse vectors. Then, the cosine similarity between these sparse vectors is directly calculated. UI component descriptions are used to represent the linguistic descriptions of UI components. This clarifies the essence of UI component descriptions: they are data that semantically describes UI components in natural or structured language, enabling the system to understand the deeper meanings of UI component functions, appearance, and behavior. For example, UI component description information can be a metadata file in JSON or XML format, containing fields such as "name", "description", "functionality", "visual_style", "interaction_logic", and "usage_scenario", where the value of each field is a piece of natural language text or a predefined tag. Alternatively, UI component description information can be a collection of nodes and relationships in a knowledge graph, where the UI component is the entity, and its attributes (such as functionality, visual, and behavior) are the relationships or attribute values, represented by a semantic network to provide its linguistic description information.
[0060] Step S2022: Based on the cosine similarity, select the initial list of UI components to build the UI interface from the UI component library.
[0061] Specifically, this step involves precisely selecting the UI components that best meet user needs from the UI component library based on quantified similarity results, forming a set of components to be used. For example, a similarity threshold can be set for each dimension; a UI component is only included in the initial candidate set when its cosine similarity exceeds the corresponding threshold in all or multiple preset dimensions. Then, the components in the candidate set can be comprehensively scored, for example, by weighted averaging of the similarity across dimensions, and selecting a preset number of components with the highest comprehensive scores as the UI component list. Alternatively, instead of setting hard thresholds, all UI components in the UI component library can be sorted in descending order according to their comprehensive similarity to the interface generation elements, and then the top K UI components or those with similarity higher than a dynamically calculated percentile can be selected as the UI component list.
[0062] Step S203: Adjust the initial UI component list based on the vehicle operation scenario information to obtain the target UI component list for the UI interface. See details. Figure 1 Step S103 in the embodiment will not be described again here.
[0063] Step S204: Based on the UI layout template, arrange the UI components in the UI component list to generate a UI description file. See details... Figure 1 Step S104 in the embodiment will not be described again here.
[0064] Step S205: Generate the UI interface based on the description file. See details in [link / reference]. Figure 1 Step S105 in the embodiment will not be described again here.
[0065] It is understood that, through the above-described technical solutions in this embodiment, this application can effectively solve the problems of low UI component matching accuracy, unstable selection, and the lack of systematic characterization of component functions, visual features, and behavioral characteristics in the prior art. Specifically, by calculating the cosine similarity between interface generation elements and UI component description information from various dimensions, this application can comprehensively and meticulously capture the matching degree between user needs and UI component characteristics. UI component description information, as a linguistic description of UI components, enables the system to deeply understand the semantic connotation of the components, thereby avoiding the limitations of relying solely on surface features for matching. Cosine similarity, as an objective quantitative indicator, ensures the accuracy and reliability of the matching results. Based on this, filtering according to the magnitude of cosine similarity allows for the priority selection of UI components that best match user needs, thus forming a high-quality UI component list. This not only improves the accuracy and stability of UI component matching, ensuring that the selected components accurately reflect user intent, but also, through systematic multi-dimensional description and quantitative matching, effectively characterizes and utilizes the functional, visual, and behavioral characteristics of UI components, enhancing the reliability of UI interface generation and the reusability of components, laying a solid foundation for subsequent UI interface arrangement and generation.
[0066] In some of the embodiments described above in this application, dimensions are proposed for similarity matching. However, the dimension definition is not comprehensive in this process, which leads to unstable component matching and makes it difficult to support complex semantic understanding and cross-scenario reuse.
[0067] In this regard, this application further proposes that the dimensions should include at least one of the following: functional dimension, structural dimension, visual dimension, behavioral dimension, and contextual dimension. Specifically, the functional dimension is used to characterize the functional description of the UI component; the structural dimension includes the DOM structure, nesting relationships, and / or API structure definition of the UI component; the behavioral dimension includes the interaction logic between the UI component and the user, and / or the state machine definition of the UI component; the visual dimension includes the style of the UI component, the theme of the UI component, and / or the type of the UI component icon; and the contextual dimension includes the usage scenarios of the UI component, the layout position of the UI component, and / or the compatibility of the UI component.
[0068] Specifically, the functional dimension aims to capture the core purpose and operation of UI components. For example, the function of a UI component can be characterized through text descriptions, keyword tags, or semantic classifications, such as "data input," "information display," and "navigation." Another approach is to associate UI components with predefined functional ontologies or domain models to achieve a deeper level of functional semantic understanding. The structural dimension focuses on the internal organization of UI components and their relationships with other components. The DOM structure of a UI component can be represented as a tree data structure or a graph structure, recording in detail the hierarchical relationships and attributes of elements within the component. Nesting relationships clarify the internal or external containment logic of a UI component when it acts as a parent or child component. For example, a form component may contain multiple input box components. The API structure definition describes the interface specifications exposed by the UI component, including its acceptable input parameters, triggered events, and callable methods. This can be described using JSON Schema, TypeScript interface definitions, or XML Schema. The behavioral dimension depicts the dynamic responses and state changes of UI components under user interaction. Interaction logic can be represented as a series of event handlers and their triggered action sequences; for example, clicking a button might pop up a dialog box, or hovering the mouse over it might display a tooltip. State machine definition describes the component's lifecycle and dynamic behavior by specifying its various possible states, such as "enabled," "disabled," "loading," and "error," as well as the transition conditions and triggering events between states. The visual dimension focuses on the appearance and style characteristics of UI components. Styles can include a collection of CSS properties such as color, font, size, border, and background, or references to preset style classes. Themes are a unified set of visual specifications that ensure consistent visual style across different application scenarios by defining a series of design tokens or theme variables, such as "dark mode" or "brand theme." Icon types specify the visual style or source of the icons used by the UI component, such as "vector icons," "bitmap icons," or "icons from a specific icon library." The context dimension considers the adaptability and compatibility of UI components in real-world application environments. Use cases describe the specific environments or business processes in which UI components are typically deployed and used, such as "login pages," "data reports," or "settings interfaces." Layout placement specifies the typical location of a UI component within the overall UI interface, such as the "head navigation," "sidebar," or "main content area." Compatibility refers to the UI component's ability and limitations to work on different platforms, browser versions, device types, or with other components.
[0069] It is understood that, through the above-described technical solutions in this embodiment, this application can significantly improve the accuracy and stability of UI component similarity matching. Specifically, by introducing functional, structural, visual, behavioral, and contextual dimensions, this application constructs a comprehensive and refined multi-dimensional modeling system for UI components. When performing similarity matching of UI components in the UI component library, the system is no longer limited to a single or limited set of features, but can comprehensively consider multiple key aspects such as functional purpose, internal structure, interactive behavior, visual performance, and application environment. Multi-dimensional information representation enables similarity calculation to more accurately reflect the essential characteristics and applicability of UI components, effectively solving the problem of unstable component matching caused by incomplete dimension definitions. In addition, the introduction of functional and behavioral dimensions allows the system to deeply understand the semantics and interaction logic of UI components, overcoming the limitations of traditional methods in supporting complex semantic understanding. At the same time, consideration of the contextual dimension ensures that the selected UI components not only match in terms of function and visuals, but also fit in terms of actual usage scenarios and compatibility, improving the cross-scenario reusability of UI components. Overall, this application provides high-quality input for the subsequent generation of the UI component list by constructing a detailed multi-dimensional component description, thereby ensuring the stability and controllability of the final UI interface generation process.
[0070] In some of the embodiments described above in this application, a method for filtering UI components based on similarity matching across multiple dimensions is proposed. However, in this process, relying solely on similarity scores may lead to inaccurate component selection or neglect of compatibility issues, affecting the stability and consistency of the UI interface.
[0071] In response, this application further proposes a list of initial UI components for constructing the UI interface, selected from the UI component library based on the magnitude of cosine similarity, including: Step a1: Based on at least one of the following: cosine similarity in functional dimension, cosine similarity in visual dimension, cosine similarity in context dimension, cosine similarity in structural dimension, and cosine similarity in behavioral dimension, sort the UI components in the UI component library in descending order of similarity, and select the first preset number of UI components from the sequence to form a component candidate set.
[0072] Specifically, this step aims to efficiently identify potential components highly relevant to interface generation elements from a large UI component library and organize them into a manageable candidate set, laying the foundation for subsequent refined screening. For example, based on the emphasis on a specific dimension in the user instruction information, the cosine similarity of that dimension can be selected as the primary sorting criterion. If the instruction information focuses on the functional implementation of the UI interface, then the cosine similarity of the functional dimension can be prioritized for sorting UI components. Alternatively, the cosine similarities of multiple dimensions can be weighted and summed to obtain a comprehensive similarity score, and then the UI components can be sorted according to this comprehensive score. For example, the comprehensive similarity of each UI component can be calculated based on a preset weight configuration, and then sorted in descending order accordingly. Another option is to adopt a multi-level sorting strategy, for example, first sorting based on the cosine similarity of the functional dimension, and then, for components with the same similarity, a secondary sorting based on the cosine similarity of the visual dimension. Here, "preset number of UI components" refers to a pre-defined threshold number, such as the top 10, 20, or 50 UI components with the highest similarity. This preset value can be dynamically adjusted based on the actual application scenario, the size of the UI component library, and the requirements for filtering efficiency and accuracy. By filtering out the first preset number of UI components, the scope of subsequent compatibility checks can be effectively narrowed, improving processing efficiency.
[0073] Step a2: Perform compatibility checks on the UI components in the component candidate set, and filter out the target UI components that meet the compatibility conditions to obtain the initial UI component list.
[0074] Specifically, this step aims to ensure that the final selected UI components not only semantically match the interface generation elements but also technically work together to avoid UI generation failures or runtime anomalies due to component conflicts. For example, it can check whether the API interfaces and data structure definitions of UI components in the candidate set match; for instance, whether the output data format of one UI component can be accepted by the input data format of another, or whether they share the same data model. Alternatively, it can check whether the style properties of UI components, such as CSS classes and theme variables, conflict or inconsistency exists; for example, ensuring that all selected components follow the same design system specifications or theme style to avoid visual inconsistencies. Furthermore, it can check whether the interaction logic or state machine definitions of UI components conflict; for example, whether two UI components respond to the same user events and produce contradictory behaviors, or whether their state transitions are smooth. In addition, it can check whether UI components have unmet external dependencies or circular dependencies to ensure that all components and their dependencies are correctly loaded and executed. You can also check for layout conflicts between UI components. For example, do two components occupy the same space or cause layout errors, or can they fit into the expected layout container? "Meeting compatibility conditions" here can be a set of predefined rules, such as compatibility tags in component metadata, dependency graphs between components, or dynamically evaluating the interoperability between components through static code analysis, simulation, etc. These checks effectively eliminate incompatible UI components, ensuring that the final UI component list is stable and usable.
[0075] It is understood that, through the above-described technical solution in this embodiment, this application, based on multi-dimensional similarity matching for UI component selection, further introduces a refined sorting mechanism and rigorous compatibility verification. First, by sorting UI components according to cosine similarity in at least one dimension and selecting a preset number of UI components to form a component candidate set, it effectively focuses on components most relevant to the interface generation elements, improving the accuracy and efficiency of the initial screening and avoiding the inaccuracies that may result from relying solely on a single similarity threshold. Second, compatibility verification is performed on this component candidate set, and target UI components that meet the compatibility conditions are selected. This ensures that the components in the final UI component list are not only highly semantically matched but also technically compatible, avoiding problems such as UI interface generation failure, runtime errors, or visual inconsistencies caused by component conflicts. This improves the stability and consistency of UI interface generation, making the generation process from instruction information to a complete UI interface more controllable and reliable, and solving the problems of inaccurate component selection and lack of compatibility in the prior art.
[0076] In some of the solutions mentioned above in this application, UI components are arranged based on UI layout templates to generate UI description files. However, in this process, there is a lack of a mechanism to dynamically select layout templates and automatically populate components according to the usage scenario, which leads to difficulties in component integration, layout conflicts, and affects the stability and efficiency of interface generation.
[0077] In response, this application proposes a method for generating a UI interface, such as... Figure 3 As shown, the method includes: Step S301: Parse the instruction information used to generate the UI interface, and extract the interface generation elements associated with generating the UI interface from the instruction information. See details... Figure 1 Step S101 in the embodiment will not be repeated here.
[0078] Step S302: Based on the interface generation elements, perform multi-dimensional similarity matching on the UI components in the UI component library to obtain an initial list of UI components for building the UI interface. Specifically, this includes: Step S3021: Calculate the cosine similarity between the interface generation elements and the corresponding UI component description information in the UI component library from various dimensions. The UI component description information is used to represent the linguistic description information of the UI component. (See details...) Figure 2 Step S2021 in the embodiment will not be described again here.
[0079] Step S3022: Based on the cosine similarity, select an initial list of UI components from the UI component library to build the UI interface. See details... Figure 2 Step S2022 in the embodiment will not be described again here.
[0080] Step S303: Adjust the initial UI component list based on the vehicle operation scenario information to obtain the target UI component list for the UI interface. See details. Figure 1 Step S103 in the embodiment will not be described again here.
[0081] Step S304: Based on the UI layout template, arrange the UI components in the UI component list to generate a UI description file. Specifically, this includes: Step S3041: Select a layout template for the UI interface from the resource library according to the usage scenario of the UI interface. The layout template includes the size attributes of the UI interface.
[0082] Specifically, the use case of a UI interface refers to the application background of the UI interface in a specific business process, user interaction context, or device environment, such as the product details page of an e-commerce application, the dynamic information flow of a social application, or the list page of a news reading application. The resource library is a database or file system that stores and manages various layout templates. Each layout template predefines the overall structure and layout rules of the UI interface and associates it with applicable use case tags and size attributes. Size attributes may include, but are not limited to, width, height, minimum / maximum size limits, responsive breakpoints, etc., to ensure that the UI interface can adapt to different devices, such as mobile phones, tablets, and desktop monitors, and screen orientations, such as landscape and portrait. When selecting a layout template, the system can retrieve and select the layout template that best matches the current use case from the resource library based on the use case information parsed from the instruction information, using matching algorithms such as tag-based matching, semantic similarity matching, or a rule engine. For example, if the instruction message indicates that an "e-commerce product details page" should be generated, the system will select a preset "product details page" layout template from the resource library. This template may include a product image area, a price information area, a purchase button area, etc., and come with responsive layout rules for different device sizes.
[0083] Step S3042: Generate a top-level container and several component containers based on the selected layout template.
[0084] Specifically, the top-level container is the outermost structure of the entire UI interface. It defines the overall boundary and basic layout direction of the UI interface, such as vertical stacking or horizontal arrangement. Component containers are sub-regions within the top-level container, used to hold UI components of specific types or functions, such as a header container, a content area container, and a bottom navigation container. The process of generating these containers can involve parsing the structure definition file of the selected layout template, such as JSON, XML, or a specific DSL file, and instantiating the defined container hierarchy, size, position, layout method, and other information into in-memory data structures or virtual DOM nodes. Another implementation is that the layout template can be a configuration exported from a visual design tool. The system dynamically creates corresponding UI elements as containers based on this configuration and sets their properties, thereby constructing the skeleton structure of the UI interface. For example, a layout template might define a top-level container containing a top navigation bar container, a middle content area container, and a bottom action bar container; the system will create corresponding placeholder structures based on these definitions.
[0085] Step S3043: Fill the UI components in the UI component list into the corresponding component containers, fill the component containers into the top-level container, and then generate the UI interface description file based on the filled top-level container.
[0086] Specifically, the UI component list is a collection of specific UI components used to construct the current UI interface, obtained through similarity matching and filtering. The population process refers to placing each UI component in the UI component list into its corresponding component container based on its type, function, or preset layout rules. For example, a "search box" UI component might be populated into the "header container," while a "product list" UI component would be populated into the "content area container." This population process can be based on predefined mapping rules or dynamically determine the specific position and arrangement of components within the container using intelligent layout algorithms. Once all UI components have been populated into their respective component containers, and all component containers are organized into the top-level container, the entire UI structure is complete. At this point, the system generates a UI description file based on this complete top-level container structure. This description file can be in various formats, such as JSON, component definition code for front-end frameworks like React, Vue, and Angular, HTML / CSS / JavaScript combination files, or native UI layout files for specific platforms like iOS and Android. This description file contains all the structure, style, and interaction logic information of the UI interface, and can be directly used for the rendering and display of the UI interface.
[0087] Step S305: Generate the UI interface based on the description file. See details in [link / reference]. Figure 1 Step S105 in the embodiment will not be described again here.
[0088] It is understood that, through the above technical solutions in this embodiment, this application can dynamically select the most suitable layout template according to the usage scenario of the UI interface, solving the problems of weak generalization ability and inability to dynamically expand to support new functional modules in traditional fixed templates. By introducing the size attribute of the layout template, the adaptive layout of the UI interface on different terminal devices is ensured, effectively addressing the challenge of multi-terminal adaptation. In addition, by generating top-level containers and component containers, structured placeholder space is provided for UI components, avoiding layout chaos and ensuring the orderly arrangement and compatibility of components. The UI components in the UI component list are automatically filled into the corresponding containers, and finally a description file is generated, reducing manual intervention, improving the efficiency and reliability of UI interface generation, solving the problems of component integration difficulties and layout conflicts, and making the generation process from instruction information to a complete UI interface more stable, controllable, and efficient.
[0089] In some of the solutions mentioned above in this application, a description file is proposed to populate UI components into the corresponding component container to arrange UI components and generate UI interface. However, in this process, due to the lack of an intelligent sorting mechanism for UI component priority, the population order may be disordered, causing layout conflicts or uneven resource allocation, thereby reducing the stability and efficiency of UI interface generation.
[0090] In this regard, this application further proposes to populate the UI components in the UI component manifest into the corresponding component containers, including: Step b1: Sort the UI components in the UI component list according to their priority weights.
[0091] The priority weight of a UI component is a metric used to measure its importance, functional criticality, or visual prominence within the UI interface. This weight can be predefined; for example, core functional components such as navigation bars and main operation buttons can be assigned higher priority weights, while decorative elements or secondary information display components can have lower priority weights. Furthermore, the priority weight can be dynamically adjusted based on the UI's usage scenario, specific keywords in user commands (such as "important" or "primary"), or the component's expected layout position within the UI interface (such as center or top of the screen). For instance, machine learning models can be used to automatically assign weights to UI components, combining historical user behavior data and design guidelines; alternatively, designers can preset a default weight value for each component in the UI component library and fine-tune it as needed in specific generation tasks.
[0092] Step b2: Sort the UI components according to priority and populate the corresponding component containers.
[0093] Specifically, prioritizing UI components in the UI component list aims to ensure that critical or important UI components are processed and laid out first during UI generation, effectively avoiding layout conflicts and uneven resource allocation. The sorting process can be based on the priority weights of the UI components; for example, a descending order algorithm can be used, placing the UI component with the highest weight at the front of the list. In practice, standard sorting algorithms such as quicksort and mergesort can be used to sort according to the numerical priority weights of the UI components; alternatively, if the priority weights are categorical, such as "high," "medium," and "low," bucket sort or a custom comparison function can be used for grouping and sorting to ensure that components of equal priority maintain a relative order.
[0094] After prioritizing the UI components, these components are sequentially populated into pre-generated component containers according to the sorting order. This step is crucial for UI layout; by following the priority order, it ensures that high-priority UI components occupy optimal layout positions or are allocated sufficient space, thus reducing the likelihood of conflicts during subsequent component placement. For example, the sorted list of UI components can be iterated through, and for each component, based on its type, size, and priority, it can be placed into the most suitable and unoccupied component container reserved in the layout template. In another implementation, the layout engine can dynamically adjust the size or position of the component containers based on component priority to accommodate the needs of high-priority components and find suitable remaining space for low-priority components, thereby achieving an efficient layout with minimal conflicts.
[0095] It is understood that, through the above-described technical solution in this embodiment, when filling UI components from the UI component list into the corresponding component containers, this application first prioritizes the UI components according to their priority weights, and then fills them according to the sorting results. This effectively solves problems such as chaotic filling order, layout conflicts, and uneven resource allocation caused by the lack of intelligent sorting. By introducing priority weights, the system can identify the importance of UI components, ensuring that core functional modules or key visual elements are processed and laid out first, thereby avoiding subsequent conflicts caused by low-priority components unreasonably occupying space. This not only optimizes the resource allocation and layout structure within the component containers and reduces the risk of position competition or overlap between components, but also significantly improves the automation level and consistency of UI interface generation. When combined with the technical solution of generating top-level containers and several component containers based on UI interface layout templates, priority sorting can more intelligently guide the placement of components, making the generated UI interface more structurally reasonable and functionally complete, effectively reducing the need for manual intervention, and improving the stability and efficiency of UI interface generation.
[0096] In some of the embodiments described above in this application, UI components are populated into a component container to arrange the UI interface. However, in this process, image information is not automatically matched and injected, resulting in visual assets being unable to be semantically associated with UI components, leading to a mixed interface style and difficulty in maintenance.
[0097] In this regard, this application further proposes that after populating the UI components into the corresponding component containers according to priority, the method also includes: Step c1: Retrieve the image information corresponding to the UI component populated in the component container from the resource library, and inject the image information into the attribute field of the corresponding UI component.
[0098] Specifically, a repository can be a system or module that centrally stores and manages various digital assets. These digital assets can include images, icons, fonts, videos, audio, style sheets, script files, etc., and are important components of the visual and functional elements used to build a user interface. Repositories typically have metadata management, version control, access control, and retrieval functions to efficiently store, retrieve, and reuse resources. For example, a repository can be a cloud storage-based service that provides API interfaces for UI generation systems to call to obtain the necessary image information; alternatively, a repository can be a local file system or database where image resources are organized and stored according to a predefined directory structure or tag system and accessed through internal services.
[0099] When retrieving image information corresponding to UI components populated in the component container, this step aims to retrieve and obtain visually or functionally matching image information from the resource library based on the semantics or identifiers of the UI components already populated in the component container. Its purpose is to provide necessary visual content for the UI components, enabling them to be fully presented and meet design expectations. Specifically, the system can use the UI component's type, name, or keywords contained in its attribute fields, such as "user avatar," "product image," or "background image," as query conditions to perform semantic or tag matching in the resource library to find the most relevant images; alternatively, if the UI component has pre-defined image resource reference IDs or URLs in its design, the system can directly use these IDs or URLs to accurately retrieve the corresponding image information from the resource library.
[0100] Next, the image information is injected into the attribute fields of the corresponding UI component. This step involves writing the acquired image information, such as the image URL, image data, and image ID, into the data structure of the target UI component, specifically its attribute fields. The purpose of this is to bind the visual assets to the UI component itself, enabling the UI component to correctly load and display the corresponding images during rendering, thereby achieving automated integration of visual content. For example, the URL or path of the acquired image resource can be directly assigned to the `src` attribute of the UI component; or, if the UI component is a custom component, it may have defined attribute fields specifically for receiving image information, and the system will populate these predefined fields with the image information.
[0101] It is understood that, through the technical solution described in this embodiment, after UI components are sorted according to priority and populated into their respective component containers, the system can proactively retrieve image information corresponding to these UI components from the resource library and inject it into the attribute fields of the corresponding UI components. This solves the problem of mixed interface styles and maintenance difficulties caused by the failure to automatically match and inject image information. Specifically, by retrieving image information from the resource library, it can be ensured that the selected images are highly matched with the semantics and functions of the UI components, avoiding errors and inconsistencies that may be caused by manually searching and configuring images. At the same time, directly injecting image information into the attribute fields of UI components enables the UI components to automatically load the correct visual content during subsequent rendering and display, improving the automation and efficiency of the UI interface generation process, ensuring the visual consistency and standardization of the generated interface, and reducing the complexity of later maintenance. The strategy of injecting images after component orchestration ensures that visual content is processed only after the layout is stable, avoiding layout conflicts that may be caused by image loading during the layout stage, thus making the entire UI interface generation process more stable and controllable.
[0102] In some of the solutions mentioned above in this application, a description file for the UI interface is generated by arranging UI components in the UI component list based on a layout template. However, in this process, when layout conflicts occur between UI components, there is a lack of an automated conflict resolution mechanism, which leads to an unstable and inefficient interface generation process. Manual intervention is required for integration, affecting the overall process's engineering loop and deployability.
[0103] In this regard, this application further proposes that, before generating the UI description file based on the populated top-level container, the method also includes: Step d1: When layout conflicts occur between UI components, the layout of the UI components is redistributed according to their priority weights.
[0104] Specifically, layout conflicts refer to situations where two or more UI components overlap in space, exceed preset boundaries, or violate established layout rules during the UI layout process. The system can identify layout conflicts by monitoring the bounding box information of each UI component in real time during the layout algorithm execution. When the bounding boxes of any two UI components intersect, or when the bounding box of a UI component exceeds its parent container or the preset interface size, a layout conflict is determined. Alternatively, the system can predefine a series of layout rules and constraints, such as minimum spacing, alignment, and maximum size. After the UI components are arranged, the system can iterate through all UI components and their relative positions to check for violations of these predefined rules.
[0105] When a layout conflict is detected, the system will redistribute the layout of UI components. Layout redistribution refers to the system automatically adjusting the position, size, or hierarchy of one or more conflicting UI components after a layout conflict is detected, in order to eliminate the conflict and generate an interface that conforms to the layout rules. For example, when an overlapping conflict occurs, the system can shift or scale lower-priority UI components according to their priority weights so that they no longer overlap with higher-priority UI components. Another redistribution strategy is to adjust the layout container of the UI components or their alignment within the container. For example, when there is insufficient horizontal space for multiple components, the system can adjust the lower-priority components from a horizontal layout to a vertical layout, or hide or collapse them, to ensure the complete display of higher-priority components.
[0106] It is understood that by introducing an automated layout conflict handling mechanism before generating the UI interface description file based on the filled top-level container using the above-described technical solution in this embodiment, this application can effectively solve the layout conflict problem that may occur during the UI component orchestration process. Specifically, when the system identifies a layout conflict between UI components, it can intelligently redistribute the layout of the conflicting components according to the preset UI component priority weights. This avoids interface rendering failures or situations requiring manual intervention due to layout conflicts, improving the automation and stability of the UI interface generation process. Compared to the layout uncertainty that may arise from orchestration based solely on layout templates, this solution ensures that the final generated description file can accurately and error-free guide the construction of the UI interface, improving generation efficiency and interface usability. This makes the conversion from the UI component list to the final description file more reliable and efficient, further improving the engineering closed loop and deployability of the UI interface generation method.
[0107] In some of the solutions described above in this application, the instructions used to generate the UI interface are parsed and the interface generation elements are extracted for subsequent UI component matching and interface generation. However, in the implementation process, the instructions may contain unstructured or vague descriptions, which may lead to inaccurate or incomplete extraction of elements, affecting the accurate matching of subsequent components and the stable generation of the interface.
[0108] In response, this application further proposes a method for generating a UI interface, such as... Figure 4 As shown, the method includes: Step S401: Parse the instruction information used to generate the UI interface, and extract the interface generation elements associated with generating the UI interface from the instruction information. Specifically, this includes: Step S4011: Parse the instruction information and generate a structured semantic tree.
[0109] Specifically, parsing instruction information and generating a structured semantic tree refers to transforming user-inputted instructions used to generate a UI interface, such as natural language text, voice commands, or graphical input, into a tree-like data model with clear hierarchical relationships and semantic structure. This structured semantic tree can clearly express the intent, objects, and relationships of the instruction information, thereby eliminating potential ambiguity and vagueness in natural language. For example, natural language processing techniques, such as syntactic analysis, dependency parsing, or semantic role labeling, can be used to parse natural language instructions into an abstract syntax tree or semantic dependency graph, thereby constructing a structured semantic tree. Alternatively, pre-trained large-scale language models or sequence-to-sequence models can be used, taking the instruction information as input and directly outputting a structured semantic tree that conforms to predefined grammatical rules.
[0110] Step S4012: Extract keywords related to the UI interface from the structured semantic tree.
[0111] Specifically, extracting keywords associated with the UI interface from the structured semantic tree refers to identifying and filtering words or phrases from the generated structured semantic tree that directly or indirectly indicate the core information of the UI interface, such as its composition, function, style, and layout. Keywords are the foundation for subsequent UI component matching and interface generation. For example, the structured semantic tree can be traversed, and nodes or leaf nodes related to UI components, layout, function, and visual attributes can be identified and extracted as keywords based on a predefined UI domain vocabulary, ontology knowledge base, or semantic rules. Alternatively, graph neural networks or rule-based pattern matching algorithms can be used to perform pattern recognition on the structured semantic tree to locate and extract keywords with specific semantic labels or structural features.
[0112] Step S4013: Classify the keywords to obtain interface generation elements corresponding to each descriptive dimension of the UI component.
[0113] Specifically, classifying keywords to obtain interface generation elements corresponding to various descriptive dimensions of UI components refers to categorizing extracted keywords into predefined UI component description dimensions based on their semantic content and the UI attributes they represent. Dimensions can include functional, structural, visual, behavioral, and contextual dimensions. For example, based on pre-trained text classification models such as BERT and RoBERTa, the extracted keywords can be input into the model, which will automatically determine the UI component description dimension to which they belong. Alternatively, a rule-based classifier can be built, defining a series of rules, such as "if the keyword contains 'button' or 'input box,' it is classified as a functional dimension; if it contains 'color' or 'font,' it is classified as a visual dimension," and so on.
[0114] Step S402: Based on the interface generation elements, perform multi-dimensional similarity matching on the UI components in the UI component library to obtain an initial list of UI components for building the UI interface. Specifically, this includes: Step S4021: Calculate the cosine similarity between the interface generation elements and the corresponding UI component description information in the UI component library from various dimensions. The UI component description information is used to represent the linguistic description information of the UI component. (See details...) Figure 2 Step S2021 in the embodiment will not be described again here.
[0115] Step S4022: Based on the cosine similarity, select an initial list of UI components from the UI component library to build the UI interface. See details... Figure 2 Step S2022 in the embodiment will not be described again here.
[0116] Step S403: Adjust the initial UI component list based on the vehicle operation scenario information to obtain the target UI component list for the UI interface. See details. Figure 1 Step S103 in the embodiment will not be repeated here. Step S404 involves arranging the UI components in the UI component list based on the UI layout template to generate a UI description file. Specifically, this includes: Step S4041: Based on the usage scenario of the UI interface, select a layout template for the UI interface from the resource library. The layout template includes the size attributes of the UI interface. See details... Figure 3 Step S3021 in the embodiment will not be described again here.
[0117] Step S4042: Based on the selected layout template, generate the top-level container and several component containers. See details... Figure 3 Step S3022 in the embodiment will not be described again here.
[0118] Step S4043: Populate the UI components from the UI component list into their respective component containers, then populate the component containers into the top-level container, and finally generate the UI description file based on the populated top-level container. See details. Figure 3 Step S3023 in the embodiment will not be repeated here.
[0119] Step S405: Generate the UI interface based on the description file. See details in [link / reference]. Figure 1 Step S105 in the embodiment will not be described again here.
[0120] It is understood that the technical solution described in this embodiment parses unstructured or ambiguous instruction information into a structured semantic tree, solving the problem of non-standard instruction input and providing a clear and unambiguous semantic representation for subsequent processing. Extracting keywords directly related to the UI interface from the structured semantic tree allows for precise focus on user intent, eliminating irrelevant information interference and ensuring the accuracy and completeness of the extracted elements. Categorizing these keywords into various descriptive dimensions of UI components aligns the extracted interface generation elements with the multi-dimensional descriptive information in the UI component library, providing standardized and structured input for subsequent UI component selection based on multi-dimensional similarity matching. Overall, this series of steps improves the accuracy and completeness of interface generation element extraction, laying the foundation for accurate matching of subsequent UI components and stable UI interface generation. It avoids problems such as "illusionary components" and parameter confusion caused by inaccurate or incomplete element extraction, ensuring the quality of the generated UI interface and user experience.
[0121] In some optional embodiments, this application further proposes that the interface generation elements, the dimensions of the UI interface, and the description file format of the UI interface include JSON format.
[0122] Specifically, JSON, or JavaScript Object Notation, is a lightweight data-interchange format that is easy for humans to read and write, as well as easy for machines to parse and generate. It organizes data in key-value pairs and ordered lists, supporting data types such as strings, numbers, booleans, arrays, objects, and null. Its structured nature makes it well-suited for representing complex data structures, such as tree structures or nested objects. In UI generation scenarios, the widespread support and ease of use of JSON make it an ideal choice for data exchange and configuration. For example, when transferring data between different modules, such as instruction parsing modules, component matching modules, and layout orchestration modules, using JSON consistently avoids the overhead of data conversion and potential compatibility issues.
[0123] It is understood that the technical solution described in this embodiment unifies the interface generation elements, UI dimensions, and UI description files into JSON format, effectively solving problems such as difficulty in data parsing, poor compatibility, unstable component matching, failure of automatic resource matching, and low generation efficiency caused by inconsistent data formats. Specifically, when parsing instruction information and extracting interface generation elements, the JSON format ensures the structured and easily parsable results, reducing data ambiguity and the complexity of subsequent processing. When performing multi-dimensional similarity matching of UI components based on interface generation elements, the UI dimensions adopt the JSON format, making the descriptions of various dimensions such as function, structure, and visual uniform and standardized, thereby enabling high-precision and high-stability similarity calculations and component selection. When arranging UI components based on the UI layout template and generating description files, the JSON format description files facilitate automated arrangement and rendering, ensuring the consistency and scalability of UI generation. Overall, the lightweight and structured nature of the JSON format facilitates smooth data exchange, resource integration, and layout orchestration, significantly improving the standardization, compatibility, and automation of the UI generation process, thereby ensuring stable UI generation and efficient deployment.
[0124] In some optional embodiments, the initial UI component list is adjusted based on the vehicle operation scenario information to obtain a target UI component list for the UI interface, including: Step e1: Determine the vehicle's operating environment and the user's status. The operating environment includes at least one of the following: vehicle speed, location, weather, and road congestion information. The user's status includes at least one of the following: fatigue status, attention status, and emotional status.
[0125] Specifically, the system collects and determines the vehicle's current operating environment parameters and in-vehicle user status parameters, providing an objective basis for dynamic UI interface adaptation. The operating environment parameters include at least one or more of the following: real-time vehicle speed, high-precision positioning, external weather conditions, and road congestion level. These parameters are acquired in real-time through vehicle sensors, in-vehicle map modules, and vehicle-to-everything (V2X) services, comprehensively reflecting the vehicle's external road conditions and driving conditions. User status parameters include at least one or more of the following: driver fatigue level, attention level, and emotional state. These are collected and identified non-contactly through in-vehicle cameras, driver monitoring systems, and biometric sensing modules to accurately determine the driver's current physiological and psychological state. The system performs real-time fusion and standardization processing on these two types of information to form structured scene data that can be used for scene judgment. This provides accurate, reliable, and real-time input support for the subsequent dynamic adjustment of the UI component list, ensuring that interface adjustments remain highly consistent with vehicle operating conditions and user status.
[0126] Step e2: Adjust the initial UI component list to obtain a target UI component list that adapts to the vehicle's operating environment and the user's state.
[0127] Specifically, based on the established vehicle operating environment and user status, and according to preset scenario adaptation rules, driving safety interaction standards, and information priority strategies, the initial UI component list is dynamically adjusted to ultimately obtain a target UI component list highly adapted to the current scenario. The system first verifies the legality and compatibility of the initial UI component list. Based on conditions such as vehicle speed, congestion level, and fatigue level, it automatically removes unnecessary components with high interaction complexity, strong visual interference, high operational risk, and incompatibility with the current scenario, retaining and enhancing components highly relevant to driving safety, such as speed display, warning prompts, and core controls. Simultaneously, adaptive auxiliary components are added according to scenario requirements, and the retained components are reordered and weighted according to importance, optimizing component display hierarchy and operability. After screening, reduction, enhancement, and rearrangement, a stable, compliant, concise, and more usable target UI component list is formed, ensuring the safety, simplicity, and comfort of interface interaction under different driving conditions.
[0128] In some optional embodiments, the method further includes: monitoring the operating environment and user status of the vehicle; and when changes in the operating environment and / or user status meet preset conditions, adjusting the initial UI component list based on the scenario information of the vehicle operation to obtain the target UI component list of the UI interface.
[0129] Specifically, when a sudden change in operating environment parameters is detected, user status parameters exceed a preset safety threshold, or a combination of both changes reaches the interface update trigger condition, the system automatically starts the scenario adaptation process. It re-executes the steps of dynamically adjusting the initial UI component list based on vehicle operating scenario information, completes component selection, deletion, enhancement, and rearrangement according to driving safety rules and information priorities, and quickly generates a target UI component list adapted to the latest operating conditions. This ensures that the UI interface updates in real time with changes in the scenario, and always maintains the safety, simplicity, and usability of driving interaction.
[0130] In one example, a more specific case will be used to illustrate the above technical solution in greater detail: Suppose user A needs to generate a "mobile weather forecast interface".
[0131] First, the system receives instructions from user A to generate the UI interface. For example, user A inputs the instruction: generate a mobile weather forecast interface that displays the current city, temperature, weather condition icons, the weather forecast for the next three days, and includes a refresh button.
[0132] The system parses the command information input by user A and generates a structured semantic tree. Then, it extracts keywords related to the generation of the UI interface from the semantic tree, such as: "mobile", "weather forecast", "current city", "temperature", "weather status icon", "weather forecast for the next three days", and "refresh button".
[0133] The system then categorizes these keywords, obtaining interface generation elements corresponding to various descriptive dimensions of UI components. For example: Functional elements: "Weather display", "City location", "Data refresh", "Forecast query".
[0134] Structural elements: "List display", "Button interaction", "Icon display".
[0135] Visual elements: "simple style", "weather icons", "temperature numbers".
[0136] Behavioral dimension elements: "Click to refresh", "Swipe to view".
[0137] Contextual dimension elements: "Mobile app", "Weather app".
[0138] All interface generation elements are represented in JSON format, providing structured and standardized input for subsequent UI component matching. This step, through in-depth analysis of the instruction information, ensures an accurate understanding of the user's intent and avoids generation errors caused by insufficient semantic understanding.
[0139] Then, the system uses the extracted interface generation elements to perform multi-dimensional similarity matching on the UI components stored in the UI component library.
[0140] Dimensional matching: The system calculates the cosine similarity between the generated interface elements and the corresponding UI component descriptions in the UI component library from multiple dimensions, including functional, structural, visual, behavioral, and contextual dimensions. For example, for the element "weather condition icon", the system will match UI components in the UI component library that have visual descriptions such as "sunny icon", "cloudy icon", and "rain / snow icon"; for the element "three-day weather forecast", the system will match list components that have structural and functional descriptions such as "date", "weather type", and "highest / lowest temperature".
[0141] The system filters the UI component list by sorting the UI components in the library from highest to lowest similarity based on the calculated cosine similarity. Then, it selects a preset number of UI components (e.g., the first 15) from the sorted list to form a candidate set. Next, the system performs compatibility checks on the UI components in the candidate set, such as checking for API interface compatibility and style conflicts. Finally, it selects the target UI components that meet the compatibility criteria, resulting in an initial list of UI components for building the UI interface. This list may include: a city name text component, a temperature display component, a weather icon component, a three-day weather forecast component, and a refresh button component.
[0142] This step addresses the issues of lack of standardized multi-dimensional modeling systems, unstable component matching, and low reusability in existing technologies by employing multi-dimensional and refined similarity matching. Compared to matching methods that rely on only a single dimension or fixed combinations, this method can more accurately identify and filter UI components that meet user needs, effectively avoiding the generation of "illusion components."
[0143] Furthermore, to adapt to actual vehicle operating conditions, the system adjusts the initial UI component list based on vehicle operating scenario information. First, it determines the vehicle's operating environment and user status. The operating environment includes at least one or more of the following: vehicle speed, location, weather, and road congestion information. The user status includes at least one or more of the following: fatigue level, attention level, and emotional state. The system collects and determines scenario information in real time through onboard sensors, map services, and a driver monitoring module, including current vehicle speed, location, road congestion level, external weather conditions, and the driver's fatigue level, attention level, and emotional state.
[0144] Subsequently, the initial UI component list was adjusted to obtain a target UI component list adapted to the vehicle's operating environment and the user's state. When the vehicle is in motion, traveling at high speed, or the driver is fatigued or distracted, the system automatically removes components with high interaction complexity, long operation paths, and strong visual interference, such as the refresh button component and the weather list component for the next three days, while retaining core information display components such as city names, temperatures, and weather icons to reduce the risk of driver distraction and improve driving safety. When the vehicle is stationary, parked, or charging, and the driver is in a normal state, all components are restored to ensure information integrity. Through the above filtering, reduction, and enhancement processes, the final target UI component list adapted to the current driving scenario is obtained.
[0145] Based on the UI layout template, the UI components in the UI component list are arranged to generate a UI description file: Select a layout template: Based on the usage scenario of the UI interface, "Mobile Weather Forecast Interface", the system selects a suitable layout template from the resource library. This layout template predefines the basic structure and size attributes of the weather forecast interface, such as the top information area, the middle forecast area, and the bottom operation area.
[0146] Generate containers: Based on the selected layout template, the system generates a top-level container and several component containers.
[0147] Populating UI Components: The system prioritizes UI components according to their weight. For example, city names and temperatures have higher priority than the three-day forecast. Based on this priority, the system populates the corresponding component containers with the UI components from the list. For instance, the "City Name Text Component," "Temperature Display Component," and "Weather Status Icon Component" are populated into the "Top City Temperature Container," the "Three-Day Weather List Component" is populated into the "Middle Weather List Container," and the "Refresh Button Component" is populated into the "Bottom Refresh Button Container."
[0148] Injecting image information: After the population is complete, the system retrieves the image information corresponding to the UI component populated in the component container from the resource library, such as icons for different weather conditions, and injects this image information into the attribute fields of the corresponding UI component.
[0149] Layout redistribution: When there is a layout conflict between UI components, for example, when two components try to occupy the same area, the system redistributes the layout of the UI components according to their priority weights to ensure the rationality of the layout and visual consistency.
[0150] Generate a description file: This step involves generating a UI description file from the populated top-level container and its internal component structure, properties, styles, and other information. This description file is in JSON format and contains the complete structure and content information of the UI.
[0151] This step addresses the shortcomings of existing technologies, such as the lack of component-level layout orchestration capabilities and the need for manual integration of retrieved discrete components, by introducing layout templates, priority sorting, automated filling, and conflict resolution mechanisms. This automates the UI generation process and creates an engineering loop, significantly improving efficiency and stability, and resolving the issue of visual assets not being automatically matched semantically.
[0152] The system receives the generated JSON-formatted description file. Based on this description file, it renders and generates the final UI interface, which is the mobile weather forecast interface expected by user A. The generated UI interface has the correct component layout, style, and functionality, and can adapt to the display requirements of mobile devices.
[0153] Meanwhile, the system continuously monitors the vehicle's operating environment and user status. When changes in the operating environment and / or user status meet preset conditions, such as a sudden change in vehicle speed from low to high, driver from alert to fatigued, or road from clear to congested, the system immediately re-executes the step of adjusting the initial UI component list based on the vehicle's operating scenario information. This updates the target UI component list in real time to adapt to the latest scenario, ensuring that the UI interface always remains consistent with the vehicle's operating conditions and the user's status.
[0154] Through the complete process described above, this method can automatically and intelligently generate a UI interface that meets the requirements, starting from user instructions. It effectively solves the problems of weak template generalization ability, unstable component matching, lack of resource management, and difficulty in layout arrangement in the existing technology, and improves the efficiency, stability and controllability of UI interface generation.
[0155] This embodiment also provides a UI interface generation apparatus, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.
[0156] This embodiment provides a UI interface generation device, such as... Figure 5 The following are examples: The parsing module 501 is used to parse the instruction information used to generate the UI interface and extract the interface generation elements associated with the generation of the UI interface from the instruction information.
[0157] The matching module 502 is used to perform multi-dimensional similarity matching on UI components in the UI component library based on interface generation elements, so as to obtain an initial list of UI components for building the UI interface.
[0158] The adjustment module 503 is used to adjust the initial UI component list based on the scenario information of vehicle operation to obtain the target UI component list of the UI interface. The scenario information includes the operating environment and user status. The orchestration module 504 is used for layout templates based on the UI interface. It orchestrates the UI components in the UI component list and generates a description file for the UI interface.
[0159] Module 505 is used to generate a UI interface based on a description file.
[0160] In some alternative implementations, the matching module 502 includes: The first unit is used to calculate the cosine similarity between the interface generation elements and the corresponding UI component description information in the UI component library from various dimensions. The UI component description information is used to represent the language description information of the UI component.
[0161] The second unit is used to select an initial list of UI components from the UI component library to build the UI interface based on the magnitude of cosine similarity.
[0162] In some alternative implementations, the orchestration module 504 includes: The third unit is used to select a layout template for the UI interface from the resource library based on the usage scenario of the UI interface. The layout template includes the size attributes of the UI interface.
[0163] The fourth unit is used to generate the top-level container and several component containers based on the selected layout template.
[0164] The fifth unit is used to populate the UI components in the UI component list into the corresponding component containers, populate the component containers into the top-level container, and then generate the UI interface description file based on the populated top-level container.
[0165] In some alternative implementations, the parsing module 501 includes: Unit 6 is used to parse instruction information and generate a structured semantic tree.
[0166] Unit 7 is used to extract keywords related to the UI interface from the structured semantic tree.
[0167] The eighth unit is used to classify keywords and obtain interface generation elements corresponding to each descriptive dimension of the UI components.
[0168] The UI interface generation apparatus provided in this application embodiment can execute the UI interface generation method provided in any embodiment of this application, and has the corresponding functional modules and beneficial effects of the method execution. Further functional descriptions of the above modules and units are the same as those in the corresponding embodiments described above, and will not be repeated here.
[0169] Figure 6 This is a schematic diagram of the structure of a UI interface generation system provided in an embodiment of this application.
[0170] The system is divided into three layers: the core service layer, the execution module layer, and the data layer. Modules at each layer collaborate to complete the entire process from user commands to final UI rendering. The specific functions of each layer are as follows: Core service layer: The system receives user natural language input and breaks it down into three core services: multimodal retrieval service and AGL orchestration service. The multimodal retrieval service receives user commands, generates scheduling instructions, and drives the multimodal retrieval module to perform component matching and retrieval. The natural language parsing service parses the semantics of user commands, generates scheduling instructions, and drives the natural language parsing module to process business logic. The AGL orchestration service generates scheduling instructions based on user needs, and drives the AGL orchestration module to integrate interface resources and layout.
[0171] Execution module layer: It is used to receive scheduling instructions from the core service layer and execute specific business logic. It is the core execution unit of the system and includes: multimodal retrieval module, natural language parsing module, AGL orchestration module and UI rendering module. The AGL orchestration module includes resource library module and interface layout AGL orchestration module.
[0172] Specifically, the multimodal retrieval module is used to initiate component matching requests to the component five-dimensional modeling library, and at the same time, receive the component list returned by the component five-dimensional modeling library to complete the retrieval and matching of UI components.
[0173] The natural language parsing module is used to parse the business intent of user commands, providing a semantic foundation for subsequent AGL orchestration.
[0174] The resource library module in the AGL orchestration module is used to initiate resource matching requests to the static resource library, obtain the returned resource paths, and complete the matching of interface resources (such as images, icons, and text styles). The interface layout AGL orchestration module is used to read layout rules from the layout rule library, obtain layout templates, and combine them with resource paths to complete the generation of a complete AGL (Interface Description Language).
[0175] The UI rendering module receives the complete AGL and ultimately renders it to generate a visual user interface.
[0176] Data layer: It is used to provide underlying data support for the execution module layer, and includes two types of core libraries and indexes: component-related data and resource and layout-related data.
[0177] The component-related data includes a five-dimensional component modeling library and a component retrieval index. The resource and layout-related data includes a static resource library, a resource retrieval index, and a layout rule library.
[0178] The component 5D modeling library stores the five-dimensional features of UI components (such as functionality, style, and interaction) and responds to matching requests from the multimodal retrieval module. The component retrieval index is used to associate with the component 5D modeling library through related indexes for efficient retrieval of target components. The static resource library stores the static resources required for the interface (such as images, icons, and fonts) and responds to matching requests from the resource library module. The resource retrieval index is used to associate with the static resource library through related indexes for efficient retrieval of target resources. The layout rule library stores interface layout templates and rules (such as grid layout and flow layout), providing layout templates and rules for the interface layout AGL orchestration module.
[0179] In a specific example, the system's workflow includes: user input of natural language commands, which are broken down into three types of scheduling commands by the core service layer. The execution module layer, based on the scheduling commands, calls the component library, resource library, and layout rule library of the data layer to complete component matching, resource matching, and layout orchestration. The AGL orchestration module integrates resources and layouts to generate a complete AGL, which is finally rendered into a visual interface by the UI rendering module. This system achieves automated generation from natural language commands to an interactive UI, and improves the system's scalability and maintainability through layered decoupling.
[0180] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.
[0181] The following is a detailed reference. Figure 7 The diagram illustrates a structural schematic suitable for implementing the electronic device described in the embodiments of this application. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 701, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 702 or a program loaded from memory 708 into random access memory (RAM) 703. The RAM 703 also stores various programs and data required for the operation of the electronic device. The processor 701, ROM 702, and RAM 703 are interconnected via a bus 704. An input / output (I / O) interface 705 is also connected to the bus 704.
[0182] Typically, the following devices can be connected to I / O interface 705: input devices 706 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 707 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 708 including, for example, magnetic tapes, hard disks, etc.; and communication devices 709. Communication device 709 allows electronic devices to exchange data via wireless or wired communication with other devices. Although Figure 7Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.
[0183] Specifically, according to embodiments of this application, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of this application include a computer program product comprising a computer program carried on a non-transitory computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via a communication device 709, or installed from a memory 708, or installed from a ROM 702. When the computer program is executed by the processor 701, it performs the functions defined in the UI interface generation method of embodiments of this application.
[0184] Figure 7 The electronic device shown is merely an example and should not impose any limitation on the functionality and scope of use of the embodiments of this application.
[0185] This application also provides a computer-readable storage medium. The methods described in this application can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code downloaded over a network and originally stored on a remote storage medium or a non-transitory machine-readable storage medium and then stored on a local storage medium. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the method for generating the UI interface shown in the above embodiments is implemented.
[0186] A portion of this application can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to this application through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.
[0187] Although embodiments of this application have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of this application, and all such modifications and variations fall within the scope defined by the appended claims.
Claims
1. A method for generating a UI interface, characterized in that, The method includes: Parse the instruction information used to generate the UI interface, and extract the interface generation elements associated with generating the UI interface from the instruction information; Based on the interface generation elements, the UI components in the UI component library are matched for similarity in multiple dimensions to obtain an initial list of UI components for building the UI interface. The initial UI component list is adjusted based on the vehicle operation scenario information to obtain the target UI component list of the UI interface, wherein the scenario information includes the operating environment and user status. Based on the layout template of the UI interface, the UI components in the UI component list are arranged to generate the description file of the UI interface; The UI interface is generated based on the description file.
2. The method according to claim 1, characterized in that, Based on the interface generation elements, the UI components in the UI component library are matched for similarity across multiple dimensions to obtain an initial list of UI components for constructing the UI interface, including: Cosine similarity is calculated between the interface generation elements and the corresponding UI component description information in the UI component library from various dimensions. The UI component description information is used to characterize the language description information of the UI component. Based on the magnitude of the cosine similarity, the initial list of UI components for constructing the UI interface is selected from the UI component library.
3. The method according to claim 2, characterized in that, The dimensions include at least one of the following: functional dimension, structural dimension, visual dimension, behavioral dimension, and contextual dimension. The functional dimension is used to characterize the functional description of UI components; The structural dimension includes the DOM structure, nesting relationships, and / or API structure definition of UI components; The behavioral dimension includes the interaction logic between UI components and users, and / or the state machine definition of UI components; The visual dimensions include the style of the UI component, the theme of the UI component, and / or the type of the UI component icon; The context dimension includes the use case of the UI component, the layout position of the UI component, and / or the compatibility of the UI component.
4. The method according to claim 3, characterized in that, The step of selecting the initial list of UI components to assemble the UI interface from the UI component library based on the magnitude of the cosine similarity includes: Based on at least one of the cosine similarity of the functional dimension, the visual dimension, the context dimension, the structural dimension, and the behavioral dimension, the UI components in the UI component library are sorted in descending order of similarity, and the first preset number of UI components are selected from the sequence to form a component candidate set. Compatibility checks are performed on the UI components in the component candidate set, and target UI components that meet the compatibility conditions are selected to obtain the initial UI component list.
5. The method according to claim 1, characterized in that, The UI-based layout template arranges the UI components in the UI component list to generate a description file for the UI interface, including: Based on the usage scenario of the UI interface, a layout template for the UI interface is selected from the resource library, wherein the layout template includes the size attribute of the UI interface; Based on the selected layout template, a top-level container and several component containers are generated; The UI components in the UI component list are populated into the corresponding component containers, and the component containers are populated into the top-level container. Then, the description file of the UI interface is generated based on the populated top-level container.
6. The method according to claim 5, characterized in that, The step of populating the UI components from the UI component list into the corresponding component containers includes: The UI components in the UI component list are sorted by priority according to their priority weights. According to the priority order, the UI components are populated into the corresponding component containers.
7. The method according to claim 6, characterized in that, After populating the UI components into the corresponding component containers according to the priority order, the method further includes: Retrieve image information corresponding to the UI component populated in the component container from the resource library, and inject the image information into the attribute field of the corresponding UI component.
8. The method according to claim 5, characterized in that, Before generating the description file of the UI interface based on the populated top-level container, the method further includes: When a layout conflict occurs between the UI components, the layout of the UI components is redistributed according to their priority weights.
9. The method according to claim 1, characterized in that, The process of parsing instruction information used to generate the UI interface and extracting interface generation elements associated with generating the UI interface from the instruction information includes: Parse the instruction information to generate a structured semantic tree; Extract keywords from the structured semantic tree that are associated with the UI interface; The keywords are categorized to obtain interface generation elements corresponding to each descriptive dimension of the UI components.
10. The method according to claim 1, characterized in that, The initial UI component list is adjusted based on the vehicle operation scenario information to obtain the target UI component list for the UI interface, including: Determine the vehicle's operating environment and the user's status, wherein the operating environment includes at least one of vehicle speed, location, weather, and road congestion information, and the user's status includes at least one of fatigue status, attention status, and emotional status; The initial UI component list is adjusted to obtain a target UI component list that adapts to the vehicle's operating environment and the user's state.
11. The method according to claim 1, characterized in that, The method further includes: Monitor the operating environment of the vehicle and the user status; When the changes in the operating environment and / or the user state meet preset conditions, the step of adjusting the initial UI component list based on the vehicle operation scenario information is executed to obtain the target UI component list of the UI interface.
12. A UI interface generation device, characterized in that, The device includes: The parsing module is used to parse the instruction information used to generate the UI interface and extract the interface generation elements associated with generating the UI interface from the instruction information. The matching module is used to perform multi-dimensional similarity matching on UI components in the UI component library based on the interface generation elements to obtain an initial list of UI components for building the UI interface. An adjustment module is used to adjust the initial UI component list based on the scenario information of vehicle operation to obtain the target UI component list of the UI interface, wherein the scenario information includes the operating environment and user status; The orchestration module is used to orchestrate the UI components in the UI component list based on the layout template of the UI interface, and generate the description file of the UI interface. The generation module is used to generate the UI interface based on the description file.
13. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory stores computer instructions, and the processor executes the computer instructions to perform the method for generating a UI interface according to any one of claims 1 to 11.
14. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to perform the method for generating a UI interface according to any one of claims 1 to 11.
15. A computer program product, characterized in that, It includes computer instructions for causing a computer to perform the method for generating a UI interface according to any one of claims 1 to 11.