fix: random

src/components/pages/classroomObservation/components/chatArea.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="chatArea" v-loading="loading" :element-loading-text="loadingText">
+  <div class="chatArea" v-loading="loading">
     <div class="m-operation">
       <div>实时转录</div>
       <div>{{ createTime }}</div>
@@ -60,7 +60,7 @@
         @change="changeEditor"
       >
         <el-button
-          style="position: absolute; bottom: 70px; right: 20px; z-index: 10002"
+          style="position: absolute; bottom: 20px; right: 100px; z-index: 10002"
           type="primary"
           @click.stop="generateActionTypesMap"
           >自动编码</el-button
@@ -378,6 +378,17 @@
       </div>
       <!-- <el-progress style="width:80%" :text-inside="true" :stroke-width="24" :percentage="progressData.value"></el-progress> -->
     </div>
+    <div class="chatAreaLoading" v-else-if="actionTypeLoading">
+      <div class="cal_box" :style="{ height: '300px' }">
+        <div
+          :style="{ width: '100%', height: '100px' }"
+          v-loading="true"
+          :element-loading-text="actionTypeLoadingText"
+        ></div>
+        <el-button @click="stopGenerateActionTypes">停止</el-button>
+      </div>
+      <!-- <el-progress style="width:80%" :text-inside="true" :stroke-width="24" :percentage="progressData.value"></el-progress> -->
+    </div>
   </div>
 </template>
 
@@ -408,6 +419,23 @@ import _ from "lodash";
 // 	console.log('当前录音的总数据([DataView, DataView...])', params.data);
 // 	console.log('--------------END---------------')
 // };
+const OPTIONS_GROUP = {
+  default: [
+    "老师讲课",
+    "老师提问或点名",
+    "老师板书或操作",
+    "老师评价或反馈",
+    "老师其他",
+    "学生发言",
+    "学生小组活动",
+    "学生自主学习",
+    "学生汇报分享",
+    "学生其他",
+  ],
+};
+const ATTENTION_GROUP = {
+  default: "先根据说话人角色判断，再在对应角色的选项中选择选项",
+};
 
 // 自定义指令，用于处理点击外部区域的事件
 const clickOutside = {
@@ -503,7 +531,6 @@ export default {
       languageRadio: 2, //设置选择语言
       languageShow: false, //控制显示
       loading: false,
-      loadingText: undefined,
       chatLoading: false,
       transcriptionLoading: false,
       uploadFileLoading: false,
@@ -576,6 +603,8 @@ export default {
       },
       chatList: [],
       actionTypesMap: {},
+      actionTypeLoading: false,
+      actionTypeLoadingText: "",
     };
   },
   computed: {
@@ -598,16 +627,14 @@ export default {
     },
     tid: {
       async handler(tid) {
-        console.log("tid handle: ", tid);
         if (!tid) {
           this.actionTypesMap = undefined;
           return;
         }
         this.actionTypesMap = await this.loadActionTypesMap();
-        console.log("result: ", this.actionTypesMap);
         if (!this.actionTypesMap) {
           const res = await this.insertActionTypes();
-          console.log("res: ", res);
+          this.actionTypesMap = await this.loadActionTypesMap();
         }
       },
       immediate: true,
@@ -2136,7 +2163,7 @@ ${JSON.stringify(_list)}
 				</table>
 				`;
       }
-      console.log(_content);
+      // console.log(_content);
       this.editorBarData = { ..._editorBarData, content: _content };
     },
     // 获取对话记录
@@ -2271,18 +2298,8 @@ ${JSON.stringify(_list)}
       const key = "default";
       const appToken = "app-zOMxBqyEKoJSvW10e5SS0kgj";
       // the default options
-      const options = [
-        "老师讲课",
-        "老师提问或点名",
-        "老师板书或操作",
-        "老师评价或反馈",
-        "老师其他",
-        "学生发言",
-        "学生小组活动",
-        "学生自主学习",
-        "学生汇报分享",
-        "学生其他",
-      ];
+      const options = OPTIONS_GROUP[key];
+      const attention = ATTENTION_GROUP[key];
       const config = {
         headers: {
           Authorization: `Bearer ${appToken}`,
@@ -2297,33 +2314,44 @@ ${JSON.stringify(_list)}
         this.$notify.info("没有可编码的内容");
         return;
       }
-      tableRows.forEach((i) => {
-        while (i.cells.length >= 7) {
-          i.removeChild(i.lastElementChild);
-        }
+      this.actionTypeLoading = true;
+      this.generateActionTypesCtrl = new AbortController();
+      const signal = this.generateActionTypesCtrl.signal;
+      await new Promise((resolve) => {
+        this.$nextTick(resolve);
       });
-      this.loading = true;
-      this.loadingText = `0/${tableRows.length}`;
       try {
-        const chunkSize = 200;
+        tableRows.forEach((i) => {
+          while (i.cells.length >= 7) {
+            i.removeChild(i.lastElementChild);
+          }
+        });
+        this.actionTypeLoadingText = `( 0/${tableRows.length} )`;
+        // large chunk size will cause token limit and slower
+        const chunkSize = 30;
         this.actionTypesMap.jsonData[key] = Array.from({ length: tableRows.length });
         // action type fetch by every { chunkSize } rows
         for (const [index, rows] of _.chunk(tableRows, chunkSize).entries()) {
           const res = await fetch("https://dify.cocorobo.cn/v1/workflows/run", {
+            signal,
             method: "POST",
             body: JSON.stringify({
               inputs: {
                 // PERF better to just include `role` and `content` to minimize token cost
-                rows: rows
-                  .map((r) => `${r.cells[3].textContent}\t${r.cells[5].textContent}`)
-                  .join("\n"),
+                rows: JSON.stringify(
+                  rows.map((r) => [r.cells[3].textContent, r.cells[5].textContent])
+                ),
                 options: options.join(","),
+                attention,
               },
               response_mode: "blocking",
               user: this.userId,
             }),
             ...config,
           }).then((res) => res.json());
+          if (signal.aborted) {
+            return;
+          }
           const error = _.get(res, ["data", "error"], null);
           if (error) {
             this.$notify.error(error);
@@ -2339,16 +2367,27 @@ ${JSON.stringify(_list)}
             transcriptionData: this.transcriptionData.content,
             editorBarData: this.editorBarData,
           });
-          this.loadingText = `${index * chunkSize + rows.length}/${tableRows.length}`;
+          this.actionTypeLoadingText = `( ${index * chunkSize + rows.length}/${
+            tableRows.length
+          } )`;
         }
       } catch (err) {
+        if (err.name === "AbortError") {
+          return;
+        }
         console.error(err);
         this.$notify.error(err);
       } finally {
-        this.loading = false;
-        this.loadingText = undefined;
+        this.actionTypeLoading = false;
+        this.actionTypeLoadingText = "";
+        this.generateActionTypesCtrl = undefined;
       }
     },
+    stopGenerateActionTypes() {
+      console.log("stopGenerateActionTypes");
+      this.generateActionTypesCtrl && this.generateActionTypesCtrl.abort();
+      this.generateActionTypesCtrl = undefined;
+    },
   },
   mounted() {},
 };