A front-end component retrieval method, device, equipment and storage medium

Abstract

The present application relates to the technical field of computer, and especially relates to a front-end component retrieval method and device, equipment and storage medium. By acquiring a to-be-retrieved component and a front-end component library, wherein the to-be-retrieved component contains text information, UI view and model parameters, the key words in the text information are retrieved and processed, the target semantic feature information corresponding to the text information is extracted, the UI view is subjected to feature extraction calculation, the content feature information corresponding to the UI view is obtained, the content feature information is classified by using a neural network to obtain target content feature information, the model parameters are retrieved and processed, the target model structure, format and field information corresponding to the model parameters are extracted, and according to the target semantic feature information, the target content feature information and the target model structure, format and field information, a target component matching the to-be-retrieved component is retrieved in the front-end component library to obtain a final retrieval result. Not only can the to-be-retrieved component be quickly and accurately retrieved, but also the retrieval efficiency is improved.

Description

Technical Field

[0001] This invention relates to the field of computer technology, and in particular to a front-end component retrieval method, apparatus, device, and storage medium. Background Technology

[0002] With the rapid development of the network and front-end component development fields and the increasing demand, the network has gradually become an indispensable tool in people's lives and studies. Using the network, people can search for anything they want to know. However, how existing developers can quickly and accurately retrieve the required components from the front-end component library has become the primary problem they face.

[0003] In existing technologies, quickly retrieving matching components from a front-end component library primarily relies on component naming, semantic recognition of component functions, and tag matching. The drawback of this approach is that relying solely on component naming and semantic or tag matching is not very accurate. Due to the nature of language, many front-end components may have the same or similar meanings, especially since describing appearance is difficult to visualize. When faced with massive amounts of component information, searching becomes inefficient. Furthermore, the vague text entered by users in the search box, which doesn't clearly express the content they are looking for, often results in a large amount of non-target content, significantly impacting the user experience. Therefore, in front-end component retrieval, accurately retrieving relevant component content and improving retrieval efficiency are crucial. Summary of the Invention

[0004] Therefore, it is necessary to provide a front-end component retrieval method, apparatus, device, and storage medium to address the aforementioned technical problems, thereby resolving the technical issues that lead to low accuracy and low efficiency in the retrieval and recommendation process in front-end component retrieval.

[0005] A first aspect of this application provides a front-end component retrieval method, the front-end component retrieval method comprising:

[0006] Obtain the component to be retrieved and the front-end component library, wherein the component to be retrieved includes text information, UI view and model parameters;

[0007] The keywords in the text information are retrieved to extract the target semantic feature information corresponding to the text information;

[0008] Feature extraction calculations are performed on the UI view to obtain content feature information corresponding to the UI view; the content feature information is classified using a neural network to obtain target content feature information;

[0009] The model parameters are retrieved and processed to extract the target model structure, format, and field information corresponding to the model parameters;

[0010] Based on the target semantic feature information, target content feature information, and target model structure, format, and field information, the target component that matches the component to be searched is retrieved in the front-end component library to obtain the final search result.

[0011] A second aspect of this application provides a front-end component retrieval device, the front-end component retrieval device comprising:

[0012] The acquisition module is used to acquire the component to be retrieved and the front-end component library, wherein the component to be retrieved includes text information, UI view and model parameters;

[0013] The keyword processing module is used to retrieve and process keywords in the text information and extract the target semantic feature information corresponding to the text information;

[0014] The calculation module is used to perform feature extraction calculations on the UI view to obtain content feature information corresponding to the UI view; and to classify the content feature information using a neural network to obtain target content feature information.

[0015] The model parameter processing module retrieves and processes the model parameters, extracting the target model structure, format, and field information corresponding to the model parameters.

[0016] The retrieval results module is used to retrieve target components that match the component to be retrieved from the front-end component library based on the target semantic feature information, target content feature information, and target model structure, format, and field information, and obtain the final retrieval results.

[0017] Thirdly, embodiments of the present invention provide a computer device, the computer device including a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the front-end component retrieval method as described in the first aspect.

[0018] Fourthly, embodiments of the present invention provide a computer-readable storage medium storing a computer program that, when executed by a processor, implements the front-end component retrieval method as described in the first aspect.

[0019] The advantages of this invention compared to the prior art are:

[0020] This invention provides a front-end component retrieval method, apparatus, device, and storage medium. It involves acquiring a component to be retrieved and a front-end component library. The component to be retrieved includes text information, a UI view, and model parameters. Keyword retrieval processing is performed on the text information to extract target semantic features. Feature extraction calculations are performed on the UI view to obtain content features. A neural network is used to classify the content features to obtain target content features. The model parameters are then processed to extract the target model structure, format, and field information. Based on the target semantic features, target content features, and target model structure, format, and field information, a target component matching the component to be retrieved is retrieved from the front-end component library to obtain the final retrieval result. In this invention, after matching and recognizing the semantic features, not only is image matching and recognition performed on the UI view, but also precise matching and recognition of the model's structure, format, and fields. This allows for one or any number of combinations, enabling rapid and accurate retrieval of the required components from the front-end component library. This ensures that users can flexibly combine retrieval methods according to their actual needs, satisfying personalized user requirements and thus solving the technical problems of low accuracy and efficiency in the retrieval and recommendation process. Attached Figure Description

[0021] To more clearly illustrate the technical solutions of the embodiments of the present invention, the drawings used in the description of the embodiments of the present invention will be briefly introduced below. Obviously, the drawings described below are only some embodiments of the present invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0022] Figure 1 This is a schematic diagram of an application environment for a front-end component retrieval method provided in an embodiment of the present invention;

[0023] Figure 2 This is a flowchart illustrating a front-end component retrieval method according to an embodiment of the present invention;

[0024] Figure 3 This is a schematic diagram of the structure of a front-end component retrieval device provided in an embodiment of the present invention;

[0025] Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Detailed Implementation

[0026] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of the present invention. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0027] It should be understood that, when used in this specification and the appended claims, the term "comprising" indicates the presence of the described features, integrals, steps, operations, elements and / or components, but does not exclude the presence or addition of one or more other features, integrals, steps, operations, elements, components and / or collections thereof.

[0028] It should also be understood that the term “and / or” as used in this specification and the appended claims refers to any combination of one or more of the associated listed items and all possible combinations, and includes such combinations.

[0029] As used in this specification and the appended claims, the term "if" may be interpreted, depending on the context, as "when," "once," "in response to determination," or "in response to detection." Similarly, the phrase "if determined" or "if [described condition or event] is detected" may be interpreted, depending on the context, as meaning "once determined," "in response to determination," "once [described condition or event] is detected," or "in response to detection of [described condition or event]."

[0030] Furthermore, in the description of this invention and the appended claims, the terms "first," "second," "third," etc., are used only to distinguish descriptions and should not be construed as indicating or implying relative importance.

[0031] References to "one embodiment" or "some embodiments" as described in this specification mean that one or more embodiments of the invention include a specific feature, structure, or characteristic described in connection with that embodiment. Therefore, the phrases "in one embodiment," "in some embodiments," "in other embodiments," "in still other embodiments," etc., appearing in different parts of this specification do not necessarily refer to the same embodiment, but rather mean "one or more, but not all, embodiments," unless otherwise specifically emphasized. The terms "comprising," "including," "having," and variations thereof mean "including but not limited to," unless otherwise specifically emphasized.

[0032] It should be understood that the sequence number of each step in the following embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of the present invention.

[0033] To illustrate the technical solution of the present invention, specific embodiments are described below.

[0034] An embodiment of the present invention provides a front-end component retrieval method, which can be applied to, for example... Figure 1 In this application environment, the client communicates with the server. Clients include, but are not limited to, PDAs, desktop computers, laptops, ultra-mobile personal computers (UMPCs), netbooks, and personal digital assistants (PDAs). The server can be implemented using a standalone server or a server cluster consisting of multiple servers.

[0035] See Figure 2 This is a flowchart illustrating a front-end component retrieval method according to an embodiment of the present invention. The aforementioned front-end component retrieval method can be applied to... Figure 1 The server in the above-mentioned configuration connects to the corresponding client, such as... Figure 2 As shown, the front-end component retrieval method may include the following steps.

[0036] S201: Obtain the component to be retrieved and the front-end component library, wherein the component to be retrieved includes text information, UI view and model parameters.

[0037] In step S201, in one implementation scenario, the component to be retrieved may include text information, UI views, and model parameters related to the component. The text information may include, but is not limited to: page ID information, component module name, component label, component name, and usage frequency information, etc., and may include search keywords generated by the user based on search requirements or search instructions. The UI view is a UI rendering created by a visual designer based on requirements. It may include, but is not limited to: buttons, dropdown lists, rectangles, background images, etc., as well as color information, shape information, and size parameter information of the UI components. Image recognition can be performed on the components in the UI rendering, mainly identifying the component's shape, structure, included elements (input boxes, buttons, tables, etc.), style (color, font, font size, theme, etc.), and comparing its UI similarity with existing components in the component library. Model parameters may include, but are not limited to, the model's structure, format, fields, and functions.

[0038] In this embodiment, the borders included in the UI view can be triangles, quadrilaterals, or polygons, and the format of the model parameters can be Excel, JSON, or other formats. This embodiment does not impose any limitations on the shape of the borders included in the UI or the format of the model parameters.

[0039] For example, in insurance sales scenarios such as customer visits and marketing campaigns, the front-end functional pages are developed using a component-based approach. Before using a component, the developer first checks the internal component library to see if a suitable component already exists. If so, it can be directly referenced, eliminating the need for redundant development. When developers receive the product manager's requirements and the UI designer's visual design mockups, they divide the component according to the requirements and UI (text information, UI view, model parameters).

[0040] In one implementation scenario, the component to be retrieved can be obtained through user input. For example, the user can input it by typing on a keyboard or by speaking through a microphone; there is no limitation on this.

[0041] It should be noted that, in this embodiment of the disclosure, the front-end component library may include several candidate retrieval components and first feature information of the candidate retrieval components. The first feature information involves at least one of the text information, UI view, and model parameters of the candidate retrieval components. Furthermore, many components in the component library have models. By analyzing the model data structure and attribute information, and comparing them with other models in the component library, components with similar or identical models can be identified.

[0042] In this embodiment, by dividing the components and the front-end component library into text information, UI views, and model parameters, the candidate components can be retrieved efficiently, thus improving the efficiency of component retrieval.

[0043] S202: Perform keyword retrieval processing on the text information to extract the target semantic feature information corresponding to the text information.

[0044] In step S202, the preset candidate search components in the front-end component library can be code blocks with complete functions formed by visual code and corresponding processing logic, to achieve independent functions, such as a search bar component. The preset candidate search components in the front-end component library generally have a low change frequency. They can be extracted by professional technicians based on existing code blocks, and detailed functional descriptions and configuration information can be set for them. The functional description of each preset candidate search component can serve as the keyword for each preset candidate search component. In addition, the front-end component library can be stored on a computer device, on other devices that communicate with the computer device, or in the cloud, etc. This application embodiment does not limit this.

[0045] Specifically, after searching the front-end component library, it is necessary to search and match the semantic information of relevant components in the database based on the user requirement interface data and component information. The semantic information of components refers to the page ID, component module name, component label, component name and usage frequency information, thereby obtaining key information.

[0046] In this embodiment, after obtaining the keywords corresponding to at least one component to be searched, for each component to be searched, the keywords of the component to be searched can be matched with the keywords of each preset candidate search component in the aforementioned front-end component library to determine whether there is a preset candidate search component in the front-end component library that corresponds to the component to be searched; if it is determined that there is a candidate search component in the front-end component library that corresponds to the component to be searched, then the code block corresponding to the candidate search component can be obtained and the candidate general component can be rendered and displayed to determine the target semantic feature information of the candidate search component.

[0047] Optionally, the target semantic feature information of the candidate retrieval component is determined by matching the keywords of the component to be retrieved with the keywords of each preset candidate retrieval component in the front-end component library, including:

[0048] The keywords in the text information of the component to be searched are matched with the keywords of each preset component in the front-end component library to obtain the first matching degree for each preset component.

[0049] If the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold, then the preset component is determined to be a successfully matched component to be retrieved.

[0050] If the first matching degree corresponding to the preset component is less than the preset matching degree threshold, then the preset component is determined to be a component to be retrieved that failed to match.

[0051] Based on the successfully matched components to be retrieved, the target semantic feature information corresponding to the text information is determined.

[0052] In this embodiment, when calculating the first matching degree between the component to be searched and the preset candidate search components, the matching degree between each keyword of the component to be searched and each keyword of the preset candidate search components can be calculated separately, and then the first matching degree between the component to be searched and the preset candidate search components can be determined based on the sum of the matching degrees. Optionally, for each preset candidate search component, multiple keywords of the component to be searched can be matched with the keywords of the preset candidate search components to obtain the matching degree between each keyword of the component to be searched and the preset candidate search components. Preset candidate search components with a first matching degree greater than or equal to the preset matching degree threshold can be filtered according to the preset matching degree threshold, and these preset candidate search components can be rendered to the display interface so that the user can confirm whether these preset candidate search components meet the actual needs. If the user determines that the component function corresponding to the preset candidate search component meets the functional requirements of the component to be searched in the requirements document, then the matching can be determined to be successful; if the actual needs are not met, then the matching can be determined to be unsuccessful.

[0053] In this embodiment, by matching the keywords of the component to be retrieved with the keywords of each preset candidate retrieval component in the front-end component library, the target semantic feature information of the candidate retrieval component is determined, which can improve the recognition accuracy of the component to be retrieved, improve the matching degree between the component to be retrieved and the front-end component library, and improve the retrieval efficiency.

[0054] S203: Perform feature extraction calculation on the UI view to obtain content feature information corresponding to the UI view; use a neural network to classify the content feature information to obtain target content feature information.

[0055] In step S203, when the component to be retrieved is obtained from the corresponding UI view configuration file, the obtained UI view configuration file can be parsed to obtain the component configuration information of the corresponding UI view. The component configuration information includes the position, layer, style, and other attribute information of the component features constituting the UI view. Feature extraction calculation is performed on the position, layer, style, and other attribute information of the UI view's component features to obtain the content feature information corresponding to the UI view. The content feature information corresponding to the UI view is input into a neural network for similarity classification to obtain the optimal target content feature information of the component to be retrieved.

[0056] Optionally, feature extraction calculations are performed on the UI view to obtain content feature information corresponding to the UI view, including:

[0057] Based on the UI view, feature extraction calculation is performed using the ORB algorithm. The first pixel radius is preset, and the pixel point with the first pixel value of the image pixel value in the UI view is selected as the detection point.

[0058] Centered on the point to be detected, select the image pixel points to be tested in the UI view according to the preset first pixel radius and the surrounding first pixel radius. When the pixel points to be tested meet the gray value characteristics of the image, the point to be detected is used as a feature point.

[0059] Feature points are described to generate feature descriptors;

[0060] Based on the feature descriptors, feature matching is performed on the image features of each preset component in the front-end component library to obtain the content feature information corresponding to the UI view.

[0061] In this embodiment, after obtaining the UI view, the ORB algorithm can be used to quickly create feature vectors for key points in the image of the UI view. These feature vectors can be used to identify objects in the image. A first pixel radius can be preset, and then pixels with the first pixel value in the image of the UI view are selected as detection points. Centered on the detection point, more image pixels in the UI view are selected according to the first pixel radius to generate a first set of test pixels. When the number of consecutive pixels with the first pixel value in the first set of test pixels is less than a preset first threshold, a second set of test pixels is generated, centered on the detection point and again selected according to the first pixel radius. When the number of consecutive pixels with the first pixel value in the second set of test pixels is less than a preset second threshold, the first midpoint of the consecutive pixels with the first pixel value in the first set of test pixels is obtained, and the second midpoint of the consecutive pixels with the first pixel value in the second set of test pixels is obtained. When the angle between the first midpoint, the second midpoint, and the detection point is less than a preset angle threshold, the detection point is used as a feature point. Finally, feature points are described to generate feature descriptors, and feature matching is performed on the image features of each preset component in the front-end component library to obtain the corresponding content feature information of the UI view.

[0062] The ORB algorithm comprises Fast and Brief, which are feature detection and vector creation algorithms, respectively. ORB first searches for special regions in the image, called keypoints. Keypoints are prominent small areas in the image, such as corners, or those with pixel values ​​that rapidly change from light to dark. Fast primarily determines the threshold parameter h for selecting keypoints. Then, for any pixel p in the image, FAST compares 16 pixels within a circle centered at p. If there are at least 8 pixels within the circle with a gray value less than lp-h (lp being the gray value of p) or greater than lp+h, then pixel p is selected as a keypoint. In Brief, each keypoint is described by a binary feature vector, typically a 128-512 bit string containing only 1s and 0s. The given image is first smoothed using a Gaussian kernel to prevent the descriptor from being overly sensitive to high-frequency noise. Then, for a given keypoint, a pixel is extracted from the Gaussian distribution centered on that keypoint; this pixel is called keypoint #1, with a standard deviation of σ. Another pixel is extracted from the Gaussian distribution centered on keypoint #1; this pixel is called keypoint #2, with a standard deviation of σ / 2. The main function is to construct a binary feature descriptor for the keypoint, which is obtained by comparing the grayscale values ​​of keypoint #1 and keypoint #2. If keypoint #1 is brighter than keypoint #2, the corresponding bit in the descriptor is assigned a value of 1; otherwise, a value of 0 is assigned. Then, for the same keypoint, new keypoints #1 and #2 are selected, their grayscale values ​​are compared, and the next bit in the feature vector is assigned a 1 or 0. This algorithm is repeated for each feature point. In other words, ORB calculates a corresponding feature vector for each keypoint. The feature vector created by the ORB algorithm contains only 1s and 0s, called a binary feature vector. The order of 1s and 0s varies depending on the specific keypoint and its surrounding pixel region. This vector represents the intensity pattern around the keypoint; therefore, multiple feature vectors can be used to identify larger areas, or even specific objects in an image.

[0063] It should be noted that image detection in the UI view can be performed not only by ORB algorithms, but also by image detection algorithms, including edge detection algorithms and connected component detection algorithms. OCR algorithms can also be used, etc. The core purpose is to simplify image information and obtain image feature information. Those skilled in the art can flexibly adjust the specific implementation method according to actual needs; this embodiment does not impose any limitations.

[0064] In this embodiment, the image recognition method based on the ORB algorithm improves retrieval and detection performance and image recognition accuracy by identifying the content feature information in the acquired image information. Moreover, it does not require wearing any special physical equipment, achieving higher accuracy and efficiency in UI view recognition and correction, greatly reducing application costs, while ensuring recognition accuracy and being easy to promote and use.

[0065] Optionally, a neural network is used to classify the content feature information to obtain the target content feature information, including:

[0066] The content feature information is preprocessed to obtain the preprocessed content feature information;

[0067] The preprocessed content feature information is input into a neural network model for image recognition, and the image feature vector of the content feature information is extracted.

[0068] Based on the image feature vector, the image content features are determined, and the image content features are classified to obtain the target content feature information.

[0069] In this embodiment, content feature information is acquired and preprocessed. Preprocessing mainly involves data augmentation and noise removal of the content feature information. This allows the gap between the true and predicted label values ​​to be reduced more effectively when the preprocessed content feature information is processed by the neural network model. Preprocessing includes digitization, image denoising, grayscale conversion, and normalization, ensuring that the neural network model does not get stuck in local optima or oscillate between optima during gradient descent. After extracting the image feature vector of the content feature information, the image content features are determined, and image denoising is performed. This mainly involves removing outliers from the image pixel values. Commonly used methods include Gaussian denoising and filtering denoising, which are also frequently used operations in preprocessing.

[0070] Furthermore, image feature vectors are essentially image content feature categories that haven't been determined. They need to be categorized using a pre-trained neural network model. First, they need to be converted into numerical values ​​and input into the neural network model. The model then performs forward propagation and activation functions to predict the category value. The image content feature category is determined based on the predicted category value. The category prediction function used is the softmax function. This function predicts 12 different numbers and 14 different types of features, each with its own predicted value. The image content feature with the largest predicted value for its corresponding category is identified as belonging to that category. This process classifies the image content features and obtains the target content feature information.

[0071] This embodiment preprocesses the content feature information to obtain preprocessed content feature information, and then inputs the preprocessed content feature information into the neural network model for image recognition. That is, the output features of each pooling layer are cascaded, which can make full use of the local and global features of the image and analyze the image according to the feature information at different scales, greatly improving the accuracy of the output results. Preprocessing ensures that the input image meets the processing conditions of the neural network, further improving the correctness of the output results. At the same time, preprocessing the image and unifying the image also improves the speed of the neural network's image analysis.

[0072] Optionally, based on the image feature vector, image content features are determined, and the image content features are classified to obtain target content feature information, including:

[0073] Based on the image content features, the similarity of the image content features of each preset component in the front-end component library is calculated.

[0074] If the similarity threshold of the images of each preset component in the front-end component library is greater than or equal to the similarity threshold of the images, then the target content feature information corresponding to the UI view is obtained.

[0075] If the similarity is less than the similarity threshold of the images of each preset component in the front-end component library, the target content feature information corresponding to the UI view cannot be obtained.

[0076] In this embodiment, by setting matching rules, the similarity between the image content features of a component and the images of various preset components in the front-end component library is determined according to the matching rules. UI component images with a similarity greater than or equal to a similarity threshold are then retrieved from the front-end component library to obtain the target content feature information corresponding to the UI view. For the content feature information, the similarity between the identified content feature information and the content feature information of various preset components in the front-end component library can be calculated using regular expression matching. Alternatively, word vectors corresponding to the content feature information can be constructed, and the similarity between the word vectors corresponding to the content feature information and the content feature information of various preset components in the front-end component library can be calculated.

[0077] As can be seen, the embodiments of this application perform image feature detection on the UI view of the component to obtain the content feature information of the UI view, and then add it to the neural network for similarity classification to obtain the target content feature information. Based on the target content feature information, the target content feature information that matches the UI view is recalled in the front-end component library. Thus, based on the UI view content feature information in the input image, the retrieval results are matched in the front-end component library, so that the target component retrieved later has a high degree of matching with the UI view in the input image, the retrieval results are highly accurate, and the retrieval efficiency is improved.

[0078] S204: Perform retrieval processing on the model parameters to extract the target model structure, format, and field information corresponding to the model parameters.

[0079] In step 204, the target model structure, format, and field information can be the relevant matching component model structure, format, and field information retrieved from the front-end component library for the component to be retrieved. For example, a user can log in to the front-end component library server through the component retrieval client to perform a retrieval based on the component's target model structure, format, and field information.

[0080] For example, the request for the component to be retrieved is a request parameter for the component to be retrieved. The request parameter can be a model parameter representing the component, such as the component's model structure, model functional format, and model fields. Based on the user's request, the subsequent retrieval of the component to be retrieved can be achieved. Retrieving from the front-end component library based on the component's model structure, model functional format, and model fields can complete the retrieval for different user requests. That is, when a user uses a component identifier to precisely request the component to be developed, the component to be retrieved is precisely retrieved based on its model structure, model functional format, and model fields. Therefore, this solution can be guaranteed to work for different forms of user requests, expanding its applicability and making it more reasonable.

[0081] In this embodiment, during retrieval and matching, the nearest neighbor method is applied in the front-end component library to perform matching retrieval of the corresponding model parameters of the component to be retrieved. The similarity matching method uses Euclidean distance. Geometric similarity is determined by calculating the Euclidean distance value between two models. The shorter the distance, the greater the similarity. The instance with the smallest distance value to the target component model in the front-end component library is the most similar instance. The nearest neighbor method is a method of instance retrieval. Based on the model structure, format, and field information, relevant selection schemes for components are selected. The structure, format, and field information of the target component model are compared with the candidate component models in the front-end component library one by one, and the similarity is calculated sequentially. The instance with the highest similarity is taken as the model structure, format, and field information of the corresponding target component. The similarity expression of Euclidean distance is:

[0082]

[0083] Where X is the feature vector of the target component model, and Y is the feature vector of a candidate retrieval component model in the front-end component library.

[0084] Optionally, the model parameters of the component are retrieved to extract the target model structure, format, and field information corresponding to the component model parameters, including:

[0085] After constructing the model locally based on the model parameters, the model is processed to obtain the pre-configured model structure, format, and field information.

[0086] Based on the pre-configured model structure, format, and field correspondence with the front-end component library, the logical component corresponding to the pre-configured model structure, format, and field is searched in the front-end component library;

[0087] The model parameters are converted and matched using logical components to obtain the target model structure, format, and field information corresponding to the model parameters.

[0088] Furthermore, after determining the model's local construction and processing, a pre-configured model structure, format, and field information are obtained. Then, based on the model structure, format, and field information, different dimensions are defined, and a one-to-one correspondence is established in the front-end component library. Specifically, a relationship is established between the model information of the component to be retrieved and the front-end component library. When the user selects the type of component to be retrieved, the corresponding content module is automatically called. Of course, the relationship between the model information of the component to be retrieved and the front-end component library can also be customized according to user needs. This ensures accurate and convenient retrieval later, quickly finding the logical components corresponding to the pre-configured model structure, format, and fields. Then, the logical components convert the model parameters to match the target model structure, format, and field information corresponding to the model parameters in the front-end component library. When the input component information is different, the logical components used are also different. Specifically, the corresponding logical components can be determined based on the pre-configured model structure, format, and field information. Furthermore, when different logical components are used to process the input information, the generated retrieval data will also differ. It can convert the format of input component information and also validate the input component information.

[0089] It's important to note that before converting the input component information, you can first obtain the component model format information. This model format information can contain JSON objects corresponding to each component. All components can be described using JSON objects. JSON stands for JavaScript Object Notation, which describes the component's name, properties, events, and child elements. Then, a parser is used to convert the model format information so that the page can be rendered based on the parsed results for the candidate components in the front-end component library.

[0090] In this embodiment, after obtaining the logical component, in order to subsequently call and monitor the component to be retrieved, it is necessary to select the corresponding component data from the front-end component library based on the correspondence between the model information of the component to be retrieved and the front-end component library, and store the component data as the target component information for updating. The target component information refers to the target model structure, format, and field information of the component. This solves the technical problems of difficulty in maintenance and low business efficiency caused by the front-end component library in the prior art when retrieving new components or adjusting old components. It achieves the universality of the front-end component library's retrieval components, adapting to various retrieval component needs, not only improving retrieval efficiency but also achieving accurate retrieval.

[0091] S205: Based on the target semantic feature information, target content feature information, and target model structure, format, and field information, retrieve the target component that matches the component to be retrieved in the front-end component library to obtain the final retrieval result.

[0092] In step S205, the text information, UI view, and model parameters of the component to be retrieved and the front-end component library are divided according to the requirements. The target semantic feature information, target content feature information, target model structure, format, and field information of the component to be retrieved are determined. Then, the target component with the highest matching degree between each preset general component and the component to be retrieved is retrieved from the front-end component library to obtain the final retrieval result.

[0093] In this embodiment, the component library can be searched directly based on the functions it is intended to perform, or by searching separately or in combination based on any specific elements. For example, to develop a component for an event lottery wheel, one can search based on the functional descriptions such as "lottery wheel" or "event wheel." If no results are found, the UI mockup of the wheel can be used to search the front-end component library to see if there are any components with similar UIs, or similar components can be searched based on the model structure.

[0094] It should be noted that this application is not limited to searching for similar components based on the above conditions. It can also describe the logic within a component, such as the logic for generating a random amount from 0-100, or the logic for randomly allocating a complimentary insurance policy. Alternatively, it can describe the component's communication; for example, if the spinning wheel component needs to communicate with a certain interface of the financial management system, components with similar communication can be searched to determine if the retrieved components meet the requirements. Furthermore, the system recommends components based on relevant data and sends the search results to the user's terminal. Specifically, the intelligent recommendation sorts components according to relevant rule priorities. Different recommendation rules are applied based on different search information, and different weights are set for matching based on usage frequency, component name, and component tag name. Finally, the user-selected data is intelligently matched with the recommendation rules to obtain the recommendation results, which are then sent to the user's terminal.

[0095] Optionally, based on the target semantic feature information, target content feature information, and target model structure, format, and field information, the target component matching the component to be retrieved is searched in the front-end component library to obtain the final search results, including:

[0096] The target semantic features, target content features, and target model structure, format, and field information are combined once or multiple times to form retrieval condition rules.

[0097] Select at least one search condition rule from the front-end component library as the target component to be searched, and obtain the final search results.

[0098] In this embodiment, if it is difficult to find a completely matching component by searching all the conditions, the search tool can provide a combined search using only one or more search combinations to find the closest component. If no suitable component is found when searching all features of semantics, view, and model, then only components similar to the view and model, or only components with similar model structures, can be searched. That is to say, the search can be performed from multiple dimensions simultaneously, or only from one or two dimensions, supporting any combination of semantics, view, and model, and the search conditions are more flexible. Depending on the actual search situation, users can use each search module once, twice, or more during the combination process.

[0099] In this embodiment, the component to be retrieved is input into the front-end component library. By arbitrarily combining all features of semantics, view, and model, the target component is determined from the front-end component library, resulting in the final search result. Users can flexibly combine search methods according to their actual needs, satisfying personalized requirements, increasing search readability, and improving the user's search experience. This accurately describes the degree of matching between each candidate component in the front-end component library and the component to be retrieved, thereby improving the accuracy and efficiency of component retrieval.

[0100] This embodiment provides a front-end component retrieval method, apparatus, device, and storage medium. By acquiring the component to be retrieved and a front-end component library, wherein the component to be retrieved includes text information, UI views, and model parameters, the method performs keyword retrieval processing on the text information to extract target semantic feature information corresponding to the text information. Feature extraction calculation is performed on the UI view to obtain content feature information corresponding to the UI view. A neural network is used to classify the content feature information to obtain target content feature information. The model parameters are then processed to extract the target model structure, format, and field information corresponding to the model parameters. Based on the target semantic feature information, target content feature information, and target model structure, format, and field information, a target component matching the component to be retrieved is retrieved from the front-end component library to obtain the final retrieval result. In this invention, after matching and recognizing the semantic feature information, not only is image matching and recognition performed on the UI view, but also precise matching and recognition is performed on the model's structure, format, and fields. This allows for one or any number of combinations, enabling rapid and accurate retrieval of the required components from the front-end component library. This ensures that users can flexibly combine retrieval methods according to their actual needs, meeting their personalized requirements and thus solving the technical problems of low accuracy and efficiency in the retrieval and recommendation process.

[0101] Please see Figure 3 , Figure 3 This is a schematic diagram of the structure of a front-end component retrieval device provided in an embodiment of the present invention. In this embodiment, the terminal includes units used for execution... Figure 2 The steps in the corresponding embodiments. Please refer to the details. Figure 2 as well as Figure 2 The relevant descriptions in the corresponding embodiments are shown below. For ease of explanation, only the parts relevant to this embodiment are shown. See also... Figure 3 The front-end component retrieval device 30 includes: an acquisition module 31, a keyword processing module 32, a calculation module 33, a model processing module 34, and a retrieval result module 35.

[0102] The acquisition module 31 is used to acquire the component to be retrieved and the front-end component library, wherein the component to be retrieved includes text information, UI view and model parameters;

[0103] Keyword processing module 32 is used to retrieve keywords in text information and extract target semantic feature information corresponding to the text information;

[0104] The calculation module 33 is used to perform feature extraction calculation on the UI view to obtain the content feature information corresponding to the UI view; and to classify the content feature information using a neural network to obtain the target content feature information.

[0105] The model parameter processing module 34 retrieves and processes the model parameters, extracting the target model structure, format, and field information corresponding to the model parameters.

[0106] The retrieval results module 35 is used to retrieve target components that match the component to be retrieved from the front-end component library based on the target semantic feature information, target content feature information, and target model structure, format, and field information, and to obtain the final retrieval results.

[0107] Optionally, the keyword processing module 32 mentioned above includes:

[0108] The first matching degree unit is used to match the keywords in the text information of the component to be retrieved with the keywords of each preset component in the front-end component library to obtain the first matching degree corresponding to each preset component.

[0109] The matching success unit is used to determine that the preset component is a successfully matched component to be retrieved if the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold.

[0110] The matching failure unit is used to determine the preset component as a failed search component if the first matching degree corresponding to the preset component is less than the preset matching degree threshold.

[0111] The determining unit is used to determine the target semantic feature information corresponding to the text information based on the successfully matched search component.

[0112] Optionally, the above-mentioned calculation module 33 includes:

[0113] The selection unit is used to perform feature extraction calculations based on the UI view using the ORB algorithm. The preset first pixel radius selects the pixel point of the first pixel value of the image pixel value in the UI view as the detection point.

[0114] The feature point unit is used to select the image pixel to be tested in the UI view with the point to be detected as the center, according to the preset first pixel radius and the surrounding first pixel radius. When the pixel to be tested meets the gray value characteristics of the image, the point to be detected is used as the feature point.

[0115] Description unit, used to describe the features of feature points and generate feature descriptors;

[0116] The obtaining unit is used to perform feature matching on the image features of each preset component in the front-end component library according to the feature descriptor, and obtain the content feature information corresponding to the UI view.

[0117] Optionally, the above-mentioned calculation module 33 further includes:

[0118] The preprocessing unit is used to preprocess the content feature information to obtain preprocessed content feature information;

[0119] The recognition unit is used to input the preprocessed content feature information into the neural network model for image recognition and extract the image feature vector of the content feature information.

[0120] The classification unit is used to determine the image content features based on the image feature vector, classify the image content features, and obtain target content feature information.

[0121] Optionally, the above classification units include:

[0122] The calculation subunit is used to calculate the similarity of the image content features of each preset component in the front-end component library according to the image content features;

[0123] The sub-unit is used to obtain the target content feature information corresponding to the UI view if the similarity threshold of the images of each preset component in the front-end component library is greater than or equal to the similarity threshold of the images of each component.

[0124] If the similarity of the images of the UI view to the images is less than the similarity threshold of the images of each preset component in the front-end component library, then the target content feature information corresponding to the UI view cannot be obtained.

[0125] Optionally, the above-mentioned model parameter processing module 34 includes:

[0126] The processing unit is used to perform local model construction based on model parameters and then process the model to obtain the pre-configured model structure, format, and field information.

[0127] The lookup unit is used to search for the logical component corresponding to the pre-configured model structure, format, and fields in the front-end component library based on the pre-configured correspondence between the model structure, format, and fields and the front-end component library.

[0128] The conversion unit is used to convert the format of model parameters through logical components and match them to obtain the target model structure, format and field information corresponding to the model parameters.

[0129] Optionally, the above-mentioned search results module 35 includes:

[0130] The combination unit is used to combine target semantic feature information, target content feature information, and target model structure, format, and field information once or multiple times to form retrieval condition rules.

[0131] The selection unit is used to select at least one of the search condition rules in the front-end component library as the target component that matches the component to be searched, so as to obtain the final search result.

[0132] It should be noted that the information interaction and execution process between the above-mentioned units are based on the same concept as the method embodiments of the present invention. For details on their specific functions and technical effects, please refer to the method embodiments section, which will not be repeated here.

[0133] Figure 4 This is a schematic diagram of the structure of a computer device provided in an embodiment of the present invention. Figure 4 As shown, the computer device of this embodiment includes: at least one processor ( Figure 4 Only one is shown in the diagram), a memory, and a computer program stored in the memory and capable of running on at least one processor, which, when executed by the processor, implements the steps in any of the above-described front-end component retrieval method embodiments.

[0134] This computer device may include, but is not limited to, a processor and memory. Those skilled in the art will understand that... Figure 4 The examples of computer devices are merely examples and do not constitute a limitation on computer devices. Computer devices may include more or fewer components than shown, or combinations of certain components, or different components, such as network interfaces, displays, and input devices.

[0135] The processor referred to can be a CPU, but it can also be other general-purpose processors, digital signal processors (DSPs), application-specific integrated circuits (ASICs), field-programmable gate arrays (FPGAs), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor can be a microprocessor or any conventional processor.

[0136] Memory includes readable storage media, internal memory, etc., wherein internal memory can be the RAM of a computer device, providing an environment for the operation of the operating system and computer-readable instructions stored in the readable storage media. The readable storage media can be the hard drive of a computer device, or in other embodiments, it can be an external storage device of the computer device, such as a plug-in hard drive, Smart Media Card (SMC), Secure Digital (SD) card, or Flash Card. Furthermore, memory can include both internal storage units and external storage devices of a computer device. Memory is used to store the operating system, applications, bootloader, data, and other programs, such as program code for computer programs. Memory can also be used to temporarily store data that has been output or will be output.

[0137] Those skilled in the art will understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the functions described above can be assigned to different functional units and modules as needed, that is, the internal structure of the device can be divided into different functional units or modules to complete all or part of the functions described above. The functional units and modules in the embodiments can be integrated into one processing unit, or each unit can exist physically separately, or two or more units can be integrated into one unit. The integrated unit can be implemented in hardware or as a software functional unit. Furthermore, the specific names of the functional units and modules are only for easy differentiation and are not intended to limit the scope of protection of this invention. The specific working process of the units and modules in the above device can be referred to the corresponding process in the foregoing method embodiments, and will not be repeated here. If the integrated unit is implemented as 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 present invention can implement all or part of the processes in the methods of the above embodiments by instructing related hardware through a computer program. The computer program can be stored in a computer-readable storage medium, and when executed by a processor, it can implement the steps of the above method embodiments. The computer program includes computer program code, which can be in the form of source code, object code, executable files, or certain intermediate forms. A computer-readable medium can include at least: any entity or device capable of carrying computer program code, a recording medium, a computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media. Examples include USB flash drives, portable hard drives, magnetic disks, or optical disks. In some jurisdictions, according to legislation and patent practice, computer-readable media cannot be electrical carrier signals or telecommunication signals.

[0138] The present invention can implement all or part of the processes in the methods of the above embodiments, or it can be accomplished by a computer program product. When the computer program product is run on a computer device, the computer device executes the steps in the above method embodiments.

[0139] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0140] Those skilled in the art will recognize that the units and algorithm steps of the various examples described in conjunction with the embodiments disclosed herein can be implemented in electronic hardware, or a combination of computer software and electronic hardware. Whether these functions are implemented in hardware or software depends on the specific application and design constraints of the technical solution. Those skilled in the art can use different methods to implement the described functions for each specific application, but such implementations should not be considered beyond the scope of this invention.

[0141] In the embodiments provided by this invention, it should be understood that the disclosed apparatus / computer devices and methods can be implemented in other ways. For example, the apparatus / computer device embodiments described above are merely illustrative. For instance, the division of modules or units is only a logical functional division, and in actual implementation, there may be other division methods. For example, multiple units or components may be combined or integrated into another system, or some features may be ignored or not executed. Furthermore, the mutual coupling or direct coupling or communication connection shown or discussed may be through some interfaces; the indirect coupling or communication connection between apparatuses or units may be electrical, mechanical, or other forms.

[0142] The units described as separate components may or may not be physically separate. 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 the units can be selected to achieve the purpose of this embodiment according to actual needs.

[0143] The above embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A front-end component retrieval method, characterized in that, include: Obtain the component to be retrieved and the front-end component library, wherein the component to be retrieved includes text information, UI view and model parameters; The keywords in the text information are retrieved to extract the target semantic feature information corresponding to the text information; Feature extraction calculations are performed on the UI view to obtain content feature information corresponding to the UI view; the content feature information is classified using a neural network to obtain target content feature information; The model parameters are retrieved and processed to extract the target model structure, format, and field information corresponding to the model parameters; Based on the target semantic feature information, target content feature information, and target model structure, format, and field information, the target component matching the component to be searched is retrieved in the front-end component library to obtain the final search result; The step of performing feature extraction calculations on the UI view to obtain content feature information corresponding to the UI view includes: Based on the UI view, feature extraction calculation is performed using the ORB algorithm. The pixel point with the first pixel value of the image pixel value in the UI view is selected as the detection point with the preset first pixel radius. Centered on the point to be detected, select image pixels in the UI view to be tested according to the preset first pixel radius and the surrounding area of ​​the first pixel radius. When the pixel to be tested meets the characteristics of image grayscale value, the point to be detected is used as a feature point. The feature points are described to generate feature descriptors; Based on the feature descriptor, feature matching is performed on the image features of each preset component in the front-end component library to obtain the content feature information corresponding to the UI view.

2. The front-end component retrieval method as described in claim 1, characterized in that, The step of retrieving keywords from the text information and extracting the target semantic feature information corresponding to the text information includes: The keywords in the text information of the component to be searched are matched with the keywords of each preset component in the front-end component library to obtain the first matching degree corresponding to each preset component. If the first matching degree corresponding to the preset component is greater than or equal to the preset matching degree threshold, then the preset component is determined to be a successfully matched component to be retrieved. If the first matching degree corresponding to the preset component is less than the preset matching degree threshold, then the preset component is determined to be a failed matching component to be retrieved. Based on the successfully matched components to be retrieved, the target semantic feature information corresponding to the text information is determined.

3. The front-end component retrieval method as described in claim 1, characterized in that, The process of classifying the content feature information using a neural network to obtain target content feature information includes: The content feature information is preprocessed to obtain preprocessed content feature information; The preprocessed content feature information is input into a neural network model for image recognition, and the image feature vector of the content feature information is extracted. Based on the image feature vector, the image content features are determined, and the image content features are classified to obtain target content feature information.

4. The front-end component retrieval method as described in claim 3, characterized in that, The step of determining image content features based on the image feature vector, classifying the image content features, and obtaining target content feature information includes: Based on the image content features, similarity calculations are performed on the image content features of each preset component in the front-end component library; If the similarity threshold of the images of each preset component in the front-end component library is greater than or equal to the similarity threshold of the images, then the target content feature information corresponding to the UI view is obtained. If the similarity is less than the similarity threshold of the images of each preset component in the front-end component library, then the target content feature information corresponding to the UI view cannot be obtained.

5. The front-end component retrieval method as described in claim 1, characterized in that, The step of retrieving and processing the model parameters to extract the target model structure, format, and field information corresponding to the model parameters includes: After performing local model construction based on the model parameters, the model is processed to obtain the pre-configured model structure, format, and field information. Based on the pre-configured model structure, format, and field correspondence with the front-end component library, the logical component corresponding to the pre-configured model structure, format, and field is searched in the front-end component library; The logic component performs format conversion on the model parameters and performs matching to obtain the target model structure, format, and field information corresponding to the model parameters.

6. The front-end component retrieval method as described in claim 1, characterized in that, The step of retrieving target components matching the component to be retrieved from the front-end component library based on the target semantic feature information, the target content feature information, and the target model structure, format, and field information to obtain the final retrieval result includes: The target semantic feature information, the target content feature information, and the target model structure, format, and field information are combined once or multiple times to form retrieval condition rules; Select at least one of the search criteria rules from the front-end component library as the target component that matches the component to be searched, and obtain the final search result.

7. A front-end component retrieval device, characterized in that, The front-end component retrieval device includes: The acquisition module is used to acquire the component to be retrieved and the front-end component library, wherein the component to be retrieved includes text information, UI view and model parameters; The keyword processing module is used to retrieve and process keywords in the text information and extract the target semantic feature information corresponding to the text information; The calculation module is used to perform feature extraction calculations on the UI view to obtain content feature information corresponding to the UI view; and to classify the content feature information using a neural network to obtain target content feature information. The model parameter processing module retrieves and processes the model parameters, extracting the target model structure, format, and field information corresponding to the model parameters. The retrieval results module is used to retrieve target components that match the component to be retrieved from the front-end component library based on the target semantic feature information, target content feature information, and target model structure, format, and field information, and to obtain the final retrieval results; The calculation module includes: The selection unit is used to perform feature extraction calculation based on the UI view using the ORB algorithm, and selects the pixel point of the first pixel value of the image pixel value in the UI view as the detection point with a preset first pixel radius. The feature point unit is used to select image pixels to be tested in the UI view with the point to be detected as the center, according to the preset first pixel radius and the surrounding area of ​​the first pixel radius. When the pixel to be tested meets the gray value characteristics of the image, the point to be detected is used as a feature point. The description unit is used to describe the feature points and generate feature descriptors; The obtaining unit is used to perform feature matching on the image features of each preset component in the front-end component library according to the feature descriptor, and obtain the content feature information corresponding to the UI view.

8. A computer device, characterized in that, The computer device includes a processor, a memory, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the front-end component retrieval method as described in any one of claims 1 to 6.

9. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the front-end component retrieval method as described in any one of claims 1 to 6.

Images