<template>
|
<!-- 添加编辑子模型 -->
|
<a-modal
|
v-model:visible="addPageModelVisible"
|
:title="title"
|
@before-open="handleOpened"
|
@cancel="handleCancel"
|
:footer="false"
|
title-align="start"
|
width="600px"
|
>
|
<a-form
|
ref="form_ref"
|
:rules="rules"
|
:model="form"
|
@submit="handleSubmit"
|
:style="{ width: '90%', margin: '0 auto' }"
|
layout="vertical"
|
>
|
<div v-if="isType !== 1">
|
<a-form-item field="model_type" label="模型类型">
|
<a-select v-model="form.model_type" placeholder="请选择">
|
<a-option value="chat">chat</a-option>
|
<a-option value="embedding">embedding</a-option>
|
</a-select>
|
</a-form-item>
|
<a-form-item field="llm_name" label="模型名称">
|
<a-input v-model="form.llm_name" placeholder="请输入模型名称" />
|
</a-form-item>
|
|
<!-- <a-form-item field="volc_ak" label="火山 ACCESS_KEY">
|
<a-input v-model="form.volc_ak" placeholder="请输入火山 ACCESS_KEY" />
|
<a-button
|
type="primary"
|
@click="handleClick"
|
style="margin-left: 10px"
|
>
|
<template #icon>
|
<icon-plus />
|
</template>
|
</a-button>
|
</a-form-item>
|
<a-form-item field="volc_sk" label="火山 SECRET_KEY">
|
<a-input v-model="form.volc_sk" placeholder="请输入火山 SECRET_KEY" />
|
</a-form-item> -->
|
<a-form-item field="api_base" label="基础URL">
|
<a-input v-model="form.api_base" placeholder="请输入基础URL" />
|
</a-form-item>
|
<!-- <a-form-item
|
field="raptor"
|
label="是否支持 Vision"
|
v-if="form.model_type === 'chat'"
|
>
|
<a-switch v-model="form.raptor" />
|
</a-form-item> -->
|
<a-form-item field="logo" label="模型图片">
|
<a-space direction="vertical" :style="{ width: '100%' }">
|
<Upload
|
:action="uploadAction"
|
:limit="1"
|
:url="form.urlS"
|
@update:fileList="updateFileList"
|
@success="handleSuccess"
|
></Upload>
|
</a-space>
|
</a-form-item>
|
<a-form-item field="all_params" label="增加其它参数配置">
|
<a-button
|
type="primary"
|
@click="handleAddClick"
|
style="margin-left: 10px"
|
>
|
<template #icon>
|
<icon-plus />
|
</template>
|
</a-button>
|
</a-form-item>
|
|
<a-form-item v-for="(item, index) in form.addFomList" :key="index">
|
<div class="addInput">
|
<a-input
|
style="width: 230px"
|
v-model="item.name"
|
placeholder="请输入key"
|
/>
|
：
|
<a-input v-model="item.value" placeholder="请输入value" />
|
|
<a-button
|
status="danger"
|
@click="handleDelInput(index)"
|
style="margin-left: 10px"
|
>
|
<template #icon>
|
<icon-minus size="22" />
|
</template>
|
</a-button>
|
</div>
|
</a-form-item>
|
</div>
|
<div v-else>
|
<a-form-item field="name" label="API-Key">
|
<a-input v-model="form.name" placeholder="API-Key" />
|
</a-form-item>
|
<a-form-item field="describe" label="Base-Url">
|
<a-input v-model="form.name" placeholder="Base-Url" />
|
</a-form-item>
|
|
<a-form-item field="section" label="模型图片">
|
<a-space direction="vertical" :style="{ width: '100%' }">
|
<Upload
|
:action="uploadAction"
|
:limit="1"
|
:url="form.urlS"
|
@update:fileList="updateFileList"
|
@success="handleSuccess"
|
></Upload>
|
</a-space>
|
</a-form-item>
|
</div>
|
|
<a-form-item>
|
<div style="width: 100%; text-align: right">
|
<a-button @click="addPageModelVisible = false">取消</a-button>
|
<a-button style="margin-left: 10px" type="primary" html-type="submit"
|
>确定</a-button
|
>
|
</div>
|
</a-form-item>
|
</a-form>
|
</a-modal>
|
</template>
|
|
<script lang="ts" setup>
|
import { reactive, ref, computed, watch, watchEffect, onMounted } from 'vue';
|
import { addLlm, getLlmDetail, editLlm } from '@/api/model';
|
import { Modal, Message } from '@arco-design/web-vue';
|
import message from '@arco-design/web-vue/es/message';
|
import { resolveUnref } from '@vueuse/core';
|
|
const addPageModelVisible = defineModel('show');
|
const loading = ref(false);
|
const props = defineProps({
|
task_id: {
|
type: Number,
|
default: null,
|
},
|
type: {
|
type: Number,
|
default: 0,
|
},
|
title: {
|
type: String,
|
default: '',
|
},
|
editList: {
|
type: Object,
|
default: {},
|
},
|
});
|
|
const isType = computed(() => props.type);
|
const editList = computed(() => props.editList);
|
|
const form = reactive({
|
size: 'medium',
|
name: '',
|
llm_factory: '',
|
model_type: '',
|
province: 'haidian',
|
options: [],
|
llm_name: '',
|
api_base: '',
|
volc_ak: '',
|
volc_sk: '',
|
logo: '',
|
radio: 'radio one',
|
urlS: '',
|
slider: 5,
|
score: 5,
|
switch: false,
|
multiSelect: ['section one'],
|
treeSelect: '',
|
raptor: false,
|
addFomList: [],
|
});
|
const form_ref = ref(null);
|
|
const rules = {
|
model_type: [
|
{
|
required: true,
|
message: '请选择模型类型',
|
},
|
],
|
llm_name: [
|
{
|
required: true,
|
message: '名称不允许为空',
|
},
|
],
|
volc_sk: [
|
{
|
required: true,
|
message: '请输入volc_sk',
|
},
|
],
|
volc_ak: [
|
{
|
required: true,
|
message: '请输入volc_ak',
|
},
|
],
|
api_base: [
|
{
|
required: true,
|
message: '请输入api_base',
|
},
|
],
|
};
|
|
const uploadAction = '/api/v1/llm/upload'; // 替换为你的上传API
|
const fileList = ref([]);
|
const imageUrls = ref([]);
|
|
const updateFileList = (newFileList) => {
|
fileList.value = newFileList;
|
console.log(newFileList, 88);
|
};
|
|
const handleSuccess = (urls) => {
|
imageUrls.value = urls; // 拿到上传的图片地址
|
};
|
const emit = defineEmits(['refresh-parent']);
|
const handleSubmit = ({ values, errors }) => {
|
const all_params = form.addFomList.map((item) => {
|
console.log(item, 8888);
|
return item.name + ':' + item.value;
|
});
|
form_ref.value
|
?.validate()
|
.then(async (res) => {
|
if (!res) {
|
if (props.title == '编辑') {
|
const data = await editLlm({
|
llm_factory: editList.value.llm_factory,
|
llm_name: form.llm_name,
|
model_type: form.model_type,
|
volc_ak: form.volc_ak,
|
volc_sk: form.volc_sk,
|
api_base: form.api_base,
|
all_params: all_params,
|
logo: imageUrls.value[0],
|
});
|
|
if ((data as any).code == 200) {
|
message.success('添加成功');
|
addPageModelVisible.value = false;
|
emit('refresh-parent');
|
} else {
|
message.error('添加失败');
|
}
|
} else {
|
const data = await addLlm({
|
llm_factory: editList.value.llm_factory,
|
llm_name: form.llm_name,
|
model_type: form.model_type,
|
volc_ak: form.volc_ak,
|
volc_sk: form.volc_sk,
|
api_base: form.api_base,
|
all_params: all_params,
|
logo: imageUrls.value[0],
|
});
|
|
if ((data as any).code == 200) {
|
message.success('添加成功');
|
addPageModelVisible.value = false;
|
emit('refresh-parent');
|
} else {
|
message.error('添加失败');
|
}
|
}
|
}
|
})
|
.catch((err) => {
|
console.log(err);
|
});
|
};
|
|
// const addPageModelVisible = ref(false);
|
const handleAddPageModel = () => {
|
addPageModelVisible.value = true;
|
};
|
|
const handleClick = () => {
|
addPageModelVisible.value = true;
|
};
|
const handleBeforeOk = (done) => {
|
form_ref.value?.validate().then((res) => {
|
console.log('form:', form);
|
if (!form.name) {
|
done(false);
|
} else {
|
console.log('请求数据');
|
}
|
});
|
};
|
|
//增加其他参数
|
const handleAddClick = () => {
|
form.addFomList.push({ name: '', value: '' });
|
};
|
|
//减少其他参数
|
const handleDelInput = (index) => {
|
form.addFomList.splice(index, 1);
|
};
|
const handleCancel = () => {
|
addPageModelVisible.value = false;
|
};
|
|
const handleOpened = (el) => {
|
Object.assign(form, {
|
name: '', // 用户名
|
nameJoin: '', // 昵称
|
post: '', // 岗位
|
txt: '', // 备注
|
});
|
form_ref.value?.resetFields();
|
};
|
|
const file = ref();
|
|
const onChange = (_, currentFile) => {
|
file.value = {
|
...currentFile,
|
// url: URL.createObjectURL(currentFile.file),
|
};
|
};
|
const onProgress = (currentFile) => {
|
file.value = currentFile;
|
};
|
|
//获取详情
|
const getDetail = async () => {
|
const data = await getLlmDetail(
|
editList.value.llm_factory,
|
editList.value.name
|
);
|
|
form.llm_name = data.data.llm_name;
|
form.model_type = data.data.model_type;
|
form.volc_ak = data.data.volc_ak;
|
form.volc_sk = data.data.volc_sk;
|
form.api_base = data.data.api_base;
|
form.raptor = data.data.raptor;
|
form.urlS = data.data.logo;
|
if (JSON.parse(data.data.all_params).length > 0) {
|
form.addFomList = JSON.parse(data.data.all_params).map((item) => {
|
return { name: item.split(':')[0], value: item.split(':')[1] };
|
});
|
}
|
|
imageUrls.value = data.data.logo;
|
};
|
|
watchEffect(() => {
|
if (props.editList.name) {
|
getDetail();
|
}
|
});
|
</script>
|
<style scoped lang="less">
|
.addInput {
|
display: flex;
|
width: 100%;
|
}
|
</style>
|
