Spaces:

smitathkr1
/

rdkit_api

Runtime error

App Files Files Community

Vaishnav14220 commited on Nov 8, 2025

Commit

31f1505

1 Parent(s): 1ee8400

Show 3D structure as 2D projection with atom indices instead of iframe

Browse files

Files changed (1) hide show

app.py +33 -50

app.py CHANGED Viewed

@@ -77,55 +77,34 @@ def name_to_3d_molecule(name: str) -> tuple:
         # Generate SDF content
         sdf_content = Chem.MolToMolBlock(mol)
         # Generate 2D image for preview
         mol_2d = Chem.MolFromSmiles(smiles)  # Get 2D version
-        img = Draw.MolToImage(mol_2d, size=(400, 400))
-        # Convert image to base64
-        import io
-        import base64
-        import json
-        buffered = io.BytesIO()
-        img.save(buffered, format="PNG")
-        img_str = base64.b64encode(buffered.getvalue()).decode()
         # Get SMILES string
         canonical_smiles = Chem.MolToSmiles(mol_2d)
-        # Prepare SDF content for JavaScript (escape backticks)
-        sdf_content_escaped = sdf_content.replace('`', '\\`')
-        # Create data URI for the 3D viewer HTML
-        viewer_html = f"""
-<!DOCTYPE html>
-<html>
-<head>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
-    <style>
-        body {{ margin: 0; padding: 0; background: white; }}
-        #viewer {{ width: 100%; height: 100vh; }}
-    </style>
-</head>
-<body>
-    <div id="viewer"></div>
-    <script>
-        $(function() {{
-            let viewer = $3Dmol.createViewer("viewer", {{backgroundColor: 'white'}});
-            let sdfData = `{sdf_content_escaped}`;
-            viewer.addModel(sdfData, "sdf");
-            viewer.setStyle({{}}, {{stick: {{radius: 0.15, colorscheme: 'Jmol'}}, sphere: {{radius: 0.4, colorscheme: 'Jmol'}}}});
-            viewer.addLabels({{elem: true}}, {{fontSize: 12, fontColor: 'black', backgroundColor: 'white', backgroundOpacity: 0.7}});
-            viewer.zoomTo();
-            viewer.render();
-        }});
-    </script>
-</body>
-</html>
-"""
-        viewer_data_uri = "data:text/html;base64," + base64.b64encode(viewer_html.encode()).decode()
-        # Create HTML with 2D and 3D viewers side by side
         html_content = f"""
         <div style="padding: 20px;">
             <h3 style="text-align: center;">{name}</h3>
@@ -134,15 +113,19 @@ def name_to_3d_molecule(name: str) -> tuple:
             <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px;">
                 <div style="text-align: center;">
                     <h4>2D Structure</h4>
-                    <img src="data:image/png;base64,{img_str}" style="max-width: 400px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white;">
                 </div>
                 <div style="text-align: center;">
-                    <h4>3D Interactive Model</h4>
-                    <iframe src="{viewer_data_uri}" style="width: 400px; height: 400px; border: 1px solid #ddd; border-radius: 8px;"></iframe>
-                    <p style="margin-top: 10px; font-size: 12px; color: #666;">Drag to rotate, scroll to zoom</p>
                 </div>
             </div>
         </div>
         """
@@ -197,11 +180,11 @@ molecule_3d_interface = gr.Interface(
     fn=name_to_3d_molecule,
     inputs=gr.Textbox(label="Chemical Name", placeholder="e.g., benzene, aspirin, caffeine, glucose"),
     outputs=[
-        gr.HTML(label="2D and 3D Molecular Viewer"),
-        gr.Textbox(label="3D SDF Content (optional - for external viewers)", lines=10, max_lines=20, visible=False)
     ],
     api_name="name_to_molecule",
-    description="View 2D structure and interactive 3D molecule. Drag to rotate the 3D model, scroll to zoom.",
     cache_examples=False,
 )

         # Generate SDF content
         sdf_content = Chem.MolToMolBlock(mol)
+        # Import needed modules
+        import io
+        import base64
+        from rdkit.Chem.Draw import rdMolDraw2D
         # Generate 2D image for preview
         mol_2d = Chem.MolFromSmiles(smiles)  # Get 2D version
+        # Create drawer for 2D structure
+        drawer = rdMolDraw2D.MolDraw2DCairo(600, 600)
+        drawer.DrawMolecule(mol_2d)
+        drawer.FinishDrawing()
+        img_2d_data = drawer.GetDrawingText()
+        img_2d_str = base64.b64encode(img_2d_data).decode()
+        # Create 3D structure image with atom indices
+        drawer_3d = rdMolDraw2D.MolDraw2DCairo(600, 600)
+        drawer_3d.drawOptions().addAtomIndices = True
+        AllChem.Compute2DCoords(mol)
+        drawer_3d.DrawMolecule(mol)
+        drawer_3d.FinishDrawing()
+        img_3d_data = drawer_3d.GetDrawingText()
+        img_3d_str = base64.b64encode(img_3d_data).decode()
         # Get SMILES string
         canonical_smiles = Chem.MolToSmiles(mol_2d)
+        # Create HTML with both views
         html_content = f"""
         <div style="padding: 20px;">
             <h3 style="text-align: center;">{name}</h3>
             <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px;">
                 <div style="text-align: center;">
                     <h4>2D Structure</h4>
+                    <img src="data:image/png;base64,{img_2d_str}" style="max-width: 600px; width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white;">
                 </div>
                 <div style="text-align: center;">
+                    <h4>3D Structure with Atom Labels</h4>
+                    <img src="data:image/png;base64,{img_3d_str}" style="max-width: 600px; width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white;">
+                    <p style="margin-top: 10px; font-size: 12px; color: #666;">3D optimized structure with atom indices</p>
                 </div>
             </div>
+            <div style="margin-top: 20px; padding: 15px; background-color: #e7f3ff; border: 2px solid #2196F3; border-radius: 8px; max-width: 800px; margin-left: auto; margin-right: auto;">
+                <p style="color: #0d47a1; margin: 0;"><strong>💡 Tip:</strong> The SDF content below contains full 3D coordinates. Copy and paste into molecular viewers like PyMOL, Avogadro, or ChimeraX for interactive 3D visualization.</p>
+            </div>
         </div>
         """
     fn=name_to_3d_molecule,
     inputs=gr.Textbox(label="Chemical Name", placeholder="e.g., benzene, aspirin, caffeine, glucose"),
     outputs=[
+        gr.HTML(label="2D and 3D Molecular Structures"),
+        gr.Textbox(label="3D SDF Content (for PyMOL, Avogadro, ChimeraX)", lines=10, max_lines=20, visible=True)
     ],
     api_name="name_to_molecule",
+    description="View 2D structure and 3D optimized structure with atom labels. Copy the SDF content to view in external molecular viewers.",
     cache_examples=False,
 )