Pyodide里的Tensorflow目录
可以跑通基本的训练、使用模型过程
This commit is contained in:
RXXXBNUer
@@ -1,11 +1,20 @@
|
||||
<script setup>
|
||||
// import * as mobilenet from "@tensorflow-models/mobilenet";
|
||||
import * as tf from '@tensorflow/tfjs';
|
||||
import * as tfvis from '@tensorflow/tfjs-vis';
|
||||
import * as path from 'path';
|
||||
import { inject, ref } from 'vue';
|
||||
import { ElMessage, ElButton, ElCard, ElRow, ElCol, ElInput, ElProgress, ElUpload } from 'element-plus';
|
||||
import { Env } from 'mixly';
|
||||
import * as tf from "@tensorflow/tfjs";
|
||||
import * as tfvis from "@tensorflow/tfjs-vis";
|
||||
import * as path from "path";
|
||||
import { inject, ref } from "vue";
|
||||
import {
|
||||
ElMessage,
|
||||
ElButton,
|
||||
ElCard,
|
||||
ElRow,
|
||||
ElCol,
|
||||
ElInput,
|
||||
ElProgress,
|
||||
ElUpload,
|
||||
} from "element-plus";
|
||||
import { Env } from "mixly";
|
||||
|
||||
// import 'element-plus/theme-chalk/el-message.css';
|
||||
// import 'element-plus/theme-chalk/el-button.css';
|
||||
@@ -16,459 +25,493 @@ import { Env } from 'mixly';
|
||||
// import 'element-plus/theme-chalk/el-progress.css';
|
||||
// import 'element-plus/theme-chalk/el-upload.css';
|
||||
|
||||
|
||||
const emit = defineEmits(['shot'])
|
||||
const emit = defineEmits(["shot"]);
|
||||
// 类别及其样本的列表
|
||||
const picList = inject('picList')
|
||||
const picList = inject("picList");
|
||||
// 图片列表
|
||||
const shotList = inject('shotList')
|
||||
const shotList = inject("shotList");
|
||||
// 训练状态
|
||||
const states = inject('states')
|
||||
const states = inject("states");
|
||||
|
||||
// 用来显示进度条和名称
|
||||
const classList = ref(
|
||||
picList.value.map((item, idx) => ({
|
||||
name: item.title,
|
||||
progress: 0,
|
||||
})),
|
||||
)
|
||||
const progressColors = ['#FF6F61', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC']
|
||||
picList.value.map((item, idx) => ({
|
||||
name: item.title,
|
||||
progress: 0,
|
||||
}))
|
||||
);
|
||||
const progressColors = ["#FF6F61", "#42A5F5", "#66BB6A", "#FFA726", "#AB47BC"];
|
||||
// 用来存储模型
|
||||
let featureExtractor
|
||||
let featureExtractor;
|
||||
// 用来存储损失值
|
||||
let lossValues = []
|
||||
let lossValues = [];
|
||||
// 存储被训练的模型
|
||||
let model
|
||||
let model;
|
||||
|
||||
// 单击训练按钮后训练模型
|
||||
async function train() {
|
||||
// 可视化相关
|
||||
const visPanel = document.getElementById('vis-left-panel')
|
||||
if (visPanel)
|
||||
visPanel.innerHTML = '训练准备中……'
|
||||
showVisPanel.value = true
|
||||
console.log('正在加载Mobilenet……')
|
||||
// net = await mobilenet.load();
|
||||
featureExtractor = await tf.loadGraphModel(path.join(Env.boardDirPath, 'teachableModel/model.json'))
|
||||
// 可视化相关
|
||||
const visPanel = document.getElementById("vis-left-panel");
|
||||
if (visPanel) visPanel.innerHTML = "训练准备中……";
|
||||
showVisPanel.value = true;
|
||||
console.log("正在加载Mobilenet……");
|
||||
// net = await mobilenet.load();
|
||||
featureExtractor = await tf.loadGraphModel(
|
||||
path.join(Env.boardDirPath, "teachableModel/model.json")
|
||||
);
|
||||
|
||||
console.log('Mobilenet加载完成。')
|
||||
if (visPanel)
|
||||
visPanel.innerHTML = ''
|
||||
console.log("Mobilenet加载完成。");
|
||||
if (visPanel) visPanel.innerHTML = "";
|
||||
|
||||
// 准备数据
|
||||
const NUM_CLASSES = picList.value.length
|
||||
let xs = null
|
||||
let ys = null
|
||||
// 准备模型
|
||||
model = tf.sequential()
|
||||
// 添加全连接层
|
||||
model.add(
|
||||
tf.layers.dense({
|
||||
inputShape: [1280],
|
||||
units: 128,
|
||||
activation: 'relu',
|
||||
}),
|
||||
)
|
||||
// 添加分类层
|
||||
model.add(
|
||||
tf.layers.dense({
|
||||
units: NUM_CLASSES,
|
||||
activation: 'softmax',
|
||||
}),
|
||||
)
|
||||
// 编译模型
|
||||
model.compile({
|
||||
optimizer: tf.train.adam(0.001),
|
||||
loss: 'categoricalCrossentropy',
|
||||
metrics: ['accuracy'],
|
||||
// 准备数据
|
||||
const NUM_CLASSES = picList.value.length;
|
||||
let xs = null;
|
||||
let ys = null;
|
||||
// 准备模型
|
||||
model = tf.sequential();
|
||||
// 添加全连接层
|
||||
model.add(
|
||||
tf.layers.dense({
|
||||
inputShape: [1280],
|
||||
units: 128,
|
||||
activation: "relu",
|
||||
})
|
||||
|
||||
for (let classId = 0; classId < picList.value.length; classId++) {
|
||||
if (picList.value[classId].disabled)
|
||||
continue
|
||||
const images = picList.value[classId].list
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
// 加载图片
|
||||
const imgElement = new Image()
|
||||
imgElement.src = images[i]
|
||||
await new Promise((resolve) => {
|
||||
imgElement.onload = resolve
|
||||
})
|
||||
// 将图片转化为张量
|
||||
const imgTensor = tf.browser.fromPixels(imgElement)
|
||||
|
||||
// 使用神经网络模型进行推理，获取名为"conv_preds"的卷积层激活值
|
||||
// let activation = net.infer(imgTensor, "conv_preds");
|
||||
// 加载特征提取器和你的模型
|
||||
|
||||
// 预处理图像并提取特征
|
||||
const preprocessedImg = imgTensor
|
||||
.resizeBilinear([224, 224])
|
||||
.toFloat()
|
||||
.div(tf.scalar(127.5))
|
||||
.sub(tf.scalar(1))
|
||||
.expandDims(0)
|
||||
|
||||
const features = featureExtractor.predict(preprocessedImg)
|
||||
|
||||
// 将特征输入你的模型
|
||||
// const predictions = net.predict(features);
|
||||
let activation = features
|
||||
// if (activation.shape.length === 3) {
|
||||
// activation = activation.reshape([1, 1024]);
|
||||
// }
|
||||
// let activation = net.predict(imgTensor);
|
||||
// 检查激活值张量的维度，如果是3维张量则进行形状重塑
|
||||
// 3维形状通常为 [height, width, channels]，重塑为 [1, 1024] 的张量
|
||||
// 为了适配后续分类层或特征可视化的输入要求
|
||||
|
||||
// 转换为one-hot编码
|
||||
const y = tf.oneHot(tf.tensor1d([classId]).toInt(), NUM_CLASSES)
|
||||
// 初始化xs和ys
|
||||
if (xs == null) {
|
||||
xs = activation.clone()
|
||||
ys = y.clone()
|
||||
}
|
||||
else {
|
||||
const oldXs = xs
|
||||
xs = oldXs.concat(activation, 0)
|
||||
oldXs.dispose()
|
||||
|
||||
const oldYs = ys
|
||||
ys = oldYs.concat(y, 0)
|
||||
oldYs.dispose()
|
||||
}
|
||||
y.dispose()
|
||||
imgTensor.dispose()
|
||||
}
|
||||
}
|
||||
|
||||
// 训练过程可视化相关
|
||||
lossValues = []
|
||||
const metrics = ['loss', 'acc', 'val_loss', 'val_acc', 'accuracy', 'val_accuracy']
|
||||
const container = document.getElementById('vis-left-panel') || {
|
||||
name: '训练过程',
|
||||
tab: '训练',
|
||||
}
|
||||
// 训练模型
|
||||
await model.fit(xs, ys, {
|
||||
epochs: 20,
|
||||
batchSize: 16,
|
||||
shuffle: true,
|
||||
validationSplit: 0.2,
|
||||
callbacks: tfvis.show.fitCallbacks(container, metrics, {
|
||||
callbacks: ['onEpochEnd'],
|
||||
}),
|
||||
);
|
||||
// 添加分类层
|
||||
model.add(
|
||||
tf.layers.dense({
|
||||
units: NUM_CLASSES,
|
||||
activation: "softmax",
|
||||
})
|
||||
console.log('训练完成')
|
||||
// 与显示进度条相关
|
||||
classList.value = picList.value
|
||||
.filter(item => item.disabled !== true)
|
||||
.map((item, idx) => ({
|
||||
name: item.title,
|
||||
progress: 0,
|
||||
}))
|
||||
console.log(classList.value)
|
||||
states.value.isTraining = 2
|
||||
);
|
||||
// 编译模型
|
||||
model.compile({
|
||||
optimizer: tf.train.adam(0.001),
|
||||
loss: "categoricalCrossentropy",
|
||||
metrics: ["accuracy"],
|
||||
});
|
||||
|
||||
for (let classId = 0; classId < picList.value.length; classId++) {
|
||||
if (picList.value[classId].disabled) continue;
|
||||
const images = picList.value[classId].list;
|
||||
for (let i = 0; i < images.length; i++) {
|
||||
// 加载图片
|
||||
const imgElement = new Image();
|
||||
imgElement.src = images[i];
|
||||
await new Promise((resolve) => {
|
||||
imgElement.onload = resolve;
|
||||
});
|
||||
// 将图片转化为张量
|
||||
const imgTensor = tf.browser.fromPixels(imgElement);
|
||||
|
||||
// 使用神经网络模型进行推理，获取名为"conv_preds"的卷积层激活值
|
||||
// let activation = net.infer(imgTensor, "conv_preds");
|
||||
// 加载特征提取器和你的模型
|
||||
|
||||
// 预处理图像并提取特征
|
||||
const preprocessedImg = imgTensor
|
||||
.resizeBilinear([224, 224])
|
||||
.toFloat()
|
||||
.div(tf.scalar(127.5))
|
||||
.sub(tf.scalar(1))
|
||||
.expandDims(0);
|
||||
|
||||
const features = featureExtractor.predict(preprocessedImg);
|
||||
|
||||
// 将特征输入你的模型
|
||||
// const predictions = net.predict(features);
|
||||
let activation = features;
|
||||
// if (activation.shape.length === 3) {
|
||||
// activation = activation.reshape([1, 1024]);
|
||||
// }
|
||||
// let activation = net.predict(imgTensor);
|
||||
// 检查激活值张量的维度，如果是3维张量则进行形状重塑
|
||||
// 3维形状通常为 [height, width, channels]，重塑为 [1, 1024] 的张量
|
||||
// 为了适配后续分类层或特征可视化的输入要求
|
||||
|
||||
// 转换为one-hot编码
|
||||
const y = tf.oneHot(tf.tensor1d([classId]).toInt(), NUM_CLASSES);
|
||||
// 初始化xs和ys
|
||||
if (xs == null) {
|
||||
xs = activation.clone();
|
||||
ys = y.clone();
|
||||
} else {
|
||||
const oldXs = xs;
|
||||
xs = oldXs.concat(activation, 0);
|
||||
oldXs.dispose();
|
||||
|
||||
const oldYs = ys;
|
||||
ys = oldYs.concat(y, 0);
|
||||
oldYs.dispose();
|
||||
}
|
||||
y.dispose();
|
||||
imgTensor.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
// 训练过程可视化相关
|
||||
lossValues = [];
|
||||
const metrics = ["loss", "acc", "val_loss", "val_acc", "accuracy", "val_accuracy"];
|
||||
const container = document.getElementById("vis-left-panel") || {
|
||||
name: "训练过程",
|
||||
tab: "训练",
|
||||
};
|
||||
// 训练模型
|
||||
await model.fit(xs, ys, {
|
||||
epochs: 20,
|
||||
batchSize: 16,
|
||||
shuffle: true,
|
||||
validationSplit: 0.2,
|
||||
callbacks: tfvis.show.fitCallbacks(container, metrics, {
|
||||
callbacks: ["onEpochEnd"],
|
||||
}),
|
||||
});
|
||||
console.log("训练完成");
|
||||
// 与显示进度条相关
|
||||
classList.value = picList.value
|
||||
.filter((item) => item.disabled !== true)
|
||||
.map((item, idx) => ({
|
||||
name: item.title,
|
||||
progress: 0,
|
||||
}));
|
||||
console.log(classList.value);
|
||||
states.value.isTraining = 2;
|
||||
}
|
||||
|
||||
setInterval(async () => {
|
||||
// 没训练完成跳过
|
||||
if (states.value.isTraining !== 2)
|
||||
return
|
||||
// 输入是“上传图片”时跳过
|
||||
if (uploadedImg.value !== '')
|
||||
return
|
||||
// 通知摄像头拍摄照片
|
||||
emit('shot')
|
||||
// 加载拍摄的照片
|
||||
const img = shotList.value[shotList.value.length - 1]
|
||||
if (!img || img === 'data:,') {
|
||||
ElMessage.error('未获取到有效样本')
|
||||
return
|
||||
}
|
||||
const imgElement = new Image()
|
||||
imgElement.src = img
|
||||
await new Promise((resolve) => {
|
||||
imgElement.onload = resolve
|
||||
})
|
||||
// 将图片转换为张量
|
||||
const imgTensor = tf.browser.fromPixels(imgElement)
|
||||
// let activation = net.infer(imgTensor, "conv_preds");
|
||||
let resized = tf.image.resizeBilinear(imgTensor, [224, 224])
|
||||
let batched = resized.expandDims(0)
|
||||
let normalized = batched.div(255)
|
||||
// let activation = net.predict(imgTensor);
|
||||
let activation = featureExtractor.predict(normalized)
|
||||
const pred = model.predict(activation)
|
||||
const predArr = await pred.data()
|
||||
// console.log(predArr)
|
||||
classList.value = [
|
||||
...classList.value.map((item, idx) => ({
|
||||
...item,
|
||||
progress: Number((predArr[idx] * 100).toFixed(2)),
|
||||
})),
|
||||
]
|
||||
// console.log(classList.value)
|
||||
imgTensor.dispose()
|
||||
activation.dispose()
|
||||
pred.dispose()
|
||||
}, 200)
|
||||
// 没训练完成跳过
|
||||
if (states.value.isTraining !== 2) return;
|
||||
// 输入是“上传图片”时跳过
|
||||
if (uploadedImg.value !== "") return;
|
||||
// 通知摄像头拍摄照片
|
||||
emit("shot");
|
||||
// 加载拍摄的照片
|
||||
const img = shotList.value[shotList.value.length - 1];
|
||||
if (!img || img === "data:,") {
|
||||
ElMessage.error("未获取到有效样本");
|
||||
return;
|
||||
}
|
||||
const imgElement = new Image();
|
||||
imgElement.src = img;
|
||||
await new Promise((resolve) => {
|
||||
imgElement.onload = resolve;
|
||||
});
|
||||
// 将图片转换为张量
|
||||
const imgTensor = tf.browser.fromPixels(imgElement);
|
||||
// let activation = net.infer(imgTensor, "conv_preds");
|
||||
let resized = tf.image.resizeBilinear(imgTensor, [224, 224]);
|
||||
let batched = resized.expandDims(0);
|
||||
let normalized = batched.div(255);
|
||||
// let activation = net.predict(imgTensor);
|
||||
let activation = featureExtractor.predict(normalized);
|
||||
const pred = model.predict(activation);
|
||||
const predArr = await pred.data();
|
||||
// console.log(predArr)
|
||||
classList.value = [
|
||||
...classList.value.map((item, idx) => ({
|
||||
...item,
|
||||
progress: Number((predArr[idx] * 100).toFixed(2)),
|
||||
})),
|
||||
];
|
||||
// console.log(classList.value)
|
||||
imgTensor.dispose();
|
||||
activation.dispose();
|
||||
pred.dispose();
|
||||
}, 200);
|
||||
|
||||
const showVisPanel = ref(false)
|
||||
const uploadedImg = ref('')
|
||||
const uploadedResult = ref('')
|
||||
const panelTop = ref('20%')
|
||||
const panelRight = ref('20%')
|
||||
const showVisPanel = ref(false);
|
||||
const uploadedImg = ref("");
|
||||
const uploadedResult = ref("");
|
||||
const panelTop = ref("20%");
|
||||
const panelRight = ref("20%");
|
||||
|
||||
async function exportModel() {
|
||||
if (!model) {
|
||||
ElMessage.error('模型尚未训练完成')
|
||||
return
|
||||
}
|
||||
try {
|
||||
// 导出模型到本地文件系统
|
||||
await model.save(`downloads://${modelName.value == '' ? 'my-model' : modelName.value}`)
|
||||
ElMessage.success('模型导出成功')
|
||||
}
|
||||
catch (error) {
|
||||
ElMessage.error(`模型导出失败: ${error.message}`)
|
||||
}
|
||||
if (!model) {
|
||||
ElMessage.error("模型尚未训练完成");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 导出模型到本地文件系统
|
||||
await model.save(
|
||||
`downloads://${modelName.value == "" ? "my-model" : modelName.value}`
|
||||
);
|
||||
ElMessage.success("模型导出成功");
|
||||
} catch (error) {
|
||||
ElMessage.error(`模型导出失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUpload(file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = async (e) => {
|
||||
uploadedImg.value = e.target.result
|
||||
if (!featureExtractor || !model) {
|
||||
ElMessage.error('请先完成模型训练')
|
||||
return false
|
||||
}
|
||||
const imgElement = new window.Image()
|
||||
imgElement.src = uploadedImg.value
|
||||
await new Promise(resolve => (imgElement.onload = resolve))
|
||||
const imgTensor = tf.browser.fromPixels(imgElement)
|
||||
// let activation = net.infer(imgTensor, "conv_preds");
|
||||
let resized = tf.image.resizeBilinear(imgTensor, [224, 224])
|
||||
let batched = resized.expandDims(0)
|
||||
let normalized = batched.div(255)
|
||||
// let activation = net.predict(imgTensor);
|
||||
let activation = featureExtractor.predict(normalized)
|
||||
const pred = model.predict(activation)
|
||||
const predArr = await pred.data()
|
||||
classList.value = [
|
||||
...classList.value.map((item, idx) => ({
|
||||
...item,
|
||||
progress: Number((predArr[idx] * 100).toFixed(2)),
|
||||
})),
|
||||
]
|
||||
const maxIdx = predArr.indexOf(Math.max(...predArr))
|
||||
uploadedResult.value = classList.value[maxIdx]?.name || '未知'
|
||||
imgTensor.dispose()
|
||||
activation.dispose()
|
||||
pred.dispose()
|
||||
const reader = new FileReader();
|
||||
reader.onload = async (e) => {
|
||||
uploadedImg.value = e.target.result;
|
||||
if (!featureExtractor || !model) {
|
||||
ElMessage.error("请先完成模型训练");
|
||||
return false;
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
return false
|
||||
const imgElement = new window.Image();
|
||||
imgElement.src = uploadedImg.value;
|
||||
await new Promise((resolve) => (imgElement.onload = resolve));
|
||||
const imgTensor = tf.browser.fromPixels(imgElement);
|
||||
// let activation = net.infer(imgTensor, "conv_preds");
|
||||
let resized = tf.image.resizeBilinear(imgTensor, [224, 224]);
|
||||
let batched = resized.expandDims(0);
|
||||
let normalized = batched.div(255);
|
||||
// let activation = net.predict(imgTensor);
|
||||
let activation = featureExtractor.predict(normalized);
|
||||
const pred = model.predict(activation);
|
||||
const predArr = await pred.data();
|
||||
classList.value = [
|
||||
...classList.value.map((item, idx) => ({
|
||||
...item,
|
||||
progress: Number((predArr[idx] * 100).toFixed(2)),
|
||||
})),
|
||||
];
|
||||
const maxIdx = predArr.indexOf(Math.max(...predArr));
|
||||
uploadedResult.value = classList.value[maxIdx]?.name || "未知";
|
||||
imgTensor.dispose();
|
||||
activation.dispose();
|
||||
pred.dispose();
|
||||
};
|
||||
reader.readAsDataURL(file);
|
||||
return false;
|
||||
}
|
||||
|
||||
function switchToUpload() {
|
||||
uploadedImg.value = ''
|
||||
uploadedImg.value = "";
|
||||
}
|
||||
|
||||
let startX = 0
|
||||
let startY = 0
|
||||
let startTop = 0
|
||||
let startRight = 0
|
||||
let startX = 0;
|
||||
let startY = 0;
|
||||
let startTop = 0;
|
||||
let startRight = 0;
|
||||
|
||||
function onDragStart(e) {
|
||||
if (e.button !== 0)
|
||||
return
|
||||
startX = e.clientX
|
||||
startY = e.clientY
|
||||
const topVal = document.getElementById('vis-left-panel-wrapper').style.top
|
||||
const rightVal = document.getElementById('vis-left-panel-wrapper').style.right
|
||||
startTop = topVal.endsWith('%')
|
||||
? (window.innerHeight * Number.parseFloat(topVal)) / 100
|
||||
: Number.parseFloat(topVal)
|
||||
startRight = rightVal.endsWith('%')
|
||||
? (window.innerWidth * Number.parseFloat(rightVal)) / 100
|
||||
: Number.parseFloat(rightVal)
|
||||
if (e.button !== 0) return;
|
||||
startX = e.clientX;
|
||||
startY = e.clientY;
|
||||
const topVal = document.getElementById("vis-left-panel-wrapper").style.top;
|
||||
const rightVal = document.getElementById("vis-left-panel-wrapper").style.right;
|
||||
startTop = topVal.endsWith("%")
|
||||
? (window.innerHeight * Number.parseFloat(topVal)) / 100
|
||||
: Number.parseFloat(topVal);
|
||||
startRight = rightVal.endsWith("%")
|
||||
? (window.innerWidth * Number.parseFloat(rightVal)) / 100
|
||||
: Number.parseFloat(rightVal);
|
||||
|
||||
document.addEventListener('mousemove', onDragging)
|
||||
document.addEventListener('mouseup', onDragEnd)
|
||||
document.addEventListener("mousemove", onDragging);
|
||||
document.addEventListener("mouseup", onDragEnd);
|
||||
}
|
||||
|
||||
function onDragging(e) {
|
||||
const deltaX = e.clientX - startX
|
||||
const deltaY = e.clientY - startY
|
||||
let newTop = startTop + deltaY
|
||||
let newRight = startRight - deltaX
|
||||
newTop = Math.max(0, Math.min(window.innerHeight - 100, newTop))
|
||||
newRight = Math.max(0, Math.min(window.innerWidth - 200, newRight))
|
||||
panelTop.value = `${newTop}px`
|
||||
panelRight.value = `${newRight}px`
|
||||
const deltaX = e.clientX - startX;
|
||||
const deltaY = e.clientY - startY;
|
||||
let newTop = startTop + deltaY;
|
||||
let newRight = startRight - deltaX;
|
||||
newTop = Math.max(0, Math.min(window.innerHeight - 100, newTop));
|
||||
newRight = Math.max(0, Math.min(window.innerWidth - 200, newRight));
|
||||
panelTop.value = `${newTop}px`;
|
||||
panelRight.value = `${newRight}px`;
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
document.removeEventListener('mousemove', onDragging)
|
||||
document.removeEventListener('mouseup', onDragEnd)
|
||||
document.removeEventListener("mousemove", onDragging);
|
||||
document.removeEventListener("mouseup", onDragEnd);
|
||||
}
|
||||
|
||||
defineExpose({ train })
|
||||
defineExpose({ train });
|
||||
|
||||
const modelName = ref('')
|
||||
const modelName = ref("");
|
||||
async function saveModel() {
|
||||
if (!model) {
|
||||
ElMessage.error('模型尚未训练完成')
|
||||
return
|
||||
}
|
||||
try {
|
||||
// 导出模型到本地文件系统
|
||||
await model.save(`indexeddb://${modelName.value == '' ? 'my-model' : modelName.value}`)
|
||||
ElMessage.success('模型保存成功')
|
||||
}
|
||||
catch (error) {
|
||||
ElMessage.error(`模型保存失败: ${error.message}`)
|
||||
}
|
||||
if (!model) {
|
||||
ElMessage.error("模型尚未训练完成");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
// 导出模型到本地文件系统
|
||||
await model.save(
|
||||
`indexeddb://${modelName.value == "" ? "my-model" : modelName.value}`
|
||||
);
|
||||
ElMessage.success("模型保存成功");
|
||||
} catch (error) {
|
||||
ElMessage.error(`模型保存失败: ${error.message}`);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div v-show="showVisPanel" id="vis-left-panel-wrapper" class="vis-left-panel-wrapper"
|
||||
:style="`right: ${panelRight}; top: ${panelTop};`">
|
||||
<div class="vis-left-panel-inner-wrapper">
|
||||
<div class="vis-left-panel-title" style="" @mousedown="onDragStart">
|
||||
<span> 训练过程可视化 </span>
|
||||
<ElButton size="small" plain @click="showVisPanel = false">
|
||||
隐藏
|
||||
</ElButton>
|
||||
</div>
|
||||
<div id="vis-left-panel" class="vis-left-panel">
|
||||
训练准备中……
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
v-show="showVisPanel"
|
||||
id="vis-left-panel-wrapper"
|
||||
class="vis-left-panel-wrapper"
|
||||
:style="`right: ${panelRight}; top: ${panelTop};`"
|
||||
>
|
||||
<div class="vis-left-panel-inner-wrapper">
|
||||
<div class="vis-left-panel-title" style="" @mousedown="onDragStart">
|
||||
<span> 训练过程可视化 </span>
|
||||
<ElButton size="small" plain @click="showVisPanel = false"> 隐藏 </ElButton>
|
||||
</div>
|
||||
<ElCard v-if="states.isTraining === 2" class="model-area">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
模型
|
||||
<ElButton v-if="!showVisPanel" size="small" style="margin-left: 10px" type="primary" plain
|
||||
@click="showVisPanel = true">
|
||||
显示训练过程
|
||||
</ElButton>
|
||||
<ElButton v-if="states.isTraining === 2" size="small" style="margin-left: 10px" type="success"
|
||||
plain @click="exportModel">
|
||||
模型导出至本地
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ElRow class="model-item" style="flex-direction: column; align-items: flex-center">
|
||||
<ElRow>
|
||||
<ElCol :span="6" style="display: flex; align-items: center; text-align: right;">
|
||||
名称：
|
||||
</ElCol>
|
||||
<ElCol :span="12">
|
||||
<ElInput v-model="modelName" placeholder="请输入模型名称" />
|
||||
</ElCol>
|
||||
<ElCol :span="4" style="display: flex; align-items: center;">
|
||||
<ElButton style="margin: auto 5px" type="primary" plain size="small" @click="saveModel">
|
||||
保存
|
||||
</ElButton>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
<ElRow class="model-item">
|
||||
<b>输入</b>
|
||||
</ElRow>
|
||||
<div v-if="!uploadedImg" style="margin: auto">
|
||||
上方拍摄内容
|
||||
<ElUpload :show-file-list="false" accept="image/*" :before-upload="handleUpload">
|
||||
<ElButton size="small" type="success">
|
||||
切换为上传图片
|
||||
</ElButton>
|
||||
</ElUpload>
|
||||
</div>
|
||||
<div v-else style="margin: auto">
|
||||
下方上传图片 <br>
|
||||
<ElButton size="small" type="success" plain @click="switchToUpload">
|
||||
切换为上方拍摄内容
|
||||
</ElButton>
|
||||
<ElUpload :show-file-list="false" accept="image/*" :before-upload="handleUpload">
|
||||
<ElButton size="small" type="success">
|
||||
重新上传一张
|
||||
</ElButton>
|
||||
</ElUpload>
|
||||
<img :src="uploadedImg" alt="用户上传图片"
|
||||
style="max-width: 100%; max-height: 150px; border-radius: 10px">
|
||||
</div>
|
||||
</ElRow>
|
||||
<ElRow class="model-item">
|
||||
<b>输出</b>
|
||||
</ElRow>
|
||||
<ElRow v-for="(item, idx) in classList" :key="`${item.name}-${idx}`" class="model-item">
|
||||
<ElCol :span="6">
|
||||
{{ item.name }}
|
||||
</ElCol>
|
||||
<ElCol :span="18">
|
||||
<ElProgress class="progress" :text-inside="true" :stroke-width="20" :percentage="item.progress"
|
||||
:color="progressColors[idx % progressColors.length]" striped :format="(p) => `${p}%`" />
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElCard>
|
||||
<div id="vis-left-panel" class="vis-left-panel">训练准备中……</div>
|
||||
</div>
|
||||
</div>
|
||||
<ElCard v-if="states.isTraining === 2" class="model-area">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
模型
|
||||
<ElButton
|
||||
v-if="!showVisPanel"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
type="primary"
|
||||
plain
|
||||
@click="showVisPanel = true"
|
||||
>
|
||||
显示训练过程
|
||||
</ElButton>
|
||||
<ElButton
|
||||
v-if="states.isTraining === 2"
|
||||
size="small"
|
||||
style="margin-left: 10px"
|
||||
type="success"
|
||||
plain
|
||||
@click="exportModel"
|
||||
>
|
||||
模型导出至本地
|
||||
</ElButton>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<ElRow class="model-item" style="flex-direction: column; align-items: flex-center">
|
||||
<ElRow>
|
||||
<ElCol :span="6" style="display: flex; align-items: center; text-align: right">
|
||||
名称：
|
||||
</ElCol>
|
||||
<ElCol :span="12">
|
||||
<ElInput v-model="modelName" placeholder="请输入模型名称" />
|
||||
</ElCol>
|
||||
<ElCol :span="4" style="display: flex; align-items: center">
|
||||
<ElButton
|
||||
style="margin: auto 5px"
|
||||
type="primary"
|
||||
plain
|
||||
size="small"
|
||||
@click="saveModel"
|
||||
>
|
||||
保存
|
||||
</ElButton>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElRow>
|
||||
<ElRow class="model-item">
|
||||
<b>输入</b>
|
||||
</ElRow>
|
||||
<ElRow class="model-item">
|
||||
<div v-if="!uploadedImg" style="margin: auto">
|
||||
上方拍摄内容
|
||||
<ElUpload
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:before-upload="handleUpload"
|
||||
>
|
||||
<ElButton size="small" type="success"> 切换为上传图片 </ElButton>
|
||||
</ElUpload>
|
||||
</div>
|
||||
<div v-else style="margin: auto">
|
||||
下方上传图片 <br />
|
||||
<ElButton size="small" type="success" plain @click="switchToUpload">
|
||||
切换为上方拍摄内容
|
||||
</ElButton>
|
||||
<ElUpload
|
||||
:show-file-list="false"
|
||||
accept="image/*"
|
||||
:before-upload="handleUpload"
|
||||
>
|
||||
<ElButton size="small" type="success"> 重新上传一张 </ElButton>
|
||||
</ElUpload>
|
||||
<img
|
||||
:src="uploadedImg"
|
||||
alt="用户上传图片"
|
||||
style="max-width: 100%; max-height: 150px; border-radius: 10px"
|
||||
/>
|
||||
</div>
|
||||
</ElRow>
|
||||
<ElRow class="model-item">
|
||||
<b>输出</b>
|
||||
</ElRow>
|
||||
<ElRow
|
||||
v-for="(item, idx) in classList"
|
||||
:key="`${item.name}-${idx}`"
|
||||
class="model-item"
|
||||
>
|
||||
<ElCol :span="6">
|
||||
{{ item.name }}
|
||||
</ElCol>
|
||||
<ElCol :span="18">
|
||||
<ElProgress
|
||||
class="progress"
|
||||
:text-inside="true"
|
||||
:stroke-width="20"
|
||||
:percentage="item.progress"
|
||||
:color="progressColors[idx % progressColors.length]"
|
||||
striped
|
||||
:format="(p) => `${p}%`"
|
||||
/>
|
||||
</ElCol>
|
||||
</ElRow>
|
||||
</ElCard>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vis-left-panel-wrapper {
|
||||
transition: all 0.3s;
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 0 20px #0001;
|
||||
transition: all 0.3s;
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
z-index: 1000;
|
||||
box-shadow: 0 0 20px #0001;
|
||||
}
|
||||
|
||||
.vis-left-panel-inner-wrapper {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px #0001;
|
||||
padding: 10px 10px 0 10px;
|
||||
border: 1px solid #eee;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 8px #0001;
|
||||
padding: 10px 10px 0 10px;
|
||||
border: 1px solid #eee;
|
||||
}
|
||||
|
||||
.vis-left-panel-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
cursor: move;
|
||||
user-select: none;
|
||||
font-weight: bold;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.vis-left-panel {
|
||||
min-height: 300px;
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.model-area {
|
||||
margin: 10px auto;
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
border-radius: 30px;
|
||||
margin: 10px auto;
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.model-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user