Method, system, medium and equipment for generating BI picture from design draft

Abstract

The invention discloses a method, a system, a medium and equipment for generating a BI picture from a design manuscript, and the method comprises the steps: obtaining design manuscript file data, carrying out the classification recognition and labeling of the data, and converting the data into structured data; according to the structured data, generating a standardized query demand, and establishing a mapping table of the design annotation and the data demand; calling a Text2SQL (Structured Query Language) model to generate an initial query statement for verification according to a standardized query requirement, and generating structural data of design draft analysis; selecting a target technology stack according to the structural data analyzed by the design draft, and generating a front-end code; and according to the front-end code, compiling to generate a runnable static file, starting a local preview service, and according to feedback, automatically updating a design draft analysis algorithm and a Text2SQL (Structured Query Language) model. According to the method, data query, code generation and picture rendering are automatically completed through design draft input through automatic code generation and the Text2SQL technology, and the development efficiency of BI pictures is improved.

Description

Technical Field

[0001] This invention relates to a method, system, medium, and device for generating BI screens from design drafts, belonging to the interdisciplinary fields of data visualization, natural language processing, and automatic code generation. Background Technology

[0002] As enterprises increasingly rely on data-driven decision-making, the efficient generation of BI screens, as the core carrier of data presentation, has become crucial for improving data analysis efficiency. Currently, the methods for generating BI screens have many limitations: traditional methods rely on manually writing SQL queries and configuring chart code, requiring developers to possess professional technical skills and consuming significant time in design interpretation, data mapping, and code writing, resulting in long development cycles and low efficiency; furthermore, manual operation is prone to errors due to misunderstandings, affecting the accuracy and consistency of BI screens.

[0003] While existing technologies like Text2SQL can convert natural language into SQL, they are not deeply integrated with design draft parsing and automatic code generation, making it impossible to directly generate runnable BI screen code based on design drafts. Furthermore, the application of automatic code generation technology in the BI field is largely limited to fixed templates, lacking dynamic adaptation to personalized elements in design drafts. Therefore, achieving one-click generation from design drafts to BI screens, and streamlining the entire process from design intent parsing, data query generation, to automatic code writing, has become a pressing technical challenge. Summary of the Invention

[0004] The purpose of this invention is to provide a method, system, medium, and device for generating BI screens from design drafts. By combining automatic code generation technology and Text2SQL technology, it enables automatic data querying, code generation, and screen rendering through data input from design draft files, effectively improving the efficiency and accuracy of BI screen development.

[0005] To achieve the above objectives, the present invention is implemented using the following technical solution.

[0006] In a first aspect, the present invention provides a method for generating a BI (Business Intelligence) screen from a design draft, comprising: Obtain the design draft file data, classify, identify, and label the data, and convert it into structured data; Based on structured data, standardized query requirements are generated, and a mapping table between design annotations and data requirements is established. Based on standardized query requirements, the Text2SQL model is called to generate an initial query statement for verification, generating structured data for design draft parsing; Based on the structured data parsed from the design draft, select the target technology stack and generate the front-end code; Based on the front-end code, compile to generate runnable static files, start the local preview service to display the BI screen, and automatically update the design draft parsing algorithm and Text2SQL model based on feedback.

[0007] Furthermore, the system receives user-uploaded BI screen design drafts in PSD, Figma, and Sketch formats, and uses image recognition and layer analysis technologies to classify and identify the data and extract design elements.

[0008] Furthermore, data classification and identification include chart type, layout structure, and style attributes. Chart type includes line chart and bar chart; layout structure includes component position, component size, and component spacing; style attributes include color, border, and font.

[0009] Furthermore, the annotation information includes the names and dimensions of the data fields.

[0010] Furthermore, the text annotations in the design drafts and the natural language supplemented by users are analyzed, and standardized query requirements are generated based on the analysis results of the design drafts.

[0011] Furthermore, the initial query statement validation includes field existence, logical rationality, and supplementation and optimization of the rule base.

[0012] Furthermore, the core functionalities of the front-end code include component mapping, layout implementation, style conversion, and data binding.

[0013] Furthermore, the layout implementation generates CSS Grid / Flex layout code based on the coordinates of the component mapping design draft, ensuring that the component position, size, and design remain consistent. Data binding uses the Text2SQL model to encapsulate the generated initial query statement into a corresponding API call code, and combines it with the component to generate complete front-end code; Automatic code generation technology can directly generate complete and high-quality front-end code, effectively shortening the time spent writing code manually and reducing development costs. At the same time, by accurately parsing the input design drafts, it effectively avoids implementation errors in the design drafts due to human misunderstanding, further improving quality.

[0014] Furthermore, user feedback on the generated BI screen is collected, and the feedback data is transformed into design draft parsing rules and code generation templates, which are then stored in the system knowledge base. This enables automatic iterative updates to the design draft parsing algorithm and Text2SQL model. This technology can accelerate the parsing of design drafts and the automatic generation of code, continuously meeting user needs, reducing manual maintenance costs, improving the accuracy of BI screens, and supporting more flexible and personalized visualization customization.

[0015] Secondly, the present invention provides a system for generating a BI (Business Intelligence) screen from a design draft, comprising: The design draft parsing module is used to obtain the file data of the design draft, classify and identify the data, label it, and convert it into structured data. The requirement extraction module is used to generate standardized query requirements based on structured data and establish a mapping table between design annotations and data requirements. The Text2SQL enhancement module is used to generate initial query statements based on standardized query requirements by calling the Text2SQL model for verification, and to generate structured data for parsing the design draft. The code generation module is used to select the target technology stack and generate front-end code based on the structured data parsed from the design draft; The rendering and feedback module is used to compile and generate runnable static files based on the front-end code, start a local preview service to display the BI screen, and automatically update the design draft parsing algorithm and Text2SQL model based on feedback.

[0016] Thirdly, the present invention provides a computer-readable storage medium having a computer program / instructions stored thereon, which, when executed by a processor, implements the steps of the method for generating a BI screen from a design draft as described in any of the first aspects.

[0017] Fourthly, the present invention provides a computer device, comprising: Memory, used to store computer programs / instructions; A processor for executing the computer program / instructions to implement the steps of the method for generating a BI screen from a design draft as described in any of the first aspects.

[0018] Compared with the prior art, the beneficial effects achieved by the present invention are as follows: 1. The method for generating BI (Business Intelligence) screens from design drafts provided by this invention involves acquiring design draft file data, classifying and annotating the design draft data, and converting it into structured data. Based on this, standardized query requirements are generated, and a mapping table between design annotations and data requirements is established. Subsequently, a Text2SQL model is called to generate initial query statements and verify them, outputting the structured data parsed from the design draft. By accurately parsing the layout, style, and annotation information of the design draft, this invention enables the generated code to highly reproduce the design intent, solving the problem of "design and implementation disconnect" in traditional development. Furthermore, the target technology stack is automatically selected based on the structured data parsed from the design draft, generating front-end code that meets the target requirements. Template selection is performed using the enterprise's existing technical architecture, significantly reducing system migration and adaptation costs and improving development accuracy. This invention dynamically optimizes parsing rules and model parameters based on user feedback data, continuously enhancing the ability to process complex design drafts, achieving iteration and optimization. 2. The system for generating BI screens from design drafts provided by this invention, through a design draft parsing module, a requirement extraction module, a Text2SQL enhancement module, a code generation module, and a rendering and feedback module, eliminates the need for manual coding throughout the entire process from design draft data input to BI screen rendering, significantly shortening the development cycle and effectively improving the development speed. 3. The computer-readable storage medium and computer device provided by the present invention can execute the steps of the method for generating BI screen from design drafts provided by the present invention. Attached Figure Description

[0019] Figure 1 A flowchart illustrating a method according to an embodiment of the present invention. Detailed Implementation

[0020] It should be noted that: The technical solution of the present invention will be described in detail below with reference to the accompanying drawings and specific embodiments. It should be understood that the embodiments of the present invention and the specific features in the embodiments are detailed descriptions of the technical solution of the present invention, rather than limitations thereof. In the absence of conflict, the embodiments of the present invention and the technical features in the embodiments can be combined with each other.

[0021] The term "and / or" simply describes the relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A alone, A and B simultaneously, or B alone. Additionally, the character " / " generally indicates that the preceding and following related objects have an "or" relationship. Example 1

[0022] This embodiment describes a method for generating a BI (Business Intelligence) screen from a design draft, including: Obtain the design draft file data, classify, identify, and label the data, and convert it into structured data; Based on structured data, standardized query requirements are generated, and a mapping table between design annotations and data requirements is established. Based on standardized query requirements, the Text2SQL model is called to generate an initial query statement for verification, generating structured data for design draft parsing; Based on the structured data parsed from the design draft, select the target technology stack and generate the front-end code; Based on the front-end code, compile to generate runnable static files, start the local preview service to display the BI screen, and automatically update the design draft parsing algorithm and Text2SQL model based on feedback.

[0023] Furthermore, users upload Figma design drafts, and the file data of the design drafts is classified and identified and the design elements are extracted through image recognition and layer analysis, including chart types, layout structure, style attributes and annotation information. In this embodiment, the chart types of the design drafts include line charts, bar charts and pie charts. The top of the design draft is a line chart with the title "Monthly Sales Trend", the left side of the middle of the design draft is a bar chart with the title "Sales Revenue of Each Category", the right side of the middle of the design draft is a pie chart with the title "Payment Method Percentage", and the bottom of the design draft is a table with column names labeled as order number, amount and date. The layout structure in the design draft includes the position, size, and spacing of components. In this embodiment, taking the top line chart of the design draft as an example, the x-axis of the line chart is set to x=50px, the y-axis is set to y=30px, the width is set to 600px, and the height is set to 200px. The style attributes in the design draft include color, font, and border. The color of the line chart is set to #f5222d.

[0024] Furthermore, the text annotations in the design drafts and the natural language descriptions provided by the users are analyzed. Based on the analysis results, standardized query requirements are generated. Semantic matching technology is used to link design elements and data requirements, including: 1. Display the monthly sales trend from January to June 2024 in a line chart at the top of the design draft; 2. Display a comparison of sales revenue for each product category in Q2 2024 in a bar chart on the left side of the middle section of the design draft; 3. Display the percentage of payment methods in Q2 2024 in a pie chart on the right side of the middle section of the design draft; 4. Display the top 10 orders by value in June 2024 in the table at the bottom of the design draft.

[0025] Furthermore, based on the field names extracted from the design draft and the natural language requirements, the Txet2SQL model is invoked to generate an initial query statement. The initial query statement is then validated using the database's metadata. First, check if the fields correspond one-to-one; second, verify if the logic is reasonable; finally, supplement and optimize the user's new requirements through the rule base, and output the structured data parsed from the design draft.

[0026] Furthermore, based on the structured data parsed from the design draft, the target technology stack that meets user needs is selected, and front-end code is generated. The core functions of the front-end code include component mapping, layout implementation, style conversion, and data binding.

[0027] Taking the line chart at the top of the design draft as an example, component mapping refers to mapping the line chart in the design draft to ECharts. <line>The component automatically configures xAxis (binding to the "month" field) and yAxis (binding to the "sales" field); the layout is implemented by generating CSS Grid / Flex layout code based on the coordinates of the design draft, ensuring that the component position and size are consistent with the design; the style conversion is based on the "red #f5222d" in the design draft, which is converted into a CSS variable, and the text element located at (x: 50px, y: 30px) with a size of 600px × 200px in the design draft is converted into a CSS font property with the corresponding font size, font weight and line height; In the line chart of this embodiment, the generated initial query statement is: SELECT month, SUM (quality) FROM orders WHERE year=2024 AND month BETWEEN 1 AND 6 GROUP BY month.

[0028] Furthermore, a template is selected based on the technology stack. In this embodiment, the React functional component template is selected, and ECharts is used to generate the component import code: The line chart component is <linechart style="{{left：‘50’px}}data={trendData} / ">The trendData is obtained by calling the SQL above via the API.

[0029] Furthermore, the code is compiled by executing `npm run build`, generating runnable static files. The local preview service is started to render the BI screen and perform real-time debugging. User feedback on the generated BI screen is collected, and the feedback data is converted into design draft parsing rules and code generation templates, which are then stored in the system knowledge base. This enables automatic iterative updates of the design draft parsing algorithm and the Text2SQL model. Example 2

[0030] Based on the method for generating a BI (Business Intelligence) screen from a design draft as described in Embodiment 1, this embodiment introduces a system for generating a BI screen from a design draft, including: The design draft parsing module is used to obtain the file data of the design draft, classify and identify the data, label it, and convert it into structured data. The requirement extraction module is used to generate standardized query requirements based on structured data and establish a mapping table between design annotations and data requirements. The Text2SQL enhancement module is used to generate initial query statements based on standardized query requirements by calling the Text2SQL model for verification, and to generate structured data for parsing the design draft. The code generation module is used to select the target technology stack and generate front-end code based on the structured data parsed from the design draft; The rendering and feedback module is used to compile and generate runnable static files based on the front-end code, start a local preview service to display the BI screen, and automatically update the design draft parsing algorithm and Text2SQL model based on feedback. Example 3

[0031] Based on the method for generating a BI screen from a design draft as described in Embodiment 1, this embodiment introduces a computer-readable storage medium storing a computer program / instructions thereon. When the computer program / instructions are executed by a processor, they implement the steps of the method for generating a BI screen from a design draft as described in any of Embodiment 1. Example 4

[0032] Based on the method for generating a BI screen from a design draft as described in Embodiment 1, this embodiment provides a computer device, including: Memory, used to store computer programs / instructions; A processor for executing the computer program / instructions to implement the steps of the method for generating a BI screen from a design draft as described in any one of Embodiment 1.

[0033] Those skilled in the art will understand that embodiments of the present invention can be provided as methods, systems, or computer program products. Therefore, the present invention can take the form of a completely hardware embodiment, a completely software embodiment, or an embodiment combining software and hardware aspects. Furthermore, the present invention can take the form of a computer program product embodied 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.

[0034] This invention is described with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products according to embodiments of the invention. It will be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing apparatus to produce a machine, such that the instructions, which execute via the processor of the computer or other programmable data processing apparatus, generate instructions for implementing the flowchart illustrations and / or block diagrams. Figure 1 One or more processes and / or boxes Figure 1 A device that provides the functions specified in one or more boxes.

[0035] These computer program instructions may also be stored in a computer-readable storage medium that can direct a computer or other programmable data processing device to function in a particular manner, such that the instructions stored in the computer-readable storage medium produce an article of manufacture including instruction means, which are implemented in a process Figure 1 One or more processes and / or boxes Figure 1 The function specified in one or more boxes.

[0036] These computer program instructions may also be loaded onto a computer or other programmable data processing equipment to cause a series of operational steps to be performed on the computer or other programmable equipment to produce a computer-implemented process, thereby providing instructions that execute on the computer or other programmable equipment for implementing the process. Figure 1 One or more processes and / or boxes Figure 1 The steps of the function specified in one or more boxes.

[0037] The embodiments of the present invention have been described above with reference to the accompanying drawings. However, the present invention is not limited to the specific embodiments described above. The specific embodiments described above are merely illustrative and not restrictive. Those skilled in the art can make many other forms under the guidance of the present invention without departing from the spirit and scope of the claims. All of these forms are within the protection scope of the present invention.< / linechart> < / line>

Claims

1. A method for generating a BI (Business Intelligence) screen from a design draft, characterized in that, include: Obtain the design draft file data, classify, identify, and label the data, and convert it into structured data; Based on the structured data, standardized query requirements are generated, and a mapping table between design annotations and data requirements is established. Based on the standardized query requirements, the Text2SQL model is called to generate an initial query statement for verification, generating structured data for design draft parsing; Based on the structured data parsed from the design draft, the target technology stack is selected, and front-end code is generated; Based on the aforementioned front-end code, compile to generate a runnable static file, start the local preview service to display the BI screen, and automatically update the design draft parsing algorithm and Text2SQL model based on feedback.

2. The method for generating a BI screen from a design draft according to claim 1, characterized in that, The data classification and identification includes chart type, layout structure, and style attributes.

3. The method for generating a BI screen from a design draft according to claim 1, characterized in that, The verification of the initial query statement includes field existence, logical rationality, and supplementation and optimization of the rule base.

4. The method for generating a BI screen from a design draft according to claim 1, characterized in that, The core functions of the front-end code include component mapping, layout implementation, style conversion, and data binding.

5. The method for generating a BI screen from a design draft according to claim 4, characterized in that, The layout is implemented by generating CSS Grid / Flex layout code based on the component mapping; The data binding uses the Text2SQL model to encapsulate the generated initial query statement into a corresponding API call code, and combines it with the component to generate complete front-end code.

6. A system for generating BI (Business Intelligence) screens from design drafts, characterized in that, include: The design draft parsing module is used to obtain the file data of the design draft, classify and identify the data, label it, and convert it into structured data. The requirement extraction module is used to generate standardized query requirements based on the structured data and establish a mapping table between design annotations and data requirements. The Text2SQL enhancement module is used to call the Text2SQL model to generate an initial query statement for verification based on the standardized query requirements, and generate structured data for design draft parsing; The code generation module is used to select the target technology stack and generate front-end code based on the structured data parsed from the design draft; The rendering and feedback module is used to compile and generate runnable static files based on the front-end code, start a local preview service to display the BI screen, and automatically update the design draft parsing algorithm and Text2SQL model based on feedback.

7. A computer-readable storage medium having a computer program / instructions stored thereon, characterized in that, When the computer program / instruction is executed by the processor, it implements the steps of the method for generating a BI screen from a design draft as described in any one of claims 1 to 5.

8. A computer device, characterized in that, include: Memory, used to store computer programs / instructions; A processor for executing the computer program / instructions to implement the steps of the method for generating a BI screen from a design draft as described in any one of claims 1 to 5.

Images