smartai2dian0/src/modules/knowledge/rgflow/knowledgeLib/test.vue

<template>
  <div class="main-container">
    <div class="main-container-lf">
      <div class="main-container-lf-top">
        <!-- 检索测试 -->
        {{ $t('knowledgeLib.test_title') }}
      </div>
      <div class="main-container-lf-down">
        <div style="color: #999">
          <!-- 最后一步！ 成功后，剩下的就交给Infiniflow AI吧。 -->
          {{ $t('knowledgeLib.test_tips') }}
        </div>
        <a-divider style="margin-top: 10px" />
        <a-form ref="formRef" :model="form" :style="{ width: '100%' }" layout="vertical" @submit="handleSubmit">
          <!-- 相似度阈值 -->
          <a-form-item field="similarity_threshold" :label="$t('knowledgeLib.similarity_threshold')">
            <a-slider v-model="form.similarity_threshold" :step="0.01" :min="0" :max="1" />
          </a-form-item>
          <!-- 关键字相似度权重 -->
          <a-form-item field="slider" :label="$t('knowledgeLib.similarity_weight')">
            <a-slider v-model="form.vector_similarity_weight" :step="0.01" :min="0" :max="1" />
          </a-form-item>
          <!-- Rerank模型 -->
          <a-form-item field="section" :label="$t('knowledgeLib.rerank_model')">
            <a-space direction="vertical" size="large">
              <a-select
                :size="'large'"
                v-model="form.rerank_id"
                :style="{ width: '100%' }"
                :placeholder="$t('knowledgeLib.select_placeholder')"
                allow-clear
              >
                <a-optgroup :label="index" v-for="(item, index) in modelList" :key="index">
                  <a-option v-for="obj in item" :key="obj.fid" :disabled="!obj.available" :value="obj.llm_name">
                    {{ obj.llm_name }}
                  </a-option>
                </a-optgroup>
              </a-select>
            </a-space>
          </a-form-item>
          <a-form-item field="slider" label="Top-K" v-if="form.rerank_id">
            <a-slider v-model="form.top_k" :min="1" :max="2048" />
          </a-form-item>
          <a-form-item>
            <div class="main-container-form-item-extra">
              <div class="main-container-form-item-extra-top">
                <!-- 测试文本 -->
                {{ $t('knowledgeLib.test_content') }}
              </div>
              <div class="main-container-form-item-extra-down">
                <a-textarea
                  v-model="form.question"
                  style="height: 10rem; border: 1px solid var(--color-fill-3); border-radius: 4px"
                  placeholder=""
                  allow-clear
                />
              </div>
              <div class="main-container-form-item-extra-btn">
                <a-button :disabled="!form.question" :loading="loading" type="primary" html-type="submit">
                  <!-- 测试 -->
                  {{ $t('knowledgeLib.test_btn') }}
                </a-button>
              </div>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <div class="main-container-rt">
      <a-collapse style="width: 96%; margin-top: 1rem; margin-left: 2%" @change="handleCollapseChange">
        <!-- 选定的文件 -->
        <a-collapse-item :header="check_count + '/' + doc_total + $t('knowledgeLib.test_result_head')" key="3">
          <a-checkbox-group v-model="checked_list" @change="handleCheckedChange" :style="{ width: '100%' }">
            <a-list :bordered="false" :pagination-props="doc_pagination_props" style="background: var(--color-bg-1)">
              <a-list-item v-for="doc in docList" :key="doc.doc_id" style="border-left: none; border-right: none">
                <a-list-item-meta :title="doc.doc_name">
                  <template #avatar>
                    <a-checkbox :value="doc.doc_id"></a-checkbox>
                  </template>
                </a-list-item-meta>
                <template #actions>
                  {{ doc.count }}
                  <!-- 预览 -->
                  <a-tooltip :content="$t('knowledgeLib.test_preview')">
                    <div class="action-icon">
                      <icon-eye @click="handlePreview(doc.doc_id)" />
                    </div>
                  </a-tooltip>
                </template>
              </a-list-item>
            </a-list>
          </a-checkbox-group>
        </a-collapse-item>
      </a-collapse>
      <div
        class="main-container-rt-down"
        :style="collapse_status ? 'height: calc(100% - 350px);overflow-y: auto' : 'height: calc(100% - 140px)'"
      >
        <a-card :bordered="false" v-for="item in chunks" :key="item.chunk_id">
          <template #title>
            <div class="main-container-rt-down-title">
              <!-- 混合相似度  -->
              <div>{{ (item.similarity * 100).toFixed(2) }}&nbsp; {{ $t('knowledgeLib.hybrid_similarity') }}</div>
              <!-- 关键词相似度 -->
              <div>{{ (item.term_similarity * 100).toFixed(2) }}&nbsp; {{ $t('knowledgeLib.keyword_similarity') }}</div>
              <!-- 向量相似度 -->
              <div>{{ (item.vector_similarity * 100).toFixed(2) }}&nbsp;{{ $t('knowledgeLib.vector_similarity') }}</div>
            </div>
          </template>
          <div class="main-container-rt-down-content">
            {{ item.content_with_weight }}
          </div>
        </a-card>
      </div>
      <!-- <div class="footer-page">
        <a-pagination :total="chunk_total" show-total />
      </div> -->
    </div>
  </div>
</template>

<script setup>
import { onMounted, onBeforeMount, reactive, ref, watch, computed } from 'vue';
// import { Message } from '@arco-design/web-vue';
import { Message } from '../../../../3rd-libs/arco-vue-libs';
import { kbretrievalTest, queryModelList } from '../../../../apis/rgflow-dify';
import { useI18n } from 'vue-i18n';

const { t } = useI18n();

let visible = ref(false);
let loading = ref(false);
const formRef = ref(null);
const kbid = ref('');
const modelList = ref({});
let form = reactive({
  page: 1,
  question: '',
  rerank_id: '',
  similarity_threshold: 0.2,
  size: 10,
  top_k: 1024,
  vector_similarity_weight: 0.7
});
const chunks = ref([]);
const all_chunks = ref([]);
const docList = ref([]);
const checked_list = ref([]);
const doc_total = ref(0);
const chunk_total = ref(0);
const collapse_status = ref(false);
const check_count = computed(() => {
  return checked_list.value.length || 0;
}); // 选中的文件数
const doc_pagination_props = reactive({
  defaultPageSize: 3,
  total: 0
});

const formatter = (value) => {
  // return String(Math.round(value / 100))
};

const handleCollapseChange = (key) => {
  key.length ? (collapse_status.value = true) : (collapse_status.value = false);
};
const handleSubmit = async ({ values, errors }) => {
  if (!form.question) {
    return;
  }
  let formObj = {
    ...form,
    kb_id: kbid.value,
    vector_similarity_weight: parseFloat((1 - form.vector_similarity_weight).toFixed(2))
  };
  if (!formObj.rerank_id) {
    delete formObj.top_k;
    delete formObj.rerank_id;
  }
  try {
    loading.value = true;
    const data = await kbretrievalTest(formObj);
    if (data.code == 0) {
      Message.success(t('knowledgeLib.test_success'));
      all_chunks.value = data.data.chunks;
      docList.value = data.data.doc_aggs;
      if (docList.value.length) {
        checked_list.value.push(docList.value[0].doc_id);
      }
      if (all_chunks.value.length) {
        chunks.value = all_chunks.value?.filter((item) => item?.doc_id == checked_list.value[0]);
      }
      doc_pagination_props.total = docList.value.length;
      doc_total.value = data.data.doc_aggs.length;
      chunk_total.value = data.data.chunks.length;
    } else {
      Message.error(data.retmsg);
    }
    loading.value = false;
  } catch (err) {
    console.log(err);
    Message.error(err.message);
    loading.value = false;
  }
};

const handleClick = () => {
  visible.value = true;
};
const handleCancel = () => {
  visible.value = false;
};

const handleOpened = (el) => {
  Object.assign(form, {});
  formRef.value.resetFields();
};

const changekbid = (value) => {
  kbid.value = value;
};

const queryModel = async (params) => {
  try {
    const data = await queryModelList(params);
    modelList.value = {
      BAAI: [data.data.BAAI[1]],
      Jina: data.data.Jina,
      youdao: data.data.youdao
    };
  } catch (err) {
    // you can report use errorHandler or other
  } finally {
  }
};
const handlePreview = (doc_id) => {
  window.open(`${window.RGFLOW_BASE_URL}/document/${doc_id}?ext=docx&prefix=document`);
};
const handleCheckedChange = (doc_ids) => {
  chunks.value = [];
  doc_ids.forEach((doc_id) => {
    chunks.value.push(...all_chunks.value.filter((item) => item.doc_id == doc_id));
  });
};

// watch(()=>)

defineExpose({
  changekbid
});

onBeforeMount(() => {
  queryModel({});
});
onMounted(() => {});
</script>

<script>
export default {
  name: 'config',
  methods: {}
};
</script>
<style scoped lang="css">
.main-container {
  display: flex;
  justify-content: space-between;
  height: 100%;
  .main-container-lf {
    width: 30%;
    height: 100%;
    background: var(--color-bg-2);
    border-radius: 10px;
    overflow: hidden;
    .main-container-lf-top {
      width: 100%;
      height: 60px;
      line-height: 60px;
      background: rgb(var(--primary-6));
      color: #ffffff;
      text-align: center;
    }
    .main-container-lf-down {
      width: calc(100% - 40px);
      padding: 20px;
    }
  }
  .main-container-form-item-extra {
    width: 100%;
    height: 20rem;
    border: 1px solid var(--color-fill-3);
    border-radius: 6px;
    overflow: hidden;
    .main-container-form-item-extra-top {
      width: 100%;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid var(--color-fill-3);
      color: #999999;
      text-align: center;
    }
    .main-container-form-item-extra-down {
      width: 92%;
      margin-left: 4%;
      margin-top: 30px;
    }
    .main-container-form-item-extra-btn {
      width: 96%;
      text-align: right;
      margin-top: 1rem;
    }
  }
  .main-container-rt {
    position: relative;
    width: 69%;
    height: 100%;
    overflow: hidden;
    background: var(--color-bg-2);
    border-radius: 10px;
    .main-container-rt-down {
      padding: 25px;
      .main-container-rt-down-title {
        display: flex;
        gap: 10px;
        font-size: 14px;
      }
      .main-container-rt-down-content {
        max-height: 300px;
        position: relative;
        padding: 20px 0;
        font-size: 16px;
        .footer-page {
          position: absolute;
          bottom: 10px;
          left: 10px;
        }
      }
    }
    .footer-page {
      padding-top: 10px;
      position: absolute;
      bottom: 20px;
      left: 20px;
      width: 100%;
      background: var(--color-bg-2);
    }
  }
}
.action-icon {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 2px;
}
.action-icon:hover {
  cursor: pointer;
  background-color: var(--color-neutral-4);
}
:deep(.arco-collapse-item-content) {
  padding: 0;
}
:deep(.arco-collapse-item-content-box) {
  padding: 0;
}
</style>