Molecular Structure Viewer

[whitead]

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

Is your feature request related to a problem? Please describe.
As graph learning is increased on huggingface, a major application area is in molecular structure generation and property prediction. I would like to see a molecular structure viewer as a possible gradio component. I'm happy to contribute to this.

Describe the solution you'd like
v1: Input is SMILES string, no output, component can be implemented with a standard SMILES drawer (e.g., https://github.com/reymond-group/smilesDrawer).

v2: Input is SMILES string with optional weight per atom to show interpretion or per-atom property prediction

Additional context

Happy to contribute to this issue. Here's an example of a molecular structure viewer

[duerrsimon]

Here is an example on how to do this with the HTML component.

https://huggingface.co/spaces/simonduerr/smilesdrawer

I agree a native component would be nice!

[zhaoqf123]

Here is an example on how to do this with the HTML component.

https://huggingface.co/spaces/simonduerr/smilesdrawer

I agree a native component would be nice!

@duerrsimon Hey, sorry to bother you. Could you please have a look at this issue?

I tried to visualize graphs in Gradio with the js-vis library, but it does not work. I tried embed the html in iframe following your solution here, but still not working ...

[abidlabs]

Hey! We've now 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
• A "Folium Map Viewer" component that allows you to use interactive maps

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. In particular, its very fast if you want to build off an existing component. We've put together a Guide: https://www.gradio.app/guides/five-minute-guide, and we're happy to help. Hopefully this will help address this issue.

[abidlabs]

Hi @whitead please take a look at this custom component created by @duerrsimon: https://huggingface.co/spaces/simonduerr/gradio_molecule3d

[duerrsimon]

@abidlabs 2D molecule depiction is a little bit different from 3D. While the 3D component can be used in many cases people would rather use a 2D library like SmilesDrawer. I haven't revisited the issue in some time but last time I tried I hit some roadblock because the library Andrew mentions which is the best for this kind of task actually is incompatible with the current build process of gradio. More details in this issue: #6087

Once this is fixed I have a draft component ready using SmilesDrawer for Output. For input there is also a 2D drawing functionality. Would love to get this into the hands of users soon :)

[abidlabs]

Ah okay got it, gentle ping @pngwn on the aforementioned issue. I'll leave this issue closed and that one open