Webpage layout classification hierarchy and classification system for artificial intelligence analysis, and webpage layout classification method thereby

Abstract

Disclosed are a webpage layout classification hierarchy and classification system for artificial intelligence analysis, and a webpage layout classification method thereby. The webpage layout classification hierarchy for artificial intelligence analysis: additionally designates tags for blocks with unclear results due to ambiguous classification with existing organized tags; performs simultaneous learning of elements such as titles, margins, and the like; increases the number of tags to 41 to enable standardization for a detailed type block, and classifies same into one of a header, a footer, a banner, a two-stage block, a three-stage block, a four-stage block, a five-stage block, a single-stage block, a gallery, or a new tag; and classifies the classified one into 41 tags again.

Description

A classification system for web page layouts for artificial intelligence analysis, a classification system, and a method for classifying web page layouts based on the classification system.

[0001] The present invention relates to a classification system for web page layout for artificial intelligence analysis, a classification system, and a method for classifying web page layouts using the same, and more specifically, to a classification system for web page layout for artificial intelligence analysis, a classification system, and a method for classifying web page layouts using the same, which additionally designates tags for blocks whose classification is ambiguous with existing organized tags and thus results are unclear, conducts learning on elements such as titles and margins in parallel, and increases the number of tags to 41 to enable standardization of detailed blocks, thereby classifying them into 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 into 41 tags.

[0002] Layout is a website component that not only makes information easy and quick to view, but also makes the content easier and clearer to understand. To establish a classification system for the paragraphs that make up a webpage, understanding website layout is essential. Websites can be broadly categorized into three sections: header, body, and footer. Of these three, the header and footer exist across most websites and share many common features, such as menus and the arrangement of essential functions, making them very useful for training AI. However, the body section contains a large amount of content and can vary significantly depending on the characteristics of each site. Therefore, even within the body section, paragraph-by-paragraph separation is necessary.

[0003] Conventional AI-based webpage layout derivation methods extract 12 learning tags and then analyze them to produce results. While insufficient training volume can impact results, the current training method suffers from the incorporation of blocks due to the insufficient number of tags, which leads to errors in the data classification process. To address this issue, a classification system utilizing AI to identify and analyze webpage components is needed.

[0004] The present invention is to solve the above problems, and 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 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 introduced.

[0005] 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 the 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-column 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-column 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-column 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-column 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 section in which the area division is ambiguous among the image paragraphs and is located between the header section and the footer section; and 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 and gallery section are further subdivided and include subdivision tags combined with corresponding English letters or numbers.

[0006] In the above detailed classification tag, 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 flip is classified as HI11TTI11, and the text upside-down flip 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 is classified as HI11I31, 3-level list and image is classified as HI31I11, text and 4-level list is classified as HTI41, 4-level list and text is classified as HI41T, 5-level block of the 5-level block part is classified as HI51, image and 4-level list is classified as HI11I41, 4-level list and image is 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 is HI12I11, image and 2-level 2-level list is classified as HI11I22, 2-level 2-level list and image is 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.

[0007] 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 the vertical two-layer list of the new section is classified as VI11I12, the vertical three-layer list is classified as VI11I13, and the category is classified as O11.

[0008] In addition, a classification system for a web page layout for artificial intelligence analysis according to an 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.

[0009] In addition, a method for classifying a webpage layout by a classification system for a webpage layout for artificial intelligence analysis according to an 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 the height of a paragraph, the width of a paragraph, and the position of a text are analyzed by artificial intelligence for the layout classified by the subdivision tags.

[0010] As described above, the present invention enables the automatic analysis and classification of various web page layouts using artificial intelligence, allowing designers to reduce repetitive tasks and focus more on creative work. The automated system also maintains consistency in design elements and helps users access them more intuitively.

[0011] Additionally, leveraging artificial intelligence models, particularly CNN models, can accurately detect and classify each component of a layout, providing much higher accuracy and reliability than manual analysis.

[0012] Furthermore, automated web page layout analysis using artificial intelligence allows for efficient management of large-scale web pages or shopping malls. This is particularly useful when handling large amounts of data, saving time and manpower, enabling more projects to be carried out simultaneously.

[0013] Additionally, AI can be used to analyze user behavior patterns and optimize webpages based on these findings. This helps users navigate webpages more easily and quickly find the information they need, and it can improve customer satisfaction by implementing user-friendly designs.

[0014] Figure 1 is a diagram of a classification system of a web page layout for artificial intelligence analysis according to one embodiment of the present invention.

[0015] Figure 2 is an example diagram of a web page divided into a head, body, and footer.

[0016] Figure 3 is an example diagram of HI11I13, HI11, and HI11I22 among the detailed classification tags.

[0017] Figure 4 is an example diagram of HI11 and HI21 among the detailed classification tags.

[0018] Figure 5 is an example diagram of HI11I22, HI22I11, HI31, and HI12I11 among the detailed classification tags.

[0019] Figure 6 is an example diagram of HI11, HI11I22, HI11I32, and HI31 among the detailed classification tags.

[0020] 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.

[0021] FIG. 8 is a flowchart of a method for classifying web page layouts by a classification system for artificial intelligence analysis according to one embodiment of the present invention.

[0022] 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.

[0023] 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.

[0024] In various embodiments of the present disclosure, expressions such as “includes” or “may include” indicate the presence of the disclosed 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, terms such as “includes” or “has” should be understood to indicate the presence of a feature, number, step, operation, component, part, or 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.

[0025] In various embodiments of the present disclosure, the expression "or" 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.

[0026] Expressions such as "first," "second," "first," or "second" used in various embodiments of the present disclosure may 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 may be used to distinguish one component from another. For example, a first user device and a second user device are both user devices, and represent different user devices. For example, without departing from the scope of various embodiments of the present disclosure, a first component may be referred to as a second component, and similarly, a second component may also be referred to as a first component.

[0027] 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 a new component between the component and the other component. Conversely, when it is said that a component is "directly connected" or "directly connected" to another component, it should be understood that no new component exists between the component and the other component.

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

[0029] The terms used in the various embodiments of the present disclosure are used only 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.

[0030] 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 the various embodiments of the present disclosure belong.

[0031] 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.

[0032]

[0033] 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 illustrating 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-column block section, a three-column block section, a four-column block section, a five-column block section, a single block section, and a gallery section. Here, the header section, the footer section, the banner section, the two-column block section, the three-column block section, the four-column block section, the five-column block section, the single block section, and the gallery section may include sub-classification tags composed of English letters or numbers that are further subdivided, and may be analyzed by artificial intelligence.

[0034] 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 section 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).

[0035] The footer section is located at the very bottom of a webpage and contains links related to site information and privacy protection. The footer section of the present invention has the same structure as the footer section of FIG. 2 and includes a footer. Because the footer section does not contain a wide variety of content, a single tag can encompass the footer section. The footer section's subcategory tag is FT (Footer).

[0036] The banner section, two-stage block section, three-stage block section, four-stage block section, five-stage block section, single block section, and gallery section described below constitute the body section. The present invention uses 35 detailed classification tags to comprehensively encompass all components of the body section, which were not easily classified in the web page layout.

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

[0038] The two-column block section is located between the header and footer sections, and divides the image paragraph or text paragraph into two areas. The two-column block section is classified into five detailed tags: HI21 for two-column blocks, HI11I13 for images and three-level lists, HI31I11 for three-level lists and images, HI11TTI11 for flipped text, and HTI11I11T for flipped text. Tags for a two-level block include HI21, a two-level block with an image first and a three-level list next, and consisting of two paragraphs is HI11I13, a two-level block with a three-level list first and an image next, and consisting of two paragraphs is HI31I11, a two-level block with text on the left and the text reversed on the right is HI11TTI11, and a two-level block with text on the left and the text reversed on the right is HTI11I11T.

[0039] 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 detailed tags: 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, a 2-column list next, and 3 paragraphs is HI11I21, a 3-column block with a 2-column list next, and an image next, and 3 paragraphs is HI21I11, a 3-column block with text on the left and a 3-column list next to it is HTI31, a 3-column block with a 3-column list next to it, 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 it can be set to rotate automatically.

[0040] The 4-column block section is located between the header and footer sections, and the image paragraph or text paragraph is divided into 4 areas. The 4-column block section is classified into 5 detailed tags: 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 that indicate 4-column blocks are HI41, HI11I31 for a 4-column block consisting of 4 paragraphs with an image first and then a 3-column list, HI31I11 for a 4-column block consisting of 4 paragraphs with a 3-column list first and then an image, HTI41 for a 4-column block with text on the left and a 4-column list on the right, and HI41T for a 4-column block with a 4-column list on the left and text on the right.

[0041] 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 sub-categories tags: HI51 for 5-column blocks, HI11I41 for images and 4-column lists, and HI41I11 for 4-column lists and images. The tags that indicate a 5-column block are HI51, HI11I41 for a 4-column block consisting of 5 paragraphs with an image first and then a 4-column list, and HI41I11 for a 5-column block consisting of 5 paragraphs with a 4-column list first and then an image.

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

[0043] 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 7 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, HI32I11 for 3-level 2-level list and image. The tag that means gallery is GR, HI11I12 for image first and then 2-level list, HI22I11 for 2-level list first and then image, HI11I32 for 3-level 2-level list first and then 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, and it can be confirmed that the images are located on the left and the two-story list consisting of two images is located on the right.

[0044] 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-tier block section, three-tier block section, four-tier block section, five-tier block section, single block section, and gallery section described above have horizontal configurations, but the new section has a configuration in which a two-tier list or a three-tier list is arranged vertically. In the category section, a description of the category of products listed on the web page is provided. Therefore, the number of sub-categories 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.

[0045]

[0046] Hereinafter, a classification system for web page layouts for AI analysis according to an embodiment of the present invention will be described with reference to the drawings. FIG. 7 is a block diagram of a classification system for web page layouts for AI analysis according to an embodiment of the present invention. Referring to FIG. 7, the classification system for web page layouts for AI 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 utilizes AI to provide high accuracy and consistency in analyzing web page layouts, and can maximize efficiency through automation. This approach is very useful in analyzing and optimizing web page designs and can greatly contribute to improving user experience. The AI ​​model of the present invention can utilize a CNN (convolutional neural network) model, which can obtain accurate and reliable results and can be easily understood and applied by a wide range of people. More specifically, the present invention can utilize the YOLOv8 model for object detection and the EfficientNetV2 model for image classification. In the present invention, the classification system for web page layouts for artificial intelligence analysis may include one or more processors, one or more memories, one or more storage devices, and one or more communication interfaces, which may be interconnected via a bus. Additionally, the classification system for web page layouts for artificial intelligence analysis may include hardware such as input devices and output devices. Furthermore, the classification system for web page layouts for artificial intelligence analysis may be equipped with various software, including an operating system capable of running programs.

[0047] The pre-learning module (10) learns preprocessed web pages using 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 sub-categories, so that learning about the two classification systems progresses. This ensures sufficient learning.

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

[0049] The layout cutting module (30) cuts the input webpage according to its layout. To classify the webpage according to the layout classification system, the webpage layout must first be cut. The layout cutting module (30) recognizes white space, distinguishes between areas containing images or text and areas containing white space, and then scrolls the webpage horizontally, using the white space as the cutting position.

[0050] 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).

[0051] 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 detailed tags 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 reverse 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 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 The image is HI32I11, the vertical two-layer list of the new section is VI11I12, the vertical three-layer list is VI11I13, and the category is O11. The second layout classification module (50) reclassifies the classification by the first layout classification module (40) into one of the above-mentioned sub-classification tags.Using the above detailed classification tags has the advantage of covering the entire layout of a web page, allowing artificial intelligence to classify the layout of any web page.

[0052] 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 flash memory type, hard disk type, SSD (Solid State Disk type), SDD (Silicon Disk Drive type), multimedia card micro type, card type memory (e.g., SD or XD memory, etc.), random access memory (RAM), static random access memory (SRAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), programmable read-only memory (PROM), magnetic memory, magnetic disk, and optical disk.

[0053]

[0054] 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.

[0055] Step 1 (S10) is the step where the preprocessed webpage is learned by artificial intelligence. Pre-learning is required for the artificial intelligence of the pre-learning module (10) to analyze and classify the components of the webpage. For 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 to facilitate learning from the webpage is learned. The layout of the webpage is divided into one of the header, footer, banner, two-column block, three-column block, four-column block, five-column block, single block, gallery, and new section, and classified into 41 sub-categories tags so that learning can proceed for each sub-categories tag.

[0056] Step 2 (S20) is where the components of a new webpage are cut according to layout. An AI with sufficient prior learning can analyze and classify the components of a new webpage based on its learnings when the new webpage is input into the webpage input module (20). To this end, the layout cutting module (30) recognizes white space, distinguishes between areas containing images or text and areas containing white space, and then scrolls the webpage horizontally, using the white space as the cutting location.

[0057] 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 exemplary 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 an embodiment of the present invention. Referring to FIG. 9, the first layout classification module (40) analyzes the layout cut in the second step (S20) by artificial intelligence and classifies it 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.

[0058] Step 4 (S40) is where, after being classified in Step 3 (S30), AI further refines the classification based on sub-classification tags. There are 41 sub-classification tags in total. Specifically, the left logo header of the header section is LLH, the center logo header is CLH, the footer of the footer section is FT, the banner of the banner section 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 section is HI21, the image and 3-level list are HI11I13, the 3-level list and image are HI31I11, the text upside-down is HI11TTI11, the text upside-down reverse direction is HTI11I11T, the 3-column block of the 3-column block section 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 section 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 two-tier list of the new department is VI11I12, the vertical three-tier list is VI11I13, and the category is O11. Fig. 10 is an exemplary diagram of the fourth 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, two-column block section, three-column block section, four-column block section, five-column block section, single block section, gallery section, and new section classified in the third step (S30) based on the content learned in the first step (S10) by using the detailed classification tags.

[0059] The specific processes of the third step (S40) and the fourth step (S40) of 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 horizontally, and the V (Vertical) series means elements arranged vertically. Next, the detailed layout classification is classified more specifically according to the combination and arrangement method of images and text 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 text. Image and text combinations are forms in which images and text are placed together, such as image text (HI11T) and text image (HTI11). An image list is a form in which multiple images are placed in a list format, such as an image and three-level list (HI11I3). A text list is a form in which multiple texts are placed in a list format, such as a text and four-level list (HTI41). Next, frequently used layouts are classified separately according to specific purposes. The header section is the main menu and logo placement area located at the top of the page, and includes the left logo header (LLH) and the center logo header (CLH). The footer section is the information and link placement area located at the bottom of the page, and includes the footer (FT). The banner section is an area placed to increase visibility, and includes a 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 allows for the arrangement of multiple images in a gallery format, and includes Gallery (GR), Image and 2-Tier List (HI111I2), and Image and 3-Tier 2-Tier List (HI111I3). The New section features a new layout, with a vertical 2-tier list (VI111I2) and categories (O11).

[0060] The following methods are used to analyze web pages using this classification system. First, layout analysis allows us to identify the layout by analyzing each section of the web page according to the classification system. Second, element placement analysis allows us to identify the arrangement of elements (images, text) within each layout and derive structural characteristics. Third, design consistency maintenance allows us to make necessary modifications and optimizations based on the analyzed layout and placement methods while maintaining design consistency. Fourth, user experience enhancement allows us to select and apply an appropriate layout considering the user interface (UI) and user experience (UX). These methods systematically analyze the visual elements of a web page and implement a user-friendly design. Web page layout analysis using AI is particularly effective for large-scale websites and online shopping malls.

[0061] Step 5 (S50) is a step where the paragraph height, paragraph width, and text position 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 paragraph height, paragraph width, and text position for the classified layout, and stores the classification system information of the layout, paragraph height information of the layout, paragraph width information, and text position information.

[0062]

[0063] The systems described above may be implemented using hardware components, software components, and / or a combination of hardware components and software components. For example, the systems 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 operating system. The processing unit may also 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; however, one of ordinary skill in the art will recognize that the processing unit may include multiple processing elements and / or multiple types of processing elements. For example, a processing unit may include multiple processors, or a processor and a controller. Other processing configurations, such as parallel processors, are also possible.

[0064] 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 wave, for interpretation by the processing device or for providing instructions or data to the processing device. The software may also be distributed over networked 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.

[0065] 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 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, and flash memories. 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.

[0066] Although the embodiments described above have been described by way of limited examples and drawings, those skilled in the art will appreciate that various modifications and variations can be made based on the above teachings. For example, appropriate results can still be achieved even if the described techniques are performed in a different order than described, and / or components of the described systems, structures, devices, circuits, etc. are combined or combined in a different manner than described, or are replaced or substituted with other components or equivalents.

[0067] Therefore, other implementations, other embodiments, and equivalents to the claims also fall within the scope of the claims described below.

Claims

1. 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 a 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-column 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 an image paragraph or text paragraph is divided into three areas; A four-block section located between the header and footer sections, in which an image paragraph or text paragraph is 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; and It is located between the header and footer sections, and includes a gallery section, which is a section with an ambiguous area division among the image sections; A classification system module for a web page layout for artificial intelligence analysis, wherein 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, and gallery section are further subdivided, and corresponding subdivision tags are combined with English letters or numbers.

2. In claim 1, In the above subcategory tags, 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 as HI11I31, the 3-stage list and image as HI31I11, the text and 4-stage list as HTI41, and the 4-stage list and text 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. A classification system module of a web page layout for artificial intelligence analysis, characterized in that the gallery of the above gallery section is classified as GR, images and two-story lists as HI11I12, two-story lists and images as HI12I11, images and two-story two-story lists as HI11I22, two-story two-story lists and images as HI22I11, images and three-story two-story lists as HI11I32, and three-story two-story lists and images as HI32I11.

3. In claim 2, A classification system module of a web page layout for artificial intelligence analysis, characterized in that it further includes a new section that can add a new configuration, and the vertical two-tier list of the new section is classified as VI11I12, the vertical three-tier list is classified as VI11I13, and the category is classified as O11.

4. Pre-learning module where pre-processed web pages are learned by artificial intelligence; A webpage input module where webpages requiring layout classification are input; Layout cutting module that cuts the input web page 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 A classification system of a web page layout for artificial intelligence analysis, comprising 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.

5. In a method for classifying the layout of a web page by a classification system for the artificial intelligence analysis of claim 4, The first step is for preprocessed web pages to be trained by artificial intelligence; The second stage is where the components of the new web page are cut out according to the layout; A third step in which the layout cut in the second step is classified by artificial intelligence 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; A fourth step in which the classification in the third step is further subdivided based on the subclassification tags by artificial intelligence; and A method for classifying components of a web page by a classification system of a web page layout for artificial intelligence analysis, comprising a fifth step in which the height of a paragraph, the width of a paragraph, and the position of a text are analyzed by artificial intelligence for a layout classified by the above-mentioned detailed classification tag.

Images