Element display processing method and apparatus, electronic device, and storage medium

Abstract

This disclosure relates to the field of multimedia technology, and more particularly to an element display processing method, apparatus, electronic device, and storage medium. The method includes: displaying an initial loading page; the initial loading page displaying user interface elements based on a first color; after displaying the initial loading page for a preset time, adjusting the display of the user interface elements from based on the first color to based on a second color; wherein the difference between the second color and the color of the background image of the initial loading page is greater than a preset color threshold. This disclosure enables a method for automatically adjusting the colors of UI elements according to a background image.

Description

Technical Field

[0001] This disclosure relates to the field of multimedia technology, and in particular to an element display processing method, apparatus, electronic device, and storage medium. Background Technology

[0002] With the rapid development of short videos, user interface (UI) elements are typically displayed on short video pages, such as text, buttons, titles, avatars, and controls. In some cases, the colors of these UI elements overlap with the background image, making it impossible to accurately and clearly display these UI elements to the user. This makes it difficult for users to identify these UI elements, thus affecting the user experience.

[0003] In related technologies, fixed UI element colors are usually pre-designed, or appropriate UI element colors are manually configured for each background image, and fixed colors are set through code to ensure the visibility of UI elements.

[0004] However, adjusting the colors of UI elements through code is cumbersome and time-consuming, making it difficult to adapt to rapidly changing event requirements; and UI elements with fixed colors cannot adapt to all background images, and color overlap may still occur, resulting in a poor user experience; in addition, adjusting the colors of UI elements through code consumes a lot of device resources and cannot achieve real-time and intelligent adjustment. Summary of the Invention

[0005] This disclosure provides a method, apparatus, electronic device, and storage medium for element display processing, to at least solve the problems in related technologies where adjusting UI element colors via code is cumbersome and time-consuming, making it difficult to adapt to rapidly changing activity requirements; and that UI elements with fixed colors cannot adapt to all background images, potentially leading to color overlap and a poor user experience; furthermore, adjusting UI element colors via code is costly and cannot achieve real-time and intelligent adjustment. The technical solution of this disclosure is as follows:

[0006] According to a first aspect of the present disclosure, an element display processing method is provided, including:

[0007] Display the initial loading page; the initial loading page displays user interface elements based on a first color;

[0008] After displaying the initial loading page for a preset time, the user interface elements are changed from being displayed based on the first color to being displayed based on the second color.

[0009] Wherein, the difference between the second color and the color of the background image of the initially loaded page is greater than a preset color threshold.

[0010] In an optional embodiment, displaying the initial loading page includes:

[0011] Display the target page; the target page includes the target control;

[0012] In response to a triggering operation on the target control, the initial loading page is displayed;

[0013] The step of adjusting the display of user interface elements from based on the first color to based on the second color after displaying the initial loading page for a preset time includes:

[0014] After a preset time has elapsed since the initial loading page was first displayed, the background image is displayed on the layer below the user interface element on the initial loading page, and the user interface element is adjusted from displaying based on the first color to displaying based on the second color based on the image recognition result of the background image.

[0015] The preset time is the time for loading the background image and for performing image recognition processing on the background image during the loading process to obtain the image recognition result.

[0016] In an optional embodiment, the target page includes a search page, and the target control includes an AI dialogue control; the display of the target page includes:

[0017] The search page is displayed; the AI ​​dialogue control is displayed in the area surrounding the search box or the search results on the search page.

[0018] The step of displaying the initial loading page in response to a trigger operation on the target control includes:

[0019] In response to a trigger operation on the AI ​​dialogue control, the initial loading page is displayed within the preset time period.

[0020] In an optional embodiment, the initial loading page includes an element bar area, an input area, and a dialogue content area. The step of displaying the initial loading page within the preset time period in response to a trigger operation on the AI ​​dialogue control includes:

[0021] In response to a trigger operation on the AI ​​dialogue control, the user interface element is displayed in the element bar area, an input box is displayed in the input area, and a loading prompt message is displayed in the dialogue content area;

[0022] The loading prompt information is used to indicate that the operation of loading a background image and performing image recognition processing on the background image to obtain the image recognition result is currently being performed.

[0023] In an optional embodiment, displaying the background image on the initial loading page, located below the user interface element on the initial loading page, after a preset time has elapsed, includes:

[0024] After the initial loading page is displayed for a preset time, dialogue information is displayed in the next layer below the user interface elements, and the background image is displayed in the next layer below the dialogue information.

[0025] The dialogue information is displayed in the dialogue content area, and the background image reveals the user interface elements and the dialogue content.

[0026] In an optional embodiment, the method further includes:

[0027] The loading prompt message will no longer be displayed in the dialog content area.

[0028] In an optional embodiment, the background image is an anthropomorphic background image, the user interface elements include character lookup elements, and after displaying the initial loading page, the method further includes:

[0029] In response to a trigger operation targeting the character search element within the preset time period, a character search page is displayed; the character search page displays at least one character.

[0030] In response to a trigger operation targeting a target character among the at least one character, load an anthropomorphic background image including the target character;

[0031] The display of the background image in the layer below the user interface element on the initial loading page includes:

[0032] Located one level below the user interface element on the initial loading page, an anthropomorphic background image including the target character is displayed.

[0033] In an optional embodiment, the initial loading page includes a multimedia data details page, and displaying the initial loading page includes:

[0034] The multimedia data details page is displayed, which includes the background image and user interface elements displayed based on a first color.

[0035] The step of adjusting the display of user interface elements from based on the first color to based on the second color after displaying the initial loading page for a preset time includes:

[0036] After a preset time has elapsed since the multimedia data details page was displayed, the user interface elements are adjusted from being displayed based on the first color to being displayed based on the second color, based on the image recognition results of the background image.

[0037] The preset time is the time required to perform image recognition processing on the background image to obtain the image recognition result.

[0038] In an optional embodiment, adjusting the user interface element display from based on the first color to based on the second color display includes:

[0039] If the image recognition result of the background image indicates that the color of the background image is dark, and the difference between the first color and the color of the background image is less than or equal to the preset color threshold, the user interface element is adjusted from being displayed based on the first color to being displayed based on white.

[0040] If the image recognition result indicates that the background image is a bright color and the difference between the first color and the background image is less than or equal to the preset color threshold, the user interface element is adjusted from being displayed based on the first color to being displayed based on black.

[0041] In an optional embodiment, the method further includes:

[0042] If the image recognition result indicates that the difference between the first color and the color of the background image is greater than the preset color threshold, the user interface element continues to be displayed on the initial loading page based on the first color.

[0043] In an optional embodiment, the number of user interface elements is at least one, and the display of the initial loading page includes:

[0044] Each user interface element is displayed on the initial loading page using its own first color.

[0045] The step of adjusting the display of the user interface elements from based on the first color to based on the second color includes:

[0046] The display of each user interface element, previously based on its corresponding first color, is now changed to be based on its corresponding second color.

[0047] The difference between the second color corresponding to each user interface element and the image area corresponding to each user interface element is greater than a preset color threshold; the image area corresponding to each user interface element is the area in the background image corresponding to the position of each user interface element.

[0048] In an optional embodiment, adjusting the user interface element display from based on the first color to based on the second color display includes:

[0049] Based on the image recognition results of the target image region, the user interface elements are adjusted from being displayed based on the first color to being displayed based on the second color.

[0050] Wherein, the target image region is the region in the cropped background image that corresponds to the position of the user interface element; the cropped background image is obtained by cropping the background image, the size of the cropped background image matches the size of the initial loading page, and the difference between the second color and the color of the target image region is greater than a preset color threshold.

[0051] According to a second aspect of the present disclosure, an element display processing apparatus is provided, the apparatus comprising:

[0052] The initial loading page display module is configured to display an initial loading page; the initial loading page displays user interface elements based on a first color;

[0053] The color adjustment module is configured to adjust the display of the user interface elements from the first color to the second color after a preset time has elapsed since the initial loading page was displayed.

[0054] Wherein, the difference between the second color and the color of the background image of the initially loaded page is greater than a preset color threshold.

[0055] In an optional embodiment, the initial loading page display module includes:

[0056] The target page display unit is configured to display a target page; the target page includes target controls.

[0057] The target control trigger response unit is configured to perform a response to a trigger operation on the target control and display the initial loading page.

[0058] Accordingly, the aforementioned color adjustment module includes:

[0059] The first adjustment unit is configured to, after a preset time for displaying the initial loading page, display the background image in the layer below the user interface element in the initial loading page, and adjust the user interface element from displaying based on the first color to displaying based on the second color based on the image recognition result of the background image;

[0060] The preset time is the time for loading the background image and for performing image recognition processing on the background image during the loading process to obtain the image recognition result.

[0061] In an optional embodiment, the target page includes a search page, and the target control includes an AI dialogue control; the target page display unit includes:

[0062] The search page display subunit is configured to display the search page; the AI ​​dialogue control is displayed in the area surrounding the search box or the search results on the search page.

[0063] The target control trigger response unit mentioned above includes:

[0064] The intelligent dialogue control triggering subunit is configured to perform a triggering operation in response to the artificial intelligence dialogue control and display the initial loading page within the preset time.

[0065] In an optional embodiment, the initial loading page includes an element bar area, an input area, and a dialogue content area, and the intelligent dialogue control triggering subunit includes:

[0066] The area display subunit is configured to perform a response to a trigger operation on the AI ​​dialogue control, displaying the user interface element in the element bar area, displaying an input box in the input area, and displaying a loading prompt message in the dialogue content area;

[0067] The loading prompt information is used to indicate that the operation of loading a background image and performing image recognition processing on the background image to obtain the image recognition result is currently being performed.

[0068] In an optional embodiment, the first adjustment unit includes:

[0069] The dialogue background display subunit is configured to display dialogue information in the next layer below the user interface elements and the background image in the next layer below the dialogue information after a preset time has elapsed since the initial loading page was displayed.

[0070] The dialogue information is displayed in the dialogue content area, and the background image reveals the user interface elements and the dialogue content display.

[0071] In an optional embodiment, the apparatus further includes:

[0072] The cancel display module is configured to cancel the display of the loading prompt information in the dialog content area.

[0073] In an optional embodiment, the background image is an anthropomorphic background image, the user interface elements include character lookup elements, and the device further includes:

[0074] The character search page display module is configured to respond to a trigger operation on the character search element within the preset time and display the character search page; the character search page displays at least one character.

[0075] An anthropomorphic background image loading module is configured to perform an anthropomorphic background image including the target character in response to a trigger operation for the at least one character.

[0076] Accordingly, the aforementioned first adjustment unit includes:

[0077] The anthropomorphic background image display subunit is configured to operate in the layer below the user interface element on the initial loading page, displaying an anthropomorphic background image including the target character.

[0078] In an optional implementation, the initial loading page includes a multimedia data details page, and the aforementioned initial loading page display module includes:

[0079] The multimedia data details page display unit is configured to display the multimedia data details page, which displays the background image and user interface elements based on a first color.

[0080] Accordingly, the aforementioned color adjustment module includes:

[0081] The second adjustment unit is configured to, after a preset time for displaying the multimedia data details page, adjust the user interface elements from displaying based on the first color to displaying based on the second color, based on the image recognition result of the background image;

[0082] Wherein, the preset time is the time for the operation of recognizing the background image to obtain the image recognition result; the adjustment of the user interface element from displaying based on the first color to displaying based on the second color includes:

[0083] In an optional embodiment, the color adjustment module described above includes:

[0084] The third adjustment unit is configured to adjust the display of the user interface element from displaying based on the first color to displaying based on white when the image recognition result of the background image indicates that the color of the background image is dark and the difference between the first color and the color of the background image is less than or equal to the preset color threshold.

[0085] The fourth adjustment unit is configured to adjust the display of the user interface element from being based on the first color to being based on black when the image recognition result indicates that the color of the background image is a bright color and the difference between the first color and the color of the background image is less than or equal to the preset color threshold.

[0086] In an optional embodiment, the above-described apparatus further includes:

[0087] The continued display module is configured to continue displaying the user interface elements on the initial loading page based on the first color if the image recognition result indicates that the difference between the first color and the color of the background image is greater than the preset color threshold.

[0088] In an optional embodiment, the number of the aforementioned user interface elements is at least one, and the aforementioned initial loading page display module includes:

[0089] The element display unit is configured to display each user interface element in the initial loading page by using a first color corresponding to each user interface element.

[0090] Accordingly, the aforementioned color adjustment module includes:

[0091] The fifth adjustment unit is configured to adjust the display of each user interface element from being based on its corresponding first color to being based on its corresponding second color.

[0092] The difference between the second color corresponding to each user interface element and the image area corresponding to each user interface element is greater than a preset color threshold; the image area corresponding to each user interface element is the area in the background image corresponding to the position of each user interface element.

[0093] In an optional embodiment, the color adjustment module described above includes:

[0094] The sixth adjustment unit is configured to perform image recognition based on the target image region to adjust the user interface elements from displaying based on the first color to displaying based on the second color.

[0095] Wherein, the target image region is the region in the cropped background image that corresponds to the position of the user interface element; the cropped background image is obtained by cropping the background image, the size of the cropped background image matches the size of the initial loading page, and the difference between the second color and the color of the target image region is greater than a preset color threshold.

[0096] According to a third aspect of the present disclosure, an electronic device for element display processing is provided, comprising: a processor; and a memory for storing processor-executable instructions; wherein the processor is configured to execute the instructions to implement the element display processing method as described above.

[0097] According to a fourth aspect of the present disclosure, a computer-readable storage medium is provided that, when instructions in the computer-readable storage medium are executed by a processor of a server, enables the server to perform the element display processing method as described above.

[0098] According to a fifth aspect of the present disclosure, a computer program product is provided, the computer program product including a computer program stored in a readable storage medium, wherein at least one processor of a computer device reads from the readable storage medium and executes the computer program, causing the device to perform the above-described element display processing method.

[0099] The technical solutions provided by the embodiments of this disclosure have at least the following beneficial effects:

[0100] This disclosure presents an initial loading page displaying user interface elements based on a first color. After a preset time has elapsed since the initial loading page was displayed, the user interface elements are switched from being displayed based on the first color to being displayed based on a second color, where the difference between the second color and the background image color is greater than a preset color threshold. This allows for dynamic color changes of UI elements after the preset loading page has elapsed, clearly distinguishing them from the background color, improving user experience, reducing UI element jumps, and minimizing resource consumption on the user's device, thus achieving real-time and intelligent adjustments. Furthermore, automatically and dynamically changing UI element colors after the preset loading page has elapsed reduces the complexity and time required for dynamic UI element changes, thereby adapting to rapidly changing activity requirements.

[0101] It should be understood that the above general description and the following detailed description are exemplary and explanatory only, and are not intended to limit this disclosure. Attached Figure Description

[0102] The accompanying drawings, which are incorporated in and form part of this specification, illustrate embodiments consistent with this disclosure and, together with the description, serve to explain the principles of this disclosure, and are not intended to unduly limit this disclosure.

[0103] Figure 1 This is a schematic diagram of the UI layout structure of a search AI dialogue scenario according to an exemplary embodiment.

[0104] Figure 2This is a schematic diagram illustrating the display of UI elements with an anthropomorphic background in a search scenario, according to an exemplary embodiment.

[0105] Figure 3 This is a schematic diagram of a multimedia data details page according to an exemplary embodiment. Figure 1 .

[0106] Figure 4 This is a schematic diagram illustrating an application environment for an element display processing method according to an exemplary embodiment.

[0107] Figure 5 This is a flowchart illustrating an element display processing method according to an exemplary embodiment. Figure 1 .

[0108] Figure 6 This is a schematic diagram illustrating an element display process according to an exemplary embodiment.

[0109] Figure 7 This is a schematic diagram illustrating a search service strategy architecture according to an exemplary embodiment.

[0110] Figure 8 This is a schematic diagram of a multimedia data details page according to an exemplary embodiment. Figure 2 .

[0111] Figure 9 This is a block diagram illustrating an element display processing apparatus according to an exemplary embodiment.

[0112] Figure 10 This is a block diagram illustrating an electronic device for element display processing according to an exemplary embodiment. Detailed Implementation

[0113] The technical solutions of the embodiments of the present invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some embodiments of the present invention, and not all embodiments. Based on the embodiments of the present invention, all other embodiments obtained by those skilled in the art without creative effort are within the scope of protection of the present invention.

[0114] It should be noted that the terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this disclosure are used to distinguish similar first objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this disclosure described herein can be implemented in orders other than those illustrated or described herein. The embodiments described in the following exemplary embodiments do not represent all embodiments consistent with this disclosure. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this disclosure as detailed in the appended claims.

[0115] Short video sharing platforms possess powerful artificial intelligence (AI) search capabilities. Users can quickly find content of interest through AI-powered Q&A and search. To provide an immersive search experience, the search results page offers features such as rich event atmospheres, and the AI ​​Q&A page provides anthropomorphic backgrounds. However, the images and colors of each event atmosphere and anthropomorphic background are different. This causes UI elements (such as text and buttons) to sometimes overlap with the background color, making it difficult for users to identify these UI elements and thus affecting the user experience.

[0116] Taking AI-powered search dialogue scenarios as an example, Figure 1 This is a schematic diagram of the UI layout structure for a search AI dialogue scenario, as shown in an exemplary embodiment. Figure 1 As shown, the UI layout of the AI ​​dialogue page consists of three overlapping layers: the bottom layer is the background atmosphere layer, the middle layer is the dialogue content layer, and the top layer is the navigation bar and input box layer. The dialogue content layer and the navigation bar and input box layer themselves have no background color, so the background atmosphere layer is not obscured and can be directly seen. From the user's perspective, from top to bottom, they are the top navigation bar area, the middle dialogue content area, and the bottom input area.

[0117] To enhance the user's conversational experience, a human-like background feature has been introduced. Figure 2 This is a schematic diagram illustrating the display of UI elements with an anthropomorphic background in a search scenario, according to an exemplary embodiment. Figure 2 As shown, different character background images are set for different characters in the background atmosphere layer. However, the background atmosphere layer is displayed in full screen, and each layer is superimposed. The navigation bar area will overlap with the background atmosphere. When the color of the elements in the navigation bar is similar to the color of the overlapping area of ​​the background, the user cannot see the navigation bar clearly, which reduces the user experience.

[0118] Taking the multimedia data details page as an example, Figure 3 This is a schematic diagram of a multimedia data details page according to an exemplary embodiment. Figure 1 ,like Figure 3As shown, the UI elements on the multimedia data details page are similar in color to the content on the multimedia data details page, making it difficult for users to see the navigation bar and reducing the user experience.

[0119] Based on this, in order to automatically adjust the color of UI elements according to the background image and ensure that UI elements are clearly visible under any background, applicable to scenarios with background overlay and adaptation requirements, this disclosure provides an element display processing method, device, electronic device and storage medium. During the background image loading process, this method can intelligently identify the background image color, transparency, brightness and other information of overlapping areas, dynamically adjust the color of the navigation bar area, make the navigation bar area clearly distinguishable from the background image, ensure UI visibility, and at the same time reduce page UI jumps and user device resource consumption through pre-loading, image dimensionality reduction, recognition and other processing.

[0120] Please see Figure 4 , Figure 4 This is a schematic diagram illustrating an application environment for an element display processing method according to an exemplary embodiment, such as... Figure 4 As shown, the application environment may include client 01 and server 02.

[0121] In an optional embodiment, client 01 can be used to display an initial loading page; after a preset time of displaying the initial loading page, the user interface elements are adjusted from being displayed based on the first color to being displayed based on the second color. Specifically, client 01 can be, but is not limited to, electronic devices such as smartphones, desktop computers, tablets, laptops, smart speakers, digital assistants, augmented reality (AR) / virtual reality (VR) devices, and smart wearable devices.

[0122] In an optional embodiment, server 02 can be used to provide background services to client 01. Exemplarily, server 02 can be a standalone physical server, a server cluster or distributed system composed of multiple physical servers, or a cloud server that provides basic cloud computing services such as cloud services, cloud databases, cloud computing, cloud functions, cloud storage, network services, cloud communication, middleware services, domain name services, security services, CDN (Content Delivery Network), and big data and artificial intelligence platforms.

[0123] In addition, it should be noted that, Figure 1 The example shown is merely one application environment of the element display processing method provided in this disclosure. Other application environments may exist in other scenarios, and this disclosure does not limit these.

[0124] Figure 5 This is a flowchart illustrating an element display processing method according to an exemplary embodiment. Figure 1 ,like Figure 5 As shown, this element indicates that the processing method is executed on the client side, and the method includes at least the following steps:

[0125] In step S11, an initial loading page is displayed; the initial loading page displays user interface elements based on a first color.

[0126] Optionally, the initial loading page can be any type of page, without specific limitations. For example, in a search AI dialogue scenario, the initial loading page could be a page used to load a background image. In other scenarios, the initial loading page could be a page that loads multimedia data, such as a multimedia data details page.

[0127] The initial loading page displays UI elements, and the color of these user interface elements is the primary color. Optionally, these UI elements may include, but are not limited to, text, buttons, titles, avatars, controls, etc.

[0128] It should be noted that this UI element can be displayed anywhere on the initial loading page, and this disclosure does not impose any specific limitations on it. Optionally, the initial loading page may display a UI element area, in which user interface elements can be displayed based on a first color. This UI element area can be set according to actual business needs, and there are no specific limitations on it. For example, this UI element area may include, but is not limited to: navigation bar, title bar, menu bar, address bar, status bar, browsing bar, etc. For a search AI dialogue scenario, this UI element area is the navigation bar. For a multimedia data details page, this UI element area may be the title bar, menu bar, etc.

[0129] In step S13, after a preset time for displaying the initial loading page, the user interface elements are changed from being displayed based on the first color to being displayed based on the second color; wherein the difference between the second color and the color of the background image of the initial loading page is greater than a preset color threshold.

[0130] In this embodiment of the present disclosure, during the preset time of displaying the initial loading page, the background image of the initial loading page can be recognized to obtain the image recognition result. Then, based on the image recognition result, the user interface elements are adjusted from displaying based on the first color to displaying based on the second color. When the background image recognition is completed, the UI element color can be dynamically changed according to the recognition result to make it clearly distinguishable from the background color, thereby reducing the waiting time and making the adjustment of UI element colors synchronously completed at the same time as the background image recognition is completed.

[0131] Optionally, the difference between the second color and the background image color is greater than a preset color threshold, that is, the second color and the background image color are clearly distinguishable, thereby ensuring the visibility of UI elements.

[0132] It should be noted that this preset time can be set according to actual business needs and is not specifically limited. In the search AI dialogue scenario, this preset time can be the time for loading the background image and the time for performing image recognition processing on the background image during the loading process to obtain the image recognition result. In the multimedia data details page scenario, this preset time is the time for performing image recognition processing on the background image to obtain the image recognition result.

[0133] Therefore, the colors of UI elements can be dynamically changed after a preset time has elapsed since the initial page load time, making them clearly distinguishable from the background color, thus improving the user experience and reducing UI element jumps and resource consumption on the user's device. This enables real-time and intelligent adjustments. Furthermore, automatically and dynamically changing UI element colors after a preset time has elapsed since the initial page load time reduces the complexity and time required for dynamic UI element changes, allowing for adaptation to rapidly changing event requirements.

[0134] In an optional embodiment, step S11 above, displaying the initial loading page, may include:

[0135] Display the target page; the target page includes a target control, which is used to trigger the initial loading of the page, as well as to perform operations such as loading the background image and performing image recognition processing on the background image during the loading process to obtain the image recognition result.

[0136] In response to a trigger action on the target control, display the initial loading page.

[0137] Accordingly, in step S13 above, the step of adjusting the display of user interface elements from based on the first color to based on the second color after a preset time for displaying the initial loading page may include:

[0138] After the initial loading page is displayed for a preset time, a background image is displayed in the layer below the user interface elements in the initial loading page, and the user interface elements are adjusted from displaying based on the first color to displaying based on the second color based on the image recognition results of the background image.

[0139] The preset time is the time for loading the background image and for performing image recognition processing on the background image during the loading process to obtain the image recognition result.

[0140] Optionally, the target page can be a page in various scenarios that require background overlay, adaptation, etc. For short video applications, the target page can be various pages within the short video application, such as the search page in a search AI dialogue scenario.

[0141] Optionally, the target control can be of various types, which can generate an initial page loading instruction and an intelligent calculation processing instruction when triggered by the user. The terminal responds to the initial page loading instruction and the intelligent calculation processing instruction to display the initial page loading, and perform operations such as loading the background image and performing image recognition processing on the background image to obtain the image recognition result.

[0142] It should be noted that the target control can be displayed anywhere on the target page, without any restrictions.

[0143] In this embodiment, the server can pre-deploy data such as the event atmosphere, background image, and image recognition strategy configuration to the client. When a user account triggers the target control, it can generate an initial loading page loading command and an intelligent calculation processing command. The client responds to these commands by displaying the initial loading page. Simultaneously, the client loads a background image from the background image deployed by the server. During the loading process, the client performs image recognition processing on the background image based on the image recognition measurements deployed by the server to obtain the image recognition result. This initial loading page allows the client time to pre-load and process the background image, ensuring that the UI element color adjustments are completed synchronously after the background image loading is finished.

[0144] In this embodiment, the initial page loading time is approximately the same as the time for intelligent computing (loading the background image and performing image recognition processing on the background image during loading to obtain the image recognition result). After a preset time for displaying the initial page loading, i.e., after loading the background image and performing image recognition processing on the background image during loading to obtain the image recognition result, the background image can be displayed in the layer below the user interface elements on the initial page, indicating that the background image loading is complete. Simultaneously, based on the image recognition result, the user interface elements are adjusted from displaying based on a first color to displaying based on a second color. This allows for background image recognition processing while the background image is loading, and dynamically changes the UI element color based on the recognition result when the background image loading is complete, making it clearly distinguishable from the background color. This reduces the waiting time after the background image loads successfully, ensuring that the UI element color adjustment is completed simultaneously with the image loading.

[0145] Optionally, the UI layout structure of the target page can be a multi-layered structure, with the bottom layer being the background image layer and the top layer being the UI element display layer. Therefore, after the image recognition process is completed, the background image can be displayed in the layer below the UI element, thus completing the background image loading.

[0146] Optionally, the difference between the second color and the background image color is greater than a preset color threshold, that is, the second color and the background image color are clearly distinguishable, thereby ensuring the visibility of UI elements.

[0147] Therefore, the background image can be recognized and processed simultaneously with its loading. Upon completion of the background image loading, the UI element colors can be dynamically changed based on the recognition results, clearly distinguishing them from the background color. This reduces the waiting time after the background image loads successfully, ensuring that UI element color adjustments are completed synchronously with image loading, thus improving the user experience. Furthermore, by pre-loading and recognizing the background image, the system can reduce UI element jumps and resource consumption on the user's device, enabling real-time and intelligent adjustments. In addition, by pre-loading and recognizing the background image, UI element colors can be automatically and dynamically changed upon completion of the background image loading, reducing the complexity and time required for dynamic UI element changes, thereby adapting to rapidly changing event requirements.

[0148] In an optional embodiment, in step S11 above, the target page includes a search page, and the target control includes an AI dialogue control; then the displayed target page may include:

[0149] Display the search page; display AI-powered conversational controls in the area surrounding the search box or search results on the search page.

[0150] Accordingly, in response to a triggering operation on the target control, the initial loading page is displayed, including:

[0151] In response to a trigger action on the AI ​​dialogue control, the initial loading page is displayed within a preset time.

[0152] In this embodiment, taking a search AI dialogue scenario as an example, the target page can be a search page, and the target control can be an AI dialogue control, an AI question-and-answer card on the results page, etc. Optionally, the search page can include, but is not limited to: the search homepage, the search results page, and AI question-and-answer cards on the search page. The AI ​​dialogue control can be of various types, and this disclosure does not limit the form of the control.

[0153] In AI-powered search scenarios, user accounts can display search pages within short video applications. Figure 6 This is a schematic diagram illustrating an element display process according to an exemplary embodiment, such as... Figure 6 As shown in 'a', when the search page is the search homepage, the AI ​​dialogue control (AI control) can be displayed in the area surrounding the search box on the search homepage. For example... Figure 6 As shown in b, when the search page is a search results page, the AI ​​dialogue control (AI control) can be displayed in the area surrounding the search box on the search results page, or in the area below the search results page, an AI Q&A card can be displayed. When the target control is an AI dialogue control, if a user account wants to engage in AI dialogue, they can click on the AI ​​dialogue control. The client responds to this click operation and displays the initial loading page within a preset time.

[0154] Therefore, in AI dialogue search scenarios, an AI dialogue control can be displayed on the search page so that users can quickly access the AI ​​dialogue page and engage in intelligent dialogue by triggering the AI ​​dialogue control. This transforms traditional search into a question-and-answer format to obtain the required information and improves the user experience.

[0155] In an optional embodiment, the above-described response to a triggering operation on the target control, displaying the initial loading page within a preset time, may include:

[0156] In response to a trigger operation on the AI ​​dialogue control, the initial loading page is displayed within a preset time, and a background image is loaded. During the loading of the background image, image recognition processing is performed on the background image to obtain the image recognition result.

[0157] In the AI ​​dialogue search scenario, when a user interacts with the AI ​​dialogue control, a corresponding instruction can be triggered. The client responds to the instruction and displays the initial loading page. At the same time, the client initiates a network request to load a background image from the background image sent by the server. During the loading of the background image, the background image is processed by image recognition measurement sent by the server to obtain the image recognition result.

[0158] Therefore, background image loading and recognition processing can be performed simultaneously when the initial loading page is displayed. This initial loading page allows the client time to load and recognize the background image in advance, ensuring that the UI element color adjustment is completed synchronously after the background image is loaded. This reduces the waiting time after the background image is successfully loaded, reduces page UI transitions and the consumption of terminal resources, and improves the user experience.

[0159] In an optional embodiment, the initial loading page includes an element bar area, an input area, and a dialogue content area. The process of displaying the initial loading page within a preset time in response to a trigger operation on the AI ​​dialogue control includes:

[0160] In response to a trigger action on the AI ​​dialogue control, display user interface elements in the element bar area, display input boxes in the input area, and display loading prompts in the dialogue content area;

[0161] The loading prompt message indicates that the operation of loading a background image and performing image recognition processing on the background image to obtain the image recognition result is currently being performed.

[0162] Continue as Figure 6 In the AI ​​dialogue search scenario, from the user's perspective, the initial loading page of the AI ​​dialogue page, viewed from top to bottom, includes a top element bar area, a middle dialogue content area, and a bottom input area. After the user interacts with the AI ​​dialogue control, a corresponding command can be triggered. The terminal responds to the command by displaying user interface elements in the element bar area, an input box in the input area, and a loading prompt message in the dialogue content area.

[0163] Optionally, for AI-driven search scenarios, this element bar area can be a navigation bar area, and the user interface elements can include, but are not limited to, dialogue controls, chat controls, and role search controls.

[0164] Optionally, the loading prompt can be displayed in the form of an image, text, etc., without limitation. In one approach, the loading prompt is displayed as an icon corresponding to the AI. In another approach, the loading prompt is displayed as text, which may include phrases such as "Currently performing operations to load the background image and obtain the image recognition result, please wait patiently," etc.

[0165] Therefore, for AI-powered search scenarios, when the AI ​​dialogue control is triggered, on the one hand, user interface elements are displayed in the element bar area and input boxes are displayed in the input area, which can transform traditional search into a question-and-answer format to obtain the required information and improve the user experience; on the other hand, loading prompts are displayed in the dialogue content area, which can conveniently inform users that the current operation of loading background images and performing image recognition processing on background images to obtain image recognition results can be performed, further improving the user experience.

[0166] In an optional embodiment, the step described above, where the background image is displayed in the next layer below the user interface elements on the initial loading page after a preset time has elapsed, may include:

[0167] After the initial loading page has been displayed for a preset time, the dialog information is displayed in the next layer below the user interface elements, and the background image is displayed in the next layer below the dialog information.

[0168] The dialogue information is displayed in the dialogue content area, with the background image revealing the user interface elements and the dialogue content.

[0169] like Figure 6 As shown in d, in the AI ​​dialogue search scenario, since the UI layout structure of the AI ​​dialogue page is a three-layer superposition, the bottom layer is the background atmosphere layer, the middle layer is the dialogue content layer, and the top layer is the navigation bar + input box layer, after the preset time of the initial loading page is displayed, that is, after the operation of loading the background image and the operation of recognizing the background image to obtain the image recognition result during the loading of the background image, the dialogue information can be displayed immediately in the next layer of the user interface elements, and the background image can be displayed in the next layer of the dialogue information.

[0170] Optionally, the dialogue content is displayed in the middle dialogue content area. Since the dialogue content layer and the navigation bar + input box layer themselves have no background color, the background image will not be obscured and can be directly seen.

[0171] Optionally, in the AI ​​dialogue search scenario, the background image can be a personified background image. That is, different character background images are set in the background atmosphere layer according to different roles. The dialogue information displayed after the background image is loaded can be the initial information before the user initiates a dialogue. This initial information may include a dialogue card and a dialogue template. The dialogue card displays the character introduction information of the personified role corresponding to the background image. The dialogue template information can be pre-set dialogue content for the user to engage in dialogue with the personified role.

[0172] Therefore, after the initial loading page has been displayed for a preset time, that is, after the background image is processed and the image recognition result is obtained during the loading process, the dialogue information is immediately displayed in the next layer of the user interface elements, and the background image is displayed in the next layer of the dialogue information. This allows the loading of the background image and the display of the dialogue information to be completed synchronously, reducing the waiting time after the image is successfully loaded, reducing page UI transitions and the consumption of terminal resources, and improving the user experience.

[0173] In an optional embodiment, since the initial loading page displays loading prompts, once the background image has finished loading, dialog information is displayed in the next layer below the user interface elements. After the background image is displayed in the next layer below the dialog information, the loading prompts need to be removed from the dialog content area to avoid interfering with the user experience and further improve the user experience.

[0174] It should be noted that the process of displaying the initial loading page described above can be implemented in several ways, and no specific limitation is made. In one method, if the user does not perform any operation during the display of the initial loading page, the terminal will load the background image from the background image sent by the server by default.

[0175] In another approach, where the background image is an anthropomorphic image and the user interface elements include character lookup elements, loading the background image within a preset time period could include:

[0176] In response to a trigger action targeting a character search element within a preset time period, a character search page is displayed; the character search page displays at least one character. In response to a trigger action targeting a target character among the at least one character, an anthropomorphic background image including the target character is loaded.

[0177] Accordingly, a background image is displayed in the lower layer below the user interface elements on the initial loading page, including:

[0178] Located below the user interface elements on the initial loading page, it displays an anthropomorphic background image that includes the target character.

[0179] In this embodiment, continue as follows Figure 6 As shown in 'c', the user interface elements can include a character search element, used to search for characters, such as a "Find Character" control. When a user needs to select an anthropomorphic background image of interest, they can interact with this character search element to trigger a corresponding command. The terminal responds to this command by displaying a character search page, which shows at least one character. The user can select a target character from the at least one character. The terminal responds to this selection by loading the anthropomorphic background image containing the target character, and displays it on the initial loading page, below the user interface elements. Therefore, the character search element allows users to conveniently select and load anthropomorphic background images of interest, further enhancing the user experience.

[0180] In other embodiments, continue as follows Figure 6As shown in 'c', the background image is an anthropomorphic background image. The initial loading page displays a character replacement control, which replaces the default anthropomorphic background image selected by the terminal with an anthropomorphic background image of interest to the user. In this embodiment, the loading prompt information displayed on the initial loading page can also indicate the type of the character in the currently loaded anthropomorphic background image. If the character type is not of interest to the user, the user can click the "character replacement control." In response, the terminal displays a character replacement page, which shows at least one character to be replaced. The user can select a character to replace from these characters, and the terminal, in response to this selection, replaces the currently loaded background image with the anthropomorphic background image corresponding to the character to be replaced. Thus, even when the background image loaded on the terminal is not of interest to the user, the anthropomorphic background image can be replaced in response to the user clicking the character replacement control, ensuring that the final loaded background image is of interest to the user, further enhancing the user experience.

[0181] In an optional embodiment, displaying the initial loading page within a preset time in response to a triggering operation on the target control may include:

[0182] In response to a trigger operation on the target control, the initial loading page is displayed, and a background image is loaded within a preset time. During the loading of the background image, the background image is cropped to obtain a cropped background image. The size of the cropped background image matches the size of the target page.

[0183] Get the target position of the user interface element in the initially loaded page.

[0184] Identify the target image region corresponding to the target location from the cropped background image.

[0185] Image recognition processing is performed on the target image region to obtain the image recognition result of the target image region.

[0186] Accordingly, the above-mentioned adjustment of the user interface elements from displaying based on a first color to displaying based on a second color may include:

[0187] Based on the image recognition results of the target image region, the user interface elements are adjusted from being displayed based on the first color to being displayed based on the second color.

[0188] The target image region is the area in the cropped background image that corresponds to the position of the user interface element; the cropped background image is obtained by cropping the background image, and the size of the cropped background image matches the size of the initial loaded page; the difference between the second color and the color of the target image region is greater than a preset color threshold.

[0189] Figure 7 This is a schematic diagram illustrating a search service strategy architecture according to an exemplary embodiment, such as... Figure 7 As shown, the server can pre-deploy data such as the event atmosphere, background image, and image recognition strategy configuration to the client. When a user account triggers the target control, it generates an initial loading page loading command and an intelligent calculation processing command. The client responds to these commands by displaying the initial loading page. Simultaneously, within a preset time, the client loads the background image from the background image sent by the server. During this loading process, the client performs image recognition processing on the background image based on the image recognition measurements sent by the server to obtain the image recognition result. This initial loading page allows the client time to pre-load and process the background image, ensuring that the UI element colors are adjusted synchronously after the background image loading is complete.

[0190] Optionally, this process can be implemented in three parts:

[0191] I. Image Preprocessing

[0192] To improve user experience and reduce latency during image loading, image processing is performed in advance during background image loading. This process includes cropping and recognition, ensuring that recognition is completed simultaneously with successful image loading, allowing UI control colors to respond quickly to changes.

[0193] Optionally, the image preprocessing process may include image loading and cropping. The background image can be cropped during the loading process to obtain a cropped background image. The size of the cropped background image should match the size of the target page; that is, the size of the cropped image should match the actual display area to ensure the accuracy of subsequent recognition work.

[0194] Since devices with different screen sizes load images of varying sizes, pre-cropping ensures that the processed image matches the display area, avoiding unnecessary computational overhead in subsequent processing. Pre-processing background image recognition allows UI control color adjustments to be completed simultaneously with image loading, providing a smoother user experience.

[0195] II. Image Dimensionality Reduction Recognition

[0196] To further improve processing efficiency, this disclosure can identify only the image color of the area corresponding to the UI control, instead of identifying the entire image. This reduces computational load and saves time and resources. The image dimensionality reduction recognition process can include the identification of the UI control area and the processing of the area image.

[0197] For UI control area recognition: After image loading and cropping, the terminal can obtain the target position of the user interface element in the initially loaded page and map it to the cropped target image area. This limits the processing scope to the part covered by the UI control, reducing the amount of computation. Furthermore, image recognition processing is performed only on the target image area, i.e., the image area corresponding to the UI control, to obtain the image recognition result, avoiding redundant calculations from full-image recognition.

[0198] In this embodiment, by processing only the image area corresponding to the UI control, the number of pixels that need to be processed can be significantly reduced, thereby improving recognition efficiency and reducing the computational burden on the device.

[0199] III. Dynamic Adjustment of Image Recognition Strategy

[0200] 1) Design of multiple recognition strategies

[0201] In one approach, image recognition of a target image region can refer to color recognition of that region. Specifically, pixel information of the target image region can be extracted, and color statistical analysis can be performed on the extracted pixel information to obtain the average color of the target image region. A color adjustment scheme is then determined based on the average color of the target image region. For example, if the average color is in a bright area, the color of the user interface elements is dynamically adjusted to black; if the average color is in a dark area, the color of the user interface elements is dynamically adjusted to white.

[0202] In other approaches, to address different use cases and user needs, client applications can dynamically employ various recognition strategies. These strategies are issued by the server based on specific circumstances, and the client selects the appropriate algorithm for image processing and recognition based on the received strategy type. Recognition strategies are not limited to calculating the average color of an image and can also include:

[0203] HSV color model analysis: Calculate the average color of the extracted region, convert it to the HSV color model, determine the color brightness, and determine the color adjustment scheme based on the color brightness. For example, if the color brightness indicates that the color is in a bright area, the color of the user interface element will be dynamically adjusted to black; if the color brightness indicates that the color is in a dark area, the color of the user interface element will be dynamically adjusted to white.

[0204] Grayscale processing: Convert the extracted image area into a grayscale image, analyze the distribution and average value of the grayscale values, and determine the color adjustment scheme based on the distribution and average value of the grayscale values.

[0205] For example, the formula Gray = R * 0.299 + G * 0.587 + B * 0.114 can be used to convert the extracted image area to grayscale, where Gray is the grayscale value, R is the red value of the extracted primary color of the image, G is the green value of the extracted primary color of the image area, and B is the blue value of the extracted primary color of the image area. This converts the RGB color values ​​of the obtained image area's primary color to grayscale values. When the grayscale value is between 0 and 0.5, the user interface element color automatically becomes black; when the grayscale value is between 0.5 and 1, the user interface element color automatically becomes white. After converting the RGB color values ​​to grayscale values ​​using the above formula, if the grayscale value is between 0 and 0.5, it means that the primary color value of the image currently displayed on the screen is in the bright area, so the user interface element color should be changed to black; when the grayscale value is between 0.5 and 1, it means that the primary color value of the image currently displayed on the screen is in the dark area, so the user interface element color should be changed to white.

[0206] Edge detection: Identify the main visual elements in an image using edge detection algorithms, determine the color characteristics of the main visual elements, and determine a color adjustment scheme based on the color characteristics of the main visual elements.

[0207] For example, if the color characteristic of the main visual element is in the light color area, the color of the user interface element will be dynamically adjusted to black; if the color characteristic of the main visual element is in the dark color area, the color of the user interface element will be dynamically adjusted to white.

[0208] 2) Dynamic distribution of identification strategies

[0209] The server dynamically sends different recognition strategy types to the client based on the actual situation. After receiving the strategy type, the client selects the corresponding recognition method for processing according to the built-in recognition strategy code.

[0210] 3) Flexibility in strategy adjustment

[0211] By dynamically distributing recognition strategies on the server side, the method of color recognition for UI controls can be flexibly adjusted according to different application scenarios and user needs, ensuring the best UI display effect in various scenarios.

[0212] In an optional embodiment, the above-described adjustment of the user interface elements from a display based on a first color to a display based on a second color includes:

[0213] If the image recognition result of the background image indicates that the color of the background image is dark, and the difference between the first color and the color of the background image is less than or equal to a preset color threshold, the user interface elements will be adjusted from being displayed based on the first color to being displayed based on white.

[0214] If the image recognition result indicates that the background image color is bright and the difference between the first color and the background image color is less than or equal to a preset color threshold, the user interface elements will be changed from being displayed based on the first color to being displayed based on black.

[0215] Optionally, the image recognition result can be average color, color brightness, distribution and average value of grayscale values, color features of main visual elements, etc.

[0216] If the image recognition result indicates that the background image is dark and the difference between the first color and the background image is less than or equal to the preset color threshold, it means that the first color and the background image overlap, making it difficult for users to distinguish these UI elements and thus affecting the user experience. In this case, the user interface elements can be changed from being displayed based on the first color to being displayed based on white.

[0217] If the image recognition result indicates that the background image color is bright and the difference between the first color and the background image color is less than or equal to the preset color threshold, it means that the first color and the background image color overlap, making it difficult for users to distinguish these UI elements, thus affecting the user experience. In this case, the user interface elements can be changed from being displayed based on the first color to being displayed based on black.

[0218] Continue as Figure 6 As shown in d, the color of the area corresponding to the UI element in the background image is dark, and the first color is black. The difference between the first color and the color of the background image is less than or equal to the preset color threshold, that is, the first color and the background image basically overlap, and it is difficult for users to distinguish these UI elements. Based on this, the UI element can be displayed in white, so that the color of the UI element does not overlap with the background image.

[0219] Therefore, the colors of UI elements can be dynamically adjusted based on the image recognition results as the background image is loaded, making them clearly distinguishable from the background image colors and improving the user experience.

[0220] In an optional embodiment, the above method may further include:

[0221] If the image recognition result indicates that the difference between the first color and the background image color is greater than a preset color threshold, the user interface elements will continue to be displayed based on the first color on the initial loading page.

[0222] In this embodiment, if the image recognition result indicates that the difference between the first color and the background image color is greater than a preset color threshold, indicating that the first color and the background image color do not overlap, then while displaying the background image in the next layer of the user interface element, the display color of the user interface element can continue to be displayed based on the first color without dynamically adjusting it. Therefore, even when the first color and the background image color do not overlap, the display color of the user interface element can be displayed without dynamically adjusting it according to the image recognition result, reducing the consumption of device resources.

[0223] In some embodiments, if the initial loading page includes a multimedia data details page, then displaying the initial loading page may include:

[0224] The multimedia data details page is displayed, which includes a background image and user interface elements displayed based on a first color.

[0225] Accordingly, after a preset time for displaying the initial loading page, adjusting the display of user interface elements from based on the first color to based on the second color can include:

[0226] After a preset time has elapsed since the multimedia data details page was displayed, the user interface elements are adjusted from being displayed based on the first color to being displayed based on the second color, based on the image recognition results of the background image.

[0227] The preset time is the time required to perform image recognition processing on the background image to obtain the image recognition result.

[0228] In this embodiment, for the multimedia data details page, a background image is already displayed on the page when it is shown. This background image can be considered as the multimedia data itself within the multimedia data details page. Simultaneously, user interface elements are displayed on the multimedia data details page based on a first color.

[0229] During the display of multimedia data details pages, the client can perform image recognition processing on the background image to obtain the image recognition result. After a preset time, i.e., after the image recognition process is completed, the client adjusts the display of user interface elements from a first-color-based to a second-color-based display based on the image recognition result. This allows for automatic and dynamic color changes to UI elements after the background image recognition process is complete, ensuring a clear distinction between the UI and background colors and enhancing the user experience. Figure 8 This is a schematic diagram of a multimedia data details page according to an exemplary embodiment. Figure 2 ,like Figure 8As shown, after processing using the technical solution disclosed herein, the colors of the UI elements on the multimedia data details page are significantly different from the content on the multimedia data details page, allowing users to clearly see the navigation bar and resulting in a better user experience.

[0230] In another alternative embodiment, the number of the aforementioned user interface elements is at least one, and the aforementioned display of the initial loading page includes:

[0231] Each user interface element is displayed on the initial loading page using its own primary color.

[0232] Accordingly, the above-mentioned adjustment of the user interface elements from displaying based on the first color to displaying based on the second color includes:

[0233] The display of each user interface element, previously based on its corresponding first color, is now changed to be based on its corresponding second color.

[0234] Among them, the difference between the second color corresponding to each user interface element and the image area corresponding to each user interface element is greater than a preset color threshold; the image area corresponding to each user interface element is the area in the background image corresponding to the position of each user interface element.

[0235] In this embodiment, when there is at least one user interface element, the color of each user interface element can be the same or different. Each user interface element can be displayed on the initial loading page using its own corresponding first color.

[0236] During the recognition process, the client can obtain the position of each user interface element and extract the corresponding region from the background image. This results in an image region for each user interface element, which is then processed for image recognition. Based on this result, the display of each user interface element is adjusted from being based on its first color to being based on its second color. The difference between the second color and the corresponding image region of each user interface element must exceed a preset color threshold. Because the display color of different user interface elements is automatically adjusted based on the image recognition results of their corresponding regions, the color difference between each element and its corresponding region is significantly increased, making them clearly distinguishable from the background color and further enhancing the user experience.

[0237] The following example, using a search AI dialogue scenario, illustrates the overall process of processing the aforementioned elements:

[0238] 1) Users can click on target controls (e.g., AI dialogue controls) on target pages such as the search homepage, search results page, and AI Q&A cards on the results page to enter the AI ​​dialogue page, where they can then engage in intelligent dialogue, transforming traditional search into a question-and-answer format to obtain the information they need.

[0239] 2) Upon entering the dialog page, the entire page is initially in a loading state. This dialog page can be defined as the initial loading page, which displays user interface elements based on the first color. Simultaneously, the client initiates a network request to retrieve data such as the event atmosphere, background image, and image recognition strategy configuration from the server.

[0240] 3) After the client retrieves data such as the event atmosphere, background image, and image recognition strategy configuration from the server, it begins loading the background image. During the loading process, image recognition processing is performed on the background image to obtain the recognition result. Simultaneously with the background image loading complete—that is, while displaying the background image in the layer below the user interface elements on the initial loading page—the user interface elements are adjusted from displaying based on a first color to displaying based on a second color, based on the image recognition result. The difference between the second color and the background image color is greater than a preset color threshold, meaning the second color is clearly distinguishable from the background image color.

[0241] Implementing this disclosure has the following beneficial effects:

[0242] 1) Excellent user experience: For AI dialogue search scenarios, this invention performs image recognition processing by pre-processing images, so that the colors of UI elements such as titles and buttons are set in advance, and the timing is basically the same as the loading of background images. This avoids the abrupt feeling of color change after waiting, thus greatly improving the user experience.

[0243] 2) Saves device resources: The entire element display processing method is handled on the client side, reducing server resource consumption and speeding up server data return. Simultaneously, only the required area of ​​the image is calculated, reducing overall computational load, accelerating color settings, and minimizing user device resource consumption.

[0244] 3) Dynamic adaptation: By issuing different recognition strategies from the server, the client can dynamically adapt to different background images and UI control requirements, improving the system's flexibility and scalability.

[0245] This disclosure also provides an element display processing device. Figure 9 This is a block diagram illustrating an element display processing apparatus according to an exemplary embodiment. (Refer to...) Figure 9 As shown, the device includes:

[0246] The initial loading page display module 21 is configured to display an initial loading page; the initial loading page displays user interface elements based on a first color.

[0247] Color adjustment module 23 is configured to adjust the display of the user interface elements from the first color display to the second color display after a preset time of displaying the initial loading page;

[0248] Wherein, the difference between the second color and the color of the background image of the initially loaded page is greater than a preset color threshold.

[0249] In an optional embodiment, the initial loading page display module includes:

[0250] The target page display unit is configured to display a target page; the target page includes target controls.

[0251] The target control trigger response unit is configured to perform a response to a trigger operation on the target control and display the initial loading page.

[0252] Accordingly, the aforementioned color adjustment module includes:

[0253] The first adjustment unit is configured to, after a preset time for displaying the initial loading page, display the background image in the layer below the user interface element in the initial loading page, and adjust the user interface element from displaying based on the first color to displaying based on the second color based on the image recognition result of the background image;

[0254] The preset time is the time for loading the background image and for performing image recognition processing on the background image during the loading process to obtain the image recognition result.

[0255] In an optional embodiment, the target page includes a search page, and the target control includes an AI dialogue control; the target page display unit includes:

[0256] The search page display subunit is configured to display the search page; the AI ​​dialogue control is displayed in the area surrounding the search box or the search results on the search page.

[0257] The target control trigger response unit mentioned above includes:

[0258] The intelligent dialogue control triggering subunit is configured to perform a triggering operation in response to the artificial intelligence dialogue control and display the initial loading page within the preset time.

[0259] In an optional embodiment, the initial loading page includes an element bar area, an input area, and a dialogue content area, and the intelligent dialogue control triggering subunit includes:

[0260] The area display subunit is configured to perform a response to a trigger operation on the AI ​​dialogue control, displaying the user interface element in the element bar area, displaying an input box in the input area, and displaying a loading prompt message in the dialogue content area;

[0261] The loading prompt information is used to indicate that the operation of loading a background image and performing image recognition processing on the background image to obtain the image recognition result is currently being performed.

[0262] In an optional embodiment, the first adjustment unit includes:

[0263] The dialogue background display subunit is configured to display dialogue information in the next layer below the user interface elements and the background image in the next layer below the dialogue information after a preset time has elapsed since the initial loading page was displayed.

[0264] The dialogue information is displayed in the dialogue content area, and the background image reveals the user interface elements and the dialogue content display.

[0265] In an optional embodiment, the apparatus further includes:

[0266] The cancel display module is configured to cancel the display of the loading prompt information in the dialog content area.

[0267] In an optional embodiment, the background image is an anthropomorphic background image, the user interface elements include character lookup elements, and the device further includes:

[0268] The character search page display module is configured to respond to a trigger operation on the character search element within the preset time and display the character search page; the character search page displays at least one character.

[0269] An anthropomorphic background image loading module is configured to perform an anthropomorphic background image including the target character in response to a trigger operation for the at least one character.

[0270] Accordingly, the aforementioned first adjustment unit includes:

[0271] The anthropomorphic background image display subunit is configured to operate in the layer below the user interface element on the initial loading page, displaying an anthropomorphic background image including the target character.

[0272] In an optional implementation, the initial loading page includes a multimedia data details page, and the aforementioned initial loading page display module includes:

[0273] The multimedia data details page display unit is configured to display the multimedia data details page, which displays the background image and user interface elements based on a first color.

[0274] Accordingly, the aforementioned color adjustment module includes:

[0275] The second adjustment unit is configured to, after a preset time for displaying the multimedia data details page, adjust the user interface elements from displaying based on the first color to displaying based on the second color, based on the image recognition result of the background image;

[0276] Wherein, the preset time is the time for the operation of recognizing the background image to obtain the image recognition result; the adjustment of the user interface element from displaying based on the first color to displaying based on the second color includes:

[0277] In an optional embodiment, the color adjustment module described above includes:

[0278] The third adjustment unit is configured to adjust the display of the user interface element from displaying based on the first color to displaying based on white when the image recognition result of the background image indicates that the color of the background image is dark and the difference between the first color and the color of the background image is less than or equal to the preset color threshold.

[0279] The fourth adjustment unit is configured to adjust the display of the user interface element from being based on the first color to being based on black when the image recognition result indicates that the color of the background image is a bright color and the difference between the first color and the color of the background image is less than or equal to the preset color threshold.

[0280] In an optional embodiment, the above-described apparatus further includes:

[0281] The continued display module is configured to continue displaying the user interface elements on the initial loading page based on the first color if the image recognition result indicates that the difference between the first color and the color of the background image is greater than the preset color threshold.

[0282] In an optional embodiment, the number of the aforementioned user interface elements is at least one, and the aforementioned initial loading page display module includes:

[0283] The element display unit is configured to display each user interface element in the initial loading page by using a first color corresponding to each user interface element.

[0284] Accordingly, the aforementioned color adjustment module includes:

[0285] The fifth adjustment unit is configured to adjust the display of each user interface element from being based on its corresponding first color to being based on its corresponding second color.

[0286] The difference between the second color corresponding to each user interface element and the image area corresponding to each user interface element is greater than a preset color threshold; the image area corresponding to each user interface element is the area in the background image corresponding to the position of each user interface element.

[0287] In an optional embodiment, the color adjustment module described above includes:

[0288] The sixth adjustment unit is configured to perform image recognition based on the target image region to adjust the user interface elements from displaying based on the first color to displaying based on the second color.

[0289] Wherein, the target image region is the region in the cropped background image that corresponds to the position of the user interface element; the cropped background image is obtained by cropping the background image, the size of the cropped background image matches the size of the initial loading page, and the difference between the second color and the color of the target image region is greater than a preset color threshold.

[0290] The electronic device can be a terminal, a server, or a similar computing device. Taking a server as an example... Figure 10This is a block diagram illustrating an electronic device 30 for element display processing according to an exemplary embodiment. The electronic device 30 can vary significantly due to different configurations or performance characteristics and may include one or more Central Processing Units (CPUs) 31 (CPUs 31 may include, but are not limited to, microprocessors (MCUs) or programmable logic devices (FPGAs), a memory 33 for storing data, and one or more storage media 32 (e.g., one or more mass storage devices) for storing application programs 323 or data 322. The memory 33 and storage media 32 may be temporary or persistent storage. The program stored in the storage media 32 may include one or more modules, each module including a series of instruction operations on the electronic device. Furthermore, the CPU 31 may be configured to communicate with the storage media 32 and execute the series of instruction operations in the storage media 32 on the electronic device 30. Electronic device 30 may also include one or more power supplies 36, one or more wired or wireless network interfaces 35, one or more input / output interfaces 34, and / or one or more operating systems 321, such as Windows Server™, Mac OS X™, Unix™, Linux™, FreeBSD™, etc.

[0291] The input / output interface 34 can be used to receive or send data via a network. Specific examples of the network described above may include a wireless network provided by the communication provider of the electronic device 30. In one example, the input / output interface 34 includes a network interface controller (NIC), which can connect to other network devices via a base station to communicate with the Internet. In an exemplary embodiment, the input / output interface 34 may be a radio frequency (RF) module for wireless communication with the Internet.

[0292] Those skilled in the art will understand that Figure 10 The structure shown is for illustrative purposes only and does not limit the structure of the aforementioned electronic device. For example, electronic device 30 may also include... Figure 10 The more or fewer components shown, or having the same Figure 10 The different configurations shown.

[0293] In an exemplary embodiment, a computer-readable storage medium is also provided, which, when executed by a processor of an electronic device, enables the electronic device to perform the steps of the processing method shown in any of the above embodiments.

[0294] In an exemplary embodiment, a computer program product is also provided, including a computer program that, when executed by a processor, implements the element display processing method provided in any of the above embodiments.

[0295] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. This computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this disclosure can include non-volatile and / or volatile memory. Non-volatile memory can include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory can include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in various forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and RAMbus dynamic RAM (RDRAM), etc.

[0296] Other embodiments of this disclosure will readily occur to those skilled in the art upon consideration of the specification and practice of the invention disclosed herein. This disclosure is intended to cover any variations, uses, or adaptations of this disclosure that follow the general principles of this disclosure and include common knowledge or customary techniques in the art not disclosed herein. The specification and examples are to be considered exemplary only, and the true scope and spirit of this disclosure are indicated by the following claims.

[0297] It should be understood that this disclosure is not limited to the precise structures described above and shown in the accompanying drawings, and various modifications and changes can be made without departing from its scope. The scope of this disclosure is limited only by the appended claims.

Claims

1. A method for processing element display, characterized in that, The method includes: In response to a trigger operation on a target control, an initial loading page is displayed; the target control includes an AI dialogue control; the initial loading page displays user interface elements based on a first color; the user interface elements include a character search element; In response to a trigger operation targeting a character search element within a preset time period, a character search page is displayed; the character search page displays at least one character. In response to a trigger operation targeting a target character among at least one character roles, a background image is loaded; the background image is an anthropomorphic background image including the target character role. After a preset time has elapsed since the initial loading page was first displayed, the background image is displayed on the layer below the user interface element on the initial loading page. Based on the image recognition result of the background image, the user interface element is adjusted from displaying based on the first color to displaying based on the second color. The preset time is the time for loading the background image and for performing image recognition processing on the background image during the loading process to obtain the image recognition result. The difference between the second color and the color of the background image on the initial loading page is greater than a preset color threshold.

2. The method according to claim 1, characterized in that, The method further includes: Display the target page; the target page includes the target control.

3. The method according to claim 2, characterized in that, The target page includes a search page; the target page to be displayed includes: The search page is displayed; the AI ​​dialogue control is displayed in the area surrounding the search box or the search results on the search page. The response to a triggering operation on the target control, displaying the initial loading page, includes: In response to a trigger operation on the AI ​​dialogue control, the initial loading page is displayed within the preset time period.

4. The method according to claim 3, characterized in that, The initial loading page includes an element bar area, an input area, and a dialogue content area. The step of displaying the initial loading page within the preset time period in response to a trigger operation on the AI ​​dialogue control includes: In response to a trigger operation on the AI ​​dialogue control, the user interface element is displayed in the element bar area, an input box is displayed in the input area, and a loading prompt message is displayed in the dialogue content area; The loading prompt information is used to indicate that the operation of loading a background image and performing image recognition processing on the background image to obtain the image recognition result is currently being performed.

5. The method according to claim 4, characterized in that, The step of displaying the background image in the layer below the user interface element on the initial loading page after a preset time has elapsed includes: After the initial loading page is displayed for a preset time, dialogue information is displayed in the next layer below the user interface elements, and the background image is displayed in the next layer below the dialogue information. The dialogue information is displayed in the dialogue content area, and the background image reveals the user interface elements and the dialogue content.

6. The method according to claim 5, characterized in that, The method further includes: The loading prompt message will no longer be displayed in the dialog content area.

7. The method according to any one of claims 1 to 6, characterized in that, The step of adjusting the display of the user interface elements from based on the first color to based on the second color includes: If the image recognition result of the background image indicates that the color of the background image is dark, and the difference between the first color and the color of the background image is less than or equal to the preset color threshold, the user interface element is adjusted from being displayed based on the first color to being displayed based on white. If the image recognition result indicates that the background image is a bright color and the difference between the first color and the background image is less than or equal to the preset color threshold, the user interface element is adjusted from being displayed based on the first color to being displayed based on black.

8. The method according to claim 7, characterized in that, The method further includes: If the image recognition result indicates that the difference between the first color and the color of the background image is greater than the preset color threshold, the user interface element continues to be displayed on the initial loading page based on the first color.

9. The method according to any one of claims 1 to 6, characterized in that, The number of user interface elements is at least one, and the display of the initial loading page includes: Each user interface element is displayed on the initial loading page using its own first color. The step of adjusting the display of the user interface elements from based on the first color to based on the second color includes: The display of each user interface element, previously based on its corresponding first color, is now changed to be based on its corresponding second color. The difference between the second color corresponding to each user interface element and the color of the image area corresponding to each user interface element is greater than a preset color threshold; the image area corresponding to each user interface element is the area in the background image corresponding to the position of each user interface element.

10. The method according to any one of claims 1 to 6, characterized in that, The step of adjusting the display of the user interface elements from based on the first color to based on the second color includes: Based on the image recognition results of the target image region, the user interface elements are adjusted from being displayed based on the first color to being displayed based on the second color. Wherein, the target image region is the region in the cropped background image that corresponds to the position of the user interface element; the cropped background image is obtained by cropping the background image, the size of the cropped background image matches the size of the initial loading page, and the difference between the second color and the color of the target image region is greater than a preset color threshold.

11. An element display processing device, characterized in that, include: The initial loading page display module is configured to display the initial loading page in response to a trigger operation on a target control; the target control includes an AI dialogue control; the initial loading page displays user interface elements based on a first color; the user interface elements include a character search element; The character search page display module is configured to respond to a trigger operation on a character search element within a preset time and display the character search page; the character search page displays at least one character. The anthropomorphic background image loading module is configured to load a background image in response to a trigger operation targeting at least one of the character roles. The background image is an anthropomorphic background image that includes the target character. The color adjustment module is configured to, after a preset time has elapsed since the initial loading page was displayed, display the background image in the layer below the user interface element on the initial loading page, and adjust the user interface element from displaying based on the first color to displaying based on the second color based on the image recognition result of the background image; wherein, the preset time is the time for loading the background image and for performing image recognition processing on the background image during the loading process to obtain the image recognition result; the difference between the second color and the color of the background image of the initial loading page is greater than a preset color threshold.

12. An electronic device, characterized in that, include: processor; Memory used to store the processor's executable instructions; The processor is configured to execute the instructions to implement the element display processing method as described in any one of claims 1 to 10.

13. A computer-readable storage medium, characterized in that, When the instructions in the computer-readable storage medium are executed by the processor of the electronic device, the electronic device is able to perform the element display processing method as described in any one of claims 1 to 10.

Images