User interface code generation method and device, equipment and storage medium

Abstract

The embodiment of the invention provides a user interface code generation method and device, equipment and a storage medium. The method comprises the steps of obtaining a target image; performing image processing on the target image, and determining a plurality of controls displayed by the user interface; acquiring a control category corresponding to each control in the control tree, and extracting attribute information corresponding to each control; the control tree is generated based on a plurality of controls; according to the control category corresponding to each control and the attribute information corresponding to each control, optimizing the control tree to obtain a target control tree; and converting the target control tree into a code file. In the embodiment of the invention, the code file can be obtained only by processing the target image, and the code file does not need to be written manually, so that the generation efficiency of the user interface code file is improved.

Description

Technical Field

[0001] The present invention relates to the field of communication technology, and in particular to an interface code generation method, device, equipment and storage medium. Background Art

[0002] In front-end development, the user interface (UI) development process is usually as follows: designers draw UI design files, R&D personnel extract layer information from UI design files, and then manually write row and column layout UI code based on the layer information. This manual UI code writing method consumes a lot of human resources and leads to low efficiency in UI code generation. Summary of the invention

[0003] The main purpose of the present invention is to provide a user interface code generation method, device, computer equipment and storage medium, aiming to solve the technical problem of low efficiency of UI code generation.

[0004] To achieve the above object, the present invention provides a method for generating a user interface code, the method comprising:

[0005] Acquire a target image; the target image is used to represent the user interface;

[0006] Performing image processing on the target image to determine a plurality of controls displayed on the user interface;

[0007] Acquire a control category corresponding to each control in a control tree, and extract attribute information corresponding to each control; the control tree is generated based on the multiple controls;

[0008] According to the control category corresponding to each control and the property information corresponding to each control, the control tree is optimized to obtain a target control tree;

[0009] Convert the target control tree into a code file.

[0010] Optionally, performing image processing on the target image to determine a plurality of controls displayed on the user interface includes:

[0011] Pre-processing the target image to obtain an optimized target image;

[0012] Perform image segmentation on the optimized target image to determine a plurality of controls displayed on the user interface.

[0013] Optionally, the target image includes a plurality of sub-images, and the pre-processing of the target image to obtain an optimized target image includes:

[0014] Deleting a sub-image in the target image whose display area is larger than a preset area; and,

[0015] The sub-image displaying the characters in the target image is deleted to obtain an optimized target image.

[0016] Optionally, performing image segmentation on the optimized target image to determine a plurality of controls displayed on the user interface includes:

[0017] Performing image segmentation on the optimized target image to obtain multiple image blocks;

[0018] Determine, among the multiple image blocks, an image block having an overlapping area with other image blocks as a target image block;

[0019] Deleting a target image block from the multiple image blocks to obtain multiple optimized image blocks;

[0020] The control displayed on each image block in the optimized multiple image blocks is determined as the control displayed on the user interface.

[0021] Optionally, acquiring the control category corresponding to each control in the control tree, and extracting the property information corresponding to each control, includes:

[0022] Identify the image category to which each control image in the control tree belongs by using image classification technology, and determine the image category as the control category; and

[0023] Through computational vision technology, the attribute information corresponding to each control is extracted.

[0024] Optionally, optimizing the control tree according to the control category corresponding to each control and the property information corresponding to each control to obtain a target control tree includes:

[0025] Traversing each first control included in the control tree, and determining a second control having the same control category and the same corresponding attribute information as the first control;

[0026] The first control and the second control are merged to obtain a target control tree.

[0027] Optionally, converting the target control tree into a code file includes:

[0028] Based on the property information corresponding to each control in the target control tree, converting the target control tree into a lightweight file;

[0029] The lightweight file is converted into a code file associated with the user interface.

[0030] In addition, to achieve the above-mentioned purpose, the present invention also provides a user interface code generating device, the user interface code generating device comprising:

[0031] A first acquisition module is used to acquire a target image; the target image is used to represent the user interface;

[0032] A determination module, configured to perform image processing on the target image and determine a plurality of controls displayed on the user interface;

[0033] A second acquisition module is used to acquire a control category corresponding to each control in a control tree, and extract attribute information corresponding to each control; the control tree is generated based on the multiple controls;

[0034] An optimization module, used for optimizing the control tree according to the control category corresponding to each control and the property information corresponding to each control, to obtain a target control tree;

[0035] The conversion module is used to convert the target control tree into a code file.

[0036] In order to solve the above technical problems, the embodiment of the present application further provides a computer device, which adopts the following technical solution:

[0037] The computer device includes a memory and a processor, wherein the memory stores a computer program, and when the processor executes the computer program, the steps of any one of the user interface code generation methods proposed in the embodiments of the present application are implemented.

[0038] In order to solve the above technical problems, the embodiment of the present application further provides a computer-readable storage medium, which adopts the following technical solution:

[0039] The computer-readable storage medium stores a computer program, and when the computer program is executed by the processor, the steps of any one of the user interface code generation methods proposed in the embodiments of the present application are implemented.

[0040] Compared with the prior art, the embodiments of the present application have the following beneficial effects:

[0041] The embodiment of the present application provides a user interface code generation method, device, equipment and storage medium. The above method includes: obtaining a target image; the target image is used to represent the user interface; performing image processing on the target image to determine multiple controls displayed on the user interface; obtaining the control category corresponding to each control in the control tree, and extracting the attribute information corresponding to each control; the control tree is generated based on multiple controls; according to the control category corresponding to each control and the attribute information corresponding to each control, the control tree is optimized to obtain a target control tree; and the target control tree is converted into a code file. In the embodiment of the present application, after obtaining the target image representing the user interface, multiple controls are determined based on the target image, and according to the control category corresponding to each control and the attribute information corresponding to each control, a target control tree is obtained, and then the above target control tree is converted into a code file. In the embodiment of the present application, the code file can be obtained by processing the target image only, without manually writing the code file, which improves the generation efficiency of the user interface code file. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] In order to more clearly illustrate the scheme in the present application, a brief introduction is given below to the drawings required for use in the description of the embodiments of the present application. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0043] Figure 1 is an exemplary system architecture diagram to which the present application may be applied;

[0044] Figure 2 is a flow chart of a method for generating user interface code provided by an embodiment of the present invention;

[0045] Figure 3 is one of the schematic diagrams of the target image provided by the embodiment of the present invention;

[0046] Figure 4 is a second schematic diagram of a target image provided by an embodiment of the present invention;

[0047] Figure 5 is a third schematic diagram of a target image provided by an embodiment of the present invention;

[0048] Figure 6 is a structural diagram of an embodiment of a user interface code generating device provided by an embodiment of the present invention;

[0049] Figure 7 This is a basic structural block diagram of the computer device in this embodiment. DETAILED DESCRIPTION

[0050] The user interface code generation method provided by the embodiment of the present invention is applied to the user interface code generation device. Unless otherwise defined, all technical and scientific terms used in this article have the same meaning as those generally understood by technicians in the technical field of this application; the terms used in the specification of the application herein are only for the purpose of describing specific embodiments and are not intended to limit this application; the terms "including" and "having" in the specification and claims of this application and the above-mentioned drawings and any variations thereof are intended to cover non-exclusive inclusions. The terms "first", "second", etc. in the specification and claims of this application or the above-mentioned drawings are used to distinguish different objects, not to describe a specific order.

[0051] Reference to "embodiments" herein means that a particular feature, structure, or characteristic described in conjunction with the embodiments may be included in at least one embodiment of the present application. The appearance of the phrase in various locations in the specification does not necessarily refer to the same embodiment, nor is it an independent or alternative embodiment that is mutually exclusive with other embodiments. It is explicitly and implicitly understood by those skilled in the art that the embodiments described herein may be combined with other embodiments.

[0052] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the accompanying drawings.

[0053] like Figure 1 As shown, the system architecture 100 may include terminal devices 101, 102, 103, a network 104 and a server 105. The network 104 is used to provide a medium for communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links or optical fiber cables, etc.

[0054] Users can use terminal devices 101, 102, 103 to interact with server 105 through network 104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 101, 102, 103, such as web browser applications, shopping applications, search applications, instant messaging tools, email clients, social online platform software, etc.

[0055] Terminal devices 101, 102, 103 can be various electronic devices with display screens and supporting web browsing, including but not limited to smart phones, tablet computers, e-book readers, MP3 players (Moving Picture Experts Group Audio Layer III), MP4 (Moving Picture Experts Group Audio Layer IV) players, laptop computers, desktop computers, etc.

[0056] The server 105 may be a server that provides various services, such as a background server that provides support for web pages displayed on the terminal devices 101 , 102 , and 103 .

[0057] It should be noted that the user interface code generation method provided in the embodiment of the present application is generally executed by a server / terminal device, and accordingly, the user interface code generation device is generally arranged in the server / terminal device.

[0058] It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is only for illustration. Any number of terminal devices, networks and servers may be provided according to implementation requirements.

[0059] Please refer to Figure 2 , shows a flow chart of an embodiment of the user interface code generation method proposed in the present application. The embodiment of the present application can acquire and process relevant data based on artificial intelligence technology.

[0060] The method for generating user interface code provided by the embodiment of the present invention comprises the following steps:

[0061] S210, acquiring a target image.

[0062] The target image is used to represent the user interface, that is, the target image is a UI image. Optionally, the target image may be in a format of jpg, png or other standard image formats.

[0063] In this step, the source of the target image may be a picture exported by the design software or a screenshot of the user interface.

[0064] S220: Perform image processing on the target image to determine a plurality of controls displayed on a user interface.

[0065] In this step, after the target image is acquired, the target image is processed to determine the multiple controls displayed on the user interface. For specific implementations, please refer to the subsequent embodiments.

[0066] S230, obtaining a control category corresponding to each control in the control tree, and extracting property information corresponding to each control.

[0067] In this step, after determining the multiple controls displayed on the user interface, a control tree is generated based on the multiple controls. Specifically, the controls obtained by image processing the target image are in a list structure, and the list structure is converted into a tree structure to obtain the control tree.

[0068] Optionally, multiple controls may be classified based on the names of the controls to obtain a tree structure storage method, wherein the control tree is a multi-branch tree.

[0069] In this step, after the control tree is generated, the control category corresponding to each control in the control tree is obtained, wherein the control category includes but is not limited to a slide control and a button control. Also, the attribute information corresponding to each control is extracted, wherein the attribute information includes but is not limited to a color attribute, a rounded corner attribute, and a logo attribute.

[0070] S240, optimizing the control tree according to the control category corresponding to each control and the property information corresponding to each control to obtain a target control tree.

[0071] In this step, after obtaining the control category corresponding to each control and the property information corresponding to each control, the control tree is optimized to obtain the target control tree.

[0072] The above-mentioned methods of optimizing the control tree include but are not limited to: merging controls, deleting controls, etc.

[0073] S250: Convert the target control tree into a code file.

[0074] In this step, after determining the target control tree, the target control tree is converted into a code file. For specific implementation methods, please refer to the subsequent embodiments.

[0075] The embodiment of the present application provides a method for generating user interface code. The above method includes: obtaining a target image; the target image is used to represent the user interface; performing image processing on the target image to determine multiple controls displayed in the user interface; obtaining the control category corresponding to each control in the control tree, and extracting the attribute information corresponding to each control; the control tree is generated based on multiple controls; according to the control category corresponding to each control and the attribute information corresponding to each control, the control tree is optimized to obtain a target control tree; and the target control tree is converted into a code file. In the embodiment of the present application, after obtaining the target image representing the user interface, multiple controls are determined based on the target image, and according to the control category corresponding to each control and the attribute information corresponding to each control, a target control tree is obtained, and then the above target control tree is converted into a code file. In the embodiment of the present application, the code file can be obtained by processing the target image only, without manually writing the code file, which improves the generation efficiency of the user interface code file. And the user interface code generation method provided in the embodiment of the present application does not require manual writing of code files, saving development costs.

[0076] Optionally, performing image processing on the target image to determine a plurality of controls displayed on the user interface includes:

[0077] Pre-processing the target image to obtain an optimized target image;

[0078] Perform image segmentation on the optimized target image to determine a plurality of controls displayed on the user interface.

[0079] In this embodiment, the process of performing image processing on the target image is: performing pre-processing on the target image to obtain an optimized target image, performing image segmentation on the optimized target image, and determining multiple controls displayed on the user interface. It should be understood that the above-mentioned pre-processing of the target image is used to reduce noise in the image to prevent subsequent image segmentation results from being affected by image noise.

[0080] It should be understood that the above-mentioned image segmentation processing of the target image is used to determine multiple controls displayed on the user interface.

[0081] Optionally, the target image includes a plurality of sub-images, and the pre-processing of the target image to obtain an optimized target image includes:

[0082] Deleting a sub-image in the target image whose display area is larger than a preset area; and,

[0083] The sub-image displaying the characters in the target image is deleted to obtain an optimized target image.

[0084] It should be noted that the target image includes a plurality of sub-images. In this embodiment, the display area of ​​each sub-image is detected, and the sub-images whose display area in the target image is larger than a preset area are deleted, wherein the size of the preset area can be customized.

[0085] In this embodiment, the display content of each sub-image is detected, and the sub-image displaying the characters in the target image is deleted.

[0086] Furthermore, after deleting the sub-images with display areas larger than a preset area and the sub-images displaying characters in the target image, an optimized target image is obtained.

[0087] It should be understood that images with too large display areas and images showing characters may affect subsequent image segmentation, thereby causing inaccurate image segmentation results. In this embodiment, sub-images in the target image that may affect the image segmentation results are removed to ensure the accuracy of the image segmentation results.

[0088] Optionally, performing image segmentation on the optimized target image to determine a plurality of controls displayed on the user interface includes:

[0089] Performing image segmentation on the optimized target image to obtain multiple image blocks;

[0090] Determine, among the multiple image blocks, an image block having an overlapping area with other image blocks as a target image block;

[0091] Deleting a target image block from the multiple image blocks to obtain multiple optimized image blocks;

[0092] The control displayed on each image block in the optimized multiple image blocks is determined as the control displayed on the user interface.

[0093] In this embodiment, the optimized target image is segmented to obtain a plurality of image blocks. An optional implementation is to segment the target image using edge detection technology and contour detection technology to obtain a plurality of image blocks.

[0094] Another optional implementation is to use the open source library segment anything to segment the target image to obtain multiple image blocks.

[0095] After obtaining multiple image blocks, the display area of ​​each image block is detected, and an image block having an overlapping area with other image blocks is determined as a target image block; then the target image block in the multiple image blocks is deleted to obtain multiple optimized image blocks.

[0096] For example, after the target image is segmented, image block 1, image block 2, image block 3 and image block 4 are obtained. Among them, image block 1 and image block 2 partially overlap, so image block 1 and image block 2 are deleted, and image block 3 and image block 4 are determined as optimized image blocks.

[0097] Furthermore, a control displayed on each of the optimized multiple image blocks is detected, and the control is determined as a control displayed on the user interface.

[0098] In the above example, image block 3 and image block 4 are optimized image blocks, image block 3 represents a sliding control, and image block 4 represents a button control, and the sliding control and button control are determined as controls displayed in the user interface.

[0099] Since there is blank noise in the overlapping image blocks, after the image is segmented, the overlapping image blocks are filtered out to remove the blank noise, and then the controls displayed in each image block in the optimized multiple image blocks are determined as the controls displayed on the user interface, so as to accurately obtain the controls displayed on the user interface.

[0100] To understand the overall technical solution, please refer to Figures 3 to 5 . Figure 3 To represent the target image of the user interface, the target image is processed, and the sub-images whose display area is larger than the preset area in the target image are deleted; and the sub-images showing characters in the target image are deleted to obtain Figure 4 The optimized target image is shown.

[0101] Then, the optimized target image is segmented to obtain multiple image blocks; and the target image blocks that overlap with other image blocks are deleted to obtain Figure 5 Multiple image patches after optimization are shown.

[0102] Further, Figure 5 The control displayed on each image block in the multiple optimized image blocks shown is determined as the control displayed on the user interface.

[0103] Optionally, acquiring the control category corresponding to each control in the control tree, and extracting the property information corresponding to each control, includes:

[0104] Identify the image category to which each control image in the control tree belongs by using image classification technology, and determine the image category as the control category; and

[0105] Through computational vision technology, the attribute information corresponding to each control is extracted.

[0106] In this embodiment, image classification technologies such as support vector machines and convolutional neural networks can be used to identify the image category to which each control image in the control tree belongs, and determine the image category as the control category.

[0107] And through computational vision technology, the color, rounded corners, logo size and other attributes of each control are extracted to obtain the corresponding attribute information of each control.

[0108] The following describes how to optimize the control tree:

[0109] Optionally, optimizing the control tree according to the control category corresponding to each control and the property information corresponding to each control to obtain a target control tree includes:

[0110] Traversing each first control included in the control tree, and determining a second control having the same control category and the same corresponding attribute information as the first control;

[0111] The first control and the second control are merged to obtain a target control tree.

[0112] It should be noted that the control categories include but are not limited to slide controls, button controls and display controls. The attribute information includes but is not limited to color, rounded corners and logo size.

[0113] For example, if control 1 is a sliding control and its display mark is red, control 2 is a sliding control and its display mark is red, and control 3 is a button control and its display mark is orange, it is determined that control 1 and control 2 have the same corresponding control category and the same corresponding attribute information.

[0114] Each control in the control tree is traversed, the currently traversed control is called the first control, and the control in the control tree that has the same control category and the same corresponding attribute information as the first control is determined, and the above control is called the second control. Then the first control and the second control are merged, and after traversing each control in the control tree, the control tree is optimized to obtain the target control tree.

[0115] In this embodiment, by traversing each control in the control tree, the controls with the same corresponding control category and the same corresponding attribute information in the control tree are merged, so as to merge redundant controls, reduce invalid information in the control tree, and optimize the control tree.

[0116] In other embodiments, each control in the control tree may be traversed, controls without display identifiers may be determined as blank controls, and then the blank controls in the control tree may be deleted to optimize the control tree.

[0117] Optionally, the target control tree is stored in the database in the following format:

[0118] root

[0119] ├──Button_11

[0120] ├──ImageView_0

[0121] │└──rect16

[0122] │├──ImageView_25

[0123] │├──ImageView_35

[0124] │├──TextView7

[0125] │├──TextView9

[0126] │└──TextView_19

[0127] │└──TextView8

[0128] ├──bottom

[0129] └──rect14

[0130] Optionally, converting the target control tree into a code file includes:

[0131] Based on the property information corresponding to each control in the target control tree, converting the target control tree into a lightweight file;

[0132] The lightweight file is converted into a code file associated with the user interface.

[0133] In this embodiment, the target control tree can be converted into a highly readable lightweight file based on the property information corresponding to each control in the target control tree by code compilation. Optionally, the lightweight file is a Json file, which describes the size, position, color, style and other information of the control of the entire interface.

[0134] Optionally, you can compile the target control tree using the following code to obtain a Json file.

[0135]

[0136]

[0137] After obtaining the lightweight file, the lightweight file is converted into a code file associated with the user interface. Optionally, the code file associated with the user interface may be a code file supported by the Android platform, a code file supported by IOS, or a code file supported by an H5 page.

[0138] Optionally, you can use the following code to convert the Json file into a code file supported by the H5 page:

[0139]

[0140]

[0141] See also Figure 6 , an embodiment of the present invention provides a user interface code generating device 600, the user interface code generating device 600 comprising:

[0142] A first acquisition module 610 is used to acquire a target image; the target image is used to represent the user interface;

[0143] A determination module 620, configured to perform image processing on the target image to determine a plurality of controls displayed on the user interface;

[0144] A second acquisition module 630 is used to acquire a control category corresponding to each control in a control tree, and extract attribute information corresponding to each control; the control tree is generated based on the multiple controls;

[0145] An optimization module 640, configured to optimize the control tree according to the control category corresponding to each control and the property information corresponding to each control, to obtain a target control tree;

[0146] The conversion module 650 is used to convert the target control tree into a code file.

[0147] Optionally, the determining module 620 is specifically configured to:

[0148] Pre-processing the target image to obtain an optimized target image;

[0149] Perform image segmentation on the optimized target image to determine a plurality of controls displayed on the user interface.

[0150] Optionally, the target image includes a plurality of sub-images, and the determining module 620 is further specifically configured to:

[0151] Deleting a sub-image in the target image whose display area is larger than a preset area; and,

[0152] The sub-image displaying the characters in the target image is deleted to obtain an optimized target image.

[0153] Optionally, the determining module 620 is further specifically configured to:

[0154] Performing image segmentation on the optimized target image to obtain multiple image blocks;

[0155] Determine, among the multiple image blocks, an image block having an overlapping area with other image blocks as a target image block;

[0156] Deleting a target image block from the multiple image blocks to obtain multiple optimized image blocks;

[0157] The control displayed on each image block in the optimized multiple image blocks is determined as the control displayed on the user interface.

[0158] Optionally, the second acquisition module 630 is specifically configured to:

[0159] Identify the image category to which each control image in the control tree belongs by using image classification technology, and determine the image category as the control category; and

[0160] Through computational vision technology, the attribute information corresponding to each control is extracted.

[0161] Optionally, the optimization module 640 is specifically configured to:

[0162] Traversing each first control included in the control tree, and determining a second control having the same control category and the same corresponding attribute information as the first control;

[0163] The first control and the second control are merged to obtain a target control tree.

[0164] Optionally, the conversion module 650 is specifically configured to:

[0165] Based on the property information corresponding to each control in the target control tree, converting the target control tree into a lightweight file;

[0166] The lightweight file is converted into a code file associated with the user interface.

[0167] To solve the above technical problems, the present application also provides a computer device. Figure 7 , Figure 7 This is a basic structural block diagram of the computer device in this embodiment.

[0168] The computer device 7 includes a memory 71, a processor 72, and a network interface 73 that are interconnected through a system bus. It should be noted that the figure only shows a computer device 7 with components 71-73, but it should be understood that it is not required to implement all the components shown, and more or fewer components can be implemented instead. Among them, those skilled in the art can understand that the computer device here is a device that can automatically perform numerical calculations and / or information processing according to pre-set or stored instructions, and its hardware includes but is not limited to microprocessors, application specific integrated circuits (Application Specific Integrated Circuit, ASIC), programmable gate arrays (Field-Programmable Gate Array, FPGA), digital processors (Digital Signal Processor, DSP), embedded devices, etc.

[0169] The computer device may be a computing device such as a desktop computer, a notebook, a PDA, a cloud server, etc. The computer device may interact with a user through a keyboard, a mouse, a remote controller, a touch pad, or a voice control device.

[0170] The memory 71 includes at least one type of readable storage medium, and the readable storage medium includes flash memory, hard disk, multimedia card, card-type memory (for example, SD or DX memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, disk, optical disk, etc. In some embodiments, the memory 71 can be an internal storage unit of the computer device 7, such as a hard disk or memory of the computer device 7. In other embodiments, the memory 71 can also be an external storage device of the computer device 7, such as a plug-in hard disk, a smart memory card (Smart Media Card, SMC), a secure digital (Secure Digital, SD) card, a flash card (FlashCard), etc. equipped on the computer device 7. Of course, the memory 71 can also include both the internal storage unit of the computer device 7 and its external storage device. In this embodiment, the memory 71 is generally used to store the operating system and various application software installed on the computer device 7, such as the program code of the user interface code generation method, etc. In addition, the memory 71 can also be used to temporarily store various types of data that have been output or are to be output.

[0171] The processor 72 may be a central processing unit (CPU), a controller, a microcontroller, a microprocessor, or other data processing chips in some embodiments. The processor 72 is generally used to control the overall operation of the computer device 7. In this embodiment, the processor 72 is used to run the program code stored in the memory 71 or process data, such as running the program code of the user interface code generation method.

[0172] The network interface 73 may include a wireless network interface or a wired network interface. The network interface 73 is generally used to establish a communication connection between the computer device 7 and other electronic devices.

[0173] The present application also provides another implementation, namely, providing a computer-readable storage medium, wherein the computer-readable storage medium stores the user interface code generation program, and the user interface code generation program can be executed by at least one processor so that the at least one processor performs the steps of the user interface code generation method as described above.

[0174] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus a necessary general hardware online platform, and of course, by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk), and includes a number of instructions for a terminal device (which can be a mobile phone, computer, server, air conditioner, or network device, etc.) to execute the methods described in each embodiment of the present application.

[0175] The present application can be used in many general or special computer system environments or configurations. For example: personal computers, server computers, handheld or portable devices, tablet devices, multiprocessor systems, microprocessor-based systems, set-top boxes, programmable consumer electronics, network PCs, minicomputers, mainframe computers, distributed computing environments including any of the above systems or devices, etc. The present application can be described in the general context of computer-executable instructions executed by a computer, such as program modules. Generally, program modules include routines, programs, objects, components, data structures, etc. that perform specific tasks or implement specific abstract data types. The present application can also be practiced in distributed computing environments, in which tasks are performed by remote processing devices connected through a communication network. In a distributed computing environment, program modules can be located in local and remote computer storage media including storage devices.

[0176] Obviously, the embodiments described above are only some embodiments of the present application, rather than all embodiments. The preferred embodiments of the present application are given in the accompanying drawings, but they do not limit the patent scope of the present application. The present application can be implemented in many different forms. On the contrary, the purpose of providing these embodiments is to make the understanding of the disclosure of the present application more thorough and comprehensive. Although the present application is described in detail with reference to the aforementioned embodiments, for those skilled in the art, it is still possible to modify the technical solutions recorded in the aforementioned specific implementation methods, or to perform equivalent replacement of some of the technical features therein. Any equivalent structure made using the contents of the specification and drawings of this application, directly or indirectly used in other related technical fields, is similarly within the scope of patent protection of this application.

Claims

1. A method for generating user interface code, characterized in that: include: Get the target image; The target image is used to represent the user interface; Performing image processing on the target image to determine a plurality of controls displayed on the user interface; Acquire a control category corresponding to each control in a control tree, and extract attribute information corresponding to each control; the control tree is generated based on the multiple controls; According to the control category corresponding to each control and the property information corresponding to each control, the control tree is optimized to obtain a target control tree; Convert the target control tree into a code file.

2. The method according to claim 1, characterized in that The performing image processing on the target image to determine a plurality of controls displayed on the user interface includes: Pre-processing the target image to obtain an optimized target image; Perform image segmentation on the optimized target image to determine a plurality of controls displayed on the user interface.

3. The method according to claim 2, characterized in that The target image includes a plurality of sub-images, and the pre-processing of the target image to obtain an optimized target image includes: deleting a sub-image in the target image whose display area is larger than a preset area; and, The sub-image displaying the characters in the target image is deleted to obtain an optimized target image.

4. The method according to claim 2, characterized in that: The performing image segmentation on the optimized target image and determining a plurality of controls displayed on the user interface comprises: Performing image segmentation on the optimized target image to obtain multiple image blocks; Determine, among the multiple image blocks, an image block having an overlapping area with other image blocks as a target image block; Deleting a target image block from the multiple image blocks to obtain multiple optimized image blocks; The control displayed on each image block in the optimized multiple image blocks is determined as the control displayed on the user interface.

5. The method according to claim 1, characterized in that The obtaining of the control category corresponding to each control in the control tree and the extraction of the property information corresponding to each control include: Using image classification technology, identifying the image category to which each control image in the control tree belongs, and determining the image category as the control category; and, Through computational vision technology, the attribute information corresponding to each control is extracted.

6. The method according to claim 1, characterized in that The step of optimizing the control tree according to the control category corresponding to each control and the property information corresponding to each control to obtain a target control tree includes: Traversing each first control included in the control tree, determining a second control having the same control category and the same corresponding attribute information as the first control; The first control and the second control are merged to obtain a target control tree.

7. The method according to any one of claims 1 to 6, characterized in that The converting the target control tree into a code file comprises: Based on the property information corresponding to each control in the target control tree, converting the target control tree into a lightweight file; The lightweight file is converted into a code file associated with the user interface.

8. A user interface code generating device, characterized in that: include: A first acquisition module, used for acquiring a target image; The target image is used to represent the user interface; A determination module, configured to perform image processing on the target image and determine a plurality of controls displayed on the user interface; A second acquisition module is used to acquire the control category corresponding to each control in the control tree, and extract the attribute information corresponding to each control; The control tree is generated based on the multiple controls; An optimization module, used for optimizing the control tree according to the control category corresponding to each control and the property information corresponding to each control, to obtain a target control tree; The conversion module is used to convert the target control tree into a code file.

9. A computer device, characterized in that: The method comprises a memory and a processor, wherein the memory stores a computer program, and the processor implements the steps of the user interface code generation method according to any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the steps of the user interface code generation method according to any one of claims 1 to 7 are implemented.

Images