Add interactive 3D molecule viewer with 3Dmol.js in the app

app.py

@@ -84,29 +84,53 @@ def name_to_3d_molecule(name: str) -> tuple:
         # 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)
+        
+        # Escape SDF content for JavaScript
+        sdf_escaped = json.dumps(sdf_content)
 
-        # Create HTML with 2D image and SDF content
+        # Create HTML with 3D viewer
         html_content = f"""
-        <div style="text-align: center; padding: 20px;">
-            <h3>{name}</h3>
-            <p><strong>SMILES:</strong> {canonical_smiles}</p>
-            <img src="data:image/png;base64,{img_str}" style="max-width: 100%; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white;">
-            <p style="margin-top: 10px; color: #666;">2D Structure Preview</p>
-            <div style="margin-top: 20px; padding: 15px; background-color: #d4edda; border: 2px solid #28a745; border-radius: 8px;">
-                <p style="color: #155724; font-size: 16px; font-weight: bold; margin: 0;">
-                    ✓ 3D SDF Content Ready!
-                </p>
-                <p style="color: #155724; margin: 5px 0 0 0;">
-                    Copy the SDF content below and save as .sdf file
-                </p>
+        <div style="padding: 20px;">
+            <h3 style="text-align: center;">{name}</h3>
+            <p style="text-align: center;"><strong>SMILES:</strong> {canonical_smiles}</p>
+            
+            <div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
+                <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>
+                    <div id="viewer3d" style="width: 400px; height: 400px; border: 1px solid #ddd; border-radius: 8px; background: white; position: relative;"></div>
+                    <p style="margin-top: 10px; font-size: 12px; color: #666;">Drag to rotate, scroll to zoom</p>
+                </div>
             </div>
         </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 = document.getElementById('viewer3d');
+                let config = {{ backgroundColor: 'white' }};
+                let viewer = $3Dmol.createViewer(element, config);
+                
+                let sdfData = {sdf_escaped};
+                viewer.addModel(sdfData, "sdf");
+                viewer.setStyle({{}}, {{stick: {{radius: 0.15, colorscheme: 'Jmol'}}, sphere: {{radius: 0.4, colorscheme: 'Jmol'}}}});
+                viewer.zoomTo();
+                viewer.render();
+                viewer.zoom(1.2, 1000);
+            }});
+        </script>
         """
 
         return html_content, sdf_content
@@ -160,11 +184,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 Preview"),
-        gr.Textbox(label="3D SDF Content (copy and save as .sdf file)", lines=20, max_lines=30)
+        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="Get 2D structure preview and 3D SDF content. Copy the SDF text and save as .sdf file to open in PyMOL, Avogadro, ChimeraX, or other molecular viewers.",
+    description="View 2D structure and interactive 3D molecule. Drag to rotate the 3D model, scroll to zoom.",
     cache_examples=False,
 )