From 324db843282ae84085e52a7e8ad03d01a6fb52cc Mon Sep 17 00:00:00 2001
From: liudong <liudong>
Date: 星期四, 08 八月 2024 11:51:51 +0800
Subject: [PATCH] 配置上传图片bug页面修改
---
src/views/dmx/knowledgeLib/config1.vue | 510 ++++++++++++++++++++++++++++++++++++++++++++++
src/views/dmx/knowledgeLib/config.vue | 103 ++------
2 files changed, 542 insertions(+), 71 deletions(-)
diff --git a/src/views/dmx/knowledgeLib/config.vue b/src/views/dmx/knowledgeLib/config.vue
index fe9a7ca..f388ced 100644
--- a/src/views/dmx/knowledgeLib/config.vue
+++ b/src/views/dmx/knowledgeLib/config.vue
@@ -14,49 +14,14 @@
</a-form-item>
<a-form-item field="section" label="鐭ヨ瘑搴撳浘鐗�">
<a-space direction="vertical" :style="{ width: '100%' }">
- <a-upload
- :auto-upload="false"
- :fileList="file ? [file] : []"
- :show-file-list="false"
- @change="onChange"
- @progress="onProgress"
- >
- <template #upload-button>
- <div
- :class="`arco-upload-list-item${
- file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
- }`"
- >
- <div
- class="arco-upload-list-picture custom-upload-avatar"
- v-if="file && file.url"
- >
- <img :src="form.avatar" />
- <div class="arco-upload-list-picture-mask">
- <IconEdit />
- </div>
- <a-progress
- v-if="file.status === 'uploading' && file.percent < 100"
- :percent="file.percent"
- type="circle"
- size="mini"
- :style="{
- position: 'absolute',
- left: '50%',
- top: '50%',
- transform: 'translateX(-50%) translateY(-50%)',
- }"
- />
- </div>
- <div class="arco-upload-picture-card" v-else>
- <div class="arco-upload-picture-card-text">
- <IconPlus />
- <div style="margin-top: 10px; font-weight: 600">涓婁紶</div>
- </div>
- </div>
- </div>
- </template>
- </a-upload>
+ <Upload
+ v-if="avatarShow"
+ :action="uploadAction"
+ :limit="1"
+ :url="form.avatar"
+ @update:fileList="updateFileList"
+ @success="handleSuccess"
+ ></Upload>
</a-space>
</a-form-item>
<a-form-item field="section" label="鎻忚堪">
@@ -208,10 +173,11 @@
});
let kbObj = reactive({});
+let avatarShow = ref(true);
const form = reactive({
- name: kbObj.name,
- avatar: '',//
+ name: '',
+ avatar: '',//澶村儚
max_token: 600,
threshold: 0.32,
max_cluster: 233,
@@ -226,7 +192,7 @@
language: "English",
permission: "",
embd_id: "BAAI/bge-large-zh-v1.5",
- parser_id: kbObj.parser_id,
+ parser_id: '',
layout_recognize: true
});
@@ -261,26 +227,18 @@
const modelList = ref({});
const file = ref();
-const onChange = (_, currentFile) => {
- file.value = currentFile;
- convertImageToBase64(file.value.file).then((result)=>{
- form.avatar = result;
- })
+const uploadAction = '/api/v1/llm/upload'; // 鏇挎崲涓轰綘鐨勪笂浼燗PI
+const fileList = ref([]);
+const imageUrls = ref([]);
+
+const updateFileList = (newFileList) => {
+ fileList.value = newFileList;
+ console.log(newFileList, 88);
};
-function convertImageToBase64(file) {
- return new Promise((resolve, reject) => {
- const reader = new FileReader();
- reader.onloadend = function() {
- resolve(reader.result);
- };
- reader.onerror = reject;
- reader.readAsDataURL(file);
- });
-}
-
-const onProgress = (currentFile) => {
- file.value = currentFile;
+const handleSuccess = (urls) => {
+ imageUrls.value = urls; // 鎷垮埌涓婁紶鐨勫浘鐗囧湴鍧�
+ form.avatar = urls[0];
};
@@ -377,14 +335,8 @@
formRef.value.resetFields();
kbObj = value;
console.log(kbObj, 'kbObj');
- if(kbObj.avatar){
- file.value.url = kbObj.avatar
- }else{
- // file.value.url = '';
- }
let configObj = {
name: kbObj.name,
- avatar: kbObj.avatar,
pages: kbObj.parser_config.pages,
description: kbObj.description,
language: "English",
@@ -402,9 +354,18 @@
use_raptor: kbObj.parser_config.raptor.use_raptor,
});
}else{
- Object.assign(form,configObj);
+ Object.assign(form,{
+ ...configObj,
+ use_raptor: false,
+ });
}
+ form.avatar = kbObj.avatar;
+ imageUrls.value = [kbObj.avatar];
console.log(form,'閰嶇疆椤甸潰琛ㄥ崟淇℃伅');
+ avatarShow.value = false;
+ setTimeout(() => {
+ avatarShow.value = true;
+ },100);
}
defineExpose({
diff --git a/src/views/dmx/knowledgeLib/config1.vue b/src/views/dmx/knowledgeLib/config1.vue
new file mode 100644
index 0000000..fe9a7ca
--- /dev/null
+++ b/src/views/dmx/knowledgeLib/config1.vue
@@ -0,0 +1,510 @@
+<template>
+ <div class="main-container">
+ <div style="position: absolute;top: 0;left: 0;width: 100%;padding: 0 20px">
+ <h4 style="margin-bottom: 10px"></h4>
+ <div style="color: #666666;">鍦ㄨ繖閲屾洿鏂版偍鐨勭煡璇嗗簱璇︾粏淇℃伅锛屽挨鍏舵槸瑙ｆ瀽鏂规硶銆�</div>
+ <a-divider style="margin-top: 20px" />
+ </div>
+ <div class="main-container-lf">
+ <div class="main-container-lf-down">
+ <a-form ref="formRef" :rules="rules" :model="form" :style="{width:'100%'}" layout="vertical"
+ @submit="handleSubmit">
+ <a-form-item field="name" label="鐭ヨ瘑搴撳悕绉�">
+ <a-input v-model="form.name" placeholder="璇疯緭鍏�" />
+ </a-form-item>
+ <a-form-item field="section" label="鐭ヨ瘑搴撳浘鐗�">
+ <a-space direction="vertical" :style="{ width: '100%' }">
+ <a-upload
+ :auto-upload="false"
+ :fileList="file ? [file] : []"
+ :show-file-list="false"
+ @change="onChange"
+ @progress="onProgress"
+ >
+ <template #upload-button>
+ <div
+ :class="`arco-upload-list-item${
+ file && file.status === 'error' ? ' arco-upload-list-item-error' : ''
+ }`"
+ >
+ <div
+ class="arco-upload-list-picture custom-upload-avatar"
+ v-if="file && file.url"
+ >
+ <img :src="form.avatar" />
+ <div class="arco-upload-list-picture-mask">
+ <IconEdit />
+ </div>
+ <a-progress
+ v-if="file.status === 'uploading' && file.percent < 100"
+ :percent="file.percent"
+ type="circle"
+ size="mini"
+ :style="{
+ position: 'absolute',
+ left: '50%',
+ top: '50%',
+ transform: 'translateX(-50%) translateY(-50%)',
+ }"
+ />
+ </div>
+ <div class="arco-upload-picture-card" v-else>
+ <div class="arco-upload-picture-card-text">
+ <IconPlus />
+ <div style="margin-top: 10px; font-weight: 600">涓婁紶</div>
+ </div>
+ </div>
+ </div>
+ </template>
+ </a-upload>
+ </a-space>
+ </a-form-item>
+ <a-form-item field="section" label="鎻忚堪">
+ <a-textarea placeholder="" v-model="form.description" allow-clear />
+ </a-form-item>
+<!-- <a-form-item field="section" label="璇█" :rules="[{match:/section one/,message:'璇烽�夋嫨'}]">-->
+<!-- <a-select v-model="form.section" placeholder="璇烽�夋嫨" allow-clear>-->
+<!-- <a-option value="0">涓枃</a-option>-->
+<!-- <a-option value="1">鑻辨枃</a-option>-->
+<!-- </a-select>-->
+<!-- </a-form-item>-->
+ <a-form-item field="embd_id" label="宓屽叆妯″瀷">
+ <a-space direction="vertical" size="large">
+ <a-select :size="'large'" v-model="form.embd_id" :style="{width:'100%'}" placeholder="璇烽�夋嫨 ..." :disabled="kbObj.chunk_num==0 && kbObj.token_num==0" allow-clear>
+ <a-optgroup :label="index" v-for="(item,index) in modelList" :key=index>
+ <a-option
+ v-for="(obj) in item"
+ :key='obj.fid'
+ :value="obj.llm_name"
+ >
+ {{obj.llm_name}}
+ </a-option>
+ </a-optgroup>
+ </a-select>
+ </a-space>
+ </a-form-item>
+ <a-form-item field="parser_id" label="瑙ｆ瀽鏂规硶">
+ <a-select v-model="form.parser_id" placeholder="璇烽�夋嫨" :disabled="kbObj.chunk_num==0 && kbObj.token_num==0" allow-clear>
+ <a-option v-for="item in parser_ids" :key="item.value" :label="item.name" :value="item.value"></a-option>
+ </a-select>
+ </a-form-item>
+ <a-form-item field="slider" label="鍧桾oken鏁�">
+ <a-slider v-model="form.chunk_token_num" :min="0" :max="2048" show-input />
+ </a-form-item>
+ <a-form-item label="甯冨眬璇嗗埆" >
+ <a-space direction="vertical">
+ <a-switch v-model="form.layout_recognize" size="small" />
+ </a-space>
+ </a-form-item>
+ <a-form-item field="raptor" label="浣跨敤鍙洖澧炲己RAPTOR绛栫暐">
+ <a-space direction="vertical" >
+ <a-switch v-model="form.use_raptor" size="small" />
+ </a-space>
+ </a-form-item>
+ <div v-if="form.use_raptor">
+ <a-form-item field="prompt" label="鎻愮ず璇�">
+ <a-textarea
+ v-model="form.prompt"
+ style="height: 10rem;border: 1px solid var(--color-fill-3);border-radius: 4px" placeholder="璇峰～鍐欐彁绀鸿瘝" />
+ </a-form-item>
+ <a-form-item field="slider" label="鏈�澶oken鏁�">
+ <a-slider v-model="form.max_token" :min="0" :max="2048" show-input/>
+ </a-form-item>
+ <a-form-item field="slider" label="闃堝��" >
+ <a-slider v-model="form.threshold" :step="0.01" :min="0" :max="1" show-input/>
+ </a-form-item>
+ <a-form-item field="slider" label="鏈�澶ц仛绫绘暟">
+ <a-slider v-model="form.max_cluster" :min="1" :max="1024" show-input/>
+ </a-form-item>
+ <a-form-item field="slider" label="闅忔満绉嶅瓙" v-model="form.random_seed">
+ <a-input-number v-model="form.random_seed" :style="{width:'300px',marginRight:'1rem',borderRadius:'4px'}"
+ placeholder="璇疯緭鍏�" class="input-demo" :min="10" :max="100" />
+ <a-button type="primary" @click="randomNumber">
+ <icon-plus />
+ </a-button>
+ </a-form-item>
+
+ </div>
+
+
+ <a-form-item>
+ <div style="width: 100%;text-align: right">
+ <a-space>
+ <a-button @click="cancelConfig">鍙栨秷</a-button>
+ <a-button type="primary" html-type="submit">淇濆瓨</a-button>
+ </a-space>
+ </div>
+ </a-form-item>
+ </a-form>
+ </div>
+ </div>
+ <div class="main-container-rt">
+ <section data-inspector-line="34" data-inspector-column="4"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
+ class="categoryPanelWrapper___yI4rY"><h4
+ class="ant-typography topTitle___tNiB9 css-dev-only-do-not-override-1wxecgq" data-inspector-line="37"
+ data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">"General"
+ 鍒嗗潡鏂规硶璇存槑</h4>
+ <p data-inspector-line="40" data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"><p>
+ 鏀寔鐨勬枃浠舵牸寮忎负<b>DOCX銆丒XCEL銆丳PT銆両MAGE銆丳DF銆乀XT</b>銆�</p>
+ <p>姝ゆ柟娉曞皢绠�鍗曠殑鏂规硶搴旂敤浜庡潡鏂囦欢锛�</p>
+ <p>
+ </p>
+ <li>绯荤粺灏嗕娇鐢ㄨ瑙夋娴嬫ā鍨嬪皢杩炵画鏂囨湰鍒嗗壊鎴愬涓墖娈点��</li>
+ <li>鎺ヤ笅鏉ワ紝杩欎簺杩炵画鐨勭墖娈佃鍚堝苟鎴怲oken鏁颁笉瓒呰繃鈥淭oken鏁扳�濈殑鍧椼��</li>
+ <p></p></p>
+ <h4 class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="45"
+ data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">
+ "General" 绀轰緥</h4><span class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="48"
+ data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">鎻愬嚭浠ヤ笅灞忓箷鎴浘浠ヤ績杩涚悊瑙ｃ��</span>
+ <div data-inspector-line="49" data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
+ class="ant-row imageRow___C3Xpb css-dev-only-do-not-override-1wxecgq"
+ style="margin-left: -5px; margin-right: -5px; row-gap: 10px;display: flex; margin-top: 20px;width: 100%">
+ <img
+ data-inspector-line="32" data-inspector-column="8"
+ data-inspector-relative-path="src\components\svg-icon.tsx" src="../../../assets/images/step1.png" alt=""
+ width="50%">
+ <img
+ data-inspector-line="32" data-inspector-column="8"
+ data-inspector-relative-path="src\components\svg-icon.tsx" src="../../../assets/images/step2.png" alt=""
+ width="50%">
+ </div>
+ <h4 class="ant-typography css-dev-only-do-not-override-1wxecgq" data-inspector-line="60"
+ data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx">
+ General 瀵硅瘽绀轰緥</h4>
+ <div class="ant-divider css-dev-only-do-not-override-1wxecgq ant-divider-horizontal" data-inspector-line="63"
+ data-inspector-column="10"
+ data-inspector-relative-path="src\pages\add-knowledge\components\knowledge-setting\category-panel.tsx"
+ role="separator"></div>
+ <a-divider style="margin-top: 20px" />
+ </section>
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onBeforeMount, reactive, ref } from "vue";
+import { Message } from "@arco-design/web-vue";
+import { queryModelList,kbUpdate } from "@/api/kbList";
+import message from "@arco-design/web-vue/es/message";
+import useLoading from "@/hooks/loading";
+const { loading,setLoading } = useLoading(true);
+
+const props = defineProps(['kbtenantInfo'])
+const emit = defineEmits(['cancleConfig','saveConfig'])
+// 瑙ｆ瀽鏂规硶鍒楄〃
+let parser_ids = props.kbtenantInfo.parser_ids.split(",").map((item) => {
+ const [value1, value2] = item.split(":");
+ return {
+ name: value2,
+ value: value1
+ };
+});
+
+let kbObj = reactive({});
+
+const form = reactive({
+ name: kbObj.name,
+ avatar: '',//
+ max_token: 600,
+ threshold: 0.32,
+ max_cluster: 233,
+ random_seed: 1500,
+ chunk_token_num: 384,
+ use_raptor: false,
+ pages: {},
+ prompt: "璇锋�荤粨浠ヤ笅娈佃惤銆� 灏忓績鏁板瓧锛屼笉瑕佺紪閫犮�� 娈佃惤濡備笅锛歕n" +
+ " {cluster_content}\n" +
+ "浠ヤ笂灏辨槸浣犻渶瑕佹�荤粨鐨勫唴瀹广��",
+ description: "",
+ language: "English",
+ permission: "",
+ embd_id: "BAAI/bge-large-zh-v1.5",
+ parser_id: kbObj.parser_id,
+ layout_recognize: true
+});
+
+const rules = {
+ name: [
+ {
+ required: true,
+ message:'鐭ヨ瘑搴撳悕绉颁笉鍏佽涓虹┖',
+ },
+ ],
+ embd_id: [
+ {
+ required: true,
+ message:'璇烽�夋嫨',
+ },
+ ],
+ parser_id: [
+ {
+ required: true,
+ message:'璇烽�夋嫨',
+ },
+ ],
+ prompt: [
+ {
+ required: true,
+ message:'鎻愮ず璇嶄笉鍏佽涓虹┖',
+ },
+ ],
+}
+let visible = ref(false);
+const formRef = ref(null);
+const modelList = ref({});
+const file = ref();
+
+const onChange = (_, currentFile) => {
+ file.value = currentFile;
+ convertImageToBase64(file.value.file).then((result)=>{
+ form.avatar = result;
+ })
+};
+
+function convertImageToBase64(file) {
+ return new Promise((resolve, reject) => {
+ const reader = new FileReader();
+ reader.onloadend = function() {
+ resolve(reader.result);
+ };
+ reader.onerror = reject;
+ reader.readAsDataURL(file);
+ });
+}
+
+const onProgress = (currentFile) => {
+ file.value = currentFile;
+};
+
+
+const handleSubmit = async ({ values, errors }) => {
+ if (errors){
+ return;
+ }
+ let parms = {
+ name: form.name,
+ avatar: form.avatar,
+ description: form.description,
+ language: form.language,
+ permission: form.permission,
+ embd_id: form.embd_id,
+ parser_id: form.parser_id,
+ parser_config: {
+ chunk_token_num: form.chunk_token_num,
+ layout_recognize: form.layout_recognize,
+ },
+ kb_id: kbObj.id,
+ }
+ if(form.use_raptor){
+ parms.parser_config.raptor = {
+ use_raptor: form.use_raptor,
+ prompt: form.prompt,
+ max_token: form.max_token,
+ threshold: form.threshold,
+ max_cluster: form.max_cluster,
+ random_seed: form.random_seed,
+ };
+ }
+ try {
+
+ const data = await kbUpdate(parms);
+ if(data.code == '0'){
+ Message.success("閰嶇疆鎴愬姛");
+ // window.location.reload();
+ emit('saveConfig')
+
+ }
+ // emit('upTabdateItem')
+
+ } catch (err) {
+ Message.error(err.message);
+ }
+
+
+
+};
+
+const cancelConfig = () => {
+ emit('cancleConfig')
+}
+
+
+function randomNumber() {
+ // 鐢熸垚涓�涓粙浜巑in鍜宮ax涔嬮棿鐨勯殢鏈烘暣鏁帮紙鍖呭惈min鍜宮ax锛�
+ const min = 1; // 鏈�灏忓��
+ const max = 10000; // 鏈�澶у��
+ form.random_seed = Math.floor(Math.random() * (max - min + 1)) + min;
+}
+
+const handleBeforeOk = (done) => {
+ formRef.value.validate().then(res => {
+ console.log("form:", form);
+ if (!form.name) {
+ done(false);
+ } else {
+ console.log("璇锋眰鏁版嵁");
+
+ }
+ });
+};
+const handleOpened =(el) => {
+ Object.assign(form,{
+
+ });
+ formRef.value.resetFields();
+}
+
+const queryModel = async (params) => {
+ try {
+ const data = await queryModelList(params);
+ // console.log(data.data, '澶фā鍨嬪垪琛�');
+ modelList.value = data.data
+ } catch (err) {
+ // you can report use errorHandler or other
+ } finally {
+
+ }
+};
+
+const changekbObj = (value) => {
+ formRef.value.resetFields();
+ kbObj = value;
+ console.log(kbObj, 'kbObj');
+ if(kbObj.avatar){
+ file.value.url = kbObj.avatar
+ }else{
+ // file.value.url = '';
+ }
+ let configObj = {
+ name: kbObj.name,
+ avatar: kbObj.avatar,
+ pages: kbObj.parser_config.pages,
+ description: kbObj.description,
+ language: "English",
+ permission: kbObj.permission,
+ embd_id: props.kbtenantInfo.embd_id || kbObj.embd_id,
+ parser_id: kbObj.parser_id,
+ layout_recognize: true,
+ }
+ let raptor = {}
+ if(kbObj.parser_config && kbObj.parser_config.raptor){
+ raptor = kbObj.parser_config.raptor;
+ Object.assign(form,{
+ ...configObj,
+ ...raptor,
+ use_raptor: kbObj.parser_config.raptor.use_raptor,
+ });
+ }else{
+ Object.assign(form,configObj);
+ }
+ console.log(form,'閰嶇疆椤甸潰琛ㄥ崟淇℃伅');
+}
+
+defineExpose({
+ changekbObj
+})
+
+
+onBeforeMount(()=>{
+ queryModel({})
+})
+onMounted(()=>{
+
+
+})
+
+</script>
+
+<script lang="ts">
+import { IconEdit, IconPlus } from "@arco-design/web-vue/es/icon";
+
+export default {
+ name: "config",
+ components: { IconPlus, IconEdit },
+ methods: {}
+};
+</script>
+<style scoped lang="less">
+.main-container {
+ position: relative;
+ display: flex;
+ justify-content: space-between;
+ height: 100%;
+ overflow: auto;
+ //background: #626aea;
+ background: var(--color-bg-2);
+ padding-top: 80px;
+
+ &-lf {
+ width: 40%;
+ //height: 100%;
+ //border: 1px solid #cccccc;
+ border-radius: 10px;
+ //border: 1px solid var(--color-fill-3);
+ &-top {
+ width: 100%;
+ height: 60px;
+ line-height: 60px;
+ //background: rgb(var(--primary-6));
+ //color: #ffffff;
+ //text-align: center;
+ }
+
+ &-down {
+ padding: 20px;
+ width: 100%;
+ }
+ }
+
+ &-form-item-extra {
+ width: 100%;
+ height: 20rem;
+ border: 1px solid var(--color-fill-3);
+ border-radius: 6px;
+ overflow: hidden;
+
+ &-top {
+ width: 100%;
+ height: 40px;
+ line-height: 40px;
+ border-bottom: 1px solid var(--color-fill-3);
+ //background: rgb(var(--primary-6));
+ color: #999999;
+ text-align: center;
+ }
+
+ &-down {
+ width: 92%;
+ margin-left: 4%;
+ margin-top: 30px;
+ }
+
+ &-btn {
+ width: 96%;
+ text-align: right;
+ margin-top: 1rem;
+ }
+ }
+
+ &-rt {
+ width: 60%;
+ //background: #626aea;
+ //border: 1px solid #cccccc;
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 20px;
+ section {
+ width: 100%;
+ //color: #333333;
+ color: var(--color-text-1);
+ }
+ }
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0