Web interface rendering method and device based on dynamic glare suppression model

Abstract

The invention provides a Web interface rendering method and device based on a dynamic glare suppression model, computing equipment and a computer readable storage medium, and the method comprises the steps: sensing an environment through an environment light sensor, and quantifying a multi-dimensional environment and interface state into a standardized glare index in combination with a dynamic glare suppression model. And then, through the rendering strategy matrix, translating the glare index into a set of specific CSS variable combination, and dynamically carrying out differentiated software rendering adjustment on text, UI and media contents. According to the method and the system, the difference processing from single brightness adjustment to multi-dimensional visual parameter cooperative control, from undifferentiated adjustment to content perception and from standardized experience to highly personalized comfortable experience are realized, and finally, a healthier and more intelligent visual solution is provided for a user in different illumination environments.

Description

Technical Field

[0001] This application relates to the field of computer technology, and in particular to a web interface rendering method, apparatus, computing device, and computer-readable storage medium based on a dynamic glare suppression model. Background Technology

[0002] In current technologies, with the widespread adoption of smart terminals, users routinely use applications in varying lighting environments such as strong outdoor light and low nighttime illumination. This has led to increasingly prominent issues like screen glare, reduced content visibility, and eye strain, becoming a key bottleneck restricting user experience. To address this problem, the industry commonly employs a "dark / light" theme switching solution. However, this solution has significant limitations: it relies on manual or time-based switching, failing to respond in real-time to dynamic changes in ambient light. For example, screen whitening caused by direct sunlight (visual glare) results in a poor experience; furthermore, the binary static theme lacks the ability to adapt precisely to complex lighting conditions such as dusk and mixed light sources; and it doesn't consider individual differences in user visual sensitivity, making it difficult to effectively alleviate eye strain. Therefore, a new generation of UI rendering solutions capable of intelligently suppressing screen glare is urgently needed. Summary of the Invention

[0003] In view of this, embodiments of this application provide a web interface rendering method, apparatus, computing device, and computer-readable storage medium based on a dynamic glare suppression model to address the technical deficiencies existing in the prior art.

[0004] According to a first aspect of the embodiments of this application, a web interface rendering method based on a dynamic glare suppression model is provided. This method is executed in a web application and includes:

[0005] Ambient light data is collected via a web interface to obtain ambient illuminance values;

[0006] The dynamic glare index is calculated based on the ambient illuminance value, screen brightness, and current user preferences.

[0007] The rendering strategy decision is obtained by querying the rendering strategy matrix based on the dynamic glare index.

[0008] The rendering strategy decision is dynamically injected into the style root node of the current page to complete the rendering of the web interface.

[0009] According to a second aspect of the embodiments of this application, a web interface rendering apparatus based on a dynamic glare suppression model is provided, comprising:

[0010] The acquisition unit is used to collect ambient light data and obtain ambient illuminance values ​​through a web interface;

[0011] The calculation unit is used to calculate the dynamic glare index based on the ambient illuminance value, screen brightness, and current user preferences.

[0012] The query unit is used to query the rendering strategy matrix based on the dynamic glare index to obtain the rendering strategy decision;

[0013] The rendering unit is used to dynamically inject the rendering strategy decision into the style root node of the current page to complete the rendering of the Web interface.

[0014] According to a third aspect of the embodiments of this application, a computing device is provided, including a memory, a processor, and computer instructions stored in the memory and executable on the processor, wherein the processor executes the instructions to implement the steps of the web interface rendering method based on the above-described dynamic glare suppression model.

[0015] According to a fourth aspect of the embodiments of this application, a computer-readable storage medium is provided that stores computer instructions, which, when executed by a processor, implement the steps of the web interface rendering method based on a dynamic glare suppression model.

[0016] In the embodiments of this application, an ambient light sensor is used to perceive the environment, and a dynamic glare suppression model is combined to quantify the multi-dimensional environment and interface state into a standardized glare index. Subsequently, a rendering strategy matrix is ​​used to translate the glare index into a specific combination of CSS variables, dynamically adjusting the software rendering of text, UI, and media content in a differentiated manner. Furthermore, a human-computer interaction closed loop is introduced, collecting user feedback for online learning and continuously optimizing model parameters. This successfully elevates screen adaptation from the macro-control of the operating system's hardware to the precise content optimization level of the application software. It achieves a leap from single brightness adjustment to multi-dimensional visual parameter collaborative control, from indiscriminate adjustment to differentiated processing of content perception, and from standardized experience to highly personalized and comfortable experience, ultimately providing users with a healthier and smarter visual solution in different lighting environments. Attached Figure Description

[0017] Figure 1 This is a structural block diagram of the computing device provided in the embodiments of this application;

[0018] Figure 2 This is a flowchart illustrating a web interface rendering method based on a dynamic glare suppression model provided in an embodiment of this application.

[0019] Figure 3 This is a schematic diagram of the structure of a web interface rendering device based on a dynamic glare suppression model provided in an embodiment of this application. Detailed Implementation

[0020] Many specific details are set forth in the following description to provide a full understanding of this application. However, this application can be implemented in many other ways different from those described herein, and those skilled in the art can make similar extensions without departing from the spirit of this application; therefore, this application is not limited to the specific embodiments disclosed below.

[0021] The terminology used in one or more embodiments of this application is for the purpose of describing particular embodiments only and is not intended to limit the scope of one or more embodiments of this application. The singular forms “a,” “the,” and “the” used in one or more embodiments of this application and in the appended claims are also intended to include the plural forms unless the context clearly indicates otherwise. It should also be understood that the term “and / or” used in one or more embodiments of this application refers to and includes any or all possible combinations of one or more associated listed items.

[0022] It should be understood that although the terms first, second, etc., may be used to describe various information in one or more embodiments of this application, such information should not be limited to these terms. These terms are only used to distinguish information of the same type from one another. For example, first may also be referred to as second without departing from the scope of one or more embodiments of this application, and similarly, second may also be referred to as first. Depending on the context, the word "if" as used herein may be interpreted as "in response to a determination".

[0023] This application provides a web interface rendering method and apparatus, computing device and computer-readable storage medium based on a dynamic glare suppression model, which will be described in detail in the following embodiments.

[0024] Figure 1 A structural block diagram of a computing device 100 according to an embodiment of this application is shown. The components of the computing device 100 include, but are not limited to, a memory 110 and a processor 120. The processor 120 is connected to the memory 110 via a bus 130, and a database 150 is used to store data.

[0025] The computing device 100 also includes an access device 140, which enables the computing device 100 to communicate via one or more networks 160. Examples of these networks include a Public Switched Telephone Network (PSTN), a Local Area Network (LAN), a Wide Area Network (WAN), a Personal Area Network (PAN), or a combination of communication networks such as the Internet. The access device 140 may include one or more of any type of wired or wireless network interface (e.g., a Network Interface Card (NIC)), such as an IEEE 802.11 Wireless Local Area Network (WLAN) interface, a Wi-MAX interface, an Ethernet interface, a Universal Serial Bus (USB) interface, a cellular network interface, a Bluetooth interface, a Near Field Communication (NFC) interface, and so on.

[0026] In one embodiment of this application, the aforementioned components of the computing device 100 and Figure 1 Other components, not shown, can also be connected to each other, for example, via a bus. It should be understood that... Figure 1 The block diagram of the computing device shown is for illustrative purposes only and is not intended to limit the scope of this application. Those skilled in the art can add or replace other components as needed.

[0027] The computing device 100 can be any type of stationary or mobile computing device, including mobile computers or mobile computing devices (e.g., tablet computers, personal digital assistants, laptop computers, notebook computers, netbooks, etc.), mobile phones (e.g., smartphones), wearable computing devices (e.g., smartwatches, smart glasses, etc.) or other types of mobile devices, or stationary computing devices such as desktop computers or PCs. The computing device 100 can also be a mobile or stationary server.

[0028] In existing technologies, the scenarios in which users use devices such as mobile phones and tablets exhibit highly diverse and dynamic characteristics. Users are no longer limited to indoor environments with stable lighting, but frequently access applications under complex and variable lighting conditions such as strong outdoor light and low nighttime illumination. In these situations, adjusting the physical screen brightness only makes the screen content "visible," without providing any perception of the specific content displayed on the screen, and cannot perform differentiated processing. Moreover, it often fails to address glare issues. For example, in strong light, the screen might be turned up to its brightest setting, but this often exacerbates glare, making the white screen even more dazzling and resulting in a poor user experience.

[0029] Existing software solutions generally adopt a "dark / light" theme switching application display scheme. However, this scheme has significant limitations: it relies on manual or time-based switching and cannot respond to dynamic changes in ambient light in real time. The screen whitening caused by direct sunlight (visual glare) will also lead to a very poor experience; moreover, the binary static theme lacks the ability to adapt finely to various complex lighting conditions and does not take into account the differences in visual sensitivity of individual users.

[0030] Therefore, this application provides a web interface rendering method and apparatus based on a dynamic glare suppression model. Figure 2 The diagram shows a flowchart of a web interface rendering method based on a dynamic glare suppression model provided in this application. The method is executed in a web application and includes steps 202 to 208.

[0031] Step 202: Collect ambient light data and obtain ambient illuminance values.

[0032] The core objective of this step is to give web applications the ability to perceive the lighting conditions of the physical world. It uses a standardized technical link to accurately convert the vague concept of "ambient brightness" in the physical world into a quantifiable and processable digital indicator—ambient illuminance value in Lux.

[0033] Specifically, the ambient light sensor built into the terminal device is responsible for capturing light. The operating system then abstracts the hardware data and exposes it to the web application through the Ambient Light Sensor API, a standard web interface. Finally, the web application, using JavaScript in an event-driven manner, reads the ambient illuminance values ​​in real time through the Ambient Light Sensor API after obtaining user authorization.

[0034] Step 204: Calculate the dynamic glare index based on the ambient illuminance and screen brightness.

[0035] In this embodiment of the application, the dynamic glare index is further calculated in the web application based on the ambient illuminance value dynamically obtained in step 202, the current screen brightness value, and user preferences.

[0036] Web applications can obtain the current screen brightness in the following ways:

[0037] In JavaScript, you can use the `window.screen.brightness` interface to get the screen brightness value. This value is a floating-point number between 0 (dimest) and 1 (brightest), for example:

[0038] let brightness=window.screen.brightness;

[0039] Feasibly, when the JavaScript interface is unavailable, the screen brightness can be obtained based on the current theme: if the current theme is light, a base brightness value is set to the current screen brightness value, such as E_screen_base = 200cd / m². 2 .

[0040] Alternatively, the Canvas API can be used to sample and analyze the page content to calculate the average brightness of the pixels.

[0041] The methods for obtaining screen brightness described above are known to those skilled in the art and will not be repeated here.

[0042] Furthermore, the ambient illuminance value, the current screen brightness value, and the user's preferences are input into the glare suppression model to obtain the current dynamic glare index G_index.

[0043] In one feasible implementation, the glare suppression model is a multidimensional lookup table (LUT) contained within the web application, implemented based on experience and extensive testing. During the lookup, for each combination of ambient illuminance and current screen brightness, a base glare index is searched. After finding the base glare index, it is multiplied by the user's preference to obtain the final dynamic glare index G_index. The multidimensional lookup table has a simple data structure, a computational complexity of O(1), and consumes almost no CPU resources.

[0044] In another feasible implementation, the glare suppression model is a pre-trained small neural network that learns from data to find a non-linear relationship between the input (ambient illuminance value, current screen brightness value, and user preferences) and the output (dynamic glare index). The trained glare suppression model is then converted to a web-friendly format (such as TensorFlow.js) and run in a web application.

[0045] Furthermore, the glare suppression model ultimately outputs a normalized dynamic glare index, G_index, with a value range of 0 to 1. Here, 0 represents no glare risk (e.g., in complete darkness); 1 represents extreme glare risk (e.g., direct sunlight at midday). In other words, the standardized dynamic glare index simplifies a complex, multi-factor physical and physiological perception problem into a single, quantifiable "risk level." For example, when a user moves from indoors (ambient illuminance = 200 Lux) to outdoors (ambient illuminance = 10000 Lux), the glare suppression model instantly calculates that the G_index jumps from 0.2 to 0.9.

[0046] Step 206: Query the rendering strategy matrix based on the dynamic glare index to obtain the rendering strategy decision; the rendering strategy decision includes a set of CSS variables.

[0047] In this step, the dynamic glare index obtained in step 204 is input into the rendering strategy matrix to obtain the rendering strategy decision, which is a set of rendering strategies that include CSS variables.

[0048] The rendering strategy matrix divides the continuous range of the dynamic glare index into several discrete intervals, each interval corresponding to a predefined rendering strategy. A typical structure is as follows (using a JavaScript object as an example):

[0049]

[0050]

[0051] The rendering strategy decision obtained from the rendering strategy matrix includes a set of CSS variable values, which includes, but is not limited to, background primary color, text primary color, target contrast, UI component brightness, and CSS filter strength.

[0052] Those skilled in the art should know that the above examples of rendering strategy matrices are merely illustrative and not exhaustive. Those skilled in the art can freely combine and set CSS variables and their values ​​according to specific display requirements, which will not be elaborated here.

[0053] Step 208: Dynamically inject the rendering strategy decision into the root style node of the current page to complete the page rendering.

[0054] In the embodiments of this application, after obtaining the rendering strategy decision, all style changes in the rendering strategy decision are applied to a global control point, namely the style root node of the current page.

[0055] Specifically, the :root node in a CSS file declares globally updated style variables, for example:

[0056]

[0057]

[0058] Furthermore, in the script code, use `document.documentElement` to retrieve the element object represented by `:root`, such as:

[0059] const rootElement=document.documentElement;

[0060] Furthermore, the script code iterates through the CSS variable values ​​in the rendering strategy decision and dynamically replaces the CSS variable values ​​on the current page:

[0061] for(const property in newStrategy){

[0062] rootElement.style.setProperty(property,newStrategy[property]);

[0063] }

[0064] The rendering engine of a web application will automatically respond to changes in these CSS variables and update the final calculated styles of all elements on the current page that depend on these variables. In this process, global variables that can be updated are declared in the CSS file, and the script code is responsible for finding and accessing these global variables, then dynamically changing their values, thus achieving dynamic style injection.

[0065] Preferably, a user feedback interface is provided on the web page to continuously calibrate and optimize the internal glare suppression model by utilizing users' real subjective feelings.

[0066] Specifically, a non-intrusive UI control is provided on the web interface, such as a simple slider (from "too dark" to "too bright"), or a set of buttons ("too dark", "just right", "too bright"). When the user manually fine-tunes or clicks for feedback, the web application records the user's subjective evaluation.

[0067] When a web application captures user feedback, it immediately packages and records the complete context data of the current moment, forming a high-quality training sample, including:

[0068] User feedback: such as rating = -1 (too dark) or rating = +1 (too bright).

[0069] Environment status: Current ambient light data E_env.

[0070] System decision: The dynamic glare index G_index calculated at that time.

[0071] Rendering strategy: The combination of CSS variables applied at the time.

[0072] This data (context and feedback data) is securely sent to a server or stored on the user's local device, forming a personalized dataset. Furthermore, online learning and model iteration are performed based on this personalized dataset. The online learning algorithm continuously adjusts the internal parameters of the glare suppression model (both the LUT values ​​and the weights of the ML model), enabling the web application to make decisions more aligned with the user's preferences under the same ambient light conditions.

[0073] In the embodiments of this application, to address the problem that existing screen brightness adjustment schemes cannot effectively solve the issues of user visual comfort and glare interference in complex lighting environments, the embodiments of this application use an ambient light sensor to perceive the environment and combine it with a dynamic glare suppression model to quantify multi-dimensional environmental and interface states into a standardized glare index. Subsequently, through a rendering strategy matrix, the glare index is translated into a specific combination of CSS variables, dynamically adjusting the software rendering of text, UI, and media content in a differentiated manner. Furthermore, a human-computer interaction closed loop is introduced, collecting user feedback for online learning and continuously optimizing model parameters. This successfully elevates screen adaptation from the macro-control of the operating system's hardware to the precise content optimization level of application software. It achieves a leap from single brightness adjustment to multi-dimensional visual parameter collaborative control, from indiscriminate adjustment to differentiated processing of content perception, and from standardized experience to highly personalized comfort experience. Ultimately, it provides users with a healthier and smarter visual solution in different lighting environments, ensuring a good user experience.

[0074] Corresponding to the above method embodiments, this application also provides an embodiment of a web interface rendering device based on a dynamic glare suppression model, such as... Figure 3 As shown, the device includes:

[0075] The acquisition unit is used to collect ambient light data and obtain ambient illuminance values ​​through a web interface;

[0076] The calculation unit is used to calculate the dynamic glare index based on the ambient illuminance value, screen brightness, and current user preferences.

[0077] The query unit is used to query the rendering strategy matrix based on the dynamic glare index to obtain the rendering strategy decision;

[0078] The rendering unit is used to dynamically inject the rendering strategy decision into the style root node of the current page to complete the rendering of the Web interface.

[0079] The above is a schematic scheme of a web interface rendering device based on a dynamic glare suppression model according to this embodiment. It should be noted that the technical solution of this web interface rendering device based on a dynamic glare suppression model and the technical solution of the web interface rendering method based on a dynamic glare suppression model described above belong to the same concept. For details not described in detail in the technical solution of this web interface rendering device based on a dynamic glare suppression model, please refer to the description of the technical solution of the web interface rendering method based on a dynamic glare suppression model described above.

[0080] In one embodiment of this application, a computing device is also provided, including a memory, a processor, and computer instructions stored in the memory and executable on the processor. When the processor executes the instructions, it implements the steps of the Web interface rendering method based on the dynamic glare suppression model.

[0081] The above is an illustrative scheme of a computing device according to this embodiment. It should be noted that the technical solution of this computing device and the technical solution of the web interface rendering method based on the dynamic glare suppression model described above belong to the same concept. For details not described in detail in the technical solution of the computing device, please refer to the description of the technical solution of the web interface rendering method based on the dynamic glare suppression model described above.

[0082] An embodiment of this application also provides a computer-readable storage medium storing computer instructions that, when executed by a processor, implement the steps of the web interface rendering method based on the dynamic glare suppression model as described above.

[0083] The above is an illustrative scheme of a computer-readable storage medium according to this embodiment. It should be noted that the technical solution of this storage medium belongs to the same concept as the technical solution of the web interface rendering method based on the dynamic glare suppression model described above. For details not described in detail in the technical solution of the storage medium, please refer to the description of the technical solution of the web interface rendering method based on the dynamic glare suppression model described above.

[0084] The foregoing has described specific embodiments of this application. Other embodiments are within the scope of the appended claims. In some cases, the actions or steps recited in the claims may be performed in a different order than that shown in the embodiments and may still achieve the desired results. Furthermore, the processes depicted in the drawings do not necessarily require the specific or sequential order shown to achieve the desired results. In some embodiments, multitasking and parallel processing are also possible or may be advantageous.

[0085] The computer instructions include computer program code, which may be in the form of source code, object code, executable file, or some intermediate form. The computer-readable medium may include: any entity or device capable of carrying the computer program code, recording media, USB flash drive, portable hard drive, magnetic disk, optical disk, computer memory, read-only memory (ROM), random access memory (RAM), electrical carrier signals, telecommunication signals, and software distribution media, etc. It should be noted that the content included in the computer-readable medium may be appropriately added to or subtracted according to the requirements of legislation and patent practice in the jurisdiction. For example, in some jurisdictions, according to legislation and patent practice, computer-readable media may not include electrical carrier signals and telecommunication signals.

[0086] It should be noted that, for the sake of simplicity, the foregoing method embodiments are all described as a series of actions. However, those skilled in the art should understand that this application is not limited to the described order of actions, as some steps may be performed in other orders or simultaneously according to this application. Furthermore, those skilled in the art should also understand that the embodiments described in the specification are preferred embodiments, and the actions and modules involved are not necessarily essential to this application.

[0087] In the above embodiments, the descriptions of each embodiment have different focuses. For parts not described in detail in a certain embodiment, please refer to the relevant descriptions of other embodiments.

[0088] The preferred embodiments disclosed above are merely illustrative of this application. The optional embodiments do not exhaustively describe all details, nor do they limit the invention to the specific implementations described. Clearly, many modifications and variations can be made based on the content of this application. These embodiments are selected and specifically described in this application to better explain the principles and practical applications of this application, thereby enabling those skilled in the art to better understand and utilize this application. This application is limited only by the claims and their full scope and equivalents.

Claims

1. A method for web interface rendering based on dynamic glare inhibition model, the method is executed in a web application, characterized in that, The method comprises: acquiring ambient light data through a Web interface to obtain an ambient illumination value; calculating a dynamic glare index according to the ambient illumination value, screen brightness, and current user preference; querying a rendering strategy matrix according to the dynamic glare index to obtain a rendering strategy decision; dynamically injecting the rendering strategy decision into a style root node of a current page to complete rendering of the Web interface.

2. The method of claim 1, wherein, The calculation of the dynamic glare index according to the ambient illumination value, screen brightness, and current user preference comprises: inputting the ambient illumination value, current screen brightness value, and user preference into a glare suppression model to query a current dynamic glare index; the glare suppression model is a multidimensional lookup table included in the Web application or a pre-trained small neural network included in the Web application; the dynamic glare index has a value range of [0, 1], where 0 represents no glare risk and 1 represents extreme glare risk.

3. The method of claim 1, wherein, The querying of the rendering strategy matrix according to the dynamic glare index to obtain the rendering strategy decision comprises: The rendering strategy matrix divides the continuous value range of the dynamic glare index into several discrete intervals, and each interval corresponds to a set of predefined rendering strategies; the rendering strategy decision comprises a set of CSS variable value sets.

4. The method of claim 3, wherein, The set of CSS variable value sets includes but is not limited to a background primary color, a text primary color, a target contrast, UI component brightness, and CSS filter intensity of a page in the Web application.

5. The method of claim 1, wherein, The dynamic injection of the rendering strategy decision into the style root node of the current page comprises: In the script code, the root element object of the current page is obtained; further, all CSS variable values in the rendering strategy decision are dynamically replaced with CSS variable values on the current page.

6. The method of claim 1, wherein, The method further comprises: Declaring global style variables that need to be updated in the:root node in the CSS file.

7. The method of claim 2, wherein, After completing the rendering of the Web interface, the method further comprises: Providing a user feedback interface on the interface to continuously calibrate and optimize the glare suppression model through real subjective feelings of the user.

8. The method of claim 7, wherein, The continuous calibration and optimization of the glare suppression model through real subjective feelings of the user comprise: While capturing user feedback, training samples are constructed according to complete context data at the current time; the internal parameters of the glare suppression model are adjusted and updated through an online learning algorithm.

9. A web interface rendering device based on a dynamic glare suppression model, characterized in that, The method comprises: an acquisition unit configured to acquire ambient light data through a Web interface to obtain an ambient illumination value; a calculation unit configured to calculate a dynamic glare index according to the ambient illumination value, screen brightness, and current user preference; a querying unit configured to query a rendering strategy matrix according to the dynamic glare index to obtain a rendering strategy decision; a rendering unit configured to dynamically inject the rendering strategy decision into a style root node of a current page to complete rendering of the Web interface.

10. A computing device comprising a memory, a processor, and computer instructions stored on the memory and executable on the processor, wherein, The processor executes the instructions to implement the steps of the method of any one of claims 1-8.

11. A computer-readable storage medium storing computer instructions, wherein, The instructions are executed by the processor to implement the steps of the method of any one of claims 1-8.

Images