在網路中，程式設計螢幕錄影已經成為了一個普遍資源，它可以幫助開發者學習心得程式設計技術。程式設計影片錄影中的原始碼對開發者來說，是有價值的資訊。但是由於程式設計螢幕錄影是流動的（例如，一組截圖的序列），這限制了開發者們在螢幕錄影中用原始碼交流。很多研究用 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 的設計與實現。
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.4 在 OCRed 原始碼中糾正錯誤給定一個被種植的程式碼區域影象，我們使用 Google Vision API 來提取原始碼。返回的 OCR 結果是 JSON 格式，且包含完整的被提取流和獨立文字和它們的邊界框。我們基於文字的位置重新建立被提取流到被規範的原始碼中。圖 7 表現了 OCRed 原始碼。
為了糾正錯誤，我們首先使用 Kandarp 和 Guo[13]的有效啟發式演算法來移除線的數目和糾正 Unicode 錯誤。然後我們結合了 Yalid 和 Yahav 的方法來更進一步糾正 OCR 錯誤。
4 實驗4.1 實驗設定4.1.1 程式設計影片教程資料集在本研究中，我們的目標程式設計螢幕錄影是實時編碼影片教程，即教程作者演示如何在 IDE(如 Eclipse、Intellij)中編寫程式。在本研究中，我們主要關注 Java 程式設計，但是很容易將我們的方法擴充套件到其他程式語言。由於 YouTube 有大量的程式設計影片教程，並且提供了 YouTube Data APIs 來輕鬆訪問和搜尋影片，因此我們基於 YouTube 影片構建了我們的程式設計影片教程資料集。本文考慮最熱門的 50 個 YouTube 播放列表，但因為一些教程作者並不是實時程式設計影片教程，而是使用了其他工具（例如 PPT）或者影片並不是螢幕錄影影片，所以最終並不是 50 個播放列表都使用了。
如表 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 慣例和過程相關的資訊。