Code generation method and device, equipment, medium and program product

Abstract

The invention provides a code generation method and device, equipment, a medium and a program product, and can be applied to the field of artificial intelligence and the field of financial science and technology. The code generation method comprises the following steps: performing standardized analysis on a target design file to obtain multi-dimensional data; according to the multi-dimensional data, hierarchically processing the target design file to generate an absolute positioning code; based on the multi-dimensional data, converting the absolute positioning code into an elastic layout code through a clustering algorithm; based on the multi-dimensional data, component identification is conducted on the elastic layout code, and a component code is generated; and integrating the component code to obtain a target code corresponding to the target design file.

Description

Technical Field

[0001] This application relates to the fields of artificial intelligence and fintech, and more specifically to a code generation method, apparatus, device, medium, and program product. Background Technology

[0002] With the continuous development of financial application software, the frequent launch of new features and upgrades of existing services place enormous pressure on R&D. The user interface (UI) rendering phase is particularly time-consuming and involves a significant amount of inefficient and repetitive work. Simultaneously, financial technology products have extremely high requirements for security and accuracy. Problems such as low communication efficiency between design and development and low UI fidelity in traditional R&D processes easily lead to low acceptance satisfaction. Design-to-Code (D2C) is a technology that automatically or semi-automatically converts digital design drafts into code that can be directly used for development. D2C technology automatically generates code by parsing design drafts, improving R&D efficiency, reducing labor costs, and ensuring consistency between design and development. Therefore, it has significant application value in the financial technology field.

[0003] In existing technologies, D2C tools are typically used to convert design drafts into code. The code generated by existing D2C tools generally relies on absolute positioning. However, absolute positioning code cannot respond to changes in size across multiple devices. When the same page needs to be adapted to different user terminals, developers must manually rewrite the layout logic, resulting in low efficiency for multi-device adaptation and a significant amount of time spent modifying the layout. Summary of the Invention

[0004] In view of the above problems, this application provides code generation methods, apparatus, devices, media and program products.

[0005] According to a first aspect of this application, a code generation method is provided, comprising: standardizing and parsing a target design file to obtain multidimensional data; hierarchically processing the target design file based on the multidimensional data to generate absolute positioning code; converting the absolute positioning code into flexible layout code using a clustering algorithm based on the multidimensional data; identifying components in the flexible layout code based on the multidimensional data to generate component code; and integrating the component code to obtain target code corresponding to the target design file.

[0006] According to an embodiment of this application, the step of standardizing and parsing the target design file to obtain multidimensional data includes: preprocessing the target design file to obtain initial data; structuring and parsing the initial data to generate structured data; standardizing the structured data to obtain standardized data; and performing data verification and optimization on the standardized data to obtain the multidimensional data; wherein the multidimensional data includes the coordinates, size, color, font, and hierarchy of design elements.

[0007] According to an embodiment of this application, the preprocessing of the target design file to obtain initial data includes: identifying the format of the target design file to determine the file format; converting the target design file using a format converter based on the file format to generate metadata; and initializing the metadata to obtain the initial data.

[0008] According to an embodiment of this application, the step of converting the absolute positioning code into flexible layout code based on the multidimensional data using a clustering algorithm includes: discretizing the coordinates of the design element using a transmission grid to obtain coordinate data; dividing the design element into levels using the clustering algorithm based on the coordinate data to obtain hierarchical relationship data; integrating the coordinate data and the hierarchical relationship data to obtain integrated data; dynamically calculating the layout parameters of the flexible box layout model based on the integrated data; and generating the flexible layout code based on the layout parameters of the flexible box layout model, and replacing the absolute positioning code with the flexible layout code.

[0009] According to an embodiment of this application, the step of identifying components in the flexible layout code based on the multidimensional data and generating component code includes: extracting features from the multidimensional data based on the hierarchical relationship data to obtain feature data; processing the feature data through a deep learning model to obtain spatial relationship data; performing rule matching on the spatial relationship data based on a component rule base to determine component attributes; and converting the flexible layout code into component code according to the component attributes.

[0010] According to an embodiment of this application, the method further includes: in response to a change in the target design file, calculating the change difference degree of the target design file using an entropy algorithm; and if the change difference degree exceeds a preset threshold, generating incremental patch code based on the change data of the target design file, and submitting the incremental patch code to a code repository.

[0011] According to an embodiment of this application, the step of hierarchically processing the target design file based on the multidimensional data to generate absolute positioning code includes: extracting the design layers of the target design file and cleaning the design layers; reorganizing the cleaned design layers to obtain optimized layer data; and performing code depth calculation on the optimized layer data based on the multidimensional data to generate the absolute positioning code.

[0012] A second aspect of this application provides a code generation apparatus, comprising: a parsing engine module for standardizing and parsing a target design file to obtain multidimensional data; an absolute positioning module for hierarchically processing the target design file based on the multidimensional data to generate absolute positioning code; a flexible layout module for converting the absolute positioning code into flexible layout code based on the multidimensional data using a clustering algorithm; a component identification module for identifying components in the flexible layout code based on the multidimensional data to generate component code; and an integration module for integrating the component code to obtain target code corresponding to the target design file.

[0013] A third aspect of this application provides an electronic device comprising: one or more processors; and a memory for storing one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the method described above.

[0014] A fourth aspect of this application also provides a computer-readable storage medium having a computer program or instructions stored thereon, which, when executed by a processor, implement the steps of the above-described method.

[0015] The fifth aspect of this application also provides a computer program product, including a computer program or instructions that, when executed by a processor, implement the steps of the above-described method.

[0016] In the embodiments of this application, multi-dimensional data is obtained by standardizing the parsing of design documents, first generating absolute positioning code, then converting it into flexible layout code through a clustering algorithm, combining component identification to generate component code and integrating it into target code, thus automating the conversion from design draft to code. This solves the multi-terminal adaptation problem caused by existing D2C tools relying on absolute positioning, avoids developers manually rewriting layout logic, improves multi-terminal adaptation efficiency, reduces layout modification time, achieves efficient conversion from design draft to directly reusable flexible layout code, and optimizes the development process. Attached Figure Description

[0017] The above-mentioned contents, other objects, features and advantages of this application will become clearer from the following description of embodiments with reference to the accompanying drawings, in which:

[0018] Figure 1 This diagram illustrates an application scenario of the code generation method according to an embodiment of this application.

[0019] Figure 2 A flowchart illustrating a code generation method according to an embodiment of this application is shown schematically;

[0020] Figure 3This illustration schematically shows a standardized parsing flowchart of the code generation method according to an embodiment of this application;

[0021] Figure 4 A schematic diagram illustrating a flexible layout flowchart of a code generation method according to an embodiment of this application is shown.

[0022] Figure 5 Another flowchart of a code generation method according to an embodiment of this application is illustrated schematically;

[0023] Figure 6 A schematic diagram illustrating the structure of a code generation apparatus according to an embodiment of this application is shown; and

[0024] Figure 7 A block diagram schematically illustrates an electronic device suitable for implementing a code generation method according to an embodiment of this application. Detailed Implementation

[0025] The embodiments of this application will now be described with reference to the accompanying drawings. However, it should be understood that these descriptions are exemplary only and are not intended to limit the scope of this application. In the following detailed description, numerous specific details are set forth to provide a thorough understanding of the embodiments of this application for ease of explanation. However, it will be apparent that one or more embodiments may be implemented without these specific details. Furthermore, descriptions of well-known structures and technologies are omitted in the following description to avoid unnecessarily obscuring the concepts of this application.

[0026] The terminology used herein is for the purpose of describing particular embodiments only and is not intended to limit the scope of this application. The terms “comprising,” “including,” etc., as used herein indicate the presence of features, steps, operations, and / or components, but do not exclude the presence or addition of one or more other features, steps, operations, or components.

[0027] All terms used herein (including technical and scientific terms) have the meanings commonly understood by those skilled in the art, unless otherwise defined. It should be noted that the terms used herein are to be interpreted in a manner consistent with the context of this specification, and not in an idealized or overly rigid way.

[0028] When using expressions such as "at least one of A, B and C", they should generally be interpreted in accordance with the meaning that is commonly understood by those skilled in the art (e.g., "a system having at least one of A, B and C" should include, but is not limited to, a system having A alone, a system having B alone, a system having C alone, a system having A and B, a system having A and C, a system having B and C, and / or a system having A, B and C, etc.).

[0029] D2C technology analyzes the structure and attributes of design drafts (such as layer hierarchy, color, font, spacing, and interaction logic) and automatically generates code that conforms to development standards according to preset coding specifications and technical frameworks. Its core goal is to break down the barriers between design and development, and solve pain points in traditional R&D processes such as inefficient design reproduction, high communication costs, and difficulties in version synchronization.

[0030] Existing D2C primarily utilizes two methods: absolute positioning transformation and template matching. Absolute positioning transformation uses traditional auxiliary D2C tools to convert design elements into Cascading Style Sheets (CSS) code that controls the absolute positioning properties of elements, restoring them using fixed coordinates, but lacks responsive layout capabilities. Template matching uses low-code D2C tools with pre-built layout template libraries, generating code through similarity matching, but has poor adaptability to dynamic content.

[0031] However, the two existing methods have the following drawbacks:

[0032] (1) Adaptability Defects: Absolute positioning code cannot respond to size changes across multiple devices, and the template library coverage is insufficient, resulting in low efficiency in multi-device adaptation. Existing D2C tools generally rely on absolute positioning for their generated code, leading to a serious problem: when the same page needs to be adapted to different terminals, developers have to spend a lot of time manually rewriting the layout logic. The root cause lies in the fundamental contradiction between visual precision (requiring pixel-level reproduction) and layout flexibility (requiring responsive scaling to adapt to different screens). This manual adaptation is costly; existing solutions require a significant investment of time to manually rewrite the layout logic, accounting for 32% of the total page development time.

[0033] (2) Lack of Dynamic Content: The technology cannot handle data-driven components (such as tables with variable row counts), and suffers from insufficient recognition rates for industry-specific components. In certain industries (such as finance), there are numerous proprietary functional components, such as secure password keyboards, voucher entry boxes, amount input controls, and personal three-factor authentication. However, existing technologies are severely inadequate in recognizing these components. Image-matching technologies can only achieve visual similarity recognition and cannot understand the functional semantics of the components; while rule-based technologies struggle to cover complex dynamic interaction logic (such as real-time verification rules for bank card numbers). This directly results in the current mainstream solutions based on traditional computer vision and machine learning methods being severely inadequate in recognizing financial components in the financial sector.

[0034] (3) Lagging Synchronization Mechanism: After the design draft is updated, the code needs to be manually synchronized (average delay ≥ 72 hours), resulting in a lag in design-code version synchronization. After the design draft is updated, developers must manually compare the differences between the old and new designs, find the changes, and manually modify the code one by one. This process is not only inefficient but also triggers a series of chain problems. First, there is a significant time gap, with an average delay of up to 72 hours from the completion of design changes to the completion of code synchronization. Second, there is an information gap, and some hidden style conflicts (such as the problem of overriding CSS inherited properties) cannot be automatically detected. Finally, these inconsistencies will translate into business risks. Statistics show that the online UI failure rate caused by version inconsistencies increased by 27%.

[0035] This application provides a code generation method, comprising: standardizing and parsing a target design file to obtain multi-dimensional data; hierarchically processing the target design file based on the multi-dimensional data to generate absolute positioning code; converting the absolute positioning code into flexible layout code using a clustering algorithm based on the multi-dimensional data; identifying components in the flexible layout code based on the multi-dimensional data to generate component code; and integrating the component code to obtain the target code corresponding to the target design file. In this application's embodiments, by standardizing and parsing the design file to obtain multi-dimensional data, first generating absolute positioning code, then converting it into flexible layout code using a clustering algorithm, combining component identification to generate component code, and integrating it into target code, the conversion from design draft to code is automated. This solves the multi-platform adaptation problem caused by existing D2C tools relying on absolute positioning, avoids developers manually rewriting layout logic, improves multi-platform adaptation efficiency, reduces layout modification time, achieves efficient conversion from design draft to directly reusable flexible layout code, and optimizes the development process.

[0036] It should be noted that the code generation method and apparatus of this application can be used in the fields of artificial intelligence and fintech, as well as in any field other than artificial intelligence and fintech. The application fields of the code generation method and apparatus of this application are not limited.

[0037] Figure 1 The diagram illustrates an application scenario of the code generation method according to an embodiment of this application.

[0038] like Figure 1 As shown, application scenario 100 according to this embodiment may include a first terminal device 101, a second terminal device 102, a third terminal device 103, a network 104, and a server 105. The network 104 serves as a medium for providing a communication link between the first terminal device 101, the second terminal device 102, the third terminal device 103, and the server 105. The network 104 may include various connection types, such as wired or wireless communication links, or fiber optic cables, etc.

[0039] Users can use the first terminal device 101, the second terminal device 102, and the third terminal device 103 to interact with the server 105 via the network 104 to receive or send messages, etc. Various communication client applications can be installed on the first terminal device 101, the second terminal device 102, and the third terminal device 103, such as shopping applications, web browser applications, search applications, instant messaging tools, email clients, social media platform software, etc. (for example only).

[0040] The first terminal device 101, the second terminal device 102, and the third terminal device 103 can be various electronic devices with displays and support web browsing, including but not limited to smartphones, tablets, laptops, and desktop computers.

[0041] Server 105 can be a server that provides various services, such as a backend management server that supports websites browsed by users using the first terminal device 101, the second terminal device 102, and the third terminal device 103 (this is just an example). The backend management server can analyze and process data such as received user requests, and feed back the processing results (such as web pages, information, or data obtained or generated according to user requests) to the terminal devices.

[0042] It should be noted that the code generation method provided in this application embodiment can generally be executed by server 105. Correspondingly, the code generation device provided in this application embodiment can generally be located in server 105. The code generation method provided in this application embodiment can also be executed by a server or server cluster that is different from server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or server 105. Correspondingly, the code generation device provided in this application embodiment can also be located in a server or server cluster that is different from server 105 and capable of communicating with the first terminal device 101, the second terminal device 102, the third terminal device 103, and / or server 105.

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

[0044] The following will be based on Figure 1 The described scene, through Figures 2-5 The code generation method according to the embodiments of this application will be described in detail.

[0045] Figure 2 A flowchart illustrating a code generation method according to an embodiment of this application is shown schematically.

[0046] like Figure 2 As shown, the code generation method of this embodiment includes operations S210 to S250. This code generation method is not limited to a specific execution subject. The execution subject can be any electronic device, such as a terminal device or a server device, etc. The execution subject can also be any software application or client.

[0047] When operating S210, the target design document is standardized and parsed to obtain multidimensional data.

[0048] The target design file, also known as the design draft, is a file that contains the interface visual design scheme, including design information such as layers, styles, and layout.

[0049] The target design file can come from various UI design tools, and the design file formats generated by the corresponding tools are also different. That is, the design files produced by different UI design tools can be used as target design files and have various format forms.

[0050] Standardized parsing enables the standardized extraction of metadata from multi-source design drafts, extracting multi-dimensional data such as element coordinates, size, color, font, and hierarchy. This five-dimensional data will be used for layout, generating CSS styles and HyperText Markup Language (HTML) structures to assemble a complete page or component.

[0051] When operating the S220, the target design file is processed hierarchically based on multidimensional data to generate absolute positioning code.

[0052] By leveraging artificial intelligence technology to process design files hierarchically, the process begins by extracting layer data from the target design file to obtain raw information such as layer type and location. Next, hidden, locked, and redundant layers and information are filtered out to streamline the data. Then, the cleaned layers undergo structural reorganization and optimization, reconstructing the hierarchy tree based on hierarchical relationships and optimizing layer nesting logic. Following this, layer depth is calculated based on multi-dimensional data, converting layer attributes into code parameters to obtain structured data directly usable for code generation. Finally, absolutely positioned code is generated, providing a precise foundation for subsequent layout transformations and component generation.

[0053] When operating S230, based on multidimensional data, the absolute positioning code is converted into flexible layout code through a clustering algorithm.

[0054] By discretizing the coordinates of design elements through a transmission mesh, and combining this with a clustering algorithm to identify the spatial density distribution of elements, the layout container hierarchy is automatically divided, and the absolute positioning code is converted into flexible layout code.

[0055] Clustering algorithms include, but are not limited to, K-Means clustering and DBSCAN clustering. K-Means clustering requires a preset value for K, while DBSCAN clustering does not require a preset number of clusters and can adapt to dynamic page elements.

[0056] When operating S240, based on multidimensional data, component identification is performed on the flexible layout code to generate component code.

[0057] In the component identification stage, feature data such as color and font are first extracted from multidimensional data and flexible layout code according to hierarchical relationships. Then, deep learning models are used to analyze the features and identify the spatial relationships and functional logic between elements. Next, the component rule base is matched to determine the component type and attributes. Finally, the layout code is converted into reusable component code based on the attributes.

[0058] By operating the S250, the component code is integrated to obtain the target code corresponding to the target design file.

[0059] When integrating component code, the process first performs syntax validation and dependency integration on the scattered component code. It automatically completes reference paths between components, unifies style namespaces, eliminates code redundancy and syntax conflicts, and generates directly executable target code (including HTML structure, CSS styles, and component logic). This completes the code generation for the logo design draft. The integrated target code will be automatically committed to the code repository. If there are conflicts in the file content, they can be manually resolved. Finally, the code is merged.

[0060] After generating the target code, it can be uploaded to a remote code repository using a code management tool. Before uploading, the tool automatically detects the differences between the existing code and the new code in the repository. If multiple versions of the same file are modified (such as style parameter conflicts), a conflict resolution process is triggered. Conflicts are resolved based on conflict arbitration rules. Developers can compare code differences through a visual interface, retaining correct logic, deleting duplicate code, or merging compatible modifications to complete conflict resolution. Conflict arbitration rules include: Rule 1: When a CSS inheritance conflict is detected, scoped isolation styles are automatically injected; Rule 2: When mutual exclusion of multi-platform layout parameters is detected, web-side constraints are reset according to the mobile-first principle.

[0061] After the conflict is resolved, the code is committed and pushed to the repository to update the repository code. The code hosting and collaboration platform monitors version changes in real time and automatically sends version change messages (including update content, modifier, and commit history link) to project members.

[0062] The platform's built-in message listening mechanism captures change events and synchronously pushes code version update reminders to developers (such as emails and in-app messages). After receiving the reminder, developers can execute a pull command using local code tools to synchronize the latest version of the code from the repository to their local development environment, providing a unified code benchmark for subsequent development and testing.

[0063] In the embodiments of this application, multi-dimensional data is obtained by standardizing the parsing of design documents, first generating absolute positioning code, then converting it into flexible layout code through a clustering algorithm, combining component identification to generate component code and integrating it into target code, thus automating the conversion from design draft to code. This solves the multi-terminal adaptation problem caused by existing D2C tools relying on absolute positioning, avoids developers manually rewriting layout logic, improves multi-terminal adaptation efficiency, reduces layout modification time, achieves efficient conversion from design draft to directly reusable flexible layout code, and optimizes the development process.

[0064] Figure 3 A standardized parsing flowchart of the code generation method according to an embodiment of this application is illustrated schematically.

[0065] like Figure 3 As shown, in operation S210, the target design document is standardized and parsed to obtain multidimensional data, including operations S310 to S340.

[0066] In operation S310, the target design file is preprocessed to obtain initial data.

[0067] According to an embodiment of this application, the process of preprocessing the target design file in operation S310 to obtain initial data includes identifying the format of the target design file and determining the file format; converting the target design file using a format converter based on the file format to generate metadata; and initializing the metadata to obtain initial data.

[0068] Load the target design file and verify its validity and completeness, checking for corruption, formatting errors, or missing key information to ensure the file can be parsed correctly. Next, preprocess the checked target design file.

[0069] In the preprocessing stage, the file header identifier and structural features are first analyzed using a format recognition algorithm to determine its specific format. Then, the corresponding format converter is called to extract core information such as coordinates, dimensions, color values, font attributes, and layer levels of design elements according to preset mapping rules, converting proprietary format data into metadata with a unified structure. Finally, the metadata is initialized, including data type standardization, coordinate origin calibration, and null value filling, ultimately generating initial data with a well-structured structure and complete attributes, providing reliable input for subsequent structured parsing.

[0070] In the embodiments of this application, the design file format is first identified, and then metadata is generated and initialized based on the format conversion. This can adapt to different file formats, break format restrictions, ensure accurate extraction of metadata, and provide unified initial data for subsequent structured parsing.

[0071] When operating S320, the initial data is parsed in a structured manner to generate structured data.

[0072] Structured parsing includes, but is not limited to, hierarchical structure parsing, graphic element recognition, text attribute extraction, and color information acquisition.

[0073] Hierarchical structure analysis: Based on the parent-child relationship identifiers and nested paths in the initial data, a tree-like hierarchical model is constructed to clarify the subordinate relationships of each design element. At the same time, the stacking order and display priority of each layer of elements are recorded to ensure that the hierarchical logic is consistent with the design draft.

[0074] Graphic element recognition: The feature matching algorithm distinguishes basic shapes such as rectangles and circles as well as vector paths, extracts the geometric parameters (such as radius and number of sides), stroke attributes (width and style) and fill type (solid color and gradient) of the shapes, and establishes component association tags for complex combined graphics.

[0075] Text attribute extraction: Text attribute extraction focuses on the style information of the text box, such as font family, font size, and font weight. At the same time, it identifies the text alignment, line height, character spacing, and other layout attributes, and stores the text content and style data together.

[0076] Color information acquisition: Through the color value conversion engine, various color formats are uniformly integrated, a color value mapping table is established, and the frequency of color use and related elements in the design draft are marked, ultimately forming structured data containing hierarchical trees, graphic libraries, text sets, and color spectra.

[0077] When operating S330, structured data is standardized to obtain standardized data.

[0078] Standardization processes include, but are not limited to, coordinate system unification, size unit standardization, color format conversion, font information standardization, and hierarchical relationship structuring.

[0079] Coordinate system unification: Through the origin calibration algorithm, the coordinate systems of different design tools (such as tool A with the top left corner as the origin and tool B with the center as the origin) are uniformly converted into absolute coordinates with the top left corner of the page as the reference. At the same time, coordinate offset caused by scaling of design tools is eliminated, ensuring the consistency of position data of each element.

[0080] Standardization of size units: For mixed units such as pixels (px), points (pt), and millimeters (mm) that may exist in the design files, all size parameters are unified to pixel units according to preset conversion rules (such as 1pt=1.333px), and decimal sizes are rounded to ensure the computability of size data.

[0081] Color format conversion: Through a color value parsing engine, multiple color formats are batch converted to RGB format. At the same time, a color mapping table is established to record the correspondence between the original color values ​​and the standard color values, ensuring the accuracy of color presentation.

[0082] Font information standardization: The font data is cleaned, font family names are standardized to standard names, weight descriptions (such as "bold" is converted to "bold") and font size units are standardized, and missing font alternatives are marked.

[0083] Hierarchical relationship structuring: Through the hierarchical tree optimization algorithm, the original hierarchical data is deredundant, duplicate nested levels are merged, missing hierarchical indexes are supplemented, and the parent identifier, sibling sorting number and display priority of each element are explicitly recorded in JSON structure, forming a hierarchical data chain that can be directly used for code generation.

[0084] Through standardization, the originally heterogeneous structured data is transformed into standardized data with a unified format and clear logic, providing a high-quality input foundation for subsequent data verification, layout transformation and component generation.

[0085] When operating S340, standardized data is validated and optimized to obtain multidimensional data; the multidimensional data includes the coordinates, size, color, font, and hierarchy of design elements.

[0086] Data validation and optimization include, but are not limited to, data integrity validation, format consistency checks, outlier handling, and performance optimization.

[0087] Data integrity verification: Through field validation algorithms, the core attributes such as coordinates and dimensions of each design element are checked one by one to see if they are missing. Elements without color values ​​are marked as "to be supplemented". Elements with missing hierarchical information are traced back to their parent relationships and automatically filled in, ensuring that the multidimensional attributes of each element are complete.

[0088] Format consistency check: Regular expression matching and type validation are used to verify whether the coordinates are numerical, whether the colors conform to the RGB format specification, and whether the font units are consistent. Data with abnormal format (such as string-type size values) is automatically converted, and manual verification prompts are triggered if conversion is not possible.

[0089] Outlier handling: Statistical analysis is used to identify outlier data, such as coordinates exceeding the canvas range or negative dimensions. Isolated outliers are corrected using the median filling method. For consecutive outlier data segments, a secondary analysis process of the design draft is initiated to ensure that the data conforms to the actual design logic.

[0090] Performance optimization: Focusing on data compression and structural simplification, duplicate color definitions and font descriptions are removed, and redundant data is replaced with reference identification information; hierarchical trees exceeding the threshold are sharded for storage, and an element index table is established to accelerate subsequent queries; storage capacity is reduced through data type conversion (such as converting floating-point coordinates to integers), ultimately forming complete, consistent, and efficient multidimensional data to provide high-quality data support for subsequent code generation.

[0091] In the embodiments of this application, multidimensional data is obtained through standardized parsing, and a unified design file data format is used to ensure data integrity and consistency. The information contained in the multidimensional data, such as coordinates, size, color, font, and hierarchy, provides an accurate basis for subsequent layout generation and component identification, reduces data errors, improves the accuracy and reliability of subsequent code generation, and lays the data foundation for efficient conversion of flexible layouts.

[0092] According to an embodiment of this application, in operation S220, the target design file is processed hierarchically based on multidimensional data to generate absolute positioning code, including extracting the design layer of the target design file and cleaning the design layer; reorganizing the cleaned design layer to obtain optimized layer data; and calculating the code depth based on the optimized layer data using multidimensional data to generate absolute positioning code.

[0093] The specific process of using artificial intelligence technology to process design files hierarchically is as follows: First, extract the layer JSON data and use a parsing tool to read the layer structure information of the design file, including raw data such as layer type, position coordinates, and style attributes. Next, filtering is used to remove useless information and layers. Preset rules can be applied to remove hidden layers, locked layers, and duplicate or redundant elements, retaining visible and critical design layers and reducing data interference.

[0094] Secondly, when optimizing the layer structure, the hierarchy tree is reconstructed based on the parent-child relationship and stacking order of the layers, and continuous layers of the same type are merged. Deeply nested composite layers are split up so that the layer structure conforms to the code generation logic and forms clear optimized layer data.

[0095] Finally, based on multi-dimensional data, code depth calculation is performed. Combining the coordinates, size and other information of design elements, the layer properties are converted into CSS absolute positioning parameters through a spatial mapping algorithm. At the same time, a nested document object model structure is generated according to the layer hierarchy relationship. Finally, the absolute positioning code that can directly map the visual effect of the design draft is output, laying a precise data foundation for subsequent flexible layout conversion.

[0096] In the embodiments of this application, after extracting the design layer, the design layer is cleaned and reorganized, and combined with multi-dimensional data to calculate the code, generating accurate absolute positioning code, providing a reliable foundation for subsequent conversion of flexible layout, ensuring the accuracy of code generation, and improving code generation efficiency.

[0097] Figure 4 A schematic diagram illustrating a flexible layout flowchart of a code generation method according to an embodiment of this application is provided.

[0098] like Figure 4 As shown, in operation S230, which converts absolute positioning code into flexible layout code based on multidimensional data and through a clustering algorithm, operations S410 to S450 are included.

[0099] In operating the S410, the coordinates of the design elements are discretized using a transmission mesh to obtain coordinate data.

[0100] Based on the original element coordinate data obtained through parsing, the continuous pixel coordinates are converted into standardized discrete coordinates through spatial gridding, providing a precise spatial positioning basis for subsequent layout analysis and code generation.

[0101] When operating the S420, based on the coordinate data, a clustering algorithm is used to divide the design elements into hierarchical levels to obtain hierarchical relationship data.

[0102] Based on standardized coordinate data constructed using a transmission grid, clustering algorithms are used to identify spatial relationships and layout patterns between elements, automatically dividing functional modules and visual blocks, and establishing hierarchical nesting relationships between elements.

[0103] In operation S430, coordinate data and hierarchical relationship data are integrated to obtain integrated data.

[0104] By integrating the precise coordinate data constructed from the transmission mesh and the hierarchical relationship data from the clustering engine, a mapping relationship between the coordinate data and the hierarchical relationship data is first established, binding discrete coordinates to corresponding hierarchical attributes through unique element identifiers. Next, a spatial-hierarchical fusion algorithm is employed, using the transmission mesh coordinates as the spatial reference and overlaying the hierarchical nested structure generated by clustering to form a composite data model that includes spatial location and logical relationships. Simultaneously, the matching degree between coordinate boundaries and hierarchical ranges is verified, and data with conflicts between spatial location and hierarchical affiliation is corrected. The final output is integrated data that combines precise spatial positioning with a clear logical hierarchy, providing a unified data foundation for layout parameter calculations.

[0105] When operating S440, the layout parameters of the flexible box layout model are dynamically calculated based on the integrated data.

[0106] Based on integrated data, a main axis / cross axis constraint tree for the flexible box layout model is constructed. Layout coefficients are dynamically calculated, and responsive CSS layout code that matches the design intent is automatically generated, replacing absolute positioning code. Flexible Box Layout (Flexbox) is a layout model introduced in CSS3 for more flexible and efficient arrangement, alignment, and space allocation of elements within a container. It is particularly suitable for responsive design, using flexible layout CSS styles where element size adapts to changes in the page container, adjusting position or width and height accordingly.

[0107] When operating S450, based on the layout parameters of the flexible box layout model, flexible layout code is generated, and the absolute positioning code is replaced with flexible layout code.

[0108] By dynamically calculating Flexbox layout parameters, it automatically generates flexible layout code (such as responsive CSS style code and HTML layout code) that conforms to the design intent.

[0109] During dynamic calculation, the element coordinates and hierarchical relationships in the integrated data are first analyzed to determine the subordinate relationship between the flexible container and its child elements. Based on the relative positions of the elements in the transmission grid, the arrangement direction and main axis alignment parameters are calculated; based on the element size ratio and spacing, expansion factor values ​​and contraction factor values ​​are generated. Combining the block relationships obtained from clustering, cross axis alignment attributes are set, and media query rules are added according to screen adaptation requirements to dynamically adjust parameter thresholds, ultimately generating flexible layout code that adapts to multiple devices.

[0110] In the embodiments of this application, the automatic conversion from absolute positioning to responsive layout is achieved by combining a transmission mesh with density clustering, which accurately generates flexible layout code, eliminates the manual reconstruction cost of multi-terminal adaptation, adapts to multi-terminal size changes, saves the work of manually rewriting the layout, improves multi-terminal adaptation efficiency, and reduces development time and cost.

[0111] According to an embodiment of this application, in operation S240, which identifies components in the flexible layout code based on multidimensional data and generates component code, the steps include: extracting features from the multidimensional data based on hierarchical relationship data to obtain feature data; processing the feature data through a deep learning model to obtain spatial relationship data; performing rule matching on the spatial relationship data based on a component rule base to determine component attributes; and converting the flexible layout code into component code according to the component attributes.

[0112] Feature extraction includes, but is not limited to, shape feature extraction (such as basic geometric shape recognition such as rectangles, circles, and text boxes), color pattern analysis (such as primary color, secondary color, and color palette consistency detection), text feature recognition (such as font type, font size, font weight, and line height consistency detection), and layout pattern analysis (such as alignment, spacing rules, and arrangement patterns).

[0113] Deep learning models include, but are not limited to, transformer models and graph neural network (GNN) models. GNN models are preferred because they can explicitly model the spatial topological relationships of elements.

[0114] Taking the GNN model as an example, based on a hierarchical relationship tree, the hierarchical relationship data is first transformed into a graph structure, with design elements as nodes and spatial alignment, nesting, and other relationships between elements as edges, to construct an initial graph model. Next, feature extraction is performed, extracting five-dimensional features (color, font, size, coordinates, and level) for each node from the multi-dimensional data to form a feature vector as node attributes.

[0115] During GNN model processing, multi-layer iterative calculations of node features and edge relationships are performed through graph convolutional networks. Utilizing graph attention mechanisms, node association weights are dynamically adjusted based on element spatial distance and layout similarity to strengthen the connection strength of functionally related elements (such as button groups and form fields). Simultaneously, domain knowledge from the component rule base is integrated to semantically enhance node features, outputting semantically biased node embedding vectors. Taking the financial component rule base as an example, if the component type is a secure password input box, the recognition rule is "rectangle + lock icon with aspect ratio > 5:1". If the component type is a bank card selector, the recognition rule is "contains dropdown arrow icon + bank card icon + text containing card number".

[0116] In the matching phase, firstly, the node embedding is initially compared with the predefined component template library (such as navigation bar and data card templates) through rule-based matching; then, the trained machine learning classification model is called to predict the component type of the element combination; next, the cosine similarity or Euclidean distance between feature vectors is calculated to quantify the matching degree between the element combination and the template; and the component type is determined by threshold judgment (such as similarity ≥ 0.85), and component attributes (such as size adaptation rules and interaction trigger conditions) are generated.

[0117] Finally, based on component attributes, the flexible layout code is transformed into modular component code, automatically adding component identification tags, reusable interfaces, and style encapsulation, achieving the transformation from layout code to reusable components. After component identification is complete, it is compared with component attributes, and the relevant flexible layout code data is converted into component attributes. There is no need to generate new CSS and HTML code, so that the component-specific attributes can be used directly to display styles and use functions.

[0118] In the embodiments of this application, spatial relationships are obtained through feature extraction and deep learning, and deep learning models and component rule bases of business domains are integrated to accurately identify the functional logic of components, match component attributes, convert flexible layout into component code, improve code reusability, simplify development process, and enhance the structure and maintainability of generated code.

[0119] Figure 5 Another flowchart illustrating a code generation method according to an embodiment of this application is shown schematically.

[0120] like Figure 5 As shown, the code generation method of this embodiment includes operations S510 to S570.

[0121] In operation S510, the target design document is standardized and parsed to obtain multidimensional data. It should be noted that the method for operating S510 is the same as that for operating S210 described earlier, and will not be repeated here.

[0122] When operating S520, the target design file is processed hierarchically based on multidimensional data to generate absolute positioning code. It should be noted that operating S520 is the same as operating S220 as described earlier, and will not be repeated here.

[0123] In operating S530, based on multidimensional data, a clustering algorithm is used to convert the absolute positioning code into flexible layout code. It should be noted that the method for operating S530 is the same as that described earlier for operating S230, and will not be repeated here.

[0124] In operation S540, based on multidimensional data, component identification is performed on the flexible layout code to generate component code. It should be noted that the method of operating S540 is the same as that of operating S240 described above, and will not be repeated here.

[0125] By operating S550, the component code is integrated to obtain the target code corresponding to the target design file. It should be noted that operating S550 is the same as operating S250 as described earlier, and will not be repeated here.

[0126] When operating S560, in response to changes in the target design document, the degree of difference in the target design document is calculated using an entropy algorithm.

[0127] After the component code is successfully merged to generate the target code, the code hosting and collaboration platform will trigger a message notification script to send a message to the automated deployment system. The automated deployment system will then automatically run the packaging script to package and deploy the new code.

[0128] A version synchronization controller enables real-time code synchronization of design file changes. After code generation, conflict resolution, and successful changes, the online code is updated to the latest version, ensuring consistency between online versions. Developers can pull the latest version of the code online.

[0129] After the target design file version changes, the degree of change difference is calculated using an entropy algorithm. If the difference exceeds a threshold, an incremental CSS patch is generated and committed to the code repository. Entropy detection enables real-time change-driven responses.

[0130] When calculating the degree of change difference, standardized data (coordinates, colors, etc.) before and after the change of the target design document are extracted, the data is converted into feature vectors, and then the entropy algorithm is used to calculate the vector information entropy. The change in data disorder is quantified by the difference between the entropy values ​​before and after the change, which is the degree of change difference.

[0131] When operating S570, if the difference in changes exceeds a preset threshold, incremental patch code is generated based on the change data in the target design file, and the incremental patch code is submitted to the code repository.

[0132] By comparing the degree of change difference with a preset threshold, when the degree of change difference exceeds the threshold, the specific changed area in the design file (such as element modification, addition, or deletion) is first located, and the coordinates, styles, and other difference information in the change data are extracted. Based on the difference information, an incremental CSS patch containing only the changed parts is generated, and the modification type and associated component identifier are marked. The incremental patch code is committed to the code repository through a version control tool, the change log is automatically recorded, and the code repository update mechanism is triggered to ensure that the patch is compatible with the main code and to achieve accurate code synchronization of design changes. If the degree of change difference does not exceed the threshold, it is determined to be a minor change, and no incremental patch needs to be generated. At this time, only the change log is recorded, including the modification content, time, and operator, as a version history. At the same time, the version identifier of the design file is updated, but the code repository commit process is not triggered, and no update reminders are sent to developers, so as to avoid frequent changes interfering with the development process and to ensure the stability of the code repository and development efficiency.

[0133] In the embodiments of this application, when design documents are changed, the degree of change difference is calculated. If the change exceeds a threshold, incremental patch code is automatically submitted, realizing a fully automated closed loop from design draft changes to code deployment, significantly reducing multi-platform adaptation time. When the degree of change difference in the design draft exceeds a preset threshold, code synchronization updates are automatically triggered, and incremental patches are automatically generated, significantly reducing version synchronization latency.

[0134] The design draft is processed using the code generation method described in this application. Taking the conversion of a bank login page design draft as an example, the user inputs the design draft (including a password input box and a security icon). Through standardized parsing, the coordinates of the password input box are output as [120, 250], and the coordinates of the security icon are output as [210, 255]. The specific spatial dimensions parsed from the design file identify the horizontal spacing (dx) between the password box and the adjacent icon in the interface as 90px. Based on the parent container width and the horizontal spacing, a weight coefficient ω=0.32 is calculated. ω represents the weight coefficient of this spacing in the overall layout, used to adapt to different screen sizes. Finally, the corresponding CSS styles are generated, which may add margins, paddings, or positioning properties to the password box or icon.

[0135] When calculating the weight coefficient, first obtain the width of the parent container (e.g., 281px), which is the total width of the layout container containing the password box and the icon. Then, calculate the weight coefficient using the following formula:

[0136] ω=dx / df

[0137] Where ω represents the weight coefficient, dx represents the horizontal spacing, and df represents the width of the parent container.

[0138] Taking a horizontal spacing dx=90px as an example, ω=90px / 281px=0.32. This weighting factor represents that the horizontal spacing accounts for 32% of the width of the parent container. It is used in responsive scenarios: when the width of the parent container changes (such as screen scaling), the horizontal spacing is calculated by the CSS function that dynamically calculates the length value to ensure that the relative proportions between elements are consistent with the design draft and to achieve cross-device layout adaptation.

[0139] Treating the password box and the icon as two nodes in a graph structure, we analyze their spatial location (such as horizontal spacing), style features (such as color matching degree), and layout relationship using a GNN model. The weight of the associated edge between the two is calculated to be 0.91, indicating that they are highly related in function.

[0140] The system compares high-weighted associations with a predefined component rule base (e.g., "password box + lock icon usually constitutes a secure input component") to confirm that this combination conforms to the characteristics of a secure password input component, thus completing component type identification. Based on the identification results, code with semantic tags is automatically generated.

[0141] When the icon's position was modified in the design draft, the entropy algorithm detected a difference of 0.92, exceeding the preset threshold of 0.85 (indicating a significant change). This automatically triggered a response mechanism, generating an incremental code patch (not the full code) containing only the modified icon position. This patch includes CSS styles to adjust the icon's position. The entire process achieves automatic detection, quantitative evaluation, and code synchronization of design changes, completing the flow from design adjustments to code updates without manual intervention, thus improving development efficiency.

[0142] Based on the above examples, this application addresses three core pain points in the field of design-to-code conversion through an innovative technical architecture, and has the following beneficial effects:

[0143] (1) Revolutionary breakthrough in layout adaptability: The flexible layout is accurately generated, and the transmission grid + density clustering realizes the automatic conversion from absolute positioning to responsive layout, eliminating the manual reconstruction cost of multi-terminal adaptation. The transmission grid sets the coordinate discretization tolerance threshold, and the DBSCAN clustering algorithm realizes intelligent identification of element groups (accuracy of 98.2%), which improves the consistency of multi-terminal display from 68% to 94.2%.

[0144] (2) Significantly improved accuracy in identifying financial components: The rules for financial components cover various scenarios such as banking and securities. The GNN graph convolutional network captures the semantic relationships between elements, and the GNN outputs the element association weights. When the weights exceed a preset threshold, the components are identified as the same. The domain-driven component fingerprint library integrates the GNN graph structure with the business domain rule library to accurately identify the functional logic of components such as the security keyboard. The recognition rate of the security password input box increased from 42.1% to 93.6%, and the recognition rate of the bank card selector increased from 37.8% to 89.3%.

[0145] (3) Qualitative change in development workflow efficiency: The entire lifecycle from design draft changes to code deployment is automated and closed-loop, significantly reducing multi-terminal adaptation time; by automatically triggering synchronization when the entropy value of the design draft change exceeds a preset threshold, incremental CSS patches (average <2KB) are automatically generated, and version synchronization delay time can be significantly reduced; development manpower costs are significantly reduced, and the repetitive work of manually comparing design drafts and code is completely eliminated. It realizes the leap from the traditional serial process of "design-development-operation" to the real-time collaborative paradigm of "design as code".

[0146] Based on the above code generation method, this application also provides a code generation apparatus. The following will combine... Figure 6 The device is described in detail.

[0147] Figure 6 A schematic block diagram of a code generation apparatus according to an embodiment of this application is shown.

[0148] like Figure 6As shown, the code generation device 600 of this embodiment includes a parsing engine module 610, an absolute positioning module 620, a flexible layout module 630, a component identification module 640, and an integration module 650.

[0149] The parsing engine module 610 is used to standardize and parse the target design document to obtain multi-dimensional data. In one embodiment, the parsing engine module 610 can be used to perform the operation S210 described above, which will not be repeated here.

[0150] The absolute positioning module 620 is used to process the target design file hierarchically based on multidimensional data and generate absolute positioning code. In one embodiment, the absolute positioning module 620 can be used to perform the operation S220 described above, which will not be repeated here.

[0151] The flexible layout module 630 is used to convert absolute positioning codes into flexible layout codes based on multidimensional data using a clustering algorithm. In one embodiment, the flexible layout module 630 can be used to perform the operation S230 described above, which will not be repeated here.

[0152] The component identification module 640 is used to identify components in the flexible layout code based on multi-dimensional data and generate component code. In one embodiment, the component identification module 640 can be used to perform the operation S240 described above, which will not be repeated here.

[0153] The integration module 650 is used to integrate component code to obtain the target code corresponding to the target design file. In one embodiment, the integration module 650 can be used to perform the operation S250 described above, which will not be repeated here.

[0154] According to an embodiment of this application, the parsing engine module 610 includes: a preprocessing unit for preprocessing the target design file to obtain initial data; a structure parsing unit for structured parsing of the initial data to generate structured data; a standardization processing unit for standardizing the structured data to obtain standardized data; and an optimization processing unit for performing data verification and optimization on the standardized data to obtain multidimensional data; wherein, the multidimensional data includes the coordinates, size, color, font, and hierarchy of the design elements.

[0155] According to an embodiment of this application, the preprocessing unit includes: a format recognition subunit, used to recognize the format of the target design file and determine the file format; a format conversion subunit, used to convert the target design file based on the file format using a format converter to generate metadata; and an initialization subunit, used to initialize the metadata and obtain initial data.

[0156] According to an embodiment of this application, the flexible layout module 630 includes: a discretization unit for discretizing the coordinates of design elements using a transmission mesh to obtain coordinate data; a clustering unit for dividing the design elements into levels according to the coordinate data using a clustering algorithm to obtain hierarchical relationship data; an integration unit for integrating the coordinate data and hierarchical relationship data to obtain integrated data; a dynamic calculation unit for dynamically calculating the layout parameters of the flexible box layout model according to the integrated data; and a flexible layout unit for generating flexible layout code based on the layout parameters of the flexible box layout model and replacing the absolute positioning code with the flexible layout code.

[0157] According to an embodiment of this application, the component identification module 640 includes: a feature extraction unit, used to extract features from multidimensional data based on hierarchical relationship data to obtain feature data; a feature processing unit, used to process the feature data through a deep learning model to obtain spatial relationship data; a rule matching unit, used to perform rule matching on the spatial relationship data based on a component rule library to determine component attributes; and a code conversion unit, used to convert the flexible layout code into component code according to the component attributes.

[0158] According to an embodiment of this application, the apparatus 600 further includes: a design change module, configured to, in response to a change in the target design document, calculate the change difference degree of the target design document using an entropy algorithm; and, if the change difference degree exceeds a preset threshold, generate incremental patch code based on the change data of the target design document, and submit the incremental patch code to the code repository.

[0159] According to an embodiment of this application, the absolute positioning module 620 includes: a layer acquisition unit, used to extract the design layer of the target design file and clean the design layer; a structure reorganization unit, used to reorganize the cleaned design layer to obtain optimized layer data; and a code depth calculation unit, used to perform code depth calculation on the optimized layer data based on multi-dimensional data to generate absolute positioning code.

[0160] According to embodiments of this application, any multiple modules among the parsing engine module 610, absolute positioning module 620, flexible layout module 630, component identification module 640, integration module 650, and design change module can be merged into one module, or any one of these modules can be split into multiple modules. Alternatively, at least some of the functions of one or more of these modules can be combined with at least some of the functions of other modules and implemented in one module. According to embodiments of this application, at least one of the parsing engine module 610, absolute positioning module 620, flexible layout module 630, component identification module 640, integration module 650, and design change module can be at least partially implemented as hardware circuitry, such as a field-programmable gate array (FPGA), a programmable logic array (PLA), a system-on-a-chip, a system-on-a-substrate, a system-on-package, an application-specific integrated circuit (ASIC), or implemented in hardware or firmware by any other reasonable means of integrating or packaging circuitry, or implemented in software, hardware, or firmware, or in any suitable combination of any of these three implementation methods. Alternatively, at least one of the parsing engine module 610, absolute positioning module 620, flexible layout module 630, component identification module 640, integration module 650, and design change module can be at least partially implemented as a computer program module, which can perform corresponding functions when the computer program module is run.

[0161] Figure 7 A block diagram schematically illustrates an electronic device suitable for implementing a code generation method according to an embodiment of this application.

[0162] like Figure 7 As shown, an electronic device 900 according to an embodiment of this application includes a processor 901, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 902 or a program loaded from a storage portion 908 into a random access memory (RAM) 903. The processor 901 may include, for example, a general-purpose microprocessor (e.g., a CPU), an instruction set processor and / or an associated chipset and / or a special-purpose microprocessor (e.g., an application-specific integrated circuit (ASIC)), etc. The processor 901 may also include onboard memory for caching purposes. The processor 901 may include a single processing unit or multiple processing units for performing different actions of the method flow according to an embodiment of this application.

[0163] RAM 903 stores various programs and data required for the operation of electronic device 900. Processor 901, ROM 902, and RAM 903 are interconnected via bus 904. Processor 901 executes various operations of the method flow according to embodiments of this application by executing programs in ROM 902 and / or RAM 903. It should be noted that programs may also be stored in one or more memories other than ROM 902 and RAM 903. Processor 901 may also execute various operations of the method flow according to embodiments of this application by executing programs stored in one or more memories.

[0164] According to embodiments of this application, the electronic device 900 may further include an input / output (I / O) interface 905, which is also connected to a bus 904. The electronic device 900 may also include one or more of the following components connected to the input / output (I / O) interface 905: an input section 906 including a keyboard, mouse, etc.; an output section 907 including a cathode ray tube (CRT), liquid crystal display (LCD), etc., and a speaker, etc.; a storage section 908 including a hard disk, etc.; and a communication section 909 including a network interface card such as a LAN card, modem, etc. The communication section 909 performs communication processing via a network such as the Internet. A drive 910 is also connected to the input / output (I / O) interface 905 as needed. A removable medium 911, such as a disk, optical disk, magneto-optical disk, semiconductor memory, etc., is installed on the drive 910 as needed so that computer programs read from it can be installed into the storage section 908 as needed.

[0165] This application also provides a computer-readable storage medium, which may be included in the device / apparatus / system described in the above embodiments; or it may exist independently and not assembled into the device / apparatus / system. The computer-readable storage medium carries one or more programs, which, when executed, implement the method according to the embodiments of this application.

[0166] According to embodiments of this application, the computer-readable storage medium can be a non-volatile computer-readable storage medium, such as including but not limited to: portable computer disks, hard disks, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), portable compact disk read-only memory (CD-ROM), optical storage devices, magnetic storage devices, or any suitable combination thereof. In this application, the computer-readable storage medium can be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. For example, according to embodiments of this application, the computer-readable storage medium may include ROM 902 and / or RAM 903 and / or one or more memories other than ROM 902 and RAM 903 described above.

[0167] Embodiments of this application also include a computer program product comprising a computer program containing program code for performing the methods shown in the flowchart. When the computer program product is run on a computer system, the program code is used to enable the computer system to implement the code generation method provided in the embodiments of this application.

[0168] When the computer program is executed by the processor 901, it performs the functions defined in the system / apparatus of this application embodiment. According to the embodiments of this application, the systems, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0169] In one embodiment, the computer program may rely on a tangible storage medium such as an optical storage device or a magnetic storage device. In another embodiment, the computer program may also be transmitted and distributed in the form of signals over a network medium, and downloaded and installed via the communication section 909, and / or installed from a removable medium 911. The program code contained in the computer program can be transmitted using any suitable network medium, including but not limited to: wireless, wired, etc., or any suitable combination thereof.

[0170] In such an embodiment, the computer program can be downloaded and installed from a network via the communication section 909, and / or installed from the removable medium 911. When the computer program is executed by the processor 901, it performs the functions defined in the system of this application embodiment. According to the embodiments of this application, the systems, devices, apparatuses, modules, units, etc., described above can be implemented by computer program modules.

[0171] According to embodiments of this application, program code for executing the computer programs provided in the embodiments of this application can be written in any combination of one or more programming languages. Specifically, these computational programs can be implemented using high-level procedural and / or object-oriented programming languages, and / or assembly / machine languages. Programming languages ​​include, but are not limited to, languages ​​such as Java, C++, Python, "C", or similar programming languages. The program code can be executed entirely on the user's computing device, partially on the user's device, partially on a remote computing device, or entirely on a remote computing device or server. In cases involving remote computing devices, the remote computing device can be connected to the user's computing device via any type of network, including a local area network (LAN) or a wide area network (WAN), or it can be connected to an external computing device (e.g., via the Internet using an Internet service provider).

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

[0173] Those skilled in the art will understand that the features described in the various embodiments of this application can be combined and / or combined in various ways, even if such combinations or combinations are not explicitly described in this application. In particular, the features described in the various embodiments of this application can be combined and / or combined in various ways without departing from the spirit and teachings of this application. All such combinations and / or combinations fall within the scope of this application.

Claims

1. A code generation method characterized by, The method comprises: standardized parsing of the target design file to obtain multidimensional data; hierarchical processing of the target design file according to the multidimensional data to generate absolute positioning code; based on the multidimensional data, the absolute positioning code is converted into elastic layout code through a clustering algorithm; based on the multidimensional data, component recognition is performed on the elastic layout code to generate component code; and integrating the component code to obtain the target code corresponding to the target design file.

2. The method of claim 1, wherein, The standardized parsing of the target design file to obtain multidimensional data comprises: preprocessing the target design file to obtain initial data; structured parsing of the initial data to generate structured data; standardizing the structured data to obtain standardized data; and data verification and optimization of the standardized data to obtain the multidimensional data; wherein the multidimensional data comprises coordinates, dimensions, colors, fonts and levels of design elements.

3. The method of claim 2, wherein, The preprocessing of the target design file to obtain initial data comprises: format recognition of the target design file to determine the file format; based on the file format, the target design file is converted through a format converter to generate metadata; and initializing the metadata to obtain the initial data.

4. The method of claim 2, wherein, The conversion of the absolute positioning code into elastic layout code through a clustering algorithm based on the multidimensional data comprises: discretizing the coordinates of the design elements using a transmission grid to obtain coordinate data; dividing the levels of the design elements according to the coordinate data through the clustering algorithm to obtain hierarchical relationship data; integrating the coordinate data and the hierarchical relationship data to obtain integrated data; dynamically calculating the layout parameters of the elastic box layout model according to the integrated data; and based on the layout parameters of the elastic box layout model, the elastic layout code is generated and the absolute positioning code is replaced by the elastic layout code.

5. The method of claim 4, wherein, The component recognition of the elastic layout code based on the multidimensional data to generate component code comprises: based on the hierarchical relationship data, feature extraction is performed on the multidimensional data to obtain feature data; processing the feature data through a deep learning model to obtain spatial relationship data; based on a component rule library, the spatial relationship data is rule-matched to determine component attributes; and according to the component attributes, the elastic layout code is converted into the component code.

6. The method of any one of claims 1-5, wherein, The method further comprises: in response to changes in the target design file, calculating the change difference of the target design file through an entropy algorithm; and in the case where the change difference exceeds a preset threshold, generating an incremental patch code according to the change data of the target design file, and submitting the incremental patch code to a code library.

7. The method of claim 1, wherein, The hierarchical processing of the target design file according to the multidimensional data to generate absolute positioning code comprises: extracting design layers of the target design file and cleaning the design layers; structure reorganization of the cleaned design layers to obtain optimized layer data; and Based on the multi-dimensional data, the optimization layer data is calculated in code depth to generate the absolute positioning code.

8. A code generation apparatus characterized by comprising: The device comprises: a parsing engine module for standardizing parsing of a target design file to obtain multi-dimensional data; an absolute positioning module for hierarchically processing the target design file according to the multi-dimensional data to generate an absolute positioning code; an elastic layout module for converting the absolute positioning code into an elastic layout code based on the multi-dimensional data through a clustering algorithm; a component identification module for identifying components of the elastic layout code based on the multi-dimensional data to generate a component code; and an integration module for integrating the component code to obtain a target code corresponding to the target design file.

9. An electronic device comprising: one or more processors; a memory for storing one or more computer programs, characterized in that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 1-7.

10. A computer readable storage medium having stored thereon a computer program or instructions, characterized in that, The computer program or instructions are executed by the processor to implement the steps of the method according to any one of claims 1-7.

11. A computer program product comprising computer programs or instructions, characterized in that, The computer program or instructions are executed by the processor to implement the steps of the method according to any one of claims 1-7. The computer program or instructions are executed by the processor to implement the steps of the method according to any one of claims 1-7.

Images