Pandas Tutor：用 Pyodide 學(xué)習(xí)數(shù)據(jù)科學(xué)

在這篇文章中，我們將向你介紹免費教育工具Pandas Tutor，它可以幫助我們使用流行的pandas庫學(xué)習(xí)數(shù)據(jù)科學(xué)。上面的截圖顯示了如何使用它在一個基于網(wǎng)絡(luò)的編輯器中編寫Python和pandas代碼，并逐步看到你的代碼的可視化效果。

在概述了Pandas Tutor之后，我們將深入研究我們?nèi)绾螌⑵湟浦驳絇yodide的案例，以及為什么我們覺得Pyodide對于像我們這樣的教育用例來說是非常棒的。

什么是Pandas Tutor？

Pandas現(xiàn)在是數(shù)據(jù)科學(xué)的行業(yè)標(biāo)準(zhǔn)工具，但由于其復(fù)雜的API，學(xué)習(xí)起來還是有一定難度的。例如，這段代碼從 dogs的數(shù)據(jù)集中選擇、排序和分組數(shù)值，產(chǎn)生一個匯總表。但如果你在Jupyter notebook中運行這段代碼，你看到的只是最終結(jié)果。

pandas到底做了什么來把 dogs的數(shù)據(jù)集變成這個輸出的匯總表？從你上面看到的情況來看，這一點都不清楚。

如果你在Pandas Tutor 中運行這段相同的代碼，它就會在你的代碼選擇、排序、分組和計算組別中位數(shù)的過程中，一步步向你展示正在發(fā)生的事情。

教師可以使用Pandas Tutor來幫助他們的教學(xué)，而學(xué)生可以使用它來理解和調(diào)試他們的作業(yè)。

為什么要把Pandas Tutor移植到Pyodide？

最初版本的Pandas Tutor在我們的Linux服務(wù)器上運行用戶的代碼，為每一個代碼執(zhí)行請求啟動一個新的Docker容器。它的主要局限性在于速度慢--從用戶點擊 "運行 "按鈕開始，服務(wù)器需要5秒鐘的時間來運行他們的代碼，產(chǎn)生一步步的執(zhí)行跟蹤，并通過網(wǎng)絡(luò)發(fā)送到他們的瀏覽器。當(dāng)有很多并發(fā)用戶時，延遲可能會達到10秒，或者服務(wù)器可能會因為太多的Docker容器而崩潰。當(dāng)老師在講課或數(shù)百名學(xué)生同時使用該工具來可視化課堂上的代碼例子時，這可能是一個令人沮喪的用戶體驗。

除了用戶體驗，這種基于服務(wù)器的設(shè)置對維護也是一種痛苦，因為我們必須仔細配置Linux和Docker來處理不斷增加的規(guī)模。這意味著我們沒有維護一個生產(chǎn)規(guī)模的服務(wù)器部署設(shè)置所需的技術(shù)和機構(gòu)資源。

這就是為什么當(dāng)發(fā)現(xiàn)Pyodide時，我們非常興奮，因為它可以幫助我們克服所有這些限制。所以現(xiàn)在我們把Pandas Tutor移植到了Pyodide上。

• 用戶可以立即看到他們的可視化，因為他們的所有代碼都在瀏覽器中運行（在Pyodide的初始啟動時間之后）。在他們每次試圖運行一段代碼時，不再需要等待5-10秒的服務(wù)器端沙盒執(zhí)行和網(wǎng)絡(luò)數(shù)據(jù)傳輸。

• 與此相關(guān)，零延遲意味著我們甚至不需要 "運行 "按鈕了。Pandas Tutor會在用戶編輯代碼的過程中不斷地實時運行，這樣他們就能看到最新的可視化信息。

• 我們不再需要維護一個復(fù)雜的服務(wù)器端Linux和Docker設(shè)置。相反，我們可以將應(yīng)用程序作為靜態(tài)托管服務(wù)或CDN上的一個JavaScript包來提供。

• 由于我們不再在服務(wù)器上運行不受信任的用戶編寫的代碼，因此確保服務(wù)器的安全也變得更加容易。

• 現(xiàn)在，無論網(wǎng)站上有多少并發(fā)用戶，Pandas Tutor都可以毫不費力地進行擴展......如果在一個大講堂里有500多名學(xué)生同時使用它，也沒有問題 畢竟，由于Pyodide的魔力，每個人都在他們的筆記本電腦的瀏覽器中運行Python代碼。這樣的規(guī)模在我們基于服務(wù)器的設(shè)置中是不可能的。

總而言之，我們覺得Pyodide對于像我們這樣的可擴展的教育用例來說是非常強大的，因為它允許任何擁有網(wǎng)絡(luò)瀏覽器的人快速嘗試Python及其龐大的軟件包生態(tài)系統(tǒng)，而無需任何安裝或進行系統(tǒng)維護。

我們是如何移植它的，我們遇到了什么問題？

將Pandas Tutor從原來基于服務(wù)器的設(shè)置移植到Pyodide上是非常愉快的。在Pyodide核心開發(fā)者Roman Yurchak的幫助下，我們找到了一種完全不改變Pandas Tutor代碼庫的方法。

第一步：創(chuàng)建一個獨立的Pandas Tutor輪子

將自定義Pyodide代碼加載到Pyodide的推薦方式是使用輪子，所以我們首先創(chuàng)建了一個輪子來打包Pandas Tutor的后端代碼。這很簡單，因為它是純Python，不需要任何WASM代碼編譯。

然而，我們馬上就遇到了第一個問題。由于Pandas Tutor有近十種軟件包的依賴，我們原本以為可以使用micropip來安裝它們，正如Pyodide文檔所建議的那樣。不幸的是，有些軟件包不能用micropip安裝，因為它們在PyPI上沒有輪子（例如， micropip.install('docopt')不起作用）。我們的解決方案是將所有的依賴包捆綁（即內(nèi)聯(lián)）到一個獨立的Pandas Tutor輪子中，這樣我們的網(wǎng)絡(luò)前端代碼只需要調(diào)用micropip一次，而不是近十次的單獨調(diào)用。

const micropip = pyodide.pyimport("micropip");
await micropip.install("https://pandastutor.com/build/pandastutor-1.0-py3-none-any.whl");

這種方法還有一個很好的副作用，就是把所有的依賴版本固定下來，以提高API的穩(wěn)定性。我們唯一沒有捆綁的依賴是pandas，因為它需要WASM編譯的代碼。但幸運的是，Pyodide內(nèi)置了pandas!

第二步：在JavaScript中導(dǎo)入Pandas Tutor模塊

我們在前端的JavaScript中添加了一行，在頁面加載時從Pandas Tutor導(dǎo)入 main.py（在步驟1的輪子被安裝后）。

const pandastutor_py = pyodide.pyimport("pandas_tutor.main");

這是一個同步調(diào)用，在網(wǎng)絡(luò)應(yīng)用程序第一次加載時導(dǎo)入 pandas_tutor和所有的依賴項，所以它需要3-5秒才能完成，因為pandas和其他庫必須被加載。不幸的是，瀏覽器緩存并不能加快這里的速度，因為即使所有文件都被緩存在本地，Pyodide仍然需要運行導(dǎo)入和初始化代碼。

如果Pyodide能在所有文件被初始化后序列化一個二進制的內(nèi)存快照，可能會加快這個速度。然后用戶的瀏覽器可以在第一次訪問頁面時直接加載該快照，并為以后的訪問進行緩存。(但也許這個快照太大，無法有效加載）。

第三步：從JavaScript調(diào)用Pandas Tutor后臺代碼

現(xiàn)在我們可以從我們的前端JavaScript中調(diào)用Pandas Tutor后端，只需一行。

// 1) frontend grabs userCode from the user's in-browser code editor
// 2) run the user's code to produce an execution trace ...
const executionTrace = pandastutor_py.run_user_code(userCode);  
// 3) frontend process executionTrace to produce step-by-step visualizations

這一行在Pyodide中使用Pandas Tutor后端運行用戶的代碼，Pandas Tutor分析代碼，產(chǎn)生執(zhí)行跟蹤，前端使用它來呈現(xiàn)一步步的可視化。這行代碼最酷的地方在于，它直接從JavaScript無縫調(diào)用了Python函數(shù)。

在我們移植到Pyodide之前，這個過程需要向服務(wù)器發(fā)出HTTP請求，服務(wù)器會啟動一個新的Docker容器，在其中運行Pandas Tutor后端，并將生成的JSON執(zhí)行軌跡通過互聯(lián)網(wǎng)傳輸?shù)接脩舻臑g覽器。當(dāng)時有多個可能的故障點，而強大的異常處理是實現(xiàn)的一個痛苦。現(xiàn)在，一切都發(fā)生在瀏覽器中的一個函數(shù)調(diào)用，異常處理只是一行JavaScript代碼 try...catch!

其他微調(diào)和正在進行的工作

• 為了繼續(xù)支持舊的瀏覽器，我們的前端代碼會檢測是否有任何加載Pyodide版本的Pandas Tutor的問題，如果有，會自動恢復(fù)到原來的服務(wù)器端版本。另外，loadPyodide在一些舊的移動設(shè)備上會崩潰（可能是由于內(nèi)存有限），我們似乎無法捕捉到異常來恢復(fù)；所以我們在移動設(shè)備上默認(rèn)禁用它，并添加一個切換按鈕，讓用戶明確啟用它。(這也是很貼心的，因為它可以防止頁面在用戶的手機計劃中預(yù)先下載大量的數(shù)據(jù)）。

• 我們希望用戶在Pandas Tutor中編寫代碼時能夠?qū)肴魏伟５荘yodide的loadPackagesFromImports只適用于Pyodide自帶的包。為了給用戶更多的靈活性，我們寫了一個自動導(dǎo)入器，每當(dāng)用戶的代碼試圖導(dǎo)入一個未知的包時，就會自動調(diào)用?micropip.install()。這些包輪子會按需從PyPI下載并緩存在瀏覽器中。(注意，只有當(dāng)PyPI上的軟件包名稱與導(dǎo)入語句中的名稱一致時，這才起作用）。

• 預(yù)加載。一旦用戶訪問?pandastutor.com登陸頁面，它就開始在后臺下載Pyodide和選定的包（如pandas、numpy）。這樣，當(dāng)用戶進入可視化頁面時，這些包可能已經(jīng)被緩存在他們的瀏覽器中了，所以他們可以馬上開始工作。

• 緩存文件下載。一些 pandas 代碼使用?read_csv?或?read_html?等函數(shù)從網(wǎng)上下載數(shù)據(jù)文件。如果能在瀏覽器中本地緩存這些文件就更好了，這樣當(dāng)用戶將來重新運行這些代碼時，Pandas Tutor就不需要重復(fù)相同的下載。(瀏覽器可能已經(jīng)對Pyodide發(fā)出的獲取請求進行了緩存，但使用Pyodide/Emscripten文件系統(tǒng)API可以讓我們對文件緩存進行更精細的控制）。

• 啟動速度：即使所有軟件包都被緩存，在頁面加載時仍需要幾秒鐘來初始化Pandas Tutor。我們計劃對我們的代碼進行剖析，并可能嘗試使用 pyc-wheel 將我們輪子中的?*.py編譯成?*.pyc?文件。

未來。Pandas Tutor + Pyodide無處不在!

Pyodide對我們來說真的很令人興奮，因為它打開了將Pandas Tutor嵌入任何現(xiàn)有網(wǎng)站的大門，這樣任何人都可以在他們喜歡的網(wǎng)站背景下學(xué)習(xí)數(shù)據(jù)科學(xué)，而無需安裝任何東西。

為了實現(xiàn)這一目標(biāo)，我們正在建立一個書簽，將Pandas Tutor + Pyodide注入任何網(wǎng)頁，以增加一個可以訪問其DOM的內(nèi)聯(lián)代碼編輯器。這將允許學(xué)生編寫Python代碼，例如，使用BeautifulSoup解析HTML表格，清理原始數(shù)據(jù)，并將其繪制出來。下面是一個模擬截圖，將Pandas Tutor（紅色虛線框內(nèi)）注入維基百科頁面，為社會研究探索和繪制國家人口。

(這個想法最初來自于2017年的研究論文《DS.js：將任何網(wǎng)頁變成以實例為中心的實時編程環(huán)境，用于學(xué)習(xí)數(shù)據(jù)科學(xué)》，作者是 Xiong Zhang 和 Philip Guo)

接下來，我們可以把這個想法更進一步......如果官方的pandas API文檔是可運行的，那豈不是很酷？通過這個書簽，我們可以將Pandas Tutor + Pyodide注入到任何API文檔中，自動解析其代碼示例，將其可視化，并讓訪問者現(xiàn)場編輯該代碼以探索不同的參數(shù)值。

我們也可以用Stack Overflow或其他幫助論壇網(wǎng)站做同樣的事情，因為它們通常有自成一體的代碼例子，可以直接可視化。

這就是目前的情況，但這只是我們使用Pyodide的開始。在未來，當(dāng)我們用它來構(gòu)建大規(guī)模的數(shù)據(jù)科學(xué)教學(xué)工具時，請繼續(xù)關(guān)注更多的信息。

- 點擊下方閱讀原文加入社區(qū)會員 -