Use py3Dmol's built-in HTML generation for orbital visualization

app.py

@@ -259,38 +259,29 @@ def smiles_to_molecular_orbitals(smiles_input: str, name_input: str) -> str:
                 # Get molecular structure
                 mol_block = Chem.MolToMolBlock(mol_3d)
                 
-                # Create py3Dmol viewer
+                # Create py3Dmol viewer using the Python library
                 import py3Dmol
                 
-                # Create the viewer with explicit size
-                viewer_html = f"""
-                <div style="height: 600px; width: 100%; position: relative; margin: 20px 0;">
-                    <div id="viewer_{label}" style="height: 100%; width: 100%;"></div>
-                    <script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
-                    <script>
-                        var viewer_{label} = $3Dmol.createViewer("viewer_{label}", {{backgroundColor: 'white'}});
-                        
-                        // Add molecular structure
-                        viewer_{label}.addModel(`{mol_block}`, "mol");
-                        viewer_{label}.setStyle({{}}, {{stick: {{radius: 0.15}}, sphere: {{scale: 0.3}}}});
-                        
-                        // Add cube data for orbital
-                        var cubeData = `{cube_data}`;
-                        viewer_{label}.addVolumetricData(cubeData, "cube", {{isoval: 0.02, color: "blue", alpha: 0.7}});
-                        viewer_{label}.addVolumetricData(cubeData, "cube", {{isoval: -0.02, color: "red", alpha: 0.7}});
-                        
-                        viewer_{label}.zoomTo();
-                        viewer_{label}.render();
-                        viewer_{label}.zoom(1.2);
-                    </script>
-                </div>
-                """
+                view = py3Dmol.view(width=800, height=600)
+                
+                # Add molecular structure
+                view.addModel(mol_block, "sdf")
+                view.setStyle({'stick': {'radius': 0.15}, 'sphere': {'scale': 0.3}})
+                
+                # Add orbital isosurfaces from cube data
+                view.addVolumetricData(cube_data, "cube", {'isoval': 0.02, 'color': "blue", 'alpha': 0.75})
+                view.addVolumetricData(cube_data, "cube", {'isoval': -0.02, 'color': "red", 'alpha': 0.75})
+                
+                view.zoomTo()
+                
+                # Generate standalone HTML
+                viewer_html = view._make_html()
                 
                 html_sections.append(
                     f"<div style='margin: 20px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px;'>"
                     f"<h3>{label} Orbital (Interactive 3D)</h3>"
                     f"<p><small>Blue = positive orbital lobe, Red = negative orbital lobe. Use mouse to rotate, scroll to zoom.</small></p>"
-                    f"{viewer_html}"
+                    f"<div style='width: 100%; height: 600px;'>{viewer_html}</div>"
                     f"</div>"
                 )
 

force_rebuild.txt

@@ -1,2 +1,2 @@
 # Force rebuild
-2025-11-08 v11
+2025-11-08 v12