Commit f6718ad1 authored by mhw's avatar mhw

版本迭代

parent 39a7dce8
export default class DatasetData {
static list (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/datasetData/list', 'post', params, axiosOption, httpOption);
}
static view (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/datasetData/view', 'get', params, axiosOption, httpOption);
}
static update (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/datasetData/update', 'post', params, axiosOption, httpOption);
}
static delete (sender, params, axiosOption, httpOption) {
return sender.doUrl('/admin/app/datasetData/delete', 'post', params, axiosOption, httpOption);
}
}
...@@ -15,6 +15,7 @@ import TuningTask from './GptController/TuningTask.js'; ...@@ -15,6 +15,7 @@ import TuningTask from './GptController/TuningTask.js';
import TuningRun from './GptController/TuningRun.js'; import TuningRun from './GptController/TuningRun.js';
import PyApi from './GptController/PyApi.js'; import PyApi from './GptController/PyApi.js';
import KnowledgeManage from './GptController/KnowledgeManage.js'; import KnowledgeManage from './GptController/KnowledgeManage.js';
import DatasetData from './GptController/DatasetData.js';
export { export {
TemplateController, TemplateController,
...@@ -32,5 +33,6 @@ export { ...@@ -32,5 +33,6 @@ export {
TuningTask, TuningTask,
TuningRun, TuningRun,
PyApi, PyApi,
KnowledgeManage KnowledgeManage,
DatasetData
} }
module.exports = { module.exports = {
baseUrl: 'http://192.168.0.34:8082/', baseUrl: 'http://192.168.0.36:8082/',
wsUrl: 'ws://192.168.0.36:7860/', wsUrl: 'ws://192.168.0.36:7860/',
projectName: '灵境大模型平台' projectName: '灵境大模型平台'
} }
...@@ -94,10 +94,11 @@ const fetchGet = function (url, params, options) { ...@@ -94,10 +94,11 @@ const fetchGet = function (url, params, options) {
* @param {String} fileName 下载后保存的文件名 * @param {String} fileName 下载后保存的文件名
* @returns {Promise} * @returns {Promise}
*/ */
const fetchDownloadBlob = function (url, params, fileName, methos = 'post') { const fetchDownloadBlob = function (url, params, fileName, methos = 'post', isDefUrl) {
let thisurl = isDefUrl ? requestUrl(url) : url
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
let options = { let options = {
url: requestUrl(url), url: thisurl,
method: methos, method: methos,
data: methos === 'post' ? params : undefined, data: methos === 'post' ? params : undefined,
params: methos === 'get' ? params : undefined, params: methos === 'get' ? params : undefined,
...@@ -136,9 +137,9 @@ const fetchDownloadBlob = function (url, params, fileName, methos = 'post') { ...@@ -136,9 +137,9 @@ const fetchDownloadBlob = function (url, params, fileName, methos = 'post') {
* @param {String} fileName 下载后保存的文件名 * @param {String} fileName 下载后保存的文件名
* @returns {Promise} * @returns {Promise}
*/ */
const fetchDownload = function (url, params, fileName, methos) { const fetchDownload = function (url, params, fileName, methos, isDefUrl = true) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
fetchDownloadBlob(url, params, fileName, methos).then(blobData => { fetchDownloadBlob(url, params, fileName, methos, isDefUrl).then(blobData => {
let blobUrl = window.URL.createObjectURL(blobData); let blobUrl = window.URL.createObjectURL(blobData);
let linkDom = document.createElement('a'); let linkDom = document.createElement('a');
linkDom.style.display = 'none'; linkDom.style.display = 'none';
......
...@@ -409,12 +409,12 @@ const ModeOfSpeaking = new DictionaryBase('对话模式', [ ...@@ -409,12 +409,12 @@ const ModeOfSpeaking = new DictionaryBase('对话模式', [
id: 1, id: 1,
name: '知识库问答', name: '知识库问答',
symbol: 'repository' symbol: 'repository'
},
{
id: 2,
name: '搜索引擎问答',
symbol: 'se'
} }
// {
// id: 2,
// name: '搜索引擎问答',
// symbol: 'se'
// }
]); ]);
Vue.prototype.ModeOfSpeaking = ModeOfSpeaking; Vue.prototype.ModeOfSpeaking = ModeOfSpeaking;
const RunningStatus = new DictionaryBase('运行状态', [ const RunningStatus = new DictionaryBase('运行状态', [
......
<!-- 标注 -->
<template>
<div>
<vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true ,height: 270}" :data="[form.data]" min-height="96">
<!-- <vxe-column field="index" title="序号"></vxe-column> -->
<vxe-column :field="'data.'+item" :title="item" v-for="item in columnList" :key="item">
<template slot-scope="scope">
<el-input style="height: 100%;" type="textarea" placeholder="请输入内容" v-model="scope.row.data[item]" :rows="10">
</el-input>
</template>
</vxe-column>
</vxe-table>
<el-row type="flex" justify="end" class="dialog-btn-layer mt20">
<el-button :size="defaultFormItemSize" :plain="true" @click="onCancel(false)">取消</el-button>
<el-button type="primary" :size="defaultFormItemSize" @click="onSubmit">确定</el-button>
</el-row>
</div>
</template>
<script>
import { DatasetData } from '@/api/gptController.js';
export default {
data () {
return {
form: {
_id: undefined,
data: {},
versionId: undefined
}
};
},
props: ['row', 'columnList', 'refresh'],
components: {},
computed: {},
mounted () {
console.log(this.row);
this.form._id = this.row._id
this.form.versionId = this.row.versionId
this.form.data = JSON.parse(JSON.stringify(this.row))
},
methods: {
onCancel (isSuccess) {
if (this.observer != null) {
this.observer.cancel(isSuccess);
}
},
onSubmit () {
let params = {};
params.datasetMongoDto = { ...this.form.data};
DatasetData.update(this, params).then(res => {
this.$message.success('编辑成功');
this.onCancel(true);
}).catch(e => {
});
}
}
}
</script>
<style scoped>
</style>
...@@ -4,13 +4,12 @@ ...@@ -4,13 +4,12 @@
<div class="tableBox" > <div class="tableBox" >
<vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96"> <vxe-table border show-header-overflow show-overflow :row-config="{ isHover: true }" :data="myDataSetPage.tableData.impl.dataList" min-height="96">
<!-- <vxe-column field="index" title="序号"></vxe-column> --> <!-- <vxe-column field="index" title="序号"></vxe-column> -->
<vxe-column field="content" title="问题"></vxe-column> <vxe-column :field="'data.'+item" :title="item" v-for="item in columnList" :key="item"></vxe-column>
<vxe-column field="answer" title="答案"></vxe-column>
<vxe-column field="operation" title="操作" width="150px"> <vxe-column field="operation" title="操作" width="150px">
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" :size="defaultFormItemSize" @click="check(scope.row)">查看</el-button> <el-button type="text" :size="defaultFormItemSize" @click="check(scope.row)">查看</el-button>
<el-button type="text" :size="defaultFormItemSize" @click="label(scope.row)">标注</el-button> <el-button type="text" :size="defaultFormItemSize" @click="label(scope.row)" v-if="row.dimensionType===0" >标注</el-button>
<el-button type="text" :size="defaultFormItemSize" @click="del(scope.row)">删除</el-button> <el-button type="text" :size="defaultFormItemSize" @click="del(scope.row)">删除</el-button>
</template> </template>
</vxe-column> </vxe-column>
...@@ -27,8 +26,8 @@ ...@@ -27,8 +26,8 @@
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
/* eslint-disable-next-line */ /* eslint-disable-next-line */
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js'; import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
import { DatasetVersion } from '@/api/gptController.js'; import { DatasetData } from '@/api/gptController.js';
import label from './label.vue';
export default { export default {
data () { data () {
return { return {
...@@ -37,7 +36,8 @@ export default { ...@@ -37,7 +36,8 @@ export default {
tableData: { tableData: {
impl: new TableWidget(this.getwidgetData, true, true, false, undefined, false) impl: new TableWidget(this.getwidgetData, true, true, false, undefined, false)
} }
} },
columnList: []
}; };
}, },
...@@ -71,9 +71,28 @@ export default { ...@@ -71,9 +71,28 @@ export default {
} }
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
DatasetVersion.detail(this, params).then(res => { DatasetData.list(this, params).then(res => {
let dataList = res.data.dataList.map((item) => {
try {
var obj = JSON.parse(item.data);
} catch (err) {
console.log('JSON解析错误:' + err);
}
return {
...item,
data: obj
}
})
if (this.columnList.length === 0) {
for (const key in dataList[0].data) {
if (Object.hasOwnProperty.call(dataList[0].data, key)) {
this.columnList.push(key)
}
}
}
resolve({ resolve({
dataList: res.data.dataList.map((item) => { return {content: item} }), dataList,
totalCount: res.data.totalCount totalCount: res.data.totalCount
}); });
}).catch(e => { }).catch(e => {
...@@ -82,7 +101,7 @@ export default { ...@@ -82,7 +101,7 @@ export default {
}); });
}, },
check (row) { check (row) {
this.$alert(row.content, '详情', { this.$alert(row.data, '详情', {
confirmButtonText: '确定', confirmButtonText: '确定',
callback: action => { callback: action => {
...@@ -90,24 +109,28 @@ export default { ...@@ -90,24 +109,28 @@ export default {
}); });
}, },
label (row) { // 标注 label (row) { // 标注
this.$dialog.show('标注', label, {
area: ['70%', '50%']
}, { row: row, columnList: this.columnList, refresh: this.refresh}).then(res => {
this.refresh()
}).catch(e => { });
},
del (item) {
this.$confirm('是否确认删除', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
let params = { id: item._id, versionId: item.versionId}
DatasetData.delete(this, params).then(res => {
this.$message.success('删除成功');
this.refresh()
}).catch(e => {
console.log(e);
});
}
);
}, },
// del (item) {
// this.$confirm('是否确认删除', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// let params = { batchTaskId: item.batchTaskId }
// DatasetVersion.delete(this, params).then(res => {
// this.$message.success('删除成功');
// this.refresh()
// }).catch(e => {
// console.log(e);
// });
// }
// );
// },
refresh (reloadData = false) { refresh (reloadData = false) {
if (reloadData) { if (reloadData) {
this.myDataSetPage.tableData.impl.refreshTable(true, 1); this.myDataSetPage.tableData.impl.refreshTable(true, 1);
......
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
<div class="tableItem"> <div class="tableItem">
<div class="operation"> <div class="operation">
<div> <div>
<span @dblclick="value.isEdit=true"> <span @dblclick="checkName">
数据集名称: 数据集名称:
<span v-if="!value.isEdit">{{ value.datasetName }}</span> <span v-if="!value.isEdit">{{ value.datasetName }}</span>
<el-input v-else v-model="value.datasetName" placeholder="请输入内容" :size="defaultFormItemSize" style="width:200px" @change="editName()" ></el-input> <el-input ref="inputName" v-else v-model="value.datasetName" placeholder="请输入内容" :size="defaultFormItemSize" style="width:200px" @change="editName()" @blur="editName()" ></el-input>
</span> </span>
<span style="margin-left: 20px">数据集ID:{{ value.datasetId }}</span> <span style="margin-left: 20px">数据集ID:{{ value.datasetId }}</span>
...@@ -98,6 +98,12 @@ export default { ...@@ -98,6 +98,12 @@ export default {
}).catch(e => { }).catch(e => {
console.log(e); console.log(e);
}); });
},
checkName () {
this.value.isEdit = true;
this.$nextTick(() => {
this.$refs.inputName.focus()
})
} }
} }
......
<!-- -->
<template>
<div>
<el-card class="box-card" v-for="item in list" :key="item + 'a'">
<div class="title omit">
ChineseMedicalDialogueData中文医疗问答数据集
</div>
<div class="content omit_2">
中文医疗对话数据集由792099个问答对组成,包括男科、内科、妇产科、肿瘤科、儿科和外科
</div>
<div class="tagBox">
<el-tag class="tag" type="info" size="mini">文本对话非排序</el-tag>
<el-tag class="tag" type="info" size="mini">限定式问答</el-tag>
<el-tag class="tag" type="info" size="mini">调优</el-tag>
</div>
<el-divider style="margin: 14px 0"></el-divider>
<div class="buttonBox">
<div>
<el-tooltip :content="'浏览量1890'" placement="top" >
<el-button type="text" style="color:#333" icon="el-icon-view">1890</el-button>
</el-tooltip>
<el-tooltip :content="'引用量262'" placement="top" >
<el-button type="text" style="color:#333" icon="el-icon-date">262</el-button>
</el-tooltip>
</div>
<el-button type="text">去训练</el-button>
</div>
</el-card>
<div class="box-card-2" v-for="item in 3" :key="item"></div>
</div>
</template>
<script>
export default {
data () {
return {
};
},
props: ['list'],
components: {},
computed: {},
mounted () {},
methods: {}
}
</script>
<style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.box-card {
width: calc(100% / 4 - 20px);
height: 180px;
flex-shrink: 0;
margin-bottom: 20px;
min-width: 300px;
background: linear-gradient(to bottom,#e7efff 10%, #fff 50%);
}
.box-card-2 {
width: calc(100% / 4 - 20px);
min-width: 300px;
flex-shrink: 0;
}
.tag:not(:last-child){
margin-right: 10px;
}
div /deep/ .el-card__body{
height: 100%;
width: 100%;
position: relative;
}
div /deep/.el-divider--horizontal {
margin: 14px 0 0 0;
}
.title {
font-size: 16px;
color: $--color-text-primary;
margin-bottom: 16px;
}
.content {
margin-bottom: 10px;
color:$--color-text-secondary;
}
.buttonBox{
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
width: calc(100% - 32px);
}
</style>
...@@ -84,42 +84,23 @@ ...@@ -84,42 +84,23 @@
</el-form-item> </el-form-item>
</filter-box> </filter-box>
</el-form> </el-form>
<div class="tableBox" :style="{ height: tableHeight }"> <div :style="{ height: tableHeight ,background:'#fff'}" >
<el-card class="box-card" v-for="item in 5" :key="item + 'a'"> <cardBox class="tableBox" :list="[1,2,3]" :refresh="refresh"></cardBox>
<div class="title omit"> <el-row slot="pagination" type="flex" justify="end" style="margin-top: 16px;">
ChineseMedicalDialogueData中文医疗问答数据集 <el-pagination :total="myDataSetPage.tableData.impl.totalCount" :current-page="myDataSetPage.tableData.impl.currentPage" :page-size="myDataSetPage.tableData.impl.pageSize" :page-sizes="[10, 20, 50, 100]" layout="total, prev, pager, next, sizes" @current-change="myDataSetPage.tableData.impl.onCurrentPageChange" @size-change="myDataSetPage.tableData.impl.onPageSizeChange">
</div> </el-pagination>
<div class="content omit_2"> </el-row>
中文医疗对话数据集由792099个问答对组成,包括男科、内科、妇产科、肿瘤科、儿科和外科
</div>
<div class="tagBox">
<el-tag class="tag" type="info" size="mini">文本对话非排序</el-tag>
<el-tag class="tag" type="info" size="mini">限定式问答</el-tag>
<el-tag class="tag" type="info" size="mini">调优</el-tag>
</div>
<el-divider style="margin: 14px 0"></el-divider>
<div class="buttonBox">
<div>
<el-tooltip :content="'浏览量1890'" placement="top" >
<el-button type="text" style="color:#333" icon="el-icon-view">1890</el-button>
</el-tooltip>
<el-tooltip :content="'引用量262'" placement="top" >
<el-button type="text" style="color:#333" icon="el-icon-date">262</el-button>
</el-tooltip>
</div>
<el-button type="text">去训练</el-button>
</div>
</el-card>
<div class="box-card-2" v-for="item in 3" :key="item"></div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
/* eslint-disable-next-line */
import { DropdownWidget, TableWidget, UploadWidget, ChartWidget } from '@/utils/widget.js';
import { mapGetters } from 'vuex'; import { mapGetters } from 'vuex';
import cardBox from './cardBox';
import { ModelSquare } from '@/api/gptController.js';
export default { export default {
data () { data () {
return { return {
...@@ -168,23 +149,17 @@ export default { ...@@ -168,23 +149,17 @@ export default {
label: '顶部导航' label: '顶部导航'
} }
], ],
isInit: false isInit: false,
}, tableData: {
filterBoxheight: 0, impl: new TableWidget(this.getwidgetData, true, true, false, undefined, false)
tableData: [
{
id: 10001,
name: 'Test1',
role: 'Develop',
sex: 'Man',
age: 28,
address: 'test abc'
} }
] },
filterBoxheight: 0
}; };
}, },
components: {}, components: {cardBox},
computed: { computed: {
...mapGetters(['getMainContextHeight']), ...mapGetters(['getMainContextHeight']),
...@@ -198,17 +173,51 @@ export default { ...@@ -198,17 +173,51 @@ export default {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.filterBoxheight = this.$refs.myDataSetPage?.$el.clientHeight; this.filterBoxheight = this.$refs.myDataSetPage?.$el.clientHeight;
}); });
this.formInit()
}, },
methods: { methods: {
onReset () {}, getwidgetData (params) {
if (params == null) params = {};
params = {
...params
// modelSquareDtoFilter: { ...this.myDataSetPage.formFilter }
}
return new Promise((resolve, reject) => {
ModelSquare.list(this, params).then(res => {
resolve({
dataList: res.data.dataList,
totalCount: res.data.totalCount
});
}).catch(e => {
reject(e);
});
});
},
refresh (reloadData = false) {
if (reloadData) {
this.myDataSetPage.tableData.impl.refreshTable(true, 1);
} else {
this.myDataSetPage.tableData.impl.refreshTable();
}
},
onReset () {
this.$refs.myDataSetPage.resetFields();
this.refresh(true);
},
formInit () {
this.refresh();
},
search () {}, search () {},
handleChange () {} handleChange () {}
} }
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/style/element-variables.scss';
.tableBox { .tableBox {
background-color: white; background-color: white;
width: 100%; width: 100%;
...@@ -220,45 +229,5 @@ export default { ...@@ -220,45 +229,5 @@ export default {
align-content: flex-start; align-content: flex-start;
justify-content: space-between; justify-content: space-between;
} }
.box-card {
width: calc(100% / 4 - 20px);
height: 180px;
flex-shrink: 0;
margin-bottom: 20px;
min-width: 300px;
background: linear-gradient(to bottom,#e7efff 10%, #fff 50%);
}
.box-card-2 {
width: calc(100% / 4 - 20px);
min-width: 300px;
flex-shrink: 0;
}
div /deep/.el-divider--horizontal {
margin: 14px 0 0 0;
}
.title {
font-size: 16px;
color: $--color-text-primary;
margin-bottom: 16px;
}
.content {
margin-bottom: 10px;
color:$--color-text-secondary;
}
.buttonBox{
display: flex;
justify-content: space-between;
position: absolute;
bottom: 0;
width: calc(100% - 32px);
}
.tag:not(:last-child){
margin-right: 10px;
}
/deep/ .el-card__body{
height: 100%;
width: 100%;
position: relative;
}
</style> </style>
<!--导入配置 --> <!--导入配置 -->
<template> <template>
<el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize" :rules="rules"> <el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize" :rules="rules" v-loading.fullscreen.lock="fullscreenLoading">
{{ form.knowledge_base_name }}
<el-form-item label="上传知识库文件:" prop="filesArr"> <el-form-item label="上传知识库文件:" prop="filesArr">
<el-button @click="clickUp" :size="defaultFormItemSize" type="primary">上传</el-button> <el-button @click="clickUp" :size="defaultFormItemSize" type="primary">上传</el-button>
<input style="display:none" ref="upFile" type="file" @change="fileinfo($event.target.files)" accept=".html, .md, .json, .csv, .pdf, .png, .jpg, .jpeg, .bmp, .eml, .msg, .rst, .rtf, .txt, .xml, .docx, .epub, .odt, .ppt, .pptx, .tsv, .htm" > <input style="display:none" ref="upFile" type="file" @change="fileinfo($event.target.files)" >
<div v-for="item in files" :key="item.name">{{ item.name }}</div> <div class="itemFile" v-for="(item,index) in files" :key="item.name">{{ item.name }}
<i class="el-icon-circle-close" style="color:#0092FF;cursor: pointer;" @click="clearFile(index)"></i>
</div>
</el-form-item> </el-form-item>
<el-form-item label="单段文本最大长度:"> <el-form-item label="单段文本最大长度:">
<el-slider :min="0" :max="1000" v-model="form.chunk_size" show-input> <el-slider :min="0" :max="1000" v-model="form.chunk_size" show-input >
</el-slider> </el-slider>
</el-form-item> </el-form-item>
<el-form-item label="相邻文本重合长度:"> <el-form-item label="相邻文本重合长度:">
...@@ -33,7 +34,8 @@ ...@@ -33,7 +34,8 @@
</el-table-column> </el-table-column>
<el-table-column label="操作" width="90px" > <el-table-column label="操作" width="90px" >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button type="text" @click="delFile(scope.row)" :size="defaultFormItemSize" >删除</el-button> <el-button type="text" @click="delFile(scope.row)" :size="defaultFormItemSize">删除</el-button>
<el-button type="text" @click="down(scope.row)" :size="defaultFormItemSize" >下载</el-button>
</template> </template>
</el-table-column> </el-table-column>
...@@ -54,6 +56,7 @@ import { KnowledgeManage } from '@/api/gptController.js'; ...@@ -54,6 +56,7 @@ import { KnowledgeManage } from '@/api/gptController.js';
export default { export default {
data () { data () {
return { return {
fullscreenLoading: false,
form: { form: {
filesArr: undefined, filesArr: undefined,
knowledge_base_name: '', knowledge_base_name: '',
...@@ -104,10 +107,11 @@ export default { ...@@ -104,10 +107,11 @@ export default {
this.form.knowledge_base_name = this.$parent.knowledgeName this.form.knowledge_base_name = this.$parent.knowledgeName
let params = {}; let params = {};
params = { ...this.form }; params = { ...this.form };
this.fullscreenLoading = true
this.upload('/2api/knowledge_base/upload_docs', params, false).then(res => { this.upload('/2api/knowledge_base/upload_docs', params, false).then(res => {
resolve(res); resolve(res);
this.$message.success('上传成功'); this.$message.success('上传成功');
this.fullscreenLoading = false
this.$parent.onCancel(false) this.$parent.onCancel(false)
}).catch(e => { }).catch(e => {
reject(e); reject(e);
...@@ -154,6 +158,16 @@ export default { ...@@ -154,6 +158,16 @@ export default {
}, },
back () { back () {
this.$parent.active-- this.$parent.active--
},
clearFile (index) {
this.files.splice(index, 1)
},
down (row) { // 下载文件
let params = {knowledge_base_name: this.item.knowledgeName, file_name: row.name, boolean: false}
this.download('/2api/knowledge_base/download_docs', params, row, 'get', false).then((res) => {
console.log(res);
})
} }
} }
} }
...@@ -167,5 +181,8 @@ export default { ...@@ -167,5 +181,8 @@ export default {
.title { .title {
font-size: 20px; font-size: 20px;
margin-bottom: 16px; margin-bottom: 16px;
}
.itemFile{
} }
</style> </style>
<!--左侧操作界面 --> <!--左侧操作界面 -->
<template> <template>
<el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize" <el-form label-position="left" ref="form" label-width="120px" :model="form" :size="defaultFormItemSize" style="padding:20px;width:400px">
style="padding:20px;width:400px"> <el-form-item label="对话模式:">
<el-form-item label="请选择对话模式:"> <el-select v-model="form.pattern" placeholder="请选择" >
<el-select v-model="form.pattern" placeholder="请选择">
<el-option v-for="item in ModeOfSpeaking.getList()" :key="item.id" :label="item.name" :value="item.name"> <el-option v-for="item in ModeOfSpeaking.getList()" :key="item.id" :label="item.name" :value="item.name">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="选择LLM模型:"> <el-form-item label="LLM模型:">
<el-cascader v-model="form.model_name" ref="modelCascader" :options="modelList" <el-cascader v-model="form.model_name" ref="modelCascader" :options="modelList" :props='{ label: "name", value: "name", emitPath: false }' @change="changeModel"></el-cascader>
:props='{ label: "name", value: "name", emitPath: false }' @change="changeModel"></el-cascader>
</el-form-item> </el-form-item>
<el-form-item label="Temperature:"> <el-form-item label="Temperature:">
<el-slider v-model="temperature" :format-tooltip="formatTooltip" <el-slider v-model="temperature" :format-tooltip="formatTooltip" @change="form.temperature = temperature / 100"></el-slider>
@change="form.temperature = temperature / 100"></el-slider>
</el-form-item> </el-form-item>
<el-form-item label="历史对话轮数:"> <el-form-item label="历史对话轮数:">
<el-input-number v-model="form.heistoryRotate" :min="0" :max="10"></el-input-number> <el-input-number v-model="form.heistoryRotate" :min="0" :max="10"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="提示词:"> <el-form-item label="提示词:" style="">
<el-select v-model="promptTemplate" filterable placeholder="请选择提示词" value-key="templateId" <div style="display: flex;flex-direction: row;align-items: center;">
@change="templateControllerChange" clearable> <el-select v-model="promptTemplate" filterable placeholder="提示词" value-key="templateId" @change="templateControllerChange" clearable>
<el-option v-for="item in templateControllerList" :key="item.value" :label="item.label" :value="item"> <el-option v-for="item in templateControllerList" :key="item.value" :label="item.label" :value="item">
</el-option> </el-option>
</el-select> </el-select>
<el-switch @change="changePromptTemplate" style="margin-left: 10px;" v-model="isPromptTemplate" <el-switch @change="changePromptTemplate" style="margin-left: 10px;" v-model="isPromptTemplate" active-color="#13ce66" inactive-color="#ff4949">
active-color="#13ce66" inactive-color="#ff4949"> </el-switch>
</el-switch> </div>
</el-form-item> </el-form-item>
<el-form-item label-width="0px" v-if="form.prompt_template"> <el-form-item label-width="0px" v-if="form.prompt_template">
<div style="background-color: #f3f3f3; <div style="background-color: #f3f3f3;padding: 10px;border-radius: 10px;">
padding: 10px;
border-radius: 10px;">
{{ form.prompt_template }} {{ form.prompt_template }}
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label-width="0px" v-if="form.pattern == '知识库问答'"> <el-form-item label-width="0px" v-if="form.pattern == '知识库问答'">
<el-collapse value="1"> <el-collapse value="1">
<el-collapse-item name="1"> <el-collapse-item name="1">
<template slot="title">知识库配置</template> <template slot="title">知识库配置</template>
<el-form-item label="请选择知识库:" style="margin-bottom:30px"> <el-form-item label="请选择知识库:" style="margin-bottom:30px">
<el-select ref="knowledgeSelect" v-model="form.knowledgeConfige.knowledge_base_name" placeholder="请选择" <el-select ref="knowledgeSelect" v-model="form.knowledgeConfige.knowledge_base_name" placeholder="请选择" @change="changeKnowledge">
@change="changeKnowledge"> <el-option v-for="item in knowledgeList" :key="item.knowledgeId" :label="item.knowledgeName" :value="item.knowledgeName">
<el-option v-for="item in knowledgeList" :key="item.knowledgeId" :label="item.knowledgeName"
:value="item.knowledgeName">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -53,8 +45,7 @@ ...@@ -53,8 +45,7 @@
<el-input-number v-model="form.knowledgeConfige.top_k" :min="1" :max="20"></el-input-number> <el-input-number v-model="form.knowledgeConfige.top_k" :min="1" :max="20"></el-input-number>
</el-form-item> </el-form-item>
<el-form-item label="知识匹配分数阈值:"> <el-form-item label="知识匹配分数阈值:">
<el-slider v-model="knowledgeScoreThreshold" :format-tooltip="formatTooltip" <el-slider v-model="knowledgeScoreThreshold" :format-tooltip="formatTooltip" @change="form.knowledgeConfige.score_threshold = knowledgeScoreThreshold / 100"></el-slider>
@change="form.knowledgeConfige.score_threshold = knowledgeScoreThreshold / 100"></el-slider>
</el-form-item> </el-form-item>
</el-collapse-item> </el-collapse-item>
</el-collapse> </el-collapse>
...@@ -64,10 +55,8 @@ ...@@ -64,10 +55,8 @@
<el-collapse-item name="1"> <el-collapse-item name="1">
<template slot="title">搜索引擎配置</template> <template slot="title">搜索引擎配置</template>
<el-form-item label="选择搜索引擎:" style="margin-bottom:30px"> <el-form-item label="选择搜索引擎:" style="margin-bottom:30px">
<el-select ref="searchSelect" v-model="form.searchConfige.search_engine_name" placeholder="请选择" <el-select ref="searchSelect" v-model="form.searchConfige.search_engine_name" placeholder="请选择" @change="changeSe">
@change="changeSe"> <el-option v-for="item in [{ label: 'bing', value: 'bing' }, { label: 'duckduckgo', value: 'duckduckgo' }]" :key="item.value" :label="item.label" :value="item.value">
<el-option v-for="item in [{ label: 'bing', value: 'bing' }, { label: 'duckduckgo', value: 'duckduckgo' }]"
:key="item.value" :label="item.label" :value="item.value">
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
...@@ -243,14 +232,8 @@ export default { ...@@ -243,14 +232,8 @@ export default {
} }
</script> </script>
<style > <style scoped>
.myLoading .el-loading-spinner i { .myLoading .el-loading-spinner i {
font-size: 24px !important; font-size: 24px !important;
} }
.el-form-item__content{
display: flex;
flex-direction: row;
align-items: center;
}
</style> </style>
...@@ -2,12 +2,11 @@ ...@@ -2,12 +2,11 @@
<template> <template>
<div class="box"> <div class="box">
<!-- {{ this.extractContent( item.answer, '```', '```') }} -->
<div class="contentBox" ref="contentBox" v-if="myHistory.length > 0"> <div class="contentBox" ref="contentBox" v-if="myHistory.length > 0">
<div v-for="(item, index) in myHistory" :key="index"> <div v-for="(item, index) in myHistory" :key="index">
<div class="userBox"> <div class="userBox">
<div class="content"> <div class="content">
<!-- {{ item.content }} -->
<contentView :content="item.content" /> <contentView :content="item.content" />
</div> </div>
<div class="icon"> <div class="icon">
...@@ -19,9 +18,6 @@ ...@@ -19,9 +18,6 @@
GPT GPT
</div> </div>
<div class="content"> <div class="content">
<!-- <span v-if="item.answer">{{ item.answer }}</span>
<codePreview v-if="item.code.content" :type="item.code.language" :code="getcode(item.code.content)"/>
<span v-if="item.answer2">{{ item.answer2 }}</span> -->
<contentView :content="item.answer" /> <contentView :content="item.answer" />
</div> </div>
...@@ -39,15 +35,6 @@ ...@@ -39,15 +35,6 @@
<el-input placeholder="请输入内容" v-model="inputContent" class="input-with-select" @keyup.enter.native="submit"> <el-input placeholder="请输入内容" v-model="inputContent" class="input-with-select" @keyup.enter.native="submit">
<el-button slot="append" icon="el-icon-position" @click="submit"></el-button> <el-button slot="append" icon="el-icon-position" @click="submit"></el-button>
</el-input> </el-input>
<!-- <el-popover placement="top" width="400" trigger="click" ref="popover">
<el-select v-model="templateController" filterable placeholder="请选择" value-key="templateId" @change="templateControllerChange">
<el-option v-for="item in templateControllerList" :key="item.value" :label="item.label" :value="item">
</el-option>
</el-select>
<el-button slot="reference" icon="el-icon-s-opportunity" style="margin-left:10px" @click="clear" type="primary" plain>提示词</el-button>
</el-popover> -->
<el-button icon="el-icon-delete" style="margin-left:10px" @click="clear" type="danger" plain></el-button> <el-button icon="el-icon-delete" style="margin-left:10px" @click="clear" type="danger" plain></el-button>
</div> </div>
...@@ -95,9 +82,6 @@ export default { ...@@ -95,9 +82,6 @@ export default {
}, },
methods: { methods: {
getCode (answer) {
return this.extractContent(answer, '```', '```')
},
clear () { clear () {
this.param.query = null this.param.query = null
this.param.history = [] this.param.history = []
...@@ -124,19 +108,13 @@ export default { ...@@ -124,19 +108,13 @@ export default {
this.myHistory.push({ this.myHistory.push({
'role': 'user', 'role': 'user',
'content': this.inputContent, 'content': this.inputContent,
'answer': '', 'answer': ''
'code': {
temporary: '',
language: undefined,
content: ''
},
'answer2': ''
}) })
this.inputContent = null; this.inputContent = null;
// this.param.history =
this.myHistory.slice(0, -1).slice(-this.heistoryRotate).forEach((item) => { this.myHistory.slice(0, -1).slice(-this.heistoryRotate).forEach((item) => {
this.param.history.push(...[{ role: item.role, content: item.content }, { role: 'assistant', content: item.answer + item.code?.content + item.answer2 }]) this.param.history.push(...[{ role: item.role, content: item.content }, { role: 'assistant', content: item.answer}])
}) })
this.$emit('submit') this.$emit('submit')
...@@ -148,7 +126,9 @@ export default { ...@@ -148,7 +126,9 @@ export default {
if (this.chatForm.pattern === 'LLM 对话') { if (this.chatForm.pattern === 'LLM 对话') {
nowChat.answer += data nowChat.answer += data
} else if (this.chatForm.pattern === '知识库问答') { } else if (this.chatForm.pattern === '知识库问答') {
console.log(data);
let temporary = JSON.parse(`[${data}]`.replace(/}{/g, '},{')) let temporary = JSON.parse(`[${data}]`.replace(/}{/g, '},{'))
console.log(temporary);
temporary.forEach((item) => { temporary.forEach((item) => {
nowChat.answer += item.answer || '\n' + item.docs nowChat.answer += item.answer || '\n' + item.docs
}) })
...@@ -156,43 +136,11 @@ export default { ...@@ -156,43 +136,11 @@ export default {
} }
// let code = nowChat.code
// let languages = ['javascript', 'php', 'java', 'css', 'python', 'html', 'c', 'c++', 'c#']
// if (nowChat.answer.indexOf('```') === -1) {
// nowChat.answer += data
// } else {
// if (code.content.indexOf('```') === -1) {
// if (code.temporary.indexOf('```') === -1) {
// code.content += data
// }
// code.temporary += data
// if (code.temporary.split(' ').length > 1) {
// if (languages.indexOf(code.temporary.split(' ', 1)[0].toLowerCase()) === -1) {
// code.language = undefined
// } else {
// code.language = code.temporary.split(' ')[0]
// }
// }
// } else {
// nowChat.answer2 += data
// }
// }
this.$nextTick(() => { this.$nextTick(() => {
this.$refs.contentBox.scrollTo(0, this.$refs.contentBox.scrollHeight) this.$refs.contentBox.scrollTo(0, this.$refs.contentBox.scrollHeight)
}) })
} }
// getcode (data) {
// if (this.myHistory[this.myHistory.length - 1].code.language) {
// return data.split(' ').slice(1).join('').replace('```', '')
// } else {
// return data.replace('```', '')
// }
// }
} }
} }
......
<!-- --> <!-- -->
<template> <template>
<div class="cardBox"> <div class="cardBox">
<el-card class="box-card" v-for="item in dataList" :key="item.templateId"> <el-card class="box-card" v-for="item in dataList" :key="item.templateId" @click.native="view(item)">
<div class="titleBox"> <div class="titleBox">
<div class="title omit">{{item.templateName}}</div> <div class="title omit">{{item.templateName}}</div>
<div> <div @click.stop="()=>{}">
<el-button size="mini" v-if="isPreset">复制</el-button> <el-button size="mini" v-if="isPreset">复制</el-button>
<el-dropdown v-else @command="handleCommand($event,item)"> <el-dropdown v-else @command="handleCommand($event,item)" >
<span class="el-dropdown-link"> <span class="el-dropdown-link">
<i class="el-icon-more el-icon--right"></i> <i class="el-icon-more el-icon--right"></i>
</span> </span>
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
<div class="buttonBox"> <div class="buttonBox">
<div> <div>
<el-tooltip :content="'收藏量'+item.viewCount" placement="top"> <el-tooltip :content="'收藏量'+item.viewCount" placement="top">
<el-button type="text" :icon="item.isCollect==0?'el-icon-star-off':'el-icon-star-on'" @click="collect(item)" :style="{color:item.isCollect==0?'#333':'#ff9326'}">{{ item.isCollect==0?'收藏':'已收藏' }}</el-button> <el-button type="text" :icon="item.isCollect==0?'el-icon-star-off':'el-icon-star-on'" @click.stop="collect(item)" :style="{color:item.isCollect==0?'#333':'#ff9326'}">{{ item.isCollect==0?'收藏':'已收藏' }}</el-button>
</el-tooltip> </el-tooltip>
<el-tooltip :content="'浏览量'+item.viewCount" placement="top"> <el-tooltip :content="'浏览量'+item.viewCount" placement="top">
<el-button type="text" style="color: #333" icon="el-icon-view">{{ item.viewCount}}</el-button> <el-button type="text" style="color: #333" icon="el-icon-view">{{ item.viewCount}}</el-button>
...@@ -42,6 +42,7 @@ ...@@ -42,6 +42,7 @@
<script> <script>
import {TemplateController} from '@/api/gptController.js'; import {TemplateController} from '@/api/gptController.js';
import createTemplate from '../dialog/createTemplate'; import createTemplate from '../dialog/createTemplate';
import viewTemplate from '../dialog/view';
export default { export default {
data () { data () {
return { return {
...@@ -119,7 +120,15 @@ export default { ...@@ -119,7 +120,15 @@ export default {
} else if (command === 'copy') { } else if (command === 'copy') {
this.copy(item) this.copy(item)
} }
},
view (item) {
this.$dialog.show(item.templateName, viewTemplate, {
area: ['50%', '50%']
}, { item: item }).then(res => {
this.refresh();
}).catch(e => { });
} }
} }
} }
...@@ -133,6 +142,7 @@ export default { ...@@ -133,6 +142,7 @@ export default {
margin-bottom: 20px; margin-bottom: 20px;
min-width: 300px; min-width: 300px;
background: linear-gradient(to bottom, #e7efff 10%, #fff 50%); background: linear-gradient(to bottom, #e7efff 10%, #fff 50%);
cursor: pointer;
} }
.box-card-2 { .box-card-2 {
width: calc(100% / 4 - 20px); width: calc(100% / 4 - 20px);
......
...@@ -19,26 +19,24 @@ ...@@ -19,26 +19,24 @@
</el-option> </el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<template v-if="form.scenarioType === 0"> <template v-if="form.scenarioType === 0 ">
<el-form-item label="模板框架:" class="templateFramework"> <el-form-item label="模板框架:" class="templateFramework" v-if=" !isEdit">
<el-radio v-model="form.templateFramework" v-for="item in TemplateFrameworkDict.getList()" :label="item.id" :size="defaultFormItemSize" :key="item.id">{{ item.name }}</el-radio> <el-radio v-model="form.templateFramework" v-for="item in TemplateFrameworkDict.getList()" :label="item.id" :size="defaultFormItemSize" :key="item.id" @input="$refs.promptInput.init()">{{ item.name }}</el-radio>
</el-form-item> </el-form-item>
<el-form-item label="Prompt:"> <el-form-item label="Prompt:">
<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.templateContent" class="inputWidth"> <promptInput ref="promptInput" v-model="form.templateContent" :templateFramework="form.templateFramework" :isEdit="isEdit" />
</el-input>
{{form.templateVariables}}
</el-form-item> </el-form-item>
</template> </template>
<template v-else> <template v-else>
<el-form-item label="正向Prompt:"> <el-form-item label="正向Prompt:">
<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.templateContent" class="inputWidth"> <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.templateContent" class="inputWidth">
</el-input> </el-input>
{{form.templateVariables}}
</el-form-item> </el-form-item>
<el-form-item label="负向Prompt:"> <el-form-item label="负向Prompt:">
<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.negativeTemplateContent" class="inputWidth"> <el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="form.negativeTemplateContent" class="inputWidth">
</el-input> </el-input>
{{form.negativeTemplateVariables}}
</el-form-item> </el-form-item>
</template> </template>
<el-row type="flex" justify="end" class="dialog-btn-layer mt20"> <el-row type="flex" justify="end" class="dialog-btn-layer mt20">
...@@ -50,7 +48,7 @@ ...@@ -50,7 +48,7 @@
<script> <script>
import {TemplateController} from '@/api/gptController.js'; import {TemplateController} from '@/api/gptController.js';
import promptInput from './promptInput.vue';
export default { export default {
data () { data () {
return { return {
...@@ -72,10 +70,10 @@ export default { ...@@ -72,10 +70,10 @@ export default {
}; };
}, },
props: ['isEdit', 'item'], props: ['isEdit', 'item'],
components: {}, components: {promptInput},
computed: { computed: {
}, },
mounted () { mounted () {
......
<!--prompt输入 -->
<template>
<div >
<el-input v-if="[1,2,3].indexOf(templateFramework)===-1||isEdit" type="textarea" :rows="5" placeholder="请输入内容" :value="prompt" class="inputWidth" @input="changeInput"></el-input>
<el-card class="box-card" style="width:600px" v-else>
<div v-for="(item,index) in myPrompts" :key="index">
{{ item.label }}:
<el-input v-if="item.label!=='示例'" type="textarea" :rows="3" placeholder="请输入内容" v-model="item.value" class="inputWidth" @input="changeInput"></el-input>
<div v-else>
<el-table :data="item.tableData" style="width: 100%" :size="defaultFormItemSize">
<el-table-column prop="input" label="输入">
<template slot-scope="scope">
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.input" class="inputWidth" @input="changeInput"></el-input>
</template>
</el-table-column>
<el-table-column prop="output" label="输出">
<template slot-scope="scope">
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="scope.row.output" class="inputWidth" @input="changeInput"></el-input>
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="80">
<template slot-scope="scope">
<el-button @click.native.prevent="deleteRow(item,scope.$index)" :size="defaultFormItemSize" type="text">
移除
</el-button>
</template>
</el-table-column>
</el-table>
<el-button class="add" @click="add(item)" :disabled="item.tableData.length === 5" icon="el-icon-plus" :size="defaultFormItemSize">新增</el-button>
</div>
</div>
</el-card>
</div>
</template>
<script>
export default {
data () {
return {
prompt: '',
prompts: [
{
label: '能力与角色',
templateFramework: [2],
value: ''
},
{
label: '指令',
templateFramework: [1, 2],
value: ''
},
{
label: '背景信息',
templateFramework: [1, 2],
value: ''
},
{
label: '背景及指令',
templateFramework: [3],
value: ''
},
{
label: '输出风格',
templateFramework: [2],
value: ''
},
{
label: '输出范围',
templateFramework: [2],
value: ''
},
{
label: '补充数据',
templateFramework: [1],
value: ''
},
{
label: '输出格式',
templateFramework: [1],
value: ''
},
{
label: '示例',
templateFramework: [3],
tableData: []
}
]
};
},
props: ['templateFramework', 'value', 'isEdit'],
components: {},
computed: {
myPrompts () {
return this.prompts.filter((item) => {
return item.templateFramework.indexOf(this.templateFramework) !== -1
})
}
},
mounted () {
this.$nextTick(() => {
this.prompt = this.value
})
},
methods: {
init () {
Object.assign(this.$data, this.$options.data())
},
changeInput (data) {
this.prompt = data
let promptsString = this.prompts.map((item) => {
if (item.label === '示例') {
if (item.tableData.length === 0) return
return item.tableData.map((item2) => {
return '输入:' + item2.input + '\n' + '输出:' + item2.output + '\n'
}).join('')
} else {
if (item.value === '') return
return item.label + ':' + item.value + '\n'
}
}).join('')
this.$emit('input', [1, 2, 3].indexOf(this.templateFramework) === -1 ? this.prompt : promptsString)
},
add (item) {
if (item.tableData.length === 20) return
item.tableData.push({
input: '',
output: ''
})
},
deleteRow (item, index) {
item.tableData.splice(index, 1);
}
}
}
</script>
<style scoped>
</style>
<!-- 预览 -->
<template>
<el-card class="box-card" >
<el-descriptions :column="1" colon>
<el-descriptions-item label="模板名称:">{{item.templateName}}</el-descriptions-item>
<el-descriptions-item label="模板标签:">
<el-tag size="small" v-for="tag in getTags(item.templateLabel)" :key="tag">{{ tag }}</el-tag>
</el-descriptions-item>
<el-descriptions-item label="变量识别符:">{{ ParameterFormatLabelDict.getList().filter((data)=>data.symbol===item.parameterFormat)[0].name}}</el-descriptions-item>
<el-descriptions-item label="场景类型:">{{ ScenarioTypeDict.getValue(item.scenarioType)}}</el-descriptions-item>
<el-descriptions-item label="模板框架:">{{TemplateFrameworkDict.getValue(item.templateFramework)}}</el-descriptions-item>
<el-descriptions-item label="Prompt:">
<div style="white-space: pre-wrap; display: inline-flex;">
{{ item.templateContent }}
</div> </el-descriptions-item>
</el-descriptions>
</el-card>
</template>
<script>
export default {
data () {
return {
};
},
props: ['item'],
components: {},
computed: {},
mounted () {
console.log();
},
methods: {
getTags (data) {
return JSON.parse(data)
}
}
}
</script>
<style scoped>
div /deep/ .el-card{
margin-bottom: 20px;
}
.main{
height: calc(100vh - 450px);
width: calc(100vw - 100px);
}
.main img{
height: 100%;
width: 100%;
}
div /deep/ .el-descriptions__title{
font-size: 18px;
}
div /deep/.el-descriptions__table{
width: 100%;
line-height: 30px;
}
div /deep/ .el-card{
margin-bottom: 20px;
}
</style>
...@@ -203,7 +203,7 @@ export default { ...@@ -203,7 +203,7 @@ export default {
.listBox { .listBox {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 100%; height: fit-content;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
</div> </div>
</div> </div>
<div class="topButtonBox"> <div class="topButtonBox">
<div class="button" @click="add"> <div class="button" >
<div class="icon"> <div class="icon">
<img src="@/assets/img/addPrompt.png" alt="" /> <img src="@/assets/img/addPrompt.png" alt="" />
</div> </div>
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<div class="topContent">创建您的Prompt</div> <div class="topContent">创建您的Prompt</div>
</div> </div>
</div> </div>
<div class="button" @click="toPromptOptimization"> <div class="button">
<div class="icon"> <div class="icon">
<img src="@/assets/img/optimizePrompt.png" alt="" /> <img src="@/assets/img/optimizePrompt.png" alt="" />
</div> </div>
...@@ -28,7 +28,7 @@ ...@@ -28,7 +28,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="button" @click="tobatchOptimizePrompt"> <div class="button">
<div class="icon"> <div class="icon">
<img src="@/assets/img/batchOptimizePrompt.png" alt="" /> <img src="@/assets/img/batchOptimizePrompt.png" alt="" />
</div> </div>
......
...@@ -216,7 +216,7 @@ export default { ...@@ -216,7 +216,7 @@ export default {
.listBox { .listBox {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 100%; height: fit-content;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
...@@ -215,7 +215,7 @@ export default { ...@@ -215,7 +215,7 @@ export default {
.listBox { .listBox {
background-color: white; background-color: white;
width: 100%; width: 100%;
height: 100%; height: fit-content;
padding: 20px; padding: 20px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
<!-- -->
<template>
<div class="cardBox" @click="open">
<slot name="title"> </slot>
<slot name="content"> </slot>
</div>
</template>
<script>
export default {
data () {
return {
};
},
components: {},
computed: {},
mounted () { },
methods: {
open () { // 向父组件传值
this.$emit('open')
}
}
}
</script>
<style scoped>
.cardBox {
width: 100%;
height: 100%;
min-width: 200px;
background-color: rgba(255, 255, 255, 0);
padding: 20px;
border-radius: 5px;
box-shadow: 0 0 3px 1px rgb(85, 85, 85, 51%);
background: #f1f1f1bd;
}
</style>
<template> <template>
<div style="background-color: white;padding: 16px;"> <div style="background-color: white;padding: 16px;" class="allCard">
首页 <Card v-for="(item,index) in cardList" @click="cardClick(item)" :key="index">
<template #title>
<div class="title">
{{ item.name }}
</div>
</template>
<template #content>
<div class="content">
<div class="num" v-if="item.num!==undefined">
{{ item.num }}
</div>
<div v-else id="homeMain" ref="main"> </div>
<div class="describe">
{{ item.describe }}
</div>
</div>
</template>
</Card>
</div> </div>
</template> </template>
<script> <script>
import Card from './card';
import * as echarts from 'echarts';
export default { export default {
data () { data () {
return { return {
currentItem: ['1', '2', '3', '4'] echarts: undefined,
cardList: [
{
name: '数据集',
num: 0,
describe: '数据集总量'
},
{
name: '模型',
num: 0,
describe: '模型总量'
},
{
name: '应用接入',
num: 0,
describe: '应用接入总量'
},
{
name: 'Prompt模板',
num: 0,
describe: 'Prompt模板总量'
},
{
name: '调用统计'
}
],
option: {
color: ['#37A2FF', '#FFBF00'],
legend: {
type: 'scroll',
top: '0%',
left: 'center',
show: true
},
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
smooth: true,
lineStyle: {
width: 0
},
showSymbol: false,
areaStyle: {
opacity: 0.8,
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{
offset: 0,
color: 'rgb(55, 162, 255)'
},
{
offset: 1,
color: 'rgb(116, 21, 219)'
}
])
},
data: [140, 232, 101, 264, 90, 340, 250],
type: 'line',
name: '调用总量'
}
]
}
}
},
components: {Card},
mounted () {
this.$nextTick(() => {
this.echarts = echarts.init(document.getElementById('homeMain'));
this.echarts.setOption(this.option, true);
})
},
methods: {
cardClick () {
console.log(1);
},
resize () {
if (this.echarts != null) {
this.echarts.resize();
}
} }
} }
} }
...@@ -17,12 +122,17 @@ export default { ...@@ -17,12 +122,17 @@ export default {
<style lang="scss" scoped> <style lang="scss" scoped>
@import '@/assets/style/element-variables.scss'; @import '@/assets/style/element-variables.scss';
.title { .title {
border: 1px solid #EDEDED; border-left: 1px solid;
border-left-width: 5px; border-left-width: 5px;
border-left-color: $--color-primary; border-left-color: $--color-primary;
margin-bottom: 20px; margin-bottom: 20px;
font-size: 17px;
padding-left: 10px;
} }
#homeMain{
height:400px;
width:100%;
}
.title p { .title p {
height: 40px; height: 40px;
line-height: 40px; line-height: 40px;
...@@ -53,4 +163,35 @@ export default { ...@@ -53,4 +163,35 @@ export default {
color: red; color: red;
font-size: 16px; font-size: 16px;
} }
.allCard {
display: grid !important;
/* grid-column-gap: 50px;
grid-row-gap: 50px; */
grid-gap: 20px 20px;
grid-template: 1fr 2fr / 1fr 1fr 1fr 1fr;
height: 100%;
}
.allCard :nth-child(5) {
grid-column-start: 1;
grid-column-end: 5;
}
.content{
height: calc(100% - 45px);
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
.num{
font-size: 40px;
font-weight: bold;
text-align: center;
}
.describe{
text-align: center;
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment