CN113946336A

CN113946336A - Design draft conversion method and device, computer equipment and storage medium

Info

Publication number: CN113946336A
Application number: CN202111211819.9A
Authority: CN
Inventors: 刘一奇
Original assignee: Beijing ByteDance Network Technology Co Ltd
Current assignee: Beijing ByteDance Network Technology Co Ltd
Priority date: 2021-10-18
Filing date: 2021-10-18
Publication date: 2022-01-18

Abstract

The present disclosure provides a conversion method, an apparatus, a computer device and a storage medium of a design draft, wherein the method comprises: determining page construction information corresponding to the design draft according to the acquired design draft to be processed; the page construction information comprises information of at least one atomic component in a target page corresponding to the design draft; the atomic component is a component with the minimum function granularity corresponding to the design draft; constructing a first target page corresponding to the design draft according to the page construction information based on a preset atomic component, and displaying the first target page in a first position area in a target construction system; screening components to be replaced corresponding to a preset function from a plurality of atomic components in a first target page, replacing the components to be replaced by target components with the preset function and written in advance in a target building system, and determining a second target page after updating the first target page based on the replaced target components. The embodiment of the disclosure can realize automatic generation of the target page corresponding to the design draft.

Description

Design draft conversion method and device, computer equipment and storage medium

Technical Field

The present disclosure relates to the technical field of converting design files into codes, and in particular, to a method and an apparatus for converting design files, a computer device, and a storage medium.

Background

Front-end page development is a process of creating a front-end page such as a WEB page or APP (Application) and presenting the front-end page to a user. When the front-end page is displayed to a user, the terminal is required to acquire a program code corresponding to the front-end page from a server, a cloud platform and other remote service platforms, and then the front-end page is obtained and displayed to the user through processing of the program code, such as coding operation, rendering and the like. For the specific process of front-end page development, a page designer is usually required to design a design draft corresponding to a front-end page first, then a program programmer converts the design draft into a program code corresponding to the front-end page, and then the front-end page corresponding to the design draft is rendered at a terminal based on the program code.

In order to improve the development efficiency of a front-end page, the front-end page is developed by using a visual building system in a common development mode, specifically, each page component corresponding to a design draft is assembled in the visual building system by using a manual auxiliary mode, for example, each page component is assembled in a manual dragging mode, and then a target page and a program code corresponding to the design draft are generated according to the assembled page components in the visual building system. However, the manual assistance mode greatly increases the time for page assembly and the time for converting the design draft into the code, thereby reducing the efficiency of front-end page development.

Disclosure of Invention

The embodiment of the disclosure at least provides a conversion method and device of a design draft, computer equipment and a storage medium.

In a first aspect, an embodiment of the present disclosure provides a method for converting a design draft, including:

determining page construction information corresponding to the design draft according to the acquired design draft to be processed; the page construction information comprises information of at least one atomic component in a target page corresponding to the design draft; the atomic component is a component with the minimum function granularity corresponding to the design draft;

constructing a first target page corresponding to the design draft according to the page construction information based on a preset atomic component, and displaying the first target page in a first position area in a target construction system;

screening components to be replaced corresponding to a preset function from a plurality of atomic components in the first target page, replacing the components to be replaced by target components with preset functions written in advance in the target building system, and determining a second target page updated on the first target page based on the replaced target components.

In a possible embodiment, the screening, from a plurality of atomic components in the first target page, a component to be replaced corresponding to a preset function, and replacing the component to be replaced with a target component with the preset function, which is pre-programmed in the target building system, includes:

screening a component to be replaced corresponding to a preset function from a plurality of atomic components based on component feature information of each atomic component in the plurality of atomic components in the first target page;

for each component to be replaced, screening a target component with a preset function matched with the component characteristic information from pre-programmed replacement components corresponding to the target building system based on the component characteristic information of the component to be replaced;

and deleting the component to be replaced, and inserting the target component matched with the component to be replaced into the component position corresponding to the component to be replaced.

in response to a first selected operation on an atomic component in the first target page, treating the selected at least one atomic component as a component to be replaced;

in response to a second selected operation aiming at a pre-programmed replacement component, determining a target component corresponding to each component to be replaced;

and deleting the component to be replaced aiming at each component to be replaced, and inserting the target component matched with the component to be replaced into the component position corresponding to the component to be replaced.

In one possible embodiment, the method further comprises the step of determining component characteristic information for each atomic component:

and respectively carrying out feature recognition on each atomic component by using the deployed component feature recognition model, and determining component feature information of each atomic component.

In one possible implementation, after determining the second target page updated to the first target page based on the replaced target component, the method further includes:

responding to the selected operation of a target node of a structure tree displayed aiming at a second position area in the target building system, displaying a page component containing text information corresponding to the target node in the first position area, and displaying a component code corresponding to the page component in the third position area in the target building system; the page component is an atomic component or a target component in the second target page; the structure tree comprises at least one node, and one node corresponds to one page component;

acquiring code adjustment information for the component code;

and updating the component position of the page component and/or the position of the text information in the page component based on the code adjustment information to obtain an updated page component and display the updated page component in the first position area.

In a possible embodiment, the code adjustment information includes first adjustment information for adjusting a position of text information in the page component and/or second adjustment information for adjusting a component position of the page component.

In one possible embodiment, the method further comprises the step of training the component feature recognition model:

acquiring a sample component to be replaced appointed by a user and corresponding to the target building system and a target sample component corresponding to the sample component to be replaced appointed by the user;

and performing iterative training on the component feature recognition model based on the sample component to be replaced and the target sample component until a training cut-off condition is met to obtain a trained component feature recognition model.

In a second aspect, an embodiment of the present disclosure further provides a device for converting a design draft, including:

the first determining module is used for determining page construction information corresponding to the design draft according to the acquired design draft to be processed; the page construction information comprises information of at least one atomic component in a target page corresponding to the design draft; the atomic component is a component with the minimum function granularity corresponding to the design draft;

the construction module is used for constructing a first target page corresponding to the design draft based on a preset atomic component according to the page construction information and displaying the first target page in a first position area in a target construction system;

the second determining module is used for screening components to be replaced corresponding to preset functions from a plurality of atomic components in the first target page, replacing the components to be replaced by target components with preset functions written in the target building system in advance, and determining a second target page updated on the first target page based on the replaced target components.

In a possible implementation manner, the second determination module is configured to filter a component to be replaced corresponding to a preset function from a plurality of atomic components in the first target page based on component feature information of each atomic component in the plurality of atomic components;

In one possible implementation, the second determining module is configured to, in response to a first selection operation on an atomic component in the first target page, take the selected at least one atomic component as a component to be replaced;

In a possible implementation, the second determining module is further configured to determine component feature information of each atomic component according to the following steps:

In a possible embodiment, the apparatus further comprises:

an updating module, configured to, after determining a second target page updated for the first target page based on a replaced target component, respond to a selection operation of a target node of a structure tree displayed for a second location area in the target building system, display a page component containing text information corresponding to the target node in the first location area, and display a component code corresponding to the page component in a third location area in the target building system; the page component is an atomic component or a target component in the second target page; the structure tree comprises at least one node, and one node corresponds to one page component;

acquiring code adjustment information for the component code;

In a possible embodiment, the apparatus further comprises:

the training module is used for training the component feature recognition model according to the following steps:

In a third aspect, this disclosure also provides a computer device, a processor, and a memory, where the memory stores machine-readable instructions executable by the processor, and the processor is configured to execute the machine-readable instructions stored in the memory, and when the machine-readable instructions are executed by the processor, the machine-readable instructions are executed by the processor to perform the steps in the first aspect or any one of the possible implementations of the first aspect.

In a fourth aspect, this disclosure also provides a computer-readable storage medium having a computer program stored thereon, where the computer program is executed to perform the steps in the first aspect or any one of the possible implementation manners of the first aspect.

For the description of the effects of the conversion apparatus, the computer device, and the computer-readable storage medium of the design draft, reference is made to the description of the conversion method of the design draft, and details are not repeated here.

According to the conversion method and device of the design draft, the computer equipment and the storage medium, the automatic construction of the first target page corresponding to the design draft is realized by utilizing the preset atomic components in the target construction system according to the page construction information corresponding to the design draft, a manual assistance mode is not needed, the page construction efficiency and speed are greatly improved, and further the front-end development efficiency is improved. Replacing part of atomic assemblies (assemblies to be replaced) in the first target page by target assemblies with preset functions written in advance in the target building system, so that the part of atomic assemblies in the first target page can be replaced by the target assemblies with high-level functions, and a second target page containing the target assemblies with rich functions is obtained; the function corresponding to the target component is the function of the second target page, so that the function of the second target page can be further enriched based on the replaced target component.

Further, the conversion method, apparatus, computer device, and storage medium for design draft provided by the embodiments of the present disclosure may further adjust the component code based on the obtained code adjustment information for the component code of the page component including the text information, and update the component position of the page component and/or the position of the text information in the page component based on the adjusted component code; therefore, the page assembly and the character information thereof can be flexibly edited by utilizing the code adjustment information, so that the flexibility of page construction is improved.

In order to make the aforementioned objects, features and advantages of the present disclosure more comprehensible, preferred embodiments accompanied with figures are described in detail below.

Drawings

In order to more clearly illustrate the technical solutions of the embodiments of the present disclosure, the drawings required for use in the embodiments will be briefly described below, and the drawings herein incorporated in and forming a part of the specification illustrate embodiments consistent with the present disclosure and, together with the description, serve to explain the technical solutions of the present disclosure. It is appreciated that the following drawings depict only certain embodiments of the disclosure and are therefore not to be considered limiting of its scope, for those skilled in the art will be able to derive additional related drawings therefrom without the benefit of the inventive faculty.

Fig. 1 illustrates a flowchart of a method for converting a design draft according to an embodiment of the present disclosure;

fig. 2 illustrates a schematic diagram of a design draft provided by an embodiment of the present disclosure;

FIG. 3 shows a schematic diagram of a target construction system provided by an embodiment of the present disclosure;

FIG. 4 is a schematic diagram of a first target page provided by an embodiment of the disclosure;

fig. 5 is a schematic diagram illustrating a converting apparatus of a design draft provided by an embodiment of the present disclosure;

fig. 6 shows a schematic structural diagram of a computer device provided by an embodiment of the present disclosure.

Detailed Description

In order to make the objects, technical solutions and advantages of the embodiments of the present disclosure more clear, the technical solutions of the embodiments of the present disclosure will be described clearly and completely with reference to the drawings in the embodiments of the present disclosure, and it is obvious that the described embodiments are only a part of the embodiments of the present disclosure, not all of the embodiments. The components of embodiments of the present disclosure, as generally described and illustrated herein, may be arranged and designed in a wide variety of different configurations. Thus, the following detailed description of the embodiments of the present disclosure is not intended to limit the scope of the disclosure, as claimed, but is merely representative of selected embodiments of the disclosure. All other embodiments, which can be derived by a person skilled in the art from the embodiments of the disclosure without making creative efforts, shall fall within the protection scope of the disclosure.

Furthermore, the terms "first," "second," and the like in the description and in the claims, and in the drawings described above, in the embodiments of the present disclosure are used for distinguishing between similar elements and not necessarily for describing a particular sequential or chronological order. It will be appreciated that the data so used may be interchanged under appropriate circumstances such that the embodiments described herein may be practiced otherwise than as specifically illustrated or described herein.

Reference herein to "a plurality or a number" means two or more. "and/or" describes the association relationship of the associated objects, meaning that there may be three relationships, e.g., a and/or B, which may mean: a exists alone, A and B exist simultaneously, and B exists alone. The character "/" generally indicates that the former and latter associated objects are in an "or" relationship.

Research shows that front-end page development is a process of creating front-end pages such as WEB pages or APPs (applications) and presenting the front-end pages to users. When the front-end page is displayed to a user, the terminal is required to acquire a program code corresponding to the front-end page from a server, a cloud platform and other remote service platforms, and then the front-end page is obtained and displayed to the user through processing of the program code, such as coding operation, rendering and the like. For the specific process of front-end page development, a page designer is usually required to design a design draft corresponding to a front-end page first, then a program programmer converts the design draft into a program code corresponding to the front-end page, and then the front-end page corresponding to the design draft is rendered at a terminal based on the program code.

Based on the research, the present disclosure provides a conversion method, an apparatus, a computer device and a storage medium for a design draft, which utilize an atomic component preset in a target construction system, and implement automatic construction of a first target page corresponding to the design draft according to page construction information corresponding to the design draft, without a manual assistance mode, thereby greatly improving efficiency and speed of page construction, and further improving efficiency of front-end development. Replacing part of atomic assemblies (assemblies to be replaced) in the first target page by target assemblies with preset functions written in advance in the target building system, so that the part of atomic assemblies in the first target page can be replaced by the target assemblies with high-level functions, and a second target page containing the target assemblies with rich functions is obtained; the function corresponding to the target component is the function of the second target page, so that the function of the second target page can be further enriched based on the replaced target component.

The above-mentioned drawbacks are the results of the inventor after practical and careful study, and therefore, the discovery process of the above-mentioned problems and the solutions proposed by the present disclosure to the above-mentioned problems should be the contribution of the inventor in the process of the present disclosure.

It should be noted that: like reference numbers and letters refer to like items in the following figures, and thus, once an item is defined in one figure, it need not be further defined and explained in subsequent figures.

It should be noted that specific terms mentioned in the embodiments of the present disclosure include:

designing a draft: refers to the design draft of a User Interface, which is usually drawn by a UI (User Interface) designer through tools such as Figma, Sketch, Photoshop, etc.;

div: the full name of Division is the positioning technology in the cascading style sheet. DIV elements are block-level elements used to provide structure and context for the content of large blocks (block-level) within an HTML (HyperText Markup Language) document;

span: is an inline tag of HTML that is used to combine inline elements in a document. Span can be represented without a fixed format; it produces a visual change when a style is applied to it;

intra-row elements: one element in HTML, one in-line element only occupies the space contained by the border of its corresponding tag;

block level elements: one element in HTML, one block level element independently occupying one or more lines of space;

D2C: design 2Code, Design draft changes the Code;

IR: inter Representation, which is a data structure in JSON format, and has an internal Representation form;

CSS: cascading Style Sheets, a computer language used to add styles (fonts, font spacing, font color, etc.) to structured documents (e.g., HTML documents or XML (extensible markup language) documents);

the Left attribute: here referred to as the left attribute in CSS to indicate the horizontal distance of the upper left corner of a page component relative to its corresponding parent page component upper left corner.

Transform attribute: this refers to the Transform attribute in CSS, which is used to represent the change logic of the page component, typically including translation, rotation, etc.

Structure tree: in visual construction, a tree-shaped interface is usually provided to let the user know the composition structure of the constructed target page.

To facilitate understanding of the present embodiment, first, a detailed description is given to a conversion method for a design draft disclosed in the embodiments of the present disclosure, an execution subject of the conversion method for a design draft provided in the embodiments of the present disclosure is generally a computer device with certain computing capability, and in some possible implementations, the conversion method for a design draft may be implemented by a processor calling a computer readable instruction stored in a memory.

The following describes a method for converting a design draft provided by an embodiment of the present disclosure, taking an execution subject as a computer device as an example.

As shown in fig. 1, a flowchart of a method for converting a design draft provided by an embodiment of the present disclosure may include the following steps:

s101: determining page construction information corresponding to the design draft according to the acquired design draft to be processed; the page construction information comprises information of at least one atomic component in a target page corresponding to the design draft; the atomic components are components with minimum function granularity corresponding to the design draft.

Here, the design draft to be processed may be a design draft drawn by a UI (User Interface) designer and corresponding to a UI page. Fig. 2 is a schematic diagram of a design provided in an embodiment of the present disclosure.

The page construction information is construction information of each atomic component in a target page corresponding to the design draft, can determine the type of each atomic component required for forming the target page, and can determine the functions corresponding to each type of atomic component, the assembling mode of each type of atomic component, the quantity information corresponding to each type of atomic component, the position information and other information.

The atomic component is different from a page component with high-level functions such as an input box and a button, is a static component with the minimum function granularity corresponding to a design draft, and specifically includes a Div component and a Span component.

For the step, when the design draft to be processed is obtained, the design draft may be converted into IR information capable of representing the building information of each atomic component in the target page corresponding to the design draft by using an algorithm corresponding to the D2C technology. Here, the same design draft designed by different design tools corresponding to the IR information and the design draft created by the design draft creation, and the IR information converted by the algorithm corresponding to the D2C technique are different from each other, but the construction information of each atomic component in the target page corresponding to the design draft can be accurately represented. And the converted IR information corresponding to the design draft is information which cannot be accurately identified by the target building system. Thus, after the IR information is obtained, the IR information may be converted into page construction information that can be recognized by the target construction system based on the determined conversion relationship between the information that can be recognized by the target construction system and the IR information.

The target building system is a visual building system for building a page or a website in a visual interactive interface mode, and may include a location area for displaying a page component corresponding to a target page and a location area for displaying a structure tree corresponding to a generated component in the target building system, where the generated component may be a non-temporary component which is developed and published in advance by a developer in the target building system, and includes a page component (e.g., a target component) corresponding to the target page. Additionally, a location area for presenting the component code may also be included in the target construction system.

As shown in fig. 3, which is a schematic diagram of a target building system provided in the embodiment of the present disclosure, a first location area is an area for displaying a rendered page component corresponding to a target page, that is, the first location area may be used for displaying the target page; the second location area is a location area for displaying a structure tree corresponding to the generated component in the target building system, and the structure tree will be described later; and the third position area is a position area for showing the component codes of the page components corresponding to the generated target page.

In a specific implementation, the step of converting the design draft into the page construction information may be performed by using a construction information conversion plug-in deployed in the computer device. Illustratively, after a UI designer finishes drawing a design draft to be processed, a "export" button pre-deployed in a design tool may be clicked to generate a request for importing the design draft into a target building system, and then, in response to the request, the computer device may generate page building information corresponding to the design draft by using the building information conversion plug-in according to the above steps and paste the page building information on the pasting board, and then, may jump to the target building system and paste the page building information to the target building system for subsequently generating a target page.

Or, the step of converting the design draft into the page construction information may also be completed by using the target construction system, specifically, the design draft may be input into the target construction system, and the design draft is converted based on a construction information conversion algorithm preset by the target construction system to obtain the page construction information corresponding to the design draft.

S102: and constructing a first target page corresponding to the design draft according to the page construction information based on the preset atomic components and displaying the first target page in a first position area in the target construction system.

Here, the preset atomic components are components that developers previously developed and set in the target building system. And the type and the number of the preset atomic components are fixed, and based on the fixed type and the fixed number of the atomic components, the information is built according to different pages, the various types of atomic components are assembled, and the pages corresponding to various design manuscripts can be restored. That is, the preset atomic components are basic components for constructing pages corresponding to various design manuscripts.

Regarding the development of the atomic components set in advance, the Div components can be developed according to the following properties:

attribute 1: whether or not to support the slot.

Wherein a slot is a property that allows for reinsertion of other components inside the component.

Attribute 2: whether CSS style editing is supported.

Illustratively, based on the above attributes, various Div components with certain attributes may be developed, such as a Div component supporting slot and supporting CSS style editing, a Div component supporting slot but not supporting CSS style editing, a Div component not supporting slot but supporting CSS style editing, and so on, which are not listed here. In addition, for the CSS style editing attribute, a Div component may be developed in which the supported CSS styles are limited, for example, a Div component supporting only the font No. 1, a Div component supporting only the black sons, and the like.

For Span components, development can be made according to the following properties:

attribute a: whether text content for setting the Span component is supported.

The attribute a is an attribute for setting whether to support editing of text content in the developed Span component, for example, functions of adding text content, deleting text content, modifying text content, and the like.

And b, attribute b: whether CSS style editing is supported.

Illustratively, based on the above functions, various Span components with certain attributes can be developed, for example, a Div component supporting text content of the Span component and supporting CSS style editing, a Div component supporting text content of the Span component but not supporting CSS style editing, a Div component not supporting text content of the Span component but supporting CSS style editing, and so on, which are not listed here.

Thus, based on the foregoing, developers can develop a fixed number and fixed types of individual atomic components that can be provided in a target build system.

The first target page is a target page which is built according to the page building information and only comprises preset atomic components.

In specific implementation, the target building system may determine, based on the information built according to the page, information of at least one atomic component required for building the first target page, such as the type, number, location, and the like of the atomic components mentioned in the above embodiment, and then may automatically assemble the first target page according to the determined information of at least one atomic component required for building the first target page by using each preset atomic component. Here, the efficiency of page assembly is greatly improved without a manual auxiliary mode.

Thereafter, a first target page may be exposed at a first location area in the target construction system.

S103: screening components to be replaced corresponding to a preset function from a plurality of atomic components in a first target page, replacing the components to be replaced by target components with the preset function and written in advance in a target building system, and determining a second target page after updating the first target page based on the replaced target components.

Here, among the plurality of atomic components in the first target page, there may be at least one atomic component corresponding to a preset function. The preset function can be a high-level function which is not provided by an atomic component such as searching, page jumping and the like.

The target building system comprises a plurality of pre-programmed replacement components with different preset functions, each replacement component can be a high-level component summarized by developers according to development experiences and generalizations, for example, the replacement component can be an Input (Input box) component supporting an information Input function, a Button (Button) component supporting a user to click, press for a long time and the like, a Link (Link) component supporting connection to other websites and page functions, and the like. It should be noted that, the users mentioned in the embodiments of the present disclosure may be developers.

Specifically, regarding the development of a pre-written replacement component, the development can be performed according to the following functions for an Input component: i. whether a slot is supported; whether CSS style editing is supported; whether text entry is supported, i.e., whether a user is supported to enter text in a written replacement component; whether setting of the right button is supported, i.e., whether setting of the right button on the right side of the written replacement component is supported; v. whether prompt words are displayed before input is supported, that is, whether prompt words are displayed to the user before the user inputs words in the written replacement component, such as a user name, a user password and the like.

For example, based on the above functions, a plurality of Input components having different preset functions may be developed, for example, an Input component supporting all the above functions, an Input component supporting part of the above functions, and the like are developed, and the preset functions of the developed Input components are specifically developed, which is not limited herein.

For the Button component, the development can be performed according to the following functions: i. whether a slot is supported; whether CSS style editing is supported; whether the mouse is supported to slide to become a hand shape or not, namely whether the mouse is supported to change the mouse style to the hand shape when the user controls the mouse to slide through the component or not; supporting the configuration of the clicked event, namely whether the configuration is supported to generate a response matched with the configured event after the user clicks the component, and supporting the setting of the clicked event under the condition that the configuration is supported to generate a response matched with the configured event after the user clicks the component, such as displaying a target image after clicking, displaying a target video and the like.

Similarly, based on the above functions, various Button components with different preset functions can be developed, which are not listed here.

For the Link component, the following functions can be developed: i. whether a slot is supported; whether CSS style editing is supported; whether mouse sliding is supported to change into a hand shape; and iv, supporting the configuration of the link which jumps after clicking, namely whether the configuration is supported to automatically jump to the configured link after the user clicks the component, and supporting the setting of the clicked and jumped link under the condition that the configuration is supported to automatically jump to the configured link after the user clicks the component, such as the link which jumps to the website A after clicking, the link which jumps to the page A and the like.

Similarly, based on the above functions, a plurality of Link components with different preset functions can be developed, which are not listed here.

The target component is a replacement component which is screened from the replacement components included in the target building system and is used for replacing the component to be replaced screened from the first target page.

In specific implementation, after the first target page is obtained, each atomic component in the first target page may be identified, and each atomic component corresponding to the preset function is determined from the identified atomic components and is used as the screened component to be replaced.

And then, aiming at each component to be replaced, selecting a target component with a preset function corresponding to the component to be replaced from the replacement components in the target building system according to the preset function corresponding to the component to be replaced, and replacing the component to be replaced by using the selected target component. And then, each component to be replaced is replaced by the corresponding target component.

Further, a second target page updated to the first target page may be determined based on the replaced target component. Here, based on the atomic components that are not replaced in the first target page and the target components that are replaced, the second target page composed of the atomic components that are not replaced in the first target page and the target components can be generated, that is, the update of the first target page is realized. Thereafter, the second target page may be presented in the first location area. And the first target page and the second target page are both target pages corresponding to the design draft.

In addition, in an embodiment, if a usage scenario corresponding to a target page corresponding to the design draft is simple, for example, the target page is a static text information presentation page, a to-be-replaced component corresponding to a preset function may not exist in a first target page corresponding to the generated design draft. In this case, the page to be replaced cannot be screened out, that is, the first target page can be directly used as the final page without performing the step of replacing the original component in the first target page by using the replacement component.

In addition, in an embodiment, if there is no target component which is written in advance and has a preset function corresponding to a certain component to be replaced in the target building system, the atomic component corresponding to the component to be replaced is not replaced, and after a subsequent developer writes and releases the target component having the preset function corresponding to the component to be replaced in the target building system, the atomic component corresponding to the component to be replaced is replaced.

Therefore, the automatic construction of the first target page corresponding to the design draft is realized by utilizing the preset atomic components in the target construction system and according to the page construction information corresponding to the design draft, a manual auxiliary mode is not needed, the efficiency and the speed of the page construction are greatly improved, and the efficiency of front-end development is further improved. Replacing part of atomic assemblies (assemblies to be replaced) in the first target page by target assemblies with preset functions written in advance in the target building system, so that the part of atomic assemblies in the first target page can be replaced by the target assemblies with high-level functions, and a second target page containing the target assemblies with rich functions is obtained; the function corresponding to the target component is the function of the second target page, so that the function of the second target page can be further enriched based on the replaced target component.

In one embodiment, for S103, the following steps may be performed:

s103-1: and screening the components to be replaced corresponding to the preset functions from the plurality of atomic components based on the component characteristic information of each atomic component in the plurality of atomic components in the first target page.

Here, the component feature information is used to represent category information of the atomic component, and can reflect a function corresponding to the atomic component. For example, if the component category characteristic information of the atomic component a is that the atomic component a is a component of a button category, it may be determined that the function corresponding to the atomic component a is a search function.

In specific implementation, for each atomic component in a plurality of atomic components in the first target page, feature recognition may be performed on the atomic component to determine component feature information corresponding to the atomic component. Then, based on the determined component characteristic information of each atomic component, a function corresponding to each atomic component may be determined, and further, based on the determined function corresponding to each atomic component, an atomic component whose corresponding function is a preset function may be screened from the atomic components and used as a component to be replaced corresponding to the preset function screened from the plurality of atomic components.

In one embodiment, the steps of performing feature recognition on the atomic component and determining component feature information corresponding to the atomic component may be performed by using a component feature recognition model deployed in a cloud service. Here, the component feature recognition model is a model trained in advance for predicting component feature information corresponding to an atomic component.

Specifically, after the first target page is obtained, the calling information of the component feature recognition service deployed in the cloud service may be determined by using a service discovery function corresponding to the target building system, where the component feature recognition service is a service generated based on the component feature recognition model and deployed in the cloud service, and the calling information may include calling Port information and calling IP (Internet Protocol) address information corresponding to the component feature recognition model. Then, a component feature recognition service can be called from the cloud service based on the calling information, feature recognition is performed on each atomic component in the first target page by using a component feature recognition model corresponding to the component feature recognition service, and component feature information corresponding to each atomic component is determined.

Therefore, the component characteristic information corresponding to each atomic component can be automatically determined by utilizing the component characteristic identification model, the component to be replaced is automatically determined and automatically replaced by utilizing the target component corresponding to the component to be replaced based on the component characteristic information corresponding to each atomic component, the second target page is finally generated, the whole process is automatically completed, and the generation efficiency of the target page corresponding to the design draft is improved.

S103-2: and screening target assemblies with preset functions matched with the assembly characteristic information from pre-written replacement assemblies corresponding to the target building system based on the assembly characteristic information of each assembly to be replaced.

In this step, for each determined component to be replaced, a function corresponding to the component to be replaced may be determined according to the component characteristic information of the component to be replaced, based on the function and a preset function of each replacement component in pre-programmed replacement components corresponding to the target building system, a replacement component having a preset function identical to the function corresponding to the component to be replaced is screened from the pre-programmed replacement components, and the replacement component is used as a screened target component having a matching function with the component characteristic information corresponding to the component to be replaced.

S103-3: and deleting the component to be replaced, and inserting the target component matched with the component to be replaced into the component position corresponding to the component to be replaced.

Here, the component position is a position of the component to be replaced in the first target page.

In specific implementation, for each component to be replaced, the component position of the component to be replaced in the first target page may be determined, and then the component to be replaced at the component position may be deleted and the target component corresponding to the component to be replaced is inserted into the component position corresponding to the component to be replaced, so as to replace the component to be replaced.

Further, based on this step, the step of replacing each component to be replaced with a corresponding target component can be realized.

Additionally, in one embodiment, if it is determined that a certain component to be replaced does not have a corresponding target component, the component to be replaced is not deleted.

In one embodiment, for S103, the following steps may be performed:

step one, responding to a first selected operation of atomic components in a first target page, and taking at least one selected atomic component as a component to be replaced.

Here, the first selected operation may be a user-initiated operation that selects an atomic component in the first target page.

In particular implementation, after the first target page is displayed in the first position area, the atomic component selected by the user can be used as the component to be replaced in response to a first selection operation selected by the user for the atomic component in the first target page.

When the user selects an atomic component, one atomic component may be selected, and a plurality of atomic components may be selected, which is not limited herein. And, in the case that the atomic component selected by the user is a parent atomic component including child atomic components, selecting the parent atomic component and selecting each child atomic component corresponding to the parent atomic component, but in the case that the atomic component selected by the user is a child atomic component, the parent atomic component will not be selected. Fig. 4 is a schematic diagram of a first target page according to an embodiment of the disclosure. The first target page comprises a parent atomic component and two corresponding child atomic components, wherein the child atomic components are located in the parent atomic component and occupy partial position areas corresponding to the parent atomic component, and in addition, the first target page also comprises an independent atomic component.

In addition, after a user selects an atomic component, the user can also perform deselection operation on the selected atomic component, so as to avoid the problem that the user selects the atomic component by mistake.

And step two, in response to a second selected operation aiming at the pre-programmed replacement component, determining a target component corresponding to each component to be replaced.

Here, the second selected operation is an operation initiated by the user to select a target component for replacement of the component to be replaced.

In specific implementation, after determining the component to be replaced corresponding to the first selected operation, the user may initiate a second selected operation for a replacement component written in advance in the target building system, and then, in response to the second selected operation, may take the replacement component corresponding to the second selected operation as the target component corresponding to the component to be replaced.

And step three, deleting the component to be replaced aiming at each component to be replaced, and inserting the target component matched with the component to be replaced into the component position corresponding to the component to be replaced.

For the specific implementation process of the step, reference may be made to S103-3, which is not described herein again.

In an embodiment, after determining, based on the replaced target component, a second target page after updating the first target page, the page component including text information displayed in the second target page may also be adjusted, and specifically, the following steps may be implemented:

the method comprises the following steps: and responding to the selected operation of the target node of the structure tree displayed aiming at the second position area in the target building system, displaying the page component containing the text information corresponding to the target node in the first position area, and displaying the component code corresponding to the page component in the third position area in the target building system.

Here, the page component is an atomic component or a target component in the second target page; the structure tree comprises at least one node, one node corresponds to one page component, and the selection of the page component corresponding to the node can be realized by selecting the node in the structure tree.

After the second target page is generated, each page component corresponding to the second target page becomes a generated component in the target building system, and then the target building system can generate a structure tree corresponding to the second target page based on each page component corresponding to the second target page and display the structure tree in the second position area. In addition, nodes corresponding to other generated target pages or other generated page components can be displayed in the displayed structure tree. In fig. 3, there are shown a node 1, a node 2, a node 3 and a node 4 corresponding to the structure tree, where the node 1 corresponds to the page component 1 in the second target page, the node 2 corresponds to the page component 2 in the second target page, the node 3 corresponds to the page component 3 in the second target page, and the node 4 corresponds to the page component 4 in the second target page.

The selection operation aiming at the target node is initiated by the user and is used for selecting the page component corresponding to the target node, and the target node is the node selected by the user in the structure tree.

In the specific implementation of this step, if the user needs to adjust the page component containing the text information, a selection operation for a target node corresponding to the page component containing the text information in the structure tree may be initiated, where the node selected by the selection operation may include at least one node. Then, in response to the selected operation for the target node, the page component corresponding to the target node and containing the text information can be separately displayed in the first position area. Or, after determining the page component corresponding to the target node, the page component displayed in the second target page in the first location area may be selectively marked, and at this time, the second target page is still displayed in the first location area. As shown in fig. 3, a page component corresponding to the selected target node is shown, where the selected target node is node 3, and the selected marked page component is the page component 3 corresponding to the target node.

And after determining the page component corresponding to the target node, acquiring a component code of the page component corresponding to the target node, and displaying the component code in a third location area in the target building system.

Step two: code adjustment information for the component code is obtained.

Here, the code adjustment information is information for adjusting the component code.

In one embodiment, the code adjustment information may include first adjustment information for adjusting a part of the component code corresponding to the position of the text information in the page component, and/or second adjustment information for adjusting a part of the component code corresponding to the position of the component of the page component. The first adjustment information may be used to adjust the position of the text information in the page component, and the second adjustment information may be used to adjust the component position of the page component. In addition, the code adjustment information may also include text editing information for editing text information in the page component, for example, adding text, reducing text, updating text, and the like.

Specifically, the first adjustment information may include the following three types: 1. the self-adaptive direction of the characters is towards the left, namely, the positions of the characters in the page assembly in the left direction are fixed, and the change of the character information in the page assembly is adjusted according to the character editing information input by a user; 2. the self-adaptive direction of the characters is towards the right, namely, the positions of the characters in the page assembly in the right direction are fixed, and the change of the character information in the page assembly is adjusted according to the character editing information input by a user; 3. the character self-adaptation direction is self-adaptation at two sides, namely, the center position of characters in the page assembly is fixed, and the change of character information in the page assembly is adjusted according to character editing information input by a user.

In addition, in the process of setting the first adjustment information, the user may also set second adjustment information for adjusting the component position of the page component, where the second adjustment information may include left attribute information and transform attribute information, and specifically, the user may complete input of the second adjustment information by setting the left attribute information and/or the transform attribute information.

And step two, when the method is implemented specifically, a user can specify the code adjustment information aiming at the component code in the third position area. Specifically, the information specified by the user may be the first adjustment information and/or the second adjustment information, in fig. 3, an information specification frame for the first adjustment information is displayed in the third location area, and the user may select the adjustment instruction information by clicking the information specification frame to implement setting of the first adjustment information, and may also implement setting of the second adjustment information based on the adjustment instruction information corresponding to the information specification frame.

Wherein, the adjustment indication information may include: (1) the middle is fixed, the two sides extend, the middle is fixed and indicates that the character self-adaptive direction is self-adaptive at the two sides, the extending indication at the two sides sets left attribute information as the middle of the character corresponding to the character information, and sets transform attribute information as half of the length of the character corresponding to the character information translated leftwards; (2) left fixed and right extended, wherein the left fixed indication characters are adaptive to the left direction, and the right extended indication left attribute information and transform attribute information are set as default values or initial values; (3) and the left extension indicates that left attribute information is set as the right side of the character corresponding to the character information, and transform attribute information is set as the character length corresponding to the character information which is translated leftwards.

In addition, in fig. 3, a text editing box for inputting text editing information is also displayed in the third location area, and the user can specify the code adjustment information by using the information specification box and the text editing box.

In an embodiment, the target building system may also support the user to actively input transform attribute information and left attribute information in the third location area, that is, support the separate adjustment of the second adjustment information.

Based on the above steps, the target building system may acquire code adjustment information (first adjustment information and/or second adjustment information).

Step three: and updating the component position of the page component and/or the position of the text information in the page component based on the code adjustment information to obtain an updated page component and displaying the updated page component in the first position area.

In specific implementation, the text information and the position in the page component can be updated according to the first adjustment information and the text editing information in the acquired code adjustment information, and the component position of the page component can be updated according to the second adjustment information. And further, based on the page component with the updated text information and position and/or the page component with the updated component position, obtaining an updated page component, and displaying the updated page component in the first position area.

In an embodiment, for a component feature recognition model, the embodiment of the present disclosure further provides a method for training the component feature recognition model, and specifically, a to-be-replaced sample component specified by a user and a target sample component corresponding to the to-be-replaced sample component specified by the user, which correspond to a target building system, may be obtained.

Here, the sample component to be replaced may be an atomic component designated by the user as the component to be replaced when the user uses the target building system, and the target sample component corresponding to the sample component to be replaced designated by the user may be a target component designated for replacing the component to be replaced when the user uses the target building system.

In specific implementation, a to-be-replaced component designated by a user in history and a target component corresponding to the designated to-be-replaced component can be obtained, a plurality of to-be-replaced sample components and a plurality of target sample components corresponding to the to-be-replaced sample components are obtained, each to-be-replaced sample component is used as training data, and the target sample component corresponding to each training data is used as a label of the training data.

In an embodiment, a preset function of a target sample component corresponding to each training data or manually determined component feature information may also be used as a label corresponding to the training data.

Then, iterative training can be carried out on the component feature recognition model based on the sample component to be replaced and the target sample component until a training cut-off condition is met, and the trained component feature recognition model is obtained.

Here, the satisfaction of the training cutoff condition may be that the number of rounds of iterative training of the component feature recognition model reaches the target round, or that the recognition accuracy of the trained component feature recognition model reaches the preset accuracy.

Specifically, the sample component to be replaced may be input to the component feature recognition model to be trained, the component feature recognition model to be trained is used to process the component feature recognition model, the prediction component feature information corresponding to the sample component to be replaced is output, then, the feature prediction loss may be determined based on the prediction component feature information and the label corresponding to the sample component to be replaced (the component feature information of the target sample component corresponding to the sample component to be replaced), and then, the component feature recognition model to be trained may be iteratively trained by using the feature prediction loss until a training cutoff condition is satisfied, so as to obtain the trained component feature recognition model.

It will be understood by those skilled in the art that in the method of the present invention, the order of writing the steps does not imply a strict order of execution and any limitations on the implementation, and the specific order of execution of the steps should be determined by their function and possible inherent logic.

Based on the same inventive concept, a device for converting a design draft corresponding to the method for converting a design draft is also provided in the embodiments of the present disclosure, and because the principle of solving the problem of the device in the embodiments of the present disclosure is similar to the method for converting a design draft described above in the embodiments of the present disclosure, the implementation of the device may refer to the implementation of the method, and repeated details are omitted.

As shown in fig. 5, a schematic diagram of a device for converting a design draft provided in an embodiment of the present disclosure includes:

a first determining module 501, configured to determine, according to an acquired design draft to be processed, page construction information corresponding to the design draft; the page construction information comprises information of at least one atomic component in a target page corresponding to the design draft; the atomic component is a component with the minimum function granularity corresponding to the design draft;

a building module 502, configured to build a first target page corresponding to the design draft according to the page building information based on a preset atomic component, and display the first target page in a first position area in a target building system;

a second determining module 503, configured to filter a component to be replaced corresponding to a preset function from the multiple atomic components in the first target page, replace the component to be replaced with a target component with the preset function written in the target building system in advance, and determine, based on the replaced target component, a second target page after updating the first target page.

In a possible implementation manner, the second determining module 503 is configured to filter a component to be replaced corresponding to a preset function from a plurality of atomic components in the first target page based on component feature information of each atomic component in the plurality of atomic components;

In a possible implementation, the second determining module 503 is configured to, in response to a first selection operation on an atomic component in the first target page, take the selected at least one atomic component as a component to be replaced;

In a possible implementation, the second determining module 503 is further configured to determine component feature information of each atomic component according to the following steps:

In a possible embodiment, the apparatus further comprises:

an updating module 504, configured to, after determining a second target page updated for the first target page based on the replaced target component, respond to a selected operation on a target node of a structure tree displayed in a second location area in the target building system, display a page component containing text information corresponding to the target node in the first location area, and display a component code corresponding to the page component in a third location area in the target building system; the page component is an atomic component or a target component in the second target page; the structure tree comprises at least one node, and one node corresponds to one page component;

acquiring code adjustment information for the component code;

In a possible embodiment, the apparatus further comprises:

a training module 505, configured to train the component feature recognition model according to the following steps:

The description of the processing flow of each module in the device and the interaction flow between the modules may refer to the related description in the above method embodiments, and will not be described in detail here.

An embodiment of the present disclosure further provides a computer device, as shown in fig. 6, which is a schematic structural diagram of a computer device provided in an embodiment of the present disclosure, and includes:

a processor 61 and a memory 62; the memory 62 stores machine-readable instructions executable by the processor 61, the processor 61 being configured to execute the machine-readable instructions stored in the memory 62, the processor 61 performing the following steps when the machine-readable instructions are executed by the processor 61: s101: determining page construction information corresponding to the design draft according to the acquired design draft to be processed; the page construction information comprises information of at least one atomic component in a target page corresponding to the design draft; the atomic component is a component with the minimum function granularity corresponding to the design draft; s102: constructing a first target page corresponding to the design draft according to the page construction information based on a preset atomic component, and displaying the first target page in a first position area in a target construction system; and S103: screening components to be replaced corresponding to a preset function from a plurality of atomic components in a first target page, replacing the components to be replaced by target components with the preset function and written in advance in a target building system, and determining a second target page after updating the first target page based on the replaced target components.

The memory 62 includes a memory 621 and an external memory 622; the memory 621 is also referred to as an internal memory, and temporarily stores operation data in the processor 61 and data exchanged with the external memory 622 such as a hard disk, and the processor 61 exchanges data with the external memory 622 via the memory 621.

For the specific execution process of the instruction, reference may be made to the steps of the conversion method of the design draft in the embodiment of the present disclosure, and details are not described here.

The embodiments of the present disclosure also provide a computer-readable storage medium, where a computer program is stored on the computer-readable storage medium, and when the computer program is executed by a processor, the computer program performs the steps of the method for converting a design draft in the above method embodiments. The storage medium may be a volatile or non-volatile computer-readable storage medium.

The computer program product of the conversion method for a design draft provided in the embodiments of the present disclosure includes a computer-readable storage medium storing a program code, where instructions included in the program code may be used to execute steps of the conversion method for a design draft described in the above method embodiments, which may be referred to in the above method embodiments specifically, and are not described herein again.

The computer program product may be embodied in hardware, software or a combination thereof. In an alternative embodiment, the computer program product is embodied in a computer storage medium, and in another alternative embodiment, the computer program product is embodied in a Software product, such as a Software Development Kit (SDK), or the like.

It is clear to those skilled in the art that, for convenience and brevity of description, the specific working processes of the system and the apparatus described above may refer to the corresponding processes in the foregoing method embodiments, and are not described herein again. In the several embodiments provided in the present disclosure, it should be understood that the disclosed system, apparatus, and method may be implemented in other ways. The above-described embodiments of the apparatus are merely illustrative, and for example, the division of the units is only one logical division, and there may be other divisions when actually implemented, and for example, a plurality of units or components may be combined or integrated into another system, or some features may be omitted, or not executed. In addition, the shown or discussed mutual coupling or direct coupling or communication connection may be an indirect coupling or communication connection of devices or units through some communication interfaces, and may be in an electrical, mechanical or other form.

The units described as separate parts may or may not be physically separate, and parts displayed as units may or may not be physical units, may be located in one place, or may be distributed on a plurality of network units. Some or all of the units can be selected according to actual needs to achieve the purpose of the solution of the embodiment.

In addition, functional units in the embodiments of the present disclosure may be integrated into one processing unit, or each unit may exist alone physically, or two or more units are integrated into one unit.

The functions, if implemented in the form of software functional units and sold or used as a stand-alone product, may be stored in a non-volatile computer-readable storage medium executable by a processor. Based on such understanding, the technical solution of the present disclosure may be embodied in the form of a software product, which is stored in a storage medium and includes several instructions for causing a computer device (which may be a personal computer, a server, or a network device) to execute all or part of the steps of the method according to the embodiments of the present disclosure. And the aforementioned storage medium includes: various media capable of storing program codes, such as a usb disk, a removable hard disk, a Read-Only Memory (ROM), a Random Access Memory (RAM), a magnetic disk, or an optical disk.

Finally, it should be noted that: the above-mentioned embodiments are merely specific embodiments of the present disclosure, which are used for illustrating the technical solutions of the present disclosure and not for limiting the same, and the scope of the present disclosure is not limited thereto, and although the present disclosure is described in detail with reference to the foregoing embodiments, those skilled in the art should understand that: any person skilled in the art can modify or easily conceive of the technical solutions described in the foregoing embodiments or equivalent technical features thereof within the technical scope of the present disclosure; such modifications, changes or substitutions do not depart from the spirit and scope of the embodiments of the present disclosure, and should be construed as being included therein. Therefore, the protection scope of the present disclosure shall be subject to the protection scope of the claims.

Claims

1. A method for converting a design draft, comprising:

2. The method according to claim 1, wherein the screening of a component to be replaced corresponding to a preset function from a plurality of atomic components in the first target page and the replacement of the component to be replaced by a target component with a preset function written in advance in the target building system comprises:

3. The method according to claim 1, wherein the screening of a component to be replaced corresponding to a preset function from a plurality of atomic components in the first target page and the replacement of the component to be replaced by a target component with a preset function written in advance in the target building system comprises:

4. The method of claim 2, further comprising the step of determining component characterization information for each atomic component:

5. The method of claim 1, after determining a second target page updated to the first target page based on the replaced target component, further comprising:

acquiring code adjustment information for the component code;

6. The method according to claim 5, wherein the code adjustment information comprises first adjustment information for adjusting the position of text information in the page component and/or second adjustment information for adjusting the position of a component of the page component.

7. The method of claim 4, further comprising the step of training the component feature recognition model:

8. A device for converting a design draft, comprising:

9. A computer device, comprising: a processor, a memory, the memory storing machine-readable instructions executable by the processor, the processor being configured to execute the machine-readable instructions stored in the memory, the processor performing the steps of the design draft conversion method recited in any one of claims 1 to 7 when the machine-readable instructions are executed by the processor.

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