KR102818562B1 - Taxonomy of Webpage Layouts for AI Analysis, Classification System of Webpage Layouts for AI Analysis And Classification Method of Webpage Layouts by the Same - Google Patents

Abstract

The present invention additionally designates tags for blocks whose classification by existing organized tags is ambiguous and the results are unclear, conducts learning on elements such as titles and margins in parallel, and increases the number of tags to 41 so as to enable standardization of detailed blocks, thereby classifying them as one of header, footer, banner, two-column block, three-column block, four-column block, five-column block, single block, gallery, and new, and further classifies them by 41 tags, a classification system and a webpage layout classification method using the same for artificial intelligence analysis.

Description

{Taxonomy of Webpage Layouts for AI Analysis, Classification System of Webpage Layouts for AI Analysis And Classification Method of Webpage Layouts by the Same}

The present invention relates to a classification system for web page layout for artificial intelligence analysis, a classification system, and a web page layout classification method using the same, and more specifically, to a classification system for web page layout for artificial intelligence analysis, a classification system, and a web page layout classification method using the same, which additionally designates tags for blocks whose classification by existing organized tags is ambiguous and the results are unclear, conducts learning on elements such as titles and margins in parallel, and increases the number of tags to 41 so as to enable standardization of detailed blocks, thereby classifying them as one of header, footer, banner, two-column block, three-column block, four-column block, five-column block, single block, gallery, and new, and then classifies them again by 41 tags.

Layout is a website component that not only makes it easy and fast to view information on a website, but also provides an easier and clearer understanding of the content. In order to establish a classification system for the paragraphs that make up a web page, you need to know about the website layout. A website can be broadly classified into three paragraphs: header, body, and footer. Among these three, the header and footer exist on most sites, and since they have many common features such as the existence of menus and arrangement of essential functions, they are very easy to train artificial intelligence. However, since the body area contains a lot of content and the content can vary greatly depending on the characteristics of each site, it is necessary to separate the body area by paragraph.

The conventional method of deriving web page layouts using artificial intelligence uses a method of extracting 12 learning tags and then analyzing the tags to produce results. The lack of learning volume also affects the results, but the current learning has a lack of tags, so the inclusion of blocks causes errors in the data classification process. In order to solve this problem, a series of classification systems are needed to identify and analyze web page components using artificial intelligence.

Republic of Korea Patent Publication No. 10-1340588 Republic of Korea Patent Publication No. 10-1604838 Republic of Korea Patent Publication No. 10-1958577

The present invention is to solve the above problems, and it additionally designates tags for blocks whose classification is ambiguous with existing organized tags and thus the results are unclear, conducts learning on elements such as titles and margins in parallel, and increases the number of tags to 41 so as to enable standardization of detailed blocks, thereby classifying them as one of header, footer, banner, two-column block, three-column block, four-column block, five-column block, single block, gallery, and new, and provides a classification system for web page layout for artificial intelligence analysis, a classification system, and a web page layout classification method using the same, which can additionally expand tags according to the H and V forms when a new layout system is released.

According to one embodiment of the present invention for achieving the above-described purpose, a classification system module of a web page layout for artificial intelligence analysis comprises: a header section located at the top of a web page and including a logo and a menu; a footer section located at the bottom of a web page and including site information and links related to privacy protection; a banner section located between the header section and the footer section and including an advertising message or an advertising image; a two-stage block section located between the header section and the footer section and having an image paragraph or a text paragraph divided into two areas; a three-stage block section located between the header section and the footer section and having an image paragraph or a text paragraph divided into three areas; a four-stage block section located between the header section and the footer section and having an image paragraph or a text paragraph divided into four areas; a five-stage block section located between the header section and the footer section and having an image paragraph or a text paragraph divided into five areas; a single block section located between the header section and the footer section and having an image paragraph or a text paragraph divided into six to eight areas; And it includes a gallery section which is a paragraph with an ambiguous area division among image paragraphs, and is located between the header section and the footer section; and the header section, footer section, banner section, two-block section, three-block section, four-block section, five-block section, single block section and gallery section are further subdivided and include subdivision tags combined with corresponding English letters or numbers.

In the above detailed classification tags, the left logo header of the header part is classified as LLH, the center logo header is classified as CLH, the footer of the footer part is classified as FT, the banner of the banner part is classified as HI11, the image and text are classified as HI11T, the text and image are classified as HTI11, the left title is classified as LT, the center title is classified as CT, and the margin is classified as WS, the 2-level block of the 2-level block part is classified as HI21, the image and 3-level list are classified as HI11I13, the 3-level list and image are classified as HI31I11, the text upside-down inversion is HI11TTI11, and the text upside-down inversion direction is classified as HTI11I11T, the 3-level block of the 3-level block part is classified as HI31, the image and 2-level list are classified as HI11I21, the 2-level list and image are classified as HI21I11, the text and 3-level list are classified as HTI31, and the 3-level list and text are classified as HI31T, carousel is classified as C31, 4-level block of the 4-level block part is classified as HI41, image and 3-level list are classified as HI11I31, 3-level list and image are classified as HI31I11, text and 4-level list are classified as HTI41, 4-level list and text are classified as HI41T, 5-level block of the 5-level block part is classified as HI51, image and 4-level list are classified as HI11I41, 4-level list and image are classified as HI41I11, 6-level block of the single block part is classified as HI61, 7-level block is classified as HI71, 8-level block is classified as HI81, gallery of the gallery part is classified as GR, image and 2-level list is classified as HI11I12, 2-level list and image are classified as HI12I11, image and 2-level 2-level list are classified as HI11I22, 2-level 2-level list and image are classified as HI22I11, image and The 3-tier, 2-layer list is characterized by being classified as HI11I32, and the 3-tier, 2-layer list and image are classified as HI32I11.

A classification system module of a web page layout for artificial intelligence analysis according to one embodiment of the present invention further includes a new section capable of adding a new configuration, and is characterized in that a vertical two-level list of the new section is classified as VI11I12, a vertical three-level list is classified as VI11I13, and a category is classified as O11.

In addition, a classification system of a web page layout for artificial intelligence analysis according to one embodiment of the present invention for achieving the above-described purpose includes: a pre-learning module in which a preprocessed web page is learned by artificial intelligence; a web page input module in which a web page requiring layout classification is input; a layout cutting module in which the input web page is cut by layout; a first layout classification module in which the cut layout is classified into one of a header section, a footer section, a banner section, a two-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, a gallery section, and a new section; a second layout classification module in which the layout classified in the first layout classification module is further classified by a sub-classification tag; and a layout analysis module in which the height of a paragraph, the width of a paragraph, and the position of a text of the layout classified by the sub-classification tag are analyzed and stored.

In addition, a method for classifying the layout of a webpage by a classification system for a webpage layout for artificial intelligence analysis according to one embodiment of the present invention for achieving the above-described purpose includes: a first step in which a preprocessed webpage is learned by artificial intelligence; a second step in which components of a new webpage are cut by layout; a third step in which the layout cut in the second step is classified by artificial intelligence into one of a header section, a footer section, a banner section, a two-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, a gallery section, and a new section; a fourth step in which, after being classified in the third step, the layout is further subdivided by artificial intelligence based on subdivision tags; and a fifth step in which, for the layout classified by the subdivision tags, the height of a paragraph, the width of a paragraph, and the position of a text are analyzed by artificial intelligence.

As described above, the present invention can automatically analyze and classify various web page layouts using artificial intelligence, so that designers can reduce repetitive tasks and focus more on creative work, and the automated system maintains consistency in design elements and helps users access them more intuitively.

Additionally, utilizing artificial intelligence models, especially CNN models, can accurately detect and classify each component of the layout, which provides much higher accuracy and reliability than manual analysis.

In addition, if web page layout analysis is automated through artificial intelligence, large-scale web pages or shopping malls can be managed efficiently, which is especially useful when handling large amounts of data, and saves time and manpower, allowing more projects to be carried out simultaneously.

In addition, AI can be used to analyze user behavior patterns and optimize web pages based on this. This can help users navigate web pages more easily and quickly find the information they need, and can increase customer satisfaction by implementing user-friendly designs.

Figure 1 is a diagram illustrating a classification system for web page layout for artificial intelligence analysis according to one embodiment of the present invention.
Figure 2 is an example of a web page divided into a head, body, and footer.
Figure 3 is an example diagram of HI11I13, HI11, and HI11I22 among the detailed classification tags.
Figure 4 is an example of HI11 and HI21 among the detailed classification tags.
Figure 5 is an example diagram of the detailed classification tags HI11I22, HI22I11, HI31, and HI12I11.
Figure 6 is an example diagram of the subcategory tags HI11, HI11I22, HI11I32, and HI31.
Figure 7 is a configuration diagram of a classification system for web page layout for artificial intelligence analysis according to one embodiment of the present invention.
FIG. 8 is a flowchart of a method for classifying web page layouts by a classification system for web page layouts for artificial intelligence analysis according to one embodiment of the present invention.
FIG. 9 is an exemplary diagram of the third step of a method for classifying web page layouts by a classification system for artificial intelligence analysis according to one embodiment of the present invention.
FIG. 10 is an exemplary diagram of the fourth step of a method for classifying web page layouts by a classification system for artificial intelligence analysis according to one embodiment of the present invention.

In various embodiments of the present disclosure, the expressions such as “includes,” “may include,” etc., indicate the presence of the disclosed corresponding function, operation, or component, etc., and do not limit one or more additional functions, operations, or components, etc. In addition, in various embodiments of the present disclosure, it should be understood that the terms such as “includes,” “have,” etc., are intended to specify the presence of a feature, a number, a step, an operation, a component, a part, or a combination thereof described in the specification, but do not exclude in advance the possibility of the presence or addition of one or more other features, numbers, steps, operations, components, parts, or combinations thereof.

In various embodiments of the present disclosure, the expression "or" and the like includes any and all combinations of the words listed together. For example, "A or B" may include A, may include B, or may include both A and B.

The expressions “first,” “second,” “first,” or “second,” etc., used in various embodiments of the present disclosure can modify various components of the various embodiments, but do not limit the components. For example, the expressions do not limit the order and/or importance of the components. The expressions can be used to distinguish one component from another component. For example, the first user device and the second user device are both user devices, and represent different user devices. For example, without departing from the scope of the various embodiments of the present disclosure, the first component can be referred to as the second component, and similarly, the second component can also be referred to as the first component.

When it is said that a component is "connected" or "connected" to another component, it should be understood that the component may be directly connected or connected to the other component, but that there may also be other new components between the component and the other component. On the other hand, when it is said that a component is "directly connected" or "directly connected" to another component, it should be understood that no other new components exist between the component and the other component.

In the embodiments of the present disclosure, terms such as "module," "unit," "part," etc. are terms used to refer to components that perform at least one function or operation, and these components may be implemented as hardware or software, or as a combination of hardware and software. In addition, a plurality of "modules," "units," "parts," etc. may be integrated into at least one module or chip and implemented as at least one processor, except in cases where each of them needs to be implemented as individual specific hardware.

The terms used in the various embodiments of the present disclosure are only used to describe specific embodiments and are not intended to limit the various embodiments of the present disclosure. The singular expression includes the plural expression unless the context clearly indicates otherwise.

Unless otherwise defined, all terms used herein, including technical or scientific terms, have the same meaning as commonly understood by one of ordinary skill in the art to which various embodiments of the present disclosure belong.

Terms defined in commonly used dictionaries should be interpreted as having a meaning consistent with their meaning in the context of the relevant technology, and will not be interpreted in an idealized or overly formal sense unless explicitly defined in various embodiments of the present disclosure.

Hereinafter, a classification system of a web page layout for artificial intelligence analysis according to an embodiment of the present invention will be described with reference to the drawings. FIG. 1 is a diagram showing the configuration of a classification system of a web page layout for artificial intelligence analysis according to an embodiment of the present invention. Referring to FIG. 1, the classification system of a web page layout for artificial intelligence analysis according to an embodiment of the present invention may be configured to include a header section, a footer section, a banner section, a two-block section, a three-block section, a four-block section, a five-block section, a single block section, and a gallery section. Here, the header section, the footer section, the banner section, the two-block section, the three-block section, the four-block section, the five-block section, the single block section, and the gallery section may include subdivision tags combined with English letters or numbers that are further subdivided, and may be analyzed by artificial intelligence.

The header section is located at the very top of the webpage and includes a logo and a menu. Fig. 2 is an example diagram in which a webpage is divided into a head, a body, and a footer. Referring to Fig. 2, a webpage is generally divided into a head, a body, and a footer. The header section of the present invention has the same configuration as the head of Fig. 2, and includes a left logo header and a center logo header. In the present invention, the subdivision of the header section is based on the position of the logo, and the logo is located on the left or center of the top of the webpage, and not on the right. The left logo header has the logo located on the left, and the subdivision tag is LLH (Left Logo Head). The center logo header has the logo located on the right, and the subdivision tag is CLH (Center Logo Head).

The footer is located at the very bottom of the web page and includes links related to site information and privacy protection. The footer of the present invention has the same configuration as the footer of Fig. 2, and includes a footer. Since the footer does not have a variety of contents, the footer can be covered by a single tag. The footer's subcategory tag is FT (Footer).

The banner section, two-block section, three-block section, four-block section, five-block section, single block section, and gallery section described below constitute the body section. The present invention uses 35 detailed classification tags to completely encompass the components of the body section, which were not easy to classify in the web page layout.

The banner section is located between the header and footer sections, and includes advertising messages or advertising images. The banner section is classified into six detailed tags: banner is HI11, image and text is HI11T, text and image is HTI11, left title is LT, center title is CT, and margin is WS. Tags indicating banners are HI11, a banner with an image first and then text is HI11T, a banner with text first and then image is HTI11, a banner with a title consisting only of text on the left is LT, a banner with a title consisting only of text in the center is CT, and a banner without an image or text and consisting only of margins is WS.

The 2-block section is located between the header and footer sections, and divides the image paragraph or text paragraph into two areas. The 2-block section is classified into five subcategories of tags: 2-block is HI21, image and 3-level list is HI11I13, 3-level list and image is HI31I11, text upside-down is HI11TTI11, and text upside-down reverse direction is HTI11I11T. Tags for a 2-level block include HI21, a 2-level block with an image first, then a 3-level list, and consisting of 2 paragraphs is HI11I13, a 2-level block with a 3-level list first, then an image, and consisting of 2 paragraphs is HI31I11, a 2-level block with text on the left and the text reversed on the right and consisting of 2 paragraphs is HI11TTI11, and a 2-level block with text on the left and the text reversed on the right and consisting of 2 paragraphs is HTI11I11T.

The 3-column block section is located between the header and footer sections, and divides the image paragraph or text paragraph into three areas. The 3-column block section is classified into six subcategories: HI31 for 3-column blocks, HI11I21 for images and 2-column lists, HI21I11 for 2-column lists and images, HTI31 for text and 3-column lists, HI31T for 3-column lists and text, and C31 for carousels. The tags for a 3-column block are HI31, a 3-column block with an image first, followed by a 2-column list, and consisting of 3 paragraphs is HI11I21, a 3-column block with a 2-column list first, followed by an image, and consisting of 3 paragraphs is HI21I11, a 3-column block with text on the left and a 3-column list on the right is HTI31, a 3-column block with a 3-column list on the left and text on the right is HI31T, and a carousel is C31. Here, a carousel is a component that can display multiple different contents within a web page area, and the contents included in the carousel are arranged horizontally, and the user can navigate the contents by rotating the contents left/right, or can be set to automatically rotate.

The 4-column block section is located between the header and footer sections, and the image paragraph or text paragraph is divided into four areas. The 4-column block section is classified into five subcategories: HI41 for 4-column blocks, HI11I31 for images and 3-column lists, HI31I11 for 3-column lists and images, HTI41 for text and 4-column lists, and HI41T for 4-column lists and text. The tags indicating the 4-column block are HI41, a 4-column block consisting of four paragraphs with an image coming first followed by a 3-column list is HI11I31, a 4-column block consisting of four paragraphs with a 3-column list coming first followed by an image is HI31I11, a 4-column block consisting of text on the left and a 4-column list on the right is HTI41, and a 4-column block consisting of a 4-column list on the left and text on the right is HI41T.

The 5-column block section is located between the header and footer sections, and the image paragraph or text paragraph is divided into 5 areas. The 5-column block section is classified into 3 subcategories tags: 5-column block is HI51, image and 4-column list is HI11I41, and 4-column list and image is HI41I11. The tags indicating 5-column blocks are HI51, 4-column blocks consisting of 5 paragraphs with an image coming first followed by a 4-column list are HI11I41, and 5-column blocks consisting of 5 paragraphs with a 4-column list coming first followed by an image are HI41I11.

The single block section is located between the header and footer sections, and divides image paragraphs or text paragraphs into 6 to 8 areas. The single block section is classified into three subcategories tags: a 6-block section is classified into HI61, a 7-block section is classified into HI71, and an 8-block section is classified into HI81.

The gallery section is located between the header and footer sections, and is a paragraph among the image paragraphs where the area division is ambiguous. The gallery section is classified into seven detailed tags: GR for gallery, HI11I12 for image and 2-level list, HI12I11 for 2-level list and image, HI11I22 for image and 2-level 2-level list, HI22I11 for 2-level 2-level list and image, HI11I32 for image and 3-level 2-level list and image. The tag indicating the gallery is GR, HI11I12 for a configuration where an image appears first followed by a 2-level list, HI22I11 for a configuration where a 2-level list appears first followed by an image, HI11I32 for a configuration where an image appears first followed by a 3-level 2-level list, and HI32I11 for a configuration where a 3-level 2-level list appears first followed by an image. FIG. 3 is an example diagram of HI11I13, HI11, and HI11I22 among the subcategories tags, FIG. 4 is an example diagram of HI11 and HI21 among the subcategories tags, FIG. 5 is an example diagram of HI11I22, HI22I11, HI31, and HI12I11 among the subcategories tags, and FIG. 6 is an example diagram of HI11, HI11I22, HI11I32, and HI31 among the subcategories tags. Referring to FIGS. 3 to 6, examples of classification according to subcategories tags of the layout of a web page can be confirmed. For example, the layout located on the upper right in FIG. 3 is HI11I22, which is a subcategories of images and a two-story list in the gallery section. It can be confirmed that images are located on the left and a two-story list consisting of two images is located on the right.

The present invention adds a new section that can add a new configuration, and the new section is classified into a vertical two-tier list VI11I12, a vertical three-tier list VI11I13, and a category O11. Most of the banner section, two-level block section, three-level block section, four-level block section, five-level block section, single block section, and gallery section described above have horizontal configurations, but the new section has a configuration in which a two-level list or a three-level list is arranged vertically. In the category, a description of the category of products listed on the web page is presented. Accordingly, the number of subdivision tags used in the present invention is 41 in total, including 2 for the header section, 1 for the footer section, and 38 for the body section including the new section.

Hereinafter, a classification system for web page layout for artificial intelligence analysis according to an embodiment of the present invention will be described with reference to the drawings. FIG. 7 is a configuration diagram of a classification system for web page layout for artificial intelligence analysis according to an embodiment of the present invention. Referring to FIG. 7, a classification system for web page layout for artificial intelligence analysis according to an embodiment of the present invention may be configured to include a pre-learning module (10), a web page input module (20), a layout cutting module (30), a first layout classification module (40), a second layout classification module (50), and a layout analysis module (60). The present invention provides high accuracy and consistency in analyzing web page layouts using artificial intelligence, and can maximize efficiency through automation. This approach is very useful in analyzing and optimizing web page designs, and can be of great help in improving user experience. The artificial intelligence model of the present invention can utilize a CNN (convolutional Neural Network) model, and the CNN model can obtain accurate and reliable results, so that various people can easily understand and apply it. More specifically, the present invention can use the YOLOv8 model for object detection, and the EfficientNetV2 model for image classification. In the present invention, the classification system of a web page layout for artificial intelligence analysis may include one or more processors, one or more memories, one or more storages, and one or more communication interfaces, which may be connected to each other via a bus. In addition, the classification system of a web page layout for artificial intelligence analysis may include hardware such as an input device and an output device. In addition, the classification system of a web page layout for artificial intelligence analysis may be equipped with various software including an operating system capable of running a program.

The pre-learning module (10) learns preprocessed web pages by artificial intelligence. The administrator continuously inputs preprocessed web pages so that the artificial intelligence can recognize that the layout is classified into a header section, a footer section, a banner section, a two-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, a gallery section, and a new section, and is classified into 41 subcategories, so that learning for the two classification systems can proceed, so that sufficient learning can proceed.

A webpage requiring layout classification is input into the webpage input module (20). If the artificial intelligence has sufficiently learned through the pre-learning module (10), the webpage is input through the webpage input module (20) for layout classification of the webpage. The webpage input module (20) can input the webpage through various input devices, and as the input devices, for example, one or more of a keyboard, a mouse, a pen mouse, a trackball, a touchpad, a pointing stick, a scanner, and a digital camera can be selected and used.

The layout cutting module (30) cuts the input web page by layout. In order to classify according to the classification system of the layout, the layout of the web page must first be cut. The layout cutting module (30) recognizes blank spaces and distinguishes between the places where images or texts are and the places where blank spaces are, and then scrolls the web page and performs horizontal cutting with the places where blank spaces are set as the cutting positions.

The first layout classification module (40) classifies the cut layout into one of the header section, footer section, banner section, two-column block section, three-column block section, four-column block section, five-column block section, single block section, gallery section, and new section. The artificial intelligence classifies the cut layout into one of the header section, footer section, banner section, two-column block section, three-column block section, four-column block section, five-column block section, single block section, gallery section, and new section based on the content learned in the pre-learning module (10).

The second layout classification module (50) classifies the layout classified by the first layout classification module (40) again by sub-classification tags. There are 41 subcategories in total. The left logo header of the header is LLH, the center logo header is CLH, the footer of the footer is FT, the banner of the banner is HI11, the image and text is HI11T, the text and image is HTI11, the left title is LT, the center title is CT, the margin is WS, the 2-column block of the 2-column block is HI21, the image and 3-level list is HI11I13, the 3-level list and image is HI31I11, the text upside-down is HI11TTI11, the text upside-down inversion direction is HTI11I11T, the 3-column block of the 3-column block is HI31, the image and 2-column list is HI11I21, the 2-column list and image is HI21I11, the text and 3-column list is HTI31, the 3-column list and text is HI31T, and the carousel is C31, and the 4-level block of the 4-level block part is HI41, the image and 3-level list are HI11I31, the 3-level list and image are HI31I11, the text and 4-level list are HTI41, the 4-level list and text are HI41T, the 5-level block of the 5-level block part is HI51, the image and 4-level list are HI11I41, the 4-level list and image are HI41I11, the 6-level block of the single-block part is HI61, the 7-level block is HI71, and the 8-level block is HI81, the gallery of the gallery part is GR, the image and 2-level list is HI11I12, the 2-level list and image is HI12I11, the image and 2-level 2-level list is HI11I22, the 2-level 2-level list and image are HI22I11, the image and 3-level 2-level list is HI11I32, the 3-level 2-level list and The image is HI32I11, the vertical 2-layer list of the new section is VI11I12, the vertical 3-layer list is VI11I13, and the category is O11. The second layout classification module (50) reclassifies what has been classified by the first layout classification module (40) into one of the above-mentioned sub-classification tags. Using the above-mentioned sub-classification tags has the advantage of allowing artificial intelligence to classify the layout of any web page since it can encompass all of the web page layouts.

The layout analysis module (60) analyzes and stores the paragraph height, paragraph width, and text position of the layout classified by the subcategory tag. If the layout is classified by the subcategory tag, the paragraph height, paragraph width, and text position of the classified layout are analyzed. The layout analysis module (60) extracts paragraph height, paragraph width, and text position information of the layout. If the layout is classified by the classification system and the paragraph height, paragraph width, and text position information of the layout are extracted, all information of the layout is confirmed. The layout analysis module (60) stores classification system information of the layout, paragraph height information of the layout, paragraph width information, and text position information. The layout analysis module (60) has a memory for storing information. The memory may include at least one type of storage medium among a flash memory type, a hard disk type, an SSD (Solid State Disk type), an SDD (Silicon Disk Drive) type, a multimedia card micro type, a card type memory (for example, an SD or XD memory, etc.), a random access memory (RAM), a static random access memory (SRAM), a read-only memory (ROM), an electrically erasable programmable read-only memory (EEPROM), a programmable read-only memory (PROM), a magnetic memory, a magnetic disk, and an optical disk.

Hereinafter, a method for classifying web page layouts by a classification system for artificial intelligence analysis according to an embodiment of the present invention will be described with reference to drawings. FIG. 8 is a flowchart of a method for classifying web page layouts by a classification system for artificial intelligence analysis according to an embodiment of the present invention. Referring to FIG. 8, a method for classifying web page layouts by a classification system for artificial intelligence analysis according to an embodiment of the present invention can be composed of the following five steps.

The first stage (S10) is the stage where the preprocessed webpage is learned by artificial intelligence. In order for the artificial intelligence of the pre-learning module (10) to analyze and classify the components of the webpage, pre-learning is necessary. In order for the artificial intelligence to learn, a dataset must be prepared so that the artificial intelligence can continuously learn. To this end, the dataset prepared through a preprocessing process so that learning is easy on the webpage is learned. The layout of the webpage is divided into one of the header, footer, banner, two-block, three-block, four-block, five-block, single-block, gallery, and new sections, and is classified into 41 subcategories so that learning can proceed for each subcategories tag.

The second stage (S20) is the stage where the components of a new web page are cut according to the layout. An artificial intelligence that has undergone sufficient prior learning can analyze and classify the components of a web page based on the learning content when a new web page is input to the web page input module (20). To this end, the layout cutting module (30) recognizes blank spaces, distinguishes between places where images or texts are located and places where blank spaces are located, and scrolls the web page horizontally and cuts it using the blank spaces as the cutting position.

The third step (S30) is a step in which the layout cut in the second step (S20) is classified by artificial intelligence into one of a header section, a footer section, a banner section, a two-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, a gallery section, and a new section. FIG. 5 is an example diagram of the third step (S30) of a layout classification method by a classification system of a web page layout for artificial intelligence analysis according to one embodiment of the present invention. Referring to FIG. 9, the first layout classification module (40) causes the layout cut in the second step (S20) to be analyzed by artificial intelligence and classified into one of a header section, a footer section, a banner section, a two-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, a gallery section, and a new section.

Step 4 (S40) is the step where the classification in Step 3 (S30) is further subdivided by artificial intelligence based on the subdivision tags. There are a total of 41 subdivision tags. Specifically, the left logo header of the header part is LLH, the center logo header is CLH, the footer of the footer part is FT, the banner of the banner part is HI11, the image and text are HI11T, the text and image are HTI11, the left title is LT, the center title is CT, the margin is WS, the 2-column block of the 2-column block part is HI21, the image and 3-level list are HI11I13, the 3-level list and image are HI31I11, the text upside-down flip is HI11TTI11, the text upside-down flip direction is HTI11I11T, the 3-column block of the 3-column block part is HI31, the image and 2-column list are HI11I21, the 2-column list and image are HI21I11, the text and 3-column list are HTI31, the 3-column list and text are HI31T, the carousel is C31, and the 4-column block part is The 4-level block is HI41, the image and 3-level list is HI11I31, the 3-level list and image is HI31I11, the text and 4-level list is HTI41, the 4-level list and text is HI41T, the 5-level block of the 5-level block part is HI51, the image and 4-level list is HI11I41, the 4-level list and image is HI41I11, the 6-level block of the single block part is HI61, the 7-level block is HI71, the 8-level block is HI81, the gallery of the gallery part is GR, the image and 2-level list is HI11I12, the 2-level list and image is HI12I11, the image and 2-level 2-level list is HI11I22, the 2-level 2-level list and image is HI22I11, the image and 3-level 2-level list is HI11I32, the 3-level 2-level list and image is HI32I11, The vertical 2-story list of the new section is VI11I12, the vertical 3-story list is VI11I13, and the category is O11. FIG. 10 is an exemplary diagram of the 4th step (S40) of the layout classification method by the classification system of the web page layout for artificial intelligence analysis according to one embodiment of the present invention. Referring to FIG. 10, the second layout classification module (50) analyzes and classifies in detail the header section, footer section, banner section, 2-block section, 3-block section, 4-block section, 5-block section, single block section, gallery section, and new section classified in the 3rd step (S30) based on the content learned in the 1st step (S10) by the detailed classification tags again.

The specific processes of the third step (S40) and the fourth step (S40) in the present invention are as follows. First, the basic layout classification is mainly classified into horizontal (H) and vertical (V) according to the arrangement method of elements. The H (Horizontal) series means elements arranged in a horizontal direction, and the V (Vertical) series means elements arranged in a vertical direction. Next, the detailed layout classification is classified more specifically according to the combination and arrangement method of images and texts included in each layout. A single-block layout is a layout composed of a single block, and includes a six-level block (HI61), a seven-level block (HI71), and an eight-level block (HI81). A multi-level block layout is a layout composed of multiple blocks, and includes a two-level block (HI21), a three-level block (HI31), a four-level block (HI41), and a five-level block (HI51). Next, the components within each block are classified according to the combination method of images and texts. The image and text combination is a form in which images and texts are arranged together, for example, image text (HI11T) and text image (HTI11). The image list is a form in which multiple images are arranged in a list format, for example, image and 3-level list (HI11I3). The text list is a form in which multiple texts are arranged in a list format, for example, text and 4-level list (HTI41). Next, frequently used layouts are classified separately according to specific purposes. The header section is the main menu and logo arrangement area located at the top of the page, and is the left logo header (LLH) and the center logo header (CLH). The footer section is the information and link arrangement area located at the bottom of the page, and is the footer (FT). The banner section is an area arranged to increase visibility, and is the banner (HI11), image and text (HI11T), and text and image (HTI11). Next, other layouts include the gallery section and the new section. The gallery section is a form that arranges multiple images in a gallery format, and includes a gallery (GR), an image and a two-level list (HI111I2), and an image and a three-level two-level list (HI111I3). The new section has a new layout, and includes a vertical two-level list (VI111I2) and a category (O11).

The methods of analyzing web pages through this classification system are as follows. First, layout analysis, where each section of the web page is analyzed according to the classification system to identify the layout. Second, element placement analysis, where the arrangement of elements (images, texts) within each layout can be identified to derive structural characteristics. Third, design consistency maintenance, where necessary modifications and optimizations can be made while maintaining design consistency based on the analyzed layout and arrangement. Fourth, user experience improvement, where an appropriate layout can be selected and applied considering the user interface (UI) and user experience (UX). Through these methods, the visual elements of the web page can be systematically analyzed and a user-friendly design implemented. Web page layout analysis using artificial intelligence can be used particularly effectively in large-scale websites or shopping malls.

Step 5 (S50) is a step in which the height of paragraph, width of paragraph, and position of text are analyzed by artificial intelligence for the layout classified by the detailed classification tag. When the layout of the web page is classified, the layout analysis module (60) extracts the height of paragraph, width of paragraph, and position of text for the classified layout, and stores the classification system information of the layout, the height information of paragraph, width information of paragraph, and position information of text.

The system described above may be implemented using hardware components, software components, and/or a combination of hardware components and software components. For example, the system and components described in the embodiments may be implemented using one or more general-purpose computers or special-purpose computers, such as, for example, a processor, a controller, an arithmetic logic unit (ALU), a digital signal processor, a microcomputer, a field programmable gate array (FPGA), a programmable logic unit (PLU), a microprocessor, or any other device capable of executing instructions and responding to them. The processing unit may execute an operating system (OS) and one or more software applications running on the OS. In addition, the processing unit may access, store, manipulate, process, and generate data in response to the execution of the software. For ease of understanding, the processing unit is sometimes described as being used alone, but those skilled in the art will appreciate that the processing unit may include multiple processing elements and/or multiple types of processing elements. For example, the processing device may include multiple processors, or a processor and a controller. Other processing configurations, such as parallel processors, are also possible.

The software may include a computer program, code, instructions, or a combination of one or more of these, which may configure a processing device to perform a desired operation or may independently or collectively command the processing device. The software and/or data may be permanently or temporarily embodied in any type of machine, component, physical device, virtual equipment, computer storage medium or device, or transmitted signal waves, for interpretation by the processing device or for providing instructions or data to the processing device. The software may also be distributed over network-connected computer systems, and stored or executed in a distributed manner. The software and data may be stored on one or more computer-readable recording media.

The method according to the embodiment may be implemented in the form of program commands that can be executed through various computer means and recorded on a computer-readable medium. The computer-readable medium may include program commands, data files, data structures, etc., alone or in combination. The program commands recorded on the medium may be those specially designed and configured for the embodiment or may be those known to and available to those skilled in the art of computer software. Examples of the computer-readable recording medium include magnetic media such as hard disks, floppy disks, and magnetic tapes, optical media such as CD-ROMs and DVDs, magneto-optical media such as floptical disks, and hardware devices specially configured to store and execute program commands such as ROMs, RAMs, flash memories, etc. Examples of the program commands include not only machine language codes generated by a compiler but also high-level language codes that can be executed by a computer using an interpreter, etc. The hardware devices described above may be configured to operate as one or more software modules to perform the operations of the embodiment, and vice versa.

Although the embodiments have been described above by way of limited examples and drawings, those skilled in the art can make various modifications and variations from the above description. For example, appropriate results can be achieved even if the described techniques are performed in a different order than the described method, and/or components of the described system, structure, device, circuit, etc. are combined or combined in a different form than the described method, or are replaced or substituted by other components or equivalents.

Therefore, other implementations, other embodiments, and equivalents to the claims are also included in the scope of the claims described below.

10: Pre-learning module
20: Webpage input module
30 : Layout cutting module
40: 1st layout classification module
50: 2nd layout classification module
60: Layout Analysis Module

Claims (5)

delete delete delete A pre-learning module where preprocessed web pages are learned by artificial intelligence;
A webpage input module where webpages requiring layout classification are input;
Layout cutting module where the input web page is cut according to layout;
A first layout classification module in which the cut layout is classified into one of a header section, a footer section, a banner section, a two-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, a gallery section, and a new section;
A second layout classification module in which the layout classified in the first layout classification module is further classified by a sub-classification tag; and
In a classification system of web page layout for artificial intelligence analysis, including a layout analysis module in which the height of paragraphs, width of paragraphs, and position of text of layouts classified by the above-mentioned classification tags are analyzed and stored;
The above first layout classification module
The header section, located at the very top of the webpage and containing the logo and menu;
The footer, located at the very bottom of the webpage, contains site information and links related to privacy;
A banner section located between the header section and the footer section and containing an advertising message or advertising image;
A two-block section located between the header and footer sections, in which an image paragraph or text paragraph is divided into two areas;
A three-block section located between the header and footer sections, in which image paragraphs or text paragraphs are divided into three areas;
A four-block section located between the header and footer sections, in which image paragraphs or text paragraphs are divided into four areas;
A 5-block section located between the header and footer sections, in which image paragraphs or text paragraphs are divided into 5 areas;
A single block section located between the header section and the footer section, in which image paragraphs or text paragraphs are divided into 6 to 8 areas;
The gallery section is located between the header and footer sections, and is a section with ambiguous area division among image paragraphs;
Includes a new section where new configurations can be added,
The above header section, footer section, banner section, two-block section, three-block section, four-block section, five-block section, single block, gallery section and new section are further subdivided and include subdivision tags composed of corresponding English letters or numbers.
The above second layout classification module
The left logo header of the above header section is classified as LLH, and the center logo header is classified as CLH.
The footer of the above footer section is classified as FT,
The banner of the above banner section is classified as HI11, images and text as HI11T, text and images as HTI11, left title as LT, center title as CT, and margin as WS.
The 2nd block of the above 2nd block section is classified as HI21, the image and 3rd layer list as HI11I13, the 3rd layer list and image as HI31I11, the text upside-down inversion as HI11TTI11, and the text upside-down inversion direction as HTI11I11T.
The 3-stage block of the above 3-stage block section is classified as HI31, the image and 2-stage list as HI11I21, the 2-stage list and image as HI21I11, the text and 3-stage list as HTI31, the 3-stage list and text as HI31T, and the carousel as C31.
The 4-stage block of the above 4-stage block section is classified as HI41, the image and 3-stage list are classified as HI11I31, the 3-stage list and image are classified as HI31I11, the text and 4-stage list are classified as HTI41, and the 4-stage list and text are classified as HI41T.
The 5-stage block of the above 5-stage block section is classified as HI51, the image and 4-stage list are classified as HI11I41, and the 4-stage list and image are classified as HI41I11.
The 6-stage block of the above single block section is classified as HI61, the 7-stage block as HI71, and the 8-stage block as HI81.
The gallery in the above gallery section is classified as GR, images and 2-story lists as HI11I12, 2-story lists and images as HI12I11, images and 2-story 2-story lists as HI11I22, 2-story 2-story lists and images as HI22I11, images and 3-story 2-story lists as HI11I32, and 3-story 2-story lists and images as HI32I11.
A classification system of web page layout for artificial intelligence analysis, characterized in that the vertical two-tier list of the above new section is classified as VI11I12, the vertical three-tier list is classified as VI11I13, and the category is classified as O11. delete