在Hugging Face Spaces上可视化蛋白质
Visualizing proteins on Hugging Face Spaces.
在本文中，我们将看看如何在Hugging Face Spaces上可视化蛋白质。
动机 🤗
蛋白质对我们的生活有巨大影响-从药物到洗衣粉。蛋白质上的机器学习是一个快速发展的领域，帮助我们设计新颖有趣的蛋白质。蛋白质是复杂的三维物体，通常由一系列称为氨基酸的构建块组成，这些构建块在三维空间中排列以赋予蛋白质其功能。对于机器学习的目的，蛋白质可以表示为坐标、图形或用于蛋白质语言模型中的字母的一维序列。
蛋白质的一个著名机器学习模型是AlphaFold2，它使用类似蛋白质的多序列比对和结构模块来预测蛋白质序列的结构。
自从AlphaFold2首次亮相以来，出现了更多类似的模型，例如OmegaFold、OpenFold等（请查看此列表或此列表以了解更多信息）。
眼见为实
蛋白质的结构是我们理解蛋白质功能的重要组成部分。现在，有一些工具可以直接在浏览器中可视化蛋白质，例如mol*或3dmol.js。在本文中，您将学习如何使用3Dmol.js和HTML块将结构可视化集成到您的Hugging Face Space中。
先决条件
确保您已经安装了gradio Python包，并具备基本的Javascript/JQuery知识。
看一下代码
在深入了解如何设置3Dmol.js之前，让我们先看一下如何创建接口的最小工作演示。
我们将构建一个简单的演示应用程序，可以接受一个4位数的PDB代码或一个PDB文件。我们的应用程序将从RCSB Protein Databank中检索pdb文件并显示它，或者使用上传的文件来显示。
import gradio as gr
def update(inp, file):
# 在这个简单的例子中，我们只是使用标识符从RCSB检索pdb文件或者显示上传的文件
pdb_path = get_pdb(inp, file)
return molecule(pdb_path) # 这将返回一个带有我们查看器的iframe
demo = gr.Blocks()
with demo:
gr.Markdown("# 使用3Dmol.js的PDB查看器")
with gr.Row():
with gr.Box():
inp = gr.Textbox(
placeholder="PDB代码或在下面上传文件", label="输入结构"
)
file = gr.File(file_count="single")
btn = gr.Button("查看结构")
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)
# 设置HTML文档
x = ("""<!DOCTYPE html><html> [..] </html>""") # 这个输入不要使用单引号
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包含PDB文件的内容，请查看hf.space/simonduerr/3dmol.js获取完整的Python代码
$(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输出它。
这就是全部内容，现在您可以将喜欢的蛋白质ML模型与有趣且易于使用的gradio应用程序进行耦合，并直接可视化预测或重新设计的结构。如果您正在预测结构的属性（例如每个氨基酸结合配体的可能性），3Dmol.js还允许使用基于每个原子属性的自定义colorfunc。
您可以查看3Dmol.js空间的源代码以获取完整的代码。
作为生产示例，您可以查看ProteinMPNN空间，用户可以上传一个骨架，逆向折叠模型ProteinMPNN预测新的最优序列，然后可以对所有预测的序列运行AlphaFold2，以验证它们是否采用了初始输入的骨架。成功重新设计的结构，其pLDDT得分高且与AlphaFold2预测的相同结构定性一致的，应在实验室中进行测试。
如果在Gradio/HF空间中集成3Dmol.js时遇到任何问题，请在hf.space/simonduerr/3dmol.js中发起讨论。
如果您遇到3Dmol.js配置问题-您需要询问开发人员，请打开一个3Dmol.js Issue并描述您的问题。
