Merge pull request #823 from genenetwork/feature/gn-llm-ui

Feature/gn llm UI

4 files changed, 263 insertions, 0 deletions

diff --git a/wqflask/wqflask/templates/base.html b/wqflask/wqflask/templates/base.html
index 392d41db..e0fc9e63 100644
--- a/wqflask/wqflask/templates/base.html
+++ b/wqflask/wqflask/templates/base.html
@@ -50,6 +50,7 @@
 }
 
 
+
 .btn-stc {
     padding:9px 8px;
 
@@ -197,6 +198,13 @@
         </div>
     </div>
     <div class="container-fluid" style="width: 100%; min-width: 650px; position: relative;background-color: #d5d5d5; height: 100px;">
+        <form id="gnqna_search_home" style="display:none;width: 100%;">
+           
+           <div >
+              <input  id="gnqna_search_home_input" style="width:45vw" type="text" autocomplete="off" 
+required placeholder="Ask More Questions or Topics (E.g Genes) " value='' name="quedrygnqa">  
+           </div> 
+        </form>
         <form method="get" action="/gsearch" id="globalsearchform">
             <div class="form-group">
                 <div class="controls">
@@ -214,6 +222,10 @@
 
                     <!-- todo fix text overlap for this;;responsiveness-->
 
+                    <span style="padding: 5px;margin-left: 65px;" id="gnqna_home">
+                        <a href="/gnqna">GNQNA Search</a>
+                    </span>
+
                     <span  style="padding: 5px;margin-left: 65px;" >
                                 <a style="text-decoration: none" target="_blank" href="https://issues.genenetwork.org/topics/xapian/xapian-search-queries">
                                     <i  style="text-align: center;color:#336699;;" class="fa fa-question-circle fa-2x" title="see more search hints" aria-hidden="true"></i>
@@ -224,6 +236,7 @@
                 </div>
             </div>
         </form>
+
     </div>
     {% block content %}
     {% endblock %}
@@ -375,6 +388,8 @@
         let timeToLoad = document.createElement("p");
         timeToLoad.innerHTML = "It took your browser " + ((Date.now() - pageLoadStart) / 1000) + " second(s) to render this page";
         document.querySelector("footer .row .col-xs-6").appendChild(timeToLoad);
+
+
     });
     </script>
 </body>
diff --git a/wqflask/wqflask/templates/gnqa.html b/wqflask/wqflask/templates/gnqa.html
new file mode 100644
index 00000000..bed2627d
--- /dev/null
+++ b/wqflask/wqflask/templates/gnqa.html
@@ -0,0 +1,68 @@
+{% extends "base.html" %}
+{% block title %}GNQNA{% endblock %}
+
+{% block content %} <!-- Start of body -->
+
+
+    <style>
+   
+
+
+   #gnqna_search {
+    padding:15px  10px;
+    border-radius: 15px;
+    border:1px solid blue;
+   }
+
+  #gnqna_search{
+    font-weight: bold;
+    font-weight: 18px;
+  }
+
+   #main-search-controller{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+</style>
+
+
+<div style="height: 100vh;width: 100vw; ">
+<div id="main-search-controller" style="margin: 20px;width: 100%;height: 100%;">
+<div id="gnqna_controller">
+  <form method="POST" action="/gnqna" id="gnqna_form">
+  <input  id="gnqna_search" style="width:45vw" type="text" autocomplete="off" 
+required placeholder="Ask a Question or Topic ( Genes) " value='' name="querygnqa">
+
+</form>
+</div>
+
+</div>
+
+<div>
+
+</div>
+
+
+<script src="{{ url_for('js', filename='jquery/jquery.min.js') }}" type="text/javascript"></script>
+
+ <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
+<script type="text/javascript">
+
+    document.addEventListener('DOMContentLoaded', function() {
+
+       $("#gnqna_search").keyup(function(event) {
+            if (event.keyCode === 13) {
+            $('#gnqna_form').attr('action', "/gnqna").submit();
+            }
+        })
+
+
+    });
+
+
+</script>
+<!-- Bootstrap JS and Popper.js -->
+{% endblock %}
+
diff --git a/wqflask/wqflask/templates/gnqa_answer.html b/wqflask/wqflask/templates/gnqa_answer.html
new file mode 100644
index 00000000..4fb4b268
--- /dev/null
+++ b/wqflask/wqflask/templates/gnqa_answer.html
@@ -0,0 +1,158 @@
+{% extends "base.html" %}
+{% block title %}GNQNA{% endblock %}
+
+{% block content %} <!-- Start of body -->
+
+
+    <style>
+   
+
+
+   #gnqna_search {
+    padding:15px  10px;
+    border-radius: 15px;
+    border:1px solid blue;
+   }
+
+  #gnqna_search{
+    font-weight: bold;
+    font-weight: 18px;
+  }
+
+   #main-search-controller{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+</style>
+
+{% block css %}
+<link rel="stylesheet" type="text/css" href="/static/new/css/markdown.css" />
+{% endblock %}
+
+
+<style type="text/css">
+  
+  #gnqa_ref {
+    height: 90vh;
+    overflow: hidden;
+    overflow-y: scroll;
+  }
+
+
+  #gnqa_ref_item{
+    border-bottom: 1px solid lightgrey;
+    padding:12px;
+  }
+
+
+  #gnqa_query {
+    font-size: 24px;
+    font-family: serif;
+    color: #3071a9;
+    font-style: italic;
+    letter-spacing: 0.3em;
+    text-transform: capitalize;
+
+    text-decoration: underline;
+  }
+
+  #gnqa_query::first-letter {
+    font-size: 30px;
+    font-style: italic;
+
+  }
+
+  #gnqa_answer {
+    text-transform: capitalize;
+  }
+
+  #gnqa_answer::first-letter{
+    font-weight: bold;
+
+
+  }
+  #gnqna_search_home{
+ display: flex;
+  justify-content: center;
+  align-items: center;
+  }
+
+ 
+   #gnqna_search_home input{
+    padding:7px  5px;
+    border-radius: 10px;
+    border:1px solid blue;
+   }
+
+  #gnqna_search_home input{
+    font-weight: bold;
+  }
+
+  .container{
+   / box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px; */
+  }
+
+
+
+</style>
+
+<div style="height: 90vh;width: 100vw; margin-bottom: 10px;">
+<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:40vw;overflow-wrap: normal; margin-top: 5px;">
+    <p style="word-spacing: 0.7em;" id="gnqa_answer">{{answer}} <p>
+  </div>
+</div>
+
+<div>
+
+ 
+  
+      <div class="container" style="overflow-y: hidden;">
+        <h4> <a href="#">References</a></h4>
+        {% if references %}
+            <ul id="gnqa_ref">
+                {% for reference in references %}
+                    <li id="gnqa_ref_item">
+                        <h2 style="font-weight:bolder;">{{ reference.bibInfo }} </h2>
+                        <p>{{reference.comboTxt}}</p>
+                    </li>
+                {% endfor %}
+            </ul>
+        {% else %}
+            <p>No references available.</p>
+        {% endif %}
+    </div>
+</div>
+</div>
+<script type="text/javascript">
+
+     document.addEventListener('DOMContentLoaded', function() {
+        $('#globalsearchform').hide()
+        $('#gnqna_search_home').show()
+         $('footer').hide()
+
+          $("#gnqna_search_home_input").keyup(function(event) {
+
+            console.log("adding input")
+            if (event.keyCode === 13) {
+                console.log("clicked this button")
+            $('#gnqna_search_home').attr('action', "/gnqna").submit();
+            }
+        })
+    });
+
+</script>
+
+<!-- Bootstrap JS and Popper.js -->
+
+
+
+{% endblock %}
+
diff --git a/wqflask/wqflask/views.py b/wqflask/wqflask/views.py
index 34574c10..37be0e81 100644
--- a/wqflask/wqflask/views.py
+++ b/wqflask/wqflask/views.py
@@ -262,6 +262,28 @@ def gsearchtable():
     return flask.jsonify(current_page)
 
 
+
+@app.route("/gnqna",methods =["POST","GET"])
+def gnqna():
+    if request.method == "POST":
+        try:
+            def __error__(resp):
+                return resp.json()
+            def __success__(resp):
+                return render_template("gnqa_answer.html",**resp.json())
+            return monad_requests.post(
+                urljoin(current_app.config["GN_SERVER_URL"],
+                        "/api/llm/gnqna"),
+                json=dict(request.form),
+                ).then(
+                    lambda resp: resp
+                ).either(
+                    __error__, __success__)
+        except Exception as error:
+            return flask.jsonify({"error":str(error)})
+    return render_template("gnqa.html")
+
+
 @app.route("/gsearch_updating", methods=('POST',))
 def gsearch_updating():
     result = UpdateGSearch(request.args).__dict__