Visual page building method and system based on artificial intelligence
Through the visual page construction method based on artificial intelligence, the training model is generated, which solves the problem of component coordinate offset in front-end page editing, and realizes accurate control of component position and improvement of user experience.
Patent Information
- Application Number
- CN202411611315.X
- Authority / Receiving Office
- CN · China
- Patent Type
- Applications(China)
- Current Assignee / Owner
- Filing Date
- 2024-11-12
- Publication Date
- 2025-03-14
AI Technical Summary
In the prior art, due to inaccurate arrangement of components during front-end page editing, components have coordinate offsets between multiple pages, affecting user experience.
Using the visual page construction method based on artificial intelligence, we obtain business components, generate normalized components, and build a page style training set, train the layout model, and generate the training model. Users can enter business requirements and use the training model to automatically generate target pages to ensure the accurate position of components.
It realizes accurate control of component position during front-end page editing, avoids coordinate offsets and improves user experience.
Smart Images

Figure CN119621051A_ABST
Abstract
Description
Technical Field
[0001] The present invention relates to the technical field of front-end page generation, and in particular to a method and system for building a visual page based on artificial intelligence. Background Art
[0002] The front-end page refers to the part of the interface that users see when they interact with an application or website, including the user interface, visual design, user experience, and interactive behavior. The front-end page usually runs on the browser of the PC and mobile terminals, and is implemented through technologies such as HTML, CSS, and JavaScript. It can also use front-end frameworks and responsive design to adapt to various screen resolutions and provide a good user experience. Visual programming, also known as visual program design: based on the principle of "what you see is what you get" programming thinking, strives to achieve visualization of programming work, that is, the results can be seen at any time, and the program and the results are adjusted synchronously. Compared with traditional programming methods, "visual" here means that there is no need for programming, and the interface design work can be completed only through intuitive operation.
[0003] In the prior art, in order to improve the convenience of front-end page editing, a front-end page generation solution based on visual programming has been introduced.
[0004] For example, Chinese patent CN201911109623.1 discloses a front-end application visualization development tool and usage method, which belongs to the field of Internet front-end development technology. The front-end application visualization development tool includes ECoder software and material / template library. ECoder software has a user login module, initialization module, project management editing module, page editing module, block editing module, local service module, and automatic update module. The method of use is: the developer logs in, browses and selects the template to initialize the project, customizes different pages according to project requirements, chooses to download cloud blocks or local custom blocks for UI and logic step editing, and then fills in the content. After the above real-time visual operation, the invention will generate the corresponding project code and allow it to be edited again, and then it can be pushed to the code repository or associated application address through the git panel in the tool to publish the application.
[0005] However, in the actual implementation process, the inventors found that during the use of this type of technical solution, since there are a large number of components that need to be arranged in the front-end page, if only the method of manual dragging and placement by the user is adopted, although the expected visual effect can be obtained on the preview interface, the actual coordinates of the components cannot be accurately controlled. When it comes to editing a large number of pages, the coordinate offset between multiple pages is enough to be perceived by the user, that is, when the user enters multiple levels of pages in turn, he will perceive that the position of the component has a slight deviation, resulting in a poor user experience. Summary of the invention
[0006] In view of the above problems existing in the prior art, a method and system for building a visual page based on artificial intelligence is now provided.
[0007] The specific technical solutions are as follows:
[0008] A method for building a visual page based on artificial intelligence, comprising:
[0009] Step S1: obtaining business components, generating normalized components according to the business components, and constructing a page style training set;
[0010] Step S2: using the page style training set to train the layout model to obtain a trained model;
[0011] Step S3: receiving externally inputted business requirements, and using the trained model to visually assemble the normalized components according to the business requirements to obtain a target page.
[0012] On the other hand, the step S1 comprises:
[0013] Step S11: obtaining the business components, and extracting the component size of each business component;
[0014] Step S12: determining a plurality of common divisor templates of different sizes according to the size of the component;
[0015] A plurality of first common denominator templates are assembled to obtain a second common denominator template;
[0016] Step S13: matching the business component with the common divisor template of the closest size and processing it to obtain the normalized component;
[0017] Step S14: randomly splicing the normalized components to form the page style training set.
[0018] On the other hand, the step S12 comprises:
[0019] Step S121: constructing component projections based on the component sizes respectively, and performing gridding processing on the component projections to obtain grid projections;
[0020] Step S122: determining the length and width parameters of all the grid projections;
[0021] Step S123: determining a common divisor combination according to the length and width parameters;
[0022] Step S124: construct the common divisor template according to the common divisor combination.
[0023] On the other hand, the step S2 comprises:
[0024] Step S21: using the layout model as a generator and assembling a discriminator to form a training model;
[0025] Step S22: training the training model using the page style training set and then outputting the layout model.
[0026] On the other hand, the step S3 comprises:
[0027] Step S31: receiving the business requirements input from outside, and generating description information according to the business requirements;
[0028] Step S32: inputting the description information into a layout model to output a layout page;
[0029] Step S33: the layout model receives the adjustment information and adjusts the layout page according to the adjustment information to form the target page.
[0030] A visual page building system based on artificial intelligence, used to implement the above-mentioned visual page building method, comprising:
[0031] A training set generation module, wherein the training set generation module obtains business components, generates normalized components according to the business components, and constructs a page style training set;
[0032] A training module, the training module is connected to the training set generation module, and the training module uses the page style training set to train the layout model to obtain a trained model;
[0033] A page generation module is connected to the training module, the page generation module receives external business requirements, and uses the trained model to visually assemble the normalized components according to the business requirements to obtain a target page.
[0034] On the other hand, the training set generation module includes:
[0035] A component acquisition module, wherein the component acquisition module acquires the business components and extracts a component size for each of the business components;
[0036] A template generation module, the template generation module is connected to the component acquisition module, and the template generation module determines a plurality of common divisor templates of different sizes according to the component size;
[0037] A template cutting module, the template cutting module is connected to the template generating module, and the template cutting module matches the common divisor template of the closest size to the business component and processes it to obtain the normalized component;
[0038] A training set adding module is connected to the template cutting module, and the training set adding module randomly splices the normalized components to form the page style training set.
[0039] On the other hand, the template generation module includes:
[0040] A gridding module, wherein the gridding module constructs component projections based on the component sizes respectively, and performs gridding processing on the component projections to obtain grid projections;
[0041] A length and width calculation module, the length and width calculation module is connected to the gridding module, and the length and width calculation module determines the length and width parameters of all the grid projections;
[0042] A common divisor determination module, the common divisor determination module is connected to the length and width calculation module, and the common divisor determination module determines a common divisor combination according to the length and width parameters;
[0043] A template construction module, wherein the template construction module is connected to the common divisor determination module, and the template construction module constructs the common divisor template according to the common divisor combination.
[0044] On the other hand, the training module comprises:
[0045] A model building module, wherein the model building module uses the layout model as a generator and assembles a discriminator to form a training model;
[0046] A model training module, wherein the model training module is connected to the model construction module, and the model training module uses the page style training set to train the training model and then outputs the layout model.
[0047] On the other hand, the page generation module includes:
[0048] A description module, wherein the description module receives the business requirements input from the outside and generates description information according to the business requirements;
[0049] A pre-generation module, the pre-generation module is connected to the description module, and the pre-generation module inputs the description information into a layout model to output a layout page;
[0050] An adjustment module, wherein the adjustment module is connected to the pre-generation module, and the adjustment module receives adjustment information through the layout model and adjusts the layout page according to the adjustment information to form the target page.
[0051] The above technical solution has the following advantages or beneficial effects:
[0052] In view of the problem that the visual page editing solutions in the prior art are prone to cause slight offsets in components, in this solution, the sizes of the components are first uniformly adjusted before starting generation to form normalized components that can be spliced together. The normalized components are then used to generate a training set to train the model, so that users can input simple business requirements in the subsequent editing process to enable the model to automatically generate the required pages, and the automatic generation process will not cause component offsets. BRIEF DESCRIPTION OF THE DRAWINGS
[0053] The embodiments of the present invention will be described more fully with reference to the attached drawings, which are provided for illustration and description only and are not intended to limit the scope of the present invention.
[0054] Some of the blocks shown in the accompanying drawings are functional entities that do not necessarily correspond to physically or logically independent entities. These functional entities can be implemented in software form, or in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.
[0055] Figure 1 It is an overall schematic diagram of an embodiment of the present invention;
[0056] Figure 2 This is a schematic diagram of step S1 in an embodiment of the present invention;
[0057] Figure 3 This is a schematic diagram of step S12 in an embodiment of the present invention;
[0058] Figure 4 This is a schematic diagram of step S2 in an embodiment of the present invention;
[0059] Figure 5 This is a schematic diagram of step S3 in an embodiment of the present invention;
[0060] Figure 6 A schematic diagram of a system in an embodiment of the present invention;
[0061] Figure 7 Schematic diagram of a training set generation module in an embodiment of the present invention;
[0062] Figure 8 This is a schematic diagram of a template generation module in an embodiment of the present invention;
[0063] Fig. 9 This is a schematic diagram of a training module in an embodiment of the present invention;
[0064] Fig.10 Schematic diagram of a page generation module in an embodiment of the present invention. DETAILED DESCRIPTION
[0065] The following will be combined with the drawings in the embodiments of the present invention to clearly and completely describe the technical solutions in the embodiments of the present invention. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of the present invention.
[0066] It should be noted that, in the absence of conflict, the embodiments of the present invention and the features in the embodiments may be combined with each other.
[0067] The present invention will be further described below in conjunction with the accompanying drawings and specific embodiments, but they are not intended to limit the present invention.
[0068] The present invention comprises:
[0069] A visual page building method based on artificial intelligence, such as Figure 1 As shown, including:
[0070] Step S1: Obtain business components, generate normalized components according to the business components, and build a page style training set;
[0071] Step S2: using the page style training set to train the layout model to obtain a trained model;
[0072] Step S3: Receive external business requirements, and use the trained model to visually assemble the normalized components according to the business requirements to obtain the target page.
[0073] Specifically, in order to address the problem that the visual page editing solutions in the prior art are prone to cause slight offsets in components, in this solution, the sizes of the components are first uniformly adjusted before starting generation to form normalized components that can be spliced together. The normalized components are then used to generate a training set to train the model, so that users can input simple business requirements in the subsequent editing process to enable the model to automatically generate the required pages, and the automatic generation process will not cause component offsets.
[0074] Specifically, business components refer to related components pre-edited in the front end, such as display UI, controls, titles, etc. These business components have different component sizes in their properties. To facilitate the subsequent model layout, their sizes are first normalized to form normalized components, which have several fixed sizes to facilitate automatic model layout.
[0075] The layout model is a model trained based on the page style training set, which can be used to automatically layout business components. The page style training set is a data set formed by randomly combining business components to form a large number of sample pages with reasonable layout based on normalized components, and each sample page has component location annotation information, such as the direction in which a certain class or component is located. Training based on the page style training set allows the layout model to predict the orientation and relative position relationship of the components included in the business requirements.
[0076] In one embodiment, Figure 2 As shown, step S1 includes:
[0077] Step S11: obtaining business components, and extracting component size for each business component;
[0078] Step S12: determining a plurality of common divisor templates of different sizes according to the size of the component;
[0079] A plurality of first common denominator templates are assembled to obtain a second common denominator template;
[0080] Step S13: matching the business component with a common divisor template of the closest size and processing it to obtain a normalized component;
[0081] Step S14: Randomly concatenate the normalized components to form a page style training set.
[0082] Specifically, in order to facilitate the automatic layout of the layout model, in this embodiment, after obtaining the pre-built business components, the component size is first extracted for each business component, and on this basis, multiple common denominator templates of different sizes are determined, wherein multiple numbers of first common denominator templates are assembled to obtain a second common denominator template. For example, in one embodiment, the common denominator template has three levels, and its length and width ratios are respectively 1:2:4. Then, two first common denominator templates can be spliced into a long strip of second common denominator template, and four first common denominator templates can also be spliced into a third common denominator template of size 4. On this basis, the business component is matched with the common denominator template closest to the size and processed, including cutting the business component with a slightly larger size and filling and expanding the background layer of the business component with a slightly smaller size, so as to obtain a normalized component. According to the normalized component, random splicing is performed to generate a sample page. On the basis of the sample page, the position coordinates of each component in the page are read and classified to form description information, and then added to the page style training set.
[0083] In one embodiment, Figure 3 As shown, step S12 includes:
[0084] Step S121: construct component projections based on component sizes respectively, and perform gridding processing on the component projections to obtain grid projections;
[0085] Step S122: determining the length and width parameters of all grid projections;
[0086] Step S123: determining a common divisor combination according to the length and width parameters;
[0087] Step S124: construct a common denominator template according to the common denominator combination.
[0088] Specifically, in order to achieve a better template construction effect, in this embodiment, component projections are first constructed based on component sizes, and the component projections are gridded to obtain grid projections. The size of the component is approximated by a pre-determined larger grid, that is, the component projection is nested by a larger grid to remove the remainder. Then, the length and width parameters of all grid projections are determined, and the length and width parameters are counted to determine the most common length and width parameter combination. Then, a smaller length and width parameter combination is used to sequentially remove the larger length and width parameter combination and remove the remainder, thereby obtaining a common divisor combination, and finally constructing a common divisor template.
[0089] In one embodiment, Figure 4 As shown, step S2 includes:
[0090] Step S21: using the layout model as a generator and assembling the discriminator to form a training model;
[0091] Step S22: Use the page style training set to train the training model and then output the layout model.
[0092] Specifically, in order to achieve a better generation effect, an adversarial generation network is introduced in this embodiment. The adversarial generation network includes a generator and a discriminator. The generator is a layout model that can generate a training page according to the description information, and the discriminator is a matching model that can read the coordinates of each component in the training page, and then classify the component position classification information, and then compare the component position classification information with the description information to determine whether the generation result of the generator is accurate. After the training model is constructed, the page style training set is used to train the training model, and the layout model is output after verification and adjustment.
[0093] In one embodiment, Figure 5 As shown, step S3 includes:
[0094] Step S31: receiving externally inputted business requirements and generating description information according to the business requirements;
[0095] Step S32: inputting the description information into the layout model to output the layout page;
[0096] Step S33: the layout model receives the adjustment information and adjusts the layout pages according to the adjustment information to form the target page.
[0097] Specifically, in order to make the final generated page meet user needs, in this embodiment, after obtaining the business needs, semantic recognition is first performed on the business needs, redundant information is removed to form description information, and then the description information is input into the layout model to output the layout page and display it visually. The user re-enters the adjustment information according to the visually displayed page to make the layout model change the page layout until it meets the needs, thereby obtaining the target page.
[0098] A visual page building system based on artificial intelligence is used to implement the above-mentioned visual page building method, such as Figure 6 As shown, including:
[0099] The training set generation module 1 obtains business components, generates normalized components according to the business components, and constructs a page style training set;
[0100] Training module 2, the training module 2 is connected to the training set generation module 1, and the training module 2 uses the page style training set to train the layout model to obtain a trained model;
[0101] The page generation module 3 is connected to the training module 2, and receives external business requirements, and uses the trained model to visually assemble the normalized components according to the business requirements to obtain the target page.
[0102] Specifically, in view of the problem that the visual page editing scheme in the prior art easily causes slight offset of components, in this scheme, the training set generation module 1 first uniformly adjusts the size of the components before starting generation to form normalized components that can be spliced with each other. Then the training module 2 uses the normalized components to generate a training set to train the model, so that the user can input simple business requirements through the page generation module 3 during the subsequent editing process to enable the model to automatically generate the required pages, and the automatic generation process will not cause component offset.
[0103] In one embodiment, Figure 7 As shown, the training set generation module 1 includes:
[0104] The component acquisition module 11 acquires the business components and extracts the component size of each business component;
[0105] The template generation module 12 is connected to the component acquisition module 11, and the template generation module 12 determines a plurality of common divisor templates of different sizes according to the component sizes;
[0106] The template cutting module 13 is connected to the template generating module 12, and the template cutting module 13 matches the common divisor template of the closest size to the business component and processes it to obtain a normalized component;
[0107] The training set adding module 14 is connected to the template cutting module 13 , and the training set adding module 14 randomly splices the normalized components to form a page style training set.
[0108] Specifically, in order to facilitate the automatic layout of the layout model, in this embodiment, after obtaining the pre-built business components, the component acquisition module 11 first extracts the component size of each business component, and on this basis, the template generation module 12 determines a plurality of common denominator templates of different sizes, wherein a plurality of first common denominator templates are assembled to obtain a second common denominator template. For example, in one embodiment, the common denominator template has three levels, and its length and width ratios are respectively 1:2:4, then two first common denominator templates can be spliced into a long strip of the second common denominator template, and four first common denominator templates can also be spliced into a 4-size third common denominator template. Then, the template cutting module 13 matches the business component with the common denominator template closest to the size and processes it, including cutting the business component with a slightly larger size and filling and expanding the background layer of the business component with a slightly smaller size, thereby obtaining a normalized component. According to the normalized component, the training set adding module 14 performs random splicing to generate a sample page. On the basis of the sample page, the position coordinates of each component in the page are read and classified to form description information, and then added to the page style training set.
[0109] In one embodiment, Figure 8 As shown, the template generation module 12 includes:
[0110] A gridding module 121, the gridding module 121 constructs component projections based on component sizes, and performs gridding processing on the component projections to obtain grid projections;
[0111] A length and width calculation module 122, which is connected to the gridding module 121, and determines the length and width parameters of all grid projections;
[0112] A common divisor determination module 123, the common divisor determination module 123 is connected to the length and width calculation module 122, and the common divisor determination module 123 determines a common divisor combination according to the length and width parameters;
[0113] The template construction module 124 is connected to the common divisor determination module 123, and the template construction module 124 constructs a common divisor template according to the common divisor combination.
[0114] Specifically, in order to achieve a better template construction effect, in this embodiment, component projections are first constructed based on component sizes, and the gridding module 121 grids the component projections to obtain grid projections, and approximates the size of the component through a pre-determined larger grid, that is, the component projections are nested through a larger grid to remove the remainder. Then the length and width calculation module 122 determines the length and width parameters of all grid projections, and counts the length and width parameters. The common divisor determination module 123 determines the most common length and width parameter combination, and then uses a smaller length and width parameter combination to successively remove the larger length and width parameter combination and remove the remainder, thereby obtaining a common divisor combination, and finally the template construction module 124 constructs a common divisor template.
[0115] In one embodiment, Fig. 9 As shown, training module 2 includes:
[0116] A model building module 21, the model building module 21 uses the layout model as a generator and assembles a discriminator to form a training model;
[0117] The model training module 22 is connected to the model building module 21. The model training module 22 uses the page style training set to train the training model and then outputs a layout model.
[0118] Specifically, in order to achieve a better generation effect, in this embodiment, the model construction module 21 introduces an adversarial generation network. The adversarial generation network includes a generator and a discriminator. The generator is a layout model that can generate a training page according to the description information, and the discriminator is a matching model that can read the coordinates of each component in the training page, and then classify the component position classification information, and then check the component position classification information with the description information to determine whether the generation result of the generator is accurate. After the training model is constructed, the model training module 22 uses the page style training set to train the training model, and outputs the layout model after verification and adjustment.
[0119] In one embodiment, Fig.10 As shown, the page generation module 3 includes:
[0120] Description module 31, the description module 31 receives external input business requirements and generates description information according to the business requirements;
[0121] A pre-generation module 32, the pre-generation module 32 is connected to the description module 31, and the pre-generation module 32 inputs the description information into the layout model to output the layout page;
[0122] The adjustment module 33 is connected to the pre-generation module 32 . The adjustment module 33 receives adjustment information through the layout model and adjusts the layout page according to the adjustment information to form a target page.
[0123] Specifically, in order to make the final generated page meet user needs, in this embodiment, after obtaining the business needs, the description module 31 first performs semantic recognition on the business needs, removes redundant information to form description information, and then the pre-generation module 32 inputs the description information into the layout model to output the layout page and display it visually. The user re-enters the adjustment information in the adjustment module 33 according to the visually displayed page to make the layout model change the page layout until it meets the needs, thereby obtaining the target page.
[0124] Those skilled in the art will appreciate that various aspects of the present invention, or possible implementations of various aspects, may be specifically implemented as systems, methods, or computer program products. Therefore, various aspects of the present invention, or possible implementations of various aspects, may take the form of complete hardware embodiments, complete software embodiments (including firmware, resident software, etc.), or embodiments of combined software and hardware aspects, all collectively referred to herein as "circuits," "modules," or "systems." In addition, various aspects of the present invention, or possible implementations of various aspects, may take the form of computer program products, which refer to computer instructions stored in a memory.
[0125] The memory may be a computer-readable signal medium or a computer-readable storage medium. Computer-readable storage media include but are not limited to electronic, magnetic, optical, electromagnetic, infrared or semiconductor systems, devices or apparatuses, or any suitable combination of the foregoing, such as random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, portable read-only memory (CD-ROM).
[0126] The processor in the computer reads the computer instructions stored in the memory, so that the processor can execute the functional actions specified in each step or the combination of steps in the flowchart; and generate a device for implementing the functional actions specified in each block or the combination of blocks in the block diagram.
[0127] It should be understood that the processor in the computer can be understood as one or more application-specific integrated circuits (ASICs), DSPs, programmable logic devices (PLDs), complex programmable logic devices (CPLDs), field programmable gate arrays (FPGAs), general-purpose processors, controllers, microcontrollers (MCUs), microprocessors, or other electronic components implemented to execute the aforementioned computer instructions.
[0128] Computer instructions can be executed completely on the user's local computer, partially on the user's local computer, as a separate software package, partially on the user's local computer and partially on a remote computer, or completely on a remote computer or server. It should also be noted that in some alternative embodiments, the functions noted in each step in the flow chart or each block in the block diagram may not occur in the order noted in the figure. For example, depending on the functions involved, two steps or two blocks shown in succession may actually be executed roughly simultaneously, or these blocks may sometimes be executed in reverse order.
[0129] The above are only preferred embodiments of the present invention, and are not intended to limit the implementation methods and protection scope of the present invention. Those skilled in the art should be aware that all solutions obtained by equivalent substitutions and obvious changes made using the description and illustrations of the present invention should be included in the protection scope of the present invention.
Claims
1. A method for building a visual page based on artificial intelligence, characterized in that: include: Step S1: obtaining business components, generating normalized components according to the business components, and constructing a page style training set; Step S2: using the page style training set to train the layout model to obtain a trained model; Step S3: receiving externally inputted business requirements, and using the trained model to visually assemble the normalized components according to the business requirements to obtain a target page.
2. The method for building a visualization page according to claim 1, characterized in that: The step S1 comprises: Step S11: obtaining the business components, and extracting the component size of each business component; Step S12: determining a plurality of common divisor templates of different sizes according to the size of the component; A plurality of first common denominator templates are assembled to obtain a second common denominator template; Step S13: matching the business component with the common divisor template of the closest size and processing it to obtain the normalized component; Step S14: randomly splicing the normalized components to form the page style training set.
3. The method for building a visualization page according to claim 2, characterized in that: The step S12 comprises: Step S121: constructing component projections based on the component sizes respectively, and performing gridding processing on the component projections to obtain grid projections; Step S122: determining the length and width parameters of all the grid projections; Step S123: determining a common divisor combination according to the length and width parameters; Step S124: construct the common divisor template according to the common divisor combination.
4. The method for building a visualization page according to claim 1, characterized in that: The step S2 comprises: Step S21: using the layout model as a generator and assembling a discriminator to form a training model; Step S22: training the training model using the page style training set and then outputting the layout model.
5. The method for building a visualization page according to claim 1, characterized in that: The step S3 comprises: Step S31: receiving the business requirements input from outside, and generating description information according to the business requirements; Step S32: inputting the description information into a layout model to output a layout page; Step S33: the layout model receives the adjustment information and adjusts the layout page according to the adjustment information to form the target page.
6. A visual page building system based on artificial intelligence, characterized in that: The method for implementing the visualization page construction method according to any one of claims 1 to 5 comprises: A training set generation module, wherein the training set generation module obtains business components, generates normalized components according to the business components, and constructs a page style training set; A training module, the training module is connected to the training set generation module, and the training module uses the page style training set to train the layout model to obtain a trained model; A page generation module is connected to the training module, the page generation module receives external business requirements, and uses the trained model to visually assemble the normalized components according to the business requirements to obtain a target page.
7. The visual page building system according to claim 6, characterized in that: The training set generation module comprises: A component acquisition module, wherein the component acquisition module acquires the business components and extracts a component size for each of the business components; A template generation module, the template generation module is connected to the component acquisition module, and the template generation module determines a plurality of common divisor templates of different sizes according to the component size; A template cutting module, the template cutting module is connected to the template generating module, and the template cutting module matches the common divisor template of the closest size to the business component and processes it to obtain the normalized component; A training set adding module is connected to the template cutting module, and the training set adding module randomly splices the normalized components to form the page style training set.
8. The visual page building system according to claim 7, characterized in that: The template generation module comprises: A gridding module, wherein the gridding module constructs component projections based on the component sizes respectively, and performs gridding processing on the component projections to obtain grid projections; A length and width calculation module, the length and width calculation module is connected to the gridding module, and the length and width calculation module determines the length and width parameters of all the grid projections; A common divisor determination module, the common divisor determination module is connected to the length and width calculation module, and the common divisor determination module determines a common divisor combination according to the length and width parameters; A template construction module, wherein the template construction module is connected to the common divisor determination module, and the template construction module constructs the common divisor template according to the common divisor combination.
9. The visual page building system according to claim 6, characterized in that: The training module includes: A model building module, wherein the model building module uses the layout model as a generator and assembles a discriminator to form a training model; A model training module, wherein the model training module is connected to the model construction module, and the model training module uses the page style training set to train the training model and then outputs the layout model.
10. The visual page building system according to claim 6, characterized in that: The page generation module includes: A description module, wherein the description module receives the business requirements input from the outside and generates description information according to the business requirements; A pre-generation module, the pre-generation module is connected to the description module, and the pre-generation module inputs the description information into a layout model to output a layout page; An adjustment module, wherein the adjustment module is connected to the pre-generation module, and the adjustment module receives adjustment information through the layout model and adjusts the layout page according to the adjustment information to form the target page.
Citation Information
Patent Citations
A visual development tool for front-end applications and its usage method
CN110597506B