Page code generation method and electronic device
By using AI-generated models to select matching components for design elements and referencing predefined component code to generate page framework code, the problem of high development costs for multi-platform pages is solved, achieving efficient and maintainable page code generation.
Patent Information
- Authority / Receiving Office
- WO · WO
- Patent Type
- Applications
- Current Assignee / Owner
- HANGZHOU ALIBABA INT INTERNET IND CO LTD
- Filing Date
- 2025-12-19
- Publication Date
- 2026-07-23
Smart Images
Figure CN2025144138_23072026_PF_FP_ABST
Abstract
Description
Methods and electronic devices for generating page code
[0001] This disclosure claims priority to Chinese Patent Application No. 202510090379.8, filed with the China Patent Office on January 20, 2025, entitled “Method and Electronic Device for Generating Page Code”, the entire contents of which are incorporated herein by reference. Technical Field
[0002] This disclosure relates to the field of page development technology, and more particularly to a method and electronic device for generating page code. Background Technology
[0003] With the development of mobile terminals and related technologies, front-end page development no longer only includes PC (Personal Computer) terminals, but also App (Application) terminals, M (Mobile) sites, and so on.
[0004] PC-based pages are primarily accessed via browsers on devices such as computers. Due to the larger screen size and wider visual range of PCs, there is more room for design, resulting in greater design flexibility. However, the supported operations are relatively limited, including swiping, left-clicking, right-clicking, and double-clicking, leading to fewer interactive effects.
[0005] App-based pages are pages accessed through an app installed on a user's phone or other mobile device. Although mobile devices have small screen sizes, they can support a wider range of operations due to the presence of various sensors. In addition to finger operations such as clicking, swiping, double-tapping, two-finger zooming, two-finger zooming, and five-finger retraction, they can also perform operations such as shaking and gyroscope sensing using sensors. These diverse operations allow for the design of various novel and engaging interactive designs.
[0006] Mobile websites (M-sites) generally refer to web pages on mobile devices such as smartphones. They require opening a browser on the mobile device and entering the URL to access. However, since no installation is needed and access is simply a matter of entering the address, mobile websites are very convenient for marketing and promotional activities, offering advantages such as easy and quick sharing. Furthermore, mobile websites have more promotional channels than mobile apps, making it easier to track user sources and traffic entry points, facilitating future promotional activities and data analysis.
[0007] Because different types of pages have their own unique advantages, front-end page development often involves multi-platform development. For example, for the same event venue in a product information service system (also known as an e-commerce platform), it is usually necessary to develop multiple different types of venue pages, such as PC, App, and mobile website. However, since the technologies used on each platform are not entirely the same during multi-platform development, technical personnel need to write page code for each platform separately, resulting in high development costs and difficulty in achieving scalability. Consequently, multi-platform development for some scenarios has to be abandoned. For example, some product information service systems may hold multiple marketing activities for various holidays, and in cross-border scenarios, there may also be country-specific operations for the same marketing activity, etc. The actual number of events requiring multi-platform development is large, but with the current technology, only some marketing activities can be selected for multi-platform development. Summary of the Invention
[0008] This disclosure provides a method and electronic device for generating page code, which can improve page development efficiency, reduce costs, and ensure the maintainability of page code.
[0009] This disclosure provides the following solutions:
[0010] A method for generating page code, comprising:
[0011] Obtain the design files provided for the target page or a target area within the page;
[0012] Extract visual feature information corresponding to multiple design elements from the design file;
[0013] The visual feature information of the design elements is assembled into a preset prompt information template to generate a first prompt information. The prompt information template also includes an optional component set, the component set includes multiple components, each with corresponding usage method information and page development specification information, and each component is associated with predefined component code.
[0014] The generated first prompt information is used to call the artificial intelligence (AI) generation model, so that the AI generation model selects matching components for the multiple design elements respectively, and generates the description content of the page framework code by referencing the components.
[0015] The visual feature information includes the content, style, and / or location information of the design elements.
[0016] The step of extracting visual feature information corresponding to multiple design elements from the design document includes:
[0017] Using computer vision recognition technology, feature information corresponding to multiple design elements is extracted from the design document.
[0018] Specifically, the AI generation model is used to analyze the feature information of the design elements and the usage methods of the components, select matching components for the multiple design elements respectively, and generate a description of the page framework code by referencing the components according to the page development specification information.
[0019] The AI generation model is also used to generate corresponding components and corresponding component code according to the page development specifications when no suitable component is matched for the design element.
[0020] This also includes:
[0021] Data is generated through simulation, and the description of the page framework code is compiled into runnable code to render the page content.
[0022] Take a screenshot of the rendered page content to obtain an AI-generated page effect image;
[0023] A second prompt message is constructed and input into an AI large-scale parameter model with image processing capabilities, so that the page effect image generated by the AI can be compared with the design file through the AI large-scale parameter model to evaluate the degree of reproduction.
[0024] This also includes:
[0025] If the restoration evaluation result output by the AI large-scale parameter model is that the restoration degree does not meet the preset standard, the AI generation model is called again through the first prompt information in order to perform secondary generation of the page framework code description content.
[0026] When multi-platform generation is required, different prompt message templates are provided for different page types to express the different page development specifications corresponding to different page types.
[0027] A method for generating page code, comprising:
[0028] Obtain design files for target pages or target areas within pages that require multiple types of development;
[0029] Extract visual feature information corresponding to multiple design elements from the design file;
[0030] The feature information of the design elements is assembled into the prompt information templates preset for different page types to generate multiple different first prompt information. The prompt information template also includes a set of components that can be selected in the corresponding page type. The component set includes multiple components, each with its own usage method information and page development specification information. Each of the multiple components is associated with predefined component code.
[0031] Based on the multiple first prompts generated, the AI generation model is invoked to select matching components for the multiple design elements, and descriptions of page framework code corresponding to various page types are generated by referencing the components.
[0032] A computer-readable storage medium having a computer program stored thereon that, when executed by a processor, implements the steps of any of the preceding methods.
[0033] An electronic device, comprising:
[0034] One or more processors; and
[0035] A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of any of the preceding methods.
[0036] A computer program product includes a computer program / computer executable instructions that, when executed by a processor in an electronic device, implement the steps of any of the preceding methods.
[0037] Based on the specific embodiments provided in this disclosure, the following technical effects are disclosed:
[0038] Through the embodiments of this disclosure, visual features of design elements in a design file can be identified and assembled into a prompt information template to generate a first prompt information. This first prompt information may also include predefined component identification information and page development specifications. Thus, after calling the AI interface based on this first prompt information, the AI generation model can select matching components for each of the multiple design elements and generate a description (schema) of the page framework code by referencing these components. This approach improves efficiency and reduces labor costs by leveraging the capabilities of the AI generation model for page code generation. Furthermore, since the AI generation model does not directly generate page code from the design file, but first maps the design elements in the design file to components, and then generates the page schema by referencing specific components in the code, and since the component code can be pre-written and universally applicable across multiple different pages, the AI-generated page code exhibits high maintainability.
[0039] Furthermore, different prompt message templates can be provided for different page types, reflecting the predefined component libraries and page development specifications for each page type. This allows for the automatic generation of page schemas across mobile sites, PC sites, and mobile apps, utilizing the solution provided in this disclosure. Additionally, support is also provided for page-specific elements and EDM (Email Direct Marketing) emails, ensuring efficient conversion from page design to deployment in any scenario.
[0040] Of course, implementing any product of this disclosure does not necessarily require achieving all of the advantages described above at the same time. Attached Figure Description
[0041] To more clearly illustrate the technical solutions in the embodiments of this disclosure or the prior art, the drawings used in the description of the embodiments or the prior art will be briefly introduced below. Obviously, the drawings described below are some embodiments of this disclosure. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.
[0042] Figure 1 is a schematic diagram of the system architecture provided in an embodiment of this disclosure;
[0043] Figure 2 is a flowchart of the first method provided in an embodiment of this disclosure;
[0044] Figure 3 is a schematic diagram of a design provided in an embodiment of this disclosure;
[0045] Figure 4 is a schematic diagram of the feature recognition results of the design drawing provided in an embodiment of this disclosure;
[0046] Figure 5 is a schematic diagram of the dialogue interface for evaluating fidelity using AI, provided in an embodiment of this disclosure.
[0047] Figure 6 is a flowchart of the second method provided in an embodiment of this disclosure;
[0048] Figure 7 is a schematic diagram of an electronic device provided in an embodiment of this disclosure. Detailed Implementation
[0049] Many specific details are set forth in the following description to provide a full understanding of this specification. However, this specification can be implemented in many other ways than those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this specification. Therefore, this specification is not limited to the specific implementations disclosed below.
[0050] The terminology used in one or more embodiments of this specification is for the purpose of describing particular embodiments only and is not intended to be limiting of the one or more embodiments of this specification. The singular forms “a” and “the” as used in one or more embodiments of this specification and the appended claims are also intended to include the plural forms, unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used in one or more embodiments of this specification refers to and includes any or all possible combinations of one or more associated listed items.
[0051] It should be understood that although the terms first, second, etc., may be used to describe various information in one or more embodiments of this specification, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, first may also be referred to as second without departing from the scope of one or more embodiments of this specification, and similarly, second may also be referred to as first. Depending on the context, the word "if" as used herein may be interpreted as "when," "when," or "in response to a determination."
[0052] Furthermore, it should be noted that 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 one or more embodiments of this specification are all information and data authorized by the user or fully authorized by all parties. Moreover, 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.
[0053] In this embodiment, to improve page development efficiency and reduce labor costs, an AI (Artificial Intelligence) generative model can be used to automate page code generation. This AI generative model refers to a deep learning model containing massive amounts of parameters. Due to its large scale, this model can store and process vast amounts of information, achieving higher performance across various tasks; therefore, it is also called a "large model." In this embodiment, the powerful natural language text understanding and logical thinking capabilities of a pre-trained AI generative model can be leveraged to achieve automated page code generation. This ensures high development efficiency and reduces labor costs, even when developing for multiple platforms for the same event venue.
[0054] It's important to note that when using AI-generated models for code generation, one approach is to input prompts into the AI model, expressing specific generation requirements (which can be conveyed through design documents such as design diagrams), page development specifications, etc. The AI model then directly generates the page code based on its understanding of these requirements and specifications. However, the inventors of this disclosure discovered that while this method is more efficient than manually writing code, AI-generated page code suffers from poor maintainability. In other words, AI-written code has poor readability, and if problems arise during runtime, it may be difficult to pinpoint the cause and subsequently fix the issue.
[0055] In view of the above, this embodiment does not directly generate page code from the design file. Instead, it generates components from the design file and then generates page code. The specific components mainly refer to reusable and recurring parts of the page, such as buttons and text boxes. Multiple components can be predefined, and specific component code can be implemented. This predefined component information can be provided as input to the AI generation model. Thus, the AI generation model does not directly convert the design file into page code, but first converts the design file into components (multiple different design elements in the design file can be converted into different components). Then, by referencing component names in the code, it generates the page schema (a page structure described using JSON (JavaScript Object Notation) or similar). Specifically, at runtime, the page schema can be compiled into executable code for rendering the specific page.
[0056] In this way, since the component code is pre-written (e.g., manually), the AI-generated model only needs to map the design elements in the design file to the corresponding components and reference the specific component names in the page schema, without having to write component code using AI. Therefore, the maintainability of the final page code can be improved.
[0057] From a system architecture perspective, referring to Figure 1, this embodiment of the disclosure can provide an AI-generated page code service. After completing the page design, or the design of a certain area on the page (e.g., a "floor" on an event venue page), and generating the design file, the designer can create a page code generation project in this service and upload the specific design file. Then, the main program of the service can use visual recognition and other related technologies to extract visual feature information of multiple specific design elements from the design file. This information can include the content of the design elements (e.g., text content if it involves text, image content if it involves images, etc.), style (e.g., image shape, size, etc.), and / or position information, etc. These feature information can then be assembled into a pre-approved prompt template to generate a specific prompt. The prompt template can also include usage information for multiple predefined components and page development specifications. Thus, by inputting the assembled prompt information into the AI generation model, the AI generation model can analyze the feature information of the design elements and the usage methods of the components to select matching components for each design element. Then, the page schema can be generated by referencing specific component names. In other words, the AI-generated model completes the mapping from design elements to components and generates the page schema, without needing to worry about how the component code for each individual component is written. The component code can be pre-written manually or otherwise and can be reused across different pages, thereby improving both page development efficiency and code maintainability.
[0058] The specific implementation schemes provided by the embodiments of this disclosure will be described in detail below.
[0059] First, this disclosure provides a method for generating page code, as shown in Figure 2. This method may include:
[0060] S201: Obtain the design files provided for the target page or a target area within the page.
[0061] The design files can be provided by the designer and can be contained in design document formats. For simple pages, the design file can be provided for the entire page, while for complex pages, the design file can be provided by area, section, or other specific format. For example, the main venue page of an event in a product information service system is usually quite complex and requires the design of multiple "floors," each with a different design approach. In this case, the design file can also be provided on a per-floor basis.
[0062] For example, the design file for one of the "floors" on a page might look like Figure 3, which includes various design elements such as text, images, and "arrow" style buttons. It should be noted that Figure 3 is only used to illustrate the effect of the design file; the English content included is part of the design file and its meaning is not important.
[0063] It should be noted that design files usually contain static information. Although buttons and other elements may be drawn in them, these buttons are not clickable and cannot be interactive. Only after the specific page code is generated can the buttons and other elements become interactive.
[0064] S202: Extract visual feature information corresponding to multiple design elements from the design file.
[0065] After obtaining the specific design documents, features of the various design elements included can be extracted. These features mainly include visually relevant characteristics such as specific content, style, and / or location information. In other words, during the process of manually writing page code by technicians, the design documents are provided to them. The technicians need to view the design documents, identify which design elements are included, their locations, styles, etc., and then convert them into code. However, in this embodiment, an AI-generated model is used to replace technicians in writing the page code. Therefore, the feature information of the design elements in the design documents can also be extracted to help the AI-generated model complete the process of "viewing" the design documents. For example, the visual features of a design document could be: "There is an icon in the middle left of the image, with an eye pattern inside; next to it is a small box showing a scene of two people talking on stage," and so on. Of course, in practical applications, the extracted feature information can also be expressed in a structured way. For example, for location information, the location coordinates can be expressed more precisely, and so on. For example, regarding the design file shown in Figure 3, after completing this step of feature extraction, it can be expressed as shown in Figure 4, where the added rectangles represent the identified design elements, the numbers represent the dimensions of the design elements, and so on.
[0066] Specifically, there are several ways to extract feature information corresponding to multiple design elements from a design document. For example, in one approach, since design documents are usually generated using relevant design tools, these tools may record relevant information in the document during the generation process. This information includes text information in images, formatting information, image style information (including color, background color, width, height, and spacing with other elements), and text style information (including font, color, line height, etc.). Therefore, feature information about specific design elements can be extracted by parsing the document containing the design document. However, since the information contained in a design document can be extensive and complex, selecting feature information relevant to the embodiments of this disclosure can be time-consuming.
[0067] Therefore, in another implementation, computer vision recognition technology can be used to extract the feature information corresponding to multiple design elements from the design documents. Computer vision recognition technology is a science that studies how to enable machines to "see," or more specifically, it refers to using cameras and computers to replace human eyes for target recognition, tracking, and measurement, in order to perform further image processing. Specific computer vision recognition technologies can be various, including OpenCV.
[0068] S203: Assemble the visual feature information of the design elements into a preset prompt information template to generate the first prompt information. The prompt information template also includes an optional set of components, the usage information of each component in the set, and page development specification information. Each component is associated with predefined component code.
[0069] After extracting the feature information of the design elements, they can be assembled into a pre-defined prompt template to generate specific prompts (referred to as the "first prompt" to distinguish them from subsequent prompts). These prompts, or "Prompts," enhance the model's performance by providing specific instructions or questions without altering the model's structure. Specifically, Prompts provide the starting point for the model to generate responses, helping it understand the user's intent and respond accordingly. Well-designed Prompts can guide the model to generate the user's desired output, improving the quality and relevance of the generated content. Furthermore, constraints can be added to Prompts to influence the style, content, and logic of the generated results, and so on.
[0070] In this embodiment, the AI generation model needs to match corresponding components for specific design elements based on the design file, and then generate the page schema based on the matched components. Therefore, the Prompt can first include the visual recognition results of the design file, and secondly, it can include predefined information on various optional components, including component names and other identifiers, as well as usage methods, so that the AI generation model can determine which specific component is suitable based on the feature information of the design elements. Furthermore, it can also include information related to specific page development specifications to determine the syntax information such as component references, and so on. Among these, the information related to components and page development specifications is consistent across different pages, so it can be written in advance in the Prompt template. Only the part about the feature information of the design elements in the design file can be assembled into the Prompt template based on the recognition results of different design files.
[0071] Of course, in practical implementation, in addition to the design file recognition results, component information, and page development specifications mentioned above, the Prompt also needs to guide and constrain the model output. Therefore, in actual applications, the final prompt information may include: background information, requirements, component usage methods, page development specifications, the desired effect, and the results after visual recognition, etc. The page development specifications can be presented as links, etc. For example, a Prompt example could be:
[0072] "You are a client-side dynamics technology development expert. You can obtain screenshots of reference web pages from users and then use client-side dynamics technology to build single-page applications."
[0073] You may also receive a screenshot of the webpage you have built (the second image) and be asked to update it to make it look more like the reference image (the first image).
[0074] You need to ensure that the generated page is exactly the same as the screenshot;
[0075] Pay close attention to background color, font size, font type, fill, margins, borders, etc. Ensure colors and sizes match perfectly.
[0076] Use the exact text in the screenshot;
[0077] Do not add comments such as '*' or '*' to your code; instead, write complete code.
[0078] Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items, and avoid leaving comments like '*'.
[0079] For images, please use the placeholder image in '****(URL)' and include a detailed description of the image in the text query parameters so that the image can be generated later;
[0080] Only return the complete code.
[0081] This document is about client-side dynamic technology:
[0082] '****(website address)'.
[0083] Furthermore, since different platforms use different technologies during development, different Prompt templates can be provided for each platform, showcasing information about optional components and corresponding page development specifications. When multi-platform development is required, after feature recognition of the design files is completed, the recognition results can be assembled into the corresponding Prompt templates for each platform to generate distinct Prompts.
[0084] S204: Based on the generated prompt information, call the artificial intelligence generation model so that the artificial intelligence generation model selects matching components for multiple design elements and generates description content of page framework code by referencing the components.
[0085] After generating the specific first prompt message, an AI interface can be called to input this prompt message into the AI generation model. The AI generation model can then analyze the feature information of the design elements and the usage methods of the components, select matching components for multiple design elements, and generate the description content (Schema) of the page framework code by referencing components according to the page development specifications. The reason why the Schema is generated by referencing components is that the specific components can be predefined. These components are universal across multiple different pages, and the component code is pre-written. The large model does not need to write component code for specific components; it is only necessary to specify which predefined components to reference in the Schema.
[0086] Specifically, when matching components to design elements, the AI-generated model can determine whether the usage method of a certain component matches the characteristic information of the design element. If so, it can select the matching component for that design element. For example, suppose a design element is a rounded rectangle image with a blue background and text such as "Buy Now". According to the usage method of the component, the design element with the above characteristics can correspond to the "Button" component, and so on.
[0087] Of course, in practical applications, there may be some special design elements that fail to match any component in the component library. For example, a marketing campaign's event page might require a horizontally scrollable image with animations displayed. This requirement might be a one-time need for this specific event, so the component library might not have a predefined component. In this case, the AI-generated model, after analysis, finds that there is no matching component in the library. It can then generate the corresponding component and its code according to the page development specifications provided in the prompt. In other words, when no matching component exists in the library, the AI-generated model can write the component according to the page development specifications. While this AI-generated component code might have poor maintainability, since such special design elements typically only occupy a small portion of the entire page, the actual amount of component code that needs to be written by the AI-generated model will be minimal. Even if problems arise during runtime, troubleshooting will be easier.
[0088] After completing the mapping from design elements to components, the AI-generated model can generate a specific page schema, which is a page description structure. At runtime, it can also be compiled into executable code.
[0089] After obtaining the page schema, since it is generated by an AI model, there may be some misjudgments. Therefore, the quality of the generated page schema can be evaluated. Specifically, this evaluation can be conducted before actual deployment. At this stage, since there is no real data (including the actual product information to be displayed on the page), some data can be mocked, and the page schema can be compiled into runnable code to render the page content. Afterward, screenshots of the rendered page content can be taken to obtain the AI-generated page mockup. After obtaining the AI-generated page mockup, a second prompt message can be constructed based on the mockup and design documents, and input into a large-scale AI parametric model. This large-scale AI parametric model can be a model with image processing capabilities, used to compare the AI-generated page mockup with the design documents to evaluate the fidelity. In specific implementation, if the large-scale AI parameter model has been packaged into a form such as an "intelligent chatbot," as shown in Figure 5, the aforementioned page rendering and the original design file can be entered into a dialog box, along with the following second prompt: "The first one is what I wrote in code, the second is the design file. How do you rate the fidelity? Please return a score, out of 100." Afterwards, the "intelligent chatbot" can compare the two images and return a corresponding evaluation score, such as "75" as shown in Figure 5. If the fidelity evaluation passes, meaning it meets the preset standard, the AI-generated page rendering can be saved to the server for manual review. Otherwise, the AI-generated model can be called again using the first prompt to regenerate the page schema.
[0090] Through the embodiments of this disclosure, design elements in a design file can be feature-identified and assembled into a prompt information template to generate a first prompt information. This first prompt information may also include predefined component identification information and page development specifications. Thus, after calling the AI interface based on this first prompt information, the AI generation model can select matching components for multiple design elements and generate a description (schema) of the page framework code by referencing these components. This approach improves efficiency and reduces labor costs by leveraging the capabilities of the AI generation model for page code generation. Furthermore, since the AI generation model does not directly generate page code from the design file, but first maps the design elements in the design file to components, and then generates the page schema by referencing specific components in the code, and since the component code can be pre-written and universally applicable across multiple different pages, the AI-generated page code exhibits high maintainability.
[0091] Furthermore, different prompt message templates can be provided for different page types, reflecting the predefined component libraries and page development specifications for each page type. This allows for the automatic generation of page schemas across mobile sites, PC sites, and mobile apps, utilizing the solution provided in this disclosure. Additionally, support is also provided for page-specific elements and EDM (Email Direct Marketing) emails, ensuring efficient conversion from page design to deployment in any scenario.
[0092] Example 2
[0093] In the aforementioned Embodiment 1, the general page code generation scheme provided by this disclosure was mainly introduced. "General" means that regardless of the specific scenario in which page development is performed, the scheme provided in Embodiment 1 can be used to automatically generate page code through an AI generation model, while also ensuring high maintainability of the code. In this Embodiment 2, for the application of the above scheme in multi-platform development scenarios (i.e., developing multiple different types of pages for the same design file to adapt for display on different platforms such as PC, App, and mobile website), a method for generating page code is provided, as shown in Figure 6. This method may include:
[0094] S601: Obtain the design files provided for the target page or target area within the page that requires multiple types of development;
[0095] S602: Extract visual feature information corresponding to multiple design elements from the design file;
[0096] S603: Assemble the feature information of design elements into the prompt information templates that are pre-set for different page types to generate multiple different first prompt information. The prompt information template also includes a set of optional components in the corresponding page type. The component set includes usage information for each of the multiple components, as well as page development specification information. Each of the multiple components is associated with predefined component code.
[0097] S604: Based on the multiple generated prompts, the AI generation model is invoked respectively, so that the AI generation model selects matching components for multiple design elements, and generates descriptions of page framework code corresponding to various page types by referencing the components.
[0098] This solution provides different prompt templates for different page types, showcasing predefined component libraries and page development specifications for each type. In multi-platform development scenarios, the visual recognition results of the design files can be assembled into multiple different Prompt templates, resulting in multiple distinct Prompts. Then, based on these different Prompts, AI-generated models can be invoked to generate page schemas for various page types, suitable for different platforms. This approach improves development efficiency and reduces labor costs by eliminating the need for manual writing of page code for each platform. Furthermore, converting the design files into components before converting them into page schemas reduces the amount of AI-generated code, ensuring code maintainability.
[0099] It should be noted that the embodiments disclosed herein may involve the use of user data. In practical applications, user-specific personal data may be used in the scheme described herein within the scope permitted by applicable laws and regulations, provided that it complies with the applicable laws and regulations of the country in which it is located (e.g., with the user's explicit consent, with the user being properly notified, etc.).
[0100] Corresponding to Embodiment 1, this disclosure also provides an apparatus for generating page code, which may include:
[0101] The design file acquisition unit is used to acquire design files for the target page or a target area within the page.
[0102] The visual feature extraction unit is used to extract visual feature information corresponding to multiple design elements from the design file.
[0103] The first prompt information generation unit is used to assemble the visual feature information of the design elements into a preset prompt information template to generate the first prompt information. The prompt information template also includes an optional component set, which includes usage information for each of the multiple components, as well as page development specification information. Each component is associated with predefined component code.
[0104] The page code generation unit is used to call the artificial intelligence (AI) generation model based on the generated first prompt information, so that the AI generation model selects matching components for multiple design elements and generates the description content of the page framework code by referencing the components.
[0105] Visual feature information includes the content, style, and / or location information of design elements.
[0106] The visual feature extraction unit can be used to extract feature information corresponding to multiple design elements from design documents using computer vision recognition technology.
[0107] Specifically, the AI-generated model is used to analyze the feature information of design elements and the usage methods of components, select matching components for multiple design elements, and generate descriptions of page framework code by referencing components according to page development specifications.
[0108] In addition, the AI-generated model is also used to generate the corresponding component and its code according to the page development specifications when a suitable component is not matched for a design element.
[0109] Furthermore, the device may also include:
[0110] The simulation rendering unit is used to generate data in a simulated way and compile the description of the page framework code into runnable code to render the page content;
[0111] The screenshot unit is used to take a screenshot of the rendered page content to obtain an AI-generated page effect image;
[0112] The fidelity evaluation unit is used to construct a second prompt message and input it into an AI large-scale parameter model with image processing capabilities, so that the AI-generated page rendering can be compared with the design file through the AI large-scale parameter model to evaluate the fidelity.
[0113] The secondary generation unit is used to re-invoke the AI generation model through the first prompt message if the restoration evaluation result output by the AI large-scale parameter model is that the restoration degree does not meet the preset standard, so as to perform secondary generation of the page framework code description content.
[0114] When multi-platform generation is required, different prompt message templates are provided for different page types to express the different page development specifications corresponding to different page types.
[0115] Corresponding to Embodiment 2, this disclosure also provides an apparatus for generating page code, which may include:
[0116] The design file acquisition unit is used to acquire design files for target pages or target areas within pages that require multiple types of development.
[0117] The visual feature information extraction unit is used to extract the visual feature information corresponding to multiple design elements from the design file.
[0118] The prompt information generation unit is used to assemble the feature information of design elements into prompt information templates that are preset for different page types, so as to generate multiple different first prompt information. The prompt information template also includes a set of optional components in the corresponding page type. The component set includes multiple components, each with its own usage method information and page development specification information. Each component is associated with predefined component code.
[0119] The calling unit is used to call the AI generation model according to the multiple first prompts generated, so that the AI generation model selects the matching components for multiple design elements and generates descriptions of page framework code corresponding to various page types by referencing the components.
[0120] In addition, embodiments of this disclosure also provide a computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the methods in the foregoing method embodiments.
[0121] And an electronic device, comprising:
[0122] One or more processors; and
[0123] A memory associated with one or more processors, the memory being used to store program instructions that, when read and executed by one or more processors, perform the steps of any of the methods in the foregoing method embodiments.
[0124] A computer program product includes a computer program / computer executable instructions, which, when executed by a processor in an electronic device, implement the steps of the method described in the foregoing method embodiments.
[0125] Figure 7 illustrates the architecture of an electronic device, which may include a processor 710, a video display adapter 711, a disk drive 712, an input / output interface 713, a network interface 714, and a memory 720. The processor 710, video display adapter 711, disk drive 712, input / output interface 713, network interface 714, and memory 720 can communicate with each other via a communication bus 730.
[0126] The processor 710 can be implemented using a general-purpose CPU (Central Processing Unit), microprocessor, application-specific integrated circuit (ASIC), or one or more integrated circuits, and is used to execute relevant programs to implement the technical solutions provided in this disclosure.
[0127] The memory 720 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage device, dynamic storage device, etc. The memory 720 can store the operating system 721 for controlling the operation of the electronic device 700, and the basic input / output system (BIOS) for controlling the low-level operations of the electronic device 700. Additionally, it can store a web browser 723, a data storage management system 724, and a page code generation processing system 725, etc. The aforementioned page code generation processing system 725 can be the application program that specifically implements the aforementioned steps in this embodiment. In summary, when the technical solution provided by this disclosure is implemented through software or firmware, the relevant program code is stored in the memory 720 and is called and executed by the processor 710.
[0128] Input / output interface 713 is used to connect input / output modules to realize information input and output. Input / output modules can be configured as components in the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Input devices may include keyboards, mice, touch screens, microphones, various sensors, etc., and output devices may include displays, speakers, vibrators, indicator lights, etc.
[0129] Network interface 714 is used to connect a communication module (not shown in the figure) to enable communication between this device and other devices. The communication module can communicate via wired means (such as USB, Ethernet cable, etc.) or wireless means (such as mobile network, WIFI, Bluetooth, etc.).
[0130] Bus 730 includes a pathway for transmitting information between various components of the device, such as processor 710, video display adapter 711, disk drive 712, input / output interface 713, network interface 714, and memory 720.
[0131] It should be noted that although the above-described device only shows the processor 710, video display adapter 711, disk drive 712, input / output interface 713, network interface 714, memory 720, bus 730, etc., in specific implementations, the device may also include other components necessary for normal operation. Furthermore, those skilled in the art will understand that the above-described device may only include the components necessary for implementing the present disclosure, and not necessarily all the components shown in the figures.
[0132] As can be seen from the above description of the embodiments, those skilled in the art can clearly understand that this disclosure can be implemented by means of software plus necessary general-purpose hardware platforms. Based on this understanding, the technical solution of this disclosure, in essence or the part that contributes to the prior art, can be embodied in the form of a software product. This computer software product can be stored in a storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods of various embodiments or some parts of the embodiments of this disclosure.
[0133] The various embodiments in this specification are described in a progressive manner. Similar or identical parts between embodiments can be referred to mutually. Each embodiment focuses on describing the differences from other embodiments. In particular, for system or system embodiments, since they are basically similar to method embodiments, the description is relatively simple, and relevant parts can be referred to the descriptions in the method embodiments. The systems and system embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without creative effort.
[0134] The foregoing has provided a detailed description of the method and electronic device for generating page code provided in this disclosure. Specific examples have been used to illustrate the principles and implementation methods of this disclosure. The descriptions of the above embodiments are merely for the purpose of helping to understand the method and its core ideas. Furthermore, those skilled in the art will recognize that, based on the ideas of this disclosure, there will be changes in the specific implementation methods and application scope. Therefore, the content of this specification should not be construed as a limitation of this disclosure.
Claims
1. A method for generating page code, wherein, include: Obtain the design files provided for the target page or a target area within the page; Extract visual feature information corresponding to multiple design elements from the design file; The visual feature information of the design elements is assembled into a preset prompt information template to generate a first prompt information. The prompt information template also includes an optional component set, the component set includes multiple components, each with corresponding usage method information and page development specification information, and each component is associated with predefined component code. The generated first prompt information is used to call the artificial intelligence (AI) generation model, so that the AI generation model selects matching components for the multiple design elements respectively, and generates the description content of the page framework code by referencing the components.
2. The method according to claim 1, wherein, The visual feature information includes the content, style, and / or location information of the design elements.
3. The method according to claim 1, wherein, The step of extracting visual feature information corresponding to multiple design elements from the design file includes: Using computer vision recognition technology, feature information corresponding to multiple design elements is extracted from the design document.
4. The method according to claim 1, wherein, The AI generation model is specifically used to analyze the feature information of the design elements and the usage methods of the components, select matching components for the multiple design elements respectively, and generate description content of the page framework code by referencing the components according to the page development specification information.
5. The method according to claim 1, wherein, The AI generation model is also used to generate the corresponding component and the corresponding component code according to the page development specifications when the design element does not match a suitable component.
6. The method according to claim 1, wherein, Also includes: Data is generated through simulation, and the description of the page framework code is compiled into runnable code to render the page content. Take a screenshot of the rendered page content to obtain an AI-generated page effect image; A second prompt message is constructed and input into an AI large-scale parameter model with image processing capabilities, so that the page effect diagram generated by the AI can be compared with the design file through the AI large-scale parameter model to evaluate the degree of reproduction.
7. The method according to claim 6, wherein, Also includes: If the restoration evaluation result output by the AI large-scale parameter model is that the restoration degree does not meet the preset standard, the AI generation model is called again through the first prompt information in order to perform secondary generation of the page framework code description content.
8. The method according to claim 1, wherein, When multi-platform generation is required, different prompt message templates are provided for different page types to express the different page development specifications corresponding to different page types.
9. A method for generating page code, wherein, include: Obtain design files for target pages or target areas within pages that require multiple types of development; Extract visual feature information corresponding to multiple design elements from the design file; The feature information of the design elements is assembled into the prompt information templates preset for different page types to generate multiple different first prompt information. The prompt information template also includes a set of components that can be selected in the corresponding page type. The component set includes multiple components, each with its own usage method information and page development specification information. Each of the multiple components is associated with predefined component code. Based on the multiple first prompts generated, the AI generation model is invoked to select matching components for the multiple design elements, and descriptions of page framework code corresponding to various page types are generated by referencing the components.
10. An apparatus for generating page code, wherein, The device includes: The design file acquisition unit is used to acquire design files for the target page or a target area within the page. A visual feature extraction unit is used to extract visual feature information corresponding to multiple design elements from the design file. The first prompt information generation unit is used to assemble the visual feature information of the design element into a preset prompt information template to generate the first prompt information. The prompt information template also includes an optional component set, the component set includes multiple components corresponding to usage method information and page development specification information, and the multiple components are associated with predefined component code. The page code generation unit is used to call the artificial intelligence (AI) generation model based on the generated first prompt information, so that the AI generation model selects matching components for the multiple design elements respectively, and generates the description content of the page framework code by referencing the components.
11. The apparatus according to claim 10, wherein, The visual feature information includes the content, style, and / or location information of the design elements.
12. The apparatus according to claim 10, wherein, The step of extracting visual feature information corresponding to multiple design elements from the design file includes: Using computer vision recognition technology, feature information corresponding to multiple design elements is extracted from the design document.
13. The apparatus according to claim 10, wherein, The AI generation model is specifically used to analyze the feature information of the design elements and the usage methods of the components, select matching components for the multiple design elements respectively, and generate description content of the page framework code by referencing the components according to the page development specification information.
14. The apparatus according to claim 10, wherein, The AI generation model is also used to generate the corresponding component and the corresponding component code according to the page development specifications when the design element does not match a suitable component.
15. The apparatus according to claim 10, wherein, Data is generated through simulation, and the description of the page framework code is compiled into runnable code to render the page content. Take a screenshot of the rendered page content to obtain an AI-generated page effect image; A second prompt message is constructed and input into an AI large-scale parameter model with image processing capabilities, so that the page effect diagram generated by the AI can be compared with the design file through the AI large-scale parameter model to evaluate the degree of reproduction.
16. The apparatus according to claim 15, wherein, If the restoration evaluation result output by the AI large-scale parameter model is that the restoration degree does not meet the preset standard, the AI generation model is called again through the first prompt information in order to perform secondary generation of the page framework code description content.
17. The apparatus according to claim 10, wherein, When multi-platform generation is required, different prompt message templates are provided for different page types to express the different page development specifications corresponding to different page types.
18. A computer-readable storage medium having a computer program stored thereon, wherein, When executed by a processor, the program implements the steps of the method described in any one of claims 1 to 9.
19. An electronic device, wherein, include: One or more processors; as well as A memory associated with the one or more processors, the memory being used to store program instructions that, when read and executed by the one or more processors, perform the steps of the method according to any one of claims 1 to 9.
20. A computer program product comprising a computer program / computer-executable instructions, wherein, When the computer program / computer executable instructions are executed by a processor in an electronic device, they implement the steps of the method according to any one of claims 1 to 9.