Front-end page code generation method, device, electronic device and medium

Abstract

The embodiments of the present disclosure disclose a front-end page code generation method, device, electronic device and medium. A specific implementation method of the method includes: performing multi-source data fusion on a multi-source front-end page design draft set and user historical page browsing behavior information to obtain front-end page fusion design information; performing element visual semantic extraction on a multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set; constructing a page behavior semantic knowledge graph; generating an initial front-end page code; performing code interaction adjustment on the initial front-end page code to obtain a front-end interaction code; performing multi-dimensional page evaluation on the front-end page to obtain a page multi-dimensional evaluation value set; and dynamically adjusting and optimizing the front-end interaction code. This implementation method can automatically and accurately generate front-end page code, improve the efficiency and adaptability of generated code, reduce page errors with the design draft, and improve user interaction experience.

Description

Technical Field

[0001] The embodiments of the present disclosure relate to the field of computer technology, and in particular to a method, device, electronic device, and medium for generating front-end page code. Background Art

[0002] The front-end page is the page that enables user interaction with the system. With the development of computer technology, the demand for front-end pages is increasing. The front-end page is generated by technicians writing code based on the obtained front-end page design draft. However, there are problems in the generation process such as low coding efficiency and large differences between the generated front-end page and the design draft. For the generation of front-end page code, the commonly used method is to use a template-based code generation framework to generate static front-end code for multi-source front-end page design drafts. Then, technicians manually intervene in the static front-end code and implement business logic to generate the front-end page code.

[0003] However, it has been found in practice that when the above method is used to generate front-end page code, the following technical problems often occur: Since the template-based code generation framework generates front-end page code based on the existing front-end page design template, it is unable to generate complex images, animations and page interaction effects, and only extracts elements and copies styles of the front-end page, and is unable to understand the deep semantic information of the business logic contained behind the elements. At the same time, manual implementation of business logic requires a lot of time, resulting in low efficiency in front-end page code generation, low code accuracy and quality, and a large gap between the front-end page corresponding to the design draft, thereby reducing the user's page experience.

[0004] The above information disclosed in this Background section is only for enhancement of understanding of the background of the present disclosure and therefore it may contain prior art information that is not already known to one of ordinary skill in the art. Summary of the Invention

[0005] The content of this disclosure is used to briefly introduce concepts that will be described in detail in the detailed description section below. The content of this disclosure is not intended to identify key features or essential features of the claimed technical solution, nor is it intended to limit the scope of the claimed technical solution.

[0006] Some embodiments of the present disclosure propose a front-end page code generation method, apparatus, electronic device, and medium to solve one or more of the technical problems mentioned in the above background technology section.

[0007] In a first aspect, some embodiments of the present disclosure provide a front-end page code generation method, comprising: obtaining a multi-source front-end page design draft set and user historical page browsing behavior information; performing multi-source data fusion on the multi-source front-end page design draft set and the user historical page browsing behavior information to obtain front-end page fusion design information; performing element visual semantic extraction on the multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set; constructing a semantic graph of the front-end page fusion design information and a preset page design knowledge base based on the page text element information set and the page design visual element information set. Obtain a page behavior semantic knowledge graph; generate an initial front-end page code based on the above page behavior semantic knowledge graph and a preset front-end page template knowledge base; perform code adjustment on the above initial front-end page code based on reinforcement learning and the above page behavior semantic knowledge graph to obtain an adjusted front-end code; perform code interaction adjustment on the above adjusted front-end code based on the current user interaction behavior information obtained in real time to obtain a front-end interaction code; perform a multi-dimensional page evaluation on the front-end page corresponding to the above front-end interaction code to obtain a page multi-dimensional evaluation value; perform code dynamic adjustment and optimization on the above front-end interaction code based on the above page multi-dimensional evaluation value.

[0008] In the second aspect, some embodiments of the present disclosure provide a front-end page code generation device, including: an acquisition unit, which acquires a multi-source front-end page design draft set and user historical page browsing behavior information; a multi-source data fusion unit, which performs multi-source data fusion on the above-mentioned multi-source front-end page design draft set and the above-mentioned user historical page browsing behavior information to obtain front-end page fusion design information; an element visual semantic extraction unit, which performs element visual semantic extraction on the above-mentioned multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set; a semantic graph construction unit, which constructs a semantic graph for the above-mentioned front-end page fusion design information and a preset page design knowledge base based on the above-mentioned page text element information set and the above-mentioned page design visual element information set to obtain a page Behavioral semantic knowledge graph; a generation unit, which generates the initial front-end page code according to the above-mentioned page behavioral semantic knowledge graph and the preset front-end page template knowledge base; a code adjustment unit, which adjusts the above-mentioned initial front-end page code according to reinforcement learning and the above-mentioned page behavioral semantic knowledge graph to obtain the adjusted front-end code; a code interaction adjustment unit, which performs code interaction adjustment on the above-mentioned adjusted front-end code according to the current user interaction behavior information obtained in real time to obtain the front-end interaction code; a multi-dimensional page evaluation unit, which performs multi-dimensional page evaluation on the front-end page corresponding to the above-mentioned front-end interaction code to obtain the page multi-dimensional evaluation value; a code dynamic adjustment and optimization unit, which performs code dynamic adjustment and optimization on the above-mentioned front-end interaction code according to the above-mentioned page multi-dimensional evaluation value.

[0009] In a third aspect, some embodiments of the present disclosure provide an electronic device comprising: one or more processors; a storage device on which one or more programs are stored, and when the one or more programs are executed by one or more processors, the one or more processors implement the method described in any implementation manner in the first aspect.

[0010] In a fourth aspect, some embodiments of the present disclosure provide a computer-readable medium having a computer program stored thereon, wherein when the computer program is executed by a processor, the method described in any implementation manner in the first aspect is implemented.

[0011] The above-mentioned embodiments of the present disclosure have the following beneficial effects: the front-end page code generation method of some embodiments of the present disclosure can automatically and accurately generate front-end page code, improve the efficiency and adaptability of the generated code, reduce page errors with the design draft, and improve the user interaction experience. Specifically, the reason for the low efficiency of the relevant front-end page code generation, low code accuracy and quality, and a large gap between the front-end page and the design draft, thereby reducing the user's page experience is that: since the template-based code generation framework generates front-end page code based on the existing front-end page design template, it is difficult to generate complex images, animations, and page interaction effects, and it only extracts elements and copies styles of the front-end page, and cannot understand the deep semantic information of the business logic behind the elements. At the same time, manual implementation of business logic requires a lot of time, resulting in low efficiency of front-end page code generation, low code accuracy and quality, and a large gap between the front-end page and the design draft, thereby reducing the user's page experience. Based on this, the front-end page code generation method of some embodiments of the present disclosure can first obtain a multi-source front-end page design draft set and user historical page browsing behavior information. Here, the multi-source front-end page design draft set and user historical page browsing behavior information can be used for subsequent multi-source data fusion. Secondly, multi-source data fusion is performed on the multi-source front-end page design drafts and the user's historical page browsing behavior information to obtain front-end page fusion design information. The mutual complementation of the multi-source front-end page design drafts and the user's historical page browsing behavior information improves the comprehensiveness and data quality of the front-end page fusion design information. Thirdly, element visual semantics are extracted from the multi-source front-end page design drafts to obtain a page text element information set and a page design visual element information set. This improves the accuracy of element visual and semantic feature extraction, allowing for a more precise and comprehensive understanding of the logical relationship between the design intent and visual design of the front-end page design drafts. Subsequently, based on the page text element information set and the page design visual element information set, a semantic graph is constructed for the front-end page fusion design information and a pre-set page design knowledge base to obtain a page behavior semantic knowledge graph. The pre-set page design knowledge base contains a wealth of front-end development knowledge, front-end page development knowledge, and business implementation logic information. By linking this with the existing page design knowledge base, the adaptability of the front-end page to business needs and the interactivity of the front-end page can be improved. Afterwards, the initial front-end page code is generated based on the aforementioned page behavior semantics knowledge graph and the preset front-end page template knowledge base. The preset front-end page template knowledge base includes a large number of front-end code templates and code generation rule information, which can reduce front-end page code redundancy, improve code reusability and scalability, and increase the efficiency of front-end page code generation. Next, based on reinforcement learning and the aforementioned page behavior semantics knowledge graph, the initial front-end page code is adjusted to obtain the adjusted front-end code.Here, the page behavior semantic knowledge graph serves as a priori knowledge base for reinforcement learning. Through dynamic interaction with the page behavior semantic knowledge graph environment, reinforcement learning can autonomously optimize the code generation path to adapt to different business needs and front-end frameworks. Combined with reinforcement learning's powerful semantic understanding and reward mechanism, it can cover the entire business process corresponding to the front-end page and improve the page's complex interactive functionality. Then, based on real-time information about current user interaction behavior, the adjusted front-end code is interactively adjusted to generate the front-end interactive code. This improves the responsiveness of the front-end page code. Combining multiple front-end page code generation methods can more comprehensively improve the quality, performance, and accuracy of the front-end page code, thereby enhancing the user interaction experience. Next, a multi-dimensional page evaluation is performed on the front-end page corresponding to the front-end interactive code to obtain a multi-dimensional evaluation value. This multi-dimensional page evaluation effectively and comprehensively assesses the quality of the front-end page and page code, facilitating subsequent real-time dynamic optimization. Finally, based on the multi-dimensional evaluation values, the front-end interactive code is dynamically adjusted and optimized. By using feedback from the evaluation values ​​for iterative adjustments, targeted code adjustments can be made, improving the efficiency and specificity of dynamic adjustment and optimization. It can be concluded that the front-end page code generation method provides a more comprehensive and accurate data basis for code generation by integrating multi-source front-end page design drafts and user browsing behaviors, thereby improving the quality and adaptability of code generation; page design element extraction and knowledge graph generation can better grasp the design intent and business logic, and generate front-end code that better meets the needs; the combination of multiple code generation methods can give full play to the advantages of various methods and improve the efficiency and flexibility of code generation; multi-dimensional code evaluation and continuous optimization based on the evaluation values ​​can improve the quality of the front-end page and user experience, as well as improve the restoration of the design draft. BRIEF DESCRIPTION OF THE DRAWINGS

[0012] The above and other features, advantages, and aspects of the various embodiments of the present disclosure will become more apparent with reference to the following detailed description in conjunction with the accompanying drawings. Throughout the drawings, the same or similar reference numerals represent the same or similar elements. It should be understood that the drawings are schematic and that components and elements are not necessarily drawn to scale.

[0013] Figure 1 is a flowchart of some embodiments of the front-end page code generation method according to the present disclosure;

[0014] Figure 2 This is a schematic diagram of a page for dynamically adjusting and optimizing a front-end page through code in some embodiments of the front-end page code generation method disclosed herein;

[0015] Figure 31 is a comparative schematic diagram of front-end pages generated in some embodiments of the front-end page code generation method disclosed herein;

[0016] Figure 4 1 is a schematic diagram showing a comparison of the front-end page and page code generated in some embodiments of the front-end page code generation method disclosed herein in terms of multiple evaluation dimensions;

[0017] Figure 5 Schematic diagram of the structure of some embodiments of the front-end page code generation device according to the present disclosure;

[0018] Figure 6 It is a structural diagram of an electronic device suitable for implementing some embodiments of the present disclosure. DETAILED DESCRIPTION

[0019] Embodiments of the present disclosure will be described in more detail below with reference to the accompanying drawings. Although certain embodiments of the present disclosure are shown in the accompanying drawings, it should be understood that the present disclosure can be implemented in various forms and should not be construed as being limited to the embodiments described herein. On the contrary, these embodiments are provided to provide a more thorough and complete understanding of the present disclosure. It should be understood that the drawings and embodiments of the present disclosure are for illustrative purposes only and are not intended to limit the scope of protection of the present disclosure.

[0020] It should also be noted that, for ease of description, only the parts related to the invention are shown in the drawings. In the absence of conflict, the embodiments and features in the embodiments of the present disclosure may be combined with each other.

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

[0022] It should be noted that the modifications of "one" and "multiple" mentioned in the present disclosure are illustrative rather than restrictive, and those skilled in the art should understand that unless otherwise clearly indicated in the context, they should be understood as "one or more".

[0023] The names of the messages or information exchanged between multiple devices in the embodiments of the present disclosure are only used for illustrative purposes and are not used to limit the scope of these messages or information.

[0024] The present disclosure will be described in detail below with reference to the accompanying drawings and in conjunction with embodiments.

[0025] Figure 1 The process 100 of some embodiments of the front-end page code generation method according to the present disclosure is shown. The front-end page code generation method includes the following steps:

[0026] Step 101: Obtain a multi-source front-end page design draft set and user historical page browsing behavior information.

[0027] In some embodiments, the execution entity (e.g., an electronic device) of the front-end page code generation method can obtain a multi-source front-end page design draft set and historical user page browsing behavior information via a wired or wireless connection. The front-end page design drafts in the multi-source front-end page design draft set can be artwork from different data sources that graphically demonstrates the relationships between the various elements included in the front-end page. The multi-source front-end page design draft set can include, but is not limited to, at least one of the following: crawler documentation for design resource websites (e.g., Dribbble, Behance), project case documents from front-end open source communities (e.g., Open Source China, SegmentFault), and front-end page design artwork for different design software. The historical user page browsing behavior information can be collected from users browsing the front-end page before the current time. This historical user page browsing behavior information can include, but is not limited to, at least one of the following: scrolling distance within the page, hover time on page elements, and sequence of page element operations. In practice, the execution entity can utilize distributed crawler technology to collect front-end page design drafts from different sources at varying frequencies to obtain the multi-source front-end page design drafts. For example, a design material website might schedule data collection at 2:00 AM every Tuesday and Friday. Front-end open source communities use a combination of real-time data collection and full data collection at 1:00 AM daily. User behavior recording tools or browser plug-ins can be used to collect data on users' historical page browsing behavior. For example, the user behavior recording tool could be the Hotjar website behavior analysis tool, and the browser plug-in could be Mouseflow.

[0028] Step 102 : performing multi-source data fusion on the multi-source front-end page design draft set and the user's historical page browsing behavior information to obtain front-end page fusion design information.

[0029] In some embodiments, the execution entity may perform multi-source data fusion on the multi-source front-end page design draft set and the user's historical page browsing behavior information to obtain front-end page fusion design information. The front-end page fusion design information may be information on the style, layout, interaction logic, semantic information, and various elements of user behavior focus that are integrated into the design elements of the front-end page design draft. The style may be the red, green, and blue colors, font name, and size of the design elements. The layout may be the coordinate position, width, and height of the design elements. The interaction logic may be a button click event or page jump logic.

[0030] In some optional implementations of some embodiments, the multi-source data fusion of the multi-source front-end page design draft set and the user's historical page browsing behavior information to obtain the front-end page fusion design information may include the following steps:

[0031] The first step is to perform format conversion on the multi-source front-end page design draft set to obtain a converted multi-source front-end page design draft set. The front-end page design drafts in the converted multi-source front-end page design draft set may be in XML (Extensible Markup Language)-like format. "Like" refers to a parameter in an XML document that achieves fuzzy matching by combining it with placeholders or functions. In practice, the execution entity may first parse the multi-source front-end page design draft set to obtain a parsed file set. Secondly, design elements are extracted from the parsed file set to obtain a design element set. Then, a rule engine is constructed based on a preset format conversion rule information set and a format conversion template to obtain a format conversion rule engine. The preset format conversion rule information set and format conversion template may be pre-set rule information. For example, the preset format conversion rule information set and format conversion template may include syntax conversion, structure mapping conversion, general tag attribute template, responsive design template, and element mapping template. Finally, the design element set is input into the format conversion rule engine to obtain a converted multi-source front-end page design draft. The syntax conversion may include at least one of the following: conversion of design software proprietary syntax into universal page description, unit standardization, and attribute mapping. The structure mapping conversion may include at least one of the following: hierarchical relationship conversion and template matching conversion.

[0032] The second step is to perform data preprocessing on the above user historical page browsing behavior information to obtain preprocessed user historical page browsing behavior information.

[0033] The third step is to construct a graph structure for the converted multi-source front-end page design draft set and the pre-processed user historical page browsing behavior information to obtain a multi-source front-end page design structure graph set and a user browsing behavior structure graph. The multi-source front-end page design structure graph in the multi-source front-end page design structure graph set can be a graph including design element nodes, code nodes, associated edges between design element nodes and code nodes, associated edges between page interaction event nodes and code nodes, and parent-child associated edges of the code DOM (Document Object Model) tree. The user browsing behavior structure graph can be a directed acyclic graph with browsing behavior events of user browsing behavior information as nodes and dependencies between browsing behavior events as edges.

[0034] The fourth step is to perform data fusion on the above-mentioned multi-source front-end page design structure atlas and the above-mentioned user browsing behavior structure graph to obtain a multi-source fusion node feature vector set. Among them, the multi-source fusion node feature vector in the above-mentioned multi-source fusion node feature vector set can represent the fusion of user browsing behavior information, page element semantic information, page visual information and the association relationship between each node. For example, the above-mentioned association relationship can be the association relationship between the high click frequency of any button in the user behavior data and the style and interaction logic of the button. In practice, the above-mentioned execution entity can input the above-mentioned multi-source front-end page design structure atlas and the above-mentioned user browsing behavior structure graph into the HAN (Heterogeneous Graph Attention Network) model to perform data fusion at the feature level to obtain a multi-source fusion node feature vector set.

[0035] In the fifth step, the multi-source fusion node feature vector set is input into the page design anomaly recognition model to obtain a page design anomaly information set. The page design anomaly information in the page design anomaly information set may include syntax errors in the code, abnormal dimensions of page elements, or information about conflicts in the interaction logic between elements. The page design anomaly recognition model may be a neural network model that reconstructs the input multi-source fusion node feature vector set to identify anomaly information. For example, the page design anomaly recognition model may be a variational autoencoder model.

[0036] Step 6: Perform multi-dimensional anomaly data repair on the page design anomaly information set to obtain repaired page design information, which serves as the front-end page fusion design information. The repaired page design information may be information obtained by correcting or deleting the anomaly information in the page design anomaly information set. In practice, the execution entity may first classify the page design anomaly information set by anomaly type to obtain a page anomaly information group set. Secondly, upon determining that the page anomaly information is a code semantic anomaly, perform an anomaly data repair process using a grammar rule base and similar case learning to obtain repaired page design information. The grammar rule base may be a database storing correct syntax for various page code types. Then, upon determining that the page anomaly information is a page element size anomaly, perform an anomaly data repair process using a preset page design specification knowledge base to obtain repaired page design information. The preset page design specification knowledge base may be a knowledge base formed from pre-set prior knowledge related to page design. Finally, upon determining that the page anomaly information is an interaction logic anomaly, perform an anomaly data repair process using a preset business process knowledge base and historical user page browsing behavior information to obtain repaired page design information. The preset business process knowledge base may be a knowledge base of preset business execution logic information.

[0037] Step 103 , performing element visual semantic extraction on the multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set.

[0038] In some embodiments, the execution entity may perform element visual semantic extraction on the multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set. The page text element information in the page text element information set may include information about the text content, font format, semantic information, and the logical structure of the text on the page. The page design visual element information in the page design visual element information set may include information such as color, shape, texture, element style characteristics (e.g., minimalist, retro, technological), and emotional characteristics (e.g., friendly, professional, lively) extracted from the front-end page design draft. It should be noted that since element style and emotional characteristics are subjective, a standardized annotation system can be established to reduce sources of subjective bias. Model optimization can also be performed to enhance robustness to fuzzy features. Domain knowledge constraints can also be introduced to narrow the subjective judgment space and establish interactive iterative optimization through a closed-loop human-machine collaboration. Establishing the standardized annotation system may involve multi-expert collaborative annotation and noise filtering. Model optimization may include uncertainty-aware feature learning adversarial training to enhance generalization and multi-model integration and evidence fusion. The aforementioned introduction of domain knowledge constraints can be achieved through embedding existing design specification knowledge graphs and dynamic context-aware classification. Establishing interactive iterative optimization in a closed loop of human-machine collaboration can be achieved through reinforcement learning and continuous optimization.

[0039] In some optional implementations of some embodiments, the above-mentioned text visual feature extraction of the multi-source front-end page design draft set to obtain the page text element information set and the page design visual element information set may include the following steps:

[0040] The first step is to perform text region detection on each multi-source front-end page design draft in the multi-source front-end page design draft set to generate a page text region group, thereby obtaining a page text region group set. The page text regions in the page text region group can be page regions containing text in the front-end page design draft. The text region detection can be performed using CRAFT (Character Region Awareness for Text Detection).

[0041] In the second step, the page text area group set is input into the page text recognition model to obtain a page text recognition information group set. The page text recognition information in the page text recognition information group set may be text characters in the page text area. The page text recognition model may be a deep neural network model that performs text recognition on the input page text area group set. The page text recognition model may include: an improved ResNet-34 model, a bidirectional long short-term memory neural network model, and a CTC (Connectionist Temporal Classification) model. The improved ResNet-34 model may be a model that removes the downsampling operation of stage 4 in the ResNet-34 backbone network and inserts a channel space attention module after stage 3.

[0042] The third step is to extract font style features from the above-mentioned page text area group set to obtain a text font style feature vector group set. The text font style feature vector in the above-mentioned text font style feature vector group set can represent the characteristic information of the font name and font size of the text font. In practice, the above-mentioned execution entity can first input the above-mentioned page text area group set into the DeepFont (font detection model using deep learning) model to obtain a text font classification information group set. Then, the above-mentioned text font classification information group set is input into the FontMagic font parsing library to obtain a text font style feature vector group set.

[0043] The fourth step is to perform semantic and grammatical extraction on the above-mentioned page text recognition information set to obtain a page text semantic feature vector set. The page text semantic feature vectors in the above-mentioned page text semantic feature vector set can represent the semantic information, grammatical information and contextual information of the page text. In practice, the above-mentioned execution subject can first perform text preprocessing on the above-mentioned page text recognition information set to obtain a preprocessed page text recognition information set. The above-mentioned text preprocessing can include but is not limited to at least one of the following: text character repair, word segmentation, stop word removal, and part-of-speech tagging. Secondly, the above-mentioned preprocessed page text recognition information set is subjected to dependency syntactic analysis to obtain a page text dependency tree set. The page text dependency tree in the above-mentioned page text dependency tree set can be a tree structure that displays the grammatical structure of each word segmentation in the preprocessed page text recognition information in the form of a tree. Then, based on the above-mentioned page text dependency tree set, a page text rhetoric structure tree set is generated. The page text rhetoric structure tree in the above-mentioned page text rhetoric structure tree group set can be a structure tree that annotates the semantic roles of each word in the above-mentioned page text dependency tree in the form of a tree structure, clarifying the action performer and object. The above-mentioned page text rhetoric structure tree can be a tree structure that corrects the dependency relationship of ambiguous sentences in the above-mentioned page text dependency tree and infers the logical relationship between different sentences through the provided semantic roles. As an example, the above-mentioned execution subject can first perform predicate recognition on the above-mentioned page text dependency tree group set to obtain a page text predicate group set. Secondly, determine multiple predicate dependency paths for each page text predicate in the above-mentioned page text predicate group set to obtain a predicate dependency path group set. Then, perform feature extraction on the predicate dependency path group set to obtain a predicate dependency path feature vector group set. The predicate dependency path feature vector in the predicate dependency path feature vector group set can represent the path dependency relationship, path length, part of speech, word form and semantics of the path core node. Finally, the predicate dependency path feature vector set is input into a support vector machine to determine the argument role of each node in the predicate dependency path set, thereby obtaining an argument role set. Finally, the argument role set is added to the page text dependency tree set to obtain a page text rhetorical structure tree set. Finally, semantic and grammatical extraction is performed on the page text rhetorical structure tree set to obtain a page text semantic feature vector set. The page text semantic feature vectors in the page text semantic feature vector set can represent the semantic information, grammatical information, and contextual association information of the page text. This semantic and grammatical extraction can be performed using a Tree-LSTM (Tree Structured Long Short Term Memory) model.

[0044] In the fifth step, the page text region set, the text font style feature vector set, and the page text semantic feature vector set are input into a text logical topology model to obtain a text logical layout feature vector set. The text logical layout feature vectors in the text logical layout feature vector set can represent the hierarchical logical relationships and layout types between the page text regions included in the page text region set. The text logical topology model can be a neural network model that determines the layout relationships between the input page text region sets using the input text font style feature vector set and the page text semantic feature vector set. The text logical topology model can be a GraphSAGE (Graph Sample and Aggregate) model that includes a graph attention network. In practice, the execution entity can first perform feature concatenation on the text font style feature vector set and the page text semantic feature vector set to obtain a concatenated feature vector set, and then use the text elements corresponding to the page text region sets as graph nodes, with the spatial positional relationships and semantic relationships between the text elements as edges between the graph nodes, to obtain a page text graph structure. The page text graph structure is then input into the GraphSAGE model to obtain a page node feature vector set. The GraphSAGE model can include three aggregation layers and a nonlinear transformation layer, a mean aggregation function, and a ReLU (Rectified Linear Unit) activation function. Finally, the page node feature vector set is input into a graph attention network to obtain a text logical layout feature vector set.

[0045] In the sixth step, the text font style feature vector set, the page text semantic feature vector set, and the text logical layout feature vector set are determined as a page text element information set, and the multi-source front-end page design draft set is input into a page design visual feature extraction model to obtain a page design visual element information set. The page design visual feature extraction model can be a neural network model that extracts features from the visual information of elements in the input multi-source front-end page design draft set. The page design visual feature extraction model can be a Swin Transformer (Shifted Window Transformer) model.

[0046] In the process of adopting technical solutions to solve the above-mentioned technical problem 1, the following technical problem 2 often arises: in the process of extracting visual features from a multi-source front-end page design draft set, the extracted visual information is too superficial, and only information such as color, geometric shape, and texture can be extracted. This leads to an incomplete understanding of the deep semantics of the multi-source front-end page design draft set, resulting in low accuracy of the generated front-end page code, large page gaps, and a reduced user experience. For the above-mentioned technical problem 2, the conventional solution is generally to use a convolutional neural network model to visually extract single features and shallow visual features from the multi-source front-end page design draft set to obtain a page design visual element information set. However, the above-mentioned conventional solution still has the following problem: because only a single feature is extracted, the extraction of multi-scale visual feature information and deep visual information is ignored, resulting in incomplete visual information extraction from the multi-source front-end page design draft set, resulting in low accuracy of the generated front-end page code, low generation efficiency, and long code generation time, which reduces the user experience. Considering the shortcomings of the above-mentioned conventional solutions, and combining the advantages / technical status of the deep neural network models and visual feature extraction technologies possessed by our research institute partners in this field, we decided to adopt the following solution:

[0047] Optionally, the step of inputting the multi-source front-end page design draft set into a page design visual feature extraction model to obtain a page design visual element information set may include the following steps:

[0048] The first step is to segment each multi-source front-end page design draft in the multi-source front-end page design draft set into image blocks to generate a page design image block sequence, thereby obtaining a page design image block sequence set. The page design image blocks in the page design image block sequence can be 4*4 pixel blocks.

[0049] In the second step, the page design image block sequence is input into the first window offset self-attention stage network included in the page design visual feature extraction model to obtain a first page visual feature atlas. The page design visual feature extraction model further includes a second window offset self-attention stage network, a third window offset self-attention stage network, and a fourth window offset self-attention stage network. The page design visual feature extraction model may be a deep neural network model that extracts visual features from the input page design image block sequence. The first window offset self-attention stage network may be a deep neural network model that linearly embeds the page design image block sequence and then inputs it into a model network with a windowed self-attention mechanism (W-MSA) and a model network with an offset windowed self-attention mechanism (SW-MSA). The model network with the windowed self-attention mechanism may include a linear layer, a windowed self-attention mechanism layer, a residual splicing layer, a linear layer, a multi-layer perceptron layer, and a residual splicing layer. The model network with the offset windowed self-attention mechanism may be a model network with the windowed self-attention mechanism replaced by an offset windowed self-attention mechanism. The second window offset self-attention stage network may be a model network that replaces only the linear layer in the first window offset self-attention stage network with a block feature map splicing layer to splice the block feature map sets output by the first window offset self-attention stage network. The third window offset self-attention stage network may be a model network that replaces only the two network models with self-attention mechanisms in the second window offset self-attention stage network with six network models. The fourth window offset self-attention stage network may be a model network that is identical to the second window offset self-attention stage network model but has different inputs and outputs. The first page visual feature map in the first page visual feature map set may represent low-level information such as lines, HSV (Hue Saturation Value) color space, and low-frequency components of textures from a multi-source front-end page design draft set.

[0050] In the third step, the first page visual feature atlas is input into the second window offset self-attention stage network to obtain a second page visual feature atlas. The second page visual feature map in the second page visual feature atlas can represent the feature information of the shape, geometric moments, and mid-order texture of the design.

[0051] In the fourth step, the second page visual feature atlas is input into the third window offset self-attention stage network to obtain a third page visual feature atlas. The third page visual feature map in the third page visual feature atlas can represent mid-level semantic features of the layout and color distribution of the design draft.

[0052] In the fifth step, the third page visual feature atlas is input into the fourth window offset self-attention stage network to obtain a fourth page visual feature atlas. The fourth page visual feature map in the fourth page visual feature atlas can represent high-level information of complex layout information including global layout features, contextual features, and nested elements.

[0053] In the sixth step, multi-feature fusion is performed on the first, second, third, and fourth page visual feature atlases to obtain a fused page visual feature atlas. The multi-feature fusion may be performed using a Bidirectional Feature Pyramid Network (BiFPN).

[0054] In the seventh step, convolutional feature extraction is performed on the first page visual feature atlas to obtain a page color space feature atlas. The page color space feature maps in the page color space feature atlas can represent the distribution probability of the color space. The convolutional feature extraction can be performed using a convolution layer with a 3*3 convolution kernel.

[0055] In the eighth step, the gray level co-occurrence matrix of the first page visual feature map is determined as a page texture feature map set. The page texture feature map in the page texture feature map set can represent a two-dimensional matrix formed by multiple statistics of texture contrast, energy, and entropy.

[0056] In the ninth step, the spatial image visual moments of the third page visual feature atlas are determined as the page geometric contour feature atlas. The page geometric contour feature maps in the page geometric contour feature atlas can represent feature information that is invariant to translation, rotation, and scale, thereby quantifying the shape, size, and position of the design. The spatial image visual moments can be Hu invariant moments.

[0057] In the tenth step, global average pooling is performed on the fourth page visual feature atlas to obtain a page global visual style feature atlas. The page global visual style feature map in the above page global visual style feature atlas can represent information about the overall color scheme and layout style of the page. The above global average pooling can be performed using a global average pooling layer.

[0058] In the eleventh step, maximum pooling is performed on the first page visual feature atlas to obtain a page local visual style feature atlas. The page local visual style feature maps in the page local visual style feature atlas may represent element-level font style and geometric shape information. The maximum pooling may be performed using a maximum pooling layer.

[0059] In the twelfth step, the global visual style feature atlas and the local visual style feature atlas are fused to obtain a page visual style feature atlas. The page visual style feature maps in the page visual style feature atlas can represent the style feature information of the page elements of the design draft. The style feature information can include, but is not limited to, at least one of the following: a minimalist style with clean lines and a single color tone, a retro style with specific color combinations and font styles, or a technological style with metallic textures and blue tones.

[0060] In step 13, the page geometric contour feature atlas, the page texture feature atlas, the page color space feature atlas, and the fused page visual feature atlas are input into a cross-attention mechanism layer to obtain a page visual emotion feature atlas. The page visual emotion feature maps in the page visual emotion feature atlas can represent the emotional information conveyed by the design to the user. This emotional information can include, but is not limited to, at least one of the following: friendliness, liveliness, and professionalism.

[0061] In the fourteenth step, the above-mentioned page visual style feature atlas, the above-mentioned page visual emotion feature atlas, the above-mentioned page color space feature atlas, the above-mentioned page texture feature atlas and the above-mentioned page geometric contour feature atlas are determined as the page design visual element information set.

[0062] The above technical solution, combined with step "Step 107" and its related content as an inventive point of an embodiment of the present disclosure, solves the second technical problem mentioned in the background technology: "Due to the extraction of only a single feature, the extraction of multi-scale visual feature information and deep visual information is ignored, resulting in incomplete visual information extraction of the multi-source front-end page design draft set, resulting in low accuracy of the generated front-end page code, low generation efficiency, long code generation time, and a reduced user experience." To achieve this effect, the present disclosure first divides the multi-source front-end page design draft set into image blocks and inputs them into the page design visual feature extraction model for multi-scale feature extraction and attention mechanism, which can improve the multi-scale information and cross-level interaction of the extracted visual features. Secondly, traditional visual feature extraction is performed on the design draft. Then, high-level visual features of style and emotion are extracted from the design draft to improve the comprehensiveness of the extracted visual information. By assigning different weights to different visual features through the weight values ​​of the cross-attention mechanism, it can reduce the amount of computation and system load, and improve the comprehensive and deep extraction of visual element information of the design draft. Finally, by extracting comprehensive and deep visual features and generating front-end page code, the accuracy and efficiency of the generated front-end page code can be improved, the code generation time can be reduced, and the user experience can be improved.

[0063] Step 104: Based on the above-mentioned page text element information set and the above-mentioned page design visual element information set, a semantic graph is constructed for the above-mentioned front-end page fusion design information and the preset page design knowledge base to obtain a page behavior semantic knowledge graph.

[0064] In some embodiments, the execution entity may construct a semantic graph for the front-end page fusion design information and the preset page design knowledge base based on the page text element information set and the page design visual element information set to obtain a page behavior semantic knowledge graph. The page behavior semantic knowledge graph may be a directed weighted graph formed by integrating the existing front-end page design rule information in the preset page design knowledge base into the knowledge graph corresponding to the front-end page fusion design information. The weights in the directed weighted graph may be weight values ​​determined by the user's historical page browsing behavior information. The preset page design knowledge base may be a database formed by pre-collecting existing front-end development knowledge related to page design, front-end page design specifications, and business implementation logic information behind the elements in the front-end page.

[0065] As an example, the above-mentioned execution entity may first input the above-mentioned page text element information set and the above-mentioned page design visual element information set into the ArangoDB graph database to obtain the front-end page knowledge graph. Secondly, determine the number of views of each element in the user's historical page browsing behavior information in the above-mentioned front-end page fusion design information, and determine the ratio to the total number of views as the weight value of each node in the front-end page knowledge graph to obtain the front-end page browsing knowledge graph. Then, filter out the page design information set related to the above-mentioned page text element information set and the above-mentioned page design visual element information set from the above-mentioned preset page design knowledge base. Finally, input the above-mentioned page design information set into the above-mentioned front-end page browsing knowledge graph to obtain the page behavior semantic knowledge graph.

[0066] In some optional implementations of some embodiments, the above-mentioned semantic graph construction of the front-end page fusion design information and the preset page design knowledge base based on the above-mentioned page text element information set and the above-mentioned page design visual element information set to obtain the page behavior semantic knowledge graph may include the following steps:

[0067] The first step is to determine the page design knowledge graph pattern layer of the above-mentioned page behavior semantic knowledge graph, wherein the above-mentioned page design knowledge graph pattern layer includes: a node type set and a node relationship type set. The above-mentioned page design knowledge graph pattern layer can be the initial determination of the entity ontology, class hierarchy, relationship type and data pattern in the above-mentioned page behavior semantic knowledge graph, so as to ensure the consistency and integrity of the data through subsequent input of page text element information, page design visual element information set and preset page design knowledge base. The above-mentioned class hierarchy can be an inheritance relationship between entity ontologies in a node type, that is, a hierarchical structure in which a subclass inherits the attributes of a parent class. The above-mentioned data pattern can be a pattern that defines the structure and rules of data storage.

[0068] In the second step, triples are extracted from the preset page design knowledge base to obtain a page design triple set. The page design triples in the page design triple set can be in the form of triples of a head entity, an entity relationship, and a tail entity, to represent the association relationship between the front-end page element entities.

[0069] The third step is to extract semantic information from the front-end page fusion design information based on the page text element information set and the page design visual element information to obtain a page text visual semantic information set. The page text visual semantic information in the page text visual semantic information set may include semantic information, hierarchical relationships, and positional relationships of page elements.

[0070] As an example, the execution subject may perform text matching with the front-end page fusion design information through the page text element information set and the page design visual element information, and then extract the information to obtain a page text visual semantic information set.

[0071] The fourth step is to extract dynamic and static element associations from the real-time user browsing behavior information to obtain a set of dynamic and static design element association information. The dynamic and static design element association information in the set can include dynamic information such as the business logic and data flow relationships behind page elements determined through user browsing behavior information, as well as static information such as the click hierarchy, positional relationships, and number of clicks of page elements in user behavior. This user browsing behavior information can be information collected every 15 minutes about the user's front-end page operations.

[0072] The fifth step is to perform heterogeneity detection on the above-mentioned page design triple set, the above-mentioned page text visual semantic information set and the above-mentioned design element dynamic and static association information set to obtain a data heterogeneity value. The above-mentioned data heterogeneity value can characterize the degree of difference between the above-mentioned page design triple set, the above-mentioned page text visual semantic information set and the above-mentioned design element dynamic and static association information set. In practice, the above-mentioned execution subject can first perform feature vector representation on the above-mentioned page design triple set, the above-mentioned page text visual semantic information set and the above-mentioned design element dynamic and static association information set to obtain a page design feature vector group set, a text visual feature vector set and a dynamic and static association feature vector set. Then, through the data heterogeneity detection function, the above-mentioned page design feature vector group set, the above-mentioned text visual feature vector set and the above-mentioned dynamic and static association feature vector set are standardized and then subjected to heterogeneity detection to obtain a data heterogeneity value. The above-mentioned data heterogeneity detection function can be . represents the data heterogeneity detection function, It represents the total sum of squares of the standardized page design feature vector set, the text visual feature vector set, and the dynamic-static association feature vector set. Indicates the degrees of freedom associated with the number of data categories, which is 2 in the current scenario.

[0073] In a sixth step, in response to determining that the data heterogeneity value satisfies a preset heterogeneity condition, the page design triple set, the page text visual semantic information set, and the design element dynamic and static association information set are input into the page design knowledge graph schema layer based on the page text element information set and the page design visual element information, thereby obtaining a page behavior semantic knowledge graph. The preset heterogeneity condition may be a pre-set condition for determining the execution relationship between the data heterogeneity value and subsequent steps. The preset heterogeneity condition may be a condition for determining whether the data heterogeneity value is between 40% and 60%. It should be noted that when the data heterogeneity value is greater than 60%, the data heterogeneity is relatively strong, and the page design triple set, the page text visual semantic information set, and the design element dynamic and static association information set are re-preprocessed and grouped. In practice, the execution entity may first, in response to determining that the data heterogeneity value satisfies the preset heterogeneity condition, input the page design triple set into the page design knowledge graph schema layer to obtain an initial page design knowledge graph. Secondly, text matching is performed through the above-mentioned page text element information set, the above-mentioned page design visual element information and the above-mentioned initial page design knowledge graph to determine the input storage location information set. Then, based on the above-mentioned storage location information set, the above-mentioned page text visual semantic information set is input into the above-mentioned initial page design knowledge graph to obtain the page design semantic knowledge graph. Among them, the above-mentioned page design semantic graph can be a graph that integrates the prior knowledge of existing page design and the knowledge of front-end page design of a multi-source front-end page design draft set. Finally, the above-mentioned design element dynamic and static association information set is input into the above-mentioned page design semantic knowledge graph to perform real-time dynamic association updates on the page design semantic knowledge graph to obtain a page behavior semantic knowledge graph.

[0074] Step 105: Generate the initial front-end page code based on the above page behavior semantic knowledge graph and the preset front-end page template knowledge base.

[0075] In some embodiments, the execution entity may generate the initial front-end page code based on the page behavior semantic knowledge graph and the preset front-end page template knowledge base. The preset front-end page template knowledge base may be a knowledge base of the collected front-end page elements and the corresponding element codes. The preset front-end page template knowledge base may include: a front-end code template library and a code generation rule set. The front-end code template library may include: a variety of common page layout templates and a variety of components. The page layout templates may include but are not limited to at least one of the following: responsive layout, waterfall layout, grid layout, and card layout. The components may include but are not limited to at least one of the following: navigation bar, form component, carousel component, and pop-up component. The initialized front-end page code may be the page code obtained by reusing and expanding the code of the front-end page elements through the preset front-end page template knowledge base.

[0076] As an example, the execution entity may first utilize a CART (Classification and Regression Tree) decision tree selection algorithm to select a set of front-end page element templates corresponding to the page behavior semantic knowledge graph from the preset front-end page template knowledge base. The execution entity may then adjust the code of the front-end page element template set to better align with the front-end page corresponding to the multi-source front-end page design draft set, thereby obtaining the initial front-end page code.

[0077] In the process of adopting technical solutions to solve the above-mentioned technical problem one, the following technical problem three is often accompanied: how to quickly and accurately select component templates that conform to the multi-source front-end page design draft from the page component templates of a large number of existing front-end pages, and accurately extract the complex nesting constraints between component templates. For the above-mentioned technical problem three, the conventional solution is generally: through a low-code platform, based on the page behavior semantic knowledge graph and the preset front-end page template knowledge base, generate the initial front-end page code. However, the above-mentioned conventional solution still has the following problems: Since the low-code platform usually matches page components through string replacement or fixed matching rules, it is unable to understand the semantic information in the multi-source front-end page design draft and the page behavior semantic knowledge graph, as well as the complex combination and nested relationship of multiple front-end page component codes in a component in the multi-source front-end page design draft. The low-code platform is unable to model and process the nested constraint relationship between the page structure and components, resulting in the generated initial front-end page code not matching the multi-source front-end page design draft, low code quality, and the generated front-end page does not meet user needs, which reduces the user's page experience. Considering the shortcomings of the above conventional solutions and the technical advantages and current status of our partners in the research institutes in this field in generating front-end page code based on page component code templates and preset code generation rules, we decided to adopt the following solution:

[0078] In some optional implementations of some embodiments, generating the initial front-end page code based on the page behavior semantic knowledge graph and the preset front-end page template knowledge base may include the following steps:

[0079] The first step is to determine the template attribute selection metric of each front-end code template in the front-end code template set in the above-mentioned preset front-end page template knowledge base and the template mutual information set between the front-end code templates to obtain the template attribute selection metric set. Among them, the template selection metric in the template attribute selection metric set represents the information gain of the above-mentioned front-end code template, that is, it evaluates the effectiveness of the front-end code template set for template selection. The determination can be made using an information gain algorithm. The front-end code template in the above-mentioned front-end code template set can be an element code template of an existing front-end page element. For example, the front-end code template can be a code template of a form. The template mutual information in the above-mentioned template mutual information set can represent the correlation of the front-end code templates.

[0080] In the second step, a metric set and a template mutual information set are selected based on the template attributes, and a decision tree is constructed for the front-end code template set to obtain a template decision tree. The template decision tree may be a tree structure formed by the front-end code template set. Leaf nodes in the template decision tree may be front-end code templates. As an example, the execution entity may utilize the C4.5 (Classification and Regression Trees) decision tree algorithm, select a metric set based on the template attributes, and construct a decision tree for the front-end code template set to obtain a template decision tree.

[0081] The third step is to extract node feature vectors from the page behavior semantic knowledge graph to obtain a page node feature vector set. The page node feature vectors in the page node feature vector set can represent information such as node attributes, semantics, grammatical information, and location and layout associations. This node feature vector extraction can utilize a graph neural network model.

[0082] The fourth step is to perform template matching processing on the page behavior semantic knowledge graph and the preset front-end page template knowledge base based on the above-mentioned template decision tree and the above-mentioned page node feature vector set to obtain a page node decision path group set. Among them, the page node decision path in the above-mentioned page node decision path group set can be the selection path of at least one front-end code template corresponding to each node in the above-mentioned page behavior semantic knowledge graph. As an example, the above-mentioned execution entity can use a random forest algorithm to perform template matching processing on the page behavior semantic knowledge graph and the preset front-end page template knowledge base based on the template decision tree and the page node feature vector set to obtain a page node decision path group set.

[0083] Step 5: Path sorting is performed on the page node decision path groups in the above page node decision path group set to obtain a page node decision path sequence set. The page node decision path sequences in the above page node decision path sequence set can be sorted based on the degree of overlap between the front-end code template and the nodes in the page behavior semantic knowledge graph, the rule priority in the code generation rule information included in the preset front-end page template knowledge base, and the historical template usage rate.

[0084] Step 6: Filter the above-mentioned page node decision path sequence set to obtain the target page node decision path set. The target page node decision paths in the above-mentioned target page node decision path set can be the optimal first preset number of decision paths corresponding to the nodes in each page behavior semantic knowledge graph. The above-mentioned screening can be performed using a Monte Carlo tree search algorithm. The above-mentioned preset number can be a pre-set number. For example, the above-mentioned preset number can be 10.

[0085] In the seventh step, the front-end code templates corresponding to the leaf nodes included in the above target page node decision path set are determined as the target front-end code template set of the above page behavior semantic knowledge graph.

[0086] In the eighth step, based on the combined nested relationship between nodes included in the above page behavior semantic knowledge graph, the above target front-end code template set is template combined and nested to obtain the template combined nested page code.

[0087] The ninth step is to optimize the parameters of the above template combination nested page code according to the code generation rule information set in the above preset front-end page template knowledge base to obtain the initial front-end page code. Among them, the code generation rule information in the code generation rule information set can be rule information for personalized adjustment and parameter configuration of the front-end code template according to the personalized needs of the front-end page corresponding to the multi-source front-end page design draft set. For example, the code generation rule information can be rule information for personalized adjustment based on the type and number of form elements in the multi-source front-end page design draft, and according to the element style and verification logic in the multi-source front-end page design draft. Parameter optimization can be content matching of the template combination nested page code and the content of the multi-source front-end page design draft to better meet the optimization requirements of the multi-source front-end page design draft.

[0088] The above technical solution combines steps "step 106 to step 109" and related contents as an inventive point of an embodiment of the present disclosure, which solves the technical problem three mentioned in the background technology: "Since the low-code platform usually matches page components through string replacement or fixed matching rules, it cannot understand the semantic information in the multi-source front-end page design draft and the page behavior semantic knowledge graph, as well as the complex combination and nested relationship of multiple front-end page code components in a component in the multi-source front-end page design draft. The low-code platform cannot model and process the nested constraint relationship between the page structure and the components, resulting in the generated initial front-end page code and the multi-source front-end page design draft not matching, the code quality is low, the generated front-end page does not meet user needs, and the user's page experience is reduced." If the above factors are solved, the effect of improving the accuracy of vehicle-mounted data can be achieved. In order to achieve this effect, the present disclosure first selects a metric set and a template mutual information set through template attributes to improve the accuracy of decision tree construction based on the preset front-end page template. Then, by extracting the visual and semantic features of the page behavior semantic knowledge graph and using the template decision tree, the page node decision paths corresponding to the multi-source front-end page design drafts are determined and sorted and filtered. At the same time, the semantic and visual feature information can improve the accuracy and efficiency of front-end page template selection. Afterwards, the target front-end code template set is nested in combination, which can accurately extract the complex nesting constraints between component templates and improve the component nesting relationship and code representation performance of the template combination nested page code representation of the multi-source front-end page design drafts. Finally, through the detailed content of the multi-source front-end page design drafts, detailed optimization of code parameters and code adjustment of the page multi-dimensional evaluation value set can improve the performance of the front-end page code and the matching degree between the generated front-end page and the design draft, thereby meeting user needs and improving the user experience. Selecting the optimal front-end code template through the decision tree can effectively utilize performance-optimized and reusable components, reduce redundant code, and reduce the loading time and memory usage of the generated front-end page.

[0089] Step 106: Based on reinforcement learning and the page behavior semantic knowledge graph, the initial front-end page code is adjusted to obtain the adjusted front-end code.

[0090] In some embodiments, the execution entity may adjust the initial front-end page code based on reinforcement learning and the page behavior semantic knowledge graph to obtain adjusted front-end code. The adjusted front-end code may be obtained by optimizing the initial front-end page code and fusing it with the enhanced front-end code generated by the agent in the reinforcement learning using the input page behavior semantic knowledge graph. The reinforcement learning may include a Double Deep Q-Network (DQN) and a prioritized experience replay mechanism algorithm. The state representation of the reinforcement learning may include: code structure features of the abstract syntax tree corresponding to the initial front-end page code; graph embedding vectors representing semantic associations between page elements in the page behavior semantic knowledge graph; and multi-dimensional state vectors representing visual difference features between multiple design drafts. The semantic associations may include business logic relationships or user interaction paths. The visual difference features may include, but are not limited to, at least one of the following: element position offsets and differences in font style attributes. The action space of reinforcement learning includes a discrete action space and a continuous action space. The discrete action space may include layout adjustment, style optimization, and interaction enhancement. The continuous action space can be one that maps style values ​​to the [0, 1] range through normalization and supports gradient optimization and fine-grained adjustment. The reinforcement learning reward function can include an immediate reward function based on visual fidelity, interaction fluency, performance score, and code complexity, and a long-term reward function using the Bellman equation for discounted accumulation. The reinforcement learning structural network utilizes an actor network and a critic network architecture. The reinforcement learning agent, rewarded with a "performance score," interacts with the page behavior semantic knowledge graph environment to autonomously explore optimal code structures (for example, asynchronously loading non-first-screen components, merging CSS / JS requests, etc.), thereby significantly improving performance.

[0091] As an example, the above page behavior semantic knowledge graph and the above initial front-end page code are input into the above reinforcement learning to obtain the adjusted front-end code.

[0092] Step 107 : Based on the current user interaction behavior information obtained in real time, code interaction adjustment is performed on the adjusted front-end code to obtain a front-end interaction code.

[0093] In some embodiments, the above-mentioned execution subject can make code interaction adjustments to the above-mentioned adjusted front-end code based on the current user interaction behavior information obtained in real time to obtain the front-end interaction code. Among them, the above-mentioned front-end interaction code can be a code that adds the user's interactive experience with the page on the basis of the above-mentioned adjusted front-end code to optimize the above-mentioned adjusted front-end code. The above-mentioned current user interaction behavior information can be the behavior information of the user adjusting the style of the elements in the front-end page, the code structure and the business logic behind the components. The above-mentioned current user interaction behavior information may include but is not limited to at least one of the following: modifying the style parameters of the elements, adjusting the code structure, and dynamically adjusting the code generation strategy in an event-driven manner. For example, when it is found that the style of a button does not match the design draft, after directly modifying the color and size parameters of the button on the interface, the front-end framework automatically regenerates the relevant code within 0.5 seconds.

[0094] As an example, the execution entity may utilize a React user interface framework that supports an interactive code generation interface, and perform code interactive adjustment on the adjusted front-end code according to the current user interaction behavior information obtained in real time to obtain the front-end interaction code.

[0095] Step 108: Perform a multi-dimensional page evaluation on the front-end page corresponding to the front-end interaction code to obtain a multi-dimensional evaluation value set of the page.

[0096] In some embodiments, the execution entity may perform a multi-dimensional page evaluation on the front-end page corresponding to the front-end interaction code to obtain a multi-dimensional evaluation value set of the page. The multi-dimensional evaluation value set of the page may be the result of a multi-dimensional evaluation of the front-end page and the front-end interaction code generated by the rendering of the front-end interaction code. The multiple dimensions may include but are not limited to at least one of the following: front-end page similarity, code performance, and cost interaction performance. The larger the value of the multi-dimensional evaluation value of the page, the better the performance of the front-end interaction code and the closer the front-end page generated by the rendering is to the front-end design page of the multi-source front-end page design draft set.

[0097] In some optional implementations of some embodiments, performing a multi-dimensional page evaluation on the front-end page corresponding to the front-end interaction code to obtain a multi-dimensional page evaluation value set may include the following steps:

[0098] The first step is to determine the pixel-wise Hamming distance between the front-end page corresponding to the front-end interaction code and the front-end design page corresponding to the multi-source front-end page design draft set. The pixel-wise Hamming distance can represent a measure of the difference between the front-end page and the front-end design page. This determination can be performed using the DHash (Difference Hash) algorithm.

[0099] The second step is to determine the image structural similarity value between the front-end page and the front-end design page. This image structural similarity value can measure the similarity between the front-end page and the front-end design page. In practice, the execution entity can first input the front-end page and the front-end design page into a ResNet-101 model to obtain a first front-end page feature vector and a second front-end page feature vector. Then, the image structural similarity value (SSIM) between the first front-end page feature vector and the second front-end page feature vector is determined.

[0100] The third step is to determine a page visual evaluation value based on the image pixel Hamming distance and the image structure similarity value. The page visual evaluation value can represent the degree of difference in appearance between the front-end page and the front-end design page.

[0101] As an example, the execution entity may perform a weighted summation on the image pixel Hamming distance and the image structure similarity value to obtain a page visual evaluation value.

[0102] The fourth step is to test the interactivity of the front-end page to obtain a page interactivity evaluation value. This page interactivity evaluation value can represent the interactive performance and responsiveness of the front-end page. This interactivity test can be performed using the Selenium automated testing tool and interactive test scripts.

[0103] Step 5: Perform code performance testing on the front-end page to obtain a performance evaluation value. This page performance evaluation value can indicate memory leaks, resource loading, and rendering lags. This code performance testing can be performed using a performance analysis tool, such as Lighthouse or Chrome DevTools, to evaluate the front-end interactive code.

[0104] The sixth step is to perform a code quality assessment on the front-end interactive code to obtain a page code quality assessment value. The page code quality assessment value can represent the complexity, code duplication rate, and code maintainability of the front-end interactive code.

[0105] In the seventh step, sentiment analysis is performed on the obtained user comment information set to obtain a user sentiment information set. The user sentiment information in the user sentiment information set can represent the user's positive, neutral, and negative sentiments toward the front-end page corresponding to the front-end interaction code. The user evaluation information set can be information collected through online questionnaires and user behavior analysis, including feedback on test users' satisfaction with the generated front-end page. The online questionnaire can be a 20-question questionnaire covering the page's aesthetics, usability, functionality, and loading speed.

[0106] The eighth step is to determine the user satisfaction evaluation value of the front-end page based on the above-mentioned user emotion tendency information set. The above-mentioned user satisfaction evaluation value may be the ratio of the number of positive tendency information in the above-mentioned user emotion tendency information set to the number of user emotion tendency information included in the above-mentioned user emotion tendency information set. As an example, the above-mentioned execution entity may first determine the number of at least one user emotion tendency information with a positive tendency in the above-mentioned user emotion tendency information set as the number of positive emotion tendencies. Then, determine the number of user emotion tendency information included in the above-mentioned user emotion tendency information set as the number of emotion tendencies. Finally, determine the ratio of the above-mentioned number of positive emotion tendencies to the above-mentioned number of emotion tendencies as the user satisfaction evaluation value.

[0107] In the ninth step, the page visual evaluation value, the page interactivity evaluation value, the page code performance evaluation value, the page code quality evaluation value, and the user satisfaction evaluation value are determined as a page multi-dimensional evaluation value set.

[0108] Step 109 : Dynamically adjust and optimize the front-end interaction code based on the multi-dimensional evaluation value set of the page.

[0109] In some embodiments, the execution entity may dynamically adjust and optimize the front-end interaction code based on the multi-dimensional evaluation value set of the page. The dynamic adjustment and optimization of the code may include but is not limited to at least one of the following: reinforcement learning reward weight, adjustment of page layout, optimization of interaction process, and addition of new front-end code templates. Figure 2 As shown, Figure 2 It shows a schematic diagram of dynamically adjusting and optimizing the front-end page through code. Figure 3 As shown, a comparison diagram of the code generation framework based on templates in the prior art and the front-end page generated based on a multi-source front-end page design set in the present disclosure is shown. Figure 4 As shown, a schematic diagram comparing the front-end page and code quality of the prior art and the present disclosure in terms of page loading time, memory usage and code maintainability index in the multi-dimensional evaluation dimensions of the page is shown.

[0110] As an example, the execution entity may dynamically adjust and optimize the front-end interaction code in response to determining that any page dimension evaluation value in the page multi-dimensional evaluation value set does not satisfy the corresponding evaluation condition set. The evaluation condition set may include, but is not limited to, at least one of the following: a page visual evaluation value greater than or equal to 0.85, a code complexity in the page code quality evaluation value less than or equal to 8, a code maintainability in the page code quality evaluation value reaching level A or above, and a user satisfaction evaluation value greater than or equal to 0.8.

[0111] Further references Figure 5 As an implementation of the methods shown in the above figures, the present disclosure provides some embodiments of a front-end page code generation device. These device embodiments are similar to Figure 1 Corresponding to the method embodiments shown, the front-end page code generation device can be specifically applied to various electronic devices.

[0112] like Figure 5 As shown, a front-end page code generation device 500 includes: an acquisition unit 501, a multi-source data fusion unit 502, an element visual semantic extraction unit 503, a semantic graph construction unit 504, a generation unit 505, a code adjustment unit 506, a code interaction adjustment unit 507, a multi-dimensional page evaluation unit 508 and a code dynamic adjustment optimization unit 509.

[0113] It is understandable that the units recorded in the front page code generating device 500 and the reference Figure 1 Therefore, the operations, features and beneficial effects described above for the method are also applicable to the front-end page code generating device 500 and the units included therein, and will not be repeated here.

[0114] Reference below Figure 6 , which shows a structural schematic diagram of an electronic device (eg, an electronic device) 600 suitable for implementing some embodiments of the present disclosure. Figure 6 The electronic device shown is only an example and should not bring any limitation to the functions and scope of use of the embodiments of the present disclosure.

[0115] like Figure 6As shown, electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to programs stored in a read-only memory (ROM) 602 or programs loaded from a storage device 608 into a random access memory (RAM) 603. RAM 603 also stores various programs and data required for the operation of electronic device 600. Processing device 601, ROM 602, and RAM 603 are interconnected via a bus 604. An input / output (I / O) interface 605 is also connected to bus 604.

[0116] Typically, the following devices may be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touchpad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 may allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. Figure 6 The electronic device 600 is shown with various devices, but it should be understood that it is not required to implement or possess all of the devices shown. More or fewer devices may be implemented or possessed instead. Figure 6 Each block shown in the figure may represent one device, or may represent multiple devices as needed.

[0117] In particular, according to some embodiments of the present disclosure, the processes described above with reference to the flowcharts can be implemented as computer software programs. For example, some embodiments of the present disclosure include a computer program product comprising a computer program carried on a computer-readable medium, the computer program comprising program code for executing the method shown in the flowchart. In some such embodiments, the computer program can be downloaded and installed from a network via the communication device 609, or installed from the storage device 608, or installed from the ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of some embodiments of the present disclosure are performed.

[0118] It should be noted that in some embodiments of the present disclosure, the computer-readable medium described above may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. Computer-readable storage media may include, for example, but not limited to, electrical, magnetic, optical, electromagnetic, infrared, or semiconductor systems, devices, or components, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In some embodiments of the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device, or component. Furthermore, in some embodiments of the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, carrying computer-readable program code. This propagated data signal may take a variety of forms, including, but not limited to, electromagnetic signals, optical signals, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transport a program for use by or in connection with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any suitable medium, including but not limited to wire, optical cable, RF (radio frequency), or any suitable combination thereof.

[0119] In some embodiments, the client and server can communicate using any currently known or later developed network protocol, such as HTTP (Hypertext Transfer Protocol), and can be interconnected with any form or medium of digital data communication (e.g., a communication network). Examples of communication networks include a local area network ("LAN"), a wide area network ("WAN"), an internet (e.g., the Internet), and a peer-to-peer network (e.g., an ad hoc peer-to-peer network), as well as any currently known or later developed network.

[0120] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device. The computer-readable medium carries one or more programs. When the one or more programs are executed by the electronic device, the electronic device performs steps 101 to 109.

[0121] Computer program code for performing the operations of some embodiments of the present disclosure may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., through the Internet using an Internet service provider).

[0122] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of the boxes in the block diagram and / or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0123] The units described in some embodiments of the present disclosure may be implemented by software or by hardware. The described units may also be provided in a processor, for example, they may be described as: a processor including an acquisition unit, a multi-source data fusion unit, an element visual semantic extraction unit, a semantic map construction unit, a generation unit, a code adjustment unit, a code interaction adjustment unit, a multi-dimensional page evaluation unit, and a code dynamic adjustment optimization unit. Among them, the names of these units do not constitute a limitation on the unit itself under certain circumstances. For example, the acquisition unit may also be described as a "unit for acquiring a multi-source front-end page design draft set and user historical page browsing behavior information."

[0124] The functions described above herein may be performed, at least in part, by one or more hardware logic components. For example, and without limitation, exemplary types of hardware logic components that may be used include: field programmable gate arrays (FPGAs), application specific integrated circuits (ASICs), application specific standard products (ASSPs), systems on chips (SOCs), complex programmable logic devices (CPLDs), and the like.

[0125] The above descriptions are merely some preferred embodiments of the present disclosure and illustrate the underlying technical principles. Those skilled in the art should understand that the scope of the invention encompassed by the embodiments of the present disclosure is not limited to technical solutions formed by specific combinations of the aforementioned technical features. It also encompasses other technical solutions formed by any combination of the aforementioned technical features or their equivalents, without departing from the aforementioned inventive concept. For example, a technical solution formed by replacing the aforementioned features with (but not limited to) technical features with similar functions disclosed in the embodiments of the present disclosure.

Claims

1. A front-end page code generation method, characterized in that: include: Obtain multi-source front-end page design drafts and user historical page browsing behavior information; Performing multi-source data fusion on the multi-source front-end page design draft set and the user's historical page browsing behavior information to obtain front-end page fusion design information; Performing element visual semantic extraction on the multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set; According to the page text element information set and the page design visual element information set, a semantic graph is constructed for the front-end page fusion design information and the preset page design knowledge base to obtain a page behavior semantic knowledge graph; Generate initial front-end page code based on the page behavior semantic knowledge graph and the preset front-end page template knowledge base; Adjusting the initial front-end page code based on reinforcement learning and the page behavior semantic knowledge graph to obtain adjusted front-end code; According to the current user interaction behavior information obtained in real time, code interaction adjustment is performed on the adjusted front-end code to obtain a front-end interaction code; Performing a multi-dimensional page evaluation on the front-end page corresponding to the front-end interaction code to obtain a multi-dimensional evaluation value set of the page; The front-end interaction code is dynamically adjusted and optimized based on the multi-dimensional evaluation value set of the page.

2. The method according to claim 1, characterized in that The multi-source data fusion of the multi-source front-end page design draft set and the user's historical page browsing behavior information to obtain the front-end page fusion design information includes: Performing format conversion on the multi-source front-end page design draft set to obtain a converted multi-source front-end page design draft set; Performing data preprocessing on the user's historical page browsing behavior information to obtain preprocessed user's historical page browsing behavior information; Constructing a graph structure for the converted multi-source front-end page design draft set and the pre-processed user historical page browsing behavior information to obtain a multi-source front-end page design structure graph set and a user browsing behavior structure graph; Performing data fusion on the multi-source front-end page design structure atlas and the user browsing behavior structure graph to obtain a multi-source fusion node feature vector set; Inputting the multi-source fusion node feature vector set into a page design anomaly recognition model to obtain a page design anomaly information set; A multi-dimensional abnormal data repair process is performed on the page design abnormality information set to obtain repaired page design information as the front-end page fusion design information.

3. The method according to claim 1, characterized in that The method of constructing a semantic graph of the front-end page fusion design information and the preset page design knowledge base based on the page text element information set and the page design visual element information set to obtain a page behavior semantic knowledge graph includes: Determining a page design knowledge graph pattern layer of the page behavior semantic knowledge graph; Extracting triples from the preset page design knowledge base to obtain a page design triple set; Extracting semantic information from the front-end page fusion design information based on the page text element information set and the page design visual element information to obtain a page text visual semantic information set; Extract the dynamic and static association relationships of elements from the real-time user browsing behavior information to obtain the dynamic and static association information set of design elements; Performing heterogeneity detection on the page design triple set, the page text visual semantic information set, and the design element dynamic and static association information set to obtain a data heterogeneity value; In response to determining that the data heterogeneity value meets the preset heterogeneity condition, the page design triple set, the page text visual semantic information set and the design element dynamic and static association information set are input into the page design knowledge graph model layer according to the page text element information set and the page design visual element information to obtain a page behavior semantic knowledge graph.

4. The method according to claim 1, wherein The step of performing element visual semantic extraction on the multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set includes: Performing text region detection on each multi-source front-end page design draft in the multi-source front-end page design draft set to generate a page text region group, thereby obtaining a page text region group set; Inputting the page text area set into a page text recognition model to obtain a page text recognition information set; Performing font style feature extraction on the page text area group to obtain a text font style feature vector group; Performing semantic grammar extraction on the page text identification information set to obtain a page text semantic feature vector set; Inputting the page text area set, the text font style feature vector set, and the page text semantic feature vector set into a text logical topology model to obtain a text logical layout feature vector set; The text font style feature vector set, the page text semantic feature vector set and the text logical layout feature vector set are determined as a page text element information set, and the multi-source front-end page design draft set is input into a page design visual feature extraction model to obtain a page design visual element information set.

5. The method according to claim 1, characterized in that The performing of a multi-dimensional page evaluation on the front-end page corresponding to the front-end interaction code to obtain a multi-dimensional evaluation value set of the page includes: Determine the image pixel Hamming distance between the front-end page corresponding to the front-end interaction code and the front-end design page corresponding to the multi-source front-end page design draft set; Determining a value of image structure similarity between the front-end page and the front-end design page; Determining a page visual evaluation value according to the image pixel Hamming distance and the image structure similarity value; Performing an interactivity test on the front-end page to obtain a page interactivity evaluation value; Perform code performance testing on the front-end page to obtain a page code performance evaluation value; Performing a code quality assessment on the front-end interactive code to obtain a page code quality assessment value; Perform sentiment analysis on the acquired user comment information set to obtain a user sentiment information set; Determining a user satisfaction evaluation value of the front-end page based on the user sentiment tendency information set; The page visual evaluation value, the page interactivity evaluation value, the page code performance evaluation value, the page code quality evaluation value, and the user satisfaction evaluation value are subjected to multi-feature fusion to determine a page multi-dimensional evaluation value set.

6. A front-end page code generation device, characterized in that: include: Acquisition unit, obtains multi-source front-end page design draft sets and user historical page browsing behavior information; A multi-source data fusion unit performs multi-source data fusion on the multi-source front-end page design draft set and the user's historical page browsing behavior information to obtain front-end page fusion design information; An element visual semantics unit extracts element visual semantics from the multi-source front-end page design draft set to obtain a page text element information set and a page design visual element information set; A semantic graph construction unit constructs a semantic graph of the front-end page fusion design information and the preset page design knowledge base according to the page text element information set and the page design visual element information set, thereby obtaining a page behavior semantic knowledge graph; A generating unit, which generates an initial front-end page code according to the page behavior semantic knowledge graph and a preset front-end page template knowledge base; A code adjustment unit adjusts the initial front-end page code based on reinforcement learning and the page behavior semantic knowledge graph to obtain an adjusted front-end code; A code interaction adjustment unit performs code interaction adjustment on the adjusted front-end code according to the current user interaction behavior information obtained in real time to obtain a front-end interaction code; A multi-dimensional page evaluation unit performs a multi-dimensional page evaluation on the front-end page corresponding to the front-end interaction code to obtain a multi-dimensional evaluation value of the page; The code dynamic adjustment and optimization unit dynamically adjusts and optimizes the front-end interaction code according to the multi-dimensional evaluation values ​​of the page.

7. An electronic device, characterized in that: include: one or more processors; a storage device having one or more programs stored thereon, When the one or more programs are executed by the one or more processors, the one or more processors implement the method according to any one of claims 1 to 5.

8. A computer-readable medium, characterized in that A computer program is stored thereon, wherein when the computer program is executed by a processor, the method according to any one of claims 1 to 5 is implemented.

Images