CN113360819A - 一种页面布局方法和装置 - Google Patents

Abstract

本发明公开了一种页面布局方法和装置，方法包括：向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，以获得参考数据并将其写入层叠样式表；基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性。本发明能够基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验。

Description

一种页面布局方法和装置

技术领域

本发明涉及网页领域，更具体地，特别是指一种页面布局方法和装置。

背景技术

长久以来，开发人员主要使用CSS(层叠样式表)媒体查询进行响应式的Web(网页)页面开发，这种方式向不同设备提供不同样式，为不同设备的用户提供相应最佳的体验。但是这种方式只能针对用户所使用的设备及屏幕来提升用户体验，缺乏更多信息的支持，无法满足实际生活中用户的个性化需求和浏览体验。

针对现有技术中CSS页面不支持面向不同用户的个性化需求的问题，目前尚无有效的解决方案。

发明内容

有鉴于此，本发明实施例的目的在于提出一种页面布局方法和装置，能够基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验。

基于上述目的，本发明实施例的第一方面提供了一种页面布局方法，包括执行以下步骤：

向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；

获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，以获得参考数据并将其写入层叠样式表；

基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性。

在一些实施方式中，向机器学习平台加载预设的模型库包括：向机器学习平台加载人脸识别模型库、实时手势检测模型库、人体姿势评估模型库。

在一些实施方式中，方法还包括：基于人脸识别模型库确定的功能函数确定用户与屏幕的距离和用户的表情；基于实时手势检测模型库确定的功能函数确定用户的手势；基于人体姿势评估模型库确定的功能函数确定用户的肢体动作。

在一些实施方式中，获取并将外部环境信息流传输到页面的指定标签包括：获取用户摄像头的访问权限，并基于访问权限从用户摄像头采集视频数据流作为外部环境信息流传输到页面的视频标签。

在一些实施方式中，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，以获得参考数据包括：使用功能函数在机器学习平台中对视频数据流持续执行数据分类，并将获得的数据分类结果作为参考数据。

在一些实施方式中，写入层叠样式表包括：将数据分类结果写入层叠样式表的自定义属性。

在一些实施方式中，基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性包括：确定或调整页面布局中使用的可变字体的类型、属性参数、和层叠样式表样式。

在一些实施方式中，可变字体的属性参数包括以下至少之一：粗细、宽度、光学尺寸、倾斜度、和斜体。

在一些实施方式中，方法还包括：在确定或调整页面布局中的多个显示属性时，还相应地调整页面布局中的多个声音属性。

本发明实施例的第二方面提供了一种装置，包括：

处理器；

控制器，存储有处理器可运行的程序代码，处理器在运行程序代码时执行以下步骤：

向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；

获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，以获得参考数据并将其写入层叠样式表；

基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性。

本发明具有以下有益技术效果：本发明实施例提供的页面布局方法和装置，通过向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，获得参考数据并进一步写入层叠样式表；基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性的技术方案，能够基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验。

附图说明

为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明提供的页面布局方法的流程示意图；

图2为本发明提供的页面布局方法的详细流程图。

具体实施方式

为使本发明的目的、技术方案和优点更加清楚明白，以下结合具体实施例，并参照附图，对本发明实施例进一步详细说明。

需要说明的是，本发明实施例中所有使用“第一”和“第二”的表述均是为了区分两个相同名称非相同的实体或者非相同的参量，可见“第一”“第二”仅为了表述的方便，不应理解为对本发明实施例的限定，后续实施例对此不再一一说明。

基于上述目的，本发明实施例的第一个方面，提出了一种基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验的页面布局方法的一个实施例。图1示出的是本发明提供的页面布局方法的流程示意图。

所述的页面布局方法，如图1所示，包括执行以下步骤：

步骤S101，向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；

步骤S103，获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，以获得参考数据并将其写入层叠样式表；

步骤S105，基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性。

本发明提供了一种基于机器学习平台Tensorflow.js及现有模型库，层叠样式表自定义属性以及可变字体技术生成响应式页面布局的方法，通过本发明所述的方法能够使网页脱离设备及屏幕，从用户自身及所处环境出发，尊重用户偏好，更个性化地提供响应式的网页布局，从而大大提升用户的浏览体验。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，可以通过计算机程序来指令相关硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(ROM)或随机存储记忆体(RAM)等。所述计算机程序的实施例，可以达到与之对应的前述任意方法实施例相同或者相类似的效果。

在一些实施方式中，向机器学习平台加载预设的模型库包括：向机器学习平台加载人脸识别模型库、实时手势检测模型库、人体姿势评估模型库。

在一些实施方式中，方法还包括：基于人脸识别模型库确定的功能函数确定用户与屏幕的距离和用户的表情；基于实时手势检测模型库确定的功能函数确定用户的手势；基于人体姿势评估模型库确定的功能函数确定用户的肢体动作。

在一些实施方式中，获取并将外部环境信息流传输到页面的指定标签包括：获取用户摄像头的访问权限，并基于访问权限从用户摄像头采集视频数据流作为外部环境信息流传输到页面的视频标签。

在一些实施方式中，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，以获得参考数据包括：使用功能函数在机器学习平台中对视频数据流持续执行数据分类，并将获得的数据分类结果作为参考数据。

在一些实施方式中，写入层叠样式表包括：将数据分类结果写入层叠样式表的自定义属性。

在一些实施方式中，基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性包括：确定或调整页面布局中使用的可变字体的类型、属性参数、和层叠样式表样式。

在一些实施方式中，可变字体的属性参数包括以下至少之一：粗细、宽度、光学尺寸、倾斜度、和斜体。

在一些实施方式中，方法还包括：在确定或调整页面布局中的多个显示属性时，还相应地调整页面布局中的多个声音属性。

下面根据图2所示的具体实施例进一步阐述本发明的具体实施方式。

本发明提出了一种基于机器学习平台Tensorflow.js，通过预构建的模型库分析用户行为数据，然后动态修改可变字体的属性以及层叠样式表，生成响应式页面布局的方法，参见图2，其具体实施过程如下：

首先，加载本发明实施例使用的机器学习平台Tensorflow SDK，并加载预先构建的模型库，如Facemesh(人脸识别模型，可以用以分析用户与屏幕的距离，用户表情等数据)、HandPose(实时手势检测模型，可以用以分析用户的手势数据)、PoseNet(人体姿势评估模型，可以用以分析用户的肢体动作数据)等等。加载后，定义模型评估视频数据流的功能函数。

TensorFlow是人工智能AI领域的一个重要软件工具，是谷歌开发的开源软件。人工智能领域分为三个方面，即基础层、技术层和应用层；而TensorFlow是技术层中的学习框架，用来处理大量数据，快速建立数学模型完成智能功能。在TensorFlow中，用户需要使用Python等语言通过编程来搭建数学模型，这些模型被用于人工智能的应用，例如通过模型来识别物体。

为了使用TensorFlow，首先用户向TensorFlow输入搭建模型所需的信息，并转化为可处理数据。TF可以处理图片/视频/音频等信息。TF提供很多的函数模块，在搭建模型过程中，用户可以调用这些函数。例如gradient descent梯度下降函数来求解模型的参数；如交叉熵损失loss()函数来判断模型是否最优。TF核心程序由2个独立部分组成：构建计算图和运行计算图。通过构建计算图和运行计算图，并循环地迭代式训练和评估模型，以便确定模型中的参数，例如使用梯度下降函数方法获得交叉熵损失最小化。训练的每一步都是通过用户代码控制。

在训练模型过程中可以查看即时数据的情况。另外训练过程大量计算部分可以分配给其他设备，如本机的GPU(图形处理器)或其他服务器(即分布式计算)。

本发明实施例公开所述的装置、设备等可为各种电子终端设备，例如手机、个人数字助理(PDA)、平板电脑(PAD)、智能电视等，也可以是大型终端设备，如服务器等，因此本发明实施例公开的保护范围不应限定为某种特定类型的装置、设备。本发明实施例公开所述的客户端可以是以电子硬件、计算机软件或两者的组合形式应用于上述任意一种电子终端设备中。

FaceMesh是一种脸部几何解决方案，即使在移动设备上，也可以实时估计468个3D脸部界标。它采用机器学习来推断3D表面几何形状，只需要单个摄像机输入，而无需专用的深度传感器。该解决方案利用轻量级的模型架构以及整个管线中的GPU加速，可提供对实时体验至关重要的实时性能。FaceMesh与"人脸几何"模块捆绑在一起，该模块弥合了人脸界标估计与有用的实时增强现实应用程序之间的差距。它建立了一个公制3D空间，并使用人脸界标屏幕位置来估计该空间内的人脸几何形状。面部几何数据由常见的3D几何图元组成，其中包括面部姿势转换矩阵和三角形面部网格。在后台，采用了一种称为的轻量级统计分析方法来驱动健壮，高性能和可移植的逻辑。该分析在CPU上运行，并且在ML模型推断的基础上具有最小的速度/内存占用量。

此外，根据本发明实施例公开的方法还可以被实现为由CPU执行的计算机程序，该计算机程序可以存储在计算机可读存储介质中。在该计算机程序被CPU执行时，执行本发明实施例公开的方法中限定的上述功能。上述方法步骤以及系统单元也可以利用控制器以及用于存储使得控制器实现上述步骤或单元功能的计算机程序的计算机可读存储介质实现。

Hand Pose是一种基于深度图的手势姿态估计。手的姿态估计现在越来越引起了学术界和工业届的关注，伴随着深度相机的技术越来越成熟，作为一种新的人机交互方式，应用场景也越来越广泛，比如车内的手势识别(宝马高端车已经有应用)，在VR系统中和虚拟环境的交互，在AR系统中的交互等。伴随着深度相机在手机上的慢慢普及，基于深度图像的应用也会越来越多。像手机上最多的应用目前还主要是用来做人脸识别，用人脸来解锁等一些应用。但是在VR和AR领域，手势识别能够给这些应用带来更加流畅的交互。

手的姿态估计输入是一幅深度图像，而不是普通摄像头获取的RGB图。一方面深度图自带深度信息，更容易恢复出每个关节的三维位置；另一方面RGB图对光线的要求较高，深度图像对光线不敏感，适用于各种不同场景，甚至是全黑的环境。这些优势主要得益于深度相机技术的发展，有基于双目的(对光线敏感)，基于红外的等等不同的深度相机实现方法。只要输入一个可靠的深度图像，就可以基于这个深度图像来恢复手的姿态。

本文所述的计算机可读存储介质(例如，存储器)可以是易失性存储器或非易失性存储器，或者可以包括易失性存储器和非易失性存储器两者。作为例子而非限制性的，非易失性存储器可以包括只读存储器(ROM)、可编程ROM(PROM)、电可编程ROM(EPROM)、电可擦写可编程ROM(EEPROM)或快闪存储器。易失性存储器可以包括随机存取存储器(RAM)，该RAM可以充当外部高速缓存存储器。作为例子而非限制性的，RAM可以以多种形式获得，比如同步RAM(DRAM)、动态RAM(DRAM)、同步DRAM(SDRAM)、双数据速率SDRAM(DDR SDRAM)、增强SDRAM(ESDRAM)、同步链路DRAM(SLDRAM)、以及直接Rambus RAM(DRRAM)。所公开的方面的存储设备意在包括但不限于这些和其它合适类型的存储器。

PoseNet是剑桥大学做的一个视觉定位模型，能够通过一张彩色图像定位位姿信息。在一个大的城市环境下，它只需要花费5ms来获取位姿信息，精度比GPS更高。并且相较于GPS，它能够确定方向且能够在室内运行。卷积神经网络也被应用于相机的姿态回归中。可以训练一个端到端的网络用于计算相机的位姿，系统十分简单，不需要一个大的数据集或者地标。相反，它学习了具有鲁棒性的高级特征，能够处理多种不同类型的相机，运行模糊，天气，行人以及其他干扰。它高度可扩展，只需要MB的存储空间并且能够以5ms一张图像的速度在大型的城市环境中进行定位。

结合这里的公开所描述的各种示例性逻辑块、模块、电路和算法步骤可以被实现为电子硬件、计算机软件或两者的组合。为了清楚地说明硬件和软件的这种可互换性，已经就各种示意性组件、方块、模块、电路和步骤的功能对其进行了一般性的描述。这种功能是被实现为软件还是被实现为硬件取决于具体应用以及施加给整个系统的设计约束。本领域技术人员可以针对每种具体应用以各种方式来实现所述的功能，但是这种实现决定不应被解释为导致脱离本发明实施例公开的范围。

然后，通过在Web中通过navigator.mediaDevices.getUserMedia方法获取访问用户摄像头的权限，并将视频数据流传输给网页的视频标签，通过定义好的模型评估视频数据流的功能函数对数据进行计算分析，得到响应式布局所需要的参照值，并将得到的参照值通过语句(document.documentElement.style.setProperty)，即自定义属性的参照值，传递到层叠样式表CSS的自定义属性中。

层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。

另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。

CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。

在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程度的缩减了页面的体积，减少下载的时间。

结合这里的公开所描述的各种示例性逻辑块、模块和电路可以利用被设计成用于执行这里所述功能的下列部件来实现或执行：通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。通用处理器可以是微处理器，但是可替换地，处理器可以是任何传统处理器、控制器、微控制器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP和/或任何其它这种配置。

最后，引入可变字体(如Roboto Flex、Amstelvar等)，根据上一步得到的层叠样式表CSS中的自定义属性值，动态的调整可变字体的各项属性(如粗细wght，宽度wdth，光学尺寸posz，倾斜度slnt和斜体ital等)以及提供不同的CSS样式，从而达到根据用户信息个性化提供响应式页面布局的效果。

结合这里的公开所描述的方法或算法的步骤可以直接包含在硬件中、由处理器执行的软件模块中或这两者的组合中。软件模块可以驻留在RAM存储器、快闪存储器、ROM存储器、EPROM存储器、EEPROM存储器、寄存器、硬盘、可移动盘、CD-ROM、或本领域已知的任何其它形式的存储介质中。示例性的存储介质被耦合到处理器，使得处理器能够从该存储介质中读取信息或向该存储介质写入信息。在一个替换方案中，所述存储介质可以与处理器集成在一起。处理器和存储介质可以驻留在ASIC中。ASIC可以驻留在用户终端中。在一个替换方案中，处理器和存储介质可以作为分立组件驻留在用户终端中。

可以看出在这样的过程中，视频数据流中的用户与屏幕的距离、表情、手势、肢体动作被提取出并基于机器学习的方式与CSS的自定义属性建立联系，进而影响网页的展示方式。这种机器学习可以是被动的或主动的。被动机器学习可以是例如用户在长久的使用过程中建立的行为-效果联系，例如当用户凑近屏幕时通常会放大字体、环境光弱时通常会提高对比度等，在长期的学习训练之后CSS的自定义属性可以在二者之间建立联系而不需要用户的主动训练；主动机器学习可以是用户将基于自己主动做出手势同时调整配置的行为反复重复来主动训练模型库和功能函数，也能得到相同的结果。本发明实施例同时兼容这两种做法。

所述功能可以在硬件、软件、固件或其任意组合中实现。如果在软件中实现，则可以将所述功能作为一个或多个指令或代码存储在计算机可读介质上或通过计算机可读介质来传送。计算机可读介质包括计算机存储介质和通信介质，该通信介质包括有助于将计算机程序从一个位置传送到另一个位置的任何介质。存储介质可以是能够被通用或专用计算机访问的任何可用介质。作为例子而非限制性的，该计算机可读介质可以包括RAM、ROM、EEPROM、CD-ROM或其它光盘存储设备、磁盘存储设备或其它磁性存储设备，或者是可以用于携带或存储形式为指令或数据结构的所需程序代码并且能够被通用或专用计算机或者通用或专用处理器访问的任何其它介质。此外，任何连接都可以适当地称为计算机可读介质。例如，如果使用同轴线缆、光纤线缆、双绞线、数字用户线路(DSL)或诸如红外线、无线电和微波的无线技术来从网站、服务器或其它远程源发送软件，则上述同轴线缆、光纤线缆、双绞线、DSL或诸如红外线、无线电和微波的无线技术均包括在介质的定义。如这里所使用的，磁盘和光盘包括压缩盘(CD)、激光盘、光盘、数字多功能盘(DVD)、软盘、蓝光盘，其中磁盘通常磁性地再现数据，而光盘利用激光光学地再现数据。上述内容的组合也应当包括在计算机可读介质的范围内。

从上述实施例可以看出，本发明实施例提供的页面布局方法，通过向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，获得参考数据并进一步写入层叠样式表；基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性的技术方案，能够基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验。

需要特别指出的是，上述页面布局方法的各个实施例中的各个步骤均可以相互交叉、替换、增加、删减，因此，这些合理的排列组合变换之于页面布局方法也应当属于本发明的保护范围，并且不应将本发明的保护范围局限在所述实施例之上。

基于上述目的，本发明实施例的第二个方面，提出了一种基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验的页面布局装置的一个实施例。装置包括：

处理器；

控制器，存储有处理器可运行的程序代码，处理器在运行程序代码时执行以下步骤：

向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；

获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，获得参考数据并进一步写入层叠样式表；

基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性。

从上述实施例可以看出，本发明实施例提供的页面布局装置，通过向机器学习平台加载预设的模型库，并据此在机器学习平台中确定功能函数；获取并将外部环境信息流传输到页面的指定标签，使用功能函数在机器学习平台中处理指定标签中的外部环境信息流，获得参考数据并进一步写入层叠样式表；基于层叠样式表而响应式地确定或调整页面布局中的多个显示属性的技术方案，能够基于用户自身及所处环境确定用户偏好并个性化地提供响应式网页布局，提升浏览体验。

需要特别指出的是，上述装置的实施例采用了所述页面布局方法的实施例来具体说明各模块的工作过程，本领域技术人员能够很容易想到，将这些模块应用到所述页面布局方法的其他实施例中。当然，由于所述页面布局方法实施例中的各个步骤均可以相互交叉、替换、增加、删减，因此，这些合理的排列组合变换之于所述装置也应当属于本发明的保护范围，并且不应将本发明的保护范围局限在所述实施例之上。

以上是本发明公开的示例性实施例，但是应当注意，在不背离权利要求限定的本发明实施例公开的范围的前提下，可以进行多种改变和修改。根据这里描述的公开实施例的方法权利要求的功能、步骤和/或动作不需以任何特定顺序执行。此外，尽管本发明实施例公开的元素可以以个体形式描述或要求，但除非明确限制为单数，也可以理解为多个。

所属领域的普通技术人员应当理解：以上任何实施例的讨论仅为示例性的，并非旨在暗示本发明实施例公开的范围(包括权利要求)被限于这些例子；在本发明实施例的思路下，以上实施例或者不同实施例中的技术特征之间也可以进行组合，并存在如上所述的本发明实施例的不同方面的许多其它变化，为了简明它们没有在细节中提供。因此，凡在本发明实施例的精神和原则之内，所做的任何省略、修改、等同替换、改进等，均应包含在本发明实施例的保护范围之内。

Claims (10)

1.一种页面布局方法，其特征在于，包括执行以下步骤：

向机器学习平台加载预设的模型库，并据此在所述机器学习平台中确定功能函数；

获取并将外部环境信息流传输到页面的指定标签，使用所述功能函数在所述机器学习平台中处理所述指定标签中的所述外部环境信息流，以获得参考数据并将其写入层叠样式表；

基于所述层叠样式表而响应式地确定或调整页面布局中的多个显示属性。

2.根据权利要求1所述的方法，其特征在于，向机器学习平台加载预设的模型库包括：向机器学习平台加载人脸识别模型库、实时手势检测模型库、人体姿势评估模型库。

3.根据权利要求2所述的方法，其特征在于，还包括：基于所述人脸识别模型库确定的所述功能函数确定用户与屏幕的距离和用户的表情；基于所述实时手势检测模型库确定的所述功能函数确定用户的手势；基于所述人体姿势评估模型库确定的所述功能函数确定用户的肢体动作。

4.根据权利要求1所述的方法，其特征在于，获取并将外部环境信息流传输到页面的指定标签包括：获取用户摄像头的访问权限，并基于所述访问权限从所述用户摄像头采集视频数据流作为所述外部环境信息流传输到页面的视频标签。

5.根据权利要求4所述的方法，其特征在于，使用所述功能函数在所述机器学习平台中处理所述指定标签中的所述外部环境信息流，以获得参考数据包括：使用所述功能函数在所述机器学习平台中对所述视频数据流持续执行数据分类，并将获得的数据分类结果作为参考数据。

6.根据权利要求5所述的方法，其特征在于，写入层叠样式表包括：将所述数据分类结果写入所述层叠样式表的自定义属性。

7.根据权利要求1所述的方法，其特征在于，基于所述层叠样式表而响应式地确定或调整页面布局中的多个显示属性包括：确定或调整页面布局中使用的可变字体的类型、属性参数、和层叠样式表样式。

8.根据权利要求7所述的方法，其特征在于，可变字体的所述属性参数包括以下至少之一：粗细、宽度、光学尺寸、倾斜度、和斜体。

9.根据权利要求1所述的方法，其特征在于，还包括：在确定或调整页面布局中的多个显示属性时，还相应地调整页面布局中的多个声音属性。

10.一种页面布局装置，其特征在于，包括：

处理器；

控制器，存储有所述处理器可运行的程序代码，所述处理器在运行所述程序代码时执行以下步骤：

向机器学习平台加载预设的模型库，并据此在所述机器学习平台中确定功能函数；

获取并将外部环境信息流传输到页面的指定标签，使用所述功能函数在所述机器学习平台中处理所述指定标签中的所述外部环境信息流，以获得参考数据并将其写入层叠样式表；

基于所述层叠样式表而响应式地确定或调整页面布局中的多个显示属性。

Images