VLM-based H5 component generation method and device, computer equipment and storage medium

Abstract

The invention relates to the field of U I design, is applied to the field of financial business science and technology, and discloses a VLM-based H5 component generation method and device, computer equipment and a storage medium, and the method comprises the steps: analyzing a user demand through a VLM, and obtaining a component style and a component field value; converting the component style and the component field value into component display information and a CSS style code, and determining a code object data structure according to the component display information and the CSS style code; and generating and publishing the target H5 component through the preset component generation and publishing process and the code object data structure. By means of the mode, through automatic analysis of the user requirements and the automatic process, manual coding errors are reduced, and the accuracy and reliability of codes are improved. The code object data structure generated automatically follows the preset standard and mode, the front-end page component is rapidly generated according to the service requirement of the user, and then the platform efficiency is improved.

Description

Technical Field

[0001] The present application relates to the field of UI design and is applied to the field of financial business technology, and in particular to a method, device, computer equipment and storage medium for generating H5 components based on VLM. Background Art

[0002] With the rapid development of artificial intelligence technology, low-code and no-code CMS (Content Management System) technology has matured, and users are more willing to use this type of drag-and-drop platform to configure various front-end pages. However, the platform's own capabilities depend in part on the richness of the component library, and components in many business scenarios are highly dependent on development preset assembly. At present, artificial intelligence technology has achieved certain results in front-end page generation, but its accuracy, stability and later adjustability are still a problem. When developing components for low-code and no-code platforms, it is necessary to pre-determine the general and non-general component attribute data structure, preset adjustable or fixed display elements in the component, and adjust the CSS (Cascading Style Sheets) attributes associated with the style data to ensure that the user's display needs are met, and then design the dynamic and compatible display content at the data attribute level, and finally publish it. Therefore, how to quickly generate front-end page components according to the user's business needs and improve the platform efficiency has become a technical problem that needs to be solved urgently. Summary of the invention

[0003] The present application provides a VLM-based H5 component generation method, device, computer equipment and storage medium, which quickly generate front-end page components according to the user's business needs, thereby improving the platform performance.

[0004] In a first aspect, the present application provides a method for generating an H5 component based on VLM, the method comprising:

[0005] Parse user needs through the pre-trained visual language model VLM to obtain component styles and component field values;

[0006] Convert the component style and the component field value into component display information and Cascading Style Sheet (CSS) style code, and determine a code object data structure according to the component display information and the CSS style code;

[0007] The target H5 component is generated and published through the preset component generation and publishing process and the code object data structure.

[0008] In a second aspect, the present application further provides a VLM-based H5 component generation device, the device comprising:

[0009] User demand parsing module, used to parse user demand through pre-trained visual language model VLM to obtain component style and component field value;

[0010] A code object data structure determination module, used for converting the component style and the component field value into component display information and Cascading Style Sheet CSS style code, and determining the code object data structure according to the component display information and the CSS style code;

[0011] The H5 component generation and publishing module is used to generate and publish the target H5 component through the preset component generation and publishing process and the code object data structure.

[0012] In a third aspect, the present application also provides a computer device, comprising a memory and a processor; the memory is used to store a computer program; the processor is used to execute the computer program and implement the above-mentioned VLM-based H5 component generation method when executing the computer program.

[0013] In a fourth aspect, the present application further provides a computer-readable storage medium storing a computer program, which, when executed by a processor, enables the processor to implement the VLM-based H5 component generation method as described above.

[0014] The present application discloses a method, device, computer equipment and storage medium for generating H5 components based on VLM. The method for generating H5 components based on VLM includes parsing user requirements through a pre-trained visual language model VLM to obtain component styles and component field values; converting the component styles and component field values ​​into component display information and cascading style sheet CSS style codes, and determining the code object data structure according to the component display information and the CSS style codes; generating and publishing target H5 components through a preset component generation and publishing process and the code object data structure. In the above manner, the present application reduces human coding errors and improves the accuracy and reliability of the code by automatically parsing user requirements and through automated processes. The automatically generated code object data structure follows preset standards and patterns, and realizes the rapid generation of front-end page components according to the user's business needs, thereby improving the platform performance. BRIEF DESCRIPTION OF THE DRAWINGS

[0015] In order to more clearly illustrate the technical solutions of the embodiments of the present application, the drawings required for use in the description of the embodiments will be briefly introduced below. Obviously, the drawings described below are some embodiments of the present application. For ordinary technicians in this field, other drawings can be obtained based on these drawings without paying any creative work.

[0016] Figure 1 is a schematic flow chart of a method for generating an H5 component based on VLM provided in the first embodiment of the present application;

[0017] Figure 2 is a schematic flow chart of a method for generating an H5 component based on VLM provided in the second embodiment of the present application;

[0018] Figure 3 A schematic block diagram of a VLM-based H5 component generation device provided in an embodiment of the present application;

[0019] Figure 4 A schematic block diagram of the structure of a computer device provided in an embodiment of the present application. DETAILED DESCRIPTION

[0020] The following will be combined with the drawings in the embodiments of the present application to clearly and completely describe the technical solutions in the embodiments of the present application. Obviously, the described embodiments are part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0021] The flowcharts shown in the accompanying drawings are only examples and do not necessarily include all the contents and operations / steps, nor must they be executed in the order described. For example, some operations / steps may also be decomposed, combined or partially merged, so the actual execution order may change according to actual conditions.

[0022] It should be understood that the terms used in this application specification are only for the purpose of describing specific embodiments and are not intended to limit the application. As used in this application specification and the appended claims, unless the context clearly indicates otherwise, the singular forms "a", "an" and "the" are intended to include plural forms.

[0023] It should also be understood that the term “and / or” used in the specification and appended claims refers to any and all possible combinations of one or more of the associated listed items, and includes these combinations.

[0024] The embodiments of the present application provide a method, device, computer equipment and storage medium for generating H5 components based on VLM. Among them, the method for generating H5 components based on VLM can be applied to a server, and reduce human coding errors and improve the accuracy and reliability of the code by automatically parsing user needs and through automated processes. The automatically generated code object data structure follows the preset standards and patterns, and realizes the rapid generation of front-end page components according to the user's business needs, thereby improving the platform performance. Among them, the server can be an independent server or a server cluster.

[0025] In conjunction with the accompanying drawings, some embodiments of the present application are described in detail below. In the absence of conflict, the following embodiments and features in the embodiments can be combined with each other.

[0026] See also Figure 1 , Figure 1 This is a schematic flow chart of a method for generating H5 components based on VLM provided in the first embodiment of the present application. The method for generating H5 components based on VLM can be applied to a server to reduce human coding errors and improve the accuracy and reliability of the code by automatically parsing user requirements and through automated processes. The automatically generated code object data structure follows the preset standards and patterns, and realizes the rapid generation of front-end page components according to the user's business needs, thereby improving the platform performance.

[0027] like Figure 1 As shown, the VLM-based H5 component generation method specifically includes steps S10 to S30.

[0028] Step S10: parse user requirements through the pre-trained visual language model VLM to obtain component style and component field values;

[0029] Specifically, this embodiment uses a VLM similar to LLVM, which can directly generate the required information based on the input pattern. In this embodiment, the VLM is pre-trained and uses RAG technology to supplement the model in combination with specific business scenarios and data fields. LLVM is a framework system for building compilers, written in C++, and is used to optimize the compile time, link time, run time, and idle time of programs written in any programming language.

[0030] The user draws the required component style on a white paper and uses the actual field values ​​to mark the display content. After completion, the user takes a photo of the drawn component and uploads it to the VLM service for recognition. The VLM service recognizes the content based on the uploaded pattern and generates the following information:

[0031] Data information displayed by the component;

[0032] Component borders, decorations, and CSS style code;

[0033] Common interaction code identifiers, combined with drawn component examples and annotations.

[0034] Step S20: convert the component style and the component field value into component display information and Cascading Style Sheet (CSS) style code, and determine a code object data structure according to the component display information and the CSS style code;

[0035] Specifically, after the VLM generation is completed, a usable component description code object data structure is generated according to the existing general component HTML (HyperText Markup Language) standard and JS file. This structure will fully identify the component framework, data mapping, and interaction. At the same time, the CSS name is proofread and the CSS style is applied.

[0036] Step S30: Generate and publish the target H5 component through the preset component generation and publishing process and the code object data structure.

[0037] Specifically, we use an automated publishing process to automatically publish the corresponding files after proofreading. The publishing process is seamless and can be used immediately after publishing. Combined with an additional large model, users are supported to input the desired page display image and a paragraph of explanatory text to generate the component properties required by the user. When configuring, users can manually fine-tune some properties again according to the display effect before use.

[0038] In one embodiment, the user draws the style of the required H5 component on a white paper according to the requirements and marks it with the actual field values. After the user completes the drawing, he / she takes a photo of the drawing and uploads it to the VLM service.

[0039] Select a pre-trained visual language model (VLM) that can understand visual and language input. The VLM receives the uploaded image, parses the component style and field value annotations drawn by the user, and extracts the component's visual style and field value information. Convert the component style parsed by the VLM into component display information, and automatically generate CSS style code based on the component style information.

[0040] According to the component display information and CSS style code, define the code object data structure, map the component's properties and styles to the code object data structure, define the component's behavior and interaction logic, and integrate them into the code object data structure.

[0041] Start the preset component generation process, which includes steps such as code compilation, testing, and deployment. Compile the code object data structure into code that can be recognized by the browser, and perform automated testing on the generated components to ensure that their functions and styles meet expectations.

[0042] The present embodiment discloses a VLM-based H5 component generation method, device, computer equipment and storage medium. The VLM-based H5 component generation method includes parsing user needs through a pre-trained visual language model VLM to obtain component styles and component field values; converting the component style and the component field values ​​into component display information and cascading style sheet CSS style code, and determining the code object data structure according to the component display information and the CSS style code; generating and publishing the target H5 component through a preset component generation and publishing process and the code object data structure. In the above manner, the present application reduces human coding errors and improves the accuracy and reliability of the code through automated parsing of user needs and automated processes. The automatically generated code object data structure follows preset standards and patterns, and realizes the rapid generation of front-end page components according to the user's business needs, thereby improving the platform performance.

[0043] based on Figure 1 In the embodiment shown, in this embodiment, step S20 includes:

[0044] Mapping the component style to the component display information through the pre-trained VLM;

[0045] The CSS style code is generated according to the preset style generation algorithm built into the pre-trained VLM, the component style and the component field value.

[0046] In one embodiment, a preset style generation algorithm built into the VLM is used, which can generate CSS code according to component styles and field values, and analyze component styles obtained from the VLM, including visual attributes such as color, font, margin, padding, border, etc.

[0047] Analyze component field values ​​to determine how to display data, such as text alignment, list style, input box size, etc. Generate corresponding CSS rules based on the analysis results. These rules define the visual style and layout of the component.

[0048] Ensure that the CSS code supports responsive design so that components can adapt to different devices and screen sizes, and optimize the generated CSS code to improve performance and maintainability, such as by merging selectors, reducing duplicate code, etc. Integrate the generated CSS code into the project, ensure that it is compatible with other style sheets, test the CSS code on different browsers and devices, ensure that the style and layout of the components are consistent, and make necessary adjustments and optimizations based on the test results to resolve any compatibility issues or performance bottlenecks.

[0049] The present embodiment discloses a method, device, computer equipment and storage medium for generating H5 components based on VLM. The method for generating H5 components based on VLM includes parsing user requirements through a pre-trained visual language model VLM to obtain component styles and component field values; mapping the component styles to the component display information through the pre-trained VLM; generating the CSS style code according to the preset style generation algorithm built into the pre-trained VLM, the component style and the component field value, and determining the code object data structure according to the component display information and the CSS style code; generating and publishing the target H5 component through the preset component generation and publishing process and the code object data structure. In the above manner, the present application significantly reduces the workload of manual coding by automatically parsing user requirements and generating component codes. The automatically generated code object data structure follows the preset standards and patterns, reduces human coding errors, makes the code easier to maintain and upgrade, improves the accuracy and reliability of the code, and realizes the rapid generation of front-end page components according to the user's business needs, thereby improving the platform efficiency.

[0050] See also Figure 2 , Figure 2 This is a schematic flow chart of a method for generating H5 components based on VLM provided in the second embodiment of the present application. The method for generating H5 components based on VLM can be applied to a server to dynamically update component styles and behaviors through an automated process, so that components can be quickly iterated based on user feedback or market changes. The automatically generated code object data structure supports multi-environment deployment, ensuring that components can run well on different platforms and devices. The simplified development process allows non-professional developers to participate in the creation of H5 components, expanding the scope of developers and realizing the rapid generation of front-end page components based on user business needs, thereby improving platform performance.

[0051] based on Figure 1 The embodiment shown, this embodiment Figure 2 As shown, step S20 includes steps S201 to S203.

[0052] Step S201: Determine component layout, component content and component interaction elements according to the component display information;

[0053] Step S202: determining component visual style and component layout rules according to the CSS style code;

[0054] Step S203: Generate the code object data structure according to the component visual style, component layout rules, component layout, component content and component interaction elements.

[0055] In one embodiment, key data is extracted from the component display information, including layout, content, and interactive elements. Based on the extracted layout information, the HTML structure of the component is defined, including necessary containers, rows, columns, etc. The content elements in the component, such as text, images, lists, etc., are determined and marked at corresponding positions in the HTML structure. The interactive elements in the component, such as buttons, links, form inputs, etc., are identified and defined, and marked in the HTML structure.

[0056] Extract visual styles and layout rules from CSS style codes, apply the extracted style rules to the corresponding elements in the HTML structure, ensure that the style of each element is correct, and ensure that the CSS style code contains responsive design rules so that components can adapt to different devices and screen sizes.

[0057] According to the type and function of the component, create a code object data structure template, integrate all the filled information to form a complete code object data structure, which represents the complete definition of the component, and verify whether the generated code object data structure meets the expected functional and style requirements to ensure that there are no omissions or errors.

[0058] The present embodiment discloses a VLM-based H5 component generation method, device, computer equipment and storage medium. The VLM-based H5 component generation method includes parsing user needs through a pre-trained visual language model VLM to obtain component style and component field values; mapping the component style to the component display information through the pre-trained VLM; generating the CSS style code according to the preset style generation algorithm built into the pre-trained VLM, the component style and the component field value, and determining the component layout, component content and component interaction elements according to the component display information; determining the component visual style and component layout rules according to the CSS style code; generating the code object data structure according to the component visual style, component layout rules, component layout, component content and component interaction elements; generating and publishing the target H5 component through the preset component generation and publishing process and the code object data structure. Through the above method, this application realizes dynamic update of component style and behavior through automated process, so that components can be quickly iterated according to user feedback or market changes. The automatically generated code object data structure supports multi-environment deployment, ensuring that components can run well on different platforms and devices. The simplified development process enables non-professional developers to participate in the creation of H5 components, expands the scope of developers, and realizes the rapid generation of front-end page components according to user business needs, thereby improving platform efficiency.

[0059] based on Figure 1 In the embodiment shown, in this embodiment, step S30 includes:

[0060] Receiving the code object data structure, and parsing the code object structure data through the component generation sub-process to generate the target H5 component;

[0061] The CSS style code of the target H5 component is compiled through the component publishing sub-process, and the target H5 component is published.

[0062] Specifically, obtain the code object data structure from the development environment or version control system, and ensure that the code object data structure contains all necessary information, such as component layout, content, interactive elements, and style codes.

[0063] The parsed code object data structure includes the following:

[0064] Loading data structure: loading the code object data structure into the component generation subprocess;

[0065] Parsing layout information: Parsing the layout information in the code object data structure to determine the HTML structure of the component;

[0066] Parsing content information: Parsing the content information in the code object data structure to determine the specific content of the component, such as text and images;

[0067] Parsing interaction information: Parsing the interaction element information in the code object data structure to determine the interaction logic of the component;

[0068] Parse style information: Parse the CSS style code in the code object data structure to determine the visual style of the component.

[0069] In a more preferred embodiment, the code object structure data is parsed through the component generation sub-process to generate the target H5 component, including:

[0070] Parsing the code object structure data to generate component behavior, component attributes and the component style;

[0071] Generate the hypertext markup language HTML of the target H5 component according to the component attributes and the component style;

[0072] Generate JS code according to the component behavior;

[0073] The CSS style code, the HTML and the JS code are encapsulated to generate the target H5 component.

[0074] Specifically, generate the component's HTML code based on the parsed layout and content information, generate the component's CSS code based on the parsed style information, and generate the corresponding JavaScript code if the component contains interactive logic. Integrate HTML, CSS, and JavaScript code into a complete H5 component, and test the generated H5 component in the local development environment to ensure that its functions and styles meet expectations. Select a suitable CSS compilation tool, such as Sass, Less, or PostCSS. Use the compilation tool to preprocess the CSS code, add variables, nested rules, mixins and other functions, optimize the preprocessed CSS code, such as compression, merging selectors, reducing duplicate code, etc., generate the optimized final CSS code, and ensure that it performs consistently on different browsers and devices.

[0075] In a more preferred embodiment, compiling the CSS style code of the target H5 component through the component publishing sub-process and publishing the target H5 component includes:

[0076] Verify the CSS style code through the component publishing sub-process;

[0077] When the CSS style code passes the verification, the CSS style code is transpiled into a standard format code, and the standard format code is published to a preset server.

[0078] Specifically, ensure that the publishing environment (such as a server or content distribution network) is ready, deploy the generated H5 component code to the publishing environment, perform version control on the published components, record the publishing history and changes, and monitor the performance of the components after release, such as loading time and response speed.

[0079] Based on any of the above embodiments, in this embodiment, before step S10, the following steps are included:

[0080] Obtain historical demand training set and historical demand verification set;

[0081] Determine an initial VLM, and extract visual training set features and text training set features in the historical demand training set through the initial VLM;

[0082] Fusing the visual training set features with the text training set features to generate training set fusion features, and determining a preset loss function through the initial VLM and the training set fusion features;

[0083] The initial VLM is adjusted by using the preset loss function and the historical demand verification set to determine the pre-trained VLM.

[0084] Specifically, historical demand data is collected, including relevant images and text information, and the collected data is divided into training sets and validation sets. Usually, the data in the training sets and validation sets are cleaned and preprocessed in a certain ratio to ensure data quality.

[0085] The images in the training set are processed using the initial VLM to extract visual training set features, and the texts in the training set are processed using the initial VLM to extract text training set features.

[0086] The extracted visual training set features and text training set features are fused to generate training set fusion features. The appropriate loss function is determined according to user needs, such as cross entropy loss for classification tasks and mean square error loss for regression tasks. The preset loss function is determined by the initial VLM and training set fusion features to prepare for model training.

[0087] Set the initial hyperparameters, such as learning rate, batch size, number of training rounds, etc., and train the initial VLM using the training set data and the preset loss function. Use the validation set data to evaluate the model performance, adjust the hyperparameters to optimize the model performance, and determine the final hyperparameter settings after the last iteration.

[0088] See also Figure 3 , Figure 3The embodiment of the present application provides a schematic block diagram of a VLM-based H5 component generation device, which is used to execute the aforementioned VLM-based H5 component generation method. The VLM-based H5 component generation device can be configured on a server.

[0089] like Figure 3 As shown, the VLM-based H5 component generation device 400 includes:

[0090] A user requirement parsing module 410 is used to parse user requirements through a pre-trained visual language model VLM to obtain component styles and component field values;

[0091] A code object data structure determination module 420 is used to convert the component style and the component field value into component display information and Cascading Style Sheet CSS style code, and determine the code object data structure according to the component display information and the CSS style code;

[0092] The H5 component generation and publishing module 430 is used to generate and publish the target H5 component through the preset component generation and publishing process and the code object data structure.

[0093] Furthermore, the code object data structure determination module includes:

[0094] a component display information determining unit, configured to map the component style to the component display information through the pre-trained VLM;

[0095] A CSS style code generating unit is used to generate the CSS style code according to a preset style generating algorithm built into the pre-trained VLM, the component style and the component field value.

[0096] Furthermore, the code object data structure determination module further includes:

[0097] A component display information parsing unit, used to determine component layout, component content and component interaction elements according to the component display information;

[0098] A component visual and layout determination unit, used to determine a component visual style and a component layout rule according to the CSS style code;

[0099] The code object data structure generating unit is used to generate the code object data structure according to the component visual style, component layout rules, component layout, component content and component interaction elements.

[0100] Furthermore, the H5 component generates a publishing module 430, including:

[0101] A target H5 component generation unit, used for receiving the code object data structure, parsing the code object structure data through the component generation sub-process, and generating the target H5 component;

[0102] The target H5 component publishing unit is used to compile the CSS style code of the target H5 component through the component publishing sub-process and publish the target H5 component.

[0103] Furthermore, the target H5 component generation unit includes:

[0104] A code object structure data parsing subunit, used for parsing the code object structure data to generate component behavior, component attributes and the component style;

[0105] An HTML generation subunit is used to generate a hypertext markup language HTML of the target H5 component according to the component attributes and the component style;

[0106] A JS code generation subunit, used to generate JS code according to the component behavior;

[0107] The target H5 component generating unit is used to encapsulate the CSS style code, the HTML and the JS code to generate the target H5 component.

[0108] Furthermore, the target H5 component publishing unit includes:

[0109] A CSS style code verification subunit, used to verify the CSS style code through the component publishing subprocess;

[0110] The target H5 component publishing sub-unit is used to compile the CSS style code into a standard format code when the CSS style code passes the verification, and publish the standard format code to a preset server.

[0111] Furthermore, the VLM-based H5 component generation device further includes:

[0112] A historical data acquisition module is used to obtain a historical demand training set and a historical demand verification set;

[0113] A training set feature extraction module, used to determine an initial VLM, and extract visual training set features and text training set features in the historical demand training set through the initial VLM;

[0114] A loss function determination module, used for performing feature fusion of the visual training set features and the text training set features to generate training set fusion features, and determining a preset loss function through the initial VLM and the training set fusion features;

[0115] The pre-trained VLM generation module is used to adjust the parameters of the initial VLM through the preset loss function and the historical demand verification set to determine the pre-trained VLM.

[0116] It should be noted that those skilled in the art can clearly understand that, for the convenience and brevity of description, the specific working process of the above-described device and each module can refer to the corresponding process in the aforementioned method embodiment, and will not be repeated here.

[0117] The above-mentioned device can be implemented in the form of a computer program. Figure 4 Runs on the computer device shown.

[0118] See also Figure 4 , Figure 4 1 is a schematic block diagram of a computer device provided in an embodiment of the present application. The computer device may be a server.

[0119] See also Figure 4 The computer device includes a processor, a memory and a network interface connected through a system bus, wherein the memory may include a non-volatile storage medium and an internal memory.

[0120] The non-volatile storage medium can store an operating system and a computer program. The computer program includes program instructions, and when the program instructions are executed, the processor can execute any VLM-based H5 component generation method.

[0121] The processor is used to provide computing and control capabilities and support the operation of the entire computer equipment.

[0122] The internal memory provides an environment for the operation of the computer program in the non-volatile storage medium. When the computer program is executed by the processor, the processor can execute any VLM-based H5 component generation method.

[0123] The network interface is used for network communication, such as sending assigned tasks, etc. Those skilled in the art will understand that Figure 4 The structure shown in the figure is only a block diagram of a part of the structure related to the solution of the present application, and does not constitute a limitation on the computer device to which the solution of the present application is applied. The specific computer device may include more or fewer components than those shown in the figure, or combine certain components, or have a different arrangement of components.

[0124] It should be understood that the processor may be a central processing unit (CPU), and the processor may also be other general-purpose processors, digital signal processors (DSP), application-specific integrated circuits (ASIC), field-programmable gate arrays (FPGA) or other programmable logic devices, discrete gate or transistor logic devices, discrete hardware components, etc. Among them, the general-purpose processor may be a microprocessor or the processor may also be any conventional processor, etc.

[0125] In one embodiment, the processor is used to run a computer program stored in the memory to implement the following steps:

[0126] Parse user needs through the pre-trained visual language model VLM to obtain component styles and component field values;

[0127] Convert the component style and the component field value into component display information and Cascading Style Sheet (CSS) style code, and determine a code object data structure according to the component display information and the CSS style code;

[0128] The target H5 component is generated and published through the preset component generation and publishing process and the code object data structure.

[0129] In one embodiment, the component style and the component field value are converted into component display information and Cascading Style Sheet (CSS) style code to achieve:

[0130] Mapping the component style to the component display information through the pre-trained VLM;

[0131] The CSS style code is generated according to the preset style generation algorithm built into the pre-trained VLM, the component style and the component field value.

[0132] In one embodiment, a code object data structure is determined according to the component display information and the CSS style code to implement:

[0133] Determine component layout, component content and component interaction elements according to the component display information;

[0134] Determine component visual style and component layout rules according to the CSS style code;

[0135] The code object data structure is generated according to the component visual style, component layout rules, component layout, component content and component interaction elements.

[0136] In one embodiment, the target H5 component is generated and published by presetting the component generation and publishing process and the code object data structure, so as to achieve:

[0137] Receiving the code object data structure, and parsing the code object structure data through the component generation sub-process to generate the target H5 component;

[0138] The CSS style code of the target H5 component is compiled through the component publishing sub-process, and the target H5 component is published.

[0139] In one embodiment, the code object structure data is parsed through the component generation sub-process to generate the target H5 component, which is used to implement:

[0140] Parsing the code object structure data to generate component behavior, component attributes and the component style;

[0141] Generate the hypertext markup language HTML of the target H5 component according to the component attributes and the component style;

[0142] Generate JS code according to the component behavior;

[0143] The CSS style code, the HTML and the JS code are encapsulated to generate the target H5 component.

[0144] In one embodiment, the CSS style code of the target H5 component is compiled through the component publishing sub-process, and the target H5 component is published, so as to achieve:

[0145] Verify the CSS style code through the component publishing sub-process;

[0146] When the CSS style code passes the verification, the CSS style code is transpiled into a standard format code, and the standard format code is published to a preset server.

[0147] In one embodiment, the user requirements are parsed by a pre-trained visual language model VLM, and before obtaining the component style and component field value, it is used to implement:

[0148] Obtain historical demand training set and historical demand verification set;

[0149] Determine an initial VLM, and extract visual training set features and text training set features in the historical demand training set through the initial VLM;

[0150] Fusing the visual training set features with the text training set features to generate training set fusion features, and determining a preset loss function through the initial VLM and the training set fusion features;

[0151] The initial VLM is adjusted by using the preset loss function and the historical demand verification set to determine the pre-trained VLM.

[0152] A computer-readable storage medium is also provided in an embodiment of the present application, wherein the computer-readable storage medium stores a computer program, wherein the computer program includes program instructions, and the processor executes the program instructions to implement any VLM-based H5 component generation method provided in the embodiment of the present application.

[0153] The computer-readable storage medium may be an internal storage unit of the computer device described in the foregoing embodiment, such as a hard disk or memory of the computer device. The computer-readable storage medium may also be an external storage device of the computer device, such as a plug-in hard disk, a smart memory card (Smart Medi a Card, SMC), a secure digital (Secure Digital, SD) card, a flash memory card (Flash Card), etc., equipped on the computer device.

[0154] The above is only a specific implementation of the present application, but the protection scope of the present application is not limited thereto. Any technician familiar with the technical field can easily think of various equivalent modifications or replacements within the technical scope disclosed in the present application, and these modifications or replacements should be included in the protection scope of the present application. Therefore, the protection scope of the present application shall be based on the protection scope of the claims.

Claims

1. A method for generating H5 components based on VLM, characterized in that: include: Parse user needs through the pre-trained visual language model VLM to obtain component styles and component field values; Convert the component style and the component field value into component display information and Cascading Style Sheet (CSS) style code, and determine a code object data structure according to the component display information and the CSS style code; The target H5 component is generated and published through the preset component generation and publishing process and the code object data structure.

2. The method for generating H5 components based on VLM according to claim 1, characterized in that: The converting the component style and the component field value into component display information and Cascading Style Sheet (CSS) style code includes: Mapping the component style to the component display information through the pre-trained VLM; The CSS style code is generated according to the preset style generation algorithm built into the pre-trained VLM, the component style and the component field value.

3. The method for generating H5 components based on VLM according to claim 2, characterized in that: The determining of the code object data structure according to the component display information and the CSS style code includes: Determine component layout, component content and component interaction elements according to the component display information; Determine component visual style and component layout rules according to the CSS style code; The code object data structure is generated according to the component visual style, component layout rules, component layout, component content and component interaction elements.

4. The method for generating H5 components based on VLM according to claim 1, characterized in that: The preset component generation and release process includes a component generation sub-process and a component release sub-process. The preset component generation and release process and the code object data structure are used to generate and release the target H5 component, including: Receiving the code object data structure, and parsing the code object structure data through the component generation sub-process to generate the target H5 component; The CSS style code of the target H5 component is compiled through the component publishing sub-process, and the target H5 component is published.

5. The method for generating H5 components based on VLM according to claim 4, characterized in that: The step of parsing the code object structure data through the component generation sub-process to generate the target H5 component includes: Parsing the code object structure data to generate component behavior, component attributes and the component style; Generate the hypertext markup language HTML of the target H5 component according to the component attributes and the component style; Generate JS code according to the component behavior; The CSS style code, the HTML and the JS code are encapsulated to generate the target H5 component.

6. The method for generating H5 components based on VLM according to claim 4, characterized in that: The step of compiling the CSS style code of the target H5 component through the component publishing sub-process and publishing the target H5 component includes: Verify the CSS style code through the component publishing sub-process; When the CSS style code passes the verification, the CSS style code is transpiled into a standard format code, and the standard format code is published to a preset server.

7. The method for generating H5 components based on VLM according to any one of claims 1 to 6, characterized in that: Before parsing user requirements through the pre-trained visual language model VLM and obtaining component styles and component field values, the following steps are included: Obtain historical demand training set and historical demand verification set; Determine an initial VLM, and extract visual training set features and text training set features in the historical demand training set through the initial VLM; Fusing the visual training set features with the text training set features to generate training set fusion features, and determining a preset loss function through the initial VLM and the training set fusion features; The initial VLM is adjusted by using the preset loss function and the historical demand verification set to determine the pre-trained VLM.

8. A VLM-based H5 component generation device, characterized in that: include: User demand parsing module, used to parse user demand through pre-trained visual language model VLM to obtain component style and component field value; A code object data structure determination module, used for converting the component style and the component field value into component display information and Cascading Style Sheet CSS style code, and determining the code object data structure according to the component display information and the CSS style code; The H5 component generation and publishing module is used to generate and publish the target H5 component through the preset component generation and publishing process and the code object data structure.

9. A computer device, characterized in that: The computer device includes a memory and a processor; The memory is used to store computer programs; The processor is used to execute the computer program and implement the VLM-based H5 component generation method as described in any one of claims 1 to 7 when executing the computer program.

10. A computer-readable storage medium, characterized in that: The computer-readable storage medium stores a computer program, and when the computer program is executed by a processor, the processor implements the VLM-based H5 component generation method according to any one of claims 1 to 7.

Images