sxyanzhu
/
AIManage
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update code

main
haha 2024-07-18 00:13:00 +08:00
parent 624b6b1575
commit 0bb7e4401c
4 changed files with 439 additions and 231 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/api/inference/index.js 100644
View File

@ -0,0 +1,22 @@
import request from "@/utils/request";
const doCompile=(data)=>{
return request({
url:'/inference/compile',
method:'post',
data:data
})
}
const doDeploy=(data)=>{
return request({
url:'/inference/deploy',
method:'post',
data:data
})
}
export default{
doCompile,
doDeploy
}

12
src/api/log/index.js
View File

@ -12,7 +12,17 @@ const userOperationNotice=()=>{
method: "get" method: "get"
}); });
} }
//获取用户操作详情
const userOperation=(operation_id)=>{
return request({
url: `/logs/user_operation/${operation_id}`,
method: "get"
});
}
export default { export default {
serverState, serverState,
userOperationNotice userOperationNotice,
userOperation
} }

278
src/views/simulationEvaluation/addStep3.vue
View File

@ -1,134 +1,202 @@
<template> <template>
<el-card style="margin-top:12px" class="simulation-add-add-step31"> <el-card style="margin-top: 12px" class="simulation-add-add-step31">
<template #header>已选择模型</template> <template #header>已选择模型</template>
<el-row class="model-info"> <el-row class="model-info">
<el-col :span="8"> <el-col :span="8">
<span>模型名称:</span> <span>模型名称:</span>
<span>{{ modelInfo.model_name }}</span> <span>{{ modelInfo.model_name }}</span>
</el-col> </el-col>
<el-col :span="8"> <el-col :span="8">
<span>模型类型:</span> <span>模型类型:</span>
<span>{{ modelInfo.modl_main_type_name+"/"+modelInfo.modl_sub_type_name }}</span> <span>{{
</el-col> modelInfo.modl_main_type_name + "/" + modelInfo.modl_sub_type_name
<el-col :span="8"> }}</span>
<span>互联名称:</span> </el-col>
<span>{{ modelInfo.connection_name }}</span> <el-col :span="8">
</el-col> <span>互联名称:</span>
</el-row> <span>{{ modelInfo.connection_name }}</span>
</el-card> </el-col>
<el-card style="margin-top:12px;position: relative;" class="simulation-add-add-step32"> </el-row>
<template #header> </el-card>
<span>设备选择</span> <el-card style="margin-top: 12px; position: relative" class="simulation-add-add-step32">
<el-form ref="queryFormRef" :inline="true" <template #header>
style="flex-grow: 1;text-align: right;position: absolute;top:4px;right:0px;"> <span>设备选择</span>
<el-form-item> <el-form ref="queryFormRef" :inline="true" style="
<el-button type="primary" @click="handleQuery"><i-ep-refresh />刷新</el-button> flex-grow: 1;
</el-form-item> text-align: right;
</el-form> position: absolute;
top: 4px;
right: 0px;
">
<el-form-item>
<el-button type="primary" @click="handleQuery">
<i-ep-refresh />刷新</el-button>
</el-form-item>
</el-form>
</template>
<el-table v-loading="loading" ref="dataTb" :data="info.tableData" stripe @row-click="doRowClick">
<el-table-column width="55">
<template #default="scope">
<el-checkbox v-model="scope.row.checked" :disabled="!scope.row.available" />
</template> </template>
</el-table-column>
<el-table-column label="设备名称" align="left" prop="device_name" />
<el-table-column label="AI芯片信息" align="left" prop="hardware_chip" />
<el-table-column label="已部署模型名称" align="left" prop="deployed_model_name" width="120" />
<el-table-column label="已部署模型网络类型" align="left" prop="deployed_model_net_type" />
<el-table-column label="部署时间" align="left" prop="deployed_time" width="160" />
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160">
<template #default="scope">
<span class="args-state state-2">{{
scope.row.tool_params_name ? scope.row.tool_params_name : "请选择"
}}</span>
</template>
</el-table-column>
<el-table-column label="设备状态" align="center" width="100">
<template #default="scope">
<span :class="'device-state state-'">{{
scope.row.available ? "可用" : "不可用"
}}</span>
</template>
</el-table-column>
</el-table>
<div v-if="info.state > 0" class="remark"></div>
</el-card>
<el-table v-loading="loading" ref="dataTb" :data="info.tableData" stripe @row-click="doRowClick"> <div style="margin-top: 12px;font-size: 12px;font-weight: bold;margin-left: 8px;">
<el-table-column type="selection" width="55" /> 编译结果
<el-table-column label="设备名称" align="left" prop="device_name" /> </div>
<el-table-column label="AI芯片信息" align="left" prop="hardware_chip" /> <el-card style="" class="simulation-add-add-step33">
<el-table-column label="已部署模型名称" align="left" prop="deployed_model_name" width="120" /> <div class="scroll log-content">
<div v-for="(it, idx) in info.logs" :key="idx" class="log-item" :class="it.type">
<el-table-column label="已部署模型网络类型" align="left" prop="deployed_model_net_type" /> {{ it.msg }}
<el-table-column label="互联名称" align="left" prop="connection_name" width="120" /> </div>
<el-table-column label="部署时间" align="left" prop="deployed_time" width="160" /> </div>
<el-table-column label="量化和编译参数" align="left" prop="tool_params_name" width="160"> </el-card>
<template #default="scope">
<span class="args-state state-2">{{ scope.row.tool_params_name ? scope.row.tool_params_name : '请选择'
}}</span>
</template>
</el-table-column>
<el-table-column label="设备状态" align="center" width="100">
<template #default="scope">
<span :class="'device-state state-'">{{
scope.row.available? '可用' : '不可用' }}</span>
</template>
</el-table-column>
</el-table>
</el-card>
<div style="margin-top:12px;font-size:12px;font-weight: bold;margin-left:8px;">编译结果</div>
<el-card style="" class="simulation-add-add-step33">
</el-card>
</template> </template>
<script setup> <script setup>
import taskApi from '@/api/task' import taskApi from "@/api/task";
let dataTb = ref() const props = defineProps({
modelInfo: {
type: Object,
require: true,
default: null,
},
});
let dataTb = ref();
const loading = ref(false); // 加载状态 const loading = ref(false); // 加载状态
const doRowClick = (row) => { const doRowClick = (row, a, b) => {
dataTb.value.toggleRowSelection(row) if (b.target.classList.contains("el-checkbox__inner")) {
} return;
const info=reactive({ }
tableData:[] if (row.available) {
}) row.checked = !row.checked;
}
};
const info = reactive({
tableData: [],
state: 0,
logs: [],
});
const props = defineProps({
modelInfo: {
type: Object,
require: true,
default: null
}
})
/** 查询 */ /** 查询 */
function handleQuery() { function handleQuery() {
loading.value = true; loading.value = true;
let m=props.modelInfo; let m = props.modelInfo;
taskApi.availableDevices({ taskApi
connection_id:m.connection_id, .availableDevices({
model_id:m.model_id connection_id: m.connection_id,
}).then(d=>{ model_id: m.model_id,
loading.value=false; })
info.tableData=(d.data.data.available_device_list||[]).map(it=>{ .then((d) => {
it.id=it.device_id; loading.value = false;
return it; info.tableData = (d.data.data.available_device_list || []).map((it) => {
}); it.id = it.device_id;
it.checked = false;
return it;
});
}); });
} }
const checkForm = () => { const checkForm = () => {
let rows = info.dataTb.getSelectionRows(); let rows = info.tableData.filter((d) => d.checked);
return rows.length == 0 ? null : rows; return rows.length == 0 ? null : rows;
}; };
onMounted(()=>{ const updateState = (s) => {
handleQuery(); info.state = s;
};
const updateLogs = (logs) => {
info.logs = logs;
};
onMounted(() => {
handleQuery();
}); });
defineExpose({ defineExpose({
checkForm checkForm,
}) updateState,
updateLogs,
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.model-info { .model-info {
font-size: 12px;
color: #666;
}
.remark {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: #00000033;
z-index: 99;
}
.log-content {
max-height: 200px;
overflow-y: auto;
.log-item {
font-size: 12px; font-size: 12px;
color: #666; color: #666;
border-bottom: dotted 1px #ccc;
line-height: 24px;
&.info {
color: var(--el-color-primary);
}
&.success {
color: var(--el-color-success);
}
}
} }
</style> </style>
<style lang='scss'> <style lang="scss">
.simulation-add-add-step32 { .simulation-add-add-step32 {
.device-state { .device-state {
&.state-1 { &.state-1 {
color: var(--el-color-primary); color: var(--el-color-primary);
}
&.state-2 {
color:var(--el-color-success);
}
} }
.args-state{
&.state-2{ &.state-2 {
color: var(--el-color-primary); color: var(--el-color-success);
}
} }
.result-state{ }
color:var(--el-color-danger);
.args-state {
&.state-2 {
color: var(--el-color-primary);
} }
}
.result-state {
color: var(--el-color-danger);
}
} }
</style> </style>

358
src/views/simulationEvaluation/addTask.vue
View File

@ -1,161 +1,269 @@
<template> <template>
<div class="app-container simulation-add-task"> <div class="app-container simulation-add-task">
<el-card class="card-step"> <el-card class="card-step">
<el-steps style="width: 900px;max-width: 900px;" :space="200" :active="active" finish-status="success"> <el-steps style="width: 900px;max-width: 900px;" :space="200" :active="active" finish-status="success">
<el-step title="Step1" :class="active == 0 ? 'active' : ''" description="评估基本信息填写" /> <el-step title="Step1" :class="active == 0 ? 'active' : ''" description="评估基本信息填写" />
<el-step title="Step2" :class="active == 1 ? 'active' : ''" description="选择模型" /> <el-step title="Step2" :class="active == 1 ? 'active' : ''" description="选择模型" />
<el-step title="Step3" :class="active == 2 ? 'active' : ''" description="选择设备" /> <el-step title="Step3" :class="active == 2 ? 'active' : ''" description="选择设备" />
<el-step title="Step4" :class="active == 3 ? 'active' : ''" description="评估数据集选择" /> <el-step title="Step4" :class="active == 3 ? 'active' : ''" description="评估数据集选择" />
</el-steps> </el-steps>
</el-card> </el-card>
<div style="margin-bottom:100px;" class="card-content"> <div style="margin-bottom:100px;" class="card-content">
<addStep1 ref="step1" v-if="active == 1" /> <addStep1 ref="step1" v-if="active == 1" />
<addStep2 ref="step2" v-if="active == 2"/> <addStep2 ref="step2" v-if="active == 2" />
<addStep3 ref="step3" v-if="active == 3" :modelInfo="modelInfo"/> <addStep3 ref="step3" v-if="active == 3" :modelInfo="modelInfo" />
<addStep4 ref="step4" v-if="active == 4" /> <addStep4 ref="step4" v-if="active == 4" />
</div>
<el-card class="card-footer">
<el-button type="primary" v-if="active == 3" @click="doCompile">编译部署</el-button>
<el-button type="primary" v-if="active == 4" @click="doStart">开始</el-button>
<el-button type="primary" v-if="active > 0 && active <= 4" @click="doPrev">上一步</el-button>
<el-button @click="doNext" v-if="active < 4">下一步</el-button>
</el-card>
</div> </div>
<el-card class="card-footer">
<el-button type="primary" v-if="active == 3 && state == 0" @click="doCompile">编译部署</el-button>
<el-button type="primary" v-if="active == 3 && state == 1" loading disabled>编译中...</el-button>
<el-button type="primary" v-if="active == 3 && state == 2" loading disabled>部署中...</el-button>
<el-button type="primary" v-if="active == 4" @click="doStart">开始</el-button>
<el-button type="primary" v-if="active > 0 && active <= 4 && active != 3" @click="doPrev">上一步</el-button>
<template v-if="active == 3 && (state == 0 || state == 3)">
<el-button type="primary" @click="doPrev">上一步</el-button>
</template>
<template v-if="active == 3 && state == 3">
<el-button @click="doNext">下一步</el-button>
</template>
<el-button @click="doNext" v-if="active < 3">下一步</el-button>
</el-card>
</div>
</template> </template>
<script setup> <script setup>
import inferenceApi from '@/api/inference'
import logsApi from '@/api/log'
import request from 'axios'
import addStep1 from './addStep1.vue' import addStep1 from './addStep1.vue'
import addStep2 from './addStep2.vue' import addStep2 from './addStep2.vue'
import addStep3 from './addStep3.vue' import addStep3 from './addStep3.vue'
import addStep4 from './addStep4.vue' import addStep4 from './addStep4.vue'
const router = useRouter(); const router = useRouter();
const active = ref(1) const active = ref(1)
const step1=ref() const step1 = ref()
const step2=ref() const step2 = ref()
const step3=ref() const step3 = ref()
const step4=ref() const step4 = ref()
let taskInfo=reactive({}); let modelInfo = reactive({});
let modelInfo=reactive({}); let state = ref(0);
let devices=reactive([]);
let datas=reactive({});
let info = reactive({
devices: [],
taskInfo: null,
optIds: [],
logs: [],
})
const doStart = () => { const doStart = () => {
let tmp=step4.value.checkForm(); let tmp = step4.value.checkForm();
if(tmp){ if (tmp) {
datas=tmp; datas = tmp;
ElMessage.success("开始执行!"); ElMessage.success("开始执行!");
setTimeout(()=>{ setTimeout(() => {
router.push({ path: "/simulationEvaluation/execution" }); router.push({ path: "/simulationEvaluation/execution" });
},1000); }, 1000);
}else{ } else {
ElMessage.error("请选择数据集!"); ElMessage.error("请选择数据集!");
} }
} }
const doCompile = () => { const doCompile = () => {
let tmp=step3.value.checkForm(); let tmp = step3.value.checkForm();
if(tmp){ if (tmp) {
devices=tmp; info.devices = tmp;
ElMessage.success("开始编译部署!"); state.value = 1;
}else{ step3.value.updateState(state.value);
ElMessage.error("请选择设备!"); startComplie();//开始编译
} //ElMessage.success("开始编译部署!");
} else {
ElMessage.error("请选择设备!");
}
} }
//开始编译
const startComplie = () => {
let ajaxs = info.devices.map(d => {
return inferenceApi.doCompile({
model_id: modelInfo.model_id,
modl_net_type: modelInfo.modl_net_type,
tool_params_id: d.tool_params_id,
device_id: d.device_id
});
})
addLogs({ msg: "开始编译....", type: "info" })
request.all(ajaxs).then(d => {
info.optIds = d.map(it => {
return {
id: it.data.data.operation_id, //op_id
state: 0 //状态 1为完成
}
});
doGetComplieLogs();//获取编译日志
});
};
const addLogs = msg => {
info.logs = [msg, ...info.logs];
step3.value.updateLogs(info.logs);
}
//获取编译日志
const doGetComplieLogs = () => {
let ajaxs = info.optIds.filter(d => d.state == 0).map(o => {
return logsApi.userOperation(o.id);
})
request.all(ajaxs).then(d => {
d.forEach((it, idx) => {
let msg = it.data.data;
addLogs({ msg: msg.operation_result });
info.optIds[idx].state = msg.operation_finished ? 1 : 0;
});
if (info.optIds.filter(d => d.state == 0).length > 0) {
setTimeout(doGetComplieLogs, 2000);
} else {
doDeploy();
}
});
}
const doDeploy = () => {
state.value = 2;
step3.value.updateState(state.value);
addLogs({ msg: "开始部署....", type: 'info' })
let ajaxs = info.devices.map(d => {
return inferenceApi.doDeploy({
model_id: modelInfo.model_id,
modl_net_type: modelInfo.modl_net_type,
device_id: d.device_id
});
});
request.all(ajaxs).then(d => {
info.optIds = d.map(it => {
return {
id: it.data.data.operation_id, //op_id
state: 0 //状态 1为完成
}
});
doGetDeployLogs();//获取编译日志
})
};
const doGetDeployLogs = () => {
let ajaxs = info.optIds.filter(d => d.state == 0).map(o => {
return logsApi.userOperation(o.id);
})
request.all(ajaxs).then(d => {
d.forEach((it, idx) => {
let msg = it.data.data;
addLogs({ msg: msg.operation_result });
info.optIds[idx].state = msg.operation_finished ? 1 : 0;
});
if (info.optIds.filter(d => d.state == 0).length > 0) {
setTimeout(doGetDeployLogs, 2000);
} else {
addLogs({ msg: "编译部署完成", type: 'success' })
state.value = 3;
step3.value.updateState(state.value);
}
});
};
const doPrev = () => { const doPrev = () => {
active.value--; active.value--;
if (active.value == 3) {
state.value = 0;
info.logs = [];
info.optIds = [];
}
} }
const doNext = () => { const doNext = () => {
if(active.value==1){ if (active.value == 1) {
step1.value.checkForm().then(d=>{ step1.value.checkForm().then(d => {
if(d){ if (d) {
taskInfo=step1.value.getFormData(); info.taskInfo = step1.value.getFormData();
active.value++;
}
});
}else if(active.value==2){
let tmp=step2.value.checkForm();
if(tmp){
modelInfo=tmp;
active.value++;
}else{
ElMessage.error("请选择模型!");
}
}else if(active.value==3){
let tmp=step3.value.checkForm();
if(tmp){
devices=tmp;
active.value++;
}else{
ElMessage.error("请选择设备!");
}
}else if(active.value==4){
}else{
active.value++; active.value++;
}
});
} else if (active.value == 2) {
let tmp = step2.value.checkForm();
if (tmp) {
modelInfo = tmp;
state.value = 0;
info.logs = [];
info.optIds = [];
active.value++;
} else {
ElMessage.error("请选择模型!");
} }
} else if (active.value == 3) {
active.value++;
} else if (active.value == 4) {
} else {
active.value++;
}
} }
</script> </script>
<style lang='scss'> <style lang='scss'>
.simulation-add-task { .simulation-add-task {
.card-step { .card-step {
.el-card__body { .el-card__body {
padding-left: 100px; padding-left: 100px;
display: flex; display: flex;
justify-content: center; justify-content: center;
.el-steps { .el-steps {
flex-grow: 1; flex-grow: 1;
margin-left: 100px; margin-left: 100px;
.el-step { .el-step {
&.active {} &.active {}
.el-step__main { .el-step__main {
position: relative; position: relative;
.el-step__title { .el-step__title {
display: inline-block; display: inline-block;
width: 150px; width: 150px;
text-align: center; text-align: center;
padding: 0px; padding: 0px;
position: relative; position: relative;
left: -65px; left: -65px;
}
.el-step__description {
display: inline-block;
width: 150px;
text-align: center;
padding: 0px;
position: relative;
left: -65px;
}
}
}
} }
}
}
.card-content { .el-step__description {
.el-card__header { display: inline-block;
padding: 8px 12px; width: 150px;
display: flex; text-align: center;
align-items: center; padding: 0px;
font-weight: bold; position: relative;
} left: -65px;
}
.card-footer {
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body) {
padding: 10px;
.el-pagination {
justify-content: end;
} }
}
} }
}
} }
}
.card-content {
position: relative;
.el-card__header {
padding: 8px 12px;
display: flex;
align-items: center;
font-weight: bold;
}
}
.card-footer {
position: fixed;
width: calc(100% - 215px);
bottom: 0px;
:deep(.el-card__body) {
padding: 10px;
.el-pagination {
justify-content: end;
}
}
}
} }
</style> </style>