Replace Plotly with Matplotlib for reliable orbital visualization rendering

app.py

@@ -71,6 +71,13 @@ from urllib.error import HTTPError, URLError
 import os
 import tempfile
 from pathlib import Path
+import matplotlib
+matplotlib.use('Agg')  # Use non-interactive backend
+import matplotlib.pyplot as plt
+from mpl_toolkits.mplot3d import Axes3D
+from PIL import Image
+import io
+import base64
 
 
 # RDKit API with multiple endpoints
@@ -249,103 +256,99 @@ def smiles_to_molecular_orbitals(smiles_input: str, name_input: str) -> str:
                 # Parse cube file
                 x, y, z, values = parse_cube_file(cube_file)
                 
-                # Create 3D meshgrid
-                X, Y, Z = np.meshgrid(x, y, z, indexing='ij')
+                # Create matplotlib 3D visualization
+                fig = plt.figure(figsize=(12, 5))
                 
-                # Create plotly figure with isosurface
-                fig = go.Figure()
+                # Create two subplots side by side
+                ax1 = fig.add_subplot(121, projection='3d')
+                ax2 = fig.add_subplot(122, projection='3d')
                 
-                # Add positive isosurface (blue)
-                fig.add_trace(go.Isosurface(
-                    x=X.flatten(),
-                    y=Y.flatten(),
-                    z=Z.flatten(),
-                    value=values.flatten(),
-                    isomin=0.02,
-                    isomax=values.max(),
-                    surface_count=1,
-                    colorscale=[[0, 'blue'], [1, 'blue']],
-                    showscale=False,
-                    caps=dict(x_show=False, y_show=False, z_show=False),
-                    opacity=0.7,
-                    name='Positive'
-                ))
-                
-                # Add negative isosurface (red)
-                fig.add_trace(go.Isosurface(
-                    x=X.flatten(),
-                    y=Y.flatten(),
-                    z=Z.flatten(),
-                    value=values.flatten(),
-                    isomin=values.min(),
-                    isomax=-0.02,
-                    surface_count=1,
-                    colorscale=[[0, 'red'], [1, 'red']],
-                    showscale=False,
-                    caps=dict(x_show=False, y_show=False, z_show=False),
-                    opacity=0.7,
-                    name='Negative'
-                ))
-                
-                # Add molecular structure
-                atom_x, atom_y, atom_z = [], [], []
-                atom_colors = []
-                atom_text = []
+                # Get atom positions
+                atom_coords = []
+                atom_symbols = []
                 for atom in mol_3d.GetAtoms():
                     pos = mol_3d.GetConformer().GetAtomPosition(atom.GetIdx())
-                    atom_x.append(pos.x)
-                    atom_y.append(pos.y)
-                    atom_z.append(pos.z)
-                    atom_text.append(atom.GetSymbol())
-                    # Color by atom type
-                    if atom.GetSymbol() == 'C':
-                        atom_colors.append('gray')
-                    elif atom.GetSymbol() == 'N':
-                        atom_colors.append('darkblue')
-                    elif atom.GetSymbol() == 'O':
-                        atom_colors.append('darkred')
-                    elif atom.GetSymbol() == 'H':
-                        atom_colors.append('lightgray')
-                    else:
-                        atom_colors.append('purple')
+                    atom_coords.append([pos.x, pos.y, pos.z])
+                    atom_symbols.append(atom.GetSymbol())
+                atom_coords = np.array(atom_coords)
                 
-                fig.add_trace(go.Scatter3d(
-                    x=atom_x, y=atom_y, z=atom_z,
-                    mode='markers+text',
-                    marker=dict(size=10, color=atom_colors, line=dict(width=1, color='white')),
-                    text=atom_text,
-                    textposition='top center',
-                    textfont=dict(size=8),
-                    name='Atoms'
-                ))
+                # 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)
                 
-                fig.update_layout(
-                    title=dict(text=f'{label} Orbital', x=0.5, xanchor='center'),
-                    width=700,
-                    height=600,
-                    scene=dict(
-                        xaxis_title='X (Å)',
-                        yaxis_title='Y (Å)',
-                        zaxis_title='Z (Å)',
-                        aspectmode='data',
-                        camera=dict(
-                            eye=dict(x=1.5, y=1.5, z=1.5)
-                        )
-                    ),
-                    margin=dict(l=0, r=0, t=40, b=0),
-                    showlegend=True,
-                    legend=dict(x=0.02, y=0.98)
-                )
+                plt.tight_layout()
                 
-                # Generate HTML with config
-                import plotly.io as pio
-                config = {
-                    'displayModeBar': True,
-                    'displaylogo': False,
-                    'responsive': True
-                }
-                plot_html = pio.to_html(fig, full_html=False, include_plotlyjs='cdn', config=config)
-                html_sections.append(f"<div style='margin: 20px 0; padding: 10px; border: 1px solid #ddd; border-radius: 5px;'>{plot_html}</div>")
+                # 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)
+                
+                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>"
+                )
 
             if not html_sections:
                 return "<p>Could not prepare HOMO/LUMO visualizations.</p>"

force_rebuild.txt

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

requirements.txt

@@ -7,4 +7,6 @@ pubchempy
 psikit
 py3Dmol
 pyscf
-plotly
+plotly
+matplotlib
+pillow