Merge branch 'front-dev' of http://git.choozmo.com:3000/ai-anchor/video-maker

frontend/src/views/main/AiArticle.vue

@@ -8,7 +8,8 @@ let loading = ref(false);
 
 async function getArticle() {
   loading.value = true;
-  let url = `https://cmm.ai:8084/get_article3?kw=${articleKw.value}`;
+  // let url = `https://cmm.ai:8084/get_article3?kw=${articleKw.value}`;
+  let url = `https://cmm.ai:8081/local_qa/?kw=${articleKw.value}`;
 
   try {
     let response = await axios.get(url);

frontend/src/views/main/KnowledgeGraph.vue

@@ -1,7 +1,48 @@
 <script setup>
-import { ref, reactive, computed } from "vue";
+import { ref, reactive, computed, onMounted, onBeforeUnmount } from "vue";
 import axios from "axios";
 
+const message = ref("");
+
+let ws;
+
+onMounted(() => {
+  // 建立 WebSocket 連接
+  ws = new WebSocket("wss://cmm.ai:8075/ws");
+  // ws = new WebSocket("wss://cmm.ai:8082/ws"); // 測試用
+
+  // 當連接開啟時
+  ws.onopen = () => {
+    console.log("WebSocket open");
+  };
+
+  // 當接收到伺服器訊息時
+  ws.onmessage = (event) => {
+    console.log("WebSocket: ", event.data);
+    if (event.data === "finish") {
+      getKwStateList();
+    }
+    message.value = event.data;
+  };
+
+  // 處理錯誤
+  ws.onerror = (error) => {
+    console.error("WebSocket error: ", error);
+  };
+
+  // 當連接關閉時
+  ws.onclose = () => {
+    console.log("WebSocket close");
+  };
+});
+
+// 當組件卸載時，關閉 WebSocket 連接
+onBeforeUnmount(() => {
+  if (ws) {
+    ws.close();
+  }
+});
+
 let kwVal = ref(""); // 關鍵字
 let stageVal = ref(null); // 指定層級
 let maxStage = ref(null); // 最大層級
@@ -23,7 +64,7 @@ async function getStage() {
   }
 
   searchLoading.value = true;
-  let url = `https://cmm.ai:8083/get_stage3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}`;
+  let url = `https://cmm.ai:8075/get_stage3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}`;
 
   try {
     let response = await axios.get(url);
@@ -35,18 +76,40 @@ async function getStage() {
     } else {
       maxStage.value = response.data.message;
       haveStage.value = true;
+      getNodeNum();
+
+      // // 層級小於四層才顯示新增按鈕
+      // if (response.data.message < 4) {
+      //   showStageBtn.value = true;
+      // } else {
+      //   showStageBtn.value = false;
+      // }
+    }
 
-      // 層級小於四層才顯示新增按鈕
-      if (response.data.message < 4) {
+    console.log("response.data.message", response.data.message);
+
+    searchLoading.value = false;
+  } catch (error) {
+    console.error("error", error);
+  }
+}
+
+// 取得 node 層數
+async function getNodeNum() {
+  let url = `https://cmm.ai:8075/get_node_num3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&stage=${maxStage.value}`;
+
+  try {
+    let response = await axios.get(url);
+    console.log("取得 node 層數", response);
+
+    // 數量小於 120 顯示新增層級
+    if (response.status === 200) {
+      if (response.data.message < 120) {
         showStageBtn.value = true;
       } else {
         showStageBtn.value = false;
       }
     }
-
-    console.log("response.data.message", response.data.message);
-
-    searchLoading.value = false;
   } catch (error) {
     console.error("error", error);
   }
@@ -68,9 +131,9 @@ async function insertKw(type = "") {
 
   // 新增層級
   if (type === "stage") {
-    url = `https://cmm.ai:8083/insert_kw3_2?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&email=${email}`;
+    url = `https://cmm.ai:8075/insert_kw3_2?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&email=${email}`;
   } else {
-    url = `https://cmm.ai:8083/insert_kw3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&email=${email}`;
+    url = `https://cmm.ai:8075/insert_kw3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&email=${email}`;
   }
 
   try {
@@ -102,7 +165,7 @@ let graphContent = ref(""); // html code
 async function getHtml() {
   console.log("getHtml");
 
-  let url = `https://cmm.ai:8083/get_html3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&stage=${stageVal.value}`;
+  let url = `https://cmm.ai:8075/get_html3?kw=${kwVal.value}&region=${regionsVal.value}&language=${languageVal.value}&stage=${stageVal.value}`;
 
   try {
     let response = await axios.get(url);
@@ -153,7 +216,7 @@ let stateList = reactive([]);
 async function getKwStateList() {
   let email = localStorage.getItem("email");
 
-  let url = `https://cmm.ai:8083/get_user_kw_state3?email=${email}`;
+  let url = `https://cmm.ai:8075/get_user_kw_state3?email=${email}`;
 
   try {
     let response = await axios.get(url);
@@ -161,6 +224,11 @@ async function getKwStateList() {
 
     let list = response.data.message;
 
+    if (list.status_code === 204) {
+      alert("新增失敗，請重新輸入");
+      return;
+    }
+
     if (list.length) {
       stateList.length = 0;
       list.map((item) => {
@@ -168,6 +236,18 @@ async function getKwStateList() {
       });
       console.log("stateList", stateList);
     }
+
+    // 判斷所有關鍵字狀態
+    // const allCompleted = stateList.every((item) => item.state === "已完成");
+    // console.log("allCompleted", allCompleted);
+
+    // if (allCompleted) {
+    //   console.log("所有狀態都是 '已完成'，停止 setInterval");
+    //   clearInterval(intervalId); // 停止定時器
+    // } else {
+    //   console.log("還有未完成的狀態");
+    //   startInterval();
+    // }
   } catch (error) {
     console.error("error", error);
   }
@@ -175,6 +255,16 @@ async function getKwStateList() {
 
 getKwStateList();
 
+// let intervalId;
+
+// // 每分鐘更新狀態
+// function startInterval() {
+//   intervalId = setInterval(getKwStateList, 60000);
+//   console.log("setInterval 已啟動");
+// }
+
+// startInterval();
+
 const headers = [
   {
     title: "關鍵字",
@@ -188,6 +278,16 @@ const headers = [
     key: "state",
     align: "left",
   },
+  {
+    title: "等待時間 (分)",
+    sortable: true,
+    key: "waiting_time",
+  },
+  {
+    title: "訊息",
+    sortable: true,
+    key: "message",
+  },
 ];
 
 // 計算下拉選單層級數

frontend/src/views/main/Upload.vue

@@ -30,11 +30,23 @@ let dialog = reactive({
 
 const anchorList = reactive([
   {
-    anchor_id: "hannah1",
+    anchor_id: "odelia-1",
+    name: "odelia-1",
+  },
+  {
+    anchor_id: "odelia-2",
+    name: "odelia-2",
+  },
+  {
+    anchor_id: "odelia-3",
+    name: "odelia-3",
+  },
+  {
+    anchor_id: "hannah-1",
     name: "Hannah-1",
   },
   {
-    anchor_id: "hannah2",
+    anchor_id: "hannah-2",
     name: "Hannah-2",
   },
   {
@@ -69,10 +81,10 @@ const anchorList = reactive([
     anchor_id: "elara",
     name: "Elara",
   },
-  {
-    anchor_id: "sporty",
-    name: "Sporty",
-  },
+  // {
+  //   anchor_id: "sporty",
+  //   name: "Sporty",
+  // },
   {
     anchor_id: "angela",
     name: "Angela",
@@ -97,18 +109,18 @@ const anchorList = reactive([
   //   anchor_id: "角色2",
   //   name: "友量主播-02",
   // },
-  {
-    anchor_id: "itri-1",
-    name: "ITRI-1",
-  },
-  {
-    anchor_id: "itri-2",
-    name: "ITRI-2",
-  },
-  {
-    anchor_id: "itri-3",
-    name: "ITRI-3",
-  },
+  // {
+  //   anchor_id: "itri-1",
+  //   name: "ITRI-1",
+  // },
+  // {
+  //   anchor_id: "itri-2",
+  //   name: "ITRI-2",
+  // },
+  // {
+  //   anchor_id: "itri-3",
+  //   name: "ITRI-3",
+  // },
   {
     anchor_id: "syscom",
     name: "James Liu",
@@ -121,65 +133,81 @@ const anchorList = reactive([
 
 const templateList = reactive([
   {
-    template_id: "style1",
-    img: "鏡面-01",
+    template_id: "style11",
+    img: "鏡面-11",
   },
   {
-    template_id: "style2",
-    img: "鏡面-02",
+    template_id: "style10",
+    img: "鏡面-10",
   },
   {
-    template_id: "style3",
-    img: "鏡面-03",
+    template_id: "style9",
+    img: "鏡面-09",
   },
   {
-    template_id: "style4",
-    img: "鏡面-04",
+    template_id: "style8",
+    img: "鏡面-08",
   },
   {
     template_id: "style5",
     img: "鏡面-05",
   },
   {
-    template_id: "ITRI_1",
-    img: "ITRI背景-1",
-  },
-  {
-    template_id: "ITRI_2",
-    img: "ITRI背景-2",
-  },
-  {
-    template_id: "ITRI_3",
-    img: "ITRI背景-3",
-  },
-  {
-    template_id: "ITRI_4",
-    img: "ITRI背景-4",
-  },
-  {
-    template_id: "ITRI_5",
-    img: "ITRI背景-5",
-  },
-  {
-    template_id: "ITRI_6",
-    img: "ITRI背景-6",
-  },
-  {
-    template_id: "ITRI_7",
-    img: "ITRI背景-7",
+    template_id: "style4",
+    img: "鏡面-04",
   },
   {
-    template_id: "ITRI_8",
-    img: "ITRI背景-8",
+    template_id: "style3",
+    img: "鏡面-03",
   },
   {
-    template_id: "ITRI_9",
-    img: "ITRI背景-9",
+    template_id: "style2",
+    img: "鏡面-02",
   },
   {
-    template_id: "ITRI_10",
-    img: "ITRI背景-10",
+    template_id: "style1",
+    img: "鏡面-01",
   },
+  // {
+  //   template_id: "ITRI_1",
+  //   img: "ITRI背景-1",
+  // },
+  // {
+  //   template_id: "ITRI_2",
+  //   img: "ITRI背景-2",
+  // },
+  // {
+  //   template_id: "ITRI_3",
+  //   img: "ITRI背景-3",
+  // },
+  // {
+  //   template_id: "ITRI_4",
+  //   img: "ITRI背景-4",
+  // },
+  // {
+  //   template_id: "ITRI_5",
+  //   img: "ITRI背景-5",
+  // },
+  // {
+  //   template_id: "ITRI_6",
+  //   img: "ITRI背景-6",
+  // },
+  // {
+  //   template_id: "ITRI_7",
+  //   img: "ITRI背景-7",
+  // },
+  // {
+  //   template_id: "ITRI_8",
+  //   img: "ITRI背景-8",
+  // },
+  // {
+  //   template_id: "ITRI_9",
+  //   img: "ITRI背景-9",
+  // },
+  // {
+  //   template_id: "ITRI_10",
+  //   img: "ITRI背景-10",
+  // },
   {
     template_id: "syscom",
     img: "syscom",
@@ -433,12 +461,14 @@ async function Submit() {
               >包含內容：圖片／影片（.jpg／.mp4）</small
             >
 
-            <p class="mt-15 text-h5">
-              影片內容要放哪些好？
-            </p>
+            <p class="mt-15 text-h5">影片內容要放哪些好？</p>
 
-            <p  class="mt-3 mb-15 text-h5">請參考
-              <router-link to="/main/knowledge-graph" class="font-weight-bold">熱搜關聯分析</router-link></p>
+            <p class="mt-3 mb-15 text-h5">
+              請參考
+              <router-link to="/main/knowledge-graph" class="font-weight-bold"
+                >熱搜關聯分析</router-link
+              >
+            </p>
 
             <p class="mb-5 pt-5 text-h6 excerpt">
               EXCEL 檔整理成這個格式－大標、字幕、素材、發音