Page generation method and device, computer-readable storage medium, and electronic device

Abstract

The present disclosure provides a page generation method, device, electronic device and computer-readable storage medium; it relates to the field of front-end development technology. The method includes: obtaining a first page image, and performing static page generation processing on the first page image to obtain first static page description information; determining a second page source file corresponding to the second page image, and obtaining reused logical mapping information in the second page source file; the similarity between the second page image and the first page image is greater than a preset value; generating a first page source file corresponding to the first page image based on the first static page description information and the reused logical mapping information, so as to generate a target page according to the first page source file. The present disclosure can intelligently generate a front-end page containing business logic mapping information based on a visual draft image, efficiently realize the reuse of logical mapping information, and greatly improve R&D efficiency.

Description

Technical Field

[0001] The present disclosure relates to the technical field of front-end development, and in particular to a page generation method, a page generation device, an electronic device, and a computer-readable storage medium. Background Art

[0002] Front-end development is the process of creating front-end interfaces such as web pages or applications (Apps) to present to users. It uses various front-end development technologies, frameworks, and solutions to implement the user interface (UI) interaction of Internet products.

[0003] Artificial Intelligence (AI) is a new technical science that studies and develops theories, methods, technologies and application systems for simulating, extending and expanding human intelligence.

[0004] With the rapid development of artificial intelligence (AI), it has been widely applied in various fields. For example, front-end intelligent R&D is a popular research area. This approach aims to improve R&D efficiency by intelligently generating front-end code through AI.

[0005] It should be noted that the information disclosed in the above background technology section is only used to enhance the understanding of the background of the present disclosure, and therefore may include information that does not constitute prior art known to ordinary technicians in the field. Summary of the Invention

[0006] The purpose of the present disclosure is to provide a page generation method, a page generation device, an electronic device and a computer-readable storage medium, thereby overcoming to a certain extent the problem that the existing front-end code generation solution can only generate a static display interface and cannot generate complex business logic codes including data display and user interaction.

[0007] According to one aspect of the present disclosure, a page generation method is provided, including: acquiring a first page image, and performing static page generation processing on the first page image to obtain first static page description information; determining a second page source file corresponding to the second page image, and obtaining reuse logical mapping information in the second page source file; the similarity between the second page image and the first page image is greater than a preset value; generating a first page source file corresponding to the first page image based on the first static page description information and the reuse logical mapping information, so as to generate a target page according to the first page source file.

[0008] According to one aspect of the present disclosure, a page generation device is provided, including: a static page generation module, used to obtain a first page image and perform static page generation processing on the first page image to obtain first static page description information; a mapping information acquisition module, used to determine a second page source file corresponding to a second page image and obtain reused logical mapping information in the second page source file; the similarity between the second page image and the first page image is greater than a preset value; and a first page generation module, used to generate a first page source file corresponding to the first page image based on the first static page description information and the reused logical mapping information, so as to generate a target page according to the first page source file.

[0009] In an exemplary embodiment of the present disclosure, the static page generation module includes: a first page component generation unit, which is used to perform component identification processing on the first page image to obtain the corresponding first page component; a component information generation unit, which is used to perform component information generation processing on the first page component to generate component description information corresponding to the first page component; and a static page generation unit, which is used to integrate the first page component with the component description information to generate first static page description information.

[0010] In an exemplary embodiment of the present disclosure, the first page component generation unit is configured to: obtain a pre-built component recognition model; the component recognition model is trained based on a component data set and a page image set; and perform component recognition processing on the first page image through the component recognition model to determine the first page component.

[0011] In an exemplary embodiment of the present disclosure, the component information generation unit includes: a data object generation unit, used to perform object generation processing on the first page component to determine the data object corresponding to the first page component; an information integration unit, used to determine the object description information of the data object and generate component description information based on the object description information.

[0012] In an exemplary embodiment of the present disclosure, the data object generation unit includes: a component file generation unit, used to generate a layer component file corresponding to the first page component; the layer component file includes an element hierarchy of page elements in the first page component; and an object generation unit, used to generate a data object corresponding to the first page component based on the layer component file and according to the element hierarchy.

[0013] In an exemplary embodiment of the present disclosure, the object generation unit includes an initial object generation sub-unit, which is used to parse and serialize the layer component file to generate an initial data object corresponding to the page element; and an object merging sub-unit, which is used to merge the initial data object according to the element hierarchy to generate a data object.

[0014] In an exemplary embodiment of the present disclosure, the object merging subunit includes: an object determination subunit, which is used to determine the data object to be deleted and the data object to be merged from the initial data object according to the element hierarchy; a deletion layer determination subunit, which is used to determine the layer to be deleted according to the data object to be deleted, and delete the layer to be deleted; and a layer merging subunit, which is used to perform layer merging processing based on the data object to be merged to generate a data object.

[0015] In an exemplary embodiment of the present disclosure, the layer merging sub-unit is configured to: determine the object information to be merged of the data object to be merged, the object information to be merged including the coordinates of the object to be merged and the size of the object to be merged; perform layer merging processing on the data object to be merged according to the coordinates of the object to be merged and the size of the object to be merged to generate a data object; determine the object coordinates and object size of the data object according to the coordinates of the object to be merged and the size of the object to be merged, respectively.

[0016] In an exemplary embodiment of the present disclosure, the information integration unit is configured to: determine the object type of the data object, and determine the object description information of the data object according to the object type; loop through each data object, integrate the object description information of multiple data objects, and generate component description information.

[0017] In an exemplary embodiment of the present disclosure, a page generation device includes a component decoupling module, which is configured to: obtain a pre-built attribute event determination model and determine the second page component corresponding to the second page image; perform attribute event recognition processing on the second page component through the attribute event determination model to obtain object attributes and object events of data objects in the second page component; generate component functions based on the object attributes and object events to decouple the second static page description information and the reuse logic mapping information through the component function.

[0018] In an exemplary embodiment of the present disclosure, the first page generation module is configured to: determine the first page component corresponding to the first page image; determine the reused page component associated with the first page component in the second page image; determine the component logical mapping information corresponding to the reused page component based on the reused logical mapping information; the component logical mapping information includes a component function; and integrate the first static page description information with the component logical mapping information through the component function to obtain a first page source file.

[0019] According to one aspect of the present disclosure, an electronic device is provided, comprising: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform any one of the above-mentioned methods by executing the executable instructions.

[0020] According to one aspect of the present disclosure, a computer-readable storage medium is provided, on which a computer program is stored. When the computer program is executed by a processor, any one of the above methods is implemented.

[0021] According to one aspect of the present disclosure, a computer program product or computer program is provided, comprising computer instructions stored in a computer-readable storage medium. A processor of a computer device reads the computer instructions from the computer-readable storage medium and executes the computer instructions, causing the computer device to perform the graph database data import method provided in each of the above embodiments.

[0022] The exemplary embodiments of the present disclosure may have some or all of the following beneficial effects:

[0023] In a page generation method provided in an example embodiment of the present disclosure, a static page generation process is performed on a first page image to obtain first static page description information, and a second page source file corresponding to the second page image is obtained, the second page source file including reused logical mapping information, and a first page source file corresponding to the first page image is generated based on the first static page description information and the reused logical mapping information, so that an interactive target page can be generated according to the first page source file. On the one hand, when the first page image and the second page image are highly similar, the reused logical mapping information in the second page source file can be directly reused in the generation process of the first page source file, and basically zero development of the first page logic code can be achieved. On the other hand, for the development of new pages, static UI description information can be quickly generated, so that developers only need to focus on the logical mapping information part, which greatly reduces the development workload.

[0024] It is to be understood that the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure. BRIEF DESCRIPTION OF THE DRAWINGS

[0025] The accompanying drawings are incorporated into and constitute a part of the specification, illustrate embodiments consistent with the present disclosure, and together with the specification, are used to explain the principles of the present disclosure. Obviously, the drawings described below are only some embodiments of the present disclosure, and those skilled in the art can derive other drawings based on these drawings without inventive effort.

[0026] Figure 1 A schematic diagram shows an exemplary system architecture of a page generation method and apparatus to which the embodiments of the present disclosure can be applied.

[0027] Figure 2 A schematic diagram of the structure of a computer system suitable for implementing an electronic device according to an embodiment of the present disclosure is shown.

[0028] Figure 3 The flowchart of the page generation method according to one embodiment of the present disclosure is schematically shown.

[0029] Figure 4 The overall flow chart of generating an interactive front-end page according to an embodiment of the present disclosure is schematically shown.

[0030] Figure 5 The figure schematically shows a front-end page diagram with similar page heights according to an embodiment of the present disclosure.

[0031] Figure 6 A front-end page diagram with similar module heights according to an embodiment of the present disclosure is schematically shown.

[0032] Figure 7 The flowchart of generating first static page description information according to a first page image according to an embodiment of the present disclosure is schematically shown.

[0033] Figure 8 The flowchart of performing component recognition processing on a first page image to determine the first page component according to one embodiment of the present disclosure is schematically shown.

[0034] Figure 9 The figure schematically shows the output result of the component identification processing according to one embodiment of the present disclosure.

[0035] Figure 10 A flowchart for decoupling the second static page description information and the multiplexing logic mapping information according to an embodiment of the present disclosure is schematically shown.

[0036] Figure 11 The flowchart of generating a first page source file according to an embodiment of the present disclosure is schematically shown.

[0037] Figure 12 The structure of a page generating device according to an embodiment of the present disclosure is schematically shown. DETAILED DESCRIPTION

[0038] Example embodiments will now be described more fully with reference to the accompanying drawings. However, example embodiments can be implemented in a variety of forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that the present disclosure will be more comprehensive and complete and will fully convey the concepts of the example embodiments to those skilled in the art. The described features, structures, or characteristics may be combined in any suitable manner in one or more embodiments. In the following description, many specific details are provided to provide a full understanding of the embodiments of the present disclosure. However, those skilled in the art will appreciate that the technical solutions of the present disclosure may be practiced while omitting one or more of the specific details, or that other methods, components, devices, steps, etc. may be employed. In other cases, well-known technical solutions are not shown or described in detail to avoid obscuring various aspects of the present disclosure.

[0039] In addition, the accompanying drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. Identical reference numerals in the figures denote identical or similar parts, and thus repetitive descriptions thereof will be omitted. Some of the block diagrams shown in the accompanying drawings are functional entities that do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in software, in one or more hardware modules or integrated circuits, or in different networks and / or processor devices and / or microcontroller devices.

[0040] Artificial Intelligence (AI) refers to the theories, methods, techniques, and application systems that use digital computers or machines controlled by digital computers to simulate, extend, and expand human intelligence, to perceive the environment, acquire knowledge, and use that knowledge to achieve optimal results. In other words, AI is a comprehensive technology within computer science that seeks to understand the essence of intelligence and produce new intelligent machines that can respond in a manner similar to human intelligence. AI also studies the design principles and implementation methods of various intelligent machines, enabling them to possess the capabilities of perception, reasoning, and decision-making.

[0041] Artificial intelligence (AI) technology is a comprehensive discipline encompassing a wide range of fields, encompassing both hardware and software technologies. Foundational AI technologies generally include sensors, specialized AI chips, cloud computing, distributed storage, big data processing, operating / interaction systems, and mechatronics. AI software technologies primarily encompass computer vision, speech processing, natural language processing, and machine learning / deep learning.

[0042] With the research and advancement of artificial intelligence technology, artificial intelligence technology has been studied and applied in many fields, such as common smart homes, smart wearable devices, virtual assistants, smart speakers, smart marketing, unmanned driving, autonomous driving, drones, robots, smart medical care, smart customer service, etc. It is believed that with the development of technology, artificial intelligence technology will be applied in more fields and play an increasingly important role.

[0043] The solution provided in the embodiments of this application involves technologies such as artificial intelligence page generation, which is specifically described through the following embodiments:

[0044] Figure 1 A schematic diagram shows a system architecture of an exemplary application environment to which a page generation method and apparatus according to an embodiment of the present disclosure can be applied.

[0045] like Figure 1 As shown, the system architecture 100 may include one or more terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used to provide a medium for communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables, etc. The terminal devices 101, 102, 103 may be various electronic devices with display screens, including but not limited to desktop computers, portable computers, smart phones, tablet computers, etc. It should be understood that Figure 1 The number of terminal devices, networks and servers in the embodiment is merely illustrative. Any number of terminal devices, networks and servers may be provided as needed. For example, the server 105 may be a server cluster consisting of multiple servers.

[0046] The page generation method provided in the embodiment of the present disclosure is generally executed by the server 105, and accordingly, the page generation device is generally provided in the server 105. However, it is easy for those skilled in the art to understand that the page generation method provided in the embodiment of the present disclosure can also be executed by the terminal devices 101, 102, 103, and accordingly, the page generation device can also be provided in the terminal devices 101, 102, 103, and this is not particularly limited in the present exemplary embodiment. For example, in an exemplary embodiment, a user may upload a visual draft image to the server 105 through the terminal devices 101, 102, 103, and the server 105 generates a first page source file containing static front-end page description information and logical mapping information such as data display and user interaction from the visual draft image through the page generation method provided in the embodiment of the present disclosure, so as to display the corresponding target page on the terminal devices 101, 102, 103 according to the generated first page source file.

[0047] Figure 2A schematic diagram of the structure of a computer system suitable for implementing an electronic device according to an embodiment of the present disclosure is shown.

[0048] It should be noted that Figure 2 The computer system 200 of the electronic device shown is only an example and should not limit the functions and scope of use of the embodiments of the present disclosure.

[0049] like Figure 2 As shown, the computer system 200 includes a central processing unit (CPU) 201, which can perform various appropriate actions and processes according to the program stored in the read-only memory (ROM) 202 or the program loaded from the storage part 208 to the random access memory (RAM) 203. Various programs and data required for system operation are also stored in the RAM 203. The CPU 201, ROM 202, and RAM 203 are connected to each other via a bus 204. An input / output (I / O) interface 205 is also connected to the bus 204.

[0050] The following components are connected to the I / O interface 205: an input section 206 including a keyboard, a mouse, and the like; an output section 207 including devices such as a cathode ray tube (CRT), a liquid crystal display (LCD), and a speaker; a storage section 208 including a hard disk; and a communication section 209 including a network interface card such as a LAN card or a modem. The communication section 209 performs communication processing via a network such as the Internet. A drive 210 is also connected to the I / O interface 205 as needed. A removable medium 211, such as a magnetic disk, an optical disk, a magneto-optical disk, or a semiconductor memory, is installed in the drive 210 as needed, so that computer programs read therefrom can be installed into the storage section 208 as needed.

[0051] In particular, according to an embodiment of the present disclosure, the process described below with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication part 209, and / or installed from the removable medium 211. When the computer program is executed by the central processing unit (CPU) 201, the various functions defined in the method and apparatus of the present application are executed. In some embodiments, the computer system 200 may also include an AI (Artificial Intelligence) processor for processing computing operations related to machine learning.

[0052] It should be noted that the computer-readable medium described in the present disclosure may be a computer-readable signal medium or a computer-readable storage medium, or any combination thereof. A computer-readable storage medium may be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device, or component, or any combination thereof. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more wires, a portable computer disk, a hard disk, a random access memory (RAM), a read-only memory (ROM), an erasable programmable read-only memory (EPROM or flash memory), an 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 the present disclosure, a computer-readable storage medium may be any tangible medium containing or storing a program that can be used by or in conjunction with an instruction execution system, device, or component. In the present disclosure, 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. This propagated data signal may take a variety of forms, including but not limited to electromagnetic signals, optical signals, 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 transport 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 suitable medium, including but not limited to wireless, wireline, optical fiber cable, RF, or any suitable combination thereof.

[0053] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the above-mentioned module, program segment, or a part of code contains one or more executable instructions for implementing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in an order different from 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 or flowchart, and the combination of boxes in the block diagram or flowchart, 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.

[0054] The units involved in the embodiments described in this disclosure may be implemented in software or hardware, and the units described may also be provided in a processor. In some cases, the names of these units do not constitute limitations on the units themselves.

[0055] As another aspect, the present application also provides a computer-readable medium, which may be included in the electronic device described in the above embodiment; or may exist independently without being assembled into the electronic device. The above computer-readable medium carries one or more programs, and when the above one or more programs are executed by an electronic device, the electronic device implements the method described in the following embodiment. For example, the electronic device may implement the following Figures 3-4 、 Figures 7 to 11 The various steps shown, etc.

[0056] The technical solutions of the embodiments of the present disclosure are described in detail below:

[0057] As the popularity of artificial intelligence continues to grow, front-end intelligent R&D has gradually become a research direction for front-end developers. Currently, some solutions have been proposed to intelligently generate front-end page code through AI.

[0058] One technical solution involves developing front-end code using imgcook, a tool that specializes in processing Sketch files, Photoshop Documents (PSDs), and static images. imgcook takes visual drafts in the form of Sketch files, PSDs, and static images and, using intelligent technology, generates maintainable front-end code in one click, including view code, data field bindings, and component code.

[0059] Another technical solution involves developing front-end code through visual compilation. This approach aims to enable machines to understand the design draft, translating it into computer language through algorithms. Currently, visual compilation only supports Sketch input.

[0060] Both of the above solutions use a visual draft as input, have the recognition system intelligently identify visual elements, and convert them into web front-end code, eliminating the need for front-end developers to manually write UI code. These two solutions address the problem of automatically restoring the visual draft to static front-end UI code.

[0061] However, a fully functional front-end page requires more than just UI presentation; it also includes complex business logic such as data display and user interaction. Front-end developers must develop logic code based on the generated UI code, such as data object binding, event binding, and user interaction logic. For each requirement, developers must repeatedly develop logic code.

[0062] Based on one or more of the above problems, this exemplary embodiment provides a page generation method. This page generation method can be applied to the above server 105, and can also be applied to one or more of the above terminal devices 101, 102, and 103, which is not particularly limited in this exemplary embodiment. Figure 3 As shown, the page generation method may include the following steps S310 to S330:

[0063] Step S310: Acquire a first page image, and perform static page generation processing on the first page image to obtain first static page description information.

[0064] Step S320: Determine the second page source file corresponding to the second page image, and obtain the reuse logic mapping information in the second page source file; the similarity between the second page image and the first page image is greater than a preset value.

[0065] Step S330 : Generate a first page source file corresponding to the first page image based on the first static page description information and the multiplexing logic mapping information, so as to generate a target page according to the first page source file.

[0066] In the page generation method provided in this example embodiment, a static page generation process is performed on the first page image to obtain first static page description information, and a second page source file corresponding to the second page image is obtained. The second page source file includes reused logical mapping information. Based on the first static page description information and the reused logical mapping information, a first page source file corresponding to the first page image is generated, so that an interactive target page can be generated according to the first page source file. On the one hand, when the first page image and the second page image are highly similar, the reused logical mapping information in the second page source file can be directly reused in the generation process of the first page source file, and basically zero development of the first page logic code can be achieved. On the other hand, for the development of new pages, static UI description information can be quickly generated, so that developers only need to focus on the logical mapping information part, which greatly reduces the development workload.

[0067] The above steps of this exemplary embodiment are described in more detail below.

[0068] In step S310 , a first page image is acquired, and static page generation processing is performed on the first page image to obtain first static page description information.

[0069] In this example embodiment, the page image may be an image based on which the front-end page is generated. For example, the page image may be a visual draft designed by a front-end visual designer. The visual draft may be a design drawing output by a designer in an Internet scenario. As input for web front-end development, the developer develops a page that can be displayed and interacted with on the Web side based on the design drawing. The page image may be a visual draft in the form of Sketch, PSD, or a static picture. The first page image may be an image to be processed for page generation. The static page generation process may be a process of generating a front-end static UI page based on the page image. The static page description information may be information describing the structure of the front-end static UI page, that is, the static page description information may be the front-end static UI page code excluding the logic code. The first static page description information may be the static page description information corresponding to the first page image.

[0070] During the front-end page development process, front-end designers can design the visual draft images of the front-end page according to product requirements and use the visual draft images as page images. Among them, product requirements can be the functional reflection of user needs on a certain product or service, and these functional points are proven to be scientific and feasible in terms of technology, resources, capabilities and benefits. Figure 4 , Figure 4 The following schematically illustrates an overall flow chart for generating an interactive front-end page according to an embodiment of the present disclosure. When performing page generation processing on a first page image, a first page image 410 may be obtained. In step S410, a static page generation process is performed on the obtained first page image 410 to obtain first static page description information 430 corresponding to the first page image.

[0071] Specifically, static page description information may include page structure information, page style information, and image files. Page structure information may include information containing the basic structural tags (i.e., skeleton tags) of a webpage. For example, page structure information may be structural code written in Hypertext Markup Language (HTML); page structure information may also be structural code written in Extensible Markup Language (XML); page structure information may also be structural code written in Extensible Hypertext Markup Language (XHTML); or page structure information may also be structural code written in JavaScript (JSX). Page style information may be information that defines how to display page elements in the structural code. That is, page style information may define the style of page elements, such as color, position, size, etc. For example, page style information may be style code written in Cascading Style Sheets (CSS). Image files may be images cut from the page design draft for page creation. Cutting images can facilitate interaction and create a good visual experience. For example, the first static page description information 430 may include an "index.js" file storing page structure information; an "index.less" file storing page style information; and an "images" file storing image cut files.

[0072] In step S320 , a second page source file corresponding to the second page image is determined, and multiplexing logic mapping information in the second page source file is obtained; and the similarity between the second page image and the first page image is greater than a preset value.

[0073] In this example embodiment, the second page image may be an image for which a corresponding page source file has been generated. The preset value may be a pre-set threshold. The second page image may be an image whose similarity to the first page image is greater than the preset value. For example, the first page image may be highly similar to the entire second page image, or the first and second page images may be highly similar in some modules. The second page source file may be a source file obtained by performing page generation processing on the second page image, and the second page source file may be used to construct the second page. The second page source file may include second static page description information and reused logical mapping information. The reused logical mapping information may be logical mapping information that is reusable between the first and second pages. For example, the logical mapping information may include data interaction display code and code corresponding to page events. Page events may include click events, hover events, input events, etc. The second static page description information may be description information obtained by performing static page generation processing on the second page image. The second static page description information and the reused logical mapping information are decoupled. Code coupling can be a measure of the degree of interconnection between different modules within a software structure. The tighter the connection between modules, the stronger the coupling. The principle of code development is "high cohesion, low coupling." Decoupling refers to removing the coupling between code modules. Decoupling the second static page description information from the reuse logic mapping information can remove the association between the two.

[0074] Before generating the first page source file corresponding to the first page image, a second page source file of a second page image whose similarity to the first page image is greater than a preset value can be obtained. For example, the similarity of the images can be determined by identifying the width and height of different images and comparing the width and height of the images. Since the first page image and the second page image are highly similar and have the same overall functions, the first page source file can be reused in the generation process of the first page source file. Similar page images can be page images with a high degree of similarity to the entire page, or similar page images can be page images with a high degree of similarity to some modules in the page. Reference Figure 5 , Figure 5 The figure schematically shows a front-end page diagram with similar page heights according to an embodiment of the present disclosure. Figure 5 The total page height of the page image 510 in (a) is Figure 5 The entire page image 520 in (b) is highly similar. Figure 6 , Figure 6 A front-end page diagram with similar module heights according to an embodiment of the present disclosure is schematically shown. Figure 6 The module 610 included in the page image of (a) is Figure 6 The height of the module 620 included in the page image of (b) is similar.

[0075] Since the similarity between the second page image and the first page image is greater than the preset value, that is, the reused logical mapping information in the second page source file can be reused in the generation process of the first page source file. Therefore, the obtained reused logical mapping information in the second page source file can be used in the generation process of the first page source file.

[0076] The specific generation process of the second page source file is as follows: Figure 4 , obtaining a second page image 420. In step S420, static page generation processing is performed on the second page image 420 to obtain second static page description information 440 corresponding to the second page image 420. Because no page image similar to the second page image exists before the second page source file is generated, the developer can compile logical mapping information corresponding to the second page image based on the static page description information. This compiled logical mapping information is then used as reused logical mapping information 450 for subsequent reuse in the generation of page source files for other page images similar to the first page image. The second static page description information 440 and the compiled reused logical mapping information 450 are collectively used as the second page source file 460.

[0077] It is easy for those skilled in the art to understand that the process of generating the second static page description information based on the second page image can also be carried out using the static page generation processing method in the present disclosure. The second static page description information generated in this way is a pluggable front-end UI code that is decoupled from the reused logical mapping information.

[0078] In step S330 , a first page source file corresponding to the first page image is generated based on the first static page description information and the multiplexing logic mapping information, so as to generate a target page according to the first page source file.

[0079] In this exemplary embodiment, the first page source file may be a page source file including logic code generated based on the first page image, and the target page may be an interactive front-end page generated based on the first page source file.

[0080] Because the first page image and the second page image are similar, the reused logical mapping information corresponding to the second page image can be reused in the logic code of the first page image. After generating the first static page description information corresponding to the first page image, the reused logical mapping information contained in the second page source file can be obtained, and the first static page description information and the reused logical mapping information can be directly integrated to generate the first page source file corresponding to the first page image.

[0081] In addition, after obtaining the second page source file, the first static page description information can be used to directly replace the second static page description information, and the first static page description information can be integrated with the reused logical mapping information in the second page source file to generate the first page source file corresponding to the first page image. At this time, the generated first page source file already contains logic codes such as data interaction display and page events. Users can directly use the target page generated based on the first page source file to perform interactive and other related operations. Figure 4 The first static page description information 430 may be used to replace the second static page description information 440 in the second page source file 460 , and combined with the multiplexing logic mapping information 450 to generate the first page source file 470 .

[0082] It should be noted that if no page image with a similarity greater than a preset value to the first page image is identified, the page source files corresponding to the other page images cannot be reused with the first page source file. Therefore, after generating the first static page description information corresponding to the first page image through the static page generation process, developers are required to develop and compile logical mapping information for the first page image.

[0083] For example, the first static page description information corresponding to the first page image may be generated through the following steps.

[0084] In an example embodiment of the present disclosure, component recognition processing is performed on the first page image to obtain the corresponding first page component; component information generation processing is performed on the first page component to generate component description information corresponding to the first page component; and the first page component and the component description information are integrated to generate first static page description information.

[0085] The component identification process may be a process of identifying a first page component included in the first page image. A page component may be reusable code having a single functional module in a page. The first page component may be a page component included in the first page image. The component information generation process may be a process of generating descriptive information corresponding to the first page component. The component description information may be a code snippet that describes the specific functionality implemented by the page component in the first page.

[0086] refer to Figure 7 , Figure 7A flowchart for generating first static page description information based on a first page image according to an embodiment of the present disclosure is schematically shown. In step S710, after obtaining the first page image, component identification processing can be performed on the first page to obtain the first page component contained in the first page image. In step S720, component information generation processing is performed on the first page component to generate component description information corresponding to the first page component. After identifying the first page component in the first page image, component description information of the first page component can be generated based on information such as the component type. In step S730, the first page component and the component description information are integrated to generate the first static page description information. After determining all the first page components in the first page image and generating the component description information corresponding to each first page component, all the first page components and the component description information can be integrated to form a complete first static page description information.

[0087] Through the above-mentioned static page description information processing method, the first page image can be used as input to automatically generate the corresponding Web front-end UI code, that is, the first static page description information, and this part of the UI code is a pluggable static page code that is decoupled from the business logic code.

[0088] For example, the first page component in the first page image may be identified through the following steps.

[0089] In an example embodiment of the present disclosure, a pre-built component recognition model is obtained; the component recognition model is trained based on a component data set and a page image set; and component recognition processing is performed on the first page image using the component recognition model to determine the first page component.

[0090] The component recognition model may be a model for identifying page components contained in a page image, and may be a model trained using deep learning techniques. The component dataset may be a component set consisting of business components. The page image set may be an image set consisting of page mockup images corresponding to the business components.

[0091] refer to Figure 8 , Figure 8A flowchart of component recognition processing of a first page image to determine the first page component according to an embodiment of the present disclosure is schematically shown. In step S810, a pre-built component recognition model is obtained; the component recognition model is trained based on a component data set and a page image set. Before performing first page component recognition, a pre-built component recognition model can be obtained first. Specifically, the component recognition model can use existing business components and corresponding visual draft images as training data sets, and establish a deep learning neural network model. The established deep learning neural network model is trained with the training data set to obtain a component recognition model. For example, a target detection algorithm model based on the You Only Look Once (YOLO) algorithm can be established as a component recognition model, that is, a target detection algorithm model that combines target area prediction and target category prediction into one.

[0092] It is easy for those skilled in the art to understand that the present disclosure can also establish a component recognition model based on other target detection algorithms to perform component recognition processing on the first page image. The present disclosure does not impose any special limitation on the detection algorithm adopted by the component recognition model.

[0093] In step S820, the component recognition model performs component recognition processing on the first page image to determine the first page component. The component recognition model uses the first page image as input, performs component recognition processing on the first page image, and outputs the corresponding component type and confidence level. Based on the output component type and confidence level, the first page component contained in the first page image can be determined.

[0094] refer to Figure 9 , Figure 9 The output result diagram of the component identification processing according to an embodiment of the present disclosure is schematically shown. The first page image 900 is input into the component identification model, and the component identification model can output the component type and confidence determined based on the first page image. For example, the output content corresponding to the "Finals" poster area 910 can be "now-activity-business-banner-info: 0.93", the output content corresponding to the anchor ranking area 920 can be "now-activity-business-anchor-info: 0.92", and the output content corresponding to the anchor avatar area 930 can be "now-activity-ui-user: 0.44". According to the output component type and confidence level, it can be determined that the first page image contains a banner poster (banner) component and an anchor (anchor) component.

[0095] For example, the component description information of the first page component can be generated through the following steps.

[0096] In an example embodiment of the present disclosure, object generation processing is performed on the first page component to determine the data object corresponding to the first page component; object description information of the data object is determined, and component description information is generated based on the object description information.

[0097] The object generation process may be a process for generating a corresponding operable data object based on the first page component. The data object may be an operable data object, based on which related page operations may be performed. For example, the data object may be a JavaScript object (js object). The object description information may be a code snippet consisting of object properties or object events of the data object.

[0098] Specifically, after identifying all first-page components in the first-page image, object generation processing can be performed on the first-page components to generate an operable data object corresponding to each first-page component. After generating the data objects corresponding to the first-page components, object description information corresponding to each data object can be determined. Since the first-page component may include one or more data objects, when the first-page component includes multiple data objects, the object description information of the multiple data objects can be integrated to form component description information for the first-page component.

[0099] In an example embodiment of the present disclosure, a layer component file corresponding to a first page component is generated; the layer component file includes an element hierarchy of page elements in the first page component; and a data object corresponding to the first page component is generated based on the layer component file and according to the element hierarchy.

[0100] The layer component file may be a file containing layer information of page elements in the first page component. A page element may be an element contained in a page, for example, a text element, a paragraph element, a poster element, an anchor element, etc. The element level may be the level of the layer in which the page element is located. Different page elements may be in different layers and correspond to different element levels.

[0101] When designing a visual draft, visual designers also need to follow fixed component specifications. For example, the visual draft can be an image containing the layer information of the component. After identifying the first page component in the first page image, a layer component file corresponding to the first page component can be generated based on the layer information contained in the first page component. For example, the layer component file can be in the Sketch file format. Since the first page component can contain one or more page elements, the generated layer component file contains the element hierarchy of each page element. After determining the element hierarchy of each page element, the data object corresponding to the first page component can be generated based on the layer component file.

[0102] In an example embodiment of the present disclosure, the layer component file is parsed and serialized to generate initial data objects corresponding to the page elements; and the initial data objects are merged according to the element hierarchy to generate data objects.

[0103] The parsing and serialization process can be the process of parsing and serializing a layer component file. Serialization can be the process of converting the state information of an object into a form that can be stored or transmitted. For example, the serialization process can be the process of converting a layer component file into an initial data object. The initial data object can be the object obtained by parsing and serializing the layer component file. The initial data object does not specify the object type. The merging process can be the process of merging some data objects that do not have operation events to generate an operational data object.

[0104] Specifically, for generating a layer component file, the layer component file can be parsed and serialized according to the element hierarchy of the page elements to generate an initial data object. For example, when the layer component file is a Sketch file, the Sketch file can be parsed and serialized to generate an initial data object. The initial data object can be an Object object, and the Object object can be a data carrier for storing object properties and sub-objects, etc. After the initial data object is generated, since there are some duplicate elements or useless elements in the initial data object that do not contain object events, etc., the initial data object can be merged according to the element hierarchy to obtain an operable data object.

[0105] In an example embodiment of the present disclosure, a data object to be deleted and a data object to be merged are determined from an initial data object according to the element hierarchy; a layer to be deleted is determined based on the data object to be deleted, and the layer to be deleted is deleted; and a layer merging process is performed based on the data object to be merged to generate a data object.

[0106] The data object to be deleted may be the initial data object corresponding to a hidden or useless page element in the first page component. The data object to be merged may be the initial data object corresponding to some repeated page elements in the first page component, or the initial data object corresponding to a sub-element within the same page element. The layer to be deleted may be a layer determined based on the data object to be deleted. The layer merging process may be the process of merging the layers corresponding to the data object to be merged.

[0107] Specifically, the data objects to be merged are determined from the initial data objects according to the element hierarchy. For example, some repeated page elements in the first page component and sub-elements within the same page element can be determined as data objects to be merged. Figure 9, Figure 9 The page component 930 includes the texts of “overall ranking” and “scores”, and the initial data objects corresponding to these two text elements can be determined as the data objects to be merged. Figure 9 If there are multiple duplicate user avatars in the contribution list, the initial data objects corresponding to these user avatar elements can be determined as objects to be merged.

[0108] In addition, the data objects to be deleted are determined from the initial data objects based on the element hierarchy. Since a page component may include multiple layers, there may be hidden page elements and useless page elements in different layers. For page code development, these page elements are all useless page elements. Therefore, the initial data objects corresponding to these page elements can be determined as data objects to be deleted. The layer to be deleted is determined based on the layer where the data object to be deleted is located. For example, if a layer only includes one hidden data object, the layer where the hidden data object is located can be determined as the layer to be deleted, and the layer to be deleted can be deleted.

[0109] After completing the deletion operation of the to-be-deleted layer, a layer merging operation can be performed on the to-be-merged data objects according to the layers corresponding to the respective to-be-merged data objects, thereby generating an operable data object.

[0110] In an example embodiment of the present disclosure, information of the data objects to be merged is determined, the information including coordinates of the objects to be merged and sizes of the objects to be merged; layer merging is performed on the data objects to be merged according to the coordinates of the objects to be merged and the sizes of the objects to be merged to generate a data object; and object coordinates and object sizes of the data objects are determined according to the coordinates of the objects to be merged and the sizes of the objects to be merged, respectively.

[0111] The information of the object to be merged may be information corresponding to the data object to be merged displayed on the page. The coordinates of the object to be merged may be the position coordinates of the object to be merged on the page. For example, the coordinates of the object to be merged may include the (x, y) coordinates of the object to be merged. The size of the object to be merged may be the size of the object to be merged displayed on the page. For example, the size of the object to be merged may include the width and height of the object to be merged. The object coordinates may be the position coordinates of the data object on the page. For example, the object coordinates may include the (x, y) coordinates of the data object. The object size may be the size of the data object displayed on the page. For example, the object size may include the width and height of the data object.

[0112] Specifically, before performing layer merging on the data objects to be merged, information about the data objects to be merged can be obtained, such as the position coordinates of the data objects to be merged on the page and the width and height of the objects. Layer merging can be performed on the data objects to be merged based on the coordinates and size of the data objects to be merged. After the layer merging, an operable data object can be generated. The coordinates and size of the generated data object can be determined based on the coordinates and size of the data objects to be merged.

[0113] In an example embodiment of the present disclosure, an object type of a data object is determined, and object description information of the data object is determined based on the object type; each data object is traversed, and the object description information of multiple data objects is integrated to generate component description information. The object type can be a specific type corresponding to the data object.

[0114] Specifically, after generating the operable data objects, the object type of each data object can be determined. For example, the layer and object type corresponding to the data object can be determined by using text, image, and other recognition models. After determining the object type of the data object, the object description information corresponding to the data object can be determined by using text recognition or business logic cluster analysis models. For example, a data object may include element type, <text>element type, element type, <button>Element type, etc. Different types of data objects can correspond to code snippets with different functions. According to the object type, the object properties and object events of the data object can be determined, and the code snippet containing the object properties and object events can be used as the object description information. Figure 9 The ranking "30" is a dynamically changing value, and a variable "userrank" can be generated to define the ranking. Additionally, you can export the layer information of the image type in the layer component file as a cut file.

[0115] Since a page component may include multiple data objects, it is possible to determine the object description information corresponding to each data object. By traversing each data object and integrating the object description information of all data objects, the component description information corresponding to the page component can be obtained. The component description information can include front-end HTML structure information and style information.

[0116] For example, the following is an exemplary code snippet of a page component.

[0117] export default class extends Component{

[0118] onRuleClick=()=>{

[0119] console.log('Activity rule click');}

[0120] onAwardClick=()=>{

[0121] console.log('Activity reward click');}

[0122] render(){

[0123] return(

[0124] <div classname＝"banner-demo">

[0125] <div classname＝"banner-demo-item">

[0126] <h3 classname＝"banner-demo-lbl"> Header Image / Activity Rewards / Activity Rules< / h3>

[0127] <Banner src="https: / / xxx / img / banner_4c2aa138.png"

[0128] text1 = "Activity Rules"

[0129] text2 = "Activity Rewards"

[0130] onClickHandler1={onRuleClick}

[0131] onClickHandler2={onAwardClick}

[0132] / >

[0133]

[0134] );

[0135] }

[0136] }

[0137] The above code snippet defines the component properties and component events corresponding to the Banner page component. Component properties and component events are determined based on the data objects contained in the page component. A page can include multiple elements, such as block-level elements (div elements), title elements (h3 elements), and text elements (text elements). Each element corresponds to a corresponding data object, so the page component includes multiple data objects. In a page component, you can define object properties for different data objects. For example, in the Banner page component, the src attribute defines the image source address of the image used by the banner, the two text objects contained in the banner, and the two click events "onRuleClick" and "onAwardClick".

[0138] In an example embodiment of the present disclosure, a pre-built attribute event determination model is obtained, and a second page component corresponding to the second page image is determined; attribute event recognition processing is performed on the second page component through the attribute event determination model to obtain object attributes and object events of the data object in the second page component; and a component function is generated according to the object attributes and object events to decouple the second static page description information and the reused logic mapping information through the component function.

[0139] The attribute event determination model may be a model for determining object attributes and object events of data objects in a page component. The second page component may be a page component included in the second page image. The object attributes may be related attributes of the data object. The object events may be events associated with the data object. The component function may be a function that defines a component data protocol. The data objects included in the page component may serve as parameters of the component function.

[0140] refer to Figure 10 , Figure 10 A flowchart for decoupling the second static page description information and the reused logical mapping information according to an embodiment of the present disclosure is schematically shown. In step S1010, a pre-built attribute event determination model is obtained, and the second page component corresponding to the second page image is determined. The attribute event determination model can be a model obtained by clustering analysis of multiple different types of data objects. In step S1020, the second page component is input into the attribute event determination model, and the attribute event recognition processing is performed on the second page component through the attribute event determination model to determine the object attributes and object events of the data objects contained in the second page component. In step S1030, a component function can be generated based on the determined object attributes and object events to decouple the second static page description information and the reused logical mapping information through the component function. Since the object attributes and object events of the data object can be exposed through the component function, the generated second static page description information can be decoupled from the logical mapping information through the component function, that is, pluggable static page description information is generated.

[0141] In an example embodiment of the present disclosure, a first page component corresponding to a first page image is determined; a reused page component associated with the first page component in a second page image is determined; component logical mapping information corresponding to the reused page component is determined based on the reused logical mapping information; the component logical mapping information includes a component function; and the first static page description information and the component logical mapping information are integrated and processed through the component function to obtain a first page source file.

[0142] The first page component may be a page component included in the first page. The reused page component may be a page component determined from the second page based on the first page component. The first page component and the reused page component have similarities, for example, the reused page component and the first page component have the same object properties and object events. The component logical mapping information may be the logical mapping information corresponding to the reused page component. The component function may be a function that defines the component properties and component events associated with the page component.

[0143] refer to Figure 11 , Figure 11 A flowchart for generating a first page source file according to an embodiment of the present disclosure is schematically shown. In step S1110, the first page component corresponding to the first page image is determined. After the first page image is obtained, the first page image can be subjected to component identification processing to determine the page component contained therein, i.e., the first page component. In step S1120, the reused page component associated with the first page component in the second page image is determined. The second page image is obtained, and component identification processing is performed on the second page image to determine the second page component corresponding to the second page image. The reused page component associated with the first page component is determined from the second page component. The reused page component is similar to the first page component, for example, it can have the same component properties and component events as the first page component. In step S1130, the component logical mapping information corresponding to the reused page component is determined from the reused logical mapping information. The component logical mapping information is defined in the form of a component function, and the component logical mapping information contains the object properties and object events of the page component. In step S1140, the first static page description information and the component logical mapping information are integrated and processed through the component function to obtain the first page source file. In one method, the generated first static page description information replaces the second static page description information. Since the static page description information includes the page structure code, page style code and cut image file of the front-end UI page, the first static page description information is used to replace the second static page description information. The static page content contained in the first page image will completely cover the static page content in the second page image, and the first page source file corresponding to the first page image is obtained. In another method, the first static page description information and the component logical mapping information can be stored in a new storage location, and the two can be integrated and processed to obtain the first page source file corresponding to the first page image.

[0144] For example, the following description is made using part of the content of the Bannner component in the first page source file as an example.

[0145] export const Banner=({src, text1, text2, onClickHandler1, onClickHandler2})=>{

[0146] return {

[0147] <div classname＝"编组-8-cd86">

[0148] <img className="Semifinals - with logo - DDD3"

[0149] src = {src} / >

[0150] <div classname＝"矩形-1781">

[0151] <div classname＝"编组-12-47a0"onclick＝{onclickhandler1}>

[0152] <div classname＝"矩形-dae5">

[0153] <div classname＝"活动规则-d366">

[0154] <span classname＝"font-0"> {text1}

[0155]

[0156]

[0157] <div classname＝"编组_12_8ec41"onclick＝{onclickhandler2}>

[0158] <div classname＝"矩形-8fdd1">

[0159] <div classname＝"活动奖励-c04a">

[0160] <span classname＝"font-0"> {text2}

[0161]

[0162]

[0163] );

[0165] };

[0166] The above code can include block-level elements (div elements), image elements (img elements), text elements (text elements), and span tags that combine inline elements. The span tag can define the style of the inline combined elements. For example, the font of text1 can be set to font-0. The class attribute of the page element is set through the "className" attribute. The component function defines the content contained in the Bannner component. The parameters defined by the component function include src, text1, text2, onClickHandler1, and onClickHandler2, which correspond to the source image address, two text objects, and two click events used by Bannner, respectively.

[0167] It should be noted that the terms "first", "second", etc. used in this disclosure are only for distinguishing different page images, different static page description information, different page source files, different page components, etc., and should not impose any limitations on this disclosure.

[0168] It should be noted that although the steps of the method of the present disclosure are described in a specific order in the drawings, this does not require or imply that the steps must be performed in this specific order, or that all steps must be performed to achieve the desired results. Additionally or alternatively, some steps may be omitted, multiple steps may be combined into one step, and / or one step may be decomposed into multiple steps.

[0169] Furthermore, in this exemplary embodiment, a page generation device is also provided. The page generation device can be applied to a server or a terminal device. Figure 12 As shown, the page generation device 1200 may include a static page generation module 1210, a mapping information acquisition module 1220, and a first page generation module 1230.

[0170] The static page generation module 1210 is used to obtain a first page image and perform static page generation processing on the first page image to obtain first static page description information; the mapping information acquisition module 1220 is used to determine the second page source file corresponding to the second page image and obtain the reused logical mapping information in the second page source file; the similarity between the second page image and the first page image is greater than a preset value; the first page generation module 1230 is used to generate a first page source file corresponding to the first page image based on the first static page description information and the reused logical mapping information, so as to generate a target page according to the first page source file.

[0171] In an exemplary embodiment of the present disclosure, the static page generation module includes: a first page component generation unit, which is used to perform component identification processing on the first page image to obtain the corresponding first page component; a component information generation unit, which is used to perform component information generation processing on the first page component to generate component description information corresponding to the first page component; and a static page generation unit, which is used to integrate the first page component with the component description information to generate first static page description information.

[0172] In an exemplary embodiment of the present disclosure, the first page component generation unit is configured to: obtain a pre-built component recognition model; the component recognition model is trained based on a component data set and a page image set; and perform component recognition processing on the first page image through the component recognition model to determine the first page component.

[0173] In an exemplary embodiment of the present disclosure, the component information generation unit includes: a data object generation unit, used to perform object generation processing on the first page component to determine the data object corresponding to the first page component; an information integration unit, used to determine the object description information of the data object and generate component description information based on the object description information.

[0174] In an exemplary embodiment of the present disclosure, the data object generation unit includes: a component file generation unit, used to generate a layer component file corresponding to the first page component; the layer component file includes an element hierarchy of page elements in the first page component; and an object generation unit, used to generate a data object corresponding to the first page component based on the layer component file and according to the element hierarchy.

[0175] In an exemplary embodiment of the present disclosure, the object generation unit includes an initial object generation sub-unit, which is used to parse and serialize the layer component file to generate an initial data object corresponding to the page element; and an object merging sub-unit, which is used to merge the initial data object according to the element hierarchy to generate a data object.

[0176] In an exemplary embodiment of the present disclosure, the object merging subunit includes: an object determination subunit, which is used to determine the data object to be deleted and the data object to be merged from the initial data object according to the element hierarchy; a deletion layer determination subunit, which is used to determine the layer to be deleted according to the data object to be deleted, and delete the layer to be deleted; and a layer merging subunit, which is used to perform layer merging processing based on the data object to be merged to generate a data object.

[0177] In an exemplary embodiment of the present disclosure, the layer merging sub-unit is configured to: determine the object information to be merged of the data object to be merged, the object information to be merged including the coordinates of the object to be merged and the size of the object to be merged; perform layer merging processing on the data object to be merged according to the coordinates of the object to be merged and the size of the object to be merged to generate a data object; determine the object coordinates and object size of the data object according to the coordinates of the object to be merged and the size of the object to be merged, respectively.

[0178] In an exemplary embodiment of the present disclosure, the information integration unit is configured to: determine the object type of the data object, and determine the object description information of the data object according to the object type; loop through each data object, integrate the object description information of multiple data objects, and generate component description information.

[0179] In an exemplary embodiment of the present disclosure, a page generation device includes a component decoupling module, which is configured to: obtain a pre-built attribute event determination model and determine the second page component corresponding to the second page image; perform attribute event recognition processing on the second page component through the attribute event determination model to obtain object attributes and object events of data objects in the second page component; generate component functions based on the object attributes and object events to decouple the second static page description information and the reuse logic mapping information through the component function.

[0180] In an exemplary embodiment of the present disclosure, the first page generation module is configured to: determine the first page component corresponding to the first page image; determine the reused page component associated with the first page component in the second page image; determine the component logical mapping information corresponding to the reused page component based on the reused logical mapping information; the component logical mapping information includes a component function; and integrate the first static page description information with the component logical mapping information through the component function to obtain a first page source file.

[0181] The specific details of each module or unit in the above-mentioned page generating device have been described in detail in the corresponding page generating method, and thus will not be repeated here.

[0182] It should be noted that although several modules or units of the device for action execution are mentioned in the detailed description above, this division is not mandatory. In fact, according to the embodiments of the present disclosure, the features and functions of two or more modules or units described above can be concretized in one module or unit. Conversely, the features and functions of one module or unit described above can be further divided into multiple modules or units to be concretized.

[0183] Other embodiments of the present disclosure will readily occur to those skilled in the art after considering the specification and practicing the invention disclosed herein. This application is intended to cover any variations, uses, or adaptations of the present disclosure that follow the general principles of the present disclosure and include common knowledge or customary techniques in the art not disclosed herein. The description and examples are to be considered as exemplary only, with the true scope and spirit of the present disclosure being indicated by the following claims.

[0184] It should be understood that the present disclosure is not limited to the exact structures that have been described above and shown in the drawings, and that various modifications and changes can be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.< / button> < / text>

Claims

1. A page generation method, characterized in that: include: Acquire a first page image, and perform static page generation processing on the first page image to obtain first static page description information; The first static page description information refers to the front-end static UI page code; Determining a second page source file corresponding to the second page image and obtaining reused logic mapping information from the second page source file; the reused logic mapping information refers to logic code corresponding to data interactive display and page events, and the similarity between the second page image and the first page image is greater than a preset value; generating a first page source file corresponding to the first page image based on the first static page description information and the multiplexing logical mapping information, so as to generate a target page according to the first page source file; The step of generating a first page source file corresponding to the first page image based on the first static page description information and the multiplexing logical mapping information, so as to generate a target page according to the first page source file, includes: determining a first page component corresponding to the first page image; determining a reused page component in the second page image that is associated with the first page component; Determine component logic mapping information corresponding to the multiplexed page component based on the multiplexed logic mapping information; the component logic mapping information includes component functions; The first static page description information and the component logic mapping information are integrated and processed through the component function to obtain the first page source file.

2. The method according to claim 1, characterized in that The step of performing static page generation processing on the first page image to obtain first static page description information includes: Performing component recognition processing on the first page image to obtain a corresponding first page component; Performing component information generation processing on the first page component to generate component description information corresponding to the first page component; The first page component and the component description information are integrated to generate the first static page description information.

3. The method according to claim 2, characterized in that The performing component recognition processing on the first page image to obtain a corresponding first page component includes: Obtaining a pre-built component recognition model; the component recognition model is trained based on a component dataset and a page image set; Component recognition processing is performed on the first page image using the component recognition model to determine the first page component.

4. The method according to claim 2, characterized in that The performing component information generation processing on the first page component to generate component description information corresponding to the first page component includes: Performing object generation processing on the first page component to determine a data object corresponding to the first page component; Determine object description information of the data object, and generate the component description information according to the object description information.

5. The method according to claim 4, characterized in that The performing object generation processing on the first page component to determine the data object corresponding to the first page component includes: Generate a layer component file corresponding to the first page component; the layer component file includes an element hierarchy of page elements in the first page component; A data object corresponding to the first page component is generated based on the layer component file and according to the element hierarchy.

6. The method according to claim 5, characterized in that Generating a data object corresponding to the first page component based on the layer component file and according to the element hierarchy includes: Parsing and serializing the layer component file to generate an initial data object corresponding to the page element; The initial data objects are merged according to the element level to generate the data object.

7. The method according to claim 6, characterized in that The merging of the initial data objects according to the element hierarchy to generate the data object includes: Determining a data object to be deleted and a data object to be merged from the initial data object according to the element hierarchy; Determining a layer to be deleted according to the data object to be deleted, and deleting the layer to be deleted; A layer merging process is performed based on the data object to be merged to generate the data object.

8. The method according to claim 7, characterized in that The performing layer merging processing based on the data object to be merged to generate the data object includes: Determine information of the data objects to be merged, wherein the information of the data objects to be merged includes coordinates of the data objects to be merged and sizes of the data objects to be merged; Performing layer merging processing on the data objects to be merged according to the coordinates of the objects to be merged and the sizes of the objects to be merged to generate the data objects; The object coordinates and the object size of the data object are determined according to the coordinates and the size of the object to be merged, respectively.

9. The method according to claim 4, characterized in that The determining the object description information of the data object and generating the component description information according to the object description information includes: Determining an object type of the data object, and determining object description information of the data object according to the object type; Each of the data objects is traversed in a loop, and the object description information of the multiple data objects is integrated to generate the component description information.

10. The method according to claim 1, characterized in that The first static page description information includes one or more of the following: page structure information, page style information, and a cut-image file.

11. The method according to claim 1, wherein The second page source file includes second static page description information, and the method further includes: Acquire a pre-built attribute event determination model, and determine a second page component corresponding to the second page image; Performing attribute event recognition processing on the second page component using the attribute event determination model to obtain object attributes and object events of the data object in the second page component; A component function is generated according to the object attribute and the object event, so as to decouple the second static page description information and the multiplexing logic mapping information through the component function.

12. A page generating device, characterized in that: include: a static page generation module, configured to obtain a first page image and perform static page generation processing on the first page image to obtain first static page description information; The first static page description information refers to the front-end static UI page code; a mapping information acquisition module, configured to determine a second page source file corresponding to a second page image and obtain reused logic mapping information from the second page source file; the reused logic mapping information refers to logic code corresponding to data interactive display and page events, and the similarity between the second page image and the first page image is greater than a preset value; A first page generating module, configured to determine a first page component corresponding to the first page image; Determine the multiplexed page component associated with the first page component in the second page image; determine the component logical mapping information corresponding to the multiplexed page component based on the multiplexed logical mapping information; the component logical mapping information includes a component function; integrate the first static page description information with the component logical mapping information through the component function to obtain the first page source file corresponding to the first page image, so as to generate a target page based on the first page source file.

13. An electronic device, characterized in that: include: processor; as well as A memory storing computer-readable instructions, wherein the computer-readable instructions, when executed by the processor, implement the page generation method according to any one of claims 1 to 11.

14. A computer-readable storage medium having a computer program stored thereon, characterized in that: When the computer program is executed by a processor, the page generation method according to any one of claims 1 to 11 is implemented.

15. A computer program product, characterized in that The computer program product includes computer instructions, which are stored in a computer-readable storage medium; a processor of a computer device reads the computer instructions from the computer-readable storage medium, and the processor executes the computer instructions, so that the computer device executes the page generation method according to any one of claims 1 to 11.

Images