From b1a8345c7559c6240f5832847262a0ed25497480 Mon Sep 17 00:00:00 2001
From: Huan He <140455389+huanhe4096@users.noreply.github.com>
Date: Fri, 8 Nov 2024 11:37:54 -0500
Subject: [PATCH] update ai

---
 web/src/App.vue                   |  4 ++-
 web/src/DataStore.js              | 21 +++++++++++-
 web/src/components/AIHelper.vue   | 43 ++++++++++++++++-------
 web/src/components/ItemDetail.vue | 57 +++++++++++++++++++++++--------
 4 files changed, 96 insertions(+), 29 deletions(-)

diff --git a/web/src/App.vue b/web/src/App.vue
index a8ddd26..2951497 100644
--- a/web/src/App.vue
+++ b/web/src/App.vue
@@ -57,7 +57,7 @@ const store = useDataStore();
     <a href="https://github.com/BIDS-Xu-Lab/novelty-reviewer"
       target="_blank">
       <i class="fa-brands fa-pagelines"></i>
-      Novelty Reviewer
+      Waffle
       v0.1.0
       |
       <i class="fa-brands fa-github"></i>
@@ -124,10 +124,12 @@ const store = useDataStore();
 }
 .main-info {
   width: 50%;
+  /* max-width: 600px; */
   overflow-y: hidden;
 }
 .review-panel {
   width: 50%;
+  max-width: 700px;
   overflow-y: hidden;
 }
 </style>
diff --git a/web/src/DataStore.js b/web/src/DataStore.js
index ee5613e..d782f0d 100644
--- a/web/src/DataStore.js
+++ b/web/src/DataStore.js
@@ -94,6 +94,9 @@ state: () => ({
      */
     taxonomy: [],
 
+    // translation
+    translation: {},
+
     // prompt
     prompt_file: null,
     llm_prompt: null,
@@ -102,7 +105,6 @@ state: () => ({
         enable_highlight: true,
         is_fetching_metadata: false,
         is_translating: false,
-        is_asking_ai: false,
         is_saving_dataset_file: false,
         has_data_unsaved: false,
 
@@ -217,6 +219,23 @@ actions: {
         return true;
     },
 
+    hasWorkingItemTranslation: function(section) {
+        if (this.working_item_idx == -1) {
+            return false;
+        }
+        if (!this.translation.hasOwnProperty(this.working_item.pmid)) {
+            return false;
+        }
+        if (!this.translation[this.working_item.pmid].hasOwnProperty(section)) {
+            return false;
+        }
+        return true;
+    },
+
+    getWorkingItemTranslation: function(section) {
+        return this.translation[this.working_item.pmid][section];
+    },
+
     formatTsvRow: function(row) {
         let attrs = [
             // basic information
diff --git a/web/src/components/AIHelper.vue b/web/src/components/AIHelper.vue
index 02471c3..823d59c 100644
--- a/web/src/components/AIHelper.vue
+++ b/web/src/components/AIHelper.vue
@@ -23,14 +23,12 @@ async function onClickAccept(model, result) {
 }
 
 async function onClickReview(model) {
-    status.value[model] = 'reviewing';
-
     // set flag
-    store.flag.is_asking_ai = true;
+    status.value[model] = 'reviewing';
 
     console.log(`* AI Helper [${model}] is thinking ...`);
     let d = await ai_helper.ask(
-        `I will provide a list of concepts, please randomly select one of them to echo for now: 
+        `I will provide a list of concepts, please randomly select one of them to echo for now. Please exactly use what listed. Don't add any other words in the output.
 
 - New tool
 - New gene
@@ -55,6 +53,16 @@ async function onClickReviewAll() {
         onClickReview(model.id);
     }
 }
+
+function isAllReviewed() {
+    for (let model of store.config.ai_models) {
+        if (isReviewing(model.id)) {
+            return false;
+        }
+    }
+
+    return true;
+}
 </script>
 
 <template>
@@ -65,14 +73,19 @@ async function onClickReviewAll() {
         AI Helper
     </div>
     <div class="oper-bar">
-        <Button label="Review by All AI Models" 
-            @click="onClickReviewAll"
-            severity="secondary" 
-            class="">
-            <template #icon>
-                <i class="fa-solid fa-bolt"></i>
-            </template>
-        </Button>
+        <template v-if="isAllReviewed()">
+            <Button label="Review All" 
+                @click="onClickReviewAll"
+                severity="secondary">
+                <template #icon>
+                    <i class="fa-solid fa-bolt"></i>
+                </template>
+            </Button>
+        </template>
+        <template v-else>
+            Reviewing ... 
+            <i class="fa-solid fa-spinner fa-spin"></i>
+        </template>
 
     </div>
     <div class="model-list">
@@ -94,11 +107,15 @@ async function onClickReviewAll() {
 
                 <div>
                     <template v-if="isReviewing(model.id)">
-                        Reviewing ...
+                        <span class="mr-2">
+                            Reviewing
+                            <i class="fa-solid fa-spinner fa-spin"></i>
+                        </span>
                     </template>
                     <template v-else>
                     <Button label="Review" 
                         @click="onClickReview(model.id)"
+                        class="mr-2"
                         severity="secondary">
                         <template #icon>
                             <i class="fa-solid fa-bolt"></i>
diff --git a/web/src/components/ItemDetail.vue b/web/src/components/ItemDetail.vue
index 6a37ba9..61840e7 100644
--- a/web/src/components/ItemDetail.vue
+++ b/web/src/components/ItemDetail.vue
@@ -1,10 +1,15 @@
 <script setup>
+import { ref } from "vue";
 import { useDataStore } from "../DataStore";
 import { pubmed } from "../utils/pubmed";
 import { translator } from "../utils/translator";
 
 const store = useDataStore();
 
+const status = ref({
+    is_translating: false,
+});
+
 function highlightText(text) {
     if (store.flag.enable_highlight) {
         return store.highlight(
@@ -69,11 +74,19 @@ async function onClickTranslate() {
     // set the flag
     store.flag.is_translating = true;
 
+    // update the storage
+    store.translation[store.working_item.pmid] = {}
+
     let d = await translator.translate(
         store.working_item.abstract
     );
 
-    console.log('* translation:', d);
+    console.log('* translation:', d.translatedText);
+
+    store.translation[store.working_item.pmid]['abstract'] = d.translatedText;
+
+    // set the flag
+    store.flag.is_translating = false;
 }
 </script>
 
@@ -88,13 +101,19 @@ async function onClickTranslate() {
             @click="onClickFetch">
         </Button>
         &nbsp;
-        <Button label="Translate" 
-            @click="onClickTranslate"
-            severity="secondary">
-            <template #icon>
-                <i class="fa-solid fa-language"></i>
-            </template>
-        </Button>
+        <template v-if="store.flag.is_translating">
+            Translating... Please wait. 
+            <i class="fa-solid fa-spinner fa-spin"></i>
+        </template>
+        <template v-else>
+            <Button label="Translate" 
+                @click="onClickTranslate"
+                severity="secondary">
+                <template #icon>
+                    <i class="fa-solid fa-language"></i>
+                </template>
+            </Button>
+        </template>
 
     </div>
 
@@ -132,12 +151,15 @@ async function onClickTranslate() {
         </fieldset>
         <fieldset class="border border-solid border-gray-400 p-2 m-2">
             <legend>Abstract</legend>
-                <div v-if="store.has_working_item_abstract"
-                    v-html="highlightText(store.working_item?.abstract)">
-                </div>
-                <div v-else>
-                    No abstract available.
-                </div>
+            <div v-if="store.has_working_item_abstract"
+                v-html="highlightText(store.working_item?.abstract)">
+            </div>
+            <div v-else>
+                No abstract available.
+            </div>
+            <template v-if="store.hasWorkingItemTranslation('abstract')">
+                <div v-html="store.getWorkingItemTranslation('abstract')" class="translation-text"></div>
+            </template>
         </fieldset>
     </div>
 </div>
@@ -175,4 +197,11 @@ async function onClickTranslate() {
 .year {
     color: blue;
 }
+.translation-text {
+    border-top: 1px solid #ccc;
+    padding: 1rem 0 0 0;
+    margin: 1rem 0 0 0;
+    font-size: 1rem;
+    color: #222222;
+}
 </style>
\ No newline at end of file