Artificial intelligence-based code generation method, apparatus, device, and medium

Abstract

This application relates to the fields of artificial intelligence and front-end technology, and in particular to an AI-based code generation method, apparatus, device, and medium to solve the technical problem of low accuracy in traditional transcoding solutions. The method includes: acquiring a UI design source file and a corresponding design effect image; extracting all layer information from the UI design source file; identifying the layer information to determine the basic layer type and front-end tag type; using the layer type and front-end tag type as node attributes, generating a tree-structured layout relationship file containing node attributes and layout structure based on a preset recursive cutting algorithm, wherein the layout structure includes layout hierarchy and layout style; and calling an AI visual reconstruction module to combine the layout relationship file with the design effect image to generate front-end code based on the DSL and the design effect image.

Description

Technical Field

[0001] This application relates to the fields of artificial intelligence and front-end technology, and in particular to a method, apparatus, device and medium for generating code based on artificial intelligence. Background Technology

[0002] Converting UI designs into code is a recurring task for front-end engineers. While this task is relatively simple, it accounts for a significant portion of their workload. Therefore, improving the efficiency of converting UI designs into code has always been one of the goals pursued by front-end engineers.

[0003] Previously, some solutions directly used the GPT-4O model (a neural network code generation algorithm) to analyze the design draft images, thus implementing an AI visual reconstruction system. While this reduced the development cost of converting design drafts into code to some extent, the accuracy of label types and complex layer layouts in the generated code was low, making it impossible to continuously optimize and follow up. Summary of the Invention

[0004] This application provides a code generation method, apparatus, device, and medium based on artificial intelligence to solve the technical problem of low accuracy in traditional transcoding schemes.

[0005] An artificial intelligence-based code generation method includes: Obtain the UI design source file and the corresponding design effect image, and extract all layer information from the UI design source file; The layer information is identified to determine the basic type of the layer and the type of the front-end label; Using the layer type and front-end tag type as node attributes, a tree-structured layout relationship file containing node attributes and layout structure is generated based on a preset recursive cutting algorithm. The layout structure includes layout hierarchy and layout style. The AI ​​visual reconstruction module is invoked to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image.

[0006] Furthermore, before the step of calling the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image, the process further includes: The generated layout relationship file is evaluated using a model to calculate the number of layout nodes and the inverse layout index in the layout relationship file; When the number of layout nodes is greater than a preset threshold or the inverse layout index is greater than a preset threshold, the recursive cutting strategy is adjusted to regenerate the layout relationship file until the number of layout nodes and / or the inverse layout index is less than the preset threshold; wherein, the number of layout nodes refers to the number of nodes used to describe the layout structure in the generated layout relationship file, and the inverse layout index is used to measure the rationality of the row and column layout in the generated layout relationship file.

[0007] Furthermore, the step of calling the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image includes: The AI ​​visual reconstruction module is invoked and executed in the order of visual recognition, text recognition, layout generation, and code output to generate front-end code; In the visual recognition stage, element category matching is performed by combining the visual features of the elements in the design draft image with the tag types in the node attributes of the layout relationship file. In the text recognition stage, the text content in the design draft image is associated with and extracted from the style attributes of the corresponding tags in the layout relationship file. In the layout generation stage, the spatial layout relationship presented by the design draft image is compared and calibrated with the tag types and layout styles in the node attributes of the layout relationship file to achieve tag mapping and style binding between the design draft image and the layout relationship file. In the code output stage, front-end code is generated based on the processing results of the visual recognition stage, text recognition stage, and layout generation stage.

[0008] Furthermore, when generating the front-end code, a syntax rule mapping table and code template corresponding to the target front-end framework are invoked to convert the layout relationship file into code that conforms to the syntax specifications of the target framework.

[0009] Furthermore, the tree-structured layout relationship file containing node attributes and layout structure, generated based on a preset recursive cutting algorithm, includes: Determine the development phase of the front-end project's development modules; When the development phase of the front-end project development module is in the first stage, the AI ​​model is invoked to generate the layout relationship file based on the layer information; When the development phase of the front-end project development module is in the second stage, the layout relationship file is generated based on a preset recursive cutting algorithm, wherein the second stage is a subsequent stage of the first stage.

[0010] Furthermore, the recursive cutting algorithm includes: Furthermore, the recursive cutting algorithm includes: Step 1: Set the entire layer area as the current sub-region; Step 2: Calculate the direction and position of the cutting point based on the layer position and size of the current sub-region, and cut the current sub-region into two new sub-regions according to the direction and position of the cutting point; Step 3: Using the two newly generated sub-regions as the current sub-regions, execute Step 2 until the recursion ends when the newly generated sub-regions contain only indivisible graphics. The layout hierarchy and layout style information are determined based on the relationship between the two layers after each cut, and the relationship includes intersecting, disjoint, or containing relationships.

[0011] Furthermore, after the method calls the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image, the method further includes: A code preview interface is rendered, which is used to display the front-end code, and the front-end code is in an editable state.

[0012] An artificial intelligence-based code generation device includes: The acquisition module is used to acquire the UI design draft source file and the corresponding design draft effect image, and extract all layer information from the UI design draft source file; The determination module is used to identify the layer information to determine the basic type of the layer and the type of the front-end label; The first generation module is used to take the layer type and the front-end tag type as node attributes and generate a tree structure layout relationship file containing node attributes and layout structure based on a preset recursive cutting algorithm. The layout structure includes layout hierarchy and layout style. The second generation module is used to call the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image, so as to generate front-end code based on the layout relationship file and the design draft effect image.

[0013] A computer device includes a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor, when executing the computer program, implements the AI-based code generation method described in any of the preceding claims.

[0014] A computer-readable storage medium storing a computer program that, when executed by a processor, implements the AI-based code generation method as described in any of the preceding claims.

[0015] In one of the solutions provided in this application, layers are extracted automatically and recursively to generate a layout relationship file. AI then combines visual information and the layout relationship file to generate code, shortening development time and improving the accuracy of tag types, thus effectively controlling layout restoration errors. This efficiently transforms UI design drafts into high-quality front-end code, significantly reducing front-end development costs and adapting to the rapid development needs of various types of pages. Attached Figure Description

[0016] To more clearly illustrate the technical solutions of the embodiments of this application, the drawings used in the description of the embodiments of this application will be briefly introduced below. Obviously, the drawings described below are only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0017] Figure 1 This is a flowchart illustrating an artificial intelligence-based code generation method in one embodiment of this application; Figure 2 This is another flowchart illustrating an artificial intelligence-based code generation method in one embodiment of this application; Figure 3 This is a schematic diagram of a code generation device based on artificial intelligence according to one embodiment of this application; Figure 4 This is a schematic diagram of the structure of a computer device according to one embodiment of this application. Detailed Implementation

[0018] To make the technical problems, technical solutions, and beneficial effects solved by this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0019] like Figure 1 As shown in the figure, this application provides an artificial intelligence-based code generation method that can be used in computer devices. The method includes the following steps: S10. Obtain the UI design draft source file and the corresponding design draft effect image, and extract all layer information from the UI design draft source file; S20. Identify the layer information to determine the basic type of the layer and the front-end label type; The basic layer types refer to the inherent shape categories of layers extracted from UI design source files (such as MasterGo's .go files), reflecting the original visual attributes of elements in the design draft. These mainly include: Image type: Layers used to display visual elements such as icons, background images, and illustrations.

[0020] Text type: Layers used to carry text content (such as titles, descriptive text, button text, etc., and text elements such as usernames and instant repayment).

[0021] Rectangle type: The basic graphic layer used to build interface frames, background containers, or dividing areas (such as button borders, card backgrounds, area dividers, etc.).

[0022] These basic types are direct descriptions of the layer shapes in the design draft and form the basis for subsequent conversion into front-end tags.

[0023] Front-end tag types refer to the code tags used in front-end development to implement the element, based on the basic type of the layer. They are the basic units for building the front-end page structure and mainly include: Corresponding image type layer: Front-end (or The `` tag is used to render images on a page.

[0024] Corresponding text type layer: Front end <text>(or The ) tag is used to display text content (such as in the example code).<textclass="header-title"> Lehua borrows money < / text> ).

[0025] Corresponding rectangular layer type: Front end Tags are used to build containers, backgrounds, or layout structures (as shown in the example code).<divclass="card"> (As a card container).

[0026] Front-end tag types are the specific implementations of basic layer types at the code level, ensuring that visual elements in the design draft can be accurately reproduced through standardized front-end tags.

[0027] The basic layer type represents the element form from a design perspective, while the front-end tag type serves as the implementation vehicle from a development perspective, through preset mapping rules (such as image → ...). , text→ <text>This binds design elements to front-end code tags, providing a clear basis for the conversion of DSL and final code.

[0028] It should be noted that, as an example, the extracted layer information includes not only location, size, and content, but also layer hierarchy (such as a layer being above another layer) and layer names (such as layers requiring special processing marked with an icon). This information together constitutes the basic data for subsequent identification and segmentation. S30. Using the layer type and front-end tag type as node attributes, a tree structure layout relationship file containing node attributes and layout structure is generated based on a preset recursive cutting algorithm. The layout structure includes layout hierarchy and layout style. Using the layer type and front-end tag type as node attributes means that when generating a tree-structured DSL (layout relation file), each layer's basic type (such as image, text, rectangle, etc.) and corresponding front-end tag type (such as...) are used as node attributes. <text> (etc.) are recorded as attribute information for each node in the DSL.

[0029] Layer type is an inherent attribute of a layer extracted from the source file of the design draft. For example, a layer in the design draft may be an image type (used to display icons or backgrounds), a text type (used to display titles or descriptions), or a rectangle type (used as button backgrounds or separators). These types reflect the original visual form of the layer.

[0030] Front-end tag types are tags used in front-end development to implement the element based on the layer type. For example, an image layer corresponds to a front-end tag. (or () Label, text type layer corresponding <text>(or () tag, corresponding to rectangular type layers Tags, etc., are the basic units for building page structure in front-end code.

[0031] S40. Call the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image.

[0032] To facilitate understanding of the embodiments in this application, the code generation of a personal center page of an e-commerce APP is used as an example. The specific implementation of the AI-based code generation method in this embodiment mainly solves the problems of low efficiency and insufficient accuracy in traditional design draft to code conversion through the process of UI extraction → layer recognition → DSL generation → AI code conversion. The specific steps in conjunction with the above example are as follows: First, obtain the UI design source file and the design mockup image, and extract the layer information. As an example, users can select the target layer on the personal center page using the D2C-TOOLS plugin on the MasterGo platform. The plugin will save the selected layer information as a JSON file and export the image of each layer as a ZIP file in PNG format. When uploading to a computer, this ZIP file (containing the layer JSON structure and PNG images) must also be uploaded. Alternatively, the design source file can be a .go format file exported from the MasterGo platform (containing complete page layer data), and the corresponding design mockup image can be a 1080×1920 pixel PNG image (presenting the visual effect of the personal center page, including elements such as avatar, nickname, and order entry).

[0033] The tool parses the .go file to extract all layer information, including: Layer position (e.g., top left corner coordinates (50, 80), bottom right corner coordinates (150, 180) of the avatar layer); Layer size (e.g., nickname text layer width 200px, height 30px); Layer content (e.g., a text layer containing the username, or an image layer containing a path link to the profile picture); Layer hierarchy (e.g., the order entry layer is located above the background layer, and they are sibling layers).

[0034] Identify basic layer types and front-end label types. Basic layer type identification: Based on layer information, avatars and background images are image layers, nicknames and "My Orders" are text layers, and button borders are rectangle layers.

[0035] Front-end tag type mapping: Converts basic types to front-end tags according to preset rules, where: Image type layer corresponding Label; Text type layer corresponding <text>Label; Rectangular layer (as button background) Label.

[0036] Next, a tree-structured DSL is generated based on a preset recursive cutting algorithm. Taking the entire personal center page as the initial sub-region (1080px wide, 1920px high), the DSL (i.e., the tree-structured layout file, hereinafter referred to as the DSL view tree or DSL) is generated using the recursive cutting algorithm: Recursive cutting: First, vertically cut the initial area (540px along the X-axis) to divide the page into the left side (avatar and nickname area) and the right side (setting entry area). The left side generates a column layout and the right side generates a row layout. Node attribute binding: The recognized tag type is used as the node attribute. For example, the avatar node attribute in the left area is represented as {type:"image",src:"avatar.png"}, and the nickname node attribute is represented as {type:"text",content:"username"}. The layout structure is determined as follows: Based on the layer position relationship, the avatars and nicknames in the left area are arranged vertically (the parent node is a column layout flexDirection: "column"), and the entry point on the right is set as a single button (the parent node is a row layout flexDirection: "row").

[0037] Finally, the AI ​​visual reconstruction module is called to generate the front-end code. The above DSL and the design draft image of the personal center are input into the AI ​​visual reconstruction module (for example, the GPT-4O model). The AI ​​visual reconstruction module combines the information from both to generate Vue framework code: using the `type` attribute in the DSL to determine the tag type (e.g., ...). <text>Then, generate styles based on the layout information of the DSL; calibrate the text size and color (e.g., username text size 16px) by referring to the design draft effect image.

[0038] It should be understood that traditional design draft to code conversion requires manual layer-by-layer tag identification and style writing. This is particularly time-consuming for applications like the user center page, and layout errors can easily lead to poor reproduction. This method automatically and recursively extracts layers to generate a DSL (Design Module), and combines AI with visual information and the DSL to generate code, shortening development time and improving tag type accuracy, thus effectively controlling layout reproduction errors. Therefore, this embodiment can efficiently convert UI design drafts into high-quality front-end code, significantly reducing front-end development costs and adapting to the rapid development needs of various types of pages.

[0039] In one embodiment, the recursive cutting algorithm includes: Step 1: Set the entire layer area as the current sub-region; Step 2: Calculate the direction and position of the cutting point based on the layer position and size of the current sub-region, and cut the current sub-region into two new sub-regions according to the direction and position of the cutting point; Step 3: Using the two newly generated sub-regions as the current sub-regions, execute Step 2 until the recursion ends when the newly generated sub-regions contain only indivisible graphics. The layout hierarchy and layout style information are determined based on the relationship between the two layers after each cut, and the relationship includes intersecting, disjoint, or containing relationships.

[0040] In other words, the initial sub-region is set as the entire layer region. The direction and position of the cutting point are calculated based on the layer position and size of the initial sub-region. According to the direction and position of the cutting point, the current sub-region is cut into two new sub-regions. When the cutting point is horizontal, a column layout is generated. When the cutting point is vertical, a row layout is generated. The recursion ends when the cutting reaches a region containing only indivisible graphics. The layout hierarchy and layout style information are determined based on the relationship between the two cut layers, and the relationship includes intersecting, disjoint, or containing relationships.

[0041] If two layers are intersecting (partially overlapping), the overlapping area is taken as the parent node and the non-overlapping area is taken as the child node.

[0042] To facilitate understanding, this paper takes the generation of the DSL for a repayment reminder card design draft of a financial APP as an example to focus on explaining the specific implementation process of the recursive cutting algorithm preset in the embodiments of this application. This algorithm converts all layer information of the UI design draft into a tree-structured DSL by recursively cutting and judging the layout relationship of layer areas.

[0043] For example, suppose the design of a repayment reminder card contains four layer elements: a background rectangle (layer A), the title text "Repayment Date Reminder" (layer B), the amount text "¥2,500.00" (layer C), and the repayment button (layer D). The layer information is shown in the table below: Initial sub-region setting: Set the entire layer area (300px × 150px) of the repayment reminder card as the initial sub-region. This area contains layers A, B, C, and D, where layer A is the background and completely covers the other layers (containment relationship).

[0044] First cut (vertical cut): Calculate the cut point based on layer position and size: Analyze the X-axis coordinates of layers B, C, and D. We find that the starting point of the X-axis for layers B and C is 20px, and their width is 260px (covering an area of ​​280px from left to right). The starting point of the X-axis for layer D is 200px (located on the right side). Determine the vertical cut point as X=200px (the left edge of layer D). Cut the initial sub-region into a left sub-region (0-200px, 200px wide) and a right sub-region (200-300px, 100px wide).

[0045] Layout type generated: Vertical cut corresponds to row layout (flexDirection:"row"), so the initial sub-region layout structure is a row layout, containing two sub-regions, left and right.

[0046] Recursive cutting of the left sub-region (horizontal cutting): The left sub-region (200px × 150px) contains layers B and C, with Y-axis coordinates of 20px and 60px respectively, distributed vertically (separately). The horizontal cutting point is calculated as Y=50px (bottom edge of layer B), dividing the left sub-region into an upper sub-region (0-50px, height 50px) and a lower sub-region (50-150px, height 100px). Horizontal cutting corresponds to column layout (flexDirection: "column"). Therefore, the layout structure of the left sub-region is a column layout, containing both upper and lower sub-regions.

[0047] Termination of recursion condition: The upper sub-region contains only layer B (text type, cannot be further divided), the lower sub-region contains only layer C (text type, cannot be further divided), and the right sub-region contains only layer D (button rectangle, cannot be further divided). The recursive cutting terminates.

[0048] The layout hierarchy and style are determined as follows: Layer A (background) contains all sub-regions and serves as the root node; the row layout of the root node contains left and right sub-regions (separate); the column layout of the left sub-region contains upper and lower sub-regions (separate), corresponding to layers B and C respectively; the right sub-region corresponds to layer D.

[0049] This embodiment demonstrates, through a specific scenario, how the algorithm converts planar layer information into a tree-like DSL containing layout hierarchy and styles. This provides a structured layout basis for subsequent AI visual reconstruction and front-end code generation, serving as a crucial foundation for converting design drafts into code. Through this embodiment, the recursive cutting algorithm can efficiently and accurately convert complex layer structures into a structured DSL, laying the foundation for automated conversion from design drafts to code and significantly improving the accuracy and efficiency of layout reconstruction.

[0050] In one embodiment, before calling the AI ​​visual reconstruction module to combine the layout relationship file with the design draft image to generate front-end code based on the layout relationship file and the design draft image, the method further includes: The generated layout relationship file is evaluated using a model to calculate the number of layout nodes and the inverse layout index in the layout relationship file; When the number of layout nodes is greater than a preset threshold or the inverse layout index is greater than a preset threshold, the recursive cutting strategy is adjusted to regenerate the DSL until the number of layout nodes and / or the inverse layout index is less than the preset threshold; wherein, the number of layout nodes refers to the number of nodes used to describe the layout structure in the generated DSL, and the inverse layout index is used to measure the rationality of the row and column layout in the generated DSL.

[0051] It should be noted that the specific calculation logic of the reverse layout index is as follows: the greater the deviation between the actual layout and the optimal layout (such as prioritizing flex layout when there are 2 sibling layers), the higher the index value. For example, if 2 sibling layers are not used with flex layout but are split into 2 independent layout nodes, the reverse layout index will increase by 1, and optimization will be triggered if it exceeds the preset threshold.

[0052] To facilitate understanding, this section uses the generation of layout relationship files for a social app's message notification card design as an example to focus on the DSL model evaluation and optimization process. This process evaluates the number of layout nodes and the inverse layout exponent of the initial DSL generated by recursive segmentation, iteratively optimizing the segmentation strategy to ensure that the generated DSL better conforms to the front-end layout logic, thus providing a high-quality foundation for subsequent front-end code generation.

[0053] Assume the message notification card design contains 5 layers: card background (layer A), user avatar (layer B), username (layer C), message content (layer D), and time tag (layer E), with the layers arranged horizontally in a layout of avatar on the left and text area on the right.

[0054] Initial layout relationship file generation and evaluation: Generating the initial layout relationship file based on a recursive cutting algorithm. During the initial segmentation, the algorithm vertically divides the right-side text region (containing C, D, and E) into three sub-regions (corresponding to C, D, and E respectively), resulting in a deep nested layout hierarchy. For example, the initial DSL generated is simplified as follows: { "type": "div", / / Layer A (background) "layout": {"display": "flex", "flexDirection": "row"}, / / Root node row layout "children": [ {"type": "image"}, / / Layer B (Avatar) {"type": "div", / / Parent node of the text area on the right "layout": {"display": "flex", "flexDirection": "column"}, / / Column layout "children": [ {"type": "div", "layout": {"display": "flex"}, "children": [{"type":"text"}]} / / Layer C {"type": "div", "layout": {"display": "flex"}, "children": [{"type":"text"}]} / / Layer D {"type": "div", "layout": {"display": "flex"}, "children": [{"type":"text"}]} / / Layer E ] } ]} Model Evaluation: Layout Node Count: The initial layout relationship file contains 5 nodes (including the root node, right-side parent node, and 3 text child nodes) used to describe the layout. The preset threshold is 3 (an empirical value based on the optimal layout of similar cards). In this case, 5 > 3, which is not up to standard. Inverse Layout Index: The right-side text area could have directly contained C, D, and E using a single column layout node, but the algorithm generates 3 redundant layout nodes, resulting in an inverse layout index of 3 (calculation formula: number of redundant layout nodes / number of necessary layout nodes = 3 / 1 = 3). The preset threshold is 1. In this case, 3 > 1, which is not up to standard.

[0055] Adjust the recursive cutting strategy and regenerate the layout relationship file: Optimization direction: reduce redundant layout nodes and merge sub-cuts of the right-side text area. Adjusted cutting strategy: The right-side text area is only cut horizontally once (as a whole, as a column layout), without further splitting the C, D, and E sub-areas; they are directly included as sibling nodes in the column layout. The adjusted strategy is as follows: { "type": "div", / / Layer A (background) "layout": {"display": "flex", "flexDirection": "row"}, / / Root node row layout "children": [ {"type": "image"}, / / Layer B (Avatar) {"type": "div", / / Right-side text area (only 1 column layout node) "layout": {"display": "flex", "flexDirection": "column"}, "children": [ {"type": "text"}, / / Layer C (directly used as a child node) {"type": "text"}, / / Layer D (directly used as a child node) {"type": "text"} / / Layer E (directly used as a child node) ] } ]} When adjusting the strategy, for the three sibling layers (C, D, E) in the right text area, since the number is greater than 2, they are divided into two areas according to the recursive DFS traversal rule (e.g., C is a separate area, and D and E are merged into another area), and the original layers are moved to the next level of the new area to reduce layout node redundancy.

[0056] Secondary evaluation and convergence: Recalculate the metrics: Number of layout nodes: 2 in total, including the root node and the right column layout nodes. 2 < 3 (threshold), which meets the standard.

[0057] Reverse layout index: No redundant nodes, calculated as 0 (0 / 1=0), 0<1 (threshold), meeting the standard.

[0058] Model convergence: Once both metrics meet the requirements, iteration stops, and the final layout relationship file is determined to be the adjusted version. Subsequent front-end code generation is then based on the DSL evaluated by the model. It should be noted that in one example, the above evaluation can also utilize an artificial intelligence model for analysis and processing; specific implementation is not limited.

[0059] In this embodiment, the generated initial layout relationship file is evaluated using a model, and the number of layout nodes and the inverse layout index are calculated. If the target is not met, the recursive cutting strategy is adjusted and the layout relationship file is regenerated until the target is met. This clarifies the actual meaning and calculation method of the number of layout nodes (the number of nodes describing the layout) and the inverse layout index (measuring the rationality of row and column layout). It solves the problem that initial recursive cutting may lead to layout redundancy in the layout relationship file (such as over-cutting) due to local optima in the algorithm, directly affecting the simplicity and performance of subsequent code. For example, this embodiment quantifies layout rationality through evaluation indicators. After iterative optimization, the number of layout nodes is reduced, and the number of redundant code tags generated is reduced (e.g., three useless tags are removed). The inverse layout index drops to 0, and the layout logic is more in line with front-end development habits (such as column layouts directly containing text nodes), which helps reduce the understanding cost when the AI ​​visual reconstruction module generates front-end code. Through this embodiment, the structure of the layout relationship file can be significantly improved, laying the foundation for high-quality code generation for subsequent AI visual reconstruction and avoiding code redundancy or reconstruction deviation caused by unreasonable layout.

[0060] It should be noted that the structure of the layer tree in this embodiment (based on the parent-child relationship of the cut regions) is different from the DOM stacking structure. The DSL obtained by this embodiment based on layer information is centered on spatial cutting logic (e.g., background layer A contains all sub-regions), while the DOM stacking structure is centered on visual hierarchy (z-index), and the construction logic is fundamentally different.

[0061] In one embodiment, the step of calling the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image includes: The AI ​​visual reconstruction module is invoked and executed in the order of visual recognition, text recognition, layout generation, and code output to generate front-end code; In the visual recognition stage, element category matching is performed by combining the visual features of the elements in the design draft image with the tag types in the DSL node attributes. In the text recognition stage, the text content in the design draft image is associated with and extracted from the style attributes of the corresponding tags in the DSL. In the layout generation stage, the spatial layout relationship presented by the design draft image is compared and calibrated with the tag types and layout styles in the DSL node attributes to achieve tag mapping and style binding between the design draft image and the DSL. In the code output stage, front-end code is generated based on the processing results of the visual recognition stage, text recognition stage, and layout generation stage.

[0062] To facilitate understanding, this paper uses the code generation of the design draft for the transfer amount input area of ​​a financial APP as an example to illustrate the specific implementation process of the AI ​​visual reconstruction module in this embodiment, which combines the layout relationship file and the design draft effect image to generate the front-end code. In this embodiment, through the collaborative four-stage process of visual recognition → text recognition → layout generation → code output, the structured information of the layout relationship file is used to calibrate the AI ​​visual reconstruction module's understanding of the design draft effect image, thus solving problems such as label mismatch, text deviation, and layout distortion in traditional AI visual reconstruction.

[0063] Based on the above application scenarios, the four-stage execution process of the AI ​​visual reconstruction module is as follows: The design draft for the transfer amount input area contains three core elements: the input box background (rectangular layer, gray border), the amount prompt text: "Please enter the transfer amount" (light gray text), and the currency symbol ¥ (black text). The design draft image is a 300×80px PNG image, and the corresponding DSL (simplified version) is as follows: { "type": "div", "layout": {"width": "300px", "height": "80px", "border": "1px solid #EEEEEE"}, "children": [ {"type": "text", "style": {"color": "#999999", "fontSize": "14px"}, "position": {"x": 20, "y": 25}}, {"type": "text", "style": {"color": "#333333", "fontSize": "16px"}, "position": {"x": 20, "y": 50}} ]} Visual Recognition Stage: The design draft image provides visual features of the elements. The input box background is a rectangle with a gray border, the amount prompt text is light gray and blurred, and the currency symbol is clear black text. DSL provides node attributes, specifying that both child nodes are of type "text," and the parent node is of type "div" (corresponding to the input box background). The AI ​​visual reconstruction module matches the rectangle with the gray border in the image with the "div" tag of the DSL parent node (excluding misclassifications of other tags such as "image"), and matches the light gray / black text area with the "text" tag of the DSL child nodes, ensuring that the accuracy of element category recognition is improved compared to recognition from pure images.

[0064] Text Recognition Stage: The design draft image provides visual text information. The blurry amount prompt is recognized as "Please enter the transfer amount," while the currency symbol is clearly recognized as "¥." DSL provides style attributes, specifying the color of the first text node as #999999 (light gray) and the color of the second text node as #333333 (black). The AI ​​visual reconstruction module, based on the DSL's color attributes, associates the light gray text in the image with "Please enter the transfer amount" (matching the first text node) and the black text with "¥" (matching the second text node). Simultaneously, it uses the DSL's fontSize attribute to calibrate the text size (14px / 16px) to avoid text-style mismatches during pure image recognition (e.g., incorrectly labeling "¥" as light gray).

[0065] Layout Generation Stage: Spatial Layout and Style Binding. The design draft image provides the spatial relationships. The input box background covers the entire 300×80px area, the amount prompt text is located in the top left corner (20px from the left and top edges), and the currency symbol is located directly below it (50px from the top edge). DSL provides the layout style. The parent node `layout` defines the width, height, and border, and the child node `position` specifies the coordinates (x=20, y=25; x=20, y=50). The AI ​​visual reconstruction module compares the pixel coordinates of the elements in the image (e.g., the top left corner pixel of the amount prompt text (20, 25)) with the `position` property of the DSL, corrects layout deviations (e.g., 1-2px offset due to image compression), and generates the input box border style based on the `border` property of the DSL, ensuring that the layout reconstruction error is controlled within 1px and avoiding element position offsets during pure image recognition (e.g., the currency symbol is misjudged as centered).

[0066] It should be noted that, for example, the comparison and calibration specifically includes: if two elements in an image are actually arranged horizontally (row layout), but the DSL misjudges them as arranged vertically (column layout), then the DSL's flexDirection property is corrected based on the spatial relationship of the image to ensure that the layout logic is consistent with the visual effect.

[0067] Code output phase: Generating code that conforms to the framework. Based on the collaborative results of the first three phases, the AI ​​visual reconstruction module generates Vue framework code, combining the tag types and style attributes of the DSL with the content and layout extracted from the image: <template> <text style="color: #999999; font-size: 14px; position: absolute;left: 20px; top: 25px;"> Please enter the transfer amount.< / text> <text style="color: #333333; font-size: 16px; position: absolute;left: 20px; top: 50px;"> ¥< / text> < / template> In one example, the rapid rearrangement process leverages GPT-4b's image-to-code generation capabilities, and its workflow comprises four core steps: visual recognition, text recognition, layout generation, and code output. The DSL generated in this embodiment assists the first three steps, reusing GPT-4b's rapid code generation advantage while ensuring code quality.

[0068] In this embodiment, the visual recognition stage achieves element matching through image visual features + DSL tag type, the text recognition stage extracts text content from images through association with DSL style attributes, and the layout generation stage compares and calibrates spatial relationships between images through DSL layout style comparison, all of which are consistent with the stage coordination requirements of claim 3; the final code output is based on the tag mapping and style binding between DSL and images.

[0069] It should be understood that pure AI visual reconstruction (without DSL assistance) presents three major problems: misjudgment of element categories (e.g., misjudging an input box background as an image tag), mismatch between text and style (e.g., incorrectly labeling the ¥ color as light gray), and layout offset (e.g., element position deviation exceeding 3px, accounting for 30%). This embodiment, through collaboration between DSL and the design draft effect image, can effectively reduce the misjudgment rate of element categories, reduce the mismatch rate of text styles, and control layout offset, significantly improving the accuracy of front-end code reconstruction.

[0070] This embodiment fully leverages the structured advantages of DSL and the visual understanding capabilities of AI to achieve high-precision reproduction from design drafts to code. The reason for using DSL+AI visual reproduction instead of directly generating code from DSL is that directly converting DSL into front-end code requires a large amount of computation (such as C# label mapping for complex layouts), which is costly. However, this embodiment utilizes the combination of AI visual reproduction module, which can reuse its advantage of rapid code generation, while ensuring the accuracy of labels and layouts through DSL, thus balancing efficiency and quality.

[0071] In one embodiment, when generating the front-end code, a syntax rule mapping table and code template corresponding to the target front-end framework are invoked to convert the DSL into code that conforms to the syntax specification of the target framework.

[0072] To facilitate understanding, this paper uses the example of generating React framework code from a product list item design draft of an e-commerce app to illustrate the specific implementation of converting the DSL into code that conforms to the framework's syntax specifications by calling the syntax rule mapping table and code template corresponding to the target front-end framework in this embodiment. This process ensures that the generated code directly adapts to the target framework by pre-setting framework-specific rules, thus resolving issues of syntax incompatibility and component call errors during cross-framework conversion.

[0073] It should be noted that the code templates contain framework-specific basic structures. For example, the React template by default includes the statement `import React from 'react'`, and the Vue template includes... <template> <script><style>标签框架，确保生成的代码无需额外调整即可符合框架的基础语法规范。

[0074] 例如，商品列表项设计稿包含4个元素：商品图片（图层A）、商品名称（图层B）、价格标签（图层C）、加入购物车按钮（图层D）。

[0075] 映射表支持的前端框架包含nepex、vux2、vux3、react等，例如针对vux2框架，会自动引入其组件库标签（如<x-button>替代原生<button>），并适配其特有的样式属性（如通过custom-style绑定样式）。本次目标框架为React，预设的语法规则映射表核心内容如下：调用代码模板生成框架兼容代码，基于React框架的代码模板。AI视觉还原模块将DSL按映射表转换后，填充至模板中，生成完整代码：跨框架适配验证（以Vue2为例）若目标框架切换为Vue2，语法规则映射表调整如下：该实施例中，针对React框架调用专属语法规则映射表（如标签转换、样式命名规范），通过代码模板将DSL转换为符合React语法的组件代码，完全覆盖，跨框架示例验证了映射表的可扩展性，适配不同框架的语法差异。需理解的是，未采用框架专属规则时，生成的代码可能会存在语法错误（如React中使用Vue的v-bind指令），需人工修改。本实施例通过预设映射表和模板，使得代码语法正确率得到有效提升上，无需人工调整基础语法；且支持多框架（React、Vue2 / 3等）快速切换，适配不同项目技术栈，减少系统适配成本。

[0076] 通过本实施例，确保了生成的代码与目标前端框架无缝兼容，显著降低了跨框架开发的适配成本，提升了代码的直接可用率。

[0077] 在一实施例中，所述基于预设的递归切割算法生成包含节点属性与布局结构的树状结构布局关系文件，包括如下步骤：确定前端项目开发模块的开发阶段；当所述前端项目开发模块的开发阶段处于第一阶段，则调用AI模型基于所述图层信息生成所述DSL；当所述前端项目开发模块的开发阶段处于第二阶段，则基于预设的递归切割算法生成所述DSL，其中，所述第二阶段为所述第一阶段的后续阶段。

[0078] 阶段划分以项目进度为准：第一阶段为需求验证期（如 MVP 开发），优先保证速度；第二阶段为正式开发期（如量产版本），需满足代码可维护性、性能等质量要求，两阶段可通过系统配置手动切换。

[0079] 以该前端项目开发模块为某电商APP商品详情页模块的开发为例，说明根据项目开发阶段选择DSL生成方式的具体实现。该方案通过分阶段切换DSL生成逻辑，兼顾项目初期的快速迭代需求与后期的代码质量要求，解决单一生成方式无法适配全开发周期的问题。

[0080] 例如，商品详情页设计稿包含多组图层：商品轮播图（图层A）、商品标题（图层B）、价格标签（图层C）、规格选择器（图层D）、加入购物车按钮（图层E），项目开发分为两个阶段。

[0081] 第一阶段：beta版开发（快速原型验证）阶段目标：快速生成可运行的页面原型，验证功能流程，对代码细节要求较低。DSL生成方式：调用AI模型（如基于GPT-4O优化的视觉-文本模型）直接生成DSL。具体实现：将图层信息（包含各元素的位置、尺寸、类型）输入AI模型，模型基于训练数据中的布局模式，直接输出树状DSL。例如，对规格选择器（图层D）的处理，AI识别到D由多个按钮组成，直接生成包含flex布局的节点，无需严格计算切割点。

[0082] 第二阶段：正式版开发（高质量代码生成）阶段目标：生成结构严谨、可维护性高的代码，适配大规模用户使用场景。DSL生成方式：切换为预设的递归切割算法生成DSL（替代AI模型）。具体实现：基于图层的坐标与尺寸信息，通过递归切割算法优化布局结构：先纵向切割根节点区域，将图层A（轮播图）与其他元素（B、C、D、E）分为上下两大区域（列布局）；对下方区域横向切割，将B、C与D、E分为左右两部分（行布局）；针对图层D（规格选择器），通过计算按钮间距与排列规律，生成无冗余的flex布局节点。

[0083] 由于单一DSL生成方式存在局限性：纯AI生成在项目初期高效但后期易出现布局冗余；纯算法生成初期适配成本高，影响迭代速度。本实施例通过分阶段策略：第一阶段利用AI生成速度快的优势，将商品详情页原型开发周期缩短；第二阶段切换为递归切割算法，使DSL的布局节点数减少，逆布局指数降低（优于AI生成），为后续代码生成提供更高质量的结构化基础。

[0084] 该实施例中，前期放大AI处理比例快速落地，中后期放大递归切割算法比例提高代码质量的技术方案，其中的AI模型与递归切割算法的协同使用，验证了AI模型与递归切割算法双驱动模式在全开发周期中的可行性，兼顾效率与质量。第一阶段（beta版）放大AI模型处理比例，仅用少量自研算法辅助，以最快速度输出可运行的DSL，满足快速验证需求；第二阶段（正式版）逐步放大递归切割算法的处理比例，通过优化切割逻辑（如更精准的切割点计算）渐进式提升DSL质量，最终实现代码的低冗余和高可维护性。有效平衡了前端项目快速迭代与高质量交付的需求，使本申请能灵活适配从原型验证到正式上线的全流程。

[0085] 在一实施例中，所述调用AI视觉还原模块将所述DSL与所述设计稿效果图片结合，以根据所述DSL与设计稿效果图片生成前端代码之后，所述方法还包括：渲染出代码预览界面，所述代码预览界面用于显示所述前端代码，且所述前端代码处于可被编辑状态。

[0086] 编辑状态支持语法高亮、实时错误提示（如未闭合标签标红）及代码格式化功能，与专业IDE编辑体验一致；同时支持导入 / 导出编辑后的代码，直接对接项目开发环境，实现预览-编辑-集成无缝衔接。

[0087] 以某资讯类APP文章列表项设计稿生成代码后的预览与编辑为例，说明本申请实施例中渲染代码预览界面并支持代码编辑的具体实现。该步骤在AI生成前端代码后提供可视化预览与实时编辑功能，解决生成代码与设计预期存在偏差时无法快速修正的问题，形成生成-预览-优化的闭环。

[0088] 例如，文章列表项设计稿经本申请实施例处理后，生成Vue框架代码（包含标题、摘要、发布时间等元素），后续流程如下：渲染代码预览界面。

[0089] 可调用前端渲染引擎（如VueCLI的开发服务器），将生成的前端代码编译为可运行的页面，在平台的预览区实时展示：预览界面左侧为代码编辑区，显示完整的Vue单文件组件代码（包含<template><script><style>）；右侧为可视化预览区，实时同步左侧代码的运行效果，呈现文章列表项的实际样式（如标题居左、摘要灰色、发布时间靠右）。示例预览界面中，初始生成的代码中发布时间文字大小为12px，与设计稿要求的14px存在偏差，在预览区可直观观察到该差异。代码编辑区支持实时修改：开发人员可直接在左侧编辑区修改代码，例如将发布时间的font-size从12px调整为14px；实时更新机制：编辑操作触发后，系统自动重新编译代码（无需手动刷新），右侧预览区更新显示效果，验证修改是否符合预期；编辑范围覆盖全代码结构：支持修改标签类型（如将改为<view>适配移动端框架）、调整样式属性（如colormargin）、补充交互逻辑（如添加@click事件）。开发人员确认预览效果符合设计要求后，可点击保存按钮，将修改后的代码存储至项目仓库；系统自动记录编辑历史，支持回退至之前的版本，便于团队协作中追溯修改内容。

[0090] 传统的D2C工具生成代码后，需导出至本地开发环境才能修改，存在预览-修改-验证流程割裂的问题，单次调整需耗时较长。本实施例通过集成预览与编辑功能：使开发人员能在同一平台完成偏差修正，将单个样式调整的耗时缩短至30秒以内；避免因生成代码不完全符合设计导致的返工，提升本申请的实用性。

[0091] 通过本实施例，弥补了AI生成代码的局限性，使开发人员能通过直观预览和便捷编辑快速优化代码，确保最终输出符合设计要求，提升了本申请实施例的工程实用性。

[0092] 在一实施例中，预览界面还可支持循环交互与AI可视化干预优化：若开发人员发现文章列表项的标题样式与设计稿偏差，可在编辑区标记偏差位置并触发AI优化，会基于DSL和设计稿图片重新生成修正后的样式代码；同时，对于需特殊切割的图层（如含lexin图标名称的图层），可在编辑区手动指定切割规则，确保符合D2C-TOOLS的导出规范。

[0093] 在一实施例中，如图2所示，从前端开发角度描述，主要提供了一种基于人工智能的代码生成方案，该方案中，前端开发人员需先与设计人员对齐设计稿内容，然后在MasterGo平台打开目标设计稿，从中选中需要转换为代码的特定图层。源数据导出与上传：通过MasterGo平台的相关功能，可导出选中图层的源数据，这些源数据包括图层对应的图片以及描述图层结构的JSON文件；随后，开发人员将导出的源数据上传至OA页面。DSL生成与优化：在接收到源数据后，通过本申请实施例的方案生成对应的DSL；生成的DSL会进入循环交互环节，若DSL需要继续优化，则通过AI可视化干预优化功能进行调整，直至得到符合需求的DSL。前端代码生成：基于优化后的DSL，系统最终生成前端代码，完成从设计稿到可运行代码的转换过程。整个流程体现了前端开发视角下，从设计稿处理到代码生成的完整链路，强调了AI在DSL生成及优化中的作用，以及人机交互在提升结果准确性上的价值。

[0094] 应理解，上述实施例中各步骤的序号的大小并不意味着执行顺序的先后，各过程的执行顺序应以其功能和内在逻辑确定，而不应对本申请实施例的实施过程构成任何限定。

[0095] 在一实施例中，提供一种基于人工智能的代码生成装置，该基于人工智能的代码生成装置与上述实施例中基于人工智能的代码生成方法一一对应。如图3所示，该基于人工智能的代码生成装置包括A模块、B模块、C模块和D模块。各功能模块详细说明如下：获取模块301，用于获取UI设计稿源文件及对应的设计稿效果图片，提取所述UI设计稿源文件中的全部图层信息；确定模块302，用于对所述图层信息进行识别以确定图层的基本类型及前端标签类型；第一生成模块303，用于将所述图层类型与前端标签类型作为节点属性，基于预设的递归切割算法生成包含节点属性与布局结构的树状结构布局关系文件，所述布局结构包括布局层级及布局样式；第二生成模块304，用于调用AI视觉还原模块将所述布局关系文件与所述设计稿效果图片结合，以根据所述布局关系文件与设计稿效果图片生成前端代码。

[0096] 关于基于人工智能的代码生成装置的具体限定可以参见上文中对于基于人工智能的代码生成方法的限定，在此不再赘述。上述基于人工智能的代码生成装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

[0097] 在一实施例中，提供一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例中基于人工智能的代码生成方法，例如图1所示S10-S40，为避免重复，这里不再赘述。或者，处理器执行计算机程序时实现基于人工智能的代码生成装置这一实施例中的各模块 / 单元的功能，为避免重复，这里不再赘述。

[0098] 在一实施例中，提供一种计算机可读存储介质，该计算机可读存储介质上存储有计算机程序，该计算机程序被处理器执行时实现上述实施例中基于人工智能的代码生成方法，例如图1所示S10-S40，为避免重复，这里不再赘述。或者，该计算机程序被处理器执行时实现上述基于人工智能的代码生成装置的功能，为避免重复，这里不再赘述。

[0099] 以上所述实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围，均应包含在本申请的保护范围之内。< / script> < / template> < / text> < / text> < / text> < / text> < / text>

Claims

1. A code generation method based on artificial intelligence, characterized in that, include: Obtain the UI design source file and the corresponding design effect image, and extract all layer information from the UI design source file; The layer information is identified to determine the basic type of the layer and the type of the front-end label; Using the layer type and front-end tag type as node attributes, a tree-structured layout relationship file containing node attributes and layout structure is generated based on a preset recursive cutting algorithm. The layout structure includes layout hierarchy and layout style. The AI ​​visual reconstruction module is invoked to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image.

2. The method according to claim 1, characterized in that, Before the step of calling the AI ​​visual reconstruction module to combine the layout relationship file with the design draft image to generate front-end code based on the layout relationship file and the design draft image, the method further includes: The generated layout relationship file is evaluated using a model to calculate the number of layout nodes and the inverse layout index in the layout relationship file; When the number of layout nodes is greater than a preset threshold or the inverse layout index is greater than a preset threshold, the recursive cutting strategy is adjusted to regenerate the layout relationship file until the number of layout nodes and / or the inverse layout index is less than the preset threshold; wherein, the number of layout nodes refers to the number of nodes used to describe the layout structure in the generated layout relationship file, and the inverse layout index is used to measure the rationality of the row and column layout in the generated layout relationship file.

3. The method according to claim 1, characterized in that, The step of calling the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image to generate front-end code based on the layout relationship file and the design draft effect image includes: The AI ​​visual reconstruction module is invoked and executed in the order of visual recognition, text recognition, layout generation, and code output to generate front-end code; In the visual recognition stage, element category matching is performed by combining the visual features of the elements in the design draft image with the tag types in the node attributes of the layout relationship file. In the text recognition stage, the text content in the design draft image is associated with and extracted based on the style attributes of the corresponding tags in the layout relationship file. In the layout generation stage, the spatial layout relationship presented by the design draft image is compared and calibrated with the tag types and layout styles in the node attributes of the layout relationship file to achieve tag mapping and style binding between the design draft image and the layout relationship file. In the code output stage, front-end code is generated based on the processing results of the visual recognition stage, text recognition stage, and layout generation stage.

4. The method according to claim 1, characterized in that, When generating the front-end code, the syntax rule mapping table and code template corresponding to the target front-end framework are called to convert the layout relationship file into code that conforms to the syntax specification of the target framework.

5. The method according to claim 1, characterized in that, The tree-structured layout relationship file, which includes node attributes and layout structure, is generated based on a preset recursive cutting algorithm, including: Determine the development phase of the front-end project's development modules; When the development phase of the front-end project development module is in the first stage, the AI ​​model is invoked to generate the layout relationship file based on the layer information; When the development phase of the front-end project development module is in the second stage, the layout relationship file is generated based on a preset recursive cutting algorithm, wherein the second stage is a subsequent stage of the first stage.

6. The method according to any one of claims 1-5, characterized in that, The recursive cutting algorithm includes: Step 1: Set the entire layer area as the current sub-region; Step 2: Calculate the direction and position of the cutting point based on the layer position and size of the current sub-region, and cut the current sub-region into two new sub-regions according to the direction and position of the cutting point; Step 3: Using the two newly generated sub-regions as the current sub-regions, execute Step 2 until the recursion ends when the newly generated sub-regions contain only indivisible graphics. The layout hierarchy and layout style information are determined based on the relationship between the two layers after each cut, and the relationship includes intersecting, disjoint, or containing relationships.

7. The method according to any one of claims 1-5, characterized in that, After the AI ​​visual reconstruction module is invoked to combine the layout relationship file with the design draft image to generate front-end code based on the layout relationship file and the design draft image, the method further includes: A code preview interface is rendered, which is used to display the front-end code, and the front-end code is in an editable state.

8. A code generation device based on artificial intelligence, characterized in that, include: The acquisition module is used to acquire the UI design draft source file and the corresponding design draft effect image, and extract all layer information from the UI design draft source file; The determination module is used to identify the layer information to determine the basic type of the layer and the type of the front-end label; The first generation module is used to take the layer type and the front-end tag type as node attributes and generate a tree structure layout relationship file containing node attributes and layout structure based on a preset recursive cutting algorithm. The layout structure includes layout hierarchy and layout style. The second generation module is used to call the AI ​​visual reconstruction module to combine the layout relationship file with the design draft effect image, so as to generate front-end code based on the layout relationship file and the design draft effect image.

9. A computer device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the AI-based code generation method according to any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the AI-based code generation method according to any one of claims 1 to 7.

Images