Data processing methods, apparatuses, electronic devices, storage media and software products

Abstract

This application provides a data processing method, apparatus, electronic device, storage medium, and program product. The method includes: acquiring first text; determining multiple second components corresponding to the first text from multiple first components in a component library; determining a first layout of the multiple second components, the first layout being the initial layout of the multiple second components in a functional component corresponding to a first function; acquiring multiple constraints when the second components are laid out in the functional component, and adjusting the parameters of the multiple second components in the first layout based on the constraints to obtain a second layout; and generating an application corresponding to the first function based on the second layout and the multiple second components. Thus, by using the above method, multiple second components and a first layout can be determined, and a second layout can be obtained based on the constraints. Furthermore, an application corresponding to the first function can be generated based on the second layout and the second components, solving the problem of low efficiency in traditional front-end development.

Description

Technical Field

[0001] This application relates to the field of front-end development technology, and in particular to a data processing method, apparatus, electronic device, storage medium, and program product. Background Technology

[0002] With the acceleration of digital transformation, the demand for front-end development continues to increase. As the core of user interaction, the development efficiency of the front-end interface directly affects the project's implementation progress.

[0003] In related technologies, when developing front-end applications, manual coding can be used. Users can use the front-end technology framework to manually write application code to implement interface functions and interaction logic, thus completing the entire front-end development process.

[0004] However, the process of manually writing the application in the above methods is cumbersome, resulting in low efficiency in front-end development. Summary of the Invention

[0005] This application provides a data processing method, apparatus, electronic device, storage medium, and program product to solve the technical problem of low efficiency in front-end development.

[0006] Firstly, this application provides a data processing method, including:

[0007] Obtain the first text, which is used to describe the first feature to be developed;

[0008] Among the multiple first components in the component library, multiple second components corresponding to the first text are identified. The second components are the components required to implement the first function. The component library is used to store the components required for various functions.

[0009] Determine the first layout of multiple second components, the first layout being the initial layout of the functional components corresponding to the first function;

[0010] Obtain multiple constraints when the second component is laid out in the functional component, and adjust the parameters of multiple second components in the first layout based on the constraints to obtain the second layout;

[0011] Based on the second layout and multiple second components, an application corresponding to the first function is generated.

[0012] In this embodiment, multiple second components corresponding to the first text and a first layout of the multiple second components can be determined. Then, based on constraints, the parameters of the multiple second components in the first layout are adjusted to obtain a second layout. Based on the second layout and the second components, an application corresponding to the first function is generated, which solves the problem of low efficiency in traditional front-end development.

[0013] Optionally, using the method described above, among multiple first components in the component library, multiple second components corresponding to the first text are determined, including:

[0014] Identify the keywords in the first text, and associate the keywords with the sub-functions that the first function needs to achieve;

[0015] Determine multiple similarities between keywords and multiple first components;

[0016] Based on multiple similarities, multiple second components corresponding to the first text are obtained from multiple first components.

[0017] In this embodiment, by extracting keywords indicating functional points or component types from the first text and matching them with the similarity of the keywords with the first component, the appropriate second component can be determined. This can accurately match the requirements of the first function, reduce the tediousness and errors of manual screening, simplify the component matching process, lower the development threshold, lay the foundation for each stage of subsequent front-end development, and improve front-end development efficiency.

[0018] Optionally, the method described above, based on multiple similarities, retrieves multiple second components corresponding to the first text from multiple first components, including:

[0019] Based on multiple similarities, the multiple first components are sorted to obtain the first order;

[0020] Get the first component of the first preset number in the first order, and get multiple second components corresponding to the first text.

[0021] In this embodiment, by extracting keywords and calculating their similarity to the first component, and then matching the second component by sorting and filtering based on similarity, the second component required to achieve the first function can be quickly located. This avoids the subjectivity and inefficiency of manual component selection, improves the accuracy and efficiency of component matching, and controls the scale of recommended components by setting a preset number, thus taking into account the completeness of development needs.

[0022] Optionally, as described above, the first layout includes the positions, sizes, and spacing of multiple second components; determining the first layout of the multiple second components includes:

[0023] Determine the screen size of the electronic device;

[0024] Based on screen size, determine the location and size of functional components within the electronic device;

[0025] The positions of multiple second components are determined based on the location and size of the functional components;

[0026] Based on the size of the functional component, determine the size of multiple second components and the spacing between the multiple second components.

[0027] In this embodiment, the screen size of the electronic device is first determined, and then the position and size of the functional components are adaptively determined. Based on the position and size of the functional components, the position, size and spacing of multiple second components are determined. This enables the automated generation of the initial layout of the front-end interface without manual adjustment, effectively simplifying the layout design process, improving the standardization and adaptability of the interface layout, and increasing the efficiency of front-end development.

[0028] Optionally, the constraints in the above method include one or more of the following: uniformity of the spacing of the second components, area proportion of the second components, overlap of the second components, space utilization of the functional components, and responsive adaptation rules.

[0029] In this embodiment, by iteratively optimizing the first layout based on constraints such as spacing uniformity, area proportion, overlap, space utilization, and responsive adaptation rules, a second layout that is regular, coordinated, non-overlapping, makes reasonable use of space, and is compatible with multiple devices can be automatically generated, thereby improving the quality and standardization of the interface layout, reducing manual debugging costs, and improving the efficiency of front-end development.

[0030] Optionally, as described above, based on constraints, the parameters of multiple second components in the first layout are adjusted to obtain a second layout, including:

[0031] Based on constraints, the layout parameters of multiple first components in the first layout are iterated a preset number of times. The layout parameters include the position, spacing and size of the components.

[0032] The second layout is determined from the results of a preset number of iterations.

[0033] In this embodiment, based on constraints, the layout parameters such as the position, spacing and size of the second component in the first layout can be iteratively optimized in multiple rounds, and the optimal solution can be selected from the iteration results as the second layout. This can automatically achieve the standardization, uniformity and multi-terminal adaptation of the interface layout, avoid the tediousness and subjectivity of manual debugging, and improve the layout quality and front-end development efficiency.

[0034] Secondly, this application provides a data processing apparatus, comprising:

[0035] The acquisition module is used to acquire the first text, which describes the first function to be developed.

[0036] The first determining module is used to determine multiple second components corresponding to the first text from multiple first components in the component library. The second components are the components required to implement the first function. The component library is used to store the components required for various functions.

[0037] The second determining module is used to determine the first layout of multiple second components, wherein the first layout is the initial layout of multiple second components in the functional components corresponding to the first function.

[0038] The adjustment module is used to obtain multiple constraints when the second component is laid out in the functional component, and adjust the parameters of multiple second components in the first layout based on the constraints to obtain the second layout.

[0039] The generation module is used to generate the application corresponding to the first function based on the second layout and multiple second components.

[0040] Optionally, in the above apparatus, the first determining module is specifically used for,

[0041] Identify the keywords in the first text, and associate the keywords with the sub-functions that the first function needs to achieve;

[0042] Determine multiple similarities between keywords and multiple first components;

[0043] Based on multiple similarities, multiple second components corresponding to the first text are obtained from multiple first components.

[0044] Optionally, in the above apparatus, the first determining module is specifically used for,

[0045] Based on multiple similarities, the multiple first components are sorted to obtain the first order;

[0046] Get the first component of the first preset number in the first order, and get multiple second components corresponding to the first text.

[0047] Optionally, in the above apparatus, the second determining module is specifically used for,

[0048] Determine the screen size of the electronic device;

[0049] Based on screen size, determine the location and size of functional components within the electronic device;

[0050] The positions of multiple second components are determined based on the location and size of the functional components;

[0051] Based on the size of the functional component, determine the size of multiple second components and the spacing between the multiple second components.

[0052] Optionally, the constraints include one or more of the following: uniformity of the spacing of the second components, area proportion of the second components, overlap of the second components, space utilization of the functional components, and responsive adaptation rules.

[0053] Optionally, in the above-described device, the adjustment module is specifically used for,

[0054] Based on constraints, the layout parameters of multiple first components in the first layout are iterated a preset number of times. The layout parameters include the position, spacing and size of the components.

[0055] The second layout is determined from the results of a preset number of iterations.

[0056] Thirdly, this application provides an electronic device, including: a processor, and a memory communicatively connected to the processor;

[0057] The memory stores the instructions that the computer executes;

[0058] The processor executes computer-executable instructions stored in memory to implement the method as described in the first aspect.

[0059] The electronic device provided in this application embodiment can execute the technical solutions in the above method embodiments, and its beneficial effects are similar, so they will not be described again here.

[0060] Fourthly, this application provides a computer-readable storage medium storing computer-executable instructions, which, when executed by a computer, are used to implement the method as described in the first aspect.

[0061] The computer-readable storage medium provided in this application embodiment can execute the technical solutions in the above method embodiments, and its beneficial effects are similar, so they will not be described again here.

[0062] Fifthly, this application provides a computer program product, including a computer program, which, when executed by a computer, is used to implement the method of the first aspect.

[0063] The computer program product provided in this application embodiment can execute the technical solutions in the above method embodiments, and its beneficial effects are similar, so they will not be described again here.

[0064] The data processing method, apparatus, electronic device, storage medium, and program product provided in this application, when performing front-end development, can obtain a first text, which is used to describe a first function to be developed; among multiple first components in a component library, multiple second components corresponding to the first text are determined, the second components are the components required to implement the first function, the component library is used to store components required for various functions, and the first components can refer to the original, unfiltered components in the component library; a first layout of multiple second components is determined, the first layout is the initial layout of multiple second components in the functional component corresponding to the first function, the functional component can refer to the container or parent interface that carries the first function, and each second component is placed in the functional component; multiple constraints are obtained when the second components are laid out in the functional component, and based on the constraints, the parameters of multiple second components in the first layout are adjusted to obtain the second layout, the constraints can be objective and quantifiable technical rules followed when optimizing the layout, and the second layout can refer to the final reasonable layout obtained after optimizing the first layout according to the constraints; based on the second layout and multiple second components, an application corresponding to the first function is generated, the application can be an automatically generated, directly runnable front-end code program. In this way, by using the above method, multiple second components corresponding to the first text and the first layout of the multiple second components can be determined. Then, based on the constraints, the parameters of the multiple second components in the first layout are adjusted to obtain the second layout. Based on the second layout and the second components, the application corresponding to the first function is generated, which solves the problem of low efficiency in traditional front-end development. Attached Figure Description

[0065] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this application and, together with the description, serve to explain the principles of this application.

[0066] Figure 1 A flowchart illustrating a data processing method provided in an embodiment of this application;

[0067] Figure 2 A schematic diagram illustrating the process of determining multiple second components provided in embodiments of this application;

[0068] Figure 3 A schematic diagram illustrating the process of determining the first layout provided in an embodiment of this application;

[0069] Figure 4 A schematic diagram illustrating the process of determining the second layout provided in an embodiment of this application;

[0070] Figure 5 A flowchart illustrating the complete data processing method provided in the application embodiment;

[0071] Figure 6This is a schematic diagram of the structure of a data processing device provided in an embodiment of this application;

[0072] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application.

[0073] The accompanying drawings have illustrated specific embodiments of this application, which will be described in more detail below. These drawings and descriptions are not intended to limit the scope of the concept in any way, but rather to illustrate the concept of this application to those skilled in the art through reference to specific embodiments. Detailed Implementation

[0074] Exemplary embodiments will now be described in detail, examples of which are illustrated in the accompanying drawings. When the following description relates to the drawings, unless otherwise indicated, the same numbers in different drawings denote 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 as detailed in the appended claims.

[0075] The front-end interface is the direct carrier for users to interact with the application system. It is used to display operation entry points, present data, and respond to interactions. The design and implementation of the front-end interface can directly determine the ease of use and user experience of the application. It is an indispensable core component of all kinds of applications.

[0076] In the above scenario, front-end development can be done manually. Users can use front-end frameworks such as React, Vue JavaScript (Vue.js), and Angular to complete a series of tasks, including writing page structure, designing component placement and size, rendering styles, implementing interaction logic, connecting data interfaces, and debugging multi-platform compatibility. The entire front-end development process relies on manual line-by-line coding and repeated debugging. The cumbersome process of manually writing page structure, designing component placement and size, rendering styles, implementing interaction logic, connecting data interfaces, and debugging multi-platform compatibility results in low front-end development efficiency.

[0077] Therefore, this application provides a data processing method that determines multiple second components required to implement the first function to be developed, then determines the first layout of the multiple second components, and adjusts the first layout based on constraints to obtain the second layout. This method can replace the tedious operation of manually writing page structure and adjusting component position and size. Finally, the application corresponding to the first function is automatically generated based on the second layout and second components. Users do not need to write code line by line, debug interaction logic and multi-terminal compatibility. This can reduce the workload of manual coding and repeated debugging, simplify the entire front-end development process, and improve the efficiency of front-end development.

[0078] In one possible implementation, the specific application scenarios of this application may include enterprise management system front-end interface building scenarios, mobile application page rapid development scenarios, mini-program interface visual generation scenarios, back-end management console layout building scenarios, and general business form page automatic generation scenarios, etc.

[0079] The technical solution of this application and how the technical solution of this application solves the above-mentioned technical problems are described in detail below with specific embodiments. These specific embodiments can be combined with each other, and the same or similar concepts or processes may not be described again in some embodiments. The embodiments of this application will be described below with reference to the accompanying drawings.

[0080] Figure 1 This is a flowchart illustrating a data processing method provided in an embodiment of this application. The method can be executed by a data processing device, which can be implemented using a computer program; it can also be implemented using a medium storing the relevant computer program, such as a USB flash drive and / or optical disc; or it can be implemented using a physical device integrating or installing the relevant computer program, such as a chip and electronic devices. The electronic device can be a server, server cluster, or computer, etc. The following description uses a computer as an example. Figure 1 As shown, the method may include the following steps.

[0081] S101. Obtain the first text, which is used to describe the first function to be developed.

[0082] The first text can be natural language text entered by the user to describe the first function to be developed. For example, the first text could be "Create an enterprise user login page, including an account input box, a password input box, a login button, and support form validation".

[0083] The first function can refer to the overall front-end interface function that needs to be developed. It is a complete and independently usable interactive unit. For example, when the first text is "Create an enterprise user login page, including an account input box, a password input box, a login button, and support form verification", the first function is the login function.

[0084] In one possible implementation, the user can input the natural language requirement corresponding to the first function to be developed, i.e., the first text, into the interface of the development platform of the electronic device. Accordingly, the electronic device can receive the first text input by the user.

[0085] S102. Among the multiple first components in the component library, determine the multiple second components corresponding to the first text. The second components are the components required to implement the first function. The component library is used to store the components required for various functions.

[0086] A component library can be a collection of various front-end functional modules that are pre-stored and uniformly managed. Each module can be encapsulated in terms of structure, style and basic behavior.

[0087] The first component can refer to the original, unfiltered component in the component library. For example, the first component can be an account input box, a password box, a login button, a submit button, a drop-down list, etc.

[0088] The second component can refer to a set of components selected from the first component that are actually used to implement the first function.

[0089] In one possible implementation, the smart component recommendation module in the electronic device can determine multiple second components corresponding to the first text from multiple first components in the component library.

[0090] S103. Determine the first layout of multiple second components. The first layout is the initial layout of multiple second components corresponding to the functional components of the first function.

[0091] A functional component can refer to a container or parent interface that carries the primary function, and each secondary component is placed within the functional component.

[0092] The first layout can refer to the position, size, and spacing of multiple second components within a functional component; it is the unoptimized, original layout.

[0093] In one possible implementation, users can drag and drop multiple second components into a visual drag-and-drop editor on an electronic device. This visual drag-and-drop editor supports responsive layout, meaning the layout of the second components can be determined based on the screen size of the electronic device.

[0094] In one possible implementation, after determining a first layout of multiple second components, multiple second components can be displayed in a visual drag-and-drop editor in the electronic device, with the positions, sizes, and spacing of the multiple second components indicated by the first layout.

[0095] S104. Obtain multiple constraints when the second component is laid out in the functional component, and adjust the parameters of multiple second components in the first layout based on the constraints to obtain the second layout.

[0096] Constraints can be objective, quantifiable technical rules that are followed when optimizing the layout.

[0097] The second layout can refer to the final reasonable layout obtained after optimizing the first layout according to the constraints, where the component positions, sizes, and spacings are all optimal.

[0098] In one possible implementation, the electronic device can pop up a window for the user to select whether to optimize the first layout. When the user selects to optimize the first layout in the window, multiple constraints of the second component in the functional component layout are obtained, and the parameters of multiple second components in the first layout are adjusted based on the constraints to obtain the second layout.

[0099] In one possible implementation, after determining the second layout of the multiple second components, the multiple second components can be displayed in a visual drag-and-drop editor in the electronic device, with the positions, sizes, and spacing of the multiple second components indicated by the second layout.

[0100] S105. Based on the second layout and multiple second components, generate the application corresponding to the first function.

[0101] Applications can be automatically generated, ready-to-run front-end code programs, including HyperText Markup Language (HTML) applications, Cascading Style Sheets (CSS) applications, and interpreted scripting language (JavaScript, JS) applications, etc.

[0102] In one possible implementation, after determining the second layout, the user can input the backend data source address and interface information through the data source's application programming interface (API), and bind multiple second components to the backend data source and interface. For example, the components required to implement the login function can be bound to the user database.

[0103] In one possible implementation, the automated code generation module in the electronic device can generate an application corresponding to the first function based on the second layout and multiple second components.

[0104] In one possible implementation, the user can select a target technology framework and determine the application format. The automated code generation module in the electronic device can input the second layout and the names of multiple second components into a deep learning model to obtain the application corresponding to the first function. The target technology framework can be a Vue.js framework, a React framework, etc., and the deep learning model can be a Transformer model. When generating the application corresponding to the first function, the number of Transformer layers and the number of Transformer attention heads can be set to a preset number; for example, the preset number of layers and attention heads are 12.

[0105] In one possible implementation, during the process of generating the application corresponding to the first function, redundant CSS rules can be removed and style code simplified using an Abstract Syntax Tree (AST). Specifically, the automatically generated CSS application is first parsed into an AST, then each node in the AST is traversed to identify and mark duplicate style rules, invalid style rules, and mergeable style rules. Subsequently, duplicate and invalid nodes are deleted, and mergeable nodes are integrated into unified rules. Finally, the optimized AST is converted back into a simplified CSS application.

[0106] In one possible implementation, during the generation of the application corresponding to the first function, beam search decoding can be used to optimize the JS application logic, avoid code redundancy, and improve page performance. Specifically, the logic of the JS application generated by the Transformer model is first converted into a set of candidate decoding sequences. During the decoding process, at each step, the candidate code logic sequences with the highest scores (preset beam width) are selected. The scoring criteria include code execution efficiency, logical completeness, and redundancy. Subsequently, the candidate sequences are logically validated, eliminating sequences with redundant branches or invalid judgments. Finally, the sequence with the highest score is selected as the optimized JS application logic. For example, the preset beam width is 4.

[0107] In this embodiment of the application, during front-end development, a first text can be obtained, which is used to describe a first function to be developed; among multiple first components in a component library, multiple second components corresponding to the first text are determined, where the second components are components required to implement the first function, and the component library is used to store components required for various functions, and the first components can refer to the original, unfiltered components in the component library; a first layout of multiple second components is determined, where the first layout is the initial layout of multiple second components in the functional component corresponding to the first function, and the functional component can refer to a container or parent interface that carries the first function, with each second component placed in the functional component; multiple constraints are obtained when the second components are laid out in the functional component, and based on the constraints, the parameters of multiple second components in the first layout are adjusted to obtain the second layout, where the constraints can be objective and quantifiable technical rules followed when optimizing the layout, and the second layout can refer to the final reasonable layout obtained after optimizing the first layout according to the constraints; based on the second layout and multiple second components, an application corresponding to the first function is generated, where the application can be an automatically generated, directly runnable front-end code program. In this way, by using the above method, multiple second components corresponding to the first text and the first layout of the multiple second components can be determined. Then, based on the constraints, the parameters of the multiple second components in the first layout are adjusted to obtain the second layout. Based on the second layout and the second components, the application corresponding to the first function is generated, which solves the problem of low efficiency in traditional front-end development.

[0108] Below, in conjunction with Figure 2 The process of determining multiple second components is explained.

[0109] Figure 2 This is a schematic diagram illustrating the process of determining multiple second components provided in an embodiment of this application. Based on the above embodiments, see [link to relevant documentation]. Figure 2 The method includes:

[0110] S201. Determine the keywords in the first text, and associate the keywords with the sub-functions that the first function needs to achieve.

[0111] Keywords can refer to core words extracted from the first text that can indicate functional points or component types. Keywords are used to locate the required second component. There can be one or more keywords. For example, when the first text is "Generate an enterprise user login page, including account input, password input, login button and form verification", the keywords can include: login page, account input, password input, login button and form verification.

[0112] In one possible implementation, the intelligent component recommendation module in the electronic device can determine the keywords in the first text. Specifically, the intelligent component recommendation module can input the first text into a Natural Language Processing (NLP) algorithm to obtain the keywords in the first text. The NLP algorithm is, for example, the Term Frequency – Inverse Document Frequency (TF-IDF) algorithm.

[0113] S202, Determine multiple similarities between keywords and multiple first components.

[0114] Similarity can indicate the degree of matching between the semantics of keywords and the functional description corresponding to the first component. The higher the similarity value, the more the first component meets the development requirements of the first function. Similarity can refer to semantic similarity.

[0115] In one possible implementation, the intelligent component recommendation module in the electronic device can determine multiple similarities between keywords and multiple first components. Specifically, the intelligent component recommendation module can first determine the first vector of each keyword and multiple second vectors of the functional descriptions of multiple first components, and then determine the cosine similarity between each first vector and multiple second vectors.

[0116] In one possible implementation, keywords can be input into a pre-trained model of Bidirectional Encoder Representations from Transformers (BERT) to obtain a first vector of keywords, and functional descriptions of multiple first components can be input into the BERT pre-trained model to obtain multiple second vectors of functional descriptions of multiple first components. The BERT pre-trained model can incorporate an attention mechanism to improve the accuracy of vector representation.

[0117] S203. Based on multiple similarities, obtain multiple second components corresponding to the first text from multiple first components.

[0118] In one possible implementation, the intelligent component recommendation module in the electronic device can input multiple similarities into the K-Nearest Neighbor (KNN) algorithm to obtain the optimal matching results of multiple second components corresponding to the first text, thereby determining the multiple second components corresponding to the first text.

[0119] In one possible implementation, based on multiple similarities, obtaining multiple second components corresponding to the first text from multiple first components may include:

[0120] Based on multiple similarities, multiple first components are sorted to obtain a first order; the first preset number of first components in the first order are obtained to obtain multiple second components corresponding to the first text.

[0121] The preset quantity can refer to the number of second components that need to be recommended to the user. For example, the preset quantity can be 5 or 4.

[0122] In one possible implementation, multiple first components can be sorted according to their similarity from high to low to obtain a first order, and a preset number of first components can be selected from the first order. The preset number of first components selected are then determined as multiple second components corresponding to the first text.

[0123] In this way, by extracting keywords and calculating their similarity to the first component, and then using the similarity ranking method to match the second component, the second component required to achieve the first function can be quickly located. This avoids the subjectivity and inefficiency of manual component selection, improves the accuracy and efficiency of component matching, and at the same time controls the scale of recommended components by setting a preset number, taking into account the completeness of development needs.

[0124] exist Figure 2 In the illustrated embodiment, keywords in the first text can be identified. These keywords are associated with the sub-functions required by the first function. Keywords can refer to core words extracted from the first text that indicate functional points or component types. Multiple similarities between the keywords and multiple first components are determined. These similarities indicate the degree of matching between the semantics of the keywords and the functional descriptions corresponding to the first components. Based on these multiple similarities, multiple second components corresponding to the first text are obtained from among the multiple first components. Thus, by extracting keywords indicating functional points or component types from the first text and matching them with the similarities of the keywords and first components, suitable second components can be determined. This accurately matches the requirements of the first function, reducing the tediousness and errors of manual screening, simplifying the component matching process, lowering the development threshold, laying the foundation for subsequent front-end development stages, and improving front-end development efficiency.

[0125] Below, in conjunction with Figure 3 The process of determining the first layout of multiple second components is explained.

[0126] Figure 3 This is a schematic diagram illustrating the process of determining the first layout as provided in an embodiment of this application. Based on the above embodiments, see [link to relevant documentation]. Figure 3 The method includes:

[0127] S301. Determine the screen size of the electronic device.

[0128] Electronic devices can refer to terminal devices used to execute the data processing methods of this application and to perform front-end development, possessing data calculation and interface display capabilities. For example, electronic devices can be desktop computers, laptops, tablet terminals, etc., and this application embodiment does not limit this.

[0129] Screen size refers to the physical dimensions or display resolution of an electronic device's screen. It is a core basis for determining layout parameters and can determine the adaptation effect of interface elements. For example, the screen size of a desktop computer is 1920 pixels (px) × 1080px, meaning that the width of a desktop computer screen is 1920px and the height is 1080px. The screen size of a laptop computer is 1366px × 768px, meaning that the width of a laptop screen is 1366px and the height is 768px. The screen size of a mobile phone is 1080px × 2400px, meaning that the width of a mobile phone screen is 1080px and the height is 2400px.

[0130] In one possible implementation, the screen parameter detection interface of the electronic device can be called to obtain the screen size of the electronic device.

[0131] S302. Based on the screen size, determine the location and size of functional components in the electronic device.

[0132] In one possible implementation, after determining the screen size of the electronic device, areas on the screen that cannot be used for interface display can be excluded to determine the final effective display area of ​​the electronic device. For example, if the screen size of the electronic device is 1920px × 1080px, the height of the taskbar of the electronic device is 80px, and the height of the title bar of the front-end development platform is 40px, then the width of the effective display area of ​​the electronic device is still 1920px, and the height is 960 (1080-80-40)px, that is, the effective display area is 1920px × 960px.

[0133] In one possible implementation, the width of the functional component is less than or equal to a first proportion of the width of the effective display area, and greater than or equal to a second proportion of the effective screen width; the height of the functional component is less than or equal to a third proportion of the height of the effective display area, and greater than or equal to a fourth proportion of the effective screen width, ensuring that the size is coordinated with the screen ratio. The first, second, third, and fourth proportions can all be preset, with the first proportion being greater than the second proportion, and the third proportion being greater than the fourth proportion. For example, the first proportion is 30%, the second proportion is 20%, the third proportion is 40%, and the fourth proportion is 30%.

[0134] In one possible implementation, the width and height ranges of the functional component can be determined first, and then the width and height of the functional component can be determined based on the number of second components in the visual drag-and-drop editor.

[0135] For example, if the number of second components in the visual drag-and-drop editor is 4, the effective display area of ​​the electronic device is 1920px × 960px, the first ratio is 30%, the second ratio is 20%, the third ratio is 40%, and the fourth ratio is 30%, then the width range of the functional component is 384 (1920 × 20%) px - 576 (1920 × 30%) px. To ensure that the functional component is neither crowded nor empty in the effective display area, the width of the functional component can be determined to be 400px, and the height range of the functional component is 288 (960 × 30%) px - 384 (960 × 40%) px. To ensure that the functional component can fully accommodate 4 second components, while reserving a certain blank area to improve the visual experience, the height of the functional component can be determined to be 320px.

[0136] In one possible implementation, the functional component can be positioned horizontally centered or vertically slightly above the center of the effective display area. Specifically, the coordinates of the upper left corner of the effective display area can be used as the origin, and the starting coordinates of the functional component can be calculated by combining the width and height of the functional component, thereby determining the position of the functional component on the electronic device.

[0137] For example, if the effective display area of ​​an electronic device is 1920px × 960px, and the functional component is horizontally centered in the effective display area, with a width of 400px and a height of 320px, then the horizontal starting coordinate of the functional component is 760 ((1920-400) / 2)px, and the distance from the top of the functional component to the top of the effective display area is 320 ((960-320) / 2)px. In other words, the vertical starting coordinate of the functional component is 320px.

[0138] In this way, placing the functional components horizontally in the center ensures that the user's visual focus is maintained; placing them vertically in the upper center position conforms to the user's browsing habits and avoids requiring the user to scroll down the screen to see the complete functional components.

[0139] S303. Based on the position and size of the functional component, determine the positions of multiple second components respectively.

[0140] In one possible implementation, the relative position of the second component within the functional component can be determined based on the position of the functional component. Then, based on the relative position of the second component, the position of the second component relative to the screen of the electronic device can be determined. Here, the relative position refers to the relative position between the upper left corner of the second component and the functional component.

[0141] In one possible implementation, the position of the functional component, the size of the functional component, the number of second components, the preset layout direction and alignment can be input into the Flexible Box Layout algorithm to obtain the relative position of the second component within the functional component.

[0142] The preset layout direction refers to the arrangement direction of the second component within the functional component. It is a parameter in the Flexbox algorithm that controls the arrangement of child elements. The preset layout directions include: vertical arrangement, horizontal arrangement, vertical reverse arrangement, and horizontal reverse arrangement. The alignment method refers to the alignment rules of the second component within the functional component along the layout direction or the vertical layout direction. It is used to ensure the regularity of the component arrangement. The alignment methods include: horizontal centering, left alignment, right alignment, justified alignment, uniform distribution, vertical centering, top alignment, and bottom alignment.

[0143] S304. Based on the dimensions of the functional components, determine the dimensions of multiple second components and the spacing between the multiple second components.

[0144] In one possible implementation, the size of the functional component, the number of second components, the preset component aspect ratio, and the preset minimum spacing threshold are input into the CSS Grid algorithm to obtain the size of multiple second components and the spacing between multiple second components.

[0145] The preset component width-to-height ratio can refer to the fixed ratio of the width to the height of the second component, or the ratio of the size of the second component to the size of the functional component. It is a parameter that controls the visual coordination of the components. For example, the width-to-height ratio of the input box component is 9:1 and the width-to-height ratio of the button component is 8:1. The preset minimum spacing threshold can refer to the minimum distance limit between any two adjacent second components to avoid visual crowding or accidental touches caused by the component spacing being too small. The preset minimum spacing threshold is, for example, 20px, 16px, or 12px.

[0146] exist Figure 3In the illustrated embodiment, the screen size of the electronic device is determined, which can refer to the physical size or display resolution of the screen. Based on the screen size, the position and size of the functional components within the electronic device are determined. Based on the position of the functional components, the positions of multiple second components are determined. Based on the size of the functional components, the sizes of the multiple second components and the spacing between them are determined. Thus, by first determining the screen size of the electronic device, then adaptively determining the position and size of the functional components, and finally determining the position, size, and spacing of the multiple second components based on the position and size of the functional components, the initial layout of the front-end interface can be automatically generated without manual adjustments. This effectively simplifies the layout design process, improves the standardization and adaptability of the interface layout, and increases front-end development efficiency.

[0147] Below, in conjunction with Figure 4 The process of determining the second layout will be explained.

[0148] Figure 4 This is a schematic diagram illustrating the process of determining the second layout as provided in an embodiment of this application. Based on the above embodiments, see [link to relevant documentation]. Figure 4 The method includes:

[0149] S401. Based on the constraints, the layout parameters of multiple first components in the first layout are iterated a preset number of times. The layout parameters include the position, spacing and size of the components.

[0150] The layout parameters can be parameters used to describe the arrangement of the second component within the functional component.

[0151] A preset number of iterations can be used to ensure that the layout parameters fully comply with all constraints and improve the layout quality. For example, the preset number of iterations is 10.

[0152] Constraints may include one or more of the following: uniformity of spacing of the second components, area proportion of the second components, overlap of the second components, space utilization of functional components, and responsive adaptation rules.

[0153] The uniformity of spacing between the second components refers to the adjacent spacing between multiple second components. This is used to make the spacing between the second components uniform and regular, to avoid the layout being cluttered due to inconsistent spacing, to improve the visual coordination of the interface, and to facilitate user operation.

[0154] The area ratio of the second component can refer to the ratio of the width and height of a single second component to the width and height of the functional component. This is used to avoid components that are too large and occupy too much space, or components that are too small and cause inconvenience in operation, to ensure that the proportions of the components and functional components are coordinated and to improve the visual experience.

[0155] The overlap of the second component can refer to the overlapping area of ​​the display areas of any two adjacent or non-adjacent second components. The default requirement is an overlap of 0, that is, no overlap. This is used to avoid display abnormalities and accidental touches caused by component overlap, to ensure that each component can be displayed completely and to guarantee the usability of the interface.

[0156] The space utilization rate of a functional component can refer to the ratio of the total area occupied by each secondary component to the total area of ​​the functional component. This is used to avoid excessive blank space inside the functional component, which would lead to wasted space, or overcrowding of components, which would lead to inconvenience in operation, and to achieve reasonable use of space.

[0157] Responsive adaptation rules refer to the second layout being able to be fully displayed on electronic devices (computers, tablets, mobile phones) with different screen sizes, without components being squeezed or exceeding the screen boundaries, and with sizes and spacing that can be adaptively adjusted. This is used to ensure that the second layout adapts to multiple devices, improves the universality of the layout, and eliminates the need to design separate layouts for different devices.

[0158] In this way, by iteratively optimizing the first layout based on constraints such as spacing uniformity, area proportion, overlap, space utilization, and responsive adaptation rules, a second layout that is regular, coordinated, non-overlapping, makes reasonable use of space, and is compatible with multiple devices can be automatically generated, thereby improving the quality and standardization of the interface layout, reducing manual debugging costs, and improving the efficiency of front-end development.

[0159] In one possible implementation, the first layout and constraints can be input into a Genetic Algorithm (GA) to obtain the results corresponding to each preset number of iterations. The parameters of the GA include a preset population size, crossover rate, and mutation rate. The preset population size can refer to the total number of candidate layout schemes participating in evolutionary optimization in each iteration. The crossover rate can refer to the probability of parameter fusion between different candidate layout schemes; that is, the proportion of selecting two superior schemes from the current population and combining their layout parameters according to this probability to generate a new layout scheme. The mutation rate can refer to the probability of random fine-tuning of the layout parameters of a single candidate layout scheme; that is, the proportion of small-scale random modifications to the position, spacing, and size parameters of some layout schemes. The preset population size, crossover rate, and mutation rate can all be preset. For example, the preset population size is 50, the crossover rate is 0.8, and the mutation rate is 0.1.

[0160] S402. Determine the second layout from the results of a preset number of iterations.

[0161] In one possible implementation, the GA algorithm can be iterated a preset number of times. From the results of the preset number of iterations, layout schemes whose layout parameters satisfy the constraints can be selected and determined as the second layout.

[0162] exist Figure 4 In the illustrated embodiment, based on constraints, the layout parameters of multiple first components in the first layout can be iterated a preset number of times. Layout parameters include the position, spacing, and size of the components. Layout parameters can also be parameters used to describe the arrangement of second components within functional components. The preset number of iterations can ensure that the layout parameters fully comply with all constraints, improving layout quality. The second layout is determined from the results of the preset number of iterations. Thus, using the above method, the layout parameters such as the position, spacing, and size of the second components in the first layout can be iteratively optimized multiple times based on constraints, and the optimal solution can be selected as the second layout from the iteration results. This automatically achieves the standardization, uniformity, and multi-platform adaptation of the interface layout, avoiding the tediousness and subjectivity of manual debugging, and improving layout quality and front-end development efficiency.

[0163] Based on the above embodiments, the electronic device also includes a data binding and visualization module. This data binding and visualization module integrates the API of the data source and can support real-time data preview and error debugging. Specifically, the data binding and visualization module can model the data flow, detect circular dependency problems in the data flow, identify invalid data binding relationships, and highlight key data nodes.

[0164] In one possible implementation, the data flow can be modeled as follows: The APIs of each data source, the second component, and the data processing nodes are abstracted as nodes in a Directed Acyclic Graph (DAG). The data flow from the data source to the component is abstracted as directed edges in the DAG, with the direction of the edges representing the data transmission direction. This constructs a complete data flow topology. For example, in a login scenario, the user database node can point to the account input box node, which in turn can point to the form validation component node, forming an acyclic data flow relationship. This visually represents the complete data flow path from the backend to the frontend components.

[0165] One possible implementation involves detecting circular dependencies in the data flow as follows: Perform a topological sort on the constructed DAG: First, traverse all nodes in the DAG, marking the starting node with an in-degree of 0 (such as the API node of the data source). Then, remove the starting node and delete its associated directed edges, updating the in-degree of downstream nodes. Repeat this process until all nodes have been processed. If any nodes remain unprocessed after the traversal, it indicates a circular dependency. For example, in the case of a closed loop between an account input field, a form validation component, and the account input field, the module can immediately mark the circular dependency node and throw a debugging prompt, preventing the data flow from entering an infinite loop.

[0166] In one possible implementation, invalid data binding relationships can be identified as follows: Starting from the starting node of the DAG (the API of the data source), perform a depth-first traversal along the directed edges, recording the valid data receiving paths for each node. If, during the traversal, it is determined that a node has no incoming edges (e.g., a login button node is not bound to any data source), or the API of the data source pointing to that node is invalid (e.g., the interface address is incorrect), or the data format does not match the component requirements (e.g., a password input box is bound to a string type but receives numeric data), then the data binding corresponding to that node is determined to be invalid. The node can be highlighted and the reason for the binding error can be displayed.

[0167] In one possible implementation, key data nodes can be highlighted as follows: calculate the PageRank based on the in-degree, out-degree, and data flow frequency of each node in the DAG, then sort the nodes from high to low according to the PageRank value, and highlight the key nodes in the visualization interface with different sizes and / or colors. This allows users to quickly locate the core data nodes, prioritize troubleshooting the binding problems of the core data nodes, and improve debugging efficiency.

[0168] To facilitate understanding, the following will be explained... Figure 5 The complete data processing flow is described. Figure 5 A flowchart illustrating the complete data processing method provided in the application embodiments, as shown below. Figure 5 As shown, the method includes:

[0169] S501, Obtain the first text.

[0170] S502. Identify the keywords in the first text.

[0171] S503, Determine multiple similarities between keywords and multiple first components.

[0172] S504. Based on multiple similarities, sort the multiple first components to obtain the first order.

[0173] S505. Obtain the first component of the first preset number in the first order, and obtain multiple second components corresponding to the first text.

[0174] S506. Determine the screen size of the electronic device.

[0175] S507. Based on the screen size, determine the location and size of functional components in the electronic device.

[0176] S508. Based on the position and size of the functional component, determine the positions of multiple second components respectively.

[0177] S509. Based on the dimensions of the functional components, determine the dimensions of multiple second components and the spacing between the multiple second components.

[0178] S510. Obtain multiple constraints when the second component is laid out in the functional component, and based on the constraints, iterate the layout parameters of multiple first components in the first layout a preset number of times. The first layout includes the position, size and spacing of multiple second components.

[0179] S511. Determine the second layout from the results of a preset number of iterations.

[0180] S512. Based on the second layout and multiple second components, generate the application corresponding to the first function.

[0181] The specific implementation method and technical effects in this embodiment are similar to those in the above embodiments, and will not be repeated here.

[0182] Figure 6 This is a schematic diagram of the structure of a data processing device provided in an embodiment of this application, as shown below. Figure 6 As shown, the device 60 includes: an acquisition module 601, a first determination module 602, a second determination module 603, an adjustment module 604, and a generation module 605.

[0183] The acquisition module 601 is used to acquire the first text, which is used to describe the first function to be developed;

[0184] The first determining module 602 is used to determine, among multiple first components in the component library, multiple second components corresponding to the first text, wherein the second components are the components required to implement the first function, and the component library is used to store the components required for various functions;

[0185] The second determining module 603 is used to determine the first layout of multiple second components, wherein the first layout is the initial layout of multiple second components in the functional components corresponding to the first function.

[0186] The adjustment module 604 is used to obtain multiple constraints when the second component is laid out in the functional component, and adjust the parameters of multiple second components in the first layout based on the constraints to obtain the second layout.

[0187] The generation module 605 is used to generate an application corresponding to the first function based on the second layout and multiple second components.

[0188] The apparatus in this embodiment can be used to execute the technical solutions of the above method embodiments. The specific implementation methods and technical effects are similar, and will not be described again here.

[0189] Optionally, in the above apparatus, the first determining module 602 is specifically used for,

[0190] Identify the keywords in the first text, and associate the keywords with the sub-functions that the first function needs to achieve;

[0191] Determine multiple similarities between keywords and multiple first components;

[0192] Based on multiple similarities, multiple second components corresponding to the first text are obtained from multiple first components.

[0193] Optionally, in the above apparatus, the first determining module 602 is specifically used for,

[0194] Based on multiple similarities, the multiple first components are sorted to obtain the first order;

[0195] Get the first component of the first preset number in the first order, and get multiple second components corresponding to the first text.

[0196] Optionally, in the above apparatus, the second determining module 603 is specifically used for,

[0197] Determine the screen size of the electronic device;

[0198] Based on screen size, determine the location and size of functional components within the electronic device;

[0199] The positions of multiple second components are determined based on the location and size of the functional components;

[0200] Based on the size of the functional component, determine the size of multiple second components and the spacing between the multiple second components.

[0201] Optionally, the constraints include one or more of the following: uniformity of the spacing of the second components, area proportion of the second components, overlap of the second components, space utilization of the functional components, and responsive adaptation rules.

[0202] Optionally, in the above-described apparatus, the adjustment module 604 is specifically used for,

[0203] Based on constraints, the layout parameters of multiple first components in the first layout are iterated a preset number of times. The layout parameters include the position, spacing and size of the components.

[0204] The second layout is determined from the results of a preset number of iterations.

[0205] The apparatus in this embodiment can be used to execute the technical solutions of the above method embodiments. The specific implementation methods and technical effects are similar, and will not be described again here.

[0206] Figure 7 This is a schematic diagram of the structure of an electronic device provided in an embodiment of this application, such as... Figure 7As shown, the electronic device 70 may include at least one processor 701 and a memory 702.

[0207] The memory 702 is used to store programs. Specifically, the program may include program code, which includes computer-executable instructions.

[0208] The memory 702 may include random access memory (RAM) and may also include non-volatile memory, such as at least one disk storage.

[0209] The processor 701 is used to execute computer execution instructions stored in the memory 702 to implement the method described in the foregoing method embodiments. The processor 701 may be a CPU, an application-specific integrated circuit (ASIC), or one or more integrated circuits configured to implement the embodiments of this application.

[0210] Optionally, the electronic device 70 may also include a communication interface 703. In specific implementations, if the communication interface 703, memory 702, and processor 701 are implemented independently, they can be interconnected via a bus to complete communication. The bus can be an industry standard architecture (ISA) bus, a peripheral component (PCI) bus, or an extended industry standard architecture (EISA) bus, etc. Buses can be categorized as address buses, data buses, control buses, etc., but this does not imply that there is only one bus or one type of bus.

[0211] Optionally, in a specific implementation, if the communication interface 703, memory 702, and processor 701 are integrated on a single chip, then the communication interface 703, memory 702, and processor 701 can communicate through an internal interface.

[0212] Electronic device 70 can be a server, etc.

[0213] The electronic device in this embodiment can be used to execute the technical solutions of the above method embodiments. The specific implementation methods and technical effects are similar, and will not be repeated here.

[0214] This application provides a computer-readable storage medium, which may include various media capable of storing computer-executable instructions, such as a USB flash drive, a portable hard drive, a read-only memory (ROM), RAM, a disk, or an optical disk. Specifically, the computer-readable storage medium stores computer-executable instructions, which, when executed by a computer, cause the technical solution shown in the above method embodiment to be executed. The specific implementation and technical effects are similar and will not be repeated here.

[0215] This application provides a computer program product, including a computer program. When the computer program is executed by a computer, the technical solution shown in the above method embodiment is executed. The specific implementation method and technical effect are similar, and will not be repeated here.

[0216] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are all optional embodiments, and the actions and modules involved are not necessarily essential to this application.

[0217] It should be further noted that although the steps in the flowchart are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order restriction on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowchart may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0218] It should be understood that the above-described device embodiments are merely illustrative, and the device of this application can also be implemented in other ways. For example, the division of units / modules in the above embodiments is only a logical functional division, and there may be other division methods in actual implementation. For example, multiple units, modules, or components may be combined, or integrated into another system, or some features may be ignored or not executed.

[0219] Furthermore, unless otherwise specified, the functional units / modules in the various embodiments of this application can be integrated into one unit / module, or each unit / module can exist physically separately, or two or more units / modules can be integrated together. The integrated units / modules described above can be implemented in hardware or as software program modules.

[0220] When integrated units / modules are implemented in hardware, the hardware can be digital circuits, analog circuits, etc. The physical implementation of the hardware structure includes, but is not limited to, transistors, memristors, etc. Unless otherwise specified, the processor can be any suitable hardware processor, such as a CPU, GPU, FPGA, DSP, and ASIC, etc. Unless otherwise specified, the storage unit can be any suitable magnetic or magneto-optical storage medium, such as Resistive Random Access Memory (RRAM), Dynamic Random Access Memory (DRAM), Static Random Access Memory (SRAM), Enhanced Dynamic Random Access Memory (EDRAM), High-Bandwidth Memory (HBM), Hybrid Memory Cube (HMC), etc.

[0221] If the integrated unit / module is implemented as a software program module and sold or used as an independent product, it can be stored in a computer-readable storage device (CMD). Based on this understanding, the technical solution of this application, in essence, or the part that contributes to the prior art, or all or part of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a memory and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods of the various embodiments of this application. The aforementioned memory includes various media capable of storing program code, such as a USB flash drive, read-only memory (ROM), random access memory (RAM), portable hard drive, magnetic disk, or optical disk.

[0222] In the above embodiments, the descriptions of each embodiment have their own emphasis. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments. The technical features of the above embodiments can be combined arbitrarily. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as the combination of these technical features does not contradict each other, it should be considered within the scope of this specification.

[0223] Other embodiments of this application will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of this application that follow the general principles of this application and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this application are indicated by the following claims.

[0224] It should be understood that this application is not limited to the precise structure described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this application is limited only by the appended claims.

Claims

1. A data processing method, characterized in that, Applied to electronic devices, including: Obtain the first text, which is used to describe the first function to be developed; Among the multiple first components in the component library, multiple second components corresponding to the first text are determined. The second components are the components required to implement the first function. The component library is used to store the components required for various functions. Determine a first layout for the plurality of second components, wherein the first layout is the initial layout of the functional components corresponding to the first function for the plurality of second components; Obtain multiple constraints when the second component is laid out in the functional component, and adjust the parameters of the multiple second components in the first layout based on the constraints to obtain the second layout; Based on the second layout and the plurality of second components, an application corresponding to the first function is generated.

2. The method according to claim 1, characterized in that, The step of determining the multiple second components corresponding to the first text among multiple first components in the component library includes: Identify keywords in the first text, and associate the keywords with the sub-functions that the first function needs to implement; Determine multiple similarities between the keywords and multiple first components; Based on the multiple similarities, multiple second components corresponding to the first text are obtained from the multiple first components.

3. The method according to claim 2, characterized in that, Based on the multiple similarities, the step of obtaining multiple second components corresponding to the first text from among the multiple first components includes: Based on the multiple similarities, the multiple first components are sorted to obtain a first order; Obtain the first preset number of first components in the first sequence, and obtain multiple second components corresponding to the first text.

4. The method according to claim 1, characterized in that, The first layout includes the position, size, and spacing of the plurality of second components; determining the first layout of the plurality of second components includes: Determine the screen size of the electronic device; Based on the screen size, determine the location and size of the functional components in the electronic device; The positions of the plurality of second components are determined based on the position and size of the functional component; Based on the dimensions of the functional components, the dimensions of the plurality of second components and the spacing between the plurality of second components are determined.

5. The method according to claim 1, characterized in that, The constraints include one or more of the following: uniformity of the spacing of the second component, area proportion of the second component, overlap of the second component, space utilization of the functional component, and responsive adaptation rules.

6. The method according to claim 1, characterized in that, The step of adjusting the parameters of the plurality of second components in the first layout based on the constraints to obtain the second layout includes: Based on the constraints, the layout parameters of the plurality of first components in the first layout are iterated a preset number of times, the layout parameters including the position, spacing and size of the components; The second layout is determined from the results of the preset number of iterations.

7. A data processing apparatus, characterized in that, include: The acquisition module is used to acquire the first text, which is used to describe the first function to be developed; The first determining module is used to determine, among a plurality of first components in the component library, a plurality of second components corresponding to the first text, wherein the second components are components required to implement the first function, and the component library is used to store components required for various functions; The second determining module is used to determine the first layout of the plurality of second components, wherein the first layout is the initial layout of the plurality of second components in the functional components corresponding to the first function; An adjustment module is used to obtain multiple constraints when the second component is laid out in the functional component, and adjust the parameters of the multiple second components in the first layout based on the constraints to obtain a second layout. The generation module is used to generate an application corresponding to the first function based on the second layout and the plurality of second components.

8. An electronic device, characterized in that, include: A processor, and a memory communicatively connected to the processor; The memory stores computer-executed instructions; The processor executes computer execution instructions stored in the memory to implement the method as described in any one of claims 1 to 6.

9. A computer-readable storage medium, characterized in that, The computer-readable storage medium stores computer-executable instructions, which, when executed by a processor, are used to implement the method as described in any one of claims 1 to 6.

10. A computer program product, characterized in that, Includes a computer program that, when executed by a processor, implements the method described in any one of claims 1-6.

Images