CN117931188A - Front-end layout code automatic generation method and device, electronic equipment and medium - Google Patents

Abstract

The present disclosure provides a method for automatically generating a front-end layout code, which can be used in the financial field or other fields. The method comprises the following steps: acquiring a page picture of a front-end page to be developed; configuring a global page style for the page picture; generating a plurality of target language labels corresponding to the page pictures by utilizing a pre-trained intelligent model; summarizing the target language labels according to the global page style and a preset front-end layout frame to generate target language codes corresponding to the page layout of the front-end page, wherein the target language comprises html language and css language. The disclosure also provides a front-end layout code automatic generation device, an electronic device, a storage medium and a program product.

Description

Front-end layout code automatic generation method and device, electronic equipment and medium

Technical Field

The present disclosure relates to the field of computers, and may be used in the financial field or other fields, and more particularly to a front-end layout code automatic generation method, apparatus, electronic device, medium, and program product.

Background

In current front-end page development, there are a large number of front-end layouts that require development by developers, but many are repetitive and require a significant amount of time to adapt. For front-end personnel to be unable to concentrate on developing the front-end business logic code, multiple page style use capabilities such as css3, flex, element-ui and the like need to be mastered simultaneously. The beginner has high entrance difficulty, the advanced front-end personnel needs to consume energy to the page style, the front-end business logic and the code performance cannot be optimized in an concentrating manner, and the method is not very friendly to the front-end personnel.

In a word, at present, front-end personnel can only carry out interface development according to prototype diagrams in the demands, and a large amount of communication and reworking workload with business product personnel exists in the development process, so that the method is very tedious and low in efficiency, and page contents cannot be displayed intuitively, so that the problems cannot be avoided in the prior stage.

Disclosure of Invention

In view of the foregoing, the present disclosure provides a front-end layout code automatic generation method, apparatus, electronic device, medium, and program product.

According to a first aspect of the present disclosure, there is provided a front-end layout code automatic generation method, including: acquiring a page picture of a front-end page to be developed; configuring a global page style for the page picture; generating a plurality of target language labels corresponding to the page pictures by utilizing a pre-trained intelligent model; summarizing the target language labels according to the global page style and a preset front-end layout frame to generate target language codes corresponding to the page layout of the front-end page, wherein the target language comprises html language and css language.

According to an embodiment of the present disclosure, the obtaining a page picture of a front-end page to be developed includes: drawing the front-end page of the development through a drawing tool to generate a page picture; or drawing an original picture, and identifying the original picture through a character identification tool to generate a page picture.

According to an embodiment of the present disclosure, the global page style includes: the overall width, overall height, minimum width, fill information, font type, font size, and line height of the page picture.

According to an embodiment of the present disclosure, the generating, by using a pre-trained intelligent model, a plurality of target language tags corresponding to the page picture includes: identifying a plurality of element shapes in the page picture by utilizing a pre-trained intelligent model; and generating a plurality of corresponding target language labels according to the element shapes according to a parameter configuration table preset in the intelligent model.

According to an embodiment of the present disclosure, the plurality of element shapes includes a regular rectangle, a rounded rectangle, an ellipse, a square, a triangle, a transverse line; generating a plurality of corresponding target language labels according to the plurality of element shapes according to a parameter configuration table preset in the intelligent model, wherein the method comprises the following steps: when the element shape is a regular rectangle, the corresponding target language label is a partition label; when the element shape is a rounded rectangle, the corresponding target language label is an input frame label; when the element shape is elliptical, the corresponding target language label is a button label; when the element shape is square, the corresponding target language label is a picture label; when the element shape is triangle, the corresponding target language label is hyperlink label; and when the element shape is a horizontal line, the corresponding target language label is a text label.

According to an embodiment of the present disclosure, generating a plurality of target language tags corresponding to the page picture further includes: different colors are configured for different target language tags.

According to an embodiment of the present disclosure, generating a corresponding plurality of target language tags from the plurality of element shapes further includes: generating a plurality of corresponding html labels by the plurality of element shapes; summarizing the html tags; and according to the global page style, adjusting the summarized html tags to generate corresponding css tags.

A second aspect of the present disclosure provides an apparatus for automatically generating a front-end layout code, including: the page picture acquisition module is used for acquiring a page picture of a front-end page to be developed; the page style configuration module is used for configuring a global page style for the page picture; the language label generating module is used for generating a plurality of target language labels corresponding to the page pictures by utilizing a pre-trained intelligent model; and the front-end code generation module is used for summarizing the plurality of target language labels according to the global page style and a preset front-end layout frame to generate target language codes corresponding to the page layout of the front-end page, wherein the target language comprises an html language and a css language.

A third aspect of the present disclosure provides an electronic device, comprising: one or more processors; and a storage device for storing one or more computer programs, wherein the one or more processors execute the one or more computer programs to implement the steps of the front-end layout code automatic generation method.

A fourth aspect of the present disclosure also provides a computer-readable storage medium having stored thereon a computer program which, when executed by a processor, implements the steps of the front-end layout code automatic generation method described above.

The fifth aspect of the present disclosure also provides a computer program product comprising a computer program which, when executed by a processor, implements the steps of the front-end layout code automatic generation method described above.

When the page picture of the front-end page to be developed is obtained, the global page style is firstly configured for the page picture, and then the intelligent model is used for analyzing the page picture to obtain a plurality of target language labels. And finally, generating target language codes, such as html and csS codes, of the page layout of the corresponding front-end page according to the global page style and the preset front-end layout frame. The method helps front-end developers to concentrate on developing the front-end business logic, and only needs to put a small amount of effort on page style development. The front-end developer is helped to greatly reduce the workload of page layout development, and the development capability threshold of the front-end interface is reduced.

Drawings

The foregoing and other objects, features and advantages of the disclosure will be more apparent from the following description of embodiments of the disclosure with reference to the accompanying drawings, in which:

Fig. 1 schematically illustrates an application scenario of a front-end layout code automatic generation method and apparatus according to an embodiment of the present disclosure;

FIG. 2 schematically illustrates a flow chart of a front-end layout code auto-generation method according to an embodiment of the present disclosure;

FIG. 3 schematically illustrates a flow diagram for obtaining a page picture in accordance with an embodiment of the present disclosure;

FIG. 4 schematically illustrates a flow diagram for generating a plurality of target language tags according to an embodiment of the present disclosure;

fig. 5 schematically shows a schematic diagram of generating a plurality of html tags according to fig. 4;

FIG. 6 schematically illustrates a flow diagram for generating html tags and css tags according to an embodiment of the present disclosure;

FIG. 7 schematically shows a block diagram of a front-end layout code automatic generation apparatus according to an embodiment of the present disclosure;

fig. 8 schematically illustrates a block diagram of an electronic device adapted to implement a front-end layout code automatic generation method according to an embodiment of the present disclosure.

Detailed Description

Hereinafter, embodiments of the present disclosure will be described with reference to the accompanying drawings. It should be understood that the description is only exemplary and is not intended to limit the scope of the present disclosure. In the following detailed description, for purposes of explanation, numerous specific details are set forth in order to provide a thorough understanding of the embodiments of the present disclosure. It may be evident, however, that one or more embodiments may be practiced without these specific details. In addition, in the following description, descriptions of well-known structures and techniques are omitted so as not to unnecessarily obscure the concepts of the present disclosure.

The terminology used herein is for the purpose of describing particular embodiments only and is not intended to be limiting of the disclosure. The terms "comprises," "comprising," and/or the like, as used herein, specify the presence of stated features, steps, operations, and/or components, but do not preclude the presence or addition of one or more other features, steps, operations, or components.

All terms (including technical and scientific terms) used herein have the same meaning as commonly understood by one of ordinary skill in the art unless otherwise defined. It should be noted that the terms used herein should be construed to have meanings consistent with the context of the present specification and should not be construed in an idealized or overly formal manner.

Where a convention analogous to "at least one of A, B and C, etc." is used, in general such a convention should be interpreted in accordance with the meaning of one of skill in the art having generally understood the convention (e.g., "a system having at least one of A, B and C" would include, but not be limited to, systems having a alone, B alone, C alone, a and B together, a and C together, B and C together, and/or A, B, C together, etc.).

Some of the block diagrams and/or flowchart illustrations are shown in the figures. It will be understood that some blocks of the block diagrams and/or flowchart illustrations, or combinations of blocks in the block diagrams and/or flowchart illustrations, can be implemented by computer program instructions. These computer program instructions may be provided to a processor of a general purpose computer, special purpose computer, or other programmable data processing apparatus, such that the instructions, when executed by the processor, create means for implementing the functions/acts specified in the block diagrams and/or flowchart. The techniques of this disclosure may be implemented in hardware and/or software (including firmware, microcode, etc.). Additionally, the techniques of this disclosure may take the form of a computer program product on a computer-readable storage medium having instructions stored thereon, the computer program product being for use by or in connection with an instruction execution system.

In the technical solution of the present disclosure, the related user information (including, but not limited to, user personal information, user image information, user equipment information, such as location information, etc.) and data (including, but not limited to, data for analysis, stored data, displayed data, etc.) are information and data authorized by the user or sufficiently authorized by each party, and the related data is collected, stored, used, processed, transmitted, provided, disclosed, applied, etc. in compliance with relevant laws and regulations and standards, necessary security measures are taken, no prejudice to the public order colloquia is provided, and corresponding operation entries are provided for the user to select authorization or rejection.

In the scenario of using personal information to make an automated decision, the method, the device and the system provided by the embodiment of the disclosure provide corresponding operation inlets for users, so that the users can choose to agree or reject the automated decision result; if the user selects refusal, the expert decision flow is entered. The expression "automated decision" here refers to an activity of automatically analyzing, assessing the behavioral habits, hobbies or economic, health, credit status of an individual, etc. by means of a computer program, and making a decision. The expression "expert decision" here refers to an activity of making a decision by a person who is specializing in a certain field of work, has specialized experience, knowledge and skills and reaches a certain level of expertise.

The embodiment of the disclosure provides a front-end layout code automatic generation method, which comprises the following steps: acquiring a page picture of a front-end page to be developed; configuring a global page style for the page picture; generating a plurality of target language labels corresponding to the page pictures by utilizing a pre-trained intelligent model; summarizing the target language labels according to the global page style and a preset front-end layout frame to generate target language codes corresponding to the page layout of the front-end page, wherein the target language comprises html language and css language.

Before describing in detail specific embodiments of the present disclosure, technical terms are first explained in order to facilitate a better understanding of the present disclosure.

Css3: the front-end cascading style sheet describes how html elements are displayed on a screen, paper, or other medium.

Flex: the current more popular flexible layout provides maximum flexibility for the box-like model.

Element-ui: is a desktop component library which is developed and sourced by a company in China and is prepared for developers, designers and product managers.

Html tag: hypertext markup language, representing individual elements in a page.

Style: html tag attributes, the Style and location of each element can be determined by setting Style content.

Python: a development language is widely applied in the field of models and has a better ecological environment.

And (3) intelligent model: the intelligent model is developed through the Python codes, and through a large amount of training, the model can finally recognize special identifiers in the drawing to convert the drawing file into an html file.

Picture ocr: the content in the pictures can be translated into text content wanted by the user by the mature technology, and in the method, the pictures to be drawn are converted into the parameters of the intelligent model.

Fig. 1 schematically illustrates an application scenario of a method and an apparatus for automatically generating a front-end layout code according to an embodiment of the present disclosure. It should be noted that fig. 1 illustrates only an example of an application scenario in which the embodiments of the present disclosure may be applied to help those skilled in the art understand the technical content of the present disclosure, but it does not mean that the embodiments of the present disclosure may not be applied to other devices, systems, environments, or scenarios.

As shown in fig. 1, an application scenario 100 according to this embodiment may include terminal devices 101, 102, 103, a network 104, and a server 105. The network 104 is used as a medium to provide communication links between the terminal devices 101, 102, 103 and the server 105. The network 104 may include various connection types, such as wired, wireless communication links, or fiber optic cables, among others.

The user may interact with the server 105 via the network 104 using the terminal devices 101, 102, 103 to receive or send messages or the like. Various communication client applications, such as shopping class applications, web browser applications, search class applications, instant messaging tools, mailbox clients, social platform software, etc. (by way of example only) may be installed on the terminal devices 101, 102, 103.

The terminal devices 101, 102, 103 may be a variety of electronic devices having a display screen and supporting web browsing, including but not limited to smartphones, tablets, laptop and desktop computers, and the like.

The server 105 may be a server providing various services, such as a background management server (by way of example only) providing support for websites browsed by users using the terminal devices 101, 102, 103. The background management server may analyze and process the received data such as the user request, and feed back the processing result (e.g., the web page, information, or data obtained or generated according to the user request) to the terminal device.

It should be noted that the method for automatically generating the front-end layout code according to the embodiments of the present disclosure may be generally executed by the server 105. Accordingly, the front-end layout code automatic generation apparatus provided by the embodiments of the present disclosure may be generally provided in the server 105. The front-end layout code automatic generation method provided by the embodiments of the present disclosure may also be performed by a server or a server cluster that is different from the server 105 and is capable of communicating with the terminal devices 101, 102, 103 and/or the server 105. Accordingly, the front-end layout code automatic generation apparatus provided by the embodiments of the present disclosure may also be provided in a server or a server cluster that is different from the server 105 and is capable of communicating with the terminal devices 101, 102, 103 and/or the server 105.

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.

The front-end layout code automatic generation method according to the embodiment of the present disclosure will be described in detail below with reference to fig. 2 to 6 based on the application scenario described in fig. 1.

Fig. 2 schematically illustrates a flowchart of a front-end layout code automatic generation method according to an embodiment of the present disclosure.

As shown in fig. 2, the front-end layout code automatic generation method of this embodiment may include operations S210 to S240, and the front-end layout code automatic generation method may be performed by the server 105 described above.

In operation S210, a page picture of a front-end page of the proposed development is acquired.

The page picture may be, for example, a png picture.

In operation S220, a global page style is configured for the page picture.

The global page style is used as the page style of the outermost layer of the whole body, and can ensure to accord with project layout design.

In operation S230, a plurality of target language tags corresponding to the page pictures are generated using the pre-trained smart model.

The smart model may be, for example, a model developed by Python code. The target language tag may be, for example, an html tag or css tag.

In operation S240, according to the global page style and the preset front-end layout frame, the plurality of target language tags are summarized to generate target language codes corresponding to the page layout of the front-end page, where the target language includes html language and css language.

The front-end layout framework may be, for example, flex or Element-ui.

According to the embodiment of the disclosure, when the page picture of the front-end page to be developed is obtained, firstly, the global page style is configured for the page picture, and then, the intelligent model is used for analyzing the page picture to obtain a plurality of target language labels. And finally, generating target language codes, such as html and css codes, of the page layout of the corresponding front-end page according to the global page style and the preset front-end layout frame. In this way, the front-end developer is helped to concentrate on developing the front-end business logic, and only a small amount of effort is required to develop the page style. The front-end developer is helped to greatly reduce the workload of page layout development, and the development capability threshold of the front-end interface is reduced.

Fig. 3 schematically illustrates a flowchart of acquiring a page picture according to an embodiment of the present disclosure.

As shown in fig. 3, in the embodiment of the present disclosure, the step S210 of obtaining the page picture of the front-end page to be developed may include step S311 or step S312.

In operation S311, the front-end page to be developed is drawn by the drawing tool, and a page picture is generated.

In operation S312, the original picture is drawn, and the original picture is recognized by the text recognition tool to generate a page picture.

That is, the obtained page picture of the front page may be generated by a user (e.g., business person or product person) drawing using a drawing tool in a computer, or may be generated directly by the user by manually drawing the picture and then by the text recognition tool ocr.

In an embodiment of the present disclosure, the global page style of the operation S220 includes: the overall width, overall height, minimum width, fill information, font type, font size, and line height of the page picture. For example, a global page Style may be configured for a page picture by setting Style content as follows:

FIG. 4 schematically illustrates a flow diagram for generating a plurality of target language tags according to an embodiment of the present disclosure.

As shown in fig. 4, in the embodiment of the present disclosure, the generating, by using the pre-trained intelligent model, the plurality of target language tags corresponding to the page picture in operation S230 may further include operations S431 to S432.

In operation S431, a plurality of element shapes in the page picture are identified using the pre-trained smart model.

In operation S432, a plurality of target language labels corresponding to the plurality of element shapes are generated according to a parameter configuration table preset in the intelligent model.

The smart model may be, for example, a model developed by Python codes, in which a parameter configuration table may be preset by a user to perform parameter configuration.

By the embodiment of the disclosure, the processing of the intelligent model is divided into two steps of element shape recognition and label conversion. The intelligent model allows the user to configure parameters by himself so as to meet different business scene requirements.

Fig. 5 schematically shows a schematic diagram of generating a plurality of html tags according to fig. 4.

Specifically, as shown in fig. 5, the plurality of element shapes of the above-described operation S431 include a regular rectangle, a rounded rectangle, an ellipse, a square, a triangle, and a transverse line; the step S432 generates a plurality of target language labels corresponding to the plurality of element shapes according to a parameter configuration table preset in the intelligent model, including:

When the element shape is a regular rectangle, the corresponding target language label is a partition label;

When the element shape is a rounded rectangle, the corresponding target language label is an input frame label;

when the element shape is elliptical, the corresponding target language label is a button label;

when the element shape is square, the corresponding target language label is a picture label;

when the element shape is triangle, the corresponding target language label is hyperlink label;

when the element shape is a horizontal line, the corresponding target language label is a text label.

With continued reference to fig. 5, taking the example that the target language tag is an html tag, the parameter configuration table may be set as follows:

(1) The rectangle represents the container, and the corresponding html label is < div >;

(2) The rounded rectangle represents the input box, and the corresponding html label is < input >;

(3) The ellipse represents a button, and the corresponding html tag is < button >;

(4) The square represents a picture, the text in the square is described as a picture address, and the corresponding html label is < img >;

(5) Triangles represent hyperlinks, the text description in the triangles is a hyperlink address, and the corresponding html label is < a >;

(6) The horizontal lines represent paragraph text, the text on the horizontal lines is described as text content, and the corresponding html tag is < p >.

In some embodiments, the step S432 generates a plurality of target language tags corresponding to the plurality of element shapes, and further includes: different colors are configured for different target language tags. That is, the user may also configure the colors of the different patterns to correspond to different label content.

Fig. 6 schematically illustrates a flowchart of generating html tags and css tags according to an embodiment of the present disclosure.

As shown in fig. 6, in the embodiment of the present disclosure, the operation S432 may further include operations S601 to S603, where the plurality of element shapes generate a plurality of corresponding target language tags.

In operation S601, a plurality of html tags corresponding to the plurality of element shapes are generated.

In operation S602, a plurality of html tags are aggregated.

In operation S603, the aggregated html tags are adjusted according to the global page style, so as to generate corresponding css tags.

For example, when generating html tags and css tags, corresponding html tags are generated for each element shape, and then the corresponding css tags for each element shape are generated according to the overall proportion according to the requirements of the overall width, the overall height, the minimum width and the like which are predefined in the overall page style and the proportional size (such as the length and the width) of each element shape.

Next, html, css code corresponding to the page layout of the front-end page is automatically generated based on the global page style and a pre-set front-end layout framework (e.g., flex or Element-ui, which are popular today).

For example, the internal component size can be adapted according to the predetermined outermost frame size by the layout technique of the front-end layout frame flex. The html and css codes finally output can be used by front-end developers. Of course, the modification can be performed later according to the additional requirements related to the service.

In summary, according to the method for automatically generating the front-end layout code provided by the embodiment of the disclosure, the front-end personnel can develop the page in a drawing manner, and the workload of page layout is avoided. The front-end development efficiency is greatly improved, and the entrance threshold of front-end developers is reduced. And the user is allowed to carry out parameter configuration by himself so as to meet the requirements of different business scenes.

The foregoing is merely an exemplary illustration and the present disclosure is not limited thereto. For example, in some embodiments, a software program may be designed to integrate drawing, style configuration and model, and the user may directly design in the program UI interface to finally produce html and css codes.

Based on the front-end layout code automatic generation method, the invention further provides a front-end layout code automatic generation device. The device will be described in detail below in connection with fig. 7.

Fig. 7 schematically shows a block diagram of a front-end layout code automatic generation apparatus according to an embodiment of the present disclosure.

As shown in fig. 7, the front-end layout code automatic generation apparatus 700 of this embodiment includes a page picture acquisition module 710, a page style configuration module 720, a language tag generation module 730, and a front-end code generation module 740.

The page picture obtaining module 710 is configured to obtain a page picture of a front-end page to be developed. In an embodiment, the page picture obtaining module 710 may be configured to perform the operation S210 described above, which is not described herein.

The page style configuration module 720 is configured to configure a global page style for the page picture. In an embodiment, the page style configuration module 720 may be configured to perform the operation S220 described above, which is not described herein.

The language tag generating module 730 is configured to generate a plurality of target language tags corresponding to the page picture by using the pre-trained intelligent model. In an embodiment, the language-label generating module 730 may be configured to perform the operation S230 described above, which is not described herein.

The front-end code generating module 740 is configured to aggregate a plurality of target language labels according to the global page style and a preset front-end layout frame, and generate a target language code corresponding to the page layout of the front-end page, where the target language includes an html language and a css language. In an embodiment, the front end code generating module 740 may be configured to perform the operation S240 described above, which is not described herein.

According to an embodiment of the present disclosure, any of the page picture acquisition module 710, the page style configuration module 720, the language tag generation module 730, and the front end code generation module 740 may be combined in one module to be implemented, or any of the modules may be split into a plurality of modules. Or at least some of the functionality of one or more of the modules may be combined with, and implemented in, at least some of the functionality of other modules. According to embodiments of the present disclosure, at least one of the page picture acquisition module 710, the page style configuration module 720, the language tag generation module 730, and the front end code generation module 740 may be implemented at least in part as hardware circuitry, such as a Field Programmable Gate Array (FPGA), a Programmable Logic Array (PLA), a system on a chip, a system on a substrate, a system on a package, an Application Specific Integrated Circuit (ASIC), or may be implemented in hardware or firmware in any other reasonable manner of integrating or packaging the circuitry, or in any one of or a suitable combination of any of the three. Or at least one of the page picture acquisition module 710, the page style configuration module 720, the language tag generation module 730, and the front end code generation module 740 may be at least partially implemented as computer program modules that, when executed, perform the corresponding functions.

Fig. 8 schematically illustrates a block diagram of an electronic device adapted to implement a front-end layout code automatic generation method according to an embodiment of the present disclosure.

As shown in fig. 8, an electronic device 800 according to an embodiment of the present disclosure includes a processor 801 that can perform various appropriate actions and processes according to a program stored in a Read Only Memory (ROM) 802 or a program loaded from a storage section 808 into a Random Access Memory (RAM) 803. The processor 801 may include, for example, a general purpose microprocessor (e.g., a CPU), an instruction set processor and/or an associated chipset and/or a special purpose microprocessor (e.g., an Application Specific Integrated Circuit (ASIC)), or the like. The processor 801 may also include on-board memory for caching purposes. The processor 801 may include a single processing unit or multiple processing units for performing the different actions of the method flows according to embodiments of the disclosure.

In the RAM 803, various programs and data required for the operation of the electronic device 800 are stored. The processor 801, the ROM 802, and the RAM 803 are connected to each other by a bus 804. The processor 801 performs various operations of the method flow according to the embodiments of the present disclosure by executing programs in the ROM 802 and/or the RAM 803. Note that the program may be stored in one or more memories other than the ROM 802 and the RAM 803. The processor 801 may also perform various operations of the method flows according to embodiments of the present disclosure by executing programs stored in the one or more memories.

According to an embodiment of the present disclosure, the electronic device 800 may also include an input/output (I/O) interface 805, the input/output (I/O) interface 805 also being connected to the bus 804. The electronic device 800 may also include one or more of the following components connected to the I/O interface 805: an input portion 806 including a keyboard, mouse, etc.; an output portion 807 including a display such as a Cathode Ray Tube (CRT), a Liquid Crystal Display (LCD), and a speaker; a storage section 808 including a hard disk or the like; and a communication section 809 including a network interface card such as a LAN card, a modem, or the like. The communication section 809 performs communication processing via a network such as the internet. The drive 810 is also connected to the I/O interface 805 as needed. A removable medium 811 such as a magnetic disk, an optical disk, a magneto-optical disk, a semiconductor memory, or the like is mounted on the drive 810 as needed so that a computer program read out therefrom is mounted into the storage section 808 as needed.

The present disclosure also provides a computer-readable storage medium that may be embodied in the apparatus/device/system described in the above embodiments; or may exist alone without being assembled into the apparatus/device/system. The computer-readable storage medium described above carries one or more programs that, when executed, implement the front-end layout code automatic generation method according to the embodiments of the present disclosure.

According to embodiments of the present disclosure, the computer-readable storage medium may be a non-volatile computer-readable storage medium, which may include, for example, but is not limited to: 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), 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 context of this 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. For example, according to embodiments of the present disclosure, the computer-readable storage medium may include ROM 802 and/or RAM 803 and/or one or more memories other than ROM 802 and RAM 803 described above.

Embodiments of the present disclosure also include a computer program product comprising a computer program containing program code for performing the methods shown in the flowcharts. The program code, when executed in a computer system, is configured to cause the computer system to implement the front-end layout code automatic generation method provided by the embodiments of the present disclosure.

The above-described functions defined in the system/apparatus of the embodiments of the present disclosure are performed when the computer program is executed by the processor 801. The systems, apparatus, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the disclosure.

In one embodiment, the computer program may be based on a tangible storage medium such as an optical storage device, a magnetic storage device, or the like. In another embodiment, the computer program may also be transmitted, distributed, and downloaded and installed in the form of a signal on a network medium, and/or from a removable medium 811 via a communication portion 809. The computer program may include program code that may be transmitted using any appropriate network medium, including but not limited to: wireless, wired, etc., or any suitable combination of the foregoing.

In such an embodiment, the computer program may be downloaded and installed from a network via the communication section 809, and/or installed from the removable media 811. The above-described functions defined in the system of the embodiments of the present disclosure are performed when the computer program is executed by the processor 801. The systems, devices, apparatus, modules, units, etc. described above may be implemented by computer program modules according to embodiments of the disclosure.

According to embodiments of the present disclosure, program code for performing computer programs provided by embodiments of the present disclosure may be written in any combination of one or more programming languages, and in particular, such computer programs may be implemented in high-level procedural and/or object-oriented programming languages, and/or assembly/machine languages. Programming languages include, but are not limited to, such as Java, c++, python, "C" or similar programming languages. The program code may execute entirely on the user's computing device, partly on the user's device, partly on a remote computing device, or entirely on the remote computing device or server. In the case of remote computing devices, the remote computing device may be connected to the user computing device through any kind of network, including a Local Area Network (LAN) or a Wide Area Network (WAN), or may be connected to an external computing device (e.g., connected via the Internet using an Internet service provider).

The flowcharts 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.

Those skilled in the art will appreciate that the features recited in the various embodiments of the disclosure and/or in the claims may be provided in a variety of combinations and/or combinations, even if such combinations or combinations are not explicitly recited in the disclosure. In particular, the features recited in the various embodiments of the present disclosure and/or the claims may be variously combined and/or combined without departing from the spirit and teachings of the present disclosure. All such combinations and/or combinations fall within the scope of the present disclosure.

The embodiments of the present disclosure are described above. These examples are for illustrative purposes only and are not intended to limit the scope of the present disclosure. Although the embodiments are described above separately, this does not mean that the measures in the embodiments cannot be used advantageously in combination. The scope of the disclosure is defined by the appended claims and equivalents thereof. Various alternatives and modifications can be made by those skilled in the art without departing from the scope of the disclosure, and such alternatives and modifications are intended to fall within the scope of the disclosure.

Claims (11)

1. A front-end layout code automatic generation method includes:

Acquiring a page picture of a front-end page to be developed;

configuring a global page style for the page picture;

Generating a plurality of target language labels corresponding to the page pictures by utilizing a pre-trained intelligent model;

summarizing the target language labels according to the global page style and a preset front-end layout frame to generate target language codes corresponding to the page layout of the front-end page, wherein the target language comprises html language and css language.

2. The method of claim 1, wherein the obtaining a page picture of the front-end page of the proposed development comprises:

drawing the front-end page of the development through a drawing tool to generate a page picture; or alternatively

Drawing an original picture, and identifying the original picture through a character identification tool to generate a page picture.

3. The method of claim 1, wherein the global page style comprises:

The overall width, overall height, minimum width, fill information, font type, font size, and line height of the page picture.

4. The method of claim 1, wherein the generating, with the pre-trained smart model, a plurality of target language tags corresponding to the page picture comprises:

Identifying a plurality of element shapes in the page picture by utilizing a pre-trained intelligent model;

and generating a plurality of corresponding target language labels according to the element shapes according to a parameter configuration table preset in the intelligent model.

5. The method of claim 4, wherein the plurality of element shapes comprises a regular rectangle, rounded rectangle, oval, square, triangle, transverse line;

Generating a plurality of corresponding target language labels according to the plurality of element shapes according to a parameter configuration table preset in the intelligent model, wherein the method comprises the following steps:

when the element shape is a regular rectangle, the corresponding target language label is a partition label;

When the element shape is a rounded rectangle, the corresponding target language label is an input frame label;

when the element shape is elliptical, the corresponding target language label is a button label;

when the element shape is square, the corresponding target language label is a picture label;

when the element shape is triangle, the corresponding target language label is hyperlink label;

and when the element shape is a horizontal line, the corresponding target language label is a text label.

6. The method of claim 1, wherein generating a plurality of target language tags corresponding to the page picture further comprises:

Different colors are configured for different target language tags.

7. The method of claim 1, wherein generating the plurality of element shapes into a corresponding plurality of target language tags, further comprises:

Generating a plurality of corresponding html labels by the plurality of element shapes;

Summarizing the html tags;

And according to the global page style, adjusting the summarized html tags to generate corresponding css tags.

8. An automatic front-end layout code generation apparatus comprising:

the page picture acquisition module is used for acquiring a page picture of a front-end page to be developed;

The page style configuration module is used for configuring a global page style for the page picture;

the language label generating module is used for generating a plurality of target language labels corresponding to the page pictures by utilizing a pre-trained intelligent model;

and the front-end code generation module is used for summarizing the plurality of target language labels according to the global page style and a preset front-end layout frame to generate target language codes corresponding to the page layout of the front-end page, wherein the target language comprises an html language and a css language.

9. An electronic device, comprising:

One or more processors;

Storage means for storing one or more computer programs,

Characterized in that the one or more processors execute the one or more computer programs to implement the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium, on which a computer program is stored, characterized in that the computer program, when being executed by a processor, realizes the steps of the method according to any one of claims 1-7.

11. A computer program product comprising a computer program, characterized in that the computer program, when being executed by a processor, realizes the steps of the method according to any one of claims 1-7.