GPT工具：調整顯示結果UI ，取消等待、查詢結果功能 與 字串

HiTeachCC/ClientApp/src/components/GptBox.vue

@@ -53,15 +53,19 @@
 
 
         <div class="gptBox-right" id="GptToolBox">
-          <div v-show="$parent.isWaitingGptFeedbackDone" style="text-align:center">
+          <div v-show="$parent.isWaitingGptFeedbackDone&&!cancelWaitingGPTRes" style="text-align:center" >
               <img src='/loading2.gif' />
+              <br>
+              <div v-show="showCancelBtn" class="cancel-btn" @click="cancelTriggerOpenAI()">{{ $t("gptBox['取消']") }}</div>
           </div>
-          <div v-show="!$parent.isWaitingGptFeedbackDone" style="text-align: left;">
-            {{ currentGPTAns }}
+          <div v-show="!$parent.isWaitingGptFeedbackDone" style="text-align: left; ">
+            <pre v-html="currentGPTAns" style="white-space: pre-wrap"></pre>
           </div>  
         </div>
         <div class="gptbtn-group">
-          <div class="copy-btn" @click="copyGPTAnsToClipboard()"><svg-icon icon-class="copy" /></div>
+          <div v-show="cancelWaitingGPTRes" class="result-btn" @click="queryFinalResult()">{{ $t('gptBox["queryResult"]') }}</div>
+          <div class="copy-btn-placeholder" v-show="$parent.isWaitingGptFeedbackDone" >&nbsp;&nbsp;&nbsp;</div>
+          <div class="copy-btn" v-show="!$parent.isWaitingGptFeedbackDone"  @click="copyGPTAnsToClipboard()"><svg-icon icon-class="copy" /></div>
         </div>
       </div>
       <!-- <span @click="continueGpt()">繼續生成</span>&nbsp; -->
@@ -148,6 +152,10 @@ export default {
       currentUseSetId: "",
       currentSetName:'',
       currentGPTAns:'',
+      cancelWaitingGPTRes:false,
+      showCancelBtn:false,
+      showCancelBtnTimeOut:"",
+      finalTaskId:"",
     };
   },
   computed: {
@@ -194,28 +202,59 @@ export default {
     closeGptBox() {
       this.$parent.showGptBox = false;
     },
+    clearShowCancelBtnTimeOut(){
+      clearTimeout(this.showCancelBtnTimeOut)
+      this.showCancelBtnTimeOut=""
+    },
+    cancelTriggerOpenAI(){
+      this.cancelWaitingGPTRes = true
+      this.currentGPTAns = this.$t('gptBox["emptyReply"]');
+      this.$parent.isWaitingGptFeedbackDone = false;
+      this.clearShowCancelBtnTimeOut()
+    },
+    async queryFinalResult(){
+      const idToken = sessionStorage.getItem("idToken");
+      this.$parent.isWaitingGptFeedbackDone = true;
+      if(this.finalTaskId!=""){
+        const result = await this.$api.coreApi.getAITaskResult(idToken, this.finalTaskId);
+        this.$parent.isWaitingGptFeedbackDone = false;
+        if (result.hasOwnProperty('completionText')){
+          this.currentGPTAns = result.completionText;
+        }
+      }
+    },
     async triggerOpenAI(question){
       let that=this
       that.currentGPTAns = ''
+      that.showCancelBtn = false
+      that.cancelWaitingGPTRes = false
+      that.finalTaskId = ""
       try {
       const idToken = sessionStorage.getItem("idToken");
       const task = await this.$api.coreApi.createAITask(idToken, question);
       const taskId = task?.taskId;
 
+      that.showCancelBtnTimeOut=setTimeout(() => {
+        that.showCancelBtn = true
+      }, 10000);
+
       let tryCount = 0;  // 初始化重試次數
       if(taskId) {
+        that.finalTaskId = taskId
         const checkCompletionText = async () => {
           const result = await this.$api.coreApi.getAITaskResult(idToken, taskId);
 
-          if (result.hasOwnProperty('completionText')) {
+          if (result.hasOwnProperty('completionText')&&!that.cancelWaitingGPTRes) {
             that.currentGPTAns = result.completionText;
             that.$parent.isWaitingGptFeedbackDone = false;
-          } else if (tryCount < 3) {
+            that.clearShowCancelBtnTimeOut()
+          } else if (tryCount < 9&&!that.cancelWaitingGPTRes) {
             tryCount++;
             setTimeout(checkCompletionText, 3000);  // 等待 3 秒後再次檢查
           } else {
             that.currentGPTAns = this.$t('gptBox["emptyReply"]');
             that.$parent.isWaitingGptFeedbackDone = false;
+            that.clearShowCancelBtnTimeOut()
           }
         };
 
@@ -238,13 +277,7 @@ export default {
       // Create an auxiliary hidden input
       var aux = document.createElement("textarea");
 
-      // Get the text from the element passed into the input
-      let alltext = '';
-      document.querySelectorAll("#gpt-answer").forEach((item) => {
-        console.log(item)
-        alltext = alltext + item.innerText + '\t\n';
-      });
-      aux.value = alltext;
+      aux.value = this.currentGPTAns;
 
       // Append the aux input to the body
       document.body.appendChild(aux);
@@ -568,12 +601,43 @@ export default {
         max-height: 54vh;
         overflow: auto;
         min-height: 54vh;
+        position: relative;
+        .cancel-btn{
+          color: black;
+          background-color: #d8d8d8;
+          border-radius: 5px;
+          display: inline-block;
+          position: relative;
+          padding:5px 10px;
+          top: -40px;
+          cursor: pointer;
+          &:hover{
+            background-color: darken(#d8d8d8, 8%);
+          }
+
+        }
       }
 
       .gptbtn-group {
         position: absolute;
         right: 40px;
         top: 15px;
+        .result-btn{
+          display: inline-block;
+          cursor: pointer;
+          font-size: 14px;
+          background-color: @btn-color;
+          color: white;
+          padding:2px 8px;
+          border-radius: 4px;
+          margin-right: 10px;
+          position: relative;
+          top:-1px;
+          &:hover{
+            background-color: darken(@btn-color, 8%);
+          }
+        }
+        
 
         .copy-btn {
           position: relative;
@@ -586,6 +650,14 @@ export default {
             color: blue;
           }
         }
+        .copy-btn-placeholder {
+          position: relative;
+          display: inline-block;
+          cursor: default;
+          font-size: 20px;
+          padding: 4px 0px;
+
+        }
 
         .continue-btn,
         .stop-btn {

HiTeachCC/ClientApp/src/locale/lang/en-US/index.js

@@ -425,6 +425,7 @@ export default {
     新增分類:"Add new category ",
     已達最大上限10個分類:"Maximum limit of 10 categories has been reached",
     暫無數據:"No prompt",
-    emptyReply:"The GPT response content is empty, please try again!"
+    emptyReply:"GPT is currently still generating, no response data is available yet. Please click 'Check Generation Result' in the top right corner, or try again!",
+    queryResult:"Check Generation Result",
   }
 }

HiTeachCC/ClientApp/src/locale/lang/zh-CN/index.js

@@ -398,6 +398,7 @@ export default {
     新增分類:"新增分类",
     已達最大上限10個分類:"已达最大上限10个分类",
     暫無數據:"暂无咒语",
-    emptyReply:"GPT回应内容为空，请再试一次!"
+    emptyReply:"GPT目前仍在生成中，暂无回应数据，请按右上角「查询生成结果」，或再试一次！",
+    queryResult:"查询生成结果",
   }
 }

HiTeachCC/ClientApp/src/locale/lang/zh-TW/index.js

@@ -426,6 +426,7 @@ export default {
     新增分類:"新增分類",
     已達最大上限10個分類:"已達最大上限10個分類",
     暫無數據:"暫無指令資料",
-    emptyReply:"GPT回應內容為空，請再試一次!"
+    emptyReply:"GPT目前仍在生成中，暫無回應數據，請按右上角「查詢生成結果」，或再試一次！",
+    queryResult:"查詢生成結果",
   }
 }

HiTeachCC/ClientApp/src/router.js

@@ -22,7 +22,6 @@ const MQTTdemo = () => import('./views/mqttdemo')
 const BasePick = () => import('./components/Chart/OptionView')
 // const MobileLogin = () => import('./views/MobileLogin.vue')
 const testconnect = () => import('./views/testconnect')
-const ChatGptApp=()=> import('./views/ChatGptApp')
 // const testmqtt = () => import('./views/testMqtt')
 export default new Router({
     mode: 'history',
@@ -74,12 +73,6 @@ export default new Router({
             component: testconnect,
             meta: { requiresAuth: false }
         },
-        {
-            path: '/ChatGptApp',
-            name: 'ChatGptApp',
-            component: ChatGptApp,
-            meta: { requiresAuth: false }
-        },
         // {
         //     path: '/testmqtt',
         //     name: 'testmqtt',

HiTeachCC/ClientApp/src/views/ChatGptApp.vue

@@ -1,31 +0,0 @@
-<template>
-  <div id="myChatGptApp">
-    ChatGptApp
-    
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'ChatGptApp',
-  data() {
-    return {}
-  },
-  mounted() {
-    // this.generateAnswers()
-  },
-  methods: {
-    async generateAnswers() {
-      try {
-        const token = await fetch('https://chat.openai.com/api/auth/session')
-        console.log(token,'test')
-        return token
-      } catch (err) {
-        console.log(err)
-      }
-    }
-  }
-}
-</script>
-
-<style></style>