Method for generating front-end prototype based on artificial intelligence technology

Abstract

The invention provides a method for generating a front-end prototype based on an artificial intelligence technology. The method comprises the steps of data acquisition, knowledge base construction, model training and optimization, demand analysis and prototype generation. The method comprises the following steps: constructing a knowledge base supporting multi-dimensional query by collecting and verifying historical data; in combination with the content of the knowledge base, a large language model is used for performing field specialized fine tuning, and low-rank matrix optimization and comparative learning are adopted to improve the task similarity detection precision; semantic analysis and structured conversion are carried out on the natural language requirements of the user; a front-end prototype is automatically generated based on structured data, and user interaction feedback and dynamic optimization are supported. According to the method, efficient data processing, intelligent model optimization and flexible prototype design are realized, the intelligent level and development efficiency of prototype generation are improved, and powerful support is provided for front-end design under rapid iteration and complex requirements.

Description

Technical Field

[0001] The present invention relates to the field of artificial intelligence and software development technology, and specifically to a method for generating a front-end prototype based on artificial intelligence technology, in particular to realizing the automatic generation and optimization of converting requirements into front-end prototypes by combining natural language analysis with artificial intelligence model training. Background Art

[0002] With the rapid development of Internet technology, the design and implementation of user interfaces have become an important part of software development. As an early stage of user interface development, front-end prototyping directly affects subsequent development efficiency and user experience quality. However, the traditional front-end prototyping and development process has the following problems:

[0003] Traditional front-end prototype design relies on manual analysis and transformation of requirement documents, which usually requires multiple communications and adjustments between designers and developers. For complex business requirements, manual transformation is not only time-consuming, but also prone to misunderstandings and deviations, resulting in low project development efficiency.

[0004] Most existing prototyping tools are semi-automatic design tools, and designers need to manually select templates, adjust layouts and interaction logic according to their needs. This method requires a high degree of reliance on experienced designers and cannot effectively respond to large-scale needs quickly.

[0005] Although some low-code development platforms can quickly generate interfaces through componentization, these platforms are mainly based on fixed templates and lack the ability to intelligently analyze user needs. Especially when dealing with natural language requirements, these tools cannot recognize and understand the user's true intentions, resulting in a low match between the generated prototype and actual needs.

[0006] In the prototype design for diverse business scenarios, how to efficiently generate a front-end interface that meets specific needs is an important challenge. Traditional template-based development cannot meet the needs of highly complex and highly customized scenarios, and companies need to invest a lot of manpower and time to adjust the prototype to adapt to business needs.

[0007] In the existing technology, the application of artificial intelligence models in the field of front-end development is still in its infancy. Most model training uses general data sets and lacks deep integration of business knowledge. At the same time, the model training process is often inefficient due to repeated calculations and waste of resources, making it difficult to apply on a large scale in a fast-iteration development environment.

[0008] Based on the above background, how to effectively combine artificial intelligence technology, make full use of the natural language understanding ability of large language models, and build an automated process from demand analysis to prototype generation has become an important technical problem that the industry needs to solve urgently. This technology not only needs to break through the limitations of traditional front-end design tools, but also needs to achieve innovation in model training, knowledge management, and demand conversion efficiency, and provide new solutions for fast, efficient, and intelligent front-end development. Summary of the invention

[0009] 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 artificial intelligence technology, comprising the following steps:

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

[0011] Step 2: Store the sorted data in a structured database and implement multi-dimensional query and management through a retrieval system;

[0012] Step 3: Build a knowledge base based on the stored data to provide support for model training and task-related queries;

[0013] Step 4: Combine the knowledge base content to train a large language model and optimize task similarity detection; specifically, store the intermediate model parameters in historical training tasks and reuse them in similar tasks;

[0014] Cache the intermediate calculation results during model training for subsequent identical or similar tasks;

[0015] Through the task similarity detection algorithm, the reuse possibility between training tasks is evaluated to reduce repeated calculations and accelerate model training;

[0016] Step 5: Parse the natural language requirements input by the user and convert them into structured data;

[0017] Step 6: Automatically generate a front-end prototype based on structured data, and improve the prototype through user interaction and optimization suggestions.

[0018] The step 1 further includes: determining the data source, collecting historical data related to the front-end prototype design; extracting the collected data and converting it into a unified structured format; verifying the integrity of the extracted data and repairing missing or erroneous data; and standardizing the data, including format unification, naming specifications, and redundant data cleaning.

[0019] The step 2 further includes: storing the sorted data into a structured database including designing a database table structure and setting field constraints; importing the data and creating an index, the retrieval system includes full-text retrieval and semantic retrieval functions, and supports multi-dimensional queries.

[0020] The step 3 further includes: defining the knowledge base structure, including classifying data, assigning labels and setting attribute fields; importing structured data in the database into the knowledge base, and performing data cleaning and verification; building knowledge retrieval functions, including full-text retrieval, vector retrieval and supporting multi-dimensional comprehensive queries.

[0021] The step 4 further includes: extracting training data from the knowledge base, including task descriptions, prototype examples and metadata, constructing a training data set and performing data cleaning and formatting processing; loading the pre-trained large language model weights, and performing domain-specific fine-tuning in combination with the knowledge base data; optimizing the model parameters using a low-rank matrix adjustment method; using contrastive learning and modeling the similarity of task pairs through a twin-tower model; storing the intermediate model parameters generated during the model training process, using a multi-dimensional similarity detection algorithm, extracting task features and performing similarity calculations, and optimizing the task clustering and evaluation process.

[0022] The formatting of the training data includes converting the data into a multimodal feature vector, wherein the feature vector includes semantic features, contextual relationship features, and task graph embedding features.

[0023] The dual-tower model models the similarity of task pairs, specifically including:

[0024] For an input task pair, generate a comprehensive feature vector

[0025] And optimize the model by contrasting the loss function:

[0026] Among them, L represents the total loss value of the current batch of task pairs, which is used to measure the overall error of the model in similarity prediction; N represents the number of task pairs contained in a training batch; i represents the index of the task pair, ranging from 1, 2, ..., N, S i is the task similarity score; y i is the true similarity label; Represents semantic features; Represents contextual features; represents the task graph embedding feature; α1, α2, α3 are weighting coefficients.

[0027] The step 5 further includes semantically parsing the natural language requirements input by the user, extracting function points, data fields and logical relationships; classifying the requirements according to the characteristics of the requirements and generating labels for them; using context information to reason and complete vague descriptions or ambiguities; converting the parsing results according to a predefined structured format, and automatically mapping and verifying them; storing the structured data in a requirements library and indexing the data.

[0028] The step 6 further includes, based on the generated JSON metadata, dynamically loading and calling task-related data in real time, and automatically mapping to the component template according to the field attributes to generate a front-end interface; providing user interaction feedback function, supporting users to adjust the layout, component attributes and functional logic of the front-end prototype, and saving the adjustment results as structured data in real time; analyzing user adjustment behavior, generating optimization suggestions to improve the front-end prototype design; tracking changes and managing versions of user adjustment operations, supporting rollback to historical versions or comparing differences between different versions.

[0029] The present invention generates a front-end prototype based on artificial intelligence technology, and has the following beneficial effects: through data collection, verification and standardization processing, data integrity and consistency are ensured to provide high-quality data support for model training; a knowledge base supporting full-text retrieval and semantic retrieval is constructed to provide accurate support for model training and task matching; a large language model is used in combination with domain-specific fine-tuning, low-rank matrix adjustment and contrastive learning optimization model to improve training efficiency and reduce repeated calculations; natural language requirements are converted into structured data through semantic parsing to improve the accuracy of requirement processing; front-end prototypes are dynamically generated based on structured data, real-time adjustments are made in combination with user interaction and optimization suggestions, version management is supported, and prototype design flexibility is improved; through the reuse and caching mechanism of task resources, development costs and time investment are reduced. The present invention significantly improves the intelligence, automation and efficiency of front-end prototype design, and provides strong support for rapid iteration. BRIEF DESCRIPTION OF THE DRAWINGS

[0030] 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:

[0031] Figure 1 A schematic flow chart of a method for generating a front-end prototype based on artificial intelligence technology according to the present invention is shown. DETAILED DESCRIPTION

[0032] 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.

[0033] 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:

[0034] Step 1: Data collection and organization

[0035] 1. Data Collection

[0036] (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.

[0037] (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.

[0038] 2. Data extraction and verification

[0039] (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.

[0040] (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:

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

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

[0043] 3. Data Standardization

[0044] (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.

[0045] (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.

[0046] (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.

[0047] 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.

[0048] Step 2: Data storage and management

[0049] 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:

[0050] 1. Design and create database model

[0051] (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.

[0052] (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.

[0053] (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.

[0054] 2. Data import and indexing

[0055] (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.

[0056] (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.

[0057] (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.

[0058] 3. Build a retrieval system

[0059] (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.

[0060] (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.

[0061] (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.

[0062] 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.

[0063] Step 3: Knowledge base construction

[0064] 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:

[0065] 1. Define the knowledge base structure

[0066] (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.

[0067] (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.

[0068] (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.

[0069] 2. Data import

[0070] (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.

[0071] (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.

[0072] (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.

[0073] 3. Knowledge retrieval function development

[0074] (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.

[0075] (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.

[0076] (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.

[0077] 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.

[0078] Step 4: AI model training and optimization

[0079] Using a large language model (such as the open source model Qwen), combined with the constructed knowledge base, and through a similarity detection algorithm, the model is trained and optimized to adapt to the needs of the front-end prototype generation task. The specific implementation is as follows:

[0080] 1. Data preparation

[0081] (1) Training data collection

[0082] Based on the knowledge base content, extract task descriptions, prototype examples, and low-code metadata. Build a training data set based on the task objectives to ensure that the logical relationship between input and output is clear and quantifiable.

[0083] (2) Data cleaning and labeling

[0084] De-duplicate and format the data, and add labels to data entries manually or semi-automatically, such as functional module categories, semantic attributes, etc.

[0085] (3) Multimodal data formatting

[0086] Convert the data into a multimodal feature vector, including: Represents semantic features; Represents contextual features; Represents the task graph embedding features and provides multi-dimensional input support for subsequent training.

[0087] 2. Model training

[0088] (1) Model initialization

[0089] Load the pre-trained weights of the open source model Qwen and use the knowledge base data for domain-specific fine-tuning.

[0090] (2) LoRA / QLoRA fine-tuning method

[0091] The LoRA method is used to adjust the parameters of specific layers by inserting low-rank matrices to ensure task adaptability while reducing resource consumption. The model weight matrix W used to adapt to specific tasks after fine-tuning adapted The formula is as follows:

[0092] W adapted =W+A·B

[0093] Among them, W is the original weight matrix, A and B are low-rank matrices used to adjust the original model weights.

[0094] Use QLoRA (quantized low rank matrix) for further optimization, and combine quantization technology to reduce video memory requirements while ensuring model performance.

[0095] (3) Contrastive Learning Optimization

[0096] The Siamese Network is used to model the similarity of task pairs. For the input task pair, a comprehensive feature vector is generated. α1, α2, α3 are weighting coefficients used to control the influence of different eigenvectors in the final comprehensive vector. The contribution ratio in .

[0097] α1: controls the weight of semantic features and determines the importance of semantic information.

[0098] α2: controls the weight of contextual features and measures the impact of contextual information.

[0099] α3: controls the weight of graph structural features, reflecting the relative contribution of graph embedding.

[0100] In a specific implementation of the present invention, the model is optimized by using a contrast loss function to achieve task pair similarity modeling and accuracy improvement. The specific formula is as follows.

[0101] Contrastive loss function formula:

[0102]

[0103] Where L represents the total loss value of the current batch of task pairs, which is used to measure the overall error of the model in similarity prediction; N represents the number of task pairs contained in a training batch; i represents the index of the task pair, ranging from 1, 2, …, N.

[0104] Task similarity score S i :

[0105] S i is the similarity score of task pair i, calculated by the model based on the comprehensive feature vector of the tasks.

[0106] The true similarity label y i :

[0107] y i is the true label of the task pair, which is used to mark whether the task pair is similar:

[0108] When i =1, indicating that the task pairs are similar;

[0109] When i =0, it means the task pair is not similar.

[0110] When i =1, the corresponding loss term is Its goal is to make S i The value is as large as possible to reduce the loss and optimize the model to more accurately identify similar task pairs.

[0111] When i = 0, the corresponding loss term is Its goal is to make S i The value is as small as possible, thereby reducing the loss and optimizing the model to make it more accurate in distinguishing non-similar task pairs.

[0112] The loss values ​​of each task pair are averaged to obtain the total loss value L of the current batch. By minimizing L, the model gradually optimizes the ability of feature generation and similarity discrimination.

[0113] Optimization goals and implementation steps:

[0114] Optimization goal:

[0115] Improve the similarity score S of similar task pairs i , so that S i →+∞;

[0116] Reduce the similarity score S of non-similar task pairs i , so that S i →-∞.

[0117] Optimization process:

[0118] Through back propagation and gradient descent, the parameters of the model are optimized, and the feature generation process and the calculation method of the scoring function are adjusted to ensure that: the comprehensive feature vectors of similar task pairs are closer; the comprehensive feature vectors of non-similar task pairs are farther apart.

[0119] The model can accurately predict the similarity of task pairs and meet the requirements for task adaptability in the front-end prototype generation process, significantly improving the accuracy and efficiency of matching similar tasks.

[0120] 3. Result reuse

[0121] (1) Intermediate model parameter storage

[0122] During model training, intermediate model parameters (such as LoRA weights) are stored, and a versioning system is used to record task adaptation history.

[0123] (2) Cache calculation results

[0124] For repeated tasks, a calculation result cache mechanism is introduced. The calculation result is identified by a unique hash value to avoid repeated calculations and improve training efficiency.

[0125] 4. Task similarity detection

[0126] Multi-dimensional similarity detection algorithm:

[0127] (1) Feature extraction and fusion

[0128] Extract multimodal features of new and historical tasks, including: And dynamically weighted fusion through the attention mechanism:

[0129] (2) Similarity calculation

[0130] Use the comprehensive feature vector to calculate the similarity score S of the task pair total :S total =β1·S semantic +β2·S context +β3·S graph Among them, β1, β2, β3 are the weights of dynamic optimization. Among them, S semantic , S context and S graph It is the similarity score of the semantic features, contextual relationship features and task graph embedding features. It is calculated by the distance or similarity between the semantic feature vectors of two task pairs. The specific formula for each choice depends on the task requirements and the properties of the feature space. For example, cosine similarity is suitable for high-dimensional sparse data, while Euclidean distance is suitable for low-dimensional continuous features. total The value of is finally input into the contrast loss function L.

[0131] (3) Task clustering and optimization

[0132] Perform density clustering on historical tasks to narrow the matching range and quickly evaluate the similarity of tasks within the group. Use a density clustering algorithm (such as DBSCAN) to adjust the density threshold between tasks using the following formula: Among them, d i is the Euclidean distance between task vectors.

[0133] Through the above implementation methods, the artificial intelligence model can achieve efficient training and optimization, and improve the efficiency of task resource reuse through the similarity detection algorithm, significantly reducing development costs and time investment.

[0134] Step 5: Requirements analysis and structural transformation

[0135] 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:

[0136] 1. Natural Language Parsing

[0137] (1) Semantic Analysis

[0138] 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:

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

[0140] Data fields: Username, Password.

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

[0142] 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.

[0143] (2) Task classification and labeling

[0144] 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.

[0145] (3) Contextual understanding and ambiguity resolution

[0146] 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.

[0147] 2. Data Structuring

[0148] (1) Metadata format design

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

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

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

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

[0153] (2) Automatic mapping and verification

[0154] 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:

[0155] 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.

[0156] (3) Demand structure storage

[0157] 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.

[0158] 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.

[0159] Step 6: Front-end prototyping and optimization

[0160] 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:

[0161] 1. Dynamically load data

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

[0163] 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.

[0164] 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.

[0165] (2) Componentized template generation

[0166] 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:

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

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

[0169] 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.

[0170] 2. User interaction feedback

[0171] (1)Interactive interface design

[0172] 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.

[0173] 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.

[0174] (2) Generation of optimization suggestions

[0175] 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:

[0176] Recommended style templates in the component library.

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

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

[0179] (3) Change tracking and version management

[0180] 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.

[0181] 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.

[0182] 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.

[0183] 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 artificial intelligence technology, characterized in that: The following steps are involved: Step 1: Collect historical data related to front-end prototype design, and verify and standardize the data; Step 2: Store the sorted data in a structured database and implement multi-dimensional query and management through a retrieval system; Step 3: Build a knowledge base based on the stored data to provide support for model training and task-related queries; Step 4: Combine the knowledge base content to train a large language model and optimize task similarity detection; specifically, store the intermediate model parameters in historical training tasks and reuse them in similar tasks; Cache the intermediate calculation results during model training for subsequent identical or similar tasks; Through the task similarity detection algorithm, the reuse possibility between training tasks is evaluated to reduce repeated calculations and accelerate model training; Step 5: Parse the natural language requirements input by the user and convert them into structured data; Step 6: Automatically generate a front-end prototype based on structured data, and improve the prototype through user interaction and optimization suggestions.

2. The method for generating a front-end prototype based on artificial intelligence technology according to claim 1, characterized in that: The step 1 further includes: determining the data source, collecting historical data related to the front-end prototype design; extracting the collected data and converting it into a unified structured format; verifying the integrity of the extracted data and repairing missing or erroneous data; and standardizing the data, including format unification, naming specifications, and redundant data cleaning.

3. The method for generating a front-end prototype based on artificial intelligence technology as claimed in claim 1, characterized in that: The step 2 further includes: storing the sorted data into a structured database including designing a database table structure and setting field constraints; importing the data and creating an index, the retrieval system includes full-text retrieval and semantic retrieval functions, and supports multi-dimensional queries.

4. The method for generating a front-end prototype based on artificial intelligence technology according to claim 1, characterized in that: The step 3 further includes: defining the knowledge base structure, including classifying data, assigning labels and setting attribute fields; importing structured data in the database into the knowledge base, and performing data cleaning and verification; building knowledge retrieval functions, including full-text retrieval, vector retrieval and supporting multi-dimensional comprehensive queries.

5. The method for generating a front-end prototype based on artificial intelligence technology according to claim 1, characterized in that: The step 4 further includes: extracting training data from the knowledge base, including task descriptions, prototype examples and metadata, constructing a training data set and performing data cleaning and formatting processing; loading the pre-trained large language model weights, and performing domain-specific fine-tuning in combination with the knowledge base data; optimizing the model parameters using a low-rank matrix adjustment method; using contrastive learning and modeling the similarity of task pairs through a twin-tower model; storing the intermediate model parameters generated during the model training process, using a multi-dimensional similarity detection algorithm, extracting task features and performing similarity calculations, and optimizing the task clustering and evaluation process.

6. A method for generating a front-end prototype based on artificial intelligence technology as claimed in claim 5, characterized in that: The formatting of the training data includes converting the data into a multimodal feature vector, wherein the feature vector includes semantic features, contextual relationship features, and task graph embedding features.

7. The method for generating a front-end prototype based on artificial intelligence technology as claimed in claim 5, characterized in that: The dual-tower model models the similarity of task pairs, specifically including: For an input task pair, generate a comprehensive feature vector And optimize the model by contrasting the loss function: Among them, L represents the total loss value of the current batch of task pairs, which is used to measure the overall error of the model in similarity prediction; N represents the number of task pairs contained in a training batch; i represents the index of the task pair, ranging from 1, 2, ..., N, S i is the task similarity score; y i is the true similarity label; Represents semantic features; Represents contextual features; represents the task graph embedding feature; α1, α2, α3 are weighting coefficients.

8. The method for generating a front-end prototype based on artificial intelligence technology as claimed in claim 7, characterized in that: The step 5 further includes semantically parsing the natural language requirements input by the user, extracting function points, data fields and logical relationships; classifying the requirements according to the requirements characteristics, and generating labels for them; Use context information to infer and complete vague descriptions or ambiguities; convert the parsing results into a predefined structured format, and automatically map and verify them; store the structured data in the demand library and index the data.

9. The method for generating a front-end prototype based on artificial intelligence technology according to claim 1, characterized in that: The step 6 further comprises: Based on the generated JSON metadata, task-related data is called in real time through dynamic loading, and the front-end interface is automatically mapped to the component template according to the field attributes; user interaction feedback function is provided to support users to adjust the layout, component properties and functional logic of the front-end prototype, and save the adjustment results as structured data in real time; user adjustment behavior is analyzed and optimization suggestions are generated to improve the front-end prototype design; change tracking and version management are performed for user adjustment operations, and support rolling back to historical versions or comparing differences between different versions.

Images