update code

main
haha 2024-07-07 00:09:42 +08:00
parent ca6becb79e
commit 1ce4aa9f12
2 changed files with 227 additions and 151 deletions

View File

@ -8,47 +8,61 @@
<tr> <tr>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">模型名称:</span> <span class="sp-title">模型名称:</span>
<span class="sp-text">目标分类模型</span> <span class="sp-text">{{modelInfo.info.model_name}}</span>
</td> </td>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">模型类型:</span> <span class="sp-title">模型类型:</span>
<span class="sp-text">目标分类</span> <span class="sp-text">{{modelInfo.info.modl_main_type_name}}
/{{modelInfo.info.modl_sub_type_name}}
</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">模型版本:</span> <span class="sp-title">模型版本:</span>
<span class="sp-text">1.0</span> <span class="sp-text">
{{modelInfo.info.model_version}}
</span>
</td> </td>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">版本描述:</span> <span class="sp-title">版本描述:</span>
<span class="sp-text">进行10中类型的目标分类建模和一些其他操作</span> <span class="sp-text">
{{modelInfo.info.model_desc}}
</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">模型网络:</span> <span class="sp-title">模型网络:</span>
<span class="sp-text">目标分类</span> <span class="sp-text">
{{modelInfo.info.modl_net_type}}
</span>
</td> </td>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">上传用户:</span> <span class="sp-title">上传用户:</span>
<span class="sp-text">王大大</span> <span class="sp-text"> {{modelInfo.info.user_name}}</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">算法框架:</span> <span class="sp-title">算法框架:</span>
<span class="sp-text">ONNX</span> <span class="sp-text">
{{modelInfo.info.modl_framework}}
</span>
</td> </td>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">上传时间:</span> <span class="sp-title">上传时间:</span>
<span class="sp-text">2023-12-12 12:12:12</span> <span class="sp-text">
{{modelInfo.info.create_time}}
</span>
</td> </td>
</tr> </tr>
<tr> <tr>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">文件格式:</span> <span class="sp-title">文件格式:</span>
<span class="sp-text">ONNX</span> <span class="sp-text">
{{modelInfo.info.modl_file_type}}
</span>
</td> </td>
<td style="width: 50%;"> <td style="width: 50%;">
<span class="sp-title">网络配置:</span> <span class="sp-title">网络配置:</span>
@ -62,10 +76,8 @@
<el-card style="margin-top: 12px;"> <el-card style="margin-top: 12px;">
<template #header> <template #header>
<svg-icon icon-class="pause" style="width:20px;height:20px;" />可适配算子</template> <svg-icon icon-class="pause" style="width:20px;height:20px;" />可适配算子</template>
<el-button>前处理-GRAY图像格式</el-button> <el-button v-for="(it,idx) in modelInfo.opers" :key="idx">{{ it.oper_type_name }}</el-button>
<el-button>前处理-GRAY图像格式</el-button>
<el-button>前处理-GRAY图像格式</el-button>
<el-button>前处理-RGB24图像格式</el-button>
</el-card> </el-card>
<el-card style="margin-top: 12px;margin-bottom:60px;"> <el-card style="margin-top: 12px;margin-bottom:60px;">
<template #header> <template #header>
@ -82,11 +94,28 @@
</template> </template>
<script setup> <script setup>
import ModelApi from '@/api/models'
import request from 'axios'
const router = useRouter(); const router = useRouter();
const route =useRoute() const route =useRoute()
let url=ref("") let url=ref("")
let modelInfo=reactive({
info:{},
opers:[]
})
const initData=()=>{
let id=route.query.id;
let ajaxs=[];
ajaxs.push(ModelApi.findOne(id))
ajaxs.push(ModelApi.adaptOperators(id));
request.all(ajaxs).then(res=>{
modelInfo.info=res[0].data?.data||{};
modelInfo.opers=res[1].data?.data?.adapt_operator_list||[];
});
};
onMounted(()=>{ onMounted(()=>{
url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx" url.value="./onnx/onnx.html?url=/ai/siamRPN_192.onnx";
initData();
}); });
const doBack=()=>{ const doBack=()=>{
if(route.query.from=='simulation'){ if(route.query.from=='simulation'){
@ -109,6 +138,9 @@ const doBack=()=>{
} }
.tb-base-info{ .tb-base-info{
line-height: 30px; line-height: 30px;
:deep(span){
font-size: 14px;
}
} }
:deep(.svg-icon){ :deep(.svg-icon){
margin-right:8px; margin-right:8px;

View File

@ -2,162 +2,206 @@
<div class="app-container"> <div class="app-container">
<div class="search-container" style="padding-top:4px;"> <div class="search-container" style="padding-top:4px;">
<h4>模型基本信息</h4> <h4>模型基本信息</h4>
<el-form ref="uploadForm" :model="upForm" label-width="120" > <el-form ref="uploadForm" :rules="upRules" :model="upForm" label-width="120">
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="模型名称"> <el-form-item label="模型名称" prop="model_name">
<el-input v-model="upForm.name" placeholder="请输入模型名称"/> <el-input v-model="upForm.model_name" placeholder="请输入模型名称" />
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="模型类型"> <el-form-item label="模型类型" prop="modl_main_type">
<el-select v-model="upForm.mtype1" placeholder="请选择" style="width: 48%"> <el-select v-model="upForm.modl_main_type" placeholder="请选择" style="width: 48%"
<el-option label="VIT" value="VIT" /> @change="doMainTypeChange">
<el-option label="Mobile-VIT" value="Mobile-VIT" /> <el-option v-for="(it, idx) in listOpt.modelType" :key="idx"
</el-select> :label="it.modl_main_type_name" :value="it.modl_main_type" />
<el-select v-model="upForm.mtype2" placeholder="请选择" style="width: 48%;margin-left:2%;"> </el-select>
<el-option label="YoloV7Small" value="YoloV7Small" /> <el-select v-model="upForm.modl_sub_type" placeholder="请选择"
<el-option label="YoloV7 Tiny" value="YoloV7 Tiny" /> style="width: 48%;margin-left:2%;">
</el-select> <el-option v-for="(it, idx) in listOpt.modelSubType" :key="idx"
</el-form-item> :label="it.modl_sub_type_name" :value="it.modl_sub_type" />
</el-col> </el-select>
</el-row> </el-form-item>
<el-row> </el-col>
<el-col :span="12"> </el-row>
<el-form-item label="模型版本"> <el-row>
<el-input v-model="upForm.ver" placeholder="请输入模型版本"/> <el-col :span="12">
</el-form-item> <el-form-item label="模型版本" prop="model_version">
</el-col> <el-input v-model="upForm.model_version" placeholder="请输入模型版本" />
<el-col :span="12"> </el-form-item>
<el-form-item label="版本描述"> </el-col>
<el-input v-model="upForm.desc" type="textarea" style="width:100%;" :rows="4" placeholder="请输入版本描述"/> <el-col :span="12">
</el-form-item> <el-form-item label="版本描述">
</el-col> <el-input v-model="upForm.desc" type="textarea" style="width:100%;" :rows="4"
placeholder="请输入版本描述" />
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="算法框架"> <el-form-item label="算法框架" prop="modl_framework">
<el-select v-model="upForm.framework" placeholder="请选择" style="width: 48%;margin-left:2%;"> <el-select v-model="upForm.modl_framework" placeholder="请选择"
<el-option label="PyToRch" value="PyToRch" /> style="width: 48%;margin-left:2%;">
<el-option label="oCcn" value="oCcn" /> <el-option v-for="(it, idx) in listOpt.modelFramework" :label="it" :value="it"
</el-select> :key="idx" />
</el-form-item> </el-select>
</el-col> </el-form-item>
<el-col :span="12"> </el-col>
<el-form-item label="模型网络"> <el-col :span="12">
<el-select v-model="upForm.network" placeholder="请选择" style="width: 48%;margin-left:2%;"> <el-form-item label="模型网络" prop="modl_net_type">
<el-option label="yolov7_tiny" value="yolov7_tiny" /> <el-select v-model="upForm.modl_net_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
<el-option label="yolov5_s" value="yolov5_s" /> <el-option v-for="(it,idx) in listOpt.modelNetType" :label="it" :value="it" :key="idx" />
<el-option label="yolov5_m" value="yolov5_m" />
<el-option label="yolov5_" value="yolov5_" /> </el-select>
<el-option label="yolox_s" value="yolox_s" /> </el-form-item>
<el-option label="yolox_m" value="yolox_m" /> </el-col>
<el-option label="yolox_l" value="yolox_l" />
</el-select>
</el-form-item>
</el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="文件格式"> <el-form-item label="文件格式" prop="modl_file_type">
<el-select v-model="upForm.fileFormat" placeholder="请选择" style="width: 48%;margin-left:2%;"> <el-select v-model="upForm.modl_file_type" placeholder="请选择" style="width: 48%;margin-left:2%;">
<el-option label="onnx" value="onnx" /> <el-option v-for="(it,idx) in listOpt.modelFileType" :label="it" :value="it" :key="idx" />
<el-option label="pth" value="pth" /> </el-select>
<el-option label="pt" value="pt" /> </el-form-item>
</el-select> </el-col>
</el-form-item> <el-col :span="12">
</el-col>
<el-col :span="12">
</el-col>
</el-row> </el-col>
<el-row>
<el-col :span="12">
<el-form-item label="网络参数">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:limit="1"
>
<el-button type="primary">请选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
请上传大小不超过<span style="color:coral">10M</span>,格式为<span style="color:coral">onnx/ts</span>的文件
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="网络配置">
<el-upload
v-model:file-list="fileList"
class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
:limit="1"
>
<el-button type="primary">请选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
请上传大小不超过<span style="color:coral">10M</span>,格式为<span style="color:coral">json</span>的文件
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> <el-row>
<el-col :span="12">
<el-form-item label="网络参数">
<el-upload v-model:file-list="fileList" class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1">
<el-button type="primary">请选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
请上传大小不超过<span style="color:coral">10M</span>,格式为<span
style="color:coral">onnx/ts</span>的文件
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="网络配置">
<el-upload v-model:file-list="fileList" class="upload-demo"
action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1">
<el-button type="primary">请选择文件</el-button>
<template #tip>
<div class="el-upload__tip">
请上传大小不超过<span style="color:coral">10M</span>,格式为<span
style="color:coral">json</span>的文件
</div>
</template>
</el-upload>
</el-form-item>
</el-col>
</el-row>
</el-form>
</div> </div>
<div class="div-log"> <div class="div-log">
<div style="font-weight: bold;font-size:14px;padding:10px 10px">分割日志</div> <div style="font-weight: bold;font-size:14px;padding:10px 10px">分割日志</div>
<el-card class="split-log"> <el-card class="split-log">
<div v-for="(it,idx) in logList" :key="idx" class="log-item"> <div v-for="(it, idx) in logList" :key="idx" class="log-item">
<span>{{ it.date }}</span> <span>{{ it.date }}</span>
<span>{{it.log}}</span> <span>{{ it.log }}</span>
</div> </div>
</el-card> </el-card>
</div> </div>
<el-card class="card-footer"> <el-card class="card-footer">
<el-button type="primary" @click="doSave"></el-button> <el-button type="primary" @click="doSave"></el-button>
<el-button @click="doBack"></el-button> <el-button @click="doBack"></el-button>
</el-card> </el-card>
</div> </div>
</template> </template>
<script setup> <script setup>
import ConstApi from '@/api/const'
import request from "axios";
const router = useRouter(); const router = useRouter();
const doSave=()=>{ let listOpt = reactive({
router.replace({path:"/modelMgr/index"}) modelType: [],
} modelFramework: [],
const doBack=()=>{ modelNetType: [],
router.replace({path:"/modelMgr/index"}) modelFileType: [],
} modelSubType: [],
const uploadForm=ref(ElForm)
const upForm=reactive({
name:''
}) })
const logList=reactive([{ const doSave = () => {
date:'2024-05-06 18:34:36',log:'系统已启动编译' router.replace({ path: "/modelMgr/index" })
},{date:'2024-05-06 18:34:36',log:'系统正在分割目标文件'}, }
{date:'2024-05-06 18:34:36',log:'运行时异常,系统编译已终止'}]) const doBack = () => {
router.replace({ path: "/modelMgr/index" })
}
const uploadForm = ref(ElForm)
let upForm = reactive({
model_name: '',
model_version: '',
model_desc: '',
modl_main_type: '',
modl_sub_type: '',
modl_net_type: '',
modl_framework: '',
modl_file_type: '',
model_parameters: {},
model_file_list: []
})
const logList = reactive([{
date: '2024-05-06 18:34:36', log: '系统已启动编译'
}, { date: '2024-05-06 18:34:36', log: '系统正在分割目标文件' },
{ date: '2024-05-06 18:34:36', log: '运行时异常,系统编译已终止' }])
const upRules = computed(() => {
return {
model_name: [{required: true,trigger: "blur",message: "请输入模型名称",},],
modl_main_type: [{required: true,trigger: "blur",message: "请选择主类型",}],
model_version: [{required: true,trigger: "blur",message: "请输入模型版本",}],
modl_framework: [{required: true,trigger: "blur",message: "请选择算法框架",}],
modl_net_type: [{required: true,trigger: "blur",message: "请选择模型网络",}],
modl_file_type: [{required: true,trigger: "blur",message: "请选择文件类型",}],
}
});
const initData = () => {
let ajaxs = [];
ajaxs.push(ConstApi.modlMainType());
ajaxs.push(ConstApi.modlFramework());
ajaxs.push(ConstApi.modlNetType());
ajaxs.push(ConstApi.modlFileType());
request.all(ajaxs).then(res => {
listOpt.modelType = res[0].data?.data?.modl_main_type_list || [];
listOpt.modelFramework = res[1].data?.data?.modl_framework_list || [];
listOpt.modelNetType = res[2].data?.data?.model_net_type_list || [];
listOpt.modelFileType = res[3].data?.data?.modl_file_type_list || [];
});
}
const doMainTypeChange = () => {
let mainType = upForm.modl_main_type;
let subList = listOpt.modelType.filter(d => d.modl_main_type == mainType);
listOpt.modelSubType = subList.length > 0 ? subList[0].modl_sub_type_list || [] : [];
}
onMounted(() => {
initData();
});
</script> </script>
<style scoped lang='scss'> <style scoped lang='scss'>
.card-footer{ .card-footer {
position: fixed; position: fixed;
width: calc(100% - 215px); width: calc(100% - 215px);
bottom: 0px; bottom: 0px;
} }
.div-log{
font-size:12px; .div-log {
:deep(.el-card__body){ font-size: 12px;
padding:8px;
} :deep(.el-card__body) {
padding: 8px;
}
} }
</style> </style>