Spaces:

smitathkr1
/

rdkit_api

Runtime error

Vaishnav14220 commited on Nov 8, 2025

Commit

d157eb5

1 Parent(s): 129f2e9

Fix 3D molecule viewer HTML rendering for Gradio

Files changed (1) hide show

app.py CHANGED Viewed

@@ -74,28 +74,30 @@ def name_to_3d_molecule(name: str) -> str:
         # Optimize geometry
         AllChem.MMFFOptimizeMolecule(mol)
-        # Convert to SDF format (contains 3D coordinates)
-        sdf_string = Chem.SDWriter.GetText(mol)
         # Create HTML with embedded 3D viewer using 3Dmol.js
         html_content = f"""
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
-        </head>
-        <body>
-            <div id="container" style="width: 400px; height: 400px; position: relative;"></div>
-            <script>
-                let viewer = $3Dmol.createViewer($("#container"));
-                let sdf = `{sdf_string}`;
-                viewer.addModel(sdf, "sdf");
-                viewer.setStyle({{'stick': {{}}}});
                 viewer.zoomTo();
                 viewer.render();
-            </script>
-        </body>
-        </html>
         """
         return html_content

         # Optimize geometry
         AllChem.MMFFOptimizeMolecule(mol)
+        # Convert to MOL block format
+        mol_block = Chem.MolToMolBlock(mol)
+        # Escape the mol block for JavaScript
+        import json
+        mol_block_escaped = json.dumps(mol_block)
         # Create HTML with embedded 3D viewer using 3Dmol.js
         html_content = f"""
+        <div id="container-3dmol" style="width: 600px; height: 600px; position: relative; margin: auto;"></div>
+        <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>
+        <script>
+            $(document).ready(function() {{
+                let element = $('#container-3dmol');
+                let viewer = $3Dmol.createViewer(element, {{backgroundColor: 'white'}});
+                let molData = {mol_block_escaped};
+                viewer.addModel(molData, "mol");
+                viewer.setStyle({{}}, {{stick: {{colorscheme: 'Jmol'}}}});
+                viewer.addStyle({{}}, {{sphere: {{radius: 0.3, colorscheme: 'Jmol'}}}});
                 viewer.zoomTo();
                 viewer.render();
+            }});
+        </script>
         """
         return html_content