From f25bc3b4a093183845e3dc8ec3e86ca48a57a75f Mon Sep 17 00:00:00 2001
From: Garvit Shah <96362727+gobbledy-gook@users.noreply.github.com>
Date: Thu, 31 Aug 2023 07:36:30 +0530
Subject: [PATCH] UI v2 update

* UI Changes: Standardised each section and buttons

* UI Changes: Changes made according to suggestions

* UI Changes: Python linting corrected!

---------

Co-authored-by: Garvit Shah <garvitshah@gobbeldy-gook.local>
---
 build.sh             |  1 -
 report_ai/index.html | 44 ++++++++++++++++++++----------
 report_ai/popup.js   | 13 ++++++++-
 report_ai/rating.css | 65 ++++++++++++++++++++++++++++++--------------
 server.py            | 12 ++++----
 5 files changed, 92 insertions(+), 43 deletions(-)

diff --git a/build.sh b/build.sh
index 5ee0af7..89499fd 100755
--- a/build.sh
+++ b/build.sh
@@ -1,4 +1,3 @@
 #!/bin/bash
-export API_KEY=APIKEY
 export MONGO_URI=MONGOURL
 python3 server.py
diff --git a/report_ai/index.html b/report_ai/index.html
index bb26ed4..8b85441 100644
--- a/report_ai/index.html
+++ b/report_ai/index.html
@@ -6,7 +6,7 @@
   <meta>
   <link rel="stylesheet" href="rating.css">
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" />
-  <link rel="stylesheet" href="ai.css">
+  <!-- <link rel="stylesheet" href="ai.css"> -->
   <style>
     h1 {
       padding-top: 3%;
@@ -75,29 +75,43 @@
       </form>
     </div>
     <div class="wordcloud">
-      <div style="font-size:18px;">Word Cloud:<span>
-          <button id="generate_words" class="generate">Generate</button></span></div>
+      <div class = "sectionContainer">
+        <div class = "subHeading">Word Cloud:</div>
+        <div class = "btn">
+          <button id="generate_words" class="generate">Generate</button>
+        </div>
+      </div>
       <div class="worldcloudpara" style="padding:5px; display:inline; float:left">
 
       </div>
     </div>
-    <div class="wordcloud" id="SummaryParent">
-      <div style="font-size:18px;">Summary:<span><button id="summary" class="generate">Generate</button></span></div>
-      <div style = "justify-content: center; margin-top: 2%;" id = "loader"></div>
-      <div class="Summary" id="summarizerDiv">
-
+    <div class="wordcloud">
+      <div class="sectionContainer" id="SummaryParent">
+        <div class="subHeading">Summary:</div>
+        <div class = "btn">
+          <button id="summary" class="generate">Generate</button>
+        </div>
+        <div style = "justify-content: center; margin-top: 2%;" id = "loaderSummary"></div>
+        <div class="Summary" id="summarizerDiv">
+        
+        </div>
       </div>
     </div>
 
     <div class="wordcloud">
-      <div class="textarea2">
-        <textarea id="ask" cols="50" placeholder="Enter your query related to the content"></textarea>
-      </div>
-      <div class="btn">
-        <button id="askbtn" type="submit" class="generate">Ask a Question</button>
-      </div>
-      <div id="Answer" style="overflow-y: scrollable;">
+      <div class = "sectionContainer" id = "qnaParent">
+        <div class = "subHeading">QnA: </div>
+        <div class = "textarea">
+          <textarea class = "textarea2" id="ask" cols="50" placeholder="Enter your query related to the content"></textarea>
+        </div>
+        <div class="btn">
+          <button id="askbtn" type="submit" class="generate">Ask a Question</button>
+        </div>
 
+        <div style = "justify-content: center; margin-top: 2%;" id = "loaderQNA"></div>
+        <div id="Answer">
+          
+        </div>
       </div>
     </div>
 
diff --git a/report_ai/popup.js b/report_ai/popup.js
index e361e2d..6585e32 100644
--- a/report_ai/popup.js
+++ b/report_ai/popup.js
@@ -65,7 +65,7 @@ function logger (result) {
   btn2.onclick = async () => {
     btn2.style.display = 'none'
     const Parent = document.getElementById('SummaryParent')
-    const gifParent = document.getElementById('loader')
+    const gifParent = document.getElementById('loaderSummary')
     gifParent.style.display = 'flex'
     const gif = document.createElement('img')
     gif.src = 'assets/rotate-right.png'
@@ -101,6 +101,15 @@ function logger (result) {
         question: document.getElementById('ask').value,
         context: result.key.text
       }
+      btn3.disabled = true
+      const Parent = document.getElementById('qnaParent')
+      const gifParent = document.getElementById('loaderQNA')
+      gifParent.style.display = 'flex'
+      const gif = document.createElement('img')
+      gif.src = 'assets/rotate-right.png'
+      gif.style.animation = 'spin 1.5s linear infinite'
+      gif.style.width = '6%'
+      gifParent.appendChild(gif)
       const response = await fetch('http://127.0.0.1:5000/ask-question', {
         method: 'POST',
         headers: {
@@ -120,6 +129,8 @@ function logger (result) {
       // Update the UI with the received answer
       const answerDiv = document.getElementById('Answer')
       answerDiv.style.display = 'block'
+      Parent.removeChild(gifParent)
+      btn3.disabled = false
       answerDiv.innerHTML = answer
     } catch (error) {
       console.error('Error fetching answer:', error)
diff --git a/report_ai/rating.css b/report_ai/rating.css
index 35729db..f730715 100644
--- a/report_ai/rating.css
+++ b/report_ai/rating.css
@@ -19,6 +19,7 @@ body {
   padding-top: 20px;
   padding-left: 20px;
   padding-right: 20px;
+  padding-bottom:20px;
   width: 400px;
   display: flex;
   flex-direction: row;
@@ -30,11 +31,8 @@ body {
 .container {
   position: relative;
   width: 400px;
-  padding-left: 10px;
-  padding-right: 10px;
-  padding-top: 10px;
-  margin: 8px;
-
+  margin-left: 8px;
+  margin-right: 8px;
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -42,6 +40,7 @@ body {
   flex-direction: column;
   border-top: 1px solid rgba(197, 197, 197, 0.308);
 }
+
 .container .post {
   display: none;
 }
@@ -71,7 +70,7 @@ body {
 .star-widget label {
   font-size: 15px;
   color: #444;
-  padding: 5px;
+  padding: 10px;
   float: right;
   transition: all 0.2s ease;
   text-align: right;
@@ -79,6 +78,7 @@ body {
 
 .star-widget {
   margin-bottom: 10px;
+  margin-top:10px;
 }
 
 input:not(:checked) ~ label:hover,
@@ -156,8 +156,8 @@ form .btn button {
   width: 100%;
   border: 1px solid #444;
   outline: none;
-  background: #222;
-  color: #999;
+  background: #e0e0e0;
+  color: #1e1e1e;
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
@@ -166,19 +166,24 @@ form .btn button {
 }
 form .btn button:hover {
   background: #1b1b1b;
+  color: white
 }
 
-.review {
+.btn{
+  display:flex;
+  justify-content: flex-end;
+  padding-top: 2%;
+  padding-bottom: 2%;
+}
+
+#review {
   display: flex;
   justify-content: center;
   flex-direction: column;
 }
 
 .wordcloud {
-  padding-top: 20px;
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-bottom: 10px;
+  padding:20px;
   width: 100%;
   display: flex;
   flex-direction: column;
@@ -206,14 +211,20 @@ form .btn button:hover {
 .Summary {
   background-color: #272727;
   width: 360;
-  height: 200;
-  padding: 5px;
+  height: 150;
+  margin-top:10px;
+  padding-top: 10px;
+  padding-left: 7px;
+  padding-right: 7px;
+  padding-bottom: 10px;
   /* display:block; */
   display: none;
   float: left;
   text-align: left;
-  overflow-y: hidden;
+  overflow-x:hidden;
+  overflow-y:auto;
   color: #c6c6c6;
+  border: 0.5px solid rgb(95, 95, 95)
 }
 
 .loader {
@@ -240,9 +251,9 @@ form .btn button:hover {
 }
 
 .generate {
-  border: 1px solid rgba(255, 255, 255, 0.794);
+  border: 1px solid rgba(255, 255, 255, 0.7);
   /* border: 1px solid rgba(255, 255, 255, 0.712); */
-  border-radius: 7px;
+  /* border-radius: 7px; */
   background-color: rgb(211, 118, 48);
   padding-left: 7px;
   padding-right: 7px;
@@ -250,8 +261,8 @@ form .btn button:hover {
 }
 
 .generate:hover {
-  border: 1px solid rgba(255, 255, 255, 0.794);
-  border-radius: 7px;
+  border: 1px solid rgba(255, 255, 255, 0.7);
+  /* border-radius: 7px; */
   background-color: rgb(51, 51, 51);
   padding-left: 7px;
   padding-right: 7px;
@@ -259,7 +270,7 @@ form .btn button:hover {
   color: white;
 }
 
-#textarea2 {
+.textarea2 {
   height: 100%;
   width: 100%;
   outline: none;
@@ -325,3 +336,15 @@ form .btn button:hover {
   border: 1px solid #00000000;
   background-color: #dadada;
 }
+
+.sectionContainer{
+  display:flex;
+  flex-direction: column;
+}
+
+.subHeading{
+  justify-content: flex-start;
+  text-align: left;
+  font-size: 140%;
+  padding-bottom: 2%;
+}
diff --git a/server.py b/server.py
index 1ac43da..461cd89 100644
--- a/server.py
+++ b/server.py
@@ -21,8 +21,10 @@
 cors = CORS(app)
 
 
-API_KEY = os.environ.get("GPTNEO", None)
-headers = {"Authorization": API_KEY}
+BART = os.environ.get("BART", None)
+ROBERTA = os.environ.get("BART", None)
+headersBart = {"Authorization": BART}
+headersRoberta = {"Authorization": ROBERTA}
 MONGO_URI = os.environ.get("mongo_uri","mongodb+srv://admin:admin@reportai.ks0reyi.mongodb.net/")
 client = MongoClient(MONGO_URI, server_api=ServerApi("1"))
 try:
@@ -44,14 +46,14 @@ def summarizer(text):
     def query(payload):
         data = json.dumps(payload)
         response = requests.request(
-            "POST", api_url_summarizer, headers=headers, data=data, timeout=10
+            "POST", api_url_summarizer, headers=headersBart, data=data, timeout=10
         )
         return json.loads(response.content.decode("utf-8"))
 
     output = query(
         {
             "inputs": text,
-            "parameters": {"do_sample": False},
+            "parameters": {"min_length": 100},
         }
     )
     print(output)
@@ -68,7 +70,7 @@ def ask_qna(text):
     def query(payload):
         data = json.dumps(payload)
         response = requests.request(
-            "POST", api_url_qna, headers=headers, data=data, timeout=10
+            "POST", api_url_qna, headers=headersRoberta, data=data, timeout=10
         )
         return json.loads(response.content.decode("utf-8"))