CN113703745A - Page generation method and device, computer readable storage medium and electronic equipment - Google Patents

Page generation method and device, computer readable storage medium and electronic equipment Download PDF

Info

Publication number
CN113703745A
CN113703745A CN202110220074.6A CN202110220074A CN113703745A CN 113703745 A CN113703745 A CN 113703745A CN 202110220074 A CN202110220074 A CN 202110220074A CN 113703745 A CN113703745 A CN 113703745A
Authority
CN
China
Prior art keywords
page
component
description information
image
data object
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202110220074.6A
Other languages
Chinese (zh)
Inventor
谢清贵
陈欣怡
罗宇舟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN202110220074.6A priority Critical patent/CN113703745A/en
Publication of CN113703745A publication Critical patent/CN113703745A/en
Pending legal-status Critical Current

Links

Images

Classifications

    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/34Graphical or visual programming
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90Details of database functions independent of the retrieved data types
    • G06F16/95Retrieval from the web
    • G06F16/958Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F18/00Pattern recognition
    • G06F18/20Analysing
    • G06F18/22Matching criteria, e.g. proximity measures
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/36Software reuse
    • GPHYSICS
    • G06COMPUTING; CALCULATING OR COUNTING
    • G06FELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00Arrangements for software engineering
    • G06F8/30Creation or generation of source code
    • G06F8/38Creation or generation of source code for implementing user interfaces

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • General Engineering & Computer Science (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Databases & Information Systems (AREA)
  • Bioinformatics & Cheminformatics (AREA)
  • Evolutionary Computation (AREA)
  • Evolutionary Biology (AREA)
  • Computer Vision & Pattern Recognition (AREA)
  • Bioinformatics & Computational Biology (AREA)
  • Human Computer Interaction (AREA)
  • Artificial Intelligence (AREA)
  • Life Sciences & Earth Sciences (AREA)
  • Processing Or Creating Images (AREA)

Abstract

The present disclosure provides a page generation method, apparatus, electronic device and computer-readable storage medium; relates to the technical field of front-end development. The method comprises the following steps: 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 acquiring multiplexing 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; and generating 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. The method and the device can intelligently generate the front-end page containing the business logic mapping information according to the visual manuscript image, efficiently realize the multiplexing of the logic mapping information, and greatly improve the research and development efficiency.

Description

Page generation method and device, computer readable storage medium and electronic equipment
Technical Field
The present disclosure relates to the field of front-end development technologies, and in particular, to a page generation method, a page generation apparatus, an electronic device, and a computer-readable storage medium.
Background
Front-end development is a process of creating a front-end Interface such as a Web page or an Application (App) and presenting the front-end Interface to a User, and User Interface (UI) interaction of internet products is realized through various technologies, frames and solutions of the front-end development.
Artificial Intelligence (AI) is a new technical science to study and develop theories, methods, techniques and application systems for simulating, extending and expanding human Intelligence.
With the rapid development of artificial intelligence technology, artificial intelligence technology has been widely applied to various fields. For example, front-end intelligence development is a relatively popular research direction. The front-end intelligent research and development aims to intelligently generate front-end codes in an AI mode, and research and development efficiency is improved.
It is to be noted that the information disclosed in the above background section is only for enhancement of understanding of the background of the present disclosure, and thus may include information that does not constitute prior art known to those of ordinary skill in the art.
Disclosure of Invention
The present disclosure aims to provide a page generation method, a page generation apparatus, an electronic device, and a computer-readable storage medium, so as to overcome the problem that the existing front-end code generation scheme can only generate a static display interface and cannot generate complex business logic codes including data display, user interaction, and the like to a certain extent.
According to an aspect of the present disclosure, there is provided a page generation method, 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 acquiring multiplexing 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; and generating 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.
According to an aspect of the present disclosure, there is provided a page generating apparatus including: the static page generation module is used for acquiring a first page image and performing static page generation processing on the first page image to obtain first static page description information; the mapping information acquisition module is used for determining a second page source file corresponding to the second page image and acquiring multiplexing 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; and the first page generation module is used for generating 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.
In an exemplary embodiment of the present disclosure, the static page generation module includes: the first page component generating unit is used for carrying out component identification processing on the first page image to obtain a corresponding first page component; the component information generating unit is used for generating component information for the first page component and generating component description information corresponding to the first page component; and the static page generation unit is used for integrating the first page component and the component description information to generate first static page description information.
In an exemplary embodiment of the present disclosure, the first page component generating unit is configured to: acquiring a pre-constructed component identification model; the component identification model is obtained by training based on a component data set and a page image set; and carrying out component recognition processing on the first page image through the component recognition model so as to determine a first page component.
In an exemplary embodiment of the present disclosure, the component information generating unit includes: the data object generating unit is used for carrying out object generating processing on the first page component so as to determine a data object corresponding to the first page component; and the information integration unit is used for determining the object description information of the data object and generating the component description information according to the object description information.
In an exemplary embodiment of the present disclosure, the data object generating unit includes: the component file generating unit is used for generating a layer component file corresponding to the first page component; the layer component file comprises element levels of page elements in the first page component; and the object generation unit is used for generating a data object corresponding to the first page component based on the layer component file and according to the element hierarchy.
In an exemplary embodiment of the present disclosure, the object generating unit includes an initial object generating subunit, configured to perform parsing serialization processing on the layer component file, and generate an initial data object corresponding to a page element; and the object merging subunit is used for merging the initial data objects according to the element hierarchy to generate the data objects.
In an exemplary embodiment of the present disclosure, the object merging subunit includes: the object determining subunit is used for determining the data object to be deleted and the data object to be merged from the initial data object according to the element hierarchy; the layer deleting determining subunit is used for determining the layer to be deleted according to the data object to be deleted and deleting the layer to be deleted; and the layer merging subunit is used for performing layer merging processing on the basis of the data objects to be merged to generate the data objects.
In an exemplary embodiment of the present disclosure, the layer merging subunit is configured to: determining object information to be merged of the data objects to be merged, wherein the object information to be merged comprises coordinates of the objects to be merged and sizes of the objects to be merged; carrying out 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 data objects; and determining the object coordinate and the object size of the data object according to the object coordinate to be combined and the object size to be combined respectively.
In an exemplary embodiment of the present disclosure, the information integrating unit is configured to: determining the object type of the data object, and determining the object description information of the data object according to the object type; and circularly traversing each data object, integrating the object description information of the plurality of data objects, and generating the component description information.
In an exemplary embodiment of the present disclosure, the page generating apparatus includes a component decoupling module configured to: acquiring a pre-constructed attribute event determination model, and determining a second page component corresponding to a second page image; performing attribute event identification processing on the second page component through the attribute event determination model to obtain an object attribute and an object event of a data object in the second page component; and generating a component function 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.
In an exemplary embodiment of the present disclosure, the first page generation module is configured to: determining a first page component corresponding to the first page image; determining a multiplexed page component in the second page image associated with the first page component; determining component logic mapping information corresponding to the multiplexing page component based on the multiplexing logic mapping information; the component logical mapping information includes component functions; and integrating the first static page description information and the component logic mapping information through a component function to obtain a first page source file.
According to an aspect of the present disclosure, there is provided an electronic device including: a processor; and a memory for storing executable instructions of the processor; wherein the processor is configured to perform the method of any one of the above via execution of the executable instructions.
According to an aspect of the present disclosure, there is provided a computer readable storage medium having stored thereon a computer program which, when executed by a processor, implements the method of any one of the above.
According to an aspect of the present disclosure, there is provided a computer program product or computer program comprising computer instructions stored in a computer readable storage medium. The processor of the computer device reads the computer instructions from the computer-readable storage medium, and executes the computer instructions, so that the computer device executes the data importing method of the graph database provided in the above embodiments.
Exemplary embodiments of the present disclosure may have some or all of the following benefits:
in the page generation method provided by an exemplary embodiment of the present disclosure, static page generation processing is performed on a first page image to obtain first static page description information, a second page source file corresponding to a second page image is obtained, the second page source file includes multiplexing logic 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 multiplexing logic mapping information, so that an interactive target page can be generated according to the first page source file. On one hand, when the first page image is highly similar to the second page image, multiplexing logic mapping information in the second page source file can be directly multiplexed in the generation process of the first page source file, and zero development of the first page logic code can be basically realized. On the other hand, for the development of a new page, the static UI description information can be quickly generated, so that a developer only pays attention to the logic mapping information part, and the development workload is greatly reduced.
It is to be understood that both the foregoing general description and the following detailed description are exemplary and explanatory only and are not restrictive of the disclosure.
Drawings
The accompanying drawings, which are incorporated in and constitute a part of this specification, illustrate embodiments consistent with the present disclosure and together with the description, serve to explain the principles of the disclosure. It is to be understood that the drawings in the following description are merely exemplary of the disclosure, and that other drawings may be derived from those drawings by one of ordinary skill in the art without the exercise of inventive faculty.
Fig. 1 is a schematic diagram illustrating an exemplary system architecture to which a page generation method and apparatus according to an embodiment of the present disclosure may be applied.
FIG. 2 illustrates a schematic structural diagram of a computer system suitable for use in implementing the electronic device of an embodiment of the present disclosure.
FIG. 3 schematically shows a flow diagram of a page generation method according to one embodiment of the present disclosure.
FIG. 4 schematically illustrates an overall flow diagram for generating an interactable front-end page according to one embodiment of the present disclosure.
FIG. 5 schematically illustrates a front-end page view with similar page heights according to one embodiment of the present disclosure.
FIG. 6 schematically illustrates a front-end page view with similar module heights according to one embodiment of the present disclosure.
FIG. 7 schematically shows a flowchart for generating first static page description information from a first page image according to one embodiment of the present disclosure.
FIG. 8 schematically shows a flow diagram of component recognition processing on a first page image to determine first page components, according to one embodiment of the disclosure.
FIG. 9 schematically illustrates an output result diagram of a component identification process according to one embodiment of the present disclosure.
FIG. 10 schematically illustrates a flow diagram for decoupling second static page description information and multiplexing logic mapping information according to one embodiment of the present disclosure.
FIG. 11 schematically shows a flow diagram for generating a first page source file according to one embodiment of the present disclosure.
Fig. 12 schematically shows a structure of a page generating apparatus according to an embodiment of the present disclosure.
Detailed Description
Example embodiments will now be described more fully with reference to the accompanying drawings. Example embodiments may, however, be embodied in many different forms and should not be construed as limited to the examples set forth herein; rather, these embodiments are provided so that this disclosure will be thorough and complete, and will fully convey the concept of 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, numerous specific details are provided to give a thorough understanding of embodiments of the disclosure. One skilled in the relevant art will recognize, however, that the subject matter of the present disclosure can be practiced without one or more of the specific details, or with other methods, components, devices, steps, and the like. In other instances, well-known technical solutions have not been shown or described in detail to avoid obscuring aspects of the present disclosure.
Furthermore, the drawings are merely schematic illustrations of the present disclosure and are not necessarily drawn to scale. The same reference numerals in the drawings denote the same or similar parts, and thus their repetitive description will be omitted. Some of the block diagrams shown in the figures are functional entities and do not necessarily correspond to physically or logically separate entities. These functional entities may be implemented in the form of software, or in one or more hardware modules or integrated circuits, or in different networks and/or processor devices and/or microcontroller devices.
Artificial Intelligence (AI) is a theory, method, technique and application system that uses a digital computer or a machine controlled by a digital computer to simulate, extend and expand human Intelligence, perceive the environment, acquire knowledge and use the knowledge to obtain the best results. In other words, artificial intelligence is a comprehensive technique of computer science that attempts to understand the essence of intelligence and produce a new intelligent machine that can react in a manner similar to human intelligence. Artificial intelligence is the research of the design principle and the realization method of various intelligent machines, so that the machines have the functions of perception, reasoning and decision making.
The artificial intelligence technology is a comprehensive subject and relates to the field of extensive technology, namely the technology of a hardware level and the technology of a software level. The artificial intelligence infrastructure generally includes technologies such as sensors, dedicated artificial intelligence chips, cloud computing, distributed storage, big data processing technologies, operation/interaction systems, mechatronics, and the like. The artificial intelligence software technology mainly comprises a computer vision technology, a voice processing technology, a natural language processing technology, machine learning/deep learning and the like.
With the research and progress of artificial intelligence technology, the artificial intelligence technology is developed and applied in a plurality of fields, such as common smart homes, smart wearable devices, virtual assistants, smart speakers, smart marketing, unmanned driving, automatic driving, unmanned aerial vehicles, robots, smart medical care, smart customer service, and the like.
The scheme provided by the embodiment of the application relates to the technologies of artificial intelligence page generation and the like, and is specifically explained by the following embodiments:
fig. 1 is a schematic diagram illustrating a system architecture of an exemplary application environment to which a page generation method and apparatus according to an embodiment of the present disclosure may be applied.
As shown in fig. 1, the system architecture 100 may include one or more of terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 serves as a medium for providing communication links between the terminal devices 101, 102, 103 and the server 105. Network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, to name a few. The terminal devices 101, 102, 103 may be various electronic devices having a display screen, including but not limited to desktop computers, portable computers, smart phones, tablet computers, and the like. It should be understood that the number of terminal devices, networks, and servers in fig. 1 is merely illustrative. There may be any number of terminal devices, networks, and servers, as desired for implementation. For example, server 105 may be a server cluster comprised of multiple servers, or the like.
The page generation method provided by the embodiment of the present disclosure is generally executed by the server 105, and accordingly, the page generation apparatus is generally disposed in the server 105. However, it is easily understood by those skilled in the art that the page generating method provided in the embodiment of the present disclosure may also be executed by the terminal devices 101, 102, and 103, and accordingly, the page generating apparatus may also be disposed in the terminal devices 101, 102, and 103, which is not particularly limited in this exemplary embodiment. For example, in an exemplary embodiment, a user may upload a visual manuscript image to the server 105 through the terminal devices 101, 102, 103, and the server 105 generates the visual manuscript image into a first page source file containing static front-end page description information and logical mapping information such as data presentation and user interaction through the page generation method provided by the embodiment of the present disclosure, so as to display corresponding target pages on the terminal devices 101, 102, 103 according to the generated first page source file.
FIG. 2 illustrates a schematic structural diagram of a computer system suitable for use in implementing the electronic device of an embodiment of the present disclosure.
It should be noted that the computer system 200 of the electronic device shown in fig. 2 is only an example, and should not bring any limitation to the functions and the scope of the application of the embodiments of the present disclosure.
As shown in fig. 2, the computer system 200 includes a Central Processing Unit (CPU)201 that can perform various appropriate actions and processes in accordance with a program stored in a Read Only Memory (ROM)202 or a program loaded from a storage section 208 into a Random Access Memory (RAM) 203. In the RAM 203, various programs and data necessary for system operation are also stored. 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 bus 204.
The following components are connected to the I/O interface 205: an input portion 206 including a keyboard, a mouse, and the like; an output section 207 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and the like, and a speaker; a storage section 208 including a hard disk and the like; and a communication section 209 including a network interface card such as a LAN card, a modem, or the like. 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, a semiconductor memory, or the like is mounted on the drive 210 as necessary, so that a computer program read out therefrom is mounted into the storage section 208 as necessary.
In particular, the processes described below with reference to the flowcharts may be implemented as computer software programs, according to embodiments of the present disclosure. For example, embodiments of the present disclosure include a computer program product comprising a computer program embodied on a computer readable medium, the computer program comprising program code for performing the method illustrated in the flow chart. In such an embodiment, the computer program may be downloaded and installed from a network through the communication section 209 and/or installed from the removable medium 211. The computer program, when executed by a Central Processing Unit (CPU)201, performs various functions defined in the methods and apparatus of the present application. In some embodiments, the computer system 200 may further include an AI (Artificial Intelligence) processor for processing computing operations related to machine learning.
It should be noted that the computer readable media shown in the present disclosure may be computer readable signal media or computer readable storage media or any combination of the two. A computer readable storage medium may be, for example, but not limited to, an electronic, magnetic, optical, electromagnetic, infrared, or semiconductor system, apparatus, or device, or any combination of the foregoing. More specific examples of the computer readable storage medium may include, but are not limited to: an electrical connection having one or more wires, a portable computer diskette, 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 disc read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination of the foregoing. In the present disclosure, a computer readable storage medium may be any tangible medium that can contain, or store a program for use by or in connection with an instruction execution system, apparatus, or device. In contrast, in the present disclosure, a computer-readable signal medium may include a propagated data signal with computer-readable program code embodied therein, for example, in baseband or as part of a carrier wave. Such a propagated data signal may take many forms, including, but not limited to, electro-magnetic, optical, or any suitable combination thereof. A computer readable signal medium may also be any computer readable medium that is not a computer readable storage medium and that can communicate, propagate, or transport a program for use by or in connection 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, wire, fiber optic cable, RF, etc., or any suitable combination of the foregoing.
The flowchart and block diagrams in the figures illustrate the architecture, functionality, and operation of possible implementations of systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each block in the flowchart or block diagrams may represent a module, segment, or portion of code, which comprises one or more executable instructions for implementing the specified logical function(s). It should also be noted that, in some alternative implementations, the functions noted in the block may occur out of the order noted in the figures. For example, two blocks shown in succession may, in fact, be executed substantially concurrently, or the blocks may sometimes be executed in the reverse order, depending upon the functionality involved. It will also be noted that each block of the block diagrams or flowchart illustration, and combinations of blocks in the block diagrams or flowchart illustration, can be implemented by special purpose hardware-based systems which perform the specified functions or acts, or combinations of special purpose hardware and computer instructions.
The units described in the embodiments of the present disclosure may be implemented by software, or may be implemented by hardware, and the described units may also be disposed in a processor. Wherein the names of the elements do not in some way constitute a limitation on the elements themselves.
As another aspect, the present application also provides a computer-readable medium, which may be contained in the electronic device described in the above embodiments; or may exist separately without being assembled into the electronic device. The computer readable medium carries one or more programs which, when executed by an electronic device, cause the electronic device to implement the method as described in the embodiments below. For example, the electronic device may implement the steps shown in fig. 3 to 4, fig. 7 to 11, and the like.
The technical solution of the embodiment of the present disclosure is explained in detail below:
with the increasing heat of artificial intelligence, front-end intelligence research and development are gradually becoming the research direction of front-end developers. Currently, some schemes for intelligently generating front page codes by means of AI have been proposed.
In one technical solution, image cook (imgcook) may be used to develop front-end code, and imgcook is a tool dedicated to processing Sketch files, Photoshop file format (PSD), and static pictures. The imgcook can take visual manuscripts in the forms of Sketch files, PSD pictures, static pictures and the like as input, and generate maintainable front-end codes including view codes, data field binding, component codes and the like through one key of an intelligent technology.
In another technical scheme, the development of the front-end code is carried out in a visual compiling mode. The visual compiling aims to enable a machine to understand a visual draft design, the visual draft design is translated into a computer language through an algorithm, and the visual compiling method only supports visual draft input in a Sketch format at present.
The two schemes are to input visual manuscripts, intelligently identify visual elements through an identification system and convert the visual elements into Web front-end codes, and front-end developers do not need to write UI codes manually. The problem scenario solved by the two solutions described above is the automatic restoration of the layer from visual drafts to front-end static UI code.
However, a complete front-end page can run normally, not only with UI presentation, but also with complex business logic such as data presentation and user interaction. The front-end developer needs to develop logic code, such as data object binding, event binding, and user interaction, based on the generated UI code. For any one requirement, the developer needs to perform repeated logic code development.
Based on one or more of the problems described above, the present exemplary embodiment provides a page generation method. The page generating method may be applied to the server 105, and may also be applied to one or more of the terminal devices 101, 102, and 103, which is not particularly limited in this exemplary embodiment. Referring to fig. 3, the page generation method may include the following steps S310 to S330:
step S310, a first page image is obtained, static page generation processing is carried out on the first page image, and first static page description information is obtained.
S320, determining a second page source file corresponding to the second page image, and acquiring multiplexing 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.
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 that a target page is generated according to the first page source file.
In the page generating method provided in this exemplary embodiment, static page generation processing is performed on a first page image to obtain first static page description information, a second page source file corresponding to a second page image is obtained, the second page source file includes multiplexing 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 multiplexing logical mapping information, so that an interactive target page can be generated according to the first page source file. On one hand, when the first page image is highly similar to the second page image, multiplexing logic mapping information in the second page source file can be directly multiplexed in the generation process of the first page source file, and zero development of the first page logic code can be basically realized. On the other hand, for the development of a new page, the static UI description information can be quickly generated, so that a developer only pays attention to the logic mapping information part, and the development workload is greatly reduced.
The above steps of the present exemplary embodiment will be described in more detail below.
In step S310, a first page image is acquired, and static page generation processing is performed on the first page image, so as to obtain first static page description information.
In this example embodiment, the page image may be an image from 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 the designer in an internet scene, the design drawing is used as an input for development of a Web page (Web) front end, and a developer develops a page that can be displayed and interacted on the Web end according to the design drawing. The page image may be a visual script in the form of a Sketch, PSD, or still picture. The first page image may be an image to be subjected to page generation processing. The static page generation process may be a process of generating a front-end static UI page from a page image. The static page description information may be information describing a structure of the front-end static UI page, i.e., the static page description information may be front-end static UI page code that does not include logic code. The first static page description information may be static page description information corresponding to the first page image.
In the front-end page development process, a front-end designer can design a visual draft image of a front-end page according to product requirements and take the visual draft image as a page image. Wherein, the product demand can be the function reflection of the user demand on a certain product or service, and the function points are proved to be scientific and feasible technically, resources, capabilities and benefits. Referring to FIG. 4, FIG. 4 schematically illustrates an overall flow diagram for generating an interactable front-end page according to one embodiment of the present disclosure. When the page generation processing is performed on the first page image, the first page image 410 may be acquired first. In step S410, static page generation processing is performed on the acquired first page image 410 to obtain first static page description information 430 corresponding to the first page image.
Specifically, the static page description information may include page structure information, page style information, a cutout file, and the like. The page structure information may be information including a basic structure tag (i.e., a skeleton tag) of the web page, for example, the page structure information may be a structure code written in hypertext Markup Language (HTML); the page structure information may also be a structure code written by Extensible Markup Language (XML); the page structure information may be a structure code written by Extensible HyperText Markup Language (XHTML); the page structure information may also be a structure code written in syntax extension language (JSX) of JavaScript. The page style information may be information defining how to display the page elements in the structure code, i.e., the page style information may define the style of the page elements, such as color, position, size, etc. For example, the page Style information may be Style codes written in Cascading Style Sheets (CSS). The image cutting file can be a picture which is cut according to the page design draft and used for making the page, and the image cutting can be beneficial to interaction and form good visual sense. By way of example, the first static page description information 430 may include an "index. js" file storing page structure information; a "index. less" file storing page style information; the "images" file of the cut image file is stored.
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; the similarity between the second page image and the first page image is greater than a preset value.
In this example embodiment, the second page image may be an image that has generated a corresponding page source file. The preset value may be a preset threshold value. The second page image may be an image having a similarity greater than a preset value with the first page image. For example, the first page image may be highly similar to the entire page of the second page image, the height of the portion of the module between the first page image and the second page image, and so on. 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 a second page. The second page source file may include second static page description information and multiplexing logic mapping information. The multiplexing logical mapping information may be a logical mapping information that is mutually multiplexed between the first page and the second page. For example, the logical mapping information may include a data interaction presentation code, a code corresponding to a page event, and the like. The page event may be a click event, a hover event, an input event, and the like. 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 is decoupled from the multiplexing logic mapping information. Code coupling may be a measure of how tightly interconnected different modules within a software structure are. The tighter the connection between modules, the stronger its coupling. The principle of code writing in the code development process is "high cohesion, low coupling". Decoupling may refer to decoupling code modules from each other. The second static page description information and the multiplexing logic mapping information are decoupled, and the association relationship between the second static page description information and the multiplexing logic mapping information can be released.
Before generating the first page source file corresponding to the first page image, a second page source file of a second page image having a similarity greater than a preset value with the first page image may be obtained. For example, the similarity of images can be determined by identifying the width and height of different images, and by comparing the width and height of the images. Because the similarity between the first page image and the second page image is high and the whole functions are consistent, the first page source file can be reused in the generation process of the first page source file. The similar page image may be a page image in which the entire page is highly similar, or may be a page image in which some modules in the page are highly similar. Referring to fig. 5, fig. 5 schematically illustrates a front-end page view with similar page heights according to one embodiment of the present disclosure. The entire page height of the page image 510 in fig. 5(a) is similar to the entire page height of the page image 520 in fig. 5 (b). Additionally, referring to fig. 6, fig. 6 schematically illustrates a front-end page view with similar module heights according to one embodiment of the present disclosure. The module 610 included in the page image of fig. 6(a) is similar in height to the module 620 included in the page image of fig. 6 (b).
Because the similarity between the second page image and the first page image is greater than the preset value, that is, the multiplexing logic mapping information in the second page source file can be multiplexed into the generation process of the first page source file, the obtained multiplexing logic mapping information in the second page source file can be applied to the generation process of the first page source file.
The specific generation process of the second page source file is as follows: referring to fig. 4, a second page image 420 is obtained, and in step S420, static page generation processing is performed on the second page image 420, so as to obtain second static page description information 440 corresponding to the second page image 420. Since the page image similar to the second page image does not exist before the second page source file is generated, the logic mapping information corresponding to the second page image can be written by the developer based on the static page description information, and the written logic mapping information is used as the multiplexing logic mapping information 450, so that the logic mapping information can be subsequently multiplexed in the generation process of the page source files of other page images similar to the first page image. The second static page description information 440 and the programmed multiplexing logic mapping information 450 are collectively referred to as a second page source file 460.
Those skilled in the art will readily understand that the process of generating the second static page description information from the second page image can also be performed in the manner of the static page generation process in the present disclosure, and the second static page description information generated in this manner is pluggable front-end UI code decoupled from the multiplexing logic mapping information.
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 to generate a target page according to the first page source file.
In this example embodiment, the first page source file may be a page source file including logic code generated from the first page image. The target page may be a front-end page that is generated from the first page source file to be interacted with.
Since the first page image is similar to the second page image, the multiplexing logical mapping information corresponding to the second page image can be multiplexed into the logical code of the first page image. After the first static page description information corresponding to the first page image is generated, multiplexing logic mapping information contained in a second page source file can be acquired, and the first static page description information and the multiplexing logic mapping information are directly integrated to generate a first page source file corresponding to the first page image.
In addition, after the second page source file is obtained, the second static page description information can be directly replaced by the first static page description information, and the first static page description information and multiplexing logic mapping information in the second page source file are integrated to generate a 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, page events and the like, and a user can directly use a target page generated according to the first page source file to perform related operations such as interaction and the like. Referring to fig. 4, the second static page description information 440 in the second page source file 460 may be replaced with the first static page description information 430 and a first page source file 470 generated in conjunction with the multiplexing logical mapping information 450.
It should be noted that if it is not determined that the page image with the similarity to the first page image being greater than the preset value, it indicates that the page source files corresponding to other page images cannot be multiplexed with the first page source file. Therefore, after the first static page description information corresponding to the first page image is generated through the static page generation processing procedure, a developer is required to develop and write the logic mapping information of the first page image.
For example, the first static page description information corresponding to the first page image may be generated by the following steps.
In an example embodiment of the present disclosure, component recognition processing is performed on a 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; and integrating the first page component and the component description information to generate first static page description information.
Among them, the component recognition processing may be a process of recognizing the first page component contained in the first page image. A page component may be code in a page that has a single functional module and is reusable. The first page component may be a page component contained in the first page image. The component information generation processing may be a processing procedure of generating description information corresponding to the first page component. The component description information may be a code fragment describing the specific functions implemented by the page components in the first page.
Referring to FIG. 7, FIG. 7 schematically illustrates a flow diagram for generating first static page description information from a first page image, according to one embodiment of the disclosure. In step S710, after the first page image is acquired, component recognition processing may be performed on the first page to obtain a first page component included in the first page image. In step S720, component information generation processing is performed on the first page component, and component description information corresponding to the first page component is generated. Upon identifying the first page component in the first page image, component description information for the first page component may 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 first static page description information. After all the first page components in the first page image are determined and the component description information corresponding to each first page component is generated, all the first page components and the component description information can be integrated to form complete first static page description information.
Through the static page description information processing mode, the first page image can be used as input, corresponding Web front end UI codes, namely the first static page description information, can be automatically generated, and the UI codes are pluggable static page codes which are mutually decoupled with the business logic codes.
For example, a first page component in a first page image may be identified by the following steps.
In an example embodiment of the present disclosure, a pre-built component identification model is obtained; the component identification model is obtained by training based on a component data set and a page image set; and carrying out component recognition processing on the first page image through the component recognition model so as to determine a first page component.
The component recognition model may be a model for recognizing a page component included in the page image, and the component recognition model may be a model trained by a deep learning technique. The component data set may be a collection of components made up of business components. The page image set may be an image set of page visuals corresponding to business components.
Referring to FIG. 8, FIG. 8 schematically illustrates a flow diagram for component recognition processing of a first page image to determine first page components, according to one embodiment of the disclosure. In step S810, a pre-constructed component identification model is acquired; the component recognition model is trained based on the component data set and the page image set. Before the first page component recognition is performed, a pre-constructed component recognition model can be obtained, specifically, the component recognition model can take an existing service component and a corresponding visual draft image as a training data set, a deep learning neural network model is established, and the established deep learning neural network model is trained through the training data set to obtain the component recognition model. For example, a target detection algorithm model based on a Once-Only Look (YOLO) algorithm, that is, a target detection algorithm model combining target area prediction and target category prediction, may be established as the component identification model.
It is easily understood by those skilled in the art that the present disclosure may also establish a component recognition model based on other target detection algorithms to perform component recognition processing on the first page image, and the present disclosure does not impose any special limitation on the detection algorithm used by the component recognition model.
In step S820, component recognition processing is performed on the first page image by the component recognition model to determine a first page component. And taking the first page image as the input of the component recognition model, carrying out component recognition processing on the first page image by the component recognition model, and outputting the corresponding component type and confidence coefficient. And determining a first page component contained in the first page image according to the output component type and the confidence coefficient.
Referring to fig. 9, fig. 9 schematically illustrates an output result diagram of a component identification process according to one embodiment of the present disclosure. The first page image 900 is input to a component recognition model, which may output the component type and confidence determined from the first page image. For example, the output content corresponding to the "total playoff" poster area 910 may be "now-activity-business-banner-info: 0.93 ", the output content corresponding to the anchor ranking region 920 may be" now-activity-business-anchor-info: 0.92 ", the output content corresponding to the anchor avatar area 930 may be" now-activity-ui-user: 0.44". According to the output component type and the confidence level, the fact that the banner poster (banner) component and the anchor point (anchor) component are contained in the first page image can be determined.
For example, the component description information of the first page component may be generated by the following steps.
In an example embodiment of the present disclosure, an object generation process is performed on a first page component to determine a data object corresponding to the first page component; object description information of the data object is determined, and component description information is generated according to the object description information.
Wherein the object generation process may be a process of generating a corresponding actionable data object from the first page component. The data objects may be data objects that are operable, and related page operations may be performed based on the data objects. For example, the data object may be a Javascript object (js object). The object description information may be a code segment composed of object attributes or object events of the data object, or the like.
Specifically, after all the first page components in the first page image are identified, the object generation processing may be performed on the first page components to generate an operable data object corresponding to each first page component. After the data objects corresponding to the first page component are generated, object description information corresponding to each data object may be determined. Since the first page component may contain one or more data objects, when the first page component contains a plurality of data objects, the object description information of the plurality of data objects may be integrated to form the component description information of the first page component.
In an example embodiment of the present disclosure, a layer component file corresponding to a first page component is generated; the layer component file comprises element levels of page elements in the first page component; and generating a data object corresponding to the first page component based on the layer component file and according to the element hierarchy.
The layer component file may be a file containing layer information of page elements in the first page component. The page elements may be elements contained in a page, for example, the page elements may be text elements, paragraph elements, poster art elements, anchor elements, and the like. The element hierarchy may be a hierarchy of layers in which the page elements are located, and different page elements may be located in different layers corresponding to different element hierarchies.
The visual designer also needs to comply with the fixed component specification when designing the visual draft, for example, the visual draft may be an image containing layer information of the component. After the first page component in the first page image is identified, a layer component file corresponding to the first page component can be generated according to layer information contained in the first page component. For example, the layer component file may be in a Sketch file format. Because the first page component may include one or more page elements, the generated layer component file includes an element hierarchy of each page element. After the element hierarchy of each page element is determined, a data object corresponding to the first page component may be generated based on the layer component file.
In an example embodiment of the present disclosure, parsing and serializing a layer component file to generate an initial data object corresponding to a page element; the initial data objects are merged according to the element hierarchy to generate data objects.
The parsing serialization processing may be a process of parsing and serializing the layer component file. Serialization (Serialization) can be the process of converting the state information of an object into a form that can be stored or transmitted, e.g., Serialization can be the process of converting a graph component file into an initial data object. The initial data object may be an object obtained by performing parsing serialization processing on the layer component file, and the initial data object does not make the object type explicit. The merge process may be a process of merging some data objects that do not have operational events to generate operational data objects.
Specifically, for generating the layer component file, the layer component file may be parsed and serialized according to the element hierarchy of the page element, so as to generate an initial data object. For example, when the layer component file is a Sketch file, the Sketch file may be parsed and serialized to generate an initial data object. The initial data Object may be an Object, which may be a data carrier for storing Object properties and sub-objects etc. After the initial data object is generated, because some repeated elements or useless elements and the like which do not contain object events exist in the initial data object, the initial data object can be merged according to the element hierarchy, and operable data objects are obtained.
In an example embodiment of the present disclosure, a data object to be deleted and a data object to be merged are determined from initial data objects according to an element hierarchy; determining a layer to be deleted according to the data object to be deleted, and deleting the layer to be deleted; and carrying out layer merging processing based on the data object to be merged to generate the data object.
The data object to be deleted may be a hidden page element in the first page component or an initial data object corresponding to a useless page element. The data object to be merged may be an initial data object corresponding to some repeated page elements in the first page component, or may be an initial data object corresponding to a sub-element within the same page element. The layer to be deleted may be a layer determined according to the data object to be deleted. The layer merging process may be a process of merging layers corresponding to data objects to be merged.
Specifically, the data objects to be merged are determined from the initial data objects according to the element hierarchy. For example, some duplicate page elements in the first page component, and sub-elements within the same page element, may be determined as data objects to be merged. Referring to fig. 9, the initial data object corresponding to the two text elements may be determined as the data object to be merged by including the "leader board" and "score" texts in the page component 930 in fig. 9. In the lead contribution list in fig. 9, there are multiple repeated user avatars, and the initial data objects corresponding to these user avatar elements may be determined as objects to be merged.
In addition, the data object to be deleted is also determined from the initial data object according to the element hierarchy. Because the page component may include multiple layers, hidden page elements and useless page elements may exist in different layers, and for page code development, the page elements are all useless page elements, and therefore, initial data objects corresponding to the page elements may be determined as data objects to be deleted. Determining a layer to be deleted according to a layer in which a data object to be deleted is located, for example, if one layer only includes one hidden data object, determining the layer in which the hidden data object is located as the layer to be deleted, and deleting the layer to be deleted.
After the deleting operation of the layer to be deleted is completed, the layer merging operation may be performed on the data objects to be merged according to the respective layers corresponding to the data objects to be merged, and an operable data object may be generated.
In one example embodiment of the present disclosure, object information to be merged of a data object to be merged is determined, the object information to be merged including object coordinates to be merged and object size to be merged; carrying out 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 data objects; and determining the object coordinate and the object size of the data object according to the object coordinate to be combined and the object size to be combined respectively.
The information of the object to be merged may be corresponding information for displaying the data object to be merged in the page. The coordinates of the object to be merged may be position coordinates where the object to be merged is located in the page, for example, the coordinates of the object to be merged may include (x, y) coordinates of the object to be merged. The size of the object to be merged may be a size of the object to be merged displayed in the page, for example, the size of the object to be merged may include a width and a height of the object to be merged, and the like. The object coordinates may be the location coordinates where the data object is located in the page, for example, the object coordinates may include (x, y) coordinates of the data object. The object size may be the size of the data object displayed in the page, for example, the object size may include the width and height of the data object, and so on.
Specifically, before the layer merging process is performed on the data object to be merged, object information to be merged of the data object to be merged, for example, position coordinates of the data object to be merged in the page, width and height of the object, and the like, may be obtained first. And 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, and generating operable data objects after the layer merging processing. The object coordinates and the size of the generated data object can be respectively determined according to the coordinates and the size of the data object to be merged.
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 according to the object type; and circularly traversing each data object, integrating the object description information of the plurality of data objects, and generating the component description information. The object type may be a specific type corresponding to the data object.
In particular, after the actionable data objects are generated, the object type of each data object may be determined. For example, the layer and the object type corresponding to the data object may be determined by a recognition model such as text, picture, etc. After the object type of the data object is determined, the object description information corresponding to the data object can be determined through pattern recognition, a business logic clustering analysis model and the like. For example, data objects may include < p > element type, < text > element type, < image > element type, < button > element type, and so on, and different types of data objects may correspond to code fragments of different functions. The object attribute, the object event and the like of the data object can be determined according to the object type, and the code segment containing the object attribute and the object event is used as object description information. Referring to fig. 9, the rank "30" is a dynamically changing value and a variable "userrank" may be generated to define the rank. In addition, the layer information of the picture type in the layer component file can be exported to be a cut picture file.
Because a page component may include a plurality of data objects, the object description information corresponding to each data object may be determined, each data object is traversed, the object description information of all the data objects is integrated, and the component description information corresponding to the page component may be obtained. The component description information may include front-end HTML structure information and style information.
For example, the following is an exemplary piece of code for a certain page component.
export default class extends Component{
onRuleClick=()=>{
Log ('activity rule click'); }
onAwardClick=()=>{
Log ('campaign reward click'); }
render(){
return(
<div className="banner-demo">
<div className="banner-demo-item">
< h3 className ═ banner-demo-lbl "> head diagram/campaign reward/campaign rule </h3>
<Banner src="https://xxx/img/banner_4c2aa138.png"
text1 ═ Activity rule'
text2 ═ active reward'
onClickHandler1={onRuleClick}
onClickHandler2={onAwardClick}
/>
</div>
</div>);
}
}
The code fragment defines the component attributes and component events corresponding to the Banner page components. Component properties and component events are determined from data objects contained in the page components. A page may include a variety of elements, such as a block-level element (div element), a title element (h3 element), and a text element (text element), each corresponding to a respective data object, and a page component may include a plurality of data objects. In the page component, object properties of different data objects can be defined, as in the Banner page component, the image source address of the image used by Banner, the two text objects contained by Banner, and the two click events "onRuleClick" and "onAwardCick" are defined by the src property.
In an example embodiment of the present disclosure, a pre-constructed attribute event determination model is obtained, and a second page component corresponding to a second page image is determined; performing attribute event identification processing on the second page component through the attribute event determination model to obtain an object attribute and an object event of a data object in the second page component; and generating a component function 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.
The attribute event determination model may be a model for determining object attributes and object events of data objects in the page component. The second page component may be a page component contained in the second page image. The object properties may be related properties of the data object. The object event may be an event associated with a data object. The component functions may be functions that define a component data protocol. The page components contain data objects that can be parameters of the component functions.
Referring to fig. 10, fig. 10 schematically illustrates a flow diagram for decoupling second static page description information and multiplexing logic mapping information according to one embodiment of the present disclosure. In step S1010, a pre-constructed attribute event determination model is obtained, and a second page component corresponding to the second page image is determined. The attribute event determination model may be a model obtained by performing cluster analysis processing on a plurality of data objects of different types. In step S1020, the second page component is input into the attribute event determination model, and the attribute event identification processing is performed on the second page component by using the attribute event determination model, so as to determine the object attribute and the object event of the data object included in the second page component. In step S1030, a component function may be generated according to the determined 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. Since the object properties and object events of the data object can be exposed by the component functions, the generated second static page description information can be decoupled from the logical mapping information by the component functions, i.e. pluggable static page description information is generated.
In an example embodiment of the present disclosure, a first page component corresponding to a first page image is determined; determining a multiplexed page component in the second page image associated with the first page component; determining component logic mapping information corresponding to the multiplexing page component based on the multiplexing logic mapping information; the component logical mapping information includes component functions; and integrating the first static page description information and the component logic mapping information through a component function to obtain a first page source file.
Wherein the first page component may be a page component contained in the first page. The reuse page component may be a page component determined from the second page according to the first page component, and the first page component and the reuse page component have similarities, for example, the reuse page component and the first page component have the same object attribute and object event. The component logical mapping information may be logical mapping information corresponding to a multiplexed page component. The component functions may be functions that define component properties and component events with which the page components are associated.
Referring to FIG. 11, FIG. 11 schematically illustrates a flow diagram for generating a first page source file, according to one embodiment of the present disclosure. In step S1110, a first page component corresponding to the first page image is determined. After the first page image is acquired, component identification processing can be performed on the first page image, and a page component contained in the first page image, namely the first page component, is determined. In step S1120, a multiplexed page component associated with the first page component in the second page image is determined. And acquiring a second page image, performing component identification processing on the second page image, and determining a second page component corresponding to the second page image. A multiplexed page component associated with the first page component is determined from the second page components. The multiplexed page component is similar to the first page component, e.g., may have the same component properties and component events, etc. as the first page component. In step S1130, component logical mapping information corresponding to the multiplexed page component is determined from the multiplexed logical mapping information. The component logical mapping information is defined by the form of a component function, and the object attributes and the object events of the page components are included in the component logical mapping information. In step S1140, the first static page description information and the component logic mapping information are integrated through a component function to obtain a first page source file. In one mode, the generated first static page description information is used for replacing the second static page description information, and the static page description information comprises a page structure code, a page style code and a map cutting file of a front-end UI page, so that the first static page description information is used for replacing the second static page description information, static page contents contained in the first page image completely cover the static page contents in the second page image, and a first page source file corresponding to the first page image is obtained. In another mode, the first static page description information and the component logic mapping information may be stored in a new storage location, and the two are integrated to obtain a first page source file corresponding to the first page image.
For example, the following description takes part of the contents of the Bannner component in the first page source document as an example.
export const Banner=({src,text1,text2,onClickHandler1,onClickHandler2})=>{
return{
< div className ═ grouping-8-cD 86 ">)
< img className ═ semi-finals-band 1ogo-DDD3"
src={src}/>
< div className ═ rectangle-1781 >
< div className ═ formation-12-47 a0 [ -onClick ═ onClick Handler1} >)
< div className ═ rectangle-DAE 5 >
< div className ═ Activity rule-D366' >
<span className="font-0">{text1}</span>
</div>
</div>
< div className ═ group _12_8EC41 [ -onClick handler2} > ]
< div className ═ rectangle-8 FDD1"> < div >
< div className ═ Activities reward-C04A >
<span className="font-0">{text2}</span>
</div>
</div>
</div>
);
};
The above code may include block level elements (div elements), image elements (img elements), text elements (text elements), and span tags that combine intra-line elements, etc. The span tag may define the style of the in-line composition element, e.g., the font of text1 may 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, and the parameters defined by the component function comprise src, text1, text2, onClickHandler1 and onClickHandler2 which respectively correspond to a source image address, two text objects, two click events and the like adopted by Bannner.
It should be noted that the terms "first", "second", etc. are used in this disclosure only for distinguishing different page images, different static page description information, different page source files, different page components, etc., and should not impose any limitation on this disclosure.
It should be noted that although the various steps of the methods of the present disclosure are depicted in the drawings in a particular order, this does not require or imply that these steps must be performed in this particular order, or that all of the depicted steps must be performed, to achieve desirable results. Additionally or alternatively, certain steps may be omitted, multiple steps combined into one step execution, and/or one step broken down into multiple step executions, etc.
Further, in the present exemplary embodiment, a page generating apparatus is also provided. The page generating device can be applied to a server or terminal equipment. Referring to fig. 12, the page generating apparatus 1200 may include a static page generating module 1210, a mapping information acquiring module 1220, and a first page generating module 1230. Wherein:
a static page generation module 1210, 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 mapping information obtaining module 1220 is configured to determine a second page source file corresponding to the second page image, and obtain multiplexing 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; a first page generating module 1230, configured to 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.
In an exemplary embodiment of the present disclosure, the static page generation module includes: the first page component generating unit is used for carrying out component identification processing on the first page image to obtain a corresponding first page component; the component information generating unit is used for generating component information for the first page component and generating component description information corresponding to the first page component; and the static page generation unit is used for integrating the first page component and the component description information to generate first static page description information.
In an exemplary embodiment of the present disclosure, the first page component generating unit is configured to: acquiring a pre-constructed component identification model; the component identification model is obtained by training based on a component data set and a page image set; and carrying out component recognition processing on the first page image through the component recognition model so as to determine a first page component.
In an exemplary embodiment of the present disclosure, the component information generating unit includes: the data object generating unit is used for carrying out object generating processing on the first page component so as to determine a data object corresponding to the first page component; and the information integration unit is used for determining the object description information of the data object and generating the component description information according to the object description information.
In an exemplary embodiment of the present disclosure, the data object generating unit includes: the component file generating unit is used for generating a layer component file corresponding to the first page component; the layer component file comprises element levels of page elements in the first page component; and the object generation unit is used for generating a data object corresponding to the first page component based on the layer component file and according to the element hierarchy.
In an exemplary embodiment of the present disclosure, the object generating unit includes an initial object generating subunit, configured to perform parsing serialization processing on the layer component file, and generate an initial data object corresponding to a page element; and the object merging subunit is used for merging the initial data objects according to the element hierarchy to generate the data objects.
In an exemplary embodiment of the present disclosure, the object merging subunit includes: the object determining subunit is used for determining the data object to be deleted and the data object to be merged from the initial data object according to the element hierarchy; the layer deleting determining subunit is used for determining the layer to be deleted according to the data object to be deleted and deleting the layer to be deleted; and the layer merging subunit is used for performing layer merging processing on the basis of the data objects to be merged to generate the data objects.
In an exemplary embodiment of the present disclosure, the layer merging subunit is configured to: determining object information to be merged of the data objects to be merged, wherein the object information to be merged comprises coordinates of the objects to be merged and sizes of the objects to be merged; carrying out 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 data objects; and determining the object coordinate and the object size of the data object according to the object coordinate to be combined and the object size to be combined respectively.
In an exemplary embodiment of the present disclosure, the information integrating unit is configured to: determining the object type of the data object, and determining the object description information of the data object according to the object type; and circularly traversing each data object, integrating the object description information of the plurality of data objects, and generating the component description information.
In an exemplary embodiment of the present disclosure, the page generating apparatus includes a component decoupling module configured to: acquiring a pre-constructed attribute event determination model, and determining a second page component corresponding to a second page image; performing attribute event identification processing on the second page component through the attribute event determination model to obtain an object attribute and an object event of a data object in the second page component; and generating a component function 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.
In an exemplary embodiment of the present disclosure, the first page generation module is configured to: determining a first page component corresponding to the first page image; determining a multiplexed page component in the second page image associated with the first page component; determining component logic mapping information corresponding to the multiplexing page component based on the multiplexing logic mapping information; the component logical mapping information includes component functions; and integrating the first static page description information and the component logic mapping information through a component function to obtain a first page source file.
The specific details of each module or unit in the page generating device have been described in detail in the corresponding page generating method, and therefore are not described herein again.
It should be noted that although in the above detailed description several modules or units of the device for action execution are mentioned, such a division is not mandatory. Indeed, the features and functionality of two or more modules or units described above may be embodied in one module or unit, according to embodiments of the present disclosure. Conversely, the features and functions of one module or unit described above may be further divided into embodiments by a plurality of modules or units.
Other embodiments of the disclosure will be apparent to those skilled in the art from consideration of the specification and practice of the disclosure disclosed herein. This application is intended to cover any variations, uses, or adaptations of the disclosure following, in general, the principles of the disclosure and including such departures from the present disclosure as come within known or customary practice within the art to which the disclosure pertains. It is intended that the specification and examples be considered as exemplary only, with a true scope and spirit of the disclosure being indicated by the following claims.
It will be understood that the present disclosure is not limited to the precise arrangements described above and shown in the drawings and that various modifications and changes may be made without departing from the scope thereof. The scope of the present disclosure is limited only by the appended claims.

Claims (15)

1. A page generation method is characterized by comprising the following steps:
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 a second page image, and acquiring multiplexing 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;
and generating 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.
2. The method according to claim 1, wherein the performing static page generation processing on the first page image to obtain first static page description information includes:
performing component identification 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;
and integrating the first page component and the component description information to generate the first static page description information.
3. The method of claim 2, wherein said performing component recognition processing on said first page image to obtain a corresponding first page component comprises:
acquiring a pre-constructed component identification model; the component recognition model is obtained based on a component data set and a page image set;
and carrying out component recognition processing on the first page image through the component recognition model so as to determine the first page component.
4. The method according to claim 2, wherein 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;
and determining object description information of the data object, and generating the component description information according to the object description information.
5. The method according to claim 4, wherein performing object generation processing on the first page component to determine a data object corresponding to the first page component comprises:
generating a layer component file corresponding to the first page component; the layer component file comprises element levels of page elements in the first page component;
and generating a data object corresponding to the first page component based on the layer component file and according to the element hierarchy.
6. The method according to claim 5, wherein the generating a data object corresponding to the first page component based on the layer component file and according to the element hierarchy comprises:
analyzing and serializing the layer component file to generate an initial data object corresponding to the page element;
and carrying out merging processing on the initial data object according to the element hierarchy to generate the data object.
7. The method of claim 6, wherein said merging the initial data object according to the element hierarchy to generate the data object comprises:
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;
and carrying out layer merging processing based on the data object to be merged to generate the data object.
8. The method according to claim 7, wherein the performing layer merging processing based on the data object to be merged to generate the data object includes:
determining object information to be merged of the data objects to be merged, wherein the object information to be merged comprises coordinates of the objects to be merged and sizes of the objects to be merged;
carrying out 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;
and determining the object coordinate and the object size of the data object according to the object coordinate to be merged and the object size to be merged respectively.
9. The method of claim 4, wherein determining object description information for the data object and generating the component description information based on the object description information comprises:
determining the object type of the data object, and determining the object description information of the data object according to the object type;
and circularly traversing each data object, integrating the object description information of a plurality of data objects, and generating the component description information.
10. The method of claim 1, wherein the first static page description information comprises one or more of: page structure information, page style information, and a cutout file.
11. The method of claim 1, wherein the second page source file includes second static page description information, the method further comprising:
acquiring a pre-constructed attribute event determination model, and determining a second page component corresponding to the second page image;
performing attribute event identification processing on the second page component through the attribute event determination model to obtain an object attribute and an object event of a data object in the second page component;
generating a component function 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. The method of claim 1, wherein generating the first page source file corresponding to the first page image based on the first static page description information and the multiplexing logic mapping information comprises:
determining a first page component corresponding to the first page image;
determining a multiplexed page component in the second page image that is associated with the first page component;
determining component logic mapping information corresponding to the multiplexing page component based on the multiplexing logic mapping information; the component logical mapping information comprises component functions;
and integrating the first static page description information and the component logic mapping information through the component function to obtain the first page source file.
13. A page generating apparatus, comprising:
the static page generation module is used for acquiring a first page image and performing static page generation processing on the first page image to obtain first static page description information;
the mapping information acquisition module is used for determining a second page source file corresponding to a second page image and acquiring multiplexing 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;
and the first page generation module is used for generating 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.
14. An electronic device, comprising:
a processor; and
a memory having stored thereon computer readable instructions which, when executed by the processor, implement the page generation method of any of claims 1 to 12.
15. A computer-readable storage medium, on which a computer program is stored, which, when being executed by a processor, carries out a page generation method according to any one of claims 1 to 12.
CN202110220074.6A 2021-02-26 2021-02-26 Page generation method and device, computer readable storage medium and electronic equipment Pending CN113703745A (en)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202110220074.6A CN113703745A (en) 2021-02-26 2021-02-26 Page generation method and device, computer readable storage medium and electronic equipment

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202110220074.6A CN113703745A (en) 2021-02-26 2021-02-26 Page generation method and device, computer readable storage medium and electronic equipment

Publications (1)

Publication Number Publication Date
CN113703745A true CN113703745A (en) 2021-11-26

Family

ID=78647791

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202110220074.6A Pending CN113703745A (en) 2021-02-26 2021-02-26 Page generation method and device, computer readable storage medium and electronic equipment

Country Status (1)

Country Link
CN (1) CN113703745A (en)

Similar Documents

Publication Publication Date Title
US9355081B2 (en) Transforming HTML forms into mobile native forms
US11194884B2 (en) Method for facilitating identification of navigation regions in a web page based on document object model analysis
US7451393B1 (en) System and method for a page rendering framework
US9547480B2 (en) Generating application model build artifacts
US9984054B2 (en) Web interface including the review and manipulation of a web document and utilizing permission based control
US11380116B2 (en) Automatic delineation and extraction of tabular data using machine learning
CN113158101A (en) Visual page rendering method, device, equipment and storage medium
US9952962B2 (en) Increasing accuracy of traceability links and structured data
US11086600B2 (en) Back-end application code stub generation from a front-end application wireframe
CN113094776B (en) Method and system for constructing visual component model data and electronic equipment
US20160275063A1 (en) Transforming html forms into mobile native forms
CN113419711A (en) Page guiding method and device, electronic equipment and storage medium
US9940320B2 (en) Plugin tool for collecting user generated document segmentation feedback
US10372744B2 (en) DITA relationship table based on contextual taxonomy density
CN113703745A (en) Page generation method and device, computer readable storage medium and electronic equipment
CN112783495A (en) Page event management method, device, medium and electronic equipment
CN111061971B (en) Method and device for extracting information
US20240126978A1 (en) Determining attributes for elements of displayable content and adding them to an accessibility tree
Milovanovic et al. Python Data Visualization Cookbook
CN112860259B (en) Interface processing method, device, electronic equipment and storage medium
CN116127926B (en) Method, device, equipment and medium for generating XSLT file of data body
CN116028038B (en) Visual pipeline arrangement method based on DAG chart and related components
CN117931188A (en) Front-end layout code automatic generation method and device, electronic equipment and medium
Hess Algorithm deployment platform
CN117348885A (en) Request interface generation method, device and medium

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination