aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorMunyoki Kilyungi2024-03-26 19:43:08 +0300
committerBonfaceKilz2024-03-27 17:59:06 +0300
commit3e24008aa89738fe0b481437f4c722c398aadd53 (patch)
tree3948c9324c977d48dbcad3addc15bdcf363f0957
parentbcda089114e154a40dc35432027427711bb13f17 (diff)
downloadgenenetwork2-3e24008aa89738fe0b481437f4c722c398aadd53.tar.gz
Format files.
Signed-off-by: Munyoki Kilyungi <me@bonfacemunyoki.com> Co-authored-by: Alexander Kabui <alexanderkabua@gmail.com>
-rw-r--r--gn2/wqflask/static/new/css/llm.css74
-rw-r--r--gn2/wqflask/templates/gnqa_answer.html545
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 %}
-