Electronic certificate efficient generation method and system based on AI

Abstract

The method comprises the following steps: creating an electronic certificate component and a React rendering component by utilizing a JSX declaration, constructing a virtual DOM node tree and a real DOM node tree according to the React rendering component, and rendering the electronic certificate according to the real DOM node tree; the method comprises the following steps: pre-constructing an AI background generation model, inputting a cue word text, generating a background image by the AI background generation model according to the cue word text, and transmitting the background image to an electronic certificate editing interface; a dynamically updated electronic certificate information list is constructed according to the electronic certificate component, the electronic certificate information list comprises different types of field information used for updating, and the electronic certificate information list comprises unique identifiers of the different types of field information; and dynamically updating the virtual DOM node tree according to the electronic certificate information list, converting part of updated DOM nodes into real DOM nodes, and rendering the electronic certificate.

Description

Technical Field

[0001] The present invention relates to the technical field of electronic certificate generation, and in particular to an AI-based efficient electronic certificate generation method and system. Background Art

[0002] The traditional method of producing electronic certificates in the existing technology is mainly to use software including Microsoft Word and Photoshop for manual production. The production method mainly involves setting a background pattern in the created blank document, adding fixed text and reserving blank areas as the electronic certificate template file, and further adding certificate winner information and award type in the blank areas of the electronic certificate template file. The above-mentioned traditional electronic certificate production method has a single function, lacks flexibility and intelligent support, and cannot meet the personalized needs of different event organizers. The existing technology usually only provides fixed templates, cannot be customized according to user needs, and lacks intelligent background image generation functions. In addition, the large number of manual operations also increases the cost of certificate production, and repeated rendering reduces rendering efficiency, especially for electronic certificates produced in batches, which is time-consuming and labor-intensive. Summary of the Invention

[0003] According to the present invention, one of the invention objectives is to provide an AI-based method and system for efficiently generating electronic certificates. The method and system provide a virtual DOM technology based on the React framework for rendering the electronic certificate. During the rendering process, the unique identifier key in the virtual DOM node is identified and located by the diff algorithm, and the DOM node rendering method is further optimized. The diff algorithm can be used to reuse DOM nodes in the certificate area and content rendering process to determine which areas and contents do not need to be repeatedly rendered, thereby greatly improving the rendering performance of the electronic certificate and improving the efficiency of batch electronic certificate production.

[0004] According to another invention object of the present invention, it is to provide an AI-based efficient electronic certificate generation method and system, wherein the method and system utilize a trained AI model as the background image generation model of the electronic certificate, wherein the present invention can automatically generate the electronic certificate background image by including but not limited to the StyleGAN model or the Neural Style Transfer model, and the user can automatically generate the electronic certificate background image through the above-mentioned model by inputting relevant prompt words according to the type of electronic certificate, and transmit the electronic certificate background image back to the editing interface of the electronic certificate through the API and render and display it using the rendering component declared by JSX, so that the present invention can perform efficient personalized rendering for the electronic certificate.

[0005] According to another invention object of the present invention, it is to provide an AI-based efficient method and system for generating electronic certificates. During the user editing process, the method and system are driven by native onMouseDown, onMouseMove and onMouseUp events, so that the user can freely drag the field content or image content to be rendered in the editing interface of the electronic certificate, so that the user can arbitrarily change the position of the field content or image content on the editing page, thereby improving the flexibility of the electronic certificate editing function.

[0006] Another object of the present invention is to provide an AI-based method and system for efficiently generating electronic certificates. The method and system have dynamic field adding functions and perform API feedback through dynamic field library tables. For electronic certificates of the same type, efficient, intelligent and personalized editing effects can be achieved.

[0007] In order to achieve at least one of the above-mentioned objectives, the present invention further provides an AI-based method for efficiently generating electronic certificates, the method comprising the following steps: Using JSX declarations to create an electronic certificate component and a React rendering component, constructing a virtual DOM node tree and a real DOM node tree based on the React rendering component, and rendering the electronic certificate based on the real DOM node tree; Pre-building an AI background generation model, inputting a prompt word text into the AI ​​background generation model, the AI ​​background generation model generating a background image based on the prompt word text, and transferring the background image to the electronic certificate editing interface; Constructing a dynamically updated electronic certificate information list according to the electronic certificate component, wherein the electronic certificate information list includes different types of field information for updating, and the electronic certificate information list includes unique identifiers of the different types of field information; The virtual DOM node tree is dynamically updated according to the electronic certificate information list, and some DOM nodes in the updated virtual DOM node tree are converted into real DOM nodes and the electronic certificate is rendered.

[0008] According to one of the preferred embodiments of the present invention, the electronic certificate component declares field information including the competition name, organization logo, winner's name, ranking, time, issuing organization and electronic seal based on the electronic certificate content, and automatically fills the declared field information and field elements of the corresponding field information into the electronic certificate information list, wherein each type of field information in the declaration is pre-configured with a unique identification key, and the React object of the virtual DOM node tree and the real DOM node tree is constructed according to the field information corresponding to the unique identification key and the React rendering component, wherein the React object includes the DOM node type, DOM node attribute, DOM node unique identification key and DOM node reference, wherein the DOM node unique identification key is the same as the unique identification key pre-set in the electronic certificate information list.

[0009] According to another preferred embodiment of the present invention, the DOM node types include element nodes, text nodes, document nodes and comment nodes, wherein the element node among the DOM node types is the root node, which is used to describe the tag of the HTML page, the text node is used to describe the text content of the DOM node and is used to provide editable input text, the document node provides an XML document entry for accessing XML documents and other nodes, and the comment node is used to provide the comment content of the HTML page; wherein the XML document entry provided by the document node is connected to the electronic certificate information list, which is used to access different field information in the electronic certificate information list, access other nodes by declaring the document node attributes, and update different nodes of the virtual DOM node tree in real time.

[0010] According to another preferred embodiment of the present invention, the AI ​​background generation model includes a pre-trained StyleGAN model or a Neural Style Transfer model, and constructs an API interface of the AI ​​background generation model, wherein the URL mapping address of the API interface is set to the electronic certificate editing interface; after the AI ​​background generation model generates a corresponding background image according to the input prompt word, the background image is transmitted to the electronic certificate editing interface through the API interface, and is used as the background image of the electronic certificate editing interface by embedding the picture.

[0011] According to another preferred embodiment of the present invention, the electronic certificate information list that has not been updated is defined as the first electronic certificate information list, and the electronic certificate information list after being updated is defined as the second electronic certificate information list. All field information and unique identification keys of corresponding fields in the second electronic certificate information list are traversed, and the unique identification keys of all fields in the second electronic certificate information list are compared with all unique identification keys in the first electronic certificate information list. If, after the comparison, there are n unique identification keys in the second electronic certificate information list that do not appear in the first electronic certificate information list, a new node is created in the original virtual DOM node tree; if, after the comparison, there are m unique identification keys in the first electronic certificate information list that do not appear in the second electronic certificate information list, the corresponding DOM node is deleted from the original virtual DOM node tree.

[0012] According to another preferred embodiment of the present invention, when the unique identification key of the corresponding field in the second electronic certificate information list is the same as the corresponding unique identification key in the first electronic certificate information list, but the levels or DOM node types in the original virtual DOM node tree are different, the corresponding DOM node is moved to the corresponding level node in the original virtual DOM node tree with the minimum number of steps, or the type of the DOM node corresponding to the same unique identification key is directly changed in the original virtual DOM node tree.

[0013] When the unique identification key of the corresponding field in the second electronic certificate information list is the same as the corresponding unique identification key in the first electronic certificate information list, and the corresponding DOM node levels and DOM node types are the same, further determine whether the corresponding DOM node attributes are the same. If the attributes are different, directly reuse the corresponding DOM node in the original virtual DOM node tree, and only update the attributes of the corresponding DOM node.

[0014] According to another preferred embodiment of the present invention, an updated virtual DOM node tree is defined as a first virtual DOM node. After the original virtual DOM node tree is dynamically updated to obtain the first virtual DOM node, the first virtual DOM node tree is compared with the original virtual DOM node tree, and a patch instruction is generated based on the difference. The patch instruction is used by the renderer to complete the rendering operation of the updated portion.

[0015] According to another preferred embodiment of the present invention, a mouse track monitor is declared, and the current mouse position data is obtained through the mouse track monitor; a dynamically movable virtual DOM node tree is constructed based on the current mouse position data, which is used to dynamically render the rendering block at the current mouse position, and the virtual DOM node tree of the current rendering block is further transferred and reused using the reused delivery component Render Props, and the dragging and layout of the corresponding rendering block are driven by the mouse's native onMouseDown, onMouseMove, and onMouseUp events.

[0016] In order to achieve at least one of the above-mentioned invention purposes, the present invention further provides an AI-based efficient electronic certificate generation system, which executes the above-mentioned AI-based efficient electronic certificate generation method.

[0017] The present invention further provides a computer-readable storage medium, which stores a computer program, and the computer program is executed by a processor to implement the above-mentioned AI-based efficient electronic certificate generation method. BRIEF DESCRIPTION OF THE DRAWINGS

[0018] Figure 1 Shown is a flow chart of an efficient method for generating electronic certificates based on AI according to the present invention. DETAILED DESCRIPTION

[0019] The following description is intended to disclose the present invention so that those skilled in the art can implement the present invention. The preferred embodiments described below are for illustrative purposes only, and those skilled in the art will readily appreciate other obvious variations. The basic principles of the present invention defined in the following description may be applied to other embodiments, variations, improvements, equivalents, and other technical solutions that do not depart from the spirit and scope of the present invention.

[0020] It is to be understood that the term "one" should be understood as "at least one" or "one or more", that is, in one embodiment, the number of an element may be one, while in another embodiment, the number of the elements may be multiple, and the term "one" should not be understood as a limitation on the quantity.

[0021] Please combine Figure 1 The present invention discloses an AI-based efficient electronic certificate generation method and system, wherein the method mainly comprises the following steps: S01. Create an electronic certificate component and a React rendering component using a JSX declaration, construct a virtual DOM node tree and a real DOM node tree based on the React rendering component, and render the electronic certificate based on the real DOM node tree; S02 pre-built AI background generation model, the AI ​​background generation model input prompt word text, the AI ​​background generation model generates a background image based on the prompt word text, and the background image is passed to the electronic certificate editing interface; S03. A dynamically updated electronic certificate information list is constructed based on the electronic certificate component, wherein the electronic certificate information list includes different types of field information for updating, and the electronic certificate information list includes a unique identifier for the different types of field information; S04. Dynamically update the virtual DOM node tree according to the electronic certificate information list, convert some DOM nodes in the updated virtual DOM node tree into real DOM nodes, and render the electronic certificate.

[0022] It should be noted that the aforementioned JSX is JavaScript XML, a syntax extension for describing UIs in React. Through the declaration of the JSX syntax, different DOM objects can be compiled into JavaScript code, which ultimately drives React's DOM node tree and renderer to perform rendering operations. It should be noted that in order to reduce the number of times the electronic certificate is rendered and reduce the rendering performance loss during the electronic certificate generation process, the present invention performs pre-operations on the DOM nodes by constructing a virtual DOM node deployed in memory and constructing an electronic certificate information list XML. The virtual DOM node, as a lightweight JavaScript object, can be used to describe changes in real DOM nodes. The virtual DOM node can be partially updated by comparing the old and new virtual DOM node trees, and the final locally updated part is converted into a DOM patch instruction to dynamically update the real DOM node. Because the update of the virtual DOM node tree is abstracted in memory, the virtual DOM node tree does not actually consume renderer resources during the update process. Furthermore, the comparison of the old and new virtual DOM node trees minimizes DOM operations by including a diff algorithm, which can significantly reduce rendering performance loss and improve rendering efficiency. In one of the preferred embodiments of the present invention, React can be used to reuse logic for virtual DOM nodes of the same type and with the same unique identifier key. In particular, in mouse-selected drag and layout events, the reuse logic of the virtual DOM nodes can be used to reduce the lag caused by repeated rendering in drag and layout events, improve rendering efficiency, and also increase the flexibility of electronic certificate editing. It should be noted that the method for minimizing the number of steps to move the corresponding DOM node to the corresponding level node includes: recording the number of steps of the DOM node on different movement paths of the virtual DOM node, selecting the path with the minimum number of steps to generate relevant patch instructions to be executed in the real DOM node number.

[0023] Furthermore, in order to enhance the personalization of the electronic certificate function selection, the present invention also provides a method for creating personalized background images based on an AI background image generation model. The background image generated by the AI ​​background image generation model is transmitted back to the electronic certificate editing interface and embedded into the underlying layer as a background image, thereby significantly improving the aesthetics and personalization of the electronic certificate interface. At the same time, the above-mentioned automatic generation and embedding of AI background images significantly improves the efficiency of electronic certificate editing compared to traditional background image pre-editing methods, enabling efficient, batch, and personalized electronic certificate production.

[0024] Specifically, the method for constructing an electronic certificate component described in the present invention includes: inputting an electronic certificate construction template, declaring the electronic certificate's structural layout parameters, including the electronic certificate's position, length, width, height, margins, and shadows, using JSX. These electronic certificate layout parameters can be declared using constants (consts), and further establishing an electronic certificate information list. The electronic certificate information list records field information including, but not limited to, competition name, organization logo, winner's name, ranking, time, issuing organization, and electronic seal. These field information maps are matched with corresponding field elements that describe the content of the current field information. The field information can be obtained through pre-editing, and the field elements mapped to the field information can be automatically collected by software. For example, if the field information is "competition name," the field element mapped to the "competition name" field information can be "2025 XXX Marathon." These field elements can be obtained through active entry or automatically filled in by software recognition. This invention will not be further described in detail. It should be noted that the electronic certificate information list contains a URL address referenced by the electronic certificate component. The electronic certificate information list can be set as an XML document. The electronic certificate component can dynamically update the field information of the electronic certificate editing interface and the field elements matched by the field information mapping through the referenced URL address.

[0025] The method for constructing the React rendering component in the present invention includes the following steps: rendering based on the DOM object, wherein if newly created content needs to be rendered, the newly created content is declared using JSX, and React.createElement() is called on the declared content through the Babel compiler to generate a virtual DOM object. The virtual DOM object acts as a rendering component to update the real DOM object according to certain rules to complete the rendering operation.

[0026] The construction method of the React rendering component also includes conditional rendering and list rendering, wherein the conditional rendering method includes: constructing a ternary operator according to the rendering condition, wherein the ternary operator is used to set the conditional formula for rendering, and if the corresponding field type and field element in the electronic certificate information list meet the rendered conditional formula, the first rendering method is executed, otherwise the second rendering method is executed. For example, in order to highlight the name of the winner, the conditional formula for the rendering exemplified in the present invention is: when the field information is the name of the winner, the field element mapped by the field information is rendered in gold, otherwise the field element mapped by the corresponding field information is rendered in black. The name of the winner that can be obtained at this time: "XXX" is rendered in gold font, and other font colors are all black.

[0027] The list rendering method includes the following steps: dynamically obtaining the field information and corresponding field elements in the electronic certificate information list according to the referenced URL address. It should be noted that each field information is set with a unique identification key, and the unique identification key can be used to optimize subsequent DOM node operations. The field information in the electronic certificate information list can be set as a hierarchical structure, so a tree structure can be constructed for the field information in the electronic certificate information list. For example: a tree-like field information structure includes a tree structure that is progressively reduced in layers such as school, grade, and class, but each of the above field information belongs to the same category of field information. The field information of the above hierarchical tree structure can be traversed through the map() method to obtain the field information and corresponding field elements in the electronic certificate information list and return them.

[0028] Furthermore, when the map() method is used in the present invention to obtain the field information and corresponding field elements in the electronic certificate information list, each field information can be further declared, and the Babel compiler can be used to call React.createElement() on each declared field information to generate a virtual DOM node. Since the different field information has a hierarchical relationship in the electronic certificate information, the virtual DOM node can be constructed as a virtual DOM node tree. During the construction of the initialized virtual DOM node tree, the virtual DOM node tree is placed in ordinary memory, and the initialized virtual DOM node tree is used to create a real DOM node tree and manage it through a rendering engine (such as Blink, Gecko, WebKit). It should be noted that each declared field information can be considered as a virtual DOM node, wherein the element corresponding to the field information can be declared as an attribute of the virtual DOM node, and the declared virtual DOM node can be divided into different types of virtual DOM nodes according to the corresponding field information type. The DOM node types include element nodes, text nodes, document nodes and comment nodes. The element node among the DOM node types is the root node, which is used to describe the tag of the HTML page. The text node is used to describe the text content of the DOM node and is used to provide editable input text. The document node provides an XML document entry for accessing XML documents and other nodes. The comment node is used to provide the comment content of the HTML page. The XML document entry provided by the document node is connected to the electronic certificate information list, which is used to access different field information in the electronic certificate information list. Other nodes are accessed by declaring the document node attributes, and different nodes of the virtual DOM node tree are updated in real time.

[0029] The AI ​​background generation model includes a pre-trained StyleGAN model or Neural Style Transfer model, and an API interface for the AI ​​background generation model is constructed. The API interface can be implemented via a REST API (application programming interface). The REST API transmits the background image generated by the StyleGAN model or Neural Style Transfer model via JSON, wherein the URL mapping address of the REST API interface is set to the electronic certificate editing interface. After the AI ​​background generation model generates a corresponding background image based on the input prompt word, the background image is transmitted to the electronic certificate editing interface via the REST API interface and is used as the background image of the electronic certificate editing interface by image embedding. It should be noted that the StyleGAN model or Neural Style Transfer model in the present invention is a style transfer model. The StyleGAN model itself has a style control mechanism for controlling the generation of global image attributes, such as the overall pattern framework of the background image, and local image attributes, such as the local color and texture of the background image. In other words, the StyleGAN model can automatically generate an abstract artistic image as a background image based on the input category label and attributes. The StyleGAN model described above is prior art and will not be described in detail in this article. Similarly, the Neural Style Transfer model can map text prompts to an image space of corresponding style by introducing a multimodal text-image mapping model. These methods can all be implemented using prior art, and the multimodal mapping method described in this invention will not be described in detail.

[0030] Furthermore, to better illustrate the effect of updating the electronic certificate information list on the virtual DOM node tree and the implementation logic of the diff algorithm, the present invention defines the following: the unupdated electronic certificate information list is defined as the first electronic certificate information list, and the updated electronic certificate information list is defined as the second electronic certificate information list. The corresponding field information and field elements in the second electronic certificate information list can be filled manually or automatically, and each field element in the first and second electronic certificate information lists is pre-assigned a stable, unchangeable key. All field information and corresponding unique identification keys in the second electronic certificate information list are traversed, and the unique identification keys of all fields in the second electronic certificate information list are compared with all unique identification keys in the first electronic certificate information list. If, after the comparison, n unique identification keys in the second electronic certificate information list do not appear in the first electronic certificate information list, a new node is created in the original virtual DOM node tree. If, after the comparison, m unique identification keys in the first electronic certificate information list do not appear in the second electronic certificate information list, the corresponding DOM node is deleted from the original virtual DOM node tree. The update of the virtual DOM node tree can be implemented using a DOM patch instruction.

[0031] When the unique identification key of the corresponding field in the second electronic certificate information list is the same as the corresponding unique identification key in the first electronic certificate information list, but the levels or DOM node types in the original virtual DOM node tree are different, the corresponding DOM node is moved to the corresponding level node in the original virtual DOM node tree by minimizing the number of steps, or the type of the DOM node corresponding to the same unique identification key is directly changed in the original virtual DOM node tree. When the unique identification key of the corresponding field in the second electronic certificate information list is the same as the corresponding unique identification key in the first electronic certificate information list, and the corresponding DOM node levels and DOM node types are the same, further determination is made as to whether the corresponding DOM node attributes are the same. If the attributes are different, the corresponding DOM node in the original virtual DOM node tree is directly reused, and only the attributes of the corresponding DOM node are updated.

[0032] According to another preferred embodiment of the present invention, the updated virtual DOM node tree is defined as the first virtual DOM node. After the original virtual DOM node tree is dynamically updated to obtain the first virtual DOM node, the difference between the first virtual DOM node tree and the original virtual DOM node tree is compared, and a patch instruction is generated based on the difference. The patch instruction is sent to the real DOM node tree in the browser memory, and the patch instruction completes the rendering operation of the updated part through the renderer. The patch instruction types include: CREATE: Create a new node in the real DOM node tree and insert it into the specified position; UPDATE: Update the attributes, style, and content of the corresponding node in the real node tree; MOVE: Move the corresponding real DOM node to the new position node (this operation needs to be performed based on the position of the unique identifier key); DELETE: Delete the specified node of the real DOM node tree; REPLACE: Replace the corresponding entire real DOM node; TEXT: Update the content of the text node.

[0033] In another preferred embodiment of the present invention, a mouse track monitor can be declared, and the current mouse position data can be obtained through the mouse track monitor; a dynamically movable virtual DOM node tree is constructed based on the current mouse position data, which is used to dynamically render the rendering block at the current mouse position, and the virtual DOM node tree of the current rendering block is further transferred and reused using the reused delivery component Render Props, and the dragging and layout of the corresponding rendering block are driven by the mouse's native onMouseDown, onMouseMove, and onMouseUp events.

[0034] In the embodiments disclosed in the present invention, the processes described above with reference to the flowchart can be implemented as a computer software program. The embodiments disclosed in the present invention include a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program contains program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from a network through a communication part, and / or installed from a removable medium. When the computer program is executed by a central processing unit (CPU), the above functions are not limited to those in the method of the present application. It should be noted that the computer-readable medium mentioned above in the present application can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more wire segments, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In this application, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In this application, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal may take a variety of forms, including, but not limited to, an electromagnetic signal, an optical signal, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transfer a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer-readable medium may be transmitted using any appropriate medium, including but not limited to wireless, electrical wire, optical fiber cable, RF, etc., or any suitable combination thereof.

[0035] The flow charts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the system, method and computer program product according to various embodiments of the present invention. In this regard, each box in the flow chart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flow chart, and the combination of the boxes in the block diagram and / or flow chart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0036] Those skilled in the art should understand that the embodiments of the present invention described above and shown in the accompanying drawings are only examples and do not limit the present invention. The objectives of the present invention have been fully and effectively achieved. The functional and structural principles of the present invention have been demonstrated and explained in the embodiments. Without departing from the principles, the implementation methods of the present invention may be subject to any deformation or modification.

Claims

1. An AI-based efficient method for generating electronic certificates, characterized in that: The method comprises the following steps: Using JSX declarations to create an electronic certificate component and a React rendering component, constructing a virtual DOM node tree and a real DOM node tree based on the React rendering component, and rendering the electronic certificate based on the real DOM node tree; Pre-building an AI background generation model, inputting a prompt word text into the AI ​​background generation model, the AI ​​background generation model generating a background image based on the prompt word text, and transferring the background image to the electronic certificate editing interface; Constructing a dynamically updated electronic certificate information list according to the electronic certificate component, wherein the electronic certificate information list includes different types of field information for updating, and the electronic certificate information list includes unique identifiers of the different types of field information; The virtual DOM node tree is dynamically updated according to the electronic certificate information list, and some DOM nodes in the updated virtual DOM node tree are converted into real DOM nodes and the electronic certificate is rendered.

2. The AI-based efficient electronic certificate generation method according to claim 1, characterized in that: The electronic certificate component declares field information including the competition name, organization logo, winner's name, ranking, time, issuing organization and electronic seal according to the electronic certificate content, and automatically fills the declared field information and field elements of the corresponding field information into the electronic certificate information list, wherein each type of field information in the declaration is pre-configured with a unique identification key, and constructs the React object of the virtual DOM node tree and the real DOM node tree according to the field information corresponding to the unique identification key and the React rendering component, wherein the React object includes the DOM node type, DOM node attribute, DOM node unique identification key and DOM node reference, wherein the DOM node unique identification key is the same as the unique identification key pre-set for the corresponding field information in the electronic certificate information list.

3. The AI-based efficient electronic certificate generation method according to claim 2, characterized in that: The DOM node types include element nodes, text nodes, document nodes, and comment nodes. The element node among the DOM node types is the root node, which is used to describe the tag of the HTML page. The text node is used to describe the text content of the DOM node and is used to provide editable input text. The document node provides an XML document entry for accessing XML documents and other nodes. The comment node is used to provide the comment content of the HTML page. The XML document entry provided by the document node is connected to the electronic certificate information list, which is used to access different field information in the electronic certificate information list. Other nodes are accessed by declaring the document node attributes, and different nodes of the virtual DOM node tree are updated in real time.

4. The method for efficiently generating electronic certificates based on AI according to claim 1, characterized in that: The AI ​​background generation model includes a pre-trained StyleGAN model or a Neural Style Transfer model, and constructs an API interface of the AI ​​background generation model, wherein the URL mapping address of the API interface is set to the electronic certificate editing interface; after the AI ​​background generation model generates a corresponding background image according to the input prompt word, the background image is transmitted to the electronic certificate editing interface through the API interface and is used as the background image of the electronic certificate editing interface by embedding the image.

5. The AI-based efficient electronic certificate generation method according to claim 1, characterized in that: defining the unupdated electronic certificate information list as the first electronic certificate information list and the updated electronic certificate information list as the second electronic certificate information list, traversing all field information and unique identification keys of corresponding fields in the second electronic certificate information list, comparing the unique identification keys of all fields in the second electronic certificate information list with all unique identification keys in the first electronic certificate information list, and if, after the comparison, n unique identification keys in the second electronic certificate information list do not appear in the first electronic certificate information list, creating a new node in the original virtual DOM node tree; If, after comparison, there are m unique identification keys in the first electronic certificate information list that do not appear in the second electronic certificate information list, the corresponding DOM node is deleted from the original virtual DOM node tree.

6. The AI-based efficient electronic certificate generation method according to claim 5, characterized in that: When the unique identification key of the corresponding field in the second electronic certificate information list is the same as the corresponding unique identification key in the first electronic certificate information list, but the levels or DOM node types in the original virtual DOM node tree are different, the corresponding DOM node is moved to the corresponding level node in the original virtual DOM node tree with the minimum number of steps, or the type of the DOM node corresponding to the same unique identification key is directly changed in the original virtual DOM node tree; When the unique identification key of the corresponding field in the second electronic certificate information list is the same as the corresponding unique identification key in the first electronic certificate information list, and the corresponding DOM node levels and DOM node types are the same, further determine whether the corresponding DOM node attributes are the same. If the attributes are different, directly reuse the corresponding DOM node in the original virtual DOM node tree, and only update the attributes of the corresponding DOM node.

7. The method for efficiently generating electronic certificates based on AI according to claim 1, characterized in that: The updated virtual DOM node tree is defined as a first virtual DOM node. After the original virtual DOM node tree is dynamically updated to obtain the first virtual DOM node, the first virtual DOM node tree is compared with the original virtual DOM node tree, and a patch instruction is generated based on the difference. The patch instruction is used by the renderer to complete the rendering operation of the updated portion.

8. The AI-based efficient electronic certificate generation method according to claim 1, characterized in that: Declare a mouse track monitor and obtain the current mouse position data through the mouse track monitor; A dynamically movable virtual DOM node tree is constructed based on the current mouse position data, which is used to dynamically render the rendering block at the current mouse position. The virtual DOM node tree of the current rendering block is further reused by using the multiplexing transmission component Render Props to transmit and reuse different positions, and the dragging and layout of the corresponding rendering block are driven by the mouse's native onMouseDown, onMouseMove, and onMouseUp events.

9. An AI-based efficient electronic certificate generation system, characterized by: The system executes an AI-based efficient electronic certificate generation method as described in any one of claims 1-8.

10. A computer-readable storage medium, characterized in that The computer-readable storage medium stores a computer program, and the computer program is executed by a processor to implement the AI-based efficient electronic certificate generation method described in any one of claims 1-8.

Images