Format files.

Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com>
Co-authored-by: Alexander Kabui <alexanderkabua@gmail.com>

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 %}
-