diff options
| -rw-r--r-- | gn2/wqflask/static/new/css/llm.css | 74 | ||||
| -rw-r--r-- | gn2/wqflask/templates/gnqa_answer.html | 545 |
2 files changed, 287 insertions, 332 deletions
diff --git a/gn2/wqflask/static/new/css/llm.css b/gn2/wqflask/static/new/css/llm.css index 5a666a3d..6243f174 100644 --- a/gn2/wqflask/static/new/css/llm.css +++ b/gn2/wqflask/static/new/css/llm.css @@ -1,81 +1,73 @@ - - - - #gnqna_search { +#gnqna_search { padding:15px 10px; border-radius: 15px; border:1px solid blue; - } +} - #gnqna_search{ +#gnqna_search{ font-weight: bold; font-weight: 18px; - } - - #main-search-controller{ - display: flex; - justify-content: center; - align-items: center; } +#main-search-controller{ + display: flex; + justify-content: center; + align-items: center; +} - - - - #gnqa_ref { +#gnqa_ref { min-height: 100vh; overflow: hidden; overflow-y:auto; - /* overflow-y: scroll; */ - } + /* overflow-y: scroll; */ +} - #gnqa_ref_item{ +#gnqa_ref_item{ padding:12px; - } +} - #gnqa_query { +#gnqa_query { font-size: 24px; font-family: serif; color: #3071a9; text-decoration: underline; - } +} - #gnqa_query::first-letter { +#gnqa_query::first-letter { font-size: 30px; - } - +} - #gnqa_answer::first-letter{ +#gnqa_answer::first-letter{ font-weight: bold; text-transform: uppercase; - } - #gnqna_search_home{ - display: flex; - justify-content: center; - align-items: center; - } +} + +#gnqna_search_home{ + display: flex; + justify-content: center; + align-items: center; +} - - #gnqna_search_home input{ +#gnqna_search_home input{ padding:7px 5px; border-radius: 10px; border:1px solid blue; - } +} - #gnqna_search_home input{ +#gnqna_search_home input{ font-weight: bold; - } +} - .container{ - / box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */ - } +.container{ + / box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */ +} - #loader { +#loader { display: none; position: fixed; top: 0; diff --git a/gn2/wqflask/templates/gnqa_answer.html b/gn2/wqflask/templates/gnqa_answer.html index 8ac121e6..ad22cb9c 100644 --- a/gn2/wqflask/templates/gnqa_answer.html +++ b/gn2/wqflask/templates/gnqa_answer.html @@ -1,367 +1,330 @@ {% extends "base.html" %} {% block title %}GNQNA{% endblock %} -{% block content %} <!-- Start of body --> - - {% block css %} <link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" /> <link rel="stylesheet" type="text/css" href="/static/new/css/llm.css"> -{% endblock %} - - <style type="text/css"> + #loader { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 100%; + background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center; + z-index: 10000; + } + + .btn{ + cursor: pointer; + outline: 0; + color: #AAA; + + } + + .btn:focus { + outline: none; + } + + + .blue-btn{ + color: blue; + } + + .red-btn{ + color: red; + } + .panel-heading { + padding: 0; + border:0; + } + .panel-title a, .panel-title a:active { + display:block; + padding:15px; + color:#555; + font-weight:bold; + text-decoration:none; + border: none; + + outline: none; + } + + .panel-heading a:before { + font-family: 'Glyphicons Halflings'; + content: "\e114"; + float: right; + transition: all 0.5s; + } + + .panel-heading.active a:before { + -webkit-transform: rotate(180deg); + -moz-transform: rotate(180deg); + transform: rotate(180deg); + } - #loader { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; - width: 100%; - background: rgba(0,0,0,0.75) url("/static/gif/loader.gif") no-repeat center center; - z-index: 10000; -} - - -.btn{ - cursor: pointer; - outline: 0; - color: #AAA; - -} - -.btn:focus { - outline: none; -} - - -.blue-btn{ - color: blue; -} - -.red-btn{ - color: red; -} - - -} -.panel-heading { - padding: 0; - border:0; -} -.panel-title>a, .panel-title>a:active{ - display:block; - padding:15px; - color:#555; - font-weight:bold; -text-decoration:none; -border: none; - -outline: none; -} +</style> +{% endblock %} -.panel-heading a:before { - font-family: 'Glyphicons Halflings'; - content: "\e114"; - float: right; - transition: all 0.5s; -} -.panel-heading.active a:before { - -webkit-transform: rotate(180deg); - -moz-transform: rotate(180deg); - transform: rotate(180deg); -} +{% block content %} <!-- Start of body --> +<div style="min-height: 100vh;width: 100vw; margin-bottom: 10px;"> + <div id="loader"></div> + <div style="margin:10px; border:1px solid #ccc;padding: 15px;"> + <div > + <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1> + </div> + <div style="width:90vw;overflow-wrap: normal; margin-top: 5px;"> + <p id="gnqa_answer">{{answer}} <p> + </div> + <div> + <div class="rating" style="margin-right:30px;padding:8px;text-align: right;" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}"> -</style> + <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this answer +1 "><i class="fa fa-thumbs-up fa-lg fa-2x" aria-hidden="true"></i></button> + <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this answer -1"><i class="fa fa-thumbs-down fa-lg fa-2x" aria-hidden="true"></i></button> + </div> + </div> + </div> + <div> -<div style="min-height: 100vh;width: 100vw; margin-bottom: 10px;"> + <div class="container" style="min-width:85vw;overflow-y: auto;min-height: 100vh;"> + <h4> <a href="#" style="font-weight: bold;">References</a></h4> + {% if references %} + <ul id="gnqa_ref"> - <div id="loader"> - - </div> -<div style="margin:10px; border:1px solid #ccc;padding: 15px;"> - <div > - <h1 id="gnqa_query" style="font-weight: bolder">{{query}}<h1> - </div> + {% for reference in references %} - <div style="width:90vw;overflow-wrap: normal; margin-top: 5px;"> - <p id="gnqa_answer">{{answer}} <p> - </div> + <li id="gnqa_ref_item"> + <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> + <!--panel starts here --> + <div class="panel panel-default"> + {% if loop.first %} - <div> - <div class="rating" style="margin-right:30px;padding:8px;text-align: right;" data-doc-id="{{query}}" data-task-id="{{task_id['task_id']}}"> + <div class="panel-heading active" role="tab" id="heading{{reference.doc_id}}"> + <h4 class="panel-title"> - <button class="btn" id="green" data-toggle="tooltip" data-placement="top" title="rate this answer +1 "><i class="fa fa-thumbs-up fa-lg fa-2x" aria-hidden="true"></i></button> - <button class="btn" id="red" data-toggle="tooltip" data-placement="top" title="rate this answer -1"><i class="fa fa-thumbs-down fa-lg fa-2x" aria-hidden="true"></i></button> - - </div> + <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}}"> + <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> + </a> + </h4> + </div> - </div> -</div> -<div> + <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> + <div class="panel-body"> + <div> + </div> + {% if reference.pubmed %} - <div class="container" style="min-width:85vw;overflow-y: auto;min-height: 100vh;"> - <h4> <a href="#" style="font-weight: bold;">References</a></h4> - {% if references %} - <ul id="gnqa_ref"> + <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - {% for reference in references %} + <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> + <span><b>See PubMed Info</b></span> + </button> + </div> - <li id="gnqa_ref_item"> -<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> -<!--panel starts here --> -<div class="panel panel-default"> - {% if loop.first %} - <div class="panel-heading active" role="tab" id="heading{{reference.doc_id}}"> - <h4 class="panel-title"> + <div> + {% include 'pubmed_modal.html' %} + </div> - <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}}"> - <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> - </a> - </h4> - </div> + {% endif %} - <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> - </div> - {% if reference.pubmed %} - <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - - <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> - <span><b>See PubMed Info</b></span> - </button> - </div> + </div> + </div> - <div> - {% include 'pubmed_modal.html' %} - </div> - - - {% endif %} - - <p class="node-references">{{reference.comboTxt}}</p> + {% else %} - </div> - </div> + <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}"> + <h4 class="panel-title"> + <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}}"> + <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> + </a> + </h4> + </div> - {% else %} - - <div class="panel-heading" role="tab" id="heading{{reference.doc_id}}"> - <h4 class="panel-title"> - <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}}"> - <h2 style="font-weight:bold;">{{ reference.bibInfo }} </h2> - </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"> - <div id="collapse{{reference.doc_id}}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading{{reference.doc_id}}"> + {% if reference.pubmed %} - <div class="panel-body"> + <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - {% if reference.pubmed %} + <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> + <span><b>See PubMed Info</b></span> + </button> + </div> - <div style="margin: 5px;color:#3071a9;cursor: pointer;" > - - <button type="button" data-toggle="modal" data-target=".bd-pubmed-modal-lg-{{reference.doc_id}}" style="border:none;text-decoration:underline;outline: none;padding:5px;margin-left:25px;background: transparent;"> - <span><b>See PubMed Info</b></span> - </button> - </div> + <div> + {% include 'pubmed_modal.html' %} + </div> - <div> - {% include 'pubmed_modal.html' %} - </div> - + {% endif %} - {% endif %} - - <p class="node-references">{{reference.comboTxt}}</p> + <p class="node-references">{{reference.comboTxt}}</p> - </div> - </div> - {% endif %} + </div> + </div> + {% endif %} - </div> + </div> - </div> - </li> + </div> + </li> {% endfor %} </ul> - {% else %} + {% else %} <p>No references available.</p> - {% endif %} + {% endif %} + </div> </div> </div> -</div> - +{% endblock %} -<!-- <script language="javascript" type="text/javascript" src="{{ url_for('js', filename='fontawesome/js/all.min.js') }}"></script> --> +{% block js %} <script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script> - -<script type="text/javascript"> -$('.panel-collapse').on('show.bs.collapse', function () { - $(this).siblings('.panel-heading').addClass('active'); - }); - - $('.panel-collapse').on('hide.bs.collapse', function () { - $(this).siblings('.panel-heading').removeClass('active'); - }); - - - - - document.addEventListener('DOMContentLoaded', function() { - const GN_SERVER_URL = {{gn_server_url|tojson}} - $('#globalsearchform').hide() - $('#gnqna_search_home').show() - $('footer').hide() - $("#gnqna_search_home_input").keypress(function(event) { - if (event.keyCode === 13) { - console.log("clicked this button") - $('#gnqna_search_home').submit(); - let spinner = $("#loader") - spinner.show(); - - } - }) -const answer = {{ answer | tojson }}; -const query = {{query | tojson }} -const task_id = {{ task_id | tojson }}["task_id"]; -async function voteRequest (gn_server_url,task_id,metadata){ - try{ - const response = await fetch(`/gnqna/rating/${task_id}`,{ - method:"POST", - headers: { - 'Content-Type': 'application/json' - }, - body: JSON.stringify(metadata) - }) - if (response.ok){ - return {"message":"success",status:0} - } - else { - let {error,error_description} = await response.json() - return {"message":`HTTP Error:HTTP Response Code: ${response?.status}-reason-${error_description}`,status:1} - } - } - catch (err){ - return {"message":err,status:1}} -} -likeBtn = document.querySelector("#green"); -dislikeBtn = document.querySelector("#red") -likeBtn.addEventListener("click",(event)=>{ - if (likeBtn.classList.contains("blue-btn")){ - var {caller,weight} = (voteWeight["default"]) - } - else { - var {caller,weight} = voteWeight["like"] - - } - voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{ - alert(message) - status == 0 ? caller():"" - }) -}) -dislikeBtn.addEventListener("click",(event)=>{ -var {caller,weight} = voteWeight["dislike"] - if (dislikeBtn.classList.contains("red-btn")){ - var {caller,weight} = (voteWeight["default"]) - } - voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{ - alert(message) - status == 0 ? caller():"" - }) -}) -let voteWeight = { - like: { - caller:function(){ - dislikeBtn.classList.remove("red-btn") - likeBtn.classList.toggle("blue-btn") - - }, - weight: 1 - }, - dislike: { - caller:function(){ - likeBtn.classList.remove("blue-btn") - dislikeBtn.classList.toggle("red-btn") - }, - - weight:-1 - }, - default: { - caller:function() { - likeBtn.classList.remove("blue-btn") - dislikeBtn.classList.remove("red-btn") -}, - weight:0 -}}}) - - -</script> - - <script src="{{ url_for('js', filename='linkify/linkify.min.js') }}" type="text/javascript"></script> <script src="{{ url_for('js', filename='linkify/linkify-html.min.js') }}" type="text/javascript"></script> - - <script type="text/javascript"> + $('.panel-collapse').on('show.bs.collapse', function () { + $(this).siblings('.panel-heading').addClass('active'); + }); + + $('.panel-collapse').on('hide.bs.collapse', function () { + $(this).siblings('.panel-heading').removeClass('active'); + }); + + document.addEventListener('DOMContentLoaded', function() { + const GN_SERVER_URL = {{gn_server_url|tojson}} + $('#globalsearchform').hide() + $('footer').hide() + $("#gnqna_search_home_input").keypress(function(event) { + if (event.keyCode === 13) { + console.log("clicked this button") + $('#gnqna_search_home').submit(); + let spinner = $("#loader") + spinner.show(); + + } + }) + const answer = {{ answer | tojson }}; + const query = {{query | tojson }} + const task_id = {{ task_id | tojson }}["task_id"]; + async function voteRequest (gn_server_url,task_id,metadata){ + try{ + const response = await fetch(`/gnqna/rating/${task_id}`,{ + method:"POST", + headers: { + 'Content-Type': 'application/json' + }, + body: JSON.stringify(metadata) + }) + if (response.ok){ + return {"message":"success",status:0} + } + else { + let {error,error_description} = await response.json() + return {"message":`HTTP Error:HTTP Response Code: ${response?.status}-reason-${error_description}`,status:1} + } + } + catch (err){ + return {"message":err,status:1}} + } + likeBtn = document.querySelector("#green"); + dislikeBtn = document.querySelector("#red") + likeBtn.addEventListener("click",(event)=>{ + if (likeBtn.classList.contains("blue-btn")){ + var {caller,weight} = (voteWeight["default"]) + } + else { + var {caller,weight} = voteWeight["like"] + + } + voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{ + alert(message); + status == 0 ? caller():""; + }) + }) + dislikeBtn.addEventListener("click", (event) = { + var {caller,weight} = voteWeight["dislike"] + if (dislikeBtn.classList.contains("red-btn")){ + var {caller,weight} = (voteWeight["default"]) + } + voteRequest(GN_SERVER_URL,task_id,{weight,query,answer}).then(({message,status})=>{ + alert(message) + status == 0 ? caller():"" + })); + let voteWeight = { + like: { + caller:function(){ + dislikeBtn.classList.remove("red-btn") + likeBtn.classList.toggle("blue-btn") + + }, + weight: 1 + }, + dislike: { + caller:function(){ + likeBtn.classList.remove("blue-btn") + dislikeBtn.classList.toggle("red-btn") + }, + + weight:-1 + }, + default: { + caller:function() { + likeBtn.classList.remove("blue-btn") + dislikeBtn.classList.remove("red-") + }, + }} +</script> +<script type="text/javascript"> + function nodeLinkify(node_list) { + node_list.forEach((node) => { + node.innerHTML = linkifyHtml(node.innerHTML, { + target:{ + url:"_blank", + email:null + } + }) + }) -const nodeLinkify = (node_list)=>{ -node_list.forEach((node)=>{ - node.innerHTML = linkifyHtml(node.innerHTML, { - target:{ - url:"_blank", - email:null - } - }) -}) -} - - nodeLinkify(document.querySelectorAll(".pubmed-abstract")) - - nodeLinkify(document.querySelectorAll(".node-references")) - -var coll = document.getElementsByClassName("collapsible-btn"); -for (var i = 0; i < coll.length; i++) { - coll[i].addEventListener("click", function() { - - this.classList.toggle("active-btn"); - }); -} + nodeLinkify(document.querySelectorAll(".pubmed-abstract")) + nodeLinkify(document.querySelectorAll(".node-references")) + var coll = document.getElementsByClassName("collapsible-btn"); + for (var i = 0; i < coll.length; i++) { + coll[i].addEventListener("click", function() { + this.classList.toggle("active-btn"); + }); + } </script> - {% endblock %} - |