add knowledge graph & update user guide

frontend/.env

@@ -1,14 +1,14 @@
 # VITE_APP_DOMAIN_DEV=cloud.choozmo.com # 正式
-VITE_APP_DOMAIN_DEV=dev.cloud.choozmo.com # 測試
+# VITE_APP_DOMAIN_DEV=dev.cloud.choozmo.com # 測試
+VITE_APP_DOMAIN_DEV=192.168.192.17 # 本地端測試用
 # VITE_APP_DOMAIN_DEV=192.168.192.252 # 測試
 # VUE_APP_DOMAIN_DEV=local.dockertoolbox.tiangolo.com
 # VUE_APP_DOMAIN_DEV=localhost.tiangolo.com
 # VUE_APP_DOMAIN_DEV=dev.ai-anchor.com
 VITE_APP_DOMAIN_STAG=stag.ai-anchor.com
-# VITE_APP_DOMAIN_PROD=192.168.192.17
 VITE_APP_DOMAIN_PROD=cloud.choozmo.com
 VITE_APP_NAME=AI anchor
-# VITE_APP_ENV=dev # 本地
-VITE_APP_ENV=production # 正式
+VITE_APP_ENV=dev # 本地
+# VITE_APP_ENV=production # 正式
 # VUE_APP_ENV=staging
 # VUE_APP_ENV=production

frontend/src/router/index.ts

@@ -108,6 +108,11 @@ const router = createRouter({
               name: 'QRCodeGenerator',
               component: () => import('@/views/main/QRCodeGenerator.vue'),
             },
+            {
+              path: 'knowledge-graph',
+              name: 'KnowledgeGraph',
+              component: () => import('@/views/main/KnowledgeGraph.vue'),
+            },
             {
               path: 'profile',
               name: 'profile',

frontend/src/views/main/KnowledgeGraph.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { ref } from "vue";
+import axios from "axios";
+
+let kwVal = ref("");
+let stageVal = ref(null);
+
+// 將所有流程包進來
+async function processData() {
+  console.log("processData", kwVal.value, stageVal.value);
+
+  const url = `https://cmm.ai:8084/check_kw_in_data3?kw=${kwVal.value}&stage=${stageVal.value}`;
+
+  try {
+    let response = await axios.get(url);
+    const message = response.data.message;
+
+    console.log("response", response);
+
+    if (message === "已查詢到關鍵字, 立即為您產圖.") {
+      var confirmNextStep = confirm(
+        "已查詢到關鍵字，立即為您產圖。" +
+          "\n是否要執行下一步操作？（點確定後將另開分頁）"
+      );
+
+      if (confirmNextStep) {
+        getHtml();
+      } else {
+        alert("取消操作");
+      }
+    }
+  } catch (error) {
+    console.error("操作失敗", error);
+    alert("操作失敗，請重新操作。");
+  }
+}
+
+let graphContent = ref(""); // html code
+
+// 取得 html
+async function getHtml() {
+  console.log("getHtml");
+
+  let url = `https://cmm.ai:8084/get_html3?kw=${kwVal.value}&stage=${stageVal.value}`;
+
+  try {
+    let response = await axios.get(url);
+
+    graphContent.value = response.data.data;
+
+    // 生成 html 並另開分頁
+    const newWindow = window.open();
+    if (newWindow) {
+      newWindow.document.open();
+      newWindow.document.write(graphContent.value);
+      newWindow.document.close();
+    } else {
+      alert("無法打開新頁面，請允許瀏覽器的彈出窗口。");
+    }
+  } catch (error) {
+    console.error("操作失敗", error);
+    alert("操作失敗，請重新操作。");
+  }
+}
+
+// 取得最大層數
+async function getStage() {
+  let url = `https://cmm.ai:8084/get_stage3?kw=${kwVal.value}`;
+  try {
+    const response = await axios.get(url);
+    console.log("取得最大層數 response", response);
+  } catch (error) {
+    console.error("取得最大層數失敗", error);
+  }
+}
+
+// 插入資料
+function insertData(kw) {
+  let url = `https://cmm.ai:8084/insert_data3?kw=${kwVal.value}`;
+
+  axios.put(url).then(function (response) {
+    const message = response.data.message; // 假設 API 返回一個帶有消息的 JSON
+    alert(message);
+  });
+}
+</script>
+
+<template>
+  <v-container fluid class="knowledge-graph">
+    <v-card class="mt-10 ma-3 pa-sm-5">
+      <v-card-title primary-title>
+        <h3 class="card-title mb-3">GEN SEO</h3>
+      </v-card-title>
+      <v-card-text class="card-content">
+        <div class="d-flex align-center">
+          <v-text-field
+            v-model="kwVal"
+            label="關鍵字"
+            density="compact"
+            prepend-inner-icon="search"
+            variant="solo"
+            hide-details
+          ></v-text-field>
+
+          <v-select
+            v-model="stageVal"
+            label="層級"
+            density="compact"
+            :items="['1', '2', '3', '4', '5']"
+            variant="solo"
+            hide-details
+            class="mx-5"
+          ></v-select>
+
+          <button @click="processData()" class="search-btn">查詢</button>
+        </div>
+      </v-card-text>
+    </v-card>
+  </v-container>
+</template>
+
+<style lang="scss">
+.knowledge-graph {
+  .search-btn {
+    padding: 10px 30px;
+    border-radius: 100px;
+    color: #fff;
+    background-image: linear-gradient(
+      -225deg,
+      rgb(234, 84, 19) 35%,
+      rgb(178, 69, 146) 100%
+    );
+  }
+
+  .card-content {
+    max-width: 800px;
+  }
+
+  .v-text-field .v-field {
+    border-radius: 100px;
+  }
+}
+</style>

frontend/src/views/main/Main.vue

@@ -138,9 +138,12 @@ const routeGuardAdmin = async (
             <!-- <v-list-item to="/main/mobile-upload" prepend-icon="video_call">
               <v-list-item-title>影片測試</v-list-item-title>
             </v-list-item> -->
-            <v-list-item to="/main/qrcode-generator" prepend-icon="qr_code">
+            <v-list-item to="/main/qrcode-generator" prepend-icon="qr_code_2">
               <v-list-item-title>QRCode</v-list-item-title>
             </v-list-item>
+            <v-list-item to="/main/knowledge-graph" prepend-icon="account_tree">
+              <v-list-item-title>熱搜關聯分析</v-list-item-title>
+            </v-list-item>
           </v-list>
         </v-sheet>
         <!-- <v-divider></v-divider> -->

frontend/src/views/main/Upload.vue

@@ -275,7 +275,7 @@ async function Submit() {
           </v-text-field>
           <v-file-input
             v-model="zipFiles"
-            :rules="[(v) => v.length || 'select zip file.']"
+            :rules="[(v: string | any[]) => v.length || 'select zip file.']"
             accept=".zip"
             :label="$t('fileInput')"
             prepend-icon="folder_zip"
@@ -377,16 +377,49 @@ async function Submit() {
         <h3 class="text-center">使用教學</h3>
       </v-card-title>
       <v-card-text>
+        <!-- <v-container>
+          <v-row no-gutters class="step-list">
+            <v-col cols="12" sm="3">
+              <v-sheet class="ma-2 pa-2">
+                <h4>1. 取得快速製作模板</h4>
+                <p class="excerpt">請點擊下方按鈕取得模板範例</p>
+                <div class="mb-5">
+                  <a :href="'/example/影片範例.zip'" class="link-btn" download
+                    >點我下載</a
+                  >
+                </div>
+              </v-sheet>
+            </v-col>
+
+            <v-col cols="12" sm="3">
+              <v-sheet class="ma-2 pa-2"> </v-sheet>
+            </v-col>
+
+            <v-col cols="12" sm="3">
+              <v-sheet class="ma-2 pa-2"> </v-sheet>
+            </v-col>
+
+            <v-col cols="12" sm="3">
+              <v-sheet class="ma-2 pa-2"> </v-sheet>
+            </v-col>
+
+            <v-col cols="12" sm="3">
+              <v-sheet class="ma-2 pa-2"> </v-sheet>
+            </v-col>
+          </v-row>
+        </v-container> -->
+
         <ul class="mt-5 step-list">
           <li>
             <h4>1. 取得快速製作模板</h4>
             <p class="excerpt">請點擊下方按鈕取得模板範例</p>
             <div class="mb-5">
-              <a :href="'/example/影片範例.zip'" class="link-btn" download
+              <a :href="'/example/影片範例_0719.zip'" class="link-btn" download
                 >點我下載</a
               >
             </div>
           </li>
+
           <li>
             <h4>2. 準備影片內容</h4>
             <p class="excerpt text-center">
@@ -396,14 +429,69 @@ async function Submit() {
             <img src="@/assets/img/step/step-01.png" alt="" class="mb-4" />
             <p class="excerpt">素材資料夾裡面放照片或影片</p>
             <img src="@/assets/img/step/step-02.png" alt="" />
-            <small class="d-block ms-4"
+            <small class="d-block ms-4 mb-6"
               >包含內容：圖片／影片（.jpg／.mp4）</small
             >
-            <p class="mt-5 excerpt">
+
+            <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="mb-5 pt-5 text-h6 excerpt">
               EXCEL 檔整理成這個格式－大標、字幕、素材、發音
             </p>
             <img src="@/assets/img/step/step-03.png" alt="" />
-            <ul class="point-list">
+
+            <div class="point-content">
+              <div class="base">
+                <h5>基礎應用：</h5>
+
+                <ul>
+                  <li>
+                    1. 字幕之間的斷句請使用符號【\】進行換行 （建議每 10
+                    個字就要 使用往左邊倒的斜線\換行）
+                  </li>
+                  <li>2. 大標字數勿超過中文 15 字、英文 30 字</li>
+                  <li>3. 發音請留空白</li>
+                </ul>
+              </div>
+
+              <div class="advanced">
+                <h5>進階應用：發音</h5>
+                <p>發音欄為修正聲音用。 尤其中文一字多音，特別會需要修正發音</p>
+                <p class="my-5">
+                  寫法如下：<br />
+                  <strong>{"一":"1","二":"2"}</strong>
+                </p>
+
+                <p class="mb-5">
+                  解說：<br />
+                  <strong
+                    >{"字幕寫法"對應"正確發音","字幕寫法"對應"正確發音"}</strong
+                  >
+                  <br />
+                  使用破音字方法撰寫
+                </p>
+
+                <p>範例圖：</p>
+
+                <img class="my-5" src="@/assets/img/step/example.jpg" alt="" />
+
+                <p class="mb-5">
+                  「重」塑品牌形象 & 成「為」品牌經營的特點<br />
+                  「重」本應發音"從"但系統唸成"眾" &
+                  「為」本應發音"維"但系統唸成"味"
+                  <br />
+                  就要寫成{"重":"從","為":"位"}
+                </p>
+
+                <strong>注意**符號一律使用英文小寫</strong>
+              </div>
+            </div>
+            <!-- <ul class="point-list">
               <li>
                 1. 字幕之間的斷句請使用符號【\】進行換行
                 <br />
@@ -411,7 +499,7 @@ async function Submit() {
               </li>
               <li>2. 大標字數勿超過中文 15 字、英文 30 字</li>
               <li>3. 音檔請留空白</li>
-            </ul>
+            </ul> -->
             <p class="mt-5 excerpt">以下為顯示效果：</p>
             <img src="@/assets/img/step/step-04.png" alt="" />
             <p class="mt-5 excerpt">
@@ -419,6 +507,7 @@ async function Submit() {
             </p>
             <img src="@/assets/img/step/step-05.png" alt="" class="my-5" />
           </li>
+
           <li>
             <h4>3. 上傳 ZIP 資料夾至 AI Spokesgirl 平台</h4>
             <p class="excerpt">影片檔名請寫上影片名稱</p>
@@ -520,7 +609,7 @@ async function Submit() {
   list-style: none;
   img {
     width: 100%;
-    max-width: 800px;
+    max-width: 1000px;
   }
   li {
     display: flex;
@@ -561,6 +650,47 @@ async function Submit() {
     margin-left: 40px;
   }
 
+  .point-content {
+    .base,
+    .advanced {
+      padding: 40px;
+      margin-top: 50px;
+      max-width: 1000px;
+      letter-spacing: 1px;
+      border-radius: 5px;
+    }
+
+    .base {
+      border: 4px solid #ea5413;
+    }
+
+    .advanced {
+      border: 4px dashed #ea5413;
+    }
+
+    ul {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+
+      li {
+        margin: 5px 0;
+      }
+    }
+
+    h5 {
+      margin-bottom: 20px;
+      text-align: center;
+      font-size: 1.25rem;
+    }
+
+    hr {
+      margin: 30px;
+      border-color: #f2f2f2;
+      opacity: 0.3;
+    }
+  }
+
   .excerpt::before {
     content: "";
     font-weight: bold;