A method and apparatus for determining style information of a page component

Abstract

The application discloses a kind of determination method and device of the style information of page component, it is related to super deep learning technical field.The specific implementation of the method includes: receiving the style generation request of page component;Wherein, style generation request indicates the style picture of page component;Style picture is input into pre-trained component style model;Wherein, component style model is trained according to the color value and position value of the pixel point of historical style picture;In response to style generation request, according to the output of component style model, obtain the style information of page component.This implementation generates the page UI repeatedly by the one-key generation mode of the style information of button component, greatly improves the component generation efficiency, the generated page UI style is accurate, precision is higher, meets the precision, visual impression and interaction demand of user, reduces the human, time cost of front-end engineer, improves its development efficiency.

Description

Technical Field

[0001] This invention relates to the field of deep learning technology, and in particular to a method and apparatus for determining the style information of page components. Background Technology

[0002] UI (User Interface) refers to the overall design of software's human-computer interaction, operational logic, and aesthetics. UI encompasses both human-computer interaction and graphical user interfaces, and can be presented in the form of components.

[0003] In the existing page UI generation process, due to some unexpected situations (such as promotions), the amount of page UI data to be generated is large and highly repetitive. In order to reduce the cost of manual generation, DTC (design to code) or drag-and-drop component information generation methods are widely used.

[0004] However, DTC or drag-and-drop generation methods are typically used when there is a surge in demand for page UI generation. As a result, the accuracy of component information is low, and the corresponding CSS (Cascading Style Sheets) styles are relatively rough. They are not suitable for C-end (consumer) pages with high precision requirements and frequent interactions, resulting in an extremely unpleasant user experience and visual impression. Summary of the Invention

[0005] In view of this, embodiments of the present invention provide a method and apparatus for determining the style information of page components. This method can input the received style image of a button component into a component style model to generate component style information, and then repeatedly generate the page UI. This greatly improves component generation efficiency, and the subsequently generated page UI style based on the component style information is accurate and highly precise. It can be applied to various systems that require image-based component style information generation, meeting the precision, visual appeal, and interaction needs of consumers / individual users. This reduces the labor and time costs for front-end engineers and improves their development efficiency.

[0006] To achieve the above objectives, according to one aspect of the present invention, a method for determining style information of page components is provided, comprising:

[0007] Receive a style generation request for a page component; wherein the style generation request indicates a style image for the page component;

[0008] The style image is input into a pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of the pixels in historical style images;

[0009] In response to the style generation request, the style information of the page component is obtained based on the output of the component style model.

[0010] Optionally, it also includes:

[0011] The style image is preprocessed to determine the pixel information of the page components;

[0012] The color and position values ​​of multiple pixels of the page component are compared to determine the background style information, border style information, and font style information of the page component.

[0013] Based on the background style information, border style information, and font style information, the style information of the page component is generated, and the component style model is obtained.

[0014] Optionally, the preprocessing of the style image to determine the pixel information of the page component includes:

[0015] Based on a preset cropping size, a cropping candidate box for the style image is determined; wherein, the preset cropping size is greater than the maximum border size of the page component;

[0016] The style image is cropped using the cropping candidate box to determine the target component area containing the page component;

[0017] The pixel information of the target component region is extracted as the pixel information of the page component; wherein the pixel information is in a two-dimensional array format.

[0018] Optionally, comparing the color and position values ​​of multiple pixels of the page component to determine the background style information, border style information, and font style information of the page component includes:

[0019] The background style information of the page component is determined based on the maximum color value of each pixel in the target component area;

[0020] Determine multiple positioning pixels in the target component area, and determine the border style information of the component based on the color and position values ​​of the multiple positioning pixels;

[0021] The font style information of the page components is determined based on the pre-trained character recognition model, the background style information, and the border style information.

[0022] Optionally, determining the background style information of the page component based on the maximum color value of each pixel in the target component area includes:

[0023] Iterate through the pixels of the target component region;

[0024] Determine whether the color value of the current traversal point is appearing for the first time. If so, add the color value of the current traversal point to the preset background color data group; otherwise, increment the number of pixels in the background color data group corresponding to the color value of the current traversal point.

[0025] After traversing all pixels in the target component area, the maximum color value in the background color data group is determined to be the background color of the page component, thus obtaining the background style information.

[0026] Optionally, determining multiple positioning pixels of the target component region and determining the border style of the page component based on the color and position values ​​of the multiple positioning pixels includes:

[0027] Based on the color value of the boundary pixel of the target component area, a first positioning pixel is determined, and the border color information of the page component is determined based on the color value of the first positioning pixel.

[0028] The color value of the first positioned pixel is compared with the color values ​​of pixels at different positions to determine the border width information of the page component;

[0029] Determine the remaining positioning pixels, and calculate the corner radius information of the page component based on the position values ​​of all the positioning pixels.

[0030] Optionally, determining the first positioning pixel based on the color value of the boundary pixel of the target component region, and determining the border color information of the page component based on the color value of the first positioning pixel, includes:

[0031] Determine the boundary pixels of the target component region;

[0032] The color value of the boundary pixel is compared sequentially with the color values ​​of the adjacent pixels, and the first pixel whose color value is different from that of the boundary pixel is determined as the first positioning pixel.

[0033] The color value of the first located pixel is used as the border color of the page component to obtain the border color information of the page component.

[0034] Optionally, the position value includes the horizontal coordinate of the pixel; the step of comparing the color value of the first positioned pixel with the color values ​​of pixels at different position values ​​to determine the border width information of the page component includes:

[0035] Determine the first horizontal coordinate of the first positioned pixel;

[0036] Increment the first horizontal coordinate to obtain the second horizontal coordinate;

[0037] The color value of the first positioning pixel is compared with the color value of the pixel corresponding to the second horizontal coordinate to determine whether the color value of the first positioning pixel is the same as the color value of the pixel corresponding to the second horizontal coordinate.

[0038] If yes, increment the second horizontal coordinate and compare the color value of the first positioned pixel with the color value of the pixel corresponding to the second horizontal coordinate; if no, determine the border width information based on the difference between the second horizontal coordinate and the first horizontal coordinate.

[0039] Optionally, the position value further includes the ordinate of the pixel; determining the remaining positioning pixels and calculating the border rounded corner information of the page component based on the position values ​​of all the positioning pixels includes:

[0040] Based on the color values ​​of the boundary pixels, the color values ​​of the first positioning pixels, the pixel information, and the border width information, the rounded corner traversal range is defined, and the remaining positioning pixels are located.

[0041] Based on the x and y coordinates of all the positioned pixels, calculate the radius and center of each border corner.

[0042] The border rounded corner information is composed of the border rounded corner radius and the border rounded corner center of multiple border rounded corners.

[0043] Optionally, determining the font style information of the page component based on the pre-trained character recognition model, the background style information, and the border style information includes:

[0044] The font type of the page component is determined using the font recognition model.

[0045] The font color of the page component is determined based on the color value of the pixel that is different from the color value of the boundary pixel and the color value of the first positioning pixel.

[0046] The font height of the page component is determined based on the position value of the pixel corresponding to the font color.

[0047] Optionally, it also includes:

[0048] Construct a text image dataset; wherein, the text image dataset includes text images of various font types;

[0049] The text image is masked to extract the mask set of the text image;

[0050] The font recognition model is trained by taking the mask set as input and the font type of the text in the text image as output; wherein, the font recognition model adopts the VGG network model.

[0051] Based on the training results, the font recognition model is determined.

[0052] According to another aspect of the present invention, an apparatus for determining style information of page components is provided, comprising:

[0053] A receiving module is used to receive a style generation request for a page component; wherein the style generation request indicates a style image for the page component;

[0054] An input module is used to input the style image into a pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of pixels in historical style images;

[0055] The generation module is used to respond to the style generation request and obtain the style information of the page component based on the output of the component style model.

[0056] According to another aspect of the present invention, an electronic device for determining style information of page components is provided, comprising:

[0057] One or more processors;

[0058] Storage device for storing one or more programs.

[0059] When the one or more programs are executed by the one or more processors, the one or more processors implement the component style information generation method provided by the present invention.

[0060] According to another aspect of the present invention, a computer-readable medium is provided having a computer program stored thereon, which, when executed by a processor, implements the method for generating component style information provided by the present invention.

[0061] One embodiment of the above invention has the following advantages or beneficial effects: Because it utilizes a pre-trained component style model to identify the background style information, border style information, and text style information of the button component, it obtains component style information; wherein, the background color is determined based on the maximum color value of each pixel in the component image; the component image is traversed, and the border color is determined based on the color value of the first pixel that differs from the background color; the color value of the first positioned pixel is compared with the color value of the pixel below it, and the border width is determined based on the difference between the horizontal coordinate of the first pixel that differs from the border color and the horizontal coordinate of the first positioned pixel; the rounded corner traversal range is traversed, and 8 positioned pixels are determined; based on the horizontal and vertical coordinates of the 8 positioned pixels, the radius and center of the 4 rounded corners of the border are determined; the component image is identified using an improved VGG network model with an attention mechanism (i.e., extracting a mask set), and the font type of the text in the button component is determined; based on the color value not specified above... The font color is determined by the color value of the same pixel; the font height is determined by the difference between the maximum and minimum horizontal coordinates of the pixels within the font traversal range; and the technical means of generating component style information overcomes the technical problems of low accuracy of component style information generated by existing page UIs, resulting in coarse CSS styles that are unsuitable for C-end pages with high precision requirements and frequent interactions, leading to extremely unpleasant user experience and visual perception. This allows the received button component style image to be input into the component style model to generate component style information, which is then used to repeatedly generate the page UI, greatly improving component generation efficiency. Furthermore, the subsequent page UI styles generated based on the component style information are accurate and highly precise, applicable to various systems that require image-based component style information generation. This meets the precision, visual perception, and interaction needs of consumers / individual users, reduces the labor and time costs for front-end engineers, and improves their development efficiency.

[0062] The further effects of the aforementioned unconventional alternative methods will be explained below in conjunction with specific implementation methods. Attached Figure Description

[0063] The accompanying drawings are provided to better understand the invention and are not intended to unduly limit the scope of the invention. Wherein:

[0064] Figure 1 This is a schematic diagram of the main flow of a method for determining the style information of page components according to an embodiment of the present invention;

[0065] Figure 2(a) is a schematic diagram of a button assembly according to an embodiment of the present invention;

[0066] Figure 2(b) is a schematic diagram of the background style, border style and font style of the button component according to an embodiment of the present invention;

[0067] Figure 3 This is a schematic diagram of the main flow of the method for determining the component style model according to an embodiment of the present invention;

[0068] Figure 4 This is a schematic diagram of the cropping candidate frame according to an embodiment of the present invention;

[0069] Figure 5 This is a schematic diagram of pixel information according to an embodiment of the present invention. Figure 1 ;

[0070] Figure 6(a) is a schematic diagram of the main flow of the method for determining the background style information of a button component according to an embodiment of the present invention;

[0071] Figure 6(b) is a schematic diagram of the boundary pixels according to an embodiment of the present invention;

[0072] Figure 7(a) is a schematic diagram of the main flow of the method for determining the border style information of the button component according to an embodiment of the present invention;

[0073] Figure 7(b) is a schematic diagram of pixel information according to an embodiment of the present invention;

[0074] Figure 7(c) is a schematic diagram of the border width according to an embodiment of the present invention. Figure 1 ;

[0075] Figure 7(d) is a schematic diagram of the border width according to an embodiment of the present invention;

[0076] Figure 7(e) is a schematic diagram of the rounded corner traversal range according to an embodiment of the present invention;

[0077] Figure 7(f) is a schematic diagram of the fillet information of the border according to an embodiment of the present invention;

[0078] Figure 8 This is a schematic diagram of the main flow of a method for determining the font style information of a button component according to an embodiment of the present invention;

[0079] Figure 9(a) is a schematic diagram of the main flow of the method for determining the font recognition model according to an embodiment of the present invention;

[0080] Figure 9(b) is a schematic diagram of a text image according to an embodiment of the present invention;

[0081] Figure 9(c) is a schematic diagram of the improved model network structure according to an embodiment of the present invention;

[0082] Figure 9(d) is a schematic diagram of the font height according to an embodiment of the present invention;

[0083] Figure 10 This is a schematic diagram of the main modules of a device for determining the style information of page components according to an embodiment of the present invention;

[0084] Figure 11 An exemplary system architecture diagram is shown, illustrating a method for determining style information of page components or a device for determining style information of page components suitable for application in embodiments of the present invention.

[0085] Figure 12 This is a schematic diagram of the structure of a computer system suitable for implementing terminal devices or servers of the present invention. Detailed Implementation

[0086] The following description, in conjunction with the accompanying drawings, illustrates exemplary embodiments of the present invention, including various details to aid understanding. These details should be considered merely exemplary. Therefore, those skilled in the art will recognize that various changes and modifications can be made to the embodiments described herein without departing from the scope and spirit of the invention. Similarly, for clarity and brevity, descriptions of well-known functions and structures are omitted in the following description.

[0087] UI: User Interface, also known as user interface, refers to the overall design of software's human-computer interaction, operation logic, and aesthetics.

[0088] Figure 1 This is a schematic diagram illustrating the main flow of a method for determining the style information of page components according to an embodiment of the present invention, as shown below. Figure 1 As shown, the method for determining the style information of page components in this invention includes the following steps:

[0089] In current unforeseen circumstances (such as the 618 shopping festival or Double Eleven), the interaction between users and applications is usually fixed when responding to access requests. For example, clicking on an item image leads to the item details page, and only the item's UI changes. However, the UI is characterized by a large amount of data and high repetition. Therefore, to ensure the generation of UI for events under unforeseen circumstances, methods such as DTC (Drag and Drop) and drag-and-drop component style information are commonly used to generate UI style information. This information is then reused to generate UI, which greatly improves UI generation efficiency and reduces labor costs compared to manually generating UI.

[0090] However, existing one-click generation methods are designed for scenarios with extremely large amounts of data in page UI. Therefore, the generated page UI is rather crude; that is, the existing component style information is inaccurate and redundant, and the CSS styles derived from images are inaccurate. Faced with scenarios requiring high precision, visual appeal, and high interaction frequency in page UI, this approach simply cannot meet the user experience needs.

[0091] The method for generating style information of page components according to the present invention utilizes a component style model to generate component style information based on the received style image of a button component (or button component). This method achieves extremely high generation efficiency and accuracy. Subsequent page UI styles generated based on the component style information are accurate and highly precise. It can be applied to various systems that require image-based component style information generation, meeting the precision, visual appeal, and interaction needs of consumers / individual users. This significantly reduces the manpower and time costs for front-end engineers and improves their development efficiency.

[0092] Step S101: Receive a style generation request for a page component; wherein the style generation request indicates a style image for the page component.

[0093] In this embodiment of the invention, the page component is a button component. Based on the style image of the button component, the style information of the button component is generated, including the values ​​of features such as the background color, border color, border width, border rounded corners, font color, font height, and font type of the button component.

[0094] Step S102: Input the style image into the pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of the pixels in the historical style images.

[0095] In this embodiment of the invention, the style information of the button component is determined based on the color and position values ​​of the pixels in the style image; wherein, the component style information of the button component includes the background style information, the border style information, and the font style information. For example, the "Download Report" button shown in Figure 2(a) has the background style, border style, and font style shown in Figure 2(b).

[0096] In embodiments of the present invention, such as Figure 3 As shown, the method for determining the component style model of the present invention includes the following steps:

[0097] Step S301: Preprocess the style image to determine the pixel information of the page component.

[0098] In this embodiment of the invention, by preprocessing the style image, the color value and position value of each pixel of the image corresponding to the target component area including the button component can be determined. Then, the pixels of the target component area can be traversed, and the background style, border style, font style, etc. of the button component can be determined according to the color value and position value of the pixel.

[0099] Step S3011: Determine the cropping candidate box of the style image according to the preset cropping size; wherein the preset cropping size is greater than the maximum border size of the page component.

[0100] In this embodiment of the invention, a preset clipping size is determined based on the sum of the maximum border size and the border allowance of the button component. For example, if the button component is rectangular, the clipping candidate box is also rectangular. Figure 4 As shown, the border allowance includes the long side border allowance and the short side border allowance of the rectangle. The preset cropping size includes the short side size and the long side size of the cropping candidate box. The short side size of the cropping candidate box is determined by the sum of the maximum border size of the button component and the short side allowance, and the long side size of the cropping candidate box is determined by the sum of the maximum border size of the button component and the long side allowance.

[0101] Furthermore, the border margin is usually a few pixels. It can be determined based on a certain percentage of the maximum border size, such as 6% of the maximum border size. For example, if the maximum border size is 100 pixels, the border margin can be 6 pixels.

[0102] Step S3012: Use the cropping candidate box to crop the style image to determine the target component area containing the page component.

[0103] In this embodiment of the invention, the style image is cropped according to the preset cropping size, with the center of the button component as the center, to obtain a target component area including the button component. The size of the target component area is the same as that of the cropping candidate box.

[0104] Step S3013: Extract the pixel information of the target component region as the pixel information of the page component; wherein the pixel information is in a two-dimensional array format.

[0105] In this embodiment of the invention, pixel information consists of the pixel's color value and pixel's position value. The pixel's color value is expressed in the RGBA color space, including R (Red), G (Green), B (Blue), and a (Alpha channel, transparency); where a represents the pixel's transparency, 0 for completely transparent and 255 for completely opaque. The pixel's position value includes the pixel's horizontal coordinate and horizontal coordinate.

[0106] In this embodiment of the invention, the pixel information is in a two-dimensional array format, with each pixel represented by a 6-column array in the form of [RGB ax y]. For example, the pixel information in the 8th row and 26th columns of the button component is as follows: Figure 5 As shown.

[0107] In this embodiment of the invention, the function for extracting pixel information of the target component region can be rgba(), etc.

[0108] Step S302: Compare the color values ​​and position values ​​of multiple pixels of the page component to determine the background style information, border style information and font style information of the page component.

[0109] In this embodiment of the invention, the background color of the component is determined based on the maximum color value of the pixel in the target component area, thus obtaining the background style of the button component; the border color, border width, border fill attribute, border radius, border center, font, font color, font height, etc. of the component are determined by traversing each pixel in the target component area, thus obtaining the border style and font style of the button component.

[0110] Furthermore, by determining the height, width, and line spacing of the button component based on the position value of the rounded corners of the border, and by determining the border padding information based on the border properties of the button component, other style information of the button component can be obtained.

[0111] Step S3021: Determine the background style information of the page component based on the maximum color value of each pixel in the target component area.

[0112] In this embodiment of the invention, each pixel in the target component area is traversed, the color values ​​of each pixel are compared, and the pixel with the largest color value is determined as the first positioning pixel. The largest color value is the background color of the button component.

[0113] In an embodiment of the present invention, as shown in FIG6(a), the method for determining the background style information of the button component of the present invention includes the following steps:

[0114] In this embodiment of the invention, the background color of the button component is usually a single color.

[0115] Step S601: Traverse the pixels of the target component region.

[0116] In this embodiment of the invention, when determining the background color of the button component, the pixels of the target component area are traversed. The traversal order can be random or sequential. In the case of random traversal, any pixel can be randomly selected as the traversal starting point. In the case of sequential traversal, the boundary pixel of the target component area is selected as the traversal starting point. For example, as shown in Figure 6(b), when the cropping candidate box is a rectangle, the boundary pixel is the upper left corner vertex of the rectangular candidate box. The sequential traversal can be from left to right first, then from top to bottom; or, the sequential traversal can be from top to bottom first, then from left to right.

[0117] In this embodiment of the invention, initially, a background color data group is defined. The background color data group is used to store different color values ​​of pixels in the target component area and the number of pixels corresponding to the color values. Its initial value is empty. For example, an object colorObj = {} is defined, and the initial value of colorObj is an empty object.

[0118] Step S602: Determine whether the color value of the current traversed point is appearing for the first time. If yes, proceed to step S603; otherwise, proceed to step S604.

[0119] Step S603: Add the color value of the current traversed point to the preset background color data group.

[0120] In this embodiment of the invention, when the color value of the current traversal point is appearing for the first time, the color value of the current traversal point is added to the background color data group, and the initial number of pixels corresponding to the color value of the current traversal point is 1. For example, if the color value [210 245 255 255] of the current traversal point is appearing for the first time, the color value of the current traversal point is added to colorObj, and the number of pixels corresponding to the color value [210 245 255 255] is 1, that is, colorObj[210 245 255 255] = 1.

[0121] Step S604: Increment the number of pixels in the background color data group that correspond to the color value of the current traversed point.

[0122] In this embodiment of the invention, if the color value of the current traversal point is not the first occurrence, the number of pixels corresponding to the color value of the current traversal point is incremented. For example, if the color value [255 255 255 255] of the current traversal point is not the first occurrence, the number of pixels corresponding to the color value [255 255 255 255] is incremented, that is, colorObj[255 255 255 255]+=1.

[0123] Step S605: Determine whether the pixels of the target component region have been traversed. If yes, proceed to step S606; otherwise, proceed to step S602.

[0124] Step S606: Determine the maximum color value in the background color data group as the background color of the page component, and obtain the background style information.

[0125] In an embodiment of the present invention, for example, the maximum color value C in the colorObj object. backThis refers to the background color of the button component, `background-color`. Correspondingly, the generated button component's background style information is based on its background color `background-color` being `C`. back .

[0126] In this embodiment of the invention, the method for determining the background style information of the button component can determine the background color of the button component based on the maximum color value of the pixels in the target component area, thereby determining the background style of the button component and generating background style information, which can greatly improve the efficiency of generating the background style of the button component.

[0127] In this embodiment of the invention, the background style information can be generated using the following method:

[0128] Select any pixel in the target component region as the current pixel;

[0129] Add the color value of the current pixel to the preset background color data group;

[0130] Determine whether the color values ​​of all pixels in the target component region other than the current pixel are the same as the color value of the current pixel;

[0131] If not, add the color values ​​of other pixels to the background color data group, determine the maximum color value in the background color data group as the background color of the page component, and obtain the background style information.

[0132] Step S3022: Determine multiple positioning pixels in the target component area, and determine the border style information of the page component based on the color and position values ​​of the multiple positioning pixels.

[0133] In this embodiment of the invention, the button component in the target component area includes 8 positioning pixels. The border style includes border color, border width, and border rounded corners. The border color can be determined based on the color value of the first positioning pixel. The border width can be determined by comparing the color value of the first positioning pixel with the color value of the pixel below it at the same vertical coordinate. The information such as the radius of the four border rounded corners and the center of the border rounded corners can be determined based on the position values ​​of the 8 positioning pixels.

[0134] In an embodiment of the present invention, as shown in FIG7(a), the method for determining the border style information of the button component of the present invention includes the following steps:

[0135] Step S701: Determine the first positioning pixel based on the color value of the boundary pixel of the target component area, and determine the border color information of the page component based on the color value of the first positioning pixel.

[0136] Step S7011: Determine the boundary pixels of the target component region.

[0137] In this embodiment of the invention, the boundary pixel points of the target component region are determined according to the method shown in FIG6(b).

[0138] Step S7012: Compare the color value of the boundary pixel with the color values ​​of the adjacent pixels in sequence, and determine the first pixel whose color value is different from that of the boundary pixel as the first positioning pixel.

[0139] In this embodiment of the invention, for ease of description, the target component area is referred to as the parent component of the button component (i.e., the upper-level component of the button component), and denoted by C. (i，j) This indicates that the target component area comprises m rows and n columns = m*n pixels; where i < m, j < n, as shown in Figure 7(b). Since the target component area includes the button component, its size is typically larger than the button component's size, and the boundary pixel C... (0，0) The color value is the same as the color value of the parent component.

[0140] In this embodiment of the invention, the boundary pixel C is arranged in the order of first from left to right and then from top to bottom. (0，0) When comparing the color value of C with the color values ​​of its adjacent pixels in sequence, the first one compared with C... (0，0) The pixel with a different color value is the first positioning pixel, as shown in Figure 7(c), and is denoted as P. (top，left) .

[0141] Furthermore, when the button component has no border, its border color is the same as the background color of the parent component, and its border property is empty, i.e., the border property is none. Even further, the component style information also includes border padding information: when the border property is empty, the border-style property is none; when the border property is a solid line, the border-style property is solid. The component style information generation method of this invention typically only considers the case where border-style is solid.

[0142] Step S7013: Use the color value of the first positioned pixel as the border color of the page component to obtain the border color information of the page component.

[0143] In this embodiment of the invention, the first positioning pixel P (top，left) The color value is the border color of the button component, denoted as C. border .

[0144] Step S702: Compare the color value of the first positioned pixel with the color values ​​of pixels at different positions to determine the border width information of the page component.

[0145] Step S7021: Determine the first horizontal coordinate of the first positioning pixel.

[0146] In this embodiment of the invention, the first positioning pixel P (top，left) The first x-coordinate is top.

[0147] Step S7022: Increment the first horizontal coordinate to obtain the second horizontal coordinate.

[0148] In this embodiment of the invention, the second horizontal coordinate is top+s, and correspondingly, the pixel point corresponding to the second horizontal coordinate is P. (top+s，left) As shown in Figure 7(c), the increment interval is 1 pixel, and the initial value of s is 1.

[0149] Step S7023: Compare the color value of the first located pixel with the color value of the pixel corresponding to the second horizontal coordinate.

[0150] In this embodiment of the invention, the color values ​​of the first positioning pixel and each pixel below it on the same horizontal coordinate are compared sequentially. For example, the color values ​​of the first positioning pixel P are compared sequentially. (top，left) The color value and the pixel P corresponding to the second horizontal coordinate (top+s，left) The color values ​​are compared.

[0151] Step S7024: Determine whether the color value of the first positioning pixel is the same as the color value of the pixel corresponding to the second horizontal coordinate. If yes, proceed to step S7025; otherwise, proceed to step S7026.

[0152] Step S7025: Increment the second horizontal coordinate, then proceed to step S7023.

[0153] In this embodiment of the invention, at the first positioning pixel P (top，left) The color value and the pixel P corresponding to the second horizontal coordinate (top+s，left) When the color values ​​are the same, it indicates that pixel P (top+s，left) If the coordinate is within the border, increment the second horizontal coordinate by 1 pixel, i.e., s+ = 1.

[0154] Step S7026: Determine the border width information based on the difference between the second horizontal coordinate and the first horizontal coordinate.

[0155] In this embodiment of the invention, when the color value of the first positioning pixel is different from the color value of the pixel corresponding to the second horizontal coordinate, the pixel corresponding to the second horizontal coordinate at this time is denoted as... express Outside the border area, it can be determined by pixel points. With the first positioning pixel P (top，left) The difference in the horizontal coordinates determines the border width (border-width). Accordingly, the border width information of the generated button component is the button component's border width (border-width) in pixels. With the first positioning pixel P (top，left) The difference in the horizontal coordinates, the value of border-width is one or more pixels.

[0156] In this embodiment of the invention, the border width of the button component can be determined by comparing the color values ​​of the first positioning pixel with the pixels in the horizontal direction of increasing coordinates, and border width information can be generated, which can greatly improve the efficiency of generating the border style of the button component.

[0157] In this embodiment of the invention, the border width information can be generated using the following method:

[0158] By comparing the color values ​​of the first positioned pixel with those of the pixels above and below it at the same horizontal coordinate, the pixels above and below with different first color values ​​are identified. The border width is then determined based on the difference between the horizontal coordinates of the pixels above and below with different first color values. For example, the border width is determined by comparing the first positioned pixel P with the pixel below it. (top，left) The pixel on the upper side under the same horizontal coordinate is denoted as P. (top-t，left) The initial value of t is 1; and the first positioning pixel P (top，left) The pixel on the lower side under the same horizontal coordinate is denoted as P. (top+s，left) The initial value of s is 1. The first positioning pixel P... (top，left) The color values ​​are respectively related to pixel P (top-t，left) Pixel P (top+s，left) The color values ​​are compared. If they are the same, then t- = 1, s+ = 1, and so on, comparing sequentially until the first matching pixel P is determined. (top，left The pixels with different color values ​​on the same horizontal coordinate, and the first pixel P with the first positioning point. (top，left) Pixels with different color values ​​on the lower side of the same horizontal coordinate are denoted as follows: and As shown in Figure 7(d), based on pixel points and pixels The difference in the horizontal coordinates determines the border width (border-width). Accordingly, the generated button component's border width information indicates that the button component's border width (border-width) is in pixels. and pixels The difference between the x-coordinates is reduced by one.

[0159] Step S703: Determine the remaining positioning pixels, and calculate the corner radius information of the page component based on the position values ​​of all the positioning pixels.

[0160] Step S7031: Based on the color value of the boundary pixel, the color value of the first positioning pixel, the pixel information, and the border width information, define the rounded corner traversal range and locate the remaining positioning pixels.

[0161] In this embodiment of the invention, the rounded corner traversal range is shown as the shaded area in Figure 7(e). The shape of the rounded corner traversal range is usually the same as the target candidate area. Based on the color values ​​of the boundary pixels (i.e., background color), the color value of the first positioning pixel (i.e., border color), the color values ​​of each pixel (especially pixels with the same border color), and the border width, the size range of the border can be determined. A border margin is set inside and outside the border size range to define a rounded corner traversal range with the same shape as the border.

[0162] In this embodiment of the invention, starting from the first positioning pixel P (top，left) Begin by traversing the rounded corners from left to right and then from top to bottom, examining each pixel C within the traversal area. (i，j) The color value and the first positioning pixel P (top，left) Color values ​​(i.e., border color), color values ​​of boundary pixels C (0，0) The remaining individual pixels are then compared to determine their location. Specifically:

[0163] The first pixel that simultaneously satisfies the following two conditions is designated as the second positioning pixel, denoted as P. (top，right) ① The color value of the right-side pixel and the color value of the boundary pixel C (0，0) ① The same; ② The color value of the current pixel is the same as the color value C of the boundary pixel. (0，0) different.

[0164] Continue iterating until the first pixel that simultaneously satisfies the following three conditions is identified as the third positioning pixel, denoted as P. (left，top) ① The ordinate is less than the first localized pixel P. (top，left) ① The vertical coordinate; ② The color values ​​of the upper and left pixels and the color value of the boundary pixels C (0，0) Same; ③ The color values ​​of the current pixel and the pixel below it are the same as the color value C of the boundary pixel.(0，0) different.

[0165] Continue iterating until the first pixel that simultaneously satisfies the following three conditions is identified as the fourth positioning pixel, denoted as P. (right，top) ① The vertical coordinate is greater than the second positioning pixel P. (top，right) ① The vertical coordinate; ② The color values ​​of the right and top pixels and the color value C of the boundary pixels. (0，0) Same; ③ The color values ​​of the current pixel and the pixel below it are the same as the color value C of the boundary pixel. (0，0) different.

[0166] Continue iterating until the first pixel that simultaneously satisfies the following two conditions is identified as the fifth pixel, denoted as P. (left，bottom) ① The color values ​​of the left and bottom pixels are the same as the color value C of the boundary pixels. (0，0) ① The same; ② The color value of the current pixel is the same as the color value C of the boundary pixel. (0，0) different.

[0167] Continue iterating until the first pixel that simultaneously satisfies the following two conditions is identified as the sixth pixel, denoted as P. (right，bottom) ① The color values ​​of the right and bottom pixels are the same as the color value C of the boundary pixels. (0，0) ① The same; ② The color value of the current pixel is the same as the color value C of the boundary pixel. (0，0) different.

[0168] Continue iterating until the first pixel that simultaneously satisfies the following three conditions is identified as the seventh pixel, denoted as P. (bottom，left) ① The horizontal coordinate is greater than the fifth positioning pixel P. (left，bottom) ① The x-coordinate; ② The color values ​​of the left and bottom pixels and the color value of the boundary pixels C (0，0) Same; ③ The color values ​​of the current pixel and the right pixel are the same as the color value C of the boundary pixel. (0，0) different.

[0169] Continue iterating until the first pixel that simultaneously satisfies the following three conditions is identified as the eighth pixel, denoted as P. (bottom，right) ① The vertical coordinate is less than the sixth positioning pixel P. (right，bottom ) y-coordinate; ② color values ​​of the right and bottom pixels and the boundary pixel C (0，0) Same; ③ The color values ​​of the current pixel and the left pixel are the same as the color value C of the boundary pixel. (0，0) different.

[0170] Step S7032: Calculate the radius and center of the rounded corners of each border based on the x-coordinates and x-coordinates of all the positioned pixels.

[0171] In this embodiment of the invention, based on the first positioning pixel P (top，left) and the third positioning pixel P (left，top) Using the ordinate and abscissa of the coordinates, calculate the abscissa of the center of the first rounded corner as the third positioning pixel P. (left，top) The x-coordinate of the circle and the y-coordinate of the center point are the first localized pixel P. (top，left) The ordinate of the border, with the corner radius border-top-left-radius as the first positioning pixel P. (top，left) and the third positioning pixel P (left，top) The difference in the ordinates or the first localized pixel P (top，left) and the third positioning pixel P (left，top) The difference in the horizontal coordinates corresponds to the generation of the button component's border rounded corner information, which includes the center coordinates and radius of the first border rounded corner of the button component.

[0172] According to the second positioning pixel P (top，right) and the fourth positioning pixel P (right，top) Using the ordinate and abscissa of the coordinates, calculate the abscissa of the center of the second border rounded corner as the fourth positioning pixel P. (right，top) The x-coordinate of the circle and the y-coordinate of the center point are the second positioning pixel P. (top，right) The vertical coordinate is given by the border's corner radius (border-top-right-radius), which is the second positioning pixel P. (top，right) and the fourth positioning pixel P (right，top) The difference in the ordinates or the second location pixel P (top，right) and the fourth positioning pixel P (right，top) The difference in the horizontal coordinates corresponds to the generation of the button component's border rounded corner information, which includes the center coordinates and radius of the second border rounded corner of the button component.

[0173] According to the fifth positioning pixel P (left，bottom) and the seventh positioning pixel P (bottom，left) Using the ordinate and x-coordinate of the coordinates, calculate the x-coordinate of the center of the rounded corner of the third border as the fifth positioning pixel P. (left，bottom) The x-coordinate of the circle and the y-coordinate of the center point are the seventh positioning pixel P. (bottom，left) The vertical coordinate is given by the border's bottom-left-radius, which is the fifth positioning pixel P. (left，bottom) and the seventh positioning pixel P (bottom，left) The difference in the vertical coordinates or the fifth positioning pixel P (left，bottom) and the seventh positioning pixel P (bottom，left) The difference in the horizontal coordinates corresponds to the generation of the button component's border rounded corner information, which includes the center coordinates and radius of the third border rounded corner of the button component.

[0174] According to the sixth positioning pixel P (right，bottom) and the eighth positioning pixel P (bottom，right) Using the ordinate and x-coordinate, calculate the x-coordinate of the center of the fourth border rounded corner as the sixth positioning pixel P. (right，bottom) The x-coordinate of the circle and the y-coordinate of the center point are the eighth positioning pixel P. (bottom，right) The vertical coordinate is given by the border bottom-right radius, which is the sixth positioning pixel P. (right，bottom) and the eighth positioning pixel P (bottom，right) The difference in the vertical coordinates or the sixth positioning pixel P (right，bottom) and the eighth positioning pixel P (bottom，right) The difference in the horizontal coordinates corresponds to the generation of the button component's border rounded corner information, which includes the center coordinates and radius of the fourth border rounded corner of the button component.

[0175] Step S7033: The radius and center of the fillet of the multiple fillet corners of the border are used to form the fillet corner information.

[0176] In this embodiment of the invention, the border rounded corner radius (border-top-left-radius) and center coordinates of the first border rounded corner, the border rounded corner radius (border-top-right-radius) and center coordinates of the second border rounded corner, the border rounded corner radius (border-bottom-left-radius) and center coordinates of the third border rounded corner, and the border rounded corner radius (border-bottom-right-radius) and center coordinates of the fourth border rounded corner are combined to obtain the border rounded corner information of the button component.

[0177] In this embodiment of the invention, the method for determining the border style information of the button component can determine the first positioning pixel by sequentially comparing the color values ​​of the boundary pixels with the pixel values ​​of each pixel in the target component area; determine the border color information based on the color value of the first positioning pixel; determine the border width information by comparing the color value of the first positioning pixel with the color values ​​of each pixel below it at the same vertical coordinate; determine the rounded corner traversal range based on the border width and the border margin; locate multiple positioning pixels by comparing the color values ​​of each pixel within the rounded corner traversal range with the boundary pixels and the border color; and determine the border rounded corner information based on the difference in the position values ​​of the multiple positioning pixels, thereby obtaining the border style. This greatly improves the component generation efficiency, reduces the labor and time costs of front-end engineers, and improves the development efficiency of front-end engineers.

[0178] Step S3023: Determine the font style information of the page component based on the pre-trained text recognition model, the background style information, and the border style information.

[0179] In embodiments of the present invention, such as Figure 8 As shown, the method for determining the font style information of the button component of the present invention includes the following steps:

[0180] Step S801: Use the font recognition model to determine the font type of the page component.

[0181] In this embodiment of the invention, before using the font recognition model to determine the font type of the button component, the font traversal range is determined based on the target component area within the rounded corner traversal range.

[0182] In this embodiment of the invention, the pixel information within the font traversal range is input into the font recognition model. Based on the output of the font recognition model, the font type of the text in the button component in the component image can be determined.

[0183] In this embodiment of the invention, an OCR image recognition text module can also be embedded in the component style model of the invention to recognize font characters, that is, the text information of the button component.

[0184] Since existing machine learning algorithms have not successfully identified font types, and components are an important part of front-end development, especially in terms of page UI display requirements, accurate font type identification can greatly improve the accuracy of component page information, resulting in excellent page UI accuracy and a superior user experience when generated using this invention. Therefore, in this embodiment of the invention, the font recognition model can accurately identify the font type of component images by adding an attention mechanism to the VGG network model; the VGG network model performs well in terms of accuracy and speed in image classification tasks.

[0185] In an embodiment of the present invention, as shown in FIG9(a), the method for determining the font recognition model of the present invention includes the following steps:

[0186] Step S901: Construct a text image dataset; wherein the text image dataset includes text images of various font types.

[0187] While the VGG network model performs well in image classification tasks, its datasets mostly consist of faces or buildings, making them unsuitable for this invention. Therefore, this invention reconstructs a text image dataset to train the model, thereby accurately identifying the text type of button components.

[0188] In this embodiment of the invention, different font types of text, including Chinese, English, numbers and special symbols, are randomly entered on the page. Different text sizes and text backgrounds are set, and various text images are obtained after cropping, as shown in Figure 9(b). From left to right, they are serif font, sans-serif font, and Yuanti SC font.

[0189] Furthermore, the cropped text images are flipped, scaled, and rotated to achieve data augmentation. Based on the data-augmented text images, training samples for the font recognition model are determined.

[0190] Step S902: Perform masking processing on the text image and extract the mask set of the text image.

[0191] In this embodiment of the invention, when recognizing text images, the background of the text image is redundant information. Therefore, this invention adds an attention mechanism to the VGG network model, that is, performs masking processing on the text image, so that when training the font recognition model, it can focus on the text information of the text image. The improved model network structure is shown in Figure 9(c).

[0192] In this embodiment of the invention, the masking process is as follows: the text of the text image is set to 1, and the other parts are set to 0, thereby extracting the mask set of the text image.

[0193] Step S903: The font recognition model is trained by taking the mask set as input and the font type of the text in the text image as output; wherein the font recognition model adopts the VGG network model.

[0194] In this embodiment of the invention, when training the font recognition model, the convolution at each position of the mask set is represented as follows:

[0195]

[0196] In the above formula:

[0197] x' represents the output of the text image after convolution;

[0198] W represents the weights of the convolutional layer filter, that is, the weights corresponding to the convolution;

[0199] X represents the input text or image;

[0200] ⊙ represents element-wise, that is, dot product;

[0201] m represents the mask, that is, the corresponding (0, 1) mask.

[0202] sum(1) represents the sum of the number of 1s in the mask;

[0203] sum(m) represents the sum of the number of values ​​(including 0 and 1) in the mask set;

[0204] b represents the bias of the convolutional layer filter, that is, the bias coefficient corresponding to the convolution.

[0205] In this embodiment of the invention, the initial value of W is the grayscale value of the image, which is between 0 and 1; the initial value of m corresponds to the pixel point, with 1 for text and 0 otherwise; the value of b depends on the algorithm parameters, and the initial value of b is set to 0.37.

[0206] In this embodiment of the invention, during the multiple training processes of the font recognition model, the weights of the convolutional layer filters and the mask set are continuously updated to ensure that the output value is only related to the text information in the text image. The update of the mask set is shown in the following formula:

[0207]

[0208] In the above formula, m' represents the output of the mask after convolution.

[0209] The update of the weights of the convolutional layer filters is shown in the following equation:

[0210]

[0211] Step S904: Determine the font recognition model based on the training results.

[0212] In this embodiment of the invention, the final font recognition model is determined by repeatedly updating the weights of the convolutional layer filters and the mask set.

[0213] In this embodiment of the invention, the font type can be identified by the font recognition model of the present invention, thereby fully adapting to the needs of page UI display, making the component style information determined based on the component recognition model of the present invention more accurate and improving the user experience.

[0214] Step S802: Determine the font color of the page component based on the color value of the pixel that is different from the color value of the boundary pixel and the color value of the first positioning pixel.

[0215] In this embodiment of the invention, within the font traversal range, each pixel is traversed, and the color value of the pixel that is different from the background color and the border color is determined as the font color, denoted as C. font .

[0216] Step S803: Determine the font height of the page component based on the position value of the pixel corresponding to the font color.

[0217] In this embodiment of the invention, each pixel point corresponding to the font color is determined, and the font height font-size of the button component is determined based on the difference between the maximum and minimum horizontal coordinates of the pixel points, as shown in Figure 9(d).

[0218] In this embodiment of the invention, the method for determining the font style information of the button component can accurately determine the font type, font color, and font height of the text in the button component. This allows for the subsequent generation of a page UI with accurate and high precision based on the component style information, thus meeting the precision, visual appeal, and interaction needs of consumers / individual users.

[0219] Step S303: Based on the background style information, border style information, and font style information, generate the style information of the page component to obtain the component style model.

[0220] In this embodiment of the invention, the background style information, border style information and font style information obtained in step S302 are used to form the style information of the page components, thereby obtaining the component style model.

[0221] In this embodiment of the invention, the component style model determination method can determine the pixel information of the button component based on the preprocessing of the button component style image. Based on the comparison results of the color and position values ​​of multiple pixels, the background style information, border style information, and font style information of the component are determined, thereby generating component style information and obtaining a component style model. Subsequently, the component style model can be used to generate the component style information of the button component, and then the page UI can be repeatedly generated, greatly improving the efficiency of page UI generation. Moreover, the generated component style information has high accuracy, and the subsequent page UI style generated based on the component style information has high precision. It can be applied to various systems that require image-based component style information generation, meeting the precision, visual appeal, and interaction needs of consumers / individual users, reducing the labor and time costs of front-end engineers, and improving their development efficiency.

[0222] In this embodiment of the invention, other style information of the button component can also be generated, such as the length and width of the button component and the line spacing of multi-line fonts, wherein:

[0223] The length of the button component is the fourth positioning pixel P. (right,top) and the third positioning pixel P (left，top) The difference in the ordinates; the width of the button component is the first positioning pixel P. (top，left) and the seventh positioning pixel P(bottom，left) The difference in the x-coordinates.

[0224] When the text in a button component is a single line of text, the text center is usually horizontally and vertically centered. Therefore, the horizontal coordinate of the button component's text-align is the first positioning pixel P. (top，left) and the seventh positioning pixel P (bottom，left) The x-coordinate is the center; the y-coordinate is the fourth positioning pixel P. (right，top) and the third positioning pixel P (left，top) The center of the vertical coordinate.

[0225] The line height of the button component is the first positioning pixel P. (top，left) and the seventh positioning pixel P (bottom，left) The difference in the x-coordinates.

[0226] Step S103: In response to the style generation request, obtain the style information of the page component based on the output of the component style model.

[0227] In this embodiment of the invention, the component style model can output style information of the button component based on the input style image. For example, the code output by the component image shown in Figure 2(a) may include:

[0228] The background color of the button component is set to C. back The corresponding color value; the border-style property is set to solid; the border-color property is set to C. border The corresponding color value; the border width information is the border width of the button component, where border-width is in pixels. With the first positioning pixel P (top，left) The difference in x-coordinates; the x-coordinate of the center of the first rounded corner is the third positioning pixel P. (left，top) The x-coordinate of the circle and the y-coordinate of the center point are the first localized pixel P. (top，left) The ordinate of the border, with the corner radius border-top-left-radius as the first positioning pixel P. (top，left) and the third positioning pixel P (left，top) The difference in the ordinates or the first localized pixel P (top，left) and the third positioning pixel P (left，top) The difference in x-coordinates; the x-coordinate of the center of the second border rounded corner is the fourth positioning pixel P. (right，top) The x-coordinate of the circle and the y-coordinate of the center point are the second positioning pixel P. (top，right The vertical coordinate of the border is determined by the border-top-right-radius, which is the second positioning pixel P.(top，right) and the fourth positioning pixel P (right，top) The difference in the ordinates or the second location pixel P (top，right) and the fourth positioning pixel P (right，top) The difference in x-coordinates; the x-coordinate of the center of the third border rounded corner is the fifth positioning pixel P. (left，bottom) The x-coordinate of the circle and the y-coordinate of the center point are the seventh positioning pixel P. (bottom，left) The vertical coordinate is given by the border's bottom-left-radius, which is the fifth positioning pixel P. (left，bottom) and the seventh positioning pixel P (bottom，left) The difference in the vertical coordinates or the fifth positioning pixel P (left，bottom) and the seventh positioning pixel P (bottom，left) The difference in x-coordinates; the x-coordinate of the center of the fourth border rounded corner is the sixth positioning pixel P. (right，bottom) The x-coordinate of the circle and the y-coordinate of the center point are the eighth positioning pixel P. (bottom，right) The vertical coordinate is given by the border bottom-right radius, which is the sixth positioning pixel P. (right，bottom) and the eighth positioning pixel P (bottom，right) The difference in the vertical coordinates or the sixth positioning pixel P (right，bottom) and the eighth positioning pixel P (bottom，right) The difference in the x-coordinates.

[0229] In this embodiment of the invention, by receiving a style generation request for a page component; wherein the style generation request indicates a style image for the page component; inputting the style image into a pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of pixels in historical style images; and responding to the style generation request, obtaining the style information of the page component based on the output of the component style model, the received style image of a button component can be input into the component style model to generate component style information, thereby repeatedly generating the page UI. This greatly improves the component generation efficiency, and the subsequently repeatedly generated page UI style based on the component style information is accurate and has high precision. It can be applied to various systems that require image-based component style information generation, meeting the precision, visual appeal, and interaction needs of consumers / individual users, reducing the labor and time costs of front-end engineers, and improving their development efficiency.

[0230] Figure 10 This is a schematic diagram of the main modules of a device for determining the style information of page components according to an embodiment of the present invention, such as... Figure 10 As shown, the page component style information determining device 1000 of the present invention includes:

[0231] The receiving module 1001 is used to receive a style generation request for a page component; wherein the style generation request indicates a style image of the page component.

[0232] In this embodiment of the invention, the page component is a button component, and the receiving module 1001 is used to receive the style generation request of the button component, so that the component style information generation device 1000 generates the style information of the button component according to the style image of the button component.

[0233] The input module 1002 is used to input the style image into a pre-trained component style model; wherein the component style model is trained based on the color value and position value of the pixels in the historical style image.

[0234] In this embodiment of the invention, the input module 1002 of the component style model receives a style image, so that the component style model determines the style information of the button component based on the color value and position value of the pixel of the style image; wherein, the component style information of the button component includes the background style information of the button component, the border style information of the button component, and the font style information of the button component.

[0235] The generation module 1003 is used to respond to the style generation request and obtain the style information of the page component based on the output of the component style model.

[0236] In this embodiment of the invention, the generation module 1003 obtains the style information of the button component based on the output of the component style model.

[0237] In this embodiment of the invention, through modules such as a receiving module, an input module, and a generating module, the received style image of the button component can be input into the component style model to generate component style information, and then the page UI can be repeatedly generated. This greatly improves the component generation efficiency, and the page UI style repeatedly generated based on the component style information is accurate and has high precision. It can be applied to various systems that require image-generated component style information, meeting the precision, visual appeal, and interaction needs of consumers / individual users, reducing the labor and time costs of front-end engineers, and improving the development efficiency of front-end engineers.

[0238] Figure 11 An exemplary system architecture diagram is shown, illustrating a method or apparatus for determining style information of page components suitable for application in embodiments of the present invention, such as... Figure 11 As shown, an exemplary system architecture for the method or apparatus for determining the style information of page components according to embodiments of the present invention includes:

[0239] like Figure 11As shown, system architecture 1100 may include terminal devices 1101, 1102, and 1103, network 1104, and server 1105. Network 1104 is used as a medium to provide communication links between terminal devices 1101, 1102, and 1103 and server 105. Network 1104 may include various connection types, such as wired or wireless communication links or fiber optic cables, etc.

[0240] Users can use terminal devices 1101, 1102, and 1103 to interact with server 1105 via network 1104 to receive or send messages, etc. Various communication client applications can be installed on terminal devices 1101, 1102, and 1103, such as component-style messaging applications, shopping applications, web browser applications, search applications, instant messaging tools, email clients, social media platform software, etc.

[0241] Terminal devices 1101, 1102, and 1103 can be various electronic devices with displays and web browsing capabilities, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0242] Server 1105 can be a server that provides various services, such as a backend management server that supports websites displaying component style information browsed by users using terminal devices 1101, 1102, and 1103. The backend management server can analyze and process data such as received page component style generation requests, and feed back the processing results (such as page component style information) to terminal devices 1101, 1102, and 1103.

[0243] It should be noted that the method for determining the style information of page components provided in this embodiment of the invention is generally executed by the server 1105, and correspondingly, the device for determining the style information of page components is generally set in the server 1105.

[0244] It should be understood that Figure 11 The number of terminal devices, networks, and servers shown is merely illustrative. Depending on implementation needs, any number of terminal devices, networks, and servers can be included.

[0245] Figure 12 This is a schematic diagram of the structure of a computer system suitable for implementing terminal devices or servers of the present invention, such as... Figure 12 As shown, the computer system 1200 of the terminal device or server in this embodiment of the invention includes:

[0246] The central processing unit (CPU) 1201 can perform various appropriate actions and processes based on programs stored in read-only memory (ROM) 1202 or programs loaded from storage section 1208 into random access memory (RAM) 1203. RAM 1203 also stores various programs and data required for the operation of system 1200. CPU 1201, ROM 1202, and RAM 1203 are interconnected via bus 1204. Input / output (I / O) interface 1205 is also connected to bus 1204.

[0247] The following components are connected to I / O interface 1205: an input section 1206 including a keyboard, mouse, etc.; an output section 1207 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and speakers, etc.; a storage section 1208 including a hard disk, etc.; and a communication section 1209 including a network interface card such as a LAN card, modem, etc. The communication section 1209 performs communication processing via a network such as the Internet. A drive 1210 is also connected to I / O interface 1205 as needed. Removable media 1211, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., are installed on drive 1210 as needed so that computer programs read from them can be installed into storage section 1208 as needed.

[0248] In particular, according to embodiments disclosed in this invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments disclosed in this invention include a computer program product comprising a computer program carried on a computer-readable medium, the computer program containing program code for performing the methods shown in the flowcharts. In such embodiments, the computer program can be downloaded and installed from a network via communication section 1209, and / or installed from removable medium 1211. When the computer program is executed by central processing unit (CPU) 1201, it performs the functions defined above in the system of this invention.

[0249] It should be noted that the computer-readable medium shown in this invention can be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium can be, for example,—but not limited to—an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination thereof. More specific examples of a computer-readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable compact disk read-only memory (CD-ROM), optical storage device, magnetic storage device, or any suitable combination thereof. In this invention, a computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this invention, a computer-readable signal medium can include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. Such propagated data signals can take various forms, including but not limited to electromagnetic signals, optical signals, or any suitable combination thereof. Computer-readable signal media can also be any computer-readable medium other than computer-readable storage media, which can send, propagate, or transmit a program for use by or in connection with an instruction execution system, apparatus, or device. The program code contained on the computer-readable medium can be transmitted using any suitable medium, including but not limited to: wireless, wire, optical fiber, RF, etc., or any suitable combination thereof.

[0250] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of the present invention. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of code containing one or more executable instructions for implementing a specified logical function. It should also be noted that in some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutively indicated blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in a block diagram or flowchart, and combinations of blocks in a block diagram or flowchart, may be implemented using a dedicated hardware-based system that performs the specified function or operation, or using a combination of dedicated hardware and computer instructions.

[0251] The modules described in the embodiments of the present invention can be implemented in software or hardware. The described modules can also be housed in a processor; for example, a processor may be described as including a receiving module, an input module, and a generating module. The names of these modules do not necessarily limit the module itself; for example, the generating module may also be described as "a module that obtains the style information of the page component based on the output of the component style model."

[0252] In another aspect, the present invention also provides a computer-readable medium, which may be included in the device described in the above embodiments; or it may exist independently and not assembled into the device. The computer-readable medium carries one or more programs that, when executed by the device, cause the device to include: receiving a style generation request for a page component; wherein the style generation request indicates a style image of the page component; inputting the style image into a pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of pixels in historical style images; and, in response to the style generation request, obtaining style information of the page component based on the output of the component style model.

[0253] According to the technical solution of the present invention, style information of the button component can be generated based on the style image of the button component; and the modified VGG model with attention mechanism can be used as a font recognition model to identify the font type of the text in the button component.

[0254] According to the technical solution of the present invention, the received button component style image can be input into the component style model to generate component style information, and then the page UI can be repeatedly generated, which greatly improves the component generation efficiency. Moreover, the page UI style repeatedly generated based on the component style information is accurate and has high precision. It can be applied to various systems that have the need to generate component style information from images, meet the precision, visual and interactive needs of consumers / individual users, reduce the labor and time costs of front-end engineers, and improve the development efficiency of front-end engineers.

[0255] The specific embodiments described above do not constitute a limitation on the scope of protection of this invention. Those skilled in the art should understand that various modifications, combinations, sub-combinations, and substitutions can occur depending on design requirements and other factors. Any modifications, equivalent substitutions, and improvements made within the spirit and principles of this invention should be included within the scope of protection of this invention.

Claims

1. A method for determining the style information of a page component, characterized in that, include: Receive a style generation request for a page component; wherein the style generation request indicates a style image for the page component; The style image is input into a pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of the pixels in historical style images; In response to the style generation request, the style information of the page component is obtained based on the output of the component style model; Also includes: The style image is preprocessed to determine the pixel information of the page components; The color and position values ​​of multiple pixels of the page component are compared to determine the background style information, border style information, and font style information of the page component. Based on the background style information, border style information, and font style information, the style information of the page component is generated, and the component style model is obtained.

2. The method according to claim 1, characterized in that, The preprocessing of the style image to determine the pixel information of the page components includes: Based on a preset cropping size, a cropping candidate box for the style image is determined; wherein, the preset cropping size is greater than the maximum border size of the page component; The style image is cropped using the cropping candidate box to determine the target component area containing the page component; The pixel information of the target component region is extracted as the pixel information of the page component; wherein the pixel information is in a two-dimensional array format.

3. The method according to claim 2, characterized in that, The step of comparing the color and position values ​​of multiple pixels of the page component to determine the background style information, border style information, and font style information of the page component includes: The background style information of the page component is determined based on the maximum color value of each pixel in the target component area; Determine multiple positioning pixels in the target component area, and determine the border style information of the page component based on the color and position values ​​of the multiple positioning pixels; The font style information of the page components is determined based on the pre-trained character recognition model, the background style information, and the border style information.

4. The method according to claim 3, characterized in that, Determining the background style information of the page component based on the maximum color value of each pixel in the target component area includes: Iterate through the pixels of the target component region; Determine whether the color value of the current traversal point is appearing for the first time. If so, add the color value of the current traversal point to the preset background color data group; otherwise, increment the number of pixels in the background color data group corresponding to the color value of the current traversal point. After traversing all pixels in the target component area, the maximum color value in the background color data group is determined to be the background color of the component, thus obtaining the background style information.

5. The method according to claim 3, characterized in that, The step of determining multiple positioning pixels of the target component region and determining the border style of the page component based on the color and position values ​​of the multiple positioning pixels includes: Based on the color value of the boundary pixel of the target component area, a first positioning pixel is determined, and the border color information of the page component is determined based on the color value of the first positioning pixel. The color value of the first positioned pixel is compared with the color values ​​of pixels at different positions to determine the border width information of the page component; Determine the remaining positioning pixels, and calculate the corner radius information of the page component based on the position values ​​of all the positioning pixels.

6. The method according to claim 5, characterized in that, The step of determining the first positioning pixel based on the color value of the boundary pixel of the target component region, and determining the border color information of the page component based on the color value of the first positioning pixel, includes: Determine the boundary pixels of the target component region; The color value of the boundary pixel is compared sequentially with the color values ​​of the adjacent pixels, and the first pixel whose color value is different from that of the boundary pixel is determined as the first positioning pixel. The color value of the first located pixel is used as the border color of the page component to obtain the border color information of the page component.

7. The method according to claim 6, characterized in that, The position value includes the horizontal coordinate of the pixel; the step of comparing the color value of the first positioned pixel with the color values ​​of pixels at different position values ​​to determine the border width information of the page component includes: Determine the first horizontal coordinate of the first positioned pixel; Increment the first horizontal coordinate to obtain the second horizontal coordinate; The color value of the first positioning pixel is compared with the color value of the pixel corresponding to the second horizontal coordinate to determine whether the color value of the first positioning pixel is the same as the color value of the pixel corresponding to the second horizontal coordinate. If yes, increment the second horizontal coordinate and compare the color value of the first positioned pixel with the color value of the pixel corresponding to the second horizontal coordinate; if no, determine the border width information based on the difference between the second horizontal coordinate and the first horizontal coordinate.

8. The method according to claim 7, characterized in that, The position value also includes the ordinate of the pixel; determining the remaining positioning pixels, and calculating the corner radius information of the page component based on the position values ​​of all the positioning pixels, includes: Based on the color values ​​of the boundary pixels, the color values ​​of the first positioning pixels, the pixel information, and the border width information, the rounded corner traversal range is defined, and the remaining positioning pixels are located. Based on the x and y coordinates of all the positioned pixels, calculate the radius and center of each corner of the border. The border rounded corner information is composed of the border rounded corner radius and the border rounded corner center of multiple border rounded corners.

9. The method according to claim 3, characterized in that, The step of determining the font style information of the page component based on the pre-trained text recognition model, the background style information, and the border style information includes: The font type of the page component is determined using a font recognition model; The font color of the page component is determined based on the color value of the pixel that is different from the color value of the boundary pixel and the color value of the first positioning pixel. The font height of the page component is determined based on the position value of the pixel corresponding to the font color.

10. The method according to claim 9, characterized in that, Also includes: Construct a text image dataset; wherein, the text image dataset includes text images of various font types; The text image is masked to extract the mask set of the text image; The font recognition model is trained by taking the mask set as input and the font type of the text in the text image as output; wherein, the font recognition model adopts the VGG network model. Based on the training results, the font recognition model is determined.

11. A device for determining the style information of a page component, characterized in that, include: A receiving module is used to receive a style generation request for a page component; wherein the style generation request indicates a style image for the page component; An input module is used to input the style image into a pre-trained component style model; wherein the component style model is trained based on the color and position values ​​of pixels in historical style images; A generation module is used to respond to the style generation request and obtain the style information of the page component based on the output of the component style model; The input module is also used for: The style image is preprocessed to determine the pixel information of the page components; The color and position values ​​of multiple pixels of the page component are compared to determine the background style information, border style information, and font style information of the page component. Based on the background style information, border style information, and font style information, the style information of the page component is generated, and the component style model is obtained.

12. An electronic device for determining the style information of page components, characterized in that, include: One or more processors; Storage device for storing one or more programs. When the one or more programs are executed by the one or more processors, the one or more processors implement the method as described in any one of claims 1-10.

13. A computer-readable medium having a computer program stored thereon, characterized in that, When the program is executed by the processor, it implements the method as described in any one of claims 1-10.

Images