Page generation method, system, device and medium

Abstract

The application relates to the technical field of front-end development, can be applied to financial and medical scenarios, and discloses a page generation method, system, device and medium. The method comprises the following steps: converting design metadata into an intermediate representation layer according to the input source type of the design metadata; constructing a layout container tree by using a recursive clustering algorithm, and converting absolute position information into elastic layout parameters; fusing multi-modal information to complete semantic matching and mapping of a visual unit and a standard front-end component; generating component code in combination with layout, components and interaction logic, and realizing binding of the visual unit and code elements through a unique fingerprint identifier, and then integrating the component code carrying the unique fingerprint identifier into a front-end page file according to a target front-end framework engineering specification. The application can shorten the development cycle of design-to-front-end, reduce manual error correction and later maintenance costs, and improve front-end page landing efficiency and code standardization.

Description

Technical Field

[0001] This application relates to the field of front-end development technology and can be applied to financial and medical scenarios. Specifically, it relates to a page generation method, system, device, and medium. Background Technology

[0002] With the rapid development of internet technology, front-end development has become a core part of the software product development process. During product development, designers use design tools to create design drafts, and front-end engineers then use these drafts to create code, ultimately resulting in a functional and interactive front-end page. However, a significant gap has long existed in the conversion process from design drafts to code, leading to low development efficiency and inconsistent quality. This manifests itself in the following ways: First, limitations in access sources: Existing design-to-code tools heavily rely on the open interfaces provided by design software, and can only process online-accessible design drafts with open permissions. When processing offline design files or interactive source code, existing tools lack the ability to parse them.

[0003] Secondly, there is a lack of layout logic: Design drafts generally use absolute positioning to describe positions, while industrial-grade front-end pages need responsive layouts to adapt to different screen sizes. Existing tools lack an understanding of layout intent and cannot automatically infer nested structures, alignment methods, spacing rules, etc. Manual conversion is not only extremely inefficient but also prone to problems such as layout errors, multi-platform adaptation failures, and poor compatibility.

[0004] Third, there is a break in the interaction logic: the prototype connections, state transitions, page navigation, and other interaction designs in the design drafts only remain at the visual demonstration level and lack executable logical semantics. Existing tools cannot automatically parse these interaction designs into code logic, and the interaction designs must be manually implemented by front-end engineers.

[0005] Fourth, high maintenance costs: The code generated by existing tools is only a one-time output and does not support incremental synchronization between design and code. When designers modify the colors, sizes, layouts, and text of the design draft, developers must manually search and modify them one by one in the code, which is prone to omissions, inconsistencies, and conflicts.

[0006] Therefore, there is an urgent need for a front-end page automatic generation technology that can break through the limitations of a single data source, deeply understand layout semantics, and automatically inject interactive logic. Summary of the Invention

[0007] To address the aforementioned issues, this application provides a page generation method, system, device, and medium. By parsing design metadata in multiple modes and constructing a unified intermediate representation layer, it utilizes a recursive clustering algorithm to achieve automatic conversion from absolute position to flexible layout, combines multimodal semantic analysis to complete standard component mapping, and uses a unique fingerprint to synchronize design and code, thereby achieving the technical effects of full-scene adaptation, efficient generation, and long-term maintainability.

[0008] The technical solution adopted in this application is as follows: Firstly, this application provides a page generation method, including: Obtain design metadata and convert it into an intermediate representation layer based on the input source type of the design metadata; the intermediate representation layer includes the identification information, absolute position information, visual attributes and interaction logic information of each visual unit; Based on absolute position information, the arrangement relationship between visual units is determined by a recursive clustering algorithm. A layout container tree is then constructed based on the arrangement relationship to convert the absolute position information into flexible layout parameters. Based on the identification information, visual attributes, and structural relationships in the layout container tree, semantic matching is performed on each visual unit to map each visual unit to the corresponding standard front-end component. Based on the flexible layout parameters, visual attributes, and interaction logic information, generate component code corresponding to standard front-end components; Generate a unique fingerprint for each visual unit, bind the unique fingerprint to the corresponding page element in the component code, and integrate the component code carrying the unique fingerprint into the front-end page file according to the engineering specifications of the target front-end framework.

[0009] Secondly, this application also provides a page generation system, including: The data parsing unit is used to acquire design metadata and convert it into an intermediate representation layer according to the input source type of the design metadata. The intermediate representation layer includes the identification information, absolute position information, visual attributes, and interaction logic information of each visual unit. The layout inference unit is used to determine the arrangement relationship between visual units based on absolute position information through a recursive clustering algorithm, and to construct a layout container tree based on the arrangement relationship to convert the absolute position information into flexible layout parameters. The semantic matching unit is used to perform semantic matching on each visual unit based on the identification information, visual attributes and structural relationships in the layout container tree, so as to map each visual unit to the corresponding standard front-end component. The code generation unit is used to generate component code corresponding to standard front-end components based on flexible layout parameters, visual attributes, and interaction logic information. The fingerprint binding unit is used to generate a unique fingerprint identifier for each visual unit, bind the unique fingerprint identifier to the corresponding page element in the component code, and integrate the component code carrying the unique fingerprint identifier into the front-end page file according to the engineering specifications of the target front-end framework.

[0010] Thirdly, this application also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of the above-described page generation method.

[0011] Fourthly, this application also provides a computer-readable storage medium storing a computer program that, when executed by a processor, implements the steps of the above-described page generation method.

[0012] The above-mentioned technical solution adopted in this application can achieve the following beneficial effects: The aforementioned page generation methods, systems, devices, and media construct an intermediate presentation layer through unified parsing of multiple data sources, overcoming the limitation of existing technologies that can only adapt to a single design source and achieving compatible access to multiple data sources. Relying on recursive projection clustering, it automatically parses absolute position information and transforms it into flexible layout parameters, eliminating the need for manual sorting of nesting levels and arrangement rules, accurately restoring the layout intent, and fundamentally solving the defect that absolute positioning cannot adapt to multiple terminal screens. Combining a multimodal comprehensive judgment method based on text semantics, visual features, and container structure, it completes intelligent component mapping, significantly reducing component matching errors caused by single-dimensional recognition. Based on the unique fingerprint identifier of design elements, it establishes a one-to-one binding relationship between design and code, enabling bidirectional incremental differentiated updates. This not only shortens the development cycle from design to front-end, reduces manual error correction and later maintenance costs, but also improves the efficiency of front-end page deployment and code standardization. Attached Figure Description

[0013] The accompanying drawings, which are included to provide a further understanding of this application and form part of this application, illustrate exemplary embodiments and are used to explain this application, but do not constitute an undue limitation of this application. In the drawings: Figure 1 A flowchart illustrating a page generation method according to an embodiment of this application is shown; Figure 2 A schematic diagram of the structure of a page generation system according to an embodiment of this application is shown; Figure 3 A schematic diagram of the structure of an electronic device according to an embodiment of this application is shown. Detailed Implementation

[0014] To make the objectives, technical solutions, and advantages of this application clearer, the technical solutions of this application will be clearly and completely described below in conjunction with specific embodiments and corresponding drawings. Obviously, the described embodiments are only a part of the embodiments of this application, and not all of them. Based on the embodiments in this application, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of this application.

[0015] Figure 1 A schematic flowchart of a page generation method according to an embodiment of this application is shown, with reference to... Figure 1 As shown, this embodiment includes steps S110 to S150: Step S110: Obtain design metadata and convert the design metadata into an intermediate representation layer according to the input source type of the design metadata; wherein, the intermediate representation layer includes the identification information, absolute position information, visual attributes and interaction logic information of each visual unit.

[0016] The main purpose of this step is to enable input access and unified processing by building an intermediate representation layer to shield the format differences of design metadata from different input source types.

[0017] The system first identifies the source and determines the type of the input design metadata, classifying the input sources into three categories.

[0018] Online design drafts: These can include design data output by online design tools and obtainable through an interface.

[0019] Offline design files: can include local binary design files.

[0020] Interactive source code: This can include static web pages, front-end framework source code, or build artifacts.

[0021] The system automatically switches to the corresponding parsing mode based on the type of input source, converting the design metadata into an intermediate representation layer (IR).

[0022] The intermediate presentation layer is a structured data model that includes at least the following fields.

[0023] Identification information: The name and ID of the visual unit.

[0024] Absolute position information: pixel-level absolute coordinates (x, y), width, and height of the visual unit in the design metadata.

[0025] Visual attributes include, but are not limited to, background color, font, border, rounded corners, shadow, transparency, gradient, etc. of visual units.

[0026] Interaction logic information: Interaction actions, targets, triggers, etc., extracted from design metadata.

[0027] In some optional implementations, step S110, obtaining design metadata and converting it into an intermediate representation layer according to the input source type of the design metadata, includes: when the input source type is an online design draft, obtaining the original data tree structure of the online design draft, extracting the name, layout, style, and interaction information of each visual unit, and normalizing it into an intermediate representation layer; when the input source type is an offline design file, performing a deserialization operation on the offline design file, extracting the name, layout, style, and interaction information of each visual unit through a private protocol mapping table, and then converting it into an intermediate representation layer; when the input source type is interactive source code, rendering the interactive source code in a headless browser, extracting the name, layout, style, and interaction information of each visual unit through script injection, and then converting it into an intermediate representation layer.

[0028] When the input design metadata is an online design draft, the system calls the open interface provided by the design tool to obtain the raw data tree structure of the online design draft. For example, it obtains the JSON tree structure from the application programming interface and extracts the name, layout, style, and interaction information set through the prototype function of the design tool for each visual unit. Normalization processing can specifically include the following operations: Layout normalization: The nesting level, node type, parent-child relationship, etc. of the JSON tree structure are reconstructed in a unified manner; the coordinate origin and coordinate direction of the nodes are unified; and the calculation methods of node size, margin, boundary, etc. are unified.

[0029] Style normalization: Perform uniform format conversion on background color, font, border, rounded corner, shadow, transparency, gradient, etc.; standardize the text content, paragraphs, line breaks, etc. of nodes.

[0030] Interactive information normalization: unify the storage format of prototype connections, state transitions, variant transitions, page navigation relationships, etc.

[0031] Through normalization, heterogeneous JSON tree structures output by different design tools and in different formats can be converted into a standardized intermediate representation layer with consistent structure, unified coordinates, standard style, and clean data, providing a stable and reliable input foundation for subsequent layout inference and semantic analysis.

[0032] When the input design metadata is an offline design file, the binary stream of the offline file is read, deserialization is performed on the binary stream, and the name, layout, style, and interaction information of each visual unit are extracted from the deserialized data through a private protocol mapping table (which records the correspondence between key data of a specific version of the offline design file and internal system fields). The extracted information is then normalized in the same way as the online design draft and converted into an intermediate presentation layer.

[0033] When the input design metadata is interactive source code, the system launches a headless browser to load and render the page based on the interactive source code. The system injects a JavaScript script into the headless browser. This JavaScript script traverses the DOM tree, obtaining the style of each node (including its background color, font, border, rounded corners, shadow, opacity, gradient, text content, paragraphs, line breaks, etc. in the viewport). Simultaneously, this JavaScript script captures the actual rendered layout and captures native event listeners bound to nodes, as well as custom events via front-end framework properties, as interactive logic information. The extracted information undergoes the same normalization processing as the online design draft, converting it into an intermediate presentation layer.

[0034] The intermediate presentation layer provided in this application enables comprehensive access and unified expression of multiple input source types, such as online design drafts, offline design files, and interactive source code, solving the "data silo problem" and providing a stable input foundation for subsequent steps.

[0035] Step S120: Based on the absolute position information, the arrangement relationship between each visual unit is determined by a recursive clustering algorithm, and a layout container tree is constructed according to the arrangement relationship to convert the absolute position information into flexible layout parameters.

[0036] The main purpose of this step is layout inference and structural reconstruction.

[0037] The system has unified the design metadata of all input sources into an intermediate presentation layer, where each visual unit carries absolute position information. However, directly using this absolute position information to generate page code results in a lack of responsiveness. The core task of this step is to transform this flat, isolated absolute position information into flexible layout parameters with structural semantics that conform to front-end engineering specifications.

[0038] The system employs a recursive clustering algorithm to analyze the spatial arrangement relationships between visual units. Starting from all visual units on the entire page, the algorithm automatically determines which units visually belong to the same row, which belong to the same column, and which have nested relationships. By iteratively aggregating visual units with close spatial relationships, the system constructs a layout container tree.

[0039] The system analyzes the geometric gaps and arrangement of direct subordinates within each container, automatically deriving the corresponding flexible layout properties. These properties can ultimately be mapped to standard Cascading Style Sheets (CSS) in front-end development.

[0040] In some optional implementations, step S120, based on absolute position information, determines the arrangement relationship between visual units through a recursive clustering algorithm, and constructs a layout container tree according to the arrangement relationship to convert the absolute position information into flexible layout parameters, including: vertical projection cutting: calculating the vertical projection overlap of any two visual units in the current processing area based on the absolute position information; when the vertical projection overlap exceeds a preset threshold, determining that the two visual units belong to the same horizontal layout row, aggregating the visual units belonging to the same horizontal layout row into the same horizontal container to obtain at least one horizontal container, and the horizontal containers naturally form a vertical arrangement relationship according to the vertical coordinate order; horizontal projection cutting: for each newly generated horizontal container, calculating the internal arrangement relationship of each visual unit based on the absolute position information. The horizontal projection overlap of visual units is determined. When the horizontal projection overlap exceeds a preset threshold, two visual units are determined to belong to the same vertical layout column. Visual units belonging to the same vertical layout column are aggregated into the same vertical container to obtain at least one vertical container. The vertical containers are naturally arranged horizontally according to the horizontal coordinate order. Each newly generated vertical container is used as the current processing area, and vertical projection cutting and horizontal projection cutting are repeatedly performed until the current processing area contains only one visual unit or can no longer be cut, forming a layout container tree. The geometric gap of the direct subordinates of each container in the layout container tree in the main axis direction is matched as the spacing attribute of the flexible layout, and the arrangement of the direct subordinates of each container in the layout container tree is mapped as the alignment attribute of the flexible layout.

[0041] The system first initializes the current processing area as the entire page (i.e., the range including all visual units), and extracts all visual units to be processed in batches from the intermediate presentation layer. Each visual unit has absolute coordinates (x, y), width, and height parameters.

[0042] Perform vertical projection cutting: For all visual units within the current processing area, iterate through them pairwise and calculate the values ​​of any two visual units. and Vertical projection overlap in the vertical direction It can be expressed by the following formula (1): , formula (1); in, Representing visual units The absolute ordinate, Representing visual units The absolute ordinate, Representing visual units absolute height, Representing visual units absolute height, Indicates taking the smaller value. This indicates taking the larger value.

[0043] In the above formula (1), the numerator represents two visual units. and The length of the projection overlap in the vertical direction; the denominator represents the two visual units. and The smaller of the medium-height units is used for normalization so that the vertical projection overlap is not affected by the difference in the absolute height of the visual units.

[0044] The system presets an overlap determination threshold T (example value T=0.6, the system supports custom configuration of overlap determination threshold according to actual scenario).

[0045] when At that time, determine two visual units and They belong to the same horizontal layout row (i.e., horizontal row).

[0046] All visual units within a row are aggregated and encapsulated into the same horizontal container, the boundary of which is determined by the smallest bounding rectangle of all visual units belonging to that row.

[0047] After vertical projection cutting, the system obtains at least one horizontal container (usually multiple). The vertical arrangement of these horizontal containers can be sorted by their upper boundary values ​​from smallest to largest, forming a top-down vertical arrangement.

[0048] Perform horizontal projection cutting: For each horizontal container generated in the previous step, the system selects a single horizontal container as the processing range, and for all visual units contained within the processing range, it iterates through pairwise combinations and calculates the results for any two visual units. and Horizontal projection overlap in the horizontal direction This can be expressed by the following formula (2): , formula (2); in, Representing visual units The absolute x-coordinate, Representing visual units The absolute x-coordinate, Representing visual units absolute width, Representing visual units absolute width, Indicates taking the smaller value. This indicates taking the larger value.

[0049] In the above formula (2), the numerator represents two visual units. and The horizontal projection overlap length; the denominator represents the two visual units. and The smaller of the medium widths is used for normalization, so that the horizontal projection overlap is not affected by the difference in the absolute width of the visual units.

[0050] when At that time, determine two visual units and They belong to the same vertical layout column (i.e., in the same column vertically).

[0051] All visual units within the same column are aggregated and encapsulated into the same vertical container, the boundary of which is determined by the smallest bounding rectangle of all visual units belonging to that column.

[0052] After horizontal projection cutting, each horizontal container is divided into at least one vertical container (usually multiple). The horizontal arrangement of these vertical containers can be sorted by their left boundary values ​​from smallest to largest, forming a horizontal arrangement from left to right.

[0053] Recursive cutting: For each vertical container generated in the previous round of cutting, the system independently sets it as the current processing area for the new round, and recursively repeats the entire set of vertical projection cutting and horizontal projection cutting operation logic until only a single visual unit remains in any current processing area, or the projection overlap of any two visual units in the current processing area cannot meet the grouping threshold and cutting cannot continue, then the iteration terminates.

[0054] All visual units are encapsulated through multiple layers of nesting to form a complete tree structure, namely the layout container tree. The layout container tree is a hierarchical structured data model, and its structure definition can include: The root container represents the entire page; The internal containers alternate between horizontal and vertical containers. Each internal container records the parent container number, the child container number or the child visual unit, the container type (vertical or horizontal), the bounding box, and the visual units inside. Leaf nodes, or visual units, retain the identification information, visual attributes, and interaction logic information from the intermediate presentation layer.

[0055] After obtaining the complete layout container tree, the system traverses each container in the layout container tree and converts its geometric constraints into flexible layout parameters.

[0056] Spacing attribute mapping: The system obtains the geometric gap sequence of all direct subordinates within any container along the main axis. If the container type is a horizontal container, the main axis is horizontal; if the container type is a vertical container, the main axis is vertical.

[0057] Taking a horizontal container as an example: All its direct subordinates are arranged in ascending order by their left boundary, and the horizontal spacing between adjacent direct subordinates is calculated to obtain a sequence. The system calculates the mode, mean, and standard deviation of this sequence. If the frequency of the mode exceeds a preset proportion (e.g., 80%), the mode is used as the representative gap; otherwise, the mean is used. Then, this gap value is approximated against preset standard spacing values ​​(4px, 8px, 12px, 16px, 24px, 32px, etc.), and the closest standard value is taken as the internal element spacing (gap) property value. If the standard deviation of the gap sequence is large (indicating inconsistent spacing), the gap property is not used; instead, the margin property of each direct subordinate is retained to accurately reproduce irregular spacing. The method for vertical containers is similar and will not be elaborated further.

[0058] Alignment attribute mapping: Based on the distribution characteristics of all direct subordinates in any container along the main axis, the main axis alignment (justify-content) attribute value is automatically matched.

[0059] For example, if the starting edge of the first direct subordinate is aligned with the starting edge of the container, and the ending edge of the last direct subordinate is aligned with the ending edge of the container, then the match is aligned at both ends. If all direct subordinates are centered (i.e., the distance from the start edge of the container to the first direct subordinate is equal to the distance from the last direct subordinate to the end edge of the container), then the match is centered. If all direct subordinates are left-aligned (or top-aligned) and have blank space on the right (or below), then the starting alignment is matched. The match ends if all direct subordinates are right-aligned (or bottom-aligned) and have whitespace on the left (or top).

[0060] Based on the distribution characteristics of all direct subordinates within any container along the cross axis, the `align-items` attribute value is automatically matched. If the container type is horizontal, the cross axis is vertical; if the container type is vertical, the cross axis is horizontal. For example, for any horizontal container, if the vertical midpoints of all direct subordinates are on the same horizontal line, then center alignment is matched. If the top edges of all direct subordinates are on the same horizontal line, then match the top alignment; If the bottom edges of all direct subordinates are on the same horizontal line, then match the bottom alignment.

[0061] The method for vertical containers is similar and will not be elaborated further.

[0062] Ultimately, the system can generate a Cascading Style Sheet (CSS) for each container.

[0063] This application utilizes vertical / horizontal projection overlap thresholds to accurately distinguish the rows, columns, and nesting relationships of visual units, avoiding the shortcomings of traditional methods that rely on absolute positioning and hard-coding of positions. Recursive cutting can handle complex layouts with multiple levels and interlaced rows and columns; and being entirely based on geometric calculations, it is suitable for pages of any shape and design style. The generated flexible layout parameters can be directly used in front-end engineering, giving the page a natural responsiveness and significantly reducing manual adjustments.

[0064] Step S130: Based on the identification information, visual attributes and structural relationships in the layout container tree, perform semantic matching on each visual unit to map each visual unit to the corresponding standard front-end component.

[0065] The main purpose of this step is semantic analysis and component mapping. Its core task is to identify the true interactive semantics of each visual unit and map it to a standard front-end component that can be used directly.

[0066] The system integrates three types of information to make semantic judgments.

[0067] Identification information: The name and ID of the visual unit, which usually contain a description of its function. The system can parse these names through natural language semantic analysis to obtain a preliminary judgment of the component type.

[0068] Visual attributes: The appearance features of each visual unit provide visual evidence. The system can assist in identifying component types through computer vision object detection.

[0069] Structural relationships within the layout container tree: A single visual unit can be part of a composite component. The system analyzes the structural relationships within the layout container tree to verify whether the visual units conform to the typical structural paradigm of standard front-end components.

[0070] The system integrates the above three types of information, compares the matching confidence of each visual unit with each standard front-end component, and thus determines the visual unit as the corresponding standard front-end component.

[0071] In some optional implementations, step S130, which involves semantic matching of each visual unit based on its identification information, visual attributes, and structural relationships in the layout container tree to map each visual unit to a corresponding standard front-end component, includes: performing natural language semantic analysis on the identification information of each visual unit to obtain semantic confidence; performing computer vision object detection on the visual attributes of each visual unit to obtain visual confidence; analyzing the structural confidence of each visual unit based on the structural relationships in the layout container tree; calculating a multimodal comprehensive confidence based on the semantic confidence, visual confidence, and structural confidence; and mapping each visual unit to a corresponding standard front-end component based on the multimodal comprehensive confidence.

[0072] The system extracts the identifier information of each visual unit and performs semantic analysis on the identifier information using a pre-trained Natural Language Processing (NLP) model. The model outputs the probability distribution of the visual unit belonging to each standard front-end component as the semantic confidence score. For example, a visual unit may have a probability of belonging to standard front-end component A (a%), b probability of belonging to standard front-end component B (b%), and c probability of belonging to standard front-end component C (c%).

[0073] It should be noted that the above semantic analysis can be achieved using a variety of known natural language processing models, and this application does not limit it to a single one.

[0074] As an optional implementation, the system can employ a pre-trained semantic model based on deep learning, such as the Bidirectional Encoding Representation Model Based on Transformers (BERT), Text Convolutional Neural Network (TextCNN), or rule-based Named Entity Recognition (NER) model. The specific network structures and parameters of these models are well-known in the art and will not be elaborated upon here. The model's input is a string of identifier information for the visual unit, and the output is the probability distribution of the visual unit belonging to a standard set of front-end components (e.g., buttons, input boxes, checkboxes, cards, icons, etc.).

[0075] For model training, supervised training can be performed using publicly available datasets or datasets labeled according to specific application scenarios. The labeling format for training data is "identifier information" corresponding to "standard front-end components." For example, the "login button" (identifier information) is labeled as "button" (standard front-end component); the "magnifying glass icon" (identifier information) is labeled as "icon" (standard front-end component). The goal of model training is to minimize the cross-entropy loss between the predicted standard front-end components and the ground truth labels. Pre-trained models can be fine-tuned on the dataset.

[0076] The system extracts the visual attributes of each visual unit, such as cropping image patches of visual units from online design drafts or rendered pages. A pre-trained computer vision object detection model (CV) is used to infer the meaning of these image patches (after normalization preprocessing). The model outputs the probability distribution of the visual unit belonging to each standard front-end component as the visual confidence score. For example, a visual unit might have a probability of A% belonging to standard front-end component A, B% belonging to standard front-end component B, and C% belonging to standard front-end component C.

[0077] It should be noted that the above visual analysis can be achieved using a variety of known computer vision target detection models, and this application does not limit it to a single one.

[0078] As an optional implementation, the system can employ a deep learning-based object detection network, such as the YOLO series, Faster R-CNN (a convolutional neural network based on region proposal), SSD (Single-Shot Multi-Box Detector), or DETR (a transformer-based detection model). The specific network structures and parameters of these models are well-known in the art and will not be elaborated upon here. The model's input is an image patch of a visual unit (typically preprocessed with normalization), and the output is the probability distribution of the image patch belonging to a set of standard front-end components.

[0079] For model training, supervised training can be performed using publicly available image datasets or datasets labeled according to specific application scenarios. The labeling format for training data is "image patch" corresponding to "standard front-end component". For example, an image patch containing a magnifying glass icon is labeled "search icon"; an image patch containing a circular or square checkbox is labeled "checkbox". The goal of model training is to minimize the cross-entropy loss between the predicted standard front-end component and the ground truth label. For pre-trained models, fine-tuning can be performed on the aforementioned datasets.

[0080] In addition, the system can also use the structured style information extracted from the intermediate representation layer as auxiliary features, which are then fused with image patches and input into a lightweight classifier, thereby avoiding reliance on complex deep learning models.

[0081] The system further combines the structural relationships in the layout container tree and uses a predefined structural paradigm rule library to verify the structural rationality of the component types of each visual unit, such as the container type, parent-child relationship, and arrangement. It verifies whether the components conform to the typical structural paradigm of standard front-end components and uses the degree of conformity as the structural confidence level.

[0082] The structural paradigm rule base defines typical structural characteristics for each standard front-end component. For example, container type characteristics (e.g., list item components should usually be located inside a list container), parent-child relationship characteristics (e.g., icon components are usually direct subordinates of button components), and arrangement characteristics (e.g., multiple buttons are usually arranged horizontally).

[0083] The system calculates the degree of conformity between any visual unit and each standard front-end component based on the structural paradigm rule base. Through quantification rules, the system can transform fuzzy structured verification into calculable confidence scores. For example, a visual unit may have a conformity of a'% with standard front-end component A, b'% with standard front-end component B, and c'% with standard front-end component C.

[0084] Finally, the system combines semantic confidence, visual confidence, and structural confidence to calculate the multimodal comprehensive confidence score. This is expressed by the following formula (3): , formula (3); in, , , Let each represent a weight coefficient and satisfy the following conditions: The system supports custom configuration of weight coefficients based on actual scenarios. Indicates semantic confidence. Indicates visual confidence level. This indicates the structural confidence level.

[0085] For a visual unit, calculate the multimodal comprehensive confidence value of all standard front-end components corresponding to it, and take the standard front-end component with the highest value as the matching mapping object.

[0086] By integrating a multimodal semantic matching method that combines natural language semantic analysis, computer vision object detection, and layout container tree structure relationship verification, the accuracy and robustness of standard front-end component matching are significantly improved.

[0087] Step S140: Generate component code corresponding to the standard front-end component based on the flexible layout parameters, visual attributes, and interaction logic information.

[0088] The main purpose of this step is code assembly, and its core task is to integrate all the above results to generate component code corresponding to standard front-end components.

[0089] The system can generate layout code based on flexible layout parameters (Cascading Style Sheets) to ensure responsiveness across different screen sizes. For each visual unit, the system converts visual attributes into style attributes of standard front-end components based on the mapping results, and then generates corresponding component instance code based on the mapped standard front-end components and style attributes. The system extracts the interactive behaviors of each visual unit (e.g., state switching, variant switching, and page navigation) from the interaction logic information, and generates interaction code accordingly. The layout code, component instance code, and interaction code are then assembled into component code according to the syntax specifications of the target front-end framework.

[0090] In some optional implementations, step S140, generating component code corresponding to the standard front-end component based on the flexible layout parameters, visual attributes, and interaction logic information, includes: generating layout code based on the flexible layout parameters; generating component instance code based on the visual attributes and the corresponding standard front-end component; generating interaction code based on the interaction logic information; and assembling the layout code, component instance code, and interaction code according to the syntax structure of the target front-end framework to generate component code corresponding to the standard front-end component.

[0091] During the layout code generation phase, the system uses a layout container tree as its organizational framework, traversing each container in the tree according to their nesting relationships and arrangement order. For each visual unit within a container, the system obtains the determined flexible layout parameters and generates the corresponding layout code for the target front-end framework based on these parameters. This ensures that the final generated layout code aligns with the designer's layout intentions while also conforming to the component-based development specifications of front-end engineering.

[0092] During the component instance code generation phase, the system determines the standard front-end component corresponding to each visual unit based on the mapping results, and maps the visual attributes in the intermediate presentation layer to the component attribute parameters (Props) of the standard front-end component. Based on this, component instance code is generated, including component tags, attribute bindings, etc., so that the component instance code can accurately reproduce the design's visual effect.

[0093] During the interaction code generation phase, the system extracts interaction logic information between visual units from the intermediate presentation layer, which may include prototype connections, state transitions, variant transitions, page navigation, etc. Based on the structured parsed interaction logic, it generates page logic that matches the target front-end framework. For example, for prototype connections, a boolean state variable and a state update function are generated, and the function is bound to the button's click event; for variant transitions, the implementation methods are differentiated: regular hover variants generate hover pseudo-class styles in Cascading Style Sheets, while custom interaction variants generate events such as mouse in / out; for page navigation, routing call logic is generated and bound to the click events of the corresponding components.

[0094] Finally, the system assembles the layout code, component instance code, and interaction code according to the target framework's syntax specifications, generating complete component code corresponding to the standard front-end component. This code can be directly imported into front-end projects without manual adjustments to layout, styles, and interaction logic, effectively improving page development efficiency and project quality.

[0095] Step S150: Generate a unique fingerprint identifier for each visual unit, bind the unique fingerprint identifier to the corresponding page element in the component code, and integrate the component code carrying the unique fingerprint identifier into the front-end page file according to the engineering specifications of the target front-end framework.

[0096] The main purpose of this step is to establish a persistent mapping relationship between visual units and code elements, thereby forming the front-end page files. After the previous steps, the system has generated complete component code from the design metadata, but a traceable association has not yet been established between the visual units in the design and the generated code elements. When subsequent design changes or code modifications need to be reverse-synchronized, the lack of an accurate location mechanism will prevent incremental updates.

[0097] To this end, the system generates a globally unique fingerprint for each visual unit. This fingerprint is generated based on information such as the visual unit's location in the design metadata, ensuring that the same visual unit always generates the same fingerprint, thus supporting cross-version tracking. When generating component code, the system writes this fingerprint as a custom attribute into the corresponding page element tag.

[0098] In some optional implementations, step S150 involves generating a unique fingerprint identifier for each visual unit, binding the unique fingerprint identifier to the corresponding page element in the component code, and integrating the component code carrying the unique fingerprint identifier into a front-end page file according to the engineering specifications of the target front-end framework. This includes: generating a unique fingerprint identifier using a hash algorithm based on the path information of each visual unit in the design metadata; writing the unique fingerprint identifier as a custom attribute into the tag of the corresponding page element in the component code; using the layout container tree as the organizational skeleton, concatenating the component code carrying the unique fingerprint identifier according to the depth-first traversal order of the layout container tree, and outputting it as a front-end page file according to the engineering specifications of the target front-end framework.

[0099] The system generates a unique fingerprint for each visual unit. The algorithm for generating this fingerprint integrates the complete path information of the visual unit in the design metadata to ensure uniqueness and stability. Specifically, a globally unique fingerprint can be generated using the following formula (4): , formula (4); in, This represents the value calculated using a hash algorithm, which represents the complete path string from the design root node to the visual unit. Indicates the timestamp of the first parsing. Indicates the version number. This represents the hash function, which can be an MD5, SHA-1, or SHA-256 algorithm.

[0100] When generating component code, the system writes this unique fingerprint as a custom attribute (such as data-origin-id) into the tag of the corresponding page element. In this way, each page element "carries" a unique identifier from its design source.

[0101] This process establishes a precise one-to-one correspondence between each visual unit in the design and the generated code element. Subsequently, when the design changes, the system can quickly locate the affected code element based on the fingerprint identifier, updating only the changed portion while retaining the business logic manually added by the developer. Conversely, when the code is modified, the system can also trace back to the corresponding visual unit in the design based on the fingerprint identifier, achieving bidirectional synchronization.

[0102] After generating and binding unique fingerprints for each visual unit, the system needs to organize the scattered component code carrying the fingerprints into a complete and runnable front-end page file according to the design intent. Using a layout container tree as the organizational skeleton, a depth-first traversal strategy is adopted to splice and integrate the code snippets corresponding to each container according to their hierarchical relationship, and output them as the final front-end page file according to the engineering specifications of the target front-end framework.

[0103] This process ensures that the final generated front-end page files strictly adhere to the nesting intent of the design draft in terms of DOM structure, maintain responsive and flexible layout characteristics in terms of style, retain complete prototype behavior in terms of interaction logic, and each page element carries a traceable design source fingerprint identifier, laying the foundation for subsequent bidirectional incremental synchronization.

[0104] In some optional implementations, the method further includes: generating a modified intermediate presentation layer in response to receiving modified design metadata, locating the modified visual unit based on a unique fingerprint identifier, and updating only the page element code corresponding to the modified visual unit; or, in response to receiving a modified front-end page file, parsing the modified front-end page file to extract the modified component code, comparing the new and old component codes to identify the modified page element code, locating the modified visual unit based on a unique fingerprint identifier, and updating only the design metadata of the modified visual unit.

[0105] When the original design metadata is modified, the system receives the changed design metadata. The system regenerates the changed intermediate presentation layer and regenerates a unique fingerprint for each visual unit. The system simultaneously loads the existing intermediate presentation layer and the existing unique fingerprint.

[0106] The system compares the old and new fingerprint identifiers: For visual units that match the fingerprint identifier, the system further compares the old and new intermediate representation layers. Update code for that visual unit is generated only when the intermediate representation layer changes (e.g., the color changes from red to blue), while other code content is completely preserved.

[0107] For visual units with newly added fingerprint identifiers, the system generates corresponding new code snippets and inserts them into the appropriate positions.

[0108] For visual units with missing fingerprint identifiers, the system outputs a prompt or automatically deletes the corresponding code snippet.

[0109] When the front-end page file is modified, the system can respond by receiving the updated front-end page file, parsing the modified component code, comparing the old and new component code, and identifying the differences in element code. Based on a unique fingerprint identifier, it accurately locates the visual unit in the design metadata that has changed. The system can automatically modify the design metadata or provide a detailed change report.

[0110] Through the aforementioned two-way synchronization mechanism, this application solves the pain point of the difficulty in secondary maintenance of automated tools and realizes true "design-code" collaboration.

[0111] The page generation method provided in this application can be applied to the financial field.

[0112] In banking or securities application development, there are numerous pages involving transaction record queries, financial product displays, and data dashboards. These pages typically contain complex tables, charts, card lists, and multi-state interactions. Using the technical solution presented in this application, designers only need to output standard page design drafts (online or offline), and the system automatically converts the design metadata into an intermediate presentation layer and generates responsive, flexible layout component code, which is then integrated into the front-end page files. Developers do not need to manually restore page styles and basic interactions; they can focus solely on writing business logic. When page text or color schemes require batch adjustments, after designers modify the design drafts, the system updates only the changed element code based on a unique fingerprint identifier, significantly reducing maintenance costs.

[0113] The page generation method provided in this application can be applied to the medical field.

[0114] In the development of medical information systems or online consultation platforms, page content often requires a high degree of compliance and professionalism. These pages have strict requirements for the accuracy of form components, the clarity of page structure, and the standardization of information display. Using the technical solution of this application, the system can accurately map visual units such as input boxes, radio buttons, checkboxes, and date pickers in the design draft to standard front-end components, and generate responsive, flexible layout component code, which is then integrated into the front-end page file. When form fields or layouts in the front-end page file are adjusted, the system supports rapid synchronization of design draft changes.

[0115] As can be seen from the above scenario examples, this application not only solves the problem of automated conversion from design to code from a technical perspective, but also effectively improves development efficiency, reduces human error rate, and achieves long-term collaborative maintenance of design and code in industries with complex and frequently changing business processes such as finance and healthcare.

[0116] Figure 2 A schematic diagram of the structure of a page generation system according to an embodiment of this application is shown. (Refer to...) Figure 2 As shown, the page generation system 200 includes: The data parsing unit 210 is used to acquire design metadata and convert the design metadata into an intermediate representation layer according to the input source type of the design metadata; wherein, the intermediate representation layer includes the identification information, absolute position information, visual attributes and interaction logic information of each visual unit; The layout inference unit 220 is used to determine the arrangement relationship between visual units based on absolute position information through a recursive clustering algorithm, and to construct a layout container tree based on the arrangement relationship to convert the absolute position information into flexible layout parameters. Semantic matching unit 230 is used to perform semantic matching on each visual unit according to the identification information, visual attributes and structural relationships in the layout container tree to map each visual unit to the corresponding standard front-end component. The code generation unit 240 is used to generate component code corresponding to standard front-end components based on flexible layout parameters, visual attributes, and interaction logic information. The fingerprint binding unit 250 is used to generate a unique fingerprint identifier for each visual unit, bind the unique fingerprint identifier to the corresponding page element in the component code, and integrate the component code carrying the unique fingerprint identifier into the front-end page file according to the engineering specifications of the target front-end framework.

[0117] In some optional implementations, in the above system, the data parsing unit 210 is used to: when the input source type is an online design draft, obtain the original data tree structure of the online design draft, extract the name, layout, style, and interaction information of each visual unit, and normalize it into an intermediate representation layer; when the input source type is an offline design file, perform a deserialization operation on the offline design file, extract the name, layout, style, and interaction information of each visual unit through a private protocol mapping table, and then convert it into an intermediate representation layer; when the input source type is interactive source code, render the interactive source code in a headless browser, extract the name, layout, style, and interaction information of each visual unit through script injection, and then convert it into an intermediate representation layer.

[0118] In some optional implementations, in the above system, the layout inference unit 220 is used for: vertical projection cutting: calculating the vertical projection overlap of any two visual units within the current processing area based on absolute position information; when the vertical projection overlap exceeds a preset threshold, determining that the two visual units belong to the same horizontal layout row, aggregating the visual units belonging to the same horizontal layout row into the same horizontal container to obtain at least one horizontal container, and the horizontal containers naturally form a vertical arrangement relationship according to the vertical coordinate order; horizontal projection cutting: for each newly generated horizontal container, calculating the horizontal projection overlap of each visual unit inside based on absolute position information; when the horizontal projection overlap exceeds a preset threshold... When two visual units are determined to belong to the same vertical layout column, all visual units belonging to the same vertical layout column are aggregated into the same vertical container to obtain at least one vertical container. The vertical containers are naturally arranged horizontally according to the order of the horizontal coordinate. Each newly generated vertical container is used as the current processing area, and vertical projection cutting and horizontal projection cutting are repeatedly performed until the current processing area contains only one visual unit or can no longer be cut, forming a layout container tree. The geometric gaps of the direct subordinates of each container in the layout container tree in the main axis direction are matched as the spacing attribute of the flexible layout, and the arrangement of the direct subordinates of each container in the layout container tree is mapped as the alignment attribute of the flexible layout.

[0119] In some optional implementations, in the above system, the semantic matching unit 230 is used to: perform natural language semantic analysis on the identification information of each visual unit to obtain semantic confidence; perform computer vision target detection on the visual attributes of each visual unit to obtain visual confidence; analyze the structural confidence of each visual unit according to the structural relationship in the layout container tree; calculate the multimodal comprehensive confidence by combining the semantic confidence, visual confidence, and structural confidence; and map each visual unit to the corresponding standard front-end component according to the multimodal comprehensive confidence.

[0120] In some optional implementations, in the above system, the code generation unit 240 is used to: generate layout code based on flexible layout parameters; generate component instance code based on visual attributes and corresponding standard front-end components; generate interaction code based on interaction logic information; and assemble the layout code, component instance code, and interaction code according to the syntax specifications of the target front-end framework to generate component code corresponding to the standard front-end components.

[0121] In some optional implementations, in the above system, the fingerprint binding unit 250 is used to: generate a unique fingerprint identifier using a hash algorithm based on the path information of each visual unit in the design metadata; write the unique fingerprint identifier as a custom attribute into the tag of the corresponding page element in the component code; and, using the layout container tree as the organizational skeleton, concatenate the component code carrying the unique fingerprint identifier according to the depth-first traversal order of the layout container tree, and output it as a front-end page file according to the engineering specifications of the target front-end framework.

[0122] In some optional implementations, the system further includes: a bidirectional synchronization unit, configured to generate a modified intermediate presentation layer in response to receiving modified design metadata, locate the modified visual unit based on a unique fingerprint identifier, and update only the page element code corresponding to the modified visual unit; or, in response to receiving a modified front-end page file, parse the modified front-end page file to extract the modified component code, compare the new and old component codes to identify the modified page element code, locate the modified visual unit based on a unique fingerprint identifier, and update only the design metadata of the modified visual unit.

[0123] It should be noted that the aforementioned page generation system 200 can implement all of the aforementioned page generation methods, so further details will not be provided.

[0124] Figure 3 This invention illustrates a schematic diagram of the structure of an electronic device according to an embodiment of the present application. Figure 3 As shown, the electronic device includes a processor, memory, and a network interface connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile and / or volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and a database. The internal memory provides an environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The network interface is used for communication with external devices via a network connection. When the computer program is executed by the processor, it implements the functions or steps of the page generation method.

[0125] In one embodiment, the electronic device provided in this application includes a memory and a processor. The memory stores a database and a computer program that can run on the processor. When the processor executes the computer program, it implements the steps of the aforementioned page generation method.

[0126] The above is as stated in this application. Figure 2 The page generation system method disclosed in the illustrated embodiments can be applied to a processor or implemented by a processor. During implementation, each step of the above method can be completed by integrated logic circuits in the processor's hardware or by instructions in software form. The processor can be a general-purpose processor, including a Central Processing Unit (CPU), a Network Processor (NP), etc.; it can also be a Digital Signal Processor (DSP), an Application Specific Integrated Circuit (ASIC), a Field-Programmable Gate Array (FPGA), or other programmable logic devices, discrete gate or transistor logic devices, or discrete hardware components. The steps of the method disclosed in the embodiments of this application can be directly embodied as being executed by a hardware decoding processor, or executed by a combination of hardware and software modules in the decoding processor. The software modules can reside in random access memory, flash memory, read-only memory, programmable read-only memory, electrically erasable programmable memory, registers, or other mature storage media in the art. This storage medium is located in memory, and the processor reads information from the memory and, in conjunction with its hardware, completes the steps of the above method.

[0127] In one embodiment, a computer-readable storage medium is also provided, on which a computer program is stored, the computer program implementing the steps of a page generation method when executed by a processor.

[0128] It should be noted that the functions or steps that the above-mentioned electronic devices or computer-readable storage media can achieve can be referred to the relevant descriptions in the foregoing method embodiments. To avoid repetition, they will not be described one by one here.

[0129] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), Synchlink, DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0130] Those skilled in the art will clearly understand that, for the sake of convenience and brevity, the above-described division of functional units and modules is used as an example. In practical applications, the above functions can be assigned to different functional units and modules as needed, that is, the internal structure of the system can be divided into different functional units or modules to complete all or part of the functions described above.

[0131] It should be noted that any AI models, software tools, or components not belonging to this company appearing in the embodiments of this application are merely illustrative examples and do not represent actual use. All user personal information involved in the embodiments of this application has been authorized (with the knowledge and consent) by the relevant parties or has been fully authorized by all parties, and the executing entity may obtain it through various legal and compliant means. The collection, storage, use, processing, transmission, provision, and disclosure of the information, data, and signals involved all comply with relevant laws and regulations and do not violate public order and good morals.

[0132] The above-described embodiments are only used to illustrate the technical solutions of the present invention, and are not intended to limit it. Although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features. Such modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention, and should all be included within the protection scope of the present invention.

Claims

1. A page generation method, characterized in that, include: Obtain design metadata and convert it into an intermediate representation layer based on the input source type of the design metadata; the intermediate representation layer includes the identification information, absolute position information, visual attributes and interaction logic information of each visual unit; Based on absolute position information, the arrangement relationship between visual units is determined by a recursive clustering algorithm. A layout container tree is then constructed based on the arrangement relationship to convert the absolute position information into flexible layout parameters. Based on the identification information, visual attributes, and structural relationships in the layout container tree, semantic matching is performed on each visual unit to map each visual unit to the corresponding standard front-end component. Based on the flexible layout parameters, visual attributes, and interaction logic information, generate component code corresponding to standard front-end components; Generate a unique fingerprint for each visual unit, bind the unique fingerprint to the corresponding page element in the component code, and integrate the component code carrying the unique fingerprint into the front-end page file according to the engineering specifications of the target front-end framework.

2. The page generation method according to claim 1, characterized in that, The process of acquiring design metadata, and converting the design metadata into an intermediate representation layer based on the input source type of the design metadata, includes: When the input source type is an online design draft, the original data tree structure of the online design draft is obtained, and the name, layout, style, and interaction information of each visual unit are extracted and normalized into an intermediate representation layer. When the input source type is an offline design file, a deserialization operation is performed on the offline design file. The name, layout, style, and interaction information of each visual unit are extracted through a private protocol mapping table and then converted into an intermediate presentation layer. When the input source type is interactive source code, the interactive source code is rendered in a headless browser. The name, layout, style, and interaction information of each visual unit are extracted by injecting scripts and then converted into an intermediate presentation layer.

3. The page generation method according to claim 1, characterized in that, The process of determining the arrangement relationship between visual units based on absolute position information using a recursive clustering algorithm, and constructing a layout container tree based on the arrangement relationship to convert the absolute position information into flexible layout parameters includes: Vertical projection cutting: Calculate the vertical projection overlap of any two visual units in the current processing area based on the absolute position information. When the vertical projection overlap exceeds the preset threshold, it is determined that the two visual units belong to the same horizontal layout row. Aggregate the visual units belonging to the same horizontal layout row into the same horizontal container to obtain at least one horizontal container. The horizontal containers naturally form a vertical arrangement relationship according to the vertical coordinate order. Horizontal projection cutting: For each newly generated horizontal container, the horizontal projection overlap of each visual unit inside is calculated based on the absolute position information. When the horizontal projection overlap exceeds the preset threshold, it is determined that two visual units belong to the same vertical layout column. The visual units belonging to the same vertical layout column are aggregated into the same vertical container to obtain at least one vertical container. The vertical containers naturally form a horizontal arrangement relationship according to the horizontal coordinate order. Each newly generated vertical container is used as the current processing area. Vertical projection cutting and horizontal projection cutting are repeatedly performed until the current processing area contains only one visual unit or can no longer be cut, thus forming a layout container tree. Match the geometric gaps of the direct subordinates of each container in the layout container tree along the main axis to the spacing property of the Flexbox layout, and map the arrangement of the direct subordinates of each container in the layout container tree to the alignment property of the Flexbox layout.

4. The page generation method according to claim 1, characterized in that, The step of semantically matching each visual unit based on its identifier information, visual attributes, and structural relationships in the layout container tree to map each visual unit to its corresponding standard front-end component includes: Natural language semantic analysis is performed on the identification information of each visual unit to obtain semantic confidence. Computer vision target detection is performed on the visual attributes of each visual unit to obtain visual confidence scores; Analyze the structural confidence of each visual unit based on the structural relationships in the layout container tree; The multimodal comprehensive confidence score is calculated by combining semantic confidence, visual confidence, and structural confidence. Each visual unit is mapped to a corresponding standard front-end component based on the multimodal comprehensive confidence score.

5. The page generation method according to claim 1, characterized in that, The step of generating component code corresponding to standard front-end components based on flexible layout parameters, visual attributes, and interaction logic information includes: Generate layout code based on flexible layout parameters; Generate component instance code based on visual attributes and corresponding standard front-end components; Generate interaction code based on interaction logic information; Following the syntax specifications of the target front-end framework, the layout code, component instance code, and interaction code are assembled according to the syntax structure to generate component code corresponding to the standard front-end components.

6. The page generation method according to claim 1, characterized in that, The process involves generating a unique fingerprint for each visual unit, binding the unique fingerprint to the corresponding page element in the component code, and integrating the component code carrying the unique fingerprint into the front-end page file according to the engineering specifications of the target front-end framework, including: Based on the path information of each visual unit in the design metadata, a unique fingerprint identifier is generated using a hash algorithm. Write the unique fingerprint identifier as a custom attribute into the tag of the corresponding page element in the component code; Using the layout container tree as the organizational framework, the code of each component carrying a unique fingerprint is concatenated according to the depth-first traversal order of the layout container tree, and output as a front-end page file in accordance with the engineering specifications of the target front-end framework.

7. The page generation method according to claim 1, characterized in that, The method further includes: In response to receiving the changed design metadata, a revised intermediate presentation layer is generated. The visual unit that has changed is located based on the unique fingerprint identifier, and only the page element code corresponding to the visual unit that has changed is updated. or, In response to receiving a modified front-end page file, the modified front-end page file is parsed to extract the modified component code. The old and new component codes are compared to identify the modified page element code. The modified visual unit is located based on a unique fingerprint identifier, and only the design metadata of the modified visual unit is updated.

8. A page generation system, characterized in that, include: The data parsing unit is used to acquire design metadata and convert it into an intermediate representation layer according to the input source type of the design metadata. The intermediate representation layer includes the identification information, absolute position information, visual attributes, and interaction logic information of each visual unit. The layout inference unit is used to determine the arrangement relationship between visual units based on absolute position information through a recursive clustering algorithm, and to construct a layout container tree based on the arrangement relationship to convert the absolute position information into flexible layout parameters. The semantic matching unit is used to perform semantic matching on each visual unit based on the identification information, visual attributes and structural relationships in the layout container tree, so as to map each visual unit to the corresponding standard front-end component. The code generation unit is used to generate component code based on various standard front-end components, flexible layout parameters, and interaction logic information; The fingerprint binding unit is used to generate a unique fingerprint identifier for each visual unit, bind the unique fingerprint identifier to the corresponding page element in the component code, and integrate the component code carrying the unique fingerprint identifier into the front-end page file according to the engineering specifications of the target front-end framework.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the page generation method as described in any one of claims 1 to 7.

10. A computer-readable storage medium storing a computer program, characterized in that, When the computer program is executed by a processor, it implements the steps of the page generation method as described in any one of claims 1 to 7.

Images