A diurnal mode generation method and system based on large model semantic recognition

Abstract

The application provides a day and night mode generation method and system based on large model semantic recognition, and relates to the technical field of human-computer interaction and artificial intelligence. It includes: in response to a day and night mode switching instruction, traversing a target webpage DOM tree to extract key nodes with color features and serializing them into structured data; inputting the structured data into a large language model for semantic role reasoning and outputting semantic labels; performing differential mapping on color values in the CIELAB color space according to the semantic labels; calculating the contrast of parent and child nodes and performing WCAG standard correction; and injecting the corrected color values into the style sheet as dynamic CSS variables, which realizes multi-modal perception driven day and night mode switching, reduces the human cost of UI redesign and front-end regression testing, reduces the alert color distortion rate and brand color phase offset, improves the readability and accuracy of chart data, and is suitable for day and night mode transformation scenarios of various enterprise-level management systems.

Description

Technical Field

[0001] This invention relates to the fields of human-computer interaction and artificial intelligence, and in particular to a method and system for generating day and night patterns based on large model semantic recognition. Background Technology

[0002] Current inventory management systems play a crucial role in the daily operations of enterprises. However, the front-end interface was initially designed with only a standard bright (daytime) display mode in mind, without any provisions for support for dark mode (also known as night mode or day-night mode). In low-light industrial environments (such as nighttime workshops or monitoring centers) or nighttime office settings, the high-brightness bright interface of such systems can easily cause visual fatigue for operators, and long-term use may also affect work efficiency and operational safety.

[0003] Existing technologies suffer from the following drawbacks: 1. Traditional front-end programs rely solely on DOM tag names and class names for element categorization. Relying solely on front-end regular expressions cannot understand the business semantics of elements, and cannot automatically distinguish between brand elements, warning controls, chart elements, ordinary text, and page backgrounds; it can only execute a globally uniform color-changing strategy. 2. Most existing color conversions directly perform brightness inversion within the RGB color space. Currently, CIELAB color channel transformation rules are all hard-coded fixed parameters. Although CIELAB uniform color space is introduced for color adjustment, only one unified transformation formula is used, without distinguishing element types. 3. Most existing dark-color conversions only perform a color replacement once during the initial page rendering. When SPAs asynchronously generate new DOM nodes in subsequent interactions, the system cannot automatically capture newly added components. New pop-ups, dynamically loaded tables, and charts cannot automatically adapt to day / night modes, requiring manual rewriting of style rules, resulting in extremely high adaptation costs and making it difficult to integrate with existing enterprise business systems without intrusion. Summary of the Invention

[0004] The main objective of this invention is to provide a day-night mode generation method based on large model semantic recognition, which solves the problems of insufficient element semantic recognition capability, brand element distortion, decreased recognition of warning signs, insufficient color differentiation of charts, and inability to adaptively adjust colors for dynamically added components in SPA.

[0005] To solve the above-mentioned technical problems, the technical solution adopted by the present invention is: a day-night pattern generation method based on large model semantic recognition, comprising the following steps: S1: After receiving the day / night mode switching instruction, obtain the view data of the user interface, traverse the DOM tree of the visible area of ​​the target webpage, extract key nodes with color definition features, and serialize the node information, calculation style information and text content information of the key nodes into structured data. S2: Input the structured data into the large language model, perform semantic role reasoning on the key nodes through the large language model, and output the semantic role label corresponding to each key node; S3: Based on the semantic role labels, perform differential mapping on the color values ​​of the corresponding key nodes in the CIELAB color space to generate mapped color values; S4: Calculate the contrast between nodes with parent-child relationship, determine whether the contrast meets the preset accessibility standard threshold, if not, perform gradient backoff correction on the mapped color value until the preset accessibility standard threshold is met. S5: Inject the corrected color values ​​into the stylesheet of the target webpage as dynamic CSS variables to complete the day / night mode switching.

[0006] In the preferred embodiment, in step S1, the key node includes a visual node with background color attribute, text color attribute, or border color attribute; the structured data is in JSON format and includes node hierarchy, tag type, class name identifier, calculated style attribute, and text content.

[0007] In the preferred embodiment, in step S2, the semantic role label includes at least one of the following: brand core visual element label, danger warning label, complex data visualization chart label, ordinary text background label, and ordinary text label.

[0008] In the preferred embodiment, when the large language model performs semantic role reasoning on the key nodes, it makes a comprehensive judgment based on features in at least the following dimensions: The position and hierarchy of a node in the DOM tree; Keywords contained in the node's class name, ID attribute, or accessibility label; Semantic keywords in the node text content; The distribution characteristics of color components in the RGB color space in the node calculation style; The pixel color and transparency distribution characteristics after performing grid sampling on image nodes.

[0009] In a preferred embodiment, the differentiated mapping includes: For nodes labeled as core visual elements of the brand, lock their hue channel in the CIELAB color space, and perform non-linear compression only on the brightness channel, with the compression amplitude not exceeding the preset brightness threshold. For nodes labeled with danger warnings, remap their colors to a predefined dark mode warning color palette; For nodes labeled as ordinary text background labels, their brightness channels are significantly reduced. For nodes labeled as ordinary text, their brightness channels are brightened by inverting the brightness. For nodes labeled as complex data visualization charts, perform hue-protective brightness adjustment on the colors of each sequence within them to ensure that the color difference between sequences is not lower than a preset threshold.

[0010] In the preferred embodiment, in step S4, the contrast ratio is calculated according to the WCAG 2.1 standard formula, and the expression is: ; in, The relative brightness of brighter colors. The relative brightness of darker colors; If the contrast is lower than the preset standard threshold, the gradient backoff algorithm is activated to gradually increase the brightness of the text until the accessibility contrast requirement is met.

[0011] In the preferred embodiment, step S5 is followed by: Register a MutationObserver listener to listen for DOM change events on the target webpage; When a new DOM node is detected, the incremental value of the new DOM node is pushed to the processing pipeline of steps S1 to S4 to generate the corresponding dynamic CSS variable and inject it into the stylesheet.

[0012] In a preferred embodiment, performing grid sampling on image-type nodes includes: The image is divided into 8×8 sub-blocks, and color and brightness data are extracted from five locations in each sub-block: the top left, top right, bottom left, bottom right, and center. The number of sub-blocks with an Alpha transparency channel value of 0 is counted. If this number exceeds a preset proportion of the total number of sub-blocks, and the pixel RGB values ​​of the remaining colored sub-blocks conform to the preset brand color characteristics, then the image is determined to be a core visual element of the brand.

[0013] Secondly, the present invention provides a day-night pattern generation system based on large-model semantic recognition, applicable to the aforementioned day-night pattern generation method based on large-model semantic recognition, comprising: The DOM serialization module is used to respond to the day / night mode switching command, traverse the DOM tree of the visible area of ​​the target webpage, extract key nodes with color definition features, and serialize the node information, calculated style information and text content information of the key nodes into structured data. The large-scale model semantic reasoning module is used to input the structured data into the large language model, perform semantic role reasoning on the key nodes through the large language model, and output the semantic role label corresponding to each key node. The CIELAB color mapping engine is used to perform differential mapping on the color values ​​of corresponding key nodes in the CIELAB color space according to the semantic role labels, and generate mapped color values. The contrast correction module is used to calculate the contrast between nodes with parent-child relationships, determine whether the contrast meets the preset accessibility standard threshold, and if not, perform gradient backoff correction on the mapped color value until the preset accessibility standard threshold is met. The style injection module is used to inject the corrected color values ​​into the style sheet of the target webpage as dynamic CSS variables to complete the day / night mode switching.

[0014] In the preferred embodiment, the large language model is a finely tuned open-source large language model or a multimodal visual language model, deployed on a local server or in the cloud, and has the ability to perform semantic role classification and annotation of UI elements. It also includes an incremental rendering module, which listens for DOM change events of the target webpage through the MutationObserver listener. When a new DOM node is detected, the new DOM node is incrementally pushed to the DOM serialization module, the large model semantic reasoning module, the CIELAB color mapping engine and the contrast correction module for processing, and the generated dynamic CSS variables are injected into the stylesheet.

[0015] This invention provides a day / night mode generation method based on large-scale model semantic recognition, comprising: responding to a day / night mode switching command, traversing the target webpage DOM tree to extract key nodes with color features and serializing them into structured data; inputting the structured data into a large language model for semantic role reasoning and outputting semantic tags; performing differential mapping on color values ​​in the CIELAB color space according to the semantic tags; calculating the contrast between parent and child nodes and performing WCAG standard correction; and injecting the corrected color values ​​into a stylesheet as dynamic CSS variables. The system includes a DOM serialization module, a large-scale model semantic reasoning module, a CIELAB color mapping engine, a contrast correction module, a style injection module, and an optional incremental rendering module.

[0016] This invention introduces large-scale semantic understanding and achieves business context awareness through color conversion. It distinguishes between brand colors, warning colors, data charts, and ordinary text, and performs targeted mapping, reducing the manpower costs of UI redesign and front-end regression testing. It also reduces warning color distortion and brand hue shift, improving the readability and accuracy of chart data; and enhances the practicality of automatically generated dark styles. This invention provides one-click dark mode conversion for existing web applications in a non-intrusive manner, reducing UI reconstruction costs and making it suitable for day / night mode transformation scenarios in various enterprise-level management systems. Attached Figure Description

[0017] The present invention will be further described below with reference to the accompanying drawings and embodiments: Figure 1 This is a design diagram of the day / night mode generation architecture of the present invention; Figure 2 This is the underlying data flow diagram of the semantic role-based color conversion and contrast correction in this invention; Figure 3 This is a flowchart of the generation method of the present invention; Figure 4 These are the day and night mode switching effect diagrams of the present invention. (a) is the effect diagram of the day mode, and (b) is the effect diagram of the night mode. Detailed Implementation

[0018] Example 1 like Figure 1-4 As shown, a day / night pattern generation method based on large model semantic recognition includes the following steps: S1. Lightweight Feature Serialization and Compression Steps of the DOM Tree: When a user triggers dark mode, the front-end probe script intercepts the rendering. The script traverses the DOM tree of the visible area and extracts key nodes with color definition characteristics. To save on token overhead for large models, the extracted nodes, CSS styles (font size, background color, text color), and text content are streamlined into a structured JSON tree format.

[0019] S2, Large Model Multimodal Semantic Inference (LLM Semantic Inference) Steps: The structured JSON feature tree and optional partial page screenshots are input into the fine-tuned large language / multimodal visual model LLM / VLM. The model classifies and labels UI elements based on preset judgment rules and outputs standardized semantic role labels.

[0020] S3. CIELAB color space differentiation mapping steps based on semantic tags: After receiving the LLM's classification labels, the engine converts the RGB values ​​of the colors into the CIELAB color space, which is more in line with human visual perception, and executes completely different mathematical equations according to different labels to generate mapped color values.

[0021] S4, WCAG 2.1 Forced Contrast Closed-Loop Correction Steps: After color mapping is completed, the contrast ratio of text and background with parent-child relationships is calculated, and it is determined whether the contrast ratio meets a preset accessibility standard threshold. The contrast ratio is calculated according to the WCAG 2.1 standard formula, and the expression is: ; in, The relative brightness of brighter colors. The relative brightness of darker colors; If the contrast ratio is lower than 4.5:1, the gradient fallback algorithm is activated to gradually increase the brightness of the text until the accessibility contrast requirement is met.

[0022] S5, MutationObserver incremental rendering mount: The corrected color values ​​are injected into the stylesheet (document.documentElement) of the target webpage as dynamic CSS variables to complete the day / night mode switching.

[0023] In this embodiment, in response to the day / night mode switching command, the target webpage DOM tree is traversed to extract key nodes with color features and serialized into structured data. The structured data is then input into a large language model for semantic role reasoning, and semantic tags are output. Based on the semantic tags, color values ​​are differentially mapped in the CIELAB color space. The contrast between parent and child nodes is calculated and corrected according to the WCAG standard. The corrected color values ​​are injected into the stylesheet as dynamic CSS variables, realizing multimodal perception-driven day / night mode switching. This reduces the manpower cost of UI redesign and front-end regression testing, reduces alarm color distortion rate and brand hue shift, and improves the readability and accuracy of chart data. It is suitable for day / night mode transformation scenarios of various enterprise-level management systems.

[0024] In the preferred embodiment, in step S1, the key nodes include visual nodes with background color attributes, text color attributes, or border color attributes; the structured data is in JSON format and includes node hierarchy relationships, tag types, class name identifiers, calculated style attributes, and text content.

[0025] This embodiment reduces the amount of data input to the large language model, improves the model's inference accuracy, reduces model inference latency and computational resource consumption, and improves the efficiency of the large model participating in front-end style calculation in real time.

[0026] In step S2, the semantic role labels and determination rules include: a) [BRAND_PRIMARY] (Core visual element of the brand) Extraction and Judgment Rules: Location and structure filtering: Prioritize filtering container nodes in the DOM tree that are located in the header, navigation bar, sidebar, or footer area.

[0027] Text and naming characteristics: The node's class name (Class), unique identifier (ID), or accessibility label contains brand keywords such as "logo", "brand", "sign".

[0028] Image grid sampling rules (for) , <svg>(Or container nodes with background images): Divide the image into a specified number (e.g., M×N) sub-blocks, and extract color and brightness data from specific sampling points in each sub-block (e.g., five points: top left, top right, bottom left, bottom right, and center). If the sampling characteristics show that the proportion of blocks with an Alpha transparency channel value of 0 is greater than a set threshold (i.e., a large area of ​​transparent background), and the colors of the remaining colored blocks are mainly composed of specific colors or dark colors (e.g., the brand's unique red, blue, etc.), then the image is determined to contain core brand characteristics.

[0029] Semantic annotation: The model integrates the above features such as location, naming, background transparency and color foreground sampling to infer that it is the core visual element of the brand, and prevents the brand color from being inverted into a complementary color (such as red turning into cyan, blue turning into yellow) during dark color conversion.

[0030] b) [DANGER_ALERT] (Danger / Severe Warning) Extraction and Judgment Rules: Text semantic retrieval: Traverse the text content of nodes and their child nodes to search for whether they contain business-related warning words such as "danger", "warning", "error", "alarm", "critical", "fault", and "failure".

[0031] Naming characteristics: The class name or identifier of a node contains keywords such as "danger", "alert", "warning", "error", "critical", "fail".

[0032] Color range matching: Obtain the currently calculated text color or background color of the node and calculate its component features in the RGB color space. If its color is mainly distributed in the spectral range of high saturation red, orange, yellow, etc. (for example, the red R channel value is significantly higher than the G and B channel values), then mark its color feature as "warning color".

[0033] Semantic annotation: The model integrates the semantics of the text warning, naming features, and strong red / orange visual features to determine that it is a danger / serious warning prompt, so that the subsequent engine can remap it to a high-contrast neon warning color dedicated to dark mode, ensuring that it is still eye-catching on a black background.

[0034] c) [DATA_CHART] (Complex data visualization charts) Extraction and Judgment Rules: Node type matching: Filter the DOM tree for tags that are <canvas> 、 <svg>(And its child nodes contain a large number of drawing paths such as path, rect, circle) or nodes belonging to the WebGL rendering context.

[0035] Library feature identification: Detect whether the container class name and attributes of the node contain third-party chart library identifiers (such as "echarts", "highcharts", "chart", "graph", "legend", "axis", etc.).

[0036] Grid sampling and region analysis: Perform local grid sampling on the region. If a large number of small, different colored, and regularly / irregularly distributed colored sampling blocks are found (representing multiple chart lines, bar charts, or pie chart elements), and there are adjacent legend or axis text nodes around them.

[0037] Semantic annotation: Based on the canvas features of Canvas / SVG, the distribution of multi-color sampling points, and the legend context, the model infers that it is a complex data visualization chart, providing a basis for subsequent color difference protective brightness adjustment.

[0038] d) [CONTENT_BACKGROUND] (Normal text background) Extraction and Judgment Rules: Hierarchy and Layout Area: Filter large container nodes that are in a shallow hierarchy in the DOM tree (such as near the body or as direct containers for major business blocks) and occupy a proportion of the screen viewport area exceeding a set threshold (such as greater than 20%).

[0039] Color brightness calculation: Obtain the background color in the calculation style of this node. If its brightness component value is in the high brightness range (such as pure white, light gray and other light backgrounds, the brightness value is greater than 80 in the L channel of CIELAB).

[0040] Semantic annotation: The model, based on its large area and the fact that it carries other child nodes, determines that it is a normal text background container, and then applies a significant reduction in brightness to it.

[0041] e)[NEUTRAL_TEXT] (normal text) Extraction and Judgment Rules: Node type and content: It is a plain text node, or it is wrapped in regular text tags such as p, span, li, td, div, and its text content does not contain any danger warning words or brand-specific names.

[0042] Color and font size characteristics: The original font color in the calculated style is dark (such as black, dark gray, with a low brightness value), and the font size is not an extra-large title font size, with no special color highlighting.

[0043] Semantic annotation: The model identifies it as part of the information description and body text on the page, classifies it as ordinary text, and then performs brightness inversion to brighten it in order to maintain good readability and contrast against a dark background.

[0044] This embodiment improves the accuracy of business function role identification, the accuracy of warning messages, and the safety of operations.

[0045] In the preferred scheme, the differentiated mapping includes: For [BRAND_PRIMARY]: Strict hue anchoring and slight brightness reduction are implemented. The a and b channels (controlling color) in the CIELAB color space are locked, and only the L channel (brightness) is non-linearly compressed (not exceeding 15% of the original brightness), so that the brand red remains red in the dark, only softer.

[0046] For [DANGER_ALERT]: Triggers high-contrast alert color remapping. Discards the original color and remaps it to a set of alert color palettes predefined specifically for dark mode (such as glowing neon red and fluorescent yellow) to ensure maximum visual appeal against a black background.

[0047] For [CONTENT_BACKGROUND] / [NEUTRAL_TEXT]: Perform the regular reverse calculation, using the Sigmoid function to press large areas of light-colored backgrounds to dark gray / pure black.

[0048] This embodiment improves the adaptability of various types of elements in dark mode and business semantics, enhances color clarity and distinguishability, and improves user experience.

[0049] like Figure 2 As shown, the data stream starts with input data, goes through multiple processing steps, and finally outputs the final color values ​​that can be directly applied to stylesheets, in RGB or CSS color format. Figure 1 The style injection and rendering layer are registered as dynamic CSS variables and applied to the target webpage.

[0050] In the preferred embodiment, step S5 is followed by: Register a MutationObserver listener to listen for DOM change events on the target webpage; When a single-page application (SPA) displays a new pop-up or component due to data interaction, its increment is pushed into the LLM inference and color correction queue mentioned above to achieve a seamless and smooth transition.

[0051] In this embodiment, persistent maintenance and localized incremental updates of dark mode are achieved, which improves the readability of interface text and the effectiveness of information delivery in dark mode, and enhances the user experience and rendering performance of dynamic pages.

[0052] This embodiment uses the day / night mode switching scenario of a remote diagnostic web monitoring panel for a commercial vehicle company as an example to detail the complete implementation process of the day / night mode generation method based on large model semantic recognition provided by this invention. The monitoring panel is a legacy system; its upper left corner contains the company brand logo (a red "XX Company" LOGO), and the center of the screen displays an "Engine High Temperature Critical Warning" status card. The card's background color is light red (#FFE5E5), and the text color is dark red (#D32F2F). For example... Figure 1 As shown, the overall process is as follows: 1. When the night shift monitoring operator clicks the "Night Mode" switch button in the upper right corner of the interface, the front-end interaction layer captures the click event and generates a day / night mode switching command. This command is passed to the front-end probe script, triggering subsequent processing.

[0053] 2. The front-end probe extracts the above DOM structure to generate simplified JSON, which is then fed into the large language model: Feature parsing and semantic inference of the large model: 1) For the LOGO image node : Feature matching: The probe detected that the node is located in the top header area and its class name contains the keyword "logo". Grid sampling: Trigger the grid sampling rule, divide the image into 8×8 blocks and detect the color and brightness data of each sampling point pixel, confirm that the Alpha channel value of the background part of the image is 0 (accounting for 65%, i.e. a large area of ​​transparent background), and the RGB values ​​of the colored pixels conform to the preset color characteristics.

[0054] Inference result: The model receives the above structure and grid sampling features and infers that it is classified as the core visual element of the brand [BRAND_PRIMARY].

[0055] 2) For warning card containers ... : Feature matching: The class name contains the keyword "warning", and the sub-text nodes contain warning words such as "high temperature critical" and "warning".

[0056] Color matching: The current calculated style is obtained. The R component values ​​of the text color #D32F2F and the background color #FFE5E5 are significantly dominant, belonging to the high-saturation red spectrum range (warning color).

[0057] Inference result: Based on the above naming, semantic and computation style features, the model infers that the container and its child nodes are a danger / serious warning [DANGER_ALERT].

[0058] III. CIELAB mapping engine intervention: For the logo: Because it has the [BRAND] label, the engine locks in its red hue and fine-tunes its brightness (L component) from 55 to 45, creating a deep but not glaring brand red.

[0059] For warning cards: If the conventional algorithm is used, the background will turn dark red and the text will turn pink, resulting in a blurry mess. This solution's engine recognizes [DANGER_ALERT] and automatically remaps its background to a dark mode-specific "warning background color" (such as a very dark blackish gray #1A0B0B), while remapping its text to a glowing warning red (#FF5252).

[0060] IV. Contrast Verification: The verification engine test showed that the contrast ratio of the glowing warning red on extremely deep black and gray was 7.2:1, which passed the WCAG AA standard and applied the stylesheet to the interface.

[0061] The operator saw on the night shift monitoring screen that although the entire panel was immersed in a cool dark tone, the XX company logo was still bright red and clear.

[0062] Through practical application scenarios of remote diagnostic panels for commercial vehicles, this embodiment improves the accuracy of brand color anchoring protection, enhances the distinguishability of hazard warning information, reduces the misjudgment rate of warning colors darkening and blending into the background, and improves application safety and accuracy.

[0063] Example 2 To further illustrate with reference to Example 1, in another scenario, adaptive reversal of complex multi-line data charts (ECharts) is performed.

[0064] The trend charts in the financial analysis dashboard were originally set to include four line charts (orange, green, purple, and blue) reflecting sales in different regions. The execution process included: 1) Feature parsing and semantic inference of large models: Feature matching: Front-end probe filtering <canvas>A node whose container class name contains echarts and contains adjacent legend and axis related node features.

[0065] Sampling analysis: Local mesh sampling was performed on this area, and multiple polylines with different hues and colors were identified inside the Canvas, with a bright background.

[0066] Inference results: The model receives canvas node features and multi-color polyline sampling data, and infers and labels them as complex data visualization charts [DATA_CHART] and classification sequences [CATEGORICAL_SERIES].

[0067] 2) For such elements, the color conversion strategy should not only reduce the brightness of the chart background color, but also protect the original color distinction between multiple lines.

[0068] 3) The color of the engine's bifurcated lines undergoes "hue-protective brightness adjustment" in the CIELAB color space. If the original blue line is too dark, it will be brightened (by increasing the L value) to make it visible against a black background; if the original yellow line is too light, it will be slightly darkened. By calculating the color difference (ΔE) between each pair of lines, it ensures that orange, green, purple, and blue remain clearly distinguishable against a black background.

[0069] By using the darkening mode of ECharts multi-line charts in the financial analysis dashboard, this embodiment solves the problem of multiple lines becoming a blurry mess and data readability in traditional solutions, improving color clarity and differentiation, and enhancing user experience and visual effects.

[0070] Example 3 Further illustrating with reference to Embodiment 1, a day-night pattern generation system based on large-model semantic recognition, applicable to the day-night pattern generation method based on large-model semantic recognition in Embodiment 1, includes: The DOM serialization module is used to respond to the day / night mode switching command, traverse the DOM tree of the visible area of ​​the target webpage, extract key nodes with color definition features, and serialize the node information, calculated style information and text content information of the key nodes into structured data. The large-scale model semantic reasoning module is used to input the structured data into the large language model, perform semantic role reasoning on the key nodes through the large language model, and output the semantic role label corresponding to each key node. The CIELAB color mapping engine is used to perform differential mapping on the color values ​​of corresponding key nodes in the CIELAB color space according to the semantic role labels, and generate mapped color values. The contrast correction module is used to calculate the contrast between nodes with parent-child relationships, determine whether the contrast meets the preset accessibility standard threshold, and if not, perform gradient backoff correction on the mapped color value until the preset accessibility standard threshold is met. The style injection module is used to inject the corrected color values ​​into the style sheet of the target webpage as dynamic CSS variables to complete the day / night mode switching.

[0071] In the preferred solution, the large language model is a finely tuned open-source large language model or multimodal visual language model, deployed on a local server or in the cloud, and has the ability to perform semantic role classification and annotation of UI elements. It also includes an incremental rendering module, which listens for DOM change events of the target webpage through the MutationObserver listener. When a new DOM node is detected, the new DOM node is incrementally pushed to the DOM serialization module, the large model semantic reasoning module, the CIELAB color mapping engine and the contrast correction module for processing, and the generated dynamic CSS variables are injected into the stylesheet.

[0072] This embodiment provides the working process, working details and technical effects of a day and night pattern generation method based on large model semantic recognition, which can be referred to in Embodiment 1 and will not be repeated here.

[0073] The above embodiments are merely preferred technical solutions of the present invention and should not be considered as limitations on the present invention. The scope of protection of the present invention should be limited to the technical solutions described in the claims, including equivalent substitutions of the technical features described in the claims. That is, equivalent substitutions and improvements within this scope are also within the scope of protection of the present invention.< / canvas> < / svg> < / canvas> < / svg>

Claims

1. A method for generating day and night patterns based on large-model semantic recognition, characterized in that, Includes the following steps: S1: After receiving the day / night mode switching instruction, obtain the view data of the user interface, traverse the DOM tree of the visible area of ​​the target webpage, extract key nodes with color definition features, and serialize the node information, calculation style information and text content information of the key nodes into structured data. S2: Input the structured data into the large language model, perform semantic role reasoning on the key nodes through the large language model, and output the semantic role label corresponding to each key node; S3: Based on the semantic role labels, perform differential mapping on the color values ​​of the corresponding key nodes in the CIELAB color space to generate mapped color values; S4: Calculate the contrast between nodes with parent-child relationship, determine whether the contrast meets the preset accessibility standard threshold, if not, perform gradient backoff correction on the mapped color value until the preset accessibility standard threshold is met. S5: Inject the corrected color values ​​into the stylesheet of the target webpage as dynamic CSS variables to complete the day / night mode switching.

2. The day-night pattern generation method based on large model semantic recognition according to claim 1, characterized in that, In step S1, the key nodes include visual nodes with background color attributes, text color attributes, or border color attributes; the structured data is in JSON format and includes node hierarchy, tag type, class name identifier, calculated style attributes, and text content.

3. The day-night pattern generation method based on large model semantic recognition according to claim 1, characterized in that, In step S2, the semantic role tags include at least one of the following: brand core visual element tags, danger warning tags, complex data visualization chart tags, ordinary text background tags, and ordinary text tags.

4. The day-night pattern generation method based on large model semantic recognition according to claim 3, characterized in that, When the large language model performs semantic role reasoning on the key nodes, it makes a comprehensive judgment based on features in at least the following dimensions: The position and hierarchy of a node in the DOM tree; Keywords contained in the node's class name, ID attribute, or accessibility label; Semantic keywords in the node text content; The distribution characteristics of color components in the RGB color space in the node calculation style; The pixel color and transparency distribution characteristics after performing grid sampling on image nodes.

5. The day-night pattern generation method based on large model semantic recognition according to claim 3, characterized in that, The differential mapping includes: For nodes labeled as core visual elements of the brand, lock their hue channel in the CIELAB color space, and perform non-linear compression only on the brightness channel, with the compression amplitude not exceeding the preset brightness threshold. For nodes labeled with danger warnings, remap their colors to a predefined dark mode warning color palette; For nodes labeled as ordinary text background labels, their brightness channels are significantly reduced. For nodes labeled as ordinary text, their brightness channels are brightened by inverting the brightness. For nodes labeled as complex data visualization charts, perform hue-protective brightness adjustment on the colors of each sequence within them to ensure that the color difference between sequences is not lower than a preset threshold.

6. The day-night pattern generation method based on large model semantic recognition according to claim 1, characterized in that, In step S4, the contrast ratio is calculated according to the WCAG 2.1 standard formula, and the expression is: ； in, The relative brightness of brighter colors. The relative brightness of darker colors; If the contrast is lower than the preset standard threshold, the gradient backoff algorithm is activated to gradually increase the brightness of the text until the accessibility contrast requirement is met.

7. The day-night pattern generation method based on large model semantic recognition according to claim 1, characterized in that, Step S5 is followed by: Register a MutationObserver listener to listen for DOM change events on the target webpage; When a new DOM node is detected, the incremental value of the new DOM node is pushed to the processing pipeline of steps S1 to S4 to generate the corresponding dynamic CSS variable and inject it into the stylesheet.

8. The day-night pattern generation method based on large model semantic recognition according to claim 4, characterized in that, The grid sampling of image-type nodes includes: The image is divided into 8×8 sub-blocks, and color and brightness data are extracted from five locations in each sub-block: the top left, top right, bottom left, bottom right, and center. The number of sub-blocks with an Alpha transparency channel value of 0 is counted. If this number exceeds a preset proportion of the total number of sub-blocks, and the pixel RGB values ​​of the remaining colored sub-blocks conform to the preset brand color characteristics, then the image is determined to be a core visual element of the brand.

9. A day / night pattern generation system based on large-model semantic recognition, characterized in that, A day / night pattern generation method based on large model semantic recognition, applicable to any one of claims 1-8, comprises: The DOM serialization module is used to respond to the day / night mode switching command, traverse the DOM tree of the visible area of ​​the target webpage, extract key nodes with color definition features, and serialize the node information, calculated style information and text content information of the key nodes into structured data. The large-scale model semantic reasoning module is used to input the structured data into the large language model, perform semantic role reasoning on the key nodes through the large language model, and output the semantic role label corresponding to each key node. The CIELAB color mapping engine is used to perform differential mapping on the color values ​​of corresponding key nodes in the CIELAB color space according to the semantic role labels, and generate mapped color values. The contrast correction module is used to calculate the contrast between nodes with parent-child relationships, determine whether the contrast meets the preset accessibility standard threshold, and if not, perform gradient backoff correction on the mapped color value until the preset accessibility standard threshold is met. The style injection module is used to inject the corrected color values ​​into the style sheet of the target webpage as dynamic CSS variables to complete the day / night mode switching.

10. The day-night pattern generation system based on large model semantic recognition according to claim 9, characterized in that, The large language model is a finely tuned open-source large language model or multimodal visual language model, deployed on a local server or in the cloud, and has the ability to perform semantic role classification and annotation of UI elements. It also includes an incremental rendering module, which listens for DOM change events of the target webpage through the MutationObserver listener. When a new DOM node is detected, the new DOM node is incrementally pushed to the DOM serialization module, the large model semantic reasoning module, the CIELAB color mapping engine and the contrast correction module for processing, and the generated dynamic CSS variables are injected into the stylesheet.

Images