diff options
Diffstat (limited to 'app/templates')
| -rw-r--r-- | app/templates/about.html | 27 | ||||
| -rw-r--r-- | app/templates/base.html | 174 | ||||
| -rw-r--r-- | app/templates/display_photo.html | 7 | ||||
| -rw-r--r-- | app/templates/display_result.html | 8 | ||||
| -rw-r--r-- | app/templates/dock_automatic.html (renamed from app/templates/dock_upload_single.html) | 4 | ||||
| -rw-r--r-- | app/templates/dock_manual.html (renamed from app/templates/dock_upload.html) | 4 | ||||
| -rw-r--r-- | app/templates/error.html | 2 | ||||
| -rw-r--r-- | app/templates/generate.html | 2 | ||||
| -rw-r--r-- | app/templates/home.html | 35 | ||||
| -rw-r--r-- | app/templates/job_status.html | 2 | ||||
| -rw-r--r-- | app/templates/molecule_editor.html | 2 | ||||
| -rw-r--r-- | app/templates/pdbqt_form.html | 2 | ||||
| -rw-r--r-- | app/templates/search-pubchem.html | 48 | ||||
| -rw-r--r-- | app/templates/search.html | 2 | ||||
| -rw-r--r-- | app/templates/visualise.html | 2 | ||||
| -rw-r--r-- | app/templates/wtform.html | 20 |
16 files changed, 262 insertions, 79 deletions
diff --git a/app/templates/about.html b/app/templates/about.html index b61bfed..7c7a805 100644 --- a/app/templates/about.html +++ b/app/templates/about.html @@ -1,13 +1,28 @@ {% extends 'base.html' %} - +{% set active_page = "about" %} {% block main %} <h1>About Curie Web</h1> <p>Curie Web is a web interface for my private Python Library called "Curie", with some aditional superpowers.</p> - <h4>Dock and Report</h4> - <p>This module uses AutoDock Vina to perform molecular docking on the specified molecular docking. It then uses PyMOL - to create high quality ray-traced visualisations. After finding and tabulating protein ligand interactions using PLIP, - it creates a PDF and emails you the report ( Along with supporting files )</p> - + <h4>Docking</h4> + <p>This section deals with Molecular Docking and protein-ligand interactions. It uses AutoDock Vina<sup>[1]</sup> for docking, PyMOL<sup>[2]</sup> for visualisations, and PLIP<sup>[3]</sup> for interactions and binding site detection.</p> + <h4>Drug Designing</h4> + <p>LSTM based on GitHub Code <sup>[4]</sup> which is based on the paper <sup>[5]</sup></p> + <h4>Research</h4> + <p>Quick Searches for PubMed and PubChem are powered by their respective APIs. Qrious app is written in SwiftUI and uses the FigShare API along with a pre-trained BERT<sup>[6]</sup> model.</p> + <section> + <h2>References</h4> + [1] O. Trott, A. J. Olson<cite>AutoDock Vina: improving the speed and accuracy of docking with a new scoring function, efficient optimization and multithreading, Journal of Computational Chemistry 31 (2010) 455-461</cite> + <br> + [2] Schrödinger, LLC <cite>The PyMOL Molecular Graphics System, Version 2.0</cite> + <br> + [3] Salentin et al. (2015) <cite>PLIP: fully automated protein-ligand interaction profiler. Nucl. Acids Res. (1 July 2015) 43 (W1): W443-W447</cite> + <br> + [4] + <br> + [5] + <br> + [6] T. Wolf et al. <cite>HuggingFace's Transformers: State-of-the-art Natural Language Processing</cite> + </section> <section> <style> #astronaut{ diff --git a/app/templates/base.html b/app/templates/base.html index dcae79c..d86facc 100644 --- a/app/templates/base.html +++ b/app/templates/base.html @@ -3,16 +3,17 @@ <head> <meta charset="UTF-8"> <title>Curie Web</title> - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/solar/bootstrap.min.css"> - <link rel="stylesheet" href= href="{{ url_for('static', filename='css/solar.css') }}"> - <link rel="stylesheet" href="{{ url_for('static', filename='css/styles.css') }}"> + <!--<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/solar/bootstrap.min.css">--> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> + <link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='favicons/apple-touch-icon.png') }}"> <link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='favicons/favicon-32x32.png') }}"> <link rel="icon" type="image/png" sizes="16x16" href="{{ url_for('static', filename='favicons/favicon-16x16.png') }}"> <link rel="manifest" href="{{ url_for('static', filename='favicons/site.webmanifest') }}"> + <meta name="Description" content="Curie Web Server, helps speeding up Computer Aided Drug Discovery."> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="google-site-verification" content="qID3RHYrVE0TepLZny0JaOuh-gjiQN4afHe_sdYwjGM" /> - <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.1/lottie.min.js"></script> + <script async src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.1/lottie.min.js"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> @@ -22,35 +23,52 @@ </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> - <li class="nav-item active"> + <li class="{{ 'nav-item active' if active_page == 'home' else 'nav-item' }}"> <a class="nav-link" href="{{ url_for('home') }}">Home <span class="sr-only">(current)</span></a> </li> - <li class="nav-item"> + <li class="{{ 'nav-item active' if active_page == 'about' else 'nav-item' }}"> <a class="nav-link" href="{{ url_for('about') }}">About</a> </li> - <!-- - <li class="nav-item"> - <a class="nav-link" href="{{ url_for('basic_form') }}">Basic Form</a> + <li class="{{ 'nav-item dropdown active' if active_page == 'dock' else 'nav-item dropdown' }}"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Dock and Report + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdown"> + <a class="dropdown-item" href="{{ url_for('dock_manual') }}">Automatic</a> + <a class="dropdown-item" href="{{ url_for('dock_automatic') }}">Manual</a> + </div> </li> - <li class="nav-item"> - <a class="nav-link" href="{{ url_for('wtform') }}">WTForms</a> - </li> --> - <li class="nav-item"> - <a class="nav-link" href="{{ url_for('dock_upload') }}">Dock and Report</a> - </li> - <li class="nav-item"> + <li class="{{ 'nav-item active' if active_page == 'generate' else 'nav-item' }}"> <a class="nav-link" href="{{ url_for('generate') }}">Generate</a> </li> - <li class="nav-item"> - <a class="nav-link" href="{{ url_for('status') }}">Job Status</a> + <li class="{{ 'nav-item dropdown active' if active_page == 'search' else 'nav-item dropdown' }}"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Research + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdown"> + <a class="dropdown-item" href="{{url_for('pubmed')}}">PubMed</a> + <a class="dropdown-item" href="{{url_for('pubchem')}}">PubChem</a> + <div class="dropdown-divider"></div> + <a class="dropdown-item disabled" href="#">Qrious</a> + </div> + </li> + <li class="{{ 'nav-item dropdown active' if active_page == 'tool' else 'nav-item dropdown' }}"> + <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Other Tools + </a> + <div class="dropdown-menu" aria-labelledby="navbarDropdown"> + <a class="dropdown-item" href="{{url_for('generate_pdbqts')}}">Generate PDBQTs</a> + <a class="dropdown-item" href="{{url_for('editor')}}">Molecule Editor</a> + <a class="dropdown-item" href="{{url_for('visualise')}}">Molecule Visualiser</a> + </div> </li> - <li class="nav-item"> - <a class="nav-link" href="{{url_for('pubmed')}}">Search</a> + <li class="{{ 'nav-item active' if active_page == 'job_status' else 'nav-item' }}"> + <a class="nav-link" href="{{ url_for('status') }}">Job Status</a> </li> </ul> </div> </nav> - <header class="jumbotron jumbotron-fluid" style="background: url({{ url_for('static',filename='bg_blur.jpg')}}) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;"> + <header class="jumbotron jumbotron-fluid" style="background: url({{ url_for('static',filename='bg_blur.jpg')}}) no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;" alt="An image of a protein having PDB ID:6LU7 "> <div class="container"> <h1 style="color: white;">Curie Web</h1> </div> @@ -68,8 +86,8 @@ <div class="col-sm-6 col-md-3 item"> <h3>Features</h3> <ul> - <li><a href="{{ url_for('dock_upload') }}">Dock and Report (Manual)</a></li> - <li><a href="{{ url_for('dock_upload_single') }}">Dock and Report (Automatic)</a></li> + <li><a href="{{ url_for('dock_manual') }}">Dock (Manual)</a></li> + <li><a href="{{ url_for('dock_automatic') }}">Dock (Automatic)</a></li> <li><a href="{{ url_for('pubmed') }}">PubMed Search</a></li> </ul> </div> @@ -85,10 +103,116 @@ <p>The Curie Project aims to make the process of CADD from ideation to in-silico testing as easy as possible.</p> </div> </div> - <p class="copyright">Copyright © 2020</p> </div> </footer> - </div> + </div> + + + <style> + :root { + +} + +html { + position: relative; + min-height: 100%; +} + + +.footer-dark { + padding: 50px 0; + color: #f0f9ff; + background-color: #282d32; +} + +.footer-dark h3 { + margin-top: 0; + margin-bottom: 12px; + font-weight: bold; + font-size: 16px; +} + +.footer-dark ul { + padding: 0; + list-style: none; + line-height: 1.6; + font-size: 14px; + margin-top: 0; +} + +.footer-dark ul a { + color: inherit; + text-decoration: none; + opacity: 0.6; +} + +.footer-dark ul li { + margin-top: 10px; +} + +.footer-dark ul a:hover { + opacity: 0.8; +} + +@media (max-width:767px) { + .footer-dark .item:not(.social) { + text-align: center; + padding-bottom: 20px; + } +} + +.footer-dark .item.text { + margin-bottom: 36px; +} + +@media (max-width:767px) { + .footer-dark .item.text { + margin-bottom: 0; + } +} + +.footer-dark .item.text p { + opacity: 0.6; + margin-bottom: 0; +} + +.footer-dark .item.social { + text-align: center; +} + +@media (max-width:991px) { + .footer-dark .item.social { + text-align: center; + margin-top: 20px; + } +} + +.footer-dark .item.social > a { + font-size: 20px; + width: 36px; + height: 36px; + line-height: 36px; + display: inline-block; + text-align: center; + border-radius: 50%; + box-shadow: 0 0 0 1px rgba(255,255,255,0.4); + margin: 0 8px; + color: #fff; + opacity: 0.75; +} + +.footer-dark .item.social > a:hover { + opacity: 0.9; +} + +.footer-dark .copyright { + text-align: center; + padding-top: 24px; + opacity: 0.3; + font-size: 13px; + margin-bottom: 0; +} + </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script> <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>--> diff --git a/app/templates/display_photo.html b/app/templates/display_photo.html deleted file mode 100644 index 413e2e1..0000000 --- a/app/templates/display_photo.html +++ /dev/null @@ -1,7 +0,0 @@ -{% extends 'base.html' %} - -{% block main %} - <h2>Description: {{ description }}</h2> - <p>Succesfuly Submitted</p> - <!-- <img src="{{ url_for('static', filename="uploads/" + filename) }}" /> --> -{% endblock %}
\ No newline at end of file diff --git a/app/templates/display_result.html b/app/templates/display_result.html deleted file mode 100644 index 0174637..0000000 --- a/app/templates/display_result.html +++ /dev/null @@ -1,8 +0,0 @@ -{% extends 'base.html' %} - -{% block main %} - <h2>Job ID: {{ job }}</h2> - <p>Succesfuly Submitted</p> - <b>Description: </b>{{description}} - <!-- <img src="{{ url_for('static', filename="uploads/" + filename) }}" /> --> -{% endblock %}
\ No newline at end of file diff --git a/app/templates/dock_upload_single.html b/app/templates/dock_automatic.html index 882675c..382948f 100644 --- a/app/templates/dock_upload_single.html +++ b/app/templates/dock_automatic.html @@ -1,8 +1,8 @@ {% extends 'base.html' %} - +{% set active_page = "dock" %} {% block main %} <h2>Enter Your Configuration</h2> - <form action="{{ url_for('dock_upload_single') }}" method="post" enctype="multipart/form-data"> + <form action="{{ url_for('dock_automatic') }}" method="post" enctype="multipart/form-data"> {% include 'flash_messages.html' %} {{ form.csrf_token }} <div class="form-group"> diff --git a/app/templates/dock_upload.html b/app/templates/dock_manual.html index 26f1e99..b549628 100644 --- a/app/templates/dock_upload.html +++ b/app/templates/dock_manual.html @@ -1,8 +1,8 @@ {% extends 'base.html' %} - +{% set active_page = "dock" %} {% block main %} <h2>Enter Your Configuration</h2> - <form action="{{ url_for('dock_upload') }}" method="post" enctype="multipart/form-data"> + <form action="{{ url_for('dock_manual') }}" method="post" enctype="multipart/form-data"> {% include 'flash_messages.html' %} {{ form.csrf_token }} <div class="form-group"> diff --git a/app/templates/error.html b/app/templates/error.html index b605430..54656ba 100644 --- a/app/templates/error.html +++ b/app/templates/error.html @@ -3,7 +3,7 @@ {% block main %} <h2>Oh Snap! An error occured</h2> - <p>Error Code: {{code}}</p> + <div class="alert alert-warning" role="alert">Error Code: {{code}}</div> <p>Error Description: {{description}}</p> <!--<section> <style> diff --git a/app/templates/generate.html b/app/templates/generate.html index 629a2a3..7e6808d 100644 --- a/app/templates/generate.html +++ b/app/templates/generate.html @@ -1,5 +1,5 @@ {% extends 'base.html' %} - +{% set active_page = "generate" %} {% block main %} <h1>Curie Generate</h1> <p>The model {{expName}} has been trained for {{epochs}} epochs using the {{optimizer}} optimization algorithm. Option for finetuning coming soon.</p> diff --git a/app/templates/home.html b/app/templates/home.html index 2e9b7c0..f8e08da 100644 --- a/app/templates/home.html +++ b/app/templates/home.html @@ -1,4 +1,5 @@ {% extends 'base.html' %} +{% set active_page = "home" %} {% block main %} <h2>Curie Web Demo</h2> @@ -6,8 +7,8 @@ <p>The following are the currently active modules</p> <h3>Docking</h3> <ul> - <li><a href="{{ url_for('dock_upload') }}">Dock and Report (Manual)</a> - You can enter your AutoDock Vina configuration, upload the PDBQT files and it will perform the molecular docking and generate a PDF with proper visualisations and protein-interaction profillings (Using PLIP) </li> - <li><a href="{{ url_for('dock_upload_single') }}">Dock and Report (Automatic)</a> - You just enter in the PDB Code, target compound's SMILES structure and name, it will automatically find a binding location and then perform docking and report generation</li> + <li><a href="{{ url_for('dock_manual') }}">Dock and Report (Manual)</a> - You can enter your AutoDock Vina configuration, upload the PDBQT files and it will perform the molecular docking and generate a PDF with proper visualisations and protein-interaction profillings (Using PLIP) </li> + <li><a href="{{ url_for('dock_automatic') }}">Dock and Report (Automatic)</a> - You just enter in the PDB Code, target compound's SMILES structure and name, it will automatically find a binding location and then perform docking and report generation</li> </ul> <h3>Drug Designing</h3> @@ -18,6 +19,7 @@ <h3>Researching</h3> <ul> <li><a href="{{ url_for('pubmed') }}">PubMed Search</a> - Handy PubMed search with direct download links</li> + <li><a href="{{url_for('pubchem')}}">PubChem Search</a> - Get Compound SMILES</li> <li>Qrious App - You can enter a question for a set of papers (e.g. ChemRxiv preprints) and it uses AI to answer it for each individual paper based on their abstract</li> </ul> @@ -29,5 +31,32 @@ <li><a href="{{ url_for('status')}}">Job Status</a> - Check the job status </li> <li><a href="{{ url_for('visualise')}}">Visualise</a> - Molecular Viewer </li> </ul> - <img src="{{url_for('static',filename='assets/workingInALaboratory.svg')}}" /> + <section> + <h2>Credits</h2> + <blockquote class="blockquote"> + <q class="mb-0">If I have seen further it is by standing on the shoulders of Giants.</q> + <footer class="blockquote-footer">Sir Isaac Newton in <cite title="Source Title"> Letter from Sir Isaac Newton to Robert Hooke</cite></footer> + </blockquote> + This project would not have been possible without the following: + <br><br> + <h2><img src="{{url_for('static',filename='assets/pliplogo.svg')}}" alt="Logo of PLIP" width=100vw /> PLIP</h2> + + <ul> + <li>PLIP is used for binding site analysis, interaction detection and visualisations.</li> + <li>PLIP is powered by <a href="https://www.pharm.ai">PharmAI.</a></li> + </ul> + + <h2>AutoDock Vina</h2> + <ul> + <li>AutoDock Vina is an open-source program for doing molecular docking. It was designed and implemented by Dr. Oleg Trott in the Molecular Graphics Lab at The Scripps Research Institute.</li> + </ul> + + <h2>PyMOL</h2> + <ul> + <li>PyMOL is used for generating visualisations of protein-ligand complexes</li> + <li>PyMOL is a user-sponsored molecular visualization system on an open-source foundation, maintained and distributed by <a href="https://www.schrodinger.com">Schrödinger.</a></li> + </ul> + + </section> + <img src="{{url_for('static',filename='assets/workingInALaboratory.svg')}}" alt="Scientist working in a laboratory" /> {% endblock %}
\ No newline at end of file diff --git a/app/templates/job_status.html b/app/templates/job_status.html index 97ce9b3..446d46a 100644 --- a/app/templates/job_status.html +++ b/app/templates/job_status.html @@ -1,5 +1,7 @@ {% extends 'base.html' %} +{% set active_page = "job_status" %} + {% block main %} <h2>Job ID: {{ ID }}</h2> <b>Submitted On: </b>{{subDate}}<br> diff --git a/app/templates/molecule_editor.html b/app/templates/molecule_editor.html index 22d8481..2a8eab3 100644 --- a/app/templates/molecule_editor.html +++ b/app/templates/molecule_editor.html @@ -1,5 +1,5 @@ {% extends 'base.html' %} - +{% set active_page = "tool" %} {% block main %} <h2>Molecule Editor</h2> diff --git a/app/templates/pdbqt_form.html b/app/templates/pdbqt_form.html index 09cd1b0..af1bb37 100644 --- a/app/templates/pdbqt_form.html +++ b/app/templates/pdbqt_form.html @@ -1,6 +1,6 @@ {% extends 'base.html' %} - +{% set active_page = "tool" %} {% block main %} <h2>Generate PDBQTs</h2> diff --git a/app/templates/search-pubchem.html b/app/templates/search-pubchem.html new file mode 100644 index 0000000..d9f0c2b --- /dev/null +++ b/app/templates/search-pubchem.html @@ -0,0 +1,48 @@ +{% extends 'base.html' %} +{% set active_page = "search" %} +{% block main %} + <h1>SMILES Search</h1> + <p>Get Compound SMILES through PubChem.</p> + <form action="{{ url_for('pubchem') }}" method="post" enctype="multipart/form-data"> + {% include 'flash_messages.html' %} + {{ form.csrf_token }} + <div class="form-row"> + {{ form.query.label }} + {{ form.query(class="form-control")}} + </div> + <!--<div class="form-row"> + {\{ form.modelSelection.label }} + {\{ form.modelSelection(class="form-control")}} + </div>--> + <br> + <div class="form-row"> + <button type="submit" class="btn btn-primary">Search</button> + </div> + </form> + + {% if result %} + <h3>Search Results</h3> + {% for x in range(result|length) %} + <!--<i>{\{result}}</i>--> + <!--<p>{{result[x]}}</p>--> + <div class="card mb-3"> + <div class="row no-gutters"> + <div class="col-md-4 text-white bg-dark"> + <div class="card-body"> + <img src="https://pubchem.ncbi.nlm.nih.gov/rest/pug/compound/cid/{{result[x]['CID']}}/PNG" class="card-img"> + </div> + </div> + <div class="col-md-8"> + <div class="card-body"> + <h5 class="card-title"><b>CID:</b> <a href="https://pubchem.ncbi.nlm.nih.gov/compound/{{result[x]['CID']}}">{{result[x]["CID"]}}</a></h5> + <p class="card-text"><b>Canonical SMILES: </b>{{result[x]["CanonicalSMILES"]}}</p> + <p class="card-text"><b>Isomeric SMILES: </b>{{result[x]["IsomericSMILES"]}}</p> + <p class="card-text"><b>2D Fingerprint </b>{{result[x]["Fingerprint2D"]}}</p> + </div> + </div> + </div> + </div> + {% endfor %} + {% endif %} + +{% endblock %}
\ No newline at end of file diff --git a/app/templates/search.html b/app/templates/search.html index 1faf151..b2cdfdc 100644 --- a/app/templates/search.html +++ b/app/templates/search.html @@ -1,5 +1,5 @@ {% extends 'base.html' %} - +{% set active_page = "search" %} {% block main %} <h1>Curie Search</h1> <p>Search PubMed articles.</p> diff --git a/app/templates/visualise.html b/app/templates/visualise.html index 67c3a1c..f1bb068 100644 --- a/app/templates/visualise.html +++ b/app/templates/visualise.html @@ -1,5 +1,5 @@ {% extends 'base.html' %} - +{% set active_page = "tool" %} {% block main %} <h1>Curie Visualise</h1> <p>placeholder uwu</p> diff --git a/app/templates/wtform.html b/app/templates/wtform.html deleted file mode 100644 index 6d9add5..0000000 --- a/app/templates/wtform.html +++ /dev/null @@ -1,20 +0,0 @@ -{% extends 'base.html' %} - -{% block main %} - <h2>WTForms in Flask</h2> - <p>Here we are using the Flask-WTF library to create and process a form. Flask-WTF also comes with CSRF protection and validation classes.</p> - <form method="post" action="{{ url_for('wtform') }}"> - {% include 'flash_messages.html' %} - {{ form.csrf_token }} - <div class="form-group"> - {{ form.firstname.label }} {{ form.firstname(class="form-control") }} - </div> - <div class="form-group"> - {{ form.lastname.label }} {{ form.lastname(class="form-control") }} - </div> - <div class="form-group"> - {{ form.email.label }} {{ form.email(class="form-control", placeholder="jdoe@example.com") }} - </div> - <button type="submit" class="btn btn-primary">Submit</button> -</form> -{% endblock %}
\ No newline at end of file |