Interface code generation method, layer processing method, device and computing equipment

Abstract

Embodiments of the present application disclose an interface code generation method, comprising: recognizing a design draft to obtain layer data of a layer of the design draft; performing correction processing on the layer data of the design draft; and generating an interface code corresponding to the design draft based on the layer data after the correction processing. Embodiments of the present application also disclose a corresponding design draft layer processing method and device, a computing device and a storage medium.

Description

Technical Field

[0001] This invention relates to the field of image processing technology, and in particular to an interface code generation method, a layer processing method, an apparatus, and a computing device. Background Technology

[0002] Front-end development is the process of creating graphical user interfaces (GUIs) to present to users. This involves using HTML, CSS, and JavaScript, along with various derived technologies, frameworks, and solutions, to implement the user interface interactions of internet products. In a typical front-end development cycle, designers are responsible for producing design drafts, while front-end development engineers use these drafts as input for development.

[0003] As intelligent technology has begun to be applied to various industries, front-end development, as the part of the internet closest to users, naturally hopes to leverage intelligent capabilities to significantly improve development efficiency, reduce labor costs, and create a better user experience. This involves using design-to-code (D2C) technology to convert design drafts into interface code.

[0004] Currently, third-party plugin development capabilities for mainstream design tools (Sketch, PS, XD, etc.) are becoming increasingly mature. These plugins can leverage official APIs to reconstruct basic structured and style information, thereby extracting the original information from the design draft. However, the layer data extracted by these tools often suffers from disorganized, incomplete, or even erroneous descriptions, causing significant difficulties in generating subsequent UI code.

[0005] Therefore, it is desirable to provide a solution for generating interface code and layer processing for design drafts. Summary of the Invention

[0006] Therefore, embodiments of the present invention provide an interface code generation method, a layer processing method, an apparatus, and a computing device to try to solve or at least alleviate the problems mentioned above.

[0007] According to one aspect of the present invention, an interface code generation method is provided, comprising: identifying a design draft to obtain layer data of the layers of the design draft; correcting the layer data of the design draft; and generating interface code corresponding to the design draft based on the corrected layer data.

[0008] Optionally, in the method according to an embodiment of the present invention, the step of identifying the design draft includes: traversing at least one layer included in the design draft; and extracting relevant information of the elements contained in the traversed layers to form layer data of the layers.

[0009] Optionally, in the method according to an embodiment of the present invention, the step of correcting the layer data of the design draft includes: acquiring the image contained in the layer data; performing edge detection on the image to obtain an edge image; determining whether the image meets the rule conditions based on the edge image; extracting the image style if the image meets the rule conditions; and modifying the layer data based on the extracted style.

[0010] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal direction and / or vertical direction based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions.

[0011] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image is symmetrical in the horizontal direction based on an edge image includes: obtaining first side edge pixels of the edge image; determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value; if so, the image is asymmetrical in the horizontal direction.

[0012] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image is symmetrical in the horizontal direction based on the edge image includes: obtaining second-side edge pixels of the edge image; determining whether there are multiple second-side edge pixels with the same horizontal axis coordinate value; if so, the image is asymmetrical in the horizontal direction.

[0013] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image is symmetrical in the horizontal direction based on the edge image further includes: if there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, then the image is symmetrical in the horizontal direction.

[0014] Optionally, in the method according to an embodiment of the present invention, the step of obtaining the first side edge pixel or the second side edge pixel of the edge image includes: dividing the edge image into a first side region and a second side region based on the horizontal direction; obtaining the first side edge pixel of the image based on the portion of the edge image located in the first side region, wherein the horizontal axis coordinate values ​​of adjacent first side edge pixels are different; or obtaining the second side edge pixel of the image based on the portion of the edge image located in the second side region, wherein the horizontal axis coordinate values ​​of adjacent second side edge pixels are different.

[0015] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image is symmetrical in the vertical direction based on the edge image includes: obtaining the third-side edge pixels of the edge image; determining whether there are multiple third-side edge pixels with the same vertical axis coordinate value; if so, the image is asymmetrical in the vertical direction.

[0016] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image is symmetrical in the vertical direction based on the edge image includes: obtaining the fourth side edge pixels of the edge image; determining whether there are multiple fourth side edge pixels with the same vertical axis coordinate value; if so, the image is asymmetrical in the vertical direction.

[0017] Optionally, in the method according to an embodiment of the present invention, the step of determining whether an image is symmetrical in the vertical direction based on the edge image further includes: if there are no multiple third side edge pixels with the same vertical axis coordinate value and no multiple fourth side edge pixels with the same vertical axis coordinate value, then the image is symmetrical in the vertical direction.

[0018] Optionally, in the method according to an embodiment of the present invention, the step of obtaining the third-side edge pixel or the fourth-side edge pixel of the edge image includes: dividing the edge image into a third-side region and a fourth-side region based on the vertical direction; obtaining the third-side edge pixel of the image based on the portion of the edge image located in the third-side region, wherein the vertical axis coordinate values ​​of adjacent third-side edge pixels are different; or obtaining the fourth-side edge pixel of the image based on the portion of the edge image located in the fourth-side region, wherein the vertical axis coordinate values ​​of adjacent fourth-side edge pixels are different.

[0019] Optionally, in the method according to an embodiment of the present invention, the step of obtaining the image contained in the layer data includes: finding elements of type image in the layer data; and obtaining the image based on the source of the elements in the layer data.

[0020] Optionally, in the method according to an embodiment of the present invention, the step of modifying the layer data based on the extracted style includes: modifying the type and style of the element corresponding to the image in the layer data based on the extracted style, and deleting the source of the element corresponding to the image in the layer data.

[0021] Optionally, in the method according to an embodiment of the present invention, the image style includes at least one of the following: border, border radius, and background color.

[0022] Optionally, the method according to an embodiment of the present invention further includes: drawing the layer data of at least one layer of the design draft one by one, wherein the at least one layer has a stacking order; stacking the drawn at least one layer in the stacking order to obtain a final image; comparing the final image with each drawn layer; and deleting the layer data of the layer if each pixel of the layer is different from the pixel value of its corresponding pixel in the final image.

[0023] Optionally, the method according to an embodiment of the present invention further includes: if at least some pixels of a layer have the same pixel value as their corresponding pixels in the final image, then determining whether the top layer includes at least some pixels; if so, deleting the layer data of the layer.

[0024] Optionally, the method according to an embodiment of the present invention further includes: for each drawn layer, determining the next layer of the layer based on the stacking order; comparing whether there is a difference between the layer and the next layer; if there is no difference, deleting the layer and its layer data.

[0025] Optionally, in the method according to an embodiment of the present invention, the step of comparing whether there is a difference between a layer and the next layer includes: comparing the pixels of the layer with their corresponding pixels in the next layer; if all pixels of the layer have the same pixel value as their corresponding pixels, then there is no difference between the layer and the next layer; if any pixel of the layer has a different pixel value than its corresponding pixel, then there is a difference between the layer and the next layer.

[0026] According to another aspect of the present invention, a layer processing method for a design draft is provided, comprising: acquiring layer data of at least one layer included in the design draft; acquiring an image contained in the layer data; performing edge detection on the image to obtain an edge image; determining whether the image meets the rule conditions based on the edge image; extracting the style of the image if the image meets the rule conditions; and modifying the layer data based on the extracted style.

[0027] According to another aspect of the present invention, a layer processing method for a design draft is provided, comprising: acquiring layer data of at least one layer included in the design draft, wherein the at least one layer has a stacking order; drawing the layer data of the at least one layer one by one; stacking the drawn at least one layer in the stacking order to obtain a final image; comparing the final image with each drawn layer; and deleting the layer data of the layer if each pixel of the layer is different from the pixel value of its corresponding pixel in the final image.

[0028] According to another aspect of the present invention, an interface code generation apparatus is provided, comprising: a layer recognition unit, adapted to recognize a design draft and obtain layer data of the layers of the design draft; a layer processing unit, adapted to correct the layer data of the design draft; and a code generation unit, adapted to generate interface code corresponding to the design draft based on the corrected layer data.

[0029] According to another aspect of the present invention, a layer processing apparatus for a design draft is provided, comprising: a layer acquisition unit, adapted to acquire layer data of at least one layer included in the design draft; an image acquisition unit, adapted to acquire an image contained in the layer data; an edge detection unit, adapted to perform edge detection on the image to obtain an edge image; a rule judgment unit, adapted to judge whether the image meets rule conditions based on the edge image; a style extraction unit, adapted to extract the style of the image if the image meets the rule conditions; and a data modification unit, adapted to modify the layer data based on the extracted style.

[0030] According to another aspect of the present invention, a layer processing apparatus for a design draft is provided, comprising: a layer acquisition unit, adapted to acquire layer data of at least one layer included in the design draft, wherein the at least one layer has a stacking order; a layer drawing unit, adapted to draw the layer data of the at least one layer; a layer stacking unit, adapted to stack the drawn at least one layer in a stacking order to obtain a final image; a layer comparison unit, adapted to compare the final image with each drawn layer; and a data deletion unit, adapted to delete the layer data of a layer if each pixel of a layer has a different pixel value from its corresponding pixel value in the final image.

[0031] According to another aspect of the present invention, a computing device is provided, comprising: one or more processors; a memory; and one or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for performing a method according to an embodiment of the present invention.

[0032] According to another aspect of the present invention, a computer-readable storage medium is provided for storing one or more programs, the one or more programs including instructions that, when executed by a computing device, cause the computing device to perform a method according to an embodiment of the present invention.

[0033] According to embodiments of the present invention, the interface code generation scheme (e.g., interface code generation method 900) and layer processing scheme (e.g., layer processing method 300 and / or 600) utilize computer vision capabilities to correct the layer data extracted from the design draft, reducing most of the constraints on the design draft. This allows for a simple and low-cost achievement of a superior design draft data description that previously required agreements or specifications with the designer, without or with minimal agreement on protocols or specifications.

[0034] This system can identify elements in layer data that don't need to be described using image types by judging whether the image meets certain rules, and then correct them to be described using other types such as shapes, facilitating subsequent development. It can also identify useless layers that don't affect the final visual effect by comparing each drawn layer with the final image, and then delete them, greatly simplifying layer data and improving its structural rationality.

[0035] The above description is merely an overview of the technical solutions of the embodiments of the present invention. In order to better understand the technical means of the embodiments of the present invention and to implement them in accordance with the contents of the specification, and to make the above and other objects, features and advantages of the embodiments of the present invention more obvious and understandable, specific implementation methods of the embodiments of the present invention are described below. Attached Figure Description

[0036] To achieve the foregoing and related objectives, certain illustrative aspects are described herein in conjunction with the following description and accompanying drawings. These aspects indicate various ways in which the principles disclosed herein may be practiced, and all aspects and their equivalents are intended to fall within the scope of the claimed subject matter. The foregoing and other objectives, features, and advantages of this disclosure will become more apparent from the following detailed description, taken in conjunction with the accompanying drawings. Throughout this disclosure, the same reference numerals generally refer to the same parts or elements.

[0037] Figure 1 A schematic diagram of an interface code generation system 100 according to an embodiment of the present invention is shown;

[0038] Figure 2 A schematic diagram of a computing device 200 according to an embodiment of the present invention is shown;

[0039] Figure 3 A flowchart of a layer processing method 300 for a design draft according to an embodiment of the present invention is shown;

[0040] Figure 4A and Figure 4B Schematic diagrams of an image and an edge image according to an embodiment of the present invention are shown respectively;

[0041] Figure 5A An embodiment of the present invention is shown. Figure 4B The diagram shows the first and second edge pixels obtained from the edge image.

[0042] Figure 5B An embodiment of the present invention is shown. Figure 4B The diagram shows the third and fourth edge pixels obtained from the edge image.

[0043] Figure 6 A flowchart of a layer processing method 600 for a design draft according to an embodiment of the present invention is shown;

[0044] Figure 7 A schematic diagram of a layer processing apparatus 700 for a design draft according to an embodiment of the present invention is shown;

[0045] Figure 8 A schematic diagram of a layer processing apparatus 800 for a design draft according to an embodiment of the present invention is shown;

[0046] Figure 9 A flowchart of an interface code generation method 900 according to an embodiment of the present invention is shown; and

[0047] Figure 10 A schematic diagram of an interface code generation apparatus 1000 according to an embodiment of the present invention is shown. Detailed Implementation

[0048] Exemplary embodiments of the present disclosure will now be described in more detail with reference to the accompanying drawings. While exemplary embodiments of the present disclosure are shown in the drawings, it should be understood that the present disclosure may be implemented in various forms and should not be limited to the embodiments set forth herein. Rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the scope of the disclosure to those skilled in the art.

[0049] Figure 1 A schematic diagram of an interface code generation system 100 according to an embodiment of the present invention is shown. Figure 1 As shown, the interface code generation system 100 includes a processing front-end 110 and a server 120. In other embodiments, the interface code generation system 100 may include different and / or additional modules.

[0050] The processing front-end 110 is any party that needs to convert design drafts into interface code. For example, in one approach, the processing front-end 110 can receive design drafts in vector formats such as Sketch and PSD, as well as bitmap formats such as PNG and JPG. The design drafts can be any type of design artwork generated by the designer using any graphic design software, such as design drafts for advertising styles, interior decoration designs, etc., and this invention does not impose any limitations on this.

[0051] Understandably, a design draft typically includes at least one layer, with each layer stacked sequentially to form the final user interface corresponding to the design draft. Layers can typically include elements such as text, images, tables, and plugins, or layers can be nested within them.

[0052] The processing front-end 110 can send a design draft to the server 120 and request the interface code generated based on the design draft. This embodiment of the invention is not limited to the specific form of the processing front-end 110. The server 120 can receive requests from the processing front-end 110 in various ways. For example, the server 120 can provide an application programming interface (API) with a predetermined format definition to facilitate the processing front-end 110 in organizing the request according to the definition and sending it to the server 120.

[0053] Server 120 can perform layer recognition on the design draft to obtain layer data for at least one layer containing relevant information about all elements in the design draft. Specifically, server 120 can read the design draft, traverse at least one layer contained in the design draft using a depth-first search method, and extract the layer data of each layer. The layer data can include relevant information about each element included in the layer, such as position and size. Since different types of layers have different styles, it is necessary to process image, shape, text, and other types of layers separately, converting the relevant design attributes (such as sketch attributes) into a form that can be understood by an interface style language (such as CSS).

[0054] According to an embodiment of the present invention, the layer processing device 700 and / or the layer processing device 800 of the design draft reside in the server 120, which can perform correction processing on the layer data of at least one layer of the design draft, and generate interface code corresponding to the design draft based on the corrected layer data.

[0055] Understandably, in a scenario where front-end engineers and designers collaborate on front-end development, the designer can use front-end processing 110 to send the design draft to server 120, which will then automatically generate the interface code based on the design draft and send it to the front-end engineer. Alternatively, the front-end engineer can use front-end processing 110 to send the designer's completed design draft to server 120, which will then automatically generate the interface code based on the design draft.

[0056] According to an embodiment of the present invention, each component in the interface code generation system 100 (e.g., the processing front-end 110, the server 120, and each device in the server 120) can be implemented by the computing device 200 described below.

[0057] Figure 2 A schematic diagram of a computing device 200 according to an embodiment of the present invention is shown. Figure 2As shown, in the basic configuration 202, the computing device 200 typically includes a system memory 206 and one or more processors 204. A memory bus 208 can be used for communication between the processors 204 and the system memory 206.

[0058] Depending on the desired configuration, processor 204 can be any type of processor, including but not limited to: microprocessors (μP), microcontrollers (μC), digital information processors (DSPs), or any combination thereof. Processor 204 may include one or more levels of cache such as L1 cache 210 and L2 cache 212, processor core 214, and registers 216. Example processor core 214 may include an arithmetic logic unit (ALU), a floating-point unit (FPU), a digital signal processing core (DSP core), or any combination thereof. Example memory controller 218 may be used with processor 204, or in some implementations, memory controller 218 may be an internal part of processor 204.

[0059] Depending on the desired configuration, system memory 206 can be any type of memory, including but not limited to volatile memory (such as RAM), non-volatile memory (such as ROM, flash memory, etc.), or any combination thereof. System memory 206 may include operating system 220, one or more applications 222, and program data 224. In some embodiments, applications 222 may be arranged to execute instructions on the operating system using program data 224 by one or more processors 204.

[0060] The computing device 200 may also include an interface bus 240 that facilitates communication from various interface devices (e.g., output devices 242, peripheral interfaces 244, and communication devices 246) to the basic configuration 202 via a bus / interface controller 230. Example output devices 242 include a graphics processing unit 248 and an audio processing unit 250. They may be configured to facilitate communication with various external devices such as displays or speakers via one or more A / V ports 252. Example peripheral interfaces 244 may include a serial interface controller 254 and a parallel interface controller 256, which may be configured to facilitate communication with external devices such as input devices (e.g., keyboards, mice, pens, voice input devices, touch input devices) or other peripherals (e.g., printers, scanners, etc.) via one or more I / O ports 258. Example communication devices 246 may include a network controller 260, which may be arranged to facilitate communication with one or more other computing devices 262 via a network communication link through one or more communication ports 264.

[0061] A network communication link can be an example of a communication medium. A communication medium can typically be embodied in a modulated data signal, such as a carrier wave or other transmission mechanism, and can include any information delivery medium. A “modulated data signal” can be a signal whose data set, or whose modifications, can be encoded with information within the signal. As a non-limiting example, a communication medium can include wired media such as wired networks or leased lines, and various wireless media such as sound, radio frequency (RF), microwave, infrared (IR), or other wireless media. The term “computer-readable medium” as used herein can include both storage media and communication media.

[0062] The computing device 200 can be implemented as a server, such as a database server, application server, and web server, or as a personal computer with configurations including desktop and laptop computers. Of course, the computing device 200 can also be at least a part of a small-sized portable (or mobile) electronic device.

[0063] In an embodiment of the present invention, the computing device 200 may be implemented as a server 120 or a layer processing device 700 and / or a layer processing device 800 within the server 120, and may be configured to execute the interface code generation method 900, the design draft layer processing method 300, or 600 according to the embodiments of the present invention. The application 222 of the computing device 200 includes multiple instructions for executing the layer processing method 300 or 600 and the interface code generation method 900 according to the embodiments of the present invention, while the program data 224 may also store configuration data and other content of the interface code generation system 100.

[0064] Figure 3 A flowchart of a layer processing method 300 for a design draft according to an embodiment of the present invention is shown. The layer processing method 300 can be executed in a layer processing device 700 for the design draft.

[0065] like Figure 3As shown, the layer processing method 300 begins with step S310. In step S310, layer data of at least one layer included in the design draft can be obtained, and the image contained in the layer data of each layer can be obtained. Typically, the layer data is in JSON format and includes one or more elements, as well as related information of these elements, such as the element's type, identifier, style, position (usually represented by x-axis and y-axis coordinates), and source. The element type can be text, image, table, or plugin, etc.; the style can include size, color, transparency, font, font size, etc.; and the source can be a link address, etc. This embodiment of the invention does not limit the related information of the elements contained in the layer data; any information that can describe the elements is within the protection scope of this invention.

[0066] According to an embodiment of the present invention, elements of type image can be found in the layer data first, and then the image can be obtained based on the source of the element recorded in the layer data.

[0067] Then, in step S320, edge detection can be performed on the acquired image to obtain an edge image including the edges.

[0068] Any existing edge detection algorithm can be used. For example, search-based edge detection methods first calculate the edge intensity, typically expressed as a first derivative, such as the gradient magnitude. Then, the local orientation of the edge is estimated by computation, usually using the direction of the gradient, and the maximum value of the local gradient magnitude is found using this direction. Zero-crossing methods locate edges by finding the zero-crossing points of the second derivatives obtained from the image. This is typically achieved using the Laplacian operator or the zero-crossing points of nonlinear differential equations.

[0069] The operators for the first derivative can include: Roberts Cross operator, Prewitt operator, Sobel operator, Kirsch operator, compass operator, etc. The operators for the second derivative can include: Marr-Hildreth operator, zero-crossing second derivative in the gradient direction, Canny operator, Laplacian operator, etc. This edge detection algorithm is merely an example and not a limitation; those skilled in the art can employ various other edge detection algorithms in practice to achieve the purpose of edge detection.

[0070] Edge detection typically produces a binary image. For example, edge pixels have a value of 1, while non-edge pixels have a value of 0. However, this is just an example; in reality, edge images can also be grayscale, color, or parallax images, where non-edge pixels can have a value of 0, while edge pixels can have values ​​within a certain range.

[0071] Figure 4Aand Figure 4B Schematic diagrams of an image and an edge image according to an embodiment of the present invention are shown respectively. Figure 4A After edge detection was performed on the image shown, the following results were obtained. Figure 4B The edge image shown, Figure 4B The edge image shown is a binary image, meaning that the pixel value of the edge pixels that form the edge is 1 (white), while the pixel value of the non-edge pixels is 0 (black).

[0072] Then, in step S330, it can be determined whether the image contained in the layer data meets the rule conditions based on the edge image. Specifically, it can be determined whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image. If the image is symmetrical in both the horizontal and vertical directions, it is considered that the image does not meet the rule conditions. If the image is asymmetrical in either the horizontal or vertical direction, it is considered that the image does not meet the rule conditions.

[0073] It can obtain the first and / or second edge pixels of the edge image, and determine whether the image is symmetrical in the horizontal direction based on the first and / or second edge pixels.

[0074] In some embodiments, the edge image can be equally divided into a first side region and a second side region based on the horizontal direction. For example, the center point can be determined according to the size of the edge image. Assume that a horizontal straight line is drawn at the center point of the edge image, which can equally divide the edge image into a first side region and a second side region. The first side region can be either the upper side region or the lower side region, and the second side region is the other one.

[0075] Based on the portion of the edge image located in the first side region, the first side edge pixels of the edge image can be obtained. That is, the first side edge points are selected from the edge pixels located in the first side region, and the requirement is that the horizontal axis coordinate values ​​of adjacent first side edge pixels must be different.

[0076] Similarly, based on the portion of the edge image located in the second-side region, the second-side edge pixels of the edge image can be obtained. That is, second-side edge points are selected from the edge pixels located in the second-side region, where adjacent second-side edge pixels have different horizontal axis coordinate values.

[0077] Figure 5A An embodiment of the present invention is shown. Figure 4B The diagram shows the first and second side edge pixels obtained from the edge image. Figure 5AIn the image, the first side is the top side, and the second side is the bottom side. The pixel values ​​of the top edge pixels and the bottom edge pixels are 1 (white), while the pixel values ​​of the remaining pixels are 0 (black).

[0078] It can be determined whether multiple first-side-edge pixels have the same horizontal axis coordinate value, and / or whether multiple second-side-edge pixels have the same horizontal axis coordinate value. If neither multiple first-side-edge pixels nor multiple second-side-edge pixels have the same horizontal axis coordinate value, the image is considered symmetrical in the horizontal direction. If either multiple first-side-edge pixels or multiple second-side-edge pixels have the same horizontal axis coordinate value, the image is considered asymmetrical in the horizontal direction.

[0079] It can obtain the third and / or fourth edge pixels of the edge image, and determine whether the image is symmetrical in the vertical direction based on the third and / or fourth edge pixels.

[0080] In some embodiments, the edge image can be equally divided into a third-side region and a fourth-side region based on a vertical direction. For example, the center point can be determined according to the size of the edge image. Assume a vertical line is drawn at the center point of the edge image; this line can equally divide the edge image into a third-side region and a fourth-side region. Here, the third-side region can be either the left-side region or the right-side region, and the fourth-side region is the other one.

[0081] Based on the portion of the edge image located in the third-side region, the third-side edge pixels can be obtained. That is, the third-side edge points are selected from the edge pixels located in the third-side region, and the requirement is that the ordinate coordinates of adjacent third-side edge pixels must be different.

[0082] Similarly, based on the portion of the edge image located in the fourth-side region, the fourth-side edge pixels of the edge image can be obtained. That is, the fourth-side edge points are selected from the edge pixels located in the fourth-side region, where adjacent fourth-side edge pixels have different y-axis coordinate values.

[0083] Figure 5B An embodiment of the present invention is shown. Figure 4B The diagram shows the third and fourth edge pixels obtained from the edge image. Figure 5B In the image, the third side is the left side, and the fourth side is the right side. The pixel value of the left and right edge pixels is 1 (white), and the pixel value of the remaining pixels is 0 (black).

[0084] It can determine whether there are multiple third-side edge pixels with the same y-axis coordinate value, and / or whether there are multiple fourth-side edge pixels with the same y-axis coordinate value. If there are no multiple third-side edge pixels with the same y-axis coordinate value, and no multiple fourth-side edge pixels with the same y-axis coordinate value, the image is considered symmetrical in the vertical direction. If there are multiple third-side edge pixels with the same y-axis coordinate value, or multiple fourth-side edge pixels with the same y-axis coordinate value, the image is considered asymmetrical in the vertical direction.

[0085] If the image meets the rule conditions, the image style can be extracted in step S340. The extracted style may include at least one of the following: image border, border radius, background color, etc. This embodiment of the invention does not limit the extracted style; any style that can describe an image is within the scope of protection of this invention.

[0086] For example, for background color, we can obtain the pixel distribution from left to right and top to bottom within the image. If the variance of each pixel is less than a given threshold (no fluctuation), it is a solid color background, and the value with the largest proportion of a certain pixel value is directly extracted as the background color. If the differences of each pixel value are linear on one axis (horizontal or vertical axis), and the variance of each pixel value is 0 on the other axis (e.g., the pixel values ​​on the horizontal axis increase, and the pixel values ​​on the vertical axis are equal), it is a gradient background, and the pixel values ​​at the center of both edges can be extracted sequentially as a description of the gradient background.

[0087] For example, for borders, the edge image after edge detection can be bitwise inverted and used as a mask layer. This mask layer is then ANDed with the edge image after edge detection to obtain a new image. Based on this new image, it can be determined whether there is an internal contour (i.e., whether the new image has an edge). If the new image has an internal contour, the pixels of the internal contour are divided into two point sets based on the center point using the horizontal and vertical external gradients. It is then determined whether the contour point sets conform to a linear point distribution. If they do, the border pixel width and pixel value of each linearly distributed point set are extracted.

[0088] Finally, in step S350, the layer data can be modified based on the extracted image style. For example, based on the extracted style, the type and style of the element corresponding to the image in the layer data can be modified, and the source of the element corresponding to the image in the layer data can be deleted. That is, the element originally of type image can be corrected to be described using another type. For example, the type of the element corresponding to the image can be changed from Image to Shape, and the identifier can be reassigned. At the same time, the style extracted from the image is added to the style of the element, and the source of the element is deleted.

[0089] Understandably, the layer data initially extracted from the design draft often includes many elements, such as background color blocks, that do not need to be described using image types. The large number of such image-type elements will reduce the performance of subsequent development and increase unnecessary workload. According to the layer data processing method 300 of the present invention, these elements that do not need to be described using image types can be identified by judging whether the image meets the rule conditions, and they can be corrected to be described using other types such as shapes, thereby facilitating subsequent development.

[0090] Furthermore, considering that designers sometimes add layers in the design drafts that have no impact on the final layout and visual appeal—in other words, useless layers—it is necessary to filter out these layers for the sake of structural rationality and simplicity.

[0091] Figure 6 A flowchart of a layer processing method 600 for a design draft according to another embodiment of the present invention is shown. The layer processing method 600 is adapted to be executed in a layer processing apparatus 800 for a design draft and is used to filter out layer data of useless layers.

[0092] like Figure 6 As shown, the layer processing method 600 begins with step S610. In step S610, layer data of at least one layer included in the design draft is obtained, and the layer data of the at least one layer included in the design draft are drawn one by one. The at least one layer has a stacking order.

[0093] In step S620, at least one drawn layer is stacked in stacking order to obtain the final image. In step S630, the final image is compared with each drawn layer. Specifically, for each drawn layer, the corresponding pixel in the final image can be determined, and the pixel value of the layer's pixel is compared with that corresponding pixel. If the pixel value of each pixel in the layer is different from that of its corresponding pixel in the final image, then in step S640, the layer data of that layer can be deleted.

[0094] If at least some pixels in the layer have the same pixel value as their corresponding pixels in the final image, then determine whether the top layer of at least one of the drawn layers includes these at least some pixels. If it does, delete the layer data of that layer; otherwise, do not process the layer and its layer data.

[0095] According to an embodiment of the present invention, for each drawn layer, the next layer can be determined based on the stacking order. Here, the next layer refers to the layer stacked one layer below the current layer. Then, it can be compared whether there are any differences between the current layer and its next layer.

[0096] In some embodiments, the pixels of a layer can be compared with the pixels of the layer below it. For example, the pixels of a layer can be compared with their corresponding pixels in the next layer. If all the pixels of a layer have the same pixel value as their corresponding pixels in the next image, then there is no difference between the layer and the layer below it, and the layer can be considered a useless layer, and the layer and its layer data can be deleted.

[0097] If any pixel in this layer has a different pixel value than its corresponding pixel in the next layer, then this layer differs from the next layer. Alternatively, if a pixel in this layer has no corresponding pixel in the next layer, then this layer differs from the next layer. In cases where this layer differs from the next layer, this layer can be left unprocessed.

[0098] Understandably, the layer data initially extracted from the design draft usually includes many layers that are duplicated or will be covered later. The layer processing method 600 of the design draft according to the present invention can find these useless layers by comparing the layers drawn each time with the final image and delete them, which greatly simplifies the layer data and improves the structural rationality of the layer data.

[0099] In summary, it is usually necessary to agree on specifications or agreements with the designer in advance. The designer creates the design draft according to the constraints of these specifications or agreements in order to achieve a better restoration effect in the subsequent process of restoring the layer data into a graphical user interface. However, the layer processing method of the design draft according to the present invention (e.g., layer processing method 300 and / or 600) uses computer vision capabilities to correct the layer data extracted from the design draft. This can reduce most of the constraints on the design draft, and make it possible to achieve a better design draft data description that previously required an agreement or specification with the designer, simply and at a lower cost, without specifying or having fewer agreements or specifications.

[0100] Figure 7A schematic diagram of a layer processing apparatus 700 for a design draft according to an embodiment of the present invention is shown. Figure 7 As shown, the layer processing device 700 may include a layer acquisition unit 710, an image acquisition unit 720, an edge detection unit 730, a rule judgment unit 740, a style extraction unit 750, and a data modification unit 760.

[0101] Layer acquisition unit 710 is adapted to acquire layer data of at least one layer included in the design draft. Image acquisition unit 720 is coupled to layer acquisition unit 710 and is adapted to acquire the image contained in the layer data. Edge detection unit 730 is coupled to image acquisition unit 720 and is adapted to perform edge detection on the image contained in the layer data to obtain an edge image. Rule judgment unit 740 is coupled to edge detection unit 730 and is adapted to determine whether the image meets the rule conditions based on the edge image. If the image meets the rule conditions, style extraction unit 750, coupled to image acquisition unit 720 and rule judgment unit 740, is adapted to extract the style of the image. Finally, data modification unit 760, coupled to style extraction unit 750, is adapted to modify the layer data based on the extracted style.

[0102] For detailed processing logic and implementation process of each unit in the layer processing device 700 of the design draft, please refer to the preceding text. Figure 1 - Figure 5 describes the layer processing method 300 for the design draft, which will not be repeated here.

[0103] Figure 8 A schematic diagram of a layer processing apparatus 800 for a design draft according to an embodiment of the present invention is shown. Figure 8 As shown, the layer data processing device 800 may include a layer acquisition unit 810, a layer drawing unit 820, a layer overlay unit 830, a layer comparison unit 840, and a data deletion unit 850.

[0104] The layer acquisition unit 810 is adapted to acquire layer data of at least one layer included in the design draft, wherein the at least one layer has a stacking order. The layer drawing unit 820 is coupled to the layer acquisition unit 810 and is adapted to draw the layer data of at least one layer included in the design draft. The layer stacking unit 830 is coupled to the layer drawing unit 820 and is adapted to stack the drawn at least one layer in a stacking order to obtain the final image. The layer comparison unit 840 is coupled to the layer drawing unit 820 and the layer stacking unit 830 and is adapted to compare the final image with each drawn layer. For each layer, if the pixel value of each pixel in that layer is different from the pixel value of its corresponding pixel in the final image, the data deletion unit 860 coupled to the layer comparison unit 840 can delete the layer data of that layer.

[0105] For detailed processing logic and implementation process of each unit in the layer processing device 800 of the design draft, please refer to the preceding text. Figures 1-6 The descriptions of layer processing methods 300 and 600 for the design draft will not be repeated here.

[0106] Figure 9 A flowchart of an interface code generation method 900 according to an embodiment of the present invention is shown. The interface code generation method 900 is adapted to be executed in an interface code generation apparatus 1000. Figure 9 As shown, the interface code generation method 900 begins with step S910.

[0107] In step S910, the design draft can be identified to obtain layer data for at least one layer included in the design draft. For example, at least one layer included in the design draft can be traversed. For each traversed layer, relevant information about the elements contained in that layer is extracted to form layer data for that layer. Then, in step S920, the layer data is corrected, for example, by using layer processing method 300 and / or layer processing method 600 of the design draft. Finally, in step S930, the interface code (e.g., HTML and CSS code) corresponding to the design draft can be generated based on the corrected layer data. In some embodiments, the layer data can be combined with a corresponding code template to obtain the interface code. Since the corrected layer data is very close to the description of the actual code, it can be directly converted into interface code with very little and mechanical work, greatly improving efficiency.

[0108] For detailed processing logic and implementation process of each step in the interface code generation method 900, please refer to the preceding text. Figures 1-6 The descriptions of the interface code generation system 100, the layer processing method 300 for the design draft, and the layer processing method 600 for the design draft will not be repeated here.

[0109] Figure 10 A schematic diagram of an interface code generation apparatus 1000 according to an embodiment of the present invention is shown. The interface code generation apparatus 1000 may reside in a server 120. Figure 10 As shown, the interface code generation device 1000 may include a layer recognition unit 1100, a layer processing unit 1200, and a code generation unit 1300.

[0110] The layer recognition unit 1100 is adapted to recognize the design draft and obtain layer data of at least one layer of the design draft. The layer processing unit 1200 is coupled to the layer recognition unit 1100 and is adapted to correct the layer data of the design draft. For example, the layer processing unit 1200 can be implemented as a layer processing device 700 and / or a layer processing device 800 for the design draft, respectively using a layer processing method 300 and / or a layer processing method 600 for the design draft to correct the layer data. The code generation unit 1300 is coupled to the layer processing unit 1200 and is adapted to generate interface code corresponding to the design draft based on the corrected layer data.

[0111] For detailed processing logic and implementation process of each unit in the interface code generation device 1000, please refer to the preceding text. Figure 1 For the interface code generation system 100, and Figure 9 The description of interface code generation method 900 will not be repeated here.

[0112] The various techniques described herein can be implemented in combination with hardware or software, or a combination thereof. Thus, the methods and apparatus of the embodiments of the present invention, or certain aspects or portions thereof, can take the form of program code (i.e., instructions) embedded in a tangible medium, such as a removable hard disk, USB flash drive, floppy disk, CD-ROM, or any other machine-readable storage medium, wherein when the program is loaded into a machine such as a computer and executed by the machine, that machine becomes an apparatus for practicing the embodiments of the present invention.

[0113] When the program code is executed on a programmable computer, the computing device generally includes a processor, a processor-readable storage medium (including volatile and non-volatile memory and / or storage elements), at least one input device, and at least one output device. The memory is configured to store program code; the processor is configured to execute the method of the embodiments of the present invention according to instructions in the program code stored in the memory.

[0114] By way of example, and not limitation, readable media include readable storage media and communication media. Readable storage media stores information such as computer-readable instructions, data structures, program modules, or other data. Communication media generally embodies computer-readable instructions, data structures, program modules, or other data in the form of modulated data signals such as carrier waves or other transmission mechanisms, and includes any information delivery medium. Any combination of the above is also included within the scope of readable media.

[0115] In the specification provided herein, the algorithms and displays are not inherently related to any particular computer, virtual system, or other device. Various general-purpose systems can also be used with the examples of the embodiments of the present invention. Based on the above description, the required structure for constructing such systems is apparent. Furthermore, the embodiments of the present invention are not directed to any particular programming language. It should be understood that the embodiments of the present invention described herein can be implemented using various programming languages, and the above description of specific languages ​​is for the purpose of disclosing the best mode of implementation of the embodiments of the present invention.

[0116] Numerous specific details are set forth in the specification provided herein. However, it will be understood that embodiments of the invention may be practiced without these specific details. In some instances, well-known methods, structures, and techniques have not been shown in detail so as not to obscure the understanding of this specification.

[0117] Similarly, it should be understood that, in order to simplify this disclosure and aid in understanding one or more of the various aspects of the invention, features of the embodiments of the invention are sometimes grouped together in a single embodiment, figure, or description thereof in the above description of exemplary embodiments of the invention. However, this method of disclosure should not be construed as reflecting an intention that the claimed embodiments of the invention require more features than are expressly recited in each claim. Rather, as reflected in the following claims, inventive aspects lie in fewer than all features of a single foregoing disclosed embodiment. Therefore, the claims following the detailed description are hereby expressly incorporated into that detailed description, wherein each claim itself is a separate embodiment of the invention.

[0118] Those skilled in the art will understand that modules, units, or components of the devices disclosed in the examples herein can be arranged in the devices described in this embodiment, or alternatively, can be located in one or more devices different from the devices in this example. The modules in the foregoing examples can be combined into a single module or further divided into multiple sub-modules.

[0119] Those skilled in the art will understand that modules in the device of the embodiments can be adaptively changed and placed in one or more devices different from that embodiment. Modules, units, or components in the embodiments can be combined into a single module, unit, or component, and further, they can be divided into multiple sub-modules, sub-units, or sub-components. Except where at least some of such features and / or processes or units are mutually exclusive, any combination can be used to combine all features disclosed in this specification (including the accompanying claims, abstract, and drawings) and all processes or units of any method or device so disclosed. Unless expressly stated otherwise, each feature disclosed in this specification (including the accompanying claims, abstract, and drawings) may be replaced by an alternative feature that serves the same, equivalent, or similar purpose.

[0120] Furthermore, those skilled in the art will understand that although some embodiments described herein include certain features included in other embodiments but not others, combinations of features from different embodiments are meant to be within the scope of the embodiments of the invention and form different embodiments. For example, in the following claims, any of the claimed embodiments can be used in any combination.

[0121] Furthermore, some of the embodiments described herein are methods or combinations of method elements that can be implemented by a processor of a computer system or by other means of performing the above functions. Therefore, a processor having the necessary instructions for implementing the above methods or method elements forms means for implementing the method or method elements. Furthermore, the elements described herein in the apparatus embodiments are examples of means for implementing the functions performed by elements for the purpose of carrying out the invention.

[0122] As used herein, unless otherwise specified, the use of ordinal numbers such as “first,” “second,” “third,” etc., to describe ordinary objects merely indicates different instances of similar objects and is not intended to imply that the objects being described must have a given order in time, space, ordering, or any other manner.

[0123] Although embodiments of the invention have been described with respect to a limited number of examples, those skilled in the art will understand from the foregoing description that other embodiments are conceivable within the scope of the embodiments described herein. Furthermore, it should be noted that the language used in this specification has been chosen primarily for readability and instructional purposes, and not for the purpose of interpreting or limiting the subject matter of the embodiments of the invention. Therefore, many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the appended claims. The disclosure of embodiments of the invention is illustrative rather than restrictive, and the scope of the embodiments is defined by the appended claims.

Claims

1. A method for generating interface code, comprising: The design draft is identified to obtain the layer data of the layers in the design draft; The layer data of the design draft is corrected. as well as The interface code corresponding to the design draft is generated based on the corrected layer data. The steps for correcting the layer data of the design draft include: acquiring the image contained in the layer data; performing edge detection on the image to obtain an edge image; determining whether the image meets the rule conditions based on the edge image; extracting the style of the image if the image meets the rule conditions; and modifying the layer data based on the extracted style. The step of determining whether the image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions. The process involves determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value, and / or whether there are multiple second side edge pixels with the same horizontal axis coordinate value. If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, the image is considered to be symmetrical in the horizontal direction; otherwise, the image is considered to be asymmetrical in the horizontal direction. Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value, and / or determine whether there are multiple fourth-side edge pixels with the same vertical axis coordinate value. If there are no multiple third-side edge pixels with the same vertical axis coordinate value and no multiple fourth-side edge pixels with the same vertical axis coordinate value, the image is considered to be symmetrical in the vertical direction; otherwise, the image is considered to be asymmetrical in the vertical direction.

2. The method as described in claim 1, wherein, The steps for identifying design drafts include: Iterate through at least one layer included in the design draft; For each layer that is traversed, relevant information about the elements contained in the layer is extracted to form the layer data of the layer.

3. The method as described in claim 1, wherein, Based on the edge image, the step of determining whether the image is symmetrical in the horizontal direction includes: Obtain the first side edge pixels of the edge image; Determine whether there are multiple first side edge pixels with the same horizontal axis coordinate value; If present, the image is asymmetrical in the horizontal direction.

4. The method of claim 1, wherein, Based on the edge image, the step of determining whether the image is symmetrical in the horizontal direction includes: Obtain the second edge pixels of the edge image; Determine whether there are multiple second side edge pixels with the same horizontal axis coordinate value; If present, the image is asymmetrical in the horizontal direction.

5. The method as described in claim 3 or 4, wherein, Based on the edge image, the step of determining whether the image is symmetrical in the horizontal direction further includes: If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, then the image is symmetrical in the horizontal direction.

6. The method as described in claim 3 or 4, wherein, The steps for obtaining the first side edge pixel or the second side edge pixel of the edge image include: Based on the horizontal direction, the edge image is divided into a first side region and a second side region; Based on the portion of the edge image located in the first side region, the first side edge pixels of the image are obtained, where adjacent first side edge pixels have different horizontal axis coordinate values; or Based on the portion of the edge image located in the second side region, the second side edge pixels of the image are obtained, and the horizontal axis coordinate values ​​of adjacent second side edge pixels are different.

7. The method of claim 1, wherein, Based on the edge image, the step of determining whether the image is symmetrical in the vertical direction includes: Obtain the third edge pixel of the edge image; Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value; If present, the image is asymmetrical in the vertical direction.

8. The method of claim 1, wherein, Based on the edge image, the step of determining whether the image is symmetrical in the vertical direction includes: Obtain the fourth side edge pixel of the edge image; Determine whether there are multiple fourth side edge pixels with the same vertical axis coordinate value; If present, the image is asymmetrical in the vertical direction.

9. The method of claim 7 or 8, wherein, Based on the edge image, the step of determining whether the image is symmetrical in the vertical direction further includes: If there are no multiple third side edge pixels with the same vertical axis coordinate value and no multiple fourth side edge pixels with the same vertical axis coordinate value, then the image is symmetrical in the vertical direction.

10. The method of claim 7 or 8, wherein, The steps for obtaining the third or fourth edge pixel of the edge image include: Based on the vertical direction, the edge image is divided into a third side region and a fourth side region; Based on the portion of the edge image located in the third-side region, the third-side edge pixels of the image are obtained, where the ordinate coordinates of adjacent third-side edge pixels are different; or Based on the portion of the edge image located in the fourth side region, the fourth side edge pixels of the image are obtained, and the vertical axis coordinate values ​​of adjacent fourth side edge pixels are different.

11. The method of claim 1, wherein, The steps for obtaining the image contained in the layer data include: Find the elements of type image in the layer data; The image is obtained based on the source of the element in the layer data.

12. The method of claim 1, wherein, The steps for modifying the layer data based on the extracted style include: Based on the extracted style, modify the type and style of the element corresponding to the image in the layer data, and delete the source of the element corresponding to the image in the layer data.

13. The method of claim 1, wherein, The image style includes at least one of the following: border, border radius, and background color.

14. The method of claim 1, further comprising: The layer data of at least one layer of the design draft are drawn one by one, and the at least one layer has a stacking order; The at least one drawn layer is stacked in stacking order to obtain the final image; The final image is compared with each of the drawn layers; If each pixel of the layer has a different pixel value than its corresponding pixel value in the final image, then the layer data of the layer is deleted.

15. The method of claim 14, further comprising: If at least some pixels of the layer have the same pixel value as their corresponding pixels in the final image, then determine whether the top layer includes the at least some pixels. If included, then delete the layer data for that layer.

16. The method of claim 14, further comprising: For each drawn layer, the next layer is determined based on the stacking order; Compare whether there are differences between the layer and the next layer; If no differences exist, delete the layer and its layer data.

17. The method of claim 16, wherein, The steps for comparing whether there are differences between the layer and the next layer include: Compare the pixels of the layer with their corresponding pixels in the next layer; If each pixel of the layer has the same pixel value as the corresponding pixel, then the layer is not different from the next layer. If any pixel in the layer has a different pixel value than the corresponding pixel, then the layer is different from the next layer.

18. A layer processing method for a design draft, comprising: Obtain the layer data of at least one layer included in the design draft; Obtain the image contained in the layer data; Edge detection is performed on the image to obtain an edge image; Based on the edge image, determine whether the image satisfies the rule conditions; If the image meets the rule conditions, extract the style of the image; as well as Modify the layer data based on the extracted style; The step of determining whether the image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions. The process involves determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value, and / or whether there are multiple second side edge pixels with the same horizontal axis coordinate value. If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, the image is considered to be symmetrical in the horizontal direction; otherwise, the image is considered to be asymmetrical in the horizontal direction. Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value, and / or determine whether there are multiple fourth-side edge pixels with the same vertical axis coordinate value. If there are no multiple third-side edge pixels with the same vertical axis coordinate value and no multiple fourth-side edge pixels with the same vertical axis coordinate value, the image is considered to be symmetrical in the vertical direction; otherwise, the image is considered to be asymmetrical in the vertical direction.

19. A layer processing method for a design draft, comprising: Obtain layer data for at least one layer included in the design draft, wherein the at least one layer has a stacking order; The layer data of the at least one layer are drawn one by one; The at least one drawn layer is stacked in stacking order to obtain the final image; The final image is compared with each of the drawn layers; as well as If each pixel of the layer is different from the pixel value of its corresponding pixel in the final image, then the layer data of the layer is deleted. The layer processing method also includes: The layer data of the design draft is corrected; and The interface code corresponding to the design draft is generated based on the corrected layer data. The steps for correcting the layer data of the design draft include: acquiring the image contained in the layer data; performing edge detection on the image to obtain an edge image; determining whether the image meets the rule conditions based on the edge image; extracting the style of the image if the image meets the rule conditions; and modifying the layer data based on the extracted style. The step of determining whether the image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions. The process involves determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value, and / or whether there are multiple second side edge pixels with the same horizontal axis coordinate value. If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, the image is considered to be symmetrical in the horizontal direction; otherwise, the image is considered to be asymmetrical in the horizontal direction. Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value, and / or determine whether there are multiple fourth-side edge pixels with the same vertical axis coordinate value. If there are no multiple third-side edge pixels with the same vertical axis coordinate value and no multiple fourth-side edge pixels with the same vertical axis coordinate value, the image is considered to be symmetrical in the vertical direction; otherwise, the image is considered to be asymmetrical in the vertical direction.

20. An interface code generation device, comprising: A layer recognition unit is adapted to recognize the design draft and obtain the layer data of the layers in the design draft; A layer processing unit is adapted to correct the layer data of the design draft; as well as The code generation unit is adapted to generate the interface code corresponding to the design draft based on the corrected layer data. The steps for correcting the layer data of the design draft include: acquiring the image contained in the layer data; performing edge detection on the image to obtain an edge image; determining whether the image meets the rule conditions based on the edge image; extracting the style of the image if the image meets the rule conditions; and modifying the layer data based on the extracted style. The step of determining whether the image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions. The process involves determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value, and / or whether there are multiple second side edge pixels with the same horizontal axis coordinate value. If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, the image is considered to be symmetrical in the horizontal direction; otherwise, the image is considered to be asymmetrical in the horizontal direction. Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value, and / or determine whether there are multiple fourth-side edge pixels with the same vertical axis coordinate value. If there are no multiple third-side edge pixels with the same vertical axis coordinate value and no multiple fourth-side edge pixels with the same vertical axis coordinate value, the image is considered to be symmetrical in the vertical direction; otherwise, the image is considered to be asymmetrical in the vertical direction.

21. A layer processing device for a design draft, comprising: A layer acquisition unit is adapted to acquire layer data of at least one layer included in the design draft; Image acquisition unit, adapted to acquire the image contained in the layer data; An edge detection unit is adapted to perform edge detection on the image to obtain an edge image; The rule judgment unit is adapted to determine whether the image satisfies the rule conditions based on the edge image; The style extraction unit is adapted to extract the style of the image when the image meets the rule conditions; as well as The data modification unit is adapted to modify the layer data based on the extracted style; The step of determining whether the image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions. The process involves determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value, and / or whether there are multiple second side edge pixels with the same horizontal axis coordinate value. If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, the image is considered to be symmetrical in the horizontal direction; otherwise, the image is considered to be asymmetrical in the horizontal direction. Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value, and / or determine whether there are multiple fourth-side edge pixels with the same vertical axis coordinate value. If there are no multiple third-side edge pixels with the same vertical axis coordinate value and no multiple fourth-side edge pixels with the same vertical axis coordinate value, the image is considered to be symmetrical in the vertical direction; otherwise, the image is considered to be asymmetrical in the vertical direction.

22. A layer processing device for a design draft, comprising: A layer acquisition unit is adapted to acquire layer data of at least one layer included in the design draft, wherein the at least one layer has a stacking order; A layer drawing unit is suitable for drawing layer data of at least one layer; A layer stacking unit is adapted to stack the at least one drawn layer in stacking order to obtain a final image; A layer comparison unit is adapted to compare the final image with the individual layers that were drawn. as well as A data deletion unit is adapted to delete the layer data of a layer if each pixel of the layer has a different pixel value from its corresponding pixel value in the final image. The layer processing device further includes: The layer data of the design draft is corrected; and The interface code corresponding to the design draft is generated based on the corrected layer data. The steps for correcting the layer data of the design draft include: acquiring the image contained in the layer data; performing edge detection on the image to obtain an edge image; determining whether the image meets the rule conditions based on the edge image; extracting the style of the image if the image meets the rule conditions; and modifying the layer data based on the extracted style. The step of determining whether the image satisfies the rule conditions based on the edge image includes: determining whether the image is symmetrical in the horizontal and / or vertical directions based on the edge image; if the image is symmetrical in both the horizontal and vertical directions, then the image satisfies the rule conditions. The process involves determining whether there are multiple first side edge pixels with the same horizontal axis coordinate value, and / or whether there are multiple second side edge pixels with the same horizontal axis coordinate value. If there are no multiple first side edge pixels with the same horizontal axis coordinate value and no multiple second side edge pixels with the same horizontal axis coordinate value, the image is considered to be symmetrical in the horizontal direction; otherwise, the image is considered to be asymmetrical in the horizontal direction. Determine whether there are multiple third-side edge pixels with the same vertical axis coordinate value, and / or determine whether there are multiple fourth-side edge pixels with the same vertical axis coordinate value. If there are no multiple third-side edge pixels with the same vertical axis coordinate value and no multiple fourth-side edge pixels with the same vertical axis coordinate value, the image is considered to be symmetrical in the vertical direction; otherwise, the image is considered to be asymmetrical in the vertical direction.

23. A computing device, comprising: One or more processors; and Memory; One or more programs, wherein the one or more programs are stored in the memory and configured to be executed by the one or more processors, the one or more programs including instructions for performing any of the methods according to claims 1-19.

24. A computer-readable storage medium storing one or more programs, said one or more programs including instructions that, when executed by a computing device, cause the computing device to perform any one of the methods according to claims 1-19.

Images