Method, apparatus, device and storage medium for generating encoding
By generating intermediate design representations and component recognition models, the problem of converting interface design data of custom DSL languages into executable code in cross-platform development is solved, achieving alignment between the interface structure and the target language, and improving the quality of generated code and cross-platform adaptability.
Patent Information
- Application Number
- CN202610778662.4
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2026-06-01
- Publication Date
- 2026-08-25
AI Technical Summary
In cross-platform development, existing technologies struggle to efficiently and accurately convert interface design data for custom domain-specific languages into executable interface code. Traditional methods also exhibit weak structure in generating code within custom DSL language scenarios and fall short in terms of multi-format adaptation and unified structure conversion.
By acquiring interface design data, generating intermediate design representations, identifying layout and hierarchical relationships, updating the structured design representation using component recognition models, generating target code, and aligning the interface structure with the target computer language.
It improves the structural stability and semantic consistency of the generated code, enhances the adaptability of cross-platform development, and improves the readability and consistency of the generated code.
Smart Images

Figure CN122633180A_ABST
Abstract
Description
Technical Field
[0001] The exemplary embodiments disclosed herein generally relate to the field of information technology, and in particular to methods, apparatus, devices, and computer-readable storage media for generating codes. Background Technology
[0002] As software systems continue to evolve, the complexity and update frequency of graphical user interface (GUI) designs are constantly increasing, leading to a greater need for collaborative design and implementation during interface development. In practice, interface design is often separated from interface coding. Developers need to manually construct the interface structure and style based on the design drafts, which is not only time-consuming but also prone to errors. Furthermore, in the face of multi-platform and multi-language development environments, how to efficiently and accurately transform interface design content into executable interface code has become a crucial issue in the field of interface development. Summary of the Invention
[0003] In a first aspect of this disclosure, a method for generating encoding is provided. The method includes: acquiring interface design data for a target interface; generating an intermediate design representation based on the interface design data; generating a structured design representation with a hierarchical structure by identifying the layout and hierarchical relationships of at least one interface element in the intermediate design representation; updating the structured design representation by identifying at least one component in the structured design representation corresponding to a predetermined computer language using a component recognition model; and generating target encoding for the target interface based on the updated structured design representation, the target encoding having a format of the predetermined computer language.
[0004] In a second aspect of this disclosure, an apparatus for generating encoding is provided. The apparatus includes: an acquisition module configured to acquire interface design data for a target interface; an intermediate design representation generation module configured to generate an intermediate design representation based on the interface design data; a structured design representation generation module configured to generate a hierarchical structured design representation by identifying the layout and hierarchical relationships of at least one interface element in the intermediate design representation; an update module configured to update the structured design representation by identifying at least one component in the structured design representation corresponding to a predetermined computer language using a component recognition model; and an encoding generation module configured to generate target encoding for the target interface based on the updated structured design representation, the target encoding having a format of the predetermined computer language.
[0005] In a third aspect of this disclosure, an electronic device is provided. The electronic device includes at least one processing unit; and at least one memory coupled to the at least one processing unit and storing instructions for execution by the at least one processing unit, the instructions causing the electronic device to perform the method of the first aspect of this disclosure when executed by the at least one processing unit.
[0006] In a fourth aspect of this disclosure, a computer-readable storage medium is provided. This computer-readable storage medium stores a computer program that can be executed by a processor to perform the method according to a first aspect of this disclosure.
[0007] In a fifth aspect of this disclosure, a computer program product is provided, which is tangibly stored in a computer storage medium and includes computer-executable instructions that, when executed by a device, cause the device to perform the method according to a first aspect of this disclosure.
[0008] It should be understood that the content described in this section is not intended to limit the key or essential features of the embodiments of this disclosure, nor is it intended to restrict the scope of this disclosure. Other features of this disclosure will become readily apparent from the following description. Attached Figure Description
[0009] The above and other features, advantages, and aspects of the embodiments of this disclosure will become more apparent from the accompanying drawings and the following detailed description. In the drawings, the same or similar reference numerals denote the same or similar elements, wherein: Figure 1 A schematic diagram of an example environment in which embodiments of the present disclosure can be implemented is shown; Figure 2 A schematic diagram illustrating the process of generating codes according to some embodiments of the present disclosure is shown; Figure 3A A schematic diagram illustrating the process of generating intermediate design representations according to some embodiments of the present disclosure is shown; Figure 3B A schematic diagram illustrating the process of generating a structured design representation according to some embodiments of the present disclosure is shown; Figure 3C A schematic diagram illustrating the process of updating a structured design representation according to some embodiments of the present disclosure is shown; Figure 4 A flowchart of a process for generating codes according to some embodiments of the present disclosure is provided; Figure 5 A block diagram of an apparatus for generating codes according to some embodiments of the present disclosure is shown; and Figure 6 A block diagram of an electronic device in which one or more embodiments of the present disclosure may be implemented is shown. Detailed Implementation
[0010] It is understood that before using the technical solutions disclosed in the various embodiments of this disclosure, users should be informed of the types, scope of use, and usage scenarios of the personal information involved in this disclosure in an appropriate manner in accordance with relevant laws and regulations, and user authorization should be obtained.
[0011] For example, upon receiving a user's active request, a prompt message is sent to the user to explicitly inform them that the requested operation will require the acquisition and use of the user's personal information. This allows the user to independently choose whether to provide personal information to the software or hardware, such as the electronic device, application, server, or storage medium performing the operations of this disclosed technical solution, based on the prompt message.
[0012] As an optional but non-limiting implementation, in response to a user's active request, sending a prompt message to the user can be done via a pop-up window, where the prompt message can be presented in text format. Furthermore, the pop-up window can also include a selection control allowing the user to choose "agree" or "disagree" to provide personal information to the electronic device.
[0013] It is understood that the above notification and user authorization process are merely illustrative and do not constitute a limitation on the implementation of this disclosure. Other methods that comply with relevant laws and regulations may also be applied to the implementation of this disclosure.
[0014] It is understood that the data involved in this technical solution (including but not limited to the data itself, the acquisition or use of the data) shall comply with the requirements of relevant laws, regulations and related provisions.
[0015] Embodiments of this disclosure will now be described in more detail with reference to the accompanying drawings. While some embodiments of this disclosure are shown in the drawings, it should be understood that this disclosure can be implemented in various forms and should not be construed as limited to the embodiments set forth herein. Rather, these embodiments are provided to provide a more thorough and complete understanding of this disclosure. It should be understood that the accompanying drawings and embodiments of this disclosure are for illustrative purposes only and are not intended to limit the scope of protection of this disclosure.
[0016] In the description of embodiments of this disclosure, the term "comprising" and similar terms should be understood as open-ended inclusion, i.e., "including but not limited to". The term "based on" should be understood as "at least partially based on". The term "one embodiment" or "the embodiment" should be understood as "at least one embodiment". The term "some embodiments" should be understood as "at least some embodiments". Other explicit and implicit definitions may also be included below.
[0017] Figure 1A schematic diagram of an example environment 100 in which embodiments of the present disclosure can be implemented is shown. In this example environment 100, server 130 is capable of establishing a communication connection with one or more terminal devices (collectively or individually referred to as terminal device 110). At least one application 120 may be installed on terminal device 110. User 140 may interact with application 120 via terminal device 110 and / or an attachment device of terminal device 110. Application 120 may be a content presentation application, an online shopping application, or any other suitable application.
[0018] exist Figure 1 In environment 100, application 120 can also be accessed in other ways, such as through a webpage. If application 120 is active, terminal device 110 can display the interface 150 of application 120. Interface 150 may include various interfaces provided by application 120, such as content presentation interface, content creation interface, service request submission interface, request processing result interface, message interface, personal homepage, etc.
[0019] In some embodiments, terminal device 110 communicates with server 130 to provide services to application 120. Terminal device 110 can be any type of mobile terminal, fixed terminal, or portable terminal, including mobile phones, desktop computers, laptop computers, notebook computers, netbook computers, tablet computers, media computers, multimedia tablets, personal communication system (PCS) devices, personal navigation devices, personal digital assistants (PDAs), audio / video players, digital cameras / camcorders, positioning devices, television receivers, radio receivers, e-book devices, gaming devices, or any combination thereof, including accessories and peripherals of these devices or any combination thereof. In some embodiments, terminal device 110 can also support any type of user-facing interface (such as "wearable" circuitry). Server 130 can be various types of computing systems / servers capable of providing computing power, including but not limited to mainframes, edge computing nodes, computing devices in cloud environments, etc.
[0020] It should be understood that the structure and function of the various elements in environment 100 are described for illustrative purposes only and do not imply any limitation on the scope of this disclosure.
[0021] As briefly mentioned earlier, design-to-code (D2C) technology has been widely researched and applied in the field of automated interface development. Among related technologies, various implementation schemes have been developed for common front-end development languages such as web applications, which parse the design drafts and generate the corresponding coding structure.
[0022] However, traditional D2C methods are typically developed using general-purpose web languages or mature front-end frameworks, and their conversion logic is mostly built around fixed component models. For cross-platform development scenarios using custom domain-specific languages (DSLs), there are no mature automated implementation solutions available.
[0023] In practical applications, custom DSL languages that run across platforms (e.g., component-based languages used for unified cross-platform rendering) have syntax structures, component systems, and attribute expression methods that differ from general-purpose computer languages. Traditional logic-rule-driven D2C solutions often rely on fixed tag mappings and predefined structural rules, making it difficult to adapt to the component models and semantic structures of such custom languages.
[0024] For example, logic-based implementations typically translate layer information from the design draft directly into absolute layout structures or simple tag combinations. The resulting code is largely based on the surface information of the design draft, lacking a deep understanding of layout logic and component semantics. This leads to weak structure and poor maintainability in the generated code.
[0025] On the other hand, language model-based automatic generation technology is increasingly being applied to the field of code generation. This type of solution generates code directly from the design description or structural information using a language model. However, in scenarios involving custom DSL languages, general-purpose language models often lack a sufficient understanding of the specific language's grammatical features, component system, and cross-platform adaptation mechanisms, easily leading to grammatical errors or implementations inconsistent with the target language's best practices.
[0026] In terms of component recognition and complex layout reasoning, especially when there are a lot of absolute positioning, complex nesting levels, or irregular layouts in the design draft, traditional model generation solutions are still unstable in accurately identifying the hierarchical relationships between interface elements and the corresponding component types, resulting in large fluctuations in the accuracy of the generated results.
[0027] Furthermore, the interface design data generated by different design tools differ in data structure, node identification methods, and attribute representation. Traditional coding generation methods have limited capabilities in handling multi-format adaptation and unified structure conversion, thus affecting the consistency of subsequent coding generation.
[0028] In view of this, embodiments of this disclosure provide a scheme for generating encoding. According to embodiments of this disclosure, interface design data for a target interface is obtained; an intermediate design representation is generated based on the interface design data; a hierarchical structured design representation is generated by identifying the layout and hierarchical relationships of at least one interface element in the intermediate design representation; the structured design representation is updated by identifying at least one component in the structured design representation corresponding to a predetermined computer language using a component identification model; and a target encoding for the target interface is generated based on the updated structured design representation, the target encoding having a format of the predetermined computer language.
[0029] Therefore, a scheme for generating codes is provided. By uniformly converting interface design data to a unified format, an intermediate design representation is generated. This standardizes interface design data from different sources or in different formats, providing a consistent data foundation for subsequent structural analysis and semantic recognition. By identifying the layout and hierarchical relationships of interface elements, a structured design representation with a hierarchical structure is generated. Stable structural relationships can be extracted from the visual presentation information of the design draft, reducing structural ambiguity caused by absolute layouts or complex nested hierarchies in the design draft, and improving the accuracy of the interface structure expression.
[0030] Furthermore, by utilizing a component recognition model to identify interface elements in the structured design representation and updating the structured design representation to include component semantic information corresponding to a predetermined computer language, the interface structure can be aligned with the component system of the target language, thereby achieving automated mapping of interface semantics. Generating target code based on the structured design representation containing component semantic information ensures that the generated code is structurally consistent with the interface hierarchy and semantically conforms to the component expression methods of the target language, improving the readability, structure, and consistency of the generated code.
[0031] Figure 2 A schematic diagram of a code generation process 200 according to some embodiments of the present disclosure is shown. Process 200 can be implemented in environment 100, for example, process 200 can be implemented at server 130 or terminal device 110. It should be understood that the actions described with respect to server 130 can be performed at least partially by entities other than server 130, for example, at least partially by terminal device 110, other terminal devices, or other servers, or by server 130 in collaboration with the aforementioned devices; and vice versa. In the following discussion, reference will be made to… Figure 1 To describe process 200.
[0032] refer to Figure 2In some embodiments, the terminal device 110 can acquire interface design data 205 for the target interface. The interface design data 205 can be a data file exported by an interface design tool. For example, the interface design data 205 may include data describing the layer information, position information, size information, style information, attribute information, and nesting relationship of each interface element in the target interface, thereby reflecting the visual structure and constituent elements of the target interface.
[0033] In some embodiments, the interface design data 205 may originate from different design tools or platforms, and interface design data from different sources may differ in data structure, field definitions, and node identification methods. The interface design data 205 may include node labels for identifying element types, style fields for describing the visual appearance of elements, and layout fields for describing spatial location, among other information. Obtaining the interface design data 205 provides a raw data foundation for subsequent structural analysis and semantic transformation.
[0034] Continue to refer to Figure 2 In box 210, terminal device 110 can generate an intermediate design representation based on interface design data 205. The intermediate design representation can be a unified data representation obtained after parsing and standardizing the interface design data 205. In other words, the intermediate design representation can convert interface design data from different sources or in different formats into a unified data structure, enabling consistent structural analysis and processing in the future.
[0035] In some embodiments, the intermediate design representation may include key information extracted from the original interface design data 201, such as multiple interface elements and their corresponding attribute and relationship information. By generating the intermediate design representation, structural differences between different data sources can be eliminated while preserving the semantic information of the interface design data, providing a unified data foundation for subsequent identification of the layout and hierarchical relationships of interface elements.
[0036] As an example, Figure 3A A schematic diagram of a process 310 for generating intermediate design representations according to some embodiments of the present disclosure is shown. Figure 3A As shown, terminal device 110 can acquire input data 311. Input data 311 may include access addresses, file identification information, or interface call parameters related to interface design data 205. For example, input data 311 may be design data access addresses from different interface design tools, such as Uniform Resource Locators (URLs), design file identifiers, or authorization information required to obtain design data through an interface. Through input data 311, terminal device 110 can locate and access the interface design data 205 of the target interface.
[0037] In box 312, terminal device 110 can obtain interface design data 205 based on input data 311. For example, terminal device 110 can send a data request to the corresponding design platform based on the received URL, or read the design file from a local or remote storage system based on the file identifier, thereby obtaining the original design data related to the target interface.
[0038] In some embodiments, the terminal device 110 can identify at least one data source corresponding to the interface design data 205. For example, the terminal device 110 can determine the design tool or design platform from which the interface design data 205 originates by analyzing domain name information, interface identification information, or file format characteristics in the input data 311. This identification process may include format identification processing and URL parsing processing. For example, the terminal device 110 can identify the data source type based on specific fields in the access address, or determine the design tool type based on the file extension, data structure field characteristics, etc.
[0039] Furthermore, the terminal device 110 can convert interface design data corresponding to different data sources in the interface design data into an intermediate design representation with a unified format by calling the corresponding parsing module corresponding to at least one data source.
[0040] As an example, see reference Figure 3A The terminal device 110 can process the interface design data 205 through the parsing layer 313. The parsing layer 313 can be a processing layer used to perform structural parsing and field mapping on interface design data from different sources. For example, the parsing layer 313 can be used to convert heterogeneous data structures generated by different design tools into a unified data expression form, thereby eliminating structural differences between different sources.
[0041] like Figure 3A As shown, the parsing layer 313 may include multiple parsing modules, such as a first parsing module 313-1, a second parsing module 313-2, etc. Each parsing module may correspond to a specific data source type. For example, the first parsing module 313-1 may be used to parse data from a first design tool, and the second parsing module 313-2 may be used to parse data from a second design tool.
[0042] In some examples, each parsing module can parse and transform node fields, attribute fields, style fields, and hierarchical relationship fields according to the data structure characteristics of the corresponding design tool. For example, different design tools may use different field naming conventions and data nesting methods when describing interface elements. The parsing module can extract and rename the original fields, mapping semantically identical but differently named attributes to a unified field identifier. The parsing module can also reorganize data structures expressing hierarchical relationships from different sources to form a unified node hierarchy expression.
[0043] By calling the parsing module corresponding to the data source, the terminal device 110 can convert interface design data from different data sources into an intermediate design representation 314 with a unified format. The intermediate design representation 314 can be organized using a predefined data model, including, for example, a unified node type field, a unified set of attribute fields, and a unified hierarchical relationship description method. Generating a unified intermediate design representation 314 provides a consistent data foundation for subsequent interface element filtering, layout recognition, and component semantic recognition.
[0044] Continue to refer to Figure 2 In box 220, terminal device 110 can generate a structured design representation with a hierarchical structure by recognizing the layout and hierarchical relationships of at least one interface element in the intermediate design representation. In other words, after obtaining an intermediate design representation in a unified format, terminal device 110 can further analyze the spatial distribution and hierarchical nesting relationships between interface elements, thereby constructing a hierarchical data model that reflects the logical structure of the interface. Through this step, the visually-oriented organization in the original design data can be converted into a structured expression suitable for subsequent component recognition and encoding.
[0045] As an example, Figure 3B A schematic diagram of a process 320 for generating a structured design representation according to some embodiments of the present disclosure is shown. Figure 3B As shown, the intermediate design representation 321 obtained through the aforementioned process contains information on multiple interface elements (such as decorative blocks, redundant layers, container elements, text elements, icon elements, etc.) extracted from the interface design data 205. However, the intermediate design representation 321 at this point may still retain some organizational features of the original design tool. For example, different layers may be arranged in a tiled manner, and although there are spatial relationships between elements, a clear logical hierarchical structure has not yet been formed. Or, multiple visually related elements may be at the same level in the data structure, lacking clear grouping information. Therefore, it is necessary to further process the intermediate design representation to restore the layout and hierarchical structure of the interface.
[0046] In some embodiments, the terminal device 110 may filter the intermediate design representation 321 to identify at least one interface element. This filtering process can be used to clean and screen elements in the intermediate design representation, thereby removing redundant or weakly related elements and retaining core elements that are substantially meaningful for the construction of the interface structure. For example, decorative layers used only for visual embellishment may be removed, or duplicate auxiliary elements may be merged to reduce interference with subsequent structural analysis.
[0047] In some embodiments, the terminal device 110 can determine the corresponding weights of multiple interface elements in the intermediate design representation based on at least one of the following: the relative positional relationship between multiple elements, the corresponding alignment method of multiple elements, or the corresponding layout information of multiple elements. For example, the terminal device 110 can determine the degree of association between elements based on the relative positional relationship such as the horizontal or vertical spacing between elements, the overlap between element boundaries, and the distribution density of elements in their respective layers, and then determine the corresponding weight for each element.
[0048] In some examples, the terminal device 110 can determine the element's affiliation in the layout structure based on whether the elements are on the same alignment axis and whether they have a uniform alignment method, and then assign a corresponding weight to each element. Alternatively or additionally, the terminal device 110 can evaluate the structural stability of the elements based on their layout method (e.g., whether absolute positioning is used, whether adaptive constraints exist, etc.). Based on any one or a combination of the above factors, the terminal device 110 can determine a corresponding weight value for each interface element to represent the importance of that interface element in constructing the hierarchical structure.
[0049] In some embodiments, based on the corresponding weights of multiple interface elements, the terminal device 110 can filter the intermediate design representation 321 to determine at least one interface element. For example, the terminal device 110 can retain elements with weights higher than a preset threshold, or select core structural elements according to weight ranking, thereby obtaining a set of interface elements for structural reconstruction. Through this dynamic weight calculation and filtering mechanism, the influence of irrelevant elements on the hierarchical recognition process can be reduced while retaining key layout information.
[0050] Continue to refer to Figure 3B In box 322, terminal device 110 can identify the corresponding layout and hierarchical relationship of at least one interface element based on a predetermined layout pattern to generate a structured design representation 323 with a parent-child node hierarchy. For example, the predetermined layout pattern may include common interface organization methods such as container-content pattern, list pattern, grid pattern, card pattern, and form pattern. These layout patterns can describe the typical characteristics of interface elements in spatial arrangement and layout.
[0051] In some embodiments, the terminal device 110 can determine whether multiple elements constitute a hierarchical relationship based on their spatial adjacency, alignment, and relative size relationships, and organize them into parent-child node relationships. For example, if an interface element completely contains other interface elements in its spatial scope, that element can be identified as a parent node. If multiple elements are arranged according to the same direction and share alignment features, they can be classified into the same parent container node. If elements exhibit a nested wrapping relationship, the hierarchical nesting order can be determined based on the containing area.
[0052] Through the above processing, the visual structure, which largely employs absolute layout in intermediate design representation 321, can be transformed into a relative layout structure with a clear hierarchical relationship. Structured design representation 323 can be expressed in a hierarchical form, for example, through Extensible Markup Language (XML) files. Each node in structured design representation 323 can correspond to a single interface element, and the logical hierarchy between nodes expresses the relationships between interface elements. Compared to intermediate design representation 321, structured design representation 323 focuses more on expressing the logical structure and layout organization of the interface, providing a stable and semantically clear data foundation for the input of subsequent component recognition models. Through this processing, a transformation from a visually oriented data organization method to a logical structure-oriented data model can be achieved, thereby improving the accuracy and consistency of subsequent component recognition and encoding generation.
[0053] Continue to refer to Figure 2 In box 230, terminal device 110 can utilize a component recognition model to update the structured design representation by identifying at least one component in the structured design representation that corresponds to a predetermined computer language. In other words, after obtaining a structured design representation with layout and hierarchical relationships, terminal device 110 can further semantically align the interface structure with the component system of the target language (i.e., the predetermined computer language), thereby providing a semantic structural foundation for subsequent encoding generation.
[0054] In some embodiments, the predefined computer language can be a domain-specific language. For example, the predefined computer language can be a domain-specific language used for cross-platform interface development or unified rendering scenarios, and it has its own component tag system, attribute expression method, and hierarchical organization rules. Compared with general Web languages, the predefined computer language may have different syntactic features and component semantic structures. Therefore, a dedicated component identification mechanism is needed to map the design structure to components with the format of the predefined computer language.
[0055] As an example, Figure 3CA schematic diagram of a process 330 for updating a structured design representation according to some embodiments of the present disclosure is shown. Figure 3C As shown, the terminal device 110 can input the structured design representation 331 into the component recognition model 332. The component recognition model 332 can be used to establish a bridge between the structured design representation 331 and the component system of a predetermined computer language. For example, the terminal device 110 can construct a training dataset based on the correspondence between existing interface design data samples and component label data in a predetermined computer language format, and train a dedicated component recognition model 332 accordingly. Through this component recognition model 332, automatic mapping from general interface element structural features to component semantic labels in a predetermined computer language can be achieved.
[0056] In some examples, the component recognition model 332 may include a feature extraction layer 332-1, a semantic understanding layer 332-2, and an output layer 332-3. The feature extraction layer 332-1 can be used to extract structural and attribute features of interface elements from the structured design representation 331. For example, the feature extraction layer 332-1 can extract the element's hierarchical position, parent-child relationship information, relative layout features, size ratio information, and style attributes to form a feature vector representation of the element.
[0057] In some examples, the semantic understanding layer 332-2 can be used to perform semantic association analysis on the extracted features, thereby inferring the semantic category of interface elements within the component system of a predetermined computer language. For example, the semantic understanding layer 332-2 can determine whether a single element in the design representation constitutes a container component within the component system of a predetermined computer language based on structural features, whether an element constitutes a text-based component within the component system of a predetermined computer language based on style and text features, or whether an element corresponds to a specific functional component within the component system of a predetermined computer language based on icon features and interactive attributes.
[0058] In some examples, output layers 332-3 can be used to output one or more candidate component categories in a predetermined computer language format corresponding to at least one interface element. Each candidate component may include a corresponding component label identifier and related attribute mapping information.
[0059] In some embodiments, the terminal device 110 may utilize the component identification model 332 to determine multiple candidate components corresponding to one or more interface elements among at least one interface element. For example, for a container-type interface element, the model may output one or more possible predetermined computer language component types as candidate components.
[0060] In box 333, terminal device 110 can determine the corresponding matching scores between multiple candidate component categories and one or more interface elements. The matching scores can be calculated based on the confidence score of the model output, semantic similarity measurement results, or feature matching degree. Through the matching scores, the degree of fit between interface elements and each candidate component can be quantified.
[0061] In box 334, terminal device 110 can determine the component corresponding to one or more interface elements from multiple candidate components based on the corresponding matching score. For example, it can select the candidate component with the highest matching score as the final component type, or perform a secondary determination by combining structural context information when the score difference is small.
[0062] In box 335, terminal device 110 can update the structured design representation based on at least one component. The at least one component in the updated structured design representation has component labels and attribute information in a predetermined computer language format. For example, after completing component identification and determining the component type corresponding to each interface element, terminal device 110 can update the structured design representation to form a structured design representation containing component semantic information.
[0063] In some embodiments, in the updated structured design representation, at least one component may have component labels and attribute information in a predetermined computer language format. In other words, nodes that originally only contained structural features and visual attribute information of interface elements can be converted into component nodes with semantic identifiers in a predetermined computer language, thereby realizing the transition from "interface structure representation" to "language semantic representation".
[0064] In some embodiments, the terminal device 110 may, based on a predetermined mapping relationship, convert the corresponding node labels of at least one component in the structured design representation into component labels in a format with a predetermined computer language, and convert the corresponding attribute information of at least one component in the structured design representation into attribute information supported by the predetermined computer language.
[0065] In some examples, pre-defined mappings can be established to describe the correspondence between element identifiers in the structured design representation and component tags in a pre-defined computer language, as well as the correspondence between attribute fields in the structured design representation and attribute fields in the pre-defined computer language. For example, a container node identifier in the structured design representation can be mapped to a container component tag in the pre-defined computer language, the font size field can be mapped to a supported text attribute field in the pre-defined computer language, and spacing or margin information can be converted into layout attribute expressions in the pre-defined computer language.
[0066] In some examples, the attribute transformation process may include field renaming, unit conversion, attribute merging, or attribute splitting. For instance, if style information in a structured design representation is expressed in pixels, it can be converted to the corresponding size representation format according to the predefined computer language. If multiple style fields in a structured design representation correspond to a single attribute field in the predefined computer language, these fields can be merged. If a single field in a structured design representation needs to be split into multiple attributes in the predefined computer language, field splitting and transformation can be performed.
[0067] Alternatively or additionally, if attribute information exists in the structured design representation but is not supported by the intended computer language, it can be filtered or replaced during the conversion process to ensure that the generated component nodes only contain the set of attributes supported by the target language. This avoids generating invalid or incompatible attribute expressions, improving the executability and consistency of the final code.
[0068] Through the mapping and transformation between component tags and attribute information, the updated structured design representation can retain both the hierarchical structure of the interface and the component semantic features of the predetermined computer language. This semantic structured representation can serve as direct input to the subsequent encoding generation module, thereby ensuring that the generated target encoding remains consistent with the predetermined computer language in both structure and semantics.
[0069] Continue to refer to Figure 2 In box 240, terminal device 110 can generate target code for the target interface based on the updated structured design representation. The target code has a format in a predetermined computer language. After completing the semantic processing of the interface structure, target code with a predetermined computer language format can be generated based on the structured design representation containing component labels and attribute information.
[0070] In some examples, the target encoding can be code, such as source code text describing the hierarchy of UI components, property configurations, and layout logic. The generated code can then be used for subsequent compilation, interpretation, or cross-platform rendering.
[0071] In some embodiments, the terminal device 110 may generate at least one candidate code in a predetermined computer language format based on an updated structured design representation. Generating multiple candidate codes provides a basis for subsequent quality assessment and selection, thereby improving the stability and accuracy of the final generated result.
[0072] As an example, such as Figure 2As shown, terminal device 110 can generate a first candidate code 243 using a trained encoding generation model 241. The encoding generation model 241 can be a dedicated model trained for a predetermined computer language. The encoding generation model 241 can be trained based on encoding samples with a predetermined computer language format and constraint documents related to that language. For example, encoding samples from an existing business encoding repository can be used as training data, combined with syntactic structure information from a language structure specification document, to enable the encoding generation model 241 to learn the structural expressions and component syntax of the predetermined computer language.
[0073] As another example, terminal device 110 can utilize language model 242 to generate a second candidate code 244. The input prompts for language model 242 contain constraint information corresponding to a predetermined computer language. For example, language model 242 can be a general-purpose language generation model. During the generation process, structured design representations can be converted into contextual input prompts that the model can understand, and these prompts can contain constraint information corresponding to a predetermined computer language, such as language structure constraints, component usage constraints, and attribute expression constraints. By providing language model 242 with prompts containing constraint information, language model 242 can be guided to generate a second candidate code 244 that conforms to the syntax and expression of the predetermined computer language.
[0074] In box 245, terminal device 110 can determine a score for at least one candidate code based on predetermined evaluation criteria. Evaluation criteria may include syntactic integrity checks, structural consistency checks, component matching checks, or attribute validity checks. For example, terminal device 110 can determine whether a candidate code conforms to the syntactic structure of a predetermined computer language by parsing the candidate code. Terminal device 110 can compare the component hierarchy in the candidate code with the hierarchy in the structured design representation. Alternatively or additionally, terminal device 110 can verify whether the generated component tags and attributes are within the range supported by the predetermined computer language.
[0075] Furthermore, the terminal device 110 can generate a target code 246 based on the corresponding score. For example, the terminal device 110 can generate a comprehensive score based on the above-mentioned multiple evaluation dimensions to quantify the overall quality of the candidate codes. Furthermore, the terminal device 110 can select the candidate code with the highest score or that meets preset conditions from among the candidate codes as the target code 246.
[0076] In some examples, the terminal device 110 can select a single model generation method based on its configuration, or simultaneously enable multiple model generation candidate codes and select the best one through an evaluation mechanism. This approach enhances the controllability of the generation process and improves the consistency and stability of the generated results.
[0077] The aforementioned candidate code generation and evaluation methods complement the two generation paths of dedicated training models and general language models. On one hand, dedicated training models can learn the structural expression features of a predetermined computer language in real-world business scenarios. On the other hand, language models can provide strong generalization generation capabilities in complex or diverse scenarios. Combined with a candidate code quality evaluation mechanism, it can be ensured that the generated target code conforms to the requirements of the predetermined computer language in terms of syntactic structure, component usage, and attribute expression, thereby achieving controllability of the generation process and reliability of the generated structure.
[0078] In summary, in the embodiments of this disclosure, by constructing a structured and semantic conversion process from interface design data to target encoding, automatic alignment between interface structure information and a predetermined computer language component system is achieved.
[0079] On the one hand, by introducing a unified data parsing mechanism and intermediate design representation, interface design data from different sources can be standardized, eliminating the impact of differences in data structure. Furthermore, through intermediate design representation filtering and structured transformation mechanisms, the visual expressions in the original design data are converted into a hierarchical relative layout structure. This effectively reduces the interference of noise information such as absolute layouts and redundant nodes on subsequent processing, improving the structural stability and semantic consistency of the generated results from the source.
[0080] On the other hand, a component recognition model enables intelligent mapping between interface elements and predefined computer language components. Combined with a mapping and conversion mechanism between node labels and attribute information, the structured design representation possesses the semantic expressive capabilities of the predefined computer language, thereby ensuring the standardization and consistency of basic component usage in specific language scenarios within a custom domain. Furthermore, through candidate code generation and a merit-based output mechanism based on evaluation conditions, the generation process is kept controllable while improving the consistency between the generated code and daily development habits in terms of structural naming, syntactic expression, and component organization, thus enhancing the overall quality and maintainability of the generated code.
[0081] By employing the aforementioned hybrid architecture and phased semantic enhancement processing, not only is the stability of the generated code improved in terms of syntactic standardization and structural rationality, but the system's adaptability to complex interface scenarios and cross-platform development scenarios is also enhanced. Furthermore, the unified parsing layer's adaptability to multiple design data sources provides fundamental support for supporting diverse design tools and subsequent expansion with new design data, thereby improving cross-platform development efficiency while enhancing the system's scalability and sustainable evolution capabilities.
[0082] Figure 4A flowchart of a process 400 for generating codes according to some embodiments of the present disclosure is shown. Process 400 may be implemented in environment 100, for example, process 400 may be implemented at terminal device 110.
[0083] In box 410, terminal device 110 acquires interface design data for the target interface.
[0084] In box 420, terminal device 110 generates an intermediate design representation based on interface design data.
[0085] In box 430, terminal device 110 generates a hierarchical structured design representation by recognizing the layout and hierarchical relationship of at least one interface element in the intermediate design representation.
[0086] In box 440, terminal device 110 uses a component identification model to update the structured design representation by identifying at least one component in the structured design representation that corresponds to a predetermined computer language.
[0087] In box 450, terminal device 110 generates target code for the target interface based on an updated structured design representation, the target code having a format of a predetermined computer language.
[0088] In some embodiments, generating an intermediate design representation includes: identifying at least one data source corresponding to the interface design data; and converting the interface design data corresponding to different data sources in the interface design data into an intermediate design representation with a unified format by calling the corresponding parsing module corresponding to the at least one data source.
[0089] In some embodiments, generating a structured design representation includes: filtering an intermediate design representation to determine at least one interface element; and identifying the corresponding layout and hierarchical relationship of at least one interface element based on a predetermined layout pattern to generate a structured intermediate representation with a parent-child node hierarchy, wherein at least one node in the parent-child node hierarchy corresponds to at least one interface element.
[0090] In some embodiments, determining at least one interface element includes: determining the corresponding weights of a plurality of interface elements in an intermediate design representation based on at least one of the following: the relative positional relationship between the plurality of elements, the corresponding alignment of the plurality of elements, or the corresponding layout information of the plurality of elements; and filtering the intermediate design representation based on the corresponding weights of the plurality of interface elements to determine at least one interface element.
[0091] In some embodiments, updating the structured design representation includes: inputting the structured design representation into a component identification model; using the component identification model to determine at least one component corresponding to at least one interface element; and updating the structured design representation based on at least one component, wherein at least one component in the updated structured design representation has component labels and attribute information in a predetermined computer language format.
[0092] In some embodiments, updating the structured design representation includes: converting the corresponding node labels of at least one component in the structured design representation into component labels in a format having a predetermined computer language based on a predetermined mapping relationship, and converting the corresponding attribute information of at least one component in the structured design representation into attribute information supported by the predetermined computer language.
[0093] In some embodiments, determining at least one component includes: for one or more interface elements among at least one interface element, determining a plurality of candidate components corresponding to the one or more interface elements; determining a matching score between the plurality of candidate component categories and the one or more interface elements; and determining a component corresponding to the one or more interface elements from the plurality of candidate components based on the matching score.
[0094] In some embodiments, generating a target code includes: generating at least one candidate code in a format having a predetermined computer language based on an updated structured design representation; determining a score for the at least one candidate code based on predetermined evaluation criteria; and generating a target code based on the score.
[0095] In some embodiments, generating at least one candidate code includes: generating a first candidate code using a trained code generation model, the code generation model being trained based on code samples in a format having a predetermined computer language and constraint documents; and generating a second candidate code using a language model, the input prompts of the language model containing constraint information corresponding to the predetermined computer language.
[0096] Figure 5 A block diagram of an apparatus 500 for generating codes according to some embodiments of the present disclosure is shown. The apparatus 500 may be implemented as or include a terminal device 110.
[0097] The apparatus 500 includes an acquisition module 510 configured to acquire interface design data for a target interface; an intermediate design representation generation module 520 configured to generate an intermediate design representation based on the interface design data; a structured design representation generation module 530 configured to generate a structured design representation with a hierarchical structure by identifying the layout and hierarchical relationship of at least one interface element in the intermediate design representation; an update module 540 configured to update the structured design representation by identifying at least one component in the structured design representation corresponding to a predetermined computer language using a component recognition model; and an encoding generation module 550 configured to generate target encoding for the target interface based on the updated structured design representation, the target encoding having a format of a predetermined computer language.
[0098] The modules included in device 500 can be implemented in various ways, including software, hardware, firmware, or any combination thereof. In some embodiments, one or more units can be implemented using software and / or firmware, such as machine-executable instructions stored on a storage medium. In addition to or as an alternative to machine-executable instructions, some or all of the units in device 500 can be implemented at least partially by one or more hardware logic components. By way of example and not limitation, exemplary types of hardware logic components that can be used include field-programmable gate arrays (FPGAs), application-specific integrated circuits (ASICs), application-specific standard products (ASSPs), systems-on-chips (SoCs), complex programmable logic devices (CPLDs), and so on.
[0099] Figure 6 A block diagram of an electronic device 600 in which one or more embodiments of the present disclosure may be implemented is shown. It should be understood that... Figure 6 The electronic device 600 shown is merely exemplary and should not be construed as limiting the functionality and scope of the embodiments described herein.
[0100] like Figure 6 As shown, electronic device 600 is in the form of a general-purpose electronic device. Components of electronic device 600 may include, but are not limited to, one or more processors or processing units 610, memory 620, storage device 630, one or more communication units 640, one or more input devices 650, and one or more output devices 660. Processing unit 610 may be a physical or virtual processor and is capable of performing various processes according to programs stored in memory 620. In a multiprocessor system, multiple processing units execute computer-executable instructions in parallel to improve the parallel processing capability of electronic device 600.
[0101] Electronic device 600 typically includes multiple computer storage media. Such media can be any available media accessible to electronic device 600, including but not limited to volatile and non-volatile media, removable and non-removable media. Memory 620 can be volatile memory (e.g., registers, cache, random access memory (RAM)), non-volatile memory (e.g., read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory), or some combination thereof. Storage device 630 can be removable or non-removable media and can include machine-readable media, such as flash drives, disks, or any other media capable of storing information and / or data and accessible within electronic device 600.
[0102] Electronic device 600 may further include additional removable / non-removable, volatile / non-volatile storage media. Although not explicitly stated... Figure 6 As shown, disk drives for reading from or writing to removable, non-volatile disks (e.g., "floppy disks") and optical disk drives for reading from or writing to removable, non-volatile optical disks can be provided. In these cases, each drive can be connected to a bus (not shown) via one or more data media interfaces. Memory 620 may include computer program product 625 having one or more program modules configured to perform various methods or actions of various embodiments of this disclosure.
[0103] The communication unit 640 enables communication with other electronic devices via a communication medium. Additionally, the functionality of the components of the electronic device 600 can be implemented using a single computing cluster or multiple computing machines capable of communicating via communication connections. Therefore, the electronic device 600 can operate in a networked environment using logical connections to one or more other servers, networked personal computers (PCs), or another network node.
[0104] Input device 650 can be one or more input devices, such as a mouse, keyboard, trackball, etc. Output device 660 can be one or more output devices, such as a monitor, speaker, printer, etc. Electronic device 600 can also communicate with one or more external devices (not shown) via communication unit 640 as needed. These external devices include storage devices, display devices, etc., and can communicate with one or more devices that enable user interaction with electronic device 600, or with any device that enables electronic device 600 to communicate with one or more other electronic devices (e.g., network card, modem, etc.). Such communication can be performed via input / output (I / O) interfaces (not shown).
[0105] According to an exemplary implementation of this disclosure, a computer-readable storage medium is provided that stores one or more computer instructions, wherein the one or more computer instructions are executed by a processor to implement the methods described above. According to an exemplary implementation of this disclosure, a computer program product is also provided, which is tangibly stored on a non-transient computer-readable medium and includes computer-executable instructions that are executed by a processor to implement the methods described above.
[0106] Various aspects of this disclosure are described herein with reference to flowchart illustrations and / or block diagrams of methods, apparatus (systems), and computer program products implemented according to this disclosure. It should be understood that each block of the flowchart illustrations and / or block diagrams, and combinations of blocks in the flowchart illustrations and / or block diagrams, can be implemented by computer-readable program instructions.
[0107] These computer-readable program instructions can be provided to a processing unit of a general-purpose computer, a special-purpose computer, or other programmable generative coding apparatus to produce a machine such that, when executed by the processing unit of the computer or other programmable generative coding apparatus, they create means for implementing the functions / actions specified in one or more blocks of the flowchart and / or block diagram. These computer-readable program instructions can also be stored in a computer-readable storage medium that causes a computer, programmable generative coding apparatus, and / or other device to operate in a particular manner. Thus, the computer-readable medium storing the instructions comprises an article of manufacture that includes instructions for implementing aspects of the functions / actions specified in one or more blocks of the flowchart and / or block diagram.
[0108] Computer-readable program instructions may also be loaded onto a computer, other programmable generative coding apparatus, or other device to cause a series of operational steps to be performed on the computer, other programmable generative coding apparatus, or other device to produce a computer-implemented process, thereby causing the instructions executed on the computer, other programmable generative coding apparatus, or other device to perform the functions / actions specified in one or more blocks of a flowchart and / or block diagram.
[0109] The flowcharts and block diagrams in the accompanying drawings illustrate the architecture, functionality, and operation of possible implementations of systems, methods, and computer program products according to various embodiments of this disclosure. In this regard, each block in a flowchart or block diagram may represent a module, segment, or portion of an instruction, which contains one or more executable instructions for implementing the specified logical function. In some alternative implementations, the functions indicated in the blocks may occur in a different order than those indicated in the drawings. For example, two consecutive blocks may actually be executed substantially in parallel, and they may sometimes be executed in reverse order, depending on the functions involved. It should also be noted that each block in the block diagrams and / or flowcharts, and combinations of blocks in the block diagrams and / or flowcharts, may be implemented using a dedicated hardware-based system that performs the specified function or action, or using a combination of dedicated hardware and computer instructions.
[0110] Various implementations of this disclosure have been described above. The foregoing description is exemplary and not exhaustive, nor is it limited to the disclosed implementations. Many modifications and variations will be apparent to those skilled in the art without departing from the scope and spirit of the described implementations. The terminology used herein is chosen to best explain the principles, practical applications, or improvements to technology in the market, or to enable others skilled in the art to understand the implementations disclosed herein.
Claims
1. A method for generating codes, comprising: Obtain the interface design data for the target interface; Based on the interface design data, an intermediate design representation is generated; By identifying the layout and hierarchical relationship of at least one interface element in the intermediate design representation, a structured design representation with a hierarchical structure is generated. By using a component identification model, the structured design representation is updated by identifying at least one component in the structured design representation that corresponds to a predetermined computer language; as well as Based on the updated structured design representation, target encoding of the target interface is generated, the target encoding having the format of the predetermined computer language.
2. The method of claim 1, wherein generating the intermediate design representation comprises: Identify at least one data source corresponding to the interface design data; as well as By calling the corresponding parsing module corresponding to the at least one data source, the interface design data corresponding to different data sources in the interface design data is converted into the intermediate design representation with a unified format.
3. The method of claim 1, wherein generating the structured design representation comprises: The intermediate design representation is filtered to determine the at least one interface element; as well as Based on a predetermined layout pattern, the corresponding layout and hierarchical relationship of the at least one interface element is identified to generate the structured intermediate representation with a parent-child node hierarchy, wherein at least one node in the parent-child node hierarchy corresponds to the at least one interface element.
4. The method of claim 3, wherein determining the at least one interface element comprises: The weights of multiple interface elements in the intermediate design representation are determined based on at least one of the following: The relative positional relationship between the multiple elements The corresponding alignment of the multiple elements, or The corresponding layout information of the multiple elements; as well as The intermediate design representation is filtered based on the corresponding weights of the plurality of interface elements to determine at least one interface element.
5. The method of claim 1, wherein updating the structured design representation comprises: The structured design representation is input into the component identification model; Using the component recognition model, at least one component corresponding to the at least one interface element is determined; as well as Based on the at least one component, the structured design representation is updated, wherein at least one component in the updated structured design representation has component labels and attribute information in the format of the predetermined computer language.
6. The method of claim 5, wherein updating the structured design representation comprises: Based on a predetermined mapping relationship, the corresponding node labels of at least one component in the structured design representation are converted into component labels in the format of the predetermined computer language, and the corresponding attribute information of at least one component in the structured design representation is converted into attribute information supported by the predetermined computer language.
7. The method of claim 5, wherein determining the at least one component comprises: For one or more interface elements among the at least one interface element, determine multiple candidate components corresponding to the one or more interface elements; Determine the corresponding matching score between the multiple candidate component categories and the one or more interface elements; as well as Based on the corresponding matching score, a component corresponding to one or more interface elements is determined from the plurality of candidate components.
8. The method of claim 1, wherein generating the target code comprises: Based on the updated structured design representation, at least one candidate code having the format of the predetermined computer language is generated; The corresponding score for the at least one candidate code is determined based on predetermined evaluation conditions; as well as The target code is generated based on the corresponding score.
9. The method of claim 8, wherein generating the at least one candidate code comprises: A first candidate code is generated using a trained code generation model, which is trained based on code samples in the format of the predetermined computer language and constrained documents; as well as A second candidate code is generated using a language model, wherein the input prompts of the language model contain constraint information corresponding to the predetermined computer language.
10. An apparatus for generating codes, comprising: The acquisition module is configured to acquire interface design data for the target interface; The intermediate design representation generation module is configured to generate an intermediate design representation based on the interface design data; The structured design representation generation module is configured to generate a hierarchical structured design representation by identifying the layout and hierarchical relationship of at least one interface element in the intermediate design representation. The update module is configured to utilize a component identification model to update the structured design representation by identifying at least one component in the structured design representation that corresponds to a predetermined computer language; as well as The encoding generation module is configured to generate target encoding for the target interface based on an updated structured design representation, the target encoding having the format of the predetermined computer language.
11. An electronic device, comprising: At least one processing unit; as well as At least one memory is coupled to at least one processing unit and stores instructions for execution by the at least one processing unit, which, when executed by the at least one processing unit, cause the electronic device to perform the method according to any one of claims 1 to 9.
12. A computer-readable storage medium having a computer program stored thereon, the computer program being executable by a processor to implement the method according to any one of claims 1 to 9.
13. A computer program product tangibly stored in a computer storage medium and comprising computer-executable instructions that, when executed by a device, cause the device to perform the method according to any one of claims 1 to 9.