Method for generating front-end prototype based on generative adversarial network

Abstract

The invention provides a method for generating a front-end prototype based on a generative adversarial network. The method comprises the steps of data acquisition and processing, knowledge base construction, natural language demand analysis and structured conversion, GAN model optimization, and front-end prototype generation and dynamic optimization. A data management system supporting multi-dimensional retrieval is constructed by collecting and verifying front-end design historical data, and efficient matching of task input and output pairs is achieved by combining GAN model optimization task similarity detection. The method comprises the following steps: performing semantic analysis on natural language requirements of a user, extracting function points, data fields and logical relationships, converting the function points, the data fields and the logical relationships into structured JSON metadata, automatically mapping the structured JSON metadata to a front-end component template, and generating a dynamic interface. According to the method, the prototype design efficiency and the intelligent level are remarkably improved, the labor cost is reduced, and reliable technical support is provided for rapid development and deployment of complex applications.

Description

Technical Field

[0001] The present invention relates to the technical field of artificial intelligence and software development, and in particular to a method for generating a front-end prototype based on a generative adversarial network. Background Art

[0002] In the current software development field, front-end prototyping, as an important part of realizing product interaction logic and interface layout, is facing increasingly complex demand challenges. With the diversification and complexity of user needs, traditional front-end prototyping methods have gradually exposed many limitations. First, in terms of data utilization, the potential value of a large amount of historical data in front-end prototyping has not been fully explored. These historical data include requirement documents, prototype samples, and low-code metadata. Existing methods often rely on manual screening and induction, which are inefficient and cannot support rapid prototype iteration development, thereby limiting the improvement of design efficiency and the realization of innovation potential.

[0003] In terms of data storage and retrieval, traditional prototyping tools mainly adopt a model based on file storage or distributed data management. This method is not only difficult to effectively manage large-scale data, but also shows inefficiency in multi-dimensional query scenarios, lacks flexibility, and cannot meet the needs of modern software development for rapid data retrieval and efficient reuse. In addition, there are major deficiencies in the construction of existing knowledge bases. As an important foundation for supporting artificial intelligence model training, the construction method of the knowledge base is usually relatively simple, with a single classification and labeling system, which is difficult to adapt to the needs of complex tasks for multi-dimensional data. At the same time, the retrieval function of the existing knowledge base is mostly limited to keyword matching, which makes it difficult to achieve deep correlation queries at the semantic level, thereby limiting its application value in intelligent prototyping.

[0004] The application of AI model training in front-end design also faces significant challenges. Existing models are often difficult to adapt to diverse task requirements due to insufficient or uneven distribution of training data. In addition, the model training process has high requirements for computing resources, especially when processing large-scale, multi-dimensional data, which is inefficient and costly. Traditional models also have shortcomings in task adaptability, especially in task similarity detection and resource reuse, making it difficult to achieve efficient transfer learning between different tasks, which further restricts the scope of application and promotion value of the model.

[0005] In terms of demand analysis, existing methods mostly rely on manual processing or simple rule matching, which makes it difficult to cope with the semantic understanding and multi-level logic extraction of complex requirements. The limitations of this method not only lead to insufficient accuracy in converting natural language requirements into structured data, but also increase the burden on developers and slow down the development process. At the same time, the intelligence level of front-end prototype generation is low. Most existing tools rely on manual design or low-code development platforms, lack sufficient intelligence capabilities, and cannot quickly respond to changes in user needs. Such tools can usually only generate static prototypes, lack effective support for dynamic layout adjustment and user interaction feedback, and significantly reduce design efficiency and user satisfaction.

[0006] In addition, existing prototyping tools lack dynamic optimization and feedback mechanisms. Users need to manually complete most operations when adjusting layouts or optimizing functional logic, and cannot obtain real-time feedback and intelligent suggestions. This limitation increases the complexity of user operations, slows down the overall efficiency of prototype development, and limits the flexibility and convenience of users in actual use.

[0007] The above background issues show that existing technologies have obvious deficiencies in efficient data management, intelligent model training, demand analysis and dynamic optimization. These technologies are difficult to systematically solve existing pain points, providing an important direction and research basis for further technological improvements and the proposal of new solutions. By breaking through the bottleneck of existing technologies, the efficiency and intelligence level of front-end prototype design can be significantly improved to better meet the needs of modern software development. Summary of the invention

[0008] In order to solve the above problems in the prior art, the present invention proposes a method for generating a front-end prototype based on a generative adversarial network, which is characterized by comprising the following steps:

[0009] Step 1: Collect historical data related to front-end prototype design, extract, verify and standardize the data;

[0010] Step 2: Store the sorted data in a structured database, and build a data management system that supports multi-dimensional queries through a full-text search library and a vector search library;

[0011] Step 3: Based on the stored data, build a knowledge base to support AI model training and query, including data classification, label setting, and retrieval function development;

[0012] Step 4: Use the Generative Adversarial Network (GAN) model to optimize task similarity detection; generate hypothesized similarity scores through the generator, and the discriminator determines the similarity of the task pairs; and reuse the intermediate model parameters generated by training;

[0013] Step 5: Perform semantic analysis on the natural language requirements input by the user, extract key elements and convert them into structured data.

[0014] Step 6: Based on the generated structured data, automatically build the front-end prototype and optimize the interface layout and logic through user interaction.

[0015] The step 1 further comprises:

[0016] Determine the data source and collect historical data related to the front-end prototype design; extract and verify the collected data, convert the data into a unified structured format, complete the missing data, and correct the erroneous data; standardize the data, including unifying the format, establishing naming conventions, and cleaning up redundant data.

[0017] The step 2 further includes: storing the sorted data in a structured database, designing a database table structure and setting field constraints; creating indexes for key fields; and constructing a retrieval system supporting multi-dimensional queries through a full-text retrieval library and a vector retrieval library to perform keyword retrieval, semantic retrieval and multi-dimensional data screening.

[0018] The step 3 further includes: classifying and managing the data, setting data labels and attribute fields; importing the structured data in the database into the knowledge base and performing cleaning and verification; and achieving keyword matching, semantic association and multi-dimensional query of the data through full-text retrieval and vector retrieval.

[0019] The step 4 further comprises the following steps:

[0020] 1) Based on the knowledge base, extract task descriptions, prototype examples, and low-code metadata to generate task input-output pairs, and form a task pair training set by combining task descriptions and associated labels;

[0021] 2) Classify the training data and generate positive and negative task pairs by task type to ensure a balanced distribution of positive and negative samples;

[0022] 3) Characterize the task pair through the model encoder part to generate a feature vector;

[0023] 4) Design a generative adversarial network architecture, including a generator and a discriminator. The generator is used to generate a hypothesized similarity score based on the input feature vector, and the discriminator is used to determine whether the task pair is a truly similar task;

[0024] 5) Generative adversarial network model training is performed by optimizing the loss functions of the generator and the discriminator. The training goal of the generator is to make the hypothesized similarity score close to the real similarity score, and the training goal of the discriminator is to distinguish between the real task pairs and the generated task pairs;

[0025] 6) Based on the generative adversarial network model, the feature vector of the new task pair is input to generate a hypothesis similarity score, and the validity of the hypothesis score is verified by the discriminator, and the final judgment score is generated in combination with the task characteristics;

[0026] 7) Dynamically adjust the generator and discriminator parameters and optimize the model through incremental training to adapt to new task types or domains.

[0027] The generator generates a hypothesis similarity score by inputting the feature vector of the task pair. The generation target of the hypothesis similarity score is achieved by optimizing the following loss function:

[0028]

[0029] Among them, D is the discriminator; G is the generator; and is the feature vector of the task pair; L G is the objective function of the generator; -E is the expected value symbol, which means averaging the scores of related data;

[0030] The discriminator is optimized through the following loss function to accurately distinguish between real task pairs and generated task pairs:

[0031]

[0032] Among them, S real is the similarity score of the real task pair; S fake The similarity score of the hypothesis generated by the generator; L D is the objective loss function of the discriminator.

[0033] The step 5 further comprises:

[0034] 1) Use semantic parsing technology to perform semantic analysis on the natural language requirements input by users and extract function points, data fields and logical relationships;

[0035] 2) Classify and label the requirements and generate category labels based on the characteristics of the requirements;

[0036] 3) Combine contextual information with historical demand data to perform reasoning and ambiguity resolution of fuzzy descriptions;

[0037] 4) The parsing results are converted into a structured format according to the predefined JSON format, which includes function points, data fields and logical relationships;

[0038] 5) Use the automatic mapping algorithm to match the parsed results with the JSON fields and verify the integrity and accuracy of the structured data;

[0039] 6) Store the generated metadata in JSON format into the demand library to provide support for subsequent processing.

[0040] The step 6 further comprises:

[0041] 1) Dynamically call task-related data and implement real-time data loading and dynamic rendering through asynchronous operations;

[0042] 2) Map the JSON metadata to the predefined front-end component template, dynamically generate the adapted components according to the field type and attributes, and present the interface elements;

[0043] 3) Provide a user interaction interface and update the front-end prototype in real time by adjusting the interface layout and component properties;

[0044] 4) generating optimization suggestions based on the user adjustment behavior, wherein the optimization suggestions include recommended style templates or component alternatives;

[0045] 5) Record user adjustment operations, form change tracking and version management functions, and support historical version rollback and version difference comparison.

[0046] The present invention realizes efficient generation and dynamic optimization of front-end prototypes through optimization based on the Generative Adversarial Network (GAN) model, combined with the extraction and management of historical data, natural language parsing and structured conversion technology. Its beneficial effects are mainly reflected in the following aspects:

[0047] Through the task similarity detection and intermediate model reuse of the GAN model, the accuracy of model training and task matching is significantly improved, the repeated design work is reduced, and the automation level of front-end prototype generation is improved. Using semantic analysis and contextual reasoning technology, the user's natural language needs are converted into structured data to ensure the accuracy of demand expression and reduce the error rate of manual parsing. Provide real-time data loading and component rendering functions, combine user interaction feedback and optimization suggestions, realize dynamic layout adjustment and logic optimization of front-end prototypes, and improve the flexibility of prototype design and user participation. Through the construction of structured databases and retrieval systems, efficient storage, indexing and query of data are achieved, providing reliable data support for prototype generation. Through change tracking and version management functions, historical version rollback and difference comparison are supported, providing strong guarantees for the iterative development of front-end prototypes. The present invention effectively improves the efficiency, accuracy and flexibility of front-end prototype generation and optimization, and provides technical support for the rapid iteration of complex applications. BRIEF DESCRIPTION OF THE DRAWINGS

[0048] The drawings described herein are used to provide a further understanding of the present invention and constitute a part of the present application, but do not constitute an improper limitation of the present invention. In the drawings:

[0049] Figure 1 A flow chart of the method of the present invention is shown. DETAILED DESCRIPTION

[0050] The present invention will be described in detail below in conjunction with the accompanying drawings and specific embodiments, wherein the illustrative embodiments and descriptions are only used to explain the present invention but are not intended to limit the present invention.

[0051] The present invention provides a method for generating a front-end prototype based on artificial intelligence technology, such as Figure 1 As shown, the implementation steps are as follows:

[0052] Step 1: Collect and process historical data

[0053] 1. Data Collection

[0054] (1) Determine the data source: During the implementation process, historical data related to front-end prototype design can be collected by accessing data storage media such as file systems, version control systems, or collaborative platforms. The data includes requirement description documents, prototype samples (such as UI design drawings or interaction models), low-code prototype metadata (such as JSON files), and other forms of data.

[0055] (2) Selection of data collection tools: During implementation, tools that support multi-format data extraction (such as scripts written in Python or specific data management platforms) can be used for data collection to ensure support for cross-platform, multi-format data extraction operations.

[0056] 2. Data extraction and verification

[0057] (1) Data extraction: Data collected from different sources is converted into a unified structured format through custom scripts or existing tool chains. For example, key field information in JSON format files can be extracted, key points in requirement description documents can be parsed, or design elements of prototype samples can be extracted through image processing technology.

[0058] (2) Data integrity verification: During the implementation process, the extracted data needs to be verified for integrity. Specifically, data verification algorithms can be used to check for missing or inconsistent data items. For example, by comparing the metadata of the low-code prototype with the field matching of the corresponding UI design, ensure that all fields are consistent and without omissions. If missing or erroneous data is found, the following measures can be taken to repair it:

[0059] Missing data can be completed by tracing back to the original data source or using artificial intelligence inference.

[0060] For erroneous data, corrections shall be made based on historical data version records or by cross-comparison with relevant data.

[0061] 3. Data Standardization

[0062] (1) Format unification: In the data standardization stage, data from different sources are unified into a consistent storage and processing format. For example, for metadata in JSON format, fields can be renamed or the order of fields can be adjusted according to predefined templates to ensure consistency with system specifications. For unstructured data (such as requirement description documents), text can be extracted into structured label information through natural language processing technology.

[0063] (2) Naming standards: Establish unified naming rules, such as variable naming should use camelCase or underscore concatenation to enhance the consistency and readability of data processing.

[0064] (3) Redundant data cleaning: Use redundancy detection algorithms to identify and remove duplicate or redundant data. For example, delete duplicate prototype examples or redundant requirement description entries through hash comparison or similarity calculation.

[0065] Through the above implementation method, the collection and organization of historical data related to the front-end prototype design can be completed comprehensively and systematically, laying a data foundation for the subsequent generation of front-end prototypes by artificial intelligence technology.

[0066] Step 2: Store in a structured database

[0067] The sorted data is stored in a structured database, and an efficient data management system is built through the full-text search library (Elasticsearch, ES for short) and the vector search library to support multi-dimensional, high-performance data query and management. The specific implementation is as follows:

[0068] 1. Design and create database model

[0069] (1) Database type selection: According to the structured characteristics of the data, select a suitable relational database system, such as MySQL or PostgreSQL, to store and manage the organized data. The above databases support flexible table structure definition and efficient data query capabilities.

[0070] (2) Database table structure design: Combine the sorted data types to design a database table structure that meets the requirements. For example, create separate tables for requirement descriptions, prototype examples, and low-code prototype metadata. The fields include but are not limited to data source, data type, content summary, associated tags, and timestamps for subsequent storage and retrieval.

[0071] (3) Data specification constraints: When creating a table structure, ensure the integrity, consistency, and relevance of the data by setting constraints such as field types, primary keys, foreign keys, and indexes. For example, you can define a foreign key relationship between the requirement description table and the prototype sample table to facilitate associative retrieval during query.

[0072] 2. Data import and indexing

[0073] (1) Data import: Import the data after standardization in step 1 into the database one by one according to the table structure. During the import process, the data format and fields need to be verified to ensure that they are consistent with the table structure requirements. Abnormal data can be corrected through log records and manual intervention.

[0074] (2) Create indexes: To improve data query efficiency, create indexes for key fields in the database. For example, you can create single-field indexes or composite indexes for keyword fields in the requirement description and field names in the low-code prototype metadata to speed up query operations. The index creation method can select an appropriate algorithm based on the database type, such as a B+ tree index or a hash index.

[0075] (3) Index optimization: To meet high-frequency query requirements, existing indexes can be optimized by analyzing query logs, such as adding covering indexes or adjusting the order of index fields, to further improve performance.

[0076] 3. Build a retrieval system

[0077] (1) Full-text search function: Use ES to build a full-text search function, synchronize the sorted data to ES, and support fast keyword search through its built-in inverted index technology. Full-text search can be combined with a word segmenter (such as IK word segmenter) to segment the Chinese demand description, thereby improving the accuracy and flexibility of keyword matching.

[0078] (2) Semantic retrieval function: Introduce a vector retrieval library into the retrieval system, convert the demand description or user query into a vector representation, and use vector similarity calculation to achieve semantic retrieval. For example, BERT or other deep learning models can be used to semantically encode text data, and the vectors can be stored in the retrieval library to support efficient query.

[0079] (3) Multi-dimensional query support: The retrieval system needs to implement multi-dimensional query functions based on keywords, semantics, and data tags. Users can filter demand descriptions, prototype samples, and metadata by combining conditions. For example, by entering keywords and specifying a time range, the system can quickly return all relevant records that meet the conditions.

[0080] Through the above steps, the data storage and management system can efficiently complete the storage, organization and retrieval of data, ensure the efficiency of data management and the accuracy of query, and provide a solid foundation support for the subsequent front-end prototype generation based on artificial intelligence.

[0081] Step 3: Build a knowledge base to support AI models

[0082] Based on the stored data, a knowledge base system that supports AI model training and query is built. The knowledge base aims to integrate multi-dimensional data resources and provide efficient retrieval functions to meet the needs of model training and task-related data matching. The specific implementation is as follows:

[0083] 1. Define the knowledge base structure

[0084] (1) Knowledge classification: Classify and manage the data in the knowledge base according to its source and purpose. For example, the knowledge base can be divided into requirement description, prototype design, and low-code metadata to ensure that each type of data has a clear hierarchical structure when stored and queried.

[0085] (2) Label definition: Assign labels to each type of data to identify the key attributes of the data. For example, requirement description data can define labels related to functional modules, user goals, and technical constraints, and prototype design data can define labels related to interface layout, interaction logic, and visual style.

[0086] (3) Attribute setting: Define corresponding attribute fields for each type of data, such as timestamp, data source, association relationship, etc., so as to provide richer screening dimensions for subsequent retrieval.

[0087] 2. Data import

[0088] (1) Data synchronization: Import the organized structured data in the database into the knowledge base, and use batch import to improve import efficiency. During the data import process, the integrity and consistency of the data need to be verified, such as checking whether there is data loss, duplication, or format inconsistency.

[0089] (2) Data cleaning and verification: Before importing, the data must be cleaned as necessary, such as removing redundant records, filling in missing fields, or correcting erroneous data. The verification process can be done by comparing the records in the original database with the data imported into the knowledge base to ensure that the two are consistent.

[0090] (3) Data update mechanism: To ensure the real-time and accuracy of knowledge base data, a timed update mechanism can be introduced to synchronize new or changed data in the database to the knowledge base at time intervals to avoid data lag or incompleteness.

[0091] 3. Knowledge retrieval function development

[0092] (1) Full-text search: The full-text search function of the knowledge base is built based on ES (Elasticsearch). The inverted index mechanism of ES is used to achieve fast keyword matching queries on requirement descriptions, prototype designs, and metadata. The full-text search function can be combined with word segmentation technology (such as the Chinese IK word segmenter) to ensure efficient location of target information in long text data.

[0093] (2) Vector retrieval: Introduce vector retrieval function in the knowledge base, and represent data as semantic vectors through deep learning models (such as BERT). The vector retrieval system can identify knowledge items with high semantic relevance to the input query through vector similarity calculation, thereby achieving more intelligent query matching.

[0094] (3) Multi-dimensional search support: Develop a comprehensive query function that combines keyword search, semantic search, and tag filtering. For example, users can enter the required keywords and further filter the results by specifying functional modules or time ranges to ensure that the most suitable knowledge items are found quickly.

[0095] Through the above implementation methods, the knowledge base can integrate multiple types of data resources, support efficient retrieval and query, and provide rich corpus and reference data for artificial intelligence model training, thereby improving the intelligence level and application value of the model.

[0096] Step 4: Use GAN to optimize task similarity detection

[0097] Using a large language model (such as the open source model Qwen), combined with the constructed knowledge base, a similarity detection algorithm based on a generative adversarial network (GAN) is used for model training and optimization to adapt to the needs of the front-end prototype generation task. The specific implementation is as follows:

[0098] 1. Data preparation

[0099] (1) Training data collection

[0100] Based on the knowledge base, we extract task descriptions, prototype examples, and low-code metadata. We generate task input-output pairs for each piece of data, and combine the task description with the associated label to form a task pair training set.

[0101] (2) Data preprocessing and grouping

[0102] Classify the data, for example, group them by task type (such as interface layout design or functional module), generate positive task pairs (similar tasks) and negative task pairs (dissimilar tasks), and ensure a balanced distribution of positive and negative samples.

[0103] (3) Data Characterization

[0104] Generate a basis feature vector for each task pair and, include: Among them, encode() uses the encoder part of the BERT or Qwen model to generate a feature vector; Task 1 and Task 2 All are tasks.

[0105] 2. Model training

[0106] (1) Generative Adversarial Network Architecture Design

[0107] Design a generative adversarial network (GAN) model, including two parts: generator and discriminator:

[0108] Generator G: Input the feature vector of the task pair and generate a hypothesis similarity score:

[0109] Discriminator D: Determines whether the task pair is a real similar task. Input feature vector and the score output by generator, and output the authenticity judgment result P real :

[0110] (2) GAN training process

[0111] Generator training goal: optimize the generator G so that its output hypothesis score S fake As close as possible to the true task pair score of the discriminator: L G is the objective function of the generator; -E is the expected value symbol, which means averaging the scores of related data.

[0112] Discriminator training goal: optimize the discriminator D so that it can accurately distinguish between real task pairs and generated task pairs. The loss function is: L D is the target loss function of the discriminator; where S real is the similarity score of the real task pair, provided by manual annotation or automatically generated labels.

[0113] 3. Result reuse

[0114] (1) Generator optimization result storage

[0115] During the training process, the parameters of the generator G are saved periodically to form an intermediate model version for task similarity detection so that it can be loaded and reused in different tasks.

[0116] (2) Discriminator-assisted analysis

[0117] The output of the discriminator D can be used to mark whether a new task pair is a high-similarity pair, providing auxiliary basis for task classification and resource allocation.

[0118] 4. Task similarity detection

[0119] GAN-based similarity detection algorithm:

[0120] (1) Generate hypothesis similarity scores

[0121] Input the feature vector of the new task pair and The hypothesis similarity score is calculated by the generator G:

[0122] (2) Identifying Similar Task Pairs

[0123] Use the discriminator D to verify the validity of the hypothesis score and generate the final judgment score P based on the task characteristics. final :

[0124] (3) Dynamically adjust the generator and discriminator

[0125] For new task types or fields, the parameters of the generator G and discriminator D are updated through incremental training to ensure model adaptability.

[0126] Step 5: Natural language requirements semantic analysis

[0127] The present invention parses the natural language requirements input by the user, extracts key information and converts it into structured data, providing accurate basic support for the generation of front-end prototypes. The specific implementation method is as follows:

[0128] 1. Natural Language Parsing

[0129] (1) Semantic Analysis

[0130] Semantic parsing technology is used to analyze the natural language requirement text entered by the user to extract the functional points, data fields and logical relationships. For example, for the requirement description entered by the user, "The user login page needs to include a username and password input box, and support jumping to the home page after login", the following content can be extracted through semantic analysis:

[0131] Function points: user login, page jump.

[0132] Data fields: Username, Password.

[0133] Logical relationship: Jump to the home page after successful login.

[0134] To achieve high-precision semantic analysis, a large language model (such as BERT, Qwen) is used in combination with a domain knowledge base to semantically annotate and classify text. For example, the model generates a dependency tree for each sentence, identifies the relationship between key verbs and nouns, and extracts core information related to the demand description.

[0135] (2) Task classification and labeling

[0136] Based on semantic analysis, requirements are classified and tagged according to their characteristics. For example, requirements can be classified into page layout, data interaction, or functional logic, and specific tags (such as "form field", "interaction action", or "logical condition") are added to each requirement.

[0137] (3) Contextual understanding and ambiguity resolution

[0138] For the vague description or ambiguity that may exist in the user input, reasoning is performed by combining context information with historical demand data. For example, if the requirement mentions "supporting search function" but does not specify the search scope, it can be automatically completed as "full site search" or "specific module search" in combination with the knowledge base, and the user is prompted to confirm.

[0139] 2. Data Structuring

[0140] (1) Metadata format design

[0141] The parsing results are converted into a structured format according to a predefined JSON format. The JSON format may include the following fields:

[0142] Function point: the name and description of the function module mentioned in the storage requirements.

[0143] Data field: List the specific data items and their attributes (such as type, length, and whether it is required) involved in the requirement.

[0144] Logical relationship: describes the interaction relationship and dependency logic between the functional modules in the requirements.

[0145] (2) Automatic mapping and verification

[0146] Use the automatic mapping algorithm to match the natural language parsing results with the JSON fields. For example, map the "user name" in the requirement to the "user_name" field through the named entity recognition (NER) model, and generate the corresponding attribute value according to the predefined template:

[0147] After the conversion is completed, the integrity and accuracy of the structured data is verified. For example, check whether key functional points or data fields in the requirements are missing, and use verification rules to determine whether the logical relationship description is reasonable.

[0148] (3) Demand structure storage

[0149] The generated metadata in JSON format is stored in a dedicated requirement library to provide standardized input support for the front-end prototype generation process. To improve storage efficiency and query performance, JSON data can be indexed, such as building a full-text index or field index based on Elasticsearch.

[0150] Through the above steps, the natural language requirements input by users can be accurately parsed and efficiently converted into structured data, thus providing a clear semantic basis and data support for the subsequent front-end prototype generation. This process not only improves the efficiency of demand processing, but also significantly reduces the errors of manual parsing and enhances the intelligent level of prototype generation.

[0151] Step 6: Automatically build front-end prototype

[0152] Based on the generated JSON metadata, the front-end prototype is quickly built through automated tools, and the prototype is dynamically optimized based on user needs. The specific implementation is as follows:

[0153] 1. Dynamically load data

[0154] (1) Real-time data call mechanism

[0155] During the front-end prototype generation process, task-related data is called in real time based on the generated JSON metadata. Dynamic loading avoids loading all data at once, improves efficiency and reduces system resource usage. For example, for dynamic form fields involved in the prototype, the system calls the relevant API or database to obtain the field content when the prototype is generated, rather than pre-defining all field contents in advance.

[0156] Data calls can be implemented based on asynchronous operations (such as AJAX or Fetch API) to ensure that data loading is completed without blocking the user interface, thereby improving user experience.

[0157] (2) Componentized template generation

[0158] Automatically map to predefined front-end component templates based on JSON metadata. For example, form fields in JSON can be mapped to the form component library of a front-end framework (such as React or Vue), and interface elements are generated through dynamic rendering. The specific mapping process is as follows:

[0159] Load the appropriate input box component for the corresponding field type (such as "string" or "number").

[0160] Automatically generate validation logic and prompt information based on field attributes (such as "required" or "maxLength").

[0161] After the template is generated, it is dynamically presented through a rendering engine (such as React DOM or Vue's Virtual DOM) to ensure the real-time and flexibility of prototype generation.

[0162] 2. User interaction feedback

[0163] (1)Interactive interface design

[0164] Provide a friendly user interface, allowing users to make real-time adjustments to the generated front-end prototype. For example, modify the interface layout by dragging and dropping, and adjust component properties (such as font size, color, or placeholder text) through the input box. Changes in the user interface will be updated in real time to the rendered prototype, improving the usability and intuitiveness of the prototype.

[0165] For adjusting the function logic, a visual process editor can be provided, and users can adjust the function by adding or modifying the logic nodes. For example, add new form validation rules or adjust the page jump conditions. The operation results of the editor can be saved as structured data in real time, and the prototype display can be updated.

[0166] (2) Generation of optimization suggestions

[0167] The system generates optimization suggestions by analyzing user adjustment behaviors. For example, when users frequently modify the style or layout of a component, the system can recommend preset best practice styles or component alternatives. Optimization suggestions can be based on the following sources:

[0168] Recommended style templates in the component library.

[0169] The most commonly used configuration in user history adjustment behavior.

[0170] Preferred design solutions of similar prototypes in the knowledge base.

[0171] (3) Change tracking and version management

[0172] Track changes made by users, record the content and time of each adjustment, and form a traceable version history. Users can roll back to a historical version or compare the differences between different versions at any time.

[0173] The version management function can be implemented based on the Git concept, recording each change as incremental data and storing it in the background database for fast loading and backtracking.

[0174] Through the above steps, the present invention can quickly generate a front-end prototype based on JSON metadata, and dynamically optimize the prototype layout and functional logic through user interaction feedback. This method not only significantly improves the efficiency of prototype development, but also enhances the user's sense of participation and satisfaction, providing strong support for the rapid iteration of actual products.

[0175] The above description is only a preferred embodiment of the present invention, so all equivalent changes or modifications made according to the structure, characteristics and principles described in the scope of the patent application of the present invention are included in the scope of the patent application of the present invention.

Claims

1. A method for generating a front-end prototype based on a generative adversarial network, characterized in that: The following steps are involved: Step 1: Collect historical data related to front-end prototype design, extract, verify and standardize the data; Step 2: Store the sorted data in a structured database, and build a data management system that supports multi-dimensional queries through a full-text search library and a vector search library; Step 3: Based on the stored data, build a knowledge base to support AI model training and query, including data classification, label setting, and retrieval function development; Step 4: Use the Generative Adversarial Network (GAN) model to optimize task similarity detection; generate hypothesized similarity scores through the generator, and the discriminator determines the similarity of the task pairs; and reuse the intermediate model parameters generated by training; Step 5: Perform semantic analysis on the natural language requirements input by the user, extract key elements and convert them into structured data; Step 6: Based on the generated structured data, automatically build the front-end prototype and optimize the interface layout and logic through user interaction.

2. A method for generating a front-end prototype based on a generative adversarial network as claimed in claim 1, characterized in that: The step 1 further comprises: Determine the data source and collect historical data related to the front-end prototype design; extract and verify the collected data, convert the data into a unified structured format, complete the missing data, and correct the erroneous data; standardize the data, including unifying the format, establishing naming conventions, and cleaning up redundant data.

3. A method for generating a front-end prototype based on a generative adversarial network as claimed in claim 1, characterized in that: The step 2 further includes: storing the sorted data in a structured database, designing a database table structure and setting field constraints; creating indexes for key fields; and constructing a retrieval system supporting multi-dimensional queries through a full-text retrieval library and a vector retrieval library to perform keyword retrieval, semantic retrieval and multi-dimensional data screening.

4. The method for generating a front-end prototype based on a generative adversarial network according to claim 1, characterized in that: The step 3 further includes: classifying and managing the data, setting data labels and attribute fields; importing the structured data in the database into the knowledge base and performing cleaning and verification; and achieving keyword matching, semantic association and multi-dimensional query of the data through full-text retrieval and vector retrieval.

5. The method for generating a front-end prototype based on a generative adversarial network according to claim 1, characterized in that: The step 4 further comprises the following steps: 1) Based on the knowledge base, extract task descriptions, prototype examples, and low-code metadata to generate task input-output pairs, and form a task pair training set by combining task descriptions and associated labels; 2) Classify the training data and generate positive and negative task pairs by task type to ensure a balanced distribution of positive and negative samples; 3) Characterize the task pair through the model encoder part to generate a feature vector; 4) Design a generative adversarial network architecture, including a generator and a discriminator. The generator is used to generate a hypothesized similarity score based on the input feature vector, and the discriminator is used to determine whether the task pair is a truly similar task; 5) Generative adversarial network model training is performed by optimizing the loss functions of the generator and the discriminator. The training goal of the generator is to make the hypothesized similarity score close to the real similarity score, and the training goal of the discriminator is to distinguish between the real task pairs and the generated task pairs; 6) Based on the generative adversarial network model, the feature vector of the new task pair is input to generate a hypothesis similarity score, and the validity of the hypothesis score is verified by the discriminator, and the final judgment score is generated in combination with the task characteristics; 7) Dynamically adjust the generator and discriminator parameters and optimize the model through incremental training to adapt to new task types or domains.

6. A method for generating a front-end prototype based on a generative adversarial network as claimed in claim 5, characterized in that: The generator generates a hypothesis similarity score by inputting the feature vector of the task pair. The generation target of the hypothesis similarity score is achieved by optimizing the following loss function: Among them, D is the discriminator, G is the generator, and is the feature vector of the task pair; L G is the objective function of the generator; -E is the expected value symbol, which means averaging the scores of related data; The discriminator is optimized through the following loss function to accurately distinguish between real task pairs and generated task pairs: Among them, S real is the similarity score of the real task pair, S fake The similarity score of the hypothesis generated by the generator; L D is the objective loss function of the discriminator.

7. The method for generating a front-end prototype based on a generative adversarial network according to claim 1, characterized in that: The step 5 further comprises: 1) Use semantic parsing technology to perform semantic analysis on the natural language requirements input by users and extract function points, data fields and logical relationships; 2) Classify and label the requirements and generate category labels based on the characteristics of the requirements; 3) Combine contextual information with historical demand data to perform reasoning and ambiguity resolution of fuzzy descriptions; 4) The parsing results are converted into a structured format according to the predefined JSON format, which includes function points, data fields and logical relationships; 5) Use the automatic mapping algorithm to match the parsed results with the JSON fields and verify the integrity and accuracy of the structured data; 6) Store the generated metadata in JSON format into the demand library to provide support for subsequent processing.

8. The method for generating a front-end prototype based on a generative adversarial network according to claim 1, characterized in that: The step 6 further comprises: 1) Dynamically call task-related data and implement real-time data loading and dynamic rendering through asynchronous operations; 2) Map the JSON metadata to the predefined front-end component template, dynamically generate the adapted components according to the field type and attributes, and present the interface elements; 3) Provide a user interaction interface and update the front-end prototype in real time by adjusting the interface layout and component properties; 4) generating optimization suggestions based on the user adjustment behavior, wherein the optimization suggestions include recommended style templates or component alternatives; 5) Record user adjustment operations, form change tracking and version management functions, and support historical version rollback and version difference comparison.

Images