CN113626129A - 一种页面颜色的确定方法、装置及电子设备 - Google Patents

Abstract

本公开提供一种页面颜色的确定方法、装置及电子设备,页面具有用于显示页面文本的第一区域和用于显示页面图像的第二区域，所述第一区域与所述第二区域相邻，所述方法包括：接收页面信息，在页面图像的数量为一个的情况下，确定所述页面图像的氛围颜色；基于所述氛围颜色确定与所述氛围颜色相融的所述第一区域的目标背景颜色。本公开方法可以为用户的作答和阅读提供游戏化、智能化的氛围融入效果，从而提高用户的阅读积极性和阅读效果。

Description

一种页面颜色的确定方法、装置及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种页面颜色的确定方法、装置及电子设备。

背景技术

在具有显示屏的电子设备上，其显示屏可以显示各种在线或离线页面，这些页面可以为纯文本的页面，也可以为插入图像的页面。

以互联网自适应学习场景为例，电子设备的显示屏可以显示具有答题文本和图片的答题板，用户可以通过电子设备输入答案，并显示在答题板的相应位置。又例如，电子设备可以显示阅读内容，供用户阅读使用。

发明内容

根据本公开的一方面，提供了一种页面颜色的确定方法，所述页面具有第一区域和第二区域，所述第一区域与所述第二区域相邻，所述方法包括：

接收页面信息，所述页面信息包括在所述第一区域显示的页面文本以及在所述第二区域显示的页面图像；

在所述页面图像的数量为一个的情况下，确定所述页面图像的氛围颜色；

基于所述氛围颜色确定与所述氛围颜色相融的所述第一区域的目标背景颜色。

根据本公开的另一方面，提供了一种页面颜色的确定装置，所述页面具有第一区域和第二区域，所述第一区域与所述第二区域相邻，所述装置包括：

接收模块，用于接收页面信息，所述页面信息包括在所述第一区域显示的页面文本以及在所述第二区域显示的页面图像；

第一确定模块，用于在所述页面图像的数量为一个的情况下，确定所述页面图像的氛围颜色；

第二确定模块，用于基于所述氛围颜色确定与所述氛围颜色相融的所述第一区域的目标背景颜色。

根据本公开的另一方面，提供了一种电子设备，包括：

处理器；以及，

存储程序的存储器，

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据本公开示例性实施例的所述的方法。

根据本公开的另一方面，提供了一种非瞬时计算机可读存储介质，其特征在于，所述非瞬时计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行根据本公开示例性实施例的所述的方法。

本公开实施例中提供的一个或多个技术方案，通过分析页面信息含有的页面图像的氛围颜色，使得基于氛围颜色确定的第一区域的目标背景颜色与氛围颜色相融。基于此，当显示屏显示以该目标背景颜色的渲染的页面时，第一区域显示的页面图像和第二区域的整体性比较好，可以为用户的作答和阅读提供游戏化、智能化的氛围融入效果，从而提高用户的阅读积极性和阅读效果。

附图说明

在下面结合附图对于示例性实施例的描述中，本公开的更多细节、特征和优点被公开，在附图中：

图1示出了根据本公开示例性实施例提供的方法示例出的系统架构示意图；

图2示出了本公开示例性实施例的页面的结构示意图；

图3示出了本公开示例性实施例的页面颜色的确定方法的流程图；

图4示出了本公开示例性实施例的推理模型运行原理示意图；

图5示出了本公开示例性实施例的deep-wise卷积结构的示意图；

图6示出了本公开示例性实施例的氛围颜色的确定流程图；

图7示出了本公开示例性实施例的页面分层渲染示意图；

图8示出了本公开示例性实施例的一种故事阅读页面的模式转换示意图；

图9示出了本公开示例性实施例的另一种故事阅读页面的模式转换示意图；

图10示出了本公开示例性实施例的又一种故事阅读页面的模式转换示意图；

图11示出了本公开示例性实施例的一种答题页面的模式转换示意图；

图12示出了根据本公开示例性实施例的页面颜色的确定装置的功能模块示意性框图；

图13示出了根据本公开示例性实施例的芯片的示意性结构框图；

图14示出了能够用于实现本公开的实施例的示例性电子设备的结构框图。

具体实施方式

下面将参照附图更详细地描述本公开的实施例。虽然附图中显示了本公开的某些实施例，然而应当理解的是，本公开可以通过各种形式来实现，而且不应该被解释为限于这里阐述的实施例，相反提供这些实施例是为了更加透彻和完整地理解本公开。应当理解的是，本公开的附图及实施例仅用于示例性作用，并非用于限制本公开的保护范围。

应当理解，本公开的方法实施方式中记载的各个步骤可以按照不同的顺序执行，和/或并行执行。此外，方法实施方式可以包括附加的步骤和/或省略执行示出的步骤。本公开的范围在此方面不受限制。

本文使用的术语“包括”及其变形是开放性包括，即“包括但不限于”。术语“基于”是“至少部分地基于”。术语“一个实施例”表示“至少一个实施例”；术语“另一实施例”表示“至少一个另外的实施例”；术语“一些实施例”表示“至少一些实施例”。其他术语的相关定义将在下文描述中给出。需要注意，本公开中提及的“第一”、“第二”等概念仅用于对不同的装置、模块或单元进行区分，并非用于限定这些装置、模块或单元所执行的功能的顺序或者相互依存关系。

需要注意，本公开中提及的“一个”、“多个”的修饰是示意性而非限制性的，本领域技术人员应当理解，除非在上下文另有明确指出，否则应该理解为“一个或多个”。

本公开实施方式中的多个装置之间所交互的消息或者信息的名称仅用于说明性的目的，而并不是用于对这些消息或信息的范围进行限制。

在介绍本公开实施例之前首先对本公开实施例中涉及到的相关名词作如下释义：

页面是一种信息页面，在WWW环境中，信息以页面信息组织，信息页面由语言来实现，在各个信息页面之间建立超文本链接以便浏览。

色值是该种颜色在不同的颜色模式中所对应的颜色值。

色差（Color Difference，也有称Chromatic Aberration）是指一个颜色与另一个颜色之间的差别，一般以符号ΔE代表。由颜色空间中两个色点间的距离标识。

反色又叫补色，是与原色叠加可以变为白色的颜色。

主色调是众多色调中，以一种色调为主的色调。色调指的是一幅画中画面色彩的总体倾向，是大的色彩效果。

端智能是将直接将推理服务以（Software Development Kit，缩写为SDK）的形式放到客户端，供客户端直接调用。

本公开示例性实施例提供一种页面颜色的确定方法，其可以用于页面颜色渲染，使得经过渲染的页面整体性比较好，可以为用户的作答和阅读提供游戏化、智能化的氛围融入效果，从而提高用户的阅读积极性和阅读效果。该页面可以为离线页面，也可以为联网的在线页面（即网页）。下面参照附图描述本公开的方案。

图1示出了根据本公开示例性实施例提供的方法示例出的系统架构示意图。如图1所示，本公开示例性实施例提供的系统100包括：显示终端110、服务器120以及数据存储系统130。

上述显示终端110可以通过通信网络与显示终端110通信。该通信网络可以为有线通信网络或无线通信网络。有限通信网络可以为基于电力线载波技术的通信网络，无线通信网络可以为局域无线网络或广域无线网络。局域无线网络可以为WIFI无线网络、Zigbee无线网络、移动通信网络或卫星通信网络等。

上述显示终端110可以包括电脑、手机、平板等具有信息处理能力的终端设备，其内可以安装图形处理器，用以执行图像渲染功能。服务器120可以包括云服务器120、网络服务器120、应用服务器120以及管理服务器120等具有数据处理功能的服务器120，用以运行和更新各种网站资源，并为显示终端110提供接口，供显示终端110访问。数据存储系统130可以是一个统称，包括本地存储以及存储历史数据的数据库，数据库可以在服务器120上，也可以在其它网络服务器120上，还可以在数据存储系统130上。该数据存储系统130可以与服务器120分立，也可以集成在服务器120内。该数据存储器可以保存各种网站所需数据。

本公开示例性实施例的系统在在进行页面渲染时候，可以采用服务端渲染的方法，也可以采用客户端渲染的方法。

对于服务端渲染来说，其在后端将超文本标记语言（HyperText MarkupLanguage,缩写为html）拼接好，然后将完整的html文件返回给前端浏览器。浏览器拿到html文件之后直接解析，就可以展示页面。对于客户端渲染来说，随着ajax（指异步JavaScript 及 XML（Asynchronous JavaScript And XML））的兴起，业界开始推崇前后端分离的开发模式，即后端不提供完整的html页面，而是提供一些应用程序接口（Application Program Interface，缩写为API），使得前端可以获取到json数据。当前端拿到json数据，前端利用json数据进行html页面拼接，然后页面展示在浏览器上。

由上可见，客户端渲染和服务器120端渲染最重要的区别在于谁来完成html文件完整拼接操作。如果是在服务器120端完成html文件的完整拼接操作，然后返回给客户端，就是服务器120端渲染，如果是前端做了更多的工作完成了html文件的完整拼接操作，就是客户端渲染。

在一些情况下，数据存储系统130可以保存页面渲染所需的推理模型。该推理模型可以在线或离线方式训练。如果推理模型以在线方式训练，则服务器120可以通过各个显示终端110收集样本图像，并通过预处理保存在数据存储系统130内，供训练时使用。示例性的，上述显示终端110可以本地安装photoshop、matlab以及open CV等图像处理软件，显示终端110可以响应用户的操作，利用这些图像处理软件离线的对样本图像进行前处理，然后上传至服务器120，也可以在服务器120内安装photoshop、matlab以及open CV等图像处理软件。用户可以响应用户的操作，远程登录服务器120，利用这些图像处理软件处理样本图像。

示例性的，根据执行渲染操作的主体部署用于运行推理模型的推理引擎。例如：当执行渲染操作的主体为服务器120，则推理引擎部署在服务区上；当执行渲染操作的主体为客户端，则推理引擎部署在显示终端110下载的客户端。

相关技术中，可以在手机、平板电脑等小屏显示终端下载客户端，利用该客户端获取服务器上的页面数据进行显示。相对于大屏设备，小屏显示终端的屏幕小，显示内容有限，而答题题板或阅读内容等往往占用屏幕中很大的面积，是页面中的核心内容。如果题板或阅读内容中插入图像如图片，则图像又会成为整个题板或阅读内容中的主要内容，因此，题板或阅读内容区中文本（如试题）是否与图片是否协调，对于页面内容的阅读效果具有非常大的影响。

本公开示例性实施例提供的页面颜色的确定方法可以在渲染页面前，至少确定页面文本所在区域的目标背景颜色，使得页面文本所在区域的背景与页面图像从颜色上来说，具有高度的相融性，使页面文本和页面图像整体性好，进而为用户提供游戏化和沉浸式阅读氛围，提高阅读积极性。

图2示出了本公开示例性实施例的页面的结构示意图。如图2所示，本公开示例性实施例的页面200具有第一区域201和第二区域202。第一区域201与第二区域202相邻，但不交叠。如图2所示，第一区域201可以显示页面文本，第二区域202可以显示页面图像。此处第一区域201可以环绕第二区域202，但也可以位于第二区域202的至少一侧。

举例来说，在答题页面场景中，试题文本所在的第一区域可以位于插图所在的第二区域的上侧、左侧等。在故事阅读场景中，故事文本所在的第一区域可以环绕插图所在的第二区域、左侧、下侧等。

在一些示例中，本公开示例性实施例的页面还可以包括第三区域203，第三区域203可以作为页面的边框或工具栏存在。例如：在答题页面场景中，可以在具有工具栏的题板上显示试题文本和插图。此时，工具栏所在的区域即为第三区域203。

本公开示例性实施例的页面颜色的确定方法可以用于页面渲染中，该页面颜色确定方法可以是在页面播放前提前启动，也可以是页面已经播放，通过调整页面播放模式，重新渲染页面。本公开示例性实施例的页面颜色的确定方法可以由服务器或显示终端或应用于其中的芯片执行。下面以显示终端为执行主体描述本公开示例性实施例的方法。

图3示出了本公开示例性实施例的页面颜色的确定方法的流程图。本公开示例性实施例的页面颜色的确定方法包括：

步骤301：显示终端接收页面信息，页面信息包括在第一区域显示的页面文本以及在第二区域显示的页面图像。应理解，页面图像的获取方式可以是直接获取，也可以是间接获取，例如：页面图像可以图像地址的形式被显示终端获取，然后基于图像地址调取页面图像。此处页面图像可以为静态图片，也可以为动态图像。

上述显示终端的持有者可以被定义为用户，该用户在不同场景下扮演的角色不同。举例说明，当持有者利用该显示终端上的网校客户端进行在线授课，则持有者所扮演的角色为老师；当持有者利用该显示终端上的网校客户端进行在线学习，则持有者所扮演的角色为学员；该学员可以为任一年龄的用户。当持有者利用该显示终端上的电子书客户端进行，则持有者所扮演的角色为读者。

在一种示例中，上述页面信息可以是保存在显示终端的页面数据。此时，显示终端可以直接从内部存储器内调取页面数据。页面数据的来源可以是显示终端在联网状态从服务器下载的页面信息，也可以是从外部硬件设备导入的页面信息。

在另一种示例中，上述页面信息可以是保存在数据存储系统的页面数据。此时，显示终端可以向服务器发出请求消息，服务器根据请求消息控制数据存储系统向显示终端传输页面数据。

步骤302：显示终端在页面图像的数量为一个的情况下，确定页面图像的氛围颜色。当页面图像以图像地址的形式获取时，可以基于图像地址调取页面图像后，判断页面图像的数量。

当页面图像为静态图片，可以以静态图片为单位，确定页面图像的数量。当页面为诸如视频、图像互换格式（Graphics Interchange Format，缩写为GIF）图像等动态图像，可以以动态图像为单位，确定页面图像的数量。应理解，此处以动态图像为单位，是指无论动态图像所含有的图像帧数量多少，均将该动态图像看作整体，确定页面图像的数量。

显示终端在确定页面图像的数量为一个的情况下，可以采用简单的图像处理方式或人工智能方式确定页面图像的氛围颜色。例如：当氛围颜色为页面图像的主色调，可以采用相关技术公开的主色调确定方法，获取氛围颜色，或者直接取页面图像的背景色为氛围颜色。又例如：当采用人工智能方式确定页面图像的氛围颜色时，氛围颜色可以为基于推理模型基于页面图像推理的结果。推理模型在训练阶段包括样本图像及其对应的氛围颜色。

其中，推理模型可以是保存在数据存储系统的神经网络模型，其可以是离线训练完成后，保存在数据存储系统，也可以是在线训练完成。该推理模型的架构可以采用MobileNet架构，也可以采用它模型，如ResNet等。同时，可以采用端智能技术实现氛围模型预测。例如：可以在显示终端所下载的客户端上部署推理引擎，用以运行推理模型。该推理引擎可以为paddle.js、paddle lite、tensorflowjs或tensorflow lite等神经网络的推理引擎。

在训练推理模型时，可以大量样本图像及样本图像指定的氛围颜色作为数据集进行推理模型训练，使得向训练后的推理模型输入任何页面图像，都可以获得该页面图像的氛围颜色。以MobileNet为例，可以利用串接的深度可分卷积（Depthwise SeparableConvolution，又称deep-wise卷积）结构预测页面图像的氛围颜色，并基于预测的氛围颜色和指定的氛围颜色更新模型参数。由于MobileNet使用deep-wise卷积结构替代传统3D卷积，减少了卷积核的冗余表达，使得MobileNet架构的推理模型所需的模型参数比较少，因此，相对于传统推理模型，其在移动式显示终端的计算量和参数数量明显下降，有利于端智能技术实现。

图4示出了本公开示例性实施例的推理模型运行原理示意图。如图4所示，该运行原理400可以包括端智能推理器401，其中部署有用以运行推理模型的推理引擎4011，推理引擎4011可以参考前文相关描述。端智能推理器401可以通过显示终端向服务器发出请求，使得服务器控制数据存储系统将训练好的推理模型402传输至显示终端，并将训练好的推理模型402输入端智能推理器内。同时，页面图像403可以以矩阵数组的形式输入智能推理器401，智能推理器401可以通过推理引擎4011运行训练好的推理模型402，使得训练好的推理模型推理403，从而获得推理结果404。该推理结果404与训练阶段的数据集所含有的数据有关。例如：当训练阶段的数据集所含有的数据包括样本图像及其氛围颜色，则推理结果为页面图像的氛围颜色。

以MobileNet架构为例，推理模型可以包括串接的多个基本单元，这些基本单元均为deep-wise卷积结构。deep-wise卷积结构和常规卷积操作类似，可用来提取特征，但相比于常规卷积操作，其参数量和运算成本较低。

示例性的，图5示出了本公开示例性实施例的deep-wise卷积结构的示意图。如图5所示，deep-wise卷积结构500包括串接的Depthwise卷积层（下文简称DW卷积层501）和Pointwise卷积层（PW卷积层502）。当页面图像为页面图片，以deep-wise卷积结构提取该页面图片的图片特征。如果页面图片的通道数为3，则DW卷积层501包括3个卷积核，每个卷积核的深度为1。此时，每个卷积核可以提取对应通道的图片特征，从而获得通道数为3的特征图。每个卷积核的深度为3，尺寸为1×1，用于基于通道数为3的特征图生成一个特征图。PW卷积层502的卷积核数量为4，从而使得deep-wise卷积结构从3通道页面图像提取出4个特征图。当多个deep-wise卷积结构串接的情况下，通过多次特征提取的特征图经过池化、全连接和分类，即可获得推理结果。

图6示出了本公开示例性实施例的氛围颜色的确定流程图。如图6所示，显示终端确定页面图像的氛围颜色可以包括：

步骤601：显示终端确定页面图像的颜色拾取区域。该颜色拾取区域可以是直接显示终端所指示的页面图像的背景区域，也可以为推理模型基于页面图像推理的结果。颜色拾取区域的颜色可以体现该样本图像的氛围颜色。例如：该颜色拾取区域可以属于页面图像的背景区域。

当颜色拾取区域为推理模型基于页面图像推理的结果，推理模型在训练阶段包括标注颜色拾取区域的样本图像。当显示终端需要调取推理模型预测颜色拾取区域时，显示终端可以将获取到的推理模型通过推理引擎运行后，获得颜色拾取区域。

上述推理模型的架构可以采用MobileNet架构，也可以采用它目标检测模型，如CenterNet等。以MobileNet架构的推理模型为例，在训练阶段，该推理模型所使用的数据集可以含有大量标注有颜色拾取区域的样本图像。串接的deep-wise卷积结构预测样本图像的颜色拾取区域，并基于预测的颜色拾取区域与标注的颜色拾取区域，更新模型参数。基于图4的相关描述，图4所示的推理模型402在训练阶段的数据集含有大量标注有颜色拾取区域的样本图像。当训练结束后，向训练结束的推理模型输入任意页面图像，都可以得到该页面图像的颜色拾取区域，且该颜色拾取区域的颜色可以体现该页面图像的氛围颜色或者说主色调。

步骤602：显示终端基于颜色拾取区域和页面图像确定氛围颜色。颜色拾取区域可以以矩形框的形式可视化表达，或者以矩形框的坐标信息进行数字化表达。

在实际应用中，显示终端可以拾取页面图像位于颜色拾取区域内各个像素的色值，并基于这些像素的色值确定出氛围颜色。氛围颜色的色值可以采用如下方式中的一种确定。

第一种方式：氛围颜色的色值可以是这些像素中任意像素的色值。第二种方式：可以先对这些像素色值进行排序，选择排序处在中间位置的像素色值作为氛围颜色的色值。第三种方式：可以统计同一色值的像素数量，选择同一色值的像素数量最多的像素色值为氛围颜色的色值。第四种方式：可以将页面图像位于颜色拾取区域的像素色值平均值设为氛围颜色的色值。

步骤303：显示终端基于氛围颜色确定与氛围颜色相融的第一区域的目标背景颜色。此处与氛围颜色相融的目标背景颜色，可以是与氛围颜色相同的颜色，也可以是与氛围颜色接近的颜色。基于此，目标背景颜色与氛围颜色的色差小于第一阈值。第一阈值可以为1.0~2.0。

当目标背景颜色与氛围颜色相同时，当第一区域的背景颜色为目标背景颜色，第一区域的背景与氛围颜色的色差为0；当目标背景颜色与氛围颜色的色差为0.5，第一阈值为1.0，说明当第一区域的背景颜色为目标背景颜色，第一区域的背景与氛围颜色接近；当第一区域的目标背景颜色与氛围颜色的色差为1.2，第一阈值为2.0，说明当第一区域的背景颜色为目标背景颜色，第一区域的背景与氛围颜色接近。此时，第一区域的背景与第二区域显示的页面图像的整体性好，可以为用户提供游戏化和浸入式氛围，进而提高用户的阅读积极性。

在实际应用中，显示终端在执行步骤303后，若确定氛围颜色与第一区域的初始背景颜色大于第一阈值，则在渲染页面的时候，可以按照目标背景颜色渲染第一区域的背景，否则不需要渲染第一区域的背景。

当本公开示例性实施例的页面还包括第三区域时候，可以基于氛围颜色确定与氛围颜色相同的第三区域的背景颜色。确定方式可以参考第一区域的目标背景颜色确定方法，此处不做详述。

当第一区域的背景颜色设为目标背景颜色时，为了提升用户的视觉体验，本公开示例性实施例的页面颜色的确定方法还可以包括：

步骤304：显示终端在页面图像的数量为一个的情况下，确定页面文字的目标文字颜色，该目标文字颜色与氛围颜色具有视觉差异。该目标文字颜色可以是基于颜色转换原理确定的颜色，也可以是采用人工智能技术确定的颜色。

当采用反色原理确定目标文字颜色时，目标文字颜色可以为氛围颜色的反色。此时，如果氛围颜色为黑色，其色值为#000000，则氛围颜色的反色色值的计算方法为：#ffffff-#000000=#ffffff（十六进制减法），也就是说，目标文字颜色为白色。例如：当氛围颜色为黑色，可以将第一区域的背景渲染为黑色，页面文本的目标文字颜色渲染为白色，第一区域不仅与页面图像具有高度的整体性，还与页面文本具有较大的视觉差异，使得用户可以清晰的看清楚第一区域显示的页面文本。

当采用颜色阈值限定的方式确定目标文字颜色时，可以设定目标文字颜色与目标背景颜色的色差大于第二阈值。此处第二阈值可以为2.0~4.0。例如：当目标文字颜色与目标背景颜色的色差为3.0，第二阈值为2.0，则目标文字颜色与目标背景颜色具有视觉差异；当目标文字颜色与目标背景颜色的色差为4.5，第二阈值为4.0，则目标文字颜色与目标背景颜色具有视觉差异；当目标文字颜色与目标背景颜色的色差为4.0，第二阈值为3.0，则目标文字颜色与目标背景颜色具有视觉差异。

当采用人工智能方式确定目标文字颜色时，目标文字颜色可以为基于推理模型基于页面图像推理的结果。推理模型在训练阶段的数据集包括样本图像及对应的文字颜色，所述文字颜色与所述样本图像具有视觉差异。该推理模型及其运行推理模型的推理引擎可以参考前文相关描述，其不同之处在于：

在训练阶段，数据集可以是包含大量样本图像及其对应的文字颜色。该文字颜色与对应的样本图像的氛围颜色之间具有较大的视觉差异。例如：可以指定该样本图像的氛围颜色，然后基于反色原理确定氛围颜色的反色，并将该反色定为文字颜色。以MobileNet架构的推理模型为例，向推理模型输入数据集后，串接的deep-wise卷积结构预测样本图像对应的文字颜色，基于预测的文字颜色与对应的文字颜色可以更新模型参数。基于图4的相关描述，图4所示的推理模型402在训练阶段的数据集含有大量样本图像及其对应的文字颜色。当训练结束后，向训练结束的推理模型输入任意页面图像，所得到的推理结果为该页面图像对应的目标文字颜色，该目标文字颜色与该样本图像的氛围颜色具有视觉差异。而由于氛围颜色与目标背景颜色相融，因此，目标背景颜色与目标文字颜色之间同样具有视觉差异。应理解，若训练阶段中，数据集含有的样本图像对应的文字颜色是基于样本图像的氛围颜色确定的反色，则训练结束后，推理模型推理的页面图像对应的文字颜色与其氛围颜色也基本满足反色条件。

在一种示例中，推理模型不仅可以预设目标文字颜色，还可以预测氛围颜色，那么数据集不仅包含样本图像及对应的文字颜色，还包括该样本图像的氛围颜色，数据集内的氛围颜色可以参考前文相关描述确定，此处不做详述。以MobileNet架构的推理模型为例，向推理模型输入数据集后，串接的deep-wise卷积结构不仅可以预测样本图像对应的文字颜色，还可以预测样本图像的氛围颜色，然后基于预测结果与数据集所含有的氛围颜色和文字颜色，可以更新模型参数。

在另一种示例中，推理模型不仅可以预设目标文字颜色，还可以预测颜色拾取区域，那么数据集不仅包含样本图像及对应的文字颜色，还包括颜色拾取区域，颜色拾取区域可以参考前文相关描述确定，此处不做详述。以MobileNet架构的推理模型为例，向推理模型输入数据集后，串接的deep-wise卷积结构不仅可以预测样本图像对应的文字颜色，还可以预测颜色拾取区域，然后基于预测结果与数据集所含有的颜色拾取区域和文字颜色，可以更新模型参数。在此之后，可以基于步骤402。

在实际应用中，显示终端在执行步骤303后，若确定氛围颜色与页面文本的初始颜色不具有视觉差异，或者目标背景颜色与页面文本的初始颜色不具有视觉差异，则在渲染页面的时候，可以按照目标文字颜色渲染页面文本，否则不需要渲染页面文本。

可以理解的是，当页面图像为动态图像，该第一区域的目标背景颜色与动态图像逐帧匹配，那么随着动态图像的画面变化，目标背景颜色也随着画面上的氛围颜色发生变化，以更好的增强动漫和浸入式视觉体验。同理，目标文字颜色也可以随着目标背景颜色发生变化。

当确定目标背景颜色和目标文字颜色后，可以基于目标背景颜色渲染第一区域的背景，基于目标文字颜色渲染第一区域显示的页面文本颜色。图7示出了本公开示例性实施例的页面分层渲染示意图。如图7所示，在页面分层渲染坐标700中，x轴为页面宽度方向上的坐标轴，y轴为页面高度方向的坐标轴，z轴为页面深度方向坐标。其中，页面深度方向可以定义为沿着该深度方向渲染页面上的不同对象。从图7可以看出，在渲染页面时，可以分为三层依次进行渲染，分别为背景渲染层701、图片绘制层702和文本绘制层703。其中，在背景渲染层701基于目标背景颜色渲染第一区域的背景，在图片绘制层702中，在页面的第二区域渲染页面图像，在文本绘制层703基于目标文字颜色在第一区域的背景上渲染页面文本。

在实际应用中，用户可以使用某网校的客户端阅读故事，该故事的每个故事页面均显示一张图片和文字。用户可以根据实际需要选择普通模式或浸入模式显示故事页面，用户也可以在阅读故事前，提前设定故事页面显示模式。下面结合附图描述故事页面的模式转换过程。

图8示出了本公开示例性实施例的一种故事阅读页面的模式转换示意图。如图8所示，图8展示的左侧故事页面801中，其含有一张在森林里的故事场景图片，该故事场景图片的氛围颜色为绿色。当用户将故事页面的显示模式从普通模式调整为浸入模式，则执行上述页面颜色确定方法，确定第一区域的目标背景颜色为森林的绿色，并智能化的将故事页面的文字所在区域渲染为绿色，从而获得右侧故事页面802。由于故事页面的文字为黑色，与绿色具有较大的色差，在绿色背景下完全可以看清楚文字，因此，可以不对故事页面的文字颜色进行渲染。

图9示出了本公开示例性实施例的另一种故事阅读页面的模式转换示意图。如图9所示，如图9所示，图9展示的左侧故事页面901中，其含有一张在深夜森林中动物活动的故事场景图片，该故事场景图片的氛围颜色为黑色。当用户将故事页面的显示模式从普通模式调整为浸入模式，执行上述页面颜色确定方法，确定目标背景颜色为深夜的黑色，并智能化的将故事页面的文字所在区域的颜色渲染为黑色。为了保证在黑色背景下可以看清楚文字，还可以基于反色原理确定目标文字颜色为白色，使得文字所在区域的颜色渲染为黑色时，文字的颜色也随之渲染为白色，从而获得右侧故事页面902。

图10示出了本公开示例性实施例的又一种故事阅读页面的模式转换示意图。如图10所示，如图10所示，图10展示的左侧故事页面1001中，其含有一张在深夜森林行车的故事场景图片，该故事场景图片的氛围颜色为黑色。当用户将故事页面的显示模式从普通模式调整为浸入模式，执行上述页面颜色确定方法，确定目标背景颜色为深夜的黑色，并智能化的将故事页面的文字所在区域的颜色渲染为黑色。为了保证在黑色背景下可以看清楚文字，还可以基于反色原理确定目标文字颜色为白色，使得文字所在区域的颜色渲染为黑色时，文字的颜色也随之渲染为白色，从而获得右侧故事页面1002。

由图8~图10可以看出，当故事页面从普通模式转换为浸入模式，故事页面颜色分布整体性好，文字清晰，可以为用户提供良好的游戏化、沉浸式学习体验。

图11示出了本公开示例性实施例的一种答题页面的模式转换示意图。如图11所示，图11展示的左侧答题页面1101中，其展示的题板含有一张插图，用户可以根据该插图的内容，确定题板所展示的题目答案，并通过显示终端将答案输入题目的作答区域。从图11可以看出，题目文本所在区域的颜色与插图颜色对比明显。基于此，当用户将答题页面的显示模式从普通模式调整为浸入模式，执行上述页面颜色确定方法，确定目标背景颜色为插图的白色，并智能化的将题板的题目文本所在区域的颜色渲染为黑色。由于题目文本的颜色为黑色，与白色色差明显，因此，无需对题目文字颜色进行渲染，即可获得右侧答题页面1102。从右侧答题页面1102可以看出，浸入模式下的答题页面颜色分布整体性好，文字清晰，可以为用户提供良好的游戏化、沉浸式学习体验。

在答题场景中，可以根据页面中图片内容，结合AI技术（如端智能技术）实时识别，联动渲染页面如题板，使得页面所展示的图片和文字所在区域的整体感比较高，为学生用户进行作答和阅读游戏化、智能化的氛围融入效果。而且，本公开示例性实施例的方法可以直接获取页面数据，不需要另外准备图片和页面，即可智能化根据图片对页面的阅读内容所在区域或者题板进行颜色渲染，与图片保持深度融合保证页面的整体感，美观页面，增强游戏化氛围效果，

由上可见，本公开示例性实施例的方法可以以原有的页面数据为基础，基于端智能技术，分析页面信息含有的页面图像的氛围颜色，使得基于氛围颜色确定的第一区域的目标背景颜色与所述氛围颜色相融。基于此，当显示屏显示以该目标背景颜色的渲染的页面时，第一区域显示的页面图像和第二区域从颜色分布上来说整体性比较好，可以为用户的作答和阅读提供游戏化、智能化的氛围融入效果，从而提高用户的阅读积极性和阅读效果。

上述主要从显示终端的角度对本公开实施例提供的方案进行了介绍。可以理解的是，显示终端为了实现上述功能，其包含了执行各个功能相应的硬件结构和/或软件模块。本领域技术人员应该很容易意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，本公开能够以硬件或硬件和计算机软件的结合形式来实现。某个功能究竟以硬件还是计算机软件驱动硬件的方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本公开的范围。

本公开实施例可以根据上述方法示例对显示终端进行功能单元的划分，例如，可以对应各个功能划分各个功能模块，也可以将两个或两个以上的功能集成在一个处理模块中。上述集成的模块既可以采用硬件的形式实现，也可以采用软件功能模块的形式实现。需要说明的是，本公开实施例中对模块的划分是示意性的，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式。

在采用对应各个功能划分各个功能模块的情况下，本公开示例性实施例提供一种图像处理装置，该图像处理装置可以为服务器或应用于服务器的芯片。图12示出了根据本公开示例性实施例的页面颜色的确定装置的功能模块示意性框图。如图12所示，该页面颜色的确定装置1200，页面具有第一区域和第二区域，所述第一区域与所述第二区域相邻，所述装置包括：

接收模块1201，用于接收页面信息，所述页面信息包括在所述第一区域显示的页面文本以及在所述第二区域显示的页面图像；

第一确定模块1202，用于在所述页面图像的数量为一个的情况下，确定所述页面图像的氛围颜色；

第二确定模块1203，用于基于所述氛围颜色确定与所述氛围颜色相融的所述第一区域的目标背景颜色。

在一种可能的实现方式中，第一确定模块1202用于确定所述页面图像的颜色拾取区域；基于所述颜色拾取区域和所述页面图像确定所述氛围颜色。

在一种可能的实现方式中，所述氛围颜色的色值为所述页面图像位于所述颜色拾取区域的像素色值平均值；和/或，

所述颜色拾取区域为推理模型基于所述页面图像推理的结果，所述推理模型在训练阶段包括标注颜色拾取区域的样本图像。

在一种可能的实现方式中，所述氛围颜色为基于推理模型基于所述页面图像推理的结果，所述推理模型在训练阶段包括样本图像及其对应的氛围颜色；和/或，

所述目标背景颜色与所述氛围颜色的色差小于第一阈值。

在一种可能的实现方式中，上述第二确定模块1203用于在所述页面图像的数量为一个的情况下，确定所述页面文字的目标文字颜色，所述目标文字颜色与所述氛围颜色具有视觉差异。

在一种可能的实现方式中，所述目标文字颜色均为：推理模型基于所述页面图像所获得结果。所述推理模型在训练阶段的数据集包括样本图像及对应的文字颜色，所述文字颜色与所述样本图像具有视觉差异。

在一种可能的实现方式中，所述目标文字颜色为所述氛围颜色的反色。

在一种可能的实现方式中，所述目标文字颜色与所述目标背景颜色的色差大于第二阈值。

在一种可能的实现方式中，所述页面图像为静态图像或动态图像；

当所述页面图像为动态图像，所述目标背景颜色与所述动态图像逐帧匹配。

图13示出了根据本公开示例性实施例的芯片的示意性框图。如图13所示，该芯片1300包括一个或两个以上（包括两个）处理器1301和通信接口1302。通信接口1302可以支持服务器执行上述页面颜色的确定方法中的数据收发步骤，处理器1301可以支持服务器执行上述页面颜色的确定方法中的数据处理步骤。

可选的，如图13所示，该芯片1300还包括存储器1303，存储器1303可以包括只读存储器和随机存取存储器，并向处理器提供操作指令和数据。存储器的一部分还可以包括非易失性随机存取存储器（non-volatile random access memory，NVRAM）。

在一些实施方式中，如图13所示，处理器1301通过调用存储器存储的操作指令（该操作指令可存储在操作系统中），执行相应的操作。处理器1301控制终端设备中任一个的处理操作，处理器还可以称为中央处理单元（central processing unit，CPU）。存储器1303可以包括只读存储器和随机存取存储器，并向处理器1301提供指令和数据。存储器1303的一部分还可以包括NVRAM。例如应用中存储器、通信接口以及存储器通过总线系统耦合在一起，其中总线系统除包括数据总线之外，还可以包括电源总线、控制总线和状态信号总线等。但是为了清楚说明起见，在图13中将各种总线都标为总线系统1304。

上述本公开实施例揭示的方法可以应用于处理器中，或者由处理器实现。处理器可能是一种集成电路芯片，具有信号的处理能力。在实现过程中，上述方法的各步骤可以通过处理器中的硬件的集成逻辑电路或者软件形式的指令完成。上述的处理器可以是通用处理器、数字信号处理器（digital signal processing，DSP）、ASIC、现成可编程门阵列（field-programmable gate array，FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件。可以实现或者执行本公开实施例中的公开的各方法、步骤及逻辑框图。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合本公开实施例所公开的方法的步骤可以直接体现为硬件译码处理器执行完成，或者用译码处理器中的硬件及软件模块组合执行完成。软件模块可以位于随机存储器，闪存、只读存储器，可编程只读存储器或者电可擦写可编程存储器、寄存器等本领域成熟的存储介质中。该存储介质位于存储器，处理器读取存储器中的信息，结合其硬件完成上述方法的步骤。

本公开示例性实施例还提供一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器。所述存储器存储有能够被所述至少一个处理器执行的计算机程序，所述计算机程序在被所述至少一个处理器执行时用于使所述电子设备执行根据本公开实施例的方法。

本公开示例性实施例还提供一种存储有计算机程序的非瞬时计算机可读存储介质，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的方法。

本公开示例性实施例还提供一种计算机程序产品，包括计算机程序，其中，所述计算机程序在被计算机的处理器执行时用于使所述计算机执行根据本公开实施例的方法。

参考图14，现将描述可以作为本公开的服务器或客户端的电子设备1400的结构框图，其是可以应用于本公开的各方面的硬件设备的示例。电子设备旨在表示各种形式的数字电子的计算机设备，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图14所示，电子设备1400包括计算单元1401，其可以根据存储在只读存储器（ROM）1402中的计算机程序或者从存储单元808加载到随机访问存储器（RAM）1403中的计算机程序，来执行各种适当的动作和处理。在RAM 1403中，还可存储设备1400操作所需的各种程序和数据。计算单元1401、ROM 1402以及RAM 1403通过总线1404彼此相连。输入/输出（I/O）接口1405也连接至总线1404。

电子设备1400中的多个部件连接至I/O接口1405，包括：输入单元1406、输出单元1407、存储单元1408以及通信单元1409。输入单元1406可以是能向电子设备1400输入信息的任何类型的设备，输入单元1406可以接收输入的数字或字符信息，以及产生与电子设备的用户设置和/或功能控制有关的键信号输入。输出单元1407可以是能呈现信息的任何类型的设备，并且可以包括但不限于显示器、扬声器、视频/音频输出终端、振动器和/或打印机。存储单元1404可以包括但不限于磁盘、光盘。通信单元1409允许电子设备1400通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据，并且可以包括但不限于调制解调器、网卡、红外通信设备、无线通信收发机和/或芯片组，例如蓝牙TM设备、WiFi设备、WiMax设备、蜂窝通信设备和/或类似物。

计算单元1401可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元801的一些示例包括但不限于中央处理单元（CPU）、图形处理单元（GPU）、各种专用的人工智能（AI）计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器（DSP）、以及任何适当的处理器、控制器、微控制器等。计算单元1401执行上文所描述的各个方法和处理。例如，在一些实施例中，本公开示例性实施例的方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元1408。在一些实施例中，计算机程序的部分或者全部可以经由ROM 1402和/或通信单元1409而被载入和/或安装到电子设备1400上。在一些实施例中，计算单元1401可以通过其他任何适当的方式（例如，借助于固件）而被配置为执行方法。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器（RAM）、只读存储器（ROM）、可擦除可编程只读存储器（EPROM或快闪存储器）、光纤、便捷式紧凑盘只读存储器（CD-ROM）、光学储存设备、磁储存设备、或上述内容的任何合适组合。

如本公开使用的，术语“机器可读介质”和“计算机可读介质”指的是用于将机器指令和/或数据提供给可编程处理器的任何计算机程序产品、设备、和/或装置(例如，磁盘、光盘、存储器、可编程逻辑装置(PLD))，包括，接收作为机器可读信号的机器指令的机器可读介质。术语“机器可读信号”指的是用于将机器指令和/或数据提供给可编程处理器的任何信号。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置（例如，CRT（阴极射线管）或者LCD（液晶显示器）监视器）；以及键盘和指向装置（例如，鼠标或者轨迹球），用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈（例如，视觉反馈、听觉反馈、或者触觉反馈）；并且可以用任何形式（包括声输入、语音输入或者、触觉输入）来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统（例如，作为数据服务器）、或者包括中间件部件的计算系统（例如，应用服务器）、或者包括前端部件的计算系统（例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互）、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信（例如，通信网络）来将系统的部件相互连接。通信网络的示例包括：局域网（LAN）、广域网（WAN）和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。

在上述实施例中，可以全部或部分地通过软件、硬件、固件或者其任意组合来实现。当使用软件实现时，可以全部或部分地以计算机程序产品的形式实现。所述计算机程序产品包括一个或多个计算机程序或指令。在计算机上加载和执行所述计算机程序或指令时，全部或部分地执行本公开实施例所述的流程或功能。所述计算机可以是通用计算机、专用计算机、计算机网络、终端、显示终端或者其它可编程装置。所述计算机程序或指令可以存储在计算机可读存储介质中，或者从一个计算机可读存储介质向另一个计算机可读存储介质传输，例如，所述计算机程序或指令可以从一个网站站点、计算机、服务器或数据中心通过有线或无线方式向另一个网站站点、计算机、服务器或数据中心进行传输。所述计算机可读存储介质可以是计算机能够存取的任何可用介质或者是集成一个或多个可用介质的服务器、数据中心等数据存储设备。所述可用介质可以是磁性介质，例如，软盘、硬盘、磁带；也可以是光介质，例如，数字视频光盘（digital video disc，DVD）；还可以是半导体介质，例如，固态硬盘（solid state drive，SSD）。

尽管结合具体特征及其实施例对本公开进行了描述，显而易见的，在不脱离本公开的精神和范围的情况下，可对其进行各种修改和组合。相应地，本说明书和附图仅仅是所附权利要求所界定的本公开的示例性说明，且视为已覆盖本公开范围内的任意和所有修改、变化、组合或等同物。显然，本领域的技术人员可以对本公开进行各种改动和变型而不脱离本公开的精神和范围。这样，倘若本公开的这些修改和变型属于本公开权利要求及其等同技术的范围之内，则本公开也意图包括这些改动和变型在内。

Claims (12)

1.一种页面颜色的确定方法，其特征在于，所述页面具有第一区域和第二区域，所述第一区域与所述第二区域相邻，所述方法包括：

接收页面信息，所述页面信息包括在所述第一区域显示的页面文本以及在所述第二区域显示的页面图像；

在所述页面图像的数量为一个的情况下，确定所述页面图像的氛围颜色；

基于所述氛围颜色确定与所述氛围颜色相融的所述第一区域的目标背景颜色。

2.根据权利要求1所述的方法，其特征在于，所述确定所述页面图像的氛围颜色，包括：

确定所述页面图像的颜色拾取区域；

基于所述颜色拾取区域和所述页面图像确定所述氛围颜色。

3.根据权利要求2所述的方法，其特征在于，所述氛围颜色的色值为所述页面图像位于所述颜色拾取区域的像素色值平均值；和/或，

所述颜色拾取区域为推理模型基于所述页面图像推理的结果，所述推理模型在训练阶段包括标注颜色拾取区域的样本图像。

4.根据权利要求1所述的方法，其特征在于，所述氛围颜色为基于推理模型基于所述页面图像推理的结果，所述推理模型在训练阶段包括样本图像及其对应的氛围颜色；和/或，

所述目标背景颜色与所述氛围颜色的色差小于第一阈值。

5.根据权利要求1~4任一项所述的方法，其特征在于，所述在所述页面图像的数量为一个的情况下，所述方法还包括：

确定所述页面文字的目标文字颜色，所述目标文字颜色与所述氛围颜色具有视觉差异。

6.根据权利要求5所述的方法，其特征在于，所述目标文字颜色为：推理模型基于所述页面图像所获得结果，所述推理模型在训练阶段的数据集包括样本图像及对应的文字颜色，所述文字颜色与所述样本图像具有视觉差异。

7.根据权利要求5所述的方法，其特征在于，所述目标文字颜色为所述氛围颜色的反色。

8.根据权利要求5所述的方法，其特征在于，所述目标文字颜色与所述目标背景颜色的色差大于第二阈值。

9.根据权利要求1~4任一项所述的方法，其特征在于，所述页面图像为静态图像或动态图像；

当所述页面图像为动态图像，所述目标背景颜色与所述动态图像逐帧匹配。

10.一种页面颜色的确定装置，其特征在于，所述页面具有第一区域和第二区域，所述第一区域与所述第二区域相邻，所述装置包括：

接收模块，用于接收页面信息，所述页面信息包括在所述第一区域显示的页面文本以及在所述第二区域显示的页面图像；

第一确定模块，用于在所述页面图像的数量为一个的情况下，确定所述页面图像的氛围颜色；

第二确定模块，用于基于所述氛围颜色确定与所述氛围颜色相融的所述第一区域的目标背景颜色。

11.一种电子设备，其特征在于，包括：

处理器；以及，

存储程序的存储器；

其中，所述程序包括指令，所述指令在由所述处理器执行时使所述处理器执行根据权利要求1~9中任一项所述的方法。

12.一种非瞬时计算机可读存储介质，其特征在于，所述非瞬时计算机可读存储介质存储有计算机指令，所述计算机指令用于使所述计算机执行根据权利要求1~9中任一项所述的方法。

Images