Front-End Code Generation Using DOM Tree Layout Inference
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing front-end development processes are inefficient and labor-intensive, as they require manual conversion of UI drafts into codes, lacking automation and productivity enhancement.
Innovation Solution
A method and apparatus for generating front-end code by acquiring attribute information of view elements, determining child view elements, constructing a DOM tree based on row and column correlation information, and generating a complete front-end code using a DOM tree.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Productivity
If manual conversion of UI drafts into codes is used, then code accuracy can be maintained, but development efficiency deteriorates
Solution Approach 1:
The system automatically analyzes UI draft images, extracts view element attributes, determines hierarchical relationships, and generates front-end code without human intervention. The automated code generation apparatus performs the entire conversion process self-service, eliminating manual coding while maintaining high accuracy through intelligent image recognition and DOM tree construction algorithms
Solution Approach 2:
The manual mechanical process of converting UI drafts to code is replaced by an automated system using image recognition technology, attribute extraction algorithms, and automatic code generation. The system substitutes human manual operations with automated computational processes that analyze UI images and generate corresponding front-end code automatically
2Productivity
If automated code generation is implemented, then development efficiency improves, but system complexity increases
Solution Approach 1:
The code generation process is divided into distinct modular stages: UI image acquisition, view element attribute extraction, hierarchical relationship determination, DOM tree construction, and front-end code generation. Each module handles a specific task independently, making the complex system manageable and maintainable while achieving high automation efficiency
Solution Approach 2:
The system introduces intermediate data structures such as view element attribute information and DOM trees as mediators between the input UI images and the output front-end code. These intermediaries simplify the transformation process by breaking down the complex conversion into manageable steps with clear data flow and structure
3Manufacturing precision
If view elements with partial superimposition relationship are included as children, then element relationships are preserved, but DOM tree accuracy deteriorates
Solution Approach 1:
The system extracts and identifies view elements that have partial superimposition relationships with parent elements, then separates them into independent sibling elements in the DOM tree rather than including them as children. This extraction approach maintains DOM tree accuracy by ensuring each child element is fully contained within its parent while preserving the visual layering information through separate element nodes
Data Source
AI summary
The present disclosure provides a method and apparatus for generating a front-end code. The method includes: acquiring attribute information of view elements in a target UI view interface; determining child view elements corresponding to a given parent view element based on the attribute information of the view elements; determining, according alternately to row correlation information and column correlation information between the child view elements, nodes at different levels of a DOM, tree corresponding to the parent view element except a root node until each leaf node is an individual child view element, to obtain the DOM tree; and generating a complete front-end code corresponding to the target UI view interface based on the DOM tree.