Code generation method and device, electronic equipment and computer readable storage medium

Abstract

The invention discloses a code generation method and device, electronic equipment and a computer readable storage medium, and relates to the technical field of computers, the code generation method and device can be used for code generation of an interactive interface, and a visual draft of the interactive interface is obtained and comprises a control design drawing of a control in the interactive interface; according to the control design drawing, a view tree corresponding to the visual draft is created, the view tree comprises control nodes corresponding to the controls, and the control nodes comprise control layout information of the controls and element type information and element layout information of sub-elements in the controls; the control layout information, the element type information and the element layout information corresponding to the control nodes are converted into visual images; according to the visual images corresponding to different control nodes, identifying loop list control nodes from the view tree; and according to the identified loop list control node, updating a view tree, and according to the updated view tree, generating an interface code of the interactive interface. Compared with the prior art, the generation efficiency and accuracy of the interface code can be improved.

Description

Technical Field

[0001] The present application relates to the field of computers, and in particular to a code generation method, a code generation device, an electronic device, and a computer-readable storage medium. Background Art

[0002] The interactive interface (also known as the user interface) serves as a bridge for human-computer interaction and needs to be completed jointly by visual designers and front-end development engineers. The visual designer provides the visual draft of the interactive interface, which is a static design file of the interactive interface, and the front-end development engineer converts the visual draft into executable interface code.

[0003] Currently, when converting a visual draft into code, the relevant technology requires manual review of the visual draft, identifying the circular list controls (controls that display the same type of elements in the interactive interface), labeling them, and then converting the visual draft into code based on the marked circular list controls. However, manual review is prone to visual fatigue, and there are problems with mislabeling or missing labels for circular list controls. In addition, manual review is relatively inefficient, ultimately affecting the efficiency and accuracy of interface code generation. Summary of the Invention

[0004] The embodiments of the present application provide a code generation method, a code generation device, an electronic device, and a computer-readable storage medium, which can improve the generation efficiency and accuracy of interface code.

[0005] In a first aspect, the code generation method provided by this application includes:

[0006] Obtain a visual draft of the interactive interface, which includes control design drawings of controls in the interactive interface;

[0007] Create a view tree of the corresponding visual draft according to the control design drawing. The view tree includes the control node of the corresponding control. The control node includes the control layout information of the control, the element type information and element layout information of the sub-elements in the control.

[0008] Convert control layout information, element type information, and element layout information corresponding to the control node into a visual image;

[0009] According to the visual images corresponding to different control nodes, identify the circular list control nodes from the view tree;

[0010] According to the identified circular list control nodes, the view tree is updated, and according to the updated view tree, the interface code of the interactive interface is generated.

[0011] In a second aspect, the code generation device provided by the present application includes:

[0012] A visual draft acquisition module is used to obtain a visual draft of the interactive interface, the visual draft including control design drawings of the controls in the interactive interface;

[0013] The view tree creation module is used to create a view tree of the corresponding visual draft according to the control design drawing. The view tree includes the control node of the corresponding control. The control node includes the control layout information of the control, the element type information and element layout information of the sub-elements in the control;

[0014] A visualization module, used to convert control layout information, element type information, and element layout information corresponding to a control node into a visualization image;

[0015] A node identification module is used to identify the circular list control nodes from the view tree according to the visual images corresponding to different control nodes;

[0016] The code generation module is used to update the view tree according to the identified circular list control nodes, and generate the interface code of the interactive interface according to the updated view tree.

[0017] Optionally, in one embodiment, the visualization module is used to create a solid color image with the same size as the control corresponding to the control node and a preset color according to the control layout information corresponding to the control node; and to add a solid color block corresponding to the element type information to the solid color image according to the element layout information corresponding to the control node to obtain a visualization image.

[0018] Optionally, in one embodiment, the node identification module is used to perform feature encoding on visual images corresponding to different control nodes to obtain feature strings of different control nodes; and to determine a set of control nodes whose feature strings have a pairwise similarity that reaches a preset similarity, and determine the control nodes corresponding to the control node set as circular list control nodes.

[0019] Optionally, in one embodiment, the node identification module is used to convert the visual images corresponding to different control nodes into a two-dimensional matrix through discrete cosine transform; and reduce the two-dimensional matrix corresponding to different control nodes to a one-dimensional matrix, and encode the one-dimensional matrix corresponding to different control nodes into a feature string.

[0020] Optionally, in one embodiment, the node identification module is used to perform binarization processing on the one-dimensional matrix corresponding to different control nodes to obtain a processed matrix, and the matrix elements of the processed matrix are 0 or 1; and to perform base conversion on the processed matrix corresponding to different control nodes according to a preset base to obtain a feature character string.

[0021] Optionally, in one embodiment, the node identification module is used to calculate the mean of the matrix elements in the one-dimensional matrix corresponding to different control nodes; and for the one-dimensional matrix corresponding to different control nodes, the matrix elements greater than the corresponding mean are set to 1, and the matrix elements less than or equal to the corresponding mean are set to zero, to obtain a processed matrix.

[0022] Optionally, in one embodiment, the code generation module is used to add a new list node in the view tree, and update the circular list control node to a child node of the list node to obtain an updated view tree; and based on the updated view tree, generate a prompt statement for indicating the control code of the control output by the large language model; and input the prompt statement into the large language model to obtain the control code of the control output by the large language model; and based on the control code of the control, obtain the interface code of the interactive interface.

[0023] In a third aspect, the electronic device provided in this application includes a memory and a processor, the memory stores a computer program, and the processor is used to run the computer program in the memory to implement the steps in the code generation method provided in this application.

[0024] In a fourth aspect, the computer-readable storage medium provided in the present application stores a computer program, which is suitable for being executed by a processor to implement the steps in the code generation method provided in the present application.

[0025] The code generation solution provided in this application obtains a visual draft of an interactive interface, the visual draft including a control design drawing of a control in the interactive interface; creates a view tree corresponding to the visual draft based on the control design drawing, the view tree including a control node corresponding to the control, the control node including control layout information of the control, element type information and element layout information of the sub-elements in the control; converts the control layout information, element type information and element layout information corresponding to the control node into a visual image; identifies a circular list control node from the view tree based on the visual images corresponding to different control nodes; updates the view tree based on the identified circular list control node, and generates interface code for the interactive interface based on the updated view tree. In this way, by automatically identifying the circular list control in the interactive interface, manual review can be replaced, and recognition efficiency can be improved. In addition, during the automated recognition process, the control layout information of the control, the element type information and element layout information of the sub-elements in the control are extracted from the original control design drawing and converted into a visual image, which can eliminate the interference of the element content in the original control design drawing and avoid the visual fatigue of manual review, thereby doubly ensuring the accuracy of automated recognition and ultimately achieving the purpose of improving the generation efficiency and accuracy of interface code. BRIEF DESCRIPTION OF THE DRAWINGS

[0026] In order to more clearly illustrate the technical solutions in the embodiments of the present application, the following briefly introduces the drawings required for use in the description of the embodiments. Obviously, the drawings described below are only some embodiments of the present application. For those skilled in the art, other drawings can be obtained based on these drawings without creative work.

[0027] Figure 1a This is a schematic diagram of a scenario of a code generation system provided by an embodiment of the present application;

[0028] Figure 1b Schematic diagram of the code generation method provided in the embodiment of the present application;

[0029] Figure 1c This is a flowchart of creating a view tree in an embodiment of the present application;

[0030] Figure 1d This is an example diagram of visual conversion in an embodiment of the present application;

[0031] Figure 2 This is another flowchart of the code generation method provided in an embodiment of the present application;

[0032] Figure 3 Schematic diagram of a code generation device provided in an embodiment of the present application;

[0033] Figure 4 It is a structural diagram of an electronic device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0034] It should be noted that the principles of this application are illustrated by implementing them in an appropriate computing environment. The following description is based on the illustrated specific embodiments of this application and should not be considered as limiting other specific embodiments not described in detail herein.

[0035] In the following description of this application, reference is made to “some embodiments”, which describe a subset of all possible embodiments, but it can be understood that “some embodiments” may be the same subset or different subsets of all possible embodiments, and may be combined with each other without conflict.

[0036] In the following description of this application, the terms "first\second\third" involved are merely used to distinguish similar objects and do not represent a specific ordering of the objects. It can be understood that "first\second\third" can be interchanged with a specific order or sequence where permitted, so that the embodiments of the present application described herein can be implemented in an order other than that illustrated or described herein.

[0037] Unless otherwise defined, all technical and scientific terms used herein have the same meaning as commonly understood by those skilled in the art to which this application pertains. The terms used herein are for the purpose of describing the embodiments of this application only and are not intended to limit this application.

[0038] In order to avoid the visual fatigue and low review efficiency of manual review of visual drafts and to improve the efficiency and accuracy of generating interface code for interactive interfaces, the present application provides a code generation method, a code generation device, an electronic device, and a computer-readable storage medium. The code generation method can be executed by the code generation device or by an electronic device incorporating the code generation device.

[0039] The following will be combined with the drawings in the embodiments of this application to clearly and completely describe the technical solutions in the embodiments of this application. Obviously, the embodiments described below are only part of the embodiments of this application, not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without making creative efforts are within the scope of protection of this application.

[0040] Please refer to Figure 1a The present application also provides a code generation system, which includes an electronic device 100 for executing the code generation method provided by the present application. The electronic device 100 can be a device equipped with a processor and having data processing capabilities, such as a personal desktop computer, a server, etc., wherein when executing the code generation method provided by the present application, firstly, a visual draft of the interactive interface is obtained, and the visual draft includes a control design drawing of the view control in the interactive interface; then, based on the control design drawing, a view tree corresponding to the visual draft is created, and the view tree includes a control node of the corresponding control, and the control node includes control layout information of the control, element type information and element layout information of the sub-element in the control; then, the control layout information, element type information and element layout information corresponding to the control node are converted into a visual image; and according to the similarity between the visual images corresponding to different control nodes, a circular list control node is identified from the view tree; finally, based on the identified circular list control node, the view tree is updated, and based on the updated view tree, the interface code of the interactive interface is generated.

[0041] In addition, if Figure 1a As shown, the code generation system may also include a memory 200 for storing relevant data in the code generation process, such as original data such as the visual draft of the interactive interface obtained, intermediate data such as the view tree of the created visual draft, the converted visual image, and result data such as the final generated interface code.

[0042] It should be noted that the code generation system described above is merely an example, which is intended to more clearly illustrate the technical solution of the embodiment of the present application and does not constitute a limitation on the technical solution provided in the embodiment of the present application. A person skilled in the art will appreciate that, with the evolution of the code generation system and the emergence of new business scenarios, the technical solution provided in the embodiment of the present application is also applicable to similar technical problems.

[0043] It should be noted that the serial numbers of the following embodiments are not intended to limit the preferred order of the embodiments.

[0044] Please refer to Figure 1b , this embodiment provides a code generation method, such as Figure 1b As shown, the process of the code generation method is as follows:

[0045] In 110 , a visual draft of the interactive interface is obtained, where the visual draft includes control design drawings of controls in the interactive interface.

[0046] An interactive interface (also known as a user interface, or UI) is the medium for interaction and information exchange between humans and machines. It converts information from its internal form into a form that humans can understand. The purpose of an interactive interface is to enable operators to conveniently and efficiently operate hardware to achieve two-way interaction and complete the desired tasks. Interactive interfaces exist in all areas of human-computer interaction. For example, an interactive interface can be the system interface of an electronic device or the interface within various applications installed on that device.

[0047] The implementation of the interactive interface includes two parts of work, namely interface design and coding design. Among them, in the interface design stage, a visual designer usually draws a visual draft of the interactive interface. The visual draft is a static design file of the interactive interface, including the control design drawings of the controls in the interactive interface. In layman's terms, the visual draft is the static presentation of the interactive interface. What the visual draft looks like will determine what the final interactive interface looks like. In the coding design stage, the visual draft is coded, that is, the executable interface code of the interactive interface is generated. The code generation method provided in this application is aimed at the coding design stage.

[0048] In an embodiment of the present application, a visual draft of the interactive interface is first obtained, and the file type of the visual draft depends on the design tool used for its drawing. At present, the visual drafts of commonly used interactive interfaces are usually drawn using vector design tools, such as Sketch tools, Photoshop tools, and Adobe XD tools. Among them, the file format of the visual draft drawn by the Sketch tool is ".sketch", the file format of the visual draft drawn by the Photoshop tool is ".PSD", and the file format of the visual draft drawn by the Adobe XD tool is ".xd".

[0049] In 120 , a view tree corresponding to the visual draft is created according to the control design drawing. The view tree includes a control node corresponding to the control. The control node includes control layout information of the control, element type information and element layout information of sub-elements in the control.

[0050] It should be noted that in practice, visual designers use the basic element overlays in vector drawing tools to describe the visual effect of a control. That is to say, the sub-elements of the control design drawing that make up the control will be distributed on different layers of the visual draft.

[0051] Please refer to Figure 1c In order to improve processing efficiency in the embodiment of the present application, the visual draft is also subjected to layer smoothing (or layer merging) processing, and the sub-layer elements are attached to the upper-level parent layer. The original layers of the visual draft are traversed in sequence to compress them into two-level layers, where the first-level layer is the root layer, and different sub-elements of the control design drawing of the same control are merged into the second-level layer, that is, the second-level layer includes the complete control design drawing of the control in the interactive interface.

[0052] After the layer is smoothed, the key control information of the control in the interactive interface is extracted according to the control design drawing in the secondary layer, including the control type information, control layout information, and element type information and element layout information of the sub-elements in the control, as well as attribute information such as fill information, corner fill information, shadow information, and stroke. Among them, the control type information of the control is used to describe what type of control the control is, the control layout information is used to describe the position of the control in the interactive interface and its length and width, the element type information is used to describe the type of sub-elements in the control, and the element layout information is used to describe the position of the sub-elements in the control and its length and width. For example, the element type information of a sub-element in a certain control is "text", which describes the sub-element as a text element, and the element layout information is (x, y, width, height), where (x, y) represents the horizontal and vertical coordinates of the sub-element, width represents the width of the sub-element, and height represents the height of the sub-element.

[0053] After extracting the control's key information, control nodes are created based on this information, resulting in a control tree consisting of control nodes corresponding to different controls. This control tree can reflect the structural relationships between controls. For example, the root node of the view tree corresponds to the first-level layer, also known as the root layer. The first-level child nodes, or control nodes, correspond to the control design drawings (i.e., controls) in the second-level layer. The second-level child nodes correspond to the sub-elements of the control, and so on. The connection relationships between nodes in the view tree reflect the structural relationships between controls.

[0054] In 130 , the control layout information, element type information, and element layout information corresponding to the control node are converted into a visual image.

[0055] It is understandable that a control is usually composed of multiple different types of sub-elements. For example, a control is composed of an image sub-element and three text sub-elements. These sub-elements are arranged in a way that conforms to visual aesthetics to form the visual presentation of the control.

[0056] In the embodiments of the present application, to eliminate interference from the content of sub-elements themselves, the control layout information of the control corresponding to the control node, as well as the element type information and element layout information of the sub-elements in the control, are visually converted according to the configured visualization strategy. The control layout information of the control and the element type information and element layout information of the sub-elements therein are represented by an image to obtain a corresponding visualization image. The configuration of the visualization strategy is not specifically limited.

[0057] Optionally, in one embodiment, an optional visualization strategy is provided, wherein the control layout information, element type information, and element layout information corresponding to the control node are converted into a visualization image, including:

[0058] According to the control layout information corresponding to the control node, create a solid color image with the same size as the control corresponding to the control node and the preset color;

[0059] According to the element layout information corresponding to the control node, a solid color block corresponding to the element type information is added to the solid color image to obtain a visual image.

[0060] In the embodiment of the present application, a solid color image is used to represent the control layout information of the control corresponding to the control node, and the element type information and element layout information of the sub-elements in the corresponding control.

[0061] First, based on the control layout information of the control corresponding to the control node, a solid color image with the same size as the control corresponding to the control node and a preset color is created. There is no specific limitation on the preset color configuration.

[0062] Then, based on the correspondence between element type information and color, the target color corresponding to the element type information of the sub-element in the control corresponding to the control node is determined, and based on the element layout information of the sub-element in the control corresponding to the control node, a solid color block with the same size as the sub-element and the target color is added to the solid color image to obtain a visual image.

[0063] For example, please refer to Figure 1d, shows a control design diagram of a control in an interactive interface. The control consists of two sub-elements, an image element and a text element. Assuming that the preset color is configured as white, the element type information "text" corresponds to a blue color, and the element type information "image" corresponds to a red color. Figure 1d As shown in the figure, through visual conversion, the control layout information is converted to a white background image of the same size as the control. The element type information (image) and element layout information (x1, y1, width1, height1) of the image element in the control are converted to red blocks of the same size. The element type information (text) and element layout information (x2, y2, width2, height2) of the text element in the control are converted to blue blocks of the same size. Compared to the original control design image, the visual image obtained by visual conversion eliminates the interference of the control element's own content.

[0064] In 140 , based on the similarity between the visual images corresponding to different control nodes, a circular list control node is identified from the view tree.

[0065] Based on the above description, it can be understood that the visual image of a control node visually presents the control layout information of the control, as well as the element type information and element layout information of the sub-elements within the control. Therefore, based on the similarity between the visual images corresponding to different control nodes, it is possible to identify whether different controls display the same elements in the same layout, thereby identifying the circular list control node corresponding to the circular list control. There is no specific limitation on how to measure the similarity between the visual images.

[0066] Optionally, in one embodiment, identifying the circular list control node from the view tree according to the similarity between the visual images corresponding to different control nodes includes:

[0067] Perform feature encoding on the visual images corresponding to different control nodes to obtain feature strings of different control nodes;

[0068] A control node set whose similarities between feature character strings reach a preset similarity is determined, and control nodes corresponding to the control node set are determined as circular list control nodes.

[0069] In the embodiment of the present application, when identifying a circular list control node, the visual images corresponding to different control nodes are feature-encoded according to the configured feature encoding strategy, thereby obtaining feature strings for the different control nodes. The configuration of the feature encoding strategy is not specifically limited herein.

[0070] As described above, after encoding the visual images corresponding to different control nodes into feature strings, the similarity between the feature strings corresponding to the different visual images is the similarity between the visual images. Similarly, the similarity between the feature strings of different control nodes is determined. For example, for any two feature strings, the Hamming distance between them is used as the similarity between the two feature strings, which is also the similarity between the corresponding visual images.

[0071] Afterwards, a control node set is determined in which the similarity between the feature character strings reaches a preset similarity, that is, the similarity between the feature character strings corresponding to any control nodes in the control node set reaches the preset similarity, and the control node corresponding to the control node set is determined as a circular list control node, and the control corresponding to the circular list control node is correspondingly determined as a circular list control.

[0072] Optionally, in one embodiment, determining the control node corresponding to the control node set as a circular list control node includes:

[0073] If the number of control nodes corresponding to the control node set reaches a quantity threshold, the control nodes corresponding to the control node set are determined as circular list control nodes.

[0074] Among them, there is no specific restriction on the value of the quantity threshold, and the technical personnel in this field can determine the value according to actual needs. The quantity threshold can be configured to 3, that is, when there are more than 3 controls displaying elements of the same type in the interactive interface, these controls displaying elements of the same type are determined as circular list controls.

[0075] Optionally, in one embodiment, feature encoding is performed on visual images corresponding to different control nodes to obtain feature character strings of different control nodes, including:

[0076] The visual images corresponding to different control nodes are converted into two-dimensional matrices through discrete cosine transform;

[0077] The two-dimensional matrices corresponding to different control nodes are reduced to one-dimensional matrices, and the one-dimensional matrices corresponding to different control nodes are encoded as feature strings.

[0078] The embodiment of the present application provides an optional feature encoding strategy. Among them, for the visual images corresponding to different control nodes, they are first converted into two-dimensional matrices of the same size through discrete cosine transform, and the size of the two-dimensional matrix is not specifically limited here. Exemplarily, the size of the conversion two-dimensional matrix can be dynamically determined based on the amount of processing resources currently available to the electronic device that executes the code generation method of the present application. For example, the more processing resources currently available, the larger the size of the determined conversion two-dimensional matrix, and the fewer processing resources currently available, the smaller the size of the determined conversion two-dimensional matrix. For example, when code is generated for a visual draft of an interactive interface, the size of the determined conversion two-dimensional matrix is 32*32.

[0079] As described above, after converting the visual images corresponding to different control nodes into two-dimensional matrices by discrete cosine transform, the two-dimensional matrices corresponding to the different control nodes are further reduced to one-dimensional matrices, i.e., one-dimensional arrays. The method of matrix dimensionality reduction is not specifically limited here. For example, the matrix elements of each row of the two-dimensional matrix can be arranged in row order, thereby reducing the two-dimensional matrix to a one-dimensional matrix. For example, for a 32*32 two-dimensional matrix, by arranging the matrix elements of each row in row order, the 32 rows of matrix elements are reduced to one row of matrix elements, resulting in a one-dimensional matrix consisting of 1024 matrix elements.

[0080] For the one-dimensional matrices corresponding to different control nodes, they can be encoded into feature strings using the configured character encoding method. There is no specific restriction on which character encoding method is sampled.

[0081] Optionally, in one embodiment, encoding the one-dimensional matrices corresponding to different control nodes into characteristic character strings includes:

[0082] Binarize the one-dimensional matrices corresponding to different control nodes to obtain a processed matrix, where the matrix elements are 0 or 1;

[0083] The processed matrices corresponding to different control nodes are converted into bases according to a preset base to obtain a feature string.

[0084] The embodiment of the present application provides an optional character encoding method. Among them, for the one-dimensional matrix corresponding to different control nodes, binarization processing is performed according to the configured binarization strategy to obtain a processed matrix, in which the matrix elements are 0 or 1; then the processed matrix is regarded as a binary number, and the processed matrix is converted according to a preset base that is not binary to obtain a feature string. There is no specific restriction on the configuration of the binarization strategy and the preset base. For example, the preset base can be configured as hexadecimal. Assuming that the processed matrix includes 1024 matrix elements, the processed matrix is converted to a base, and a 256-bit hexadecimal character string is obtained as the feature string.

[0085] Optionally, in one embodiment, binarization is performed on one-dimensional matrices corresponding to different control nodes to obtain a processed matrix, including:

[0086] Calculate the mean of the matrix elements in the one-dimensional matrix corresponding to different control nodes;

[0087] For the one-dimensional matrices corresponding to different control nodes, the matrix elements greater than the corresponding mean are set to 1, and the matrix elements less than or equal to the corresponding mean are set to zero to obtain the processed matrix.

[0088] An embodiment of the present application provides an optional binarization strategy, in which the binarization threshold of the one-dimensional matrix corresponding to different control nodes is first determined. For the one-dimensional matrices corresponding to different control nodes, the matrix elements greater than the corresponding binarization threshold are set to 1, and the matrix elements less than or equal to the corresponding binarization threshold are set to zero to obtain a processed matrix.

[0089] For example, in an embodiment of the present application, the mean of the matrix elements in the one-dimensional matrix corresponding to different control nodes is calculated as the binarization threshold; then, for the one-dimensional matrices corresponding to different control nodes, the matrix elements greater than the corresponding mean are set to 1, and the matrix elements less than or equal to the corresponding mean are set to zero to obtain the processed matrix.

[0090] In other embodiments, for matrix elements in a one-dimensional matrix that originate from the same row in a two-dimensional matrix, their mean value may be calculated as a binarization threshold for these matrix elements, thereby completing the binarization process for all matrix elements in the one-dimensional matrix.

[0091] In 150 , the view tree is updated according to the identified circular list control node, and the interface code of the interactive interface is generated according to the updated view tree.

[0092] As described above, after identifying the circular list control node from the view tree, the view tree is further updated according to the identified circular list control node to obtain an updated view tree, and then the interface code of the interactive interface is generated according to the updated view tree.

[0093] Optionally, in one embodiment, updating the view tree according to the identified circular list control node, and generating interface code of the interactive interface according to the updated view tree, includes:

[0094] Add a new list node to the view tree, and update the loop list control node to the child node of the list node to obtain the updated view tree;

[0095] generating, according to the updated view tree, a prompt statement for indicating a control code of an output control of the large language model;

[0096] Input the prompt statement into the large language model to obtain the control code of the control output by the large language model;

[0097] According to the control code of the control, the interface code of the interactive interface is obtained.

[0098] In the embodiment of the present application, artificial intelligence is used to realize code generation of the interactive interface.

[0099] It should be noted that artificial intelligence (AI) refers to the theories, methods, techniques, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, perceive the environment, acquire knowledge, and use that knowledge to achieve optimal results. In other words, AI is a comprehensive technology within computer science that seeks to understand the essence of intelligence and produce new intelligent machines that can respond in a manner similar to human intelligence. AI also involves studying the design principles and implementation methods of various intelligent machines, enabling them to possess the capabilities of perception, reasoning, and decision-making.

[0100] Artificial intelligence (AI) technology is a comprehensive discipline encompassing a wide range of fields, encompassing both hardware and software technologies. Foundational AI technologies generally include sensors, dedicated AI chips, cloud computing, distributed storage, big data processing, pre-trained models, operating / interaction systems, and mechatronics. Pre-trained models, also known as large models or basic models, can be widely applied to downstream tasks across various AI domains after fine-tuning. AI software technologies primarily encompass machine learning (ML). Deep learning (DL) is a new research direction within ML, introduced to bring ML closer to its original goal: AI. Currently, deep learning is primarily used in fields such as machine vision and natural language processing. Deep learning involves learning the inherent patterns and representational hierarchies of sample data. The information gained from this learning process is highly useful for interpreting data such as text, images, and audio. Using deep learning techniques and corresponding training sets, network models can be trained to implement diverse functions. For example, taking the generative model as an example, based on different types of training sets, we can train generative models that can generate different types of content, such as generative models that can generate images, generative models that can generate text, and generative models that can generate speech.

[0101] A large language model refers to a deep learning model trained using large amounts of text data that can generate natural language text or understand the meaning of language text. Large language models can handle a variety of natural language tasks, such as text classification, question-answering, and conversation. In the examples of this application, a large language model is specifically used to generate code for interactive interfaces.

[0102] After identifying the loop control list node from the view tree, a new node is created as the list node and mounted under the root node of the view tree. Then, the identified loop control list node is mounted under the list node as a child node of the list node, resulting in an updated view tree. It is understandable that the child nodes mounted on the loop control list node itself will follow the loop control list node and be indirectly mounted under the list node.

[0103] As described above, after completing the view tree update, the updated view tree is traversed. For each control in the interactive interface, the type information, layout information, fill information, corner fill information, shadow information, and stroke attribute information corresponding to the node in the view tree are extracted. A prompt statement (i.e., prompt) is generated to indicate the control code output by the large language model. The prompt statement corresponding to each control is input into the large language model accordingly to obtain the spatial code of the control output by the large language model. Finally, the control codes of all controls in the interactive interface are summarized to obtain the interface code of the interactive interface.

[0104] For example, taking an image type control as an example, the generated prompt statement may be:

[0105]

[0106]

[0107] Input the above prompt statement into the large language model to obtain the control code output by the large language model:

[0108]

[0109]

[0110] As can be seen from the above, the code generation solution provided by this application obtains a visual draft of an interactive interface, the visual draft includes a control design drawing of a control in the interactive interface; based on the control design drawing, creates a view tree corresponding to the visual draft, the view tree includes a control node corresponding to the control, the control node includes control layout information of the control, element type information and element layout information of the sub-elements in the control; converts the control layout information, element type information and element layout information corresponding to the control node into a visual image; based on the visual images corresponding to different control nodes, identifies a circular list control node from the view tree; based on the identified circular list control node, updates the view tree, and generates the interface code of the interactive interface based on the updated view tree. In this way, by automatically identifying the circular list control in the interactive interface, manual review can be replaced and recognition efficiency can be improved. Moreover, during the automatic recognition process, the control layout information of the control, the element type information and element layout information of the sub-elements in the control are extracted from the original control design drawing and converted into a visual image, which can eliminate the interference of the element content in the original control design drawing and avoid the visual fatigue of manual review, thereby doubly ensuring the accuracy of automatic recognition, and ultimately achieving the purpose of improving the generation efficiency and accuracy of interface code.

[0111] Please refer to Figure 2 Taking the execution subject of the code generation method provided in this application as an electronic device as an example, the process of the code generation method can also be as follows:

[0112] In 210 , the electronic device obtains a visual draft of the interactive interface, and creates a view tree corresponding to the visual draft according to a control design diagram in the visual draft.

[0113] In an embodiment of the present application, the electronic device first obtains a visual draft of the interactive interface, and the file type of the visual draft depends on the design tool used to draw it. The visual draft is a static design file of the interactive interface, including the control design drawings of the controls in the interactive interface. In layman's terms, the visual draft is a static presentation of the interactive interface, and the final interactive interface will look like what the visual draft looks like. At present, the visual drafts of commonly used interactive interfaces are usually drawn using vector design tools, such as Sketch tools, Photoshop tools, and Adobe XD tools. Among them, the file format of the visual draft drawn by the Sketch tool is ".sketch", the file format of the visual draft drawn by the Photoshop tool is ".PSD", and the file format of the visual draft drawn by the AdobeXD tool is ".xd".

[0114] In order to improve processing efficiency, the electronic device also performs layer flattening (or layer merging) on the visual draft, attaches the sub-layer elements to the upper-level parent layer, and loops through the original layers of the visual draft to compress them into two-level layers, where the first-level layer is the root layer, and different sub-elements of the control design drawing of the same control are merged into the second-level layer, that is, the second-level layer includes the complete control design drawing of the control in the interactive interface.

[0115] After completing the layer smoothing, the electronic device extracts the key control information of the control in the interactive interface based on the control design drawing in the secondary layer, including the control type information, control layout information, and element type information and element layout information of the sub-elements in the control, as well as attribute information such as fill information, corner fill information, shadow information, and stroke. Among them, the control type information of the control is used to describe what type of control the control is, the control layout information is used to describe the position of the control in the interactive interface and its length and width, the element type information is used to describe the type of sub-elements in the control, and the element layout information is used to describe the position of the sub-elements in the control and its length and width. For example, the element type information of a sub-element in a certain control is extracted as "text", which describes the sub-element as a text element, and the element layout information is (x, y, width, height), where (x, y) represents the horizontal and vertical coordinates of the sub-element, width represents the width of the sub-element, and height represents the height of the sub-element.

[0116] After extracting the control key information as described above, the electronic device creates control nodes based on the control key information, obtaining a control tree composed of control nodes corresponding to different controls. This control tree can reflect the structural relationship between controls. For example, the root node of the view tree corresponds to the first-level layer, i.e., the root layer. The first-level child node, i.e., the control node, corresponds to the control design (i.e., the control) in the second-level layer. The second-level child node corresponds to the sub-element of the control. And so on. The connection relationship between the nodes in the view tree reflects the structural relationship between controls.

[0117] In 220, the electronic device creates a solid color image with the same size as the control corresponding to the control node and a preset color according to the control layout information corresponding to the control node, and adds a solid color block corresponding to the element type information to the solid color image according to the element layout information corresponding to the control node to obtain a visual image.

[0118] In an embodiment of the present application, in order to eliminate the interference of the sub-element's own content, the control layout information of the control corresponding to the control node, as well as the element type information and element layout information of the sub-elements in the control are visually converted, and the control layout information of the control and the element type information and element layout information of the sub-elements therein are represented by an image to obtain a corresponding visual image.

[0119] The electronic device first creates a solid color image with the same size as the control corresponding to the control node and a preset color based on the control layout information of the control corresponding to the control node. There is no specific restriction on the preset color configuration. The electronic device then determines the target color corresponding to the element type information of the sub-element in the control corresponding to the control node based on the correspondence between the element type information and the color. Based on the element layout information of the sub-element in the control corresponding to the control node, the electronic device adds a solid color block with the same size as the sub-element and the target color to the solid color image to obtain a visual image.

[0120] In 230 , the electronic device converts the visual images corresponding to different control nodes into a two-dimensional matrix through discrete cosine transform.

[0121] For the visual images corresponding to different control nodes, the electronic device converts them into two-dimensional matrices of the same size through discrete cosine transform. There is no specific restriction on the size of the two-dimensional matrix here. For example, the size of the conversion two-dimensional matrix can be dynamically determined according to the amount of processing resources currently available to the electronic device that executes the code generation method of this application. For example, the more processing resources currently available, the larger the size of the determined conversion two-dimensional matrix, and the fewer processing resources currently available, the smaller the size of the determined conversion two-dimensional matrix. For example, when code is generated for a visual draft of an interactive interface, the size of the determined conversion two-dimensional matrix is 32*32.

[0122] In 240 , the electronic device reduces the dimensionality of the two-dimensional matrices corresponding to different control nodes into one-dimensional matrices.

[0123] As described above, after converting the visual images corresponding to different control nodes into a two-dimensional matrix by discrete cosine transform, the electronic device further reduces the two-dimensional matrix corresponding to the different control nodes into a one-dimensional matrix, that is, a one-dimensional array. The method of matrix dimensionality reduction is not specifically limited here. Exemplarily, the matrix elements of each row of the two-dimensional matrix can be arranged in row order, thereby reducing the two-dimensional matrix to a one-dimensional matrix. For example, for a 32*32 two-dimensional matrix, by arranging the matrix elements of each row in row order, the 32 rows of matrix elements are reduced to one row of matrix elements, resulting in a one-dimensional matrix consisting of 1024 matrix elements.

[0124] In 250, the electronic device performs binarization processing on the one-dimensional matrix corresponding to different control nodes to obtain a processed matrix, where the matrix elements of the processed matrix are 0 or 1, and performs base conversion on the processed matrix corresponding to different control nodes according to a preset base to obtain a feature character string.

[0125] The electronic device performs binarization processing on the one-dimensional matrices corresponding to different control nodes according to the configured binarization strategy, obtaining a processed matrix in which the matrix elements are either 0 or 1. The processed matrix is then treated as a binary number and converted to a non-binary preset base to obtain a characteristic string. The configuration of the binarization strategy and the preset base is not specifically limited herein.

[0126] For example, the electronic device calculates the mean of the matrix elements in the one-dimensional matrix corresponding to different control nodes as the binarization threshold; then, for the one-dimensional matrices corresponding to different control nodes, the matrix elements greater than the corresponding mean are set to 1, and the matrix elements less than or equal to the corresponding mean are set to zero to obtain the processed matrix.

[0127] For another example, the preset base may be configured as hexadecimal. Assuming that the processed matrix includes 1024 matrix elements, base conversion is performed on the processed matrix to obtain a 256-bit hexadecimal character string as the feature character string.

[0128] In 260 , the electronic device determines a control node set whose similarities between feature character strings reach a preset similarity, and determines the control nodes corresponding to the control node set as circular list control nodes.

[0129] As described above, after the visual images corresponding to different control nodes are encoded as feature strings, the similarity between the feature strings corresponding to the different visual images is the similarity between the visual images. The electronic device then determines the similarity between the feature strings of different control nodes. For example, for any two feature strings, the Hamming distance between them is used as the similarity between the two feature strings, which is also the similarity between the corresponding visual images.

[0130] Afterwards, the electronic device determines a set of control nodes in which the similarity between the feature character strings reaches a preset similarity, that is, the similarity between the feature character strings corresponding to any control nodes in the control node set reaches the preset similarity, and determines the control node corresponding to the control node set as a circular list control node, and correspondingly determines the control corresponding to the circular list control node as a circular list control.

[0131] In 270 , the electronic device adds a new list node to the view tree, and updates the circular list control node to a child node of the list node, thereby obtaining an updated view tree.

[0132] As described above, after identifying the circular list control node from the view tree, the electronic device further updates the view tree according to the identified circular list control node to obtain an updated view tree.

[0133] After the electronic device identifies the loop control list node in the view tree, it creates a new node as the list node and mounts it under the root node of the view tree. It then mounts the identified loop control list node under the list node as a child node of the list node, resulting in an updated view tree. It is understood that the child nodes mounted on the loop control list node itself will follow the loop control list node and be indirectly mounted under the list node.

[0134] In 280 , the electronic device generates a prompt statement for indicating the control code of the control output by the large language model according to the updated view tree, and inputs the prompt statement into the large language model to obtain the control code of the control output by the large language model.

[0135] In 290 , the electronic device combines the control codes of the controls to obtain the interface code of the interactive interface.

[0136] After completing the view tree update, the electronic device traverses the updated view tree and, for each control in the interactive interface, extracts attribute information such as type information, layout information, fill information, corner fill information, shadow information, and stroke information corresponding to the node in the view tree. It then generates a prompt statement (i.e., prompt) indicating the control code of the control to be output by the large language model. The prompt statement corresponding to each control is then input into the large language model to obtain the spatial code of the control output by the large language model. Finally, the electronic device combines the control codes of all controls in the interactive interface to obtain the interface code of the interactive interface.

[0137] To facilitate better implementation of the above code generation method, the present application embodiment also provides a corresponding code generation device. The meanings of the terms are the same as those in the above code generation method. For specific implementation details, please refer to the description in the above method embodiment.

[0138] Please refer to Figure 3 , Figure 3 This is a structural diagram of a code generation device provided in an embodiment of the present application. The code generation device may include a visual draft acquisition module 310, a view tree creation module 320, a visualization module 330, a node identification module 340, and a code generation module 350, wherein:

[0139] A visual draft acquisition module 310 is used to acquire a visual draft of an interactive interface, wherein the visual draft includes control design drawings of controls in the interactive interface;

[0140] A view tree creation module 320 is configured to create a view tree corresponding to the visual draft based on the control design drawing, wherein the view tree includes a control node corresponding to the control, and the control node includes control layout information of the control, element type information and element layout information of sub-elements in the control;

[0141] A visualization module 330 is used to convert control layout information, element type information, and element layout information corresponding to a control node into a visual image;

[0142] A node identification module 340 is used to identify the circular list control node from the view tree according to the visual images corresponding to different control nodes;

[0143] The code generation module 350 is used to update the view tree according to the identified circular list control nodes, and generate interface code of the interactive interface according to the updated view tree.

[0144] Optionally, in one embodiment, the visualization module 330 is used to create a solid color image with the same size as the control size corresponding to the control node and a preset color according to the control layout information corresponding to the control node; and to add a solid color block corresponding to the element type information to the solid color image according to the element layout information corresponding to the control node to obtain a visualization image.

[0145] Optionally, in one embodiment, the node identification module 340 is used to perform feature encoding on visual images corresponding to different control nodes to obtain feature strings of different control nodes; and to determine a set of control nodes whose feature strings have a pairwise similarity that reaches a preset similarity, and determine the control nodes corresponding to the control node set as circular list control nodes.

[0146] Optionally, in one embodiment, the node identification module 340 is used to convert the visual images corresponding to different control nodes into a two-dimensional matrix through discrete cosine transform; and reduce the two-dimensional matrix corresponding to different control nodes to a one-dimensional matrix, and encode the one-dimensional matrix corresponding to different control nodes into a feature string.

[0147] Optionally, in one embodiment, the node identification module 340 is used to perform binarization processing on the one-dimensional matrix corresponding to different control nodes to obtain a processed matrix, and the matrix elements of the processed matrix are 0 or 1; and to perform base conversion on the processed matrix corresponding to different control nodes according to a preset base to obtain a feature character string.

[0148] Optionally, in one embodiment, the node identification module 340 is used to calculate the mean of the matrix elements in the one-dimensional matrix corresponding to different control nodes; and for the one-dimensional matrix corresponding to different control nodes, the matrix elements greater than the corresponding mean are set to 1, and the matrix elements less than or equal to the corresponding mean are set to zero, to obtain a processed matrix.

[0149] Optionally, in one embodiment, the code generation module 350 is used to add a new list node in the view tree, and update the circular list control node to a child node of the list node to obtain an updated view tree; and based on the updated view tree, generate a prompt statement for indicating the control code of the control output by the large language model; and input the prompt statement into the large language model to obtain the control code of the control output by the large language model; and based on the control code of the control, obtain the interface code of the interactive interface.

[0150] As can be seen from the above, the code generation device provided by the present application obtains the visual draft of the interactive interface through the visual draft acquisition module, and the visual draft includes the control design drawing of the control in the interactive interface; creates a view tree corresponding to the visual draft according to the control design drawing through the view tree creation module, and the view tree includes the control node of the corresponding control, and the control node includes the control layout information of the control, the element type information and element layout information of the sub-elements in the control; converts the control layout information, element type information and element layout information corresponding to the control node into a visual image through the visualization module; identifies the circular list control node from the view tree according to the visual images corresponding to different control nodes through the node identification module; updates the view tree according to the identified circular list control node through the code generation module, and generates the interface code of the interactive interface according to the updated view tree. In this way, through the automatic recognition of the circular list control in the interactive interface, manual review can be replaced and recognition efficiency can be improved. Moreover, in the automatic recognition process, the control layout information of the control, the element type information and element layout information of the sub-elements in the control are extracted from the original control design drawing and converted into a visual image, which can eliminate the interference of the element content itself in the original control design drawing, and at the same time avoid the visual fatigue of manual review, doubly ensure the accuracy of automatic recognition, and ultimately achieve the purpose of improving the generation efficiency and accuracy of interface code.

[0151] The specific implementation of each of the above modules can be found in the previous embodiments and will not be described again here.

[0152] An embodiment of the present application also provides an electronic device, comprising a memory and a processor, wherein the processor is configured to execute the steps of the code generation method suitable for the server provided in the above embodiment, or execute the steps of the code generation method suitable for the client provided in the above embodiment, by calling a computer program stored in the memory.

[0153] Please refer to Figure 4 , Figure 4 A schematic diagram of the structure of an electronic device provided in an embodiment of the present application.

[0154] The electronic device may include one or more processors 101, one or more computer-readable storage media memories 102, a power supply 103, an input unit 104, and other components. It will be understood by those skilled in the art that Figure 4 The electronic device structure shown in the figure does not constitute a limitation of the electronic device, and may include more or fewer components than shown in the figure, or combine certain components, or arrange components differently.

[0155] Processor 101 is the control center of the electronic device. It connects all parts of the electronic device using various interfaces and circuits. It executes software programs and / or modules stored in memory 102 and accesses data stored in memory 102 to perform various functions of the electronic device and process data. Optionally, processor 101 may include one or more processing cores. Alternatively, processor 101 may integrate an application processor and a modem processor. The application processor primarily handles the operating system, user interface, and application programs, while the modem processor primarily handles wireless communications. It is understood that the modem processor may not be integrated into processor 101.

[0156] The memory 102 can be used to store software programs and modules. The processor 101 executes various functional applications and data processing by running the software programs and modules stored in the memory 102. The memory 102 may mainly include a program storage area and a data storage area, wherein the program storage area may store an operating system, an application required for at least one function (such as a sound playback function, an image playback function, etc.), etc.; the data storage area may store data created according to the use of the electronic device, etc. In addition, the memory 102 may include a high-speed random access memory, and may also include a non-volatile memory, such as at least one disk storage device, a flash memory device, or other volatile solid-state storage device. Accordingly, the memory 102 may also include a memory controller to provide the processor 101 with access to the memory 102.

[0157] The electronic device also includes a power supply 103 for supplying power to various components. Optionally, the power supply 103 can be logically connected to the processor 101 via a power management system, thereby enabling the power management system to manage charging, discharging, and power consumption. The power supply 103 can also include one or more DC or AC power supplies, a recharging system, a power failure detection circuit, a power converter or inverter, a power status indicator, and other arbitrary components.

[0158] The electronic device may further include an input unit 104, which may be configured to receive input digital or character information and generate keyboard, mouse, joystick, optical or trackball signal inputs related to user settings and function control.

[0159] Although not shown, the electronic device may further include a display unit, an image acquisition component, etc., which will not be described in detail here. Specifically in this embodiment, the processor 101 loads the executable code corresponding to one or more computer programs into the memory 102, and the processor 101 executes the steps in the code generation method provided in this application, such as:

[0160] Obtain a visual draft of the interactive interface, which includes control design drawings of controls in the interactive interface;

[0161] Create a view tree of the corresponding visual draft according to the control design drawing. The view tree includes the control node of the corresponding control. The control node includes the control layout information of the control, the element type information and element layout information of the sub-elements in the control.

[0162] Convert control layout information, element type information, and element layout information corresponding to the control node into a visual image;

[0163] According to the visual images corresponding to different control nodes, identify the circular list control nodes from the view tree;

[0164] According to the identified circular list control nodes, the view tree is updated, and according to the updated view tree, the interface code of the interactive interface is generated.

[0165] It should be noted that the electronic device provided in the embodiment of the present application and the code generation method in the above embodiment have the same concept, and the specific implementation process is detailed in the above related embodiments and will not be repeated here.

[0166] The present application also provides a computer-readable storage medium having a computer program stored thereon. When the computer program stored thereon is executed on a processor of an electronic device provided in an embodiment of the present application, the processor of the electronic device implements the steps of the code generation method provided in the present application. The storage medium may be a magnetic disk, an optical disk, a read-only memory (ROM), or a random access memory (RAM).

[0167] The present application also provides a computer program product, which includes a computer program. When the computer program is executed on the processor of the electronic device provided in the embodiment of the present application, the processor of the electronic device implements the steps in the code generation method provided in the present application.

[0168] The code generation method, code generation device, electronic device, computer-readable storage medium and computer program product provided by the present application are introduced in detail above. Specific examples are used herein to illustrate the principles and implementation methods of the present application. The description of the above embodiments is only used to help understand the method of the present application and its core ideas. At the same time, for those skilled in the art, according to the ideas of the present application, there may be changes in the specific implementation methods and application scope. In summary, the content of this specification should not be understood as limiting the present application.

[0169] It should be noted that when the above embodiments of this application are applied to specific products or technologies, the relevant user data is involved, and the user's permission or consent must be obtained, and the collection, use and processing of the relevant data must comply with the relevant laws, regulations and standards of the relevant countries and regions.

Claims

1. A code generation method, characterized in that: include: Obtaining a visual draft of an interactive interface, the visual draft including control design drawings of controls in the interactive interface; Creating a view tree corresponding to the visual draft according to the control design drawing, wherein the view tree includes a control node corresponding to the control, and the control node includes control layout information of the control, element type information and element layout information of sub-elements in the control; Converting the control layout information, element type information, and element layout information corresponding to the control node into a visual image; Identifying a circular list control node from the view tree according to visual images corresponding to different control nodes; The view tree is updated according to the identified circular list control node, and the interface code of the interactive interface is generated according to the updated view tree.

2. The code generation method according to claim 1, characterized in that: The converting the control layout information, element type information, and element layout information corresponding to the control node into a visual image includes: Creating, according to the control layout information corresponding to the control node, a solid color image having the same size as the control corresponding to the control node and a preset color; According to the element layout information corresponding to the control node, a solid color block corresponding to the element type information is added to the solid color image to obtain the visual image.

3. The code generation method according to claim 1, characterized in that The identifying the circular list control node from the view tree according to the visual images corresponding to different control nodes includes: Perform feature encoding on the visual images corresponding to different control nodes to obtain feature strings of different control nodes; A control node set whose similarities between feature character strings reach a preset similarity is determined, and control nodes corresponding to the control node set are determined as circular list control nodes.

4. The code generation method according to claim 3, characterized in that The feature encoding of the visual images corresponding to different control nodes to obtain feature character strings of different control nodes includes: The visual images corresponding to different control nodes are converted into two-dimensional matrices through discrete cosine transform; The two-dimensional matrices corresponding to different control nodes are reduced to one-dimensional matrices, and the one-dimensional matrices corresponding to different control nodes are encoded as feature strings.

5. The code generation method according to claim 4, characterized in that: The encoding of the one-dimensional matrices corresponding to different control nodes into characteristic character strings includes: Binarize the one-dimensional matrices corresponding to different control nodes to obtain a processed matrix, where the matrix elements of the processed matrix are 0 or 1; The processed matrices corresponding to different control nodes are converted into bases according to a preset base to obtain a feature string.

6. The code generation method according to claim 5, characterized in that The binarization process is performed on the one-dimensional matrices corresponding to different control nodes to obtain a processed matrix, including: Calculate the mean of the matrix elements in the one-dimensional matrix corresponding to different control nodes; For the one-dimensional matrices corresponding to different control nodes, the matrix elements greater than the corresponding mean are set to 1, and the matrix elements less than or equal to the corresponding mean are set to zero to obtain the processed matrix.

7. The code generation method according to any one of claims 1 to 6, characterized in that: The updating of the view tree according to the identified circular list control node, and generating the interface code of the interactive interface according to the updated view tree, includes: Adding a new list node to the view tree, and updating the circular list control node to a child node of the list node, to obtain an updated view tree; generating, according to the updated view tree, a prompt statement for instructing the large language model to output a control code of the control; Inputting the prompt statement into the large language model to obtain a control code of the control output by the large language model; According to the control code of the control, the interface code of the interactive interface is obtained.

8. A code generating device, characterized in that: include: A visual draft acquisition module, configured to acquire a visual draft of an interactive interface, wherein the visual draft includes control design drawings of controls in the interactive interface; A view tree creation module, configured to create a view tree corresponding to the visual draft based on the control design drawing, wherein the view tree includes a control node corresponding to the control, and the control node includes control layout information of the control, element type information and element layout information of sub-elements in the control; A visualization module, configured to convert the control layout information, element type information, and element layout information corresponding to the control node into a visualization image; A node identification module, configured to identify a circular list control node from the view tree according to visual images corresponding to different control nodes; A code generation module is used to update the view tree according to the identified circular list control node, and generate interface code of the interactive interface according to the updated view tree.

9. An electronic device, characterized in that: The method comprises a memory and a processor, wherein the memory stores a computer program, and when the computer program is executed by the processor, the steps in the code generation method according to any one of claims 1 to 7 are implemented.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and the computer program is suitable for being executed by a processor to implement the steps in the code generation method according to any one of claims 1 to 7.

Images