psc2code: 基于编程截屏的降噪代码提取

摘要

在网络中，编程屏幕录像已经成为了一个普遍资源，它可以帮助开发者学习心得编程技术。编程视频录像中的源代码对开发者来说，是有价值的信息。但是由于编程屏幕录像是流动的（例如，一组截图的序列），这限制了开发者们在屏幕录像中用源代码交流。很多研究用 Optical Character Recognition（OCR）技术来将屏幕图像（也指视频桢）转换成文本，然后文本若需要被更轻松搜索，可以被编入索引。然而，带噪声屏幕图像显著地影响力由 OCR 提取的源代码的质量，例如，非代码桢（比如 ppt 页，API 说明书的网页），非代码区域（比如 Package Expolrer 视图，和控制台视图）和在完成建议弹出窗口中的带噪声编码区域。此外，因为代码的特征（例如长复合标识符，ItemListener），专业的 OCR 工具甚至都不能没有错误的从屏幕图像中提取源代码。带噪声的由 OCR 提取的源代码（记作 OCRed）会对下游应用程序产生不好的影响，例如在编程屏幕录像中对源代码的有效的搜索和导航。

本文提出了一个方法（psr2code）来对从编程屏幕录像中提取的源代码过程进行去噪。第一，psr2code 基于图像分类利用了卷积神经网络（CNN）来移除非代码和噪声编码桢。然后 psr2code 用边缘检测和基于聚类的图像分割来检测代码桢的子窗口，并且基于被检测的子窗口，psr2code 是识别并种植了最有可能是代码编辑器的屏幕区域。最后 psr2code 用 API 的专业 OCR 工具来提取被种植的代码区域的源代码，并利用编程屏幕录像的 OCRed 交叉桢信息和一个大型源代码库的统计语言模型来修正 OCRed 源代码的错误。

文章基于 YouTube 上 1142 的编程屏幕录像进行了实验，实验发现文章基于 CNN 的图像分类技术能够有效地移除非代码和噪声代码桢，能在有效的代码桢中达到 F1 分数为 0.95。另外 psr2code 能通过真实地纠正一半的不正确 OCRed 文字，从而显著地提升 OCRed 源代码的质量。基于被 psr2code 降噪的源代码，文章完成了两个应用：1 一个编程屏幕录像的搜索引擎，2 一个交互增强的编程屏幕录像观看工具。基于从 1142 个编程屏幕录像中提取的源代码，文章实验表明文章的编程屏幕录像搜索引擎达到精度 0.93，0.81，0.63（分别 5，10，20 次）。本文建立了一个对交互增强编程屏幕录像观看工具的用户调查，有十个参与者。这个用户调查表明文章的交互增强编程观看工具能更有效地帮助参与者学习编程屏幕录像中的知识。

关键词：编程视频，深度学习，编程搜索

1 介绍

文章贡献：

1，本文识别了在从编程屏幕录像中提取源代码过程中的三个“噪音”挑战。

2，本文提出并完成了一个系统的降噪方法来解决这三个“噪音”挑战

3，本文在两个下游应用程序中实施了大规模的实验来评估降噪方法的有效性和实用性。

文章结构：

文章的剩余部分结构如下：

第二部分描述了文章工作动机的例子。第三部分展示了 psr2code 的设计与实现。

第四部分描述了对 psr2code 的实验设置和结果。第五部分展现了 psr2code 的有用性。第六部分讨论了在调查中的对有效性的威胁。第七部分则回顾了相关的工作。第八部分总结文章并讨论未来的计划。

2 动机

本文识别了影响从编程屏幕录像中对源代码提取过程的三个“噪音”挑战和测试了提取的源代码的质量，本部分将用例子表述这三个挑战。

2．1 非代码结构

非代码桢指的是软件开发工具以外的软件应用的屏幕图像，或者是软件开发工具中不含源代码的屏幕图像。图 1 展现了一些我们经常在 YouTube 编程视频中看见的非代码桢典型的例子，包括 ppt 页的桢和一个 API 说明页的网页桢。许多非代码桢，比如 ppt 页，并不含有源代码。一些非代码桢可能包含一些代码元素和代码片段，例如，API 声明和 Javadoc 页的样例代码，或者是 Package Explorer 和 IDEs 的 Outline 视窗的文件，种类和方法名字。本文聚焦于开发者在软件开发工具写的或者看的源代码。所以，文章总结出这些非代码桢。

2.2 非代码区域和噪声代码区域

现代的开发工具往往包含许多非代码子窗口（例如 Package Explorer，Outline，Console）。因此，一个代码桢总是包含许多非代码区域和代码编辑器区域。这样的 UI 图像包含多种有独立内容的区域。它们与 OCR 技术往往处理的图像有着非常大的不同。所以，对这样的 UI 图像直接应用 OCR 技术往往会有不好的结果。目前对从编程屏幕录像中提取源代码的技术利用计算机视觉技术（例如，边缘检测）来识别桢中的感兴趣的区域（ROI），可能是 IDEs 的代码编辑器子窗口。

然而，就像图 2a 的绿线说的一样（或者可在图 6 例子中可见），对 UI 图像的边缘检测因为多种子窗口，滚动条，代码的高亮还有其他的原因趋向于产生噪音很大的结果。被检测的带噪声的水平线和竖直线会对子窗口的边界的准确识别产生不好的影响，由此进而导致为 OCR 技术对代码编辑器区域的不正确切割。目前的方法不能明确的解决这个问题，相反，本文的方法用边缘检测聚类和桢布置聚类来减少被检测噪音水平和竖直线并提高子窗口切割的准确性。

包含一些弹出窗口的代码编辑器是一个带噪声的区域。如图 2b 中的例子一样，这样的弹出窗口导致三个结果：1，弹出窗口因为含有代码元素使得对代码编辑器识别变得复杂。2，弹出窗口可能挡住编辑器中的正确的代码，并且弹出窗口的代码元素可能与编辑器中的代码有着不一样的视觉表现和对齐方式。3，弹出窗口常常包含从不在编辑屏幕录像中使用的代码元素（例如图 2 中弹出窗口的 API hashcode tostring）

2.3 OCR 错误

就算代码编辑器区域能被准确切割，有 OCR 提取出来的源代码仍然含有典型的 OCR 错误，有以下三种原因：1，OCR 往往需要有 300DPI 的输入图像，但是编程屏幕录像中的桢总是有非常低的 DPI。2，代码的高亮改变了被高亮代码的前景和背景色，这导致了背景和被高亮代码之间的低对比，这能影响 OCR 结果的质量。3，UI 成分（例如光标）的重叠和其下面的代码也能有 OCR 错误。

图 3 展现了对第 2、3 的原因的例子。

3 方法

图 4 描述了 psr2code 的工作流。给定一个编程屏幕录像（例如 YouTube 的编程视频教程），psr2code 首先计算被标准化的连续桢的 NRMSE 并且移除完全相同或者接近完全相同的桢。这样的完全相同或者接近完全相同的桢成为非信息桢，因为分析他们并不能增加新的信息。然后，psr2code 利用基于 CNN 图像分类技术来移除非代码桢（例如 ppt 页桢）和噪音代码桢（例如有完成建议弹出窗口的桢）。接着，psr2code 检测有效的代码桢的子窗口边界并且种植了最可能含有代码编辑器窗口的桢区域。在这一步，psr2code 聚集了附近候选的边界线和有着相似窗口布置的桢来减少子窗口边界检测的噪音。最后 psr2code 通过 OCR 技术从被种植的代码区域的提取源代码并且基于屏幕录像的交叉桢信息和源代码的一个统计语言模型来修正 OCRed 代码。

3.1 减少非信息结构

给定一个屏幕录像，psr2code 首先对屏幕录像的每一秒进行采样。它使用 FFmpeg 对每一秒提取了第一桢的图像。对提取桢的序列记作 。然后它从第一提取桢开始再使用图像差分技术来过滤掉没有或者有细微差别的后续桢。给定两个桢，psr2code 计算 NRMSE 作为两桢之间的差异。因为 NRMSE 介于 0（完全相同）-1（完全不同）之间。如果两帧之间差异低于阈值 ，则 psr2code 舍弃靠后的那一桢作为非信息桢。否则前一桢是信息桢，后一桢作为新的起始点来比较后续的桢。

3.2 移除非代码和噪声代码结构

我们设计并训练基于 CNN 的图像分类器来识别非代码和噪声代码桢。特别地，我们指定任务作为二元图像分类问题，例如，预测桢是否含有有效代码

非有效桢：桢还有非 IDE 窗口或者 IDE 窗口没有或者部分有可视代码

有效桢：桢还有 IDE 窗口，且至少有一个完整的包含可视源代码的代码编辑器窗口

3.2.1 对训练桢进行贴标签

本文从数据集中选出 50 个视频，数据集含有 23 个播放列表，1142 个视频。每个播放列表中一定至少有一个视频被选中。有八个被选中视频中开发者没有使用 Eclipse 作为 IDE。在移除非信息桢之后，这 50 个被选中视频一共有 5188 信息桢。为了贴标签，我们开发另一个网页应用，它可以显示出一个接着一个屏幕录像的信息桢。

3.2.2 建立基于 CNN 的图像分类器

我们随机地将被贴好标签的桢分成两部分：90%作为训练数据来训练基于 CNN 的图像分类器，10%作为测试数据来评估模型。我们在模型的训练和测试中使用 10 倍交叉验证。CNN 模型需要输入图像有固定的规格，但是不同的录像的视频帧常常有不同的分辨率，所以我们将所有桢都统一调整为 300x300p。我们延续以往的研究，利用一个 VGG 网络来预测一个桢是否包含源代码，一个 VGG 网络包含大量的连续卷积层，接着有一个最大的池化层用于下采样。

3.3 有区别代码 vs 非代码区域

3.3.1 检测候选边界线

我们用 Canny 边界检测器来提取一个桢的边界线图。然后使用概率霍夫转换来获取水平和竖直线，因为这些很可能是子窗口的边界。我们过滤掉非常短的线（本文设置为小于 60p），因为这些不太可能是子窗口的边界。图 6b、e 分别在图 6a d 展示了提取出来的水平线和竖直线的结果。为了减少噪声水平/数值线，我们使用基于密度聚类算法 DBSCAN 来基于集合距离和重叠对附近的水平或者竖直线进行聚类。每个线的聚类由聚类中的最长的线表示。通过这一步，我们移除了一些附近的水平和竖直线，这样可以减少子窗口检测的复杂性。

3.3.2 有相同的窗口布置的桢聚类

为了检测有相同窗口布置的桢，我们基于被检测的水平和竖直线进行对桢的聚类。分别表示一个桢中的 m 个水平线和 n 个竖直线。每个线能被安排一个独立的编号 ，由此桢 f 可以表示成下面向量 V（f）：然后我们使用 DBSCAN 聚类算法基于线的距离进行聚类。每个聚类代表一个不同的窗口布置。且对每个聚类，我们只保留最主要的桢所共享的线。由此，我们又能移除一些候选的边界线，这些被移除的线只在一些桢里面出现，但在其他桢里面不出现。图 5c f 表明基于相同窗口布置的对常见线的分析结果。从结果上看，许多噪声线例如高亮，被成功移除了。

3.3.3 检测子窗口和代码区域

基于以上两步后得到的清晰的边界线，我们通过形成长方形来检测子窗口。当一些候选长方形之间重叠的时候，我们保留最小的长方形作为子窗口的边界，这样子能让我们种植主要的子窗口的内容区域，但是忽略了窗口的装饰，例如滚动条，头条和标尺。我们数据集中发现 IDE 的代码编辑器窗口总是占据最大的区域。所以，我们挑选了被检测子窗口中的最大区域作为代码区域。

3.4 在 OCRed 源代码中纠正错误

给定一个被种植的代码区域图像，我们使用 Google Vision API 来提取源代码。返回的 OCR 结果是 JSON 格式，且包含完整的被提取流和独立文字和它们的边界框。我们基于文字的位置重新建立被提取流到被规范的源代码中。图 7 表现了 OCRed 源代码。

为了纠正错误，我们首先使用 Kandarp 和 Guo[13]的有效启发式算法来移除线的数目和纠正 Unicode 错误。然后我们结合了 Yalid 和 Yahav 的方法来更进一步纠正 OCR 错误。

4 实验

4.1 实验设置

4.1.1 编程视频教程数据集

如表 2 所示，我们只考虑了 23 个播放列表，1142 个视频。我们的数据集在覆盖的编程知识、使用的开发工具和视频统计方面是不同的，。许多播放列表都是为 Java 的初学者准备的。但是有一些播放列表提供了先进的 Java 编程知识，比如多线程（p6）、象棋游戏（p12）和 2D 游戏编程（p15）。在这些 23 个播放列表中，大部分教程作者用 Eclipse 作为 IDE，然而一些教程作者用其他 IDEs 包括 NetBeans（p19、p20）Intellij IDEA（p12）和 Notepad++（p2）。大多数的视频时间为 5-10 分钟，除了那些在 p5 播放列表中的它们的时间超过一小时。这是因为 p5 的每个视频覆盖率许多概念，然而其他播放列表总是一个视频只有一个主要概念。P1、11、22 的播放列表的分辨率为 360p（480x360），其他播放列表的分辨率为 720p(1280x720)。

4.2 实验结果

4.2.1 移除非信息桢（RQ1）的有效性

我们发现，在 1189 个非信息性桢中，有 11 个桢(少于 1%)包含至少一条完整语句，是在信息性桢中找不到的。这 11 桢来自 6 个视频，一个视频中不正确的无信息桢的最大数目是 3。然而，我们发现这些被丢弃的信息桢中的源代码通常是在中间的，并且会被开发人员在短时间内更改。例如，在播放列表 P1 的采样视频中，在非信息桢中发现了 3 个信息桢。3 个信息桢中的一个有 3 个相同的语句 System.out.println("Sophomore")，但有不同的 if 条件，这是通过复制粘贴生成的。而在信息桢中，我们在一些桢中只发现了三个 System.out.println 语句中有“Sophomore”、“Junior”、“Senior”。总的来说，我们认为信息损失很小，不会影响我们最终的分析结果，因为只有一小部分不重要的信息被驳回。

4.2.2 识别非代码和噪声代码桢的有效性（RQ2）

表 3 给出了被检查的 46 个编程视频中 4,828 桢的预测结果的表现(在最后一行中，前六列是所有播放列表的总和，后七列是总体指标)。总体准确率为 0.85，无效桢和有效代码桢的总体 F1 得分分别为 0.88 和 0.83。这些结果表明，psc2code 图像分类器能够有效地从无效桢中识别出有效代码桢。

4.2.3 在代码桢中定位代码区域的有效性

表 4 给出了 psc2code 与基线方法在准确率、有效桢与无效桢的 F1 分数、IoU 上的对比结果。在准确性和 F1 分数方面，psc2code 的图像分类器对大多数播放列表(P3、P7 和 P18 播放列表除外)获得了比基线更好的性能。但对于 P3、P7 和 P18 的播放列表，差异很小。在 IoU 方面，除播放列表 P1 外，其他值均大于 0.85。对于播放列表 P1, IoU 的值为 0.78，这也是 Alahmadi et al.[1]研究成功的预测。与我们的方法相比，基线所获得的 IoUs 要小得多。我们应用 Wilcoxon 符号秩检验[30]，发现在 99%的置信水平下，统计学意义下有显著差异。

4.2.4 OCRed 源代码的质量的提升（RQ4）

表 5 给出了分析结果。在这个表中，#CorrectOCR 和#ErrorOCR 列分别列出了统计语言模型识别的明显正确和错误单词的数量。#Corrected 列是通过我们的方法纠正的错误单词的数量，#TrueCorrected 列是通过我们的方法正确纠正的错误单词的数量。最后两列分别列出了 Accuracy1 和 Accuracy2。

4.2.5 我们方法的有效性

8 总结

本文提出一种方法和系统（psr2code），可以对编程屏幕录像提取的源代码进行降噪。首先，训练一个基于 CNN 的图像分类器来预测桢是有效代码桢还是非代码桢，抑或是噪声代码桢。Psr2code 基于对子窗口边界和有相同窗口布置的桢聚集的检测，来提取代码区域。最后 psr2code 用一个专业的 OCR 工具来提取来自视频的源代码，并且利用编程屏幕录像的交叉桢的信息和一个大型源代码语料库的统计语言模型来纠正 OCRed 源代码的 OCR 错误。

本文在 YouTube 上收集了 23 个播放列表和 1142 个编程视频，来建立一个编程视频数据集并用于本文的实验中。文章系统地基于视频数据集，评估了 psr2code 的四个主要步骤。本文实验结果表明 psr2code 的降噪过程能显著地提升从编程屏幕录像提取出的源代码的质量。基于降噪后的源代码，文章实现了两个应用：

第一， 建立了一个编程视频的搜索引擎。用了一些常用的 Java APIs 的 20 个提问和编程概念，来对比在被 psr2code 降噪后的原代码库和有噪声的源代码库上的视频搜索引擎质量。结果证明被降噪后源代码库有更好的搜索准确性。

第二， 文章建立了一个基于网页的原型工具来提高在由 psr2code 提取源代码上的编程视频的导航和搜索能力。进行了有 10 个参与者的用户研究并发现与普通的视频播放器相比，用了 psr2code 的视频播放器能帮助参与者在视频教程中更有效和准确地导航编程视频和发现与内容、API 惯例和过程相关的信息。

致谢

本文由南京大学 2021 级博士研究生肖媛翻译转述。