Spaces:

GotThatData
/

BioPrime-Molecular-Docking

Running

App Files Files Community

GotThatData commited on 19 days ago

Commit

dd7ba5e

verified ·

1 Parent(s): 45aa1d5

Upload app.py with huggingface_hub

Browse files

Files changed (1) hide show

app.py +34 -27

app.py CHANGED Viewed

@@ -183,20 +183,18 @@ def fetch_pdb_structure(pdb_id: str) -> Optional[str]:
 def create_3d_viewer(pdb_content: str, binding_site: dict = None, style: str = "cartoon") -> str:
-    """Create 3D molecular viewer HTML with embedded 3Dmol.js library."""
     import html
-    # Escape PDB content for JavaScript
-    pdb_escaped = html.escape(pdb_content).replace('\n', '\\n').replace('\r', '').replace("'", "\\'")
     # Build style configuration
     if style == "cartoon":
         style_js = "viewer.setStyle({}, {cartoon: {color: 'spectrum'}});"
     elif style == "surface":
-        style_js = """
-            viewer.setStyle({}, {cartoon: {color: 'spectrum'}});
-            viewer.addSurface($3Dmol.SAS, {opacity: 0.7, color: 'white'});
-        """
     elif style == "stick":
         style_js = "viewer.setStyle({}, {stick: {colorscheme: 'Jmol'}});"
     elif style == "sphere":
@@ -207,28 +205,24 @@ def create_3d_viewer(pdb_content: str, binding_site: dict = None, style: str = "
     # Binding site sphere
     binding_site_js = ""
     if binding_site:
-        binding_site_js = f"""
-            viewer.addSphere({{
-                center: {{x: {binding_site['x']}, y: {binding_site['y']}, z: {binding_site['z']}}},
-                radius: 8,
-                color: 'red',
-                opacity: 0.3
-            }});
-        """
-    # Generate unique ID for the viewer
-    import random
-    viewer_id = f"viewer_{random.randint(100000, 999999)}"
-    html_content = f'''
-    <div style="width: 100%; display: flex; justify-content: center;">
-        <div id="{viewer_id}" style="width: 700px; height: 500px; position: relative; border-radius: 12px; overflow: hidden; background: #1a1a2e;"></div>
-    </div>
     <script src="https://3dmol.org/build/3Dmol-min.js"></script>
     <script>
-        (function() {{
-            var pdbData = '{pdb_escaped}';
-            var element = document.getElementById('{viewer_id}');
             var config = {{ backgroundColor: '0x1a1a2e' }};
             var viewer = $3Dmol.createViewer(element, config);
             viewer.addModel(pdbData, "pdb");
@@ -236,8 +230,21 @@ def create_3d_viewer(pdb_content: str, binding_site: dict = None, style: str = "
             {binding_site_js}
             viewer.zoomTo();
             viewer.render();
-        }})();
     </script>
     '''
     return html_content

 def create_3d_viewer(pdb_content: str, binding_site: dict = None, style: str = "cartoon") -> str:
+    """Create 3D molecular viewer HTML using iframe with srcdoc for JS execution."""
     import html
+    import base64
+    # Escape PDB content for JavaScript (double escape for iframe)
+    pdb_escaped = pdb_content.replace('\\', '\\\\').replace('\n', '\\n').replace('\r', '').replace("'", "\\'").replace('"', '\\"')
     # Build style configuration
     if style == "cartoon":
         style_js = "viewer.setStyle({}, {cartoon: {color: 'spectrum'}});"
     elif style == "surface":
+        style_js = "viewer.setStyle({}, {cartoon: {color: 'spectrum'}}); viewer.addSurface($3Dmol.SAS, {opacity: 0.7, color: 'white'});"
     elif style == "stick":
         style_js = "viewer.setStyle({}, {stick: {colorscheme: 'Jmol'}});"
     elif style == "sphere":
     # Binding site sphere
     binding_site_js = ""
     if binding_site:
+        binding_site_js = f"viewer.addSphere({{center: {{x: {binding_site['x']}, y: {binding_site['y']}, z: {binding_site['z']}}}, radius: 8, color: 'red', opacity: 0.3}});"
+    # Create complete HTML document for iframe
+    iframe_html = f'''<!DOCTYPE html>
+<html>
+<head>
     <script src="https://3dmol.org/build/3Dmol-min.js"></script>
+    <style>
+        body {{ margin: 0; padding: 0; overflow: hidden; background: #1a1a2e; }}
+        #viewer {{ width: 100%; height: 100%; }}
+    </style>
+</head>
+<body>
+    <div id="viewer"></div>
     <script>
+        document.addEventListener('DOMContentLoaded', function() {{
+            var pdbData = "{pdb_escaped}";
+            var element = document.getElementById('viewer');
             var config = {{ backgroundColor: '0x1a1a2e' }};
             var viewer = $3Dmol.createViewer(element, config);
             viewer.addModel(pdbData, "pdb");
             {binding_site_js}
             viewer.zoomTo();
             viewer.render();
+        }});
     </script>
+</body>
+</html>'''
+    # Escape for srcdoc attribute
+    iframe_srcdoc = html.escape(iframe_html)
+    html_content = f'''
+    <div style="width: 100%; display: flex; justify-content: center;">
+        <iframe srcdoc="{iframe_srcdoc}"
+                style="width: 700px; height: 500px; border: none; border-radius: 12px; background: #1a1a2e;"
+                sandbox="allow-scripts allow-same-origin">
+        </iframe>
+    </div>
     '''
     return html_content