add ai-article

frontend/src/router/index.ts

@@ -113,6 +113,11 @@ const router = createRouter({
               name: 'KnowledgeGraph',
               component: () => import('@/views/main/KnowledgeGraph.vue'),
             },
+            {
+              path: 'ai-article',
+              name: 'AiArticle',
+              component: () => import('@/views/main/AiArticle.vue'),
+            },
             {
               path: 'profile',
               name: 'profile',

frontend/src/views/main/AiArticle.vue

@@ -0,0 +1,100 @@
+<script setup>
+import { ref } from "vue";
+import axios from "axios";
+
+let content = ref("");
+let articleKw = ref("");
+let loading = ref(false);
+
+async function getArticle() {
+  loading.value = true;
+  let url = `https://cmm.ai:8084/get_article3?kw=${articleKw.value}`;
+
+  try {
+    let response = await axios.get(url);
+    console.log("response", response);
+    if (response.status === 200) {
+      loading.value = false;
+      content.value = response.data.message;
+    }
+  } catch (error) {
+    console.log("error", error);
+  }
+}
+
+function copy() {
+  if (content.value) {
+    navigator.clipboard.writeText(content.value).then(() => {
+      alert(`文字已複製: ${content.value}`);
+    });
+  }
+}
+</script>
+
+<template>
+  <v-container fluid>
+    <v-row>
+      <v-col cols="6" class="d-flex flex-column">
+        <v-card class="mt-10 ma-3 pa-sm-5">
+          <v-card-title primary-title>
+            <h3 class="card-title mb-3">AI 文章生成</h3>
+          </v-card-title>
+          <v-card-text class="mx-auto">
+            <v-textarea
+              v-model="articleKw"
+              class="my-3"
+              label="關鍵字"
+              placeholder="請輸入關鍵字"
+            ></v-textarea>
+
+            <button @click="getArticle()" class="send-data">
+              <p v-if="!loading">產生文章</p>
+              <p v-else>文章產生中，請稍候…</p>
+            </button>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <v-col cols="6" class="d-flex flex-column">
+        <v-card class="mt-10 ma-3 pa-sm-5">
+          <v-card-text class="mx-auto">
+            <v-btn
+              @click="copy()"
+              class="mb-4"
+              variant="flat"
+              color="grey-lighten-4"
+            >
+              <v-icon icon="file_copy" size="x-small"></v-icon>
+              複製
+            </v-btn>
+
+            <v-textarea
+              v-model="content"
+              label="文章內容"
+              rows="20"
+            ></v-textarea>
+          </v-card-text>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<style>
+.send-data {
+  width: 100%;
+  padding: 8px 18px;
+  text-decoration: none;
+  color: #fff;
+  font-size: 1rem;
+  border: none;
+  border-radius: 3rem;
+  transition: all 0.3s;
+  letter-spacing: 1px;
+  background: linear-gradient(
+    -225deg,
+    rgb(234, 84, 19) 35%,
+    rgb(178, 69, 146) 100%
+  );
+}
+</style>

frontend/src/views/main/Main.vue

@@ -144,6 +144,9 @@ const routeGuardAdmin = async (
             <v-list-item to="/main/knowledge-graph" prepend-icon="account_tree">
               <v-list-item-title>熱搜關聯分析</v-list-item-title>
             </v-list-item>
+            <v-list-item to="/main/ai-article" prepend-icon="article">
+              <v-list-item-title>AI 文章生成</v-list-item-title>
+            </v-list-item>
           </v-list>
         </v-sheet>
         <!-- <v-divider></v-divider> -->