Method for generating page code and electronic equipment

Abstract

The embodiment of the invention discloses a method for generating page codes and electronic equipment. The method comprises the steps that a design file provided for a target page or a target area in the page is acquired; extracting visual feature information respectively corresponding to a plurality of design elements from the design file; the visual feature information of the design elements is assembled to a preset prompt information template to generate prompt information, and the prompt information template further comprises an optional component set which comprises use method information corresponding to multiple components and page development specification information; the plurality of components are respectively associated with predefined component codes; and calling an artificial intelligence (AI) generation model according to the generated prompt information, so that the AI generation model selects matched components for the plurality of design elements respectively, and generating description contents of page frame codes in a mode of quoting the components. Through the embodiment of the invention, the page development efficiency can be improved, the cost can be reduced, and the maintainability of page codes is considered.

Description

Technical Field

[0001] This application relates to the technical field of page development, and particularly to a method for generating page code and an electronic device. Background Art

[0002] With the development of mobile terminals and related technologies, front-end page development no longer only includes the PC (Personal Computer) side, but also includes the App (Application) side, the M (abbreviation of Mobile) station, and so on.

[0003] Among them, the PC-side page is mainly a page accessed through a browser on devices such as computers. Since the screen of the PC device is large, the visual range is wider, and there are more places to design, so the page designability is stronger; however, the supported operations are relatively limited, including operations such as sliding, left-clicking, right-clicking, double-clicking, etc., and the interaction effects are relatively few.

[0004] The App-side page is a page that needs to be accessed through an App installed on a user's mobile terminal device such as a mobile phone. Although the screen size of the mobile terminal is small, since the mobile terminal can be equipped with a variety of sensors, the supported operations can be more abundant. In addition to finger operations such as clicking, sliding, double-clicking, pinching in, pinching out, and five-finger contracting, it can also cooperate with sensors to complete operation methods such as shaking and gyroscope sensing. Through these rich operations, different novel and attractive interactive designs can be designed.

[0005] The M-station page generally refers to the web page side of mobile terminals such as mobile phones, which needs to open the mobile browser and enter the address to access. However, since it does not need to be installed and can be accessed by entering the address, the M-station page is very convenient for marketing and promotion activities, and has advantages such as convenient and fast forwarding and sharing. In addition, the promotion channels of the M-station page are more than those of mobile APPs, which is convenient for tracking user sources, traffic entrances, etc., and is convenient for future activity promotion and data analysis.

[0006] Since each type of page has its own different advantages, front-end page development usually involves multi-terminal 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 various types of venue pages such as the PC terminal, the App terminal, and the M station. However, since the technologies used by each terminal are different during the process of multi-terminal development, technical personnel need to write page codes for each terminal separately, resulting in high development costs and difficulty in achieving scale, so that multi-terminal development for some scenarios can only be abandoned. For example, in some product information service systems, various marketing activities may be held during various holidays, etc. In the cross-border scenario, there may also be country-specific operations for the same marketing activity, etc. The actual number of events that require multi-terminal development is numerous. However, in the case of existing technologies, only some of the marketing activities can be selected for multi-terminal development. Summary of the Invention

[0007] The present application provides a method for generating page code and an electronic device, which can improve page development efficiency, reduce costs, and take into account the maintainability of page code.

[0008] The present application provides the following solutions:

[0009] A method for generating page code, including:

[0010] Obtain a design file provided for a target page or a target area in a page;

[0011] Extract visual feature information corresponding to multiple design elements from the design file;

[0012] Assemble the visual feature information of the design elements into a preset prompt information template to generate first prompt information. The prompt information template further includes an optional component set, usage method information corresponding to multiple components included in the component set, and page development specification information. Multiple components included in the component set are respectively associated with predefined component codes;

[0013] Call an artificial intelligence (AI) generation model according to the generated first prompt information, so that the AI generation model selects matching components for the multiple design elements respectively, and generates a description content of page framework code by referring to the components.

[0014] Wherein, the visual feature information includes content, style, and / or position information of the design elements.

[0015] Wherein, the extracting visual feature information corresponding to multiple design elements from the design file includes:

[0016] Using computer vision recognition technology, extract the feature information corresponding to multiple design elements from the design file.

[0017] Among them, the AI generation model is specifically used to analyze the feature information of the design elements and the usage method of the components, select matching components for the multiple design elements respectively, and generate the description content of the page framework code by referring to the components according to the page development specification information.

[0018] Among them, the AI generation model is also used to generate corresponding components and corresponding component codes according to the page development specification when no suitable component is matched for the design element.

[0019] Among them, it also includes:

[0020] Generate data by simulation, and compile the description content of the page framework code into runnable code to render the page content;

[0021] Take a screenshot of the rendered page content to obtain the page effect diagram generated by AI;

[0022] Construct a second prompt message and input it into an AI large-scale parameter model with image processing capabilities, so as to compare the page effect diagram generated by AI with the design file through the AI large-scale parameter model to evaluate the restoration degree.

[0023] Among them, it also includes:

[0024] If the restoration degree evaluation result output by the AI large-scale parameter model does not reach the preset standard, the AI generation model is called again through the first prompt message to perform secondary generation of the description content of the page framework code.

[0025] Among them, when multi-terminal generation is required, different prompt message templates are provided for different page types to express different page development specifications corresponding to different page types.

[0026] A method for generating page code, including:

[0027] Obtain a design file provided for a target page or a target area in the page that needs to be developed in multiple types;

[0028] Extract the visual feature information corresponding to multiple design elements from the design file;

[0029] Assemble the feature information of the design elements into hint information templates preset for different page types respectively to generate multiple different first hint information. The hint information templates also include a set of optional components in the corresponding page types, usage method information respectively corresponding to multiple components included in the set of components, and page development specification information. The multiple components are respectively associated with predefined component codes;

[0030] Call the artificial intelligence AI generation model respectively according to the multiple generated first hint information, so that the AI generation model selects matching components for the multiple design elements respectively, and generates description content of page frame codes respectively corresponding to multiple page types by way of referencing components.

[0031] A computer-readable storage medium, on which a computer program is stored, and when the program is executed by a processor, the steps of the method described in any one of the foregoing are implemented.

[0032] An electronic device, comprising:

[0033] One or more processors; and

[0034] A memory associated with the one or more processors, the memory is used to store program instructions, and when the program instructions are read and executed by the one or more processors, the steps of the method described in any one of the foregoing are executed.

[0035] A computer program product, comprising computer programs / computer-executable instructions, and when the computer programs / computer-executable instructions are executed by a processor in an electronic device, the steps of the method described in any one of the foregoing are implemented.

[0036] According to the specific embodiments provided by the present application, the present application discloses the following technical effects:

[0037] Through the embodiments of the present application, visual features of design elements in a design file can be recognized and assembled into a prompt information template to generate a first prompt information. Such first prompt information may also include predefined component identification information, as well as information such as page development specifications. In this way, after invoking the AI interface based on the first prompt information, the AI generation model can select matching components for the multiple design elements respectively, and generate a description content (Schema) of the page framework code by referring to the components. By this means, since the ability of the AI generation model can be utilized for page code generation, the efficiency can be improved and the labor cost can be reduced. In addition, since the AI generation model does not directly generate page code based on the design file, but first maps the design elements in the design file to components, and then generates the page Schema by referring to specific components in the code, and the component code can be pre-written and can be common among multiple different pages, therefore, based on the AI generation of page code, the code can have high maintainability.

[0038] In addition, different prompt information templates can be provided for different page types, which reflect the predefined component libraries and page development specifications for different page types respectively. In this way, whether it is a mobile site (M-site), a PC site, or a page in a mobile App, the solution provided by the embodiments of the present application can be used to automatically generate the page Schema. In addition, for the "floors" within a page, EDM (Email Direct Marketing, which is a network marketing method that delivers value information to target users via email on the premise of prior user permission), etc., support can also be provided to ensure efficient conversion from page design to deployment in any scenario.

[0039] Of course, implementing any product of the present application does not necessarily need to achieve all the above-mentioned advantages simultaneously. BRIEF DESCRIPTION OF THE DRAWINGS

[0040] In order to more clearly illustrate the technical solutions in the embodiments of the present application or the prior art, the following will briefly introduce the drawings required to be used in the embodiments. Obviously, the drawings in the following description are only some embodiments of the present application. For those of ordinary skill in the art, other drawings can be obtained based on these drawings without creative efforts.

[0041] Figure 1 is a schematic diagram of the system architecture provided by the embodiments of the present application;

[0042] Figure 2 is a flowchart of the first method provided by the embodiments of the present application;

[0043] Figure 3 It is a schematic diagram of the design drawing provided by the embodiment of the present application;

[0044] Figure 4 It is a schematic diagram of the feature recognition result of the design drawing provided by the embodiment of the present application;

[0045] Figure 5 It is a schematic diagram of the dialogue interface when the reduction degree is evaluated by AI provided by the embodiment of the present application;

[0046] Figure 6 It is a flowchart of the second method provided by the embodiment of the present application;

[0047] Figure 7 It is a schematic diagram of the electronic device provided by the embodiment of the present application. Specific embodiments

[0048] Next, the technical solutions in the embodiments of the present application will be clearly and completely described in conjunction with the accompanying drawings in the embodiments of the present application. Obviously, the described embodiments are only a part of the embodiments of the present application, rather than all the embodiments. Based on the embodiments in the present application, all other embodiments obtained by those of ordinary skill in the art shall fall within the protection scope of the present application.

[0049] In the embodiment of the present application, in order to improve the efficiency of page development and reduce labor costs, an AI (Artificial Intelligence) generation model can be used to realize automatic page code generation. Among them, the so-called AI generation model refers to a deep learning model containing a large number of parameters. Because of its large scale, this AI generation model can store and process a large amount of information and achieve higher performance in various tasks, so it is also called a "large model". In the embodiment of the present application, the powerful natural language text understanding and logical thinking ability of the pre-trained AI generation model can be relied on to realize automatic page code generation. In this way, even when multi-terminal development needs to be carried out for the same event venue, etc., it is possible to have a high development efficiency and reduce labor costs.

[0050] It should be noted here that when specifically using an AI generation model for code generation, one way can be to input prompt information into the AI generation model, express specific generation requirements in the prompt information (which can be expressed through design files such as design drawings), page development specifications, etc., and then the AI generation model directly generates page code based on understanding these specific requirements and specification information. However, the inventors of this application found during the implementation of this application that although this method has the advantage of being more efficient compared to writing code manually, the page code directly generated by the AI has the disadvantage of poor maintainability. That is to say, the code written by the AI has relatively poor readability. If problems occur during subsequent operation and it is necessary to find the reasons from the code, it may be very difficult to locate the specific reasons, and thus it is also difficult to repair the problems therein.

[0051] In view of the above situation, the embodiments of this application do not adopt the method of directly generating page code from design files, but instead adopt the method of generating components from design files and then generating page code. Among them, the specific components mainly refer to the reusable and recurring parts in the page, such as buttons, text boxes, etc. Multiple components can be predefined and the specific component code can be implemented. This predefined component information can be provided to the AI generation model as an input information. In this way, 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), and then generates a page schema (page structure described in JSON (JavaScript Object Notation)) by referring to the component names in the code. Specifically, during operation, the page schema can be compiled into executable code for rendering a specific page.

[0052] In this way, since the component code is written in advance, for example, it can be completed manually, etc., the AI generation model only needs to map the design elements in the design file to the corresponding components and refer to the specific component names in the page schema, without writing component code through the AI method. Therefore, the maintainability of the final page code can be improved.

[0053] From the perspective of the system architecture, see Figure 1, embodiments of the present application can provide a service for AI to generate page code. After a designer completes the page design, or completes the design of a certain area in the page (for example, a certain "floor" in a certain event venue page, etc.) and generates a design file, a project for generating page code can be created in this service, and the specific design file can be uploaded. Subsequently, the main program of this service can use related technologies such as visual recognition to extract the visual feature information of multiple specific design elements from this design file. For example, it can specifically include the content of the design element (for example, if it involves text, it can be the specific text content, if it involves a picture, it can be the picture content, etc.), style (for example, the shape, size, etc. of the picture), and / or position information, etc. Then, these feature information can be assembled into a pre-approved Prompt template to generate a specific Prompt. The Prompt template can also include the usage method information corresponding to multiple predefined components respectively, as well as page development specification information. In this way, 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, so as to select matching components for multiple design elements respectively. Then, the generation of the page Schema can be completed by referring to the specific component names. That is to say, the AI generation model only needs to complete the mapping from the design elements to the components and generate the page Schema, without having to worry about how to write the component code for each specific component. The component code part can be completed in advance manually and can be reused between different pages, thereby improving the page development efficiency and the maintainability of the code at the same time.

[0054] The following will introduce the specific implementation solutions provided by the embodiments of the present application in detail.

[0055] First, embodiments of the present application provide a method for generating page code. Refer to Figure 2 , this method may include:

[0056] S201: Obtain a design file provided for a target page or a target area in the page.

[0057] Among them, the design file can be provided by a designer and can be carried specifically through a design file document, etc. Among them, for some simple pages, a design file can be directly provided for the entire page, while for complex pages, the design file can be provided in a way of dividing regions, sections, etc. For example, for the main venue page of a certain event in a commodity information service system, such a page is usually relatively complex and requires the design of multiple "floors", and each "floor" has a different design method, etc. At this time, the design file can also be provided in units of "floors", etc.

[0058] For example, the design file of one of the "floors" on a certain page can be as follows Figure 3 shown, which includes various different design elements such as some text, pictures, buttons in the "arrow" style, etc. It should be noted that this Figure 3 is only used to illustrate the effect of the design file, and the English content included therein is part of the design file, and its meaning does not need to be concerned about.

[0059] It should be noted that design files are usually some static information. Although buttons and the like may be drawn therein, the buttons are not clickable and cannot achieve interaction. Only after generating the specific page code subsequently can the specific buttons and the like achieve the interaction function.

[0060] S202: Extract the visual feature information corresponding to multiple design elements from the design file.

[0061] After obtaining the specific design file, the features of the multiple design elements included therein can be extracted. Such features mainly can include visual-related features such as specific content, style, and / or position information, etc. That is to say, in the process of manually writing page code by technicians, the design file is provided to the technicians, and the technicians need to view the design file, identify which design elements are included, where they are located respectively, what styles they have, and so on, and then express them in the form of code. In the embodiments of the present application, however, it is necessary to use an AI generation model to replace the technicians to complete the writing of the page code. Therefore, the feature information of the design elements in this design file can also be extracted to help the AI generation model complete the process of "viewing" the design file. For example, regarding a certain design file, its visual features can be: "There is an icon in the middle and slightly to the left of the picture, and there is a pattern of an eye in the icon; there is a small box beside it, and a scene of two people talking on the stage is shown inside", and so on. Of course, in practical applications, the specifically extracted feature information can also be expressed in a structured manner. For example, for the position information, the position coordinates can be expressed more precisely, and so on. For example, regarding Figure 3 the shown design file, after completing the feature extraction of this step, it can be expressed as Figure 4 shown, where the added rectangular frames represent the identified design elements respectively, and the numbers represent the sizes of the design elements, and so on.

[0062] Among them, when specifically extracting the feature information corresponding to multiple design elements from the design document, there can be multiple methods. For example, in one method, since the design document is usually generated using relevant design tools, during the process of generating the design document, the design tools may record some relevant information in the design document, such as the text information in the picture, as well as some format information and picture style information (including color, background color, width and height, spacing from other elements, etc.), and the style information of the text (including font, color, line height, etc.). Therefore, the feature information about specific design elements can be extracted by parsing the document where the design document is located. However, since the information contained in the design document may be very numerous and complex, the process of selecting the feature information related to the embodiments of this application from it may take a relatively long time.

[0063] Therefore, in another implementation method, computer vision recognition technology can be used to complete the process of specifically extracting the feature information corresponding to multiple design elements from the design document. Among them, computer vision recognition technology is a science that studies how to enable machines to "see". Further speaking, it refers to using cameras and computers to replace human eyes to identify, track, and measure targets, etc., for machine vision, so as to further perform graphic processing. There can be various specific computer vision recognition technologies, for example, including OpenCV, etc.

[0064] S203: Assemble the visual feature information of the design element into a preset prompt information template to generate a first prompt information. The prompt information template also includes an optional component set, the usage method information corresponding to multiple components included in the component set, and page development specification information. The multiple components are respectively associated with predefined component codes.

[0065] After extracting the feature information of the design element, it can be assembled into a preset prompt information template to generate specific prompt information (referred to as "first prompt information" here to distinguish it from other subsequent prompt information). Among them, the so-called prompt information is also known as Prompt. The role of Prompt in the large model is to enhance the performance of the model by inputting specific instructions or questions without adjusting the model structure itself. Specifically, Prompt provides the starting point for the model to start generating responses, helps the model understand the user's intention and make corresponding responses; a reasonably designed Prompt can guide the model to generate the output expected by the user, improve the quality and relevance of the generated content. In addition, the style, content, and logic of the model generation result can also be affected by adding constraint conditions in Prompt, and so on.

[0066] In the embodiments of the present application, the AI generation model needs to match corresponding components for specific design elements according to the design document, and then generate the Schema of the page based on the matched components. Therefore, the Prompt can first include the visual recognition results of the design document. In addition, it can also include various pre-defined optional component information, including identifiers such as component names, and the usage methods of the components, etc., so that the AI generation model can determine which specific component is suitable for use according to the feature information of the design elements. Furthermore, it can also include information related to specific page development specifications, etc., to complete the determination of syntax information such as component references, and so on. Among them, the information related to components and the information related to page development specifications are unified for different pages. Therefore, they can be written in the Prompt template in advance. Only the part of the feature information of the design elements in the design document can be assembled into the Prompt template according to the recognition results of different design documents.

[0067] Of course, in the specific implementation, in addition to the above design document recognition results, component information, page development specifications, etc., since the Prompt also needs to play roles such as guiding and constraining the model output, in actual applications, the final prompt information can include: requirement background, requirements, component usage methods, page development specifications, effects to be achieved, results after visual recognition, and so on. Among them, the page development specifications, etc. can exist in the form of links. For example, an example of a Prompt can be:

[0068] "You are an expert in client-side dynamic technology development. You can obtain screenshots of the reference web page from the user, and then use client-side dynamic technology to build a single-page application.

[0069] You may also get screenshots of the web pages you have built (the second picture) and be required to update it to make it look more like the reference image (the first picture).

[0070] It is necessary to ensure that the generated page is exactly the same as the screenshot;

[0071] Pay close attention to the background color, font size, font type, padding, margin, border, etc. The colors and sizes match exactly;

[0072] Use the exact text in the screenshot;

[0073] Do not add comments such as '*', '*' in the code instead of writing complete code;

[0074] Repeat elements as needed to match the screenshot. For example, if there are 15 items, the code should have 15 items and do not leave comments like '*';

[0075] For images, use the placeholder images in '****(URL)' and include a detailed description of the image in the text query parameter so that the image can be generated later;

[0076] Only return the complete code.

[0077] This is a document about client-side dynamic technology:

[0078] ‘****(URL)’”.

[0079] In addition, since the technologies used in the development of different platforms are not entirely the same, different Prompt templates can be provided for different platforms, respectively reflecting the information of optional components in different platforms, as well as the corresponding page development specifications, etc. In the case of multi-platform development, after the feature recognition of the design file is completed, the recognition results can be assembled into the corresponding Prompt templates for different platforms respectively to generate different Prompts.

[0080] S204: Call the artificial intelligence AI generation model according to the generated 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 referring to the components.

[0081] After generating the specific first prompt information (i.e., Prompt), the AI interface can be called to input this first prompt information 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 the multiple design elements respectively, and generate the description content (Schema) of the page framework code by referring to the components. The reason for saying that the Schema is generated by referring to the components here is that the specific components can be predefined, these components are common among multiple different pages, and the component code is written in advance. The large model does not need to write component code for specific components, but only needs to specify which predefined components to refer to in the Schema.

[0082] Among them, when the AI generation model matches components for the design elements, it can specifically judge whether it matches the usage method of a certain component according to the feature information corresponding to the design element. If so, it can select the matching component for the design element. For example, assume that a design element is a rounded rectangle image with a blue background color and the text content on the image is "Buy Now", etc. Then, according to the usage method of the components, it can be known that the design element with the above characteristics can correspond to the "button" component, etc.

[0083] Of course, in actual applications, there may be some special design elements that may not match any component in the component library. For example, a marketing event needs to design a picture that can slide horizontally, and animation needs to be displayed on the picture, etc. This requirement may only be a one-time requirement in the event venue, so there may be no predefined corresponding component in the component library. At this time, the AI ​​generation model finds through analysis that there is no component matching the design element in the component library, and the corresponding component and the corresponding component code can be generated according to the page development specification in the prompt information. In other words, when there is no matching component in the component library, the AI ​​generation model can write the component according to the page development specification. Of course, this component code written by the AI ​​generation model may have poor maintainability, but since this special design element usually only occupies a small part of the entire page, the component code that actually needs to be written by the AI ​​generation model will be very small, and even if there is a problem during operation, it is easy to troubleshoot.

[0084] After completing the mapping from design elements to components, the AI ​​generation model can generate a specific page Schema, which is a page description structure and can be compiled into executable code at runtime.

[0085] After obtaining the page Schema, since it is generated by an AI generation model after all, there may be some misjudgments and the like. Therefore, the quality of the generated page Schema can also be evaluated. Specifically, the evaluation can be performed before the specific online operation. At this time, since there is no real data (including the product information that actually needs to be displayed on the page, etc.), some data can be simulated (Mock), and the page Schema can be compiled into executable code to render the page content. Afterwards, a screenshot of the rendered page content can be taken to obtain the AI-generated page rendering. After obtaining the AI-generated page rendering, a second prompt message can be constructed based on the page rendering and the design file, and input into the AI ​​large-scale parameter model. The AI ​​large-scale parameter model can be a model with image processing capabilities, which is used to compare the AI-generated page rendering with the design file to evaluate the degree of restoration. Among them, in the specific implementation, if the AI ​​large-scale parameter model has been packaged in the form of an "intelligent conversation robot", then as Figure 5 As shown, you can put the above page rendering and the design in the original design file into the dialog box respectively, and enter the following second prompt information: "The first one is written by me in code, and the second one is the design. What do you think of the restoration? Please return the score directly, the full score is 100". After that, the "intelligent dialogue robot" can return the corresponding evaluation score after comparing the two pictures, for example,Figure 5 "75" shown in , etc. Among them, if the restoration degree evaluation passes, that is, reaches the preset standard, the page effect diagram generated by the AI can be saved to the server, and then manual acceptance can be carried out. Otherwise, the AI generation model can be re-invoked through the first prompt message, and the AI generation model can perform secondary generation of the page Schema.

[0086] Through the embodiments of the present application, the design elements in the design file can be feature-recognized and assembled into a prompt message template to generate a first prompt message. Such a first prompt message may further include predefined component identification information, as well as information such as page development specifications. In this way, after calling the AI interface based on the first prompt message, the AI generation model can select matching components for the multiple design elements respectively, and generate the description content (Schema) of the page framework code by referring to the components. In this way, since the ability of the AI generation model can be used to generate page code, the efficiency can be improved and the labor cost can be reduced. In addition, since the AI generation model does not directly generate page code according to the design file, but first maps the design elements in the design file to components, and then generates the page Schema by referring to specific components in the code, and the component code can be pre-written and can be common among multiple different pages, therefore, on the basis of the AI generating page code, the code can have high maintainability.

[0087] In addition, different prompt message templates can be provided for different page types, which reflect the predefined component libraries and page development specifications for different page types respectively. In this way, whether it is a mobile site (M-site), a PC site, or a page in a mobile App, the solution provided by the embodiments of the present application can be used to automatically generate the page Schema. In addition, for the "floors" within the page, EDM (Email Direct Marketing, which is a network marketing method that delivers value information to target users via email on the premise of prior user permission), emails, etc., support can also be provided to ensure that efficient conversion from page design to deployment can be achieved regardless of the scenario.

[0088] Embodiment 2

[0089] In the foregoing first embodiment, a general page code generation solution provided by the embodiments of the present application was mainly introduced. The so-called "general" means that no matter in what specific scenario page development is carried out, the solution provided in the first embodiment above can be used to automatically generate page code through an AI generation model, and at the same time, the code can also have high maintainability. In the second embodiment, for the application of the above solution in the scenario of multi-terminal development (that is, it is necessary to develop multiple different types of pages for the same design file to adapt to display on different terminals such as the PC side, the App side, and the M station), a method for generating page code is provided. See Figure 6 , the method may include:

[0090] S601: Obtain a design file provided for a target page or a target area in the page that needs to be developed in multiple types;

[0091] S602: Extract visual feature information corresponding to multiple design elements from the design file;

[0092] S603: Assemble the feature information of the design elements into hint information templates preset for different page types respectively to generate multiple different first hint information. The hint information template also includes a set of optional components in the corresponding page type, usage method information corresponding to multiple components included in the set of components, and page development specification information. Multiple components are respectively associated with predefined component codes;

[0093] S604: Call an artificial intelligence (AI) generation model respectively according to the multiple generated hint information, so that the AI generation model selects matching components for the multiple design elements respectively, and generates description contents of page frame codes corresponding to multiple page types respectively by referring to the components.

[0094] Through this solution, different hint information templates can be provided for different page types, reflecting the predefined component libraries and page development specifications for different page types respectively. In this way, in the case of multi-terminal development, the visual recognition results of the design file can be assembled into multiple different Prompt templates to obtain multiple different Prompts. Then, based on the multiple different Prompts, the AI generation model can be called respectively to generate page Schemas of multiple different page types for running on different terminals. In this way, since it is no longer necessary to manually write the page code for each terminal, the development efficiency will be improved and the labor cost will be reduced. At the same time, by first converting the design file into components and then into page Schemas, the amount of code generated by AI is also reduced, thus ensuring the maintainability of the code.

[0095] It should be noted that the embodiments of this application may involve the use of user data. In actual applications, user-specific personal data can be used in the solutions described herein within the scope permitted by applicable laws and regulations of the country where it is located (for example, with the user's explicit consent, providing actual notice to the user, etc.).

[0096] Corresponding to Embodiment 1, the embodiments of this application also provide a device for generating page code, which may include:

[0097] A design file acquisition unit, configured to acquire a design file provided for a target page or a target area in a page;

[0098] A visual feature extraction unit, configured to extract visual feature information corresponding to multiple design elements from the design file;

[0099] A first prompt information generation unit, configured to assemble the visual feature information of the design elements into a preset prompt information template to generate first prompt information. The prompt information template further includes an optional component set, usage method information corresponding to multiple components included in the component set, and page development specification information. The multiple components are respectively associated with predefined component codes;

[0100] A page code generation unit, configured to call an artificial intelligence (AI) generation model according to the generated first prompt information, so that the AI generation model selects matching components for the multiple design elements respectively, and generates a description content of a page framework code by referring to the components.

[0101] Wherein, the visual feature information includes the content, style, and / or position information of the design element.

[0102] Specifically, the visual feature extraction unit may be configured to: use computer vision recognition technology to extract feature information corresponding to multiple design elements from the design file.

[0103] Wherein, the AI generation model is specifically configured to, by analyzing 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 content of a page framework code by referring to the components according to the page development specification information.

[0104] In addition, the AI generation model is further configured to, when no suitable component is matched for the design element, generate a corresponding component and a corresponding component code according to the page development specification.

[0105] Furthermore, the device may further include:

[0106] A simulation rendering unit for generating data in a simulation manner and compiling the description content of the page framework code into runnable code to render page content;

[0107] A screenshot unit for taking screenshots of the rendered page content to obtain an AI-generated page effect diagram;

[0108] A reduction degree evaluation unit for constructing a second prompt message and inputting it into an AI large-scale parameter model with image processing capabilities, so as to compare the AI-generated page effect diagram with the design file through the AI large-scale parameter model to evaluate the reduction degree.

[0109] A secondary generation unit for, if the reduction degree evaluation result output by the AI large-scale parameter model fails to meet the preset standard, re-calling the AI generation model through the first prompt message to perform secondary generation of the description content of the page framework code.

[0110] Among them, when multi-terminal generation is required, different prompt message templates are provided for different page types to express different page development specifications corresponding to different page types.

[0111] Corresponding to Embodiment 2, an embodiment of the present application further provides a device for generating page code, and the device may include:

[0112] A design file acquisition unit for acquiring a design file provided for a target page or a target area in a page that needs to be developed in multiple types;

[0113] A visual feature information extraction unit for extracting visual feature information corresponding to multiple design elements from the design file;

[0114] A prompt message generation unit for assembling the feature information of the design elements into prompt message templates preset for different page types respectively to generate multiple different first prompt messages. The prompt message templates further include a set of optional components in the corresponding page types, usage method information corresponding to multiple components included in the set of components, and page development specification information. The multiple components are respectively associated with predefined component codes;

[0115] A calling unit for respectively calling an artificial intelligence AI generation model according to the multiple generated first prompt messages, so that the AI generation model selects matching components for the multiple design elements respectively and generates description content of page framework codes corresponding to multiple page types respectively by referring to the components.

[0116] In addition, an embodiment of the present application further provides a computer-readable storage medium, on which a computer program is stored. When the program is executed by a processor, the steps of the method described in any one of the foregoing method embodiments are implemented.

[0117] And an electronic device, including:

[0118] One or more processors; and

[0119] A memory associated with the one or more processors, the memory is used to store program instructions, and when the program instructions are read and executed by the one or more processors, the steps of the method described in any one of the foregoing method embodiments are executed.

[0120] A computer program product, including a computer program / computer-executable instructions, when the computer program / computer-executable instructions are executed by a processor in an electronic device, the steps of the method described in the foregoing method embodiments are implemented.

[0121] Wherein, Figure 7 Exemplarily, the architecture of the electronic device is shown, which may specifically 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 above-mentioned processor 710, video display adapter 711, disk drive 712, input / output interface 713, network interface 714, and the memory 720 can be communicatively connected through a communication bus 730.

[0122] Wherein, the processor 710 can be implemented in a general-purpose CPU (Central Processing Unit, processor), a microprocessor, an application-specific integrated circuit (Application Specific Integrated Circuit, ASIC), or one or more integrated circuits, etc., and is used to execute relevant programs to implement the technical solution provided by the present application.

[0123] The memory 720 can be implemented in the form of ROM (Read Only Memory), RAM (Random Access Memory), static storage devices, dynamic storage devices, 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 also store a web browser 723, a data storage management system 724, a page code generation processing system 725, and so on. The above-mentioned page code generation processing system 725 can be the application program that specifically implements the operations of the foregoing steps in the embodiments of the present application. In summary, when implementing the technical solution provided by the present application through software or firmware, the relevant program codes are stored in the memory 720 and are called and executed by the processor 710.

[0124] The input / output interface 713 is used to connect to the input / output module to achieve information input and output. The input / output module can be configured as a component in the device (not shown in the figure) or externally connected to the device to provide corresponding functions. Among them, the input devices can include a keyboard, a mouse, a touch screen, a microphone, various sensors, etc., and the output devices can include a display, a speaker, a vibrator, an indicator light, etc.

[0125] The network interface 714 is used to connect to a communication module (not shown in the figure) to achieve communication interaction between this device and other devices. Among them, the communication module can achieve communication through a wired method (such as USB, network cable, etc.) or through a wireless method (such as a mobile network, WIFI, Bluetooth, etc.).

[0126] The bus 730 includes a path for transmitting information between various components of the device (such as the processor 710, the video display adapter 711, the disk drive 712, the input / output interface 713, the network interface 714, and the memory 720).

[0127] It should be noted that although the above device only shows the processor 710, the video display adapter 711, the disk drive 712, the input / output interface 713, the network interface 714, the memory 720, the bus 730, etc., in the specific implementation process, this device may also include other components necessary for normal operation. In addition, those skilled in the art can understand that the above device may also only include the components necessary to implement the solution of the present application and does not necessarily include all the components shown in the figure.

[0128] As can be seen from the description of the above embodiments, those skilled in the art can clearly understand that this application can be implemented by means of software plus a necessary general hardware platform. Based on such an understanding, the technical solution of this application, in essence, or the part that makes a contribution 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 for causing a computer device (which can be a personal computer, a server, or a network device, etc.) to execute the methods described in various embodiments or some parts of the embodiments of this application.

[0129] Each embodiment in this specification is described in a progressive manner. For the same or similar parts among the embodiments, reference can be made to each other. Each embodiment focuses on the differences from other embodiments. In particular, for a system or a system embodiment, since it is basically similar to the method embodiment, the description is relatively simple. For the relevant parts, reference can be made to the partial description of the method embodiment. The systems and system embodiments described above are only illustrative. The units described as separate components may or may not be physically separated. The components shown as units may or may not be physical units, that is, they may be located in one place or distributed to multiple network units. Some or all of the modules can be selected according to actual needs to achieve the purpose of the solution of this embodiment. Those of ordinary skill in the art can understand and implement it without creative efforts.

[0130] The method and electronic device for generating page code provided by this application have been introduced in detail above. Specific examples are used in this article to elaborate on the principle and implementation manner of this application. The description of the above embodiments is only used to help understand the method and its core idea of this application; at the same time, for those of ordinary skill in the art, according to the idea of this application, there will be changes in the specific implementation manner and application scope. In summary, the content of this specification should not be construed as a limitation to this application.

Claims

1. A method for generating a page code, characterized in that: include: Obtain design files provided for a target page or a target area in a page; Extracting visual feature information corresponding to a plurality of design elements respectively from the design file; Assembling the visual feature information of the design element into a preset prompt information template to generate first prompt information, wherein the prompt information template also includes an optional component set, usage information corresponding to a plurality of components included in the component set, and page development specification information, wherein the plurality of components are respectively associated with predefined component codes; An artificial intelligence AI generation model is called according to the generated first prompt information, so that the AI ​​generation model selects matching components for the multiple design elements respectively, and generates description content of the page framework code by referencing the components.

2. The method according to claim 1, characterized in that The visual feature information includes content, style and / or position information of the design element.

3. The method according to claim 1, characterized in that: The extracting visual feature information respectively corresponding to the plurality of design elements from the design file comprises: Computer vision recognition technology is used to extract feature information corresponding to a plurality of design elements from the design file.

4. The method according to claim 1, characterized in that The AI ​​generation model is specifically used to select matching components for the multiple design elements respectively by analyzing the feature information of the design elements and the usage methods of the components, and generate the 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, characterized in that The AI ​​generation model is also used to generate corresponding components and corresponding component codes according to the page development specifications when the design elements are not matched to suitable components.

6. The method according to claim 1, characterized in that Also includes: Generate data by simulation, and compile the description content of the page framework code into executable code to render the page content; Take a screenshot of the rendered page content to obtain the AI-generated page rendering; Construct the second prompt information and input it into the AI ​​large-scale parameter model with image processing capabilities, so that the AI-generated page rendering is compared with the design file through the AI ​​large-scale parameter model to evaluate the degree of restoration.

7. The method according to claim 6, characterized in that Also includes: If the restoration degree 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 re-called through the first prompt information to perform secondary generation of the page frame code description content.

8. The method according to claim 1, characterized in that When multi-end generation is required, different prompt information templates are provided for different page types to express different page development specifications corresponding to different page types.

9. A method for generating a page code, characterized in that: include: Obtain design files for target pages or target areas in pages that require multi-type development; Extracting visual feature information corresponding to a plurality of design elements respectively from the design file; Assembling the characteristic information of the design element into prompt information templates preset for different page types to generate a plurality of different first prompt information, wherein the prompt information template also includes a component set that is optional in the corresponding page type, usage information corresponding to the plurality of components included in the component set, and page development specification information, wherein the plurality of components are respectively associated with predefined component codes; The artificial intelligence AI generation model is called respectively according to the multiple first prompt information generated, so that the AI ​​generation model selects matching components for the multiple design elements respectively, and generates description contents of page framework codes corresponding to multiple page types respectively by referencing the components.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the program is executed by a processor, the steps of the method described in any one of claims 1 to 9 are implemented.

11. An electronic device, characterized in that: 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, wherein the program instructions, when read and executed by the one or more processors, execute the steps of the method described in any one of claims 1 to 9.

12. A computer program product comprising a computer program / computer executable instructions, characterized in that: When the computer program / computer executable instructions are executed by a processor in an electronic device, the steps of the method according to any one of claims 1 to 9 are implemented.

Images