在 Hugging Face Spaces 上視覺化蛋白質
在這篇文章中，我們將探討如何在 Hugging Face Spaces 上視覺化蛋白質。
2024 年 5 月更新
雖然下述方法仍然有效，但您可能希望節省時間並使用 Molecule3D Gradio 自定義元件。該元件允許使用者隨時修改蛋白質的視覺化效果，並且您可以更輕鬆地設定預設的視覺化方式。只需使用以下命令安裝即可：
pip install gradio_molecule3d
from gradio_molecule3d import Molecule3D
reps = [
{
"model": 0,
"chain": "",
"resname": "",
"style": "stick",
"color": "whiteCarbon",
"residue_range": "",
"around": 0,
"byres": False,
}
]
with gr.Blocks() as demo:
Molecule3D(reps=reps)
動機 🤗
蛋白質對我們的生活有著巨大影響——從藥物到洗衣粉。針對蛋白質的機器學習是一個快速發展的領域，幫助我們設計新穎有趣的蛋白質。蛋白質是複雜的三維物體，通常由一系列稱為氨基酸的構件組成，這些構件在三維空間中排列，賦予蛋白質其功能。在機器學習中，蛋白質可以被表示為座標、圖或一維字母序列，用於蛋白質語言模型。
一個著名的蛋白質機器學習模型是 AlphaFold2，它利用相似蛋白質的多序列比對和一個結構模組來預測蛋白質序列的結構。
自 AlphaFold2 問世以來，出現了許多類似的模型，如 OmegaFold、OpenFold 等 (更多資訊請參見這個列表或這個列表)。
眼見為實
蛋白質的結構是我們理解其功能不可或缺的一部分。如今，有一些工具可以直接在瀏覽器中視覺化蛋白質，例如 mol* 或 3dmol.js。在本文中，您將學習如何使用 3Dmol.js 和 HTML 塊將結構視覺化整合到您的 Hugging Face Space 中。
前提條件
請確保您已經安裝了 gradio Python 包，並具備 Javascript/JQuery 的基礎知識。
程式碼詳解
在深入研究如何設定 3Dmol.js 之前，讓我們先看看如何建立我們介面的最小可行演示。
我們將構建一個簡單的演示應用，可以接受一個 4 位數的 PDB 程式碼或一個 PDB 檔案。然後，我們的應用將從 RCSB 蛋白質資料庫中檢索 pdb 檔案並顯示它，或者使用上傳的檔案進行顯示。
import gradio as gr
def update(inp, file):
# in this simple example we just retrieve the pdb file using its identifier from the RCSB or display the uploaded file
pdb_path = get_pdb(inp, file)
return molecule(pdb_path) # this returns an iframe with our viewer
demo = gr.Blocks()
with demo:
gr.Markdown("# PDB viewer using 3Dmol.js")
with gr.Row():
with gr.Box():
inp = gr.Textbox(
placeholder="PDB Code or upload file below", label="Input structure"
)
file = gr.File(file_count="single")
btn = gr.Button("View structure")
mol = gr.HTML()
btn.click(fn=update, inputs=[inp, file], outputs=mol)
demo.launch()
update：這個函式負責處理我們的蛋白質，並返回一個帶有檢視器的 iframe。
我們的 get_pdb 函式也很簡單
import os
def get_pdb(pdb_code="", filepath=""):
if pdb_code is None or len(pdb_code) != 4:
try:
return filepath.name
except AttributeError as e:
return None
else:
os.system(f"wget -qnc https://files.rcsb.org/view/{pdb_code}.pdb")
return f"{pdb_code}.pdb"
那麼，由於 Gradio 沒有將 3Dmol 作為現成的塊提供，我們該如何視覺化蛋白質呢？我們可以使用 iframe 來實現。
我們的 molecule 函式返回 iframe，其概念如下
def molecule(input_pdb):
mol = read_mol(input_pdb)
# setup HTML document
x = ("""<!DOCTYPE html><html> [..] </html>""") # do not use ' in this input
return f"""<iframe [..] srcdoc='{x}'></iframe>
由於現代瀏覽器的安全規則，這樣設定有點笨拙，但卻是必要的。
3Dmol.js 的設定非常簡單，其文件提供了一些示例。
我們返回的文件的 head 部分需要載入 3Dmol.js (它同時也會載入 JQuery)。
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style>
.mol-container {
width: 100%;
height: 700px;
position: relative;
}
.mol-container select{
background-image:None;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://3Dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
</head>
.mol-container 的樣式可用於修改分子檢視器的大小。
body 部分如下
<body>
<div id="container" class="mol-container"></div>
<script>
let pdb = mol // mol contains PDB file content, check the hf.space/simonduerr/3dmol.js for full python code
$(document).ready(function () {
let element = $("#container");
let config = { backgroundColor: "white" };
let viewer = $3Dmol.createViewer(element, config);
viewer.addModel(pdb, "pdb");
viewer.getModel(0).setStyle({}, { cartoon: { colorscheme:"whiteCarbon" } });
viewer.zoomTo();
viewer.render();
viewer.zoom(0.8, 2000);
})
</script>
</body>
我們使用模板字面量 (由反引號表示) 將我們的 pdb 檔案直接儲存在 html 文件中，然後使用 3dmol.js 將其輸出。
就是這樣，現在您可以將您喜歡的蛋白質機器學習模型與一個有趣且易於使用的 gradio 應用相結合，並直接視覺化預測或重新設計的結構。如果您正在預測結構的屬性 (例如每個氨基酸結合配體的可能性)，3Dmol.js 還允許根據每個原子的屬性使用自定義的 colorfunc。
您可以檢視 3Dmol.js space 的原始碼以獲取完整程式碼。
作為一個生產示例，您可以檢視 ProteinMPNN space，使用者可以上傳一個骨架，逆向摺疊模型 ProteinMPNN 會預測新的最優序列，然後可以在所有預測序列上執行 AlphaFold2，以驗證它們是否能形成初始輸入的骨架。那些被 AlphaFold2 預測能定性地形成相同結構且具有高 pLDDT 分數的成功重新設計，應在實驗室中進行測試。
問題反饋
如果您在 Gradio/HF spaces 中整合 3Dmol.js 時遇到任何問題，請在 hf.space/simonduerr/3dmol.js 中發起討論。
如果您在 3Dmol.js 配置方面遇到問題，請向其開發人員尋求幫助，並提交一個 3Dmol.js 問題，描述您的問題。
