Methods and tools for creating web pages.

Abstract

Invention details;

Description

Method and apparatus for generating a page

[0001] Cross-references

[0002] This patent application claims priority to the Chinese patent application filed on November 18, 2020, with application number 202011290395.5 and invention name “Method and Device for Generating Pages”, the full text of which is incorporated by reference into this application. Technical Field

[0003] Embodiments of the present disclosure relate to the field of computer technology, specifically to the field of network technology, and more particularly to a method and apparatus for generating a page. Background Art

[0004] Currently, mobile devices are used more and more widely in people's daily lives. However, some special groups of people (such as those with color blindness or color deficiency) may have recognition difficulties when using applications loaded on mobile devices.

[0005] In related technologies, barrier-free design for special groups usually includes the following forms: some specific applications provide barrier-free color matching modes for special groups, and exclusive color schemes can be used in the application; some applications use graphics to identify different colors; and some applications have built-in picture-to-speech function modules to provide color information to users in the form of voice.

[0006] Summary of the Invention

[0007] Embodiments of the present disclosure provide a method and apparatus for generating a page.

[0008] In a first aspect, an embodiment of the present disclosure provides a method for generating a page, the method comprising: obtaining initial color information and size information of a target element in a viewing window of an initial page; based on the initial color information, adopting a first color transformation strategy to generate simulated color information of the target element, the color indicated by the simulated color information representing the visual effect of the initial color of the target element in the eyes of a characteristic group of people; in response to determining that the simulated color information of the target element meets a preset condition, based on the initial color information of the target element, adopting a second color transformation strategy to generate target color information of the target element, the preset condition representing the friendliness of the simulated color to the characteristic group of people; based on the target color information and size information, redrawing the target element to obtain a target page.

[0009] In some embodiments, the target element is determined through the following steps: using the intersection object interface to asynchronously obtain the intersection status of the element in the initial page and the initial page window; in response to determining that the intersection ratio of the element in the initial page and the initial page window reaches a preset intersection threshold, the element is determined as the target element.

[0010] In some embodiments, the method further includes: asynchronously acquiring the simulated color information of each target element in the initial page using a cross-object interface, and performing the following steps for each target element: comparing the simulated color information of the target element with a preset color interval to determine whether the simulated color information is within the color interval, thereby obtaining a first comparison result; determining the difference between the simulated color information of the target element and the adjacent target element based on the simulated color information of the target element and the adjacent target element, and comparing the difference with a preset color difference threshold to determine whether the difference is less than the color difference threshold to obtain a second comparison result, wherein the adjacent target elements are other target elements in the initial page that are connected to the boundary of the target element; in response to the target element including multiple simulated color information, determining the difference between each simulated color information of the target element, and comparing the difference with the color difference threshold to determine whether the difference is less than the color difference threshold to obtain a third comparison result; in response to determining that the first comparison result, the second comparison result, and the third comparison result of the target element are not all "no", determining that the target element meets the preset conditions.

[0011] In some embodiments, the initial color information and size information of the target element are obtained through the following steps: asynchronously obtaining the text object model of the initial page using a cross-object interface; extracting the cascading style sheet of the target element from the text object model; extracting the initial color information and size information of the target element from the cascading style sheet; the simulated color information of the target element is obtained through the following steps: adjusting the initial color information according to a first color transformation strategy using a cross-object interface to obtain simulated color information; the target color information of the target element is generated through the following steps: adjusting the initial color information according to a second color transformation strategy using a cross-object interface to obtain target color information; and, based on the target color information and size information, redrawing the target element, including: based on the target color information and size information of the target element, using the text object model, updating the color style of the target element to obtain the redrawn target element.

[0012] In some embodiments, the target color information of the target element is generated through the following steps: based on the initial color information of the target element, the initial values ​​of each color component R (red), G (green), and B (blue) are determined; the target value of the color component R is updated to the initial value of the color component G, the target value of the color component G is updated to the initial value of the color component B, and the target value of the color component B is updated to the initial value of the color component R to obtain the target color information of the target element.

[0013] In a second aspect, an embodiment of the present disclosure provides a device for generating a page, the device comprising: an information acquisition unit, configured to acquire initial color information and size information of a target element in a viewing window of an initial page; a color simulation unit, configured to generate simulated color information of the target element based on the initial color information and adopt a first color transformation strategy, wherein the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of a characteristic group of people; a color optimization unit, configured to generate target color information of the target element based on the initial color information of the target element and adopt a second color transformation strategy in response to determining that the simulated color information of the target element meets a preset condition, wherein the preset condition represents the friendliness of the simulated color to the characteristic group of people; a page update unit, configured to redraw the target element based on the target color information and size information to obtain a target page.

[0014] In some embodiments, the device also includes a target element determination unit, which is configured to: use a cross-object interface to asynchronously obtain the intersection status of the element in the initial page and the window of the initial page; in response to determining that the intersection ratio of the element in the initial page and the initial page window reaches a preset intersection threshold, determine the element as the target element.

[0015] In some embodiments, the device also includes a color contrast unit, which is configured to: asynchronously obtain the simulated color information of each target element in the initial page using a cross-object interface, and perform the following steps for each target element: compare the simulated color information of the target element with a preset color interval to determine whether the simulated color information is in the color interval, and obtain a first comparison result; based on the simulated color information of the target element and the simulated color information of the adjacent target elements, determine the difference between the simulated color information of the area where the target element and the adjacent target element are connected, and compare the difference with a preset color difference threshold to determine whether the difference is less than the color difference threshold to obtain a second comparison result, wherein the adjacent target elements are other target elements in the initial page that are connected to the boundary of the target element; in response to the target element including multiple simulated color information, determine the difference between the simulated color information of each target element, and compare the difference with the color difference threshold to determine whether the difference is less than the color difference threshold to obtain a third comparison result; in response to determining that the first comparison result, the second comparison result and the third comparison result of the target element are not all "no", determine that the target element meets the preset conditions.

[0016] In some embodiments, the information acquisition unit is further configured to: asynchronously acquire the text object model of the initial page using a cross-object interface; extract the cascading style sheet of the target element from the text object model; extract the initial color information and size information of the target element from the cascading style sheet; the color simulation unit is further configured to: adjust the initial color information according to a first color transformation strategy using a cross-object interface to obtain simulated color information; the color optimization unit is further configured to: adjust the initial color information according to a second color transformation strategy using a cross-object interface to obtain target color information; and the page update unit is further configured to: based on the target color information and size information of the target element, use the text object model to update the color style of the target element to obtain a redrawn target element.

[0017] In some embodiments, the color optimization unit further includes: an initial color component acquisition module, configured to determine the initial values ​​of each color component R (red), G (green), and B (blue) based on the initial color information of the target element; a color component optimization module, configured to update the target value of the color component R to the initial value of the color component G, update the target value of the color component G to the initial value of the color component B, and update the target value of the color component B to the initial value of the color component R, so as to obtain the target color information of the target element.

[0018] The embodiments of the present disclosure provide a method and apparatus for generating a page, which obtains the initial color information and size information of the target element within the window of the initial page, and generates simulated color information based on the initial color information. By comparing the simulated color information with preset conditions, the friendliness of the initial color of the target element to a specific group of people (color blind or color weak patients) is determined. If the simulated color information meets the preset conditions, the target color information is generated based on the initial color information of the target element, and the target element is redrawn based on the target color information and size information to obtain an optimized target page. The color of the target element in the page presented by the browser application can be automatically redrawn. On the one hand, it can reduce the difficulty of the specific group of people in identifying the elements in the page; on the other hand, it can reduce the color usage restrictions of designers during the application development stage. BRIEF DESCRIPTION OF THE DRAWINGS

[0019] Other features, objects and advantages of the present disclosure will become more apparent from a reading of the detailed description of non-limiting embodiments made with reference to the following drawings:

[0020] FIG1 is a diagram of an exemplary system architecture in which some embodiments of the present disclosure may be applied;

[0021] FIG2 is a flow chart of an embodiment of a method for generating a page according to the present disclosure;

[0022] FIG3 is a schematic diagram of a scenario of the process of the method for generating a page shown in FIG2 ;

[0023] FIG4 is a flow chart of another embodiment of a method for generating a page according to the present disclosure;

[0024] FIG5 is a schematic structural diagram of an embodiment of an apparatus for generating a page according to the present disclosure;

[0025] FIG6 is a schematic structural diagram of an electronic device suitable for implementing the embodiments of the present disclosure. DETAILED DESCRIPTION

[0026] The present disclosure will be further described in detail below with reference to the accompanying drawings and examples. It should be understood that the specific embodiments described herein are intended only to illustrate the relevant invention and are not intended to limit the invention. It should also be noted that, for ease of description, only portions relevant to the relevant invention are shown in the accompanying drawings.

[0027] It should be noted that, in the absence of conflict, the embodiments and features of the embodiments in the present disclosure may be combined with each other. The present disclosure will be described in detail below with reference to the accompanying drawings and in combination with the embodiments.

[0028] FIG. 1 shows an exemplary system architecture 100 to which a method for generating a page or an apparatus for generating a page according to an embodiment of the present disclosure can be applied.

[0029] As shown in Figure 1, system architecture 100 may include terminal devices 101, 102, and 103, a network 104, and a server 105. Network 104 is a medium for providing communication links between terminal devices 101, 102, and 103 and server 105. Network 104 may include various connection types, such as wired or wireless communication links or fiber optic cables.

[0030] Terminal devices 101, 102, and 103 are loaded with various browser applications, such as shopping applications, website client applications, and stock applications. With the help of these browser applications, users can use terminal devices 101, 102, and 103 to interact with server 105 via network 104 to receive or send messages, etc. For example, a user may enter a desired website address in the browser application, and the terminal device will send an access request to server 105, which will then receive an HTML (Hypertext Markup Language) document from the server. The browser application loaded on the terminal device then parses and renders the HTML document, presenting it as a web page on the terminal device's display screen. Before presenting the web page to the user, the terminal device may first obtain the initial color and size information of each target element on the initial page of the web page, then optimize and redraw the colors of the target elements that meet preset conditions, and present the resulting target page to the user.

[0031] Terminal devices 101, 102, and 103 can be either hardware or software. When terminal devices 101, 102, and 103 are hardware, they can be electronic devices with communication capabilities, including but not limited to smartphones, tablet computers, e-book readers, and laptop computers. When terminal devices 101, 102, and 103 are software, they can be installed in the electronic devices listed above. They can be implemented as multiple software programs or software modules, for example, to provide distributed services, or as a single software program or software module. This is not specifically limited here.

[0032] The server 105 can be a server that provides various services, such as a backend network server that receives web page access requests sent by terminal devices 101, 102, and 103 and returns the HTML document indicated by the web page access request to the terminal device. The server can be hardware or software. When the server is hardware, it can be implemented as a distributed server cluster consisting of multiple servers, or it can be implemented as a single server. When the server is software, it can be implemented as multiple software or software modules for providing distributed services, or it can be implemented as a single software or software module. No specific limitations are given here.

[0033] It should be noted that the method for generating a page provided in the embodiment of the present disclosure can be executed by the terminal devices 101 , 102 , and 103 . Accordingly, the apparatus for generating a page can be provided in the terminal devices 101 , 102 , and 103 .

[0034] 2, a process 200 of an embodiment of a method for generating a page according to the present disclosure is shown. The method for generating a page includes the following steps:

[0035] Step 201: Acquire initial color information and size information of a target element in a window of an initial page.

[0036] In this embodiment, the method for generating a page runs on an electronic device (e.g., the terminal device described in FIG1 ) on which various browser applications are loaded. The window size of each browser application is generally greater than or equal to the screen size of the electronic device. The elements located in the window are the page content presented to the user by the browser. The target element in this embodiment is the text or image in the window. Generally, the elements in a page are composed of multiple box models of different sizes. Therefore, the initial color information of the target element in this embodiment includes the initial color information of each box constituting the target element. Accordingly, the size information refers to the size information of each box constituting the target element, such as the length and width of each box.

[0037] As an example, the target element can be text and the block where the text is located. The initial color information of the target element includes the initial color of the text and the initial color of the block where the text is located (that is, the background color of the text). For example, the color can be represented in the form of R (red), G (green), and B (blue) components. The size information of the target element includes the size information of the text and the size information of the block where the text is located. For example, the length and width of the text and the block can be represented in the form of the number of pixels.

[0038] In a specific example, the electronic device on which the method for generating a page runs can directly obtain the Cascading Style Sheets (CSS) of each target element in the window from the HTML document of the current page, and then extract the initial color information (such as the numerical value of the RGB color component) and the size information of each box constituting each target element from the CSS of each target element to obtain the initial color information and size information of each target element.

[0039] In some optional implementations of this embodiment, the method for generating a page may further include: asynchronously obtaining the intersection status of an element in the initial page and the viewport of the initial page using an intersection observe API; in response to determining that the intersection ratio of an element in the initial page and the viewport of the initial page reaches a preset intersection threshold, determining the element as a target element.

[0040] In this implementation, the electronic device can continuously obtain the intersection status of each element and the window in the initial page through the cross-object model, and play the role of monitoring the initial page, so that the target element can be determined in time and the response sensitivity can be improved.

[0041] Step 202 : Based on the initial color information, a first color transformation strategy is adopted to generate simulated color information of the target element, where the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of a specific group of people.

[0042] In this embodiment, the first color transformation strategy is used to represent the correspondence between the initial color and the simulated color. For example, it can be a color blindness simulation matrix. Generally, color blindness simulation matrices can include three types of simulation matrices: protanopia, deuteranopia, and tritanopia. Color blindness simulation matrices are the result of medical research and are common knowledge in the field. This application will not elaborate on them in detail.

[0043] The electronic device can construct an initial color vector for each box in the target element based on the initial RGB component values ​​of each box. The initial color information of the target element is then the set of initial color vectors for each box. The electronic device then multiplies each initial color vector by the three types of color blindness simulation matrices to obtain three simulated color vectors corresponding to each box. Each simulated color vector represents the visual effect of the initial color of that box in the eyes of a person with the corresponding type of color blindness. The simulated color information of the target element is the set of simulated color vectors for each box.

[0044] In step 203 , in response to determining that the simulated color information of the target element meets a preset condition, a second color transformation strategy is adopted based on the initial color information of the target element to generate target color information of the target element, where the preset condition represents the friendliness of the simulated color to a specific group of people.

[0045] In this embodiment, a simulated color that meets a preset condition indicates that the initial color corresponding to the simulated color is less friendly to the target group. The second color transformation strategy is used to characterize the correspondence between the initial color and the target color, and the target color represents a color that is easily recognized by the target group. For example, the second color transformation strategy may be an adaptive mapping method or a geometric transformation mapping method.

[0046] In this embodiment, the friendliness of the target element to a specific group of people can be represented by the degree of distinction between the simulated colors of the boxes within the target element. For example, the degree of distinction can be represented by color difference, and a color difference threshold can be preset based on the results of statistical analysis. The preset condition is that the color difference between the simulated colors of two adjacent boxes is less than the color difference threshold.

[0047] As an example, the electronic device extracts the simulated color vectors of each box from the simulated color information of the target element obtained in step 202, then determines the color difference between two adjacent boxes. Each color difference is then compared to a color difference threshold. If the color difference is less than the color difference threshold, it indicates that the initial colors of the two adjacent boxes corresponding to that color difference are less user-friendly for the specific population. For example, based on medical research, the color difference threshold can be set to 60. A color difference less than 60 indicates that the specific population cannot distinguish between the two colors or has difficulty distinguishing between them.

[0048] Furthermore, the electronic device can determine the color difference between two adjacent boxes through the following steps: first, convert the color information represented by the RGB color components into Lab (Lab color space) color components, and then calculate the distance between the simulated color vectors of the two adjacent boxes in the Lab color space. This distance is the color difference of the simulated colors of the two adjacent boxes.

[0049] In a specific example, a target element includes three boxes, which are 1, 2, and 3 in descending order of size. The initial color information of the target element is (a, b, c), where a, b, and c are the RGB initial color vectors of boxes 1, 2, and 3, respectively. First, the electronic device multiplies a, b, and c by three types of color blindness simulation matrices respectively. The obtained simulated color information of the target element includes the following three types of simulated color information: simulated color information of red blindness (a), red blindness (b), and red blindness (c). R 、b R 、c R ), simulated color information for green blindness (a G 、b G 、c G ) and tritanopia simulated color information (a B 、b B 、c B ). The electronic device then converts the above three types of RGB color vectors into Lab color vectors, and calculates the distances between the three types of simulated color vectors of boxes 1 and 2, 2 and 3 in the Lab color space, and the color difference between the two adjacent boxes under the three types can be obtained: R 12 and R 23 , G 12 and G 23 , B 12 and B 23 Afterwards, the electronic device compares the above color difference values ​​with the preset color difference threshold. As long as one of the color difference values ​​is smaller than the color difference threshold, it means that the initial color of the target element is less friendly to some or all characteristic groups. The electronic device can use adaptive mapping or geometric transformation mapping to optimize (a, b, c). The obtained vector set (A, B, C) is the target color information of the target element.

[0050] It is understandable that if the simulated color information of the target element does not meet the preset conditions, it means that the initial color of the target element is more friendly to the characteristic group of people, and no color optimization is required.

[0051] Step 204 : redraw the target element based on the target color information and size information to obtain the target page.

[0052] In this embodiment, based on the size information of the target element obtained in step 201 and the target color information of the target element obtained in step 203, the electronic device can use JS (JavaScript) to modify the CSS of the target element in the HTML document, update the color information of the target element to the target color information, and keep the size information of the target element unchanged. In this way, the color of the target element in the initial page can be optimized to a color that is more friendly to the characteristic group of people, and will not trigger page reflow.

[0053] As an example, the electronic device may also obtain the text object model of the initial page, and then, based on the target color information, batch set the color attributes of each box of the target element through the text object model to complete the redrawing of the target element.

[0054] Continuing with Figure 3, Figure 3 is another schematic diagram of the process of the method shown in Figure 2. In Figure 3, the execution entity 301 is a smartphone. As shown in Figure 3(a), the current page includes four target elements: 302, 303, 303, and 304, representing target element 1, target element 2, target element 3, and target element 4, respectively. 302, 303, and 303 are text elements, and 304 is an image element. Each text element consists of two boxes: text and a block. Next, referring to Figure 3(b), the execution entity extracts the initial color and size information of the four target elements from the initial page (taking 302 as an example, the initial color information of text 1 includes the initial color information of the text and the initial color information of the text block). It then uses the first color transformation strategy to generate simulated color information for each target element. The execution entity then compares the simulated color information of each target element with the preset conditions, determining that the initial colors of target elements 1 and 3 are less friendly to the target group. The execution entity then uses the second color transformation strategy to generate target color information for target elements 1 and 3, and redraws them based on the size information and target color information. The resulting target page includes target elements 2 and 4, as well as the redrawn target elements 1 and 3. Finally, referring to Figure 3(c), the optimized colors of the elements on the target page are more user-friendly and pose no recognition barriers to these users.

[0055] The embodiments of the present disclosure provide a method and apparatus for generating a page, which obtains the initial color information and size information of the target element within the window of the initial page, and generates simulated color information based on the initial color information. By comparing the simulated color information with preset conditions, the friendliness of the initial color of the target element to a specific group of people (color blind or color weak patients) is determined. If the simulated color information meets the preset conditions, the target color information is generated based on the initial color information of the target element, and the target element is redrawn based on the target color information and size information to obtain an optimized target page. The color of the target element in the page presented by the browser application can be automatically redrawn. On the one hand, it can reduce the difficulty of the specific group of people in identifying the elements in the page; on the other hand, it can reduce the color usage restrictions of designers during the application development stage.

[0056] In some optional implementations of this embodiment, the method for generating a page also includes: asynchronously obtaining simulated color information of each target element in the initial page using a cross-object interface, and performing the following steps for each target element: comparing the simulated color information of the target element with a preset color interval to determine whether the simulated color information is within the color interval, thereby obtaining a first comparison result; determining the difference between the simulated color information of the target element and the adjacent target element based on the simulated color information of the target element and the adjacent target element, and comparing the difference with a preset color difference threshold to determine whether the difference is less than the color difference threshold to obtain a second comparison result, wherein the adjacent target elements are other target elements in the initial page that are adjacent to the boundary of the target element; in response to the target element including multiple simulated color information, determining the difference between the simulated color information of each target element, and comparing the difference with the color difference threshold to determine whether the difference is less than the color difference threshold to obtain a third comparison result; in response to determining that the first comparison result, the second comparison result, and the third comparison result of the target element are not all "no", determining that the target element meets the preset conditions.

[0057] In this implementation, the first comparison result characterizes whether the initial color of the target element is a color that is difficult for the characteristic population to identify, such as the red and green lines that characterize stock trends in stock applications. As an example, a color range can be pre-set based on the difficulty of color recognition for color blind patients. For example, the RGB value of red is (255, 0, 0), and the colors between (240, 0, 0) and (255, 0, 0) are all highly similar to red. Therefore, (240, 0, 0) to (255, 0, 0) can be determined as part of the color range, and then the rest of the color range is determined based on green and blue, so the complete color range can be obtained. The colors in this color range are less friendly to the characteristic population.

[0058] The second comparison result indicates whether the color distinction between two adjacent target elements is easy for the target audience to identify. For example, if the boundaries of two adjacent image elements are red and green, it is difficult for the target audience to identify the two images.

[0059] The third comparison result indicates whether the distinction between multiple colors of the same target element is easy for a specific group of people to identify. For example, in some ticket purchasing applications, the same seat image uses different colors to indicate whether the seat is selected.

[0060] In this implementation, the electronic device can use a cross-object interface to obtain the simulated color information of each target element generated in step 202, and determine whether the target element meets the preset conditions through the above steps. In this way, the target elements in the initial page that are not friendly to the characteristic population can be more accurately determined.

[0061] In some optional implementations of this embodiment, the following steps can also be used to generate target color information: based on the initial color information of the target element, determine the initial values ​​of each color component R (red), G (green), and B (blue); update the target value of the color component R to the initial value of the color component G, update the target value of the color component G to the initial value of the color component B, and update the target value of the color component B to the initial value of the color component R to obtain the target color information of the target element.

[0062] Among the various methods that can achieve color transformation, the adaptive mapping method only adjusts the B component of the RGB component, and the final adjustment effect will lose many image color details; the geometric transformation mapping method compresses the G component of the RGB component, which can retain more color details but is more time-consuming to process.

[0063] The second color transformation strategy adopted in this implementation can complete the transformation process from the initial color information of the target element to the target color information by exchanging the values ​​of each color component, which can simplify the color optimization process and improve the efficiency of color optimization.

[0064] As an example, the initial color information of a target element includes two initial color vectors: (255, 100, 150) and (80, 255, 200). Using this implementation method, the target color information of the target element can be directly obtained as: (100, 150, 255) and (255, 200, 80).

[0065] Further referring to FIG4 , it shows a process 400 of another embodiment of a method for generating a page. The process 400 of the method for generating a page includes the following steps:

[0066] Step 401: A cross-object interface is used to asynchronously obtain the text object model of the initial page; and a cascading style sheet of a target element is extracted from the text object model.

[0067] In this embodiment, the electronic device (e.g., the terminal device shown in FIG. 1 ) running the page generation method can obtain the text object model of the initial page through a cross-object interface. Elements in the initial page correspond one-to-one to nodes in the text object model, and each node includes various attribute information of the element. After the electronic device obtains the text object model of the initial page using the cross-object model, steps 402 to 404 can be executed in the runtime memory of the browser that generated the initial page.

[0068] Step 402: extract the initial color information and size information of the target element from the cascading style sheet.

[0069] Step 403: Using a cross-object interface, adjust the initial color information according to a first color transformation strategy to obtain simulated color information.

[0070] Step 404 : In response to determining that the simulated color information of the target element meets a preset condition, the initial color information is adjusted according to a second color transformation strategy using a cross-object interface to obtain target color information.

[0071] It should be noted that step 403 and step 404 correspond to the aforementioned step 203 and step 204. The difference is that the electronic device in this embodiment uses a cross-object interface to asynchronously execute the color simulation transformation and optimization steps, which will not be repeated here.

[0072] Step 405 : Based on the target color information and size information of the target element, the text object model is used to update the color style of the target element to obtain a redrawn target element.

[0073] In this embodiment, the electronic device can batch set the color styles of the target elements using the text object model obtained in step 401, so as to redraw the target elements according to the target color information.

[0074] As can be seen from Figure 4, the process 400 of the method for generating a page in this embodiment highlights the steps of asynchronously obtaining the initial color information and size information of the target element using a cross-object interface, generating simulated color information and target color information, and redrawing the target element using a text object model. In this way, the color optimization step of the target element can be completed in the browser's running memory, avoiding occupying the page's running memory, improving the page generation speed, and avoiding page freezes caused by color optimization.

[0075] It should be noted that the above-mentioned comparison method for preset conditions and the method for generating target colors can also be applied to the embodiment shown in FIG. 4 .

[0076] With further reference to FIG5 , as an implementation of the methods shown in the above figures, the present disclosure provides an embodiment of a device for generating a page. The device embodiment corresponds to the method embodiment shown in FIG2 , and the device can be specifically applied to various electronic devices.

[0077] As shown in Figure 5, the device 500 for generating a page in this embodiment includes: an information acquisition unit 501, configured to acquire the initial color information and size information of the target element in the window of the initial page; a color simulation unit 502, configured to generate simulated color information of the target element based on the initial color information and adopt a first color transformation strategy, wherein the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of a characteristic group of people; a color optimization unit 503, configured to generate target color information of the target element based on the initial color information of the target element and adopt a second color transformation strategy in response to determining that the simulated color information of the target element meets a preset condition, wherein the preset condition represents the friendliness of the simulated color to the characteristic group of people; a page update unit 504, configured to redraw the target element based on the target color information and size information to obtain a target page.

[0078] In some embodiments, the device 500 also includes a target element determination unit, which is configured to: use a cross-object interface to asynchronously obtain the intersection status of the element in the initial page and the window of the initial page; in response to determining that the intersection ratio of the element in the initial page and the window of the initial page reaches a preset intersection threshold, determine the element as the target element.

[0079] In some embodiments, the device 500 also includes a color contrast unit, which is configured to: asynchronously obtain the simulated color information of each target element in the initial page using a cross-object interface, and perform the following steps for each target element: compare the simulated color information of the target element with a preset color interval to determine whether the simulated color information is in the color interval, and obtain a first comparison result; based on the simulated color information of the target element and the simulated color information of the adjacent target elements, determine the difference between the simulated color information of the area where the target element and the adjacent target element are connected, and compare the difference with a preset color difference threshold to determine whether the difference is less than the color difference threshold to obtain a second comparison result, wherein the adjacent target elements are other target elements in the initial page that are connected to the boundary of the target element; in response to the target element including multiple simulated color information, determine the difference between the simulated color information of each target element, and compare the difference with the color difference threshold to determine whether the difference is less than the color difference threshold to obtain a third comparison result; in response to determining that the first comparison result, the second comparison result and the third comparison result of the target element are not all "no", determine that the target element meets the preset conditions.

[0080] In some embodiments, the information acquisition unit 501 is further configured to: asynchronously acquire the text object model of the initial page using a cross-object interface; extract the cascading style sheet of the target element from the text object model; extract the initial color information and size information of the target element from the cascading style sheet; the color simulation unit is further configured to: adjust the initial color information according to the first color transformation strategy using the cross-object interface to obtain simulated color information; the color optimization unit is further configured to: adjust the initial color information according to the second color transformation strategy using the cross-object interface to obtain target color information; and the page update unit is further configured to: based on the target color information and size information of the target element, use the text object model to update the color style of the target element to obtain a redrawn target element.

[0081] In some embodiments, the color optimization unit 503 further includes: an initial color component acquisition module, configured to determine the initial values ​​of each color component R (red), G (green), and B (blue) based on the initial color information of the target element; a color component optimization module, configured to update the target value of the color component R to the initial value of the color component G, update the target value of the color component G to the initial value of the color component B, and update the target value of the color component B to the initial value of the color component R, so as to obtain the target color information of the target element.

[0082] Reference is now made to FIG6 , which illustrates a schematic diagram of the structure of an electronic device (e.g., the server or terminal device in FIG1 ) 600 suitable for implementing embodiments of the present disclosure. The terminal device in the embodiments of the present disclosure may include, but is not limited to, mobile terminals such as mobile phones, laptop computers, digital broadcast receivers, PDAs (personal digital assistants), tablet computers, and the like, as well as fixed terminals such as digital TVs and desktop computers. The terminal device illustrated in FIG6 is merely an example and should not limit the functionality or scope of use of the embodiments of the present disclosure.

[0083] As shown in Figure 6, electronic device 600 may include a processing device (e.g., a central processing unit, a graphics processing unit, etc.) 601, which can perform various appropriate actions and processes according to a program stored in a read-only memory (ROM) 602 or a program loaded from a storage device 608 into a random access memory (RAM) 603. Various programs and data required for the operation of electronic device 600 are also stored in RAM 603. Processing device 601, ROM 602, and RAM 603 are connected to each other via a bus 604. An input / output (I / O) interface 605 is also connected to bus 604.

[0084] Typically, the following devices can be connected to the I / O interface 605: an input device 606 including, for example, a touch screen, a touchpad, a keyboard, a mouse, a camera, a microphone, an accelerometer, a gyroscope, etc.; an output device 607 including, for example, a liquid crystal display (LCD), a speaker, a vibrator, etc.; a storage device 608 including, for example, a magnetic tape, a hard disk, etc.; and a communication device 609. The communication device 609 can allow the electronic device 600 to communicate with other devices wirelessly or by wire to exchange data. Although FIG. 6 shows an electronic device 600 with various devices, it should be understood that it is not required to implement or have all of the devices shown. More or fewer devices may be implemented or provided alternatively. Each box shown in FIG. 6 may represent one device, or may represent multiple devices as needed.

[0085] In particular, according to an embodiment of the present disclosure, the process described above with reference to the flowchart can be implemented as a computer software program. For example, an embodiment of the present disclosure includes a computer program product, which includes a computer program carried on a computer-readable medium, and the computer program includes a program code for executing the method shown in the flowchart. In such an embodiment, the computer program can be downloaded and installed from the network through the communication device 609, or installed from the storage device 608, or installed from the ROM 602. When the computer program is executed by the processing device 601, the above-mentioned functions defined in the method of the embodiment of the present disclosure are executed. It should be noted that the computer-readable medium described in the embodiment of the present disclosure can be a computer-readable signal medium or a computer-readable storage medium or any combination of the above two. The computer-readable storage medium can be, for example, but not limited to, an electrical, magnetic, optical, electromagnetic, infrared, or semiconductor system, device or device, or any combination of the above. More specific examples of computer-readable storage media may include, but are not limited to, an electrical connection having one or more conductors, a portable computer disk, a hard disk, random access memory (RAM), read-only memory (ROM), erasable programmable read-only memory (EPROM or flash memory), optical fiber, a portable compact disk read-only memory (CD-ROM), an optical storage device, a magnetic storage device, or any suitable combination thereof. In embodiments of the present disclosure, a computer-readable storage medium may be any tangible medium that contains or stores a program that can be used by or in conjunction with an instruction execution system, apparatus, or device. In embodiments of the present disclosure, a computer-readable signal medium may include a data signal propagated in baseband or as part of a carrier wave, which carries computer-readable program code. Such a propagated data signal may take a variety of forms, including, but not limited to, an electromagnetic signal, an optical signal, or any suitable combination thereof. A computer-readable signal medium may also be any computer-readable medium other than a computer-readable storage medium that can transmit, propagate, or transfer a program for use by or in conjunction with an instruction execution system, apparatus, or device. Program code embodied on a computer readable medium may be transmitted using any appropriate medium, including but not limited to wire, optical cable, RF (radio frequency), etc., or any suitable combination thereof.

[0086] The computer-readable medium may be included in the electronic device, or may exist independently without being incorporated into the electronic device. The computer-readable medium carries one or more programs. When executed by the electronic device, the electronic device: obtains the initial color information and size information of the target element in the window of the initial page; based on the initial color information, adopts a first color transformation strategy to generate simulated color information of the target element, wherein the color indicated by the simulated color information represents the visual effect of the initial color of the target element in the eyes of a specific group of people; in response to determining that the simulated color information of the target element meets a preset condition, adopts a second color transformation strategy based on the initial color information of the target element to generate target color information of the target element, wherein the preset condition represents the friendliness of the simulated color to the specific group of people; and redraws the target element based on the target color information and size information to obtain a target page.

[0087] Computer program code for performing the operations of embodiments of the present disclosure may be written in one or more programming languages, or a combination thereof, including object-oriented programming languages ​​such as Java, Smalltalk, C++, and conventional procedural programming languages ​​such as "C" or similar programming languages. The program code may be executed entirely on the user's computer, partially on the user's computer, as a stand-alone software package, partially on the user's computer and partially on a remote computer, or entirely on a remote computer or server. In cases involving a remote computer, the remote computer may be connected to the user's computer through any type of network, including a local area network (LAN) or a wide area network (WAN), or may be connected to an external computer (e.g., via the Internet using an Internet service provider).

[0088] The flowcharts and block diagrams in the accompanying drawings illustrate the possible implementation architecture, functions and operations of the systems, methods and computer program products according to various embodiments of the present disclosure. In this regard, each box in the flowchart or block diagram can represent a module, program segment, or a part of code, and the module, program segment, or a part of code contains one or more executable instructions for realizing the specified logical function. It should also be noted that in some alternative implementations, the functions marked in the box can also occur in a different order than that marked in the accompanying drawings. For example, two boxes represented in succession can actually be executed substantially in parallel, and they can sometimes be executed in the opposite order, depending on the functions involved. It should also be noted that each box in the block diagram and / or flowchart, and the combination of the boxes in the block diagram and / or flowchart, can be implemented with a dedicated hardware-based system that performs the specified function or operation, or can be implemented with a combination of dedicated hardware and computer instructions.

[0089] The units involved in the embodiments described in the present disclosure may be implemented by software or hardware. The units described may also be provided in a processor. For example, they may be described as follows: a processor includes an information acquisition unit, a color simulation unit, a color optimization unit, and a page update unit. The names of these units do not, in some cases, constitute limitations on the units themselves. For example, the information acquisition unit may also be described as a "unit for acquiring initial color information and size information of a target element in a window of an initial page."

[0090] The above description is merely a preferred embodiment of the present disclosure and an explanation of the technical principles employed. Those skilled in the art should understand that the scope of the invention involved in the embodiments of the present disclosure is not limited to the technical solutions formed by a specific combination of the above-mentioned technical features, but should also encompass other technical solutions formed by any combination of the above-mentioned technical features or their equivalents without departing from the above-mentioned inventive concept. For example, a technical solution formed by mutually replacing the above-mentioned features with (but not limited to) technical features with similar functions disclosed in the embodiments of the present disclosure.

Images