Web page display method, system and machine-readable storage medium

By identifying the main area and color value of the input image and using the CNN model and mapping table to generate a personalized web page display, the problem of the single style of the image recognition search page is solved, and the user experience and interactive effect are improved.

CN110287435BActive Publication Date: 2025-10-03BAIDU ONLINE NETWORK TECH (BEIJIBG) CO LTD
View PDF 6 Cites 0 Cited by

Patent Information

Application Number
CN201910422894.6
Authority / Receiving Office
CN · China
Patent Type
Patents(China)
Current Assignee / Owner
Filing Date
2019-05-21
Publication Date
2025-10-03
Estimated Expiration
2039-05-21

AI Technical Summary

Technical Problem

At present, the web pages of image recognition search have a single style and color, and user participation and experience are not high.

Method used

By obtaining the objects and color values ​​of the main area of ​​the input image, the CNN convolutional neural network training model is used to build a training knowledge base, determine the main color value, and determine the web page display format according to the preset mapping table to output personalized display results.

Benefits of technology

It improves the user's search experience and immersion, enhances the user's interaction with the web page, and realizes personalized web page display.

✦ Generated by Eureka AI based on patent content.

Smart Images

  • Figure CN110287435B_ABST
    Figure CN110287435B_ABST
Patent Text Reader

Abstract

Embodiments of the present invention provide a webpage display method, system, and machine-readable storage medium. The method comprises: obtaining an object in a main region of an image input to a webpage; determining a main color value of the object in the main region; determining a webpage display form corresponding to the main color value based on a preset mapping table reflecting the correspondence between color values ​​and webpage display forms; and outputting a display result for the input image based on the determined webpage display form. The present invention can generate a personalized webpage similar to the input image based on the input image, thereby improving the user experience.
Need to check novelty before this filing date? Find Prior Art

Description

Technical Field

[0001] The present invention relates to the field of network technology, and in particular to a web page display method, system and storage medium. Background Art

[0002] With the development of internet web technologies, image search, as a multimodal search method, has begun to be used by more and more users. The ability to find information through images is also a very common demand. However, the current image search web pages are relatively simple in style and color, resulting in low user engagement and poor user experience. Therefore, it is necessary to design a solution that can enhance the user experience of image search products by creating a search atmosphere. Summary of the Invention

[0003] The purpose of the embodiments of the present invention is to provide a web page display method, system and storage medium, which can obtain a personalized web page similar to the input picture based on the input picture, thereby improving the user experience.

[0004] In order to achieve the above-mentioned purpose, an embodiment of the present invention provides a web page display method, which includes: obtaining a main area object of an image input into a web page; determining the main color value of the main area object; determining the web page display form corresponding to the main color value according to a preset mapping table for reflecting the correspondence between color values ​​and web page display forms; and outputting a display result for the input image based on the determined web page display form.

[0005] Preferably, the obtaining of the main area object of the picture input through the web page includes: establishing a CNN convolutional neural network training model, which takes the picture as input and the main area object of the picture as output; counting parameters related to various main area objects, and constructing a training knowledge base based on the counted parameters; using the parameters in the training knowledge base to train the established CNN convolutional neural network training model; and inputting the picture input through the web page into the trained CNN convolutional neural network training model to output the main area object of the picture.

[0006] Preferably, determining the main color value of the object in the main area includes: obtaining the various color values ​​of the object in the main area; determining the size of the area occupied by the various color values; and determining the color value with the largest occupied area as the main color value based on the result obtained by comparing the sizes of the areas occupied by the various color values.

[0007] Preferably, determining the size of the area occupied by each color value includes: obtaining the number of pixels in the area occupied by each color value, and determining the size of the area occupied by each color value according to the number of pixels in the area occupied by each color value.

[0008] Preferably, the web page presentation form includes the web page rendering color and / or the web page component presentation form, and the mapping table includes: a color mapping table for reflecting the correspondence between color values ​​and the web page rendering colors and / or a style mapping table for reflecting the correspondence between color values ​​and the web page component presentation form; wherein the web page component presentation form includes: the color of each page component and / or the style of each page component.

[0009] Preferably, the color of each page component includes the color of the page element under each identity identifier; and / or the style of each page component includes the style of the page element under each identity identifier.

[0010] The present invention also provides a web page display system, which includes: a main area object acquisition module, used to obtain the main area object of a picture input through a web page; a main color value recognition module, used to determine the main color value of the main area object; a web page display form mapping module, used to determine the web page display form corresponding to the main color value according to a preset mapping table for reflecting the correspondence between color value and web page display form; and a web page output module, used to output the display result for the input picture based on the determined web page display form.

[0011] Preferably, the main area object acquisition module includes: an image acquisition module for acquiring images input from a web page in real time; a knowledge base construction module for counting parameters related to various main area objects and constructing a training knowledge base based on the statistical parameters; a model training module for establishing a CNN convolutional neural network training model with an image as input and the main area object of the image as output, and using the parameters in the training knowledge base to train the established CNN convolutional neural network training model; and a model application module for inputting the image input through the web page into the trained CNN convolutional neural network training model to output the main area object of the image.

[0012] Preferably, the main color value recognition module includes: a color value acquisition module for acquiring the various color values ​​of the objects in the main area; an area determination module for determining the size of the area occupied by the various color values; and a comparison module for determining the color value with the largest occupied area as the main color value based on the result obtained by comparing the sizes of the areas occupied by the various color values.

[0013] Preferably, the area determination module includes: a pixel acquisition submodule for acquiring the number of pixels in the area occupied by each color value; and an area determination submodule for determining the size of the area occupied by each color value according to the number of pixels in the area occupied by each color value.

[0014] Preferably, the web page presentation form includes the web page rendering color and / or the web page component presentation form, and the mapping table includes: a color mapping table for reflecting the correspondence between color values ​​and the web page rendering colors and / or a style mapping table for reflecting the correspondence between color values ​​and the web page component presentation form; wherein the web page component presentation form includes: the color of each page component and / or the style of each page component.

[0015] Preferably, the color of each page component includes the color of the page element under each identity identifier; and / or the style of each page component includes the style of the page element under each identity identifier.

[0016] On the other hand, the present invention further provides a machine-readable storage medium having instructions stored thereon, the instructions being used to enable a machine to execute the above-mentioned web page display method.

[0017] Through the above technical solution, the present invention can obtain the web page user interface associated with the input image content, so that the user can be affected and obtain a more optimized user experience.

[0018] Other features and advantages of the embodiments of the present invention will be described in detail in the subsequent detailed description. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] The accompanying drawings are used to provide a further understanding of the embodiments of the present invention and constitute a part of the specification. Together with the following detailed description, they are used to explain the embodiments of the present invention, but do not constitute a limitation of the embodiments of the present invention. In the accompanying drawings:

[0020] Figure 1 is a flow chart illustrating a web page display method according to an embodiment of the present invention;

[0021] Figure 2 is a flow chart illustrating an embodiment of the present invention for obtaining a main area object of an image input through a web page;

[0022] Figure 3 is a flow chart illustrating one embodiment of the present invention for determining the main color value of the object in the main area;

[0023] Figure 4 for Figure 3A specific flow chart for determining the size of the area occupied by each color value;

[0024] Figure 5 A structural block diagram of a web page display system for illustrating an embodiment of the present invention;

[0025] Figure 6 A block diagram illustrating the structure of a main area object acquisition module according to an embodiment of the present invention;

[0026] Figure 7 A block diagram illustrating a main body color value recognition module according to an embodiment of the present invention; and

[0027] Figure 8 for Figure 7 Structural block diagram of the region determination module in .

[0028] Description of Reference Numerals

[0029] 501, main area object acquisition module; 502, main body color value recognition module;

[0030] 503, web page display form mapping module; 504, web page output module;

[0031] 601, image acquisition module; 602, knowledge base construction module;

[0032] 603, model training module; 602, model application module;

[0033] 701, color value acquisition module; 702, area determination module;

[0034] 703, comparison module 801, pixel acquisition submodule;

[0035] 802, region determination submodule DETAILED DESCRIPTION

[0036] The following describes the specific implementation of the embodiment of the present invention in detail with reference to the accompanying drawings. It should be understood that the specific implementation described herein is only used to illustrate and explain the embodiment of the present invention and is not used to limit the embodiment of the present invention.

[0037] The embodiments of the present invention are primarily used for image recognition and search pages, but are not limited to these pages. They can be used on a variety of web pages related to image recognition or image search. The following embodiments of the present invention can be used in web view search software. The web pages in the present invention are also not limited to the devices on which they are displayed; the devices can be mobile devices or computer terminals.

[0038] Example 1

[0039] Figure 1This is a specific flow chart of a web page display method. In this embodiment, it specifically describes how to obtain the display result for the input image based on the image input on the web page. Figure 2-Figure 4 This is a further specific flow chart of this embodiment. Figure 2 This is a specific flow chart for "obtaining the main area object of an image input through a web page." Figure 3 This is a specific flow chart for “determining the main color value of the object in the main area”. Figure 4 for Figure 3 Specific flow chart of "determining the size of the area occupied by each color value" in.

[0040] like Figure 1 As shown, this embodiment provides a web page display method, the method comprising:

[0041] Step S101: obtaining the main area object of the image input into the web page.

[0042] The primary purpose of this step is to identify the main object in the image and remove unnecessary reference factors. In this embodiment, the reference factors removed are color values ​​that have no reference value. This removal further improves the accuracy of subsequent main color value determination. The image input on the webpage can be a user-entered image, an image indexed by the user based on input text, or a photographed image. The image used in this step is not affected by the type of image or the method of acquisition.

[0043] Step S102: determining the main color value of the object in the main area.

[0044] Based on the main area object obtained in S101, the color value of the main area object can be extracted, and a certain color value therein can be determined as the main color value according to a preset rule, so as to facilitate subsequent page display.

[0045] Step S103 : determining the web page presentation form corresponding to the main color value according to a preset mapping table for reflecting the correspondence between color values ​​and web page presentation forms.

[0046] The mapping table is pre-set and can be either a table or code. It is primarily stored in the backend and can be accessed at any time. Its main purpose is to reflect the correspondence between color values ​​and web page presentation. The mapping table is primarily a manually maintained set of data that maps the subject color values ​​to the web page presentation. This mapping table can be replaced and modified at any time and can be updated and modified to suit actual usage.

[0047] Step S104: outputting a display result for the input image based on the determined web page display format.

[0048] Among them, through the above-mentioned embodiments of the present invention, the output of the image recognition result in the form of a corresponding web page display can be obtained according to the input image, thereby enhancing the relevant immersion of the user's search experience.

[0049] Preferably, Figure 1 Based on the above, the following method is used to obtain the main area object of the picture input through the web page. Figure 2 As shown, the solution of step S101 is further improved, which may include: step S201, establishing a CNN convolutional neural network training model (Convolutional Neural Networks, referred to as CNN), which takes a picture as input and an object in the main area of ​​the picture as output; step S202, counting parameters related to various main area objects, and constructing a training knowledge base based on the counted parameters; step S203, using the parameters in the training knowledge base to train the established CNN convolutional neural network training model; and step S204, inputting the picture input through the web page into the trained CNN convolutional neural network training model to output the main area object of the picture.

[0050] In step S202, the training knowledge base constructed is a statistical collection of a large number of parameters related to various subject area objects. These parameters may include the statistically analyzed input image content and the coordinates, width, and height of the subject area related to the image content. The coordinates represent specific locations, while the width and height represent intervals. The two are combined to obtain the subject area object of the image on the webpage. The subject area is actually the location of the main content. For example, for an input image, the entire image area includes a subject area and a non-subject area. The subject area is the key part of the image and the area that best reflects the image content. If the image is a maple leaf, the subject area should be the area after removing the non-subject area outside the maple leaf. Obtaining the subject area makes subsequent judgments more accurate and the resulting results closer to the desired effect. In this embodiment, obtaining the subject area is accomplished using a training model. In this embodiment, a training knowledge base can be obtained by collecting a large amount of the aforementioned data (i.e., including image content and subject area objects corresponding to the image content). In step S203, the training knowledge base, which includes image content and subject area objects corresponding to the image content, can be used to train a CNN convolutional neural network training model. Finally, in step S204, the main area object of the image is output based on the input of the CNN convolutional neural network training model. In this embodiment, the main area object of the image (i.e., the coordinates and width and height of the main area related to the input image content) can be obtained by inputting the image. In this way, the coordinates and width and height of the main area of ​​the image can be obtained based on the image input on the web page, and the obtained data can be used in the next step.

[0051] Preferably, Figure 1 Based on , the main color value of the object in the main area is determined in the following way. Figure 3 As shown, the solution of step S102 is further improved. In step S301, the color values ​​of the object in the main area are obtained. In step S302, the size of the area occupied by each color value is determined. In step S303, based on the result obtained by comparing the sizes of the areas occupied by the color values, the color value with the largest area is determined as the main color value.

[0052] In step S301, the color values ​​of the objects in the main area are obtained, primarily for use in the subsequent step S302 to determine the size of the area occupied by the color values. The main area color value in S303 is also within this obtained color value. It should be noted that this embodiment uses the RGB color model, an industry-standard color standard. The following briefly describes the RGB color model. The RGB color model generates a variety of colors by varying and superimposing the three color channels: red (R), green (G), and blue (B). RGB represents the colors of the three channels, red, green, and blue. This standard encompasses nearly all colors perceptible by human vision and is one of the most widely used color systems. This embodiment utilizes this color system to obtain the size of the area occupied by each color value. Based on the size of the occupied area, the color value with the largest occupied area is determined as the main area color value. This method can determine the color value with the largest occupied area in the input image as the main area color value. This further enhances the user's sense of immersion and satisfies the user's need for a webpage rendering format associated with the search results for the input image, creating a more engaging experience.

[0053] Preferably, Figure 3 Based on , the size of the area occupied by each color value is determined in the following manner. Figure 4 As shown, Figure 3 The solution of step S302 is further improved, and the method may include:

[0054] S401, obtaining the number of pixels in the area occupied by each color value. S402, determining the size of the area occupied by each color value according to the number of pixels in the area occupied by each color value.

[0055] Each pixel corresponds to a color value. The number of pixels for each color value is counted, and the size of the area occupied by each color value is determined based on the number of pixels for each color value. For example, if the input image is a red maple image, and the number of pixels with a dominant color value of red is the largest, then the area occupied by red is determined to be the largest. In this embodiment, red is determined to be the dominant color value. A webpage presentation format corresponding to the dominant color value of red is mapped from the mapping table to output a display result for the input image.

[0056] Preferably, in this embodiment, the web page presentation form may include the web page rendering color. The web page presentation form may be to directly render the color of the web page, that is, to render it into a rendering color corresponding to the main color value. Wherein, the web page presentation form may also include a web page component presentation form. That is, a certain part of the page component may be rendered into a rendering color corresponding to the main color value, and the specific rendering part may be determined according to the actual situation. And the actual situation is the identity identification mark of the web page component. Specifically, the mapping table may include: a color mapping table for reflecting the correspondence between the color value and the web page rendering color and a style mapping table for reflecting the correspondence between the color value and the web page component presentation form. Wherein, the web page component presentation form includes: the color of the corresponding page element in the page component under each page component identity and / or the style of the corresponding page element in the page component under each page component identity.

[0057] The mapping table may include a color mapping table, represented as follows: {[color range: [color value 1 - color value 2], display color: color value 3]}. This means that all color values ​​within the range of color value 1 - color value 2 for the main color correspond to a display color value of 3, meaning the actual rendered web page color is color value 3. For example, rose red and pink both correspond to a color value of red. This approach is used to achieve page rendering.

[0058] The mapping table can also include a style mapping table. Before introducing the style mapping table, let's briefly introduce page components. A page component is a number of blocks that a web page is decomposed into. Each page component has a corresponding style and display color. For example, the input box and jump button in a web page are page components. Each component has an identity identifier, i.e., an ID, for the corresponding page element. The style mapping table is represented as follows: {[color range: [color value 1-color value 2]; component a: id, display color: color value 3, display style: style 1; component b: id, display color: color value 4, display style: style 2]}, that is, all color values ​​of the main color within the range of color value 1-color value 2 correspond to a page element with the id component a having a display style of style 1 and a color value of 3 for the page element in component a; for component b, all color values ​​of the main color within the range of color value 1-color value 2 correspond to a page element with the id component b having a display style of style 2 and a color value of 4 for the page element in component b.

[0059] Specifically, take the input image as green leaves and the style mapping table as {[color range: [light green-dark green]; page background component: id: 001, display color: light green, display style: full background coverage; input box component: id: 010, display color: white, display style: add the input image to the starting area of ​​the input box]} as an example, where the color range is referred to as light green and dark green instead of color values, for easy understanding, and the main color value of the green leaves is within the light green-dark green color range. Based on the above style mapping table, when the input image is a green leaf, the corresponding page display form can be obtained, where the page display form can be that the background element with id 001 in the page background component is displayed in a full background coverage manner, and the color of the full background display is light green; in addition, the starting area with id 010 in the input box component is displayed in a manner of adding the input image to the starting area, and everything in the input box except the input image position is displayed in white. The above method can improve the user experience.

[0060] In this way, you can get the color rendering and style changes of each page component under the page framework (which contains multiple page components). The rendering becomes more purposeful, and the rendered page can be made more layered without affecting the user's viewing experience.

[0061] Through the above-mentioned implementation, not only the image recognition results are displayed, but also the input image content can be linked to the output web page presentation form, affecting the final page rendering and presentation. By determining the main color value of the object in the main area, the main page framework (which contains multiple page components) is triggered to notify each page component to update the color and style, and affect the rendering of the entire page. The relevant immersion of the user search experience is enhanced, and different input images can produce highly relevant pages. Personalized intelligent perception rendering. This embodiment can achieve interaction with the user interface through image content input through technologies such as image recognition and analysis, allowing users to be affected in rendering, thereby obtaining a more optimized user experience.

[0062] Example 2

[0063] Figure 5 This is a structural diagram of a web page display system. Figure 5 From the block diagram, it can be seen that after inputting the picture, the final result obtained is the display result for the input picture, which is mainly used to personalize the display of the page. Figure 6 This is the structural block diagram of the main area object acquisition module. Figure 7 This is the structural block diagram of the main color value recognition module. Figure 8 for Figure 7 The structural block diagram of the area determination module in this system. All modules in this system are designed in the background of the web page to retrieve web page data and realize the processing and transmission of web page data. Figure 5 , Attachment Figure 6 , Attachment Figure 7 , Attachment Figure 8 This embodiment is further described.

[0064] like Figure 5 As shown, this embodiment provides a web page display system, which includes: a main area object acquisition module 501, used to obtain the main area object of the image input into the web page; a main color value recognition module 502, used to determine the main color value of the main area object; a web page display form mapping module 503, used to determine the web page display form corresponding to the main color value according to a preset mapping table for reflecting the correspondence between color value and web page display form; and a web page output module 504, used to output the image recognition result for the input image based on the determined web page display form.

[0065] Preferably, if Figure 6 As shown, the main area object acquisition module includes: an image acquisition module 601, which is used to acquire images input into a web page in real time; a knowledge base construction module 602, which is used to count parameters related to various main area objects and construct a training knowledge base based on the counted parameters; a model training module 603, which is used to establish a CNN convolutional neural network training model with an image as input and the main area object of the image as output, and use the parameters in the training knowledge base to train the established CNN convolutional neural network training model; and a model application module 604, which is used to input the image input through the web page into the trained CNN convolutional neural network training model to output the main area object of the image.

[0066] Preferably, if Figure 7 As shown, the subject color value recognition module includes: a color value acquisition module 701 for acquiring the color values ​​of the objects in the subject area; an area determination module 702 for determining the size of the area occupied by each color value; and a comparison module 703 for determining the color value with the largest area occupied as the subject color value based on the comparison result of the area occupied by each color value.

[0067] Preferably, if Figure 8 As shown, Figure 7 FIG2 is a block diagram of a region determination module 702, which includes a pixel acquisition submodule 801 for acquiring the number of pixels in the region occupied by each color value. FIG3 is a block diagram of a region determination module 702, which includes a pixel acquisition submodule 801 for acquiring the number of pixels in the region occupied by each color value. FIG4 ...

[0068] Preferably, the web page presentation form includes the web page rendering color and / or the web page component presentation form, and the mapping table includes: a color mapping table for reflecting the correspondence between color values ​​and the web page rendering colors and / or a style mapping table for reflecting the correspondence between color values ​​and the web page component presentation form; wherein the web page component presentation form includes: the color of each page component and / or the style of each page component.

[0069] Preferably, the color of each page component includes the color of the page element under each identity identifier; and / or the style of each page component includes the style of the page element under each identity identifier.

[0070] Other implementation details and beneficial effects of this embodiment compared to the prior art are the same as those of the first embodiment and will not be described in detail here.

[0071] An embodiment of the present invention provides a storage medium on which a program is stored. When the program is executed by a processor, the web page display method is implemented.

[0072] Those skilled in the art will appreciate that the embodiments of the present application can be provided as methods, systems, or computer program products. Therefore, the present application can adopt the form of a complete hardware embodiment, a complete software embodiment, or an embodiment in combination with software and hardware. Moreover, the present application can adopt the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) that contain computer-usable program code.

[0073] The present application is described with reference to the flowcharts and / or block diagrams of the methods, devices (systems), and computer program products according to the embodiments of the present application. It should be understood that each process and / or box in the flowchart and / or block diagram, as well as the combination of the processes and / or boxes in the flowchart and / or block diagram, can be implemented by computer program instructions. These computer program instructions can be provided to a processor of a general-purpose computer, a special-purpose computer, an embedded processor, or other programmable data processing device to produce a machine, so that the instructions executed by the processor of the computer or other programmable data processing device generate instructions for implementing the steps in the process. Figure 1 a process or multiple processes and / or boxes Figure 1 A device that provides the functions specified in a block or multiple blocks.

[0074] These computer program instructions may also be stored in a computer readable memory that can direct a computer or other programmable data processing device to work in a specific manner, so that the instructions stored in the computer readable memory produce an article of manufacture comprising an instruction device, which implements the process Figure 1 a process or multiple processes and / or boxes Figure 1 The function specified in one or more boxes.

[0075] These computer program instructions can also be loaded onto a computer or other programmable data processing device so that a series of operational steps are executed on the computer or other programmable device to produce a computer-implemented process, thereby providing the instructions executed on the computer or other programmable device for implementing the process. Figure 1 a process or multiple processes and / or boxes Figure 1 The steps for the function specified in one or more boxes.

[0076] In a typical configuration, a computing device includes one or more processors (CPUs), input / output interfaces, network interfaces, and memory.

[0077] The memory may include non-permanent memory in a computer-readable medium, random access memory (RAM) and / or non-volatile memory in the form of read-only memory (ROM) or flash RAM. The memory is an example of a computer-readable medium.

[0078] Computer-readable media includes permanent and non-permanent, removable and non-removable media that can be implemented by any method or technology to store information. The information can be computer-readable instructions, data structures, program modules or other data. Examples of computer storage media include, but are not limited to, phase change memory (PRAM), static random access memory (SRAM), dynamic random access memory (DRAM), other types of random access memory (RAM), read-only memory (ROM), electrically erasable programmable read-only memory (EEPROM), flash memory or other memory technology, compact disc read-only memory (CD-ROM), digital versatile disc (DVD) or other optical storage, magnetic cassettes, magnetic tape, magnetic disk storage or other magnetic storage devices or any other non-transmission media that can be used to store information that can be accessed by a computing device. As defined herein, computer-readable media does not include transitory computer-readable media (transitory media), such as modulated data signals and carrier waves.

[0079] It should also be noted that the terms "comprises," "includes," or any other variations thereof are intended to encompass non-exclusive inclusion, such that a process, method, commodity, or apparatus that includes a series of elements includes not only those elements but also other elements not explicitly listed, or includes elements inherent to such process, method, commodity, or apparatus. In the absence of further limitations, an element defined by the phrase "comprises a ..." does not exclude the presence of other identical elements in the process, method, commodity, or apparatus that includes the element.

[0080] Those skilled in the art will appreciate that the embodiments of the present application may be provided as methods, systems, or computer program products. Therefore, the present application may take the form of a complete hardware embodiment, a complete software embodiment, or an embodiment combining software and hardware. Furthermore, the present application may take the form of a computer program product implemented on one or more computer-usable storage media (including but not limited to magnetic disk storage, CD-ROM, optical storage, etc.) containing computer-usable program code.

[0081] The above are merely embodiments of the present application and are not intended to limit the present application. For those skilled in the art, the present application may have various changes and variations. Any modifications, equivalent replacements, improvements, etc. made within the spirit and principles of the present application should all be included within the scope of the claims of the present application.

Claims

1. A web page display method, characterized in that: The method includes: Get the main area object of the image input to the web page, including: Establish a convolutional neural network training model that takes an image as input and outputs objects in the main area of ​​the image; Count the parameters related to various subject area objects and build a training knowledge base based on the statistical parameters. The parameters related to various subject area objects include the statistical input image content and the coordinates and width and height of the subject area related to the image content, where the coordinates refer to specific locations and the width and height refer to intervals; Using the parameters in the training knowledge base to train the established convolutional neural network training model; and Input the image input through the web page into the trained convolutional neural network training model to output the main area object of the image; Determining the main color value of the object in the main area; Determining the web page presentation form corresponding to the main color value according to a preset mapping table for reflecting the correspondence between color values ​​and web page presentation forms; and Output the display result for the input image based on the determined web page display format, The web page presentation form includes web page rendering color and / or web page component presentation form, and the mapping table includes: A color mapping table for reflecting the correspondence between color values ​​and the rendering colors of the web page and / or a style mapping table for reflecting the correspondence between color values ​​and the presentation form of the web page components, wherein the mapping table is set according to the web page style; The web page component display form includes: the color of each page component and / or the style of each page component.

2. The web page display method according to claim 1, wherein: Determining the main color value of the object in the main area includes: Obtaining the color values ​​of the objects in the main area; Determining the size of the area occupied by each color value; and According to the result obtained by comparing the sizes of the areas occupied by the various color values, the color value with the largest area occupied is determined as the main color value.

3. The web page display method according to claim 2, characterized in that: Determining the size of the area occupied by each color value includes: The number of pixels in the area occupied by each color value is obtained, and the size of the area occupied by each color value is determined according to the number of pixels in the area occupied by each color value.

4. The web page display method according to claim 1, wherein: The color of each page component includes the color of the page element under each identity identifier; and / or The styles of the various page components include the styles of the page elements under the various identity identifiers.

5. A web page display system, characterized in that: The web page display system includes: The main area object acquisition module is used to obtain the main area object of the image input to the web page. The main area object acquisition module includes: Image acquisition module, used to obtain images input from web pages in real time; The knowledge base construction module is used to count the parameters related to various subject area objects and build a training knowledge base based on the statistical parameters. The parameters related to various subject area objects include the statistical input image content and the coordinates and width and height of the subject area related to the image content, where the coordinates refer to specific locations and the width and height refer to intervals; a model training module, configured to establish a convolutional neural network training model that takes an image as input and an object in the main area of ​​the image as output, and train the established convolutional neural network training model using parameters in the training knowledge base; and The model application module is used to input the image input through the web page into the trained convolutional neural network training model to output the main area object of the image; A main body color value recognition module, used to determine the main body color value of the object in the main area; a web page presentation form mapping module, configured to determine a web page presentation form corresponding to the main color value according to a preset mapping table reflecting the correspondence between color values ​​and web page presentation forms; and A web page output module, configured to output a display result for the input image based on the determined web page display format; The web page presentation form includes web page rendering color and / or web page component presentation form, and the mapping table includes: A color mapping table for reflecting the correspondence between color values ​​and the rendering colors of the web page and / or a style mapping table for reflecting the correspondence between color values ​​and the presentation form of the web page components, wherein the mapping table is set according to the web page style; The web page component display form includes: the color of each page component and / or the style of each page component.

6. The web page display system according to claim 5, characterized in that: The main body color value recognition module includes: A color value acquisition module, used to acquire the color values ​​of the objects in the main area; an area determination module, configured to determine the size of the area occupied by each color value; and The comparison module is used to determine the color value with the largest occupied area as the main color value according to the result obtained by comparing the sizes of the areas occupied by the various color values.

7. The web page display system according to claim 6, characterized in that: The area determination module includes: The pixel acquisition submodule is used to obtain the number of pixels in the area occupied by each color value; The region determination submodule is used to determine the size of the region occupied by each color value according to the number of pixels in the region occupied by each color value.

8. The web page display system according to claim 7, characterized in that: The color of each page component includes the color of the page element under each identity identifier; and / or The styles of the various page components include the styles of the page elements under the various identity identifiers.

9. A machine-readable storage medium, characterized in that The machine-readable storage medium stores instructions, which are used to enable a machine to execute the web page display method described in any one of claims 1 to 4.

Citation Information

Patent Citations

  • Editing apparatus and editing method

    CN101197046A

  • Interface skin rendering method and apparatus

    CN104978186A

  • Item recommendation based on feature match

    US10109051B1

  • Mosaic image generation method, apparatus and electronic device

    CN106469460A

  • Interactive design tool file generation method, device, electronic device, and storage medium

    CN109298820A