Method and system for automatically optimizing user interface

Abstract

The invention relates to a method and system for automatically optimizing a user interface, and the method comprises the steps: obtaining dictionary data of the user interface for a to-be-optimized user interface, the dictionary data comprising basic information and first attribute information of UI components in the user interface; generating more than one first type of containers according to the basic information of the UI component, and updating a dictionary data structure according to the first type of containers and the dictionary data to obtain an updated dictionary; according to the updated dictionary, using a projection algorithm and a large language model to obtain the layout of each UI component of each level in the current dictionary and the position relationship of each UI component in the layout from outside to inside; and according to the layout and position relationship of each level of UI component in the current dictionary, adjusting the position coordinates of each UI component from outside to inside, and generating a user interface after layout optimization. According to the method, the technical problems of unattractive manual layout, low efficiency and repeated labor in the prior art are solved.

Description

Technical Field

[0001] The present invention relates to the technical field of interface layout optimization, and in particular to a method and system for automatically optimizing a user interface. Background Art

[0002] With the complexity of modern software development and the increase in user needs, the design of the user interface (UI) has become one of the key factors for the success of software products. Good UI design not only affects the user's operating experience, but also directly affects the market competitiveness of the product. In the traditional UI design process, developers usually need to manually set the size, spacing and alignment of each component. Especially for pages containing a large number of components and complex nested layouts, manual adjustments become particularly cumbersome. The layout of complex pages must not only be beautiful and simple, but also ensure consistency on different devices, which makes UI design one of the time-consuming and labor-intensive links in the development process.

[0003] Although some existing UI design tools provide some automatic layout functions, these functions are often relatively rudimentary and cannot fully solve problems such as component alignment, container nesting, and layout optimization in complex layouts. For example, in a multi-row and multi-column form layout, the spacing and alignment between different components are prone to inconsistency, affecting the overall appearance of the page. Especially in the face of rapid iterative development, developers frequently adjust the page layout, which will lead to a lot of duplication of work and easily introduce new design irregularities or visual dislocation problems.

[0004] To address these pain points, the industry urgently needs an automated UI beautification solution that can automatically adjust the coordinates, spacing, and alignment of components based on the existing layout structure, reduce manual intervention, and improve development efficiency while ensuring aesthetics and consistency. Summary of the invention

[0005] In view of the above-mentioned shortcomings and deficiencies of the prior art, the present invention provides a method and system for automatically optimizing a user interface, which solves the technical problems of the prior art such as unsightly manual layout, low efficiency and repetitive labor.

[0006] In order to achieve the above object, the main technical solutions adopted by the present invention include: In a first aspect, an embodiment of the present invention provides a method for automatically optimizing a user interface, comprising: S100: for a user interface to be optimized, obtaining dictionary data of the user interface, the dictionary data including: basic information and first attribute information of UI components in the user interface; S200, generating one or more first-type containers according to basic information of the UI component, wherein the first-type containers include: UI components having at least one parent-child hierarchical relationship; S300, updating the dictionary data structure according to the first type container and the dictionary data to obtain an updated dictionary; S400, according to the updated dictionary, using a projection algorithm and a large language model to obtain the layout of each UI component at each level in the current dictionary and the positional relationship of each UI component in the layout from the outside to the inside; S500: According to the layout and position relationship of each level of UI components in the current dictionary, adjust the position coordinates of each UI component from the outside to the inside to generate a user interface with optimized layout.

[0007] Optionally, the basic information of the UI component includes: component name, component type, component position, component width, and / or component height; The attribute information of the UI component includes: component color, component font size, component position attribute, and / or flex layout attribute; the flex layout attribute is the attribute identified by the projection algorithm in S400; The data structure of the UI components in the first type container, the second type container and the third type container includes: a hierarchical relationship structure.

[0008] Optionally, S400, according to the updated dictionary, using a projection algorithm and a large language model to obtain the layout of each UI component at each level in the current dictionary and the position relationship of each UI component in the layout from the outside to the inside, including: S401, according to the updated dictionary, using a projection algorithm to determine the layout of each UI component at each level in the current dictionary and the first position relationship of each UI component in the layout from the outside to the inside; and generating a second type of container according to the first position relationship of each UI component in the layout; S402: Optimize the second type container by using a large language model to generate a third type container and a second position relationship of each UI component in the third type container; S403, taking the second positional relationship as the positional relationship between the UI components as to whether they belong to a nested structure, and according to the layout of the UI components at each level identified, obtaining the flex layout attributes of the UI components at each level and adding them to the first attribute information; The layout includes a vertical layout or a horizontal layout.

[0009] Optionally, S401, according to the updated dictionary, using a projection algorithm to determine the layout of each UI component at each level in the current dictionary and the first position relationship of each UI component in the layout from the outside to the inside; and generating a second type container according to the first position relationship of each UI component in the layout, including: For each level of UI components, determine whether there is a penetration line of vertical layout according to the beam from left to right of the projection algorithm. If there is a penetration line, determine that the UI components of the current level are in vertical layout; If there is no penetration line of the vertical layout, determine whether there is a penetration line of the horizontal layout based on the top-to-bottom beam of the projection algorithm. If so, determine that the UI component of the current level is in the horizontal layout; At the same time, a second type of container is generated according to the penetration line of the vertical layout / the penetration line of the horizontal layout.

[0010] Optionally, S402, optimizing the second type container by using a large language model to generate a third type container and a second position relationship of each UI component in the third type container, includes: For each level of UI components, input the basic information and first attribute information of the UI components of the current level, and the basic information and first attribute information of the UI components in the next level of the current level into the prompt words of the large language model to obtain a third type container output by the large language model; The prompt words are preset based on the semantic information or semantic structure of the UI components in the current level and the next level.

[0011] Optionally, according to the layout and position relationship of each level of UI components in the current dictionary, the position coordinates of each UI component are adjusted from outside to inside, including: If the layout is a vertical layout, for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; Adjust the width of all child components in the current hierarchy to the width of the parent container minus the side margins, which are the preset side margins of the current parent container; Determine whether there is an immutable component marked as an immutable component in the parent container, and if so, modify the interface XY coordinates of the immutable component; the height of the immutable component remains unchanged; For other variable components in the parent container, the remaining parent container height is divided according to the original height numerical ratio; the original height numerical ratio is the height numerical ratio of the corresponding UI component in the dictionary data; Arrange other variable components in the container in order, and adjust the interface XY coordinates of each variable component; and / or, If the layout is horizontal, then for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; Divide the width of all subcomponents in the parent container of the current level by the width of the parent container according to the original width numerical ratio; the original width numerical ratio is the width numerical ratio of the corresponding UI component in the dictionary data; Determine whether there is an immutable component marked as an immutable component in the parent container, and if so, modify the interface XY coordinates of the immutable component; the width of the immutable component remains unchanged; For other variable components in the parent container, set the height of other variable components to the maximum value of the heights of all immutable components; Arrange other variable components in the parent container in order, and adjust the interface XY coordinates of each variable component.

[0012] Optionally, for each level, the parent container of the current level and the subcomponents of the next level in the parent container are adjusted in linkage; When both the parent container and the child components are variable components, the internal coordinates of the child components are adjusted adaptively as the coordinates of the parent container are adjusted.

[0013] Optionally, according to the layout and position relationship of each level of UI components in the current dictionary, the position coordinates of each UI component are adjusted from outside to inside, further comprising: According to the flex layout properties of each UI component at each level, the alignment of each UI component is obtained with the help of the trained GBDT model, and the alignment mode of each UI component at the current level is adjusted; The alignment modes include: left alignment, right alignment, and center alignment.

[0014] Optionally, for an equal-division layout in a vertical layout or an equal-division layout in a horizontal layout, i.e., middle alignment, the number of rows and columns of child components in the parent container of the current layer is identified through a projection algorithm, and the XY coordinates, width, and height of each child component are recalculated; the adjusted component positions can maintain consistent layout logic; Adaptive line spacing :

[0015] Container coordinates , : ; ; ;

[0016] in: is the total height of the parent container of the current layer. is the number of vertical segmentation gaps, len indicates the number of gaps to be found, represents the interval of vertical distribution, d h Indicates the height of the components inside the container. Indicates the number of vertical components; n represents the number of all components in the container, % represents the remainder sign, and dw represents the width of the components inside the container; is the total width of the parent container of the current layer; 12 is the margins on both sides of the parent container of the current layer; 48 is the fixed spacing between components; is the number of lateral separation gaps; , The coordinates of the parent container of the current layer.

[0017] In a second aspect, an embodiment of the present invention provides a system for automatically optimizing a user interface, including: A dictionary data acquisition unit, used for acquiring dictionary data of a user interface to be optimized, wherein the dictionary data includes basic information and first attribute information of a UI component in the user interface; The layout optimization unit is used to generate one or more first-type containers according to the basic information of the UI interface, wherein the first-type containers include: UI components having at least one parent-child hierarchical relationship; According to the first type of container and the dictionary data, updating the dictionary data structure to obtain an updated dictionary; According to the updated dictionary, the projection algorithm and the large language model are used to obtain the layout of each UI component at each level in the current dictionary and the position relationship of each UI component in the layout from the outside to the inside; According to the layout and position relationship of each level of UI components in the current dictionary, the position coordinates of each UI component are adjusted from the outside to the inside to generate a user interface with optimized layout.

[0018] A method and system for automatically optimizing a user interface of the present invention can automatically adjust the coordinates, spacing and alignment of components according to an existing layout structure, reduce manual intervention, and improve development efficiency while ensuring aesthetics and consistency.

[0019] In the embodiment of the present invention, by parsing dictionary data, automatically identifying component relationships and layout patterns, and intelligently optimizing the overall structure of the page, not only can the workload of developers be significantly reduced, but also the accuracy and standardization of UI design can be improved, thereby improving user experience and product quality. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] Figure 1 A flowchart of a method for automatically optimizing a user interface provided by an embodiment of the present invention; Figure 2 A schematic flow chart of a method for automatically optimizing a user interface provided by another embodiment of the present invention; Figure 3 A schematic diagram of determining a layout using a projection algorithm according to an embodiment of the present invention; Figure 4A schematic diagram of generating a third type of container for large language model recognition according to an embodiment of the present invention; Figure 5 Schematic diagram of the process of step S400 and step S500 of an embodiment of the present invention; Figure 6 for Figure 4 Schematic diagram of semantic information prompt words using a large language model; Figure 7 This is a schematic diagram of a nested structure UI component according to an embodiment of the present invention. DETAILED DESCRIPTION

[0021] In order to better explain the present invention and facilitate understanding, the present invention is described in detail below through specific implementation modes in conjunction with the accompanying drawings.

[0022] The present invention provides a method and system for automatically optimizing a user interface, which automatically identifies the layout relationship of each component in a UI page by parsing and analyzing input dictionary data, aligns, merges, adjusts and optimizes the layout of containers and internal components, and finally generates a beautified page with a clear structure, strong visual consistency and in compliance with design specifications.

[0023] In user use, the system of this embodiment can be understood as a plug-in, and the plug-in is called to input dictionary data: detailed information representing each component in the UI page, including the component type (such as button, text box, container, etc.), component name (unique ID identifying the component), component coordinate information (x, y position, width, height), and component style attributes (such as color, font, background, etc.). The plug-in outputs a beautified page dictionary data structure: after automatic optimization by the embodiment of the present invention, the output dictionary data will include the optimized component layout, adjusted component coordinates and container structure.

[0024] In order to better understand the above technical solution, exemplary embodiments of the present invention will be described in more detail below with reference to the accompanying drawings. Although exemplary embodiments of the present invention are shown in the accompanying drawings, it should be understood that the present invention can be implemented in various forms and should not be limited by the embodiments described herein. On the contrary, these embodiments are provided to enable a clearer and more thorough understanding of the present invention and to fully convey the scope of the present invention to those skilled in the art.

[0025] like Figure 1 and Figure 2 As shown, an embodiment of the present invention provides a method for automatically optimizing a user interface, and the steps of the method may include: S100: for a user interface to be optimized, obtaining dictionary data of the user interface, the dictionary data including: basic information and first attribute information of UI components in the user interface; For example, the basic information of the UI component in this step includes: component name, component type, component position, component width, and component height; Correspondingly, the attribute information of the UI component obtained in step S100 includes: component color, component font size, and component position attributes.

[0026] S200. Generate one or more first-type containers according to basic information of the UI component, where the first-type containers include: UI components having at least one parent-child hierarchical relationship.

[0027] In this step, the information of the flat structure of the UI component is parsed, the parent-child hierarchical relationship is identified, and a first type container is obtained. The first type container is a UI component with a nested structure. When the first type container is a two-layer structure, the parent container is the outer UI component, and the child component of the parent container is the inner UI component of the first type container.

[0028] S300: Update the dictionary data structure according to the first type container and the dictionary data to obtain an updated dictionary. The updated dictionary has a hierarchical structure.

[0029] S400 , according to the updated dictionary, using a projection algorithm and a large language model to obtain the layout of each UI component at each level in the current dictionary and the positional relationship of each UI component in the layout from outside to inside.

[0030] After step S400, the attribute information of the UI component may include: flex layout attributes.

[0031] The flex layout attribute of this embodiment can be a horizontal layout attribute or a vertical layout attribute, that is, an attribute of horizontal arrangement or vertical arrangement.

[0032] S500: According to the layout and position relationship of each level of UI components in the current dictionary, adjust the position coordinates of each UI component from the outside to the inside to generate a user interface with optimized layout.

[0033] The method of this embodiment can achieve page margin normalization, and ensure that the page layout is neat and consistent and meets the design standards by adjusting the page margins and component spacing.

[0034] At the same time, it can provide component spacing and alignment optimization. By automatically identifying the arrangement of components (such as horizontal alignment, vertical alignment, etc.), it optimizes the spacing between different components to make the page layout more neat and beautiful.

[0035] In practical applications, flexible container flex layout is supported to automatically adjust the arrangement and alignment mode of components in the container.

[0036] To better understand the above-mentioned step S400 and step S500, these two steps are described in detail below.

[0037] S401: according to the updated dictionary, using a projection algorithm to determine the layout of each UI component at each level in the current dictionary and the first position relationship of each UI component in the layout from the outside to the inside; and generating a second type container according to the first position relationship of each UI component in the layout, For example, for each level of UI components, based on the beam from left to right of the projection algorithm, it is determined whether there is a penetration line of vertical layout. If there is a penetration line, it is determined that the UI components of the current level are in vertical layout; If there is no penetration line of the vertical layout, determine whether there is a penetration line of the horizontal layout based on the top-to-bottom light beam of the projection algorithm. If so, determine that the UI component of the current level is a horizontal layout; at the same time, generate a second type of container based on the penetration line of the vertical layout / the penetration line of the horizontal layout.

[0038] S402: Optimize the second type container using a large language model to generate a third type container and a second position relationship of each UI component in the third type container.

[0039] It can be understood that, for each level of UI components, the basic information and the first attribute information of the UI components of the current level, and the basic information and the first attribute information of the UI components in the next level of the current level are input into the prompt words of the large language model to obtain the third type container output by the large language model; The prompt words are preset based on the semantic information or semantic structure of the UI components in the current level and the next level.

[0040] S403, taking the second positional relationship as the positional relationship of each UI component, and according to the layout of each level of UI components identified, obtaining the flex layout attributes of each level of UI components and adding them to the first attribute information; The layout includes a vertical layout or a horizontal layout. The position relationship in S403 may be a position relationship of a nested structure.

[0041] The above step S500 may include the following sub-steps: S501A: If the layout is a vertical layout, then for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; S502A, adjusting the width of all subcomponents in the current level to the width of the parent container minus the side margins, where the side margins are the preset side margins of the current parent container; S503A, determining whether there is an immutable component marked as an immutable component in the parent container, and if so, modifying the interface XY coordinates of the immutable component; the height of the immutable component remains unchanged; S504A: for other variable components in the parent container, divide the remaining parent container height according to the original height numerical ratio; the original height numerical ratio is the height numerical ratio of the corresponding UI component in the dictionary data; S505A, arrange the other variable components in the container in order, and adjust the interface XY coordinates of each variable component; In addition, if the layout is horizontal, S501B, for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; S502B, dividing the width of all child components in the parent container of the current level by the width of the parent container according to the original width numerical ratio; the original width numerical ratio is the width numerical ratio of the corresponding UI component in the dictionary data; S503B, determining whether there is an immutable component marked as an immutable component in the parent container, and if so, modifying the interface XY coordinates of the immutable component; the width of the immutable component remains unchanged; S504B, for other variable components in the parent container, set the height of other variable components to the maximum value among the heights of all immutable components; S505B, arranging other variable components in the parent container in order, and adjusting the interface XY coordinates of each variable component.

[0042] S506 , according to the flex layout attributes of each UI component at each level, the alignment mode of each UI component is obtained with the help of the trained GBDT model, and the alignment mode of each UI component at the current level is adjusted.

[0043] The alignment methods in this embodiment may include: left alignment, right alignment, and center alignment.

[0044] In particular, in this embodiment, for each level, the parent container of the current level and the subcomponents of the next level in the parent container are adjusted in linkage; That is to say, when both the parent container and the child component are variable components, the internal coordinates of the child component are adjusted adaptively as the coordinates of the parent container are adjusted.

[0045] Of course, the data structure of the UI components in the first type container, the second type container and the third type container includes: a hierarchical relationship structure. Each type of container is a UI component with a nested structure.

[0046] For a better understanding of nested structures or hierarchical structures, see Figure 7As shown, if the current level is the outermost level, a1 is the parent container, and the child components are a2 and b2; if the current level is a2, the parent container is a2, and the child component is a3; The above process from outside to inside traverses each container in turn until the final innermost components a4 and b3.

[0047] To better understand the method of the above embodiment 1, Figures 3 to 7 , the contents of the above methods are explained in detail: The first step is to parse the user interface to be optimized, i.e., UI page parsing, to obtain dictionary data of the original dictionary.

[0048] The UI page beautification system (i.e., the system for automatically optimizing the user interface in this embodiment) first receives an input dictionary. The dictionary data is a flat structure describing the page layout and component information of the user interface to be optimized, and can be a dictionary obtained by identifying in an existing manner.

[0049] The dictionary data at this time may include: basic information such as component name, type, position (such as coordinates x, y), size (such as width, height), and attribute information of the UI component.

[0050] It is understandable that the system extracts relevant attributes of each UI component by parsing the dictionary data to obtain the attribute information of the UI component.

[0051] In the second step, one or more first-type containers are generated according to the basic information of the UI components. The first-type containers include: UI components having at least one parent-child hierarchical relationship.

[0052] That is, based on the coordinate information (such as x, y) and hierarchical structure of the components, the parent-child relationship between components is inferred. A parent container can contain child components. For example, a form container on a page may contain multiple input boxes, buttons, etc.

[0053] The third step is to update the dictionary data structure according to the first type container and the dictionary data to obtain an updated dictionary.

[0054] The parent-child relationship is reflected in a nested dictionary data structure. Each parent component contains a "children" key (hierarchical structure), which represents the collection of child components within it, which exists in the form of a child dictionary. This nested structure facilitates the subsequent identification of the association relationship and layout structure between components, ensuring accuracy when processing complex nested layouts. In the fourth step, based on the updated dictionary, the projection algorithm and the large language model are used to obtain the layout of each UI component at each level in the current dictionary and the positional relationship of each UI component in the layout from the outside to the inside.

[0055] For example, using the projection algorithm, by analyzing the XY coordinates of the UI component and its width and height, the arrangement of the subcomponents can be determined. The subcomponents may be arranged in rows (horizontally) or columns (vertically). Figure 3 As shown, in this embodiment, components are preferentially distributed vertically, and thus vertical layout detection and horizontal layout detection are recursively performed on each layer of the dictionary data in turn, and the presence of penetration lines indicates that the layout mode exists.

[0056] The penetration line of the projection algorithm divides the parent container into child containers. If a child container contains multiple components, it is necessary to construct an encapsulated container for it. The size of the container can be understood as a rectangle covering all internal components.

[0057] The containers and subcomponents of this embodiment are adjusted in a two-way linkage during layout and adjustment. In order to better implement this linkage adjustment, the system will mark the type of the container to distinguish between variable and immutable components. Variable components refer to containers that allow users to adjust their external dimensions and internal layouts, such as retractable card-type containers such as content areas and navigation menus. Immutable components are containers with fixed sizes or positions, such as form controls. The subcomponents inside immutable components are adjustable horizontally, and the fixed component spacing and fixed component width are not adjustable vertically. The basis for this marking is mainly the function and usage scenario of the container. For some containers that need to maintain consistency and invariance (such as navigation bars and fixed toolbars), they are usually marked as immutable. Some content display containers and interactive containers often allow users to flexibly adjust the size and layout, so they are marked as variable.

[0058] The fifth step is to adjust the position coordinates of each UI component from the outside to the inside according to the layout and position relationship of each level of UI components in the current dictionary, and generate a user interface with optimized layout.

[0059] In this embodiment, the linkage adjustment between each container and the internal components is bidirectional. When the coordinates and size of the internal components are adjusted, the size of the container may need to change accordingly; similarly, if the size of the container changes, the layout and coordinates of the internal components also need to be recalculated to maintain the beauty and logical consistency of the overall design. For example, assuming that the components in a container are adjusted from a two-column layout to a three-column layout, the width of the container may increase. Conversely, when the container is reduced, the internal components may need to be rearranged to adapt to the new size.

[0060] The fourth and fifth steps above can be explained as follows: M01. If the layout is a vertical layout, then for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; Adjust the width of all child components in the current hierarchy to the width of the parent container minus the side margins, which are the preset side margins of the current parent container; Determine whether there is an immutable component marked as an immutable component in the parent container, and if so, modify the interface XY coordinates of the immutable component; the width of the immutable component remains unchanged; For other variable components in the parent container, the remaining parent container height is divided according to the original height numerical ratio; the original height numerical ratio is the height numerical ratio of the corresponding UI component in the dictionary data; Arrange other variable components in the container in order, and adjust the interface XY coordinates of each variable component; M02. If the layout is a vertical layout, then for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; Divide the width of all subcomponents in the parent container of the current level by the width of the parent container according to the original width numerical ratio; the original width numerical ratio is the width numerical ratio of the corresponding UI component in the dictionary data; Determine whether there is an immutable component marked as an immutable component in the parent container, and if so, modify the interface XY coordinates of the immutable component; the height of the immutable component remains unchanged; For other variable components in the parent container, set the height of other variable components to the maximum value of the heights of all immutable components; Arrange other variable components in the parent container in order, and adjust the interface XY coordinates of each variable component.

[0061] M03. According to the flex layout attributes of each UI component at each level, the alignment of each UI component is obtained with the help of the trained GBDT model, and the alignment mode of each UI component at the current level is adjusted; The alignment modes include: left alignment, right alignment, and center alignment.

[0062] In this embodiment, for each level, the parent container of the current level and the subcomponents of the next level in the parent container are adjusted in linkage; When both the parent container and the child components are variable components, the internal coordinates of the child components are adjusted adaptively as the coordinates of the parent container are adjusted.

[0063] In this embodiment, only the internal layout of the immutable component is adjusted, and the internal coordinates of the mutable component are adaptively scaled as the external container coordinates are adjusted. However, the internal component layout adjustment method can be applied to any component, not limited to the immutable component.

[0064] In the fourth step of the above steps, while the projection algorithm is used to generate the layout, the second type of container is also generated, and the large language model is used for optimization to generate the third type of container. The specific description is as follows: See also Figure 4 In the original UI page, some components are functionally integrated, such as the title text and the input box that follows it, but in terms of data format, the two do not exist in a single container. The system needs to generate containers based on the relative position, size, and function between the components. This process is completed by the large language model.

[0065] Specifically, the dictionary file of the parent container is put into the preset prompt word, and then input into the large language model, which outputs a list of components that can be encapsulated as containers. In this embodiment, the prompt word setting is shown in Figure 6 .

[0066] Typically, projection algorithms tend to over-generate containers, such as treating each line under the query box as a separate container. To avoid this problem, large language models are used to analyze the functions and structures of UI components and understand semantics, and then merge containers.

[0067] For example, for components with the same layout features in multiple consecutive rows, they can be merged into one parent container to reduce unnecessary separation. The large language model determines whether the components can be merged based on their functions, relative positions, and spacing. By merging adjacent containers, a third type of container is obtained, which improves the overall compactness and coordination of the UI page (i.e., UI interface).

[0068] The system identifies the flex layout properties of its UI components based on the arrangement of components inside the container (first type container, second type container, and third type container), such as horizontal or vertical arrangement.

[0069] For different alignment methods in flex layout (such as left alignment, center alignment, and right alignment), the system will automatically adjust the alignment mode of each component to ensure a more reasonable layout within the container.

[0070] In this embodiment, the arrangement direction is determined according to the projection algorithm, and the pre-trained machine learning model GBDT is used to identify the alignment method.

[0071] For the left-aligned and right-aligned layout methods. In this embodiment, the width and height of the components are set to the average of the width and height of the components in the original data, and the component spacing is a fixed value. Of course, the above method is not limited, and adjustments can be made according to the application scenario. For example, in a scenario where the beautification needs to be close to the user's intention, the component spacing can be changed to adaptive. In this embodiment, left-aligned and right-aligned do not require special calculations, and the UI components can be arranged in sequence.

[0072] For the equally divided layout (i.e., center alignment), this embodiment illustrates: using the projection algorithm to identify the number of rows and columns of components inside the container, recalculate the XY coordinates, width, and height of each internal component. The adjusted component positions can maintain consistent layout logic. The specific calculation logic in this embodiment takes the query box as an example: Adaptive line spacing :

[0073] Container coordinates , : ; ; ; in: is the total height of the parent container of the current layer. is the number of vertical segmentation gaps, len indicates the number of gaps to be found, represents the interval of vertical distribution, d h Indicates the height of the components inside the container. Indicates the number of vertical components; n represents the number of all components in the container, % represents the remainder sign, d w Indicates the width of the components inside the container; is the total width of the parent container of the current layer; 12 is the margins on both sides of the parent container of the current layer; 48 is the fixed spacing between components; is the number of lateral separation gaps; represents the interval of horizontal distribution, Indicates the number of horizontal components; , The coordinates of the parent container of the current layer.

[0074] In certain scenarios, the title and input box will fill the entire container in a fixed ratio. The specific value is the average of the ratios of the two in the UI page. The component spacing and margins can also be adjusted accordingly based on the specific scenario.

[0075] In another optional implementation, the training process of the GBDT model mentioned above can be described as follows: First, collect component data from historical UI pages and use a large language model to generate alignment labels; Second, manual verification removes some incorrect labels; Third, use dynamic time warping to align the input sequence (i.e. all components of the current layer in the historical UI interface) and output the alignment of these components to train the GBDT model.

[0076] In practice, the number of components in different containers is different. The lengths of all components in the current layers of the above historical UI page as input sequences are inconsistent, so dynamic time warping is performed to normalize the sequence length (that is, normalizing the number of components is similar to retaining some key components).

[0077] The system of this embodiment combines the projection algorithm and the large language model, and can more accurately identify the arrangement of components and container relationships in complex layouts. Compared with existing UI design tools, the present invention can not only automatically optimize component spacing and alignment, but also reduce layout confusion and improve development efficiency by intelligently generating containers and merging components with similar layouts. At the same time, the linkage adjustment mechanism of the present invention ensures that the adjustments of containers and components affect each other, further improving the overall aesthetics and consistency of the page.

[0078] In addition, an embodiment of the present invention further provides a system for automatically optimizing a user interface, comprising: A dictionary data acquisition unit, used for acquiring dictionary data of a user interface to be optimized, wherein the dictionary data includes basic information and first attribute information of a UI component in the user interface; The layout optimization unit is used to generate one or more first-type containers according to the basic information of the UI interface, wherein the first-type containers include: UI components having at least one parent-child hierarchical relationship; According to the first type of container and the dictionary data, updating the dictionary data structure to obtain an updated dictionary; According to the updated dictionary, the projection algorithm and the large language model are used to obtain the layout of each UI component at each level in the current dictionary and the position relationship of each UI component in the layout from the outside to the inside; According to the layout and position relationship of each level of UI components in the current dictionary, the position coordinates of each UI component are adjusted from the outside to the inside to generate a user interface with optimized layout.

[0079] The system of this embodiment corresponds to the above-mentioned method embodiment, and is understood by referring to the above-mentioned method embodiment. The functions of each unit of the system are not described in detail here. For the method embodiment, for the sake of simple description, it is expressed as a series of action combinations, but those skilled in the art should know that the embodiment of the present invention is not limited by the described order of actions, because according to the embodiment of the present invention, certain steps can be performed in other orders or simultaneously. Secondly, those skilled in the art should also know that the embodiments described in the specification are all preferred embodiments, and the actions involved are not necessarily required by the embodiments of the present invention.

[0080] It should be understood by those skilled in the art that embodiments of the present invention may be provided as methods, systems or computer program products. Therefore, the present invention may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware aspects. Moreover, the present invention may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0081] The present invention is described with reference to flowcharts and / or block diagrams of methods, devices (systems) and computer program products according to embodiments of the present invention. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions.

[0082] It should be noted that the word "a" or "an" preceding a component does not exclude the presence of a plurality of such components. The invention may be implemented by means of hardware comprising a number of different components and by means of a suitably programmed computer. Among the several means listed, several of these means may be embodied by the same hardware. The use of the words first, second, third, etc., is for convenience of expression only and does not indicate any order. These words may be understood as part of the name of the component.

[0083] In addition, it should be noted that, in the description of this specification, the description of the terms "one embodiment", "some embodiments", "embodiment", "example", "specific example" or "some examples" etc. means that the specific features, structures, materials or characteristics described in conjunction with the embodiment or example are included in at least one embodiment or example of the present invention. In this specification, the schematic representations of the above terms do not necessarily refer to the same embodiment or example. Moreover, the specific features, structures, materials or characteristics described may be combined in any one or more embodiments or examples in a suitable manner. In addition, those skilled in the art may combine and combine the different embodiments or examples described in this specification and the features of the different embodiments or examples, unless they are contradictory.

[0084] Although the preferred embodiments of the present invention have been described, those skilled in the art may make additional changes and modifications to these embodiments after knowing the basic creative concept. Therefore, the technical solution should be interpreted as including the preferred embodiments and all changes and modifications falling within the scope of the present invention.

[0085] Obviously, those skilled in the art can make various modifications and variations to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention belong to the scope of the technical solution of the present invention and its equivalent technology, the present invention should also include these modifications and variations.

Claims

1. A method for automatically optimizing a user interface, characterized in that: include: S100: for a user interface to be optimized, obtaining dictionary data of the user interface, the dictionary data including: basic information and first attribute information of UI components in the user interface; S200, generating one or more first-type containers according to basic information of the UI component, wherein the first-type containers include: UI components having at least one parent-child hierarchical relationship; S300, updating the dictionary data structure according to the first type container and the dictionary data to obtain an updated dictionary; S400, according to the updated dictionary, using a projection algorithm and a large language model to obtain the layout of each UI component at each level in the current dictionary and the positional relationship of each UI component in the layout from the outside to the inside; S500: According to the layout and position relationship of each level of UI components in the current dictionary, adjust the position coordinates of each UI component from the outside to the inside to generate a user interface with optimized layout.

2. The method according to claim 1, characterized in that The basic information of a UI component includes: component name, component type, component position, component width, and / or component height; The attribute information of the UI component includes: component color, component font size, component position attribute, and / or flex layout attribute; the flex layout attribute is the attribute identified by the projection algorithm in S400; The data structure of the UI components in the first type container, the second type container and the third type container includes: a hierarchical relationship structure.

3. The method according to claim 1, characterized in that S400, according to the updated dictionary, using a projection algorithm and a large language model to obtain the layout of each UI component at each level in the current dictionary and the position relationship of each UI component in the layout from the outside to the inside, including: S401, according to the updated dictionary, using a projection algorithm to determine the layout of each UI component at each level in the current dictionary and the first position relationship of each UI component in the layout from the outside to the inside; and generating a second type of container according to the first position relationship of each UI component in the layout; S402: Optimize the second type container by using a large language model to generate a third type container and a second position relationship of each UI component in the third type container; S403, taking the second positional relationship as the positional relationship between the UI components as to whether they belong to a nested structure, and according to the layout of the UI components at each level identified, obtaining the flex layout attributes of the UI components at each level and adding them to the first attribute information; The layout includes a vertical layout or a horizontal layout.

4. The method according to claim 3, characterized in that S401, according to the updated dictionary, using a projection algorithm to determine the layout of each UI component at each level in the current dictionary and the first position relationship of each UI component in the layout from outside to inside; And, generating a second type of container according to the first position relationship of each UI component in the layout, including: For each level of UI components, determine whether there is a penetration line of vertical layout according to the beam from left to right of the projection algorithm. If there is a penetration line, determine that the UI components of the current level are in vertical layout; If there is no penetration line of the vertical layout, determine whether there is a penetration line of the horizontal layout based on the top-to-bottom beam of the projection algorithm. If so, determine that the UI component of the current level is in the horizontal layout; At the same time, a second type of container is generated according to the penetration line of the vertical layout / the penetration line of the horizontal layout.

5. The method according to claim 3, characterized in that: S402: Optimizing the second type container using a large language model to generate a third type container and a second position relationship of each UI component in the third type container, including: For each level of UI components, input the basic information and first attribute information of the UI components of the current level, and the basic information and first attribute information of the UI components in the next level of the current level into the prompt words of the large language model to obtain a third type container output by the large language model; The prompt words are preset based on the semantic information or semantic structure of the UI components in the current level and the next level.

6. The method according to claim 3, characterized in that: According to the layout and position relationship of each level of UI components in the current dictionary, adjust the position coordinates of each UI component from the outside to the inside, including: If the layout is a vertical layout, for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; Adjust the width of all child components in the current hierarchy to the width of the parent container minus the side margins, which are the preset side margins of the current parent container; Determine whether there is an immutable component marked as an immutable component in the parent container, and if so, modify the interface XY coordinates of the immutable component; the height of the immutable component remains unchanged; For other variable components in the parent container, the remaining parent container height is divided according to the original height numerical ratio; the original height numerical ratio is the height numerical ratio of the corresponding UI component in the dictionary data; Arrange other variable components in the container in order, and adjust the interface XY coordinates of each variable component; and / or, If the layout is horizontal, then for each level of UI components, the UI components of the current level are parent containers, and the UI components of the next level are child components / child containers; Divide the width of all subcomponents in the parent container of the current level by the width of the parent container according to the original width numerical ratio; the original width numerical ratio is the width numerical ratio of the corresponding UI component in the dictionary data; Determine whether there is an immutable component marked as an immutable component in the parent container, and if so, modify the interface XY coordinates of the immutable component; the width of the immutable component remains unchanged; For other variable components in the parent container, set the height of other variable components to the maximum value of the heights of all immutable components; Arrange other variable components in the parent container in order, and adjust the interface XY coordinates of each variable component.

7. The method according to claim 6, characterized in that For each level, the parent container of the current level and the subcomponents of the next level in the parent container are adjusted in linkage; When both the parent container and the child components are variable components, the internal coordinates of the child components are adjusted adaptively as the coordinates of the parent container are adjusted.

8. The method according to claim 6, characterized in that According to the layout and position relationship of each level of UI components in the current dictionary, adjust the position coordinates of each UI component from the outside to the inside, including: According to the flex layout properties of each UI component at each level, the alignment of each UI component is obtained with the help of the trained GBDT model, and the alignment mode of each UI component at the current level is adjusted; The alignment modes include: left alignment, right alignment, and center alignment.

9. The method according to claim 8, characterized in that For an equal-division layout in a vertical layout or an equal-division layout in a horizontal layout (i.e., center alignment), the number of rows and columns of child components in the parent container of the current layer is identified through a projection algorithm, and the XY coordinates, width, and height of each child component are recalculated; the adjusted component positions can maintain consistent layout logic; Adaptive line spacing : ； Container coordinates , : ； ； ； in: is the total height of the parent container of the current layer. is the number of vertical segmentation gaps, len indicates the number of gaps to be found, represents the interval of vertical distribution, d h Indicates the height of the components inside the container. Indicates the number of vertical components; n represents the number of all components in the container, % represents the remainder sign, and dw represents the width of the components inside the container; is the total width of the parent container of the current layer; 12 is the margins on both sides of the parent container of the current layer; 48 is the fixed spacing between components; is the number of lateral separation gaps; , The coordinates of the parent container of the current layer.

10. A system for automatically optimizing a user interface, characterized in that: include: A dictionary data acquisition unit, used for acquiring dictionary data of a user interface to be optimized, wherein the dictionary data includes basic information and first attribute information of a UI component in the user interface; The layout optimization unit is used to generate one or more first-type containers according to the basic information of the UI interface, wherein the first-type containers include: UI components having at least one parent-child hierarchical relationship; According to the first type of container and the dictionary data, updating the dictionary data structure to obtain an updated dictionary; According to the updated dictionary, the projection algorithm and the large language model are used to obtain the layout of each UI component at each level in the current dictionary and the position relationship of each UI component in the layout from the outside to the inside; According to the layout and position relationship of each level of UI components in the current dictionary, the position coordinates of each UI component are adjusted from the outside to the inside to generate a user interface with optimized layout.

Images