Spaces:
Runtime error
Runtime error
Vaishnav14220
commited on
Commit
·
a449f78
1
Parent(s):
31d1503
Use iframe with data URI for 3D viewer to avoid script blocking
Browse files
app.py
CHANGED
|
@@ -92,16 +92,42 @@ def name_to_3d_molecule(name: str) -> tuple:
|
|
| 92 |
# Get SMILES string
|
| 93 |
canonical_smiles = Chem.MolToSmiles(mol_2d)
|
| 94 |
|
| 95 |
-
#
|
| 96 |
-
|
| 97 |
-
|
| 98 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 99 |
html_content = f"""
|
| 100 |
<div style="padding: 20px;">
|
| 101 |
<h3 style="text-align: center;">{name}</h3>
|
| 102 |
<p style="text-align: center;"><strong>SMILES:</strong> {canonical_smiles}</p>
|
| 103 |
|
| 104 |
-
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
|
| 105 |
<div style="text-align: center;">
|
| 106 |
<h4>2D Structure</h4>
|
| 107 |
<img src="data:image/png;base64,{img_str}" style="max-width: 400px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white;">
|
|
@@ -109,28 +135,11 @@ def name_to_3d_molecule(name: str) -> tuple:
|
|
| 109 |
|
| 110 |
<div style="text-align: center;">
|
| 111 |
<h4>3D Interactive Model</h4>
|
| 112 |
-
<
|
| 113 |
<p style="margin-top: 10px; font-size: 12px; color: #666;">Drag to rotate, scroll to zoom</p>
|
| 114 |
</div>
|
| 115 |
</div>
|
| 116 |
</div>
|
| 117 |
-
|
| 118 |
-
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
| 119 |
-
<script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
|
| 120 |
-
<script>
|
| 121 |
-
$(document).ready(function() {{
|
| 122 |
-
let element = document.getElementById('viewer3d');
|
| 123 |
-
let config = {{ backgroundColor: 'white' }};
|
| 124 |
-
let viewer = $3Dmol.createViewer(element, config);
|
| 125 |
-
|
| 126 |
-
let sdfData = {sdf_escaped};
|
| 127 |
-
viewer.addModel(sdfData, "sdf");
|
| 128 |
-
viewer.setStyle({{}}, {{stick: {{radius: 0.15, colorscheme: 'Jmol'}}, sphere: {{radius: 0.4, colorscheme: 'Jmol'}}}});
|
| 129 |
-
viewer.zoomTo();
|
| 130 |
-
viewer.render();
|
| 131 |
-
viewer.zoom(1.2, 1000);
|
| 132 |
-
}});
|
| 133 |
-
</script>
|
| 134 |
"""
|
| 135 |
|
| 136 |
return html_content, sdf_content
|
|
|
|
| 92 |
# Get SMILES string
|
| 93 |
canonical_smiles = Chem.MolToSmiles(mol_2d)
|
| 94 |
|
| 95 |
+
# Create data URI for the 3D viewer HTML
|
| 96 |
+
viewer_html = f"""
|
| 97 |
+
<!DOCTYPE html>
|
| 98 |
+
<html>
|
| 99 |
+
<head>
|
| 100 |
+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
| 101 |
+
<script src="https://3dmol.csb.pitt.edu/build/3Dmol-min.js"></script>
|
| 102 |
+
<style>
|
| 103 |
+
body {{ margin: 0; padding: 0; background: white; }}
|
| 104 |
+
#viewer {{ width: 100%; height: 100vh; }}
|
| 105 |
+
</style>
|
| 106 |
+
</head>
|
| 107 |
+
<body>
|
| 108 |
+
<div id="viewer"></div>
|
| 109 |
+
<script>
|
| 110 |
+
$(function() {{
|
| 111 |
+
let viewer = $3Dmol.createViewer("viewer", {{backgroundColor: 'white'}});
|
| 112 |
+
let sdfData = `{sdf_content.replace('`', '\\`')}`;
|
| 113 |
+
viewer.addModel(sdfData, "sdf");
|
| 114 |
+
viewer.setStyle({{}}, {{stick: {{radius: 0.15, colorscheme: 'Jmol'}}, sphere: {{radius: 0.4, colorscheme: 'Jmol'}}}});
|
| 115 |
+
viewer.zoomTo();
|
| 116 |
+
viewer.render();
|
| 117 |
+
}});
|
| 118 |
+
</script>
|
| 119 |
+
</body>
|
| 120 |
+
</html>
|
| 121 |
+
"""
|
| 122 |
+
viewer_data_uri = "data:text/html;base64," + base64.b64encode(viewer_html.encode()).decode()
|
| 123 |
+
|
| 124 |
+
# Create HTML with 2D and 3D viewers side by side
|
| 125 |
html_content = f"""
|
| 126 |
<div style="padding: 20px;">
|
| 127 |
<h3 style="text-align: center;">{name}</h3>
|
| 128 |
<p style="text-align: center;"><strong>SMILES:</strong> {canonical_smiles}</p>
|
| 129 |
|
| 130 |
+
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; margin-top: 20px;">
|
| 131 |
<div style="text-align: center;">
|
| 132 |
<h4>2D Structure</h4>
|
| 133 |
<img src="data:image/png;base64,{img_str}" style="max-width: 400px; border: 1px solid #ddd; border-radius: 8px; padding: 10px; background: white;">
|
|
|
|
| 135 |
|
| 136 |
<div style="text-align: center;">
|
| 137 |
<h4>3D Interactive Model</h4>
|
| 138 |
+
<iframe src="{viewer_data_uri}" style="width: 400px; height: 400px; border: 1px solid #ddd; border-radius: 8px;"></iframe>
|
| 139 |
<p style="margin-top: 10px; font-size: 12px; color: #666;">Drag to rotate, scroll to zoom</p>
|
| 140 |
</div>
|
| 141 |
</div>
|
| 142 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 143 |
"""
|
| 144 |
|
| 145 |
return html_content, sdf_content
|