Upload app.py with huggingface_hub

app.py

@@ -15,7 +15,6 @@ Website: https://bioprime.one
 """
 
 import gradio as gr
-import py3Dmol
 import requests
 import json
 import hashlib
@@ -184,33 +183,64 @@ 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."""
-    view = py3Dmol.view(width=700, height=500)
-    view.addModel(pdb_content, "pdb")
+    """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":
-        view.setStyle({'cartoon': {'color': 'spectrum'}})
+        style_js = "viewer.setStyle({}, {cartoon: {color: 'spectrum'}});"
     elif style == "surface":
-        view.setStyle({'cartoon': {'color': 'spectrum'}})
-        view.addSurface(py3Dmol.SAS, {'opacity': 0.7, 'color': 'white'})
+        style_js = """
+            viewer.setStyle({}, {cartoon: {color: 'spectrum'}});
+            viewer.addSurface($3Dmol.SAS, {opacity: 0.7, color: 'white'});
+        """
     elif style == "stick":
-        view.setStyle({'stick': {'colorscheme': 'Jmol'}})
+        style_js = "viewer.setStyle({}, {stick: {colorscheme: 'Jmol'}});"
     elif style == "sphere":
-        view.setStyle({'sphere': {'colorscheme': 'Jmol', 'scale': 0.3}})
+        style_js = "viewer.setStyle({}, {sphere: {colorscheme: 'Jmol', scale: 0.3}});"
+    else:
+        style_js = "viewer.setStyle({}, {cartoon: {color: 'spectrum'}});"
 
-    # Highlight binding site if provided
+    # Binding site sphere
+    binding_site_js = ""
     if binding_site:
-        view.addSphere({
-            'center': {'x': binding_site['x'], 'y': binding_site['y'], 'z': binding_site['z']},
-            'radius': 8,
-            'color': 'red',
-            'opacity': 0.3
-        })
-
-    view.zoomTo()
-    view.spin(False)
-
-    return view._make_html()
+        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");
+            {style_js}
+            {binding_site_js}
+            viewer.zoomTo();
+            viewer.render();
+        }})();
+    </script>
+    '''
+
+    return html_content
 
 
 def generate_docking_result(target_id: str, compound_ids: List[str]) -> Tuple[str, str, str]: