元素|“解放”设计师!谷歌新工具可从网页自动生成短视频

From: UIST 2020; 编译: T.R
现如今 , 越来越多的网站开始上线短视频 , 为页面、产品或服务生成介绍 , 其中以电子商务网站尤甚 。 但是 , 为如此多的页面制作视频是十分繁琐、耗时的事 。 机器是否可以代替我们完成这个任务呢?
视频的设计需要充分考虑受众 , 不仅需要考虑设计元素的排版 , 还要考虑出场时间的先后 , 保证视频的叙事性与吸引力 。
一般而言 , 制作视频所需的视觉元素大多都已经包含于网站页面中 ,利用 机器学习工具将网页上的文字、图片转换成视频片段 , 能够提供更好的输出 , 覆盖更广泛的受众 。
为利用机器学习从网页自动创建短视频 , 谷歌研究人员在最近举办的UIST 2020 (User Interface Software and Technology) 会议上提出了名为URL2Video的工具 , 它可以自动将网页内容转换为内容连续、有良好观感的短视频片段 。
在一定的时间约束和视觉审美要求下 , URL2Video解析、抽取网页内容 , 分析页面设计风格 , 将页面的视觉元素组合成具有良好空间排布的序列 , 并使其保持与原页面的风格一致性 , 继而输出视频 。
在设定的输出设备宽高比例和视频长度下 , URL2Video可以将页面自动渲染为一段连续、合理、风格一致的短视频介绍 , 这会使介绍商品和服务页面的视频广告十分有吸引力 。

元素|“解放”设计师!谷歌新工具可从网页自动生成短视频
文章图片

URL2Video 整体架构
当用户提供目标产品或服务的页面URL后 , URL2Video将自动从页面中选取关键元素并决定按照怎样的时空关系对这些元素进行呈现 。 随后 , 根据视频或广告设计师的访谈内容 , URL2Video再对已有元素进行启发式设计 。
这些设计师的思想将启发算法捕捉常见的视频编辑风格 , 包括内容层次、信息呈现和持续时间 , 以及商品在颜色和风格上的一致性等等 。 利用设计师给的这些信息 , URL2Video可以严谨有序地处理页面、分析内容并选取显著内容 , 同时保持设计风格的一致性 , 随后将这些元素按照需求组织为特定的视频 。
【元素|“解放”设计师!谷歌新工具可从网页自动生成短视频】
元素|“解放”设计师!谷歌新工具可从网页自动生成短视频
文章图片

通过抽取页面的结构内容和设计信息 , URL2Video工具可以自动编辑并决定如何在视频中呈现关键信息 。 它在创作视频时同时考虑了用户定义的时空约束 。
URL2Video的具体工作流程如下:
1. 网页分析
在给定页面的URL后 , URL2Video会抽取页面的DOM信息和多媒体材料 , 并将包括标题、图像、按钮、细节描述等信息抽取出来形成候选资源列表 , 并抓取对应的原始素材以及对应的HTML标签和CSS风格 。
随后它将基于视觉呈现和标注对这些资源组进行评分排序 , 主要考量的要素包括HTML标签、渲染大小、页面上的顺序等等 。 比如 , 在页面上占据较大区域且在顶部的元素将会获得更高的得分 。
2. 基于约束的内容选择
在视频构建时需要考虑两个目标:其一 , 每个短视频应该提供简洁明了的信息;其二 , 视觉设计应该与原页面保持一致 。 这两个目标是生成视频片段的约束条件 , 包括用户期望的视频持续时间以及屏幕比例 。 URL2Video将自动从页面资源中选择元素并进行排列以优化最终的优先级得分 。
为了使内容简洁 , 视频仅仅呈现了页面的主要元素 , 例如标题和少量的多媒体内容 。 同时URL2Video在呈现元素的过程中也限制了每个元素的呈现时间 。 通过这样的方式 , 短视频将强调页面中最为显著的部分 , 较长的视频则会包含更多产品的相关元素 。
3. 场景重构和视频渲染
得到了基于DOM层级结构的资源列表和基于设计师访谈的启发式信息后 , URL2Video可从空间和时间上排布每个元素 , 将图形化的排版转换为视频对应的比例 , 同时将原页面风格应用于字体和颜色的选择中 。
为了获得更为动态和沉浸感的视频 , 它还能够自适应地调整视频中每个信息的呈现时间、方式和速度 , 最后通过MPEG-4容器格式渲染成最终的视频 。
4. 用户控制
交互界面可以让用户预览得到的视频 , 用户可在预览的基础上调整元素的位置和排序 , 改变设计的细节 , 调整字体、大小和颜色 , URL2Video可自适应地生成新的视频 。

元素|“解放”设计师!谷歌新工具可从网页自动生成短视频
文章图片

在URL2Video交互界面中 , 用户可以指定输入页面URL、目标页面的尺寸和输出视频的参数(左) 。 URL2Video可以分析网页内容并抽取主要元素 , 随后构建出一系列包含视觉与文字场景的故事板 , 这些元素将被渲染并输出视频 , 同时与输入页面在时空呈现与视觉风格上保持一致 。 用户可以回放视频检查视频内容(右下方) , 并针对性地对页面组织排布和时序进行调整(右上方) 。
URL2Video样例
下面展示利用这一方法为网页生成视频介绍的样例 。
目标页面是谷歌搜索的介绍页面 , URL2Video会将页面转换为一段12秒的视频剪辑 。 值得注意的是 , 整个算法会自动决定视频生成过程中所需的字体、颜色以及转场时间点 。

元素|“解放”设计师!谷歌新工具可从网页自动生成短视频
文章图片

URL2Video可以自动选择Google搜索介绍页面中的关键元素(顶部) , 包括标题、视频资源 , 它可以将这些元素转换到视频流中进行呈现 , 并且满足输出定义的要求(底部) 。
下面视频讲述了这一技术的实现细节:
为了测评自动生成的视频质量 , 研究邀请了设计师对生成视频进行评测 。 结果表明URL2Video可以有效地抽取页面中的主要元素 。 设计师们也认为 , 这一工具可以有效支持短视频的创作过程 。
未来展望
关于网页自动创建短视频 , 当前研究主要集中在视觉呈现上 。 目前 , 研究人员在继续研究如何将音频和旁白也添加到视频编辑中去 , 希望未来能够研发出一款高级的多媒体交互创作工具 , 将让机器学习工具来完成最基本的图像编辑、视频创作任务 , 使设计师解放出来 , 集中精力去进行更高级的创意设计 。
https://uist.acm.org/uist2020/
https://research.google/pubs/pub49618/
https://dl.acm.org/doi/proceedings/10.1145/3379350

    推荐阅读