diff options
| -rw-r--r-- | gn2/wqflask/templates/gnqa.html | 136 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gnqa_answer.html | 243 |
2 files changed, 222 insertions, 157 deletions
diff --git a/gn2/wqflask/templates/gnqa.html b/gn2/wqflask/templates/gnqa.html index b3bc74fd..6969bad9 100644 --- a/gn2/wqflask/templates/gnqa.html +++ b/gn2/wqflask/templates/gnqa.html @@ -1,9 +1,7 @@ {% extends "base.html" %} {% block title %}GNQA{% endblock %} - {% block css %} -<style> - + <style> .htmx-indicator{ display:none; opacity: 0; @@ -82,75 +80,79 @@ background-color: #ccf; } -</style> + </style> {% endblock %} - {% block search %}{% endblock %} -{% block content %} <!-- Start of body --> -<section class="container-fluid"> - <header class="row"> - <h1 class="col-sm-12 text-center search-header"> - AI Search - <small> - <sup> - <button class="search-hist-btn" hx-get="/gnqna/hist" hx-target="#swap" hx-swap="innerHTML"> - [Search History] - </button> - </sup> - </small> - </h1> - </header> - <form class="row form-horizontal" id="gnqna_search_home" - action="/gnqna" method="POST"> - <!--- init gnqa codebase here --> - <div class="form-group form-group-lg col col-xs-12 col-sm-6 col-sm-offset-3"> - <button class="btn btn-default btn-sm col-xs-1 col-sm-1 col-sm-offset-3" - hx-post="/gnqna" - hx-target="#swap" - hx-swap="innerHTML" - hx-indicator="#indicator"> - <i class="fa fa-search fa-3x" aria-hidden="true" title="Search"></i> - <img id="indicator" class="htmx-indicator" src="/static/gif/loader.gif"/> - </button> - <input - class="text-left input-lg col-sm-5" - id="gnqna_search_home_input" - type="text" autocomplete="on" - required - placeholder="Ask More Questions or Topics (E.g Genes)" - value='' - name="querygnqa" - /> - </div> - </form> - <article id="swap" class="row"> - <div class="row gnqa-copy"> - <p class="col-sm-10 col-sm-offset-1 col-md-offset-3 col-md-6"> - Welcome to the GeneNetwork Question and Answer (GNQA)system. We utilize a large language model and 3000 scientific publications to make GNQA a subject matter expert in three areas: <b><a href="/">GeneNetwork.org </a></b>, <b>genomics/genetics with regards to diabetes</b> and <b>genomics/genetics with regards to agin.</b>. - </p> - <p class="col-sm-11 col-md-offset-3 col-md-6">At the moment when you ask GNQA something it will attempt to return a sensible answer with <q>real</q> references. To this end we aim to reduce hallucinations and provide a knowledge launchpad for a researcher to enhance their knowledge on the relevant subject matter.</p> - <p class="col-sm-11 col-md-offset-3 col-md-6"> - GNQA is not a finished product as we are working diligently to improve it daily. - </p> - <p class="col-sm-11 col-md-offset-3 col-md-6"><b>Thanks for using GNQA!</b> </p> - - </div> - </article> -</section> - +{% block content %} + <!-- Start of body --> + <section class="container-fluid"> + <header class="row"> + <h1 class="col-sm-12 text-center search-header"> + AI Search + <small> + <sup> + <button class="search-hist-btn" + hx-get="/gnqna/hist" + hx-target="#swap" + hx-swap="innerHTML">[Search History]</button> + </sup> + </small> + </h1> + </header> + <form class="row form-horizontal" + id="gnqna_search_home" + action="/gnqna" + method="post"> + <!--- init gnqa codebase here --> + <div class="form-group form-group-lg col col-xs-12 col-sm-6 col-sm-offset-3"> + <button class="btn btn-default btn-sm col-xs-1 col-sm-1 col-sm-offset-3" + hx-post="/gnqna" + hx-target="#swap" + hx-swap="innerHTML" + hx-indicator="#indicator"> + <i class="fa fa-search fa-3x" aria-hidden="true" title="Search"></i> + <img id="indicator" class="htmx-indicator" src="/static/gif/loader.gif" /> + </button> + <input class="text-left input-lg col-sm-5" + id="gnqna_search_home_input" + type="text" + autocomplete="on" + required + placeholder="Ask More Questions or Topics (E.g Genes)" + value='' + name="querygnqa" /> + </div> + </form> + <article id="swap" class="row"> + <div class="row gnqa-copy"> + <p class="col-sm-10 col-sm-offset-1 col-md-offset-3 col-md-6"> + Welcome to the GeneNetwork Question and Answer (GNQA)system. We utilize a large language model and 3000 scientific publications to make GNQA a subject matter expert in three areas: <b><a href="/">GeneNetwork.org</a></b>, <b>genomics/genetics with regards to diabetes</b> and <b>genomics/genetics with regards to agin.</b>. + </p> + <p class="col-sm-11 col-md-offset-3 col-md-6"> + At the moment when you ask GNQA something it will attempt to return a sensible answer with <q>real</q> references. To this end we aim to reduce hallucinations and provide a knowledge launchpad for a researcher to enhance their knowledge on the relevant subject matter. + </p> + <p class="col-sm-11 col-md-offset-3 col-md-6"> + GNQA is not a finished product as we are working diligently to improve it daily. + </p> + <p class="col-sm-11 col-md-offset-3 col-md-6"> + <b>Thanks for using GNQA!</b> + </p> + </div> + </article> + </section> {% endblock %} - {% block js %} -<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script> - -<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script> - -<script language="javascript" type="text/javascript" src="{{ url_for('js', filename='htmx.min.js') }}"></script> - -<script type="text/javascript"> + <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" + type="text/javascript"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='jquery-ui/jquery-ui.min.js') }}"></script> + <script language="javascript" + type="text/javascript" + src="{{ url_for('js', filename='htmx.min.js') }}"></script> + <script type="text/javascript"> document.addEventListener('DOMContentLoaded', function() { $('footer').hide() }); -</script> + </script> {% endblock %} - diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html index 41c1b338..dc924d3b 100644 --- a/gn2/wqflask/templates/gnqa_answer.html +++ b/gn2/wqflask/templates/gnqa_answer.html @@ -1,98 +1,161 @@ - <section class="container-fluid answers gnqa-copy"> <div class="row container gnqa-answer" style="margin-bottom: 1em"> - <p class="row lead"> - <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>{{ query }}</i></b></mark><br/> - {{ answer|safe }} - </p> - <div class="rating row" data-doc-id="{{query}}"> - <button class="btn" id="upvote" data-toggle="tooltip" data-placement="top" title="Vote Up"><i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i></button> - <button class="btn" id="downvote" data-toggle="tooltip" data-placement="top" title="Vote Down"><i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i></button> - <sub id="rate" class="text-info"> - </sub> - </div> + <p class="row lead"> + <mark style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"><b><i>{{ query }}</i></b></mark> + <br /> + {{ answer|safe }} + </p> + <div class="rating row" data-doc-id="{{ query }}"> + <button class="btn" + id="upvote" + data-toggle="tooltip" + data-placement="top" + title="Vote Up"> + <i class="fa fa-thumbs-up fa-sm fa-1x" aria-hidden="true"></i> + </button> + <button class="btn" + id="downvote" + data-toggle="tooltip" + data-placement="top" + title="Vote Down"> + <i class="fa fa-thumbs-down fa-sm fa-1x" aria-hidden="true"></i> + </button> + <sub id="rate" class="text-info"> + </sub> + </div> </div> <div class="row container"> - <details open> - <summary><h3 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;">References</h3></summary> - {% if references %} - <ul class="list-unstyled"> - {% for reference in references %} - <li> - <div class="panel-group" role="tablist" aria-multiselectable="true" style="margin-bottom:0;"> - <div class="panel panel-default"> - {% if loop.first %} - <div class="panel-heading active" role="tab" id="heading{{ reference.doc_id }}"> - <h4 class="panel-title" style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"> - - <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{ reference.doc_id }}" aria-expanded="true" aria-controls="collapse{{reference.doc_id}}"> - {{ reference.bibInfo }} - </a> - </h4> - </div> - <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> - <div class="panel-body"> - <p class="node-references">{{ reference.comboTxt|safe }}</p> - <div> - {% if reference.pubmed %} - <details open> - <summary>See PubMed Info</summary> - <div style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;margin-top:1.4em"> - <h3><b>{{ reference.pubmed[0].get('title') }}:</b></h3> - <p><b>Authors:</b><span class="text-muted">{{ reference.pubmed[0].get('authors') }}</span></p> - <p><b>PMID: <span class="text-info">{{ reference.pubmed[0].get('pub_id') }}</span></b></p> - <p><b>Abstract: </b></p> - <p>{{ reference.pubmed[0].get('abstract')|safe }}</p> - <p><a href="{{reference.pubmed[0].get('source')}}" target="_blank">See full Article on Pubmed</a></p> - </div> - </details> - {% endif %} - </div> - </div> - {% else %} - <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}"> - <h4 class="panel-title" style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"> - - <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse{{reference.doc_id}}" aria-expanded="false" aria-controls="collapse{{reference.doc_id}}"> - {{ reference.bibInfo }} - </a> - </h4> - </div> - <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> - <div class="panel-body"> - <p class="node-references">{{ reference.comboTxt|safe }}</p> - <div> - {% if reference.pubmed %} - <details > - <summary>See PubMed Info</summary> - <div style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;margin-top:1.4em"> - <h3><b>{{ reference.pubmed[0].get('title') }}:</b></h3> - <p><b>Authors:</b><span class="text-muted">{{ reference.pubmed[0].get('authors') }}</span></p> - <p><b>PMID: <span class="text-info">{{ reference.pubmed[0].get('pub_id') }}</span></b></p> - <p><b>Abstract: </b></p> - <p>{{ reference.pubmed[0].get('abstract')|safe }}</p> - <p><a href="{{reference.pubmed[0].get('source')}}" target="_blank" style="float:left;">See full Article on Pubmed</a></p> - </div> - </details> - {% endif %} - </div> - </div> - </div> - {% endif %} - </div> - </div> - </li> - {% endfor %} - </ul> - {% else %} - <p><i>No references available.</i></p> - {% endif %} - </details> - </div> + <details open> + <summary> + <h3 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif">References</h3> + </summary> + {% if references %} + <ul class="list-unstyled"> + {% for reference in references %} + <li> + <div class="panel-group" + role="tablist" + aria-multiselectable="true" + style="margin-bottom:0"> + <div class="panel panel-default"> + {% if loop.first %} + <div class="panel-heading active" + role="tab" + id="heading{{ reference.doc_id }}"> + <h4 class="panel-title" + style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"> + <a class="collapsed" + role="button" + data-toggle="collapse" + data-parent="#accordion" + href="#collapse{{ reference.doc_id }}" + aria-expanded="true" + aria-controls="collapse{{ reference.doc_id }}"> + {{ reference.bibInfo }} + </a> + </h4> + </div> + <div id="collapse{{ reference.doc_id }}" + class="panel-collapse collapse in" + role="tabpanel" + aria-labelledby="heading{{ reference.doc_id }}"> + <div class="panel-body"> + <p class="node-references">{{ reference.comboTxt|safe }}</p> + <div> + {% if reference.pubmed %} + <details open> + <summary>See PubMed Info</summary> + <div style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif; + margin-top:1.4em"> + <h3> + <b>{{ reference.pubmed[0].get("title") }}:</b> + </h3> + <p> + <b>Authors:</b><span class="text-muted">{{ reference.pubmed[0].get("authors") }}</span> + </p> + <p> + <b>PMID: <span class="text-info">{{ reference.pubmed[0].get("pub_id") }}</span></b> + </p> + <p> + <b>Abstract: </b> + </p> + <p>{{ reference.pubmed[0].get("abstract") |safe }}</p> + <p> + <a href="{{ reference.pubmed[0].get("source") }}" target="_blank">See full Article on Pubmed</a> + </p> + </div> + </details> + {% endif %} + </div> + </div> + {% else %} + <div class="panel-heading" role="tab" id="heading{{ reference.doc_id }}"> + <h4 class="panel-title" + style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif"> + <a class="collapsed" + role="button" + data-toggle="collapse" + data-parent="#accordion" + href="#collapse{{ reference.doc_id }}" + aria-expanded="false" + aria-controls="collapse{{ reference.doc_id }}"> + {{ reference.bibInfo }} + </a> + </h4> + </div> + <div id="collapse{{ reference.doc_id }}" + class="panel-collapse collapse" + role="tabpanel" + aria-labelledby="heading{{ reference.doc_id }}"> + <div class="panel-body"> + <p class="node-references">{{ reference.comboTxt|safe }}</p> + <div> + {% if reference.pubmed %} + <details> + <summary>See PubMed Info</summary> + <div style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif; + margin-top:1.4em"> + <h3> + <b>{{ reference.pubmed[0].get("title") }}:</b> + </h3> + <p> + <b>Authors:</b><span class="text-muted">{{ reference.pubmed[0].get("authors") }}</span> + </p> + <p> + <b>PMID: <span class="text-info">{{ reference.pubmed[0].get("pub_id") }}</span></b> + </p> + <p> + <b>Abstract: </b> + </p> + <p>{{ reference.pubmed[0].get("abstract") |safe }}</p> + <p> + <a href="{{ reference.pubmed[0].get("source") }}" + target="_blank" + style="float:left">See full Article on Pubmed</a> + </p> + </div> + </details> + {% endif %} + </div> + </div> + </div> + {% endif %} + </div> + </div> + </li> + {% endfor %} + </ul> + {% else %} + <p> + <i>No references available.</i> + </p> + {% endif %} + </details> + </div> + </div> </section> {% block js %} - -<script> + <script> function updateRatingHandler(target, responseObj, args){ let {status, response} = responseObj.xhr if (status==200 && args == "upvote"){ @@ -115,5 +178,5 @@ htmx.on("#upvote", "click", function(evt){ htmx.on("#downvote", "click", function(evt){ vote_count = htmx.find(".btn-danger") ? 0 : -1 htmx.ajax("POST", `/gnqna/rating/${task_id}/${vote_count}`, {target: "#rate",handler: (target,obj)=> updateRatingHandler(target,obj,"downvote") , swap:"innerHTML",values: {'query': query, 'answer': answer}})}); -</script> + </script> {% endblock %} |