A method and system for generating software front-end pages from image files

Abstract

This invention provides a method and system for generating software front-end pages from image files. The method includes processing the input image file using AI image recognition to extract structured information corresponding to visual elements, where the structured information corresponds to the title and data in the image; identifying the position and size of each front-end element in the image; determining the position data of each front-end element on the page through coordinate positioning; converting the identified structured information and position data into a front-end configuration data format supported by a low-code platform; integrating the front-end configuration data into a complete front-end page configuration file; and importing the generated front-end page configuration file into the low-code platform using the platform's designer interface to automatically generate the corresponding front-end page. The system includes an information extraction module, a file configuration module, and a page generation module. This invention supports converting screenshots of existing software system interfaces into front-end interfaces on a low-code platform.

Description

Technical Field

[0001] This invention relates to the field of application development technology, and in particular to a method and system for generating software front-end pages based on image files. Background Technology

[0002] Low-code platforms are development tools that allow developers to quickly build applications through a visual interface and minimal coding. The front-end designer of a low-code platform simplifies the front-end development process through visual drag-and-drop and configuration methods; it includes a rich library of controls, supports data binding, logic orchestration, and real-time preview, helping developers quickly build high-quality front-end pages. The flexibility and scalability of the front-end designer make it suitable for various application scenarios, from simple form pages to complex business systems, all of which can be quickly implemented through a low-code platform. However, when manually designing schematics or converting pages from existing software systems into front-end pages, inefficiency can occur. The main reasons include differences between the design schematics and the front-end implementation, the inefficiency of manual coding, incompatibility of the technology stack of legacy systems, and the complexity of data interaction.

[0003] Prior art 1, application number: CN202211642067.6, discloses a page development method, apparatus, electronic device, and computer-readable storage medium, including: creating multiple target pages based on a preset page component library; combining the multiple target pages based on preset event rules to generate a front-end page system. It obtains the corresponding target pages through the preset page component library and combines multiple target pages according to event rules to generate a complete front-end page system for the software. Although it can develop and generate corresponding front-end page systems according to the user's actual development needs and provide realistic usage effects in the generated front-end page system, forming a complete interactive demonstration system, it effectively reduces the time spent communicating with users and modifying created pages, simplifies communication and development processes, and thus improves the development efficiency of software front-end pages, meeting various user development needs; however, it lacks image recognition functionality, resulting in low efficiency when encountering manually designed drawings or converting pages from existing software systems into front-end pages.

[0004] Prior art 2, application number CN202110808096.4, discloses a data update method and related apparatus for storage management software, including: determining whether a received command is a configuration command; if so, executing the configuration command; and updating the data on the front-end page of the storage management software according to the configuration command when the configuration command is successfully executed. Although determining whether the received command is a configuration command and then executing the configuration command, and directly updating the data on the entire front-end page according to the configuration command when the configuration command is successfully executed, instead of continuously requesting data from the back-end page to update the data, improves the efficiency of data updates in storage management software, its function is relatively simple, and the efficiency of request processing needs to be further improved.

[0005] Prior art three, application number: CN 202311087351.6, discloses a software service resource deployment method, apparatus, and medium for providing guidance on software resource deployment. Addressing the issue of insufficient accuracy in privatized scenarios, this method provides a software service resource deployment approach. It collects access path information and service interface information from user access to the software service's front-end pages to predict page and interface access trends. Based on these trends, it determines the required performance indicators and corresponding resource deployment schemes for each service interface to guide resource deployment. While it does not involve core sensitive user data and can meet data security requirements in privatized deployment scenarios, compared to a rough resource estimation based on user scale, using data that accurately reflects user behavior to predict access trends yields performance indicators closer to reality and provides more accurate resource deployment suggestions. However, it cannot solve the problem of manually designed diagrams or converting existing software system pages into front-end pages, leading to deployment schemes that do not match actual applications and failing to effectively improve the quality of software services.

[0006] Current technologies 1, 2, and 3 suffer from low efficiency when converting manually designed diagrams or pages from existing software systems into front-end pages. Therefore, this invention provides a method and system for generating software front-end pages from image files. Summary of the Invention

[0007] To address the aforementioned technical problems, this invention provides a method for generating a software front-end page based on an image file, comprising the following steps:

[0008] AI image recognition is used to process the input image file, identify visual elements such as text, buttons and input boxes in the image, and extract the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image.

[0009] The system identifies the position and size of each front-end element in the image; converts the identified structured information and position data into a front-end configuration data format supported by the low-code platform; and integrates the front-end configuration data into a complete front-end page configuration file.

[0010] By using the designer interface of the low-code platform, the generated front-end page configuration file can be imported into the low-code platform, and the corresponding front-end page can be automatically generated.

[0011] Optionally, the process of extracting the structured information corresponding to visual elements, and identifying visual elements in an image using an object detection algorithm, includes the following steps:

[0012] The image is preprocessed by smoothing it with a Gaussian kernel to remove noise; contrast is enhanced by contrast-limited adaptive histogram equalization; the resolution is adjusted using an interpolation kernel; and visual elements are extracted from the image through convolution and feature pooling.

[0013] The target region of each visual element is generated by a region proposal network. The generated target region proposals are refined by a regression algorithm to generate bounding boxes, remove overlapping bounding boxes, and retain the optimal bounding box.

[0014] The detected optimal bounding boxes are annotated on the original image, and the final result is output; the final bounding boxes are annotated on the original image with color to generate the annotated image.

[0015] Optionally, coordinate positioning can be used to determine the position data of each front-end element on the page, including its specific location and size.

[0016] Optionally, the process of integrating front-end configuration data into a complete front-end page configuration file includes the following steps:

[0017] The extracted structured information is mapped in multiple dimensions with the location data obtained by coordinate positioning, visual elements are associated with their functional attributes, and the spatial positions of visual elements and their functional attributes on the page are grouped in a hierarchical manner.

[0018] After the multi-dimensional mapping is completed, the structured information and position data are verified and optimized in real time; the relative position and size of the elements are automatically adjusted by dynamically calculating the layout dependency of each element; the page is divided into multiple independent modules, each module corresponding to an independent configuration unit.

[0019] Based on the modular configuration generation, a hierarchical front-end page configuration file is built to define the overall layout and global attributes of the page, the layout and functions of each module, and the attributes, positions and interactive behaviors of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponding to a module.

[0020] Optionally, the process of associating a visual element with its functional attributes includes the following steps:

[0021] The semantic analysis engine performs in-depth analysis on the extracted structured information to identify the semantic features of each visual element and its corresponding functional attributes.

[0022] The spatial location data of visual elements is mapped to their functional attributes in a multi-dimensional way. The position of the element on the page is obtained through a coordinate positioning system, and the spatial dependency relationship of the element is dynamically analyzed. The spatial location of the element and its functional attributes are mapped in a multi-dimensional space to form a spatial relationship diagram with a hierarchical structure.

[0023] After completing semantic and spatial mapping, a hierarchical tree-based organization is adopted to group elements level by level according to the logical relationship of their functional attributes and the hierarchical relationship of their spatial locations.

[0024] Optionally, through multimodal data fusion, the feature vectors of visual elements can be aligned with the semantic vectors of their functional attributes in multiple dimensions.

[0025] Optionally, each group corresponds to a hierarchical node, and the nodes are connected through spatial dependencies and functional associations to form a multi-dimensional hierarchical structure.

[0026] Optionally, the process of forming a spatial relationship diagram with a hierarchical structure includes the following steps:

[0027] Construct a multi-dimensional spatial coordinate system, which includes three-dimensional spatial coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantizing and vectorizing the functional features of the elements, and each functional attribute corresponds to an independent dimension.

[0028] The functional attributes of each visual element are vectorized and transformed into multi-dimensional vectors containing semantic information of the functional attributes, and the spatial location data of the elements are integrated.

[0029] The hybrid mapping algorithm aligns and maps functional attribute vectors with spatial location data in a multi-dimensional space.

[0030] Optionally, the process of automatically generating the corresponding front-end page includes the following steps:

[0031] By using the designer interface of the low-code platform, the abstract data structure in the configuration file is matched with the component library inside the platform to achieve intelligent mapping and dynamic adaptation of the front-end page configuration file; the adaptive rendering engine dynamically adjusts the rendering logic of the page according to the data in the configuration file.

[0032] After the configuration file is imported, the low-code platform adopts a modular building strategy, decomposing the page into multiple independent modules, each module corresponding to a functional unit in the configuration file;

[0033] Identify the interaction logic and data binding requirements in the configuration file, and automatically generate the corresponding interaction components and data binding code.

[0034] This invention provides a system for generating software front-end pages based on image files, comprising:

[0035] The information extraction module is responsible for processing the input image files using AI image recognition, identifying visual elements such as text, buttons, and input boxes in the images, and extracting the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image.

[0036] The file configuration module is responsible for identifying the position and size of each front-end element in the image; determining the position data of each front-end element on the page through coordinate positioning, including the specific position and size; converting the identified structured information and position data into the front-end configuration data format supported by the low-code platform; and integrating the front-end configuration data into a complete front-end page configuration file.

[0037] The page generation module is responsible for using the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform and automatically generate the corresponding front-end page.

[0038] This invention utilizes AI image recognition to process image files. AI can accurately identify front-end elements such as text, buttons, and input boxes within the image; it then converts the identified visual elements into structured data, such as titles and data. The position and size of the front-end elements in the image are identified, and through precise coordinate positioning, the specific location and size of each front-end element on the page are determined. The identified structured information and position data are converted into a front-end configuration data format supported by a low-code platform. The front-end page is generated using the low-code platform's designer interface. Through the low-code platform's designer interface, the front-end page configuration file is automatically converted into the actual front-end page; real-time preview and adjustments are supported to ensure that the generated page meets design expectations.

[0039] Other features and advantages of the invention will be set forth in the following description, and will be apparent in part from the description, or may be learned by practicing the invention. The objects and other advantages of the invention may be realized and obtained by means of the structures particularly pointed out in the written description and the accompanying drawings.

[0040] The technical solution of the present invention will be further described in detail below with reference to the accompanying drawings and embodiments. Attached Figure Description

[0041] The accompanying drawings are provided to further illustrate the invention and form part of the specification. They are used in conjunction with embodiments of the invention to explain the invention and do not constitute a limitation thereof. In the drawings:

[0042] Figure 1 This is a flowchart of the method for generating a software front-end page from an image file in Embodiment 1 of the present invention;

[0043] Figure 2 This is a process diagram of extracting structured information corresponding to visual elements in Embodiment 2 of the present invention;

[0044] Figure 3 This is a diagram illustrating the process of identifying visual elements in an image using a target detection algorithm in Embodiment 3 of the present invention.

[0045] Figure 4 This is a process diagram of extracting attribute information for each visual element in Embodiment 4 of the present invention;

[0046] Figure 5 This is a process diagram of generating the corresponding structured data in Embodiment 5 of the present invention;

[0047] Figure 6 This is a diagram illustrating the process of integrating front-end configuration data into a complete front-end page configuration file in Embodiment 6 of the present invention.

[0048] Figure 7 This is a diagram illustrating the process of associating visual elements with their functional attributes in Embodiment 7 of the present invention;

[0049] Figure 8 This is a process diagram of forming a spatial relationship diagram with a hierarchical structure in Embodiment 8 of the present invention;

[0050] Figure 9 This is a process diagram of automatically generating the corresponding front-end page in Embodiment 9 of the present invention;

[0051] Figure 10 This is a system block diagram of generating a software front-end page based on an image file in Embodiment 10 of the present invention. Detailed Implementation

[0052] The preferred embodiments of the present invention will be described below with reference to the accompanying drawings. It should be understood that the preferred embodiments described herein are for illustration and explanation only and are not intended to limit the present invention.

[0053] The terminology used in the embodiments of this application is for the purpose of describing particular embodiments only and is not intended to limit the embodiments of this application. The singular forms “a,” “the,” and “the” used in the embodiments of this application are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” as used herein refers to and includes any or all possible combinations of one or more associated listed items.

[0054] In the following description, when referring to the accompanying drawings, unless otherwise indicated, the same numbers in different drawings represent the same or similar elements. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application. In the description of this application, it should be understood that the terms "first," "second," "third," etc., are used only to distinguish similar objects and are not necessarily used to describe a specific order or sequence, nor should they be construed as indicating or implying relative importance. Those skilled in the art can understand the specific meaning of the above terms in this application according to the specific circumstances.

[0055] Example 1: As Figure 1 As shown, this embodiment of the invention provides a method for generating a software front-end page based on an image file, comprising the following steps:

[0056] S100: Uses AI image recognition to process input image files, identify visual elements such as text, buttons and input boxes in the image, and extract the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image.

[0057] S200: Identifies the position and size of each front-end element in the image; determines the position data of each front-end element on the page through coordinate positioning, including the specific location and size; converts the identified structured information and position data into the front-end configuration data format supported by the low-code platform; integrates the front-end configuration data into a complete front-end page configuration file.

[0058] S300: Utilizes the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform and automatically generate the corresponding front-end page.

[0059] The working principle and beneficial effects of the above technical solution are as follows: This embodiment first uses AI image recognition to process the input image file, identifying visual elements such as text, buttons, and input boxes in the image, and extracting the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image. Secondly, the position and size of each front-end element in the image are identified. Through coordinate positioning, the position data of each front-end element on the page is determined, and the position data includes the specific position and size. The identified structured information and position data are converted into the front-end configuration data format supported by the low-code platform. The front-end configuration data is integrated into a complete front-end page configuration file. Finally, using the designer interface of the low-code platform, the generated front-end page configuration file is imported into the low-code platform, and the corresponding front-end page is automatically generated. Step S100 of the above solution uses AI image recognition to process the image file. AI can accurately identify front-end elements such as text, buttons, and input boxes in the image; the identified visual elements are converted into structured data, such as titles and data. Significance: Through automatic AI recognition, the time for manual annotation and manual information extraction is reduced; AI recognition reduces human error and ensures the accuracy of the data. Step S200 identifies the position and size of front-end elements in the image, determining the specific position and size of each element on the page through precise coordinate positioning; the identified structured information and position data are then converted into a front-end configuration data format supported by the low-code platform. Significance: This transforms visual design into standardized front-end configuration data, facilitating automated processing; it supports multiple front-end configuration data formats, enhancing system compatibility and scalability. Step S300 uses the low-code platform's designer interface to generate the front-end page. Through this interface, the front-end page configuration file is automatically converted into the actual front-end page; real-time preview and adjustments are supported to ensure the generated page meets design expectations. Significance: Automated generation reduces the workload of manually writing front-end code, lowering development costs; the automated process significantly shortens the development cycle from design to implementation, improving development efficiency.

[0060] In summary, this embodiment, through the combination of AI image recognition and a low-code platform, achieves automated conversion from visual design to front-end code, significantly improving development efficiency, reducing development costs, and ensuring design accuracy and consistency. This embodiment supports converting product managers' hand-drawn designs into front-end interfaces on a low-code platform; it also supports converting screenshots of existing software system interfaces into front-end interfaces on a low-code platform, greatly improving software development efficiency.

[0061] Example 2: Figure 2 As shown, based on Example 1, the process for extracting structured information corresponding to visual elements provided in this embodiment of the invention includes the following steps:

[0062] S101: Perform preprocessing on the input image file, including image denoising, contrast enhancement, and resolution adjustment. Identify visual elements in the image using an object detection algorithm and generate a bounding box for each visual element, containing the element's position and size information.

[0063] S102: Classify the detected visual elements and determine the text, button, or input box type of each element; at the same time, extract the attribute information of each visual element, including text content, button labels, and input box tooltips, etc.

[0064] S103: The extracted attribute information is processed into structured data to generate corresponding structured data. Text elements generate title or paragraph data, button elements generate click event configuration data, and input box elements generate form field configuration data.

[0065] The working principle and beneficial effects of the above technical solution are as follows: First, the input image file undergoes preprocessing operations including image denoising, contrast enhancement, and resolution adjustment. Then, a target detection algorithm identifies visual elements in the image, generating bounding boxes for each element, containing its position and size information. Next, the detected visual elements are classified to determine whether each element is text, a button, or an input box. Simultaneously, attribute information for each visual element is extracted, including text content, button labels, and input box prompt text. Finally, the extracted attribute information is structured to generate corresponding structured data: text elements generate title or paragraph data, button elements generate click event configuration data, and input box elements generate form field configuration data. Step S101 of the above solution, preprocessing and target detection, improves image quality through image denoising, contrast enhancement, and resolution adjustment, enabling the target detection algorithm to more accurately identify visual elements in the image. The target detection algorithm generates bounding boxes for each element, precisely capturing its position and size information. Significance: This ensures the quality of the basic data for image analysis, provides accurate spatial positioning for element classification and attribute extraction, and is the cornerstone of the entire visual element recognition process. Step S102: Visual Element Classification and Attribute Extraction. The detected visual elements are classified to determine their type (e.g., text, button, or input box), and specific attribute information for each element is extracted, such as text content, button labels, or input box tooltips. Significance: This transforms visual elements from simple image data into application data with practical meaning, providing rich content information for structured processing and enhancing the operability and application value of the data. Step S103: Structured Processing. The extracted attribute information is processed to generate corresponding structured data; text elements are converted into title or paragraph data, button elements generate click event configuration data, and input box elements generate form field configuration data. Significance: This integrates scattered visual element information into a systematic data structure, facilitating subsequent software development and application integration; structured data not only improves data readability and maintainability but also lays the foundation for automated processing and intelligent applications.

[0066] In summary, this embodiment not only realizes the transformation from images to structured data, but also improves the quality of data and the efficiency of application, providing solid technical support for various intelligent applications.

[0067] Example 3: As Figure 3 As shown, based on Example 2, the process of identifying visual elements in an image using a target detection algorithm provided in this embodiment of the invention includes the following steps:

[0068] S1011: Perform preprocessing operations on the image, using a Gaussian kernel function to smooth the image and remove noise; enhance the image contrast through contrast-limited adaptive histogram equalization; adjust the image resolution using an interpolation kernel function; and extract visual elements from the image through convolution operations and feature pooling.

[0069] The image denoising formula is as follows:

[0070] I denoised =∫ Ω (G(x,y)*I original (x,y))dxdy

[0071] In the formula, Ω is the domain of the image, G(x,y) is the Gaussian kernel function, and I original (x,y) is the pixel value of the original image at position (x,y); I denoised This represents the image after denoising.

[0072] Contrast enhancement formula:

[0073]

[0074] In the formula, μ is the mean of the image; σ is the standard deviation of the image; I enhanced This represents an image with enhanced contrast; CLAHE represents an adaptive histogram equalization algorithm with limited contrast.

[0075] Formula for adjusting resolution:

[0076]

[0077] In the formula, K(ui,vj) is the interpolation kernel function, using bicubic interpolation, and I resized (u,v) represents the pixel value at position (u,v) in the image after resolution adjustment. enhanced (i,j) represents the pixel value at position (i,j) in the image after contrast enhancement;

[0078] Convolution operation formula:

[0079] F l,m =∑ i,j I resized (i,j)·W l,m (i,j)+b l,m

[0080] In the formula, W l,m (i,j) is the convolution kernel, b l,m It is a bias term; F l,m This represents the value of the m-th feature map in layer l, used to capture features of visual elements such as text, buttons, and input boxes in an image; I resized(i,j) represents the pixel value at position (i,j) in the image after resolution adjustment; W l,m (i,j) represents the weight of the m-th convolutional kernel in the l-th layer at position (i,j), used to extract features of specific visual elements; b l,m This represents the bias term of the m-th convolutional kernel in the l-th layer, used to adjust the output value of the feature map;

[0081] Feature pooling formula:

[0082]

[0083] In the formula, It is a pooled window, F pooled (u,v) represents the value of the feature map at position (u,v) after pooling, which is used to retain the features of the most important visual elements in the image, such as text, buttons and input boxes. F(i,j) represents the value of the feature map at position (i,j) before pooling.

[0084] S1012: Generate the target region of potential bounding boxes for each visual element through a region proposal network, refine the generated target region proposals using a regression algorithm, generate bounding boxes, remove overlapping bounding boxes, and retain the optimal bounding boxes.

[0085] The regional proposal formula is as follows:

[0086] R = RPN(F pooled )

[0087] In the formula, R is the generated region proposal, representing a potential target region; RPN represents the region proposal network, used to generate potential target regions;

[0088] Bounding box regression formula:

[0089] B = regression(R, F) pooled )

[0090] In the formula, B is the generated bounding box, representing the position and size of the target; regression represents the regression algorithm used to generate an accurate bounding box.

[0091] Nonmaximum suppression formula:

[0092] B final =NMS(B)

[0093] In the formula, B final This is the final bounding box; NMS stands for Non-maximum Suppression, an algorithm used to remove overlapping bounding boxes.

[0094] S1013: Annotate the detected optimal bounding boxes on the original image and output the final result; annotate the final bounding boxes with color on the original image to generate the annotated image;

[0095] Bounding box annotation formula:

[0096]

[0097] In the formula, color is the labeled color, and I output (x,y) represents the pixel value at position (x,y) in the labeled image, B final This represents the final bounding box, indicating the location and size of the target.

[0098] The working principle and beneficial effects of the above technical solution are as follows: First, the image is preprocessed by using a Gaussian kernel function to smooth the image and remove noise; contrast-limited adaptive histogram equalization is used to enhance the image contrast; interpolation kernel function is used to adjust the image resolution; visual elements in the image are extracted through convolution and feature pooling; second, a region proposal network is used to generate target regions for potential bounding boxes of each visual element, and a regression algorithm is used to refine the generated target region proposals, generate bounding boxes, remove overlapping bounding boxes, and retain the optimal bounding boxes; finally, the detected optimal bounding boxes are labeled on the original image, and the final result is output; the final bounding boxes are colored and labeled on the original image to generate the labeled image. The above scheme's step S1011, image preprocessing, involves smoothing the image using a Gaussian kernel function to remove noise, making the image clearer and reducing noise interference; using a contrast-limited adaptive histogram equalization (CLAHE) algorithm to enhance image contrast, making details more apparent and facilitating feature extraction; adjusting the image resolution using an interpolation kernel function (such as bicubic interpolation) to maintain good visual quality at different resolutions, facilitating convolution operations; extracting visual element features from the image, such as text, buttons, and input boxes, through convolution operations to generate feature maps; and retaining the most important visual element features in the image through pooling operations, reducing computation while preserving key information. Significance: Noise removal and contrast enhancement improve image quality, making feature extraction more accurate; adjusting resolution allows the algorithm to adapt to images at different resolutions, enhancing its robustness; convolution operations and feature pooling effectively extract key visual elements from the image, providing a foundation for object detection. Step S1012, Region Proposal and Bounding Box Generation, generates potential target regions using a Region Proposal Network (RPN), reducing the search space for target detection and improving detection efficiency. A regression algorithm refines the generated target region proposals, producing accurate bounding boxes and improving target localization accuracy. Non-maximum suppression (NMS) removes overlapping bounding boxes, retaining the optimal bounding boxes and reducing redundant detection results. Significance: The Region Proposal Network effectively reduces the search space for target detection, improving detection efficiency; bounding box regression and NMS improve the accuracy of target localization, reducing false positives and false negatives. Step S1013, Bounding Box Annotation and Result Output, annotates the detected optimal bounding boxes onto the original image, visually displaying the detection results; annotated images are generated for easy viewing and analysis by users. Significance: Bounding box annotation makes the detection results more intuitive, facilitating user understanding and analysis.

[0099] In summary, the target detection algorithm in this embodiment can effectively identify visual elements in images, improve image quality, enhance detection efficiency and accuracy, and ultimately generate intuitive and easy-to-understand detection results.

[0100] Example 4: Figure 4 As shown, based on Example 2, the process for extracting attribute information of each visual element provided in this embodiment of the invention includes the following steps:

[0101] S1021: Using image feature extraction, extract features such as shape, color, and texture from the bounding boxes of visual elements;

[0102] S1022: Input the extracted features into the pre-trained convolutional neural network classification model, infer and determine the type of the element, and determine the type of each visual element based on the output of the classification model;

[0103] S1023: For elements classified as text, use optical character recognition technology to extract the text content from the image.

[0104] The working principle and beneficial effects of the above technical solution are as follows: This embodiment first utilizes image feature extraction to extract features such as shape, color, and texture from the bounding boxes of visual elements; secondly, the extracted features are input into a pre-trained convolutional neural network classification model to infer and determine the type of the element, and the type of each visual element is determined based on the output of the classification model; finally, for elements classified as text, optical character recognition technology is used to extract the text content from the image. Step S1021 of the above solution utilizes image feature extraction to extract features such as shape, color, and texture from the bounding boxes of visual elements, which can identify the geometric shape of the element, such as rectangles and circles, helping to distinguish different types of UI components; by analyzing the distribution and combination of colors, the visual style and state of the element (such as the active and inactive state of a button) can be identified; capturing subtle texture changes on the surface of the element helps to distinguish elements with similar appearances. Significance achieved: Through multi-dimensional feature extraction, visual elements can be identified and classified more accurately; for UI interfaces with different styles and designs, a high degree of recognition consistency can be maintained. Step S1022 inputs the extracted features into a pre-trained convolutional neural network classification model to infer and determine the type of elements. Utilizing a deep learning model, it can accurately classify complex and diverse visual elements, reducing manual intervention and improving processing efficiency. Significance: This makes the recognition and classification process of UI elements more intelligent and efficient; it can handle various types of UI interfaces and is suitable for different application scenarios. Step S1023 uses OCR technology to accurately extract text information from images; the extracted text content is converted into structured data for easier subsequent processing and analysis. Significance: This converts unstructured image information into structured data, facilitating computer processing and analysis; by extracting and processing text information in the user interface, it can better understand and respond to user operations; Significance: This reduces the workload of manual configuration, accelerates the UI development process; and enables UI components to automatically adjust and optimize according to different content and scenarios.

[0105] In summary, this embodiment not only improves the accuracy of visual element recognition and processing, but also greatly enhances the level of automation and intelligence, providing strong support for UI design and development.

[0106] Example 5: Figure 5 As shown, based on Example 2, the process for generating corresponding structured data provided in this embodiment of the invention includes the following steps:

[0107] S1031: Perform structured processing on the extracted text content to generate title or paragraph data;

[0108] S1032: For elements classified as buttons, use optical character recognition to extract the label text on the buttons; based on the button label text, generate configuration data for the click event, including information such as the button's trigger conditions and response actions;

[0109] S1033: For elements classified as input boxes, use optical character recognition to extract the prompt text of the input box; wherein, based on the prompt text, generate configuration data for the form fields, including information such as field type and validation rules.

[0110] The working principle and beneficial effects of the above technical solution are as follows: First, the extracted text content is structured to generate title or paragraph data. Second, for elements classified as buttons, optical character recognition (OCR) is used to extract the label text on the buttons. Based on the button label text, configuration data for click events is generated, including information such as the button's trigger conditions and response actions. Finally, for elements classified as input boxes, OCR is used to extract the input box's prompt text. Based on the prompt text, configuration data for form fields is generated, including information such as field types and validation rules. Step S1031 of the above solution involves structured processing of the extracted text content to generate title or paragraph data. Natural Language Processing (NLP) technology is used to parse and classify the extracted text content, identifying which parts are titles and which are paragraphs. The parsed text content is then converted into structured data formats such as JSON and XML for easier data processing and application. Significance: Structured text data is easier for computers to understand and process, improving data readability and usability. Structured data provides a foundation for subsequent data analysis, mining, and application, enabling the information extracted from the text to be utilized more effectively. Step S1032: For elements classified as buttons, optical character recognition (OCR) is used to extract the label text on the buttons; based on the button label text, configuration data for click events is generated; OCR technology is used to extract the label text on the buttons from the button images; based on the extracted label text, configuration data for button click events is generated, including trigger conditions and response actions. Significance: The generated click event configuration data can be used for automated UI testing to ensure that the button's functionality and response actions meet expectations; by accurately identifying button labels and generating corresponding event configurations, the consistency of the user interface and the accuracy of responses are ensured, thereby improving the user experience. Step S1033: For elements classified as input boxes, optical character recognition (OCR) is used to extract the prompt text of the input boxes; based on the prompt text, configuration data for form fields is generated; OCR technology is used to extract the prompt text from the input boxes; based on the prompt text, configuration data for form fields is generated, including field types and validation rules. Significance: The generated form field configuration data can be used for automatic form validation and processing to ensure that user-input data meets expected formats and rules; through automated form field configuration, human error is reduced, and the accuracy and quality of data input are improved.

[0111] In summary, this embodiment improves the structuring of data, the automation of processing, and the user experience. These steps not only enable more efficient processing and utilization of text data but also provide robust support for UI testing and form processing, thereby enhancing the overall system reliability and user satisfaction.

[0112] Example 6: As Figure 6As shown, based on Example 1, the process of integrating front-end configuration data into a complete front-end page configuration file provided in this embodiment of the invention includes the following steps:

[0113] S201: The extracted structured information is mapped in multiple dimensions with the location data obtained by coordinate positioning, visual elements are associated with their functional attributes, and the spatial positions of visual elements and their functional attributes on the page are grouped in a hierarchical manner.

[0114] S202: After the multi-dimensional mapping is completed, the structured information and position data are verified and optimized in real time; the relative position and size of the elements are automatically adjusted by dynamically calculating the layout dependency of each element; the page is divided into multiple independent modules, each module corresponding to an independent configuration unit;

[0115] S203: Based on the modular configuration generation, construct a hierarchical front-end page configuration file, defining the overall layout and global attributes of the page, the layout and functions of each module, and the attributes, positions and interactive behaviors of specific elements; divide the configuration file into multiple sub-files, each sub-file corresponding to a module.

[0116] The working principle and beneficial effects of the above technical solution are as follows: First, this embodiment performs multi-dimensional mapping between the extracted structured information and the location data obtained by coordinate positioning, associating visual elements with their functional attributes, and grouping the spatial positions of visual elements and their functional attributes on the page in a hierarchical manner; second, after the multi-dimensional mapping is completed, the structured information and location data are verified and optimized in real time; by dynamically calculating the layout dependency relationship of each element, the relative position and size of the elements are automatically adjusted; the page is divided into multiple independent modules, each module corresponding to an independent configuration unit; finally, based on the modular configuration generation, a hierarchical front-end page configuration file is constructed, defining the overall layout and global attributes of the page, the layout and function of each module, and the attributes, positions, and interactive behaviors of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponding to a module. The above solution's step S201, multi-dimensional mapping and hierarchical grouping, maps the extracted structured information with location data obtained from coordinate positioning, accurately associating visual elements with their functional attributes. The mapping is not limited to a single dimension but is multi-dimensional, ensuring that the function and visual appearance of each element on the page can be accurately described. Grouping the spatial positions of visual elements and their functional attributes on the page in a hierarchical manner makes the page structure clearer, facilitating modular processing and configuration file generation. Significance: Multi-dimensional mapping and hierarchical grouping ensure that the attributes, position, and function of each element can be accurately described, reducing errors and inconsistencies in configuration files; the hierarchical structure makes the various parts of the page more modular, facilitating developer understanding and maintenance, and also providing convenience for optimization and expansion. Step S202 Real-time Validation and Optimization: After multi-dimensional mapping, the structured information and position data are validated in real time to ensure that the attributes and positions of each element are correct, avoiding errors in the configuration file. By dynamically calculating the layout dependencies of each element, the relative positions and sizes of elements are automatically adjusted to ensure that the page maintains a good layout effect on different devices and screen sizes. The page is divided into multiple independent modules, each corresponding to an independent configuration unit, making the page configuration more flexible and scalable. Significance: Real-time validation and dynamic adjustment ensure good page performance on different devices and screen sizes, improving the user experience; modular configuration makes the page configuration process simpler and more intuitive, allowing developers to focus on the details of each module without worrying about the overall layout. Step S203 Building a Hierarchical Front-end Page Configuration File: Based on the modular configuration generation, a hierarchical front-end page configuration file is built, defining the overall layout and global attributes of the page, the layout and functions of each module, and the attributes, positions, and interactive behaviors of specific elements. The configuration file is divided into multiple sub-files, each corresponding to a module, making configuration file management more convenient and efficient.Significance: The hierarchical configuration file structure makes it easier for developers to understand and modify configuration files, reducing the difficulty of maintenance; the division of sub-files makes page configuration more flexible, allowing developers to modify the configuration of each module independently as needed without affecting other modules.

[0117] In summary, the process of integrating front-end configuration data into a complete front-end page configuration file in this embodiment not only improves the accuracy of configuration and the responsiveness of the page, but also enhances the readability, maintainability, and flexibility of the configuration file. This ensures that the final generated page configuration file can meet complex front-end development needs and provides developers with an efficient, flexible, and scalable configuration tool.

[0118] Example 7: As Figure 7 As shown, based on Example 6, the process of associating visual elements with their functional attributes provided in this example includes the following steps:

[0119] S2011: The extracted structured information is deeply analyzed through a semantic analysis engine to identify the semantic features of each visual element and its corresponding functional attributes; through multimodal data fusion, the feature vectors of visual elements are aligned with the semantic vectors of their functional attributes in multiple dimensions.

[0120] S2012: Map the spatial location data of visual elements to their functional attributes in multiple dimensions, obtain the position of elements on the page through a coordinate positioning system, and dynamically analyze the spatial dependencies of elements; map the spatial location of elements to their functional attributes in a multi-dimensional space to form a spatial relationship diagram with a hierarchical structure.

[0121] S2013: After completing semantic and spatial mapping, a hierarchical tree-based organization is adopted to group elements according to the logical relationship of their functional attributes and the hierarchical relationship of their spatial locations. Each group corresponds to a hierarchical node, and the nodes are connected through spatial dependencies and functional associations to form a multi-dimensional hierarchical structure.

[0122] The working principle and beneficial effects of the above technical solution are as follows: First, this embodiment uses a semantic analysis engine to perform in-depth analysis on the extracted structured information, identifying the semantic features of each visual element and its corresponding functional attributes; through multimodal data fusion, the feature vector of the visual element is aligned with the semantic vector of its functional attributes in multiple dimensions; second, the spatial location data of the visual element is mapped with its functional attributes in multiple dimensions, and the position of the element on the page is obtained through a coordinate positioning system, and the spatial dependency relationship of the element is dynamically analyzed; the spatial position of the element and its functional attributes are mapped in a multidimensional space to form a spatial relationship diagram with a hierarchical structure; finally, after completing the semantic mapping and spatial mapping, a hierarchical tree-based organization is adopted to group the elements according to the logical relationship of their functional attributes and the hierarchical relationship of their spatial positions; each group corresponds to a hierarchical node, and the nodes are connected through spatial dependency and functional association to form a multidimensional hierarchical structure. Step S2011 of the above scheme involves semantic analysis and multimodal data fusion. Through a semantic analysis engine, the semantic features of each visual element can be deeply understood, facilitating accurate identification of the element's functional attributes. Multimodal data fusion aligns the feature vectors of visual elements with the semantic vectors of their functional attributes, enhancing the correlation between elements and their functional attributes, making this correlation more comprehensive and accurate. Significance: Through semantic analysis and multimodal data fusion, the system can more accurately understand the functions of visual elements, which is crucial for design, user interface optimization, and user experience improvement. It also enables the system to better understand and process complex visual information, thereby improving the system's intelligence level. Step S2012 involves multi-dimensional mapping of spatial location data and functional attributes. Through a coordinate positioning system, the spatial dependencies of elements can be dynamically analyzed, which is crucial for understanding the layout and interaction methods of elements on the page. Mapping the spatial location of elements with their functional attributes in a multi-dimensional space forms a hierarchical spatial relationship diagram, helping the system better understand and manage the spatial layout of elements. Significance: Spatial mapping can better optimize the page layout, making the arrangement of elements more reasonable and efficient. A good spatial layout can improve the user's operating experience, reduce misoperations, and increase user satisfaction. Step S2013, hierarchical tree organization, groups elements level by level according to their functional attributes and spatial hierarchical relationships, helping the system to better organize and manage elements. Through connections between nodes, a multi-dimensional hierarchical structure is formed, enhancing the system's understanding and processing capabilities regarding element relationships. The significance is that hierarchical organization enables the system to manage and manipulate elements more efficiently, reducing complexity and increasing processing speed; this organizational method allows the system to more flexibly respond to different layouts and functional requirements, enhancing the system's adaptability and scalability.

[0123] In summary, this embodiment enhances the system's ability to understand and process visual elements and their functional attributes through different technical means, thereby improving the system's intelligence level, layout optimization effect, and user experience.

[0124] Example 8: As Figure 8 As shown, based on Example 7, the process of forming a spatial relationship diagram with a hierarchical structure provided by this embodiment of the invention includes the following steps:

[0125] S20121: Construct a multi-dimensional spatial coordinate system, which includes three-dimensional spatial coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantizing and vectorizing the functional features of the elements, and each functional attribute corresponds to an independent dimension.

[0126] S20122: Vectorize the functional attributes of each visual element, transform them into multi-dimensional vectors containing semantic information of the functional attributes, and integrate the spatial location data of the elements;

[0127] S20123: Through a hybrid mapping algorithm, functional attribute vectors and spatial location data are aligned and mapped in a multi-dimensional space.

[0128] The equation for the hybrid mapping algorithm is as follows:

[0129]

[0130] In the formula, M(x,y,z,F) represents the multidimensional spatial coordinates after the hybrid mapping. In the multidimensional space, the functional attribute vector F and the spatial position (x,y,z) are the final result after the hybrid mapping; n represents the number of dimensions of the functional attribute; F i σ represents the i-th dimension of the functional attribute vector; P(x,y,z) represents the vector representation of the spatial location data, the vector form of the spatial location (x,y,z), used for dot product operation with the functional attribute vector; i W represents the standard deviation of the i-th functional attribute; i F represents the weight vector of the i-th functional attribute; B represents the bias vector, used to adjust the baseline value of the hybrid mapping result to ensure the rationality and accuracy of the mapping result; i P(x,y,z) represents the dot product of the i-th dimension of the functional attribute vector and the spatial location vector, used to measure the correlation between functional attributes and spatial location; normalization This means dividing by the standard deviation σ i Normalize the i-th dimension of the functional attribute vector to ensure consistent numerical ranges among different functional attributes; then perform weighted summation. This indicates that the weighted summation of the normalized results of all functional attributes yields the main part of the hybrid mapping. The hybrid mapping algorithm equation realizes the alignment and mapping of functional attribute vectors and spatial location data in multidimensional space through dot product operation, normalization processing, weighted summation, and bias adjustment.

[0131] The working principle and beneficial effects of the above technical solution are as follows: This embodiment first constructs a multi-dimensional spatial coordinate system, including three-dimensional spatial coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantifying and vectorizing the functional features of elements, with each functional attribute corresponding to an independent dimension. Secondly, the functional attributes of each visual element are vectorized, transforming them into multi-dimensional vectors containing semantic information of the functional attributes and fusing the spatial location data of the elements. Finally, a hybrid mapping algorithm is used to align and map the functional attribute vectors and spatial location data in the multi-dimensional space. Step S20121 of the above solution constructs a multi-dimensional spatial coordinate system, transforming these abstract functional attributes into calculable numerical forms by quantifying and vectorizing the functional features of elements, facilitating mathematical processing and analysis. Each functional attribute corresponds to an independent dimension, ensuring the independence and non-interference between different functional attributes, enhancing the accuracy and flexibility of data processing. Significance achieved: The construction of the multi-dimensional spatial coordinate system enables the spatial relationship diagram to express not only the spatial location of elements but also their functional attributes, thereby enriching the information content of the spatial relationship diagram; it provides the necessary data structure and foundation for the vectorization and mapping of functional attributes, ensuring the coherence and consistency of the entire process. Step S20122, the vectorization of functional attributes, transforms the semantic information of functional attributes into multi-dimensional vectors. This allows functional attributes to not only have numerical forms but also retain their semantic connotations, facilitating semantic analysis and understanding. The spatial location data of elements is fused with the functional attribute vectors, enabling the spatial relationship diagram to simultaneously express the spatial location and functional attributes of elements, enhancing the diagram's expressive power and practicality. Significance achieved: Through vectorization, functional attributes and spatial location data are organically combined, allowing the spatial relationship diagram to more comprehensively reflect the characteristics and relationships of elements; it provides the necessary data input for the hybrid mapping algorithm, ensuring the accuracy and effectiveness of the mapping process. Step S20123, the hybrid mapping algorithm, aligns and maps functional attribute vectors and spatial location data in multi-dimensional space, ensuring a precise correspondence between functional attributes and spatial locations, avoiding data misalignment and errors; the mapping process allows functional attributes and spatial locations to be uniformly expressed in multi-dimensional space, enhancing the hierarchical and structured characteristics of the spatial relationship diagram. Significance achieved: Through mapping, the structure of the spatial relationship diagram is optimized, making the relationships between elements in the diagram clearer and more intuitive, facilitating subsequent analysis and application; the mapped spatial relationship diagram can more accurately reflect the spatial location and functional attributes of elements, improving the practicality and application value of the diagram, and providing strong support for research and application in related fields.

[0132] In summary, this embodiment, through the construction of a multi-dimensional spatial coordinate system, vectorization of functional attributes, and hybrid mapping algorithm, gradually enhances the expressive power and practicality of the spatial relationship diagram, laying a solid foundation for analysis and application.

[0133] Example 9: As Figure 9 As shown, based on Example 1, the process of automatically generating the corresponding front-end page provided by this embodiment of the invention includes the following steps:

[0134] S301: Through the designer interface of the low-code platform, the abstract data structure in the configuration file is matched with the component library inside the platform to realize intelligent mapping and dynamic adaptation of the front-end page configuration file; the adaptive rendering engine dynamically adjusts the rendering logic of the page according to the data in the configuration file.

[0135] S302: After the configuration file is imported, the low-code platform adopts a modular building strategy to decompose the page into multiple independent modules, each module corresponding to a functional unit in the configuration file;

[0136] S303: Identify the interaction logic and data binding requirements in the configuration file, and automatically generate the corresponding interaction components and data binding code.

[0137] The working principle and beneficial effects of the above technical solution are as follows: Firstly, this embodiment uses the designer interface of the low-code platform to match the abstract data structure in the configuration file with the platform's internal component library, achieving intelligent mapping and dynamic adaptation of the front-end page configuration file. The adaptive rendering engine dynamically adjusts the page's rendering logic based on the data in the configuration file. Secondly, after importing the configuration file, the low-code platform adopts a modular construction strategy, decomposing the page into multiple independent modules, each corresponding to a functional unit in the configuration file. Finally, it identifies the interaction logic and data binding requirements in the configuration file and automatically generates corresponding interactive components and data binding code. Step S301, intelligent mapping and dynamic adaptation, through the designer interface, intelligently matches the abstract data structure in the configuration file with the platform's internal component library. This mapping is not merely a simple data correspondence, but rather based on machine learning technology, automatically identifying the data type, structure, and functional requirements in the configuration file and selecting the most suitable component for mapping. The adaptive rendering engine can dynamically adjust the page's rendering logic based on the data characteristics in the configuration file. Based on data complexity, interaction requirements, and device characteristics, it automatically optimizes the page's layout, style, and functionality, ensuring the page presents the best effect on different devices and screen sizes. Significance Achieved: Intelligent mapping and dynamic adaptation significantly reduce the workload of developers manually adjusting page layouts and styles, shortening the development cycle; through dynamic adaptation, pages can automatically adjust according to users' devices and operating habits, providing a smoother and more consistent user experience; intelligent mapping reduces the workload of manual configuration, lowers development and maintenance costs, and also reduces the possibility of human error. Step S302 Modular Construction Strategy: The low-code platform decomposes pages into multiple independent modules, each corresponding to a functional unit in a configuration file; this modular construction method makes page development, maintenance, and expansion more flexible and efficient; each module can be developed, tested, and deployed independently, and modules communicate with each other through standard interfaces, ensuring the system's scalability and maintainability. Significance Achieved: Modular construction makes the various functional units of the page independent of each other, making it easier for developers to maintain and optimize specific modules without affecting other modules; modular design allows the system to easily add new functions or modify existing functions without refactoring the entire page. Step S303 automatically generates interactive components and data binding, which can automatically identify the interactive logic in the configuration file, such as button clicks, form submissions, data filtering, etc., and automatically generate corresponding interactive components based on this logic; it can also identify the data binding requirements in the configuration file, automatically generate data binding code, and ensure that the data on the page is synchronized with the backend data source.Significance achieved: Automatically generating interactive components and data binding code reduces the workload of developers writing code manually and simplifies the development process; through intelligent recognition of interaction logic, the system can automatically generate interactive components that conform to user operating habits, improving the interactive experience of the page; automatic data binding ensures real-time synchronization between the data on the page and the backend data source, reducing data inconsistency issues and improving the reliability and stability of the system.

[0138] In summary, this embodiment improves development efficiency and user experience while reducing development costs through intelligent mapping and dynamic adaptation; enhances page maintainability and scalability through a modular construction strategy; and simplifies the development process, improves the interactive experience, and ensures data consistency by automatically generating interactive components and binding data. Together, these features construct an efficient, flexible, and user-friendly automatic front-end page generation system.

[0139] Example 10: As Figure 10 As shown, based on Embodiments 1-9, the system for generating software front-end pages from image files provided in this embodiment of the invention includes:

[0140] The information extraction module is responsible for processing the input image files using AI image recognition, identifying visual elements such as text, buttons, and input boxes in the images, and extracting the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image.

[0141] The file configuration module is responsible for identifying the position and size of each front-end element in the image; determining the position data of each front-end element on the page through coordinate positioning, including the specific position and size; converting the identified structured information and position data into the front-end configuration data format supported by the low-code platform; and integrating the front-end configuration data into a complete front-end page configuration file.

[0142] The page generation module is responsible for using the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform and automatically generate the corresponding front-end page.

[0143] The working principle and beneficial effects of the above technical solution are as follows: The information extraction module of this embodiment uses AI image recognition to process the input image file, identify visual elements such as text, buttons, and input boxes in the image, and extract the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image. The file configuration module identifies the position and size of each front-end element in the image. Through coordinate positioning, it determines the position data of each front-end element on the page, and the position data includes the specific position and size. The identified structured information and position data are converted into the front-end configuration data format supported by the low-code platform. The front-end configuration data is integrated into a complete front-end page configuration file. The page generation module uses the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform and automatically generate the corresponding front-end page. The information extraction module of the above solution uses advanced AI image recognition technology to accurately identify visual elements in the image, such as text, buttons, and input boxes; it converts the identified visual elements into structured information, including titles and data, which is convenient for processing and use. Significance Achieved: Significantly reduces the workload of manually extracting image information, improving the efficiency and accuracy of information extraction; provides a structured data foundation for the file configuration module, ensuring data consistency and usability. The file configuration module uses coordinate positioning technology to accurately identify the position and size of each front-end element in the image; it converts the identified structured information and position data into the front-end configuration data format supported by the low-code platform, facilitating direct import and use. Significance Achieved: Ensures that the position and size of front-end elements on the page are consistent with the image, improving the visual effect and user experience of the page; the generated configuration files can be directly used on the low-code platform, simplifying the front-end development process and improving development efficiency. The page generation module utilizes the low-code platform's designer interface to automatically convert configuration files into front-end pages, reducing the workload of manually writing code; it supports rapid page generation and modification, facilitating rapid iteration and testing by developers. Significance Achieved: Significantly improves the development efficiency of front-end pages and reduces development costs; ensures that the generated pages match the design. Figure 1 This improves product quality and user experience; it also supports the import and generation of various front-end configuration data, enhancing the system's flexibility and scalability.

[0144] In summary, this embodiment, through the collaborative work of the information extraction module, file configuration module, and page generation module, automates the process of generating front-end pages from image files. By improving efficiency, ensuring quality, simplifying processes, and enhancing flexibility, it ultimately achieves efficient, accurate, and flexible front-end page development.

[0145] Obviously, those skilled in the art can make various modifications and variations to this invention without departing from its spirit and scope. Therefore, if these modifications and variations fall within the scope of equivalents of this invention, this invention is also intended to include these modifications and variations.

Claims

1. A method for generating a software front-end page from an image file, characterized in that, Includes the following steps: AI image recognition is used to process the input image file, identify visual elements such as text, buttons and input boxes in the image, and extract the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image. Identify the position and size of each front-end element in the image; The identified structured information and location data are converted into a front-end configuration data format supported by the low-code platform; the front-end configuration data is then integrated into a complete front-end page configuration file. By using the designer interface of the low-code platform, the generated front-end page configuration file can be imported into the low-code platform to automatically generate the corresponding front-end page; The process of integrating front-end configuration data into a complete front-end page configuration file includes: mapping the extracted structured information and the location data obtained by coordinate positioning in a multi-dimensional way; associating visual elements with their functional attributes; and grouping the spatial positions of visual elements and their functional attributes on the page in a hierarchical manner. The process of associating visual elements with their functional attributes includes: mapping the spatial location data of visual elements with their functional attributes in multiple dimensions; obtaining the position of the element on the page through a coordinate positioning system; and dynamically analyzing the spatial dependencies of the element. The spatial location of the element and its functional attributes are mapped in a multi-dimensional space to form a spatial relationship diagram with a hierarchical structure. The process of creating a hierarchical spatial relationship diagram includes the following steps: Construct a multi-dimensional spatial coordinate system, which includes three-dimensional spatial coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantizing and vectorizing the functional features of the elements, and each functional attribute corresponds to an independent dimension. The functional attributes of each visual element are vectorized and transformed into multi-dimensional vectors containing semantic information of the functional attributes, and the spatial location data of the elements are integrated. The hybrid mapping algorithm aligns and maps functional attribute vectors with spatial location data in a multi-dimensional space.

2. The method for generating a software front-end page from an image file as described in claim 1, characterized in that, The process of extracting structured information corresponding to visual elements, and identifying visual elements in an image using object detection algorithms, includes the following steps: The image is preprocessed by smoothing it with a Gaussian kernel to remove noise; contrast is enhanced by contrast-limited adaptive histogram equalization; the resolution is adjusted using an interpolation kernel; and visual elements are extracted from the image through convolution and feature pooling. The target region of each visual element is generated by a region proposal network. The generated target region proposals are refined by a regression algorithm to generate bounding boxes, remove overlapping bounding boxes, and retain the optimal bounding box. The detected optimal bounding boxes are labeled on the original image, and the final result is output; the final bounding boxes are then colored on the original image to generate the labeled image.

3. The method for generating a software front-end page from an image file as described in claim 1, characterized in that, By using coordinate positioning, the position data of each front-end element on the page is determined. The position data includes the specific location and size.

4. The method for generating a software front-end page from an image file as described in claim 1, characterized in that, The process of integrating front-end configuration data into a complete front-end page configuration file includes the following steps: After the multi-dimensional mapping is completed, the structured information and position data are verified and optimized in real time; the relative position and size of the elements are automatically adjusted by dynamically calculating the layout dependency of each element; the page is divided into multiple independent modules, each module corresponding to an independent configuration unit. Based on the modular configuration generation, a hierarchical front-end page configuration file is built to define the overall layout and global attributes of the page, the layout and functions of each module, and the attributes, positions and interactive behaviors of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponding to a module.

5. The method for generating a software front-end page from an image file as described in claim 4, characterized in that, The process of associating visual elements with their functional attributes includes the following steps: The semantic analysis engine performs in-depth analysis on the extracted structured information to identify the semantic features of each visual element and its corresponding functional attributes. After completing semantic and spatial mapping, a hierarchical tree-based organization is adopted to group elements level by level according to the logical relationship of their functional attributes and the hierarchical relationship of their spatial locations.

6. The method for generating a software front-end page from an image file as described in claim 5, characterized in that, By fusing multimodal data, the feature vectors of visual elements are aligned with the semantic vectors of their functional attributes in multiple dimensions.

7. The method for generating a software front-end page from an image file as described in claim 5, characterized in that, Each group corresponds to a hierarchical node, and the nodes are connected through spatial dependencies and functional relationships to form a multi-dimensional hierarchical structure.

8. The method for generating a software front-end page from an image file as described in claim 1, characterized in that, The process of automatically generating the corresponding front-end page includes the following steps: By using the designer interface of the low-code platform, the abstract data structure in the configuration file is matched with the component library inside the platform, realizing intelligent mapping and dynamic adaptation of the front-end page configuration file. The adaptive rendering engine dynamically adjusts the page rendering logic based on the data in the configuration file; After the configuration file is imported, the low-code platform adopts a modular building strategy, decomposing the page into multiple independent modules, each module corresponding to a functional unit in the configuration file; Identify the interaction logic and data binding requirements in the configuration file, and automatically generate the corresponding interaction components and data binding code.

9. A system for generating software front-end pages based on image files, characterized in that, Include: The information extraction module is responsible for processing the input image files using AI image recognition, identifying visual elements such as text, buttons, and input boxes in the images, and extracting the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image. The file configuration module is responsible for identifying the position and size of each front-end element in the image; determining the position data of each front-end element on the page through coordinate positioning, including the specific position and size; converting the identified structured information and position data into the front-end configuration data format supported by the low-code platform; and integrating the front-end configuration data into a complete front-end page configuration file. The page generation module is responsible for using the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform and automatically generate the corresponding front-end page. The process of integrating front-end configuration data into a complete front-end page configuration file in the file configuration module includes: multi-dimensional mapping of extracted structured information and location data obtained by coordinate positioning; associating visual elements with their functional attributes; and grouping the spatial positions of visual elements and their functional attributes on the page in a hierarchical manner. The process of associating visual elements with their functional attributes includes: mapping the spatial location data of visual elements with their functional attributes in multiple dimensions; obtaining the position of the element on the page through a coordinate positioning system; and dynamically analyzing the spatial dependencies of the element. The spatial location of the element and its functional attributes are mapped in a multi-dimensional space to form a spatial relationship diagram with a hierarchical structure. The process of forming a spatial relationship diagram with a hierarchical structure includes: Construct a multi-dimensional spatial coordinate system, which includes three-dimensional spatial coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantizing and vectorizing the functional features of the elements, and each functional attribute corresponds to an independent dimension. The functional attributes of each visual element are vectorized and transformed into multi-dimensional vectors containing semantic information of the functional attributes, and the spatial location data of the elements are integrated. The hybrid mapping algorithm aligns and maps functional attribute vectors with spatial location data in a multi-dimensional space.

Images