Visualizar proteínas en Hugging Face Spaces

'Visualización de proteínas en Hugging Face Spaces'

En esta publicación veremos cómo podemos visualizar proteínas en Hugging Face Spaces.

Motivación 🤗

Las proteínas tienen un gran impacto en nuestra vida, desde medicamentos hasta detergentes. El aprendizaje automático en proteínas es un campo en rápido crecimiento que nos ayuda a diseñar proteínas nuevas e interesantes. Las proteínas son objetos 3D complejos compuestos generalmente por una serie de bloques de construcción llamados aminoácidos que se disponen en el espacio 3D para darle a la proteína su función. Con fines de aprendizaje automático, una proteína puede representarse, por ejemplo, como coordenadas, como gráfico o como una secuencia 1D de letras para su uso en un modelo de lenguaje de proteínas.

Un modelo de ML famoso para proteínas es AlphaFold2, que predice la estructura de una secuencia de proteínas utilizando un alineamiento de múltiples secuencias de proteínas similares y un módulo de estructura.

Desde que AlphaFold2 hizo su debut, han surgido muchos modelos similares, como OmegaFold, OpenFold, etc. (ver esta lista o esta lista para más información).

Ver para creer

La estructura de una proteína es una parte integral de nuestra comprensión de lo que hace una proteína. Hoy en día, hay algunas herramientas disponibles para visualizar proteínas directamente en el navegador, como mol* o 3dmol.js. En esta publicación, aprenderás cómo integrar la visualización de estructuras en tu Hugging Face Space utilizando 3Dmol.js y el bloque HTML.

Requisitos previos

Asegúrate de tener instalado el paquete de Python gradio y conocimientos básicos de Javascript/JQuery.

Echando un vistazo al código

Echemos un vistazo a cómo crear la demostración mínima funcional de nuestra interfaz antes de sumergirnos en cómo configurar 3Dmol.js.

Construiremos una aplicación de demostración simple que pueda aceptar un código PDB de 4 dígitos o un archivo PDB. Nuestra aplicación luego recuperará el archivo pdb de la Base de datos de proteínas RCSB y lo mostrará o usará el archivo cargado para mostrarlo.

import gradio as gr

def update(inp, file):
    # en este ejemplo simple, simplemente recuperamos el archivo pdb usando su identificador de RCSB o mostramos el archivo cargado
    pdb_path = get_pdb(inp, file)
    return molecule(pdb_path) # esto devuelve un iframe con nuestro visor
    

demo = gr.Blocks()

with demo:
    gr.Markdown("# Visor de PDB usando 3Dmol.js")
    with gr.Row():
        with gr.Box():
            inp = gr.Textbox(
                placeholder="Código PDB o cargar archivo a continuación", label="Estructura de entrada"
            )
            file = gr.File(file_count="single")
            btn = gr.Button("Ver estructura")
        mol = gr.HTML()
    btn.click(fn=update, inputs=[inp, file], outputs=mol)
demo.launch()

update: Esta es la función que procesa nuestras proteínas y devuelve un iframe con el visor

Nuestra función get_pdb también es simple:

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"

Ahora, ¿cómo visualizar la proteína ya que Gradio no tiene 3Dmol directamente disponible como bloque? Usamos un iframe para esto.

Nuestra función molecule, que devuelve el iframe, conceptualmente se ve así:

def molecule(input_pdb):
    mol = read_mol(input_pdb)
    # configurar el documento HTML
    x = ("""<!DOCTYPE html><html> [..] </html>""") # no utilizar ' en esta entrada
    return f"""<iframe  [..] srcdoc='{x}'></iframe>

Esto es un poco engorroso de configurar, pero es necesario debido a las reglas de seguridad en los navegadores modernos.

La configuración de 3Dmol.js es bastante fácil y la documentación proporciona algunos ejemplos.

La head de nuestro documento devuelto necesita cargar 3Dmol.js (que a su vez también carga 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:Ninguno;
    }
    </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>

Los estilos para .mol-container se pueden utilizar para modificar el tamaño del visor de moléculas.

El body se ve de la siguiente manera:

<body>
    <div id="container" class="mol-container"></div>
    <script>
        let pdb = mol // mol contiene el contenido del archivo PDB, revisa el código completo en hf.space/simonduerr/3dmol.js
        $(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>

Utilizamos una plantilla literal (indicada con comillas invertidas) para almacenar nuestro archivo PDB en el documento HTML directamente y luego mostrarlo usando 3dmol.js.

Y eso es todo, ahora puedes acoplar tu modelo de ML de proteínas favorito a una aplicación gráfica divertida y fácil de usar y visualizar directamente estructuras predichas o rediseñadas. Si estás prediciendo propiedades de una estructura (por ejemplo, qué tan probable es que cada aminoácido se una a un ligando), 3Dmol.js también permite usar una colorfunc personalizada basada en una propiedad de cada átomo.

Puedes verificar el código fuente del espacio 3Dmol.js para ver el código completo.

Para un ejemplo de producción, puedes revisar el espacio ProteinMPNN donde un usuario puede cargar un esqueleto, el modelo de plegamiento inverso ProteinMPNN predice nuevas secuencias óptimas y luego se puede ejecutar AlphaFold2 en todas las secuencias predichas para verificar si adoptan el esqueleto inicial de entrada. Los rediseños exitosos que adopten cualitativamente la misma estructura que predice AlphaFold2 con una puntuación alta de pLDDT deben ser probados en el laboratorio.

Si encuentras algún problema con la integración de 3Dmol.js en Gradio/HF spaces, por favor abre una discusión en hf.space/simonduerr/3dmol.js .

Si tienes problemas con la configuración de 3Dmol.js – necesitas preguntar a los desarrolladores, por favor, abre un Issue de 3Dmol.js y describe tu problema.