Method, device, storage medium and electronic device for querying component

Abstract

The application discloses a method and device for querying components, a storage medium and an electronic device. The method comprises the following steps: obtaining a first component graph, wherein the first component graph is a picture representing the implementation effect of a component in a design draft page; generating a component query request according to the first component graph, and sending the component query request to a component query server to obtain a component query result; if the component query result is not empty, rendering at least one second component graph and displaying the similarity corresponding to each second component graph; and in response to a triggering instruction of any one of the second component graphs, displaying detailed information of the component corresponding to the second component graph. The application can intuitively and quickly locate a component meeting the requirements of a design draft.

Description

Technical Field

[0001] This disclosure relates to the field of Internet technology, and in particular to methods, apparatus, storage media and electronic devices for query components. Background Technology

[0002] In related technologies, component users need to input search criteria when querying for a target component. These criteria are typically textual information about the target component, such as the component name, component identifier, or component description. This query method places high demands on component users, requiring them to have a certain level of understanding of the component. Furthermore, if the search criteria are inaccurate, the search results may be imprecise. If the search results are imprecise, the user may need to sift through many search result records, reducing search efficiency. Summary of the Invention

[0003] To at least address the technical problem of improving the accuracy of component queries, embodiments of this disclosure provide a method, apparatus, storage medium, and electronic device for querying components.

[0004] On the one hand, this disclosure provides a method for querying components, the method comprising:

[0005] Obtain the first component image, which is an image representing the implementation effect of the component on the design draft page;

[0006] A component query request is generated based on the first component graph, and the component query request is sent to the component query server to obtain the component query result; the component query result is used to record at least one second component graph whose content similarity with the first component graph is higher than a preset first threshold, and the similarity corresponding to each second component graph, wherein the similarity is the similarity between the second component graph and the first component graph;

[0007] If the component query result is not empty, then render the at least one second component graph and display the similarity corresponding to each second component graph;

[0008] In response to a trigger command on any of the second component graphs, display detailed information about the components corresponding to the second component graphs.

[0009] On the other hand, this disclosure provides a method for querying components, the method comprising:

[0010] Obtain a component query request sent by the component query client, wherein the component query request includes a first component image, which is an image representing the implementation effect of the component on the design draft page;

[0011] Based on the component query request, a component query result is obtained; the component query result is used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image, wherein the similarity is the similarity between the second component image and the first component image;

[0012] Sending the component query result to the component query client to trigger the query client to render the at least one second component graph and display the similarity corresponding to each second component graph when the component query result is not empty; and triggering the query client to display the detailed information of the component corresponding to the second component graph in response to the trigger instruction for any second component graph.

[0013] On the other hand, this disclosure provides an apparatus for querying components, the apparatus comprising:

[0014] The first component image acquisition module is used to acquire the first component image, which is an image representing the implementation effect of the component on the design draft page;

[0015] The first query module is used to generate a component query request based on the first component graph, and send the component query request to the component query server to obtain the component query result; the component query result is used to record at least one second component graph whose content similarity with the first component graph is higher than a preset first threshold, and the similarity corresponding to each second component graph, wherein the similarity is the similarity between the second component graph and the first component graph;

[0016] The rendering module is used to render the at least one second component graph and display the similarity corresponding to each second component graph if the component query result is not empty.

[0017] The detailed information display module is used to display the detailed information of the component corresponding to any of the second component diagrams in response to a trigger command.

[0018] On the other hand, this disclosure provides an apparatus for querying components, the apparatus comprising:

[0019] The component query request acquisition module is used to acquire the component query request sent by the component query client. The component query request includes a first component image, which is an image representing the implementation effect of the component on the design draft page.

[0020] The second query module is used to obtain component query results according to the component query request; the component query results are used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image, wherein the similarity is the similarity between the second component image and the first component image;

[0021] The component query result feedback module is used to send the component query result to the component query client to trigger the query client to render the at least one second component graph and display the similarity corresponding to each second component graph when the component query result is not empty; and to trigger the query client to display the detailed information of the component corresponding to the second component graph in response to the trigger command for any second component graph.

[0022] On the other hand, this disclosure provides a computer-readable storage medium, characterized in that the computer-readable storage medium stores at least one instruction or at least one program, the at least one instruction or at least one program being loaded and executed by a processor to implement the above-described method for a query component.

[0023] On the other hand, this disclosure provides an electronic device, characterized in that it includes at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the at least one processor implements the above-described method for querying a component by executing the instructions stored in the memory.

[0024] This disclosure provides methods, apparatus, storage media, and electronic devices for querying components. This disclosure can generate corresponding component mockups for components developed by developers, query the mockups of developed components based on the implementation effect on the design draft page, and return the query results. This allows users to directly see component mockups similar to the implementation effect on the design draft page in the query results, thereby intuitively and quickly locating components that meet the design draft requirements. Attached Figure Description

[0025] To more clearly illustrate the technical solutions and advantages in the embodiments or related technologies of this disclosure, the accompanying drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, the accompanying drawings described below are only some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0026] Figure 1 This is a schematic diagram of the query results of the component that retrieves data via text retrieval in the related technologies provided in this disclosure;

[0027] Figure 2 This is a schematic diagram of a feasible implementation framework for a query component method provided in this disclosure;

[0028] Figure 3 This is a schematic diagram of an optional structure for the distributed system 100 provided in this publication to be applied to a blockchain system;

[0029] Figure 4 This is a flowchart illustrating a method for a query component provided in this disclosure;

[0030] Figure 5 This is a flowchart of the interaction process of obtaining component query results based on the above component query request, provided in this disclosure;

[0031] Figure 6 This is a flowchart provided in this publication that generates and feeds back the component query results to the component platform service based on the first image to be compared and each of the second images to be compared.

[0032] Figure 7 This is a flowchart of the component query client provided in this public disclosure displaying the query results of the above components;

[0033] Figure 8 This is a schematic diagram of the process of rendering at least one of the above-mentioned second component graphs and displaying the similarity corresponding to each of the above-mentioned second component graphs, provided in this disclosure.

[0034] Figure 9 This is a schematic diagram showing the query results provided in this public disclosure;

[0035] Figure 10 This is a schematic diagram showing the detailed information of the component corresponding to the second component diagram provided in this disclosure;

[0036] Figure 11 This is a flowchart of the method for querying the component image database from the server, which is publicly available.

[0037] Figure 12 This is a flowchart provided in this publication for generating page files based on the updated content of the aforementioned components;

[0038] Figure 13 This is a schematic diagram showing the display effect of the page file provided in this public document;

[0039] Figure 14 This is a flowchart provided in this publication showing how to take a screenshot of a page file that meets the aforementioned preset conditions to obtain the screenshot result;

[0040] Figure 15 This is a publicly available flowchart showing the interaction between the various logical components that participate in updating the component effect diagram database;

[0041] Figure 16 This is a flowchart of the method for the query component provided in this public document on the product side.

[0042] Figure 17 This is a block diagram of the query component provided in this disclosure;

[0043] Figure 18 This is a device block diagram of another query component provided in this disclosure;

[0044] Figure 19 This is a schematic diagram of the hardware structure of a device for implementing the method provided in the embodiments of this disclosure. Detailed Implementation

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

[0046] It should be noted that the terms "first," "second," etc., in the specification, claims, and accompanying drawings of this invention are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of the invention described herein can be implemented in orders other than those illustrated or described herein. Furthermore, the terms "comprising" and "having," and any variations thereof, are intended to cover non-exclusive inclusion; for example, a process, method, system, product, or server that comprises a series of steps or units is not necessarily limited to those steps or units explicitly listed, but may include other steps or units not explicitly listed or inherent to such processes, methods, products, or devices.

[0047] To make the objectives, technical solutions, and advantages of the embodiments disclosed herein clearer, the embodiments of this disclosure will be further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are merely illustrative of the embodiments of this disclosure and are not intended to limit the scope of this disclosure.

[0048] Hereinafter, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of indicated technical features. Therefore, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this embodiment, unless otherwise stated, "multiple" means two or more. To facilitate understanding of the above-described technical solutions and their resulting technical effects, this disclosure first explains the relevant technical terms:

[0049] OpenCV is a cross-platform computer vision and machine learning software library that can run on Linux, Windows, Android, and Mac OS operating systems. It is lightweight and efficient, and provides interfaces for languages ​​such as Python, Ruby, and MATLAB, implementing many common algorithms in image processing and computer vision.

[0050] PixelMatch: A tool for comparing differences in image content pixel by pixel.

[0051] Please refer to Figure 1 This diagram illustrates the query results for retrieving components using text retrieval in related technologies. The options under "Components" represent the names of the retrieved components, which users can click to obtain the results. In related technologies, users are typically required to enter the component name or descriptive phrase to perform a component search. This component name or descriptive phrase is referred to as the search text. This text-based retrieval method places high demands on the user, and the query results are significantly influenced by the search text. Incorrect search text may result in the user not finding the desired component; inaccurate search text may lead to a large number of results, causing users to spend considerable time filtering the results.

[0052] The component query method disclosed in this disclosure obtains a first component image by acquiring an image of the component's implementation effect on the design draft page. It then finds a second component image similar to this first component image and uses the component corresponding to the second component image as the query result. This quickly locates components whose rendering effect matches the design draft, eliminating the need for users to input component-related search text, thus reducing the difficulty of component querying. Furthermore, because no user input of search text is required, it avoids the situation where incorrect or inaccurate search text leads to query results that do not meet user expectations, which often occurs with text-based search methods. Therefore, the component query method in this disclosure has the advantage of high retrieval accuracy.

[0053] Please see Figure 2 , Figure 2This is a schematic diagram illustrating a feasible implementation framework for a query component method provided in this disclosure, such as... Figure 2 As shown, the implementation framework may include at least a component query client 01 and a component query server 02.

[0054] The component query client 01 can run an application for querying components or access a webpage for querying components. The component query client 01 can obtain a first component image, which is an image representing the component's implementation effect on the design draft page. Based on the first component image, it generates a component query request and sends the request to the component query server to obtain the component query results; and it also renders the component query results. The component query client 01 can also display detailed information about the components in the component query results.

[0055] Specifically, the aforementioned component query client 01 may include various physical devices with communication and display capabilities, such as smartphones, desktop computers, tablets, laptops, digital assistants, and smart wearable devices, and may also include software running on these physical devices. Specifically, the aforementioned component query client 01 can communicate with the component query server 02 to provide component query services to users.

[0056] Multiple services can be deployed on the aforementioned component query server 02, such as image storage services that support image storage, image search services that support image search, screenshot services that take screenshots of pages, and code repositories that manage component code. This disclosure does not limit the business and corresponding logic modules in the component query server 02.

[0057] Specifically, the component query server 02 mentioned above may include a standalone server, a distributed server, or a server cluster consisting of multiple servers. The component query server 02 may include a network communication unit, a processor, and memory, etc.

[0058] In this disclosure, the data in component query server 02 can be stored in a blockchain. Blockchain is a novel application model of computer technologies such as distributed data storage, peer-to-peer transmission, consensus mechanisms, and cryptographic algorithms. Essentially, a blockchain is a decentralized database, a chain of data blocks linked using cryptographic methods. Each data block contains information about a batch of network transactions, used to verify the validity of the information (anti-counterfeiting) and generate the next block.

[0059] Taking a distributed system as an example, see blockchain system. Figure 3 , Figure 3This is an optional structural diagram of the distributed system 100 provided in this embodiment of the invention applied to a blockchain system. It consists of multiple nodes (any form of computing device in the network, such as servers or user terminals) and clients, forming a peer-to-peer (P2P) network. The P2P protocol is an application layer protocol running on top of the Transmission Control Protocol (TCP). In the distributed system, any machine, such as a server or terminal, can join and become a node. A node includes a hardware layer, a middleware layer, an operating system layer, and an application layer.

[0060] See Figure 3 The functions of each node in the blockchain system shown include:

[0061] 1) Routing: A basic function of nodes used to support communication between nodes.

[0062] In addition to routing capabilities, nodes can also have the following functions:

[0063] 2) Applications are deployed in the blockchain to implement specific business needs. They record data related to the implementation of functions to form record data, carry digital signatures in the record data to indicate the source of the task data, and send the record data to other nodes in the blockchain system. When other nodes successfully verify the source and integrity of the record data, they add the record data to a temporary block.

[0064] 3) A blockchain consists of a series of blocks that are sequentially generated. Once a new block is added to the blockchain, it will not be removed. The blocks contain the data submitted by the nodes in the blockchain system.

[0065] The following describes a method for querying components disclosed herein. Figure 4 This illustration shows a flowchart of a method for querying a component according to an embodiment of this disclosure. This disclosure provides the method operation steps described in the embodiments or flowcharts, but based on conventional or non-inventive labor, more or fewer operation steps may be included. The order of steps listed in the embodiments is merely one possible execution order among many steps and does not represent the only possible execution order. In actual system or server product execution, the method can be executed sequentially according to the embodiments or drawings, or in parallel (e.g., in a parallel processor or multi-threaded processing environment). Figure 4 The method shown takes a component query client and a component query server as its implementation entities, and the method may include:

[0066] S101. The component query client obtains the first component image, which is an image representing the implementation effect of the component on the design draft page.

[0067] In this disclosure, the first component diagram can be obtained from the design draft, and the effect diagram of the component in the design draft can be taken as the aforementioned first component diagram.

[0068] S102. The component query client generates a component query request based on the first component diagram and sends the component query request to the component query server.

[0069] S103. The component query server obtains the component query request sent by the component query client, and obtains the component query result according to the component query request; the component query result is used to record at least one second component graph whose content similarity with the first component graph is higher than a preset first threshold, and the similarity corresponding to each second component graph, wherein the similarity is the similarity between the second component graph and the first component graph.

[0070] A component query client can obtain component query results by sending a component query request to a component query server. In one embodiment, the component query server may include a component platform service, an image search service, and an image storage service. The component platform service can be used to interact with the query client and provide query results; the image storage service can be used to store image resources; and the image search service can be used to search for images similar to the input image from the image resources. Specifically, such as... Figure 5 As shown, it illustrates the interactive flowchart for obtaining component query results based on the aforementioned component query request, including:

[0071] S1031. The component platform service uploads the first component image to the image storage service and obtains the first storage path corresponding to the first component image from the image storage service.

[0072] S1032. The aforementioned component platform service requests the image search service based on the aforementioned first storage path.

[0073] S1033. The above-mentioned image search service accesses the above-mentioned image storage service based on the above-mentioned first storage path to obtain the first image to be compared.

[0074] S1034. The above image search service obtains the second storage paths corresponding to the component effect images in the component effect image database.

[0075] S1035. The above image search service accesses the above image storage service based on the above-mentioned second storage paths to obtain the above-mentioned second images to be compared.

[0076] In this disclosure, the component platform uploads the first storage path to the image search service, and the component effect image database also feeds back the second storage paths corresponding to each component effect image to the image search service. After obtaining the first and second storage paths, the image search service can request images from the image storage service, thereby obtaining the first and second comparison images. By dividing the service into different parts, each logical module in the server can perform its own function, which has the advantages of low coupling and high encapsulation.

[0077] In one embodiment, if the component mockup database stores the addresses of the original mockups and compressed mockups corresponding to the component mockups, the second storage path can be the path of the compressed mockup corresponding to the component mockup to improve query efficiency. That is, obtaining the second storage paths corresponding to each component mockup in the component mockup database includes: obtaining the paths of the compressed mockups corresponding to each component mockup in the component mockup database, and using the paths of the compressed mockups corresponding to each component mockup as the second storage paths corresponding to each component mockup.

[0078] The compressed image has a smaller data volume, and the image search service can obtain the compressed image quickly. The compressed image has the same effect as the original image, but it can significantly shorten the time spent in step S1035.

[0079] S1036. The image search service generates and feeds back the component query results to the component platform service based on the first image to be compared and the various second images to be compared.

[0080] Specifically, such as Figure 6 As shown, it illustrates a flowchart of how the image search service generates and feeds back the component query results to the component platform service based on the first image to be compared and the various second images to be compared, including:

[0081] S10361. Compare the content similarity between each of the above-mentioned second comparison images and the above-mentioned first comparison images one by one to obtain the similarity corresponding to each of the above-mentioned second comparison images.

[0082] Specifically, the image search service in this disclosure can compare content similarity based on the functions provided by OpenCV, and this disclosure does not limit the specific method for comparing content similarity.

[0083] S10362. The second image to be compared, with a similarity greater than a preset first threshold, is identified as the target image.

[0084] S10363. Based on each target image and the similarity to the aforementioned target images, generate and feed back the component query results to the aforementioned component platform service.

[0085] S1037. The above component platform service provides feedback on the component query results to the component query client.

[0086] In one embodiment, to improve query speed, the images in the component query results returned by the image search service to the component platform service, and the images in the component query results returned by the component platform service to the component query client, can be in the form of compressed images.

[0087] S104. Send the query results of the above components to the above query client.

[0088] S105. The client displays the query results for the above components.

[0089] In this disclosure, the query results of the aforementioned components may include 0 query results, 1 query result, or multiple query results. 0 query results can also be referred to as an empty component query result.

[0090] In one embodiment, the client displays the query results for the aforementioned component, such as... Figure 7 As shown, it includes:

[0091] S1051. If the query result of the above component is empty, the query client of the above component shall output a text indicating that the query result is empty.

[0092] Specifically, the text indicating an empty query result can be "No relevant component found", and this disclosure does not restrict the text indicating an empty query result.

[0093] S1052. If the above component query result is not empty, render at least one of the above second component graphs and display the similarity corresponding to each of the above second component graphs; in response to the triggering instruction for any of the above second component graphs, display the detailed information of the component corresponding to the above second component graph.

[0094] In one embodiment, such as Figure 8 As shown, it illustrates a flowchart of rendering at least one of the aforementioned second component graphs and displaying the similarity corresponding to each of the aforementioned second component graphs, including:

[0095] S10521. For any of the above-mentioned second component graphs, generate a query result record based on the above-mentioned second component graph and the similarity to the above-mentioned second component graph.

[0096] S10522. Generate a list of query results based on each query result record.

[0097] S10523. Render the list of query results above.

[0098] In one embodiment, the query results list can be displayed item by item; please refer to [reference needed]. Figure 9 The diagram shows the query results, with each image in the query results displaying its similarity to the first component image.

[0099] In this embodiment of the disclosure, when a user selects a record in the query results display list, a trigger instruction for the second component diagram in that record can be generated. In response to the trigger instruction, detailed information of the component corresponding to the second component diagram can be displayed.

[0100] The detailed information of the component corresponding to the second component diagram mentioned above includes the component's invocation method and detailed entry point. Correspondingly, displaying the detailed information of the component corresponding to the second component diagram may include: displaying the invocation method of the component corresponding to the second component diagram, wherein the invocation method includes a set of invocation parameters, and the invocation parameter set is used to enable the component running based on the invocation parameter set to display the same effect as described above. Figure 1 The rendering effect is consistent; the detailed entry point of the component is displayed, which is used to jump to the component details page of the component corresponding to the second component diagram above.

[0101] In one embodiment, the detailed information of the component corresponding to the second component diagram may further include a rendered image of the second component diagram, which may be the original image or a compressed image of the second component diagram. Please refer to [link / reference]. Figure 10 This is a schematic diagram showing the detailed information of the component corresponding to the second component diagram. Figure 10 The content selected in the left box is the set of call parameters corresponding to the second component diagram above, and the content selected in the right box is the component's detailed entry point. By clicking on this component's detailed entry point, you can jump to the component's detailed introduction page.

[0102] The component query method disclosed herein relies on the support of a component mockup database. This disclosure further illustrates a method for updating the component mockup database using a component query server. Please refer to... Figure 11 It shows a flowchart of the method for querying the server to update the component mockup database, including:

[0103] S201. In response to the first trigger command, obtain the component update content.

[0104] In this embodiment, the first triggering instruction can be triggered by the developer. Each time the developer performs component development (including adding or changing components), they need to transfer the corresponding code and the call parameter configuration file to the component repository. In this disclosure, the component update content can be obtained based on the code and the call parameter configuration file. In this disclosure, the component repository can also be considered a logical module of the component query server or a deployed service.

[0105] When a developer triggers the upload of the code and the configuration file for the call parameters, the component repository can capture this initial trigger. The component repository can then obtain a list of updated files, filter the list to select the code and configuration files related to component development, and generate the component update content.

[0106] S202. Based on the above component update content, generate a page file, which includes all the effect diagrams corresponding to each component in the above component update content.

[0107] After capturing the first trigger command, the component repository can also generate page files based on the aforementioned component update content, such as... Figure 12 As shown, it includes:

[0108] S2021. For any one of the components in the above component update content, obtain the component call parameter configuration file corresponding to the above component.

[0109] S2022. Generate a set of call parameters based on all parameters in the above-mentioned call parameter configuration file. The above-mentioned set of call parameters is a set formed by all executable call parameter items.

[0110] The parameter configuration file in this disclosure may include required and optional parameters, and the aforementioned parameter set exhaustively includes all executable parameter sets. In this disclosure, a single parameter set encapsulates all parameter information required by the component for a given runtime condition. An executable parameter set necessarily includes required parameters.

[0111] For example, if the content of the call parameter configuration file is A1=123, B1=456, C1=bide; and A1 and B1 are required options, then the complete set of executable call parameter items is {A1=123, B1=456, C1=bide} and {A1=123, B1=456}.

[0112] S2023. For each set of call parameters in the above set of call parameters, render the component effect diagram corresponding to each set of call parameters.

[0113] S2024. Generate page files based on the rendered images of all components.

[0114] This disclosure describes how to generate a webpage based on the rendered component mockup, package the webpage, and generate a standalone executable browser page file. For example... Figure 13 As shown, it illustrates the display effect of the page file. Figure 13 Each render in the document uniquely corresponds to a set of call parameters for a component.

[0115] S203. In response to the second trigger instruction, obtain a page file that meets preset conditions, wherein the preset conditions are that the generation time of the page file is before the trigger time of the second trigger instruction and after the trigger time of the previous second trigger instruction.

[0116] In this embodiment of the disclosure, the second triggering instruction can also be triggered by the developer.

[0117] In one embodiment, the component repository can provide developers with two development branches. When a developer triggers a code upload command on a non-control branch (non-master branch), a first trigger command can be generated; when a developer triggers a code upload command on a control branch, a second trigger command can be generated.

[0118] S204. Take a screenshot of the page file that meets the preset conditions to obtain the screenshot result.

[0119] Once the second trigger command is captured by the component repository, the component repository can send the obtained page file to the page file processing service. In this disclosure, the page file processing service can also be considered a logical module or a deployed service of the component query server. The page file processing service can request a screenshot service to take a screenshot of the page file that meets the preset conditions, and obtain the screenshot result returned by the screenshot service. The screenshot service can also be considered a logical module or a deployed service of the component query server.

[0120] Specifically, when a screenshot service is requested, the aforementioned page file processing service transmits the relevant information of the components in the aforementioned page file and the access path of the aforementioned page file to the aforementioned screenshot service.

[0121] Specifically, such as Figure 14 As shown, the screenshots obtained by taking screenshots of the page files that meet the preset conditions include:

[0122] S2041. Take screenshots of the effect images of each component in the above page files and save them to obtain the original effect image corresponding to each component effect image.

[0123] Before the screenshots of each component in the aforementioned page file are saved separately, the screenshot service can access the aforementioned page file using the headless browser Puppeteer.

[0124] S2042. Perform deduplication on all original effect images to obtain a set of deduplicated effect images, such that the similarity between any two original effect images in the set is less than a preset second threshold.

[0125] In one embodiment, PixelMatch can be used to calculate the similarity between two original effect images. This disclosure does not limit the method for calculating the similarity between original effect images.

[0126] S2043. Upload each original image from the above deduplicated effect image set to the image storage service to obtain the storage address corresponding to each original image.

[0127] In one embodiment, to improve query efficiency, each original image in the deduplicated set of effect images can be compressed to obtain a compressed image corresponding to each component effect image; the original image and compressed image corresponding to each component effect image in the deduplicated set of effect images are uploaded to the image storage service to obtain the storage address of the original image corresponding to each component effect image and the storage address of the compressed image corresponding to each component effect image.

[0128] S205. Update the component effect image database based on the screenshot results above.

[0129] The screenshot service described above can also update the component effect image database based on the screenshot results. Specifically, in one embodiment, the storage addresses corresponding to the original effect images can be uploaded to the component effect image database. In another embodiment, the storage addresses of the original effect images corresponding to each component effect image, as well as the storage addresses of the compressed images corresponding to each component effect image, can both be stored in the component effect image database.

[0130] In one embodiment, to ensure that each set of calling parameters uniquely corresponds to a component rendering (original rendering and / or compressed rendering) in the above component rendering database, step S205 may further include: if there is an address corresponding to a target component rendering in the above component rendering, then delete the address corresponding to the target component rendering; the target component rendering has the same set of calling parameters as a component rendering in the above deduplicated rendering set.

[0131] like Figure 15 The diagram illustrates the interaction flowchart between the various logical components involved in updating the component mockup database in this embodiment of the present disclosure. The component repository obtains the user's trigger command, sends the page file to the page file processing service, which then requests a screenshot service based on the page file. The screenshot service takes a screenshot of the page file, ultimately obtaining all available component mockups corresponding to the component update content. These mockups are then stored in the file storage service, and their addresses in the file storage service are updated in the component mockup database. Figure 15 The detailed process of each step is explained above and will not be repeated here.

[0132] This disclosure illustrates a method for querying components, such as Figure 16 As shown, it can generate corresponding component mockups for components developed by developers. Based on the implementation effect on the design draft page, it can query the component mockups of the developed components and provide feedback on the query results. This allows users to directly see component mockups that are similar to the implementation effect on the design draft page in the query results, thus intuitively and quickly locating components that meet the design draft requirements.

[0133] This disclosure also discloses an apparatus for querying components, such as... Figure 17 As shown, the above-mentioned device includes:

[0134] The first component image acquisition module 101 is used to acquire the first component image, which is an image representing the implementation effect of the component on the design draft page.

[0135] The first query module 102 is used to generate a component query request based on the first component graph and send the component query request to the component query server to obtain the component query result; the component query result is used to record at least one second component graph whose content similarity with the first component graph is higher than a preset first threshold, and the similarity corresponding to each second component graph, wherein the similarity is the similarity between the second component graph and the first component graph.

[0136] The rendering module 103 is used to render at least one second component graph and display the similarity corresponding to each second component graph if the query result of the above component is not empty.

[0137] The detailed information display module 104 is used to display detailed information of the component corresponding to any of the above-mentioned second component diagrams in response to a trigger command.

[0138] Specifically, the apparatus for querying a component disclosed in this disclosure and the corresponding method embodiments described above are both based on the same inventive concept. For details, please refer to the method embodiments, which will not be repeated here.

[0139] This disclosure also discloses another apparatus for querying components, such as... Figure 18 As shown, the above-mentioned device includes:

[0140] The component query request acquisition module 201 is used to acquire the component query request sent by the component query client. The component query request includes a first component image, which is an image representing the implementation effect of the component on the design draft page.

[0141] The second query module 202 is used to obtain component query results according to the component query request. The component query results are used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image. The similarity is the similarity between the second component image and the first component image.

[0142] The component query result feedback module 203 is used to send the component query result to the component query client to trigger the query client to render at least one second component graph and display the similarity corresponding to each second component graph when the component query result is not empty; and to trigger the query client to display the detailed information of the component corresponding to any of the second component graphs in response to the triggering instruction for any of the second component graphs.

[0143] Specifically, the apparatus for querying a component disclosed in this disclosure and the corresponding method embodiments described above are both based on the same inventive concept. For details, please refer to the method embodiments, which will not be repeated here.

[0144] This disclosure also provides a computer program product or computer program that includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the method of a query component described above.

[0145] This disclosure also provides a computer-readable storage medium that can store multiple instructions. These instructions are adaptable for a processor to load and execute a method for querying a component as described in this disclosure.

[0146] Furthermore, Figure 19 A schematic diagram of a hardware structure for implementing the methods provided in the embodiments of this disclosure is shown. This device may constitute or include the apparatus provided in the embodiments of this disclosure. Figure 19 As shown, device 10 may include one or more processors 102 (shown as 102a, 102b, ..., 102n in the figure) 102 (processor 102 may include, but is not limited to, a microprocessor MCU or a programmable logic device FPGA, etc.), a memory 104 for storing data, and a transmission device 106 for communication functions. In addition, it may also include: a display, an input / output interface (I / O interface), a universal serial bus (USB) port (which may be included as one of the ports of the I / O interface), a network interface, a power supply, and / or a camera. Those skilled in the art will understand that... Figure 19The structure shown is for illustrative purposes only and does not limit the structure of the electronic device described above. For example, device 10 may also include a... Figure 19 The more or fewer components shown, or having the same Figure 19 The different configurations shown.

[0147] It should be noted that the aforementioned one or more processors 102 and / or other data processing circuitry are generally referred to herein as "data processing circuitry". This data processing circuitry may be embodied, in whole or in part, in software, hardware, firmware, or any other combination thereof. Furthermore, the data processing circuitry may be a single, independent processing module, or may be integrated, in whole or in part, into any other element within device 10 (or mobile device). As involved in embodiments of this disclosure, the data processing circuitry serves as a processor control mechanism (e.g., selection of a variable resistor termination path connected to an interface).

[0148] The memory 104 can be used to store software programs and modules of application software, such as the program instructions / data storage device corresponding to the method described in the embodiments of this disclosure. The processor 102 executes various functional applications and data processing by running the software programs and modules stored in the memory 104, thereby implementing the above-described method for querying components. The memory 104 may include high-speed random access memory, and may also include non-volatile memory, such as one or more magnetic storage devices, flash memory, or other non-volatile solid-state memory. In some instances, the memory 104 may further include memory remotely located relative to the processor 102, and these remote memories can be connected to the device 10 via a network. Examples of such networks include, but are not limited to, the Internet, corporate intranets, local area networks, mobile communication networks, and combinations thereof.

[0149] The transmission device 106 is used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of device 10. In one example, the transmission device 106 includes a Network Interface Controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In another example, the transmission device 106 may be a radio frequency (RF) module used for wireless communication with the Internet.

[0150] The display may be, for example, a touchscreen liquid crystal display (LCD) that allows a user to interact with the user interface of device 10 (or a mobile device).

[0151] It should be noted that the order of the embodiments described above is merely for descriptive purposes and does not represent the superiority or inferiority of the embodiments. Furthermore, specific embodiments of this disclosure have been described above. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recorded in the claims can be performed in a different order than that shown in the embodiments and still achieve the desired results. Additionally, the processes depicted in the drawings do not necessarily require a specific or sequential order to achieve the desired results. In some implementations, multitasking and parallel processing are also possible or may be advantageous.

[0152] The various embodiments in this disclosure are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, the device and server embodiments are basically similar to the method embodiments, so the descriptions are relatively simple; relevant parts can be referred to the descriptions of the method embodiments.

[0153] Those skilled in the art will understand that all or part of the steps of the above embodiments can be implemented by hardware or by a program instructing related hardware. The program can be stored in a computer-readable storage medium, such as a read-only memory, a disk, or an optical disk.

[0154] The above description is merely a preferred embodiment of this disclosure and is not intended to limit the present invention. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of the present invention should be included within the protection scope of the present invention.

Claims

1. A method for querying components, characterized in that, The method includes: Obtain the first component image, which is an image representing the implementation effect of the component on the design draft page; A component query request is generated based on the first component image, and the component query request is sent to the component query server to obtain the component query result by querying the component effect image database; the component query result is used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image, wherein the similarity is the similarity between the second component image and the first component image; If the component query result is not empty, then render the at least one second component graph and display the similarity corresponding to each second component graph; In response to a trigger command on any of the second component graphs, display detailed information about the components corresponding to the second component graphs; The component query server is used to update the component rendering database using the following method: In response to a code upload instruction received by the component repository in a non-controlling branch, a set of call parameters is generated based on all parameters in the component call parameter configuration file corresponding to the component. The set of call parameters is a collection of all executable call parameter items, and each set of call parameter items summarizes all parameter information required by the component in a certain running condition. For each set of call parameter items, the corresponding component mockup is rendered. Based on the rendered component mockups, a page file is generated. In response to the component repository receiving a code upload instruction in the control branch, the system retrieves page files that have not yet been processed after receiving the code upload instruction in a non-control branch, takes a screenshot of the page file and removes duplicates to obtain a screenshot result; and updates the component mockup database based on the screenshot result.

2. A method for querying components, characterized in that, The method includes: Obtain a component query request sent by the component query client, wherein the component query request includes a first component image, which is an image representing the implementation effect of the component on the design draft page; The component query request is used to query the component image database to obtain the component query results; the component query results are used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image, wherein the similarity is the similarity between the second component image and the first component image; The method further includes sending the component query result to the component query client to trigger the query client to render the at least one second component graph and display the similarity corresponding to each second component graph when the component query result is not empty; and triggering the query client to display the detailed information of the component corresponding to any second component graph in response to the trigger command for any second component graph; the method further includes: In response to a code upload instruction received by the component repository in a non-controlling branch, a set of call parameters is generated based on all parameters in the component call parameter configuration file corresponding to the component. The set of call parameters is a collection of all executable call parameter items, and each set of call parameter items summarizes all parameter information required by the component in a certain running condition. For each set of call parameter items, the corresponding component mockup is rendered. Based on the rendered component mockups, a page file is generated. In response to the component repository receiving a code upload instruction in the control branch, the system retrieves page files that have not yet been processed after receiving the code upload instruction in a non-control branch, takes a screenshot of the page file and removes duplicates to obtain a screenshot result; and updates the component mockup database based on the screenshot result.

3. The method according to claim 2, characterized in that, The step of querying the component mockup database according to the component query request to obtain the component query results includes: Upload the first component image to the image storage service and obtain the first storage path corresponding to the first component image returned by the image storage service. Access the image storage service based on the first storage path to obtain the first image to be compared; Retrieve the secondary storage paths corresponding to the component mockups in the component mockup database; Access the image storage service based on each of the second storage paths to obtain each of the second comparison images; Based on the first image to be compared and each of the second images to be compared, the component query results are generated and returned.

4. The method according to claim 2, characterized in that, The step of taking a screenshot of the page file and removing duplicates to obtain the screenshot result includes: Take a screenshot of the effect image of each component in the page file and save it to obtain the original effect image corresponding to each component effect image; All original effect images are deduplicated to obtain a set of deduplicated effect images, such that the similarity between any two original effect images in the set is less than a preset second threshold. Upload each original image in the deduplicated effect image set to the image storage service to obtain the storage address corresponding to each original image. The step of updating the component effect image database based on the screenshot results includes: Upload the storage address corresponding to each original effect image to the component effect image database.

5. An apparatus for a query component, characterized in that, The device includes: The first component image acquisition module is used to acquire the first component image, which is an image representing the implementation effect of the component on the design draft page; The first query module is used to generate a component query request based on the first component image, and send the component query request to the component query server to obtain the component query result by querying the component image database; the component query result is used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image, wherein the similarity is the similarity between the second component image and the first component image; The rendering module is used to render the at least one second component graph and display the similarity corresponding to each second component graph if the component query result is not empty. The detailed information display module is used to display detailed information of the component corresponding to any of the second component diagrams in response to a trigger command. The component query server is used to update the component rendering database using the following method: In response to a code upload instruction received by the component repository in a non-controlling branch, a set of call parameters is generated based on all parameters in the component call parameter configuration file corresponding to the component. The set of call parameters is a collection of all executable call parameter items, and each set of call parameter items summarizes all parameter information required by the component in a certain running condition. For each set of call parameter items, the corresponding component mockup is rendered. Based on the rendered component mockups, a page file is generated. In response to the component repository receiving a code upload instruction in the control branch, the system retrieves page files that have not yet been processed after receiving the code upload instruction in a non-control branch, takes a screenshot of the page file and removes duplicates to obtain a screenshot result; and updates the component mockup database based on the screenshot result.

6. An apparatus for a query component, characterized in that, The device includes: The component query request acquisition module is used to acquire the component query request sent by the component query client. The component query request includes a first component image, which is an image representing the implementation effect of the component on the design draft page. The second query module is used to query the component image database according to the component query request to obtain the component query result; the component query result is used to record at least one second component image whose content similarity with the first component image is higher than a preset first threshold, and the similarity corresponding to each second component image, wherein the similarity is the similarity between the second component image and the first component image; The component query result feedback module is used to send the component query result to the component query client to trigger the query client to render the at least one second component graph and display the similarity corresponding to each second component graph when the component query result is not empty; and to trigger the query client to display the detailed information of the component corresponding to the second component graph in response to the trigger command for any second component graph. The device is also used for: In response to a code upload instruction received by the component repository in a non-controlling branch, a set of call parameters is generated based on all parameters in the component call parameter configuration file corresponding to the component. The set of call parameters is a collection of all executable call parameter items, and each set of call parameter items summarizes all parameter information required by the component in a certain running condition. For each set of call parameter items, the corresponding component mockup is rendered. Based on the rendered component mockups, a page file is generated. In response to the component repository receiving a code upload instruction in the control branch, the system retrieves page files that have not yet been processed after receiving the code upload instruction in a non-control branch, takes a screenshot of the page file and removes duplicates to obtain a screenshot result; and updates the component mockup database based on the screenshot result.

7. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores at least one instruction, which is loaded and executed by a processor to implement a method of a query component as described in claim 1, or a method of a query component as described in any one of claims 2 to 4.

8. An electronic device, characterized in that, It includes at least one processor and a memory communicatively connected to the at least one processor; wherein the memory stores instructions executable by the at least one processor, and the at least one processor implements a method for a query component as described in claim 1, or a method for a query component as described in any one of claims 2 to 4, by executing the instructions stored in the memory.

9. A computer program product, characterized in that, The computer program product includes computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform a method of a query component as described in claim 1, or a method of a query component as described in any one of claims 2 to 4.

Images