Code generation method, relationship configuration method, computing device, storage medium and program product

Abstract

Embodiments of the present application provide a code generation method, a relationship configuration method, a computing device, a storage medium and a program product. In the method, initial page code generated by converting a page visual file is determined; component information of at least one visual component in the page visual file is identified, a component mapping relationship is found, component information of at least one first technical component to which the component information of the at least one visual component is mapped is determined, and a first identification result is obtained; a component identification model is used to identify component information of at least one second technical component corresponding to the page visual file based on the page visual file, and a second identification result is obtained; a component identification result is obtained based on the first identification result and the second identification result; a code generation model is used to generate component code based on the initial page code and the component identification result, and the initial page code is updated by using the component code to generate target page code. The technical solution provided by the embodiments of the present application improves the quality of page code.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a code generation method, a relation configuration method, a computing device, a storage medium, and a program product. Background Technology

[0002] Page visual files are guiding documents for generating page code. They include page layout, colors, text, images, and other visual content. They can be static images or interactive vector files, and can be drawn manually by designers or built using page design tools.

[0003] With the development of artificial intelligence technology, there is now a technology that automatically converts page visual files into page code. However, the page code generated in this way contains a lot of nested code, resulting in low page code quality. Summary of the Invention

[0004] This application provides a code generation method, a relation configuration method, a computing device, a storage medium, and a program product to solve the technical problem of low page code quality in the prior art.

[0005] Firstly, this application provides a code generation method, including: Determine the initial page code generated from the page visual file conversion; Identify the component information of at least one visual component in the page visual file, find the component mapping relationship, determine the component information of at least one first technical component mapped to the component information of the at least one visual component, and obtain a first identification result; Using a component recognition model, based on the page visual file, identify the component information of at least one corresponding second technical component to obtain a second recognition result; Based on the first identification result and the second identification result, the component identification result is obtained; Using a code generation model, component code is generated based on the initial page code and the component identification results, and the initial page code is updated using the component code to generate the target page code.

[0006] Secondly, this application provides a code generation method, including: Obtain the page visual files from the page design tool; Convert the page visual file into initial page code; An optimization request is generated for the initial page code; the optimization request instructs that component code be generated based on the initial page code and the component identification result using a code generation model, and that the initial page code be updated using the component code to generate the target page code; the component identification result is obtained based on a first identification result and a second identification result; the first identification result is obtained based on the component information of at least one first technical component mapped by the component information of at least one visual component; the component information of the at least one visual component is identified from the page visual file; the second identification result is obtained based on the page visual file using a component identification model.

[0007] Thirdly, this application provides a code generation method applied to a code generation plugin, wherein the code generation plugin is deployed in a page design tool, and the page design tool also deploys a code conversion plugin; the method includes: The process involves obtaining the initial page code and component recognition results corresponding to the page visual file; the initial page code is obtained by converting the page visual file using the code conversion plugin, the first generation server, or the first plugin server; the component recognition results are determined by the code conversion plugin, the first generation server, or the first plugin server based on a first recognition result and a second recognition result; the first recognition result is obtained based on the component information of at least one first technical component mapped from the component information of at least one visual component; the second recognition result is obtained using a component recognition model based on the page visual file. Using a code generation model, component code is generated based on the initial page code and the component identification results, and the initial page code is updated using the component code to generate the target page code.

[0008] Fourthly, this application provides a relationship configuration method, including: Provide a relationship configuration interface and display configuration prompts on the relationship configuration interface; In response to the relationship configuration operation triggered by the configuration prompt information, determine the component information of the provided visual component and the component information of the technical components in the target technical component library; A component mapping relationship is established between the component information of the visual component and the component information of the technical component, and stored in the target technical component library. The component mapping relationship is used to determine the component information of at least one first technical component mapped based on the component information of at least one visual component in the page visual file, and to obtain a first recognition result. The first recognition result is used to determine the component recognition result. The component recognition result is used to convert the initial page code of the page visual file, and to generate the corresponding target page code using a code generation model.

[0009] Fifthly, this application provides a computing device, including a processing component and a storage component; The storage component stores a computer program; the computer program is invoked and executed by the processing component to implement the code generation method as described in the first aspect above, or the code generation method as described in the second aspect above, or the code generation method as described in the third aspect above, or the relationship configuration method as described in the fourth aspect above.

[0010] Sixthly, this application provides a computer-readable storage medium storing a computer program thereon, which, when executed by a processing component, implements the code generation method as described in the first aspect above, or the code generation method as described in the second aspect above, or the code generation method as described in the third aspect above, or the relationship configuration method as described in the fourth aspect above.

[0011] In a seventh aspect, this application provides a computer program product, including a computer program / instruction, which, when executed by a processing component, implements the code generation method as described in the first aspect above, or the code generation method as described in the second aspect above, or the code generation method as described in the third aspect above, or the relationship configuration method as described in the fourth aspect above.

[0012] In this embodiment, for the initial page code generated from the page visual file, component identification is first performed on its interface visuals to determine the visual components in the page visual file. Then, the component mapping relationship is searched to determine the technical components mapped to the visual components. In addition, a component identification model can be used to identify the technical components corresponding to the page visual file. Based on the first identification result and the second identification result, the component identification result is obtained. Then, a code generation model is used to generate component code based on the initial page code and the component identification result. The component code is used to update the corresponding page element code in the initial page code to obtain the target page code. These page element codes are usually nested code in the initial page code. In this embodiment, by identifying components and using an artificial intelligence model to generate component code, and using the component code to replace the page element code in the initial code page, a large amount of nested code can be avoided, thus improving the quality of the page code.

[0013] These or other aspects of this application will become more apparent in the following description of the embodiments. Attached Figure Description

[0014] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 A schematic diagram of a system architecture applicable to one embodiment of this application is shown; Figure 2 A schematic diagram of yet another system architecture applicable to an embodiment of this application is shown; Figure 3 A schematic diagram of yet another system architecture applicable to an embodiment of this application is shown; Figure 4 A flowchart of one embodiment of the code generation method provided in this application is shown; Figure 5 This paper illustrates a schematic diagram of the structure of a code generation model in a practical application, based on an embodiment of this application. Figure 6 A flowchart of yet another embodiment of the code generation method provided in this application is shown; Figure 7 A flowchart of yet another embodiment of the code generation method provided in this application is shown; Figure 8 This paper shows a signaling flowchart of another embodiment of the code generation method provided in this application; Figure 9 A flowchart of one embodiment of the relationship configuration method provided in this application is shown; Figure 10 This paper shows a schematic diagram of the structure of an embodiment of a code generation apparatus provided in this application; Figure 11 This illustration shows a structural schematic diagram of yet another embodiment of a code generation apparatus provided in this application; Figure 12 This illustration shows a structural schematic diagram of yet another embodiment of a code generation apparatus provided in this application; Figure 13 This paper shows a schematic diagram of the structure of an embodiment of a relationship configuration device provided in this application; Figure 14 A schematic diagram of one embodiment of a computing device provided in this application is shown. Detailed Implementation

[0015] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0016] It should be noted that, in the cases involving user information in the embodiments of this application, the user information (including but not limited to user device information, user personal information, etc.) and data (including but not limited to data used for analysis, stored data, displayed data, etc.) involved in the embodiments of this application are all information and data authorized by the user or fully authorized by all parties. Furthermore, the collection, use, and processing of related data must comply with the relevant laws, regulations, and standards of the relevant countries and regions, and corresponding operation entry points are provided for users to choose to authorize or refuse. In addition, the various models involved in this application (including but not limited to language models or large models) comply with relevant laws and standards.

[0017] Additionally, it should be noted that when user interaction operations or triggering operations are involved in the embodiments of this application, these operations include, but are not limited to, various interaction methods such as touch operations, gesture operations, voice operations, head movement operations, and eye movement operations. Touch operations include, but are not limited to, click operations, double-click operations, long-press operations, swipe operations, pinch operations, or mouse hover operations. Swipe operations include, but are not limited to, straight-line swipes and curved-line swipes.

[0018] The technical solutions of this application are applicable to page code generation scenarios. As can be seen from the background description, it has become possible to automatically convert page visual files into page code. However, the page code generated by current technologies often contains a large amount of nested code, resulting in low page code quality. Taking HTML (Hypertext Markup Language) code as an example, nested code is, for example, in a... (A container tag in HTML) Put another one inside it Layered wrapping forms a structure used to represent a page element; for example, the code for a text element might look like this: A Hello .

[0019] As can be seen, the divs are deeply nested, have repetitive structures, poor code readability, poor performance, and are difficult to maintain, resulting in low code quality.

[0020] The inventors discovered that, in order to simplify page code and improve its quality, page elements can be encapsulated as components, and the component code can replace the nested code. For example, the text element mentioned above, encapsulated as a component in a standard component library, can be represented as: <greetingtext> Hello< / greetingtext> Using the GreetingText component can simplify code and enable reuse. The standard component library is a standardized and reusable collection of components, such as defining common page elements like buttons, input boxes, and tables in a unified way. Currently, after the initial page code is generated, developers usually need to manually replace it with the corresponding component code based on the component definitions in the standard component library, which is inefficient and cannot guarantee code quality.

[0021] Therefore, in order to improve the quality of page code and ensure code development efficiency, the inventors have conducted a series of studies and proposed the technical solution of the embodiments of this application. In the embodiments of this application, for the initial page code generated by converting the page visual file, the interface visual is first identified by component recognition to determine the visual components in the page visual file, and the component mapping relationship is found to determine the technical components mapped by the visual components. In addition, the component recognition model can be used to identify the technical components corresponding to the page visual file, thereby obtaining the component recognition result based on the first recognition result and the second recognition result. Then, the code generation model is used to generate component code based on the initial page code and the component recognition result, and the component code is used to update the corresponding page element code in the initial page code, thereby obtaining the target page code. These page element codes are usually nested code in the initial page code. In the embodiments of this application, by identifying components and using an artificial intelligence model to generate component code, and using the component code to replace the page element code in the initial code page, a large amount of nested code can be avoided, thus improving the quality of page code.

[0022] Furthermore, the inventors discovered that traditional implementations may suffer from poor readability of style class names, leading to low page code quality. This application improves page code quality by semanticizing class names. In addition, this application can identify complex component structures and generate component code that conforms to specifications, further ensuring page code quality.

[0023] The technical solutions of the embodiments of this application will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of this application, and not all embodiments. Based on the embodiments of this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0024] In one embodiment, Figure 1 This application illustrates a system architecture diagram showing one of the technical solutions applicable to it, such as... Figure 1 As shown, the system architecture may include a code conversion plugin 101 and a code generation plugin 102, which can be integrated into the page design tool 100.

[0025] The code conversion plugin 101 can read the page visual file generated by the page design tool 100 and convert it into initial page code. The code generation plugin 102 can identify components in the page visual file and use the code generation model to optimize the initial page code based on the initial page code and the component identification results to generate the final target page code.

[0026] Alternatively, the code conversion plugin 101 can identify components and synchronize the initial page code and component identification results to the code generation plugin 102. Then, the code generation plugin 102 can call the code generation model to optimize the initial page code and generate the target page code.

[0027] Alternatively, the system architecture may also include a first plugin server 103 connected to the code conversion plugin 101 and a second plugin server 104 connected to the code generation plugin 102.

[0028] The code conversion plugin 101 can acquire the page visual file and send it to the first plugin server 103, which then converts and generates the initial page code. The first plugin server 103 can send the initial page code back to the code conversion plugin 101, which can then synchronize the initial page code to the code generation plugin 102. The code generation plugin 102 then sends the initial page code and the page visual file to the second plugin server 104, which performs component identification and target page code generation. Alternatively, the first plugin server 103 can also perform component identification. The code conversion plugin 101 can then synchronize the initial page code and the component identification results to the code generation plugin 102, which in turn sends the initial page code and the component identification results to the second plugin server 104, whereby the second plugin server 104 generates the target page code.

[0029] The code conversion plugin 101 can also provide a first plugin interface and display the initial page code. Based on a user-triggered synchronization request, it can synchronize the initial page code to the code generation plugin 102. The code generation plugin 102 can provide a second plugin interface and display the initial page code. Based on a user-triggered update request, it can optimize the initial page code or request the second plugin server to optimize the initial page code. Users can refer to developers or designers, etc.

[0030] In addition, code conversion plugins or code generation plugins can also sense user configuration operations, thereby establishing component mapping relationships between component information of visual components and component information of technical components, or interacting with the corresponding plugin server to establish component mapping relationships.

[0031] Furthermore, the system architecture may also include a configuration client and a configuration server. The configuration client can be integrated into the page design tool as a plugin, or it can be a standalone client. The configuration client is aware of user configuration operations and can interact with the configuration server to establish component mapping relationships between visual component information and technical component information. The configuration server can also synchronize the component mapping relationships to the code conversion plugin, code generation plugin, first plugin server, or second plugin server. Of course, the configuration server can be the same server as the first plugin server or the second plugin server, or they can be different servers; this application does not limit this.

[0032] The embodiments of this application can adopt a dual-plugin mode to improve ease of operation and code generation efficiency.

[0033] In yet another embodiment, Figure 2 The technical solution of this application embodiment is shown in another system architecture diagram, such as... Figure 2 As shown, the system architecture may include at least one generation server.

[0034] Optionally, the at least one generation server may include, for example, a first generation server 201 and a second generation server 202.

[0035] The page design tool 100 can provide a corresponding access interface, and the first generation server 201 and the second generation server 202 can read the page visual file through the access interface.

[0036] The access interface can be based on the MCP (Model Context Protocol), and the server-side can be implemented as an intelligent processing module. This module refers to an intelligent system capable of perceiving the environment, autonomously planning, invoking tools, and executing actions to achieve specific goals. In practical applications, this intelligent processing module can be an agent, which can perform corresponding actions based on an artificial intelligence model to achieve specific task operations.

[0037] The first generation server 201 is responsible for converting the page visual file into initial page code, while the second generation server 202 is responsible for component identification and target page code generation. Alternatively, the first generation server 201 can perform component identification, and the second generation server 202 can generate the target page code based on the component identification results. The first generation server 201 and the second generation server 202 can establish a connection and communicate to transmit relevant data.

[0038] Of course, at least one generation server may also include a third generation server, which performs initial page code generation, component identification, and target page code generation, etc.

[0039] Furthermore, this system architecture can also include a configuration client and a configuration server. The configuration client can be integrated into the page design tool as a plugin, or it can be a standalone client. The configuration client is aware of user configuration operations and can interact with the configuration server to establish component mapping relationships between visual component information and technical component information. The configuration server can also synchronize the component mapping relationships to the first generation server or the second generation server.

[0040] As yet another embodiment, Figure 3 The diagram illustrates how the technical solution of this application embodiment can be applied to yet another system architecture, such as... Figure 3 As shown, the system architecture may include a code generation plugin 102 and a first generation server 201. The code generation plugin may be integrated into the page design tool 100, which may also integrate a code conversion plugin 101.

[0041] The page design tool 100 detects the code conversion operation triggered by the user and uploads the page visual file to the first generation server 201. The first generation server is responsible for generating the initial page code and can send the initial page code to the code generation plugin 102. The code generation plugin 102 then performs component recognition and generates the target page code. Alternatively, the first generation server can also be responsible for component recognition and send the component recognition results to the code generation plugin 102. The code generation plugin 102 can then directly generate the target page code based on the component recognition results.

[0042] Optionally, after the page design tool 100 detects the code conversion operation triggered by the user, it can determine whether the user has access permissions. If the user has access permissions, the interface visual file can be synchronized to the code conversion plugin, which will then generate the initial page code and synchronize it to the code generation plugin. If the user does not have access permissions, the page visual file can be uploaded to the first generation server, which can provide a sandbox environment to ensure data security.

[0043] Furthermore, this system architecture can also include a configuration client and a configuration server. The configuration client can be integrated into the page design tool as a plugin, or it can run as a standalone client. The configuration server can synchronize component mapping relationships to the first generation server, etc. Of course, the configuration server and the first generation server can be the same server or different servers.

[0044] It should be noted that the aforementioned plugin server, configuration server, or corresponding generation server can be implemented as a distributed server cluster consisting of multiple servers, or as a single server. The server can also be a server in a distributed system. The server can also be a cloud server providing basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, content delivery networks (CDNs), and big data and artificial intelligence platforms, or an intelligent cloud computing server or intelligent cloud host with artificial intelligence technology.

[0045] The implementation details of the technical solutions in the embodiments of this application are described in detail below.

[0046] Figure 4 A flowchart illustrating an embodiment of a code generation method provided in this application is shown. The technical solution of this embodiment can be executed by the aforementioned code generation plugin, a second plugin server, a second generation server, or a third generation server, etc. The method may include the following steps: 401: Determines the initial page code generated by the page visual file conversion.

[0047] Page visual files can be user-generated page visual images, or in a practical application, vector files created by users using page design tools. Alternatively, they can be user-provided page screenshots, which can be obtained by taking a screenshot of a specific page or by taking a screenshot of a visual graphic displayed by a page design tool. The visual graphic is created and generated by the user, and a corresponding vector file can be generated.

[0048] When a page visual file is generated based on a page design tool, it can include node structured information, which covers page layout, colors, text, and images, among other page visual content.

[0049] The structured information of this node can include node information for at least one node. This node information can include node type, node identifier, node attributes such as position, color, and size, and hierarchical relationships with other nodes. Node types can include, for example, Frame, Group, Text, and Vector. Using page design tools, at least one visual element can be drawn. For example, a Frame can be created as a canvas, and then basic elements such as various graphics, lines, input text, and imported images can be drawn on the canvas. Styles of each basic element can be set, such as color, shape, and size. Users can also select a group of visual elements, such as the background color and text of a button, to create a visual component, and set the component type and attributes. This visual component can be reused. Therefore, this at least one node may include visual components or visual elements that are not constructed as visual components, and visual components can be generated based on at least one visual element.

[0050] To facilitate component identification, visual component specifications can be predefined to guide users in creating visual components according to these specifications. These specifications can include naming conventions and component variant specifications. Naming conventions specify how component types are named, for example, by naming the component type after the scene name, such as `GGS_button`, where `GGS` represents the scene (e.g., overseas e-commerce) and `button` represents the component (e.g., a button). Component variant specifications define how attribute values ​​are configured for visual component variants. For example, size attributes might have values ​​like "large / medium / small," and theme attributes might have values ​​like "dark / light." A visual component variant can be a visual component instance composed of specific attribute values ​​of different attributes; that is, a visual component variant can refer to the same visual component that presents different appearances or states due to different attribute values.

[0051] 402: Identify component information for at least one visual component in the page's visual file.

[0052] Because the visual component specification is used to constrain users to create visual components according to the specification, it allows identification of at least one visual component in the page's visual file based on the specification's component information. The component information of a visual component can include the visual component type and visual component attributes.

[0053] The page visual file includes node structured information. Following the naming conventions in the visual component specification, each node in the structured information is traversed and scanned to determine if its type conforms to the naming conventions. If so, the node is confirmed as a visual component, and its type becomes the visual component type. The visual component type and attributes can be extracted from the node information. Visual component attributes can refer to the attribute values ​​corresponding to variations of the visual component. For example, if the visual component type is Button, its attributes could include a category attribute of "primary," a size attribute of "small," and a theme attribute of "dark."

[0054] 403: Locate the component mapping relationship, determine the component information of at least one first technical component mapped to the component information of at least one visual component, and obtain the first recognition result.

[0055] Since visual components are built by users in page design tools according to visual component specifications, they are essentially still visual elements. During code conversion, they can only be coded according to their corresponding visual elements, potentially generating a large amount of nested code. Therefore, they need to be converted into component code from a technical component library. This technical component library can be a general component library, such as one that standardizes and encapsulates commonly used page elements like buttons, input boxes, and tables into technical components. Alternatively, it can refer to a private component library for specific scenarios, such as custom technical components adapted to specific scenarios like "product cards" or "coupon pop-ups." The technical component library stores component definitions for different technical components, including component information such as component type, component attributes corresponding to component variants, and other encapsulation information such as style specifications, naming conventions, and usage constraints.

[0056] In this embodiment, a component mapping relationship between visual components and technical components can be pre-established. The component mapping relationship may include the technical component type mapped to the visual component type, and / or the technical component attribute mapped to the visual component attribute, etc. Based on the mapped technical component attribute, the technical component variant mapped to the visual component variant can be determined.

[0057] Therefore, by looking up the component mapping relationship, the component information of the technical component mapped to the component information of each visual component can be determined. The first recognition result may include the component information of at least one technical component, and may also include the component information of the visual component corresponding to the component information of each technical component. The component information of the first technical component mapped to the component information of any visual component may include the technical component type mapped to the visual component type and the technical component attribute mapped to the visual component attribute.

[0058] Optionally, the naming convention for visual components may require the component type to include a scene name. This allows for the determination of the corresponding target technology component library based on the scene name, and the lookup of the component mapping relationship within that target technology component library to identify the technical component mapped to the visual component. Therefore, embodiments of this application can adapt to multiple technology component libraries, improving versatility.

[0059] 404: Using a component recognition model, based on the page visual file, identify the component information of at least one corresponding second technical component to obtain a second recognition result.

[0060] In this embodiment, a component recognition model can also be used to directly identify the component information of at least one second technical component that may correspond to the page visual file. The second recognition result can include the component information of the at least one second technical component. The specific implementation of the component recognition model will be detailed in the corresponding embodiments below.

[0061] 405: Based on the first recognition result and the second recognition result, obtain the component recognition result.

[0062] The component identification results include component information of at least one target technology component.

[0063] In one implementation, the component identification result can be the intersection of the first identification result and the second identification result. That is, at least one target technical component can be the same technical component among at least one first technical component and at least one second technical component, so as to ensure the accuracy of the component identification result.

[0064] In another implementation, the component identification result can be a combination of the first identification result and the second identification result. That is, at least one target technical component may include at least one first technical component and at least one second technical component to ensure the reliability of the component identification result.

[0065] 406: Using a code generation model, based on the initial page code and component identification results, component code is generated and the initial page code is updated using the component code to generate the target page code.

[0066] The code generation model in this application embodiment can be implemented using a deep learning model. In practical applications, the deep learning model can be a language model (LM) or a multimodal model (MM), etc. This application embodiment does not limit the number of model parameters supported by the model, aiming to meet actual needs. The large model is merely an example. This code generation model can be implemented based on a neural network architecture, which can be pre-trained on large amounts of data. In an optional implementation, such as... Figure 5 As shown, the code generation model may include, for example, an input layer (Input) 10, an encoder (Encoder) 20, a decoder (Decoder) 30, and an output layer (Output) 40. It may also include a self-attention layer and a feed-forward neural network, etc., which are not limited in this application. The input layer receives data input, the encoder converts the input data (usually in sequence form) into a vector representation, capturing the semantic features of the input data, the decoder converts the intermediate representation generated by the encoder into output data (usually in sequence form), and the output layer outputs data, such as the target page code. The self-attention layer is a mechanism that allows the model to focus on other positions in the sequence to better encode the current position information. The feed-forward neural network can perform nonlinear transformations on the output of the self-attention layer to enhance the model's expressive power. The various parts work together, enabling the model built upon them to perform well in various complex processing tasks, such as natural language processing, computer vision, speech recognition, machine translation, text summarization, and intelligent question answering.

[0067] This code generation model can execute corresponding code generation operations guided by prompts. These prompts can be input into the model as data, and may include, for example, data to be processed such as initial page code and component recognition results, as well as task instructions. Furthermore, they may include role information, thought chain information, sample data, output requirements, background data, knowledge data, and / or processing requirements. The content items included in the prompts can be set according to actual circumstances, and this application does not impose any limitations on this.

[0068] Among them, task instructions explicitly tell the model the task operation to be performed, such as "Based on the given HTML code, determine the technical component corresponding to the page element in the HTML code, and replace the page element with the component code," etc.; role information can instruct the model to play a specific role to change its professionalism, such as "You are a front-end engineer," etc.; output requirements are used to standardize the output format, length, style, tone, etc.; processing requirements are used to constrain or standardize the task operation performed by the model, such as code generation requirements, security constraint rules, etc.; thought chain information can be used to guide the model to think and reason step by step, etc.; example data can be used to provide learning samples to help the model learn the context and understand the operation being performed, etc.; background data is used to help the model understand the task scenario, target audience, or preconditions, such as "Use the XXX component library," etc.; knowledge data can be domain knowledge retrieved based on RAG technology, used as reference data to help the model perform task operations.

[0069] Therefore, optionally, prompts can be generated based on the initial page code and component recognition results, and the prompts can be input into the code generation model to perform code generation operations using the code generation model.

[0070] The code generation operation performed by the code generation model can include generating component code and updating the initial page code using the component code. This can involve generating corresponding component code for each technical component involved in the component identification results and replacing the corresponding page element; or it can involve re-identifying page elements in the initial page code based on the component identification results to determine the corresponding technical component and then generating the corresponding component code.

[0071] The code generation model can reference domain knowledge data to accurately identify components and / or generate component code. Domain knowledge data can include component knowledge data retrieved from technical component specification knowledge bases.

[0072] The component knowledge data may include, for example, component usage documentation, variant specification descriptions, and component code examples. Component usage documentation may include usage guidelines and property definitions for each technical component type. The usage guidelines explain the component's function and applicable scenarios. Property definitions include all passable property values ​​(Props), default values, and callback events. For example, if the technical component type is componentType: Button (indicating the component type is a button), its property definition includes size, with property values ​​including small / medium / large, and a default value of medium.

[0073] The variant specification description information includes the visual characteristics of the component variant for each technology component type. For example, the visual characteristics of the Primary component (a component variant of the button component) are: a blue background color and white text style. If a page element matches these visual characteristics, it can be mapped to this component variant.

[0074] The component code examples demonstrate the standard way to write component code, such as " <button type="primary" size="medium">"" is used as sample data for generating component code in the code generation model.

[0075] In addition, domain knowledge data can also include security constraint rules, which can be used as processing requirements for the code generation model. For example, the security constraint rule could be: do not replace the type attribute with the style attribute; do not omit the disabled state, etc.

[0076] In addition, domain knowledge data can also include scenario knowledge data, such as the code style corresponding to the applicable scenarios of the developed page. Scenarios could include overseas e-commerce scenarios, domestic e-commerce scenarios, etc.

[0077] Alternatively, the security constraint rule can also be configured in the technical component specification knowledge base, so that the component knowledge data may include the security constraint rule.

[0078] In this embodiment, component code is generated by identifying components and using an artificial intelligence model. The component code is then used to replace the page element code in the initial code page, ultimately generating the target page code. This avoids a large amount of nested code and improves the quality of the page code.

[0079] The target page code can be used to render the corresponding target page. During rendering, the component code is rendered into the corresponding page elements based on the technology component library, which can then be displayed in the browser.

[0080] In some embodiments, obtaining the component identification result based on the first identification result and the second identification result may include: At least one first technical component and at least one second technical component are respectively designated as target technical components to obtain component identification results. The component identification results include component information of at least one target technical component.

[0081] In some embodiments, the above-described method of using a component recognition model to identify component information of at least one corresponding second technical component based on a page visual file, and obtaining a second recognition result, may include: When the first recognition result is empty, the component recognition model is used to identify the component information of at least one second technical component based on the page visual file.

[0082] Since users may not be able to identify visual components from page visual files if they do not build visual components according to the visual component specifications, a fallback identification model can be used to improve reliability.

[0083] If the first identification result is not empty, it can be used as the component identification result. In other words, the first identification result can be used first as the component identification result; otherwise, the component identification model will be used for identification. In some embodiments, the component information for identifying at least one corresponding second technical component based on the page visual file using the component recognition model includes: The node information of any node in the page visual file is converted into a corresponding node visual image; the node visual image is then used to perform image recognition using a component recognition model to identify the component information of the corresponding second technical component.

[0084] The component recognition model can be trained using sample visual images and component information of sample technical components; the sample visual images can be generated based on sample node information. Sample visual images serve as input data, and component information of sample technical components serves as training labels for supervised training of the component recognition model. Optionally, the component recognition model can be implemented using traditional machine learning models, such as CNN (Convolutional Neural Network), RNN (Recurrent Neural Network), MLP (Multi-Layer Perceptron), and other neural network models, or pre-trained language models such as BERT (Bidirectional Encoder Representations from Transformers). Alternatively, it can be implemented using LLM (Large Language Model), and this application does not limit its implementation in this regard.

[0085] The component recognition module can extract image features from sample visual images, such as color features, shape features, structural features, spatial features, and / or semantic features, so as to identify whether the node corresponds to a second technical component such as a button or input box based on the image features.

[0086] In addition, when the component information includes the type and attributes of the technical component, in some embodiments, the first component recognition model can be used to perform image recognition on the node visual image to identify the technical component type of the corresponding second technical component; and the second component recognition model can be used to perform image recognition on the node visual image to identify the technical component attributes of the corresponding second technical component.

[0087] The first component recognition model can be trained using sample visual images and sample technical component types; while the second component recognition model can be trained using sample visual images and corresponding technical component attributes.

[0088] The conversion of the page visual file into initial page code can be achieved using traditional methods or by generating it through code conversion models, etc. This application does not limit the specific method. For example, the aforementioned initial page code can be generated in the following manner: Parse at least one node in the page visual file and map at least one node to at least one page element code to obtain the node mapping result; Based on the node information of at least one node, generate style information for at least one page element; Generate candidate page code based on at least one page element code and style information; Perform at least one update operation on the candidate page code to update the initial page code; the at least one update operation includes: Identify at least one invalid node in the node list and remove the page element code corresponding to the invalid node from the candidate page code; Identify resource data in the candidate page code, save the resource data, and replace the resource data with the address where the resource data is saved.

[0089] This can be achieved by recursively classifying different nodes in the node structure information and converting them into corresponding page element code, such as... 、 or HTML tags, for example, when parsing a Frame node, it might be converted into HTML. Parsing to a Text node may result in... Parsing to the Image node may transform it into... wait.

[0090] The style information can refer to CSS (Cascading Style Sheets) styles, thus, based on at least one page element code and the style information, candidate page code can be obtained.

[0091] Among these, CSS can be adapted according to the rendering rules of the page design tool to determine the corresponding style information, such as fit-content (adaptive content), flex-grow (fill container), fixed (fixed size), and cumulative effect of rotation angle, etc.

[0092] To improve code quality, invalid nodes can be identified within at least one node, and the page element code corresponding to the invalid node can be removed from the candidate page code. The invalid node could be, for example, an empty node, thus reducing invalid nested code, etc.

[0093] Furthermore, for resource data such as images and SVG (Scalable Vector Graphics) imported into the page visual files, the resource data can be saved, and the saved address can be used to replace the resource data in the initial page code to further simplify the code. Resource data can be saved to a network, such as a CDN (Content Delivery Network), and the saved address is the network connection. Of course, this application does not impose any limitations on this.

[0094] In some embodiments, the above-mentioned use of a code generation model to generate component code based on the initial page code and component identification results, and to update the initial page code using the component code, generating the target page code includes: Using a code generation model, based on the initial page code, component recognition results, and page visual images from the page visual file, and referencing domain knowledge data and security constraint rules, a code generation operation is performed to generate the target page code.

[0095] Optionally, the code generation model can perform code generation operations based on the initial page code, component recognition results, page visual images from the page visual file, and node structured information.

[0096] Furthermore, node structured information can be recursively classified and transformed to obtain node mapping results. The code generation model can also perform code generation operations based on the initial page code, component recognition results, page visual images from the page visual file, and node mapping results.

[0097] Thus, the code generation model can integrate multimodal information such as page visual images, domain knowledge data, and node structured information or node mapping results to achieve high-quality code generation.

[0098] The code generation operation may include, for example: The initial page code is split into multiple code blocks; Based on the component identification results and domain knowledge data, the target technology components corresponding to page elements in the code block are identified, as well as the component structure composed of multiple target technology components. Generate component code for the target technology component, and / or generate component code corresponding to the component structure; Replace the page element code of the corresponding page element with component code; Use semantic naming for class names in the initial page code and component code; Define types for component code; Save the resource data in the initial page code and component code, and replace it with the save address of the resource data.

[0099] These multiple code blocks may include, for example, a header module, a body module, and a tail module. They can be configured according to actual needs and guided to execute the model through prompts.

[0100] To further improve the accuracy of component variant identification, component identification results and domain knowledge data can be referenced. This involves identifying the target technology component and component information corresponding to the page elements in the code block. For example, the `classname` and `style` attributes in the initial page code can be analyzed, and the appropriate attribute values ​​can be determined by comparing them with component knowledge data in the domain knowledge database. Domain knowledge data can be found in the previous description and will not be repeated here.

[0101] In addition, there may be complex components composed of multiple technical components, such as a Tab component containing multiple Tab.Item components. Therefore, based on the component knowledge data in the domain knowledge data, the component structure composed of multiple technical components can be identified, thereby generating the component code corresponding to the component structure. For target technical components that are not component structures, the corresponding component code will also be generated.

[0102] The generated component code can replace the corresponding page element code. For example, the component code of the target technology component can replace the page element code corresponding to the target technology component, and the component code corresponding to the component structure can replace the page element code corresponding to the component structure.

[0103] In addition, class names can be semantically named. Semantic naming refers to using names that clearly express their purpose, function, or content, rather than relying on style, location, or technical details, in order to improve code readability and maintainability.

[0104] In addition, type definitions can be made for component code to specify the allowed data structures or value ranges of the component, such as TypeScript (a computer programming language) type definitions.

[0105] In addition, it can save resource data and replace the resource data in the code with the save address, etc.

[0106] After the above code generation process, the target page code can be generated.

[0107] To further improve the quality of the page code, the target page code can be evaluated. If the evaluation requirements are met, the target page code can be saved or published. In some embodiments, the method may further include: The target page code is rendered to generate a target page image; the first image similarity between the target page image and the page visual image corresponding to the page visual file is calculated; based on the first image similarity, it is determined whether the target page code meets the evaluation requirements; if the target page code does not meet the evaluation requirements, the operation of generating the target page code using the code generation model based on the initial page code and component recognition results is re-executed.

[0108] The evaluation requirement could be, for example, that the similarity of the first image is greater than a first similarity threshold, or it could be quantified as a fidelity score. If the fidelity score is greater than a specified score, then the evaluation requirement is met. Optionally, if the target does not meet the evaluation requirement, the code generation model can be reused to perform code generation. This allows the randomness of the code generation model to be utilized to regenerate the target page code.

[0109] In addition, it can determine the type of exception and update the prompt instructions or technical component specification knowledge base according to the exception type.

[0110] In some embodiments, the method may further include: If the target page code meets the evaluation requirements, retrieve the previous version of the target page code from the code storage data; calculate the second image similarity between the page images corresponding to the target page code and the previous version of the page code; based on the second image similarity, if the target page code meets the release requirements, release the target page code and save it as the current version of the page code to the code storage data.

[0111] In practical applications, page code may be continuously updated. Using the version comparison method in this application embodiment, for example, if the second image similarity is less than the second similarity threshold, it indicates that there is a difference between the page code of the previous version of the target page code domain, and the target page code can be considered to meet the release requirements.

[0112] If the target page code does not meet the publishing requirements, update prompts can be displayed to users to suggest whether the interface visual files should be redesigned.

[0113] In some embodiments, the above-described code generation model, based on the initial page code, component identification results, and page visual images from the page visual file, and referencing domain knowledge data and security constraint rules, performs code generation operations to generate target page code, which may include: Based on the component type in the component identification results, the corresponding component knowledge data is obtained from the technical component specification knowledge base; scenario knowledge data is obtained from the scenario knowledge base; and security constraint rules are obtained from the rule knowledge base. Based on the initial page code, component identification results, page visual images from the page visual file, component knowledge data, scenario knowledge data, and security constraint rules, prompt instructions are generated. The prompt instructions are input into the code generation model, so that the code generation model can be used to perform code generation operations based on the prompt instructions to generate the target page code.

[0114] The code generation model can perform code generation operations based on prompts, reference to component knowledge data, scene knowledge data, and security constraint rules, based on the initial page code, component recognition results, and page visual images from the page visual file. Of course, it can also perform code generation operations by combining node structured information or node mapping results.

[0115] The prompts can be generated based on a pre-defined prompt template and the data to be processed. The prompt template can include pre-defined common content items such as role information, task instructions, processing requirements, output requirements, background data, etc. For ease of understanding, an example of such a prompt template is provided below: You are a front-end engineer. Your task is to analyze the HTML code and screenshots provided below, and refer to the component identification results. Based on this analysis, you must determine the functionality of the page or components to accurately represent the design while improving code quality. Complete this task according to the following requirements: The component library used is: XXXX; Writing guidelines: ... Safety constraint rules: ... The screenshot is as follows: [] The HTML code is: [ The component identification result is: []” The data to be processed, namely the screenshot, component recognition result, and HTML code, are filled into the prompt template as follows: "Screenshot is: []", "Component recognition result is: []", and "HTML code is: []", to form the prompt instructions.

[0116] It should be noted that the above is only one possible example of the prompt instruction, and this application is not limited to this. In the example above, the HTML code is also the initial page code, and the screenshot is the page visual image generated by converting the page visual file. In actual applications, the data to be processed input to the code generation model may also include node structured information or node mapping results, domain knowledge data, etc.

[0117] The aforementioned operation of re-executing the code generation model to generate the target page code based on the initial page code and component identification results when the target page code does not meet the evaluation requirements may include: If the target page code does not meet the evaluation requirements, at least one exception type corresponding to the target page code is identified, and the prompt instructions or technical component specification knowledge base is updated based on at least one exception type; the code generation operation is then re-executed using the code generation model. This at least one exception type may include, for example, missing styles, incorrect component identification, layout deviations, color / size deviations, etc.

[0118] Optionally, if the target page code does not meet the evaluation requirements, an exception message can be output to relevant personnel. This exception message may include, for example, a visual image of the page. Based on this visual image, the relevant personnel determine at least one exception type. Therefore, at least one exception type corresponding to the target page code can be determined in response to an exception confirmation request.

[0119] Furthermore, the first image similarity may include sub-similarity corresponding to various image features. These various image features may include, for example, color features, size features, layout features, etc. The sub-similarity of each image feature is compared with its corresponding sub-threshold. Image features with sub-similarity less than the sub-threshold are regarded as abnormal features, and the corresponding abnormality type is determined. For example, if the color feature is an abnormal feature, the abnormality type may be color deviation, etc.

[0120] Of course, the above-mentioned anomaly alert information can also include sub-similarity corresponding to various image features to help relevant personnel quickly locate the anomaly type based on the sub-similarity.

[0121] The prompt instructions can be updated based on at least one exception type. For example, the prompt instructions can be updated with at least one exception constraint corresponding to the exception type. Alternatively, the technical component specification knowledge base can be updated, such as by adding at least one exception constraint corresponding to the exception type. For instance, in the case of size deviation, the exception constraint could be that the component's default size cannot be overridden; in the case of style loss, the constraint could be something like: "The disabled state should use style XX," etc.

[0122] In some embodiments, Figure 4 If the technical solution of the illustrated embodiment can be executed by a code conversion plugin, then the method may further include: Read the page visual file from the page design tool; The code generation model is used to generate component code based on the initial page code and component identification results, and the component code is used to update the initial page code in order to generate the target page code. This includes: calling the code generation plugin, using the code generation model, generating component code based on the initial page code and component identification results, and using the component code to update the initial page code in order to generate the target page code. In some embodiments, Figure 4 If the technical solution of the embodiment shown can be executed by the first generating server, then the method may further include: Retrieves the page visual file uploaded by the page design tool; the page design tool is used to respond to the code generation request triggered by the user and to upload the page visual file if the user does not meet the permission requirements. The code generation model is used to generate component code based on the initial page code and component identification results, and the component code is used to update the initial page code to generate the target page code. This includes sending the initial page code and component identification results to the code generation plugin, and using the code generation plugin to generate component code based on the initial page code and component identification results, and using the component code to update the initial page code to generate the target page code. In some embodiments, Figure 4 The technical solution of the embodiment can be executed by a code generation plugin. In this case, the initial page code generated by the conversion of the page visual file includes: determining the initial page code provided by the code conversion plugin; the initial page code is generated by the code conversion plugin based on the conversion of the page visual file; wherein the code generation plugin and the code conversion plugin are deployed in the page design tool.

[0123] In some embodiments, the method may further include: In response to a relationship configuration request, determine the component information of the configured visual component and the component information of the technical component determined from the target technical component library; establish a component mapping relationship between the component information of the technical component and the component information of the visual component.

[0124] This relationship configuration request can be generated and sent by the configuration client in response to a relationship configuration operation. The relationship configuration request may include component information of user-provided visual components, as well as component information of technical components determined from the target technical component library. This establishes a component mapping relationship between the component information of the technical components and the component information of the visual components.

[0125] In some embodiments, as described above, visual component specifications can be preset to constrain users in constructing visual components. The component information of at least one visual component in the aforementioned page visual file may include: Find the naming conventions in the visual component specification, take any node in the page visual file that conforms to the naming conventions as a visual component, and determine the type of visual component that conforms to the naming conventions; determine the visual component attributes corresponding to the visual component variants of the visual component according to the variant specifications in the visual component specification; wherein, the visual component is constructed based on at least one visual element in accordance with the visual component specification. The above-mentioned process of finding component mapping relationships, determining the component information mapping of at least one visual component to at least one first technical component, and obtaining a first recognition result may include: Based on the scene name included in any visual component name, determine the corresponding target technology component library; find the component mapping relationship corresponding to the target technology component library, and determine the technology component type mapped by the visual component type and the technology component attribute mapped by the visual component attribute.

[0126] In some embodiments, the method may further include: Output the target page code; in response to a confirmation request for the target page code, save the target page code.

[0127] For example, a code generation plugin can provide a second plugin interface where the target page code can be output. Alternatively, in response to the confirmation request, the target page code can be published directly.

[0128] In addition, it can respond to update requests for the target page code and update the target page code accordingly, thereby supporting manual code modification to ensure user experience.

[0129] Figure 6 This is a flowchart illustrating yet another embodiment of a code generation method provided by this application. The technical solution of this embodiment can be executed by a code conversion plugin, a first plugin server, or a first generation server. The method may include the following steps: 601: Obtain the page visual file from the page design tool.

[0130] This data can be obtained by the code conversion plugin and sent to the first plugin server, or sent to the first generation server by the page design tool, etc.

[0131] 602: Converts the page visual file into the initial page code.

[0132] 603: Generates an optimization request for the initial page code.

[0133] The optimization request may include the initial page code, which can be sent to the second plugin server, or to the code conversion plugin, which will then synchronize it to the code generation plugin, and finally send it to the second plugin server.

[0134] The optimization request is used to instruct the generation of component code based on the initial page code and the component recognition results using a code generation model, and to update the initial page code using the component code to generate the target page code; the component recognition results are obtained based on a first recognition result and a second recognition result; the first recognition result is obtained based on the component information of at least one first technical component mapped by the component information of at least one visual component; the component information of at least one visual component is obtained from the page visual file; and the second recognition result is obtained based on the page visual file using a component recognition model.

[0135] Furthermore, the method may also include: identifying component information of at least one visual component in the page visual file, finding component mapping relationships, determining component information of at least one first technical component mapped to the component information of the at least one visual component, and obtaining a first identification result; using a component identification model, identifying component information of at least one corresponding second technical component based on the page visual file, and obtaining a second identification result; and obtaining a component identification result based on the first identification result and the second identification result. Step 603 may be based on the component identification results and the initial page code to generate an optimization request. This optimization request is used to instruct the code generation model to generate component code based on the initial page code and the component identification results, and to update the initial page code with the component code to generate the target page code.

[0136] The optimization request can be sent to the code generation plugin for processing, or it can be sent by the code generation plugin to the second plugin server for processing.

[0137] Figure 7 This is a flowchart illustrating yet another embodiment of a code generation method provided in this application. The technical solution of this embodiment can be executed by a code generation plugin or a second plugin server. The code generation plugin can be deployed in a page design tool, which also deploys a code conversion plugin. The method may include the following steps: 701: Obtain the initial page code and component recognition results corresponding to the page visual file.

[0138] The initial page code can be obtained by converting the page visual file using a code conversion plugin, a first generation server, a first plugin server, or a first generation server.

[0139] The component identification result is determined by the code conversion plugin, the first generation server, the first plugin server, or the first generation server based on the first identification result and the second identification result; the first identification result is obtained based on the component information of at least one first technical component mapped by the component information of at least one visual component; the second identification result is obtained by using the component identification model based on the node structured information.

[0140] 702: Using a code generation model, based on the initial page code and component identification results, generate component code and use the component code to update the initial page code to generate the target page code.

[0141] Figure 7 The technical solutions of the embodiments shown are Figure 6 The main difference in the technical solutions of the illustrated embodiments lies in that the component identification result is generated by the code conversion plugin, the first plugin server, or the first generation server, and can be provided to the code generation plugin or the second plugin server. The code generation plugin or the second plugin server only needs to perform the code generation operation; other similar or identical steps can be found in [details omitted]. Figure 6 The embodiments shown are described herein and will not be repeated here.

[0142] Figure 8 A signaling flowchart of another embodiment of the code generation method provided in this application is shown. The method may include the following steps: 801: The code conversion plugin obtains the page visual files from the page design tool.

[0143] The code conversion plugin is deployed within the page design tool, which in turn also has a code generation plugin.

[0144] The code conversion scenario can provide a first plugin interface and can sense user operations, such as code generation operations, and then respond to the code generation operations and read the page visual files from the page design tool.

[0145] 802: The code conversion plugin sends the page visual files to the first plugin server.

[0146] The code conversion plugin can also display the initial page code in the first plugin interface and support users to update the initial page code.

[0147] In addition, the code conversion plugin can display optimization prompts in the first plugin interface. In response to the triggering operation of the optimization prompts, it can generate an optimization request and then send the initial page code or the manually updated initial page code to the first plugin server.

[0148] 803: The first plugin server converts the page visual file into the initial page code.

[0149] This application does not limit the use of existing technologies to convert the page visual file into initial page code. Initial page code often contains a large amount of nested code and other meaningless code due to its low quality.

[0150] 804: The first plugin server identifies the component information of at least one visual component in the page visual file, searches for component mapping relationships, determines the component information of at least one first technical component mapped to the component information of at least one visual component, and obtains the first identification result.

[0151] 805: The first plugin server uses a component recognition model to identify the component information of at least one second technical component based on the page visual file, and obtains a second recognition result.

[0152] 806: The first plug-in server determines the component information of at least one target technology component based on the first identification result and the second identification result, and obtains the component identification result.

[0153] 807: The first plugin server sends the initial page code and component identification results to the second plugin server.

[0154] In addition, the code conversion plugin can also display a copy control in the first plugin interface. In response to the copy control's trigger, the initial page code or the manually updated initial page code can be saved to the clipboard. Users can request to activate the code generation plugin in the page design tool. The code generation plugin can provide a second plugin interface with a code editing area. The copied initial page code can be pasted into the code editing area from the clipboard. The second plugin interface can also provide optimization tips. In response to these optimization tips, the code generation plugin can send the initial page code to the second plugin server.

[0155] Code generation plugins can also obtain page visual files from page design tools and perform component recognition.

[0156] This embodiment adopts a dual-path recognition mode to ensure the reliability and accuracy of the final recognition result. The specific method of obtaining the component recognition result can be found in the previous text, and will not be repeated here.

[0157] 808: The second plugin server uses a code generation model to generate component code based on the initial page code and component identification results, and uses the component code to update the initial page code in order to generate the target page code.

[0158] 809: The second plugin server sends the target page code to the code generation plugin.

[0159] The specific method for generating the target page code has been described above and will not be repeated here.

[0160] Figure 9 This is a flowchart illustrating an embodiment of a relationship configuration method provided in this application. The technical solution of this embodiment can be executed by a configuration client, and the method may include: 901: Provides a relationship configuration interface and displays configuration prompts within the interface.

[0161] 902: In response to a configuration operation triggered by a configuration prompt message, determine the component information of the provided visual component and the component information of the technical components in the target technical component library.

[0162] The configuration prompts may include input controls or selection controls. These selection controls can provide component prompts for different technical components from various technical component libraries, allowing the user to choose. Ultimately, this determines the component information of the user-provided visual component and the component information of the technical components in the target technical component library.

[0163] 903: Establish the component mapping relationship between the component information of visual components and the component information of technical components.

[0164] The component mapping relationship is used to determine the component information of at least one first technical component mapped based on the component information of at least one visual component in the page visual file, and to obtain a first recognition result; the first recognition result is used to determine the component recognition result; the component recognition result is used to convert the initial page code with the page visual file, and to generate the corresponding target page code using the code generation model.

[0165] The specific implementation methods of component identification results and target page code can be found in the previous text, and will not be repeated here.

[0166] The component mapping relationship can be saved in the corresponding target technology component library, etc.

[0167] Specifically, the configuration client can request the configuration server to establish a component mapping relationship between the component information of visual components and the component information of technical components.

[0168] Optionally, the configuration client can generate a configuration request and send it to the configuration server based on the component information of the visual component and the component information of the technical component, so that the configuration server can establish and save the component mapping relationship between the component information of the visual component and the component information of the technical component.

[0169] In this embodiment, a dual-path fusion component recognition technology can be used. It can recognize components according to visual component specifications and component mapping relationships, and use a component recognition model for algorithmic recognition. This can balance recognition accuracy with user workload and support iterative differences between multiple technology component libraries and page design tools.

[0170] Users can maintain the component mapping relationship between visual components and technical components by configuring the client and the server. Users can use visual components according to the visual component specifications and directly read the component information to perform mapping.

[0171] The component recognition model performs two layers of recognition. The first layer identifies the component category by training the model to recognize component types, thus eliminating the need for users to build visual components according to visual component specifications and providing fallback recognition capabilities. The second layer identifies component variant attributes by training the model to recognize component variant attributes, such as the Button's type (primary / secondary), size (small / medium / large), and component status (disabled, loading, checked, etc.).

[0172] In this embodiment, accurate component identification can be performed based on the technical component specification knowledge base. By introducing the component specification knowledge base (including component usage documents, variant specification description information, component code examples, and security constraint rules), a three-element fusion mechanism of "component type + HTML + component knowledge" is constructed, which greatly improves the accuracy of component variant identification through the code generation model.

[0173] The code generation model can perform code generation operations based on prompts. These prompts can guide the model to achieve: precise code representation of component variants, such as type="primary" size="medium"; handling complex structures, combining knowledge base to understand the correct way to write nested components (such as Table) and generate a compliant structure; semanticizing class names, renaming meaningless class names generated by AI to semantic names; and performing TypeScript type definition, generating TypeScript interface definitions for components, as well as SVG extraction and code modularization.

[0174] In this embodiment, a quantitative evaluation based on image similarity can be performed to reconstruct the target page code through image similarity comparison, establishing a closed-loop feedback mechanism to support regression testing and continuous optimization. Furthermore, the evaluation results can guide the updating of the component specification knowledge base and the improvement of prompt instructions.

[0175] In this embodiment, an intelligent code generation architecture based on multimodal information fusion can be implemented. The code generation model can integrate the structured node information or node mapping results of the page visual file, as well as multimodal information such as visual information, component knowledge data, and scene knowledge data. High-quality code generation is achieved through rule mapping and model optimization. Finally, the code generation model receives component identification results, HTML source code, node attributes, and component specification knowledge, and performs reasoning by analyzing style features and comparing them with variant specifications to output precise code that conforms to the technical component specifications (e.g., ...). < / button> <button type="primary" size="medium">Instead ).

[0176] This application embodiment can provide a code conversion plugin and a code generation plugin based on the toolchain integration of dual plugins and MCP protocol. It is easy to operate and can be integrated into the intelligent processing module based on the MCP protocol interface, thus deeply integrating with the artificial intelligence development ecosystem.

[0177] It should be noted that the technical solutions in this application are applicable to a virtual network environment. The users described generally refer to "virtual users." Real users can register user accounts on the server to obtain user identities in the network environment. The same user account can log in to the server through different types of clients, allowing the server to identify the same user. Of course, different user accounts can also log in to the server through different types of clients. The server stores different user account binding relationships, thus it can be considered that different user accounts with binding relationships are the same user.

[0178] The detailed implementation methods and beneficial effects of each step in this embodiment have been described in detail in the foregoing embodiments, and will not be elaborated here.

[0179] It should be noted that some processes described in the above embodiments and accompanying drawings include multiple operations appearing in a specific order. However, it should be clearly understood that these operations may not be executed in the order they appear in this document, or they may be executed in parallel. The operation numbers, such as 401, 402, etc., are merely used to distinguish different operations and do not represent any execution order. Furthermore, these processes may include more or fewer operations, and these operations may be executed sequentially or in parallel. It should also be noted that the terms "first," "second," etc., used in this document are used to distinguish different messages, devices, modules, etc., and do not represent a chronological order, nor do they limit "first" and "second" to different types.

[0180] Figure 10 This application provides a schematic diagram of the structure of a code generation apparatus according to one embodiment. The apparatus may include: Code determination unit 1001 is used to determine the initial page code generated by the page visual file conversion; The first component identification unit 1002 is used to identify the component information of at least one visual component in the page visual file, find the component mapping relationship, determine the component information of at least one first technical component mapped to the component information of at least one visual component, and obtain a first identification result. The second component recognition unit 1003 is used to use a component recognition model to recognize the component information of at least one corresponding second technical component based on the page visual file, and obtain a second recognition result; The component fusion unit 1004 is used to obtain component identification results based on the first identification result and the second identification result; The code generation unit 1005 is used to generate component code based on the initial page code and component identification results using the code generation model, and to update the initial page code using the component code to generate the target page code.

[0181] In some embodiments, the component identification result includes component information of at least one target technology component. The component fusion unit may be specifically used to take at least one first technology component and at least one second technology component as target technology components respectively to obtain the component identification result.

[0182] In some embodiments, the second component identification unit is specifically used to identify the component information of at least one corresponding second technical component based on the page visual file when the first identification result is empty, using the component identification model.

[0183] In some embodiments, the second component recognition unit is specifically used to convert the node information of any node in the page visual file into a corresponding node visual image; use the component recognition model to perform image recognition on the corresponding node visual image to identify the component information of the corresponding second technical component; the component recognition model is trained using sample visual images and the component information of sample technical components; the sample visual image is generated based on the sample node information.

[0184] In some embodiments, the first component identification unit is specifically used to: identify the component information of at least one visual component in the page visual file, the component information of the visual component including the visual component type and the visual component attributes; search the component mapping relationship to determine the component information of a first technical component mapped to the component information of any visual component; the component information of the technical component includes the technical component type mapped to the visual component type and the technical component attributes mapped to the visual component attributes.

[0185] In some embodiments, the device may further include: The code conversion unit is used to parse at least one node in the page visual file and map the at least one node to at least one page element code to obtain the node mapping result; generate style information of at least one page element based on the node information of the at least one node; generate candidate page code based on the at least one page element code and the style information; and perform at least one update operation on the candidate page code to update the initial page code; the at least one update operation includes: identifying invalid nodes in at least one node and deleting the node code corresponding to the invalid node from the candidate page code; identifying resource data in the candidate page code, saving the resource data, and replacing the resource data with the storage address of the resource data.

[0186] In some embodiments, the code generation unit is specifically used to utilize a code generation model, based on initial page code, component identification results, and page visual images from page visual files, and referencing domain knowledge data and security constraint rules, to perform code generation operations to generate target page code. The code generation operations include: splitting the initial page code into multiple code blocks; identifying target technical components corresponding to page elements in the code blocks, and identifying the component structure composed of multiple target technical components, referring to component identification results and domain knowledge data; generating component code for the target technical components, and / or generating component code corresponding to the component structure; replacing the page element code of the corresponding page elements with the component code; semantically naming the class names in the initial page code and component code; defining the types of the component code; and saving the resource data in the initial page code and component code, and replacing it with the storage address of the resource data.

[0187] In some embodiments, the device may further include: The evaluation unit is used to render the target page code to generate a target page image; calculate the first image similarity between the target page image and the page visual image corresponding to the page visual file; determine whether the target page code meets the evaluation requirements based on the first image similarity; if the target page code does not meet the evaluation requirements, re-execute the operation of generating the target page code based on the initial page code and component recognition results using the code generation model.

[0188] In some embodiments, the evaluation unit is further configured to, if the target page code meets the evaluation requirements, obtain the previous version of the page code from the code storage data; calculate the second image similarity between the page images corresponding to the target page code and the previous version of the page code respectively; and, based on the second image similarity, determine if the target page code meets the publishing requirements, publish the target page code and save the target page code as the current version of the page code to the code storage data.

[0189] In some embodiments, the code generation unit is specifically used to obtain corresponding component knowledge data from the technical component specification knowledge base according to the component type in the component identification result; and to obtain scene knowledge data from the scene knowledge base and security constraint rules from the rule knowledge base; based on the initial page code, component identification result, page visual image of the page visual file, component knowledge data, scene knowledge data, and security constraint rules, generate prompt instructions; input the prompt instructions into the code generation model, so as to use the code generation model to perform code generation operation based on the prompt instructions to generate target page code; Specifically, the evaluation unit determines at least one exception type corresponding to the target page code when the target page code does not meet the evaluation requirements, and updates the prompt instructions or the technical component specification knowledge base based on at least one exception type; and reuses the code generation model to perform code generation operations.

[0190] In some embodiments, the apparatus may further include: a relationship configuration unit, configured to, in response to a relationship configuration request, determine component information of the configured visual component and component information of the technical component determined from a target technical component library; and establish a component mapping relationship between the component information of the technical component and the component information of the visual component.

[0191] In some embodiments, the first component identification unit identifies the component information of at least one visual component in the page visual file by: searching for the naming convention in the visual component specification, taking any node in the page visual file that conforms to the naming convention as a visual component, and determining the type of visual component that conforms to the naming convention; and determining the visual component attributes corresponding to the visual component variants of the visual component according to the variant specification in the visual component specification; wherein, the visual component is constructed based on at least one visual element in accordance with the visual component specification. The first component identification unit searches for component mapping relationships, determines the component information of at least one first technical component mapped to the component information of at least one visual component, and obtains the first identification result by: determining the corresponding target technical component library based on the scene name included in the name of any visual component; searching for the component mapping relationship corresponding to the target technical component library, and determining the technical component type mapped to the visual component type and the technical component attribute mapped to the visual component attribute.

[0192] Figure 10 The code generation device can execute Figure 4 The implementation principle and technical effects of the code generation method described in the illustrated embodiments will not be repeated here. The specific methods by which each module and unit of the code generation device in the above embodiments performs its operations have been described in detail in the embodiments related to this method, and will not be elaborated upon here.

[0193] Figure 11 This application provides a schematic diagram of the structure of a code generation apparatus according to one embodiment. The apparatus may include: The first acquisition unit 1101 is used to acquire page visual files from page design tools; Code conversion unit 1102 is used to convert the page visual file into initial page code; The code providing unit 1103 is used to generate an optimization request for the initial page code; the optimization request is used to instruct, based on the initial page code and the component identification result, to generate component code using a code generation model and update the initial page code using the component code to generate the target page code; the component identification result is obtained based on a first identification result and a second identification result; the first identification result is obtained based on the component information of at least one first technical component mapped by the component information of at least one visual component; the component information of the at least one visual component is identified from the page visual file; the second identification result is obtained based on the page visual file using the component identification model.

[0194] Figure 11 The code generation device executes Figure 6 The implementation principle and technical effects of the code generation method described in the illustrated embodiments will not be repeated here. The specific methods by which each module and unit of the code generation device in the above embodiments performs its operations have been described in detail in the embodiments related to this method, and will not be elaborated upon here.

[0195] Figure 12 This is a schematic diagram of another embodiment of a code generation apparatus provided in this application. The apparatus may include: The second acquisition unit 1201 is used to acquire the initial page code and component recognition results corresponding to the page visual file; the initial page code is obtained by the code conversion plugin, the first generation server, or the first plugin server converting the page visual file; the component recognition results are determined by the code conversion plugin, the first generation server, or the first plugin server based on the first recognition result and the second recognition result; the first recognition result is obtained based on the component information of at least one first technical component mapped by the component information of at least one visual component; the second recognition result is obtained by recognizing the page visual file using a component recognition model; The code generation unit 1202 is used to generate component code based on the initial page code and component identification results using the code generation model, and to update the initial page code using the component code to generate the target page code.

[0196] Figure 12 The code generation device can execute Figure 7 The implementation principle and technical effects of the code generation method described in the illustrated embodiments will not be repeated here. The specific methods by which each module and unit of the code generation device in the above embodiments performs its operations have been described in detail in the embodiments related to this method, and will not be elaborated upon here. Figure 11 The code generation device can be implemented as a code generation plugin.

[0197] Figure 13 This application provides a schematic diagram of the structure of a relationship configuration device according to one embodiment. The device may include: The first display unit 1301 is used to provide a relationship configuration interface and display configuration prompt information on the relationship configuration interface; Configuration unit 1302 is configured to determine the component information of the provided visual component and the component information of the technical component in the target technical component library in response to a relationship configuration operation triggered by the configuration prompt information. The relationship establishment unit 1303 is used to establish a component mapping relationship between the component information of the visual component and the component information of the technical component, and save it in the target technical component library; the component mapping relationship is used to determine the component information of at least one first technical component mapped based on the component information of at least one visual component in the page visual file, and obtain a first recognition result; the first recognition result is used to determine the component recognition result; the component recognition result is used to convert the initial page code of the page visual file, and generate the corresponding target page code using the code generation model.

[0198] Figure 13 The relationship configuration device can perform... Figure 9 The implementation principle and technical effects of the relationship configuration method described in the illustrated embodiments will not be repeated here. The specific methods by which each module and unit of the relationship configuration device in the above embodiments performs its operations have been described in detail in the embodiments related to this method, and will not be elaborated upon here.

[0199] Figure 14 This is a schematic diagram of the structure of one embodiment of a computing device provided in this application. Figure 14 As shown, in practice, the computing device includes a storage component 1401 and a processing component 1402.

[0200] Storage component 1401 is used to store computer programs and can be configured to store various other data to support operation on a computing device. Examples of this data include instructions for any application or method operating on the computing device, data structures, contact data, phone book data, messages, pictures, videos, etc.

[0201] The processing component 1402, coupled to the storage component 1401, is used to execute the computer program in the storage component 1401 to implement the code generation method or relation configuration method described in the above related embodiments.

[0202] Furthermore, such as Figure 14 As shown, the computing device also includes other components such as a communication component 1403, a display component 1404, a power supply component 1405, and an audio component 1406. Figure 14 The diagram only shows some components and does not mean that the computing device includes only these components. Figure 14 The components shown. Additionally... Figure 14 The components within the dashed box are optional, not mandatory, and their specific requirements depend on the product form of the work node. In this embodiment, the work node can be a terminal device such as a desktop computer, laptop computer, smartphone, or IoT (Internet of Things) device, or a server-side device such as a conventional server, cloud server, or server array. If the work node in this embodiment is implemented as a terminal device such as a desktop computer, laptop computer, or smartphone, it may include... Figure 14 The components within the dashed box; if the working node in this embodiment is implemented as a server-side device such as a conventional server, cloud server, or server array, it may be omitted. Figure 14 The component within the dashed box.

[0203] The aforementioned storage components can be implemented by any type of volatile or non-volatile storage device or a combination thereof, such as Static Random-Access Memory (SRAM), Electrically Erasable Programmable Read Only Memory (EEPROM), Erasable Programmable Read Only Memory (EPROM), Programmable Read-Only Memory (PROM), Read-Only Memory (ROM), magnetic storage, flash memory, magnetic disk, or optical disk.

[0204] The aforementioned display components include a screen, which may include a Liquid Crystal Display (LCD) and a Touch Panel (TP). If the screen includes a Touch Panel, the screen can be implemented as a touchscreen to receive input signals from the user. The Touch Panel includes one or more touch sensors to sense touches, swipes, and gestures on the Touch Panel. The touch sensors can sense not only the boundaries of touch or swipe actions but also the duration and pressure associated with the touch or swipe operation.

[0205] The aforementioned power supply components provide power to various components within the device in which they reside. These power supply components may include a power management system, one or more power sources, and other components associated with generating, managing, and distributing power to the device in which they reside.

[0206] The aforementioned audio component can be configured to output and / or input audio signals. For example, the audio component includes a microphone (MIC) configured to receive external audio signals when the device containing the audio component is in an operating mode, such as call mode, recording mode, or voice recognition mode. The received audio signals can be further stored in memory or transmitted via a communication component. In some embodiments, the audio component also includes a speaker for outputting audio signals.

[0207] Accordingly, embodiments of this application also provide a computer-readable storage medium storing a computer program, which, when executed by a processing component, enables the processing component to implement the steps in the above-described method embodiments. The computer-readable storage medium includes volatile or non-volatile or a combination thereof, and can be removable or non-removable. Examples of computer-readable storage media include, but are not limited to, phase-change random access memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random-access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), erasable programmable read-only memory (EPROM), programmable read-only memory (PROM), flash memory or other memory technologies, CD-ROM, Digital Video Disc (DVD) or other optical storage, magnetic tape, magnetic disk storage or other magnetic storage devices, or any other non-transmission medium. Accordingly, this application also provides a computer program product, which includes a computer program or instructions. When the computer program or instructions are executed by a processing component, the processing component is able to implement the steps in the above method embodiments. It should be understood that each step or combination of steps in the above method flow can be implemented by the computer program or instructions. In addition, these computer programs or instructions can be applied to the processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device, so that the processor of the general-purpose computer, special-purpose computer, embedded processor, or other programmable data processing device can be implemented as a means to implement the corresponding functions in the above method embodiments.

[0208] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the specific working processes of the systems, devices, and units described above can be referred to the corresponding processes in the foregoing method embodiments, and will not be repeated here.

[0209] It should also be noted that the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such process, method, article, or apparatus. Unless otherwise specified, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes that element.

[0210] Finally, it should be noted that the above are merely embodiments of this application and are not intended to limit the scope of this application. Various modifications and variations can be made to this application by those skilled in the art. Any modifications, equivalent substitutions, improvements, etc., made within the spirit and principles of this application should be included within the scope of the claims of this application. < / button>

Claims

1. A code generation method, characterized in that, include: Determine the initial page code generated from the page visual file conversion; Identify the component information of at least one visual component in the page visual file, find the component mapping relationship, determine the component information of at least one first technical component mapped to the component information of the at least one visual component, and obtain a first identification result; Using a component recognition model, based on the page visual file, identify the component information of at least one corresponding second technical component to obtain a second recognition result; Based on the first identification result and the second identification result, the component identification result is obtained; Using a code generation model, component code is generated based on the initial page code and the component identification results, and the initial page code is updated using the component code to generate the target page code.

2. The method according to claim 1, characterized in that, The component identification result includes component information of at least one target technology component, and obtaining the component identification result based on the first identification result and the second identification result includes: The at least one first technical component and the at least one second technical component are respectively used as target technical components to obtain component identification results.

3. The method according to claim 1, characterized in that, The step of using a component recognition model to identify component information of at least one corresponding second technical component based on the page visual file, and obtaining a second recognition result, includes: When the first recognition result is empty, the component recognition model is used to identify the component information of at least one corresponding second technical component based on the page visual file.

4. The method according to claim 1, characterized in that, The component information for identifying at least one corresponding second technical component based on the page visual file using the component recognition model includes: The node information of any node in the page visual file is converted to generate the corresponding node visual image. Using a component recognition model, image recognition is performed on the corresponding node visual image to identify the component information of the corresponding second technical component; the component recognition model is trained using sample visual images and component information of sample technical components; the sample visual image is generated based on sample node information.

5. The method according to claim 1, characterized in that, The component information for identifying at least one visual component in the page visual file includes: Identify the component information of at least one visual component in the page visual file, wherein the component information of the visual component includes the visual component type and visual component attributes. The step of finding the component mapping relationship, determining the component information of at least one first technical component mapped to the component information of at least one visual component, and obtaining the first recognition result includes: Find the component mapping relationship and determine the component information of the first technical component that the component information of any visual component is mapped to; the component information of the technical component includes the technical component type mapped to the visual component type and the technical component attribute mapped to the visual component attribute.

6. The method according to claim 1, characterized in that, The initial page code is generated by conversion in the following manner: Parse at least one node in the page visual file and map the at least one node to at least one page element code to obtain the node mapping result; Based on the node information of the at least one node, style information of the at least one page element is generated; Based on the at least one page element code and the style information, candidate page code is generated; Perform at least one update operation on the candidate page code to update the initial page code; The at least one update operation includes: Identify invalid nodes among the at least one node, and delete the node code corresponding to the invalid node from the candidate page code; Identify the resource data in the candidate page code, save the resource data, and replace the resource data with the save address of the resource data.

7. The method according to claim 1, characterized in that, The step of using a code generation model to generate component code based on the initial page code and the component identification results, and then using the component code to update the initial page code to generate the target page code, includes: Using a code generation model, based on the initial page code, the component recognition results, and the page visual image from the page visual file, and referencing domain knowledge data and security constraint rules, a code generation operation is performed to generate the target page code; the code generation operation includes: The initial page code is split into multiple code blocks; Referring to the component identification results and the domain knowledge data, the target technology components corresponding to the page elements in the code block are identified, as well as the component structure composed of multiple target technology components are identified; Generate component code for the target technology component, and / or generate component code corresponding to the component structure; Replace the page element code of the corresponding page element with the component code; The class names in the initial page code and the component code are given semantic names; Define the type for the component code; Save the initial page code and the resource data in the component code, and replace them with the save address of the resource data.

8. The method according to claim 1, characterized in that, Also includes: The target page code is rendered to generate a target page image; Calculate the first image similarity between the target page image and the page visual image corresponding to the page visual file; Based on the first image similarity, determine whether the target page code meets the evaluation requirements; If the target page code does not meet the evaluation requirements, the operation of generating the target page code based on the initial page code and the component identification results using the code generation model is re-executed.

9. The method according to claim 8, characterized in that, Also includes: If the target page code meets the evaluation requirements, retrieve the previous version of the target page code from the code storage data; Calculate the second image similarity between the page images corresponding to the target page code and the previous version page code, respectively; Based on the second image similarity, if the target page code meets the publishing requirements, the target page code is published, and the target page code is saved as the current version of the page code to the code storage data.

10. The method according to claim 8, characterized in that, The step of using a code generation model to generate target page code, based on the initial page code, the component recognition results, and the page visual image of the page visual file, and with reference to domain knowledge data and security constraint rules, involves performing a code generation operation. Based on the component type in the component identification result, obtain the corresponding component knowledge data from the technical component specification knowledge base; And to obtain scene knowledge data from the scene knowledge base and to obtain security constraint rules from the rule knowledge base; Based on the initial page code, the component identification results, the page visual image of the page visual file, the component knowledge data, the scene knowledge data, and the security constraint rules, a prompt instruction is generated; The prompt instruction is input into the code generation model, so that the code generation model can be used to perform code generation operations based on the prompt instruction to generate the target page code; The step of re-executing the code generation model to generate target page code based on the initial page code and the component identification results when the target page code does not meet the evaluation requirements includes: If the target page code does not meet the evaluation requirements, at least one exception type corresponding to the target page code is determined, and the prompt instruction or the technical component specification knowledge base is updated based on the at least one exception type. The code generation operation is performed again using the code generation model.

11. The method according to claim 1, characterized in that, Also includes: Read the page visual file from the page design tool; The step of using a code generation model to generate component code based on the initial page code and the component identification result, and then using the component code to update the initial page code to generate target page code includes: calling a code generation plugin, using a code generation model to generate component code based on the initial page code and the component identification result, and then using the component code to update the initial page code to generate target page code; or, The page design tool is used to retrieve the page visual file uploaded by the page design tool; the page design tool is used to respond to the code generation request triggered by the user and upload the page visual file if the user does not meet the permission requirements. The step of using a code generation model to generate component code based on the initial page code and the component identification result, and then using the component code to update the initial page code to generate target page code includes: sending the initial page code and the component identification result to the code generation plugin, so that the code generation plugin uses a code generation model to generate component code based on the initial page code and the component identification result, and then using the component code to update the initial page code to generate target page code; or, The initial page code generated by the page visual file conversion includes: the initial page code provided by the code conversion plugin; the initial page code is generated by the code conversion plugin based on the page visual file conversion; wherein, the code generation plugin and the code conversion plugin are deployed in the page design tool.

12. The method according to claim 1, characterized in that, Also includes: In response to a relationship configuration request, determine the component information of the configured visual components and the component information of the technical components determined from the target technical component library; Establish a component mapping relationship between the component information of the technical component and the component information of the visual component.

13. The method according to claim 1, characterized in that, The component information for identifying at least one visual component in the page visual file includes: Find the naming convention in the visual component specification, take any node in the page visual file that conforms to the naming convention as a visual component, and determine the type of the visual component that conforms to the naming convention. According to the variant specification in the visual component specification, the visual component attributes corresponding to the visual component variants of the visual component are determined; wherein, the visual component is constructed based on at least one visual element in accordance with the visual component specification; The step of finding the component mapping relationship, determining the component information of at least one first technical component mapped to the component information of at least one visual component, and obtaining the first recognition result includes: Determine the corresponding target technology component library based on the scene name included in any visual component name; Locate the component mapping relationship corresponding to the target technology component library, and determine the technology component type mapped by the visual component type and the technology component attribute mapped by the visual component attribute.

14. The method according to claim 1, characterized in that, Also includes: Output the target page code; In response to a confirmation request for the target page code, the target page code is saved.

15. A code generation method, characterized in that, include: Obtain the page visual files from the page design tool; Convert the page visual file into initial page code; Generate an optimization request for the initial page code; The optimization request is used to instruct the generation of component code based on the initial page code and the component identification results using a code generation model, and to update the initial page code using the component code to generate the target page code; The component identification result is obtained based on the first identification result and the second identification result; The first recognition result is obtained based on the component information of at least one first technical component mapped from the component information of at least one visual component; the component information of the at least one visual component is obtained from the page visual file; the second recognition result is obtained based on the page visual file using a component recognition model.

16. A code generation method, characterized in that, The method is applied to a code generation plugin, which is deployed in a page design tool, which also deploys a code conversion plugin; the method includes: The process involves obtaining the initial page code and component recognition results corresponding to the page visual file; the initial page code is obtained by converting the page visual file using the code conversion plugin, the first generation server, or the first plugin server; the component recognition results are determined by the code conversion plugin, the first generation server, or the first plugin server based on a first recognition result and a second recognition result; the first recognition result is obtained based on the component information of at least one first technical component mapped from the component information of at least one visual component; the second recognition result is obtained using a component recognition model based on the page visual file. Using a code generation model, component code is generated based on the initial page code and the component identification results, and the initial page code is updated using the component code to generate the target page code.

17. A relation configuration method, characterized in that, include: Provide a relationship configuration interface and display configuration prompts on the relationship configuration interface; In response to the relationship configuration operation triggered by the configuration prompt information, determine the component information of the provided visual component and the component information of the technical components in the target technical component library; Establish a component mapping relationship between the component information of the visual component and the component information of the technical component, and save it in the target technical component library; the component mapping relationship is used to determine the component information of at least one first technical component mapped based on the component information of at least one visual component in the page visual file, and obtain a first recognition result; The first recognition result is used to determine the component recognition result; the component recognition result is used to convert the initial page code with the page visual file, and the corresponding target page code is generated using the code generation model.

18. A computing device, characterized in that, This includes processing components and storage components; The storage component stores a computer program; the computer program is invoked and executed by the processing component to implement the code generation method as described in any one of claims 1 to 14, or the code generation method as described in claim 15, or the code generation method as described in claim 16, or the relationship configuration method as described in claim 17.

19. A computer-readable storage medium, characterized in that, It stores a computer program, which, when executed by a processing component, implements the code generation method as described in any one of claims 1 to 14, or the code generation method as described in claim 15, or the code generation method as described in claim 16, or the relationship configuration method as described in claim 17.

20. A computer program product, characterized in that, Includes a computer program / instruction, which, when executed by a processing component, implements the code generation method as described in any one of claims 1 to 14, or the code generation method as described in claim 15, or the code generation method as described in claim 16, or the relationship configuration method as described in claim 17.

Images