KR20220162585A - Device and method for web auto generator for extracting web design properties - Google Patents

Abstract

The present invention relates to a web publishing technology and, more specifically, to a device and method for generating web documents extracting web design properties, which use deep learning to convert design-related files such as images into files which can be recognized on a web. According to an embodiment of the present invention, it is possible to produce and generate the web page capable of web service by detecting and analyzing an object in an image or a screen design using deep learning.

Description

Web document generation device and method for extracting web design properties { DEVICE AND METHOD FOR WEB AUTO GENERATOR FOR EXTRACTING WEB DESIGN PROPERTIES }

The present invention relates to web publishing technology, and more particularly, to a web document generation device and method for converting design-related files such as images into web pages using deep learning and extracting web design attributes for generating web documents. will be.

The web development industry is demanding manpower supply and structural improvements for efficiency to address the chronic developer shortage. The existing systematic web development process includes planning - design - publishing - development, but the development process after planning involves many repetitive tasks. In particular, the publishing process following design is a process of converting design-related files (images or design program files) into files that can be recognized on the web, so it can be called a kind of mechanical translation work. It takes a lot of developer manpower to do this, and it's one of the reasons why demand is not being met despite the growing developer population. In response, professional design tools such as Photoshop programs have made efforts to automatically convert design files into web documents, but it is only a mechanical translation that is insufficient for actual field use, so development personnel are still involved in solving the problem.

1. Korea Patent Registration No. 10-1991297 “Web-based document editing support device supporting customization of document editing interface and its operation method” (Registration date: June 14, 2019)

The present invention provides a web document generation apparatus and method for extracting object information and image property information from an image using deep learning, constructing a layout, and extracting web design properties that are rapidly converted into a web page.

According to one aspect of the present invention, a web document generating apparatus for extracting web design properties is provided.

According to an embodiment of the present invention, a web document generation apparatus for extracting web design properties using web page area segmentation includes an input unit for receiving data to be converted into a web page, and a region separator for detecting and dividing a region to be expressed as a web page from data. An object detection unit that detects objects included in installment, data, a correction unit that corrects the position and size of an object in accordance with the area when an object overlaps in multiple areas, a design property unit that extracts design property information included in an object, It may include a layout configuration unit that configures the layout of the web page including any one of the divided areas, objects, and design property information, and a generation unit that creates a file of information for implementing the web page.

According to another aspect of the present invention, a web document generation method for extracting web design properties and a computer program for executing the same are provided.

A web document creation method for extracting web design properties according to an embodiment of the present invention includes the steps of receiving data to be converted into a web page, detecting and dividing an area to be expressed as a web page in the data, and selecting an object included in the data. Detecting, correcting the position and size of an object in accordance with the area if the object overlaps in multiple areas, extracting design property information included in the object, dividing area, object and design property information It may include configuring the layout of the web page and generating a file with information for implementing the web page.

According to an embodiment of the present invention, it is possible to produce and generate a web page capable of web service by detecting and analyzing an object included in data such as an image or a screen design by utilizing deep learning.

In addition, according to an embodiment of the present invention, it is possible to improve productivity by reducing web page creation time by improving the existing web publishing process.

In addition, according to an embodiment of the present invention, since a web document representing a generated web page is generated, stored, and provided, management or modification is easy.

1 to 4 are diagrams for explaining a web document generating apparatus for extracting web design attributes according to an embodiment of the present invention.
5 is a diagram for explaining a web document generation method for extracting web design properties according to an embodiment of the present invention.
6 to 16 are examples of generating a web page by executing a web document generating apparatus for extracting web design properties according to an embodiment of the present invention.

Since the present invention can make various changes and have various embodiments, specific embodiments are illustrated in the drawings and will be described in detail through detailed description. However, this is not intended to limit the present invention to specific embodiments, and should be understood to include all modifications, equivalents, and substitutes included in the spirit and scope of the present invention. In describing the present invention, if it is determined that a detailed description of related known technologies may unnecessarily obscure the subject matter of the present invention, the detailed description will be omitted. Also, as used in this specification and claims, the terms "a" and "an" are generally to be construed to mean "one or more" unless stated otherwise.

Hereinafter, preferred embodiments of the present invention will be described in detail with reference to the accompanying drawings. do it with

The present invention can be implemented as a web page by analyzing an image or screen design using deep learning.

1 to 4 are diagrams for explaining a web document generating apparatus for extracting web design properties according to an embodiment of the present invention.

1 is a block diagram briefly illustrating a web document generating apparatus for extracting web design properties according to an embodiment of the present invention.

Referring to FIG. 1 , the web document creation device 10 for extracting web design properties includes an input unit 100, a region segmentation unit 200, an object detection unit 300, a design property unit 400, a layout configuration unit ( 500), and a generator 600.

The input unit 100 receives data to be converted into a web page. For example, the input unit 100 may be a design file such as an image of a screen design document or a plan document.

The region dividing unit 200 detects and divides a region to be expressed as a web page in the input data. The region segmentation unit 200 detects an object included in the input data and extracts its location and size. For example, the region divider 200 may divide the region of input data into regions that can be expressed in HTML using the OpenCV library and image processing algorithm.

Web pages are basically made up of rectangles. Even if the image including the component is not rectangular, the web page must create a rectangular area that can compose the component included in the image. The region dividing unit 200 may divide the region of the input data into rectangles.

According to an embodiment of the present invention, the region dividing unit 200 proceeds with division assuming that the background is a plain background of a solid color or gradient. The area divider 200 may determine the starting point of the color change starting from the edge as the start of the inner area and divide the area by considering the padding and margin used in HTML. The area divider 200 may divide the area into several areas based on the same line as the background color.

According to an embodiment of the present invention, the region dividing unit 200 performs additional division using a region growing algorithm that determines the same color as the same region. For example, the region dividing unit 200 may additionally divide a region by using a region growing algorithm when it cannot be distinguished because it is surrounded by other components within one region. A region growing algorithm may determine the same color as the same region in consideration of a case where a region cannot be distinguished by a line because it is overlapped by another component. For example, the region division unit 200 stores the region-divided image in a 2d array, sets each point of the 2d array as a Seed, and then performs a region growing algorithm for each point if it has not already been processed. is available. The region divider 200 assumes a portion exceeding a certain threshold as an edge using a region growing algorithm, and returns the size and position of the region having the same color to divide the region. .

The region division unit 200 arranges overlapping regions found by different algorithms in the division process. Since the region division unit 200 divides regions based on a line having the same background color or divides regions using a region growing algorithm, regions that are identical to each other can be found and regions can be overlapped. Since a web page constitutes one component in one area, overlapping areas can be removed to fit the structure of the web page.

Since the web page has a tree structure, the region divider 200 changes the list of divided regions into a form with one root. That is, the region dividing unit 200 may implement a tree structure by determining an inclusion relationship using x, y, width, and height information constituting the region and converting the region into a parent-children structure.

The region divider 200 is a separate region on HTML, but is actually implemented together with other regions to integrate attributes treated as a part into one region. For example, a border attribute is an area separate from an image area on HTML, but can be treated as an attribute corresponding to a part of an image on a web page. The region divider 200 may integrate border properties treated as part of the image into the image region.

Since the region divider 200 divides all regions into rectangles, they may overlap each other. At this time, the region divider 200 may calculate the z-index to determine which region should be displayed in the front (top) and which region should be displayed in the back (bottom) among the overlapped regions, the top and bottom of the overlapped region.

The object detection unit 300 may detect an object included in the input data. The object detection unit 300 extracts the coordinates, type, hierarchical relationship, and tag properties of the UI object included in the input data. The object detection unit 300 may detect an object represented in input data with an object detection learning model using a convolutional neural network (CNN). For example, the object detection unit 300 uses a convolutional neural network (CNN) to determine a position where an object exists on an image and what the corresponding object is. The object detection unit 300 detects a string in an object using OCR and extracts the position and character of the string.

The object detection unit 300 may determine an object and extract an object list including an object type, location, and size.

The object detection unit 300 may perform learning by collecting web component data as a data set of an object detection learning model. The object detection unit 200 may collect data for object detection learning only by using web crawling. For example, the object detection unit 300 may create a data set by collecting web publishing files, commercial pages, brand pages collected by a web crawler, domestic and foreign shopping mall pages, and the like. The object detection unit 300 may perform inspection work to filter out valid data from among the collected data. The object detection unit 300 may store collected valid data, extract data according to query conditions, and convert the data into an input format suitable for each learning model.

The size of the image is also flexible because the screen size of the web page is not fixed because the screen of each user's device can be different. The object detection unit 300 may prevent generation of input data having an excessive height or width by dividing an image having a flexible size into a learnable scale.

Referring to FIG. 2 , the object detection unit 300 prevents objects in an image from being cropped in the process of segmenting the image. In detail, the object detection unit 300 may divide an image as shown in FIG. 2 (a). As shown in FIG. 2(b), the object detection unit 300 may prevent objects in the image from being cut by placing overlapping areas when segmenting the image. For example, the object detection unit 300 may prevent objects in the image from being segmented by providing overlapping regions when segmenting the image using a stride among kernel techniques in order to prevent the object in the image from being cut.

Also, the object detection unit 300 generates input data considering the scale factor. For example, the object detection unit 300 may perform preprocessing of generating a fragmented image or an image generated by binding the cut images as input data. Since the size and configuration of the web page are flexible according to the user's device, the object detection unit 300 may perform preprocessing to reduce uncertainty about the scale.

According to an embodiment, the object detection unit 300 may use moblieNet as an object detection learning model. The object detection unit 300 may use as input data a multi-scaled image divided by section rather than a complete image. However, if multi-scaled images for each section are used as input values, a lot of computation time may be required for prediction. For example, if a web page image with a size of 1920*1040 is applied, multi-scale is reconstructed into 534 divided images, which become input data for an object detection learning model. Arithmetically, it may take 534 times longer than the time to predict an object from one image. Therefore, the object detection unit 300 may use a mobile net most suitable for fast calculation.

In a web page, the size of an image is flexible, but the size of an object in an image is also flexible. For example, there is no problem in recognizing or extracting small objects such as radio buttons or checkboxes, but problems in extracting relatively large objects such as tables or navigation that are flexible in size may occur. The object detection unit 300 adjusts the size of the image according to the size of the object so that the object can be completely included.

The object detection unit 300 may individually create and learn a learning model for detecting and extracting each object according to the detected object. The object detection unit 300 may create a UI group by classifying UIs having a similar shape and use an object detection learning model. For example, the object detection unit 300 may use the same object detection learning model by generating navigation and pagination in the same UI group. Because web trends are always changing, new UIs can be created over time. The object detection unit 300 may use an individual object detection learning model with a different weight according to each UI. The object detection unit 300 uses an independent individual learning model, and when a new UI appears, it can be easily used by adding a new module without needing to modify the entire learning model.

The object detection unit 300 may implement a learning model optimized for each UI through a hyperparameter tuning process as well as different weights.

Referring to FIG. 3 , the object detection unit 300 may learn by converting a divided region image to a larger size in order to maintain the characteristics of the image. The object detection unit 300 may learn images divided into different sizes as they are in the case of a large UI, and may learn by enlarging them according to the input size of the learning model in the case of a small UI.

Since the object detection unit 300 has various sizes and aspect ratios of objects to be found, it is possible to implement a learning model capable of learning by classifying into a large UI and a small UI. The object detection unit 300 may expand the kernel size so that each layer can be determined based on a larger amount of information. For example, in order to detect a small UI, the object detection unit 300 may detect an object by dividing it into a minimum image size of a data set used in a learning model with a size of 600*600. Also, the object detection unit 300 may detect an object by dividing an image into a basic 1920*1080 size of a web page.

The object detection unit 300 applies a value of 0.8, which is higher than the IoU standard of 0.5, which is generally used for learning, in order to reduce the error of the object detection position, so that an accurate position can be detected.

The object detection unit 300 may detect UIs of various sizes by applying a multi-scale. However, when the object detection unit 300 detects an object, it is not easy to extract an accurate pixel unit location.

Accordingly, the object detection unit 300 performs a process of correcting the error considering that the error may be amplified due to the multi-scale application. The object detection unit 300 predicts bounding boxes in which objects are determined. The object detection unit 300 processes an overlapping portion among bounding boxes predicted in multi-scale. The object detection unit 300 compares each predetermined kernel section in consideration of the part where the meaning of the bounding box is different for each scale that is predicted in multi-scale. The object detection unit 300 performs non max suppression (loU) and leaves only the bounding box with the highest confidence value. For example, the object detection unit 300 may extract a bounding box candidate group from an image using the sobel function of the OpenCV library capable of calculating the differential value of the image, and correct the position of the candidate group based on IoU. have.

The correction unit 400 finds a segmented area including the detected object using the segmentation information and the object detection information, or finds and matches the closest segmented area that can represent the object.

The correction unit 400 corrects the position and size of the object according to the area when the detected object overlaps in several areas. The position and size of the segmentation area may be more accurate than the position and size information of the object extracted in pixel units. Therefore, the correction unit 400 may correct the position and size information of the object according to the segmentation area information.

Referring to FIG. 4 , when the object detection unit 300 applies multi-scale to learn the object detection learning model and the correction unit 400 completes position correction, it can be seen that the accuracy is 90% or higher. 3(a) shows that the object detection unit 300 applies multi scale to a commercial web page for testing. 3(b) is almost similar to the actual web page of FIG. 3(c) as a result of the correction unit 400 completing location correction according to region segmentation information after performing the object detection learning model by inputting FIG. 3(a). can confirm that it is.

Referring back to FIG. 1 , the design property unit 500 extracts design properties of detected object components. Design properties are also referred to as CSS in web pages, and since all UIs can apply all CSS properties, they must be extracted independently of the UI. The design property unit 5000 extracts CSS information required for UI arrangement of the extracted object.

The design property unit 500 may perform preprocessing with a kernel process that emphasizes a specific part of an image in order to extract CSS properties well. The design property unit 500 displays line and plane information containing line-related information (width, color, radius) through vertex information, valid horizontal and vertical border lines, and areas composed of solid colors through the image mask returned using the kernel process. A list of Areas containing information (background-color) can be extracted. The design property unit 500 may extract CSS properties applicable to UI objects from preprocessed Line and Area information.

The design property unit 500 can largely divide CSS components into layout, border, font, and color. The design property unit 500 may extract CSS properties including any one of layout, border, font, and color.

Layout is a CSS property required to place the UI in the same position on the image as on the web browser (ex. chrome). The design property unit 500 may extract CSS properties required for UI arrangement, such as margin and padding, through information on the divided area.

Border is a CSS property for the outline of an object. Border's CSS is further divided into four items of width, color, style, and radius, and these CSS properties must be obtained separately. The design property unit 500 may first determine whether a border exists or not, and extract information on the border line projections, respectively. For example, the design property unit 500 may extract the size and color of a border by proceeding from the center point of the top, bottom, left, and right to the center of the UI for which border measurement is required. At this time, the design property unit 400 does not measure the border if the corresponding area is the starting point because the border has no meaning on the image or translucent area. In order to extract the border radius, the design property unit 400 performs an AND operation on the image representing the amount of change in the x-axis and the amount of change in the y-axis to highlight only the corner area. The design property unit 400 may also extract the border radius by proceeding from the top, bottom, left, and right center points in outer directions (eg, top-left, top-right) through the image in which only the corner area is highlighted.

Fonts are overall CSS properties related to text. Among them, there is no realistic way to obtain the font-style used on the web, as additional font-styles are being created every day. Therefore, by default, one font-style is applied and used for text UI. For example, the design attribute unit 500 may use "Sans-serif" for English and "Sans KR" for Korean as the most frequently used font-style. In addition, the design property unit 500 may obtain design information related to a font by utilizing text information and region information acquired using OCR.

For Color, "color" meaning the color of the text and "background-color" meaning the background color must be extracted. The design property unit 500 may set the most frequently used color as the background color in the UI area except for image files. In addition, if the object requiring CSS extraction is text, the design property unit 500 may extract a color having the largest difference from the background color in the UI area as the color of the text. At this time, the design property unit 500 may utilize a formula by which the difference between UI colors is not simply a difference in value, but a threshold value for distinguishing a color difference by a person. For example, the property unit 500 may use Equation 1, which is measured through differences in color space values called Lab, like RGB.

Since fonts are usually thin, they are vulnerable to interference colors. Therefore, since the design property unit 500 selects a color farthest from the background color, interference colors can be ignored.

The layout configuration unit 600 configures a layout of a web page including any one of a divided area, a detection object, and a design attribute extracted from the object.

In order to solve the deterioration in completeness of the page caused by measurement errors, the layout configuration unit 600 groups objects that are determined to have similar design properties and layout property values, such as position and size, into a class, and sets the design property and layout property values to be the same. can be changed The layout configuration unit 600 determines objects that are determined to be similar based on the arrangement on the screen and the UI type. For example, the layout configuration unit 600 looks at whether objects are related to each other (parent-child, sibling relationship, etc.) on the HTML DoM tree or on similar x, y coordinates on the page structure, and whether the layout properties are included in the same class. You can decide whether or not to. Alternatively, the layout configuration unit 600 may determine whether or not to include the UIs in a class having the same design property by looking at similar colors (RGB value comparison), similar sizes, border types, colors, etc. between the same UIs existing on the page. The layout configuration unit 600 may change properties such as position, size, color, etc. of related objects including design properties or layout properties in the same class to be aligned with multiple or first objects.

The layout configuration unit 600 may convert the tree configuration form of the screen design document into a general form used in web documents. For example, the layout configuration unit 600 may reconfigure the position of an object or a tree structure in a form usable in HTML. The layout configuration unit 600 may convert design and layout information of an object having x, y coordinates and data values into CSS values that can be implemented in HTML.

The tree form constituting the image of the screen design document may be in a format that cannot be expressed in a web page or is not used. The layout configuration unit 600 may add the object UI component detected in the screen design document to an appropriate position, correct and arrange it. If the layout configuration unit 600 does not belong to the basics of web page arrangement or has a plurality of lower elements of the tree, it can be arranged in a form that can be configured by adding an area to the web page. For example, HTML usually has a hierarchical structure in a certain frame and arranges the desired UI using relative coordinates unless an absolute coordinate system is used. The layout component 600 can add the necessary empty divs to mimic the format commonly laid out in HTML.

The layout configuration unit 600 may convert the values of absolute coordinates and character string data into a form usable on the web. . The layout configuration unit 600 converts design and layout information in x, y coordinates and data values into CSS properties that can be read from the web page. The layout configuration unit 600 may calculate CSS property values necessary for the relative coordinate arrangement of the detected object on the image expressed in absolute coordinates and the div (container) added to implement it on the web.

There are at least eight CSS properties that are basically used for layout (float, display, position, width, height, padding, margin, [top, right, bottom, left]). The layout configuration unit 600 may appropriately calculate each of them according to a pre-configured tree structure. The layout configuration unit 600 may assign a content area in the middle according to human perception, or calculate CSS properties that are not mechanically performed, such as horizontal or vertical alignment, and frequently used placement classes.

The basis for web page layout is horizontal, vertical or grid format. The layout configuration unit 600 determines in the form of a list when structural repetition is detected. The layout configuration unit 600 may include repetitively arranged areas or components in one area according to conditions and assign tags such as ul or ol at regular intervals.

The layout component 600 can refrain from applying inline-style as much as possible and group the CSS properties assigned to objects related to each other into classes for easy understanding and convenient maintenance. can be given a level of comprehension that is not mechanical naming.

The generating unit 700 converts information capable of implementing a web page, such as HTML and CSS, from the segmented area, object information, and design information extracted from the image into a file and creates the file.

The generation unit 700 compares CSS information by category, integrates them, and stores them. For example, the generation unit 700 may classify CSS into common CSS for each project unit, common CSS for each component type, individual layout CSS, common CSS for each specific purpose, etc., and designate conditions based on stored information to create the CSS.

The generation unit 700 stores properties that repeatedly appear in the site in the integrated CSS for each project, regardless of the type or design of the component. For example, the generation unit 700 may store CSS applicable to all components throughout the site, such as "in", "clear", "margin_top10", and the like, as integrated CSS for each project.

The generation unit 700 compares identical components, extracts and integrates common properties, and generates integrated CSS in component type units. For example, the generation unit 700 mainly classifies the size, color, and shape, and applies the size by grouping repeatedly appearing sizes such as "btn_size1" and "btn_size2" into one class. Similarly, in the case of color, the generation unit 700 may group and apply classes such as "btn_color1" and "btn_color_red". In the case of a shape, the generation unit 700 may determine repetition based on a property that can change the appearance of a component, such as a border, and may apply a name such as “btn_circle”.

The generation unit 700 adds metadata so that the CSS file and the js file are applied along with the HTML file.

The generation unit 700 may generate CSS files for each use category and store them as separate files. For example, the generating unit 700 may separately store the generated CSS file under the CSS folder. The generating unit 700 imitates the shape and sentence structure of files created by web publishers and creates them, and sorts them according to a certain criterion so that later management and modification are easy.

5 is a diagram illustrating a web document creation method for extracting web design properties according to an embodiment of the present invention. Each process to be described below is a process performed by each functional unit constituting a web document generating device that extracts web design properties at each step, but for concise and clear explanation of the present invention, the subject of each step is a web design property extracting web design property. Let it be collectively referred to as a document generating device.

Referring to FIG. 5 , the web document generating device 10 extracting web design properties in step S510 inputs an image or screen design file to be converted.

In step S520, the web document generating device 10 that extracts the web design properties divides the input file area. For example, the web document generating device 10 that extracts web design properties may divide the area using an image processing algorithm. In addition, the web document generating apparatus 10 for extracting web design attributes may additionally divide a region by using a region growing algorithm. The web document generating apparatus 10 for extracting web design properties may divide the area by arranging overlapping areas generated by different algorithms.

In step S530, the web document generating device 10 that extracts web design properties detects an object for constructing a web page from the input file. For example, the web document generating apparatus 10 for extracting web design properties extracts various objects related to a web page UI and information on the location and size of objects using a convolutional neural network (CNN).

The web document generating apparatus 10 for extracting web design properties adjusts the image size according to the size of the object so that the object can be included in its entirety. The web document generating apparatus 10 for extracting web design properties may detect UIs of various sizes by applying multi scales. The web document generating device 10 that extracts web design attributes may perform a process of correcting them in consideration of the fact that errors may be amplified due to multi-scale application. The web document generation device 10 that extracts web design properties can implement a learning model capable of learning by classifying into a large UI and a small UI because the size and aspect ratio of the object to be found are diverse. The web document generating apparatus 10 for extracting web design properties may individually generate and learn a learning model for detecting and extracting each object according to the detected object. The web document generation device 10 that extracts web design properties applies a value of 0.8, which is higher than the IoU standard of 0.5, which is generally used for learning, in order to reduce the error of the object detection position, so that an accurate position can be detected.

In step S540, the web document generating device 10 that extracts the web design properties finds a segmented area including the extracted object or finds and matches the closest segmented area capable of representing the object, and matches the position and size information of the object according to the area information. can be corrected.

In step S550, the web document generating device 10 extracting web design properties extracts design information of the detected object. For example, the web document generating device 10 that extracts web design properties may extract CSS information required for UI arrangement of the extracted object. The web document generation device 10 that extracts web design properties divides CSS components into layout, border, font, and color, and extracts any one of them. can The web document generating apparatus 10 for extracting web design properties may perform preprocessing with a kernel process that emphasizes a specific part of an image in order to extract CSS properties well.

In step S560, the web document generating device 10 extracting the web design properties configures the layout of the web page including any one of a partition area, a detection object, and a design property extracted from the object.

In step S570, the web document generating device 10 that extracts web design properties compares, integrates, and stores CSS properties by category. For example, the web document generating device 10 for extracting web design properties is classified into common CSS for each project unit, common CSS for each component type, individual layout CSS, common CSS for each specific purpose, etc., and is generated by specifying conditions based on stored information. can do.

The web document generating device 10 extracting web design properties in step S580 converts the segmented area, object information, and design property information extracted from the image into a file, such as HTML and CSS, to create and store the information capable of implementing the web page. . The web document generating device 10 for extracting web design properties provides stored files so that modification and management are easy.

6 to 16 are examples of generating a web page by executing an apparatus for generating a web document based on deep learning according to an embodiment of the present invention.

Referring to FIG. 6 , an example of a screen design image to be generated as a web page by the deep learning-based web document generating apparatus 10 is shown. For example, the input unit 100 receives an image of a web page or a screen design document to be created.

FIG. 7 is an example screen showing a result of region segmentation performed by the region dividing unit 200, and FIG. 8 is an example screen displaying objects detected by the object detection unit 300 after learning an object detection model.

9 and 10 are example screens of object detection results in which the correction unit 400 corrects the type, location, and size of an object using region segmentation information and object detection information.

Referring to FIG. 9 , the correction unit 400 corrects the position and size of the object that the object detection unit 300 of FIG. 7 failed to accurately detect using the information of the region dividing unit 200 of FIG. Detection results can be extracted.

Referring to FIG. 10 , the correction unit 400 may generate all sub-UIs that the object detection unit 300 could not detect using region segmentation information.

11 is an example screen in which the deep learning-based web document generation apparatus 10 detects an object, determines a character using OCR, extracts CSS information, and extracts a UI object and implements it as a web page.

Referring to FIG. 11 , the deep learning-based web document generation apparatus 10 may implement the same web page as an input image by extracting and storing a UI object. When compared with the input image of FIG. 7 , it can be seen that the deep learning-based web document generating device 10 is well implemented as a web page using HTML without a difference.

Referring to FIGS. 12 and 13 , examples of HTML document information generated by detecting objects and CSS information extracted by the deep learning-based web document generating apparatus 10 may be checked.

Referring to FIGS. 14 to 16 , examples in which folders are created and stored for each category of CSS files linked to files generated by the deep learning-based web document generation apparatus 10 can be checked.

The web document generation method for extracting web design properties described above may be implemented as computer readable code on a computer readable medium. The computer-readable recording medium may be, for example, a removable recording medium (CD, DVD, Blu-ray disc, USB storage device, removable hard disk) or a fixed recording medium (ROM, RAM, computer-equipped hard disk). can The computer program recorded on the computer-readable recording medium may be transmitted to another computing device through a network such as the Internet, installed in the other computing device, and thus used in the other computing device.

In the above, even though all the components constituting the embodiment of the present invention have been described as being combined or operated as one, the present invention is not necessarily limited to these embodiments. That is, within the scope of the object of the present invention, all of the components may be selectively combined with one or more to operate.

Although actions are shown in a particular order in the drawings, it should not be understood that the actions must be performed in the specific order shown or in a sequential order, or that all shown actions must be performed to obtain a desired result. In certain circumstances, multitasking and parallel processing may be advantageous. Moreover, the separation of the various components in the embodiments described above should not be understood as requiring such separation, and the described program components and systems may generally be integrated together into a single software product or packaged into multiple software products. It should be understood that there is

So far, the present invention has been looked at mainly by its embodiments. Those skilled in the art to which the present invention pertains will be able to understand that the present invention can be implemented in a modified form without departing from the essential characteristics of the present invention. Therefore, the disclosed embodiments should be considered from a descriptive point of view rather than a limiting point of view. The scope of the present invention is shown in the claims rather than the foregoing description, and all differences within the equivalent scope will be construed as being included in the present invention.

10: Web document generation device extracting web design properties
100: input unit
200: area dividing unit
300: object detection unit
400: correction unit
500: design property part
600: layout component
700: generating unit

Claims (9)

In the web document generating device for extracting web design properties,
an input unit for receiving data to be converted into a web page;
a region divider for detecting and dividing a region to be expressed as a web page in the data;
an object detection unit detecting an object included in the data;
a correction unit correcting the position and size of the object according to the area when the object overlaps in several areas;
a design property unit extracting design property information included in the object;
a layout configuration unit configuring a layout of a web page by including any one of the divided area, the object, and the design property information; and
Generation unit for generating a file of information for implementing the web page
A web document generating device for extracting web design properties including a.
According to claim 1,
the design properties
A web document creation device that extracts web design properties including CSS properties including any one of layout, border, font, and color.
According to claim 1,
the design properties
A web document creation device that extracts web design properties that are preprocessed with a kernel process that emphasizes specific parts of an image in order to extract CSS properties well.
According to claim 1,
The layout component
A web document generator that extracts web design properties that reorganize the location or tree structure of objects into a usable form in HTML.
A web document generation method for extracting web design properties, which is executed by a web document generating apparatus for extracting web design properties,
Receiving data to be converted into a web page;
detecting and segmenting a region to be expressed as a web page in the data;
detecting an object included in the data;
correcting the position and size of the object according to the region when the object overlaps with several regions;
extracting design attribute information included in the object;
configuring a layout of a web page by including any one of the divided area, the object, and the design property information; and
Generating a file of information for implementing the web page
A web document creation method that extracts web design properties including
According to claim 5
The step of extracting design attribute information included in the object
A web document creation method for extracting web design properties including CSS properties including any one of layout, border, font and color.
According to claim 5
The step of extracting design attribute information included in the object
A web document creation method that extracts web design properties that are preprocessed with a kernel process that emphasizes specific parts of an image to extract CSS properties well.
According to claim 5
Configuring the layout of the web page by including any one of the divided area, the object, and the design property information
A web document creation method that extracts web design properties that reorganize the location or tree structure of objects into a usable form in HTML.
A computer program recorded on a computer-readable recording medium that executes any one of the web document creation methods for extracting web design attributes of claims 5 to 8.

Images