Visualize proteins on Hugging Face Spaces

Hugging Face has introduced a method for visualizing 3D protein structures directly within Hugging Face Spaces. This integration allows developers to couple protein machine learning models with an interactive browser-based viewer, enabling the qualitative verification of predicted or redesigned protein structures.

Protein Visualization in Machine Learning

Protein structure is critical to understanding protein function. In the field of protein machine learning—which includes models like AlphaFold2, OmegaFold, and OpenFold—proteins are often represented as coordinates, graphs, or 1D sequences. Because the 3D arrangement of amino acids determines a protein's function, visualizing these structures is essential for researchers to interpret model outputs.

Integrating 3Dmol.js with Gradio

To visualize proteins in a Hugging Face Space, developers can use 3Dmol.js, a JavaScript library for molecular visualization, integrated via a Gradio HTML block.

Implementation Method

Because Gradio does not have a native 3Dmol block, the integration is achieved by returning an iframe containing an HTML document. This approach is necessary to comply with modern browser security rules.

  1. Data Retrieval: The application can accept a 4-digit PDB (Protein Data Bank) code to retrieve a file from the RCSB Protein Databank or accept a direct PDB file upload.
  2. HTML Setup: The head of the HTML document loads the 3Dmol.js library and jQuery.
  3. Rendering: The body of the HTML document defines a container div where the 3Dmol viewer is initialized. The PDB file content is passed into the viewer, styled (e.g., using the whiteCarbon color scheme), and rendered using the viewer.render() and viewer.zoomTo() methods.

Modern Alternative: Molecule3D Custom Component

As of May 2024, Hugging Face recommends using the Molecule3D Gradio Custom Component instead of the manual iframe method. This component simplifies the process and allows users to modify protein visualizations on the fly. It can be installed via pip:

pip install gradio_molecule3d

Practical Application: ProteinMPNN

An example of this visualization pipeline in production is the ProteinMPNN space. In this workflow, a user uploads a protein backbone, the ProteinMPNN inverse folding model predicts optimal sequences, and AlphaFold2 is used to verify if those sequences adopt the initial input backbone. High pLDDT scores from AlphaFold2, combined with qualitative visual confirmation that the structure matches the input backbone, indicate successful redesigns that should be tested in a laboratory setting.

Sources