在 Hugging Face Spaces 上視覺化蛋白質

Hugging Face 已推出一種在 Hugging Face Spaces 內直接視覺化 3D 蛋白質結構的方法。此整合讓開發者能將蛋白質機器學習模型與互動式瀏覽器檢視器結合，從而對預測或重新設計的蛋白質結構進行質性驗證。

機器學習中的蛋白質視覺化

蛋白質結構對於了解蛋白質功能至關重要。在蛋白質機器學習領域——包括 AlphaFold2、OmegaFold 與 OpenFold 等模型——蛋白質常以座標、圖形或一維序列的形式表示。由於氨基酸的 3D 排列決定蛋白質的功能，視覺化這些結構對研究人員解讀模型輸出是必不可少的。

將 3Dmol.js 與 Gradio 整合

要在 Hugging Face Space 中視覺化蛋白質，開發者可以使用 3Dmol.js，這是一個用於分子視覺化的 JavaScript 函式庫，透過 Gradio 的 HTML 區塊整合。

實作方法

由於 Gradio 沒有原生的 3Dmol 區塊，整合方式是回傳包含 HTML 文件的 iframe。此做法是為了符合現代瀏覽器的安全規範。

  1. 資料取得：應用程式可以接受 4 位數的 PDB（Protein Data Bank）代碼，以從 RCSB Protein Databank 取得檔案，或接受直接上傳的 PDB 檔案。
  2. HTML 設定：HTML 文件的 head 會載入 3Dmol.js 函式庫與 jQuery。
  3. 渲染：HTML 文件的 body 定義了一個容器 div，在此初始化 3Dmol 檢視器。PDB 檔案內容會傳入檢視器，套用樣式（例如使用 whiteCarbon 色彩方案），並透過 viewer.render() 與 viewer.zoomTo() 方法進行渲染。

現代替代方案：Molecule3D 自訂元件

截至 2024 年 5 月，Hugging Face 建議使用 Molecule3D Gradio Custom Component 取代手動 iframe 的方式。此元件簡化了流程，並允許使用者即時調整蛋白質視覺化。可透過 pip 安裝：

pip install gradio_molecule3d

實務應用：ProteinMPNN

此視覺化流程在實務中的範例是 ProteinMPNN space。於此工作流程中，使用者上傳蛋白質骨架，ProteinMPNN 逆向摺疊模型預測最佳序列，並使用 AlphaFold2 驗證這些序列是否採用最初的輸入骨架。AlphaFold2 的高 pLDDT 分數，結合結構與輸入骨架相符的質性視覺確認，表明重新設計成功，應於實驗室環境中進行測試。

Sources