Switch to 3Dmol.js for interactive 3D orbital visualization

app.py

@@ -253,100 +253,44 @@ def smiles_to_molecular_orbitals(smiles_input: str, name_input: str) -> str:
                 if not Path(cube_file).exists():
                     continue
                 
-                # Parse cube file
-                x, y, z, values = parse_cube_file(cube_file)
+                # Read cube file content
+                cube_data = Path(cube_file).read_text()
                 
-                # Create matplotlib 3D visualization
-                fig = plt.figure(figsize=(12, 5))
+                # Get molecular structure
+                mol_block = Chem.MolToMolBlock(mol_3d)
                 
-                # Create two subplots side by side
-                ax1 = fig.add_subplot(121, projection='3d')
-                ax2 = fig.add_subplot(122, projection='3d')
+                # Create py3Dmol viewer
+                import py3Dmol
                 
-                # Get atom positions
-                atom_coords = []
-                atom_symbols = []
-                for atom in mol_3d.GetAtoms():
-                    pos = mol_3d.GetConformer().GetAtomPosition(atom.GetIdx())
-                    atom_coords.append([pos.x, pos.y, pos.z])
-                    atom_symbols.append(atom.GetSymbol())
-                atom_coords = np.array(atom_coords)
-                
-                # Plot atoms on both subplots
-                for ax, title in [(ax1, f'{label} - View 1'), (ax2, f'{label} - View 2')]:
-                    # Color atoms by element
-                    for i, (coord, symbol) in enumerate(zip(atom_coords, atom_symbols)):
-                        if symbol == 'C':
-                            color = 'gray'
-                            size = 100
-                        elif symbol == 'O':
-                            color = 'red'
-                            size = 120
-                        elif symbol == 'N':
-                            color = 'blue'
-                            size = 120
-                        elif symbol == 'H':
-                            color = 'lightgray'
-                            size = 60
-                        else:
-                            color = 'purple'
-                            size = 100
-                        ax.scatter(*coord, c=color, s=size, alpha=0.9, edgecolors='black', linewidth=0.5)
-                        ax.text(*coord, symbol, fontsize=8)
-                    
-                    # Sample the cube data for contour visualization
-                    iso_val = 0.02
-                    # Find where values exceed threshold
-                    pos_mask = values > iso_val
-                    neg_mask = values < -iso_val
-                    
-                    # Create 3D mesh grid
-                    X, Y, Z = np.meshgrid(x, y, z, indexing='ij')
-                    
-                    # Plot positive regions (blue)
-                    if np.any(pos_mask):
-                        pos_points = np.column_stack((X[pos_mask], Y[pos_mask], Z[pos_mask]))
-                        if len(pos_points) > 0:
-                            sample_idx = np.random.choice(len(pos_points), min(1000, len(pos_points)), replace=False)
-                            ax.scatter(pos_points[sample_idx, 0], 
-                                     pos_points[sample_idx, 1], 
-                                     pos_points[sample_idx, 2], 
-                                     c='blue', alpha=0.3, s=1, label='Positive lobe')
-                    
-                    # Plot negative regions (red)
-                    if np.any(neg_mask):
-                        neg_points = np.column_stack((X[neg_mask], Y[neg_mask], Z[neg_mask]))
-                        if len(neg_points) > 0:
-                            sample_idx = np.random.choice(len(neg_points), min(1000, len(neg_points)), replace=False)
-                            ax.scatter(neg_points[sample_idx, 0], 
-                                     neg_points[sample_idx, 1], 
-                                     neg_points[sample_idx, 2], 
-                                     c='red', alpha=0.3, s=1, label='Negative lobe')
-                    
-                    ax.set_xlabel('X (Å)')
-                    ax.set_ylabel('Y (Å)')
-                    ax.set_zlabel('Z (Å)')
-                    ax.set_title(title)
-                    ax.legend(fontsize=8)
-                    
-                # Set different viewing angles
-                ax1.view_init(elev=20, azim=45)
-                ax2.view_init(elev=20, azim=135)
-                
-                plt.tight_layout()
-                
-                # Convert to base64 image
-                buf = io.BytesIO()
-                plt.savefig(buf, format='png', dpi=100, bbox_inches='tight')
-                buf.seek(0)
-                img_base64 = base64.b64encode(buf.read()).decode('utf-8')
-                plt.close(fig)
+                # 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>
+                """
                 
                 html_sections.append(
-                    f"<div style='margin: 20px 0;'>"
-                    f"<h3>{label} Orbital</h3>"
-                    f"<img src='data:image/png;base64,{img_base64}' style='max-width: 100%; height: auto;'/>"
-                    f"<p><small>Blue = positive orbital lobe, Red = negative orbital lobe</small></p>"
+                    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>"
                 )
 

force_rebuild.txt

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