Front-end page building method, device, electronic device, storage medium and product

Abstract

The embodiments of this specification disclose a front-end page construction method, device, electronic device, storage medium and product. The method includes: extracting the multimodal features of the target design draft through a recognition model, and identifying the component attributes of the components in the target design draft and the hierarchical relationship between the components based on the multimodal features; based on the component attributes of the components and the hierarchical relationship between the components, converting the target design draft into a first code in a first programming language; based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, converting the first code into a second code in the second programming language, and the second code is used to generate a page corresponding to the target design draft in the low-code platform. In this way, end-to-end automated conversion from the design draft to the code supported by the low-code platform can be achieved, so that the low-code platform can reuse the design draft, thereby improving page development efficiency.

Description

Technical Field

[0001] This document relates to the field of computer technology, and in particular to a front-end page construction method, device, electronic device, storage medium and product. Background Art

[0002] During the front-end page development process, developers typically need to write code and build the page based on the design draft to achieve the front-end page. However, this method relies on manual operations, which is cumbersome, and the design draft cannot be reused. Once the page development requirements change, the design draft needs to be re-created and the code and page construction work needs to be carried out, resulting in low development efficiency. Summary of the Invention

[0003] The purpose of the embodiments of this specification is to provide a front-end page building method, device, electronic device, storage medium and product to achieve end-to-end automated conversion from design drafts to codes suitable for low-code platforms, so that low-code platforms can reuse design drafts, thereby improving page development efficiency.

[0004] In order to achieve the above objectives, the embodiments of this specification adopt the following technical solutions:

[0005] In a first aspect, a front-end page construction method is provided, comprising:

[0006] Extracting multimodal features of the target design draft through the recognition model, and identifying component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features;

[0007] Based on the component properties of the components and the hierarchical relationship between the components, converting the target design draft into a first code in a first programming language;

[0008] Based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code of the second programming language, and the second code is used to generate a page corresponding to the target design draft in the low-code platform.

[0009] In a second aspect, a front-end page building device is provided, comprising:

[0010] an identification module, configured to extract multimodal features of a target design draft through a recognition model, and identify component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features;

[0011] A first conversion module, configured to convert the target design draft into a first code in a first programming language based on component properties of the components and a hierarchical relationship between the components;

[0012] The second conversion module is used to convert the first code into a second code of the second programming language based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, and the second code is used to generate a page corresponding to the target design draft in the low-code platform.

[0013] According to a third aspect, an electronic device is provided, including:

[0014] processor;

[0015] a memory for storing instructions executable by the processor;

[0016] Among them, the processor is configured to execute the instructions to implement the front-end page building method provided in the first aspect.

[0017] In a fourth aspect, a computer-readable storage medium is provided. When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device can execute the front-end page building method provided in the first aspect.

[0018] In a fifth aspect, a computer program product is provided, which includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to enable a computer to execute some or all of the steps in the front-end page building method provided in the first aspect.

[0019] The solution of the embodiment of this specification takes into account the differences in features of different components in the design draft, extracts the multimodal features of the target design draft through the recognition model, and can accurately identify the component properties of the components and the hierarchical relationship between components in the target design draft based on the multimodal features; then, based on the component properties of the components and the hierarchical relationship between components in the target design draft, the target design draft is converted into a first code in a first programming language, and the first code is used to describe the component properties of the components and the hierarchical relationship between components, and has the advantage of being maintainable, and can be used to be modified and reused to adapt to changes in page development requirements, which is conducive to improving page development efficiency; further, according to the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code in the second programming language, thereby realizing end-to-end automated conversion of code from the design draft to the low-code platform, and the code can be used to generate a page corresponding to the target design draft in the low-code platform, so that the low-code platform can reuse the target design draft and automatically convert it into draggable components and configurations to adapt to changes in page development requirements, thereby improving page development efficiency. In addition, since the programming languages supported by low-code platforms are usually closed source, directly converting the target design draft into the code of the programming language is not effective. By first converting the target design draft into the first code of the open source first programming language, and then converting the first code into the second code of the second programming language, the conversion effect is better and the conversion accuracy is higher. BRIEF DESCRIPTION OF THE DRAWINGS

[0020] The drawings described herein are used to provide a further understanding of this specification and constitute a part of this specification. The exemplary embodiments and descriptions of this specification are used to explain this specification and do not constitute an improper limitation of this specification. In the drawings:

[0021] Figure 1 A flowchart of a front-end page construction method provided in one embodiment of this specification;

[0022] Figure 2 A schematic diagram of a disassembled first-stage assembly provided in accordance with an embodiment of this specification;

[0023] Figure 3 A schematic diagram of a disassembled second-stage assembly provided in accordance with an embodiment of this specification;

[0024] Figure 4 A flowchart of a method for generating a target design draft provided in one embodiment of this specification;

[0025] Figure 5 A flowchart of a design draft generation method provided in another embodiment of this specification;

[0026] Figure 6A schematic diagram of the structure of a front-end page building device provided in one embodiment of this specification;

[0027] Figure 7 The present invention provides a schematic structural diagram of an electronic device according to an embodiment of the present invention. DETAILED DESCRIPTION

[0028] To make the purpose, technical solutions, and advantages of this specification more clear, the technical solutions of this specification will be clearly and completely described below in conjunction with the specific embodiments of this specification and the corresponding drawings. Obviously, the embodiments described are only part of the embodiments of this specification, not all of the embodiments. Based on the embodiments in this specification, all other embodiments obtained by ordinary technicians in this field without making creative efforts should fall within the scope of protection of this document.

[0029] The term "including" and its variations used in this document are open inclusions, that is, "including but not limited to". The term "based on" means "based at least in part on". The term "one embodiment" means "at least one embodiment"; the term "another embodiment" means "at least one other embodiment"; the term "some embodiments" means "at least some embodiments". The relevant definitions of other terms will be given in the following description. The term "responsive to" is used to indicate the conditions or states on which the operations performed depend. When the dependent conditions or states are met, the one or more operations performed may be in real time or with a set delay. Unless otherwise specified, there is no restriction on the order of the multiple operations performed.

[0030] It should be noted that the concepts of "first" and "second" mentioned in this document are only used to distinguish different devices, modules or units, and are not used to limit the order or interdependence of the functions performed by these devices, modules or units.

[0031] It should be noted that the modifiers such as "one" and "multiple" mentioned in this document are illustrative rather than restrictive. Those skilled in the art should understand that unless otherwise clearly stated in the context, they should be understood as "one or more".

[0032] The names of the messages or information exchanged between multiple devices in the embodiments of this document are for illustrative purposes only and are not intended to limit the scope of these messages or information.

[0033] As mentioned earlier, existing design-to-code tools use a CNN (Convolutional Neural Network) to parse design layers and generate static HTML (Hypertext Markup Language) or CSS (Cascading Style Sheets) code. These code then generates the front-end page based on the HTML or CSS code. However, the code output by these solutions lacks a componentized structure. For example, it cannot generate React or Vue components. Any changes to the front-end page require a new design and then code conversion, resulting in low development efficiency. Furthermore, these solutions focus solely on static page generation and fail to consider integration with back-end data. Consequently, they fail to account for the data binding requirements of low-code platforms. This means developers must manually connect to the low-code platform's API (Application Programming Interface) to bind back-end data to the generated HTML or CSS code, increasing development workload.

[0034] Although developers can currently develop front-end pages by dragging and dropping components on a low-code platform based on a design draft, this approach still has certain limitations. For example, it relies on manual operations, and low-code platforms are generally unable to directly reuse these design drafts, resulting in low development efficiency.

[0035] To this end, the embodiments of this specification aim to provide a front-end page building method. Taking into account the differences in the features of different components in the design draft, the multimodal features of the target design draft are extracted through the recognition model, and based on the multimodal features, the component properties of the components in the target design draft and the hierarchical relationship between the components can be accurately identified; then, based on the component properties of the components in the target design draft and the hierarchical relationship between the components, the target design draft is converted into a first code in a first programming language. The first code is used to describe the component properties of the components and the hierarchical relationship between the components, and has the advantage of being maintainable, and can be used to be modified and reused to adapt to changes in page development requirements, which is conducive to improving page development efficiency; further, according to the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code in the second programming language, thereby realizing end-to-end automated conversion of the code from the design draft to the low-code platform. The code can be used to generate a page corresponding to the target design draft in the low-code platform, so that the low-code platform can reuse the target design draft and automatically convert it into draggable components and configurations to adapt to changes in page development requirements, thereby improving page development efficiency. In addition, since the programming languages supported by low-code platforms are usually closed source, directly converting the target design draft into the code of the programming language is not effective. By first converting the target design draft into the first code of the open source first programming language, and then converting the first code into the second code of the second programming language, the conversion effect is better and the conversion accuracy is higher.

[0036] It should be understood that the front-end page building method provided in the embodiments of this specification can be executed by an electronic device or software installed in an electronic device, specifically, can be executed by a terminal device or a server device.

[0037] The technical solutions provided by the various embodiments of this specification are described in detail below with reference to the accompanying drawings.

[0038] Please refer to Figure 1 , is a flow chart of a front-end page building method provided in one embodiment of this specification, the method may include:

[0039] S102: extracting multimodal features of the target design draft through the recognition model, and identifying component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features.

[0040] The target design is the design to be converted. The design can be in various suitable formats, including but not limited to Figma, Sketch, etc.

[0041] The multimodal features of the target design draft may include the multimodal features of different areas of the target design draft. Multimodal features may include, for example, but are not limited to: visual features, structural features, and semantic features. Among them, visual features refer to features in visual presentation, which may specifically include element spacing, color values (such as RGB values, HEX values, etc.), font size and style, line thickness, shape and pattern, light and shadow effects, and overall design style (such as flatness, three-dimensionality), etc. Structural features are used to reflect the layout and organizational form, and may specifically include layout methods (such as top-down layout, left-right layout), element arrangement methods, etc. Semantic features are used to reflect the information content and intention conveyed by the target design draft or part of its area, and may specifically include text content, the meaning of icon symbols, the narrative nature of images, and the interactive information of elements.

[0042] In the embodiments of this specification, the recognition model can adopt various pre-trained artificial intelligence (AI) models, such as but not limited to multimodal models, image recognition models, deep learning networks, etc., which are not limited in the embodiments of this specification.

[0043] The target design draft can include multiple components, which may be located at different levels. For example, a larger-grained container component usually contains a composite component, and a composite component is usually composed of multiple atomic components with the smallest granularity. In other words, a composite component is the next-level component of a container component, and multiple atomic components are the next-level components of a composite component. Each component has corresponding component properties. Component properties define the component's appearance, behavior, and how it interacts with other components. Component properties can include, but are not limited to, component appearance properties (such as size, color and style, layout, etc.), behavioral properties (such as interactivity, responsiveness, state management), and data properties (such as data source, data binding, etc.).

[0044] Since there are differences in at least one of the visual features, structural features, and semantic features of the areas where different components are located in the target design draft, based on the multimodal features of the target design draft, graph computer vision recognition (Computer Vision) technology is used to accurately identify the components in the target design draft and determine the component properties and hierarchical relationships between components.

[0045] In the above S102 , the component attributes of the components in the target design draft and the hierarchical relationships between the components may be identified in various appropriate ways, which are not limited in the embodiments of this specification.

[0046] In one implementation, the recognition model uses the extracted multimodal features to classify the components in the target design through a classification algorithm, identifying the component type (such as button, text box, image, etc.). Then, for each component, image processing and text analysis techniques are used to further extract its attribute information, such as the size, position, color, and font. Furthermore, by analyzing the spatial positional relationships of the components in the target design and combining them with the semantic information of the target design, the topological structure and dependencies between components are further analyzed to accurately identify the hierarchical relationships between components. For complex inter-component relationships, models such as Graph Neural Networks (GNNs) can be used for modeling and analysis to capture the topological structure and dependencies between components, thereby more accurately identifying the hierarchical relationships between components.

[0047] In another implementation, the step S102 of identifying the component attributes and the hierarchical relationships between components in the target design draft based on the multimodal features includes the following steps:

[0048] S121, determining the target design draft as a first-level component.

[0049] Specifically, the target design draft is determined as a container component, which can nest other components.

[0050] S122 , starting from the first level component, for each level component, based on the multimodal features of the area where the component of this level is located, determine the component attributes of the component of this level.

[0051] Specifically, for each level of components, the appearance attributes of the components at this level can be determined based on the visual features and structural features of the area where the components at this level are located; the behavioral attributes and data attributes of the components at this level can be determined based on the semantic features of the area where the components at this level are located.

[0052] S123: Disassemble the component at this level based on the component attributes of the component at this level to obtain the next level component of the component at this level.

[0053] Specifically, if the multimodal features of the region where the component of this level is located include multiple visual features, the region where the component of this level is located is divided into multiple sub-regions based on the structural features of the region where the component of this level is located; and each sub-region is determined as the next-level component.

[0054] For example, Figure 2 The target design shown is a design for a company details page, with the entire design serving as the first-level component. Based on the design's visual and structural characteristics, it contains six sub-areas with similar visual characteristics, arranged in a top-to-bottom layout. Therefore, the design can be divided into six sub-areas, each designated as a second-level component.

[0055] Then, for each second-level component, repeat the above process to disassemble until the next-level component obtained contains only one visual feature. Figure 3 As shown, taking the first sub-region as an example, based on the visual and structural features of the sub-region, the sub-region adopts a left-right layout, with a picture on the left and text on the right. The two have different visual features, so the sub-region is divided into two smaller sub-regions on the left and right, and these two smaller sub-regions are determined as third-level components.

[0056] Since the third level component on the left (i.e. Figure 3 The sub-region to which the third-level component belongs ("Image 1") contains only one visual feature as a whole, so the third-level component is determined to be an atomic component, that is, the component with the smallest functional granularity in the target design draft, and the third-level component is no longer disassembled. The sub-region to which the third-level component belongs on the right contains a variety of texts with different visual features, and this sub-region adopts a top-to-bottom layout, that is, the bold text "A Enterprise" and "Information Technology" at the top, and the non-bold text "Introduction to A Enterprise" at the bottom. Therefore, this sub-region is divided into two smaller sub-regions, one above and one below, and these two smaller sub-regions are determined to be fourth-level components, that is, the upper fourth-level component contains the text "A Enterprise" and "Information Technology", and the lower fourth-level component contains the text "Introduction to A Enterprise".

[0057] The subregion of the upper fourth-level component contains two texts with different visual characteristics, and this subregion uses a left-right layout. That is, the text "A Enterprise" on the left does not have a solid border, while the text "Information Technology" on the right does. This subregion is then divided into two smaller subregions on the left and right. Each of these subregions is identified as a fifth-level component. That is, the fifth-level component on the left contains the text "A Enterprise," and the fifth-level subcomponent on the right contains the text "Information Technology." The subregion of the lower fourth-level component contains text with a single visual characteristic. Therefore, this fourth-level component is determined to be an atomic component and is not further disassembled.

[0058] By decomposing the target design draft layer by layer in the above manner, a complex design draft can be decomposed into a series of clear and specific components, and the component properties and the hierarchical relationship between components can be accurately determined for each component, which helps to ensure that the second code obtained based on the final conversion can highly restore the target design draft.

[0059] S104 , based on the component attributes of the components and the hierarchical relationship between the components, convert the target design draft into a first code in a first programming language.

[0060] The first programming language can be any open source programming language, and can be set according to actual needs. This specification does not limit this. Since the programming languages supported by low-code platforms are usually closed source, directly converting the target design draft into the code of the programming language is not effective. By first converting the target design draft into the first code of the open source first programming language, and then converting the first code into the second code of the second programming language, the conversion effect is better and the conversion accuracy is higher.

[0061] In one implementation, the first programming language may be JSX (JavaScript XML). JSX is a syntax extension primarily used in the React framework that allows HTML tags to be embedded within JavaScript code, simplifying the writing of React components. Since low-code platforms generally support JavaScript, converting the target design draft into the first code in the JSX language not only enables the first code to accurately describe the components in the target design draft and is more intuitive, easier to understand, maintain, and reuse, but also allows the content of the target design draft to be accurately converted into code supported by the low-code platform.

[0062] In the above S104 , the target design draft may be converted into the first code in the first programming language through various appropriate methods, which are not limited in this embodiment of the present specification.

[0063] In one implementation, the above S104 includes the following steps: generating a code template corresponding to the target design draft based on the hierarchical relationship between components and the grammatical specifications of the first programming language; generating a first component code corresponding to the component based on the component properties and the grammatical specifications of the first programming language; filling the first component code corresponding to the component into the code template to obtain the first code in the first programming language.

[0064] For example, Figure 2 and Figure 3 Taking the hierarchical relationship between components shown in the figure as an example, assuming that the first programming language is JSX, then the code template corresponding to the target design draft is as follows:

[0065] <container>

[0066] <block1 / >

[0067] <block2 / >

[0068] <block3 / >

[0069] <block4 / >

[0070] <block5 / >

[0071] <block6 / >

[0072] <container>

[0073] In the above code template, <container>represents the first-level component, <block1 / > to <block6 / > Respectively represent a second-level component, which is used to describe the component properties of the second-level component and the subcomponents it contains.

[0074] by Figure 3 Taking the second-level component shown as an example, the field "layout" can be used to describe the layout of the second-level component. The second-level component contains two third-level components. The third-level component on the left contains an image, and the third-level component on the right contains text. For the third-level component on the left, the field "Image src" is used to describe the content of the third-level component; for the third-level component on the right, the field "layout" is used to describe the layout of the third-level component, and the field "title" is used to describe the text "A Enterprise" in the third-level component, and the field "content" is used to describe the text "Information Technology" and "Introduction to A Enterprise" in the third-level component. In this way, the component code corresponding to the second-level component and the component code corresponding to the sub-component in the second-level component are obtained; further, the component codes corresponding to these components are used to replace the fields in the above code template. <block1 / > .

[0075] The other second-level components are processed in a similar manner to obtain the first code.

[0076] In another implementation, a pre-trained AI model is used to convert the target design draft into a first code in a first programming language based on the component attributes and the hierarchical relationships between the components in the target design draft. The AI model herein may include, but is not limited to, an LLM (Large Language Model), a multimodal model, a deep learning network with code conversion capabilities, and the like, and is not limited in this embodiment of the present specification.

[0077] S106, based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, convert the first code into a second code in the second programming language.

[0078] The second code is used to generate the page corresponding to the target design draft in the low-code platform. Different low-code platforms support different second programming languages. For example, some low-code platforms support JSON Schema as the second programming language.

[0079] The mapping relationship between the first programming language and the second programming language describes the rules for converting the code of the first programming language into the code of the second programming language. The mapping relationship may, for example, include but is not limited to the mapping relationship in the description of component types, sub-component structures and interactive events. For example, assuming that the first programming language is JSX and the second programming language is JSON Schema, then the mapping relationship between the two includes: using tags to describe component types in JSX, and using the type attribute in JSON Schema to specify the type of component; using nested structures in JSX to describe the nested relationship between components, and using the child attribute in JSON Schema to describe the array of sub-components, each sub-component is an object with its own type and props attributes; using onClick={handleSubmit} in JSX to describe the event triggered after the component is clicked, and using "actionType":"ajax" in JSON Schema to describe the event.

[0080] In the above S106 , the first code in the first programming language may be converted into the second code in the second programming language through various appropriate methods, which are not limited in this embodiment of the present specification.

[0081] In one implementation, the above S106 includes the following steps: parsing the first code to obtain an abstract syntax tree corresponding to the first code; and converting the abstract syntax tree into a second code in the second programming language based on the abstract syntax tree and a mapping relationship between the first programming language and the second programming language.

[0082] An abstract syntax tree describes the grammatical structure of the first code. The abstract syntax tree contains multiple nodes. A recursive method is used to traverse each node of the abstract syntax tree and extract information based on the node type, such as extracting tag names and attributes from element nodes, extracting attribute names and values from attribute nodes, and extracting text content from text nodes. Furthermore, according to the syntax specifications of the second programming language and based on the extracted information, the nodes are mapped to data in the second programming language, such as mapping tag names to tagName or similar fields, mapping attributes to key-value pairs in objects, and mapping child elements to a children array, where each item in the array is a JSON Schema of a child element, thereby obtaining the second code.

[0083] It can be understood that the abstract syntax tree, as an abstract representation of the first code, can accurately reflect the components, attributes, nested relationships, etc. in the first code, and can retain data binding semantics. Code conversion based on the abstract syntax tree can significantly improve the accuracy and reliability of the conversion.

[0084] In another implementation, the first code includes a first component code corresponding to a component in the target design draft, and the component attributes of the component include the type of the component. The above S106 includes the following steps: based on the type of the component in the target design draft and the component type supported by the low-code platform, determining the first component and the second component in the target design draft, the first component is a component supported by the low-code platform, and the second component is a component not supported by the low-code platform; based on the mapping relationship between the first programming language and the second programming language, converting the first component code corresponding to the first component to obtain the second component code corresponding to the first component; creating a third component with a code compilation function in the low-code platform, and compiling the first component code corresponding to the second component through the third component to obtain the second component code corresponding to the second component; based on the hierarchical relationship between the components in the target design draft, combining the second component code corresponding to the first component and the second component code corresponding to the second component to obtain the second code in the second programming language.

[0085] In applications, the component types supported by the low-code platform can be pre-configured based on actual needs. For example, low-code supports components such as tables, input boxes, calendars, bar charts, line charts, and pie charts. Third-party components refer to components with code compilation capabilities supported by the low-code platform, also known as fallback components.

[0086] For the first component, the first component code of the first component can be parsed to obtain the abstract syntax tree of the first component code, and then the abstract syntax tree can be converted into the second component code of the second programming language. For the second component, a third component can be loaded in the preview area of the low-code platform, and the first component code of the second component can be compiled by the third component to obtain the compatibility shim code, which is the second component code corresponding to the second component. Finally, according to the hierarchical relationship between the components, the second component codes corresponding to all components in the target design draft are combined to obtain the second code of the second programming language.

[0087] Since the low-code platform supports a limited number of component types in actual applications, the above conversion method can effectively avoid the problem of unsuccessful conversion of some components due to the components in the target design draft exceeding the range of components supported by the low-code platform, thereby ensuring that the second code can accurately restore the complete content of the target design draft.

[0088] In another embodiment of the present specification, the following steps may be included after the above S106: based on the second code, displaying the page corresponding to the target design draft in the low-code platform; detecting whether the page meets the preset design specifications through the optimization model, and if the page does not meet the design specifications, correcting the page.

[0089] Specifically, the page includes components in the target design draft. If the layer spacing of the page is less than or equal to the preset spacing, based on the difference between the layer spacing and the preset spacing, a fourth component is added to the page and a first prompt message is output. The fourth component is a component supported by the low-code platform for increasing the layer spacing; and / or, if there is a fifth component with an undefined interaction state on the page, a preset interaction style template is added to the page for the fifth component and a second prompt message is output.

[0090] For example, the layer spacing of the page is 5px grid, and the preset design specification requires the layer spacing to be 8px grid. In this case, add a 3px grid between the two adjacent layers of the page. <space>Component, thereby increasing the layer spacing to an 8px grid. Furthermore, a first prompt message may be output to inform the developer that the layer spacing on the page does not meet the specifications. The first prompt message may include, but is not limited to, at least one of the following information: the layer spacing on the page, the layer spacing required by the design specifications, the added spacing component, and the size of the spacing component.

[0091] For example, a button component exists on a page, but its style when hovering or focusing is not specified. To address this, a preset hover style template or focus style template is added to the button component. For example, when the mouse hovers over or focuses on the button component, the color or style of the mouse is changed, thereby improving the visual experience of the page. Furthermore, a second prompt message can be output to remind the developer that there is a component with an undefined interactive state on the page. The second prompt message may include, but is not limited to, at least one of the following information: the location of the component, the hover style template or focus style template added for the component, etc.

[0092] In the application, the optimization model can be trained in the following manner: obtaining page information of a sample page corresponding to a sample design draft and a modification record corresponding to the sample page; and training the optimization model based on the page information and modification record.

[0093] The page information may include, but is not limited to, the page's layer tree structure, performance tracking data for the page, etc. Performance tracking data may include, but is not limited to, LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift), FID (First Input Delay), etc.

[0094] For example, the page information of the sample page can be used as input and the modification record corresponding to the sample page can be used as a label, and the optimization model can be trained using a supervised training method, so that the trained optimization model can accurately identify whether any page meets the preset design specifications.

[0095] By displaying, testing and correcting the page corresponding to the target design draft, a high-quality page can be generated even if the target design draft has deficiencies.

[0096] In another embodiment of this specification, Figure 4 As shown, before the above S102, the following steps may also be included: in response to receiving a target text indicating generation of a design draft, extracting requirement information for the design draft from the target text; generating a candidate design draft based on the recognition model and the requirement information; in response to receiving negative feedback information on the candidate design draft, outputting a third prompt information, the third prompt information being used to instruct to correct the requirement information; in response to receiving correction information of the requirement information, correcting the candidate design draft through the recognition model to obtain the target design draft.

[0097] For example, if the target text is "Help me generate a work order management system. First, expand the requirements, search for the functions of common work order systems on the market, create a task list, and then convert the task list into a JSX page, and finally into a DSL page." The requirement information extracted from this target text includes: work order management system, common work order systems on the market, work order system functions, task list, JSX page, and DSL (Domain-Specific Language) page. Based on this requirement information, the recognition model searches the internet for the functions of currently common work order systems, generates a candidate design draft with these functions, and displays it.

[0098] If positive feedback is received for the candidate design, the candidate design is determined as the target design. Then, according to S102 to S106, the target design is first converted into JSX code, and then the JSX code is converted into DSL code supported by the low-code platform. Positive feedback may include, but is not limited to: negative comments on the candidate design, the addition of an unqualified label to the candidate design, or the rejection of the candidate design.

[0099] If negative feedback is received regarding the candidate design, a third prompt message, "Please list the areas for improvement in the above design," is displayed. A task list is then generated based on the revised requirements information, and a new candidate design is generated based on this task list. Negative feedback may include, but is not limited to, positive comments about the candidate design, the addition of a qualified label to the candidate design, and the acceptance of the candidate design.

[0100] If positive feedback is received for a new candidate design draft, the new candidate design draft is determined as the target design draft, and then according to S102 to S106 above, the target design draft is first converted into JSX code, and then the JSX code is converted into DSL code supported by the low-code platform. The task list is as follows:

[0101] Ticket creation page: problem type selection (drop-down menu / category icon), problem description editor (supports uploading attachments), priority / urgency mark, and related product / service selection;

[0102] Work order tracking also includes: personal work order list (sorted by status / time), work order progress bar visualization, historical response record viewing, and satisfaction rating entry;

[0103] Knowledge base search page: intelligent search box (supports association of related words), popular question classification navigation, solution voting mechanism, and similar question recommendations. Through the above embodiment, users only need to enter a concise and clear text description, and the system can quickly capture their needs and automatically generate a design draft that matches it. In this way, the source of design drafts is expanded. That is, the design draft can be a picture designed by a designer using professional design software, or it can be automatically generated based on the descriptive text provided by the user. This method not only greatly enriches the application scenarios of the above-mentioned front-end page construction method, but also significantly improves page development efficiency.

[0104] The front-end page building method provided in the embodiment of this specification takes into account the differences in the features of different components in the design draft, extracts the multimodal features of the target design draft through the recognition model, and can accurately identify the component properties of the components in the target design draft and the hierarchical relationship between the components based on the multimodal features; then, based on the component properties of the components in the target design draft and the hierarchical relationship between the components, the target design draft is converted into a first code in a first programming language. The first code is used to describe the component properties of the components and the hierarchical relationship between the components, and has the advantage of being maintainable, and can be used to be modified and reused to adapt to changes in page development requirements, which is conducive to improving page development efficiency; further, according to the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code in the second programming language, thereby realizing end-to-end automated conversion of code from the design draft to the low-code platform. The code can be used to generate a page corresponding to the target design draft in the low-code platform, so that the low-code platform can reuse the target design draft and automatically convert it into draggable components and configurations to adapt to changes in page development requirements, thereby improving page development efficiency. Furthermore, since the programming languages supported by low-code platforms are typically closed-source, directly converting the target design draft into code in that programming language is ineffective. By first converting the target design draft into a first code in an open-source first programming language, and then converting the first code into a second code in a second programming language, the conversion effect is better and the conversion accuracy is higher. This method is cross-platform compatible and supports the output of multi-terminal codes such as mini-programs, Taro, and React Native.

[0105] In order to facilitate the understanding of the above front-end page construction method, the following Figure 5 , using a specific embodiment to illustrate the page design draft conversion process.

[0106] like Figure 5 As shown, the user inputs a page design draft or describes the page design draft to be generated in natural language text.

[0107] When the user inputs a page design draft, the page design draft is determined as the target design draft.

[0108] When a user enters natural language text, the recognition model identifies the user's needs based on the text. If the needs are unclear, the model prompts the user to provide more information or generates a candidate design based on the existing needs. If the user rejects the candidate design, the model prompts the user to revise the needs. Based on the revised needs, a new candidate design is generated. If the user confirms the new candidate design, the new candidate design is determined as the target design.

[0109] Furthermore, the recognition type identifies the multimodal features of the page design draft, and identifies the component properties of the components in the page design draft and the hierarchical relationships between components based on the multimodal features; then, based on the component properties of the components and the hierarchical relationships between components, the page design draft is converted into JSX code.

[0110] Furthermore, based on the mapping relationship between the JSX code and the JSON Schema supported by the low-code platform, the JSX code is converted into the JSON Schema code.

[0111] Furthermore, based on the JSON Schema code, a page corresponding to the target design draft is generated in the low-code platform, and the page is tested to see if it meets the preset design specifications. If the page meets the design specifications, the JSON Schema code and page are adopted; if the page does not meet the design specifications, the page and the JSON Schema code are revised.

[0112] In addition, with the above Figure 1 Corresponding to the front-end page building method shown, the embodiment of this specification also provides a front-end page building device. Figure 6 6 is a structural diagram of a front-end page building device 600 provided in an embodiment of this specification, including: an identification module 610, a first conversion module 620 and a second conversion module 630.

[0113] The recognition module 610 is used to extract multimodal features of the target design draft through a recognition model, and identify component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features.

[0114] The first conversion module 620 is used to convert the target design draft into a first code in a first programming language based on the component properties of the components and the hierarchical relationship between the components.

[0115] The second conversion module 630 is used to convert the first code into a second code of the second programming language based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, and the second code is used to generate a page corresponding to the target design draft in the low-code platform.

[0116] The front-end page building device provided in the embodiment of this specification takes into account the differences in the features of different components in the design draft, extracts the multimodal features of the target design draft through the recognition model, and can accurately identify the component properties of the components in the target design draft and the hierarchical relationship between the components based on the multimodal features; then, based on the component properties of the components in the target design draft and the hierarchical relationship between the components, the target design draft is converted into a first code in a first programming language. The first code is used to describe the component properties of the components and the hierarchical relationship between the components, and has the advantage of being maintainable, and can be used to be modified and reused to adapt to changes in page development requirements, which is conducive to improving page development efficiency; further, according to the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code in the second programming language, thereby realizing end-to-end automated conversion of code from the design draft to the low-code platform. The code can be used to generate a page corresponding to the target design draft in the low-code platform, so that the low-code platform can reuse the target design draft and automatically convert it into draggable components and configurations to adapt to changes in page development requirements, thereby improving page development efficiency. In addition, since the programming languages supported by low-code platforms are usually closed source, directly converting the target design draft into the code of the programming language is not effective. By first converting the target design draft into the first code of the open source first programming language, and then converting the first code into the second code of the second programming language, the conversion effect is better and the conversion accuracy is higher.

[0117] In another embodiment, the multimodal features of the target design draft include multimodal features of different regions in the target design draft;

[0118] The identification module includes:

[0119] A first determining submodule, configured to determine the target design draft as a first-level component;

[0120] A second determining submodule is configured to determine, for each level of components, starting from the first level of components, based on the multimodal features of the region where the components of the current level are located, the component attributes of the current level components;

[0121] The disassembly submodule is used to disassemble the current level component based on the component attributes of the current level component to obtain the next level component of the current level component.

[0122] In another embodiment, the multimodal features include visual features and structural features;

[0123] The disassembly submodule is used to:

[0124] If the multimodal features of the region where the component at this level is located include multiple visual features, then the region where the component at this level is located is divided into multiple sub-regions based on the structural features of the region where the component at this level is located;

[0125] Each sub-area is identified separately as a next-level component.

[0126] In another embodiment, the first conversion module includes:

[0127] A first generating submodule, configured to generate a code template corresponding to the target design draft based on the hierarchical relationship between the components and the grammatical specification of the first programming language;

[0128] A second generating submodule is configured to generate a first component code corresponding to the component based on the component attributes of the component and the syntax specification of the first programming language;

[0129] The filling submodule is used to fill the first component code corresponding to the component into the code template to obtain the first code in the first programming language.

[0130] In another embodiment, the second conversion module includes:

[0131] a parsing submodule, configured to parse the first code to obtain an abstract syntax tree corresponding to the first code;

[0132] The first conversion submodule is configured to convert the abstract syntax tree into a second code in the second programming language based on the abstract syntax tree and a mapping relationship between the first programming language and the second programming language.

[0133] In another embodiment, the first code includes a first component code corresponding to a component in the target design draft, and the component attribute of the component includes a type of the component;

[0134] The second conversion module includes:

[0135] A third determination submodule is configured to determine, based on the type of components in the target design draft and the component types supported by the low-code platform, a first component and a second component in the target design draft, wherein the first component is a component supported by the low-code platform and the second component is a component not supported by the low-code platform;

[0136] a second conversion submodule, configured to convert a first component code corresponding to the first component based on a mapping relationship between the first programming language and the second programming language to obtain a second component code corresponding to the first component;

[0137] A compilation submodule, configured to create a third component with a code compilation function in the low-code platform, and compile the first component code corresponding to the second component through the third component to obtain the second component code corresponding to the second component;

[0138] The combining submodule is used to combine the second component code corresponding to the first component and the second component code corresponding to the second component based on the hierarchical relationship between the components in the target design draft to obtain the second code in the second programming language.

[0139] In another embodiment, the front-end page building device further includes:

[0140] A display module, configured to display a page corresponding to the target design draft in the low-code platform based on the second code;

[0141] The correction module is used to detect whether the page meets the preset design specifications through the optimization model, and to correct the page if the page does not meet the design specifications.

[0142] In another embodiment, the page includes components in the target design draft;

[0143] The correction module is used to:

[0144] If the layer spacing of the page is less than or equal to the preset spacing, based on the difference between the layer spacing and the preset spacing, a fourth component is added to the page, and a first prompt message is output, where the fourth component is a component supported by the low-code platform for increasing the layer spacing; and / or,

[0145] If a fifth component with an undefined interaction state exists in the page, a preset interaction style template is added to the page for the fifth component, and second prompt information is output.

[0146] In another embodiment, the optimization model is trained in the following manner:

[0147] Obtaining page information of a sample page corresponding to the sample design draft and a revision record corresponding to the sample page;

[0148] The optimization model is trained based on the page information and the revision record.

[0149] In another embodiment, the front-end page building device further includes:

[0150] A first response module is configured to extract requirement information for the design draft from the target text in response to receiving an instruction to generate a design draft;

[0151] A generation module, configured to generate candidate design drafts based on the recognition model and the requirement information;

[0152] a second response module, configured to output third prompt information in response to receiving negative feedback information on the candidate design draft, wherein the third prompt information is used to instruct to revise the requirement information;

[0153] The third response module is configured to, in response to receiving the correction information of the requirement information, correct the candidate design draft using the recognition model to obtain the target design draft.

[0154] Obviously, the front-end page building device of the embodiment of this specification can be used as the above Figure 1 The execution body of the front-end page construction method shown in FIG can thus realize the front-end page construction method in Figure 1 Since the principle is the same, the functions realized are not described here.

[0155] Figure 7 This is a schematic diagram of the structure of an electronic device provided by an embodiment of this specification. Figure 7 At the hardware level, the electronic device includes a processor and, optionally, an internal bus, a network interface, and memory. The memory may include internal memory, such as high-speed random-access memory (RAM), or non-volatile memory, such as at least one disk drive. Of course, the electronic device may also include other hardware required for its services.

[0156] The processor, network interface, and memory can be interconnected via an internal bus, which can be an ISA (Industry Standard Architecture) bus, a PCI (Peripheral Component Interconnect) bus, or an EISA (Extended Industry Standard Architecture) bus. The bus can be divided into an address bus, a data bus, a control bus, and the like. For ease of representation, Figure 7 Only one bidirectional arrow is used in the diagram, but this does not mean that there is only one bus or one type of bus.

[0157] The memory is used to store programs. Specifically, the program may include program code, which includes computer operating instructions. The memory may include internal memory and non-volatile memory, and provides instructions and data to the processor.

[0158] The processor reads the corresponding computer program from the non-volatile memory into the memory and then runs it, forming a front-end page building device at the logical level. The processor executes the program stored in the memory and is specifically used to perform the following operations:

[0159] Extracting multimodal features of the target design draft through the recognition model, and identifying component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features;

[0160] Based on the component properties of the components and the hierarchical relationship between the components, converting the target design draft into a first code in a first programming language;

[0161] Based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code of the second programming language, and the second code is used to generate a page corresponding to the target design draft in the low-code platform.

[0162] The above is as in this manual Figure 1 The methods performed by the front-end page building device disclosed in the illustrated embodiments can be applied to or implemented by a processor. The processor may be an integrated circuit chip with signal processing capabilities. During implementation, each step of the above method can be performed by hardware integrated logic circuits within the processor or by software instructions. The above processor can be a general-purpose processor, including a central processing unit (CPU), a network processor (NP), etc.; it can also be a digital signal processor (DSP), an application-specific integrated circuit (ASIC), a field-programmable gate array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The methods, steps, and logic block diagrams disclosed in the embodiments of this specification can be implemented or executed. The general-purpose processor can be a microprocessor or any conventional processor. The steps of the methods disclosed in conjunction with the embodiments of this specification can be directly implemented and executed by a hardware decoding processor, or by a combination of hardware and software modules within the decoding processor. The software module can be located in a storage medium well-known in the art, such as random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, etc. The storage medium is located in the memory, and the processor reads the information in the memory and, in conjunction with its hardware, completes the steps of the above method.

[0163] It should be understood that the electronic device of the embodiment of this specification can realize the front-end page building device in Figure 1 Since the principles are the same, the embodiments of this specification will not be described in detail here.

[0164] Of course, in addition to software implementation, the electronic device in this specification does not exclude other implementation methods, such as logic devices or a combination of software and hardware, etc. That is to say, the execution subject of the following processing flow is not limited to each logic unit, but can also be hardware or logic devices.

[0165] The embodiment of this specification also proposes a computer-readable storage medium, which stores one or more programs, and the one or more programs include instructions. When the instructions are executed by an electronic device including multiple application programs, the electronic device can execute Figure 1 The method of the embodiment shown is specifically used to perform the following operations:

[0166] Extracting multimodal features of the target design draft through the recognition model, and identifying component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features;

[0167] Based on the component properties of the components and the hierarchical relationship between the components, converting the target design draft into a first code in a first programming language;

[0168] Based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code of the second programming language, and the second code is used to generate a page corresponding to the target design draft in the low-code platform.

[0169] An embodiment of this specification also provides a computer program product, which includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to enable a computer to execute some or all of the steps in the front-end page building method provided in the embodiment of this specification.

[0170] The foregoing description of this specification describes specific embodiments. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims can be performed in an order different from that described in the embodiments and still achieve the desired results. Furthermore, the processes depicted in the accompanying drawings do not necessarily require the specific order shown or the sequential order to achieve the desired results. In certain embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0171] In short, the above description is only a preferred embodiment of this specification and is not intended to limit the scope of protection of this specification. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of this specification shall be included in the scope of protection of this specification.

[0172] The systems, devices, modules, or units described in the above embodiments may be implemented by computer chips or entities, or by products having certain functions. A typical implementation device is a computer. Specifically, the computer may be, for example, a personal computer, a laptop computer, a cellular phone, a camera phone, a smartphone, a personal digital assistant, a media player, a navigation device, an email device, a game console, a tablet computer, a wearable device, or a combination of any of these devices.

[0173] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change 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), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0174] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a list of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprising a..." does not preclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0175] The various embodiments in this specification are described in a progressive manner. Similar parts between the various embodiments can be referred to in conjunction with each other. Each embodiment focuses on the differences between the other embodiments. In particular, the system embodiments are generally similar to the method embodiments, so the description is relatively simple. For relevant parts, refer to the description of the method embodiments.< / space> < / container> < / container> < / container>

Claims

1. A front-end page construction method, characterized in that: include: Extracting multimodal features of the target design draft through the recognition model, and identifying component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features; Based on the component properties of the components and the hierarchical relationship between the components, converting the target design draft into a first code in a first programming language; Based on the mapping relationship between the first programming language and the second programming language supported by the low-code platform, the first code is converted into a second code in the second programming language, and the second code is used to generate a page corresponding to the target design draft in the low-code platform; the first code includes a first component code corresponding to the component in the target design draft, and the component attributes of the component include the type of the component; the second code includes a second component code corresponding to the component; if the type of the component is a component type not supported by the low-code platform, the second component code corresponding to the component is obtained by compiling the first component code corresponding to the component through a third component with a code compilation function in the low-code platform; The multimodal features of the target design draft include multimodal features of different regions in the target design draft, and the multimodal features include visual features and structural features; The identifying component attributes of components in the target design draft and the hierarchical relationships between components based on the multimodal features includes: Determine the target design draft as a first-level component; Starting from the first-level components, for each level of components, based on the multimodal features of the region where the components of this level are located, determine the component attributes of the components of this level; If the multimodal features of the region where the component at this level is located include multiple visual features, then the region where the component at this level is located is divided into multiple sub-regions based on the structural features of the region where the component at this level is located; Identify each sub-region as a next-level component; The converting the first code into a second code in the second programming language based on a mapping relationship between the first programming language and a second programming language supported by the low-code platform includes: Parsing the first code to obtain an abstract syntax tree corresponding to the first code; Based on the abstract syntax tree and a mapping relationship between the first programming language and the second programming language, the abstract syntax tree is converted into a second code in the second programming language.

2. The method according to claim 1, characterized in that The converting the target design draft into a first code in a first programming language based on the component attributes of the components and the hierarchical relationship between the components includes: Generating a code template corresponding to the target design draft based on the hierarchical relationship between the components and the grammatical specification of the first programming language; generating a first component code corresponding to the component based on the component attributes of the component and the grammatical specification of the first programming language; Fill the first component code corresponding to the component into the code template to obtain the first code in the first programming language.

3. The method according to claim 1, characterized in that The converting the first code into a second code in the second programming language based on a mapping relationship between the first programming language and a second programming language supported by the low-code platform includes: Based on the types of components in the target design draft and the types of components supported by the low-code platform, determine a first component and a second component in the target design draft, where the first component is a component supported by the low-code platform and the second component is a component not supported by the low-code platform; Based on a mapping relationship between the first programming language and the second programming language, converting a first component code corresponding to the first component to obtain a second component code corresponding to the first component; Creating a third component with a code compilation function in the low-code platform, and compiling the first component code corresponding to the second component through the third component to obtain the second component code corresponding to the second component; Based on the hierarchical relationship between components in the target design draft, the second component code corresponding to the first component and the second component code corresponding to the second component are combined to obtain a second code in the second programming language.

4. The method according to any one of claims 1 to 3, characterized in that After converting the first code into a second code in the second programming language based on a mapping relationship between the first programming language and a second programming language supported by the low-code platform, the method further includes: Based on the second code, displaying a page corresponding to the target design draft in the low-code platform; By optimizing the model, it is detected whether the page meets the preset design specifications, and if the page does not meet the design specifications, the page is corrected.

5. The method according to claim 4, characterized in that The page includes the components in the target design draft; If the page does not comply with the design specification, the page is corrected, including: If the layer spacing of the page is less than or equal to the preset spacing, based on the difference between the layer spacing and the preset spacing, a fourth component is added to the page, and a first prompt message is output, where the fourth component is a component supported by the low-code platform for increasing the layer spacing; and / or, If a fifth component with an undefined interaction state exists in the page, a preset interaction style template is added to the page for the fifth component, and second prompt information is output.

6. The method according to claim 5, characterized in that The optimization model is trained in the following way: Obtaining page information of a sample page corresponding to the sample design draft and a revision record corresponding to the sample page; The optimization model is trained based on the page information and the revision record.

7. The method according to claim 1, characterized in that Before extracting the multimodal features of the target design draft through the recognition model, the method further includes: In response to receiving a target text indicating generation of a design draft, extracting requirement information for the design draft from the target text; Generating candidate design drafts based on the recognition model and the demand information; In response to receiving negative feedback information on the candidate design draft, outputting third prompt information, wherein the third prompt information is used to instruct to revise the requirement information; In response to receiving the correction information of the requirement information, the candidate design draft is corrected by using the recognition model to obtain the target design draft.

8. A front-end page building device, characterized in that: include: An identification module, configured to extract multimodal features of the target design draft through a recognition model, and identify component attributes of components in the target design draft and hierarchical relationships between components based on the multimodal features; A first conversion module, configured to convert the target design draft into a first code in a first programming language based on component properties of the components and a hierarchical relationship between the components; A second conversion module is used to convert the first code into a second code in the second programming language based on a mapping relationship between the first programming language and a second programming language supported by the low-code platform, and the second code is used to generate a page corresponding to the target design draft in the low-code platform; the first code includes a first component code corresponding to the component in the target design draft, and the component attributes of the component include the type of the component; the second code includes a second component code corresponding to the component; if the type of the component is a component type not supported by the low-code platform, the second component code corresponding to the component is obtained by compiling the first component code corresponding to the component through a third component with a code compilation function in the low-code platform; The multimodal features of the target design draft include multimodal features of different regions in the target design draft, and the multimodal features include visual features and structural features; The identification module includes: A first determining submodule, configured to determine the target design draft as a first-level component; A second determining submodule is configured to determine, for each level of components, starting from the first level of components, based on the multimodal features of the region where the components of the current level are located, the component attributes of the current level components; A disassembly submodule is configured to divide the region where the component of the current level is located into multiple sub-regions based on the structural features of the region where the component of the current level is located, if the multimodal features of the region where the component of the current level is located include multiple visual features, and to determine each sub-region as a next-level component; The second conversion module includes: a parsing submodule, configured to parse the first code to obtain an abstract syntax tree corresponding to the first code; The first conversion submodule is configured to convert the abstract syntax tree into a second code in the second programming language based on the abstract syntax tree and a mapping relationship between the first programming language and the second programming language.

9. An electronic device, characterized in that: include: processor; a memory for storing instructions executable by the processor; The processor is configured to execute the instructions to implement the front-end page building method according to any one of claims 1 to 7.

10. A computer-readable storage medium, characterized in that When the instructions in the storage medium are executed by a processor of an electronic device, the electronic device is enabled to execute the front-end page building method as described in any one of claims 1 to 7.

11. A computer program product, characterized in that The computer program product includes a non-transitory computer-readable storage medium storing a computer program, and the computer program is operable to cause a computer to execute some or all of the steps in the front-end page building method according to any one of claims 1 to 7.

Images