Spaces:
Running
on
A10G
Running
on
A10G
| FRAGMENTS_RENDERING_TEMPLATE = """<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://3Dmol.org/build/3Dmol.js"></script> | |
| <style> | |
| .mol-container {{ | |
| width: 600px; | |
| height: 600px; | |
| position: relative; | |
| }} | |
| .mol-container select{{ | |
| background-image:None; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container" class="mol-container"></div> | |
| <script> | |
| $(document).ready(function() {{ | |
| let element = $("#container"); | |
| let config = {{ backgroundColor: "white" }}; | |
| let viewer = $3Dmol.createViewer(element, config); | |
| let defaultStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }}; | |
| viewer.addModel(`{molecule}`, "{fmt}"); | |
| viewer.getModel(0).setStyle(defaultStyle); | |
| viewer.getModel(0).setClickable( | |
| {{}}, | |
| true, | |
| function (_atom, _viewer, _event, _container) {{ | |
| if (!_atom.isClicked) {{ | |
| _atom.isClicked = true; | |
| _viewer.addStyle( | |
| {{"serial": _atom.serial, "model": 0}}, | |
| {{"sphere": {{"color": "magenta", "radius": 0.4}} }} | |
| ); | |
| window.parent.postMessage({{ | |
| name: "atom_selection", | |
| data: {{"atom": _atom.serial, "add": true}} | |
| }}, "*"); | |
| }} else {{ | |
| delete _atom.isClicked; | |
| _viewer.setStyle({{"serial": _atom.serial, "model": 0}}, defaultStyle); | |
| window.parent.postMessage({{ | |
| name: "atom_selection", | |
| data: {{"atom": _atom.serial, "add": false}} | |
| }}, "*"); | |
| }} | |
| _viewer.render(); | |
| }} | |
| ); | |
| viewer.zoomTo({{ "model": 0 }}); | |
| viewer.zoom(0.7); | |
| viewer.render(); | |
| }}); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| TARGET_RENDERING_TEMPLATE = """<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://3Dmol.org/build/3Dmol.js"></script> | |
| <style> | |
| .mol-container {{ | |
| width: 600px; | |
| height: 600px; | |
| position: relative; | |
| }} | |
| .mol-container select{{ | |
| background-image:None; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container" class="mol-container"></div> | |
| <script> | |
| $(document).ready(function() {{ | |
| let element = $("#container"); | |
| let config = {{ backgroundColor: "white" }}; | |
| let viewer = $3Dmol.createViewer(element, config); | |
| let proteinStyle = {{ cartoon: {{ colorscheme: "ssPyMOL" }} }}; | |
| viewer.addModel(`{molecule}`, "{fmt}"); | |
| viewer.getModel(0).setStyle(proteinStyle); | |
| viewer.zoomTo({{ "model": 0 }}); | |
| viewer.zoom(0.7); | |
| viewer.render(); | |
| }}); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| FRAGMENTS_AND_TARGET_RENDERING_TEMPLATE = """<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://3Dmol.org/build/3Dmol.js"></script> | |
| <style> | |
| .mol-container {{ | |
| width: 600px; | |
| height: 600px; | |
| position: relative; | |
| }} | |
| .mol-container select{{ | |
| background-image:None; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container" class="mol-container"></div> | |
| <script> | |
| $(document).ready(function() {{ | |
| let element = $("#container"); | |
| let config = {{ backgroundColor: "white" }}; | |
| let viewer = $3Dmol.createViewer(element, config); | |
| let defaultStyle = {{ stick: {{ colorscheme: "greenCarbon" }} }}; | |
| let proteinStyle = {{ cartoon: {{ colorscheme: "ssPyMOL" }} }}; | |
| viewer.addModel(`{molecule}`, "{fmt}"); | |
| viewer.getModel(0).setStyle(defaultStyle); | |
| viewer.getModel(0).setClickable( | |
| {{}}, | |
| true, | |
| function (_atom, _viewer, _event, _container) {{ | |
| if (!_atom.isClicked) {{ | |
| _atom.isClicked = true; | |
| _viewer.addStyle( | |
| {{"serial": _atom.serial, "model": 0}}, | |
| {{"sphere": {{"color": "magenta", "radius": 0.4}} }} | |
| ); | |
| window.parent.postMessage({{ | |
| name: "atom_selection", | |
| data: {{"atom": _atom.serial, "add": true}} | |
| }}, "*"); | |
| }} else {{ | |
| delete _atom.isClicked; | |
| _viewer.setStyle({{"serial": _atom.serial, "model": 0}}, defaultStyle); | |
| window.parent.postMessage({{ | |
| name: "atom_selection", | |
| data: {{"atom": _atom.serial, "add": false}} | |
| }}, "*"); | |
| }} | |
| _viewer.render(); | |
| }} | |
| ); | |
| viewer.addModel(`{target}`, "{target_fmt}"); | |
| viewer.getModel(1).setStyle(proteinStyle); | |
| viewer.zoomTo({{ "model": 0 }}); | |
| viewer.zoom(0.7); | |
| viewer.render(); | |
| }}); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| SAMPLES_RENDERING_TEMPLATE = """<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://3Dmol.org/build/3Dmol.js"></script> | |
| <style> | |
| .mol-container {{ | |
| width: 600px; | |
| height: 600px; | |
| position: relative; | |
| }} | |
| .mol-container select{{ | |
| background-image:None; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container" class="mol-container"></div> | |
| <br> | |
| <button id="fragments">Input Fragments</button> | |
| <button id="molecule">Output Molecule</button> | |
| <script> | |
| let element = $("#container"); | |
| let config = {{ backgroundColor: "white" }}; | |
| let viewer = $3Dmol.createViewer( element, config ); | |
| $(document).ready(function() {{ | |
| viewer.addModel(`{fragments}`, "{fragments_fmt}") | |
| viewer.getModel().setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }}) | |
| viewer.getModel().hide(); | |
| viewer.addModel(`{molecule}`, "{molecule_fmt}") | |
| viewer.getModel().setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }}) | |
| viewer.zoomTo({{ "model": 0 }}); | |
| viewer.zoom(0.7); | |
| viewer.render(); | |
| }}); | |
| $("#fragments").click(function() {{ | |
| viewer.getModel(0).show(); | |
| viewer.getModel(1).hide(); | |
| viewer.render(); | |
| }}); | |
| $("#molecule").click(function() {{ | |
| viewer.getModel(1).show(); | |
| viewer.getModel(0).hide(); | |
| viewer.render(); | |
| }}); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| SAMPLES_WITH_TARGET_RENDERING_TEMPLATE = """<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> | |
| <script src="https://3Dmol.org/build/3Dmol.js"></script> | |
| <style> | |
| .mol-container {{ | |
| width: 600px; | |
| height: 600px; | |
| position: relative; | |
| }} | |
| .mol-container select{{ | |
| background-image:None; | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <div id="container" class="mol-container"></div> | |
| <br> | |
| <button id="fragments">Input Fragments</button> | |
| <button id="molecule">Output Molecule</button> | |
| <button id="show-target">Show Target</button> | |
| <button id="hide-target">Hide Target</button> | |
| <script> | |
| let element = $("#container"); | |
| let config = {{ backgroundColor: "white" }}; | |
| let viewer = $3Dmol.createViewer( element, config ); | |
| $(document).ready(function() {{ | |
| viewer.addModel(`{fragments}`, "{fragments_fmt}") | |
| viewer.getModel(0).setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }}) | |
| viewer.getModel(0).hide(); | |
| viewer.addModel(`{molecule}`, "{molecule_fmt}") | |
| viewer.getModel(1).setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }}) | |
| viewer.addModel(`{target}`, "{target_fmt}") | |
| viewer.getModel(2).setStyle({{ cartoon: {{ colorscheme: "ssPyMOL" }} }}) | |
| viewer.zoomTo({{ "model": 0 }}); | |
| viewer.zoom(0.7); | |
| viewer.render(); | |
| }}); | |
| $("#fragments").click(function() {{ | |
| viewer.getModel(0).show(); | |
| viewer.getModel(1).hide(); | |
| viewer.render(); | |
| }}); | |
| $("#molecule").click(function() {{ | |
| viewer.getModel(1).show(); | |
| viewer.getModel(0).hide(); | |
| viewer.render(); | |
| }}); | |
| $("#show-target").click(function() {{ | |
| viewer.getModel(2).show(); | |
| viewer.render(); | |
| }}); | |
| $("#hide-target").click(function() {{ | |
| viewer.getModel(2).hide(); | |
| viewer.render(); | |
| }}); | |
| </script> | |
| </body> | |
| </html> | |
| """ | |
| INVALID_FORMAT_MSG = """ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <style> | |
| body{{ | |
| font-family:sans-serif | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <h3>Invalid file format: {extension}</h3> | |
| Allowed formats for the fragments file: | |
| <ul> | |
| <li>.pdb</li> | |
| <li>.sdf</li> | |
| <li>.mol</li> | |
| <li>.mol2</li> | |
| </ul> | |
| Allowed formats for the optional protein file: | |
| <ul> | |
| <li>.pdb</li> | |
| </ul> | |
| </body> | |
| </html> | |
| """ | |
| ERROR_FORMAT_MSG = """ | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> | |
| <style> | |
| body{{ | |
| font-family:sans-serif | |
| }} | |
| </style> | |
| </head> | |
| <body> | |
| <h3>Error:</h3> | |
| {message} | |
| </body> | |
| </html> | |
| """ | |
| IFRAME_TEMPLATE = """<iframe style="width: 100%; height: 700px" name="result" allow="midi; geolocation; microphone; camera; | |
| display-capture; encrypted-media;" sandbox="allow-modals allow-forms allow-scripts allow-same-origin allow-popups | |
| allow-top-navigation-by-user-activation allow-downloads" allowfullscreen="" | |
| allowpaymentrequest="" frameborder="0" srcdoc='{html}'></iframe>""" | |
| STARTUP_JS = """ | |
| () => { | |
| window.selected_elements = {} | |
| function handleMessage(event) { | |
| if (event.data.name == "atom_selection") { | |
| console.log("New message: ", event.data) | |
| let atom = event.data.data["atom"]; | |
| let add = event.data.data["add"]; | |
| console.log("add: ", add, " atom: ", atom); | |
| window.selected_elements[atom] = add; | |
| } | |
| } | |
| window.addEventListener("message", handleMessage); | |
| console.log("Listener Added"); | |
| console.log(window.selected_elements); | |
| } | |
| """ | |
| RETURN_SELECTION_JS = """ | |
| (input_file, input_protein_file, n_steps, n_atoms, n_samples, hidden) => { | |
| let selected = [] | |
| for (const [atom, add] of Object.entries(window.selected_elements)) { | |
| if (add) { | |
| console.log("Adding atom ", atom); | |
| selected.push(String(atom)); | |
| //window.parent.postMessage({ | |
| // name: "atom_selection", | |
| // data: {"atom": parseInt(atom), "add": false} | |
| //}, "*"); | |
| } | |
| } | |
| console.log("Finished parsing"); | |
| console.log(window.selected_elements); | |
| window.selected_elements = {} | |
| console.log(window.selected_elements); | |
| return [input_file, input_protein_file, n_steps, n_atoms, n_samples, selected.join(",")]; | |
| } | |
| """ |