diff options
| -rw-r--r-- | gn2/wqflask/templates/gnqa_chat_box.html | 136 |
1 files changed, 136 insertions, 0 deletions
diff --git a/gn2/wqflask/templates/gnqa_chat_box.html b/gn2/wqflask/templates/gnqa_chat_box.html new file mode 100644 index 00000000..a10062cd --- /dev/null +++ b/gn2/wqflask/templates/gnqa_chat_box.html @@ -0,0 +1,136 @@ +<section id="swap2"> +<div class="col-sm-8" id="swap2"> + <section > + <div style="max-height:75vh;margin-bottom:8px;overflow-y:auto" > + <div> + <div > + <h3>You</h3> + <p> + {{ query }} + </p> + </div> + </div> + <div> + <h3> GNQA </h3> + <div style="border-radius:6px;background-color:#F5F5F5;padding:5px"> + {{ answer }} + </div> + </div> + <div class="row container"> + <details open> + <summary><h3 style="font-family: 'Linux Libertine','Georgia','Times','Source Serif Pro',serif;"><b><i>References Metadata related to your query</i></b></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 }}</p> + <div> + {% if reference.pubmed %} + <hr/> + <details open> + <summary><mark>See PubMed Info</mark></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">Click to view 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="true" 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" id="section-{{reference.doc_id}}"> + <p class="node-references">{{reference.comboTxt}}</p> + <div> + {% if reference.pubmed %} + <hr/> + <details open> + <summary><mark>See PubMed Info</mark></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">Click to view 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> + <form class="row form-horizontal" id="gnqna_search_home" + action="/gnqa/testing" method="POST"> + <div class="form-group form-group-lg col col-xs-12 col-sm-6 col-sm-offset-3"> + <input + class="text-left input-lg col-sm-8 col-sm-offset-2" + id="gnqna_search_home_input" + type="text" autocomplete="on" + required + placeholder="Ask More Questions or Topics (E.g Genes)" + value='' + name="query" + hx-post="/gnqa/testing" + hx-target="#swap2" + hx-trigger="submit" + hx-swap="outerHTML" + /> + <div class="col-sm-1"> + <button id="submit-qnqa-btn" hx-post="/gnqa/testing" hx-swap="outerHTML" hx-target="#swap2" hx-trigger="click" class="btn-primary"><span><svg width="48" height="24" viewBox="0 0 24 24" fill="none"><path d="M7 11L12 6L17 11M12 18V7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path></svg></span></button> + </div> + </div> + </form> + </section> + </div> + <div class="col-sm-4"> + <div class="row"> + <div class="col-sm-10 col-sm-offset-1"> + <h4><mark>Click links below to view references</mark></h4> + {% for reference in references %} + <a href="#heading{{reference.doc_id}}">{{reference.bibInfo}}</a> + <br/> + {% endfor %} + </div> + </div> + </div> + </div> +</section> |