|
|
|
|
|
<template>
|
|
|
<cs-drawer
|
|
|
:drawer-option="drawerOption"
|
|
|
>
|
|
|
<div slot="content" class="PromptDebug">
|
|
|
<div class="left">
|
|
|
<div class="title">识别结果预览</div>
|
|
|
<div class="left-content">
|
|
|
<div v-if="dataInfo.name" class="top">{{ `证据模板：${dataInfo.name}` }}</div>
|
|
|
<div v-if="dataList.length === 0" class="empty">
|
|
|
<img src="@/assets/common/file_empty.png" alt="">
|
|
|
<span>暂无结果，请在右侧输入调试内容或上传文档</span>
|
|
|
</div>
|
|
|
<div v-if="dataList.length > 0 && dataInfo.type === '1'" class="data-list">
|
|
|
<div v-for="(item,index) in dataList" :key="index" class="data-item">
|
|
|
<div class="left">{{ item.attrName }}</div>
|
|
|
<div class="right">{{ item.attrValue }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-if="dataList.length > 0 && dataInfo.type === '2'" class="data-list">
|
|
|
<vxe-grid
|
|
|
ref="entityTable"
|
|
|
v-bind="entityOptions"
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
<el-button type="primary" class="btn" @click="submit">执行调试</el-button>
|
|
|
<div class="right-item">
|
|
|
<span>调试内容</span>
|
|
|
<el-input
|
|
|
v-model="text"
|
|
|
type="textarea"
|
|
|
:rows="8"
|
|
|
placeholder="请输入"
|
|
|
/>
|
|
|
</div>
|
|
|
<div class="right-item">
|
|
|
<span>选择文件</span>
|
|
|
<el-upload
|
|
|
:headers="{
|
|
|
token: token
|
|
|
}"
|
|
|
:action="uploadOption.action"
|
|
|
:accept="uploadOption.accept"
|
|
|
:data="{
|
|
|
temp: true
|
|
|
}"
|
|
|
:on-remove="remove"
|
|
|
:on-success="handleSuccess"
|
|
|
:before-upload="beforeUpload"
|
|
|
>
|
|
|
<div class="up-btn">
|
|
|
请选择文件
|
|
|
</div>
|
|
|
<div class="desc">支持上传扩展名为txt、doc、docx文件，且仅限一份文件</div>
|
|
|
</el-upload>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</cs-drawer>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { baseURL } from '@/config'
|
|
|
import { getAccessToken } from '@/utils/accessToken'
|
|
|
import { promptDebugging } from '@/api/promptManagement'
|
|
|
export default {
|
|
|
name: 'PromptDebug',
|
|
|
data() {
|
|
|
return {
|
|
|
drawerOption: {
|
|
|
show: false,
|
|
|
title: '提示词调试',
|
|
|
width: '1200px',
|
|
|
hiddenFooter: true
|
|
|
},
|
|
|
text: '',
|
|
|
// 上传配置
|
|
|
uploadOption: {
|
|
|
action: `${baseURL}/minio/uploadFile`,
|
|
|
accept: '.txt,.doc,.docx'
|
|
|
},
|
|
|
// 实体关系配置
|
|
|
entityOptions: {
|
|
|
columns: [
|
|
|
{ title: '头节点', field: 'headEntityName' },
|
|
|
{ title: '关系', field: 'relation' },
|
|
|
{ title: '尾节点', field: 'tailEntityName' }
|
|
|
|
|
|
],
|
|
|
data: []
|
|
|
},
|
|
|
token: getAccessToken(),
|
|
|
fileId: '',
|
|
|
fileList: [],
|
|
|
dataList: [],
|
|
|
tripleList: [],
|
|
|
dataInfo: undefined
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
show(data, list) {
|
|
|
this.fileId = ''
|
|
|
this.dataList = []
|
|
|
this.drawerOption.show = true
|
|
|
this.dataInfo = data
|
|
|
if (list) {
|
|
|
this.list = list
|
|
|
}
|
|
|
},
|
|
|
beforeUpload(file) {
|
|
|
const isLt5M = file.size / 1024 / 1024 < 5
|
|
|
const filename = file.name
|
|
|
const postfix = filename.substring(filename.lastIndexOf('.'))
|
|
|
if (!['.txt', '.doc', '.docx'].includes(postfix)) {
|
|
|
this.$message.error('上传图片只能是 txt,doc,docx 格式!')
|
|
|
return false
|
|
|
}
|
|
|
if (!isLt5M) {
|
|
|
this.$message.error('上传头像图片大小不能超过 5MB!')
|
|
|
return false
|
|
|
}
|
|
|
return true
|
|
|
},
|
|
|
handleSuccess(res, file) {
|
|
|
this.fileId = res.data
|
|
|
},
|
|
|
remove() {
|
|
|
this.fileId = ''
|
|
|
},
|
|
|
// 调试
|
|
|
submit() {
|
|
|
if (!this.text && !this.fileId) {
|
|
|
this.$message.error('请上传文件或者输入调试内容！')
|
|
|
return
|
|
|
}
|
|
|
const loading = this.$baseLoading(1, '调试中...')
|
|
|
const params = {
|
|
|
...this.dataInfo,
|
|
|
// type: this.dataInfo.type,
|
|
|
// prompt: this.dataInfo.prompt,
|
|
|
// extractAttributes: this.dataInfo.extractAttributes,
|
|
|
fileId: this.fileId,
|
|
|
text: this.text
|
|
|
}
|
|
|
if (params.type === '2') {
|
|
|
params.tripleList = this.list
|
|
|
}
|
|
|
promptDebugging(params).then(res => {
|
|
|
loading.close()
|
|
|
if (res.code === 200 && res.data) {
|
|
|
this.dataList = res.data
|
|
|
if (this.dataInfo.type === '2') {
|
|
|
this.entityOptions.data = res.data
|
|
|
for (const item of this.entityOptions.data) {
|
|
|
item.headEntityName = item.headEntity.name
|
|
|
item.tailEntityName = item.tailEntity.name
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}).catch(() => {
|
|
|
loading.close()
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
.PromptDebug {
|
|
|
display: flex;
|
|
|
padding: 16px;
|
|
|
overflow: auto;
|
|
|
.left {
|
|
|
width: 50%;
|
|
|
|
|
|
.title {
|
|
|
font-size: 18px;
|
|
|
color: #333333;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.left-content {
|
|
|
border-radius: 6px 6px 6px 6px;
|
|
|
border: 1px solid #D9D9D9;
|
|
|
width: 100%;
|
|
|
height: calc(100vh - 300px);
|
|
|
.empty {
|
|
|
margin: 260px auto;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
img {
|
|
|
width: 200px;
|
|
|
height: 200px;
|
|
|
}
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
color: #333333;
|
|
|
}
|
|
|
}
|
|
|
.top {
|
|
|
height: 53px;
|
|
|
background: #F2F6FA;font-size: 16px;
|
|
|
color: #888888;
|
|
|
line-height: 53px;
|
|
|
padding-left: 24px;
|
|
|
}
|
|
|
.data-list {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
padding: 24px;
|
|
|
overflow: auto;
|
|
|
height: calc(100vh - 400px);
|
|
|
.data-item {
|
|
|
display: flex;
|
|
|
margin-bottom: 24px;
|
|
|
align-items: center;
|
|
|
.left {
|
|
|
width: 120px;
|
|
|
font-size: 16px;
|
|
|
color: #666666;
|
|
|
text-align: right;
|
|
|
}
|
|
|
.right {
|
|
|
margin-left: 24px;font-size: 16px;
|
|
|
color: #333333;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.right {
|
|
|
margin-left: 32px;
|
|
|
flex: 1;
|
|
|
position: relative;
|
|
|
.btn {
|
|
|
position: absolute;
|
|
|
right: 0;
|
|
|
top: 16px;
|
|
|
}
|
|
|
.right-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
margin-top: 24px;
|
|
|
span {
|
|
|
font-size: 16px;
|
|
|
color: #333333;
|
|
|
margin-bottom: 16px;
|
|
|
}
|
|
|
.up-btn {
|
|
|
width: 128px;
|
|
|
height: 42px;
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 6px 6px 6px 6px;
|
|
|
border: 1px solid #3763FF;
|
|
|
line-height: 42px;
|
|
|
font-size: 16px;
|
|
|
color: #3763FF;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.desc {
|
|
|
font-size: 16px;
|
|
|
color: #B4B4B4;
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
</style>
|