Switch to 2D molecule viewer with base64 encoded PNG

app.py

@@ -74,30 +74,27 @@ def name_to_3d_molecule(name: str) -> str:
         # Optimize geometry
         AllChem.MMFFOptimizeMolecule(mol)
 
-        # Convert to MOL block format
-        mol_block = Chem.MolToMolBlock(mol)
+        # Generate 2D image as fallback and show SMILES
+        img = Draw.MolToImage(mol, size=(400, 400))
         
-        # Escape the mol block for JavaScript
-        import json
-        mol_block_escaped = json.dumps(mol_block)
+        # Convert image to base64
+        import io
+        import base64
+        buffered = io.BytesIO()
+        img.save(buffered, format="PNG")
+        img_str = base64.b64encode(buffered.getvalue()).decode()
+        
+        # Get SMILES string
+        canonical_smiles = Chem.MolToSmiles(mol)
 
-        # Create HTML with embedded 3D viewer using 3Dmol.js
+        # Create HTML with 2D image and molecule info
         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>
+        <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 Visualization</p>
+        </div>
         """
 
         return html_content
@@ -150,9 +147,9 @@ tpsa_interface = gr.Interface(
 molecule_3d_interface = gr.Interface(
     fn=name_to_3d_molecule,
     inputs=gr.Textbox(label="Chemical Name", placeholder="e.g., benzene, aspirin, caffeine"),
-    outputs=gr.HTML(label="3D Molecule Viewer"),
-    api_name="name_to_3d_molecule",
-    description="Convert a chemical name to an interactive 3D molecule visualization.",
+    outputs=gr.HTML(label="Molecule Viewer"),
+    api_name="name_to_molecule",
+    description="Convert a chemical name to a molecule visualization with SMILES.",
     cache_examples=False,
 )
 
@@ -161,7 +158,7 @@ demo = gr.TabbedInterface(
     [name_interface, molecule_3d_interface, smiles_interface, mw_interface, logp_interface, tpsa_interface],
     [
         "Name to SMILES",
-        "3D Molecule Viewer",
+        "Molecule Viewer",
         "SMILES to Canonical",
         "Molecular Weight",
         "LogP",