Design draft code conversion method and device, electronic equipment and storage medium

Abstract

The invention relates to a design draft code conversion method and device, electronic equipment and a storage medium. The method comprises the following steps: generating an initial DSL (Digital Subscriber Line) intermediate presentation layer, which contains hierarchical constraints and response rules and is associated with a layout optimization algorithm, of a design draft according to basic elements of the design draft; according to the initial DSL intermediate presentation layer, displaying a preview page of the design draft on an interactive visual interface so as to adjust elements of the preview page through the interactive visual interface, and obtaining adjustment parameters for adjusting the elements of the preview page; according to the adjustment parameters, adjusting the initial DSL intermediate presentation layer by adopting a layout optimization algorithm, and obtaining the DSL intermediate presentation layer of the design draft; and according to the DSL intermediate presentation layer, obtaining at least one front-end code corresponding to the design draft. According to the scheme provided by the invention, the design manuscript can be quickly and efficiently converted into the front-end code, and the conversion efficiency and accuracy of converting the design manuscript into the front-end code are improved.

Description

Technical Field

[0001] The present application relates to the field of code development technology, and in particular to a method, device, electronic device and storage medium for converting a design draft into code. Background Art

[0002] D2C (Design to Code) is a tool that converts design drafts into code using intelligent technology. It aims to improve development efficiency, reduce labor costs, and shorten the design-to-development process.

[0003] Related technologies use D2C to convert design drafts into code. When front-end developers face complex UI (User Interface) design drafts, in order to enable the design draft to be converted into front-end code to reuse components in the front-end public UI component library, and to make the front-end code converted from the design draft suitable for different front-end frameworks, they not only need to cut and restore the design draft, but also need to conduct a design walkthrough of the front-end code after the design draft is converted into front-end code. The designer or team must conduct a systematic inspection of the development implementation effect to verify whether the automatically generated front-end code accurately restores the visual details, interaction logic and user experience requirements of the design draft, so as to ensure that the final product is consistent with the design expectations.

[0004] Related technologies using D2C to convert design drafts to code require extensive proofreading and time-consuming work, including cutting and restoring the design drafts, as well as design walkthroughs. Furthermore, the design draft restoration process is low, and the accuracy of the code conversion relies heavily on design walkthroughs. Therefore, related technologies using D2C to convert design drafts to code rely heavily on manual intervention, resulting in low conversion efficiency and accuracy. Summary of the Invention

[0005] In order to solve or partially solve the problems existing in the related art, the present application provides a design draft code conversion method, device, electronic device and storage medium, which can optimize the conversion process of design draft to front-end code, reduce dependence on manual intervention, and can quickly and efficiently convert design drafts into front-end code, thereby improving the conversion efficiency and accuracy of converting design drafts into front-end code.

[0006] The first aspect of the present application provides a method for converting a design draft into code, the method comprising: Get the basic elements of the design draft; Based on the basic elements, an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms is generated; Displaying a preview page of the design draft on an interactive visual interface according to the initial DSL intermediate presentation layer, so as to adjust elements of the preview page through the interactive visual interface, and obtaining adjustment parameters for adjusting the elements of the preview page; According to the adjustment parameters, the initial DSL intermediate representation layer is adjusted using the layout optimization algorithm to obtain the DSL intermediate representation layer of the design draft including the hierarchical constraints, the response rules, and the association with the layout optimization algorithm; At least one front-end code corresponding to the design draft is obtained according to the DSL intermediate representation layer.

[0007] Preferably, the basic elements of the design draft are obtained, including: Using a pre-trained object detection model, obtain the elements of the design draft, as well as the element category, element bounding box coordinates, and element confidence of the elements; A visual detection algorithm is used to separate noise elements of the design draft according to the element category, element bounding box coordinates, and element confidence of the elements, so as to obtain basic elements of the design draft.

[0008] Preferably, the use of a visual detection algorithm to separate the noise elements of the design draft according to the element category, element bounding box coordinates, and element confidence of the elements to obtain the basic elements of the design draft includes: Performing cluster analysis on the elements of the design draft using a cyclic node similarity matching algorithm to obtain repeated elements of the design draft, and / or using a frequency domain filtering algorithm to suppress high-frequency noise in the design draft; Using a density-based clustering algorithm, cluster analysis is performed on the elements of the design draft, and the elements whose element confidence is less than the noise element weight threshold are marked as noise elements; The noise elements are separated from the elements of the design draft to obtain the basic elements of the design draft.

[0009] Preferably, generating the initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms based on the basic elements includes: Determining the spatial relationship of the basic elements according to the basic elements; An initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and association with a layout optimization algorithm is generated according to the basic elements and the spatial relationships between the basic elements.

[0010] Preferably, determining the spatial relationship of the basic elements according to the basic elements includes: Adopting a dynamic response algorithm to optimize the spacing and alignment rules of the basic elements; and / or, Performing directional projection analysis on similar elements of the design draft to establish spatial grouping dependency relationships of the similar elements; and / or, A noise backtracking algorithm is used to restore the decorative elements of the design draft.

[0011] Preferably, the DSL intermediate representation layer uses a tree structure to represent the page layout of the basic elements of the design draft; and / or, The hierarchical constraint includes defining a parent-child relationship through nested children fields; and / or, The response rules include supporting options field definition automatic loading rules; and / or, The associating with the layout optimization algorithm includes dynamically adjusting elements of the DSL intermediate presentation layer using the layout optimization algorithm.

[0012] Preferably, the pre-trained target detection model includes a pre-trained YOLO+ResNet-50 fused CNN target detection model; wherein, The loss function of the pre-trained YOLO+ResNet-50 fused CNN target detection model includes: the loss function of YOLO, the Euclidean distance loss function of the elements of the design draft, and the classification cross entropy loss function of the elements of the design draft.

[0013] A second aspect of the present application provides a design draft code conversion device, the device comprising: Element acquisition module, used to obtain the basic elements of the design draft; A generation module, configured to generate an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms based on the basic elements acquired by the element acquisition module; an adjustment module configured to display a preview page of the design draft on an interactive visual interface based on the initial DSL intermediate representation layer generated by the generation module, allowing a user to adjust elements of the preview page through the interactive visual interface, and to obtain adjustment parameters for adjusting the elements of the preview page; and to adjust the initial DSL intermediate representation layer using the layout optimization algorithm based on the adjustment parameters to obtain a DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated with the layout optimization algorithm. The conversion module is configured to obtain at least one front-end code corresponding to the design draft according to the DSL intermediate representation layer obtained by the adjustment module.

[0014] A third aspect of the present application provides an electronic device, including: processor; and The memory stores executable codes thereon, and when the executable codes are executed by the processor, the processor is caused to execute the method described above.

[0015] A fourth aspect of the present application provides a computer-readable storage medium having executable code stored thereon. When the executable code is executed by a processor of an electronic device, the processor is caused to execute the method described above.

[0016] A fifth aspect of the present application provides a computer program product, which includes computer instructions, and when the computer instructions are executed by a processor, implements the method described above.

[0017] The technical solution provided by this application may include the following beneficial results: The technical solution of the present application generates an initial DSL intermediate representation layer of the design draft containing hierarchical constraints, response rules, and associated with a layout optimization algorithm based on the basic elements of the design draft; displays a preview page of the design draft on an interactive visualization interface based on the initial DSL intermediate representation layer of the design draft, so as to adjust the elements of the preview page through the interactive visualization interface, and obtain adjustment parameters for adjusting the elements of the preview page; adjusts the initial DSL intermediate representation layer using the layout optimization algorithm based on the adjustment parameters, obtains the DSL intermediate representation layer of the design draft containing hierarchical constraints, response rules, and associated with the layout optimization algorithm; obtains at least one front-end code corresponding to the design draft based on the DSL intermediate representation layer of the design draft; can realize the automatic conversion from the design draft elements to the highly maintainable DSL intermediate representation layer, convert the design draft into at least one front-end code corresponding to the design draft based on the DSL intermediate representation layer of the design draft, and can output front-end code that is compatible with multiple front-end frameworks. The design draft code conversion method of the embodiment of the present application can optimize the conversion process from the design draft to the front-end code, reduce the dependence on manual intervention, can quickly and efficiently convert the design draft into the front-end code, and improve the conversion efficiency and accuracy of the design draft into the front-end code.

[0018] It should be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the present application. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The above and other objects, features and advantages of the present application will become more apparent by describing in more detail exemplary embodiments of the present application in conjunction with the accompanying drawings, wherein the same reference numerals generally represent the same components in the exemplary embodiments of the present application.

[0020] Figure 1 This is a flow chart of a method for converting a design draft into code as shown in an embodiment of the present application; Figure 2This is another flowchart of the method for converting a design draft into code shown in an embodiment of the present application; Figure 3 This is a schematic diagram of the structure of the design draft code conversion system shown in an embodiment of the present application; Figure 4 This is a schematic diagram of the structure of the design draft code conversion device shown in an embodiment of the present application; Figure 5 It is a structural diagram of an electronic device shown in an embodiment of the present application. DETAILED DESCRIPTION

[0021] The following describes embodiments of the present application in more detail with reference to the accompanying drawings. Although the accompanying drawings illustrate embodiments of the present application, it should be understood that the present application can be implemented in various forms and should not be limited by the embodiments described herein. Rather, these embodiments are provided to make the present application more thorough and complete, and to fully convey the scope of the present application to those skilled in the art.

[0022] The terms used in this application are for the purpose of describing specific embodiments only and are not intended to limit this application. As used in this application and the appended claims, the singular forms "a," "an," "the," and "the" are intended to include the plural forms, unless the context clearly indicates otherwise. It should also be understood that the term "and / or" as used herein refers to and encompasses any and all possible combinations of one or more of the associated listed items.

[0023] It should be understood that although the terms "first", "second", "third", etc. may be used in this application to describe various information, this information should not be limited to these terms. These terms are only used to distinguish information of the same type from each other. For example, without departing from the scope of this application, the first information may also be referred to as the second information, and similarly, the second information may also be referred to as the first information. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of the features. In the description of this application, the meaning of "plurality" is two or more, unless otherwise clearly and specifically defined.

[0024] The embodiment of the present application provides a method for converting a design draft into code, which can optimize the conversion process of a design draft into a front-end code, reduce dependence on manual intervention, and can quickly and efficiently convert a design draft into a front-end code, thereby improving the conversion efficiency and accuracy of converting a design draft into a front-end code.

[0025] The technical solutions of the embodiments of the present application are described in detail below with reference to the accompanying drawings.

[0026] Figure 1 It is a flowchart of the design draft code conversion method shown in an embodiment of the present application.

[0027] See also Figure 1 A method for converting a design draft into code, characterized by comprising: Step 101: Obtain basic elements of the design draft.

[0028] In one embodiment, the elements of the design draft are layers or components in the design tool, which describe the visual features of the UI and can be composed of a single or multiple layers, such as buttons, input boxes, etc. The elements of the design draft may include elements and metadata of the elements. The metadata of the elements include but are not limited to the position, style, content, and parent-child relationship of the elements. The position of the element can be the geometric properties of the element (width and height / coordinates), and can be the coordinates (x, y) and size (width, height) of the element in the canvas. The style of the element can be the style attributes of the element, including but not limited to the color, font, border, shadow and other visual attributes of the element that can be mapped by CSS (Cascading Style Sheets). The content of the element includes but is not limited to text content, image resources, and vector graphics data. The parent-child relationship of the element can be the structural attributes of the element, including the hierarchical relationship of the element.

[0029] In one embodiment, the elements of a design draft may include basic elements (e.g., icons, images, containers, text) and noise elements. Noise elements may be elements that exist in the design draft but are not the main content or functional components. They may include decorative elements and other unimportant details, such as decorative lines and shadows.

[0030] In one embodiment, the design draft can be input into the target detection model, and the elements of the design draft can be identified by the target detection model to obtain the elements of the design draft output by the target detection model; a visual detection algorithm can be used to perform fine segmentation on the elements of the design draft output by the target detection model, separate the noise elements in the design draft elements, remove the noise elements in the design draft elements, and obtain the basic elements of the design draft.

[0031] Step 102 : generating an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms based on the basic elements of the design draft.

[0032] In one embodiment, metadata of the basic elements of the design draft can be encapsulated into a structured JSON object based on the basic elements of the design draft, and a set of standardized element objects of the design draft that conforms to the DSL (Domain Specific Language) specification is obtained. Based on the set of standardized element objects of the design draft that conforms to the DSL specification, an initial DSL intermediate representation layer of the design draft that includes hierarchical constraints, response rules, and is associated with a layout optimization algorithm is generated.

[0033] In one embodiment, a structured JSON object includes, but is not limited to, fields such as type (element type), options (configuration options), and children (nested structure). Type represents the type identifier of a data structure (e.g., element type). Options provides configurable option parameters, which can be in the form of key-value pairs or arrays. Children defines nested child elements, supporting recursive structures (e.g., tree menus and nested UI components).

[0034] In one embodiment, hierarchical constraints may include defining parent-child relationships through nested children fields. Response rules may include supporting automatic loading rules defined through options fields. Association with a layout optimization algorithm may include reverse optimizing elements through the layout optimization algorithm, including but not limited to adjusting element position, style, spacing, and alignment.

[0035] Step 103 : displaying a preview page of the design draft on an interactive visual interface according to the initial DSL intermediate representation layer of the design draft, adjusting elements of the preview page through the interactive visual interface, and obtaining adjustment parameters for adjusting the elements of the preview page.

[0036] In one embodiment, the design draft can be converted into front-end code based on the initial DSL intermediate representation layer of the design draft; the front-end code is displayed on an interactive visual interface, and a preview page of the design draft is displayed; the preview page of the design draft and the design draft can be displayed simultaneously in a left-right layout on the interactive visual interface, and the preview page and the design draft are compared to determine whether the preview page meets the design requirements of the design draft; when elements of the preview page do not meet the design requirements of the design draft, the elements that do not meet the design requirements of the design draft are adjusted, and adjustment parameters for adjusting the elements of the preview page are obtained to make the displayed preview page meet the design requirements of the design draft, and the adjustment of the elements includes but is not limited to adjustment of the position, style, spacing, and alignment of the elements.

[0037] Step 104 : According to the adjustment parameters, the initial DSL intermediate representation layer is adjusted using a layout optimization algorithm, and the DSL intermediate representation layer including the hierarchical constraints, response rules, and the layout optimization algorithm associated with the design draft is obtained.

[0038] In one embodiment, based on adjustment parameters for adjusting elements of the preview page, a layout optimization algorithm associated with the initial DSL intermediate representation layer can be used to reversely optimize the page of the design draft, reversely optimize metadata of basic elements, optimize element grouping and classification, adjust hierarchical constraints and response rules of the initial DSL intermediate representation layer, and obtain the DSL intermediate representation layer associated with the layout optimization algorithm and including the hierarchical constraints and response rules of the design draft.

[0039] Step 105: Obtain at least one front-end code corresponding to the design draft according to the DSL intermediate representation layer of the design draft.

[0040] In one embodiment, the design draft may be converted into different front-end codes corresponding to the design draft and adapted to different front-end frameworks based on the DSL intermediate representation layer of the design draft.

[0041] The design draft conversion method of the embodiment of the present application generates an initial DSL intermediate representation layer of the design draft containing hierarchical constraints, response rules, and associated with a layout optimization algorithm based on the basic elements of the design draft; displays a preview page of the design draft on an interactive visualization interface based on the initial DSL intermediate representation layer of the design draft, so as to adjust the elements of the preview page through the interactive visualization interface, and obtain adjustment parameters for adjusting the elements of the preview page; adjusts the initial DSL intermediate representation layer using the layout optimization algorithm based on the adjustment parameters, obtains the DSL intermediate representation layer of the design draft containing hierarchical constraints, response rules, and associated with the layout optimization algorithm; obtains at least one front-end code corresponding to the design draft based on the DSL intermediate representation layer of the design draft; can realize the automatic conversion from the design draft elements to the highly maintainable DSL intermediate representation layer, convert the design draft into at least one front-end code corresponding to the design draft based on the DSL intermediate representation layer of the design draft, and can output front-end code that is compatible with multiple front-end frameworks. The design draft conversion method of the embodiment of the present application can optimize the conversion process from the design draft to the front-end code, reduce the dependence on manual intervention, can quickly and efficiently convert the design draft into the front-end code, and improve the conversion efficiency and accuracy of converting the design draft into the front-end code.

[0042] Figure 2 This is another flowchart of the method for converting a design draft into code shown in an embodiment of the present application; Figure 3 It is a structural diagram of the design draft to code system shown in the embodiment of the present application. The design draft to code method and the design draft to code system are adopted, and AI is used to empower the design draft to code, which can provide a better and more convenient design draft to code experience, and realize efficient and fast design draft to code parsing and conversion. Combined with the design draft to code method and the design draft to code system, it is possible to preferentially identify and reference the front-end public UI component library components from the UI design draft, reuse repeated components and styles within the page, correctly identify and restore the spatial relationship between UI design draft elements, realize the preview of the converted page, accurately realize the restoration of the design draft, reduce the time of design review, and generate front-end code that is compatible with multiple front-end frameworks.

[0043] See also Figure 2 and Figure 3 A design draft to code conversion method can be applied to a design draft to code conversion system based on D2C, including: Step 201: Obtain basic elements of the design draft.

[0044] In one embodiment, a dual-engine parsing module that integrates a pre-trained object detection model and a visual inspection algorithm can be used to extract features and identify components of the design to obtain the basic elements of the design draft. The pre-trained object detection model can be used to obtain the elements of the design draft, as well as their element categories, element bounding box coordinates, and element confidence. The visual inspection algorithm can be used to separate the noise elements of the design draft based on the element categories, element bounding box coordinates, and element confidence to obtain the basic elements of the design draft.

[0045] In one embodiment, the design draft conversion system may include a design draft management platform, which implements cloud-based upload, version control, and permission management of design drafts through the design draft management platform. The unified authentication interface of the design draft management platform can verify the identity of the user, and adopts the UX-UI (UI / UX design, which is the process of creating a user interface (UI) and enhancing the user experience (UX) in a digital product) design specification engine to perform file compliance verification on design drafts marked as designed based on user design specifications, and skip verification for design drafts that are not designed based on user design specifications. Users can upload design drafts to the design draft management platform. After the upload is successful, the design draft management platform can classify and store the uploaded design drafts, and automatically trigger the design draft conversion method of the embodiment of the present application, establish an asynchronous task queue, and execute the design draft conversion method of the embodiment of the present application to ensure the service stability of design draft conversion in high-concurrency scenarios.

[0046] In one embodiment, a user can upload and store a design draft through a design draft management platform, and determine whether the design draft is based on the user's design specifications. During the design draft upload process, the design draft can be segmented to obtain the design draft of each page of the design draft, and a transcoding agent of the design draft transcoding system can be asynchronously called to execute part or all of the design draft transcoding method of the embodiment of the present application, converting the design draft of each page of the design draft into at least one front-end code.

[0047] In one embodiment, the transcoding agent can load the design draft of each page of the design draft of the design draft management platform, and input the design draft of each page of the design draft of the design draft management platform into the pre-trained target detection model in sequence; the pre-trained target detection model extracts the layers and elements of the design draft, extracts the elements of the design draft based on the coarse-grained recognition of the elements in the design draft, and outputs the elements of the design draft, as well as the element category, element bounding box coordinates, and element confidence of the design draft elements.

[0048] In one embodiment, the pre-trained target detection model may be a pre-trained YOLO+ResNet-50 (deep residual neural network) fused CNN (Convolutional Neural Network) target detection model.

[0049] In one embodiment, the element category can be the UI component type of the element, for example, the element belongs to the icon category. The element bounding box coordinates can be expressed as pixel coordinates defined in a pixel coordinate system. The element confidence can be a quantitative evaluation value of the correctness of the element recognition result of the CNN object detection model.

[0050] In one embodiment, the visual detection algorithm can be a pixel-level semantic segmentation algorithm that combines a U-Net (U-shaped network) architecture with a noise-aware loss function. The visual detection algorithm can be used to perform refined element segmentation based on the element category, element bounding box coordinates, and element confidence output by the CNN object detection model, thereby obtaining the basic elements and noise elements of the design draft.

[0051] In one embodiment, a visual detection algorithm is used to obtain basic elements of a design draft based on element categories, element bounding box coordinates, and element confidence levels output by a pre-trained CNN object detection model, including: Step 2011: perform superpixel segmentation on the element area, extract local features, and obtain multi-layer feature vectors of the design draft elements.

[0052] In one embodiment, a visual detection algorithm can be used to identify each element area of ​​the design draft based on the element bounding box coordinates of each element of the design draft; superpixel segmentation is performed on each element area of ​​the design draft, local features are extracted, elements of each element area of ​​the design draft are obtained, and the elements of each element area of ​​the design draft are parsed into a multi-layer feature vector, and the multi-layer feature vector of the element may include metadata of the element.

[0053] Step 2012: perform cluster analysis on the elements of the design draft using a cyclic node similarity matching algorithm to obtain repeated elements of the design draft.

[0054] In one embodiment, a repeated element in a design draft refers to an element with the same shape, color, style, or structure that appears multiple times (≥2 times) in the same design draft, forming a visual pattern. For example, in a webpage list query, each row of webpage elements in the webpage list query is a repeated element.

[0055] In one embodiment, a cyclic node similarity matching algorithm can be used to calculate the element similarity (e.g., proximity, consistent style) of each pair of elements based on the multi-layer feature vectors of the design elements, thereby performing cluster analysis of repeated elements and identifying repeated elements in the design. When multiple different repeating elements exist, cluster analysis can be used to group repeating elements of the same type. For example, when multiple different list elements exist, each individual list sub-element can be grouped into similar list elements through cluster analysis.

[0056] In one embodiment, the design draft elements can be clustered and analyzed using a cyclic node similarity matching algorithm based on the multi-layer feature vectors of the design draft elements to obtain repeated elements of the design draft, classify the repeated elements of the design draft, and determine the element categories of the repeated elements.

[0057] In one embodiment, a cyclic node similarity matching algorithm is used to perform cluster analysis on the elements of the design draft, obtain the repeated elements of the design draft, classify the repeated elements of the design draft, and determine the element category of the repeated elements. This can structure the hierarchical relationship of the design draft elements, automatically divide the visual modules, and aggregate the scattered elements into logical containers (for example, image containers), replacing the manual grouping operation of the elements; merge homogeneous elements, eliminate redundant nesting of elements, reduce the invalid DOM (Document Object Model) level of the generated front-end code, and improve rendering performance.

[0058] Step 2013: Use a frequency domain filtering algorithm to suppress high-frequency noise in the design draft.

[0059] In one embodiment, high-frequency noise in a design primarily manifests as jagged edges, pixel particles, or random noise, with its energy concentrated in the high-frequency region of the Fourier spectrum. Low-frequency components correspond to large color blocks and smooth gradients, while high-frequency components contain edge details and noise. A frequency-domain filtering algorithm can be employed to convert the design into the frequency domain using an FFT (Fast Fourier Transform). A low-pass filter (e.g., a Gaussian filter or an ideal filter) is then used to attenuate high-frequency components and suppress high-frequency noise in the design (e.g., photo noise).

[0060] In one embodiment, a frequency domain filtering algorithm is used to suppress high-frequency noise in a design draft, which can more accurately separate noise elements in the design draft and more effectively identify and remove high-frequency components of the design draft, such as decorative lines and shadows.

[0061] In step 2014, a density-based clustering algorithm is used to perform cluster analysis on the elements of the design draft, and elements whose element confidence is less than the noise element weight threshold are marked as noise elements, thereby separating the noise elements of the design draft.

[0062] In one embodiment, a density-based spatial clustering algorithm (DBSCAN) can be used to perform cluster analysis on elements in the design draft, cluster similar noise elements, and label elements with a confidence score less than a noise element weight threshold as noise elements. For example, elements with a confidence score less than 0.7 can be labeled as noise elements, and the noise elements in the design draft can be separated from the elements in the design draft to obtain the basic elements of the design draft.

[0063] In one embodiment, the value range of the noise element weight threshold is [0.6, 0.8], and the noise element weight threshold can be adjusted within the dynamic calibration range of 0.6-0.8. After adjusting the noise element weight threshold, the design draft can be re-analyzed to separate the noise elements of the design draft, obtain the basic elements of the design draft, and compare the basic elements of the design draft obtained before and after the adjustment of the noise element weight threshold. The impact of the difference in the basic elements of the design draft obtained before and after the adjustment of the noise element weight threshold on the conversion of the design draft into front-end code is analyzed.

[0064] This embodiment uses density-based clustering and element confidence dual filtering to effectively identify abnormal noise elements in the design draft and more accurately obtain the basic elements of the design draft.

[0065] In one embodiment, the pre-training steps of the YOLO+ResNet-50 fused CNN object detection model include: Step 201-1: pre-process the design draft and obtain a data set of a pre-trained YOLO+ResNet-50 fused CNN object detection model.

[0066] In one embodiment, the design draft-to-code system may include a model training platform. The model training platform loads design drafts from the design draft management platform and annotates the loaded design drafts using feature extraction and component recognition techniques to create an annotated dataset. Based on the dataset, a CNN object detection model undergoes multi-stage iterative training. Using the adaptive layout correction module, the CNN object detection model's parameters are optimized based on the dataset's validation and test sets. Verification and evaluation of the CNN object detection model are completed, resulting in a pre-trained CNN object detection model.

[0067] In one embodiment, the model training platform can load a set number of design drafts (for example, 100,000 groups) from the design draft management platform, and annotate the set number of design drafts, annotate the layout rules of the design drafts, including but not limited to the spacing, alignment, and grid system of the design draft elements, and obtain a data set of a pre-trained YOLO+ResNet-50 fused CNN target detection model.

[0068] In one embodiment, the model training platform can group the annotated design drafts into a training set, a validation set, and a test set. The training set is used for parameter learning of the CNN object detection model. The validation set is used for hyperparameter tuning and overfitting prevention of the CNN object detection model. The test set is used for evaluating the final performance of the CNN object detection model.

[0069] Step 201-2: Based on the loss function of YOLO, obtain the loss function of the CNN object detection model.

[0070] In one embodiment, the model training platform can introduce a layout-aware function based on the loss function of the YOLO model, use the element spacing error and alignment deviation of the layout rule of the design draft as regularization terms, optimize the loss function of the YOLO model, and obtain the loss function of the CNN object detection model. The loss function of the CNN object detection model is: L total = L yolo + λ×(L spacing + L alignment ); Where λ is the weight, λ = 0.5; L spacing is the Euclidean distance loss of the element; L alignment is the element-wise categorical cross entropy loss.

[0071] Step 201-3: pre-train the CNN target detection model according to the data set and loss function of the CNN target detection model to obtain a pre-trained CNN target detection model.

[0072] In one embodiment, the model training platform can input a data set into a CNN target detection model to be pre-trained; the CNN target detection model to be pre-trained outputs the categories and bounding box coordinates of the elements in the design draft based on the training set; and calculates the loss function value of the CNN target detection model based on the input, output, and loss function of the CNN target detection model; based on the loss function value, the gradient of the network parameters of the CNN target detection model is back-propagated layer by layer, and the weight adjustment amount of each layer is calculated using the chain rule of calculus, and the weights of each layer of the CNN target detection model are adjusted to achieve the adjustment of the CNN target detection model parameters. If the loss function value is less than the set loss function value or the number of iterations reaches the set number of iterations, the adjustment of the CNN target detection model parameters is stopped, the convergence of the CNN target detection model parameters is determined, and the pre-trained CNN target detection model is obtained.

[0073] In one embodiment, during the model inference stage of the CNN object detection model, the model training platform can dynamically adjust the element positions through the adaptive layout correction module (Adaptive Layout Correction), and pre-train the CNN object detection model through the design draft of dynamically adjusting the element positions, so that the element positions of the elements output by the pre-trained CNN object detection model comply with the DSL design specifications (for example, spacing, alignment, and hierarchical relationships), thereby avoiding layout conflicts.

[0074] In one embodiment, the design draft management platform can classify and manage uploaded design drafts, and classify the design drafts into design drafts based on user design specifications and design drafts not based on user design specifications. The model training platform can perform data annotation on the design drafts based on user design specifications and design drafts not based on user design specifications, respectively, to obtain a data set based on user design specifications and a data set not based on user design specifications; using the data set based on user design specifications, pre-train a set of YOLO+ResNet-50 fused CNN target detection models for processing design drafts based on user design specifications; using the data set not based on user design specifications, pre-train another set of YOLO+ResNet-50 fused CNN target detection models for processing design drafts not based on user design specifications. The two sets of pre-trained CNN target detection models are deployed in the corresponding environment for subsequent use.

[0075] In one embodiment, the design draft based on the user design specification can be a clear and concise design draft with unified design specifications, unified design resource naming methods, unified visual element components, unified interaction methods, and unified language copywriting.

[0076] In one embodiment, the visual element components are unified, for example, the visual element components such as layout framework, brand color, functional color, button, spacing, font, font size, font spacing, font weight, etc. may be unified.

[0077] In one embodiment, the interaction methods are unified, for example, the arrangement of buttons for click operations, the jump experience, the behavior logic, and other interaction methods are unified.

[0078] In one embodiment, unified language and text means strictly following visual typography rules and using uniform font size, spacing, and line spacing across all text application scenarios. For example, unified global text, rigorous and consistent expression of meaning, and uniform punctuation, numbers, time, units, and formatting can be achieved.

[0079] In one embodiment, clarity includes clear layout hierarchies, clear information hierarchies, clear visual element expressions, and clear interaction logic. A clean and concise design can enhance the quality of the page. Simplicity includes a simple interface, simple visual elements, simple interactions, and concise language.

[0080] Step 202: determining the spatial relationship of the basic elements of the design draft according to the basic elements of the design draft.

[0081] In one embodiment, a layout optimization algorithm can be used based on the basic elements of the design draft to dynamically reconstruct the layout and perform topology optimization on the basic elements of the design draft, optimize the spacing and alignment rules of the basic elements of the design draft, establish the spatial relationship of similar elements of the design draft, restore the position of the decorative elements, reconstruct the spatial relationship of the elements, and determine the spatial relationship of the basic elements of the design draft.

[0082] In one embodiment, the step of determining the spatial relationship between the basic elements of the design draft according to the basic elements of the design draft may include: Step 2021: parse the coordinate matrix of the element to generate an initial rasterized layout of the element.

[0083] In one embodiment, the coordinate matrix of the design draft page elements includes the position coordinates of the design draft page elements. The rasterization of the elements is to discretize the continuous coordinates of the elements into matrix indexes, with rows corresponding to the Y axis and columns corresponding to the X axis. The position of the element can be defined by a two-dimensional matrix in the form of [x, y, width, height]. x and y can represent the coordinates of the upper left corner of the element relative to the parent container, and width and height can represent the physical pixels or percentage units occupied by the element. The design draft is divided into cells of equal width and height, and the grid area occupied by the element is calculated through the coordinate matrix of the element to realize the mapping of the coordinate matrix to the grid, and generate the initial rasterized layout.

[0084] Step 2022: Use a dynamic response algorithm to optimize the spacing and alignment rules of the basic elements of the design draft.

[0085] In one embodiment, a dynamic response algorithm can be used to optimize and adjust the row and column spacing and alignment between elements to ensure that the row and column spacing between elements changes nonlinearly with screen size, avoiding crowding on small screens or excessive white space on large screens, and ensuring that the design draft page maintains good visual effects and user experience on different devices or screen sizes. The row and column spacing and alignment between elements can be optimized and adjusted by dynamically adjusting the position and / or size of elements to adapt to different screen sizes.

[0086] In one embodiment, the distance between adjacent elements can be calculated and a dynamic response algorithm can be used to automatically adjust the row and column spacing and alignment between adjacent elements to make them more uniform and reasonable. For example, the alignment of the elements can be checked to see if they meet a predefined alignment (e.g., left alignment, right alignment, center alignment, etc.); if the alignment of the elements does not meet the predefined alignment, the position and / or size of the elements can be automatically adjusted according to the requirements of the overall layout to ensure that they meet the predefined alignment.

[0087] Step 2023: Perform directional projection analysis on the similar element groups to establish spatial grouping dependency relationships of the similar elements.

[0088] In one embodiment, a similar element group may be a group of UI components or elements that are visually or functionally similar. The spatial grouping dependency of similar elements may include, but is not limited to, parent-child nesting relationships, hierarchical relationships, spacing, and alignment parent-child nesting relationships of elements.

[0089] In one embodiment, each group of similar elements can be horizontally projected to calculate the projection range and overlap of each element in the horizontal projection; each group of similar elements can be vertically projected to calculate the projection range and overlap of each element in the vertical projection; the projection ranges and overlaps of different elements in the horizontal and vertical projections can be compared to determine the relative positional relationships between different elements; based on the relative positional relationships between different elements, the spatial constraints that should be followed between adjacent or associated elements (for example, hierarchical relationships, minimum spacing requirements, alignment methods, etc.) can be determined; and based on the spatial constraints that should be followed between adjacent or associated elements, spatial grouping dependencies of similar elements can be established.

[0090] Step 2024: Use a noise backtracking algorithm to restore the decorative elements of the design draft.

[0091] In one embodiment, the decorative elements of a design draft may be UI components or design details that are used to enhance visual effects but do not directly carry functional information, such as background patterns, dividing lines, shadows, decorative icons or lines, etc.

[0092] In one embodiment, while using a frequency-domain filtering algorithm to suppress high-frequency noise in a design, performing cluster analysis on elements in the design, marking elements with confidence scores less than a noise element weight threshold as noise elements, and separating the noise elements in the design, some decorative elements in the design may be mistakenly identified as noise elements. A noise backtracking algorithm can be used to restore accidentally deleted decorative elements in the design.

[0093] In one embodiment, a contextual decor analysis algorithm may be used to analyze the contextual environment of the decorative element, compare the usage of the decorative elements in historical design drafts, understand the design specifications of the design drafts and the relative positional relationship between the elements, and determine whether the noise element is a decorative element. If the noise element is a decorative element, a noise backtracking algorithm is used to reposition the element position of the decorative element according to the design draft, and correct the element position of the decorative element to restore the decorative element to the decorative element in the design draft.

[0094] Step 203 : generating an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and association with a layout optimization algorithm based on the basic elements of the design draft and the spatial relationships between the basic elements.

[0095] In one embodiment, metadata of the basic elements of the design draft can be encapsulated into a structured JSON object based on the spatial relationship of the basic elements of the design draft, and a set of standardized element objects of the design draft that conforms to the DSL specification is obtained. Based on the set of standardized element objects of the design draft that conforms to the DSL specification, an initial DSL intermediate representation layer of the design draft that includes hierarchical constraints, response rules, and is associated with a layout optimization algorithm is generated.

[0096] In one embodiment, a structured JSON object includes, but is not limited to, fields such as type (element type), options (configuration options), and children (nested structure). Type represents the type identifier of a data structure (e.g., element type). Options provides configurable option parameters, which can be in the form of key-value pairs or arrays. Children defines nested child elements, supporting recursive structures (e.g., tree menus and nested UI components).

[0097] In one embodiment, the data structure of the initial DSL intermediate representation layer adopts a tree structure, which represents the page layout of the design draft and represents and organizes the hierarchical relationships and nested structures between page elements. Node types in the initial DSL intermediate representation layer include, but are not limited to, Dcontainer (layout container), Dform (form container), DformItem (form item), Dinput (input control), and Ddialog (pop-up window component).

[0098] In one embodiment, hierarchical constraints may include defining parent-child relationships through nested children fields. Response rules may include supporting the use of options fields to define automatic loading rules. Association with a layout optimization algorithm includes dynamically adjusting elements of the DSL intermediate presentation layer using the layout optimization algorithm. The layout optimization algorithm can also be used to reversely optimize elements of the DSL intermediate presentation layer, including but not limited to adjusting element position, style, spacing, and alignment.

[0099] Step 204: Adjust the initial DSL intermediate representation layer of the design draft, and obtain the DSL intermediate representation layer of the design draft including the hierarchical constraints, response rules, and the layout optimization algorithm.

[0100] In one embodiment, a preview page of the design draft can be displayed on an interactive visualization interface based on the initial DSL intermediate representation layer of the design draft, so that elements of the preview page can be adjusted through the interactive visualization interface, and adjustment parameters for adjusting the elements of the preview page can be obtained. Based on the adjustment parameters, a layout optimization algorithm is used to adjust the initial DSL intermediate representation layer to obtain the DSL intermediate representation layer of the design draft that includes hierarchical constraints, response rules, and is associated with the layout optimization algorithm.

[0101] In one embodiment, a D2C-based page DSL parsing engine can be used to identify and reuse design components and front-end UI components of the front-end component library based on the DSL intermediate representation layer of the design draft, implement CSS-in-JS (CSS style embedded in JavaScript code) style isolation, parse the DSL intermediate representation layer of the design draft, automatically map design system variables to code constants, and use Composition API encapsulation to convert the design draft into front-end code with React engineering configuration and CSS-in-JS (CSS style embedded in JavaScript code) style isolation.

[0102] In one embodiment, the front-end code converted from the initial DSL intermediate representation layer of the design draft can be previewed on a page through an interactive visual verification platform; the front-end code converted from the initial DSL intermediate representation layer of the design draft can be previewed on a page in the interactive visual interface of the interactive visual verification platform, displaying a preview page of the design draft, and displaying the basic element extraction effect of the design draft through the preview page. The preview page of the design draft and the design draft can be displayed simultaneously in a left-right layout on the interactive visual interface, and the preview page and the design draft can be compared to determine whether the preview page meets the design requirements of the design draft; when the elements of the preview page do not meet the design requirements of the design draft, the preview page elements that do not meet the design requirements of the design draft can be adjusted through the interactive visual interface, and adjustment parameters for adjusting the preview page elements can be obtained to make the displayed preview page meet the design requirements of the design draft. Adjustments to the preview page elements include but are not limited to adjustments to the position, style, spacing, and alignment of the elements.

[0103] In one embodiment, an interactive visual verification platform can dynamically map CSS style overrides to the design system, supporting real-time visual configuration and preview of layout breakpoint rules, as well as dynamic calibration of noise element weight thresholds. This visual configuration and preview of layout breakpoint rules are achieved through a page designer based on the design draft preview page, including dynamic style monitoring and updates, and virtual DOM + hot reload capabilities. The page designer previews and parses the front-end code converted from the initial DSL intermediate representation layer of the design draft, generating CSS and HTML. The preview page generated based on the front-end code converted from the initial DSL intermediate representation layer of the design draft is dynamically mapped and displayed, comparing the preview page with the design draft using a left-right interactive visual interface. If the user feels that the preview page does not conform to the design draft, that is, the conversion from the initial DSL intermediate representation layer to the front-end code does not meet expectations, they can adjust the preview page elements by dragging and dropping them. Adjustments to the preview page elements include, but are not limited to, adjustments to the position, style, spacing, and alignment of the preview page elements. Adjustment parameters are obtained based on the adjustments to the preview page elements. Based on the adjustment parameters, the layout optimization algorithm is used to reversely adjust the elements of the initial DSL intermediate representation layer, including but not limited to reversely adjusting the absolute positioning, relative positioning, and hierarchical relationships of the elements of the initial DSL intermediate representation layer in the design draft, and obtaining the DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and association with the layout optimization algorithm.

[0104] Step 205: According to the DSL intermediate representation layer of the design draft, at least one front-end code corresponding to the design draft is obtained.

[0105] In one embodiment, a D2C-based page DSL parsing engine can be used to parse the DSL intermediate representation layer of the design draft according to the DSL intermediate representation layer of the design draft, and convert the design draft into different front-end codes corresponding to the design draft and adapted to different front-end frameworks, so that users can select the front-end framework according to their needs. The front-end code corresponding to the front-end framework can be exported and downloaded through the export and download functions of the page DSL parsing engine.

[0106] In one embodiment, the different front-end codes may include, but are not limited to, Vue2 (the second major version of the Vue.js framework) code, Vue3 (the third major version of the Vue.js framework) code, and HTML (Hypertext Template Language) / CSS code. Vue is a JavaScript framework for building user interfaces.

[0107] In one embodiment, design system variables refer to a series of reusable design properties defined within the design system, including visual style elements such as color, font size, spacing, and margins. Code constants, on the other hand, are fixed values ​​or immutable identifiers defined in front-end code, used to store data that doesn't change frequently. By automatically mapping design system variables to code constants, consistency can be ensured across design and development drafts.

[0108] In one embodiment, a full lifecycle management system for design assets can be established on the design draft-to-code platform, achieving a closed-loop data management system. The design draft's noise and basic elements are returned to the design draft management platform and stored so that the model training platform can load the noise and basic elements returned to the design draft management platform. Incremental learning is used to update the parameters of the pre-trained CNN object detection model, ensuring continuous optimization of the pre-trained CNN object detection model. Transcoding quality assessment metrics are collected and user behavior feedback is analyzed to achieve continuous self-iterative optimization of the pre-trained CNN object detection model, ensuring the accuracy of obtaining the design draft's basic elements and the dynamic improvement of the design draft-to-code quality. This feedback mechanism continuously optimizes the performance of the pre-trained CNN object detection model and improves the accuracy of the pre-trained CNN object detection model in recognizing design draft elements.

[0109] In one embodiment, the design asset lifecycle management system of the design draft to code platform can be used to implement closed-loop management of the entire process from design draft, component library, model training to user feedback, realize versioned storage and retrieval of existing design modules / component libraries, realize data tracking mechanism design and quality assessment indicator collection; realize user behavior log collection, log processing and analysis, and visual analysis dashboard development.

[0110] The design draft code conversion method of the embodiment of the present application extracts the layers and elements of the design draft through a pre-trained target detection model to obtain the element category, element bounding box coordinates, and element confidence of the design draft elements; based on the element category, element bounding box coordinates, and element confidence of the design draft elements, a visual detection algorithm is used to perform superpixel segmentation on the element area, cluster analysis on the elements of the design draft based on a cyclic node similarity matching algorithm, suppress high-frequency noise of the design draft based on a frequency domain filtering algorithm, and cluster analysis on the elements of the design draft based on a density-based clustering algorithm. Elements with element confidence less than a noise element weight threshold are marked as noise elements, the noise elements of the design draft are separated, and the basic elements of the design draft are obtained; a pre-trained target detection model and a visual detection algorithm are used to work together to obtain the basic elements of the design draft and achieve accurate identification of the basic elements of the design draft, which can significantly improve the parsing accuracy of complex design drafts, accurately obtain the DSL intermediate representation layer of the design draft, optimize the conversion process from the design draft to the front-end code, reduce dependence on manual intervention, and quickly and efficiently convert the design draft into the front-end code, thereby improving the conversion efficiency and accuracy of the design draft to the front-end code.

[0111] Furthermore, the design draft code conversion method of the embodiment of the present application parses the coordinate matrix of the basic elements of the design draft to generate an initial grid layout of the elements; uses a dynamic response algorithm to optimize the spacing and alignment rules of the basic elements of the design draft; performs directional projection analysis on similar element groups to establish spatial grouping dependencies of similar elements; uses a noise backtracking algorithm to restore the decorative elements of the design draft; combines directional projection grouping optimization with the noise backtracking mechanism to perform dynamic rasterization analysis on the spatial relationship of the elements to generate a DSL intermediate representation layer of the design draft that includes hierarchical constraints, response rules, and is associated with a layout optimization algorithm, breaking through the layout restoration bottleneck from the design draft to the front-end code, and associating the layout optimization algorithm with the DSL intermediate representation layer. This can realize the automatic conversion from the design draft elements to the highly maintainable DSL intermediate representation layer, optimize the conversion process from the design draft to the front-end code, reduce dependence on manual intervention, and quickly and efficiently convert the design draft into the front-end code, thereby improving the conversion efficiency and accuracy of the design draft to the front-end code.

[0112] Furthermore, in the design draft code conversion method of the embodiment of the present application, the DSL intermediate representation layer of the design draft includes hierarchical constraints, response rules, and a layout optimization algorithm. The DSL intermediate representation layer of the design draft uses a tree structure to represent the page layout of the basic elements of the design draft; the hierarchical constraints include defining parent-child relationships through nested children fields; the response rules include supporting automatic loading rules defined in the options field; association with the layout optimization algorithm includes dynamically adjusting elements of the DSL intermediate representation layer using the layout optimization algorithm; and according to the DSL intermediate representation layer of the design draft, obtaining at least one front-end code corresponding to the design draft. By standardizing the data structure of the DSL intermediate representation layer, decoupling the design draft parsing and front-end code conversion links, supporting code conversion of multiple frameworks such as Vue / React / HTML, and significantly reducing cross-platform adaptation costs.

[0113] Furthermore, the design draft conversion method of the embodiment of the present application displays a preview page of the design draft on an interactive visual interface based on the initial DSL intermediate representation layer of the design draft, so that elements of the preview page can be adjusted through the interactive visual interface, and adjustment parameters for adjusting the elements of the preview page can be obtained; based on the adjustment parameters, the initial DSL intermediate representation layer is adjusted using a layout optimization algorithm to obtain the DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated with the layout optimization algorithm; based on an interactive visual verification platform that provides real-time layout breakpoint configuration, CSS style coverage, and dynamic calibration of noise weights, a visual comparison and interactive adjustment of the effect of converting the design draft to the front-end code is achieved through the interactive visual interface of the interactive visual verification platform, forming a collaborative optimization link between manual intervention and intelligent generation, which can realize the automated conversion from design draft elements to a highly maintainable DSL intermediate representation layer, optimize the conversion process from design draft to front-end code, reduce the R&D time of converting design draft to front-end code, significantly improve the efficiency of front-end code R&D, enhance the restoration accuracy of the design draft, reduce reliance on manual intervention, and quickly and efficiently convert the design draft to front-end code, thereby improving the efficiency and accuracy of the conversion from design draft to front-end code.

[0114] Corresponding to the aforementioned application function implementation method embodiment, the present application also provides a design draft coding device, electronic device and corresponding embodiments.

[0115] Figure 4 It is a structural diagram of the design draft code conversion device shown in an embodiment of the present application.

[0116] See also Figure 4 A design draft code conversion device includes an element acquisition module 401, a generation module 402, an adjustment module 403, and a conversion module 404.

[0117] The element acquisition module 401 is used to acquire the basic elements of the design draft.

[0118] In one embodiment, the element acquisition module 401 can input the design draft into the target detection model, identify the elements of the design draft through the target detection model, and obtain the elements of the design draft output by the target detection model; use the visual detection algorithm to perform fine segmentation on the elements of the design draft output by the target detection model, separate the noise elements in the design draft elements, remove the noise elements in the design draft elements, and obtain the basic elements of the design draft.

[0119] The generation module 402 is used to generate an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms based on the basic elements obtained by the element acquisition module 401.

[0120] In one embodiment, the generation module 402 can encapsulate the metadata of the basic elements of the design draft into a structured JSON object based on the basic elements of the design draft, obtain a set of standardized element objects of the design draft that conforms to the DSL (Domain Specific Language) specification, and generate an initial DSL intermediate representation layer of the design draft that includes hierarchical constraints, response rules, and is associated with a layout optimization algorithm based on the set of standardized element objects of the design draft that conforms to the DSL specification.

[0121] Adjustment module 403 is configured to display a preview page of the design draft on an interactive visualization interface based on the initial DSL intermediate representation layer generated by generation module 402, allowing the user to adjust elements of the preview page through the interactive visualization interface, and obtain adjustment parameters for adjusting the elements of the preview page; and to adjust the initial DSL intermediate representation layer using a layout optimization algorithm based on the adjustment parameters, thereby obtaining a DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and association with the layout optimization algorithm.

[0122] In one embodiment, the design draft can be converted into front-end code based on the initial DSL intermediate representation layer of the design draft. The adjustment module 403 can display the front-end code on an interactive visual interface, displaying a preview page of the design draft; the preview page of the design draft and the design draft can be displayed simultaneously on the interactive visual interface in a left-right layout, and the preview page and the design draft can be compared to determine whether the preview page meets the design requirements of the design draft; when elements of the preview page do not meet the design requirements of the design draft, the elements that do not meet the design requirements of the design draft are adjusted, and adjustment parameters for adjusting the elements of the preview page are obtained to make the displayed preview page meet the design requirements of the design draft. The adjustment of the elements includes but is not limited to adjustment of the position, style, spacing, and alignment of the elements.

[0123] In one embodiment, the adjustment module 403 may employ a layout optimization algorithm associated with the initial DSL intermediate representation layer, based on adjustment parameters for adjusting elements of the preview page, to reversely optimize the page of the design draft, reversely optimize metadata of basic elements of the design draft, optimize the grouping and classification of the elements, adjust the hierarchical constraints and response rules of the initial DSL intermediate representation layer, and obtain the DSL intermediate representation layer of the design draft that includes the hierarchical constraints, response rules, and is associated with the layout optimization algorithm.

[0124] The conversion module 404 is configured to obtain at least one front-end code corresponding to the design draft according to the DSL intermediate representation layer obtained by the adjustment module 403 .

[0125] In one embodiment, the conversion module 404 may convert the design draft into different front-end codes corresponding to the design draft and adapted to different front-end frameworks according to the DSL intermediate representation layer of the design draft.

[0126] The technical solution of the embodiment of the present application generates an initial DSL intermediate representation layer of the design draft containing hierarchical constraints, response rules, and associated with a layout optimization algorithm based on the basic elements of the design draft; displays a preview page of the design draft on an interactive visualization interface based on the initial DSL intermediate representation layer of the design draft, so as to adjust the elements of the preview page through the interactive visualization interface, and obtain adjustment parameters for adjusting the elements of the preview page; adjusts the initial DSL intermediate representation layer using the layout optimization algorithm based on the adjustment parameters, obtains the DSL intermediate representation layer of the design draft containing hierarchical constraints, response rules, and associated with the layout optimization algorithm; obtains at least one front-end code corresponding to the design draft based on the DSL intermediate representation layer of the design draft; can realize the automatic conversion from the design draft elements to the highly maintainable DSL intermediate representation layer, convert the design draft into at least one front-end code corresponding to the design draft based on the DSL intermediate representation layer of the design draft, and can output front-end code that is compatible with multiple front-end frameworks. The design draft code conversion method of the embodiment of the present application can optimize the conversion process from the design draft to the front-end code, reduce the dependence on manual intervention, can quickly and efficiently convert the design draft into the front-end code, and improve the conversion efficiency and accuracy of the design draft into the front-end code.

[0127] Regarding the apparatus in the above embodiment, the specific manner in which each module performs operations has been described in detail in the embodiment of the method, and will not be elaborated again here.

[0128] Figure 5 It is a structural diagram of an electronic device shown in an embodiment of the present application.

[0129] See also Figure 5 , the electronic device 1000 includes a memory 1010 and a processor 1020.

[0130] The processor 1020 may be a central processing unit (CPU), or other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. A general-purpose processor may be a microprocessor or any conventional processor. Memory 1010 may include various types of storage units, such as system memory, read-only memory (ROM), and permanent storage. ROM may store static data or instructions required by processor 1020 or other computer modules. Permanent storage may be a readable and writable storage device. Permanent storage may be a non-volatile storage device that retains stored instructions and data even when the computer is powered off. In some embodiments, the permanent storage device utilizes a mass storage device (e.g., a magnetic or optical disk, flash memory). In other embodiments, the permanent storage device may be a removable storage device (e.g., a floppy disk, optical drive). System memory may be a readable and writable storage device or a volatile readable and writable storage device, such as dynamic random access memory (DRAM). System memory may store some or all instructions and data required by the processor during operation. Furthermore, memory 1010 may include any combination of computer-readable storage media, including various types of semiconductor memory chips (e.g., DRAM, SRAM, SDRAM, flash memory, programmable read-only memory), as well as magnetic disks and / or optical disks. In some embodiments, the memory 1010 may include a readable and / or writable removable storage device, such as a compact disc (CD), a read-only digital versatile disc (e.g., DVD-ROM, double-layer DVD-ROM), a read-only Blu-ray disc, an ultra-density optical disc, a flash memory card (e.g., SD card, mini SD card, Micro-SD card, etc.), a magnetic floppy disk, etc. Computer-readable storage media do not include carrier waves and transient electronic signals transmitted wirelessly or wired.

[0131] The memory 1010 stores executable codes. When the executable codes are processed by the processor 1020 , the processor 1020 may execute part or all of the above-mentioned methods.

[0132] In addition, the method according to the present application may also be implemented as a computer program or a computer program product, which includes computer program code instructions for executing some or all of the steps in the above method of the present application.

[0133] Alternatively, the present application can also be implemented as a computer-readable storage medium (or non-transitory machine-readable storage medium or machine-readable storage medium), which stores executable code (or computer program or computer instruction code) and, when executed by a processor of an electronic device (or server, etc.), enables the processor to perform part or all of the steps of the above-mentioned method according to the present application.

[0134] The present application also provides a computer program product, which includes computer instructions, and when the computer instructions are executed by a processor, the method described above is implemented.

[0135] The embodiments of the present application have been described above. The above description is exemplary, not exhaustive, and is not limited to the disclosed embodiments. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described embodiments. The terminology used herein is selected to best explain the principles of the embodiments, their practical applications, or improvements to the technology in the market, or to enable other persons skilled in the art to understand the embodiments disclosed herein.

Claims

1. A method for converting a design draft into code, characterized in that: include: Get the basic elements of the design draft; Based on the basic elements, an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms is generated; Displaying a preview page of the design draft on an interactive visual interface according to the initial DSL intermediate presentation layer, so as to adjust elements of the preview page through the interactive visual interface, and obtaining adjustment parameters for adjusting the elements of the preview page; According to the adjustment parameters, the initial DSL intermediate representation layer is adjusted using the layout optimization algorithm to obtain the DSL intermediate representation layer of the design draft including the hierarchical constraints, the response rules, and the association with the layout optimization algorithm; At least one front-end code corresponding to the design draft is obtained according to the DSL intermediate representation layer.

2. The method according to claim 1, characterized in that The basic elements for obtaining the design draft include: Using a pre-trained object detection model, obtain the elements of the design draft, as well as the element category, element bounding box coordinates, and element confidence of the elements; A visual detection algorithm is used to separate noise elements of the design draft according to the element category, element bounding box coordinates, and element confidence of the elements, so as to obtain basic elements of the design draft.

3. The method according to claim 2, characterized in that The visual detection algorithm is used to separate the noise elements of the design draft according to the element category, element bounding box coordinates, and element confidence of the element, and obtain the basic elements of the design draft, including: Performing cluster analysis on the elements of the design draft using a cyclic node similarity matching algorithm to obtain repeated elements of the design draft, and / or using a frequency domain filtering algorithm to suppress high-frequency noise in the design draft; Using a density-based clustering algorithm, cluster analysis is performed on the elements of the design draft, and the elements whose element confidence is less than the noise element weight threshold are marked as noise elements; The noise elements are separated from the elements of the design draft to obtain the basic elements of the design draft.

4. The method according to claim 2, characterized in that Generating the initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms based on the basic elements includes: Determining the spatial relationship of the basic elements according to the basic elements; An initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and association with a layout optimization algorithm is generated according to the basic elements and the spatial relationships between the basic elements.

5. The method according to claim 4, characterized in that The determining, based on the basic elements, the spatial relationship of the basic elements includes: Adopting a dynamic response algorithm to optimize the spacing and alignment rules of the basic elements; and / or, Performing directional projection analysis on similar elements of the design draft to establish spatial grouping dependency relationships of the similar elements; and / or, A noise backtracking algorithm is used to restore the decorative elements of the design draft.

6. The method according to any one of claims 1 to 5, characterized in that: The DSL intermediate representation layer uses a tree structure to represent the page layout of the basic elements of the design draft; and / or, The hierarchical constraint includes nested definition of parent-child relationship through children field; and / or, The response rules include supporting options field definition automatic loading rules; and / or, The associating with the layout optimization algorithm includes dynamically adjusting elements of the DSL intermediate presentation layer using the layout optimization algorithm.

7. The method according to claim 2, wherein: The pre-trained target detection model includes a pre-trained YOLO+ResNet-50 fused CNN target detection model; wherein, The loss function of the pre-trained YOLO+ResNet-50 fused CNN target detection model includes: the loss function of YOLO, the Euclidean distance loss function of the elements of the design draft, and the classification cross entropy loss function of the elements of the design draft.

8. A design draft code conversion device, characterized in that: include: Element acquisition module, used to obtain the basic elements of the design draft; A generation module, configured to generate an initial DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated layout optimization algorithms based on the basic elements acquired by the element acquisition module; an adjustment module configured to display a preview page of the design draft on an interactive visual interface based on the initial DSL intermediate representation layer generated by the generation module, allowing a user to adjust elements of the preview page through the interactive visual interface, and to obtain adjustment parameters for adjusting the elements of the preview page; and to adjust the initial DSL intermediate representation layer using the layout optimization algorithm based on the adjustment parameters to obtain a DSL intermediate representation layer of the design draft including hierarchical constraints, response rules, and associated with the layout optimization algorithm. The conversion module is configured to obtain at least one front-end code corresponding to the design draft according to the DSL intermediate representation layer obtained by the adjustment module.

9. An electronic device, characterized in that: include: processor; as well as A memory having executable codes stored thereon, which, when executed by the processor, causes the processor to execute the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that An executable code is stored thereon, and when the executable code is executed by a processor of an electronic device, the processor is caused to execute the method according to any one of claims 1 to 7.

Images