在 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 问题，描述您的问题。
