Visualize proteins on Hugging Face Spaces

Protein machine learning has a visualization problem. You can build a model that predicts a structure or redesigns a backbone, but if all you show people is coordinates or a sequence of letters, nobody feels the result. Hugging Face's guide on embedding 3Dmol.js into Gradio Spaces fixes that gap, and it does it with surprisingly little code.

The core trick is an iframe. Gradio doesn't ship a native 3D molecule block, so the workaround is to generate a full HTML document on the fly, complete with a script tag pulling in 3Dmol.js and jQuery from a CDN, then hand that whole document to Gradio's HTML component as srcdoc. It's a bit ugly, sure, but it sidesteps the security restrictions modern browsers put on injecting live JavaScript. Once the head loads 3Dmol.js, the body just needs a container div and a short script that creates a viewer, feeds it PDB file content as a template literal, and calls addModel, setStyle, zoomTo, and render.

The demo app itself is small: a textbox for a four-letter PDB code, a file upload for people who already have their own structure, and a button. Type in something like 1AKE and the app calls wget against RCSB's Protein Data Bank to fetch the file; upload your own and it reads that instead. Either way the result gets piped into the same molecule function that builds the iframe. Nothing exotic, just glue code connecting a well-worn Python habit to a browser-based viewer that most structural biologists already trust.

What makes this more than a toy is the pointer toward the ProteinMPNN Space, a working production example. There a user uploads a protein backbone, ProteinMPNN proposes new amino acid sequences that should fold into that same shape, and AlphaFold2 then re-predicts the structure of each candidate to check whether it actually matches. High pLDDT confidence scores on the AlphaFold2 rerun are the signal that a redesign is worth taking into a wet lab. That's the real payoff of visualization here — it turns an abstract confidence metric into something you can visually compare, cartoon ribbon against cartoon ribbon.

Hugging Face also flags a shortcut for anyone building this today: the Molecule3D Gradio custom component, added in May 2024, wraps most of this iframe plumbing so you can set representations like stick style or carbon coloring with a plain Python dictionary instead of hand-rolling HTML. The original 3Dmol.js method still works and is worth understanding, especially if you want a custom colorfunc tied to some per-atom property like ligand-binding likelihood, but for most people the component is now the faster path.