Visual interface generation method and device, electronic equipment and storage medium

Abstract

The invention relates to the technical field of artificial intelligence and computer graphics, and discloses a visual interface generation method and device, electronic equipment and a storage medium, the method comprises the following steps: in response to a selection operation of a target object, determining source data, and inputting the source data into a layout generation model to obtain an abstract semantic layout tree, nodes of the abstract semantic layout tree are used for representing types of interface elements; based on the type represented by the node, determining an interface element corresponding to the node and attribute information of the interface element; determining layout information of interface elements corresponding to the nodes based on a hierarchical relationship between the nodes; generating interface configuration information based on the attribute information and the layout information of the interface elements; and rendering the interface configuration information to obtain a visual interface, wherein the visual interface is used for displaying a data analysis report corresponding to the source data. By implementing the method provided by the invention, the problems of disordered layout and non-uniform style of the visual interface generated by the large language model can be solved.

Description

Technical Field

[0001] This invention relates to the fields of artificial intelligence and computer graphics technology, specifically to methods, apparatus, electronic devices, and storage media for generating visual interfaces. Background Technology

[0002] With the rapid development of artificial intelligence technologies such as Large Language Models (LLMs), generating user interfaces that correspond to users' natural language based on LLMs (AIGC for UI) has become a popular research direction. For example, a user can input "Help me generate a data analysis report for the express delivery industry" into a large language model, and the large language model can automatically generate the interface code corresponding to the data analysis report.

[0003] However, because large language models lack a precise understanding of geometric space, the visualizations rendered using the interface code generated by these models are prone to layout inconsistencies between interface elements. Furthermore, visualizations directly generated from large language models are also prone to style discrepancies between the visualizations and existing visualizations. Summary of the Invention

[0004] This invention provides a method, apparatus, electronic device, and storage medium for generating a visual interface, in order to solve the problems of disordered layout and inconsistent styles in the visual interface generated from large language models.

[0005] In a first aspect, the present invention provides a method for generating a visual interface. In response to a selection operation of a target object, source data is determined and input into a layout generation model to obtain an abstract semantic layout tree. Nodes in the abstract semantic layout tree represent the types of interface elements. The abstract semantic layout tree contains hierarchical relationships between nodes. The layout generation model is configured to determine the types of interface elements based on the source data; determine the interface elements corresponding to the nodes and their attribute information based on the types represented by the nodes; determine the layout information of the interface elements corresponding to the nodes based on the hierarchical relationships between nodes; generate interface configuration information based on the attribute information and layout information of the interface elements; and render the interface configuration information to obtain a visual interface, which is used to display a data analysis report corresponding to the source data.

[0006] The visualization interface generation method provided in this embodiment inputs the acquired source data into a layout generation model. The model then plans the interface elements required for the data analysis report corresponding to the source data and outputs the types of interface elements in the form of an abstract semantic layout tree. The abstract semantic layout tree is used to determine the interface elements corresponding to each node, as well as the attribute and layout information of these elements, thus obtaining relatively accurate attribute and layout information. The attribute and layout information of the interface elements are then used to generate interface configuration information, and the visualization interface is obtained by rendering this configuration information. This results in a visualization interface with accurate layout and consistent style, thereby solving the problems of disordered layout and inconsistent styles in visualization interfaces generated from large language models.

[0007] In one optional implementation, the layout information includes target width and target height; based on the hierarchical relationship between nodes, the layout information of the interface element corresponding to the node is determined, including: determining whether the target interface element corresponding to the target node is a container, and whether the target node and the root node of the abstract semantic layout tree have a parent-child relationship; if the target interface element is not a container, then the preset height in the attribute information of the target interface element is used as the target height of the target interface element; and the preset interface width of the visual interface is used as the target width of the target interface element.

[0008] When the target interface element corresponding to the target node is not a container, using the width of the visualization interface as the target width of the target interface element ensures that the target interface element fills the entire visualization interface in the width direction, resulting in a better visual effect for the entire visualization interface. Using the preset height in the attribute information of the target interface element as the target height of the target interface element ensures that the target height is set reasonably and does not overlap with other target interface elements in the height direction.

[0009] In an optional implementation, the method further includes: if the target interface element is a container, then using the interface width as the target width of the target interface element; determining whether all the child interface elements corresponding to the child nodes of the target node are containers; if all the child interface elements are non-containers, then using the preset height in the attribute information of the child interface element as the target height of the child interface element; determining the target width of the child interface element based on the target width of the target interface element; and determining the target height of the target interface element based on the target height of the child interface element.

[0010] When the target interface element corresponding to the target node is a container and all the child interface elements corresponding to the child nodes of the target node are components, the target width of the child interface element can be determined based on the target width of the target interface element and the target height of the target interface element can be determined based on the target height of the child interface element. This allows for the quick and accurate determination of the width and height of the target interface element and the width and height of the child interface elements without overlap.

[0011] In one optional implementation, determining the target width of a sub-interface element based on the target width of the target interface element includes: obtaining a preset width from the attribute information of the sub-interface element; obtaining a first width based on the sum of all preset widths, and obtaining a total width based on the sum of the preset total width interval and the first width; if the total width is greater than the target width of the target interface element, then processing all sub-interface elements into rows, and determining the target width of the sub-interface elements in each row; if the total width is less than the target width of the target interface element, then adjusting the preset width of the sub-interface element based on the difference between the total width and the target width of the target interface element to obtain the target width of the sub-interface element.

[0012] Based on the size relationship between the total width and the target width of the target interface element, the target width of the sub-interface element is determined. In this way, the target width of the sub-interface element can be determined more accurately and reasonably without overlap between the target interface element and the sub-interface element, or between the sub-interface elements themselves.

[0013] In one optional implementation, determining the target height of a target interface element based on the target height of the sub-interface elements includes: selecting the sub-interface element with the largest target height from each row as a reference sub-interface element; determining the initial height of the target interface element based on the sum of the target heights of each reference sub-interface element; and obtaining the target height of the target interface element based on the sum of the initial height of the target interface element and the preset total height interval.

[0014] The target height of the target interface element is determined by the sum of the height of the sub-interface element with the largest target height in each row and the total height interval. This ensures that the target interface element does not overlap with sub-interface elements or with each other in the height direction.

[0015] In an optional implementation, the method further includes: if all sub-interface elements are containers, determining the remaining width based on the difference between the target width of the target interface element and the preset total width interval; determining the initial width of each sub-interface element based on the ratio of the remaining width to the total number of sub-interface elements; adjusting the initial width of the sub-interface element based on the target width of the interface elements contained in the sub-interface element to obtain the target width of the sub-interface element; and determining the target height of the sub-interface element based on the target height of the interface elements contained in the sub-interface element.

[0016] First, the initial width of the sub-interface element is initially determined by dividing the remaining width equally among the sub-interface elements. Then, by further combining the interface elements contained in the sub-interface element, the initial width is adjusted to obtain the target width and the target height of the sub-interface element. In this way, the target width and target height of the sub-interface element can be determined relatively quickly and accurately.

[0017] In an optional implementation, the method further includes: layout information including target coordinates; the process of determining the coordinate information of the target interface element corresponding to the target node includes: obtaining a first reference coordinate and a reference height of a reference interface element, wherein the first reference coordinate is the corner coordinate of the reference interface element, and the reference interface element and the target interface element are adjacent in the height direction; determining a second reference coordinate of the reference interface element based on the fusion result of the first reference coordinate and the reference height; obtaining a first width sub-interval and a first height sub-interval, wherein the first width sub-interval is the distance between the target interface element and the target boundary line, the target boundary line is the boundary line adjacent to the target interface element in the visualization interface, and the first height sub-interval is the distance between the target interface element and the reference interface element in the height direction; and determining the target coordinates of the target interface element using the second reference coordinate, the first width sub-interval, and the first height sub-interval.

[0018] By using the second reference coordinates, the first width sub-interval, and the first height sub-interval of the reference interface element, the target coordinates of the target interface element can be accurately determined.

[0019] Secondly, the present invention provides a device for generating a visual interface, the device comprising: an acquisition module, configured to, in response to a selection operation of a target object, determine source data and input the source data into a layout generation model to obtain an abstract semantic layout tree, wherein nodes of the abstract semantic layout tree represent the types of interface elements, the abstract semantic layout tree contains hierarchical relationships between nodes, and the layout generation model is configured to determine the types of interface elements based on the source data; a first determination module, configured to, based on the types represented by the nodes, determine the interface elements corresponding to the nodes and the attribute information of the interface elements; a second determination module, configured to, based on the hierarchical relationships between the nodes, determine the layout information of the interface elements corresponding to the nodes; a generation module, configured to, based on the attribute information and layout information of the interface elements, generate interface configuration information; and a rendering module, configured to, render the interface configuration information to obtain a visual interface, the visual interface being used to display a data analysis report corresponding to the source data.

[0020] Thirdly, the present invention provides an electronic device, comprising: a memory and a processor, wherein the memory and the processor are communicatively connected to each other, the memory stores computer instructions, and the processor executes the computer instructions to perform the method for generating a visual interface as described in the first aspect or any corresponding embodiment.

[0021] Fourthly, the present invention provides a computer-readable storage medium storing computer instructions for causing a computer to execute the method for generating a visual interface according to the first aspect or any corresponding embodiment thereof.

[0022] Fifthly, the present invention provides a computer program product, including computer instructions for causing a computer to execute a method for generating a visual interface according to the first aspect or any corresponding embodiment thereof. Attached Figure Description

[0023] To more clearly illustrate the specific embodiments of the present invention or the technical solutions in the prior art, the drawings used in the description of the specific embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present invention. For those skilled in the art, other drawings can be obtained from these drawings without creative effort.

[0024] Figure 1 This is a schematic diagram of an application scenario according to an embodiment of the present invention; Figure 2 This is a schematic diagram of a first method for generating a visual interface according to an embodiment of the present invention; Figure 3 This is a schematic diagram of a second process for generating a visual interface according to an embodiment of the present invention; Figure 4 This is a schematic diagram of the first interactive interface according to an embodiment of the present invention; Figure 5 This is a schematic diagram of the second interactive interface according to an embodiment of the present invention; Figure 6 This is a schematic diagram of a visualization interface for displaying data analysis reports corresponding to source data according to an embodiment of the present invention; Figure 7 This is a schematic diagram of an abstract semantic layout tree according to an embodiment of the present invention; Figure 8 This is a schematic diagram of the total width interval according to an embodiment of the present invention; Figure 9 This is a schematic diagram illustrating the determination of the target coordinates of a target interface element based on the first reference coordinates of a reference interface element according to an embodiment of the present invention. Figure 10This is a schematic diagram illustrating the determination of the first sub-coordinate of a first sub-interface element and the second sub-coordinate of a second sub-interface element based on the target coordinates of a target interface element according to an embodiment of the present invention. Figure 11 This is a schematic diagram of a specific method for generating a visual interface according to an embodiment of the present invention; Figure 12 This is a structural block diagram of a device for generating a visual interface according to an embodiment of the present invention; Figure 13 This is a schematic diagram of the hardware structure of an electronic device according to an embodiment of the present invention. Detailed Implementation

[0025] To make the objectives, technical solutions, and advantages of the embodiments of the present invention clearer, the technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0026] It is understood that before using the technical solutions disclosed in the various embodiments of the present invention, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in the present invention and their authorization should be obtained in accordance with relevant laws and regulations through appropriate means.

[0027] The terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the number of technical features indicated. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. In the description of this invention, "a plurality of" means two or more, unless otherwise explicitly specified.

[0028] With the rapid development of artificial intelligence technologies such as Large Language Models (LLMs), generating user interfaces that correspond to users' natural language based on LLMs (AIGC for UI) has become a popular research direction. For example, a user can input "Help me generate a data analysis report for the express delivery industry" into a large language model, and the large language model can automatically generate the interface code corresponding to the data analysis report.

[0029] However, because large language models lack a precise understanding of geometric space, the visualizations rendered using the interface code generated by these models are prone to layout inconsistencies between interface elements. Furthermore, visualizations directly generated from large language models are also prone to style discrepancies between the visualizations and existing visualizations.

[0030] Based on this, this application proposes a method for generating a visual interface. Relying on a large-scale language model, the method performs interface planning on the visual interface corresponding to the source data, generating an abstract semantic layout tree to represent the types of interface elements in the visual interface. Based on the abstract semantic layout tree, the method determines the attribute information and layout information of the interface elements, making the attribute information of the interface elements in the visual interface consistent with the attribute information of the interface elements in the existing visual interface (the attribute information includes the definition of relevant style information), and ensuring that the layout information of the interface elements in the visual interface is accurate, thus achieving the effect of accurate layout of the visual interface and consistency with the style of the existing visual interface.

[0031] As an optional application scenario of this invention, such as Figure 1 As shown, the system for generating this visual interface may include at least one terminal device and at least one server. Figure 1 The system is illustrated in the example, which includes a computer 101, a mobile terminal 102, and a server 103, and the terminal devices such as the computer 101 and the mobile terminal 102 are connected to the server 103 through a network 110.

[0032] Specifically, the terminal device can be a smartphone, tablet, laptop, PDA, desktop computer, game console, smart TV, smart wearable device, in-vehicle terminal, VR (Virtual Reality) device, AR (Augmented Reality) device, etc. Server 103 can be a standalone physical server, a server cluster, a distributed system, or a cloud server providing cloud services. Network 110 can be a wired or wireless network, examples of which include, but are not limited to, the Internet, corporate intranet, local area network, wide area network, mobile communication network, and combinations thereof.

[0033] According to an embodiment of the present invention, a method for generating a visual interface is provided. It should be noted that the steps shown in the flowchart in the accompanying drawings can be executed in a computer system such as a set of computer-executable instructions. Furthermore, although a logical order is shown in the flowchart, in some cases, the steps shown or described may be executed in a different order than that shown here.

[0034] This embodiment provides a method for generating a visual interface, which can be used in terminal devices. Figure 2 This is a flowchart of a method for generating a visual interface according to an embodiment of the present invention, such as... Figure 2 As shown, the process includes the following steps: In step S201, in response to the selection operation of the target object, the source data is determined and input into the layout generation model to obtain an abstract semantic layout tree. The nodes of the abstract semantic layout tree are used to represent the type of interface elements. The abstract semantic layout tree contains the hierarchical relationship between nodes. The layout generation model is configured to determine the type of interface elements based on the source data.

[0035] As mentioned earlier, a visual interface generation platform is deployed on the terminal device. This platform can be a website or an application. The application can support operating systems such as Android, Windows, or iOS. Furthermore, the visual interface generation platform has features such as... Figure 4 The first interactive interface shown displays settings for the visualization to be generated and methods for generating it. These settings include canvas settings, theme settings, and whether a grid is enabled on the current canvas. Furthermore, canvas settings include canvas width, such as ultra-small screen (1024px), small screen (1280px), large screen (1536px), and ultra-large screen (1920px). Theme settings include themes, such as default theme, minimalist tech theme, and vibrant theme. Specifically, users can adjust canvas and theme settings by manipulating the icons corresponding to the selected controls. Users can also adjust grid settings by manipulating the icons corresponding to the toggle controls. Additionally, methods for generating the visualization include, but are not limited to, clicking components from the top, dragging components to build the visualization, or using AI to generate the visualization.

[0036] Source data can be various types of tabular data that have been collected and organized in advance. For example, taking the express delivery industry as an example, source data can include, but is not limited to, basic business statistics such as the number of small parcels received, the number of standard express parcels received, and the number of orders, with statistical periods of days, months, quarters, etc.

[0037] As a concrete example, the user (i.e., the target object) can click. Figure 4 The "Try it now" button is displayed using artificial intelligence (AI) to generate a visual interface. When the user clicks... Figure 4 After clicking "Try Now" as shown, you can enter... Figure 5The second interactive interface for selecting source data is shown. This interface can display various types of source data, such as source data type 1 (asset type), source data type 2 (cost type), and source data type 3 (human resources type), with multiple source data types under each type. For example, if the user selects source data type 2 (cost type), source data type 2 (cost type) includes first source data such as air delivery receipt volume, second source data such as airfare weight per ticket, third source data such as small parcel receipt volume, and fourth source data such as standard express ticket weight. After the user selects the first source data (air delivery receipt volume) and the second source data (airfare weight per ticket), the terminal device responds to the user's selection by displaying the first and second source data in the area corresponding to the selected source data, and by inputting the first and second source data into the layout generation model to obtain an abstract semantic layout tree.

[0038] The layout generation model can generate an abstract semantic layout tree based on the input source data. Alternatively, it can also generate an abstract semantic layout tree based on user-input natural language describing the requirements, along with the source data. Furthermore, the layout generation model can be integrated into a visual interface generation platform.

[0039] The layout generation model can be a large, untrained language model. Of course, the layout generation model can also be trained based on a machine learning model architecture, or even based on multiple model architectures. There are no specific limitations here, as long as it can generate an abstract semantic layout tree for the source data.

[0040] An abstract semantic layout tree can be an intermediate representation model that uses a tree-like data structure as its carrier and integrates the semantics of source data with the logic of interface element types. It can be used to connect source data and the layout of a visual interface. This application treats the layout generation model as a planner of high-level semantics, that is, it uses the layout generation model to output the types of interface elements corresponding to the visual interface and the containment relationships between interface elements, and represents the types of interface elements and the containment relationships between interface elements as a tree structure, thus obtaining the abstract semantic layout tree. Nodes in the abstract semantic layout tree represent the type of interface element, the content to be displayed by the interface element, and the child nodes contained in that node.

[0041] For example, if a node in the abstract semantic layout tree does not have child nodes, it can be represented as {"type": "title","content": "Analysis Dashboard"}, where type is the type of the interface element represented by the node, and content is the specific content represented by the node.

[0042] For example, if a node in the abstract semantic layout tree has child nodes, it can be specifically represented as {"type": "flexBox","title": "Core Indicator Overview","children": [{"type": "indexCard","index": "CM_RP_00000125"},}, where children is used to represent the child nodes of this node, and index is used to represent the unique identifier of the interface element corresponding to the child node.

[0043] Step S202: Based on the type of node representation, determine the interface element corresponding to the node and the attribute information of the interface element.

[0044] Interface elements can be containers or components. Containers do not directly carry business content but are responsible for defining the layout, partitioning, and element arrangement rules of the interface; components are the smallest functional units of the visual interface, directly carrying business content or interaction logic, and are elements that users can intuitively perceive and operate.

[0045] The properties of a container can include layout properties, visual properties, and functional properties. Layout properties determine the arrangement of child elements, visual properties determine the appearance of the container, and functional properties determine the interactivity of the container.

[0046] Component attributes can include data binding attributes, visual attributes, and functional attributes. Data binding attributes determine the association rules between the component and the source data, visual attributes determine the component's appearance, and functional attributes determine the component's interactive behavior.

[0047] As a concrete example, the type represented by a node in the abstract semantic layout tree can be matched with the type of interface element in a pre-defined element library to obtain the corresponding interface element. The pre-defined element library includes multiple interface elements with pre-set attributes. Therefore, after matching the interface element based on the type represented by the node, the attribute information of that interface element can be determined accordingly. This ensures that the attribute information of the interface elements corresponding to each node in the abstract semantic layout tree is correct, accurate, and consistent with the attribute information of existing visualizations in the visualization interface generation platform. Since the style of the corresponding interface element is already configured in the attribute information, the problem of inconsistencies between the rendered visualization based on the interface element and the existing visualization style can be avoided.

[0048] In addition, after determining the interface elements and attribute information corresponding to each node, the interface elements and attribute information corresponding to each node can be updated in the abstract semantic layout tree.

[0049] Step S203: Based on the hierarchical relationship between nodes, determine the layout information of the interface elements corresponding to the nodes.

[0050] The hierarchical relationships between nodes include parent-child and sibling relationships. Layout information is a set of parameters describing the spatial position, size, arrangement rules, and hierarchical stacking relationships of interface elements within the visual interface. As a specific example, layout information can include the coordinates and dimensions of interface elements within the visual interface, where dimensions include the height and width of the interface elements.

[0051] For any node in the abstract semantic layout tree, the coordinates and size of the node in the visualization interface can be determined based on the parent-child relationship and the sibling relationship of the node.

[0052] In addition, after determining the layout information of the interface elements corresponding to each node, the layout information of the interface elements corresponding to each node can be updated in the abstract semantic layout tree.

[0053] Step S204: Generate interface configuration information based on the attribute information and layout information of the interface elements.

[0054] As a concrete example, the attribute and layout information of each UI element in the final abstract semantic layout tree can be integrated into a structured, machine-readable UI configuration information represented by a low-code protocol. For example, the UI configuration information can be a JSON object.

[0055] Step S205: Render the interface configuration information to obtain a visualization interface, which is used to display the data analysis report corresponding to the source data.

[0056] As a concrete example, the rendering engine of a low-code platform can be used to render the interface configuration information to obtain a visual interface for displaying the data analysis report corresponding to the source data. Furthermore, the rendering engine of the low-code platform can be built into the visualization interface generation platform.

[0057] For example, such as Figure 6 The image shows a visualization interface for displaying data analysis reports corresponding to source data. The "01 Analysis Dashboard—02 Detailed Data Analysis" sections are pre-defined interface elements. The first target interface element corresponding to the "Analysis Dashboard" can be a container-type element, containing three component-type elements for analyzing the year-on-year and month-on-month changes of indicator 1, indicator 2, and indicator 3, respectively. The second target interface element corresponding to "Trend Comparison of Indicator 1 and Indicator 2" can also be a component-type element.

[0058] The visualization interface generation method provided in this embodiment inputs the acquired source data into a layout generation model. The model then plans the interface elements required for the data analysis report corresponding to the source data and outputs the types of interface elements in the form of an abstract semantic layout tree. The abstract semantic layout tree is used to determine the interface elements corresponding to each node, as well as the attribute and layout information of these elements, thus obtaining relatively accurate attribute and layout information. The attribute and layout information of the interface elements are then used to generate interface configuration information, and the visualization interface is obtained by rendering this configuration information. This results in a visualization interface with accurate layout and consistent style, thereby solving the problems of disordered layout and inconsistent styles in visualization interfaces generated from large language models.

[0059] This embodiment provides a method for generating a visual interface, which can be used in terminal devices. Figure 3 This is a flowchart of a method for generating a visual interface according to an embodiment of the present invention, such as... Figure 3 As shown, the process includes the following steps: Step S301: In response to the selection operation of the target object, source data is determined and input into the layout generation model to obtain an abstract semantic layout tree. The nodes of the abstract semantic layout tree represent the types of interface elements, and the abstract semantic layout tree contains the hierarchical relationships between nodes. The layout generation model is configured to determine the types of interface elements based on the source data. For details, please refer to... Figure 2 Step S201 of the illustrated embodiment will not be described again here.

[0060] Step S302: Based on the type of node representation, determine the corresponding UI element and its attribute information. For details, please refer to [link to relevant documentation]. Figure 2 Step S202 of the illustrated embodiment will not be described again here.

[0061] Step S303: Based on the hierarchical relationship between nodes, determine the layout information of the interface elements corresponding to the nodes.

[0062] Specifically, step S303 includes: Step S3031: Determine whether the target interface element corresponding to the target node is a container, and whether the target node and the root node of the abstract semantic layout tree have a parent-child relationship.

[0063] As a specific example, one can determine whether the target UI element corresponding to the target node is a container type based on the type of the target node; or one can directly determine whether the target UI element corresponding to the target node is a container.

[0064] The root node of the abstract semantic layout tree can be used to store information related to the entire visualization interface. For example, initially, the root node can store the width of the visualization interface; after the height of the visualization interface is determined based on the target height of each target interface element, the interface height can be updated to the root node of the abstract semantic layout tree.

[0065] Step S3032: If the target interface element is not a container, then the preset height in the attribute information of the target interface element is used as the target height of the target interface element.

[0066] like Figure 7 As shown, the target node is a child node of the root node. Therefore, the target interface element corresponding to the target node can be a first-level section in the visualization interface. Each first-level version must fill the entire visualization interface in the width direction, and each general version must be arranged vertically in the height direction.

[0067] For example, such as Figure 6 As shown, both the first and second target interface elements are first-level modules as described above. Therefore, they are arranged vertically in the height direction. Furthermore, the vertical relationship between the first and second target interface elements can be determined based on the hierarchy of the nodes corresponding to the first and second target interface elements in the abstract semantic layout tree and the hierarchical relationship between nodes.

[0068] For example, if the target node corresponding to the first target interface element is the first child node of the root node, and the target node corresponding to the second target interface element is the second child node of the root node, then the first target interface element is above the second target interface element.

[0069] For non-container UI elements, their default height and width are predefined in their attribute information. The default height can be a fixed value, while the default width can be the minimum width of the UI element. Therefore, if the target UI element is non-container, the default height in the target UI element's attribute information will be used as the target height of the target UI element.

[0070] Step S3033: Use the preset width of the visual interface as the target width of the target interface element.

[0071] Since the target node corresponding to the target interface element is a child node of the root node, meaning the target interface element can be a first-level section in the visual interface, the target width of the target interface element can be set to the interface width of the visual interface.

[0072] For example, such as Figure 7As shown, for the first target node, its corresponding target interface element is a component. Therefore, the preset height in the component's attribute information can be used as the target height of the component, and the interface width of the visualization interface can be used as the target width of the component.

[0073] When the target interface element corresponding to the target node is not a container, using the width of the visualization interface as the target width of the target interface element ensures that the target interface element fills the entire visualization interface in the width direction, resulting in a better visual effect for the entire visualization interface. Using the preset height in the attribute information of the target interface element as the target height of the target interface element ensures that the target height is set reasonably and does not overlap with other target interface elements in the height direction.

[0074] In some optional implementations, step S303 above further includes: Step a1: If the target interface element is a container, then the interface width is used as the target width of the target interface element.

[0075] Step a2: Determine whether all child interface elements corresponding to the child nodes of the target node are containers.

[0076] Step a3: If all child elements are non-container elements, then the preset height in the attribute information of the child elements is used as the target height of the child elements.

[0077] Step a4: Determine the target width of the sub-interface elements based on the target width of the target interface element.

[0078] Step a5: Determine the target height of the target interface element based on the target height of the sub-interface element.

[0079] For container-type UI elements, their attribute information does not predefine the preset height and width. Therefore, the target width and target height of container-type UI elements can be determined by considering the node's position in the entire abstract semantic layout tree and the hierarchical relationship between the node and other nodes in the abstract semantic layout tree.

[0080] For example, such as Figure 7 As shown, the target interface element corresponding to the second target node is a container, and the first and second child nodes corresponding to the second target node are both components. Since the target interface element is a container, its attribute information does not predefine the preset height and preset width of the target interface element. However, since the second target node corresponding to the target interface element has a parent-child relationship with the root node, the target interface element needs to fill the entire visual interface in the width direction. Therefore, the interface width can be used as the target width of the target interface element.

[0081] Since the components corresponding to the first and second child nodes need to be located inside the target interface element and not overlap, the target width of the child interface elements can be determined based on the target width of the target interface element. As shown earlier, for component-type interface elements, their attribute information predefines a preset width, i.e., the target height. Therefore, the target height of the target interface element can be determined by using the target height of the components corresponding to the first and second child nodes.

[0082] When the target interface element corresponding to the target node is a container and all the child interface elements corresponding to the child nodes of the target node are components, the target width of the child interface element can be determined based on the target width of the target interface element and the target height of the target interface element can be determined based on the target height of the child interface element. This allows for the quick and accurate determination of the width and height of the target interface element and the width and height of the child interface elements without overlap.

[0083] In some optional implementations, step a4 above further includes: Step a41: Obtain the preset width from the attribute information of the sub-interface element.

[0084] Step a42: Obtain the first width based on the sum of all preset widths, and obtain the total width based on the sum of the preset total width interval and the first width.

[0085] Step a43: If the total width is greater than the target width of the target interface element, then all sub-interface elements are split into lines, and the target width of the sub-interface elements in each line is determined.

[0086] Step a44: If the total width is less than the target width of the target interface element, then adjust the preset width of the sub-interface element based on the difference between the total width and the target width of the target interface element to obtain the target width of the sub-interface element.

[0087] The total width spacing can be the sum of all spacings within the target UI element along its width. As a concrete example, such as... Figure 8 As shown, the total width interval can be the sum of L1, L2 and L3.

[0088] like Figure 8 As shown, the process first attempts to place two child elements side-by-side inside the target element, and then calculates the total width by summing the preset widths of all child elements and the total width spacing. If the two child elements can be placed side-by-side inside the target element, the total width should be equal to or less than the target width of the target element.

[0089] If the total width is greater than the target width of the target interface element, it means that the two child interface elements cannot be placed side by side inside the target interface element (the default width is the minimum width of the child interface element, and the width of the child interface element cannot be adjusted). Therefore, the two child interface elements can be split into separate lines so that each child interface element occupies a separate line.

[0090] However, if the difference between the preset width of the sub-interface element and the target width of the target interface element is greater than the first preset threshold, or if the difference between the total width and the target width of the target interface element is greater than the second preset threshold, the preset width of the sub-interface element can be increased accordingly to obtain the target width of the sub-interface element. This makes the size of the sub-interface element within the target interface element more reasonable, resulting in a more aesthetically pleasing visual interface after rendering. It should be understood that both the first and second preset thresholds can be flexibly adjusted according to actual circumstances, and this application does not impose specific limitations on them.

[0091] Based on the size relationship between the total width and the target width of the target interface element, the target width of the sub-interface element is determined. In this way, the target width of the sub-interface element can be determined more accurately and reasonably without overlap between the target interface element and the sub-interface element, or between the sub-interface elements themselves.

[0092] In some optional implementations, step a5 above further includes: Step a51: Select the sub-interface element with the largest target height from each row as the reference sub-interface element.

[0093] Step a52: Determine the initial height of the target interface element based on the sum of the target heights of each reference sub-interface element.

[0094] Step a53: Based on the sum of the initial height of the target interface element and the preset total height interval, obtain the target height of the target interface element.

[0095] The total height spacing can be the sum of all spacings within the target interface element in the height direction. For details, please refer to the total width spacing mentioned above, which will not be repeated here.

[0096] The target height of the target interface element is determined by the sum of the height of the sub-interface element with the largest target height in each row and the total height interval. This ensures that the target interface element does not overlap with sub-interface elements or with each other in the height direction.

[0097] In some optional implementations, step S303 above further includes: Step b1: If all sub-interface elements are containers, then determine the remaining width based on the difference between the target width of the target interface element and the preset total width interval.

[0098] Step b2: Determine the initial width of each sub-interface element based on the ratio of the remaining width to the total number of sub-interface elements.

[0099] Step b3: Based on the target width of the interface elements contained in the sub-interface element, adjust the initial width of the sub-interface element to obtain the target width of the sub-interface element.

[0100] Step b4: Determine the target height of the sub-interface element based on the target height of the interface elements contained within the sub-interface element.

[0101] As mentioned earlier, for container-type interface elements, their attribute information does not predefine the preset height and width. Since the target interface element corresponding to the target node needs to fill the entire visual interface in the width direction, the width of the visual interface can be used as the target width of the target interface element. Therefore, when all child interface elements are containers, we can first try to divide the remaining width of the target interface element (excluding the total width interval) equally among the child interface elements, and then further adjust the initial width of the child interface elements based on the interface elements contained within them (i.e., secondary child interface elements).

[0102] For example, such as Figure 7 As shown, the target interface element corresponding to the third target node is a container, and the sub-interface elements corresponding to the third and fourth child nodes of the third target node are also containers. Therefore, the initial width of the sub-interface elements corresponding to the third and fourth child nodes can be obtained by dividing the remaining width of the target interface element corresponding to the third target interface (excluding the total width interval) equally between the sub-interface elements corresponding to the third and fourth child nodes. Then, the initial width can be further updated according to the type of interface elements contained in the sub-interface elements corresponding to the third and fourth child nodes. For the specific process of updating the initial width, please refer to the calculation process between the second target node and the first and second child nodes, or the calculation process between the third target node and the third and fourth child nodes. Correspondingly, as shown above, after determining the target height of the sub-interface elements, the target height of the target interface element can be determined by combining the target height of the sub-interface elements. For details, please refer to the previous text, which will not be repeated here.

[0103] First, the initial width of the sub-interface element is initially determined by dividing the remaining width equally among the sub-interface elements. Then, by further combining the interface elements contained in the sub-interface element, the initial width is adjusted to obtain the target width and the target height of the sub-interface element. In this way, the target width and target height of the sub-interface element can be determined relatively quickly and accurately.

[0104] In some optional implementations, the layout information includes target coordinates; the process of determining the coordinate information of the target interface element corresponding to the target node includes: Step c1: Obtain the first reference coordinates and reference height of the reference interface element. The first reference coordinates are the corner coordinates of the reference interface element. The reference interface element and the target interface element are adjacent in the height direction. Step c2: Based on the fusion result of the first reference coordinates and the reference height, determine the second reference coordinates of the reference interface elements.

[0105] Step c3: Obtain the first width sub-interval and the first height sub-interval. The first width sub-interval is the distance between the target interface element and the target boundary line. The target boundary line is the boundary line adjacent to the target interface element in the visualization interface. The first height sub-interval is the distance between the target interface element and the reference interface element in the height direction.

[0106] Step c4: Use the second reference coordinates, the first width sub-interval, and the first height sub-interval to determine the target coordinates of the target interface element.

[0107] like Figure 9 As shown, the first reference coordinates of the reference interface element can be the coordinates of the top-left corner of the reference interface element (when the viewer is facing the screen), the reference height can be the target height of the reference interface element, the first height sub-interval can be the distance between the reference interface element and the target interface element in the height direction, and the first width sub-interval can be the distance between the boundary line of the target interface element and the boundary line of the visualization interface. It should be understood that the reference interface element can be... Figure 6 The interface elements shown are pre-defined; of course, the reference interface elements can also be the target interface elements.

[0108] like Figure 10 As shown, the first sub-coordinate of the first sub-interface element can be determined by combining the target coordinates of the target interface element, the second height sub-interface interval, and the second width sub-interface interval; and the second sub-coordinate of the second sub-interface element can be determined by combining the first sub-coordinate of the first sub-interface element and the third width sub-interface interval, and so on.

[0109] By using the second reference coordinates, the first width sub-interval, and the first height sub-interval of the reference interface element, the target coordinates of the target interface element can be accurately determined.

[0110] Step S304: Generate interface configuration information based on the attribute and layout information of the interface elements. For details, please refer to [link to relevant documentation]. Figure 2 Step S204 of the illustrated embodiment will not be described again here.

[0111] Step S305: Render the interface configuration information to obtain a visualization interface, which is used to display the data analysis report corresponding to the source data. For details, please refer to [link to relevant documentation]. Figure 2 Step S205 of the illustrated embodiment will not be described again here.

[0112] The visualization interface generation method provided in this embodiment, by combining whether the target interface element corresponding to the target node is a container and whether the sub-interface element corresponding to the sub-interface of the target node is a container, can determine the layout information of the target interface element and sub-interface element when there is no overlap between the target interface element and the sub-interface element, and between the sub-interface elements.

[0113] As a specific application embodiment of the present invention, such as Figure 11 As shown, users can... Figure 4 and Figure 5 The interactive interface shown inputs source data into the visualization interface generation platform. The platform then uses its built-in layout generation model to process the source data, resulting in an abstract semantic layout tree. Based on the type represented by the nodes in the abstract semantic layout tree, the platform determines the corresponding interface elements and their attribute information from a pre-defined element library, and combines this with the hierarchical relationship between nodes to determine the layout information of the corresponding interface elements. Subsequently, the platform determines the interface configuration information using the attribute and layout information of the interface elements. Finally, the visualization interface generation platform uses its built-in low-code platform rendering engine to render a visualization interface for displaying the data analysis report corresponding to the source data based on the interface configuration information.

[0114] The layout information of the interface elements corresponding to the nodes proposed in this application, based on the hierarchical relationship between nodes, can make the layout of the final rendered visualization interface predictable and conflict-free, achieving a visual effect of no overlap and neat alignment, thereby solving the problems of randomness and unreliability in the layout of visualization interfaces generated by large language models.

[0115] This application proposes to determine the corresponding interface elements and attribute information of the nodes from a preset element library based on the type represented by the nodes in the abstract semantic layout tree. This achieves standardized configuration of the attribute information of the interface elements, thereby ensuring that the generated visual interface is consistent with the existing visual interface in terms of visual style and interactive behavior. This can avoid the emergence of wild components and wild styles and improve the maintainability of the project.

[0116] This application generates interface configuration information represented by a low-code protocol based on the attribute and layout information of interface elements, ensuring the high availability and stability of the generated interface configuration information represented by the low-code protocol at runtime.

[0117] This embodiment also provides a visual interface generation apparatus, which is used to implement the above embodiments and preferred embodiments; details already described will not be repeated. As used below, the term "module" can be a combination of software and / or hardware that implements a predetermined function. Although the apparatus described in the following embodiments is preferably implemented in software, hardware implementation, or a combination of software and hardware, is also possible and contemplated.

[0118] This embodiment provides a device for generating a visual interface, such as... Figure 12 As shown, it includes: The acquisition module 1201 is used to respond to the selection operation of the target object, determine the source data, and input the source data into the layout generation model to obtain the abstract semantic layout tree. The nodes of the abstract semantic layout tree are used to represent the type of interface elements. The abstract semantic layout tree contains the hierarchical relationship between nodes. The layout generation model is configured to determine the type of interface elements based on the source data.

[0119] The first determining module 1202 is used to determine the interface element corresponding to the node and the attribute information of the interface element based on the type of the node representation.

[0120] The second determining module 1203 is used to determine the layout information of the interface elements corresponding to the nodes based on the hierarchical relationship between the nodes.

[0121] The generation module 1204 is used to generate interface configuration information based on the attribute information and layout information of interface elements.

[0122] The rendering module 1205 is used to render the interface configuration information to obtain a visual interface, which is used to display the data analysis report corresponding to the source data.

[0123] In some optional implementations, the layout information includes target width and target height; the second determining module 1203 is further used to determine whether the target interface element corresponding to the target node is a container, and whether the target node and the root node of the abstract semantic layout tree have a parent-child relationship; if the target interface element is not a container, the preset height in the attribute information of the target interface element is used as the target height of the target interface element; and the preset interface width of the visual interface is used as the target width of the target interface element.

[0124] In some optional implementations, the second determining module 1203 is further configured to: if the target interface element is a container, use the interface width as the target width of the target interface element; determine whether all the child interface elements corresponding to the child nodes of the target node are containers; if all the child interface elements are non-containers, use the preset height in the attribute information of the child interface element as the target height of the child interface element; determine the target width of the child interface element based on the target width of the target interface element; and determine the target height of the target interface element based on the target height of the child interface element.

[0125] In some optional implementations, the second determining module 1203 is further configured to obtain the preset width in the attribute information of the sub-interface element; obtain the first width based on the sum of all preset widths, and obtain the total width based on the sum of the preset total width interval and the first width; if the total width is greater than the target width of the target interface element, then perform line splitting on all sub-interface elements and determine the target width of the sub-interface element in each line; if the total width is less than the target width of the target interface element, then adjust the preset width of the sub-interface element based on the difference between the total width and the target width of the target interface element to obtain the target width of the sub-interface element.

[0126] In some optional implementations, the second determining module 1203 is further configured to select the sub-interface element with the largest target height from each row as a reference sub-interface element; determine the initial height of the target interface element based on the sum of the target heights of each reference sub-interface element; and obtain the target height of the target interface element based on the sum of the initial height of the target interface element and the preset total height interval.

[0127] In some optional implementations, the second determining module 1203 is further configured to: if all sub-interface elements are containers, determine the remaining width based on the difference between the target width of the target interface element and the preset total width interval; determine the initial width of each sub-interface element based on the ratio of the remaining width to the total number of sub-interface elements; adjust the initial width of the sub-interface element based on the target width of the interface elements contained in the sub-interface element to obtain the target width of the sub-interface element; and determine the target height of the sub-interface element based on the target height of the interface elements contained in the sub-interface element.

[0128] In some optional implementations, the second determining module 1203 is further configured to obtain the first reference coordinates and reference height of the reference interface element, wherein the first reference coordinates are the corner coordinates of the reference interface element, and the reference interface element and the target interface element are adjacent in the height direction; determine the second reference coordinates of the reference interface element based on the fusion result of the first reference coordinates and the reference height; obtain the first width sub-interval and the first height sub-interval, wherein the first width sub-interval is the distance between the target interface element and the target boundary line, the target boundary line is the boundary line adjacent to the target interface element in the visualization interface, and the first height sub-interval is the distance between the target interface element and the reference interface element in the height direction; and determine the target coordinates of the target interface element using the second reference coordinates, the first width sub-interval, and the first height sub-interval.

[0129] The visualization interface generation apparatus provided in this embodiment of the invention can execute the visualization interface generation method provided in any embodiment of the invention, and has the corresponding functional modules and beneficial effects of the method. Further functional descriptions of the various modules and units described above are the same as in the corresponding embodiments described above, and will not be repeated here.

[0130] Figure 13 This is a schematic diagram of an electronic device provided in an embodiment of the present invention. The electronic device can be the terminal device or server described above.

[0131] The following is a detailed reference. Figure 13 This diagram illustrates a suitable structural schematic for implementing an electronic device according to embodiments of the present invention. The electronic device may include a processor (e.g., a central processing unit, graphics processor, etc.) 1301, which can perform various appropriate actions and processes according to a program stored in read-only memory (ROM) 1302 or a program loaded from memory 1308 into random access memory (RAM) 1303. The RAM 1303 also stores various programs and data required for the operation of the electronic device. The processor 1301, ROM 1302, and RAM 1303 are interconnected via a bus 1304. An input / output (I / O) interface 1305 is also connected to the bus 1304.

[0132] Typically, the following devices can be connected to I / O interface 1305: input devices 1306 including, for example, touchscreens, touchpads, keyboards, mice, cameras, microphones, accelerometers, gyroscopes, etc.; output devices 1307 including, for example, liquid crystal displays (LCDs), speakers, vibrators, etc.; memory devices 1308 including, for example, magnetic tapes, hard disks, etc.; and communication devices 1309. Communication device 1309 allows electronic devices to communicate wirelessly or wiredly with other devices to exchange data. Although Figure 13Electronic devices with various devices are shown, but it should be understood that it is not required to implement or have all of the devices shown, and more or fewer devices may be implemented or have instead.

[0133] In particular, according to embodiments of the present invention, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, embodiments of the present invention include a computer program product comprising a computer program carried on a non-transitory 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 a communication device 1309, or installed from a memory 1308, or installed from a ROM 1302. When the computer program is executed by the processor 1301, it performs the functions defined in the method for generating a visual interface according to embodiments of the present invention.

[0134] Figure 13 The electronic device shown is merely an example and should not be construed as limiting the functionality and scope of use of the embodiments of the present invention.

[0135] This invention also provides a computer-readable storage medium. The methods described above according to embodiments of the invention can be implemented in hardware or firmware, or implemented as recordable on a storage medium, or implemented as computer code originally stored on a remote storage medium or a non-transitory machine-readable storage medium and subsequently stored on a local storage medium after being downloaded via a network. Thus, the methods described herein can be processed by software stored on a storage medium using a general-purpose computer, a dedicated processor, or programmable or dedicated hardware. The storage medium can be a magnetic disk, optical disk, read-only memory, random access memory, flash memory, hard disk, or solid-state drive, etc.; further, the storage medium can also include combinations of the above types of memory. It is understood that computers, processors, microprocessor controllers, or programmable hardware include storage components capable of storing or receiving software or computer code. When the software or computer code is accessed and executed by the computer, processor, or hardware, the method for generating the visual interface shown in the above embodiments is implemented.

[0136] A portion of this invention can be applied as a computer program product, such as computer program instructions, which, when executed by a computer, can invoke or provide the methods and / or technical solutions according to the invention through the operation of the computer. Those skilled in the art will understand that the forms in which computer program instructions exist in a computer-readable medium include, but are not limited to, source files, executable files, installation package files, etc. Correspondingly, the ways in which computer program instructions are executed by a computer include, but are not limited to: the computer directly executing the instructions, or the computer compiling the instructions and then executing the corresponding compiled program, or the computer reading and executing the instructions, or the computer reading and installing the instructions and then executing the corresponding installed program. Here, the computer-readable medium can be any available computer-readable storage medium or communication medium accessible to a computer.

[0137] Although embodiments of the invention have been described in conjunction with the accompanying drawings, those skilled in the art can make various modifications and variations without departing from the spirit and scope of the invention, and such modifications and variations all fall within the scope defined by the appended claims.

Claims

1. A method for generating a visual interface, characterized in that, The method includes: In response to the selection operation of the target object, source data is determined and input into the layout generation model to obtain an abstract semantic layout tree. The nodes of the abstract semantic layout tree are used to represent the type of interface element. The abstract semantic layout tree contains the hierarchical relationship between nodes. The layout generation model is configured to determine the type of interface element based on the source data. Based on the type represented by the node, determine the interface element corresponding to the node and the attribute information of the interface element; Based on the hierarchical relationship between the nodes, the layout information of the interface elements corresponding to the nodes is determined; Based on the attribute information and layout information of the interface elements, interface configuration information is generated; The interface configuration information is rendered to obtain a visualization interface, which is used to display the data analysis report corresponding to the source data.

2. The method according to claim 1, characterized in that, The layout information includes target width and target height; determining the layout information of the interface elements corresponding to the nodes based on the hierarchical relationship between the nodes includes: Determine whether the target interface element corresponding to the target node is a container, and the target node and the root node of the abstract semantic layout tree have a parent-child relationship; If the target interface element is not a container, then the preset height in the attribute information of the target interface element is used as the target height of the target interface element. The preset width of the visual interface is used as the target width of the target interface element.

3. The method according to claim 2, characterized in that, The method further includes: If the target interface element is a container, then the interface width is taken as the target width of the target interface element; Determine whether all child interface elements corresponding to the child nodes of the target node are containers; If all the sub-interface elements are non-containers, then the preset height in the attribute information of the sub-interface elements is used as the target height of the sub-interface elements. Based on the target width of the target interface element, determine the target width of the sub-interface element; The target height of the target interface element is determined based on the target height of the sub-interface element.

4. The method according to claim 3, characterized in that, Determining the target width of the sub-interface element based on the target width of the target interface element includes: Obtain the preset width from the attribute information of the sub-interface element; The first width is obtained based on the sum of all the preset widths, and the total width is obtained based on the sum of the preset total width interval and the first width; If the total width is greater than the target width of the target interface element, then all the sub-interface elements are split into rows, and the target width of the sub-interface elements in each row is determined. If the total width is less than the target width of the target interface element, then based on the difference between the total width and the target width of the target interface element, the preset width of the sub-interface element is adjusted to obtain the target width of the sub-interface element.

5. The method according to claim 3, characterized in that, Determining the target height of the target interface element based on the target height of the sub-interface element includes: Select the sub-interface element with the largest target height from each row as the reference sub-interface element; The initial height of the target interface element is determined based on the sum of the target heights of each of the reference sub-interface elements. The target height of the target interface element is obtained by summing the initial height of the target interface element with the preset total height interval.

6. The method according to claim 3, characterized in that, The method further includes: If all the sub-interface elements are containers, the remaining width is determined based on the difference between the target width of the target interface element and the preset total width interval. The initial width of each sub-interface element is determined based on the ratio of the remaining width to the total number of sub-interface elements. Based on the target width of the interface elements contained in the sub-interface element, the initial width of the sub-interface element is adjusted to obtain the target width of the sub-interface element. The target height of the sub-interface element is determined based on the target height of the interface elements contained within it.

7. The method according to claim 2, characterized in that, The layout information includes target coordinates; the process of determining the target coordinates of the target interface element corresponding to the target node includes: Obtain the first reference coordinates and reference height of the reference interface element, wherein the first reference coordinates are the corner coordinates of the reference interface element, and the reference interface element is adjacent to the target interface element in the height direction. Based on the fusion result of the first reference coordinates and the reference height, the second reference coordinates of the reference interface element are determined; Obtain a first width sub-interval and a first height sub-interval, wherein the first width sub-interval is the distance between the target interface element and the target boundary line, the target boundary line is the boundary line adjacent to the target interface element in the visualization interface, and the first height sub-interval is the distance between the target interface element and the reference interface element in the height direction. The target coordinates of the target interface element are determined using the second reference coordinates, the first width sub-interval, and the first height sub-interval.

8. A device for generating a visual interface, characterized in that, The device includes: The acquisition module is used to respond to the selection operation of the target object, determine the source data, and input the source data into the layout generation model to obtain an abstract semantic layout tree. The nodes of the abstract semantic layout tree are used to represent the type of interface element. The abstract semantic layout tree contains the hierarchical relationship between nodes. The layout generation model is configured to determine the type of interface element based on the source data. The first determining module is used to determine the interface element corresponding to the node and the attribute information of the interface element based on the type represented by the node. The second determining module is used to determine the layout information of the interface elements corresponding to the nodes based on the hierarchical relationship between the nodes; A generation module is used to generate interface configuration information based on the attribute information and layout information of the interface elements; The rendering module is used to render the interface configuration information to obtain a visual interface, which is used to display the data analysis report corresponding to the source data.

9. An electronic device, characterized in that, include: A memory and a processor are communicatively connected, the memory storing computer instructions, and the processor executing the computer instructions to perform the method for generating a visual interface according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer instructions for causing a computer to perform the method for generating a visual interface according to any one of claims 1 to 7.

Images