From 4f4928e5367a9dc04dd692ec6095009a7473dea9 Mon Sep 17 00:00:00 2001
From: xerrors <xerrors@163.com>
Date: Tue, 3 Sep 2024 16:37:59 +0800
Subject: [PATCH] syncupdate packages

---
 src/config/__init__.py               |  11 +-
 web/src/assets/main.css              |   3 +-
 web/src/components/ChatComponent.vue |   3 +-
 web/src/components/RefsComponent.vue |   7 +-
 web/src/views/DataBaseInfoView.vue   | 300 +++++++++++++++------------
 web/src/views/GraphView.vue          |  24 ++-
 web/src/views/SettingView.vue        |   8 +-
 7 files changed, 197 insertions(+), 159 deletions(-)

diff --git a/src/config/__init__.py b/src/config/__init__.py
index b98038c4..50ae6ce7 100644
--- a/src/config/__init__.py
+++ b/src/config/__init__.py
@@ -38,12 +38,12 @@ class Config(SimpleConfig):
 
         ### >>> 默认配置
         # 可以在 config/base.yaml 中覆盖
-        self.add_item("mode", default="cli", des="运行模式", choices=["cli", "api"])
         self.add_item("stream", default=True, des="是否开启流式输出")
         self.add_item("save_dir", default="saves", des="保存目录")
         # 功能选项
         self.add_item("enable_reranker", default=False, des="是否开启重排序")
         self.add_item("enable_knowledge_base", default=False, des="是否开启知识库")
+        self.add_item("enable_knowledge_graph", default=False, des="是否开启知识图谱")
         self.add_item("enable_search_engine", default=False, des="是否开启搜索引擎")
 
         # 模型配置
@@ -70,6 +70,13 @@ class Config(SimpleConfig):
             "choices": choices
         }
 
+    def __dict__(self):
+        blocklist = [
+            "_config_items",
+            "model_names",
+        ]
+        return {k: v for k, v in self.items() if k not in blocklist}
+
     def handle_self(self):
         ### handle local model
         model_root_dir = os.getenv("MODEL_ROOT_DIR", "pretrained_models")
@@ -98,7 +105,6 @@ class Config(SimpleConfig):
                     content = f.read()
                     if content:
                         local_config = json.loads(content)
-                        local_config.pop("_config_items")
                         self.update(local_config)
                     else:
                         print(f"{self.filename} is empty.")
@@ -108,7 +114,6 @@ class Config(SimpleConfig):
                     content = f.read()
                     if content:
                         local_config = yaml.safe_load(content)
-                        local_config.pop("_config_items")
                         self.update(local_config)
                     else:
                         print(f"{self.filename} is empty.")
diff --git a/web/src/assets/main.css b/web/src/assets/main.css
index 8dd4cc93..238be927 100644
--- a/web/src/assets/main.css
+++ b/web/src/assets/main.css
@@ -7,7 +7,8 @@
 /* layout */
 
 .layout-container {
-  padding: 10px 30px;
+  width: 100%;
+  padding: 16px 30px;
   background-color: #FCFEFF;
 
   h2 {
diff --git a/web/src/components/ChatComponent.vue b/web/src/components/ChatComponent.vue
index 81db3604..37374d1a 100644
--- a/web/src/components/ChatComponent.vue
+++ b/web/src/components/ChatComponent.vue
@@ -329,6 +329,7 @@ const updateStatus = (id, status) => {
       return acc;
     }, {})
   }
+  scrollToBottom()
 }
 
 const simpleCall = (message) => {
@@ -573,7 +574,7 @@ watch(
   max-width: 900px;
   margin: 0 auto;
   flex-grow: 1;
-  padding: 1rem;
+  padding: 1rem 2rem;
   display: flex;
   flex-direction: column;
 
diff --git a/web/src/components/RefsComponent.vue b/web/src/components/RefsComponent.vue
index 1223053f..40249865 100644
--- a/web/src/components/RefsComponent.vue
+++ b/web/src/components/RefsComponent.vue
@@ -28,13 +28,13 @@
             <p class="result-distance">
               <strong>相似度距离:</strong>
               <div class="scorebar">
-                <a-progress :percent="(res.distance * 100).toFixed(2)" stroke-color="#1677FF" :size="[200, 10]"/>
+                <a-progress :percent="parseFloat((res.distance * 100).toFixed(2))" stroke-color="#1677FF" :size="[200, 10]"/>
               </div>
             </p>
-            <p class="result-rerank-score">
+            <p class="result-rerank-score" v-if="res.rerank_score">
               <strong>重排序分数:</strong>
               <div class="scorebar">
-                <a-progress :percent="(res.rerank_score * 100).toFixed(2)" stroke-color="#1677FF" :size="[200, 10]"/>
+                <a-progress :percent="parseFloat((res.rerank_score * 100).toFixed(2))" stroke-color="#1677FF" :size="[200, 10]"/>
               </div>
             </p>
             <a-divider />
@@ -74,7 +74,6 @@ const showRefs = computed(() => message.value.role=='received' && message.value.
   .item {
     background: var(--main-10);
     color: var(--main-600);
-    border: 1px solid var(--main-50);
     padding: 2px 8px;
     border-radius: 8px;
     font-size: 14px;
diff --git a/web/src/views/DataBaseInfoView.vue b/web/src/views/DataBaseInfoView.vue
index 1f6e6658..22c4d85c 100644
--- a/web/src/views/DataBaseInfoView.vue
+++ b/web/src/views/DataBaseInfoView.vue
@@ -18,14 +18,6 @@
         <a-tag color="blue" v-if="database.embed_model">{{ database.embed_model }}</a-tag>
       </div>
       <a-divider/>
-      <div class="pagebtns">
-        <div @click="state.curPage='add'" :class="{ 'active': state.curPage === 'add' }">
-          <CloudUploadOutlined />添加文件
-        </div>
-        <div @click="state.curPage='query-test'" :class="{ 'active': state.curPage === 'query-test' }">
-          <SearchOutlined />检索测试
-        </div>
-      </div>
       <div class="query-params" v-if="state.curPage == 'query-test'">
         <p style="text-align: center; margin: 0;"><strong>参数配置</strong></p>
         <div class="params-item">
@@ -46,103 +38,113 @@
     <div class="sider-bottom">
     </div>
   </div>
-  <div class="db-info-container" v-if="state.curPage == 'add'">
-    <h3>向知识库中添加文件</h3>
-    <div class="upload">
-      <a-upload-dragger
-        class="upload-dragger"
-        v-model:fileList="fileList"
-        name="file"
-        :multiple="true"
-        :disabled="state.loading"
-        action="/api/database/upload"
-        @change="handleFileUpload"
-        @drop="handleDrop"
-      >
-        <p class="ant-upload-text">点击或者把文件拖拽到这里上传</p>
-        <p class="ant-upload-hint">
-          目前仅支持上传文本文件，如 .pdf, .txt, .md。且同名文件无法重复添加。
-        </p>
-      </a-upload-dragger>
-    </div>
-    <a-button
-      type="primary"
-      @click="addDocumentByFile"
-      :loading="state.loading"
-      :disabled="fileList.length === 0"
-      style="margin: 0px 20px 20px 0;"
-    >
-      添加到知识库
-    </a-button>
-    <a-button @click="handleRefresh" :loading="state.refrashing">刷新状态</a-button>
-    <a-table :columns="columns" :data-source="database.files" row-key="file_id" class="my-table">
-      <template #bodyCell="{ column, text, record }">
-        <template v-if="column.key === 'file_id'">
-          <a-button class="main-btn" type="link" @click="openFileDetail(record)">{{ text.toUpperCase() }}</a-button>
-        </template>
-        <template v-else-if="column.key === 'type'"><span :class="text">{{ text.toUpperCase() }}</span></template>
-        <template v-else-if="column.key === 'status' && text === 'done'">
-          <CheckCircleFilled style="color: #41A317;"/>
-        </template>
-        <template v-else-if="column.key === 'status' && text === 'failed'">
-          <CloseCircleFilled style="color: #FF4D4F ;"/>
-        </template>
-        <template v-else-if="column.key === 'status' && text === 'processing'">
-          <HourglassFilled style="color: #1677FF;"/>
-        </template>
-        <template v-else-if="column.key === 'status' && text === 'waiting'">
-          <ClockCircleFilled style="color: #FFCD43;"/>
-        </template>
-        <template v-else-if="column.key === 'action'">
-          <a-button class="del-btn" type="link"
-            @click="deleteFile(text)"
-            :disabled="state.lock || record.status == 'processing' || record.status == 'waiting' "
-            >删除
-          </a-button>
-        </template>
-        <span v-else-if="column.key === 'created_at'">{{ formatRelativeTime(Math.round(text*1000)) }}</span>
-        <span v-else>{{ text }}</span>
-      </template>
-    </a-table>
-    <a-drawer
-      width="50%"
-      v-model:open="state.drawer"
-      class="custom-class"
-      :title="selectedFile?.filename"
-      placement="right"
-      @after-open-change="afterOpenChange"
-    >
-      <h2>共 {{ selectedFile?.lines.length }} 个片段</h2>
-      <p v-for="line in selectedFile?.lines" :key="line.id">
-        <strong>Chunk #{{ line.id }}</strong>   {{ line.text }}
-      </p>
-    </a-drawer>
-  </div>
-  <div class="db-info-container" v-else-if="state.curPage == 'query-test'">
-    <h3>检索测试</h3>
-    <div class="query-action">
-      <a-textarea
-        v-model:value="queryText"
-        placeholder="填写需要查询的句子"
-        :auto-size="{ minRows: 2, maxRows: 10 }"
-      />
-      <!-- :loading="state.searchLoading" -->
-      <a-button @click="onQuery" :disabled="queryText.length == 0" :loading="state.searchLoading">
-        <SearchOutlined v-if="!state.searchLoading"/>检索
-      </a-button>
-    </div>
-    <div class="query-test" v-if="queryResult">
-      <div class="query-card" v-for="(result, idx) in (meta.filter ? queryResult.results : queryResult.all_results)" :key="idx">
-        <p>
-          <strong>#{{ idx + 1 }}&nbsp;&nbsp;&nbsp;</strong>
-          <span>{{ result.file.filename }}&nbsp;&nbsp;&nbsp;</span>
-          <span><strong>距离</strong>：{{ result.distance.toFixed(4) }}&nbsp;&nbsp;&nbsp;</span>
-          <span v-if="result.rerank_score"><strong>重排序</strong>：{{ result.rerank_score.toFixed(4) }}</span>
-        </p>
-        <p class="query-text">{{ result.entity.text }}</p>
+  <a-tabs v-model:activeKey="state.curPage" class="atab-container" type="card">
+    <a-tab-pane key="add">
+      <template #tab><span><CloudUploadOutlined />添加文件</span></template>
+      <div class="db-info-container">
+        <h3>向知识库中添加文件</h3>
+        <div class="upload">
+          <a-upload-dragger
+            class="upload-dragger"
+            v-model:fileList="fileList"
+            name="file"
+            :multiple="true"
+            :disabled="state.loading"
+            action="/api/database/upload"
+            @change="handleFileUpload"
+            @drop="handleDrop"
+          >
+            <p class="ant-upload-text">点击或者把文件拖拽到这里上传</p>
+            <p class="ant-upload-hint">
+              目前仅支持上传文本文件，如 .pdf, .txt, .md。且同名文件无法重复添加。
+            </p>
+          </a-upload-dragger>
+        </div>
+        <a-button
+          type="primary"
+          @click="addDocumentByFile"
+          :loading="state.loading"
+          :disabled="fileList.length === 0"
+          style="margin: 0px 20px 20px 0;"
+        >
+          添加到知识库
+        </a-button>
+        <a-button @click="handleRefresh" :loading="state.refrashing">刷新状态</a-button>
+        <a-table :columns="columns" :data-source="database.files" row-key="file_id" class="my-table">
+          <template #bodyCell="{ column, text, record }">
+            <template v-if="column.key === 'file_id'">
+              <a-button class="main-btn" type="link" @click="openFileDetail(record)">{{ text.toUpperCase() }}</a-button>
+            </template>
+            <template v-else-if="column.key === 'type'"><span :class="text">{{ text.toUpperCase() }}</span></template>
+            <template v-else-if="column.key === 'status' && text === 'done'">
+              <CheckCircleFilled style="color: #41A317;"/>
+            </template>
+            <template v-else-if="column.key === 'status' && text === 'failed'">
+              <CloseCircleFilled style="color: #FF4D4F ;"/>
+            </template>
+            <template v-else-if="column.key === 'status' && text === 'processing'">
+              <HourglassFilled style="color: #1677FF;"/>
+            </template>
+            <template v-else-if="column.key === 'status' && text === 'waiting'">
+              <ClockCircleFilled style="color: #FFCD43;"/>
+            </template>
+            <template v-else-if="column.key === 'action'">
+              <a-button class="del-btn" type="link"
+                @click="deleteFile(text)"
+                :disabled="state.lock || record.status == 'processing' || record.status == 'waiting' "
+                >删除
+              </a-button>
+            </template>
+            <span v-else-if="column.key === 'created_at'">{{ formatRelativeTime(Math.round(text*1000)) }}</span>
+            <span v-else>{{ text }}</span>
+          </template>
+        </a-table>
+        <a-drawer
+          width="50%"
+          v-model:open="state.drawer"
+          class="custom-class"
+          :title="selectedFile?.filename"
+          placement="right"
+          @after-open-change="afterOpenChange"
+        >
+          <h2>共 {{ selectedFile?.lines.length }} 个片段</h2>
+          <p v-for="line in selectedFile?.lines" :key="line.id">
+            <strong>Chunk #{{ line.id }}</strong>   {{ line.text }}
+          </p>
+        </a-drawer>
       </div>
-    </div>
-  </div>
+    </a-tab-pane>
+    <a-tab-pane key="query-test" force-render>
+      <template #tab><span><SearchOutlined />检索测试</span></template>
+      <div class="db-info-container">
+        <h3>检索测试</h3>
+        <div class="query-action">
+          <a-textarea
+            v-model:value="queryText"
+            placeholder="填写需要查询的句子"
+            :auto-size="{ minRows: 2, maxRows: 10 }"
+          />
+          <!-- :loading="state.searchLoading" -->
+          <a-button class="btn-query" @click="onQuery" :disabled="queryText.length == 0">
+            <span v-if="!state.searchLoading"><SearchOutlined /> 检索</span>
+            <span v-else><LoadingOutlined /></span>
+          </a-button>
+        </div>
+        <div class="query-test" v-if="queryResult">
+          <div class="query-card" v-for="(result, idx) in (meta.filter ? queryResult.results : queryResult.all_results)" :key="idx">
+            <p>
+              <strong>#{{ idx + 1 }}&nbsp;&nbsp;&nbsp;</strong>
+              <span>{{ result.file.filename }}&nbsp;&nbsp;&nbsp;</span>
+              <span><strong>距离</strong>：{{ result.distance.toFixed(4) }}&nbsp;&nbsp;&nbsp;</span>
+              <span v-if="result.rerank_score"><strong>重排序</strong>：{{ result.rerank_score.toFixed(4) }}</span>
+            </p>
+            <p class="query-text">{{ result.entity.text }}</p>
+          </div>
+        </div>
+      </div>
+    </a-tab-pane>
+    <!-- <a-tab-pane key="3" tab="Tab 3">Content of Tab Pane 3</a-tab-pane> -->
+  </a-tabs>
   </div>
 </template>
 
@@ -160,6 +162,7 @@ import {
   DeleteOutlined,
   CloudUploadOutlined,
   SearchOutlined,
+  LoadingOutlined
 } from '@ant-design/icons-vue'
 
 
@@ -490,38 +493,38 @@ onMounted(() => {
     }
   }
 
-  .pagebtns {
-    display: flex;
-    flex-direction: column;
-    gap: 16px;
+  // .pagebtns {
+  //   display: flex;
+  //   flex-direction: column;
+  //   gap: 16px;
 
-    > div {
-      gap: 1rem;
-      width: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      padding: 10px 16px;
-      height: auto;
-      border-radius: 4px;
-      border: none;
-      background: var(--main-light-5);
-      letter-spacing: 4px;
-      border-radius: 8px;
-      border: 1px solid var(--main-light-2);
+  //   > div {
+  //     gap: 1rem;
+  //     width: 100%;
+  //     display: flex;
+  //     justify-content: center;
+  //     align-items: center;
+  //     padding: 10px 16px;
+  //     height: auto;
+  //     border-radius: 4px;
+  //     border: none;
+  //     background: var(--main-light-5);
+  //     letter-spacing: 4px;
+  //     border-radius: 8px;
+  //     border: 1px solid var(--main-light-2);
 
-      &:hover {
-        cursor: pointer;
-        background: var(--main-light-3);
-      }
-    }
+  //     &:hover {
+  //       cursor: pointer;
+  //       background: var(--main-light-3);
+  //     }
+  //   }
 
-    .active {
-      color: var(--main-color);
-      background: var(--main-light-3);
-      font-weight: bold;
-    }
-  }
+  //   .active {
+  //     color: var(--main-color);
+  //     background: var(--main-light-3);
+  //     font-weight: bold;
+  //   }
+  // }
 
   .query-params {
     display: flex;
@@ -549,10 +552,13 @@ onMounted(() => {
   }
 }
 
+.atab-container {
+  padding: 12px 16px;
+  width: 100%;
+}
+
 .db-info-container {
-  padding: 20px;
   flex: 1 1 auto;
-  overflow: scroll;
 
   .query-action {
     display: flex;
@@ -564,13 +570,13 @@ onMounted(() => {
       border: 1px solid var(--main-light-2);
     }
 
-    button {
+    button.btn-query {
       height: auto;
-      width: 120px;
+      width: 100px;
       box-shadow: none;
       border: none;
       font-weight: bold;
-      background: var(--main-light-2);
+      background: var(--main-light-3);
       color: var(--main-color);
 
       &:disabled {
@@ -627,6 +633,24 @@ onMounted(() => {
       margin: 0;
     }
 
+    h3 {
+      font-size: 20px;
+      font-weight: bold;
+
+      &::after {
+        content: '';
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        height: 10px;
+        background: var(--main-color);
+        display: block;
+        opacity: 0.5;
+        z-index: -1;
+
+      }
+    }
+
     p {
       color: var(--c-text-light-1);
       font-size: small;
diff --git a/web/src/views/GraphView.vue b/web/src/views/GraphView.vue
index 13afc759..4e7320fc 100644
--- a/web/src/views/GraphView.vue
+++ b/web/src/views/GraphView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="graph-container layout-container" v-if="configStore.config.enable_knowledge_base">
+  <div class="graph-container layout-container" v-if="state.showPage">
     <div class="info">
       <h2>Neo4j 图数据库</h2>
       <p>基于 Neo4j 构建的图数据库。</p>
@@ -50,13 +50,12 @@
       </div>
     </div>
     <div class="main" id="container"></div>
-
   </div>
   <div class="database-empty" v-else>
     <a-empty>
       <template #description>
         <span>
-          前往 <router-link to="/setting" style="color: var(--main-color); font-weight: bold;">设置</router-link> 页面配置知识库。
+          前往 <router-link to="/setting" style="color: var(--main-color); font-weight: bold;">设置</router-link> 页面配置图数据库。
         </span>
       </template>
     </a-empty>
@@ -94,10 +93,13 @@ const state = reactive({
   searchLoading: false,
   showModal: false,
   precessing: false,
+  showPage: computed(() => configStore.config.enable_knowledge_base && configStore.config.enable_knowledge_graph),
 })
 
-const getCurWidth = () => document.getElementById("container").offsetWidth
-const getCurHeight = () => document.getElementById("container").offsetHeight
+// const showPage = computed(() => {
+//   return configStore.config.enable_knowledge_base && configStore.config.enable_knowledge_graph
+// })
+
 
 const graphData = computed(() => {
   return {
@@ -174,14 +176,15 @@ const randerGraph = () => {
   graphInstance.render();
 }
 
-
-
-
 onMounted(() => {
+  if (!state.showPage) {
+    return
+  }
+
   graphInstance = new Graph({
     container: document.getElementById("container"),
-    width: getCurWidth(),
-    height: getCurHeight(),
+    width: document.getElementById("container").offsetWidth,
+    height: document.getElementById("container").offsetHeight,
     autoFit: true,
     autoResize: true,
     layout: {
@@ -273,6 +276,7 @@ const handleDrop = (event) => {
   display: flex;
   justify-content: center;
   align-items: center;
+  width: 100%;
   height: 100%;
   flex-direction: column;
   color: var(--c-text-light-1);
diff --git a/web/src/views/SettingView.vue b/web/src/views/SettingView.vue
index b64a389d..0960b94c 100644
--- a/web/src/views/SettingView.vue
+++ b/web/src/views/SettingView.vue
@@ -88,13 +88,13 @@
             @change="handleChange('enable_knowledge_base', !configStore.config.enable_knowledge_base)"
           />
         </div>
-        <!-- <div class="card">
+        <div class="card">
           <span class="label">{{ items?.enable_knowledge_graph.des }}</span>
           <a-switch
             :checked="configStore.config.enable_knowledge_graph"
             @change="handleChange('enable_knowledge_graph', !configStore.config.enable_knowledge_graph)"
           />
-        </div> -->
+        </div>
         <div class="card">
           <span class="label">{{ items?.enable_search_engine.des }}</span>
           <a-switch
@@ -136,6 +136,10 @@ const state = reactive({
 })
 
 const handleChange = (key, e) => {
+  if (key == 'enable_knowledge_graph' && e && !configStore.config.enable_knowledge_base) {
+    message.error('请先启用知识库功能')
+    return
+  }
   console.log('Change', key, e)
   needRestart[key] = true
   configStore.setConfigValue(key, e)