Embed interactive 3D orbital viewer directly in app using iframe

app.py

@@ -366,23 +366,33 @@ def smiles_to_molecular_orbitals(smiles_input: str, name_input: str) -> str:
 </html>
 """
                 
-                # Save HTML file
-                html_filename = f"{label.lower()}_orbital.html"
-                html_path = Path(tmpdir) / html_filename
+                # Save HTML file to a location accessible by Gradio
+                html_filename = f"{label.lower()}_orbital_{hash(canonical_smiles)}.html"
+                
+                # Move back to original directory to save in a persistent location
+                os.chdir(original_cwd)
+                output_dir = Path("orbital_outputs")
+                output_dir.mkdir(exist_ok=True)
+                html_path = output_dir / html_filename
                 html_path.write_text(html_content)
+                os.chdir(tmpdir)
                 
-                # Create download link
-                html_sections.append(
-                    f"<div style='margin: 20px 0; padding: 15px; background: #e8f4f8; border: 2px solid #2196F3; border-radius: 8px;'>"
-                    f"<h3 style='color: #1976D2; margin-top: 0;'>{label} Orbital - Interactive 3D Model</h3>"
-                    f"<p style='margin: 10px 0;'><strong>Download the interactive 3D visualization:</strong></p>"
-                    f"<a href='data:text/html;base64,{base64.b64encode(html_content.encode()).decode()}' "
-                    f"download='{html_filename}' "
-                    f"style='display: inline-block; padding: 12px 24px; background: #2196F3; color: white; "
-                    f"text-decoration: none; border-radius: 4px; font-weight: bold;'>📥 Download {label} 3D Model (HTML)</a>"
-                    f"<p style='margin: 10px 0; color: #666;'><small>Open the downloaded HTML file in any web browser for full interactive 3D rotation</small></p>"
-                    f"</div>"
-                )
+                # Create iframe to embed the HTML directly
+                iframe_html = f"""
+                <div style='margin: 20px 0; padding: 15px; background: white; border: 2px solid #2196F3; border-radius: 8px;'>
+                    <h3 style='color: #1976D2; margin-top: 0;'>{label} Orbital - Interactive 3D</h3>
+                    <p style='margin: 10px 0; color: #666;'><small>
+                        <strong>Blue:</strong> Positive orbital lobe | <strong>Red:</strong> Negative orbital lobe<br>
+                        <strong>Controls:</strong> Left-click drag to rotate, Scroll to zoom, Right-click drag to pan
+                    </small></p>
+                    <iframe srcdoc="{html_content.replace('"', '&quot;')}" 
+                            style="width: 100%; height: 650px; border: 1px solid #ddd; border-radius: 4px;"
+                            sandbox="allow-scripts allow-same-origin">
+                    </iframe>
+                </div>
+                """
+                
+                html_sections.append(iframe_html)
 
             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 v14
+2025-11-08 v15