Method and apparatus for generating interaction component of client UI, terminal, and medium

Abstract

A method and an apparatus for generating an interaction component of a client UI, a terminal, and a medium, relating to the technical field of IT and software. A UI effect picture and requirement description information are acquired, feature extraction and feature linguistic conversion are performed on the UI effect picture by means of a preset multi-modal model, attribute text information of the UI effect picture is obtained and same is converted into an attribute vectorized feature, and then, by using a pre-constructed UI component knowledge base, attribute vectorized data obtained from the UI effect picture is used as retrieved keyword information for performing similarity matching with UI component objects in the UI component knowledge base, thereby finding a similar target UI component object. The attribute information automatically extracted on the basis of the inputted UI effect picture is used as a keyword, solving the problem of inaccurate searching due to existing reuse code keyword summaries being ununified, and the accuracy of reuse code querying and the stability of a querying effect are improved.

Description

A method, device, terminal and medium for generating client UI interactive components Technical Field

[0001] The present application relates to the field of IT and software technology, and in particular to a method, device, terminal, and medium for generating a client UI interaction component. Background Art

[0002] With the continuous iteration and update of super clients, the functions of client application development are becoming more and more abundant, and the business functions they carry are increasing. At the same time, the accumulated UI interaction components are becoming more specialized and diversified, which provides great convenience for code reuse development in the client development process.

[0003] Code reuse development is a software development method that selects standardized code templates with similar functions and makes adjustments based on the templates. The traditional approach is to classify and integrate existing UI code templates by theme, establish a component warehouse, and use keyword searches to find similar UI code templates for developers to use as programming references or modify for use. However, in actual application, this method only uses a small number of input keywords as matching criteria, making it difficult to accurately find component codes that meet the design, seriously affecting the efficiency of component reuse and failing to maximize the practical value of component standardization.

[0004] Summary of the Invention

[0005] The present application provides a method, device, terminal and medium for generating a client UI interactive component, which are used to solve the technical problem of low component code search accuracy in existing code reuse development.

[0006] To solve the above technical problems, the first aspect of the present application provides a method for generating a client UI interaction component, comprising:

[0007] Obtain the UI effect diagram and requirement description text of the client UI interaction component to be generated;

[0008] According to the preset multimodal model, in combination with the demand description text, feature extraction is performed on the UI effect diagram, and the extracted attribute features are converted into natural language text through feature language conversion to obtain attribute information of the UI effect diagram;

[0009] Using the attribute information, perform attribute similarity matching with UI component objects in a preset UI component knowledge base to obtain a target UI component object based on the matching result;

[0010] Obtain the target component code corresponding to the target UI component object to generate the client UI interaction component based on the target component code.

[0011] Preferably, the process of constructing the UI component knowledge base specifically includes:

[0012] Get component renderings, component description text, and component codes of multiple UI component objects;

[0013] According to the component rendering, the component description text, and the component code, the component attribute features corresponding to the UI component object are obtained through the multimodal model, and the component attribute features are converted into a component attribute feature vector, where the component attribute feature vector includes: an image vector and a text vector;

[0014] The identification mark of each UI component object is associated with the component attribute feature vector, and the associated identification mark and the component attribute feature vector are stored in a large model database constructed based on atomic design theory to obtain the UI component knowledge base.

[0015] Preferably, performing attribute similarity matching with UI component objects in a preset UI component knowledge base using the attribute information to obtain a target UI component object according to the matching result specifically includes:

[0016] Converting the attribute information into attribute vectorized data;

[0017] Vector distance matching is performed on the attribute vectorized data and the component attribute feature vectors of the UI component objects in the UI component knowledge base to determine one or more target UI component objects according to the matching results.

[0018] Preferably, generating the client UI interaction component based on the target component code specifically includes:

[0019] Determine, based on a matching result between the component attribute feature vector and the attribute vectorized data, and a matching result between the requirement description text and the component description text, the same attributes between the target UI component object and the client UI interaction component, and then extract a first code snippet corresponding to the same attributes from the target component code;

[0020] The first code snippets are combined according to the UI effect diagram and the requirement description text to obtain the client UI interaction component.

[0021] Preferably, it also includes:

[0022] Verifying the first code snippet according to the UI rendering and the requirement description text to determine abnormal attributes in the first code snippet that do not conform to the UI rendering and the requirement description text;

[0023] According to the abnormal attribute, a secondary match is performed from the UI component knowledge base according to the UI effect diagram and the requirement description text to obtain a second code snippet, so as to update the first code snippet through the second code snippet.

[0024] Preferably, it also includes:

[0025] According to the requirement description text, the component type information of the client UI interaction component is determined through an open set target detection method and a fuzzy matching method, so as to adjust the matching range of the UI component object according to the component type information.

[0026] Preferably, the attribute information includes: color configuration, control type, control size, control image, layout structure and control character content.

[0027] At the same time, the second aspect of the present application provides a client UI interaction component generation device, including:

[0028] A demand data acquisition unit is used to obtain the UI effect diagram and demand description text of the client UI interaction component to be generated;

[0029] An attribute information extraction unit is configured to extract features of the UI effect diagram based on a preset multimodal model and in combination with the demand description text, and convert the extracted attribute features into natural language text through a feature language conversion method to obtain attribute information of the UI effect diagram;

[0030] An attribute matching unit, configured to perform attribute similarity matching with UI component objects in a preset UI component knowledge base using the attribute information, so as to obtain a target UI component object according to the matching result;

[0031] The UI component generating unit is configured to obtain a target component code corresponding to the target UI component object, so as to generate the client UI interaction component based on the target component code.

[0032] A third aspect of the present application provides a client UI interaction component generation terminal, comprising: a memory and a processor;

[0033] The memory is used to store the program code corresponding to the client UI interaction component generation method provided in the first aspect of the present application;

[0034] The processor is configured to execute the program code.

[0035] The fourth aspect of the present application provides a computer-readable storage medium, characterized in that the computer-readable storage medium stores program code corresponding to the client UI interaction component generation method provided in the first aspect of the present application.

[0036] It can be seen from the above technical solutions that this application has the following advantages:

[0037] The technical solution provided by the present application obtains UI renderings and demand description information, and performs feature extraction and feature language conversion on the UI renderings through a preset multimodal model to obtain the attribute text information of the UI renderings and convert it into attribute vectorized features. Then, based on the constructed UI component knowledge base, the attribute vectorized data obtained from the UI renderings is used as retrieval keyword information for similarity matching with UI component objects in the UI component knowledge base, so as to find target UI component objects similar to the UI renderings. This realizes automatic extraction of attribute information that can be used as keywords based on the input UI renderings, and queries similar target UI component objects through the automatically extracted keywords, so as to obtain the required client UI interaction components through integration through the target component code corresponding to the target UI component object. This solves the problem of inaccurate queries caused by the keyword summary of reused code queries being easily affected by subjective factors such as personal language habits and language and cultural levels, thereby improving the accuracy of reused code queries and the stability of query effects. BRIEF DESCRIPTION OF THE DRAWINGS

[0038] In order to more clearly illustrate the embodiments of the present application or the technical solutions in the prior art, the following briefly introduces the drawings required for use in the embodiments or the description of the prior art. Obviously, the drawings described below are only some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative labor.

[0039] FIG1 is a flow chart of an embodiment of a method for generating a client UI interaction component provided by the present application.

[0040] FIG2 is a flow chart of constructing a UI component knowledge base in an embodiment of a method for generating a client UI interaction component provided by the present application.

[0041] FIG3 is a schematic diagram of the overall logical framework of an embodiment of a method for generating a client UI interaction component provided in this application.

[0042] FIG4 is a flow chart of another embodiment of a method for generating a client UI interaction component provided by the present application.

[0043] FIG5 is a schematic structural diagram of an embodiment of a client UI interaction component generating device provided in the present application.

[0044] FIG6 is a schematic structural diagram of an embodiment of a client UI interaction component generating terminal provided by the present application. DETAILED DESCRIPTION

[0045] In response to the problems existing in the actual application of current code reuse development, research has found that the existing practice is to find similar UI code templates by entering keywords. However, the input keywords need to be summarized by developers in the form of language and text based on the characteristics of the UI effects to be achieved. Since the summary of keywords is easily affected by subjective factors such as the developer's personal language habits and language and cultural level, even for the same UI effect, the keywords extracted by different people may be different, which leads to deviations in the search direction and makes it difficult to accurately find component code that meets the design.

[0046] The embodiments of the present application provide a method, device, terminal and medium for generating a client UI interactive component, which are used to solve the technical problem of low component code search accuracy in existing code reuse development.

[0047] In order to make the purpose, features, and advantages of the invention of this application more obvious and easy to understand, the technical solutions in the embodiments of this application will be clearly and completely described below in conjunction with the drawings in the embodiments of this application. Obviously, the embodiments described below are only part of the embodiments of this application, not all of the embodiments. Based on the embodiments in this application, all other embodiments obtained by ordinary technicians in this field without making creative work are within the scope of protection of this application.

[0048] Explanation of terms:

[0049] Large models: refers to deep neural network models with millions or billions of parameters. This model has undergone a specialized training process and is capable of performing complex processing and task handling on large-scale data.

[0050] A multimodal model is a machine learning model capable of processing a variety of media (such as text, images, audio, and video). It can simultaneously analyze and understand information from multiple media formats and perform cross-modal joint modeling. This model uses different techniques and algorithms to integrate data from multiple media to extract and represent rich semantic and contextual information. Multimodal models are widely used in many fields, such as natural language processing, computer vision, audio processing, and multimedia retrieval. By integrating information from different media, multimodal models can provide more comprehensive and accurate analysis, understanding, and generation capabilities.

[0051] A vector database is a specialized database management system used to store and process vector data. Vector data is a set of numerical values ​​used to represent and describe the characteristics of objects. Vector databases can efficiently store and retrieve large vector datasets, supporting high-speed similarity searches and data analysis.

[0052] First, a detailed description of an embodiment of a method for generating a client UI interaction component provided by this application is as follows:

[0053] Referring to FIG1 , an embodiment of the present application provides a method for generating a client UI interaction component, including:

[0054] Step 101: Obtain a UI effect diagram and requirement description text of a client UI interaction component to be generated.

[0055] It should be noted that according to the development requirements of the client UI interaction component, the corresponding UI renderings and requirement description texts are obtained, where the UI renderings reflect the basic design framework of the client UI interaction component, including but not limited to: color configuration, control type, control size, control image, layout structure and control character content and other information, while the requirement description text generally contains detailed auxiliary information in the UI renderings that is not easy to display through the design drawings, such as theme description, responsive design, user interaction process and special effects.

[0056] More specifically, topic description: the title of the UI rendering, which is used to briefly describe the content displayed in the rendering.

[0057] Functional modules: Describe the various functional modules in the UI rendering and explain their roles and functions.

[0058] Color scheme: Describe the color scheme used in the UI rendering, including primary color, secondary color, background color, etc., and explain their purpose and significance.

[0059] Layout structure: describes the layout structure in the UI rendering, including the arrangement of modules, the relative positions of components, etc.

[0060] Interface elements: Describe the various interface elements in the UI rendering, such as buttons, text boxes, drop-down menus, etc., and briefly explain their functions and interaction methods.

[0061] Images and icons: If the UI rendering contains images and icons, you need to describe their content, style, and purpose.

[0062] Responsive design: If the UI rendering is responsive, it is necessary to describe how the layout and components are adjusted under different screen sizes.

[0063] User interaction process: describes the user interaction process in the UI rendering, including the user's operation steps and the system's response method.

[0064] Special effects: If the UI rendering contains some special effects, such as animation, transition effects, etc., it is necessary to describe their implementation methods and effect display.

[0065] Step 102: Based on the preset multimodal model and in combination with the demand description text, feature extraction is performed on the UI rendering, and the extracted attribute features are converted into natural language text through feature language conversion to obtain attribute information of the UI rendering.

[0066] Next, this embodiment, based on the characteristics of the multimodal model that can simultaneously analyze and understand information in multiple media forms and perform cross-modal joint modeling, enables this model to use different technologies and algorithms to integrate data from multiple media to extract and represent rich semantic and contextual information. Through the pre-built multimodal model, this multimodal model integrates at least text data processing algorithms, such as NLP algorithms and image data processing algorithms, such as Segment segmentation algorithms, and uses the information contained in the demand description text as auxiliary reference knowledge for model algorithm recognition. It extracts features from the UI effect diagram and converts the extracted attribute features into natural language text through feature language conversion, including but not limited to attribute information such as color, font, and layout.

[0067] Step 103: perform attribute similarity matching with UI component objects in a preset UI component knowledge base using the attribute information to obtain a target UI component object based on the matching result.

[0068] Next, based on the attribute information obtained in step 102, it serves as a keyword for initiating a query to the UI component knowledge base, and through attribute similarity matching with the UI component objects in the UI component knowledge base, a target UI component object similar to the input UI rendering is obtained according to the matching result.

[0069] Among them, the UI component knowledge base mentioned in this embodiment is preferably: building a component code snippet warehouse (basic style-control combination-component construction) by referring to the atomic design theory, and forming a knowledge base after text data vectorization processing.

[0070] Step 104: Obtain the target component code corresponding to the target UI component object to generate a client UI interaction component based on the target component code.

[0071] Finally, according to the target UI component objects, the target component codes corresponding to these target UI component objects are obtained, and a complete client UI interaction component is generated by combining the target component codes.

[0072] The above is a detailed description of an embodiment of a method for generating a client UI interaction component provided by the present application. The following is a detailed description of a further embodiment of a method for generating a client UI interaction component provided by the present application.

[0073] Referring to FIG. 2 and FIG. 3 , based on the content of the previous embodiment, this embodiment provides a method for generating a client UI interaction component, which specifically further includes the following contents:

[0074] Furthermore, as shown in FIG2 , the construction process of the UI component knowledge base specifically includes:

[0075] Step 1001: Obtain component renderings, component description texts, and component codes of multiple UI component objects;

[0076] Step 1002: According to the component rendering, component description text, and component code, the component attribute features corresponding to the UI component object are obtained through the multimodal model, and the component attribute features are converted into a component attribute feature vector.

[0077] The component attribute feature vector includes: image vector and text vector.

[0078] Step 1003: associate the identification mark of each UI component object with the component attribute feature vector, and store the associated identification mark and component attribute feature vector in a large model database constructed based on atomic design theory to obtain a UI component knowledge base.

[0079] It should be noted that the construction example of the UI component knowledge base provided in this embodiment is to first obtain enough UI component object samples, including component renderings, component description texts and component codes of UI component objects. Sort out the associated features of the renderings, component description texts and code snippets of UI components to produce knowledge base corpus. Among them, the production principles of the knowledge base corpus include: referring to the atomic design theory, that is, sorting out in the organizational mode of "atom-molecule-organization-template-page", and splitting the construction of general business scenarios into the granularity of "foundation-control-component-scenario", where the corpus elements include standard specifications, functional descriptions, source code library integration instructions, API usage example annotations, demonstration renderings, function methods, file classes, and combined code packages. The preferred sorting methods are: selecting a code warehouse hosting tool, which is mainly used to record corpus elements, and enter, manage and store them according to different types of text and images; connecting the component development engineering environment, and storing the component codes specially sorted out in regular project iterations in the form of fragments or mixed classes, and submitting the tool data db.json to the gitlab warehouse for management, relying on IDE plug-in tools or massCdoe.

[0080] The identification identifier of each UI component object is associated with the component attribute feature vector. These associated identifiers and component attribute feature vectors are then stored in a large model database built based on atomic design theory to create a UI component knowledge base. This large model knowledge base is then imported into a code corpus for vectorized storage for similar data retrieval. This knowledge base processes the code corpus using a natural language processing library (such as NLTK or spaCy) and then vectorizes the code corpus using techniques such as the bag-of-words model or Word2Vec. Using a windowed text segmentation model, for example, with a segmented text size of 1000 characters and a contextual connection size of 20 characters, vectorization is performed to produce a matrix in which each row represents a code sample and each column represents a feature in the code (e.g., function name, class name, variable name, etc.). For each sample, the value of each feature represents the number of times that feature appears in that sample. Based on the UI component knowledge base constructed in the previous example, the vectorized code can then be used for similar data retrieval, such as calculating the similarity between code samples or finding the code most similar to a given code.

[0081] Similarly, the vectorized component effect image can also be uploaded to the knowledge base service through the plug-in, so as to be matched with the attribute features of the UI effect image input by the user.

[0082] Please refer to FIG4 . Further, step 103 of the present application may include:

[0083] Step 1031: Convert attribute information into attribute vectorized data;

[0084] Step 1032: Perform vector distance matching on the attribute vectorized data and the component attribute feature vectors of the UI component objects in the UI component knowledge base to determine one or more target UI component objects based on the matching results.

[0085] It should be noted that the vector distance matching mentioned in this step can also use various similarity matching measurement methods, such as cosine similarity or Euclidean distance. According to the matching results, one or more UI component objects with the highest similarity can be selected as the target UI component objects.

[0086] Furthermore, based on step 1032, the process of step 104 of this embodiment may specifically include:

[0087] Step 1041: Based on the matching results of the component attribute feature vector and the attribute vectorized data, and the matching results of the requirement description text and the component description text, determine the common attributes between the target UI component object and the client UI interactive component, and then extract the first code snippet corresponding to the common attributes from the target component code;

[0088] Step 1042: Combine the first code snippet according to the UI effect diagram and the requirement description text to obtain a client UI interaction component.

[0089] It should be noted that this embodiment uses the matching results of the UI rendering, the requirement description text, and the UI component object—specifically, the matching results of the component attribute feature vector and the attribute vectorized data, as well as the matching results of the requirement description text and the component description text—to identify the identical attributes in the target UI component object that meet the requirements of the client UI interaction component. The code snippets corresponding to these identical attributes are then extracted to obtain a first code snippet. The extracted first code snippets are then combined based on the UI rendering and the requirement description text to obtain a complete client UI interaction component. More specifically, because matching completely identical target UI component objects is generally difficult in actual application scenarios, this embodiment preferably selects multiple target UI component objects to facilitate matching and obtaining the required first code snippet.

[0090] Furthermore, after step 1041, the following steps are further included:

[0091] Step 10411: Verify the first code snippet based on the UI rendering and the requirement description text to determine abnormal attributes in the first code snippet that do not conform to the UI rendering and the requirement description text.

[0092] Step 10412: According to the abnormal attributes, a secondary match is performed from the UI component knowledge base according to the UI effect diagram and the requirement description text to obtain a second code snippet, so as to update the first code snippet through the second code snippet.

[0093] In some embodiments, since in actual application scenarios, some attributes may still not be successfully matched even when matching through multiple target UI component objects, such as color, font, and animation, this embodiment regards such attributes as abnormal attributes, and then this embodiment performs a secondary match from the UI component knowledge base for these abnormal attributes, UI renderings, and requirement description texts to obtain second code snippets. These second code snippets are all related to the abnormal attributes and conform to the UI renderings and requirement description texts. The first code snippet is updated through the second code snippet. The update method can be code segment replacement and / or code parameter replacement to achieve automatic fine-tuning of the code snippet, thereby better conforming to the client UI interaction component of the input requirements such as UI renderings and requirement description texts.

[0094] Furthermore, before step 103 of this embodiment, the following steps may be included:

[0095] Step 1030: According to the requirement description text, the component type information of the client UI interaction component is determined through an open set target detection method and a fuzzy matching method, so as to adjust the matching range of the UI component object according to the component type information.

[0096] It should be noted that this embodiment can also perform fuzzy matching on the requirement description text through open set target detection and fuzzy matching to determine the component type information of the client UI interaction component, so as to narrow the query scope of the UI component object and improve the code retrieval efficiency.

[0097] The above is a detailed description of a further embodiment of a method for generating a client UI interaction component provided by the present application. The following is a detailed description of an embodiment of an apparatus for generating a client UI interaction component provided by the present application.

[0098] Referring to FIG5 , this embodiment provides a client UI interaction component generation device, including:

[0099] The demand data acquisition unit 201 is used to acquire the UI effect diagram and demand description text of the client UI interaction component to be generated;

[0100] The attribute information extraction unit 202 is used to extract features of the UI effect diagram based on the preset multimodal model and the demand description text, and convert the extracted attribute features into natural language text through feature language conversion to obtain attribute information of the UI effect diagram;

[0101] The attribute matching unit 203 is used to perform attribute similarity matching with UI component objects in a preset UI component knowledge base using attribute information, so as to obtain a target UI component object according to the matching result;

[0102] The UI component generating unit 204 is configured to obtain a target component code corresponding to a target UI component object, so as to generate a client UI interaction component based on the target component code.

[0103] In addition to the above-mentioned embodiment of a client UI interaction component generating device, the present application also provides a detailed description of embodiments such as a client UI interaction component generating terminal and a computer-readable storage medium, as follows:

[0104] Referring to FIG6 , this embodiment provides a terminal for generating a client UI interaction component. The types of terminals include, but are not limited to, personal computers, industrial computers, server hosts, and embedded intelligent terminals. The terminal mainly comprises: a memory 33 and a processor 31 , wherein the memory 33 and the processor 31 can be connected via a bus 34 ;

[0105] The memory 33 is used to store the program code corresponding to the client UI interaction component generation method provided in the above embodiment;

[0106] The processor 31 is configured to execute program codes.

[0107] This embodiment provides a computer-readable storage medium, in which program codes corresponding to the client UI interaction component generation method provided in the above embodiment are stored.

[0108] Those skilled in the art will clearly understand that, for the convenience and brevity of description, the specific working processes of the terminals, devices and units described above can refer to the corresponding processes in the aforementioned method embodiments and will not be repeated here.

[0109] In the several embodiments provided in this application, it should be understood that the disclosed terminals, devices, and methods can be implemented in other ways. For example, the device embodiments described above are merely illustrative. For example, the division of units is merely a logical function division. In actual implementation, there may be other division methods, such as multiple units or components can be combined or integrated into another system, or some features can be ignored or not executed. Another point is that the mutual coupling or direct coupling or communication connection shown or discussed can be through some interface, indirect coupling or communication connection of devices or units, which can be electrical, mechanical or other forms.

[0110] The terms "first", "second", "third", "fourth", etc. (if any) in the specification of the present application and the above-mentioned drawings are used to distinguish similar objects and are not necessarily used to describe a specific order or sequential order. It should be understood that the numbers used in this way can be interchanged where appropriate, so that the embodiments of the present application described herein can, for example, be implemented in an order other than those illustrated or described herein. In addition, the terms "including" and "having" and any variations thereof are intended to cover non-exclusive inclusions, for example, a process, method, system, product or device that includes a series of steps or units is not necessarily limited to those steps or units clearly listed, but may include other steps or units that are not clearly listed or inherent to these processes, methods, products or devices.

[0111] It should be understood that in this application, "at least one (item)" means one or more, and "plurality" means two or more. "And / or" is used to describe the association relationship of associated objects, indicating that three relationships may exist. For example, "A and / or B" can mean: only A exists, only B exists, and A and B exist at the same time, where A and B can be singular or plural. The character " / " generally indicates that the previous and next associated objects are in an "or" relationship. "At least one of the following items" or similar expressions refers to any combination of these items, including any combination of single items or plural items. For example, at least one of a, b or c can mean: a, b, c, "a and b", "a and c", "b and c", or "a and b and c", where a, b, c can be single or multiple.

[0112] The units described as separate components may or may not be physically separate, and the components shown as units may or may not be physical units, that is, they may be located in one place or distributed across multiple network units. Some or all of these units may be selected to achieve the purpose of this embodiment according to actual needs.

[0113] In addition, the functional units in the various embodiments of the present invention may be integrated into a single processing unit, each unit may exist physically separately, or two or more units may be integrated into a single unit. The aforementioned integrated units may be implemented in the form of hardware or software functional units.

[0114] If the integrated unit is implemented in the form of a software functional unit and sold or used as an independent product, it can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, or the part that contributes to the prior art, or all or part of the technical solution can be embodied in the form of a software product. The computer software product is stored in a storage medium and includes several instructions for enabling a computer device (which can be a personal computer, server, or network device, etc.) to execute all or part of the steps of the method described in each embodiment of the present invention. The aforementioned storage medium includes: various media that can store program codes, such as a USB flash drive, a mobile hard disk, a read-only memory (ROM), a random access memory (RAM), a magnetic disk or an optical disk.

[0115] As described above, the above embodiments are only used to illustrate the technical solutions of the present application, rather than to limit them. Although the present application has been described in detail with reference to the above embodiments, those skilled in the art should understand that they can still modify the technical solutions described in the above embodiments, or make equivalent replacements for some of the technical features therein. However, these modifications or replacements do not deviate the essence of the corresponding technical solutions from the spirit and scope of the technical solutions of the embodiments of the present application.

Claims

1. A method for generating a client UI interaction component, characterized in that: include: Obtain the UI effect diagram and requirement description text of the client UI interaction component to be generated; According to the preset multimodal model, in combination with the demand description text, feature extraction is performed on the UI effect diagram, and the extracted attribute features are converted into natural language text by feature language conversion to obtain attribute information of the UI effect diagram; By using the attribute information, attribute similarity matching is performed with UI component objects in a preset UI component knowledge base to obtain a target UI component object according to the matching result; The target component code corresponding to the target UI component object is obtained to generate the client UI interaction component based on the target component code.

2. A method for generating a client UI interaction component according to claim 1, characterized in that: The construction process of the UI component knowledge base specifically includes: Get component renderings, component description texts, and component codes of multiple UI component objects; According to the component rendering, the component description text and the component code, the component attribute features corresponding to the UI component object are obtained through the multimodal model, and the component attribute features are converted into a component attribute feature vector, wherein the component attribute feature vector includes: an image vector and a text vector; The identification mark of each UI component object is associated with the component attribute feature vector, and the associated identification mark and the component attribute feature vector are stored in a large model database constructed based on atomic design theory to obtain the UI component knowledge base.

3. A method for generating a client UI interaction component according to claim 2, characterized in that: By using the attribute information, performing attribute similarity matching with UI component objects in a preset UI component knowledge base, and obtaining a target UI component object according to the matching result specifically includes: Converting the attribute information into attribute vectorized data; The attribute vectorized data is matched with the component attribute feature vectors of the UI component objects in the UI component knowledge base by vector distance, so as to determine one or more target UI component objects according to the matching results.

4. A method for generating a client UI interaction component according to claim 3, characterized in that: The generating the client UI interaction component based on the target component code specifically includes: According to the matching result of the component attribute feature vector and the attribute vectorized data, and the matching result of the requirement description text and the component description text, determine the same attributes between the target UI component object and the client UI interaction component, and then extract the first code snippet corresponding to the same attributes from the target component code; The first code snippets are combined according to the UI effect diagram and the requirement description text to obtain the client UI interaction component.

5. A method for generating a client UI interaction component according to claim 4, characterized in that: Also includes: Verify the first code snippet according to the UI effect diagram and the requirement description text, and determine abnormal attributes in the first code snippet that do not conform to the UI effect diagram and the requirement description text; According to the abnormal attribute, a secondary match is performed from the UI component knowledge base according to the UI effect diagram and the requirement description text to obtain a second code snippet, so as to update the first code snippet through the second code snippet.

6. A method for generating a client UI interaction component according to claim 1, characterized in that: Also includes: According to the requirement description text, the component type information of the client UI interaction component is determined through an open set target detection method and a fuzzy matching method, so as to adjust the matching range of the UI component object according to the component type information.

7. A method for generating a client UI interaction component according to claim 1, characterized in that: The attribute information includes: color configuration, control type, control size, control image, layout structure and control character content.

8. A client UI interaction component generation device, characterized in that: include: A demand data acquisition unit, used to acquire a UI effect diagram and a demand description text of a client UI interaction component to be generated; An attribute information extraction unit is used to extract features of the UI effect diagram according to a preset multimodal model and in combination with the demand description text, and convert the extracted attribute features into natural language text by a feature language conversion method to obtain attribute information of the UI effect diagram; An attribute matching unit, used to perform attribute similarity matching with UI component objects in a preset UI component knowledge base through the attribute information, so as to obtain a target UI component object according to the matching result; The UI component generation unit is used to obtain the target component code corresponding to the target UI component object, so as to generate the client UI interaction component based on the target component code.

9. A client UI interaction component generation terminal, characterized in that: include: Memory and processor; The memory is used to store the program code corresponding to the client UI interaction component generation method according to any one of claims 1 to 7; The processor is configured to execute the program code.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores program code corresponding to the client UI interaction component generation method as described in any one of claims 1 to 7.

Images