Code generation method and device and computing device cluster

Abstract

The invention provides a code generation method and device and a computing device cluster. In the embodiment, the method comprises the steps that a design draft of a page is obtained, the design draft is used for indicating M layers forming the page and the layout of the M layers, and the layers are basic units for drawing the page; based on the design manuscript, first objects and second objects which are similar in the design manuscript are determined, the first objects are a plurality of first graph layers in the M graph layers, the second objects are a plurality of second graph layers in the M graph layers, and the first objects and the second objects belong to the same object type; and performing code reuse on the first object and the second object to obtain a first page code of the first object and a second page code of the second object. According to the scheme, the similar objects can be automatically recognized, code reuse is carried out on the similar objects, and the code generation efficiency is improved.

Description

TECHNICAL FIELD

[0001] The present application relates to the technical field of page, in particular to a code generation method and device and a computing device cluster. BACKGROUND

[0002] In the modern software development process, user interface (UI) and user experience (UE) design is a crucial link. Usually, UED designers will use professional design software to create detailed page design drafts. These design drafts accurately define the visual appearance, layout structure, component elements and interaction logic of the application.

[0003] Subsequently, front-end development engineers need to "translate" these static design drafts into actual executable web page or application code (such as HTML, CSS, JavaScript, or mobile application interface code).

[0004] Currently, developers need to view each element (such as icons, buttons, cards, list items, etc.) in the design draft one by one, manually measure its size, spacing, color, font, etc. style information, and then handwrite code for implementation.

[0005] However, the above method reduces the code generation efficiency. SUMMARY

[0006] The embodiments of the present application provide a code generation method, device and computing device cluster, which can automatically identify similar objects and reuse the code of similar objects, thereby improving the code generation efficiency.

[0007] In a first aspect, the embodiments of the present application provide a code generation method, which comprises:

[0008] obtaining a design draft of a page, the design draft being used to indicate M layers constituting the page and the layout of the M layers, M being a positive integer greater than or equal to 2, and a layer being a basic unit for drawing the page; based on the design draft, determining a similar first object and a second object in the M layers, the first object being at least one first layer in the M layers, the second object being at least one second layer in the M layers, and the first object and the second object belonging to the same object type; and reusing the code of the first object and the second object to obtain first page code of the first object and second page code of the second object.

[0009] In this solution, similar objects can be automatically identified and reused, thereby improving the code generation efficiency.

[0010] In some possible implementation manners, the similar first object and the second object can be components, and the first object and the second object directly refer to the same defined component; or the first object and the second object have the same functional features, such as carousel and tab.

[0011] In some possible implementations, similar first and second objects use the same code parameters. The code parameters are the parameters used in the code that constructs the first and second objects. The code parameters can be properties of the first and second objects. The first and second objects have the same code parameters, but the values ​​of the code parameters can be different.

[0012] In one possible implementation, an object type corresponds to N features, and the N features are different for different object types, where N is a positive integer greater than or equal to 1. Based on the design draft, the similar first object and second object in M ​​layers are determined, including: based on the design draft, determining the first feature data of the first object and the second feature data of the second object, where the first feature data includes the feature values ​​of N features for the first object, and the second feature data includes the feature values ​​of N features for the second object; and based on the first feature data and the second feature data, determining whether the first object and the second object are similar.

[0013] In this solution, different features are set for different object types, which can more accurately identify similar objects.

[0014] In one example of this implementation, when the object type is a component, the N characteristics include source characteristics and / or functional characteristics. Source characteristics are used to indicate a defined component that the component directly references, and functional characteristics are used to indicate the functional features of the component.

[0015] In one example of this implementation, when the object type is a layer group, the layer group is a collection of multiple layers out of M layers, and the N features include relational features, which are used to indicate the relationship between the multiple layers in the layer group.

[0016] In one example of this implementation, determining whether a first object and a second object are similar, based on first feature data and second feature data, includes:

[0017] When N is greater than or equal to 2, obtain the weight of each of the N features based on the object type; based on the weight of each of the N features, the first feature data and the second feature data, determine whether the first object and the second object are similar.

[0018] In this scheme, by setting different weights for different features, the similarity between objects can be calculated more accurately.

[0019] For example, the N features include functional features, and the values ​​for functional features are the same in the first feature data and the second feature data; based on the object type, the weight of each of the N features is obtained, including: obtaining the weight of each of the N features according to the object type and the value of the functional feature.

[0020] In this scheme, different weights are set for different features based on object type and functional characteristics, which allows for a more accurate calculation of the similarity between objects.

[0021] In one example of this implementation, N features include layer size, the first feature data includes a first value of the layer size of the first object, and the second feature data includes a second value of the layer size of the second object;

[0022] Based on the first feature data and the second feature data, determine whether the first object and the second object are similar, including: if the difference between the first value and the second value is less than or equal to a preset threshold, then determine that the first object and the second object are similar in terms of layer size.

[0023] This solution allows for numerical differences within a threshold range, improving the robustness and recall of similarity recognition. It ensures that the algorithm will not judge components that should be similar as different due to a 1-pixel deviation or minor non-standard operations by the designer, making it closer to the judgment logic of human developers and ensuring the usability of the technology on real and complex design drafts.

[0024] In one example of this implementation, before determining the first feature data of the first object and the second feature data of the second object, the method further includes: determining the number of first layers of the first object; determining the number of second layers of the second object; if the number of first layers and the number of second layers are different, determining the inconsistent layers in the first object and the second object; determining the inconsistent layers as ignorable layers, and deleting the ignorable layers in the first object and the second object.

[0025] In this approach, invalid layers in the object are analyzed and deleted, thereby reducing the impact of invalid information on similarity judgment.

[0026] In one possible implementation, code reuse is performed on the first object and the second object to obtain the first page code of the first object and the second page code of the second object, including: determining that the object type is a type other than a component; determining the first page code of the first object; reusing the first page code to determine the second page code of the second object.

[0027] In one possible implementation, code reuse is performed on the first object and the second object based on the object type to obtain the first page code of the first object and the second page code of the second object, including:

[0028] Determine whether the object type is a component or a layer group; determine the shared component code corresponding to the first object and the second object; based on the shared component code, determine the first page code of the first object and the second page code of the second object.

[0029] In one possible implementation, the method further includes: constructing a tree structure with each of the M layers as a node; and determining a first object and a second object from multiple nodes connected to the same node in the tree structure.

[0030] Secondly, embodiments of this application provide a code generation apparatus comprising several modules, each module being used to execute various steps in the code generation method provided in the first aspect of embodiments of this application. The division of modules is not limited here. For the specific functions performed by each module of this code generation apparatus and the beneficial effects achieved, please refer to the functions of each step in the code generation method provided in the first aspect of embodiments of this application; further details will not be repeated here.

[0031] For example, the code generation device includes:

[0032] The acquisition module is used to acquire the design draft of the page. The design draft indicates the M layers that make up the page and the layout of the M layers. The layer is the basic unit for drawing the page.

[0033] The similarity analysis module is used to identify the first and second similar objects among M layers based on the design draft. The first object is at least one of the first layers among the M layers, and the second object is at least one of the second layers among the M layers. The first object and the second object belong to the same object type.

[0034] The code generation module is used to reuse code between the first object and the second object, resulting in the first page code of the first object and the second page code of the second object.

[0035] In some possible implementations, the first and second objects can be components, the first and second objects can directly reference the same defined components, or the first and second objects can have the same functional characteristics, such as carousels or tabs.

[0036] In some possible implementations, the first and second objects use the same code parameters. The code parameters are the parameters used in the code that constructs the first and second objects. The code parameters can be properties of the first and second objects. The first and second objects have the same code parameters, but the values ​​of the code parameters can be different.

[0037] In one possible implementation, an object type corresponds to N features, and the N features are different for different object types, where N is a positive integer greater than or equal to 1. The similarity analysis module is used to determine the first feature data of the first object and the second feature data of the second object based on the design draft. The first feature data includes the feature values ​​of the N features for the first object, and the second feature data includes the feature values ​​of the N features for the second object. Based on the first feature data and the second feature data, it is determined whether the first object and the second object are similar.

[0038] In one example of this implementation, when the object type is a component, the N characteristics include source characteristics and / or functional characteristics. Source characteristics are used to indicate a defined component that the component directly references, and functional characteristics are used to indicate the functional features of the component.

[0039] In one example of this implementation, when the object type is a layer group, the layer group is a collection of multiple layers out of M layers, and the N features include relational features, which are used to indicate the relationship between the multiple layers in the layer group.

[0040] In one example of this implementation, the similarity analysis module is used to obtain the weight of each of the N features based on the object type when N is greater than or equal to 2; and to determine whether the first object and the second object are similar based on the weight of each of the N features, the first feature data and the second feature data.

[0041] For example, the N features include functional features, and the values ​​for functional features are the same in the first feature data and the second feature data; the similarity analysis module is used to obtain the weight of each feature among the N features based on the object type and the value of the functional feature.

[0042] In one example of this implementation, N features include layer size, the first feature data includes a first value of the layer size of the first object, and the second feature data includes a second value of the layer size of the second object;

[0043] The similarity analysis module is used to determine if the difference between the first value and the second value is less than or equal to a preset threshold, and if so, to determine if the first object and the second object are similar in terms of layer size.

[0044] In one example of this implementation, the similarity analysis module is used to determine the number of first layers of the first object; determine the number of second layers of the second object; if the number of first layers and the number of second layers are different, determine the inconsistent layers in the first object and the second object; determine the inconsistent layers as ignorable layers and delete the ignorable layers in the first object and the second object; and determine the first feature data of the first object and the second feature data of the second object based on the design draft.

[0045] In one possible implementation, a code generation module is used to determine that the object type is a type other than a component; determine the first page code of the first object; reuse the first page code to determine the second page code of the second object.

[0046] In one possible implementation, a code generation module is used to determine whether the object type is a component or a layer group; determine the shared component code corresponding to the first object and the second object; and, based on the shared component code, determine the first page code of the first object and the second page code of the second object.

[0047] In one possible implementation, the similarity analysis module is also used to construct a tree structure with each of the M layers as nodes; and to determine the first object and the second object from multiple nodes connected to the same node in the tree structure.

[0048] Thirdly, embodiments of this application provide a code generation apparatus, including: at least one memory for storing a program; and at least one processor for executing the program stored in the memory. When the program stored in the memory is executed, the processor is used to execute the method provided in the first aspect.

[0049] Fourthly, embodiments of this application provide a code generation apparatus that executes computer program instructions to perform the method provided in the first aspect. Exemplarily, this apparatus may be a chip or a processor.

[0050] In one example, the device may include a processor that may be coupled to memory, read instructions from the memory and execute the methods provided in the second aspect, or execute the methods provided in the first aspect, according to those instructions. The memory may be integrated into the chip or processor, or it may be independent of the chip or processor.

[0051] Fifthly, embodiments of this application provide a computing device cluster, the computing device cluster including at least one computing device, each computing device including a processor and a memory; the processor of the at least one computing device is used to execute instructions stored in the memory of the at least one computing device to cause the computing device cluster to perform the method provided in the first aspect.

[0052] In a sixth aspect, embodiments of this application provide a computer storage medium storing instructions that, when executed on a computer, cause the computer to perform the method provided in the first aspect.

[0053] In a seventh aspect, embodiments of this application provide a computer program product containing instructions that, when executed on a computer, cause the computer to perform the method provided in the first aspect. Attached Figure Description

[0054] Figure 1 This is an architecture diagram of a code generation system provided in an embodiment of this application;

[0055] Figure 2 This is a framework diagram of another code generation system provided in the embodiments of this application;

[0056] Figure 3 This is a schematic diagram of a data processing framework provided in an embodiment of this application;

[0057] Figure 4 This is a schematic diagram of a tree structure provided in an embodiment of this application;

[0058] Figure 5 This is a schematic diagram of a floor card scenario provided in an embodiment of this application;

[0059] Figure 6 yes Figure 5 A schematic diagram of the tree structure in the scene;

[0060] Figure 7 This is a schematic diagram illustrating a scenario of search icons in different locations on a page, as provided in an embodiment of this application.

[0061] Figure 8 This is a flowchart illustrating a code generation method provided in an embodiment of this application;

[0062] Figure 9 This is a schematic diagram of another code generation device provided in an embodiment of this application;

[0063] Figure 10 This is a flowchart illustrating a code generation method provided in an embodiment of this application;

[0064] Figure 11 This is a schematic diagram of the structure of the computing device provided in the embodiments of this application;

[0065] Figure 12 This is a schematic diagram of the structure of a computing device cluster provided in an embodiment of this application;

[0066] Figure 13 This is a schematic diagram illustrating the network connection of computing devices in a computer cluster provided in an embodiment of this application. Detailed Implementation

[0067] To make the objectives, technical solutions, and advantages of the embodiments of this application clearer, the technical solutions in the embodiments of this application will be described below with reference to the accompanying drawings.

[0068] In the description of the embodiments of this application, the words "exemplary," "for example," or "for instance" are used to indicate examples, illustrations, or explanations. Any embodiment or design described as "exemplary," "for example," or "for instance" in the embodiments of this application should not be construed as being more preferred or advantageous than other embodiments or designs. Specifically, the use of the words "exemplary," "for example," or "for instance" is intended to present the relevant concepts in a specific manner.

[0069] In the description of the embodiments in this application, the term "and / or" is merely a description of the association relationship between related objects, indicating that three relationships can exist. For example, A and / or B can represent: A existing alone, B existing alone, and A and B existing simultaneously. Furthermore, unless otherwise stated, the term "multiple" means two or more. For example, multiple systems refer to two or more systems, and multiple terminals refer to two or more terminals.

[0070] Furthermore, the terms "first" and "second" are used for descriptive purposes only and should not be construed as indicating or implying relative importance or implicitly specifying the indicated technical features. Thus, a feature defined as "first" or "second" may explicitly or implicitly include one or more of that feature. The terms "comprising," "including," "having," and their variations all mean "including but not limited to," unless otherwise specifically emphasized.

[0071] The following explanations cover some of the terms used in this embodiment. It should be noted that these explanations are for the convenience of those skilled in the art and do not constitute a limitation on the scope of protection claimed in this application.

[0072] Artificial Intelligence (AI) is a branch of computer science that attempts to understand the nature of intelligence and produce a new kind of intelligent machine that can react in a way similar to human intelligence. Research in this field includes robotics, speech recognition, image recognition, natural language processing, and expert systems.

[0073] The Central Processing Unit (CPU) is the core of a computer system for computation and control, and is the final execution unit for information processing and program execution.

[0074] User experience (UE / UX) is a purely subjective feeling that users develop while using a product.

[0075] User Experience Design (UX Design) is a user-centric design approach that focuses on user needs. The design process emphasizes a user-centric approach, incorporating the concept of user experience from the earliest stages of development and maintaining it throughout the entire process.

[0076] Hypertext Markup Language (HTML) is a markup language used to build the structure of web pages. It categorizes web page elements (such as headings, paragraphs, and images) using predefined tags to form the page's skeleton. Its core function is to define the semantic structure of content.

[0077] Cascading Style Sheets (CSS): Used to set the visual style of a webpage, including fonts, colors, layout, etc., allowing precise control over the appearance of elements through selectors. It separates the page presentation layer from the structural layer, improving maintenance efficiency and cross-device adaptability.

[0078] JavaScript is a lightweight, interpreted, or just-in-time (JIT) compiled programming language.

[0079] Carousel: A display feature that automatically or manually switches between multiple images or content blocks, implemented using HTML, CSS, and JavaScript. It's commonly found on website homepages and banner ads. Its core principle is to periodically change the displayed content, using CSS to control styles and animation effects, and JavaScript to handle interactive logic.

[0080] Tabs: Frequently used in website development and mobile applications, tabs are used to display multiple different content or functional sections on the same interface. Users can switch between different content by clicking on different tabs.

[0081] List: Displays data in a list format, commonly used in product displays, user information, and other scenarios. It needs to be used in conjunction with pagination to handle large amounts of data loading, for example, displaying 10 data items per page and automatically paginating when the total number of data items exceeds 90.

[0082] Calendar: Used for time-related interactive design, such as scheduling and history. It needs to support features like date filtering and event tagging, and is commonly used in scenarios such as appointment booking and itinerary planning.

[0083] User Interface (UI): refers to the overall design of software's human-computer interaction, operating logic, and aesthetic appearance.

[0084] Icons are graphic symbols used in computer software for human-computer interaction. They represent specific functions or file types through visual symbols, such as the graphics on save and print buttons. These icons have a highly condensed information-transmitting function and are widely used in software interfaces, web pages, and mobile devices.

[0085] Design draft: A page design drawing created by a designer at the initial stage of requirements gathering. It describes the basic structure and layout of the page and forms the basis for developing web pages.

[0086] Domain-Specific Languages ​​(DSLs) are restricted expressive programming languages ​​designed for a specific domain. They have clear semantic models and explicit syntax rules and are mainly used to simplify the design of complex systems.

[0087] Design to Code (D2C) is a technology that automatically converts UI design drafts into front-end code. Specifically, it involves parsing the DSL annotation information of a design draft and converting it into the HTML and CSS code required for front-end development.

[0088] Component association: Establish a connection between reusable parts in the design draft and the development code library. During the D2C process, the associated content can be directly replaced.

[0089] Semantic optimization: AI is used to semantically optimize the generated code, making it more readable and compliant with development standards, thereby improving development efficiency.

[0090] Group: A container for holding objects. Layers are not permanently merged and can be ungrouped at any time. Its boundaries are determined by its child elements; the group boundaries will automatically adjust when the child elements are positioned or scaled.

[0091] Frame: A container used to hold objects. The frame size is independent of its child elements and must be manually adjusted or the "Resize to Fit" feature must be enabled. It supports advanced features such as position constraints, scroll overflow content, and grid layout, and is often used for prototyping.

[0092] Pixel (px): A pixel is a small square that makes up an image. Each square has a specific location and a color value assigned to it. The color and position of the squares determine how the image is presented.

[0093] In modern software development processes, user interface (UI) and user experience (UX) design are crucial components. Typically, UX designers use specialized design software to create detailed page design drafts. These drafts precisely define the application's visual appearance, layout structure, component elements, and interaction logic.

[0094] Then, front-end development engineers need to "translate" these static design drafts into actual working web page or application code (such as HTML, CSS, JavaScript, or mobile application interface code).

[0095] Traditional workflows heavily rely on manual operation. Developers need to examine every element in the design draft (such as icons, buttons, cards, list items, etc.), manually measure their size, spacing, color, font, and other style information, and then manually write code to implement them. This process is not only time-consuming and labor-intensive, but also highly error-prone. For example, for multiple elements in the design draft that look similar but were manually copied and arranged by the designer (such as multiple cards in a product list), developers need to manually identify their commonalities and abstract them into reusable components or generate them through loop logic to ensure code simplicity, maintainability, and performance.

[0096] This manual conversion method has the following significant drawbacks:

[0097] Inefficient: For complex pages containing a large number of repetitive elements, manual coding and component abstraction are extremely labor-intensive.

[0098] Poor consistency: Different developers may have different understandings and code implementations of the same design draft; even the same developer may have slight deviations in the code implementation of similar elements due to negligence, which will destroy visual consistency.

[0099] High communication costs: There is a "language" difference between designers and developers. The visual expressions in the design drafts need to be accurately translated into the logical structure in the code through communication, and any misunderstanding may lead to rework.

[0100] To improve development efficiency, some automated or semi-automated tools (D2C) have emerged.

[0101] In related technology 1, patent publication number CN117539446A discloses a method and system for improving the identification and generation capabilities of D2C tools. This patent proposes a system method based on D2C tool identification, describing the steps from design draft to code, including: receiving the design draft source file, parsing and cleaning the layer information of the design draft, performing component detection and code association on the preprocessed design draft, and finally converting the components into front-end code according to the specifications of the target platform or language.

[0102] In related technology 2, patent publication number CN105718441A discloses a method for judging the similarity of UI components based on text and document analysis. This patent proposes a method to find UI components with similar functions across different platforms by analyzing the "documents" of UI components. It first obtains the UI components of each platform and their corresponding official documents, then analyzes the documents using natural language processing (NLP) techniques (such as word segmentation, part-of-speech tagging, and synonym merging), extracts feature keywords, constructs feature vectors, and finally judges the functional similarity of UI components by calculating the similarity between the vectors.

[0103] The following problems exist with the two related technologies mentioned above:

[0104] Numerous redundant / similar layers: Layers in the design draft are analyzed one by one, and duplicate layers (such as cards with similar content) are only analyzed simply without further merging.

[0105] Low transcoding efficiency: For other layers with the same structure outside the component (such as 6 similar cards), the developer needs to manually merge or process them in a loop, which is inefficient.

[0106] Large models are costly: repeated layers increase the computational cost of semantic tokens, resulting in high costs and decreased accuracy.

[0107] Poor accuracy and robustness: It is very sensitive to small visual changes (such as a 1-pixel offset or subtle color differences), which will affect the final generated effect. The lack of information comparison between similar layers leads to a loss of fidelity.

[0108] Ignoring visual and structural features: Related technique 2 is entirely based on text description, completely ignoring the most important shape features (shape, color, layout) and structural features (parent-child relationships, constraints) of UI components. Therefore, it cannot identify components with similar functions but different appearances, and is not suitable for analyzing visual drafts in D2C scenarios.

[0109] Based on this, the embodiments of this application propose a code generation method.

[0110] This method uses in-depth analysis of design drafts to automatically select similar objects from the design drafts and reuse code for similar objects, thereby improving code generation efficiency.

[0111] In some embodiments, targeted features are designed for different object types to achieve accurate identification of similar layers in the design draft that have similar structures but different details.

[0112] In some embodiments, similar objects can be components, similar objects can directly reference the same defined components, or similar objects can have the same functional characteristics, such as carousels or tabs.

[0113] In some embodiments, similar objects use the same code parameters, but the values ​​of the code parameters for similar objects can be different. The code parameters are the parameters used by the code that constructs the object, and the code parameters can be the object's attributes.

[0114] In some embodiments, for the layer size attribute of an object, the layer size can be either width or height, and size differences within a threshold range can be allowed. In other words, size differences within the threshold range are ignored and considered similar, thereby improving the robustness and recall of similarity recognition. It will not judge components that should be similar as different due to a 1-pixel deviation or a designer's minor non-standard operation, which is closer to the judgment logic of human developers and ensures the usability of the technology on real and complex design drafts.

[0115] The following section describes the code generation system that may be applied to the code generation method provided in the embodiments of this application. Figure 1 This illustration shows an architectural example diagram of a code generation system provided in an embodiment of this application. The embodiment of this application provides a code generation method that can be applied to, for example... Figure 1 The system architecture diagram shown is as follows. Figure 1 As shown, the code generation system includes a client device 110 and a device cluster 120. The client device 110 and the device cluster 120 communicate via a network. The network can be a wired network or a wireless network. It is understood that the network can use any known network communication protocol to achieve communication between the client device 110 and the device cluster 120; the aforementioned network communication protocol can be various wired or wireless communication protocols.

[0116] The client device 110 can be, but is not limited to, various personal computers, laptops, smartphones, tablets, and portable wearable devices. Exemplary embodiments of the client device 110 involved in this solution include, but are not limited to, electronic devices running iOS, Android, Windows, Harmony OS, or other operating systems. This application does not specifically limit the type of electronic device.

[0117] The device cluster 120 can be implemented using independent electronic devices or a cluster of multiple electronic devices. In some possible implementations, the electronic devices in the device cluster 120 can be terminals, computers, or servers. In one example, the server involved in this solution can be used to provide cloud services; it can be a server or a super terminal that can establish communication connections with other devices and provide computing and / or storage functions for those devices. The server involved in this solution can be a hardware server or embedded in a virtualization environment; for example, the server involved in this solution can be a virtual machine running on a hardware server that includes one or more other virtual machines.

[0118] In some embodiments, the device cluster 120 can be configured as a management platform 121 and a data center 122. There can be multiple data centers 122, each comprising a server cluster consisting of multiple physical servers. The server cluster provides infrastructure, including various basic resources such as computing resources. The management platform 121 can manage the resources of the data center 122 to implement the code generation method provided in this application embodiment. In one possible scenario, the device cluster 120 can act as a cloud, in which case the management platform 121 can act as a cloud management platform, and the client device 110 interacts with the cloud through the management platform 121.

[0119] In some embodiments, Figure 2 This is a framework diagram of another code generation system provided in an embodiment of this application. For example... Figure 2 As shown, the management platform 121 and the data center 122 can be deployed in the cloud. Accordingly, the management platform 121 can be a cloud management platform.

[0120] In some embodiments, the client device 110 runs a client 111, and the management platform 121 includes a server 123. The client 111 is software that directly interacts with the user, such as a mobile application, used to initiate client requests and receive responses from the server 123. It can be developed using various programming languages ​​and technologies, such as Java, Python, and Node.js. In this embodiment, the user can upload design drafts to the server 123 through the client 111. The server 123 refers to the backend of the client 111, also known as the back-end, and is mainly responsible for processing client requests sent by the client 111, performing corresponding processing, and then returning the processing results to the client 111. The server 123 typically runs on a server and is developed using various programming languages ​​and technologies, such as Java, Python, and Node.js. The server 123 can handle large amounts of data and complex business logic, and provides various services and API interfaces for the client 111 to call. In this embodiment, the server 123 can process design drafts sent by the client.

[0121] Below, in conjunction with the code generation system provided above, we will introduce the design draft processing architecture of the server 123 provided in the embodiments of this application.

[0122] Figure 3 This is a schematic diagram of a data processing framework provided in an embodiment of this application.

[0123] like Figure 3 As shown, the design draft processing architecture includes five processes: design draft import, layer data optimization, similarity recognition, code conversion, and semantic markup.

[0124] For the design draft import process, client 111 accepts the design draft uploaded by the user and submits it to server 123. The design draft describes multiple layers and the layout between them. The design draft may include the attributes of multiple layers and the nesting relationships between them; attributes describe the layer details. A layer is the smallest unit for drawing the page in the design draft and can be text, shape, image, etc., and can be designed according to actual conditions. This embodiment does not impose specific limitations on this.

[0125] For the layer data optimization process, the server 123 preprocesses the layer data of the design draft to obtain the tree structure of the design draft. Each node in the tree structure is a layer. Based on the tree structure, n objects to be identified are determined, where n is a positive integer greater than or equal to 2.

[0126] Preprocessing may include cleaning and / or merging. In some embodiments, the server 123 may determine whether layers overlap in position and merge multiple overlapping layers to obtain a layer group. In some embodiments, the server 123 may delete a layer if it determines that the layer's opacity is 0.

[0127] If components are defined in the design draft, preprocessing can also include pre-configuring a component library. The component library can include the code for several components. It should be noted that the component library can also be uploaded by the user.

[0128] Preprocessing may include tree transformation. Tree transformation is used to convert multiple cleaned and / or merged layers into a tree structure. A tree structure may include several trees. Each tree may include a parent node, child nodes, and grandchild nodes. Figure 4 This is a schematic diagram of a tree structure provided in an embodiment of this application. For example... Figure 4 As shown, the tree structure can include node 1, node 2, node 3, node 4, node 5, and node 6; node 2, node 3, and node 4 are connected to node 1, node 1 is the parent node, and node 2, node 3, and node 4 are child nodes; node 5 and node 6 are connected to node 2, then node 5 and node 6 are grandchild nodes.

[0129] Nodes in a tree structure have attributes, which can include: "children" (list of child nodes), "radius" (rounded corners), "fills" (content fill (color value, etc.)), "height" (height), "name" (name), "opacity" (opacity), "strokes" (border fill), "type" (object type), "visible" (visibility), "Width" (width), "x" (x-axis position), "y" (y-axis position), "fontName" (font), "style" (font weight), "fontSize" (font size), and "lineHeight" (line height).

[0130] Among them, there are four types of `tpye`: (1) Layer group type, which is formed by combining multiple layers, such as `GROUP` (layer group). (2) Shape type, such as `RECTANGLE` (rectangle node) and `ELLIPSE` (ellipse node). (3) Text type, such as `TEXT` (text node). (4) Component type, such as `COMPONENT` (main component node) and `INSTANCE` (child component node). It should be noted that the component type is a special type of layer group.

[0131] It should be noted that `fontName`, `fontSize`, and `lineHeight` are properties unique to the `TEXT` type of node. Text and shape type nodes do not have child nodes (the `children` property is an empty array). Component and layer group type nodes contain child nodes, and can also include several levels of nodes such as grandchild nodes.

[0132] After determining the tree structure, n (greater than or equal to 2) objects to be identified can be determined based on the tree structure. Each object can be a single layer, a component formed by multiple layers (belonging to the component type), or a layer group formed by multiple layers (belonging to the layer group type). In one example, the n objects to be identified are multiple child nodes connected to the same node in the tree structure. In another example, the n objects to be identified are multiple nodes of the same component type in the tree structure. In yet another example, the n objects to be identified can be any n nodes of the same object type in the tree structure.

[0133] For the similarity recognition process, the server 123 performs similarity recognition on the processed layer data to obtain several sets of similar objects. Each set of similar objects is a collection of multiple similar objects. The similarity recognition includes multi-dimensional feature extraction and similarity calculation. If the similarity value of n objects obtained from the similarity calculation is high, it means that the n objects are similar.

[0134] For multidimensional feature extraction, the server 123 constructs multidimensional features for each object (single layer, combination, or layer group) that needs to be judged. In addition, the server 123 will also normalize the multidimensional features to eliminate the influence of different physical dimensions.

[0135] Multidimensional features need to be determined in conjunction with the object type. These multidimensional features can have several feature types, including text features, shape features, functional features, internal relationship features, external relationship features, or source features (used to indicate predefined components directly referenced by the component). Text features do not need to consider text length and can include features such as line height, spacing, font, font size, and color. Shape features can include width, height, color, shape, and rounded corners. External relationship features can include the type of the parent node and its absolute position on the page; internal relationship features can include the number of layers contained in the object, the type of each layer contained in the object, and the relationship between any two layers contained in the object, such as their relative positions. Functional features are used to indicate the functional characteristics of the object, such as carousels, lists, tabs, and calendars.

[0136] In practical applications, features to be extracted can be designed for different object types (text, shape, component instance, layer group, etc.).

[0137] For example, if the object type is text, the multidimensional features do not need to consider the text length and can include text features such as line height, spacing, font, font size, and color.

[0138] For example, the object type is a shape type, and the multidimensional features can include shape features such as width, height, color, shape, and rounded corners.

[0139] For example, the object type is a component type, and the multidimensional features may include features (shape features or text features) of each sub-layer in the component, the component's shape features, internal relationship features, external relationship features, and source features (used to indicate the defined components directly referenced by the component).

[0140] For example, if the object type is a layer group type and the object is a layer group, then the multidimensional features can include the features of each layer in the layer group (such as shape features, text features) and the internal relationship features of the layer group.

[0141] As can be seen, multidimensional features not only include the features of the object itself, but also innovatively introduce external relationship features (such as its relative position with its parent layer), internal relationship features (such as the number and type distribution of its sub-layers), and source features to describe its context.

[0142] The similarity calculation employs a tolerance calculation mechanism, a differentiated evaluation mechanism, and a dynamic weight adjustment mechanism.

[0143] Regarding the tolerance calculation mechanism, on the one hand, without affecting the similarity judgment result, it allows for size (width or height) differences (such as ±2px positional differences) within a specific threshold range, improving the robustness and recall of similarity recognition. This ensures that the algorithm will not classify components that should be similar as different due to a 1-pixel deviation or minor non-standard operations by the designer, more closely aligning with the judgment logic of human developers and ensuring the usability of the technology on real, complex design drafts. This threshold can be adaptively adjusted according to the actual size; for example, the larger the size, the larger the threshold. On the other hand, objects can include a marker layer used to explain the object. In this case, the marker layer is an ignorable layer. The marker layer has markers, which can be shapes such as hands, circles, or text boxes. The tolerance calculation mechanism analyzes the ratio of the area of ​​the marker to the area of ​​the object; a smaller ratio indicates that the marker layer is an ignorable layer.

[0144] For differentiated evaluation mechanisms, different core features are compared for different object types (text, shape, composite, component, etc.). For n objects of the same object type, if the similarity of their core features is high, then the n objects are considered similar. Core features can include the object's text features, shape features, internal relationship features, external relationship features, source features, and / or functional features, etc.

[0145] For example, the object type is text, and the core features are text features such as line height, spacing, font, font size, and color.

[0146] For example, the object type is a shape feature, and the core features are shape features such as width, height, color, and shape.

[0147] For example, the object type is a component type, and the core features are source features, internal relationship features, component shape features, and / or component functional features.

[0148] For example, the object type is a layer group type, and the core features are the features (text features or shape features) and internal relationship features of each layer in the layer group.

[0149] Regarding the dynamic weight adjustment mechanism, on the one hand, when there are multiple types of features to be compared (internal relationship features, external relationship features, object shape features, source features, and functional features), the weights of different types of features are dynamically adjusted according to the object type to achieve more intelligent judgment. On the other hand, for multiple features within a certain type of feature, the weights of different features can be dynamically adjusted to achieve more intelligent judgment.

[0150] For example, if the object type is a component type and the core features are source features, internal relationship features, component shape features and / or functional features, the source features and functional features can be given higher weights.

[0151] For example, the object type is a layer group type, and the core features are the features of each layer in the layer group and the internal relationship features, which can give the relationship features a high weight.

[0152] It's important to note that when calculating the similarity of n objects, for each core feature, if all n objects share the same feature, the similarity value for that feature can be recorded as 100 or 1; otherwise, the similarity value is recorded as 0. Each core feature has a weight, and the similarity values ​​of each feature are weighted according to their respective weights to obtain the final similarity value. If this similarity value is greater than a preset threshold, such as 90, it indicates that multiple features are similar; otherwise, they are not similar. When comparing dimensions, such as width and height, if the size difference is within a specific threshold range (e.g., ±2px), they are still considered similar.

[0153] It should be noted that, in this embodiment of the application, the similarity recognition process is for the purpose of identifying reusable resources. Reusable resources can be multiple objects constructed based on the same code parameters, as well as multiple components with the same origin and function. These multiple components with the same origin and function can have the same or different forms, such as different shapes or colors.

[0154] During the code conversion process, the server 123 converts layer data containing several similar object sets into initial code such as HTML and CSS that conform to the web front-end coding standards.

[0155] For example, with a pre-configured component library, if there is no component corresponding to the set of similar objects in the component library, and the code parameters (which can be properties of objects in the design draft) used to construct the set of similar objects are the same, while the parameter values ​​for different objects in the set of similar objects can be different, then a template reuse method is used to generate the code for each object in the set of similar objects. The template reuse method allows the server to use one object from the identified set of similar objects to generate complete code, while other similar objects are processed efficiently through looping or reuse, thereby achieving significant code simplification.

[0156] For example, if no components are set in the design draft, the server-side 123 can analyze the reuse scheme of similar object sets during the code conversion process: template reuse or component sharing. If the analysis shows that the reusability probability of the similar object set is high, or if the code parameters used by the similar object sets are different, then the component sharing reuse method is adopted. The component sharing reuse method generates shareable components for the similar object set, which are convenient for reuse by related code. It should be noted that if the similar object set is used for a specific scenario, it means that the reusability probability is low; if the similar object set does not restrict the use scenario, it means that the reusability probability is high.

[0157] For the semanticization process, the server-side 123 inputs the initial code into the AI ​​model, which then generates final code that conforms to the semantics of the code and is understandable to developers. Considering that after the aforementioned processing, the code input to the subsequent AI model is structurally clear, semantically accurate, and highly abstract, rather than "dirty data" mixed with a lot of irrelevant content, the AI ​​can understand the design and generate code more efficiently and accurately.

[0158] Based on the above Figure 3 The design draft processing architecture is shown, and the design draft processing flow is introduced in conjunction with specific scenarios.

[0159] Example 1 of this application: The scenario is a floor card list.

[0160] Figure 5 This is a schematic diagram of a floor card scenario provided in an embodiment of this application.

[0161] like Figure 5 As shown, the designer has created a page layout containing six display cards (card 1, card 2, card 3, card 4, card 5, card 6). Each card should use the same template and include a card icon (icon1, icon2, icon3, icon4, icon5, or icon6), a card title (card title 1, card title 2, card title 3, card title 4, card title 5, or card title 6), and a description. However, the icons, titles, and descriptions of the cards are different. For example, the first card has a shadow effect, card 1 and card 2 use different icons (icon1 and icon2), and card title 1 and card title 2 have different lengths and contents.

[0162] Accordingly, the design draft processing includes the following steps.

[0163] Step 1. (Design Draft Import and Layer Data Optimization): The server receives the page's design draft (e.g., JSON format) and obtains the following... Figure 6 The tree structure shown is as follows. In this tree structure, the parent node (object type GROUP) connects to the title node (object type TEXT) and the card container node (object type GROUP). The card container node connects to card 1 node (object type GROUP), card 2 node (object type GROUP), ..., card 6 node (object type GROUP). Card 1 node connects to the rectangle node (object type RECTANGLE), card title node (object type TEXT), and card subtitle node (object type TEXT). Card 2, ..., and card 6 nodes are similar, differing only in their node attributes. Based on the tree structure, it can be analyzed that all six cards are child nodes of the same parent node. Furthermore, if components are defined in the design draft, the server-side 123 can generate a component library based on these components. The component library can include the code for several components. It should be noted that the component library can also be uploaded by users.

[0164] Step 2. (Multidimensional Feature Extraction), server-side 123 based on Figure 6 The attributes of the six card nodes in the illustrated tree structure are used to extract a multidimensional feature vector for each of the six cards. For example, the multidimensional features of card 1 include the following:

[0165] 1. Shape characteristics of card 1: {w:500,h:250,backgroundColor:'#FFFFFF',borderRadius:16,...}.

[0166] 2. Internal relational features of card 1: {children_count:3,children_types:['RECTANGLE','Text','Text'],relativep:[child_1-child_2,child_2-child_3,child_1-child_3]}.

[0167] 3. Shape characteristics of child_1: {child_1_pos:{x:32,y:32},child_1_size:{w:80,h:80}. child_1 is a rectangular node (object type RECTANGLE).

[0168] 4. Text features of child_2: {child_2_pos:{x:32,y:140},child_2_size:{w:81,h:80},child_2_font:{size:20,weight:500}. child_2 is a card title node (object type is TEXT).

[0169] 5. Text features of child_3: {child_3_pos:{x:32,y:150},child_3_size:{w:81,h:80},child_3_font:{size:22,weight:500}. child_3 is a card subtitle node (object type is TEXT).

[0170] Cards 2 through 6 are similar and will not be described further.

[0171] Step 3. (Similarity Calculation): The server 123 can compare the multidimensional feature vectors of these 6 cards in pairs.

[0172] 1. Differentiated evaluation mechanism: When comparing text nodes (i.e., card title nodes and card subtitle nodes) in 6 cards, the server prioritizes comparing attributes such as font weight, while ignoring the specific text content.

[0173] 2. Tolerance calculation mechanism: When comparing child_2_size.width, the server 123 found that one of the six cards was 81px, while the others were 80px. Since the difference (1px) is within the preset size tolerance threshold (e.g., ±2px), they are judged to be similar.

[0174] 3. A dynamic weighting mechanism is used: the matching weight of the internal relationship features of the cards is set to the highest, followed by the shape features of shape-type layers within the cards, and the text features of text-type layers within the cards are set to the lowest. Since the internal relationship features of the six cards are completely consistent, and the shape features of the six cards are also highly consistent within the tolerance range, the similarity values ​​of the six cards are high, therefore the six cards are similar.

[0175] Step 4. (Code Conversion): If the server-side component library is pre-configured, and if there is no corresponding component for any of the six cards, and the code parameters used to build the six cards are identical, then these six cards are grouped together, and code is generated using a template reuse method. If the server-side component library is not pre-configured and no component is defined in the design draft, then the reusability probability of the six cards is analyzed. For example, it analyzes whether the use cases for the six cards are special. If they are special, it indicates a low reusability probability. Considering that the code parameters used to build the six cards are identical, these six cards are grouped together, and code is generated using a template reuse method.

[0176] When generating code using template reuse, a template named SectionCard is created, whose style is generated based on card 1. An array and a .forEach() loop are used to render 6 SectionCard instances, and different image URLs, titles, descriptions, etc. are passed in as parameters.

[0177] For example, the template code for SectionCard can be as follows.

[0178] <div class＝"section">

[0179] <h3 class＝"section-title">Floor title< / h3>

[0180] <div class＝"section-card-container">

[0181] <div class＝"section-card"loop＝"6">

[0182] <img class＝"section-card-icon"src＝"卡片icon地址">

[0183] <h4 class＝"section-card-title">Card title 1< / h4>

[0184] <p class＝"section-card-desc">Card description information

[0185]

[0186]

[0187] .

[0188] Embodiment 2 of this application: Identifying component instances on a page that have the same source but different locations.

[0189] Figure 7 This is a schematic diagram illustrating a scenario of search icons in different locations on a page, as provided in an embodiment of this application.

[0190] like Figure 7 As shown, in a design draft, there is a search icon 1 in the top navigation bar of the page, and another search icon 2 inside the search box in the page content area. Both icons are instances of the same "MasterComponent" in the design software, so they are visually identical (e.g., both are 24x24px). However, they are located in different positions on the page and belong to different parent layers (the "navigation bar" and the "search box container").

[0191] In some cases, components are defined in the design draft, and the design draft processing procedure includes the following steps.

[0192] Step 1. (Design Draft Import and Layer Data Optimization): The server 123 receives the page's design draft data (e.g., JSON format) and parses it to extract two icon layers: Search Icon 1 and Search Icon 2. Additionally, the server 123 can generate a component library based on the components defined in the design draft. The component library can include the code for several components. It should be noted that the component library can also be uploaded by users.

[0193] Step 2. (Multidimensional feature extraction): The server extracts multidimensional feature vectors for these two icon layers.

[0194] For example, the multidimensional feature vector of the search icon 1 in the top navigation bar of the page includes the following content.

[0195] 1. Icon shape characteristics {width:24,height:24}.

[0196] 2. External relationship characteristics: {parent_type:'Frame',absolute_pos:{x:100,y:20}}.

[0197] 3. Source characteristics: The server 123 extracted the source_component_id from the design draft data as 'SearchIcon'.

[0198] For example, the multidimensional feature vector of the search icon 2 in the page content area includes the following.

[0199] 1. Icon shape characteristics {width:24,height:24}.

[0200] 2. External relationship characteristics: {parent_type:'Group',absolute_pos:{x:50,y:200}.

[0201] 3. Source characteristics: The server 123 extracted the source_component_id:SearchIcon from the design draft data.

[0202] The shape and source features of search icon 1 and search icon 2 are the same.

[0203] Step 3 (Similarity Calculation): The server 123 compares the feature vectors of the two icon layers.

[0204] 1. Differentiated evaluation mechanism: The server-side 123 identifies the object type of these two icon layers as a component type.

[0205] 2. Dynamic weight adjustment mechanism: For "component type", the server will greatly increase the weight of "source feature" (source_component_id). Even if their absolute positions and parent object types in their external relationship features are completely different, if their source features are the same, then search icon 1 and search icon 2 have a high similarity value, and therefore search icon 1 and search icon 2 are similar.

[0206] Step 4. (Code Conversion): If the component library is pre-configured on the server side, and the component library includes a component corresponding to the search icon, such as the SearchIcon component, then the SearchIcon component can be called in the code of the navigation bar and the search box respectively, without generating two separate SVG code segments.

[0207] For example, the code for the SearchIcon component can be... <i class＝"searchicon"> .

[0208] The code for the input box in the page content area is as follows:

[0209] <div class＝"input-block">

[0210] <input type＝"text"placeholder＝"请输入内容">

[0211] <searchicon>< / searchicon>

[0212] .

[0213] The code for searching in the input box of the navigation bar is as follows.

[0214] <div class＝"header-search">

[0215] <input type＝"text"placeholder＝"请输入关键字搜索">

[0216] <searchicon>< / searchicon>

[0217] .

[0218] It should be noted that input-block and header-search are different functions. The search function in the navigation bar can jump to other pages, while the search function in the page content area is for the content within that page content area.

[0219] In other possible cases, components are not defined in the design draft. Accordingly, the design draft processing includes the following steps.

[0220] Step 1. (Design draft import and layer data optimization): The server 123 receives the design draft data (such as JSON format) from the page and parses out the two icon layers: search icon 1 and search icon 2. At this time, the object type of search icon 1 and search icon 2 can be shape type.

[0221] Step 2. (Multidimensional feature extraction): The server extracts multidimensional feature vectors for these two icon layers.

[0222] For example, the multidimensional feature vector of the search icon in the top navigation bar of the page includes the following.

[0223] For example, the feature vector of the search icon 1 in the top navigation bar of the page includes the following content.

[0224] 1. Icon shape characteristics {width:24,height:24}.

[0225] 2. External relationship characteristics: {parent_type:'Frame',absolute_pos:{x:100,y:20}}.

[0226] 3. Identifier, extracted from the design draft data by server 123, name: 'search box'.

[0227] For example, the multidimensional feature vector of the search icon in the page content area includes the following.

[0228] 1. Icon shape characteristics {width:24,height:24}.

[0229] 2. External relationship characteristics: {parent_type:'Group',absolute_pos:{x:50,y:200}.

[0230] 3. Identifier, extracted from the design draft data by server 123, name: 'SearchIcon'.

[0231] The shape and logo of search icon 1 and search icon 2 are the same.

[0232] Step 3 (Similarity Calculation): The server compares the feature vectors of these two layers.

[0233] 1. Differentiated evaluation mechanism: Considering that no components are defined in the design draft, the server-side 123 can analyze the two search icons based on the design draft to determine whether these two search icons can be used as components. If so, the object type will be updated to icon component type.

[0234] 2. Dynamic weight adjustment mechanism: For icon component types, the server will significantly increase the weight of "identifier" and "shape feature". Even though their absolute positions and parent object types in their external relationship features are completely different, if their "identifier" and "shape feature" are the same, then search icon 1 and search icon 2 have a high similarity value, and therefore search icon 1 and search icon 2 are similar.

[0235] Step 4. (Code Conversion): If the server-side component 123 does not define any components in the design draft, it analyzes whether the two search icons are suitable as reusable components based on the design draft. For example, it analyzes whether the use case of the search icons is specific. If it is not specific, it means that there are no restrictions on the use case, and the probability of reusability of the search icons is high. Therefore, the two search icons are treated as a shareable component, generating a SearchIcon component. Based on the identifier of the search icons in the design draft (name: 'SearchIcon'), a source_component_id of SearchIcon is generated for this component. Then, the same source_component_id: SearchIcon is generated for search icon 1 in the navigation bar and search icon 2 in the page content area. Subsequently, for the same source_component_id: SearchIcon, this SearchIcon component is called in the relevant code for generating search icon 1 and search icon 2 (such as the code for the search box in the navigation bar and the page content area).

[0236] Next, based on the above-mentioned code generation system, design draft processing architecture, and introduction to design draft processing in conjunction with application scenarios, a code generation method provided in this application embodiment will be described in detail.

[0237] Figure 8 This is a flowchart illustrating the code generation method provided in this embodiment. This embodiment can be applied to server 123.

[0238] like Figure 8 As shown in the embodiments of this application, the code generation method includes at least the following steps.

[0239] First, in step 801, the server 123 determines n objects of the same object type that need to be compared based on the design draft.

[0240] In some embodiments, server 123 preprocesses the layer data of the design draft to obtain a tree structure of the design draft. Each node in the tree structure is a layer. Based on the tree structure, n objects of the same object type need to be compared. The object type can be component type, layer group type, text type, or shape type. It should be noted that text type and shape type are single-layer types. Component type and layer group type are multi-layer types, where layer group type is a layer group formed by multiple layers of non-component type, and component type is a component formed by multiple layers.

[0241] For example, the n objects to be identified are multiple child nodes of the same object type connected to the same node in a tree structure.

[0242] For example, the n objects to be identified are multiple nodes of component type in a tree structure.

[0243] For example, the n objects to be identified can be n nodes of any object type in a tree structure.

[0244] For details, please refer to the above text. Figure 3 The relevant descriptions of layer data optimization in the text will not be repeated here.

[0245] Then, in step 802, the server 123 determines whether the number of layers included in the n objects is consistent. If they are inconsistent, step 803 is executed; if they are consistent, step 804 is executed.

[0246] In some embodiments, for any one of the n objects, the number of layers can be the number of child nodes of the next level connected to that object in the tree structure.

[0247] In step 803, the server 123 determines whether the inconsistent layers of n objects are negligible layers. If so, step 804 is executed; if they are consistent, step 807 is executed.

[0248] In some embodiments, server 123 first determines the inconsistent layers among the n objects, assuming that the number of layers for each object is different. In one example, server 123 can analyze the inconsistent layers based on the description information for the n objects in the design draft.

[0249] Then, the server determines whether the inconsistent layer is an ignoreable layer.

[0250] In one example, server 123 can analyze whether the inconsistency layer is a marker layer (used for explanation), and if so, the inconsistency layer can be ignored.

[0251] In another example, server 123 can determine the object to which the inconsistent layer belongs (any object among n objects), analyze the ratio of the area of ​​the inconsistent layer to the area of ​​the object to which the inconsistent layer belongs, and if the ratio is small, it means that the inconsistent layer is an ignorable layer.

[0252] If the inconsistent layer is determined to be an ignorable layer, then the ignorable layers among the n objects are deleted to reduce the impact of invalid information on similarity judgment. Subsequently, the core features of the n objects can be determined.

[0253] In step 807, server 123 determines that n objects are dissimilar.

[0254] In step 804, the server 123 determines the core characteristics of the object types of the n objects.

[0255] For example, the object type is text, and the core features are text features such as line height, spacing, font, font size, and color.

[0256] For example, the object type is a shape feature, and the core features are shape features such as width, height, color, and shape.

[0257] For example, the object type is a component type, and the core features are source features, internal relationship features, component shape features, and / or functional features.

[0258] For example, the object type is a layer group type, and the core features are the features (shape features or text features) and internal relationship features of each layer in the layer group.

[0259] In step 805, server 123 determines the similarity values ​​of n objects based on core features.

[0260] In some embodiments, for each feature in the core features, if n objects share the same feature, the similarity value of that feature can be recorded as 100; otherwise, the similarity value of that feature can be recorded as 0. Each feature in the core features can have a weight. Based on the weight of each feature, the similarity value of each feature is weighted to obtain the similarity value of the n objects. The weights can be preset by the user.

[0261] It should be noted that, when the core features include layer dimensions such as width or height, if the differences between n dimensions are within a pre-defined threshold range (e.g., ±2px), they are considered to be similar in size.

[0262] In one example, the server-side 123 can obtain the weight of each feature in the core features based on the object type. For example, when the object type is a component, the source feature and / or functional feature have the highest weight. For example, when the object type is a non-component layer group, the relationship feature has the highest weight, followed by the shape feature. For example, when the object type is text, text features such as line height, spacing, font, and font size have the highest weight. For example, when the object type is shape, shape features such as width (layer size), height (layer size), and shape have the highest weight.

[0263] In another example, core features include functional features. The server (123) obtains the weight of each feature within the core features based on the object type and the values ​​of the functional features. For example, if the object type is a component and the functional features are carousel or tabs, then the functional features have the highest weight. Similarly, if the object type is a component and the functional feature is a list, then the alignment of the list options (the options that make up the list) has the highest weight. Correspondingly, if the first object includes multiple list options, the first feature data includes the alignment of the list options. For example, if the object type is a component and the functional feature is a calendar, then the geometric and textual features of the calendar have the highest weight.

[0264] In step 806, the server 123 determines whether the similarity value is higher than the similarity threshold. If yes, it proceeds to step 808; otherwise, it proceeds to step 807. The similarity threshold can be flexibly designed based on the actual similarity calculation method.

[0265] In step 808, the server 123 can determine that n objects are similar.

[0266] In step 809, server 123 determines the code of each of the n objects by using code reuse based on the object type of the n objects.

[0267] In some embodiments, if the object type is a type other than a component type, such as text, shape, or layer group, then in step 809, the server 123 can generate code using a template reuse method: determining the first page code for any one of the n objects, reusing the first page code for each of the other n objects, and determining the second page code for each of the other n objects. For example, if a component library with design drafts is configured, the server 123 can generate code using a template reuse method even if there is no shareable component for the n objects in the component library. For example, the server 123 can generate code using a template reuse method even if the code parameters used by the n objects are the same.

[0268] In some embodiments, if the object type is a component type, then in step 809, the server 123 can generate code using a component sharing approach: it can determine the shared component code corresponding to n objects, and then, based on the shared component code, determine the page code corresponding to each of the n objects.

[0269] In some embodiments, if there are no components in the design draft and the object type is a layer group, then in step 809, the server 123 can analyze the reuse method of the n objects: template reuse or component sharing. If the code parameters used by the n objects are the same, the code is generated using template reuse or component sharing. If the reusability probability of the n objects is high (e.g., no restriction on usage scenarios), the code is generated using component sharing, and the object type is updated to a component type. If the reusability probability of the n objects is low (e.g., for specific scenarios), the code is generated using template reuse. If the reusability probability of the n objects is high, or if the code parameters used by the n objects are different, the code is generated using component sharing.

[0270] This solution can automatically identify similar objects and reuse code for them, thereby improving code generation efficiency.

[0271] Next, in conjunction with the code generation system provided above, a code generation method provided in this application embodiment will be described in detail.

[0272] Figure 9 This is a flowchart illustrating the code generation method provided in this embodiment. This embodiment can be applied to server 123.

[0273] like Figure 9 As shown in the embodiments of this application, the code generation method includes at least the following steps.

[0274] In step 901, the server 123 obtains the design draft of the page. The design draft is used to indicate the M layers of the page and the layout of the M layers. The layer is the basic unit for drawing the page, and M is a positive integer greater than or equal to 2.

[0275] Layer composition indicates that a page includes multiple layers; layer layout indicates the distribution of these layers on the page and the relationships between them. A layer is the basic unit for drawing a page; it is an indivisible element on the page and can be text, images, shapes, videos, etc.

[0276] In some embodiments, the client 111 accepts the design draft uploaded by the user and submits it to the server 123, thereby enabling the server 123 to obtain the design draft.

[0277] In some embodiments, the design draft is a design draft after preprocessing (deleting and / or merging) layer data.

[0278] In step 902, the server 123, based on the design draft, determines a first object and a second object that are similar among the M layers. The first object is at least one first layer among the M layers, and the second object is at least one second layer among the M layers. The first object and the second object belong to the same object type.

[0279] In some embodiments, the design draft includes M layers, where M is a positive integer greater than or equal to 2. In step 902, the server 123 constructs a tree structure using each of the M layers as a node. In one example, the server 123 can determine the first object and the second object from multiple nodes connected to the same node in the tree structure. In another example, the server 123 can determine the first object and the second object from multiple nodes of the same object type in the tree structure.

[0280] In some embodiments, the object type to which the first object and the second object belong can be text type, shape type, component type, or layer group type.

[0281] In some embodiments, the object type corresponds to N characteristics, where N is a positive integer greater than or equal to 1.

[0282] In step 902, the server 123 first determines the first feature data of the first object and the second feature data of the second object based on the design draft. The first feature data includes N feature values ​​for the first object, and the second feature data includes N feature values ​​for the second object.

[0283] For example, when the object type is a component type, the first object and the second object are components, and the N features include source features and / or functional features. The source features are used to indicate a defined component that is directly referenced by the component, and the functional features are used to indicate the functional characteristics of the component.

[0284] For example, when the object type is a layer group type, the first object and the second object are layer groups. A layer group is a collection of multiple layers from M layers in the design draft. The N features include relationship features, which are used to indicate the relationship between multiple layers in the layer group. These relationship features can be the aforementioned internal relationship features.

[0285] For example, when the object type is text, the N features include text features such as line height, spacing, font, font size, and color.

[0286] For example, when the object type is shape, the N features include shape features such as width (layer size), height (layer size), color, and shape.

[0287] In some optional implementations, after determining the first object and the second object, the server 123 can determine the number of first layers for the first object and the number of second layers for the second object. Then, if the number of first layers and the number of second layers are different, the server 123 identifies inconsistent layers in the first and second objects. In one example, the server 123 can analyze the inconsistent layers based on the description information for the first and second objects in the design draft. Then, the server 123 determines whether the inconsistent layer is a negligible layer. In one example, the server 123 can analyze whether the inconsistent layer is used for explanation; if so, the inconsistent layer is negligible. In another example, the server 123 can determine the object to which the inconsistent layer belongs (the first object or the second object), analyze the ratio of the area of ​​the inconsistent layer to the area of ​​the object to which the inconsistent layer belongs; a smaller ratio indicates that the inconsistent layer is a negligible layer. If the inconsistent layer is determined to be a negligible layer, the negligible layers in the first and second objects are subsequently deleted to reduce the impact of invalid information on the similarity judgment. Afterward, the first feature data of the first object and the second feature data of the second object can be determined.

[0288] Next, server 123 determines whether the first object and the second object are similar based on the first feature data and the second feature data.

[0289] In some implementations of determining whether a first object and a second object are similar, the server 123 can first obtain the weight of each of the N features. In one example, the server 123 can obtain the weight of each of the N features based on the object type. For example, when the object type is a component, the source feature and / or functional feature have the highest weight. For example, when the object type is a non-component layer group, the relationship feature has the highest weight, followed by the shape feature. For example, when the object type is text, text features such as line height, spacing, font, font size, and color have the highest weight. For example, when the object type is shape, shape features such as width (layer size), height (layer size), and shape have the highest weight. In another example, the N features include functional features, and the server 123 obtains the weight of each of the N features based on the object type and the values ​​of the functional features. For example, when the object type is a component, if the functional features are carousels or tabs, then the functional features have the highest weight. For example, when the object type is a component and the functional feature is a list, the alignment of the list options (the options that make up the list) has the highest weight. Correspondingly, the first object includes multiple list options, and the first feature data includes the feature of whether the list options are aligned. For example, when the object type is a component and the functional feature is a calendar, the geometric and textual features of the calendar have the highest weight.

[0290] Then, server 123 determines whether the first object and the second object are similar based on the weight of each of the N features, the first feature data, and the second feature data.

[0291] In this embodiment, for each of the N features, the server 123 compares the first feature value of that feature in the first feature data with the second feature value in the second feature data to determine the similarity value of that feature. In one example, if the first feature value and the second feature value are the same, the similarity value can be 1 (indicating similarity); otherwise, it is 0 (indicating dissimilarity). Then, based on the weight of each of the N features, the similarity values ​​of the N features are weighted to obtain the similarity value between the first object and the second object. If the similarity value is greater than or equal to a preset similarity threshold, it means that the first object and the second object are similar; otherwise, they are dissimilar.

[0292] In one example, N features include layer size, which can be width or height. The first feature data includes a first value of the layer size of the first object, and the second feature data includes a second value of the layer size of the second object. The server 123 can determine that the difference between the first value and the second value is less than or equal to a preset threshold. If the difference between the first value and the second value is less than or equal to the preset threshold, it means that the layer size is within the allowable error range. Therefore, it can be determined that the first object and the second object are similar in terms of layer size, and the similarity value can be 1. If they are not similar, the similarity value can be 0.

[0293] In step 903, the server 123 reuses the code of the first object and the second object to obtain the first page code of the first object and the second page code of the second object.

[0294] In some embodiments, if the server 123 determines that the object type is a type other than the component type, and the first object and the second object use the same code parameters, then in step 903, the server determines the first page code of the first object; and reuses the first page code to determine the second page code of the second object.

[0295] In some embodiments, if the server 123 determines that the object type is a component type, then in step 903, it determines the shared component code corresponding to the first object and the second object; based on the shared component code, it determines the first page code of the first object and the second page code of the second object.

[0296] In some embodiments, if the server 123 determines that the object type is a type other than the component type, and the code parameters of the first object and the second object are different, then in step 903, the shared component code corresponding to the first object and the second object is determined; based on the shared component code, the first page code of the first object and the second page code of the second object are determined.

[0297] In some embodiments, when the server 123 determines that the object type is a layer group, and the first object and the second object have corresponding shared component codes in the component library, and the component library is a pre-configured material, for example, the component library is automatically generated based on the design draft, or uploaded by the user, or generated based on a set of similar objects with high reusability probability (or without needing to consider the usage scenario) identified in the design draft; then in step 903, the shared component codes corresponding to the first object and the second object are determined; based on the shared component codes, the first page code of the first object and the second page code of the second object are determined.

[0298] Subsequently, server 123 can input the first page code and the second page code into the AI ​​model. The AI ​​model performs semantic understanding of the first page code and the second page code, and corrects the first page code and the second page code to obtain the corrected first page code and the corrected second page code. This application embodiment is not intended to limit the structure of the AI ​​model and can be designed according to actual needs.

[0299] This solution can automatically identify similar objects and reuse code for them, thereby improving code generation efficiency.

[0300] This application also provides a code generation apparatus, such as... Figure 10 As shown, it includes:

[0301] The acquisition module is used to acquire the design draft of the page. The design draft indicates the M layers that make up the page and the layout of the M layers. The layer is the basic unit for drawing the page.

[0302] The similarity analysis module is used to identify the first and second similar objects among M layers based on the design draft. The first object is at least one of the first layers among the M layers, and the second object is at least one of the second layers among the M layers. The first object and the second object belong to the same object type.

[0303] The code generation module is used to reuse code between the first object and the second object, resulting in the first page code of the first object and the second page code of the second object.

[0304] The acquisition module, similarity analysis module, and code generation module can all be implemented in software or hardware. For example, the implementation of the acquisition module will be described below. Similarly, the implementation methods of the similarity analysis module and the code generation module can refer to the implementation method of the acquisition module.

[0305] As an example of a software functional unit, a module can include code running on a computing instance. A computing instance can include at least one of a physical host (computing device), a virtual machine, or a container. Furthermore, the aforementioned computing instance can be one or more. For example, a module can include code running on multiple hosts / virtual machines / containers. It should be noted that the multiple hosts / virtual machines / containers used to run the code can be distributed within the same region or in different regions. Further, the multiple hosts / virtual machines / containers used to run the code can be distributed within the same availability zone (AZ) or in different AZs, each AZ comprising one or more geographically proximate data centers. Typically, a region can include multiple AZs.

[0306] Similarly, multiple hosts / virtual machines / containers used to run this code can be distributed within the same Virtual Private Cloud (VPC) or across multiple VPCs. Typically, a VPC is set up within a region. Communication between two VPCs within the same region, as well as between VPCs in different regions, requires a communication gateway to be set up within each VPC to enable interconnection between VPCs.

[0307] As an example of a hardware functional unit, an acquisition module may include at least one computing device, such as a server. Alternatively, an acquisition module may also be a device implemented using an application-specific integrated circuit (ASIC) or a programmable logic device (PLD). The aforementioned PLD may be implemented using a complex programmable logical device (CPLD), a field-programmable gate array (FPGA), generic array logic (GAL), or any combination thereof.

[0308] The acquisition module includes multiple computing devices that can be distributed within the same region or in different regions. Similarly, the acquisition module can be distributed within the same Availability Zone (AZ) or in different AZs. Likewise, the acquisition module can be distributed within the same Virtual Private Cloud (VPC) or multiple VPCs. These multiple computing devices can be any combination of computing devices such as servers, ASICs, PLDs, CPLDs, FPGAs, and GALs.

[0309] It should be noted that, in other embodiments, the acquisition module can be used to execute any step in the code generation method, such as Figure 8 or Figure 9 The similarity analysis module can be used to execute any step in the code generation method, such as... Figure 8 or Figure 9 The code generation module can be used to execute any step in the code generation method, such as... Figure 8 or Figure 9 In the method shown, the steps implemented by the acquisition module, similarity analysis module, and code generation module can be specified as needed. The acquisition module, similarity analysis module, and code generation module can implement different steps in the code generation method to realize all the functions of the code generation device.

[0310] This application also provides a computing device 1100. For example... Figure 11 As shown, the computing device 1100 includes a bus 1102, a processor 1104, a memory 1106, and a communication interface 1108. The processor 1104, the memory 1106, and the communication interface 1108 communicate with each other via the bus 1102. The computing device 1100 can be a server or a terminal device. It should be understood that this application does not limit the number of processors and memories in the computing device 1100.

[0311] Bus 1102 can be a Peripheral Component Interconnect (PCI) bus or an Extended Industry Standard Architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc. For ease of representation, Figure 11 The bus 1102 may be represented by a single line, but this does not mean that there is only one bus or one type of bus. The bus 1102 may include a path for transmitting information between various components of the computing device 1100 (e.g., memory 1106, processor 1104, communication interface 1108).

[0312] The processor 1104 may include any one or more processors such as a central processing unit (CPU), a graphics processing unit (GPU), a microprocessor (MP), or a digital signal processor (DSP).

[0313] The memory 1106 may include volatile memory, such as random access memory (RAM). The processor 1104 may also include non-volatile memory, such as read-only memory (ROM), flash memory, hard disk drive (HDD), or solid state drive (SSD).

[0314] The memory 1106 stores executable program code, and the processor 1104 executes this executable program code to implement the functions of the aforementioned acquisition module, similarity analysis module, and code generation module, thereby realizing the code generation method, for example... Figure 8 or Figure 9 The method shown. That is, the memory 1106 stores instructions for executing the code generation method, such as... Figure 8 or Figure 9 The instructions for the method shown.

[0315] The communication interface 1108 uses transceiver modules such as, but not limited to, network interface cards and transceivers to enable communication between the computing device 1100 and other devices or communication networks.

[0316] This application also provides a computing device cluster. The computing device cluster includes at least one computing device. The computing device can be a server, such as a central server, an edge server, or a local server in a local data center. In some embodiments, the computing device can also be a terminal device such as a desktop computer, a laptop computer, or a smartphone.

[0317] like Figure 12 As shown, the computing device cluster includes at least one computing device 1100. The memory 1106 of one or more computing devices 1100 in the computing device cluster may store the same instructions for executing code generation methods, such as... Figure 8 or Figure 9 The instructions for the method shown.

[0318] In some possible implementations, the memory 1106 of one or more computing devices 1100 in the computing device cluster may also store partial instructions for executing the code generation method, such as... Figure 8 or Figure 9 The instructions of the method shown are partial instructions. In other words, a combination of one or more computing devices 1100 can jointly execute instructions for performing the code generation method, such as... Figure 8 or Figure 9 The instructions for the method shown.

[0319] It should be noted that the memory 1106 in different computing devices 1100 within the computing device cluster can store different instructions, each used to execute a portion of the functions of the code generation device. That is, the instructions stored in the memory 1106 of different computing devices 1100 can implement the functions of one or more modules among the acquisition module, the similarity analysis module, and the code generation module.

[0320] In some possible implementations, one or more computing devices in a computing device cluster can be connected via a network. This network can be a wide area network (WAN) or a local area network (LAN), etc. Figure 13 One possible implementation is shown. For example... Figure 13 As shown, the two computing devices 1100A and 1100B are connected via a network. Specifically, they are connected to the network through communication interfaces in each computing device. In this possible implementation, the memory 1106 in computing device 1100A stores instructions for executing the functions of the acquisition module and the similarity analysis module. Simultaneously, the memory 1106 in computing device 1100B stores instructions for executing the functions of the code generation module.

[0321] Figure 13 The connection method between the computing device clusters shown can be that, considering that the code generation method provided in this application needs to analyze the design draft to obtain a large number of similar layers, the function implemented by the code generation module is to be executed by the computing device 1100B.

[0322] It should be understood that Figure 13 The functions of computing device 1100A shown can also be performed by multiple computing devices 1100. Similarly, the functions of computing device 1100B can also be performed by multiple computing devices 1100.

[0323] This application also provides a computer program product containing instructions. The computer program product may be a software or program product containing instructions, capable of running on a computing device or stored on any usable medium. When the computer program product is run on at least one computing device, it causes the at least one computing device to execute a code generation method, such as... Figure 8 orFigure 9 The method shown.

[0324] This application also provides a computer-readable storage medium. The computer-readable storage medium can be any available medium that a computing device can store, or a data storage device such as a data center containing one or more available media. The available medium can be a magnetic medium (e.g., floppy disk, hard disk, magnetic tape), an optical medium (e.g., DVD), or a semiconductor medium (e.g., solid-state drive). The computer-readable storage medium includes instructions that instruct a computing device to execute a code generation method, such as... Figure 8 or Figure 9 The method shown.

[0325] In the above embodiments, the descriptions of each embodiment have different focuses. For parts that are not described in detail or recorded in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0326] It should be understood that the sequence number of each step in the above embodiments does not imply the order of execution. The execution order of each process should be determined by its function and internal logic, and should not constitute any limitation on the implementation process of the embodiments of this application.

[0327] The basic principles of this application have been described above with reference to specific embodiments. However, it should be noted that the advantages, benefits, and effects mentioned in this application are merely examples and not limitations, and should not be considered as essential features of the various embodiments of this disclosure. Furthermore, the specific details disclosed above are for illustrative and facilitative purposes only, and are not limitations. These details do not limit the scope of this disclosure to the necessity of employing the specific details described above.

[0328] The block diagrams of devices, apparatuses, devices, and systems disclosed herein are merely illustrative examples and are not intended to require or imply that they must be connected, arranged, or configured in the manner shown in the block diagrams. As those skilled in the art will recognize, these devices, apparatuses, devices, and systems can be connected, arranged, and configured in any manner. Words such as “comprising,” “including,” “having,” etc., are open-ended terms meaning “including but not limited to,” and are used interchangeably with them. The terms “or” and “and” as used herein refer to the terms “and / or,” and are used interchangeably with them unless the context clearly indicates otherwise. The term “such as” as used herein refers to the phrase “such as but not limited to,” and is used interchangeably with it.

[0329] It should also be noted that in the apparatus, devices, and methods of this disclosure, the components or steps can be disassembled and / or recombined. These disassemblies and / or recombinations should be considered as equivalent solutions to this disclosure.

[0330] The above description has been given for purposes of illustration and description. Furthermore, this description is not intended to limit the embodiments of this disclosure to the forms disclosed herein. Although numerous exemplary aspects and embodiments have been discussed above, those skilled in the art will recognize certain variations, modifications, alterations, additions, and sub-combinations therein.

[0331] It is understood that the various numerical designations used in the embodiments of this application are merely for descriptive convenience and are not intended to limit the scope of the embodiments of this application.

Claims

1. A code generation method, characterized in that, The method includes: Obtain the design draft of the page, which is used to indicate the M layers that constitute the page and the layout of the M layers, where M is a positive integer greater than or equal to 2, and the layer is the basic unit for drawing the page; Based on the design draft, a first object and a second object that are similar among the M layers are identified. The first object is at least one of the first layers among the M layers, and the second object is at least one of the second layers among the M layers. The first object and the second object belong to the same object type. By reusing the code of the first object and the second object, the first page code of the first object and the second page code of the second object are obtained.

2. The method according to claim 1, characterized in that, The object type corresponds to N features, where N is a positive integer greater than or equal to 1. The step of determining similar first and second objects among the M layers based on the design draft includes: Based on the design draft, first feature data of the first object and second feature data of the second object are determined. The first feature data includes the feature values ​​of the N features for the first object, and the second feature data includes the feature values ​​of the N features for the second object. Based on the first feature data and the second feature data, determine whether the first object and the second object are similar.

3. The method according to claim 2, characterized in that, When the object type is a component, the N features include source features and / or functional features, wherein the source features indicate a directly referenced, defined component, and the functional features indicate the functional characteristics of the component; and / or When the object type is a layer group, the layer group is a collection of multiple layers among the M layers, and the N features include relational features, which are used to indicate the relationship between the multiple layers in the layer group.

4. The method according to claim 2 or 3, characterized in that, The step of determining whether the first object and the second object are similar based on the first feature data and the second feature data includes: When N is greater than or equal to 2, the weight of each of the N features is obtained based on the object type; Based on the weight of each of the N features, the first feature data, and the second feature data, it is determined whether the first object and the second object are similar.

5. The method according to claim 4, characterized in that, The N features include functional features, and the values ​​for the functional features in the first feature data and the second feature data are the same; The step of obtaining the weight of each of the N features based on the object type includes: Based on the object type and the value of the functional feature, obtain the weight of each of the N features.

6. The method according to any one of claims 2 to 5, characterized in that, The N features include layer size, the first feature data includes a first value of the layer size of the first object, and the second feature data includes a second value of the layer size of the second object; The step of determining whether the first object and the second object are similar based on the first feature data and the second feature data includes: If the difference between the first value and the second value is less than or equal to a preset threshold, the first object and the second object are determined to be similar in terms of the layer size.

7. The method according to any one of claims 2 to 6, characterized in that, Before determining the first feature data of the first object and the second feature data of the second object, the method further includes: Determine the number of first layers for the first object; Determine the number of second layers for the second object; If the number of the first layer and the number of the second layer are different, identify the inconsistent layers in the first object and the second object; The inconsistent layer is determined to be an ignorable layer, and the ignorable layers in the first object and the second object are deleted.

8. The method according to any one of claims 1 to 7, characterized in that, The step of reusing code between the first object and the second object to obtain the first page code of the first object and the second page code of the second object includes: The object type is determined to be a type other than a component; Determine the first page code of the first object; Based on the first page code, determine the second page code of the second object.

9. The method according to any one of claims 1 to 7, characterized in that, The step of reusing code between the first object and the second object according to the object type to obtain the first page code of the first object and the second page code of the second object includes: The object type is determined to be either a component or a layer group; Determine the shared component code corresponding to the first object and the second object; Based on the shared component code, the first page code of the first object and the second page code of the second object are determined.

10. The method according to any one of claims 1 to 9, characterized in that, The method further includes: A tree structure is constructed using each of the M layers as a node; From the tree structure, a first object and a second object are determined from multiple nodes connected to the same node.

11. A code generation device, characterized in that, The device includes: The acquisition module is used to acquire the design draft of the page, wherein the design draft is used to indicate the M layers that constitute the page and the layout of the M layers, wherein the layer is the basic unit for drawing the page; The similarity analysis module is used to determine, based on the design draft, a first object and a second object that are similar among the M layers. The first object is at least one first layer among the M layers, and the second object is at least one second layer among the M layers. The first object and the second object belong to the same object type. The code generation module is used to reuse the code of the first object and the second object to obtain the first page code of the first object and the second page code of the second object.

12. A computing device cluster, characterized in that, It includes at least one computing device, each computing device including a processor and memory; The processor of the at least one computing device is configured to execute instructions stored in the memory of the at least one computing device to cause the cluster of computing devices to perform the method as described in any one of claims 1 to 10.

13. A computer program product containing instructions, characterized in that, When the instruction is executed by the computing device cluster, the computing device cluster performs the method as described in any one of claims 1 to 10.

14. A computer-readable storage medium, characterized in that, It includes computer program instructions, which, when executed by a cluster of computing devices, perform the method as described in any one of claims 1 to 10.

Images