Method and system for generating software front-end page according to picture file

Abstract

The invention provides a method and system for generating a software front-end page according to a picture file, and the method comprises the steps: carrying out the processing of an input picture file through AI pattern recognition, extracting structured information corresponding to a visual element, and enabling the structured information to correspond to a title and data in a picture; performing position and size identification on each front-end element in the picture; determining position data of each front-end element in 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; the front-end configuration data are integrated into a complete front-end page configuration file; and importing the generated front-end page configuration file into the low-code platform by utilizing a designer interface of the low-code platform, and automatically generating a corresponding front-end page. The system comprises an information extraction module, a file configuration module and a page generation module. According to the method, the interface screenshot of the original software system is converted into the front-end interface in the low-code platform.

Description

Technical Field

[0001] The present invention relates to the technical field of application development, and in particular to a method and system for generating a software front-end page according to a picture file. Background Art

[0002] A low-code platform is a development tool that quickly builds applications through a visual interface and a small amount of coding. The front-end designer of the low-code platform simplifies the development process of the front-end page through visual drag and drop and configuration methods; it has a rich built-in control library that supports functions such as data binding, logic orchestration, and real-time preview to help developers quickly build high-quality front-end pages. The flexibility and scalability of the front-end designer make it suitable for a variety of application scenarios, from simple form pages to complex business systems, which can be quickly implemented through the low-code platform. However, when converting manual design drawings or pages of existing software systems to front-end pages, there is a problem of inefficiency; the main reasons include the difference between the design drawings and the front-end implementation, the inefficiency of manual coding, the incompatibility of the technology stack of the old system, and the complexity of data interaction.

[0003] Prior art 1, application number: CN202211642067.6 discloses a page development method, device, electronic device and computer-readable storage medium, including: creating multiple target pages based on a preset page component library; combining multiple target pages based on preset event rules to generate a front-end page system. Obtain the corresponding target page through the preset page component library, and connect and combine multiple target pages according to event rules to generate a complete front-end page system for the software. Although it is possible to develop and generate a corresponding front-end page system according to the actual development needs of the user, and provide a real use effect in the generated front-end page system to form a complete interactive demonstration system, it effectively reduces the time for communicating with the user and modifying the created page, simplifies the communication and development process, thereby improving the development efficiency of the software front-end page and meeting the user's various development needs; however, it lacks image recognition function, and there is a problem of low efficiency when encountering manual design drawings or pages of existing software systems converted to front-end pages.

[0004] Prior art 2, application number: CN202110808096.4 discloses a data update method and related device for storage management software, including: judging whether the received command is a configuration class command; if so, executing the configuration class command; when the configuration class command is successfully executed, updating the data of the front-end page of the storage management software according to the configuration class command. Although by judging whether the received command is a configuration class command, executing the configuration class command, and when the configuration class command is successfully executed, directly updating the data of the full-end page according to the configuration class command, instead of continuously requesting data from the back end to update the data according to the front-end page, the efficiency of updating data in the storage management software is improved; but its function is relatively simple, so that 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, device and medium for providing guidance for software resource deployment. Aiming at the problem of insufficient accuracy in the current privatization scenario, a software service resource deployment method is provided. By collecting the access path information and service interface information of the user accessing the software service front-end page, the page access trend and interface access trend when the user accesses the service are predicted; and then the performance indicators and corresponding resource deployment schemes required for each service interface are determined according to the access trend to guide resource deployment. Although it does not involve the core sensitive data of the user, it can meet the data security requirements in the privatization deployment scenario. And compared with the direct rough resource deployment estimate based on the user scale; using the data that truly reflects the user's behavior habits to predict the access trend, it can obtain performance indicators that are closer to the actual situation and give more accurate resource deployment suggestions; but it cannot solve the problem of converting the manual design drawings or the pages of the existing software system into the front-end page, resulting in the deployment plan not being consistent with the actual application, and the quality of the software service cannot be effectively improved.

[0006] At present, the prior art 1, prior art 2 and prior art 3 have the problem of low efficiency when converting the manual design drawings or the pages of the existing software system into the front-end pages. Therefore, the present invention provides a method and system for generating a software front-end page according to an image file. Summary of the invention

[0007] In order to solve the above technical problems, the present invention provides a method for generating a software front-end page according to an image file, comprising the following steps:

[0008] Use AI graphic recognition to process the input image files, identify the visual elements in the image that contain text, buttons, and input boxes, and extract the structured information corresponding to the visual elements. The structured information corresponds to the title and data in the image.

[0009] Identify the position and size of each front-end element in the image; convert the identified structured information and location data into the front-end configuration data format supported by the low-code platform; integrate the front-end configuration data into a complete front-end page configuration file;

[0010] Use the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform to automatically generate the corresponding front-end page.

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

[0012] Preprocess the image, use the Gaussian kernel function to smooth the image and remove noise; enhance the contrast of the image through contrast-limited adaptive histogram equalization; use the interpolation kernel function to adjust the resolution of the image; extract the visual elements in the image through convolution operations and feature pooling;

[0013] Generate the target area of ​​the potential bounding box of each visual element through the region proposal network, use the regression algorithm to refine the generated target area proposal, generate the bounding box, remove the overlapping bounding boxes, and retain the optimal bounding box;

[0014] The detected optimal bounding box is marked on the original image and the final result is output; the final bounding box is marked on the original image with color to generate the marked image.

[0015] Optionally, the position data of each front-end element in the page is determined through coordinate positioning, and the position data includes the specific position and size.

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

[0017] The extracted structural information is mapped with the position data obtained by coordinate positioning in a multi-dimensional manner, the visual elements are associated with their functional attributes, and the spatial positions of the 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 location 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 constructed to define the overall layout and global properties of the page, the layout and functions of each module, and the properties, position and interactive behaviors of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponds to a module.

[0020] Optionally, the process of associating a visual element with its functional attributes comprises 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 position data of visual elements and their functional attributes are mapped in multiple dimensions. The position of elements in the page is obtained through the coordinate positioning system, and the spatial dependency relationship of elements is dynamically analyzed. The spatial position of elements and their functional attributes are mapped in multidimensional space to form a spatial relationship diagram with a hierarchical structure.

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

[0024] Optionally, through multimodal data fusion, the feature vectors of visual elements are 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 dependency and functional association relationships to form a multi-dimensional hierarchical structure.

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

[0027] Construct a multidimensional space coordinate system, including three-dimensional space coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantifying and vectorizing the functional characteristics of the elements. Each functional attribute corresponds to an independent dimension.

[0028] Vectorize the functional attributes of each visual element and convert them into multi-dimensional vectors, which contain the semantic information of the functional attributes and integrate the spatial position data of the elements;

[0029] The functional attribute vectors and spatial location data are aligned and mapped in multidimensional space through a hybrid mapping algorithm.

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

[0031] 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 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 construction strategy to decompose the page into multiple independent modules, each of which corresponds to a functional unit in the configuration file;

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

[0034] The present invention provides a system for generating a software front-end page according to an image file, comprising:

[0035] The information extraction module is responsible for processing the input image files using AI graphic recognition, identifying the visual elements in the image that contain text, buttons, and input boxes, 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 in the page through coordinate positioning, and the position data includes 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; 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] The present invention uses AI graphic recognition to process image files. AI can accurately identify front-end elements such as text, buttons, and input boxes in images; and convert the identified visual elements into structured data, such as titles, data, etc. The position and size of the front-end elements in the image are identified, and the specific position and size of each front-end element in the page are determined through precise coordinate positioning; 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 page is generated using the designer interface of the low-code platform, and the front-end page configuration file is automatically converted into the actual front-end page through the designer interface of the low-code platform; real-time preview and adjustment are supported to ensure that the generated page meets the design expectations.

[0039] Other features and advantages of the present invention will be described in the following description, and partly become apparent from the description, or understood by practicing the present invention. The purpose and other advantages of the present invention can be realized and obtained by the structures particularly pointed out in the written description and the accompanying drawings.

[0040] The technical solution of the present invention is further described in detail below through the accompanying drawings and embodiments. BRIEF DESCRIPTION OF THE DRAWINGS

[0041] The accompanying drawings are used to provide a further understanding of the present invention and constitute a part of the specification. Together with the embodiments of the present invention, they are used to explain the present invention and do not constitute a limitation of the present invention. In the accompanying drawings:

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

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

[0044] Figure 3 This is a process diagram of identifying visual elements in a picture by using a target detection algorithm in Example 3 of the present invention;

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

[0046] Figure 5 A process diagram for generating corresponding structured data in Embodiment 5 of the present invention;

[0047] Figure 6 A diagram showing a process of integrating the front-end configuration data into a complete front-end page configuration file in Embodiment 6 of the present invention;

[0048] Figure 7 is a process diagram of associating a visual element with its functional attribute in Embodiment 7 of the present invention;

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

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

[0051] Fig.10 This is a system block diagram for generating a software front-end page based on an image file in Example 10 of the present invention. DETAILED DESCRIPTION

[0052] The preferred embodiments of the present invention are described below in conjunction with the accompanying drawings. It should be understood that the preferred embodiments described herein are only used to illustrate and explain the present invention, and are not used to limit the present invention.

[0053] The terms used in the embodiments of the present application are only for the purpose of describing specific embodiments, and are not intended to limit the embodiments of the present application. The singular forms of "a", "said" and "the" used in the embodiments of the present application are also intended to include plural forms, unless the context clearly indicates other meanings. It should also be understood that the term "and / or" used in this article refers to and includes any or all possible combinations of one or more associated listed items.

[0054] When the following description relates 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 the present application. On the contrary, they are only examples of devices and methods consistent with some aspects of the present application. In the description of the present application, it should be understood that the terms "first", "second", "third", etc. are only used to distinguish similar objects, and do not have to be used to describe a specific order or sequence, nor can they be understood as indicating or implying relative importance. For those of ordinary skill in the art, the specific meanings of the above terms in the present application can be understood according to the specific circumstances.

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

[0056] S100: using AI graphic recognition to process the input image file, identifying visual elements including text, buttons, and input boxes in the image, and extracting structured information corresponding to the visual elements, where the structured information corresponds to the title and data in the image;

[0057] S200: Identify the position and size of each front-end element in the image; determine the position data of each front-end element in the page through coordinate positioning, and the position data includes the specific position and size; convert the identified structured information and position data into the front-end configuration data format supported by the low-code platform; integrate the front-end configuration data into a complete front-end page configuration file;

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

[0059] The working principle and beneficial effects of the above technical solution are as follows: In this embodiment, the input image file is first processed by AI graphic recognition, visual elements such as text, buttons and input boxes in the image are identified, and the structured information corresponding to the visual elements is extracted, and 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 in 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, the designer interface of the low-code platform is used to import the generated front-end page configuration file into the low-code platform to automatically generate the corresponding front-end page. Step S100 of the above scheme uses AI graphic recognition to process the image file, and AI can accurately identify the 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, data, etc. Significance: Through AI automatic recognition, the time for manual annotation and manual information extraction is reduced; AI recognition reduces human errors and ensures the accuracy of data. Step S200 identifies the position and size of the front-end elements in the image, and determines the specific position and size of each front-end element in the page through precise coordinate positioning; converts the identified structured information and position data into the front-end configuration data format supported by the low-code platform. Significance: Converts visual design into standardized front-end configuration data to facilitate automated processing; supports multiple front-end configuration data formats, enhancing the compatibility and scalability of the system. Step S300 uses the designer interface of the low-code platform to generate the front-end page, and automatically converts the front-end page configuration file into the actual front-end page through the designer interface of the low-code platform; supports real-time preview and adjustment to ensure that the generated page meets design expectations. Significance: Automated generation reduces the workload of manually writing front-end code and reduces development costs; through automated processes, the development cycle from design to implementation is significantly shortened, improving development efficiency.

[0060] In summary, this embodiment realizes the automatic conversion from visual design to front-end code through the combination of AI graphic recognition and low-code platform, which greatly improves development efficiency, reduces development costs, and also ensures the accuracy and consistency of the design. This embodiment supports the conversion of the product manager's hand-drawn design drawings into the front-end interface in the low-code platform; supports the conversion of the interface screenshots of the original software system into the front-end interface in the low-code platform; and greatly improves the software development efficiency.

[0061] Example 2: Figure 2 As shown, based on Example 1, the process of extracting structured information corresponding to a visual element provided by an embodiment of the present invention includes the following steps:

[0062] S101: performing preprocessing on the input image file including operations such as image denoising, contrast enhancement, and resolution adjustment, identifying visual elements in the image through an object detection algorithm, and generating a bounding box for each visual element, including the position and size information of the element;

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

[0064] S103: Structuring the extracted attribute information to generate corresponding structured data, generating title or paragraph data for text elements, generating configuration data for click events for button elements, and generating configuration data for form fields for input box elements.

[0065] The working principle and beneficial effects of the above technical solution are as follows: In this embodiment, the input image file is first preprocessed including operations such as image denoising, contrast enhancement and resolution adjustment, and the visual elements in the image are identified by the target detection algorithm, and the bounding box of each element is generated, including the position and size information of the element; secondly, the detected visual elements are classified to determine the type of each element text, button or input box; at the same time, the attribute information of each visual element is extracted, including text content, button label 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 configuration data of click events, and input box elements generate configuration data of form fields. Step S101 of the above scheme is preprocessing and target detection, which improves the image quality through preprocessing operations such as image denoising, contrast enhancement and resolution adjustment, so that the target detection algorithm can more accurately identify the visual elements in the image; the target detection algorithm generates a bounding box for each element, accurately capturing the position and size information of the element. Significance: It ensures the basic data quality of 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. Classify the detected visual elements, determine their types (such as text, buttons or input boxes), and extract specific attribute information of each element, such as text content, button labels or input box prompt text. Significance: Convert visual elements from simple image data into application data with practical significance, provide rich content information for structured processing, and enhance the operability and application value of the data. Step S103: Structured processing. Structural processing is performed on the extracted attribute information to generate corresponding structured data; text elements are converted into title or paragraph data, button elements generate configuration data for click events, and input box elements generate configuration data for form fields. Significance: Integrate scattered visual element information into a systematic data structure to facilitate subsequent software development and application integration; structured data not only improves the readability and maintainability of data, but also lays the foundation for automated processing and intelligent applications.

[0066] In summary, this embodiment not only realizes the conversion 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: Figure 3 As shown, based on Example 2, the process of identifying visual elements in a picture by using a target detection algorithm provided in an embodiment of the present invention includes the following steps:

[0068] S1011: Preprocess the image, use the Gaussian kernel function to smooth the image and remove noise; enhance the contrast of the image through contrast-limited adaptive histogram equalization; adjust the resolution of the image using the interpolation kernel function; extract the visual elements in the image through convolution operation and feature pooling;

[0069] Among them, the image denoising formula is:

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

[0071] Where Ω 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 represents the denoised image;

[0072] Contrast enhancement formula:

[0073]

[0074] Where μ is the mean of the image; σ is the standard deviation of the image; I enhanced represents the image after contrast enhancement; CLAHE represents the contrast-limited adaptive histogram equalization algorithm;

[0075] The formula for adjusting the resolution is:

[0076]

[0077] Where K(ui,vj) is the interpolation kernel function, using bicubic interpolation, I resized (u,v) represents the pixel value of the image at position (u,v) after adjusting the resolution, I enhanced (i, j) represents the pixel value of the image at position (i, j) 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] Where W l,m (i,j) is the convolution kernel, b l,m is the bias term; F l,m I represents the value of the mth feature map in the lth layer, which is used to capture the features of visual elements such as text, buttons, and input boxes in the image; resized(i, j) represents the pixel value of the image at position (i, j) after adjusting the resolution; W l,m (i, j) represents the weight of the mth convolution kernel at the position (i, j) of the lth layer, which is used to extract the features of a specific visual element; b l,m Represents the bias term of the mth convolution kernel in the lth layer, which is used to adjust the output value of the feature map;

[0081] Feature pooling formula:

[0082]

[0083] In the formula, is the pooling 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 such as text, buttons, and input boxes in the image. F(i,j) represents the value of the feature map at position (i,j) before pooling;

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

[0085] The region proposal formula is:

[0086] R=RPN(F pooled )

[0087] Where R is the generated region proposal, which represents the potential target area; RPN represents the region proposal network, which is used to generate the potential target area;

[0088] Bounding box regression formula:

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

[0090] Where B is the generated bounding box, which indicates the location and size of the target; regression represents the regression algorithm, which is used to generate an accurate bounding box;

[0091] Non-maximum suppression formula:

[0092] B final =NMS(B)

[0093] In the formula, B final is the final bounding box; NMS stands for non-maximum suppression algorithm, which is used to remove overlapping bounding boxes;

[0094] S1013: marking the detected optimal bounding box on the original image and outputting the final result; marking the final bounding box on the original image with color to generate a marked image;

[0095] Bounding box annotation formula:

[0096]

[0097] In the formula, color is the label color, I output (x, y) represents the pixel value of the annotated image at position (x, y), B final Represents the final bounding box, indicating the location and size of the object.

[0098] The working principle and beneficial effects of the above technical solution are as follows: the present embodiment first performs a preprocessing operation on the image, uses a Gaussian kernel function to smooth the image and remove noise; enhances the contrast of the image through contrast-limited adaptive histogram equalization; uses an interpolation kernel function to adjust the resolution of the image; extracts visual elements in the image through convolution operations and feature pooling; secondly, generates a target area of ​​a potential bounding box for each visual element through a region proposal network, uses a regression algorithm to refine the generated target area proposal, generates a bounding box, removes overlapping bounding boxes, and retains the optimal bounding box; finally, annotates the detected optimal bounding box on the original image, and outputs the final result; annotates the final bounding box with color on the original image to generate an annotated image. In the above scheme, step S1011 image preprocessing is to smooth the image through the Gaussian kernel function to remove noise, make the image clearer and reduce noise interference; use the contrast-limited adaptive histogram equalization (CLAHE) algorithm to enhance the contrast of the image, make the details in the image more obvious, and facilitate feature extraction; use the interpolation kernel function (such as bicubic interpolation) to adjust the resolution of the image, so that the image can maintain good visual effects at different resolutions, which is convenient for convolution operations; extract the visual element features in the image, such as text, buttons and input boxes, through convolution operations, and generate feature maps; retain the most important visual element features in the image through pooling operations, reduce the amount of calculation, and retain key information. Significance: Denoising and contrast enhancement improve the quality of the image and make feature extraction more accurate; adjusting the resolution enables the algorithm to adapt to images of different resolutions, enhancing the robustness of the algorithm; convolution operations and feature pooling effectively extract key visual elements in the image, providing a basis for target detection. Step S1012: Region proposal and bounding box generation. The region proposal network (RPN) is used to generate potential target regions, which reduces the search space for target detection and improves detection efficiency. The generated target region proposal is refined using a regression algorithm to generate an accurate bounding box, which improves the accuracy of target positioning. Non-maximum suppression (NMS) is used to remove overlapping bounding boxes, retain the optimal bounding box, and reduce redundant detection results. Significance: The region proposal network effectively reduces the search space for target detection and improves detection efficiency. Bounding box regression and non-maximum suppression improve the accuracy of target positioning and reduce false detections and missed detections. Step S1013: Bounding box annotation and result output. The detected optimal bounding box is annotated on the original image to intuitively display the detection results. The annotated image is generated to facilitate users to view and analyze the detection results. Significance: Bounding box annotation makes the detection results more intuitive and easier for users to understand and analyze.

[0099] In summary, the target detection algorithm of this embodiment can effectively identify visual elements in an image, 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 of extracting attribute information of each visual element provided by the embodiment of the present invention includes the following steps:

[0101] S1021: Extracting features such as shape, color, and texture from the bounding box of the visual element using image feature extraction;

[0102] S1022: Input the extracted features into a classification model of a pre-trained convolutional neural network, determine the type of the element by inference, and determine the type of each visual element according to the output of the classification model;

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

[0104] The working principle and beneficial effects of the above technical solution are as follows: the present embodiment firstly uses image feature extraction to extract features such as shape, color and texture from the bounding box of the visual element; secondly, the extracted features are input into the classification model of the pre-trained convolutional neural network, the type of the element is determined by inference, and the type of each visual element is determined according to the output of the classification model; finally, for the elements classified as text, the optical character recognition technology is used to extract the text content from the image. Step S1021 of the above scheme uses image feature extraction to extract features such as shape, color and texture from the bounding box of the visual element, which can identify the geometric shape of the element, such as rectangle, circle, etc., to help 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 activated state and inactivated state of the button) can be identified; capturing subtle texture changes on the surface of the element helps to distinguish elements with similar appearance. Significance achieved: Through multi-dimensional feature extraction, visual elements can be more accurately identified and classified; for UI interfaces of different styles and designs, a high recognition consistency can be maintained. Step S1022 inputs the extracted features into the classification model of the pre-trained convolutional neural network, infers and determines the type of element, and uses the deep learning model to accurately classify complex and diverse visual elements, reduce manual intervention and improve processing efficiency. Significance achieved: Makes the recognition and classification process of UI elements more intelligent and efficient; 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; converts the extracted text content into structured data for subsequent processing and analysis. Significance achieved: Converts unstructured image information into structured data for computer processing and analysis; by extracting and processing text information in the user interface, it can better understand and respond to user operations; Significance achieved: Reduces the workload of manual configuration and accelerates the UI development process; 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 improves 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 of generating corresponding structured data provided by the embodiment of the present invention includes the following steps:

[0107] S1031: Structuring the extracted text content to generate title or paragraph data;

[0108] S1032: For an element classified as a button, extract the label text on the button using optical character recognition; generate configuration data of the click event according to the label text of the button, the configuration data including information such as the trigger condition and response action of the button;

[0109] S1033: For an element classified as an input box, extract the prompt text of the input box using optical character recognition; wherein, according to the prompt text, generate configuration data of the form field, the configuration data including information such as field type and validation rules.

[0110] The working principle and beneficial effects of the above technical solution are as follows: the present embodiment firstly performs structural processing on the extracted text content to generate title or paragraph data; secondly, for the elements classified as buttons, optical character recognition is used to extract the label text on the button; according to the label text of the button, the configuration data of the click event is generated, and the configuration data includes the triggering condition, response action and other information of the button; finally, for the elements classified as input boxes, optical character recognition is used to extract the prompt text of the input box; wherein, according to the prompt text, the configuration data of the form field is generated, and the configuration data includes the field type, verification rules and other information. Step S1031 of the above scheme performs structural processing on the extracted text content to generate title or paragraph data, and parses and classifies the extracted text content through natural language processing (NLP) technology to identify which parts are titles and which are paragraphs; converts the parsed text content into a structured data format, such as JSON, XML, etc., to facilitate data processing and application. Significance: The text data after structured processing is easier to be understood and processed by computers, which improves the readability and usability of the data; the structured data provides a basis for subsequent data analysis, mining and application, so that the information extracted from the text can be used more effectively. Step S1032: For elements classified as buttons, optical character recognition is used to extract the label text on the button; according to the label text of the button, configuration data of the click event is generated; the label text on the button is extracted from the button image through OCR technology; according to the extracted label text, configuration data of the button click event is generated, including trigger conditions and response actions, etc. Significance: The generated click event configuration data can be used for automated UI testing to ensure that the function and response action of the button meet expectations; by accurately identifying the button label and generating the corresponding event configuration, the consistency of the user interface and the accuracy of the response are ensured, thereby improving the user experience. Step S1033: For elements classified as input boxes, optical character recognition is used to extract the prompt text of the input box; according to the prompt text, configuration data of the form field is generated; by OCR technology, the prompt text is extracted from the input box; according to the prompt text, configuration data of the form field is generated, including field type, validation rules, etc. Significance: The generated form field configuration data can be used for automatic verification and processing of the form to ensure that the data entered by the user meets the expected format and rules; through automated form field configuration, human errors are reduced and the accuracy and quality of data input are improved.

[0111] In summary, this embodiment improves the data structure, automatic processing capability and user experience. Through these steps, not only can text data be processed and utilized more efficiently, but also strong support can be provided in UI testing and form processing, thereby improving the reliability of the overall system and user satisfaction.

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

[0113] S201: performing multi-dimensional mapping of the extracted structural information and the position data obtained by coordinate positioning, associating the visual elements with their functional attributes, and grouping the spatial positions of the visual elements and their functional attributes in the page 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, a hierarchical front-end page configuration file is constructed to define the overall layout and global properties of the page, the layout and functions of each module, and the properties, position and interactive behaviors of specific elements; the configuration file is divided 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: This embodiment first performs multi-dimensional mapping on the extracted structured information and the position data obtained by coordinate positioning, associates the visual elements with their functional attributes, and groups the spatial positions of the visual elements and their functional attributes in the page in a hierarchical manner; secondly, 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; finally, based on the modular configuration generation, a hierarchical front-end page configuration file is constructed to define the overall layout and global attributes of the page, the layout and functions of each module, and the attributes, position and interactive behavior of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponding to a module. Step S201 of the above scheme, multi-dimensional mapping and hierarchical grouping, can accurately associate visual elements with their functional attributes by mapping the extracted structured information with the position data obtained by coordinate positioning; the mapping is not limited to a single dimension, but multi-dimensional, ensuring that the function and visual performance of each element in the page can be accurately described; the spatial positions of visual elements and their functional attributes in the page are grouped in a hierarchical manner, making the structure of the page clearer and facilitating modular processing and the generation of configuration files. Significance: Multi-dimensional mapping and hierarchical grouping enable the attributes, positions and functions of each element to be accurately described, reducing errors and inconsistencies in configuration files; the hierarchical structure makes the various parts of the page more modular, which is easier for developers to understand and maintain, and also provides convenience for optimization and expansion. Step S202 real-time verification and optimization, after the multi-dimensional mapping is completed, the structured information and position data are verified 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 dependency of each element, the relative position and size of the elements are automatically adjusted to ensure that the page can maintain a good layout effect on different devices and screen sizes; the page is divided into multiple independent modules, each module corresponds to an independent configuration unit, making the configuration of the page more flexible and scalable. Significance: Real-time verification and dynamic adjustment ensure the good performance of the page on different devices and screen sizes, and improve the user experience; modular configuration makes the configuration process of the page simpler and more intuitive, and developers can focus on the details of each module without worrying about the overall layout problem. Step S203 builds a hierarchical front-end page configuration file. On the basis of 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, position and interactive behavior of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponds to a module, making the management of the configuration file more convenient and efficient.Significance: The hierarchical configuration file structure makes it easier for developers to understand and modify the configuration files, reducing the difficulty of maintenance; the division of sub-files makes the page configuration more flexible, and developers can modify the configuration of each module independently as needed without affecting other modules.

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

[0118] Example 7: Figure 7 As shown, based on Example 6, the process of associating a visual element with its functional attribute provided in this embodiment includes the following steps:

[0119] S2011: 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; through multimodal data fusion, the feature vectors of the visual elements are aligned with the semantic vectors of their functional attributes in multiple dimensions;

[0120] S2012: Map the spatial position data of the visual element with its functional attributes in a multi-dimensional manner, obtain the position of the element in the page through a coordinate positioning system, and dynamically analyze the spatial dependency relationship of the element; map the spatial position of the element with its functional attributes in a multi-dimensional space to form a spatial relationship diagram with a hierarchical structure;

[0121] S2013: After completing the semantic mapping and spatial mapping, a hierarchical tree-based organization is used to group the elements step by step 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 relationships to form a multi-dimensional hierarchical structure.

[0122] The working principle and beneficial effects of the above technical solution are as follows: This embodiment firstly performs an in-depth analysis on the extracted structured information 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 the visual elements are aligned with the semantic vectors of their functional attributes in a multi-dimensional manner; secondly, the spatial position data of the visual elements are multi-dimensionally mapped with their functional attributes, the position of the elements in the page is obtained through a coordinate positioning system, and the spatial dependency of the elements is dynamically analyzed; the spatial position of the elements and their functional attributes are mapped in a multi-dimensional 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 step by step 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 dependencies and functional associations to form a multi-dimensional hierarchical structure. The above scheme includes step S2011 semantic analysis and multimodal data fusion. Through the semantic analysis engine, the semantic features of each visual element can be deeply understood, which helps to accurately identify the functional attributes of the element; through multimodal data fusion, the feature vector of the visual element is aligned with the semantic vector of its functional attribute, which enhances the correlation between the element and its functional attribute, making the correlation more comprehensive and accurate. The significance achieved: through semantic analysis and multimodal data fusion, the system can more accurately understand the function of the visual element, which is of great significance for design, user interface optimization and user experience improvement; the system can better understand and process complex visual information, thereby improving the intelligence level of the system. Step S2012 multi-dimensional mapping of spatial position data and functional attributes. Through the coordinate positioning system, the spatial dependency of the element can be dynamically analyzed, which is crucial for understanding the layout and interaction mode of the element in the page; the spatial position of the element and its functional attribute are mapped in a multidimensional space to form a hierarchical spatial relationship diagram, which helps the system better understand and manage the spatial layout of the element. The significance achieved: through spatial mapping, the page layout can be better optimized, making the arrangement of elements more reasonable and efficient; a good spatial layout can improve the user's operating experience, reduce misoperation, and improve user satisfaction. Step S2013 hierarchical tree organization, grouping the elements step by step according to the logical relationship of their functional attributes and the hierarchical relationship of their spatial positions, helps the system to better organize and manage the elements; through the connection between the nodes, a multi-dimensional hierarchical structure is formed, which enhances the system's understanding and processing capabilities of the element relationship. Significance achieved: Hierarchical organization enables the system to manage and operate elements more efficiently, reduces complexity, and improves processing speed; this organizational method enables the system to respond to different layout and functional requirements more flexibly, and enhances 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: Figure 8 As shown, based on Example 7, the process of forming a spatial relationship graph with a hierarchical structure provided by the embodiment of the present invention includes the following steps:

[0125] S20121: Construct a multidimensional space coordinate system, including three-dimensional space coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantifying and vectorizing the functional characteristics of the elements. Each functional attribute corresponds to an independent dimension.

[0126] S20122: vectorize the functional attributes of each visual element and convert them into a multi-dimensional vector, which contains the semantic information of the functional attributes and integrates the spatial position data of the elements;

[0127] S20123: Align and map functional attribute vectors and spatial location data in multidimensional space through a hybrid mapping algorithm.

[0128] Among them, the hybrid mapping algorithm equation is:

[0129]

[0130] Where M(x, y, z, F) represents the multidimensional space coordinates after hybrid mapping. In the multidimensional space, the function attribute vector F and the spatial position (x, y, z) are the final result after hybrid mapping; n represents the number of dimensions of the function attribute; F i represents the i-th dimension of the function attribute vector; P(x, y, z) represents the vector representation of spatial position data, the vector form of spatial position (x, y, z), which is used to perform dot product operation with the function attribute vector; σ i represents the standard deviation of the i-th functional attribute; W i represents the weight vector of the i-th functional attribute; B represents the bias vector, which is used to adjust the reference value of the hybrid mapping result to ensure the rationality and accuracy of the mapping result; F i P(x,y,z) represents the dot product operation of the i-th dimension of the functional attribute vector and the spatial position vector, which is used to measure the correlation between the functional attribute and the spatial position; normalization It is expressed by dividing by the standard deviation σ i , normalize the i-th dimension of the functional attribute vector to ensure that the numerical ranges of different functional attributes are consistent; weighted sum It means that the normalized results of all functional attributes are weighted summed to obtain the main part of the hybrid mapping; the hybrid mapping algorithm equation realizes the alignment and mapping of the functional attribute vector and the spatial position data in the multi-dimensional 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: the present embodiment first constructs a multidimensional space coordinate system, including three-dimensional space coordinates and functional attribute dimensions, the functional attribute dimensions are obtained by quantifying and vectorizing the functional characteristics of the elements, and each functional attribute corresponds to an independent dimension; secondly, the functional attributes of each visual element are vectorized and converted into a multidimensional vector, including the semantic information of the functional attributes, and integrating the spatial position data of the elements; finally, the functional attribute vector and the spatial position data are aligned and mapped in the multidimensional space through a hybrid mapping algorithm. Step S20121 of the above scheme constructs a multidimensional space coordinate system, and by quantizing and vectorizing the functional characteristics of the elements, these abstract functional attributes are converted into a computable numerical form, which is convenient for mathematical processing and analysis; each functional attribute corresponds to an independent dimension, which ensures the independence and non-interference between different functional attributes, and enhances the accuracy and flexibility of data processing. The significance achieved: the construction of the multidimensional space coordinate system enables the spatial relationship diagram to express not only the spatial position of the element, but also its 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 the functional attributes, and ensures the coherence and consistency of the whole process. Step S20122: vectorization of functional attributes, converting the semantic information of functional attributes into multidimensional vectors, so that the functional attributes not only have numerical form, but also retain their semantic connotations, which is convenient for semantic analysis and understanding; the spatial position data of the element is integrated with the functional attribute vector, so that the spatial relationship diagram can simultaneously express the spatial position and functional attributes of the element, enhancing the expression ability and practicality of the diagram. Significance achieved: Through vectorization, the functional attributes and spatial position data are organically combined, so that the spatial relationship diagram can more comprehensively reflect the characteristics and relationships of the elements; it provides the necessary data input for the hybrid mapping algorithm, ensuring the accuracy and effectiveness of the mapping process. Step S20123: hybrid mapping algorithm, through the hybrid mapping algorithm, the functional attribute vector and the spatial position data are aligned and mapped in the multidimensional space, ensuring the accurate correspondence between the functional attributes and the spatial position, avoiding data dislocation and error; the mapping process enables the functional attributes and the spatial position to be uniformly expressed in the multidimensional 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 element relationship in the diagram clearer and more intuitive, which is convenient for subsequent analysis and application; the mapped spatial relationship diagram can more accurately reflect the spatial position and functional attributes of the elements, improve the practicality and application value of the diagram, and provide strong support for research and application in related fields.

[0132] In summary, this embodiment gradually enhances the expressiveness and practicality of the spatial relationship diagram by constructing a multi-dimensional spatial coordinate system, vectorizing functional attributes, and using a hybrid mapping algorithm, thus laying a solid foundation for analysis and application.

[0133] Example 9: Fig. 9 As shown, based on Example 1, the process of automatically generating a corresponding front-end page provided by the embodiment of the present 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 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;

[0135] S302: After the configuration file is imported, the low-code platform adopts a modular construction strategy to decompose the page into multiple independent modules, each of which corresponds 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 corresponding interaction components and data binding codes.

[0137] The working principle and beneficial effects of the above technical solution are as follows: First, the present embodiment matches the abstract data structure in the configuration file with the component library inside the platform through the designer interface of the low-code platform, so as to realize the 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; secondly, after the configuration file is imported, the low-code platform adopts a modular construction strategy to decompose the page into multiple independent modules, each module corresponding to a functional unit in the configuration file; finally, the interactive logic and data binding requirements in the configuration file are identified, and the corresponding interactive components and data binding codes are automatically generated. Step S301 of the above scheme is intelligent mapping and dynamic adaptation**, through the designer interface, the abstract data structure in the configuration file can be intelligently matched with the component library inside the platform; this mapping is not just a simple data correspondence, but based on machine learning technology, it automatically identifies the data type, structure and functional requirements in the configuration file, and selects the most appropriate component for mapping; the adaptive rendering engine can dynamically adjust the rendering logic of the page according to the data characteristics in the configuration file; according to the complexity of the data, the interactive requirements and the device characteristics, the layout, style and function of the page are automatically optimized to ensure that the page can present the best effect on different devices and screen sizes. Significance achieved: Intelligent mapping and dynamic adaptation greatly reduce the workload of developers to manually adjust page layout and style, shortening the development cycle; through dynamic adaptation, the page can be automatically adjusted according to the user's device and operating habits, providing a smoother and more consistent user experience; intelligent mapping reduces the workload of manual configuration, reduces development and maintenance costs, and also reduces the possibility of human errors. Step S302 Modular construction strategy, the low-code platform decomposes the page into multiple independent modules, each module corresponds to a functional unit in the configuration file; this modular construction method makes the development, maintenance and expansion of the page more flexible and efficient; each module can be independently developed, tested and deployed, and the modules communicate through standard interfaces to ensure the scalability and maintainability of the system. Significance achieved: Modular construction makes the various functional units of the page independent of each other, which is convenient for developers to maintain and optimize specific modules without affecting other modules; modular design enables the system to easily add new functions or modify existing functions without reconstructing the entire page. Step S303 automatically generates interactive components and data bindings, and 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 these logics; it can identify the data binding requirements in the configuration file and automatically generate data binding codes to ensure that the data in the page is synchronized with the background data source.Significance achieved: Automatically generate interactive components and data binding code, reducing the workload of developers in manually writing code and simplifying the development process; through intelligent identification of interactive 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 of data in the page with the background data source, reducing data inconsistency problems and improving system reliability and stability.

[0138] In summary, this embodiment improves development efficiency and user experience and reduces development costs through intelligent mapping and dynamic adaptation; improves the maintainability and scalability of pages through modular construction strategies; simplifies the development process, improves the interactive experience, and ensures data consistency through automatic generation of interactive components and data binding. Together, an efficient, flexible, and user-friendly front-end page automatic generation system is constructed.

[0139] Example 10: Fig.10 As shown, based on Embodiment 1 to Embodiment 9, the system for generating a software front-end page according to a picture file provided in the embodiment of the present invention includes:

[0140] The information extraction module is responsible for processing the input image files using AI graphic recognition, identifying visual elements in the image, such as text, buttons, and input boxes, 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 in the page through coordinate positioning, and the position data includes 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; 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 graphic recognition to process the input image file, identifies visual elements such as text, buttons and input boxes in the image, and extracts the structured information corresponding to the visual elements, and 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, the position data of each front-end element in 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; 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 generates the corresponding front-end page. The information extraction module of the above scheme uses advanced AI graphic recognition technology to accurately identify visual elements in the image, such as text, buttons, input boxes, etc.; the identified visual elements are converted into structured information, including titles and data, for easy processing and use. Significance achieved: Greatly reduces the workload of manually extracting image information, improves the efficiency and accuracy of information extraction; provides a structured data foundation for the file configuration module, and ensures data consistency and availability. The file configuration module uses coordinate positioning technology to accurately identify the position and size of each front-end element in the image; converts the identified structured information and position data into the front-end configuration data format supported by the low-code platform for direct import and use. Significance achieved: Ensures that the position and size of the front-end elements in the page are consistent with the image, improves the visual effect and user experience of the page; the generated configuration file can be directly used in the low-code platform, simplifies the front-end development process, and improves development efficiency. The page generation module uses the designer interface of the low-code platform to automatically convert configuration files into front-end pages, reducing the workload of manual code writing; supports rapid generation and modification of pages, facilitating developers to quickly iterate and test. Significance achieved: Significantly improves the development efficiency of front-end pages and reduces development costs; ensures that the generated pages are consistent with the design Figure 1 It improves product quality and user experience; it supports the import and generation of multiple front-end configuration data, enhancing the flexibility and scalability of the system.

[0144] In summary, this embodiment realizes the automatic generation process from image files to front-end pages through the collaborative work of the information extraction module, the file configuration module and the page generation module. In terms of improving efficiency, ensuring quality, simplifying processes and enhancing flexibility, efficient, accurate and flexible front-end page development is finally realized.

[0145] Obviously, those skilled in the art can make various changes and modifications to the present invention without departing from the spirit and scope of the present invention. Thus, if these modifications and variations of the present invention belong to the scope of equivalent technologies of the present invention, the present invention is also intended to include these modifications and variations.

Claims

1. A method for generating a software front-end page according to an image file, characterized in that: The following steps are involved: Use AI graphic recognition to process the input image files, identify the visual elements in the image including text, buttons and input boxes, 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; Convert the identified structured information and location data into the front-end configuration data format supported by the low-code platform; integrate the front-end configuration data into a complete front-end page configuration file; Use the designer interface of the low-code platform to import the generated front-end page configuration file into the low-code platform to automatically generate the corresponding front-end page.

2. The method for generating a software front-end page according to a picture file as claimed in claim 1, characterized in that: The process of extracting the structured information corresponding to the visual elements, using the object detection algorithm to identify the visual elements in the image, includes the following steps: Preprocess the image, use Gaussian kernel function to smooth the image and remove noise; enhance the contrast of the image through contrast-limited adaptive histogram equalization; use interpolation kernel function to adjust the resolution of the image; extract visual elements in the image through convolution operation and feature pooling; Generate the target area of ​​the potential bounding box of each visual element through the region proposal network, use the regression algorithm to refine the generated target area proposal, generate the bounding box, remove the overlapping bounding boxes, and retain the optimal bounding box; The detected optimal bounding box is marked on the original image and the final result is output; the final bounding box is marked on the original image with color to generate the marked image.

3. The method for generating a software front-end page according to a picture file as claimed in claim 1, characterized in that: Through coordinate positioning, the position data of each front-end element in the page is determined. The position data includes the specific position and size.

4. The method for generating a software front-end page according to a picture file as claimed in claim 1, characterized in that: The process of integrating the front-end configuration data into a complete front-end page configuration file includes the following steps: The extracted structural information is mapped with the position data obtained by coordinate positioning in a multi-dimensional manner, the visual elements are associated with their functional attributes, and the spatial positions of the visual elements and their functional attributes on the page are grouped in a hierarchical manner; After the multi-dimensional mapping is completed, the structured information and location data are verified and optimized in real time; Automatically adjust the relative position and size of elements by dynamically calculating the layout dependency of each element; divide the page into multiple independent modules, each module corresponds to an independent configuration unit; Based on the modular configuration generation, a hierarchical front-end page configuration file is constructed to define the overall layout and global properties of the page, the layout and functions of each module, and the properties, position and interactive behaviors of specific elements; the configuration file is divided into multiple sub-files, each sub-file corresponds to a module.

5. The method for generating a software front-end page according to a picture file as claimed in claim 4, characterized in that: The process of associating visual elements with their functional attributes consists of the following steps: The semantic analysis engine conducts in-depth analysis on the extracted structured information to identify the semantic features of each visual element and its corresponding functional attributes; The spatial position data of visual elements and their functional attributes are mapped in multiple dimensions. The position of elements in the page is obtained through the coordinate positioning system, and the spatial dependency relationship of elements is dynamically analyzed. The spatial position of elements and their functional attributes are mapped in multidimensional space to form a spatial relationship diagram with a hierarchical structure. After completing the semantic mapping and spatial mapping, a hierarchical tree-based organization is used to group the elements step by step according to the logical relationship of their functional attributes and the hierarchical relationship of their spatial positions.

6. The method for generating a software front-end page according to a picture file as claimed in claim 5, characterized in that: Through multimodal data fusion, 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 according to a picture file as claimed in claim 5, characterized in that: 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.

8. The method for generating a software front-end page according to a picture file as claimed in claim 5, characterized in that: The process of forming a spatial relationship graph with a hierarchical structure includes the following steps: Construct a multidimensional space coordinate system, including three-dimensional space coordinates and functional attribute dimensions. The functional attribute dimensions are obtained by quantifying and vectorizing the functional characteristics of the elements. Each functional attribute corresponds to an independent dimension. Vectorize the functional attributes of each visual element and convert them into a multi-dimensional vector, which contains the semantic information of the functional attributes and integrates the spatial position data of the element; The functional attribute vectors and spatial location data are aligned and mapped in multidimensional space through a hybrid mapping algorithm.

9. The method for generating a software front-end page according to a picture file as claimed in claim 1, characterized in that: The process of automatically generating the corresponding front-end page includes the following steps: 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 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; After the configuration file is imported, the low-code platform adopts a modular construction strategy to decompose the page into multiple independent modules, each of which corresponds to a functional unit in the configuration file; Identify the interaction logic and data binding requirements in the configuration files, and automatically generate the corresponding interaction components and data binding codes.

10. A system for generating a software front-end page based on an image file, characterized in that: Include: The information extraction module is responsible for processing the input image files using AI graphic recognition, identifying the visual elements in the image that contain text, buttons, and input boxes, 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 in the page through coordinate positioning, and the position data includes 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; 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.

Images