Visualize proteins on Hugging Face Spaces
📰 Hugging Face Blog
Visualize proteins on Hugging Face Spaces using the Molecule3D Gradio Custom Component
Action Steps
- Install the Molecule3D Gradio Custom Component using pip install gradio_molecule3d
- Import the Molecule3D component and create a Gradio app to visualize proteins
- Define the representation of the protein using a dictionary with model, chain, resname, style, color, and residue_range
- Use the Molecule3D component to render the protein visualization in the Gradio app
Who Needs to Know This
Data scientists and researchers working with protein structures can benefit from this tutorial to visualize proteins on Hugging Face Spaces, while software engineers can use this to build custom visualization tools
Key Insight
💡 The Molecule3D Gradio Custom Component allows users to modify protein visualizations on the fly and set default visualizations easily
Share This
💡 Visualize proteins on Hugging Face Spaces with Molecule3D Gradio Custom Component
Key Takeaways
Visualize proteins on Hugging Face Spaces using the Molecule3D Gradio Custom Component
Full Article
Published Time: 2022-08-24T00:00:00.122Z
# Visualize proteins on Hugging Face Spaces
[Hugging Face](https://huggingface.co/)
* [Models](https://huggingface.co/models)
* [Datasets](https://huggingface.co/datasets)
* [Spaces](https://huggingface.co/spaces)
* [Buckets new](https://huggingface.co/storage)
* [Docs](https://huggingface.co/docs)
* [Enterprise](https://huggingface.co/enterprise)
* [Pricing](https://huggingface.co/pricing)
*
*
* * *
* [Log In](https://huggingface.co/login)
* [Sign Up](https://huggingface.co/join)
[Back to Articles](https://huggingface.co/blog)
# [](https://huggingface.co/blog/spaces_3dmoljs#visualize-proteins-on-hugging-face-spaces) Visualize proteins on Hugging Face Spaces
Published August 24, 2022
[Update on GitHub](https://github.com/huggingface/blog/blob/main/spaces_3dmoljs.md)
[- [x] Upvote 2](https://huggingface.co/login?next=%2Fblog%2Fspaces_3dmoljs)
* [](https://huggingface.co/TornikeO "TornikeO")
* [](https://huggingface.co/as-cle-bert "as-cle-bert")
[](https://huggingface.co/simonduerr)
[Simon Duerr simonduerr Follow](https://huggingface.co/simonduerr)
guest
* [Motivation 🤗](https://huggingface.co/blog/spaces_3dmoljs#motivation-%F0%9F%A4%97 "Motivation 🤗")
* [Seeing is believing](https://huggingface.co/blog/spaces_3dmoljs#seeing-is-believing "Seeing is believing")
* [Prerequisites](https://huggingface.co/blog/spaces_3dmoljs#prerequisites "Prerequisites")
* [Taking a Look at the Code](https://huggingface.co/blog/spaces_3dmoljs#taking-a-look-at-the-code "Taking a Look at the Code")
* [Issues](https://huggingface.co/blog/spaces_3dmoljs#issues "Issues")
In this post we will look at how we can visualize proteins on Hugging Face Spaces.
**Update May 2024**
While the method described below still works, you'll likely want to save some time and use the [Molecule3D Gradio Custom Component](https://www.gradio.app/custom-components/gallery?id=simonduerr%2Fgradio_molecule3d). This component will allow users to modify the protein visualization on the fly and you can more easily set the default visualization. Simply install it using:
```bash
pip install gradio_molecule3d
```
```python
from gradio_molecule3d import Molecule3D
reps = [
{
"model": 0,
"chain": "",
"resname": "",
"style": "stick",
"color": "whiteCarbon",
"residue_range": "",
"around": 0,
"byres": False,
}
]
with gr.Blocks() as demo:
Molecule3D(reps=reps)
```
## [](https://huggingface.co/blog/spaces_3dmoljs#motivation-%F0%9F%A4%97) Motivation 🤗
Proteins have a huge impact on our life - from medicines to washing powder. Machine learning on proteins is a rapidly growing field to help us design new and interesting proteins. Proteins are complex 3D objects generally composed of a series of building blocks called amino acids that are arranged in 3D space to give the protein its function. For machine learning purposes a protein can for example be represented as coordinates, as graph or as 1D sequence of letters for use in a protein language model.
A famous ML model for proteins is AlphaFold2 which predicts the structure of a protein sequence using a multiple sequence alignment of similar proteins and a structure module.
Since AlphaFold2 made its debut many more such models have come out such as OmegaFold, OpenFold etc. (see this [list](https://github.com/yangkky/Machine-learning-for-proteins) or this [list](https://github.com/sacdallago/folding_tools) for more).
## [](https://huggingface.c
# Visualize proteins on Hugging Face Spaces
[Hugging Face](https://huggingface.co/)
* [Models](https://huggingface.co/models)
* [Datasets](https://huggingface.co/datasets)
* [Spaces](https://huggingface.co/spaces)
* [Buckets new](https://huggingface.co/storage)
* [Docs](https://huggingface.co/docs)
* [Enterprise](https://huggingface.co/enterprise)
* [Pricing](https://huggingface.co/pricing)
*
*
* * *
* [Log In](https://huggingface.co/login)
* [Sign Up](https://huggingface.co/join)
[Back to Articles](https://huggingface.co/blog)
# [](https://huggingface.co/blog/spaces_3dmoljs#visualize-proteins-on-hugging-face-spaces) Visualize proteins on Hugging Face Spaces
Published August 24, 2022
[Update on GitHub](https://github.com/huggingface/blog/blob/main/spaces_3dmoljs.md)
[- [x] Upvote 2](https://huggingface.co/login?next=%2Fblog%2Fspaces_3dmoljs)
* [](https://huggingface.co/TornikeO "TornikeO")
* [](https://huggingface.co/as-cle-bert "as-cle-bert")
[](https://huggingface.co/simonduerr)
[Simon Duerr simonduerr Follow](https://huggingface.co/simonduerr)
guest
* [Motivation 🤗](https://huggingface.co/blog/spaces_3dmoljs#motivation-%F0%9F%A4%97 "Motivation 🤗")
* [Seeing is believing](https://huggingface.co/blog/spaces_3dmoljs#seeing-is-believing "Seeing is believing")
* [Prerequisites](https://huggingface.co/blog/spaces_3dmoljs#prerequisites "Prerequisites")
* [Taking a Look at the Code](https://huggingface.co/blog/spaces_3dmoljs#taking-a-look-at-the-code "Taking a Look at the Code")
* [Issues](https://huggingface.co/blog/spaces_3dmoljs#issues "Issues")
In this post we will look at how we can visualize proteins on Hugging Face Spaces.
**Update May 2024**
While the method described below still works, you'll likely want to save some time and use the [Molecule3D Gradio Custom Component](https://www.gradio.app/custom-components/gallery?id=simonduerr%2Fgradio_molecule3d). This component will allow users to modify the protein visualization on the fly and you can more easily set the default visualization. Simply install it using:
```bash
pip install gradio_molecule3d
```
```python
from gradio_molecule3d import Molecule3D
reps = [
{
"model": 0,
"chain": "",
"resname": "",
"style": "stick",
"color": "whiteCarbon",
"residue_range": "",
"around": 0,
"byres": False,
}
]
with gr.Blocks() as demo:
Molecule3D(reps=reps)
```
## [](https://huggingface.co/blog/spaces_3dmoljs#motivation-%F0%9F%A4%97) Motivation 🤗
Proteins have a huge impact on our life - from medicines to washing powder. Machine learning on proteins is a rapidly growing field to help us design new and interesting proteins. Proteins are complex 3D objects generally composed of a series of building blocks called amino acids that are arranged in 3D space to give the protein its function. For machine learning purposes a protein can for example be represented as coordinates, as graph or as 1D sequence of letters for use in a protein language model.
A famous ML model for proteins is AlphaFold2 which predicts the structure of a protein sequence using a multiple sequence alignment of similar proteins and a structure module.
Since AlphaFold2 made its debut many more such models have come out such as OmegaFold, OpenFold etc. (see this [list](https://github.com/yangkky/Machine-learning-for-proteins) or this [list](https://github.com/sacdallago/folding_tools) for more).
## [](https://huggingface.c
DeepCamp AI