Method and device for generating front-end code based on picture, equipment and medium

Abstract

The invention belongs to the technical field of front-end development, and discloses a method, device and equipment for generating a front-end code based on a picture and a medium, and the method comprises the following steps: obtaining a background table page graph; the background table page graph is analyzed based on a preset analysis algorithm, table elements are obtained, and the table elements at least comprise a search bar, an operation bar, a header and cells; obtaining an interface document, and matching the table elements based on the interface document to obtain a matching result; and inputting the matching result into a preset code function to generate a front-end code. According to the method, the development process of the table page of the background system is obviously optimized, the page design drawing can be automatically identified, the data request logic and the front-end code are intelligently generated, and deep integration with a project framework is realized. Developers only need to focus on processing complex business logic, so that the development efficiency and the availability of projects are greatly improved.

Description

Technical Field

[0001] The present invention belongs to the technical field of front-end development, and specifically relates to a method, device, equipment and medium for generating front-end code based on an image. Background Art

[0002] Although current image generation technology can efficiently generate HTML and CSS codes, providing convenience for the rapid construction of front-end interfaces, its limitations are becoming increasingly prominent.

[0003] Specifically, this type of technology often focuses on the automated output of static visual content, but ignores the core links of interactive logic construction and dynamic data request processing, which are crucial in modern Web development. This results in developers still having to manually intervene after obtaining a preliminary visual framework, investing a lot of time and energy in subsequent work such as writing JavaScript logic, setting up API interface calls, and processing data binding, which greatly reduces development efficiency and the overall usability of the project.

[0004] In addition, since this technology has not been deeply integrated into the entire life cycle of project development, there is an obvious gap in the conversion process from design to implementation, which increases communication costs and maintenance difficulties. Summary of the invention

[0005] The purpose of the present invention is to provide a method, device, equipment and medium for generating front-end code based on images, so as to solve the problems of low development efficiency, maintenance difficulty and high communication cost existing in the prior art.

[0006] In order to achieve the above object, the present invention adopts the following technical solutions: In a first aspect, the present invention provides a method for generating front-end code based on an image, the method comprising: Get the background table page image; Parse the background table page image based on a preset parsing algorithm to obtain table elements, wherein the table elements at least include: a search bar, an operation bar, a table header, and a cell; Obtain the interface document, match the table elements based on the interface document, and obtain the matching results; Input the matching results into the preset code function to generate the front-end code.

[0007] Preferably, the preset parsing algorithm is an OCR algorithm.

[0008] Preferably, the background table page image is parsed based on a preset parsing algorithm to obtain table elements, including: Based on the OCR algorithm, characters are extracted from the background table page image to obtain at least one prototype image character and the character coordinates corresponding to at least one prototype image character; The text coordinates corresponding to at least one prototype image text are used to perform column layout on at least one prototype image text to obtain a table layout; Determines table elements based on table layout.

[0009] Preferably, the interface document includes: a request body and a response body, the request body includes: a plurality of request fields, and the response body includes: a plurality of response fields.

[0010] Preferably, the table elements are matched based on the interface document to obtain matching results, including: Calculate the similarity between the text in the table element and the interface field of the interface document, where the interface field of the interface document is: multiple request fields or multiple response fields; When the similarity between any text in a table element and an interface field in an interface document exceeds a preset value, a mapping relationship between the text in the table element and the interface field in the interface document is established, and the mapping relationship between the text in the table element and the interface field in the interface document is used as the matching result.

[0011] Preferably, the preset code functions include: a search bar code generation function, an operation bar code generation function, a header code generation function, a cell code generation function and a page code generation function.

[0012] Preferably, the matching result is input into a preset code function to generate a front-end code, including: Based on the mapping relationship between the text in the search bar and the interface field of the corresponding interface document, a search bar code generation function is used to generate the search bar code; Based on the mapping relationship between the text in the operation bar and the interface field of the corresponding interface document, the operation bar code is generated by using the operation bar code generation function; Based on the mapping relationship between the text in the table header and the interface field of the corresponding interface document, a table header code generation function is used to generate the table header code; Based on the mapping relationship between the text in the cell and the interface field of the corresponding interface document, a cell code generation function is used to generate a cell column code; Based on the page module, the search bar code, the operation bar code, the header code and the cell bar code are used as inputs of the page code generation function, and the page code is generated by the page code generation function.

[0013] In a second aspect, the present invention provides a device for generating front-end code based on an image, which is used to implement the above-mentioned method for generating front-end code based on an image, and the device includes: Image acquisition module, used to obtain background table page images; An image parsing module is used to parse the background table page image based on a preset parsing algorithm to obtain table elements, wherein the table elements at least include: a search bar, an operation bar, a table header, and a cell; The data matching module is used to obtain the interface document, match the table elements based on the interface document, and obtain the matching results; The code generation module is used to input the matching results into the preset code function to generate the front-end code.

[0014] In a third aspect, the present invention provides an electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the above-mentioned method of generating front-end code based on images when executing the computer program.

[0015] In a fourth aspect, the present invention provides a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the above-mentioned method of generating front-end code based on an image.

[0016] Beneficial effects: 1. The front-end code generation method of the present invention significantly optimizes the development process of the back-end system table page, can automatically identify the page design diagram, intelligently generate data request logic and front-end code, and achieves deep integration with the project framework; 2. Developers only need to focus on processing complex business logic, which greatly improves development efficiency and project availability. BRIEF DESCRIPTION OF THE DRAWINGS

[0017] The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following specific embodiments, they are used to explain the embodiments of the present invention, but do not constitute a limitation on the embodiments of the present invention. In the accompanying drawings: Figure 1 It is a flowchart of a method for generating front-end code based on an image provided by an embodiment of the present invention; Figure 2 It is a block diagram of a device for generating front-end code based on an image provided by an embodiment of the present invention. DETAILED DESCRIPTION

[0018] In order to more clearly illustrate the technical solutions in the embodiments of the present invention or the prior art, the present invention will be briefly introduced below in combination with the drawings and the description of the embodiments or the prior art. Obviously, the following description of the structure of the drawings is only some embodiments of the present invention. For ordinary technicians in this field, other drawings can be obtained based on these drawings without creative work. It should be noted that the description of these embodiments is used to help understand the present invention, but does not constitute a limitation of the present invention.

[0019] Embodiment 1 Figure 1 is a flowchart of a method for generating front-end code based on an image provided by an embodiment of the present invention, such as Figure 1 As shown, this embodiment provides a method for generating front-end code based on an image, the method comprising: Step S10: Get the background table page map.

[0020] In this embodiment, the screenshot tool provided by the operating system, third-party screenshot software, development tools, etc. can be used to capture the background table page image, and the relevant background table page image can be obtained.

[0021] Step S20: parsing the background table page image based on a preset parsing algorithm to obtain table elements, which at least include: a search bar, an operation bar, a table header and a cell.

[0022] In this embodiment, the preset parsing algorithm preferably adopts an OCR (Optical Character Recognition) algorithm. The OCR algorithm can quickly convert a large number of background table page images into electronic documents, which is much faster than manual input, thereby significantly improving the efficiency of data processing.

[0023] As a further optimization of this embodiment, the background table page image is parsed based on a preset parsing algorithm to obtain table elements, including: Step S201: extract characters from the background table page image based on the OCR algorithm to obtain at least one prototype image character and the character coordinates corresponding to at least one prototype image character; wherein the specific extraction steps of the OCR algorithm are: 1. Preprocess the background table page image. The preprocessing mainly includes: Grayscale: Convert color images into grayscale images to simplify subsequent processing; Binarization: Convert grayscale images into black and white images to make text more clearly recognized; Noise removal: remove noise from images to improve text readability; Tilt correction: If the text in the image is tilted, it needs to be corrected to a horizontal state; Layout analysis: Identify text areas in images and distinguish different elements (such as text, images, tables, etc.).

[0024] 2. Text segmentation: further segment the text area into individual characters or words, for example: Character segmentation: split a text line into individual characters; Word segmentation: Based on character segmentation, characters are combined into words.

[0025] 3. Feature extraction: Extract features from the segmented characters, which will be used in the recognition process. Features may include the shape, stroke direction, connectivity, etc. of the characters.

[0026] 4. Character recognition: Use machine learning models or deep learning models to identify the extracted features and map them to the corresponding characters. This step can use the following algorithms: Template matching: compare the extracted features with pre-stored character templates; Statistical machine learning: classification using algorithms such as support vector machine (SVM), random forest, K nearest neighbor (KNN), etc. Deep learning: Use deep learning models such as convolutional neural networks (CNN), recurrent neural networks (RNN), and long short-term memory networks (LSTM) for recognition.

[0027] Step S202: The text coordinates corresponding to at least one prototype image text are used to perform column layout on at least one prototype image text to obtain a table layout.

[0028] Step S203: Determine table elements based on the table layout.

[0029] In this embodiment, by finely arranging the text coordinates corresponding to each prototype text, it is convenient to distinguish the table elements, and the search bar, operation bar, header, cell and other areas can be automatically distinguished and extracted. Generally speaking, the background table page generally has several parts such as the advanced filter bar, title bar, table area and paging bar, and the contents of these parts are distributed in the vertical direction of the background table page; among them, the advanced filter bar contains elements such as the search bar and the operation bar, and the title bar and the table area contain elements such as the header and the cell.

[0030] Each prototype text is laid out in columns according to the text coordinates corresponding to each prototype text, and then each row is judged to which column according to the position of the rows in the table layout, and table elements such as search bars, operation bars, table headers and cells can be obtained.

[0031] Step S30: Obtain an interface document, match the table elements based on the interface document, and obtain a matching result.

[0032] In this embodiment, the interface document is a technical document used to describe various interfaces in the software system. It records in detail the interface's functions, parameters, return values, calling methods, error handling and other information, and is an important basis for developers, testers, technical support personnel, etc. to understand and use the interface. The interface document helps improve development efficiency, reduce communication costs, and promote collaboration and cooperation between teams.

[0033] The interface document includes: a request body and a response body, the request body includes: a plurality of request fields, and the response body includes: a plurality of response fields.

[0034] As a further optimization of this embodiment, table elements are matched based on the interface document to obtain matching results, including: Step S301: Calculate the similarity between the text in the table element and the interface field of the interface document, wherein the interface field of the interface document is: multiple request fields or multiple response fields; wherein the cosine similarity function may be used to calculate the similarity between the text in the table element and the interface field of the interface document; Step S302: When the similarity between any text in the table element and the interface field of the interface document exceeds a preset value, a mapping relationship between the text in the table element and the interface field of the interface document is established, and the mapping relationship between the text in the table element and the interface field of the interface document is used as the matching result.

[0035] For example, when matching the search bar, use the text in the search bar to match the request field, and take the request field with the highest similarity; another example: when matching the cells in a table, use the text in the table cell to match the response body field, and take the response body field with the highest similarity. In this case, the matching result is the correspondence between the text and the interface field { name: "field name", apiName: "interface field name"}.

[0036] Step S40: input the matching result into a preset code function to generate a front-end code.

[0037] In this embodiment, the preset code functions include: a search bar code generation function, an operation bar code generation function, a header code generation function, a cell code generation function and a page code generation function.

[0038] As a further optimization of this embodiment, the matching result is input into a preset code function to generate a front-end code, including: Step S401: Based on the mapping relationship between the text in the search bar and the interface field of the corresponding interface document, a search bar code is generated by using a search bar code generation function; Step S402: Based on the mapping relationship between the text of the operation bar and the interface field of the corresponding interface document, the operation bar code is generated by using the operation bar code generation function; Step S403: Based on the mapping relationship between the text in the header and the interface field of the corresponding interface document, a header code is generated using a header code generation function; Step S404: Based on the mapping relationship between the text in the cell and the interface field of the corresponding interface document, a cell code generation function is used to generate a cell column code; Step S405: Based on the page module, the search bar code, the operation bar code, the table header code and the cell bar code are used as inputs of the page code generation function to generate the page code.

[0039] The present invention can generate codes according to page templates, can generate data request logic according to interface documents, automatically bind query fields and cell fields, deeply integrate with projects, and have high availability.

[0040] The OCR recognition technology and automatic code generation mechanism of the present invention significantly optimize the development process of the backend system table page. It can not only automatically recognize the page design diagram, but also intelligently generate data request logic and front-end code according to predefined templates and interface documents, and achieve deep integration with the project framework. In this process, developers only need to focus on processing complex business logic, which greatly improves development efficiency and project availability.

[0041] Embodiment 2 Figure 2 is a block diagram of a device for generating front-end code based on an image provided by an embodiment of the present invention, such as Figure 2 As shown, this embodiment provides a device for generating front-end code based on an image, which is used to implement the method for generating front-end code based on an image in Embodiment 1, and the device includes: Image acquisition module, used to obtain background table page images; An image parsing module is used to parse the background table page image based on a preset parsing algorithm to obtain table elements, wherein the table elements at least include: a search bar, an operation bar, a table header, and a cell; The data matching module is used to obtain the interface document, match the table elements based on the interface document, and obtain the matching results; The code generation module is used to input the matching results into the preset code function to generate the front-end code.

[0042] This embodiment also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor implements the method for generating front-end code based on images of the first embodiment when executing the computer program.

[0043] This embodiment also provides a computer-readable storage medium on which a computer program is stored. When the program is executed by a processor, the method for generating front-end code based on an image in the first embodiment is implemented.

[0044] The OCR recognition technology and automatic code generation mechanism of the present invention significantly optimize the development process of the backend system table page. It can not only automatically recognize the page design diagram, but also intelligently generate data request logic and front-end code according to predefined templates and interface documents, and achieve deep integration with the project framework. In this process, developers only need to focus on processing complex business logic, which greatly improves development efficiency and project availability.

[0045] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Moreover, the present application may adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program codes.

[0046] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to generate a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the processes in the flowchart and / or block diagram. Figure 1 A process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0047] The above are only embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modification, equivalent replacement, improvement, etc. made within the spirit and principle of the present application should be included within the scope of the claims of the present application.

Claims

1. A method for generating front-end code based on an image, characterized in that: The method comprises: Get the background table page image; Parse the background table page image based on a preset parsing algorithm to obtain table elements, wherein the table elements at least include: a search bar, an operation bar, a table header, and a cell; Obtain the interface document, match the table elements based on the interface document, and obtain the matching results; Input the matching results into the preset code function to generate the front-end code.

2. The method for generating front-end code based on an image according to claim 1, characterized in that: The preset parsing algorithm is an OCR algorithm.

3. The method for generating front-end code based on an image according to claim 2, characterized in that: The background table page image is parsed based on the preset parsing algorithm to obtain table elements, including: Based on the OCR algorithm, characters are extracted from the background table page image to obtain at least one prototype image character and the character coordinates corresponding to at least one prototype image character; The text coordinates corresponding to at least one prototype image text are used to perform column layout on at least one prototype image text to obtain a table layout; Determines table elements based on table layout.

4. The method for generating front-end code based on an image according to claim 1, characterized in that: The interface document includes: a request body and a response body, the request body includes: a plurality of request fields, and the response body includes: a plurality of response fields.

5. The method for generating front-end code based on an image according to claim 4, characterized in that: Match table elements based on the interface document to obtain matching results, including: Calculate the similarity between the text in the table element and the interface field of the interface document, where the interface field of the interface document is: multiple request fields or multiple response fields; When the similarity between any text in a table element and an interface field in an interface document exceeds a preset value, a mapping relationship between the text in the table element and the interface field in the interface document is established, and the mapping relationship between the text in the table element and the interface field in the interface document is used as the matching result.

6. The method for generating front-end code based on an image according to claim 5, characterized in that: The preset code functions include: a search bar code generation function, an operation bar code generation function, a table header code generation function, a cell code generation function and a page code generation function.

7. The method for generating front-end code based on an image according to claim 6, characterized in that: Input the matching results into the preset code function to generate the front-end code, including: Based on the mapping relationship between the text in the search bar and the interface field of the corresponding interface document, a search bar code generation function is used to generate the search bar code; Based on the mapping relationship between the text in the operation bar and the interface field of the corresponding interface document, the operation bar code is generated by using the operation bar code generation function; Based on the mapping relationship between the text in the table header and the interface field of the corresponding interface document, a table header code generation function is used to generate the table header code; Based on the mapping relationship between the text in the cell and the interface field of the corresponding interface document, a cell code generation function is used to generate a cell column code; Based on the page module, the search bar code, the operation bar code, the header code and the cell bar code are used as inputs of the page code generation function, and the page code is generated by the page code generation function.

8. A device for generating front-end code based on an image, used to implement the method for generating front-end code based on an image according to any one of claims 1 to 7, characterized in that: The device comprises: Image acquisition module, used to obtain background table page images; An image parsing module is used to parse the background table page image based on a preset parsing algorithm to obtain table elements, wherein the table elements at least include: a search bar, an operation bar, a table header, and a cell; The data matching module is used to obtain the interface document, match the table elements based on the interface document, and obtain the matching results; The code generation module is used to input the matching results into the preset code function to generate the front-end code.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that: When the processor executes the computer program, the method for generating front-end code based on an image according to any one of claims 1 to 7 is implemented.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the method for generating front-end code based on an image described in any one of claims 1 to 7 is implemented.

Images