Update app.py

app.py

@@ -5,14 +5,12 @@ import numpy as np
 import gradio as gr
 from ase.io import read
 from ase.io.trajectory import Trajectory
-
-# ----- Kill-switch para desactivar el visor si molesta (export VIS_DISABLED=1) -----
-VIS_DISABLED = os.environ.get("VIS_DISABLED", "0") == "1"
+import hashlib
 
 # ==== Intentar visor nativo como en UMA (opcional) ====
 try:
     from gradio_molecule3d import Molecule3D
-    HAVE_MOL3D = True and not VIS_DISABLED
+    HAVE_MOL3D = False  # Forzar HTML siempre
 except Exception:
     HAVE_MOL3D = False
 
@@ -21,6 +19,9 @@ def traj_to_html(traj_path, width=520, height=520, interval_ms=200):
     """
     Render de una trayectoria ASE (.traj) con 3Dmol.js (sin depender de Jupyter).
     """
+    # ID único basado en el path
+    viewer_id = f"viewer_{abs(hash(traj_path))}"
+    
     try:
         traj = Trajectory(traj_path)
     except Exception as e:
@@ -38,40 +39,56 @@ def traj_to_html(traj_path, width=520, height=520, interval_ms=200):
     if not xyz_frames:
         return "<div style='color:#555'>Empty trajectory</div>"
 
+    frames_json = str(xyz_frames).replace("'", '"')
+
     html = f"""
-<div id="viewer_md" style="width:{width}px; height:{height}px; position:relative;"></div>
-<script src="https://3dmol.org/build/3Dmol-min.js"></script>
+<div style="margin-bottom:10px;">
+    <strong>3D Molecular Viewer</strong> - {len(xyz_frames)} frames
+</div>
+<div id="{viewer_id}" style="width:{width}px; height:{height}px; position:relative; border:1px solid #ccc; background:white;"></div>
 <script>
-(function() {{
-  function ready(fn) {{
-    if (document.readyState !== 'loading') fn();
-    else document.addEventListener('DOMContentLoaded', fn);
-  }}
-  ready(function() {{
-    var el = document.getElementById("viewer_md");
-    if (!el || typeof $3Dmol === "undefined") {{
-      el.innerHTML = '<div style="padding:8px;color:#b00">3Dmol.js no cargó. Reintenta o habilita CORS.</div>';
-      return;
+// Load 3Dmol if not already loaded
+if (typeof window.$3Dmol === 'undefined') {{
+    var script = document.createElement('script');
+    script.src = 'https://3dmol.org/build/3Dmol-min.js';
+    script.onload = function() {{
+        setTimeout(function() {{ initViewer_{abs(hash(traj_path))}(); }}, 100);
+    }};
+    document.head.appendChild(script);
+}} else {{
+    initViewer_{abs(hash(traj_path))}();
+}}
+
+function initViewer_{abs(hash(traj_path))}() {{
+    var el = document.getElementById("{viewer_id}");
+    if (!el) return;
+    
+    if (typeof $3Dmol === "undefined") {{
+        el.innerHTML = '<div style="padding:20px;text-align:center;color:#666;">3Dmol.js no disponible</div>';
+        return;
     }}
+    
     var viewer = $3Dmol.createViewer(el, {{backgroundColor: 'white'}});
-    var frames = {xyz_frames!r};
-    var i = 0;
-    function show(k) {{
-      viewer.clear();
-      viewer.addModel(frames[k], "xyz");
-      viewer.setStyle({{}}, {{stick: {{}}}});
-      viewer.zoomTo();
-      viewer.render();
+    var frames = {frames_json};
+    var currentFrame = 0;
+    
+    function showFrame(frameIndex) {{
+        viewer.clear();
+        viewer.addModel(frames[frameIndex], "xyz");
+        viewer.setStyle({{}}, {{stick: {{radius: 0.1}}, sphere: {{radius: 0.3}}}});
+        viewer.zoomTo();
+        viewer.render();
     }}
-    show(0);
+    
+    showFrame(0);
+    
     if (frames.length > 1) {{
-      setInterval(function() {{
-        i = (i + 1) % frames.length;
-        show(i);
-      }}, {int(interval_ms)});
+        setInterval(function() {{
+            currentFrame = (currentFrame + 1) % frames.length;
+            showFrame(currentFrame);
+        }}, {interval_ms});
     }}
-  }});
-}})();
+}}
 </script>
 """
     return html
@@ -167,7 +184,8 @@ def md_wrapper(xyz_content, charge, spin, steps, tempK, timestep_fs, ensemble):
         )
         status = f"MD completed: {int(steps)} steps at {int(tempK)} K ({ensemble})"
 
-        html_value = traj_to_html(traj_path) if not HAVE_MOL3D else ""
+        # SIEMPRE generar HTML ya que HAVE_MOL3D = False
+        html_value = traj_to_html(traj_path)
         return (status, traj_path, log_text, script_text, explanation, html_value)
 
     except Exception as e:
@@ -193,7 +211,8 @@ def relax_wrapper(xyz_content, steps, fmax, charge, spin, relax_cell):
         )
         status = f"Relaxation finished (≤ {int(steps)} steps, fmax={float(fmax)} eV/Å)"
 
-        html_value = "" if (VIS_DISABLED or HAVE_MOL3D) else traj_to_html(traj_path)
+        # SIEMPRE generar HTML ya que HAVE_MOL3D = False
+        html_value = traj_to_html(traj_path)
         return (status, traj_path, log_text, script_text, explanation, html_value)
 
     except Exception as e:
@@ -262,28 +281,15 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="OrbMol Demo") as demo:
 
                 with gr.Column(variant="panel", min_width=520):
                     md_status = gr.Textbox(label="MD Status", interactive=False)
-
-                    # Archivo de trayectoria SIEMPRE (Molecule3D lo consume)
                     md_traj = gr.File(label="Trajectory (.traj)", interactive=False)
-
-                    # Visor nativo si está disponible
-                    if HAVE_MOL3D:
-                        md_viewer = Molecule3D(
-                            label="Trajectory Viewer",
-                            inputs=[md_traj],
-                            value=lambda x: x,
-                            interactive=False,
-                        )
-                        md_html = gr.HTML(visible=False)
-                    else:
-                        md_html = gr.HTML(label="Trajectory Viewer")
-                        md_viewer = gr.Textbox(visible=False)
-
+                    
+                    # Siempre usar HTML ya que HAVE_MOL3D = False
+                    md_html = gr.HTML(label="Trajectory Viewer")
+                    
                     md_log = gr.Textbox(label="Log", interactive=False, lines=15, max_lines=25)
                     md_script = gr.Code(label="Reproduction Script", language="python", interactive=False, lines=20, max_lines=30)
                     md_explain = gr.Markdown()
 
-            # NOTA: el visor Molecule3D se refresca cuando cambia md_traj (no hay que conectarlo)
             run_md_btn.click(
                 md_wrapper,
                 inputs=[xyz_md, charge_md, spin_md, steps_md, temp_md, timestep_md, ensemble_md],
@@ -305,20 +311,11 @@ with gr.Blocks(theme=gr.themes.Ocean(), title="OrbMol Demo") as demo:
 
                 with gr.Column(variant="panel", min_width=520):
                     rlx_status = gr.Textbox(label="Status", interactive=False)
-
                     rlx_traj = gr.File(label="Trajectory (.traj)", interactive=False)
-                    if HAVE_MOL3D:
-                        rlx_viewer = Molecule3D(
-                            label="Final Structure",
-                            inputs=[rlx_traj],
-                            value=lambda x: x,
-                            interactive=False,
-                        )
-                        rlx_html = gr.HTML(visible=False)
-                    else:
-                        rlx_html = gr.HTML(label="Final Structure")
-                        rlx_viewer = gr.Textbox(visible=False)
-
+                    
+                    # Siempre usar HTML ya que HAVE_MOL3D = False
+                    rlx_html = gr.HTML(label="Final Structure")
+                    
                     rlx_log = gr.Textbox(label="Log", interactive=False, lines=15, max_lines=25)
                     rlx_script = gr.Code(label="Reproduction Script", language="python", interactive=False, lines=20, max_lines=30)
                     rlx_explain = gr.Markdown()
@@ -333,4 +330,4 @@ print("Starting OrbMol model loading…")
 _ = _load_orbmol_calc()
 
 if __name__ == "__main__":
-    demo.launch(server_name="0.0.0.0", server_port=7860, show_error=True)
+    demo.launch(server_name="0.0.0.0", server_port=7860, show_error=True)