New Gallery for Interactive 3D molecules

[drigoni]

• [x ] I have searched to see if a similar issue already exists.

Is your feature request related to a problem? Please describe.
It would be amazing to plot many 3D molecule structures in the gallery object and to be able to interact with them. Currently, there is only the possibility to plot images.

Describe the solution you'd like
I would modify the gallery object to accept in input also py3Dmol viewer object instead of just static images (e.g.: PIL images). The plot and the interaction with the molecule would be managed by py3Dmol, which already support the 3D interactive image.

Additional context
The gallery should be something like in the image, with the possibility to interact with the molecules (the py3Dmol viewer object allows for it).

[abidlabs]

Hi @drigoni, thanks for the awesome component request. This is actually the perfect candidate for a Custom Gradio Component, if you'd be interested in putting this together!

tldr: as part of Gradio 4.0, we've made it possible for Gradio users to create their own custom components -- meaning that you can write some Python and JavaScript (Svelte), and publish it as a Gradio component. You can use it in your own Gradio apps, or share it so that anyone can use it in their Gradio apps. Here are some examples of custom Gradio components:

• A "Rich Textbox" that allows you to write bold/italics/colored text: https://huggingface.co/spaces/abidlabs/gradio_rich_textbox
• A "Folium Map Viewer" component that allows you to use interactive maps: https://huggingface.co/spaces/freddyaboulton/gradio_folium

You can see the source code for those components by clicking the "Files" icon and then clicking "src". The complete source code for the backend and frontend is visible.

If you'd like to put this together, we've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help.

[drigoni]

Hi,

I will try and get back to you.

Thanks.

[abidlabs]

Sounds good, I'll close this issue but we are happy to answer any questions you have as you build your custom component. Please feel free to ask in this thread.

[drigoni]

Hello,

I want to highlight that I have developed two custom components specifically designed to process RDKit objects as input. The first component generates a gallery illustrating 2D molecular structures, while the second one produces a gallery illustrating 3D molecular structures.

These components are accessible through the pip package manager, e.g., pip install gradio_molgallery2d Additional information can be found in the GitHub repository: https://github.com/drigoni/MolGallery Contributions from anyone interested are encouraged and welcomed.

[abidlabs]

Thanks @drigoni! Excited to try them out. Have you published the components by running gradio cc publish in the root folder for each component? If you do, they'll show up in the Custom Components Gallery here as well: https://www.gradio.app/custom-components/gallery

[drigoni]

@abidlabs: they are visible now. Thank you!

[abidlabs]

Amazing! This is going to be super handy for folks. By the way, if you update your version of gradio to 4.16 or higher, and then run gradio cc publish, you get a nicer published demo Space, which includes automatically-generated documentation for your custom components.