Spaces:
Sleeping
Sleeping
| INITIAL_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 ); | |
| viewer.addModel(`{molecule}`, "{fmt}") | |
| viewer.getModel().setStyle({{ stick: {{ colorscheme:"greenCarbon" }} }}) | |
| viewer.zoomTo(); | |
| 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> | |
| <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(); | |
| 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> | |
| """ | |
| 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> | |
| Please upload the file in one of the following formats: | |
| <ul> | |
| <li>.pdb</li> | |
| <li>.sdf</li> | |
| <li>.mol</li> | |
| <li>.mol2</li> | |
| </ul> | |
| </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>""" | |