Page code generation method and device

Abstract

The invention discloses a page code generation method and device, and the method comprises the steps: analyzing UI demand information, and obtaining an analysis result; filling information in the analysis result into a specific template to obtain an AI cue word; collecting context information corresponding to the UI demand information, and determining a UI strategy according to the context information; the context information at least comprises a user identity, a device performance parameter and an ambient light condition; generating a UI cue word according to a preset verification rule; generating an initial UI based on the UI cue word; the initial UI is adjusted according to the UI strategy, and the adjusted initial UI is verified; and when the adjusted initial UI passes the verification, converting the adjusted initial UI according to the AI prompt word to obtain a page code. And after the adjusted initial UI passes the verification, converting the initial UI into a front-end code according to an AI prompt word so as to ensure that the page code is consistent with the adjusted UI, thereby ensuring that the project progress is smoothly advanced.

Description

TECHNICAL FIELD

[0001] The present application relates to the field of artificial intelligence, and in particular to a page code generation method and device. BACKGROUND

[0002] In modern industrial control systems, especially in large enterprises such as petrochemical and energy industries, user interface design and front-end development are crucial parts of the system development process.

[0003] Currently, user interface design and front-end development mainly rely on manual operation. After the designer completes the UI design, the front-end developer needs to convert the design into actual code. However, in this process, there are often style deviations, control misplacement, and missing event bindings. The root cause of these problems is the lack of a unified enterprise design system and an automatic verification mechanism for industrial control standards, especially in terms of component color, style, and standard safety identification, which are not explicitly specified, resulting in inconsistencies between the code and the UI design. In particular, in large industrial control systems, the impact of such errors is more prominent, seriously affecting the progress of the project. SUMMARY

[0004] The present application provides a page code generation method and device, aiming to ensure the smooth progress of the project.

[0005] To achieve the above purpose, the present application provides the following technical solutions:

[0006] A page code generation method, comprising:

[0007] When receiving UI requirement information, the UI requirement information is parsed to obtain a parsing result;

[0008] The information in the parsing result is filled into a specific template to obtain an AI prompt word;

[0009] Context information corresponding to the UI requirement information is collected, and a UI strategy is determined according to the context information; the context information at least includes user identity, device performance parameters, and environmental lighting conditions;

[0010] An UI prompt word is generated according to a preset verification rule;

[0011] An initial UI is generated based on the UI prompt word;

[0012] The initial UI is adjusted according to the UI strategy, and the adjusted initial UI is verified;

[0013] When the adjusted initial UI passes the verification, the adjusted initial UI is converted according to the AI prompt word to obtain a page code.

[0014] Optionally, the parsing of the UI requirement information obtains a parsing result, and the parsing includes:

[0015] When the UI requirement information is language data information, the language data information is extracted to obtain key information, and the key information is determined as the parsing result;

[0016] When the UI requirement information is a hand-drawn UI image, the hand-drawn UI image is converted to obtain UI element information and a layout structure, and the UI element information and the layout structure are determined as the parsing result;

[0017] When the UI requirement information is a device parameter table, parameter information is obtained from the device parameter table, and the parameter information is determined as the parsing result.

[0018] Optionally, the determining of the UI strategy according to the context information includes:

[0019] An initial UI strategy is obtained;

[0020] The context information is identified to obtain a use scenario type;

[0021] The initial UI strategy is adjusted according to the use scenario type to obtain an adjusted initial UI strategy, and the adjusted initial UI strategy is identified as the UI strategy.

[0022] Optionally, the verification of the adjusted initial UI includes:

[0023] The adjusted initial UI is parsed by using an image recognition method to obtain a parsing result;

[0024] The parsing result is compared with a target preset verification rule;

[0025] When the parsing result meets the target preset verification rule, it is determined that the adjusted initial UI passes the verification;

[0026] When the parsing result does not meet the target preset verification rule, it is determined that the adjusted initial UI does not pass the verification.

[0027] Optionally, the method further includes:

[0028] When the adjusted initial UI does not pass the verification, a UI optimization prompt word is generated based on a target preset verification rule;

[0029] The adjusted initial UI is optimized according to the UI optimization prompt word to obtain an optimized initial UI;

[0030] When the optimized initial UI passes the verification, the optimized initial UI is converted according to the AI prompt word to obtain page code.

[0031] A page code generation apparatus comprises:

[0032] A parsing unit is configured to parse UI requirement information to obtain a parsing result when the UI requirement information is received;

[0033] A filling unit is configured to fill information in the parsing result into a specific template to obtain an AI prompt word;

[0034] A determining unit is configured to collect context information corresponding to the UI requirement information and determine a UI strategy according to the context information; the context information at least includes user identity, device performance parameters and environmental lighting conditions;

[0035] A first generating unit is configured to generate a UI prompt word according to a preset verification rule;

[0036] A second generating unit is configured to generate an initial UI based on the UI prompt word;

[0037] An adjusting unit is configured to adjust the initial UI according to the UI strategy and verify the adjusted initial UI;

[0038] A converting unit is configured to convert the adjusted initial UI according to the AI prompt word to obtain page code when the adjusted initial UI passes the verification.

[0039] Optionally, the parsing unit is specifically configured to:

[0040] When the UI requirement information is language data information, the language data information is extracted to obtain key information, and the key information is determined as the parsing result;

[0041] When the UI requirement information is a hand-drawn UI image, the hand-drawn UI image is converted to obtain UI element information and a layout structure, and the UI element information and the layout structure are determined as the parsing result;

[0042] When the UI requirement information is a device parameter table, parameter information is obtained from the device parameter table, and the parameter information is determined as the parsing result.

[0043] Optionally, the determining unit is specifically configured to:

[0044] An initial UI strategy is obtained;

[0045] The context information is identified to obtain a use scenario type;

[0046] adjust the initial UI strategy according to the use scenario type to obtain an adjusted initial UI strategy, and identify the adjusted initial UI strategy as a UI strategy.

[0047] Optionally, the adjusting unit is specifically configured to:

[0048] analyze the adjusted initial UI by using an image recognition method to obtain an analysis result;

[0049] compare the analysis result with a target preset verification rule;

[0050] when the analysis result meets the target preset verification rule, determine that the adjusted initial UI passes the verification;

[0051] when the analysis result does not meet the target preset verification rule, determine that the adjusted initial UI fails the verification.

[0052] Optionally, the method further comprises:

[0053] a third generating unit configured to generate a UI optimization prompt word based on a target preset verification rule when the adjusted initial UI fails the verification;

[0054] an optimization unit configured to optimize the adjusted initial UI according to the UI optimization prompt word to obtain an optimized initial UI;

[0055] a code conversion unit configured to convert the optimized initial UI according to the AI prompt word to obtain page code when the optimized initial UI passes the verification.

[0056] The technical scheme provided in the application comprises the following steps: when receiving UI requirement information, analyzing the UI requirement information to obtain an analysis result; filling information in the analysis result into a specific template to obtain an AI prompt word; collecting context information corresponding to the UI requirement information, and determining a UI strategy according to the context information; the context information at least comprises user identity, device performance parameters and environmental lighting conditions; generating a UI prompt word according to a preset verification rule; generating an initial UI based on the UI prompt word; adjusting the initial UI according to the UI strategy, and verifying the adjusted initial UI; when the adjusted initial UI passes the verification, converting the adjusted initial UI according to the AI prompt word to obtain page code. When the adjusted initial UI passes the verification, the AI prompt word is converted into front-end code, so as to ensure that the page code is consistent with the adjusted UI, thereby ensuring the smooth progress of the project schedule. BRIEF DESCRIPTION OF DRAWINGS

[0057] To more clearly illustrate the technical solutions in the embodiments of this application 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 only some embodiments of this application. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0058] Figure 1 A flowchart illustrating a page code generation method provided in this application embodiment;

[0059] Figure 2 An interactive flowchart of a page code generation method provided in an embodiment of this application;

[0060] Figure 3 This is a schematic diagram of the architecture of a page code generation device provided in an embodiment of this application. Detailed Implementation

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

[0062] In this application, the terms "comprising," "including," or any other variations thereof are intended to cover non-exclusive inclusion, such that a process, method, article, or apparatus that comprises a list of elements includes not only those elements but also other elements not expressly listed, or elements inherent to such a process, method, article, or apparatus. Without further limitation, an element defined by the phrase "comprising one..." does not exclude the presence of other identical elements in the process, method, article, or apparatus that includes said element.

[0063] like Figure 1 The diagram shown is a flowchart of a page code generation method provided in an embodiment of this application, applied to a UI (User Interface) generation device, and includes the following steps:

[0064] It should be noted that the UI generation device includes a multimodal AI module, an industrial rule verification module, a UI generation module, a real-time learning and model evolution module, a context-aware and adaptive module, and a code generation module.

[0065] S101: When UI requirement information is received, the UI requirement information is parsed to obtain the parsing result.

[0066] The UI requirement information includes specific requirements for interface design (e.g., descriptions of interface appearance, functions, and interactions).

[0067] Optionally, the analysis result includes but is not limited to design elements, scene descriptions, and specific design requirements.

[0068] It can be understood that when the UI requirement information input by the user is received, the UI requirement information is analyzed by the multi-modal AI module to obtain an analysis result. Specifically, the multi-modal AI module integrates multiple general AI large models.

[0069] Optionally, in another embodiment of the present application, the specific implementation of step S101 includes processes A1 to A3.

[0070] A1: When the UI requirement information is language data information, the language data information is extracted to obtain key information, and the key information is determined as the analysis result.

[0071] The key information includes but is not limited to page structure, control type, and interaction logic.

[0072] Optionally, the language data information includes at least text and voice.

[0073] A2: When the UI requirement information is a hand-drawn UI image, the hand-drawn UI image is converted to obtain UI element information and layout structure, and the UI element information and layout structure are determined as the analysis result.

[0074] It can be understood that the hand-drawn UI image is first recognized, and the recognized UI image is converted into standardized element information and layout structure.

[0075] A3: When the UI requirement information is a device parameter table, parameter information is obtained from the device parameter table, and the parameter information is determined as the analysis result.

[0076] The parameter information includes but is not limited to parameter type, value range, and unit.

[0077] It can be understood that the parameter information that needs to be displayed or operated in the UI is extracted from the device parameter table.

[0078] S102: Fill in the information in the analysis result into a specific template to obtain an AI prompt word.

[0079] The information in the analysis result is filled into a specific template, i.e., the analysis result is applied to a specific AI prompt word generation template to generate a final AI prompt word. For example, the following template:

[0080] “# UI generation prompt word

[0081] ## Positioning

[0082] - **Industrial UI Generation**: A module focused on providing UI design generation for the industrial automation field.

[0083] ## Interface

[0084] - **Interface Style**: Use the supcond component library [xxx], and use medium-sized design for component text and text spacing.

[0085] - **Design Requirements**: Design elements must meet the requirements of the industrial design field, and non-critical faults or alarms must not use red.

[0086] - **Human-Computer Interaction**: The human-computer interaction must meet the requirements of the industrial automation field, and [xxx] must be signed and logged.

[0087] Note that [xxx] in this example is replaceable, and the prompt word is mainly provided for the UI generation model to generate the UI.

[0088] S103: Collect context information corresponding to the UI requirement information, and determine the UI strategy according to the context information.

[0089] Among them, the context information is information related to the current use scenario, such as user identity, device performance parameters, and environmental lighting conditions.

[0090] It can be understood that the context information corresponding to the UI requirement information is collected by the context perception and adaptation module, and the UI strategy is determined according to the context information. Specifically, the context perception and adaptation module integrates multiple AI large models.

[0091] Optionally, in another embodiment of the present application, the specific implementation of step S103 includes processes B1 to B3.

[0092] B1: Obtain the initial UI strategy.

[0093] Among them, the UI strategy refers to the overall planning and direction formulated when designing the user interface in order to achieve the best user experience and product goals.

[0094] B2: Identify the context information to obtain the use scenario type.

[0095] Among them, the use scenario type includes but is not limited to monitoring center, field operation and mobile inspection.

[0096] B3: Adjust the initial UI strategy according to the use scenario type to obtain the adjusted initial UI strategy, and mark the adjusted initial UI strategy as the UI strategy.

[0097] Understandably, adjusting the initial UI strategy based on the type of use case aims to make the UI design more aligned with the needs of that specific scenario and user expectations. Different use cases may have different user behaviors, needs, and technical requirements; therefore, the UI strategy needs to be adjusted accordingly.

[0098] For example, in emergency operation scenarios, priority should be given to operation speed and accuracy, while in monitoring scenarios, priority should be given to the clear display of information.

[0099] S104: Generate UI prompts based on preset validation rules.

[0100] Understandably, the UI generation module generates UI prompts based on preset verification rules. Specifically, the preset verification rules are extracted to obtain restrictive prompts (rule-restricted prompts refer to restrictive prompts used to limit design style, design elements, etc.), and UI prompts are generated based on these restrictive prompts. For example, the restrictive prompts extracted from the preset verification rules might be: red is prohibited for non-fault or high-level alarms; the interface design style requires lighter colors to prevent visual fatigue for operators during long-term use when there are no faults.

[0101] Specifically, the UI generation module integrates multiple large AI design models, such as mastergo and stitch.

[0102] The verification rules are provided by the industrial rule verification module, which integrates multiple large AI models and is responsible for managing and applying various UI design rules and coding standards, including enterprise-level design system rules (such as color schemes, control styles, layout rules, etc.) and industrial control standards (such as ISA-101, IEC62443, etc.). Furthermore, the industrial rule verification module supports dynamic loading and updating of rules, implementing a dual-track verification mechanism of "standard-project".

[0103] It's important to note the main features of the industrial rule validation module: ① Hierarchical rule management: Rules are divided into enterprise and industrial-level global rules, project-level rules, and scenario-level rules, forming a hierarchical rule system. Enterprise and industrial rules are pre-loaded into the large model in the form of datasets and take effect globally. ② Dynamic rule loading: Supports dynamic loading and application of rules at different levels at runtime, enabling flexible rule configuration. Dynamically loaded rules are only fed into the current session and only take effect in the current session. ③ Rule conflict resolution: When conflicts occur between rules at different levels, conflicts are automatically resolved according to a priority strategy. ④ Rule update and synchronization: Supports real-time rule updates and synchronization, ensuring that the latest design specifications and coding guidelines are always used. ⑤ Rule validation: Provides rule restriction prompts and validation result optimization prompts to achieve UI and code validation.

[0104] S105: generating an initial UI based on the UI prompt words.

[0105] It can be understood that the UI generation module generates an initial UI based on the UI prompt words, for example, the UI prompt words are: simple single-column layout, large button and icon design, high contrast color, dynamic loading content, clear product display, simplified shopping cart and checkout process, and the initial UI is generated based on the above prompt words.

[0106] It should be noted that the user can adjust the initial UI through the visual interface.

[0107] S106: adjusting the initial UI according to the UI strategy, and checking the adjusted initial UI.

[0108] It can be understood that after the UI generation module generates the initial UI based on the UI prompt words, in order to better meet the needs of users, the UI generation module needs to adjust the initial UI according to the UI strategy, so that the adjusted initial UI can better meet the needs of users.

[0109] It should be noted that the main purpose of adjusting the initial UI according to the UI strategy is to ensure the usability of the interface and achieve the product target. The adjusted UI design needs to ensure that it runs well in the real user environment and meets the expectations of users. Therefore, after the UI adjustment, the industrial rule checking module is used to check it to ensure that the design meets the expected target.

[0110] Optionally, in another embodiment of the present application, the specific implementation of step S106 includes processes C1 to C4.

[0111] C1: analyzing the adjusted initial UI by using an image recognition method to obtain an analysis result.

[0112] The analysis result includes but is not limited to interface element recognition, text and label analysis, color and style analysis.

[0113] Optionally, the adjusted initial UI can be analyzed by an AI intelligent image analysis model.

[0114] C2: comparing the analysis result with a target preset checking rule.

[0115] For example, the target checking rule is that all buttons must have obvious visual feedback (such as color change) when hovering, and the analysis result is that multiple buttons are identified on the page, such as "add to shopping cart", "buy now", etc., and all buttons will change color when the mouse hovers. Comparing the analysis result with the target preset checking rule, it can be seen that the analysis result meets the target preset checking rule, and therefore process C3 is continued.

[0116] C3: When the analysis result meets the target preset check rule, it is determined that the adjusted initial UI passes the check.

[0117] C4: When the analysis result does not meet the target preset check rule, it is determined that the adjusted initial UI fails the check.

[0118] For example, the target preset check rule is that the main navigation bar should be simple enough and contain at most 5 main categories. The analysis result is that the main navigation bar of the page contains 7 main categories. It can be seen that the analysis result does not meet the target preset check rule.

[0119] Optionally, after step S106, there is also a case where the adjusted initial UI fails the check, in which case new prompt words need to be generated, and further UI adjustment is performed according to the prompt words. In this way, it can be ensured that the final delivered UI meets the design requirements, thereby improving the quality and development efficiency of the project. Therefore, in another embodiment of the present application, a UI optimization method is provided, including processes D1 to D3.

[0120] D1: When the adjusted initial UI fails the check, generate UI optimization prompt words based on the target preset check rule.

[0121] It can be understood that when the adjusted initial UI fails the check, the industrial rule check module generates UI optimization prompt words again according to the target preset check rule to optimize the initial UI.

[0122] For example, the UI optimization prompt words are that the xxx fault alarm prompt color is used incorrectly, which should be changed from yellow to red, and the xxx font size is too small, which should be changed from 10 to 12.

[0123] D2: Optimize the adjusted initial UI according to the UI optimization prompt words to obtain an optimized initial UI.

[0124] It can be understood that when optimizing the initial UI, the UI optimization prompt words should be considered from multiple aspects such as interface elements, text, and labels.

[0125] D3: When the optimized initial UI passes the check, convert the optimized initial UI according to the AI prompt words to obtain optimized page code.

[0126] It should be noted that when the optimized initial UI fails the check, process D1 is returned until the optimized initial UI passes the check.

[0127] Among them, the code generation module converts the optimized initial UI to obtain optimized page code. Specifically, the code generation module integrates multiple AI coding large models. For example, cursor, v0, etc.

[0128] S107: When the adjusted initial UI passes the verification, the adjusted initial UI is converted according to the AI prompt word to obtain a page code.

[0129] The page code includes but is not limited to HTML, CSS, and JavaScript.

[0130] Specifically, the code generation module selects a suitable code generation template according to the project requirements and technology stack, and then converts the adjusted initial UI into front-end code according to the selected code generation template and the AI prompt word, thereby generating the page code. For example, the AI prompt word is Please design according to xxx design draft, use react+ts+vite to implement the interface, and require to decouple and extract components according to the single principle, and use a single file to generate a single component. The code generation module converts the adjusted initial UI into front-end code according to the code generation template and the AI prompt word, thereby generating the page code.

[0131] The suitable code generation template is selected according to the project requirements and technology stack, that is, before code generation, the customer selects, for example, the front-end package manager:

yarn|npm

yes|no

react|vue

[0132] It should be noted that after generating the page code, the generated page code can also be optimized according to the UI optimization prompt word provided by the industrial rule verification module, thereby improving the enterprise and industrial coding specifications, performance, and maintainability.

[0133] In addition, the real-time learning and model evolution module collects and analyzes user feedback and adjustment behavior on the initial UI to continuously optimize the UI strategy. Specifically, the data of user adjustment of UI demand information, initial UI, and page code are recorded; stable preference patterns are identified from the data through machine learning algorithms; and the prompt word generation strategy of the multi-modal AI generation module, the UI generation module, and the code generation module is dynamically optimized according to the identified preference patterns to make it more consistent with user expectations. With the accumulation of use data, the demand analysis, UI generation, and code generation model strategies are continuously optimized to improve the generation quality.

[0134] In order to better illustrate the above content, see Figure 2An interaction flowchart of a page code generation method is shown. A user inputs UI requirement information through natural language, a multi-modal AI module analyzes the UI requirement information to obtain an analysis result, a context perception and adaptive module collects context information corresponding to the UI requirement information, and determines a UI strategy according to the context information, a UI generation module generates a UI prompt word according to a preset verification rule, the UI generation module generates an initial UI based on the UI prompt word, the UI generation module adjusts the initial UI according to the UI strategy, and an industrial rule verification module verifies the adjusted initial UI, when the adjusted initial UI passes the verification, a code generation module converts the adjusted initial UI according to the AI prompt word to obtain page code, when the adjusted initial UI does not pass the verification, the industrial rule verification module generates a UI optimization prompt word, the UI generation module optimizes the adjusted initial UI according to the UI optimization prompt word to obtain an optimized initial UI, and when the optimized initial UI passes the verification, the code generation module converts the optimized initial UI according to the AI prompt word to obtain optimized page code.

[0135] It should be noted that based on the above S101-S107 process, the embodiment can achieve the following beneficial effects:

[0136] 1. Through automatic UI design generation and code conversion, the consistency of UI design and final implementation is ensured, and the restoration degree of UI actual effect and code can reach more than 98%, significantly reducing the workload of manual adjustment and correction. In actual project testing, the correction workload of UI and code consistency can be reduced by more than 80%, greatly improving the development efficiency.

[0137] 2. Through built-in standards and specifications in the industrial control field, UI designs that meet the specific needs of industrial control can be generated, such as safety operation mechanisms, emergency handling, information level display, etc., improving the usability and safety of UI in actual industrial environments. In particular, in safety-critical systems, the invention can automatically apply multi-layer anti-misoperation mechanisms, significantly reducing the risk of human operation errors.

[0138] 3. Through real-time learning mechanism, it can continuously learn from user interaction, identify user preference patterns, and automatically apply these preferences in subsequent UI generation, realizing personalized UI design and improving user satisfaction. Tests show that after 3-5 iterations of learning, the proportion of UI designs generated directly accepted by users increased by more than 40%.

[0139] 4. It can automatically adjust the UI strategy according to different use scenarios (such as monitoring center, field operation terminal, mobile inspection device), provide the most suitable user interface for the current scene, and improve operation efficiency and user experience. For example, in a high-noise environment, visual feedback will be automatically enhanced; in a low-light environment, the contrast will be automatically adjusted.

[0140] 5. Through the dynamic rule loading mechanism, it supports flexible configuration of enterprise-level and project-level rules, realizes "standard-project" dual-track verification, and meets the individual needs of different enterprises and projects. In this way, not only can the consistency of enterprise design be maintained, but also the special requirements of different projects can be met.

[0141] 6. Through AI, it quickly generates the required UI draft and corresponding front-end code, reducing the workload of designers and developers, and truly realizing "what you think, what you see, what you get", greatly shortening the development cycle. In a typical industrial control system UI development project, the development time can be shortened by 40%-60%.

[0142] 7. Through image semantic segmentation technology, it can realize the mapping verification of UI elements and industrial control device parameters, ensure that the UI design meets the operation requirements of the actual device, and improve the operability and safety. This feature is particularly important in complex industrial systems, which can effectively prevent operation problems caused by mismatch between UI design and actual device.

[0143] As shown in Figure 3 The architecture of a page code generation device provided by an embodiment of the present application is shown in the figure. The generation device includes a parsing unit 100, a filling unit 200, a determination unit 300, a first generation unit 400, a second generation unit 500, an adjustment unit 600, and a conversion unit 700.

[0144] The parsing unit 100 is configured to parse the UI requirement information when receiving the UI requirement information, and obtain a parsing result.

[0145] The parsing unit 100 is specifically configured to: when the UI requirement information is language data information, extract the language data information to obtain key information, and determine the key information as the parsing result; when the UI requirement information is a hand-drawn UI image, convert the hand-drawn UI image to obtain UI element information and a layout structure, and determine the UI element information and the layout structure as the parsing result; and when the UI requirement information is a device parameter table, obtain parameter information from the device parameter table, and determine the parameter information as the parsing result.

[0146] The filling unit 200 is configured to fill the information in the parsing result into a specific template to obtain an AI prompt word.

[0147] The determining unit 300 is configured to collect context information corresponding to the UI demand information, and determine the UI strategy according to the context information; the context information at least includes user identity, device performance parameters and ambient light conditions.

[0148] The determining unit 300 is specifically configured to: obtain an initial UI strategy; identify the context information to obtain a use scenario type; adjust the initial UI strategy according to the use scenario type to obtain an adjusted initial UI strategy, and identify the adjusted initial UI strategy as the UI strategy.

[0149] The first generating unit 400 is configured to generate the UI prompt word according to a preset verification rule.

[0150] The second generating unit 500 is configured to generate the initial UI based on the UI prompt word.

[0151] The adjusting unit 600 is configured to adjust the initial UI according to the UI strategy, and verify the adjusted initial UI.

[0152] The adjusting unit 600 is specifically configured to: analyze the adjusted initial UI by using an image recognition method to obtain an analysis result; compare the analysis result with a target preset verification rule; when the analysis result conforms to the target preset verification rule, it is determined that the adjusted initial UI passes the verification; when the analysis result does not conform to the target preset verification rule, it is determined that the adjusted initial UI fails the verification.

[0153] The converting unit 700 is configured to, when the adjusted initial UI passes the verification, convert the adjusted initial UI according to the AI prompt word to obtain page code.

[0154] In summary, when the adjusted initial UI passes the verification, it is converted into front-end code according to the AI prompt word, so as to ensure that the page code is consistent with the adjusted UI, thereby ensuring the smooth progress of the project progress.

[0155] In combination with the content shown in the figure, the generating device further includes: Figure 3 The third generating unit is configured to, when the adjusted initial UI fails the verification, generate a UI optimization prompt word based on the target preset verification rule.

[0156] The optimization unit is configured to optimize the adjusted initial UI according to the UI optimization prompt word to obtain an optimized initial UI.

[0157] The code converting unit is configured to, when the optimized initial UI passes the verification, convert the optimized initial UI according to the AI prompt word to obtain optimized page code.

[0158]

[0159] ​The various embodiments described in this specification are intended to be illustrative only and are not intended to limit the scope of the application in any way. Although certain examples of the application have been described above, various alterations, modifications, and improvements will readily occur to those skilled in the art. Such alterations, modifications, and improvements are intended to be within the scope and spirit of the application. Accordingly, the application is intended to be limited only by the scope of the appended claims, including the equivalents thereof.

[0160] Those skilled in the art will further appreciate that the functionality of the various examples described in this specification— which are implemented in hardware, software, or a combination of the two— can be implemented as one or more computer programs or program modules. The programs of embodiments described are not intended to be limited to any particular software language and any implementation of the programs can be implemented in a variety of programming techniques. Implementations of the various examples described herein are implemented as one or more computer programs that are executable on a programmable computing device or devices. As used in this specification, the terms "computer readable medium" and "computer readable media" are intended to include all memory and storage media, hardware and software code that can be read and processed by a computer. Computer readable media can include, but are not limited to, magnetic storage media, optical storage media, solid state storage media, and any other medium that can be used to carry or store desired program code in computer readable form. The program code can be executed on a single computer or on multiple computers.

[0161] The above description of disclosed embodiments is intended to be illustrative only and not restrictive. Many modifications, additions and improvements will readily occur to those skilled in the art. The scope of the application should, therefore, be determined not with reference to the above description, but instead with reference to the appended claims, including the equivalents thereof.

Claims

1. A method of generating page code, characterized by, The application comprises the following steps: When receiving the UI requirement information, the UI requirement information is parsed to obtain a parsing result; The information in the parsing result is filled into a specific template to obtain an AI prompt word; Context information corresponding to the UI requirement information is collected, and a UI strategy is determined according to the context information; the context information at least includes user identity, device performance parameter and environmental lighting condition; The UI prompt word is generated according to a preset checking rule; An initial UI is generated based on the UI prompt word; The initial UI is adjusted according to the UI strategy, and the adjusted initial UI is checked; When the adjusted initial UI passes the check, the adjusted initial UI is converted according to the AI prompt word to obtain page code.

2. The method of claim 1, wherein, The parsing of the UI requirement information to obtain a parsing result comprises the following steps: When the UI requirement information is language data information, the language data information is extracted to obtain key information, and the key information is determined as the parsing result; When the UI requirement information is a hand-drawn UI image, the hand-drawn UI image is converted to obtain UI element information and layout structure, and the UI element information and the layout structure are determined as the parsing result; When the UI requirement information is a device parameter table, parameter information is obtained from the device parameter table, and the parameter information is determined as the parsing result.

3. The method of claim 1, wherein, The determination of the UI strategy according to the context information comprises the following steps: An initial UI strategy is obtained; The context information is recognized to obtain a use scenario type; The initial UI strategy is adjusted according to the use scenario type to obtain an adjusted initial UI strategy, and the adjusted initial UI strategy is identified as the UI strategy.

4. The method of claim 1, wherein, The checking of the adjusted initial UI comprises the following steps: The adjusted initial UI is parsed by using an image recognition method to obtain a parsing result; The parsing result is compared with a target preset checking rule; When the parsing result conforms to the target preset checking rule, it is determined that the adjusted initial UI passes the check; When the parsing result does not conform to the target preset checking rule, it is determined that the adjusted initial UI does not pass the check.

5. The method of claim 1, wherein, The application further comprises the following steps: When the adjusted initial UI does not pass the check, a UI optimization prompt word is generated based on a target preset checking rule; The adjusted initial UI is optimized according to the UI optimization prompt word to obtain an optimized initial UI; When the optimized initial UI passes the check, the optimized initial UI is converted according to the AI prompt word to obtain optimized page code.

6. A page code generating apparatus characterized by comprising: The application comprises the following steps: A parsing unit is configured to parse the UI requirement information to obtain a parsing result when the UI requirement information is received; A filling unit is configured to fill information in the parsing result into a specific template to obtain an AI prompt word; A determination unit is configured to collect context information corresponding to the UI requirement information, and determine a UI strategy according to the context information; the context information at least includes user identity, device performance parameter and environmental lighting condition; The first generating unit is configured to generate a UI prompt word according to a preset checking rule; The second generating unit is configured to generate an initial UI based on the UI prompt word; The adjusting unit is configured to adjust the initial UI according to the UI strategy, and check the adjusted initial UI; The converting unit is configured to convert the adjusted initial UI according to the AI prompt word to obtain page code when the adjusted initial UI passes the check.

7. The apparatus of claim 6, wherein, The analyzing unit is specifically configured to: extract the language data information to obtain key information, and determine the key information as the analysis result when the UI requirement information is language data information; convert the hand-drawn UI image to obtain UI element information and a layout structure, and determine the UI element information and the layout structure as the analysis result when the UI requirement information is a hand-drawn UI image; obtain parameter information from the device parameter table, and determine the parameter information as the analysis result when the UI requirement information is a device parameter table.

8. The apparatus of claim 6, wherein, The determining unit is specifically configured to: obtain an initial UI strategy; identify the context information to obtain a use scenario type; adjust the initial UI strategy according to the use scenario type to obtain an adjusted initial UI strategy, and identify the adjusted initial UI strategy as the UI strategy.

9. The apparatus of claim 6, wherein, The adjusting unit is specifically configured to: analyze the adjusted initial UI by using an image recognition method to obtain an analysis result; compare the analysis result with a target preset checking rule; determine that the adjusted initial UI passes the check when the analysis result meets the target preset checking rule; determine that the adjusted initial UI fails the check when the analysis result does not meet the target preset checking rule.

10. The apparatus of claim 6, wherein, Further comprising: The third generating unit is configured to generate a UI optimization prompt word based on a target preset checking rule when the adjusted initial UI fails the check; The optimization unit is configured to optimize the adjusted initial UI according to the UI optimization prompt word to obtain an optimized initial UI; The code converting unit is configured to convert the optimized initial UI according to the AI prompt word to obtain optimized page code when the optimized initial UI passes the check.

Images