Proteins drive everything from drug discovery to the enzymes in your laundry detergent, and the machine learning community has exploded with tools for predicting their structures. AlphaFold2 kicked off the modern era, and since then OpenFold, OmegaFold, and a growing list of alternatives have pushed the field forward. But a predicted structure is only useful if you can actually look at it. A new tutorial from Hugging Face shows developers how to embed interactive 3D protein visualizations directly into a Gradio app using 3Dmol.js and the HTML block.
The approach is refreshingly straightforward. A user enters a four-digit PDB code or uploads a PDB file, and the app fetches the structure from the RCSB Protein Data Bank or reads the uploaded file. The visualization itself lives inside an iframe, which the tutorial acknowledges is ‘a bit clunky’ but necessary to work around modern browser security rules. The iframe loads 3Dmol.js from a CDN along with JQuery, then renders the molecule in a container div that you can size with simple CSS.
Since May 2024, there’s actually an easier path. The Molecule3D Gradio custom component installs with a single pip command and accepts a list of representation dictionaries that control style, color, and which residues get highlighted. That’s a meaningful upgrade for anyone building protein-focused demos, since the component lets users modify the visualization on the fly rather than baking a static view into the page.
What’s notable here is how the Hugging Face ecosystem keeps absorbing specialized scientific tooling. The same Spaces infrastructure that hosts chatbot demos and image generators now handles macromolecular structure viewers. For researchers who want to share a new protein model or a dataset of predicted structures, the barrier to a working, interactive demo just dropped considerably. The tutorial’s example code is minimal enough that someone with basic Python and a passing familiarity with JavaScript can have a structure viewer running in an afternoon.
