feat(board): 更新python_pyodide下 Teachable Machine
This commit is contained in:
王立帮
@@ -1,6 +1,7 @@
|
||||
import * as Blockly from 'blockly/core';
|
||||
import * as path from 'path';
|
||||
import $ from 'jquery';
|
||||
import { createApp } from 'vue';
|
||||
import mixlySprite from './pixi-sprite';
|
||||
import {
|
||||
Workspace,
|
||||
@@ -14,8 +15,11 @@ import { KernelLoader } from '@basthon/kernel-loader';
|
||||
import StatusBarImage from './statusbar-image';
|
||||
import StatusBarFileSystem from './statusbar-filesystem';
|
||||
import StatusBarTool from './statusbar-tool';
|
||||
import TeachableMachineApp from './teachableMachine/App.vue';
|
||||
import LOADER_TEMPLATE from '../templates/html/loader.html';
|
||||
|
||||
import 'element-plus/dist/index.css';
|
||||
|
||||
|
||||
export default class PythonShell {
|
||||
static {
|
||||
@@ -57,6 +61,8 @@ export default class PythonShell {
|
||||
this.statusBarImage = StatusBarImage.init();
|
||||
this.statusBarFileSystem = StatusBarFileSystem.init();
|
||||
this.statusBarTool = StatusBarTool.init();
|
||||
const teachableMachineApp = createApp(TeachableMachineApp);
|
||||
teachableMachineApp.mount(this.statusBarTool.getContent()[0]);
|
||||
this.pythonShell = new PythonShell();
|
||||
this.pyodide = window.pyodide;
|
||||
this.interruptBuffer = new Uint8Array(new ArrayBuffer(1));
|
||||
|
||||
@@ -0,0 +1,54 @@
|
||||
<script setup>
|
||||
import { onMounted, provide, reactive, ref } from 'vue';
|
||||
import { ElConfigProvider } from 'element-plus';
|
||||
import teachableModel from './components/teachableModel.vue';
|
||||
|
||||
// import 'element-plus/theme-chalk/el-message.css';
|
||||
// import 'element-plus/theme-chalk/el-message-box.css';
|
||||
// import 'element-plus/theme-chalk/el-notification.css';
|
||||
// import './styles/index.scss';
|
||||
|
||||
|
||||
const userInfo = reactive({
|
||||
is_Login: false,
|
||||
username: '',
|
||||
password: '',
|
||||
})
|
||||
|
||||
const apiurl = ref('http://127.0.0.1:5174')
|
||||
provide('apiurl', apiurl.value)
|
||||
|
||||
provide('userInfo', userInfo)
|
||||
onMounted(() => {
|
||||
// 获取当前的LS里的已经登录的信息
|
||||
if (
|
||||
localStorage.getItem('myAIplatformUsername')
|
||||
&& localStorage.getItem('myAIplatformPassword')
|
||||
) {
|
||||
userInfo.is_Login = true
|
||||
userInfo.username = localStorage.getItem('myAIplatformUsername')
|
||||
userInfo.password = localStorage.getItem('myAIplatformPassword')
|
||||
}
|
||||
else {
|
||||
userInfo.is_Login = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElConfigProvider>
|
||||
<teachableModel />
|
||||
</ElConfigProvider>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* #app {
|
||||
text-align: center;
|
||||
color: var(--ep-text-color-primary);
|
||||
}
|
||||
|
||||
.main-container {
|
||||
height: calc(100vh - var(--ep-menu-item-height) - 4px);
|
||||
background-color: #feffff;
|
||||
} */
|
||||
</style>
|
||||
@@ -0,0 +1,213 @@
|
||||
<script setup>
|
||||
import { provide, ref } from 'vue';
|
||||
import { CirclePlusFilled } from '@element-plus/icons-vue';
|
||||
import { ElMessage, ElSplitter, ElSplitterPanel, ElCard, ElButton, ElIcon } from 'element-plus';
|
||||
import ClassBox from './teachableModel/ClassBox.vue';
|
||||
import CameraBox from './teachableModel/CameraBox.vue';
|
||||
import ModelArea from './teachableModel/ModelArea.vue';
|
||||
import TrainArea from './teachableModel/TrainArea.vue';
|
||||
|
||||
// import 'element-plus/theme-chalk/src/message.scss';
|
||||
// import 'element-plus/theme-chalk/src/splitter.scss';
|
||||
// import 'element-plus/theme-chalk/src/splitter-panel.scss';
|
||||
// import 'element-plus/theme-chalk/src/card.scss';
|
||||
// import 'element-plus/theme-chalk/src/button.scss';
|
||||
// import 'element-plus/theme-chalk/src/icon.scss';
|
||||
|
||||
|
||||
// 存放所有拍摄的内容
|
||||
const shotList = ref([])
|
||||
provide('shotList', shotList)
|
||||
|
||||
// 存放类别和每个类别内含有的图片样本
|
||||
const picList = ref([
|
||||
{ title: '类别 1', list: [], disabled: false },
|
||||
{ title: '类别 2', list: [], disabled: false },
|
||||
])
|
||||
provide('picList', picList)
|
||||
|
||||
// 训练状态
|
||||
const states = ref({
|
||||
isTraining: 0, // 0为未开始，1为训练中，2为训练完成
|
||||
})
|
||||
provide('states', states)
|
||||
|
||||
// 向某个类别添加一个样本
|
||||
async function handleAddSample(idx, data) {
|
||||
// 类别已被禁用
|
||||
if (picList.value[idx].disabled) {
|
||||
ElMessage.error('该类别已被禁用')
|
||||
return
|
||||
}
|
||||
// 可能传入 base64 字符串上传图片
|
||||
if (data) {
|
||||
// data 是 base64，说明是上传图片
|
||||
picList.value[idx].list.push(data)
|
||||
return
|
||||
}
|
||||
// 否则是拍摄，调用摄像头拍摄
|
||||
await handleParentShot()
|
||||
// 检查是否成功拍摄到图片
|
||||
if (
|
||||
!shotList.value[shotList.value.length - 1]
|
||||
|| shotList.value[shotList.value.length - 1] === 'data:,'
|
||||
) {
|
||||
ElMessage.error('未获取到有效样本')
|
||||
return
|
||||
}
|
||||
// 拍摄到的图片添加到类别中
|
||||
picList.value[idx].list.push(shotList.value[shotList.value.length - 1])
|
||||
}
|
||||
|
||||
// 添加一个类别
|
||||
function handleAddClass() {
|
||||
picList.value.push({
|
||||
title: `类别 ${picList.value.length + 1}`,
|
||||
list: [],
|
||||
disabled: false,
|
||||
})
|
||||
}
|
||||
|
||||
// 删除一个类别
|
||||
function handleDeleteClass(idx) {
|
||||
picList.value.splice(idx, 1)
|
||||
}
|
||||
|
||||
// 禁用/启用一个类别
|
||||
function handleDisableClass(idx) {
|
||||
picList.value[idx].disabled = !picList.value[idx].disabled
|
||||
}
|
||||
|
||||
// 重命名一个类别
|
||||
function handleRenameClass(idx, newTitle) {
|
||||
picList.value[idx].title = newTitle
|
||||
}
|
||||
|
||||
// 清空一个类别的样本
|
||||
function handleClearSamples(idx) {
|
||||
picList.value[idx].list = []
|
||||
}
|
||||
|
||||
// 显示模型区域与否
|
||||
const showModelArea = ref(true)
|
||||
|
||||
// 令摄像头拍摄一张图片加入shotList
|
||||
const cameraBoxRef = ref(null)
|
||||
async function handleParentShot() {
|
||||
await cameraBoxRef.value?.captureShot()
|
||||
}
|
||||
|
||||
// 训练模型
|
||||
const modelAreaRef = ref(null)
|
||||
async function handleTrain() {
|
||||
await modelAreaRef.value.train()
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="main-splitter">
|
||||
<ElSplitter>
|
||||
<ElSplitterPanel size="70%" :min="200">
|
||||
<div class="class-area">
|
||||
<ClassBox v-for="(item, idx) in picList" :key="idx" :title="item.title" :pic-list="item.list"
|
||||
:disabled="item.disabled" @add-sample="(data) => handleAddSample(idx, data)" @delete-sample="
|
||||
(url) => (picList[idx].list = picList[idx].list.filter((i) => i !== url))
|
||||
" @delete-class="handleDeleteClass(idx)" @disable-class="handleDisableClass(idx)"
|
||||
@rename-class="(newTitle) => handleRenameClass(idx, newTitle)"
|
||||
@clear-samples="handleClearSamples(idx)">
|
||||
<ElButton type="primary" size="mini" @click="handleAddSample(idx)">
|
||||
添加样本
|
||||
</ElButton>
|
||||
</ClassBox>
|
||||
<ElCard class="add-class-card" @click="handleAddClass">
|
||||
<div class="add-class-content">
|
||||
添加一个类别
|
||||
<ElIcon>
|
||||
<CirclePlusFilled />
|
||||
</ElIcon>
|
||||
</div>
|
||||
</ElCard>
|
||||
</div>
|
||||
</ElSplitterPanel>
|
||||
<ElSplitterPanel :min="200">
|
||||
<CameraBox ref="cameraBoxRef" />
|
||||
<transition name="fade-scale">
|
||||
<ModelArea v-if="showModelArea" ref="modelAreaRef" @shot="handleParentShot" />
|
||||
</transition>
|
||||
<TrainArea @train="handleTrain" />
|
||||
</ElSplitterPanel>
|
||||
</ElSplitter>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
font-size: 24px;
|
||||
font-weight: 500;
|
||||
color: #011216;
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
background: linear-gradient(to right, #d7dee1, transparent, transparent, transparent);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.teachable-model-container {
|
||||
width: 80%;
|
||||
height: 80vh;
|
||||
margin: 20px;
|
||||
padding: 5px;
|
||||
border: 2px solid #000;
|
||||
border-radius: 5px;
|
||||
box-shadow: 0px 0px 10px #000;
|
||||
}
|
||||
|
||||
.main-splitter {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
box-shadow: var(--el-border-color-light) 0px 0px 10px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.add-class-card {
|
||||
margin: 10px auto;
|
||||
border: 1px dotted #000;
|
||||
max-width: 50vw;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.add-class-card:hover {
|
||||
cursor: pointer;
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.fade-scale-enter-active {
|
||||
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.fade-scale-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.55, 0, 0.1, 1);
|
||||
}
|
||||
|
||||
.fade-scale-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.fade-scale-enter-to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.fade-scale-leave-from {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.fade-scale-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.8);
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,92 @@
|
||||
<script setup>
|
||||
import { defineExpose, inject, onMounted, ref } from 'vue';
|
||||
|
||||
const videoRef = ref(null)
|
||||
const shotList = inject('shotList')
|
||||
|
||||
// 初始化摄像头
|
||||
onMounted(() => {
|
||||
navigator.mediaDevices
|
||||
.getUserMedia({ video: true })
|
||||
.then((stream) => {
|
||||
if (videoRef.value) {
|
||||
videoRef.value.srcObject = stream
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.error('无法访问摄像头:', err)
|
||||
})
|
||||
})
|
||||
|
||||
// 拍摄照片，转为正方形，存入shotList
|
||||
function captureShot() {
|
||||
const video = videoRef.value
|
||||
if (!video)
|
||||
return
|
||||
const vw = video.videoWidth
|
||||
const vh = video.videoHeight
|
||||
let sx = 0
|
||||
let sy = 0
|
||||
let sw = vw
|
||||
let sh = vh
|
||||
if (vw > vh) {
|
||||
sx = (vw - vh) / 2
|
||||
sw = vh
|
||||
}
|
||||
else if (vh > vw) {
|
||||
sy = (vh - vw) / 2
|
||||
sh = vw
|
||||
}
|
||||
const size = Math.min(sw, sh)
|
||||
const canvas = document.createElement('canvas')
|
||||
canvas.width = size
|
||||
canvas.height = size
|
||||
const ctx = canvas.getContext('2d')
|
||||
ctx.drawImage(video, sx, sy, size, size, 0, 0, size, size)
|
||||
shotList.value.push(canvas.toDataURL('image/png'))
|
||||
return canvas.toDataURL('image/png')
|
||||
}
|
||||
|
||||
// 暴露方法
|
||||
defineExpose({ captureShot })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="camera-box">
|
||||
<video id="webcam" ref="videoRef" class="video-crop" autoplay playsinline muted height="100%" width="100%" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.camera-box {
|
||||
margin: 10px auto;
|
||||
padding: 10px;
|
||||
border-radius: 20px;
|
||||
width: 80%;
|
||||
max-width: 250px;
|
||||
aspect-ratio: 1/1;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
/* background-color: black; */
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.canvas {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.video-crop {
|
||||
max-width: 250px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 10px;
|
||||
object-fit: cover;
|
||||
object-position: center center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.camera-box {
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,357 @@
|
||||
<script setup>
|
||||
import { Camera, CirclePlus, Delete, EditPen, More } from '@element-plus/icons-vue';
|
||||
import { saveAs } from 'file-saver';
|
||||
import JSZip from 'jszip';
|
||||
import { nextTick, ref, watch, TransitionGroup } from 'vue';
|
||||
import { ElCard, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElUpload, ElImage, ElInput, ElIcon } from 'element-plus';
|
||||
|
||||
// import 'element-plus/theme-chalk/el-card.css';
|
||||
// import 'element-plus/theme-chalk/el-dropdown.css';
|
||||
// import 'element-plus/theme-chalk/el-dropdown-menu.css';
|
||||
// import 'element-plus/theme-chalk/el-dropdown-item.css';
|
||||
// import 'element-plus/theme-chalk/el-button.css';
|
||||
// import 'element-plus/theme-chalk/el-upload.css';
|
||||
// import 'element-plus/theme-chalk/el-image.css';
|
||||
// import 'element-plus/theme-chalk/el-input.css';
|
||||
|
||||
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: '类别',
|
||||
},
|
||||
picList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits([
|
||||
'add-sample',
|
||||
'delete-sample',
|
||||
'rename-class',
|
||||
'delete-class',
|
||||
'disable-class',
|
||||
'clear-samples',
|
||||
])
|
||||
|
||||
const localTitle = ref(props.title)
|
||||
const editing = ref(false)
|
||||
const inputTitle = ref(localTitle.value)
|
||||
const inputRef = ref(null)
|
||||
const addSampleTimer = ref(null)
|
||||
|
||||
function editTitle() {
|
||||
if (!editing.value) {
|
||||
editing.value = true
|
||||
inputTitle.value = localTitle.value
|
||||
nextTick(() => {
|
||||
if (inputRef.value && inputRef.value.input) {
|
||||
inputRef.value.input.select()
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function saveTitle() {
|
||||
if (inputTitle.value.trim()) {
|
||||
localTitle.value = inputTitle.value.trim()
|
||||
emit('rename-class', localTitle.value)
|
||||
}
|
||||
editing.value = false
|
||||
}
|
||||
|
||||
function handleAddSample() {
|
||||
emit('add-sample')
|
||||
}
|
||||
|
||||
function handleDeleteSample(url) {
|
||||
emit('delete-sample', url)
|
||||
}
|
||||
|
||||
function startAddSample() {
|
||||
handleAddSample()
|
||||
addSampleTimer.value = setInterval(() => {
|
||||
handleAddSample()
|
||||
}, 200) // 200ms 可根据需要调整
|
||||
}
|
||||
|
||||
function stopAddSample() {
|
||||
if (addSampleTimer.value) {
|
||||
clearInterval(addSampleTimer.value)
|
||||
addSampleTimer.value = null
|
||||
}
|
||||
}
|
||||
|
||||
watch(
|
||||
() => props.title,
|
||||
(val) => {
|
||||
localTitle.value = val
|
||||
},
|
||||
)
|
||||
|
||||
function handleDeleteClass() {
|
||||
emit('delete-class')
|
||||
}
|
||||
function handleDisableClass() {
|
||||
emit('disable-class')
|
||||
}
|
||||
function handleClearSamples() {
|
||||
emit('clear-samples')
|
||||
}
|
||||
|
||||
function handleExportSamples() {
|
||||
// 导出为zip
|
||||
const zip = new JSZip()
|
||||
props.picList.forEach((url, idx) => {
|
||||
const base64 = url.split(',')[1]
|
||||
zip.file(`sample_${idx + 1}.png`, base64, { base64: true })
|
||||
})
|
||||
zip.generateAsync({ type: 'blob' }).then((content) => {
|
||||
saveAs(content, 'samples.zip')
|
||||
})
|
||||
}
|
||||
|
||||
// 新增：处理图片上传
|
||||
// 修改处理函数
|
||||
function handleUploadSample(file) {
|
||||
return new Promise((resolve, reject) => {
|
||||
// 新增ZIP文件处理
|
||||
if (file.type === 'application/zip' || file.name.endsWith('.zip')) {
|
||||
const zip = new JSZip()
|
||||
zip
|
||||
.loadAsync(file)
|
||||
.then((zipContents) => {
|
||||
const imageFiles = Object.values(zipContents.files).filter(
|
||||
file => !file.dir && file.name.match(/\.(png|jpg|jpeg|gif|bmp)$/i),
|
||||
)
|
||||
|
||||
Promise.all(
|
||||
imageFiles.map((zipFile) => {
|
||||
return zip
|
||||
.file(zipFile.name)
|
||||
.async('blob')
|
||||
.then((blob) => {
|
||||
const extractedFile = new File([blob], zipFile.name, {
|
||||
type: blob.type,
|
||||
})
|
||||
const reader = new FileReader()
|
||||
reader.readAsDataURL(extractedFile)
|
||||
return new Promise(r => (reader.onload = r))
|
||||
})
|
||||
}),
|
||||
).then((readers) => {
|
||||
readers.forEach(e => emit('add-sample', e.target.result))
|
||||
resolve(false)
|
||||
})
|
||||
})
|
||||
.catch(reject)
|
||||
}
|
||||
else {
|
||||
// 原有图片处理逻辑
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
emit('add-sample', e.target.result)
|
||||
resolve(false)
|
||||
}
|
||||
reader.onerror = reject
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElCard class="class-box">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span class="card-header-title" style="cursor: pointer" @click="editTitle">
|
||||
<template v-if="!editing">
|
||||
{{ localTitle }}
|
||||
<ElIcon @click.stop="editTitle">
|
||||
<EditPen />
|
||||
</ElIcon>
|
||||
<span v-if="props.disabled" class="disabled-tag"
|
||||
style="color: #f56c6c; margin-left: 8px; font-size: 13px">
|
||||
禁用
|
||||
</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ElInput ref="inputRef" v-model="inputTitle" style="width: 120px" @keyup.enter="saveTitle"
|
||||
@blur="saveTitle" />
|
||||
</template>
|
||||
</span>
|
||||
|
||||
<ElDropdown class="card-header-title">
|
||||
<span class="el-dropdown-link">
|
||||
<ElIcon>
|
||||
<More />
|
||||
</ElIcon>
|
||||
</span>
|
||||
<template #dropdown>
|
||||
<ElDropdownMenu class="class-box-dropdown">
|
||||
<ElDropdownItem class="class-box-dropdown-item" @click="handleDeleteClass">
|
||||
<span style="color: #f56c6c">删除类别</span>
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem class="class-box-dropdown-item" @click="handleDisableClass">
|
||||
{{ props.disabled ? "启用" : "禁用" }}类别
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem class="class-box-dropdown-item" :disabled="props.picList.length === 0"
|
||||
@click="handleClearSamples">
|
||||
清空样本
|
||||
</ElDropdownItem>
|
||||
<ElDropdownItem class="class-box-dropdown-item" :disabled="props.picList.length === 0"
|
||||
@click="handleExportSamples">
|
||||
导出样本
|
||||
</ElDropdownItem>
|
||||
</ElDropdownMenu>
|
||||
</template>
|
||||
</ElDropdown>
|
||||
</div>
|
||||
</template>
|
||||
<div class="card-content" style="flex-direction: column; display: flex">
|
||||
<div class="card-content-info">
|
||||
图像样本 {{ props.picList.length }}
|
||||
<div style="display: flex; gap: 4px">
|
||||
<ElButton type="primary" size="small" :disabled="props.disabled" @mousedown="startAddSample"
|
||||
@mouseup="stopAddSample" @mouseleave="stopAddSample">
|
||||
拍摄样本
|
||||
<ElIcon>
|
||||
<Camera />
|
||||
</ElIcon>
|
||||
</ElButton>
|
||||
<ElUpload :show-file-list="false" :before-upload="handleUploadSample" accept="image/*,.zip"
|
||||
:disabled="props.disabled">
|
||||
<ElButton plain type="primary" size="small" :disabled="props.disabled">
|
||||
上传样本
|
||||
<ElIcon>
|
||||
<CirclePlus />
|
||||
</ElIcon>
|
||||
</ElButton>
|
||||
</ElUpload>
|
||||
</div>
|
||||
</div>
|
||||
<TransitionGroup name="fade" tag="div" class="card-content-img">
|
||||
<div v-for="url in props.picList.slice().reverse()" :key="url" class="card-content-img-wrapper"
|
||||
style="position: relative; display: inline-block">
|
||||
<ElImage :src="url" class="card-content-img-item" :class="{ 'img-disabled': props.disabled }" />
|
||||
<ElIcon class="delete-icon" @click="handleDeleteSample(url)">
|
||||
<Delete />
|
||||
</ElIcon>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</ElCard>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.card-header-title:hover {
|
||||
color: #409eff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-content-img {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
width: 100%;
|
||||
overflow-x: auto;
|
||||
white-space: nowrap;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
.card-content-img-item {
|
||||
margin: 2px;
|
||||
height: 60px;
|
||||
aspect-ratio: 1/1;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
|
||||
object-fit: cover;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-header-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.card-content-info {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
.card-content-img-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.delete-icon {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 2px;
|
||||
font-size: 16px;
|
||||
z-index: 2;
|
||||
border-radius: 50%;
|
||||
padding: 2px;
|
||||
transition: background 0.2s;
|
||||
color: #fff;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.delete-icon:hover {
|
||||
background: #f56c6c;
|
||||
}
|
||||
|
||||
.card-content-img-wrapper:hover .delete-icon {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.img-disabled {
|
||||
filter: grayscale(1) brightness(0.7);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.disabled-tag {
|
||||
color: #f56c6c;
|
||||
margin-left: 8px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.class-box {
|
||||
margin: 10px auto;
|
||||
max-width: 50vw;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,476 @@
|
||||
<script setup>
|
||||
// import * as mobilenet from "@tensorflow-models/mobilenet";
|
||||
import * as tf from '@tensorflow/tfjs';
|
||||
import * as tfvis from '@tensorflow/tfjs-vis';
|
||||
import { inject, ref } from 'vue';
|
||||
import { ElMessage, ElButton, ElCard, ElRow, ElCol, ElInput, ElProgress, ElUpload } from 'element-plus';
|
||||
|
||||
// import 'element-plus/theme-chalk/el-message.css';
|
||||
// import 'element-plus/theme-chalk/el-button.css';
|
||||
// import 'element-plus/theme-chalk/el-card.css';
|
||||
// import 'element-plus/theme-chalk/el-row.css';
|
||||
// import 'element-plus/theme-chalk/el-col.css';
|
||||
// import 'element-plus/theme-chalk/el-input.css';
|
||||
// import 'element-plus/theme-chalk/el-progress.css';
|
||||
// import 'element-plus/theme-chalk/el-upload.css';
|
||||
|
||||
|
||||
const emit = defineEmits(['shot'])
|
||||
// 类别及其样本的列表
|
||||
const picList = inject('picList')
|
||||
// 图片列表
|
||||
const shotList = inject('shotList')
|
||||
// 训练状态
|
||||
const states = inject('states')
|
||||
|
||||
// 用来显示进度条和名称
|
||||
const classList = ref(
|
||||
picList.value.map((item, idx) => ({
|
||||
name: item.title,
|
||||
progress: 0,
|
||||
})),
|
||||
)
|
||||
const progressColors = ['#FF6F61', '#42A5F5', '#66BB6A', '#FFA726', '#AB47BC']
|
||||
// 用来存储模型
|
||||
let featureExtractor
|
||||
// 用来存储损失值
|
||||
let lossValues = []
|
||||
// 存储被训练的模型
|
||||
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('/teachableModel/model.json')
|
||||
|
||||
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'],
|
||||
})
|
||||
|
||||
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)
|
||||
|
||||
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}`)
|
||||
}
|
||||
}
|
||||
|
||||
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()
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
return false
|
||||
}
|
||||
|
||||
function switchToUpload() {
|
||||
uploadedImg.value = ''
|
||||
}
|
||||
|
||||
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)
|
||||
|
||||
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`
|
||||
}
|
||||
|
||||
function onDragEnd() {
|
||||
document.removeEventListener('mousemove', onDragging)
|
||||
document.removeEventListener('mouseup', onDragEnd)
|
||||
}
|
||||
|
||||
defineExpose({ train })
|
||||
|
||||
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}`)
|
||||
}
|
||||
}
|
||||
</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>
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.vis-left-panel-wrapper {
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.vis-left-panel {
|
||||
min-height: 300px;
|
||||
}
|
||||
|
||||
.model-area {
|
||||
margin: 10px auto;
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
.model-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,98 @@
|
||||
<script setup>
|
||||
import { inject, ref, watch } from 'vue';
|
||||
import { Warning } from '@element-plus/icons-vue';
|
||||
import { ElButton, ElPopover, ElCard, ElText, ElIcon } from 'element-plus';
|
||||
|
||||
// import 'element-plus/theme-chalk/el-button.css';
|
||||
// import 'element-plus/theme-chalk/el-popover.css';
|
||||
// import 'element-plus/theme-chalk/el-card.css';
|
||||
// import 'element-plus/theme-chalk/el-text.css';
|
||||
// import 'element-plus/theme-chalk/el-icon.css';
|
||||
|
||||
|
||||
const emit = defineEmits(['train'])
|
||||
|
||||
// 获取类别及其样本
|
||||
const picList = inject('picList')
|
||||
// 同步训练状态
|
||||
const states = inject('states')
|
||||
|
||||
// 训练按钮是否可用
|
||||
const isTrainButtonEnabled = ref(false)
|
||||
const note_text = ref('待训练……')
|
||||
// 检查训练按钮是否可用
|
||||
function checkTrainButtonEnabled() {
|
||||
// 只考虑未被禁用的类别
|
||||
const enabledList = Array.isArray(picList.value)
|
||||
? picList.value.filter(item => item.disabled === false)
|
||||
: []
|
||||
return (
|
||||
states.value.isTraining !== 1
|
||||
&& enabledList.length > 1
|
||||
&& enabledList.every(item => Array.isArray(item.list) && item.list.length > 0)
|
||||
)
|
||||
}
|
||||
// 监听类别列表和训练状态变化，更新训练按钮的可用性
|
||||
watch(
|
||||
[picList.value, () => states.value.isTraining],
|
||||
() => {
|
||||
isTrainButtonEnabled.value = checkTrainButtonEnabled()
|
||||
if (states.value.isTraining === 0) {
|
||||
note_text.value = '待训练……'
|
||||
}
|
||||
else if (states.value.isTraining === 1) {
|
||||
note_text.value = '训练中……'
|
||||
}
|
||||
else if (states.value.isTraining === 2) {
|
||||
note_text.value = '训练完成'
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 训练模型
|
||||
function handleTrain() {
|
||||
if (isTrainButtonEnabled.value) {
|
||||
emit('train')
|
||||
states.value.isTraining = 1
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<ElCard class="train-area">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
训练
|
||||
</div>
|
||||
</template>
|
||||
<ElPopover class="box-item" placement="bottom" :disabled="isTrainButtonEnabled">
|
||||
<ElIcon>
|
||||
<Warning />
|
||||
</ElIcon>
|
||||
至少有两个类别，且每个类别都需有图像样本。
|
||||
<template #reference>
|
||||
<ElButton :disabled="!isTrainButtonEnabled" type="primary" style="max-width: 100%" @click="handleTrain">
|
||||
训练模型
|
||||
</ElButton>
|
||||
</template>
|
||||
</ElPopover>
|
||||
<br>
|
||||
<ElText>{{ note_text }}</ElText>
|
||||
</ElCard>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.train-area {
|
||||
margin: 10px auto;
|
||||
width: 85%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,4 @@
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
export const isDark = useDark()
|
||||
export const toggleDark = useToggle(isDark)
|
||||
@@ -0,0 +1 @@
|
||||
export * from './dark'
|
||||
@@ -0,0 +1,8 @@
|
||||
// only scss variables
|
||||
|
||||
$--colors: (
|
||||
"primary": ("base": #589ef8,
|
||||
),
|
||||
);
|
||||
|
||||
@forward "element-plus/theme-chalk/src/dark/var.scss" with ($colors: $--colors);
|
||||
@@ -0,0 +1,33 @@
|
||||
$--colors: (
|
||||
'primary': ('base': green,
|
||||
),
|
||||
'success': ('base': #21ba45,
|
||||
),
|
||||
'warning': ('base': #f2711c,
|
||||
),
|
||||
'danger': ('base': #db2828,
|
||||
),
|
||||
'error': ('base': #db2828,
|
||||
),
|
||||
'info': ('base': #42b8dd,
|
||||
),
|
||||
);
|
||||
|
||||
// we can add this to custom namespace, default is 'el'
|
||||
@forward 'element-plus/theme-chalk/src/mixins/config.scss' with ($namespace: 'ep'
|
||||
);
|
||||
|
||||
// You should use them in scss, because we calculate it by sass.
|
||||
// comment next lines to use default color
|
||||
@forward 'element-plus/theme-chalk/src/common/var.scss' with ( // do not use same name, it will override.
|
||||
$colors: $--colors,
|
||||
$button-padding-horizontal: ('default': 50px));
|
||||
|
||||
// if you want to import all
|
||||
// @use "element-plus/theme-chalk/src/index.scss" as *;
|
||||
|
||||
// You can comment it to hide debug info.
|
||||
// @debug $--colors;
|
||||
|
||||
// custom dark variables
|
||||
@use './dark.scss';
|
||||
@@ -0,0 +1,28 @@
|
||||
// import dark theme
|
||||
@use 'element-plus/theme-chalk/src/dark/css-vars.scss' as *;
|
||||
|
||||
// :root {
|
||||
// --ep-color-primary: red;
|
||||
// }
|
||||
|
||||
code {
|
||||
border-radius: 2px;
|
||||
padding: 2px 4px;
|
||||
background-color: var(--ep-color-primary-light-9);
|
||||
color: var(--ep-color-primary);
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
background: rgb(13, 148, 136);
|
||||
opacity: 0.75;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
6596
boards/default_src/python_pyodide/package-lock.json
generated
6596
boards/default_src/python_pyodide/package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@@ -12,19 +12,30 @@
|
||||
"publish:board": "npm publish --registry https://registry.npmjs.org/"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@vue/compiler-sfc": "^3.5.21",
|
||||
"buffer": "^6.0.3",
|
||||
"crypto-browserify": "^3.12.0",
|
||||
"path-browserify": "^1.0.1",
|
||||
"sass": "^1.93.0",
|
||||
"sass-loader": "^16.0.5",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"vm-browserify": "^1.1.2"
|
||||
"vm-browserify": "^1.1.2",
|
||||
"vue-loader": "^17.0.0",
|
||||
"vue-style-loader": "^4.1.3"
|
||||
},
|
||||
"dependencies": {
|
||||
"@basthon/kernel-loader": "^0.62.21",
|
||||
"@element-plus/icons-vue": "^2.3.2",
|
||||
"@tensorflow/tfjs": "^4.22.0",
|
||||
"@tensorflow/tfjs-vis": "^1.5.1",
|
||||
"@zenfs/core": "^1.4.0",
|
||||
"@zenfs/dom": "^1.0.6",
|
||||
"element-plus": "^2.11.3",
|
||||
"file-saver": "^2.0.5",
|
||||
"idb-keyval": "^6.2.1",
|
||||
"pixi.js": "^3.0.8"
|
||||
"jszip": "^3.10.1",
|
||||
"pixi.js": "^3.0.8",
|
||||
"vue": "^3.5.13"
|
||||
},
|
||||
"main": "./export.js",
|
||||
"author": "Mixly Team",
|
||||
|
||||
@@ -1,14 +1,18 @@
|
||||
const path = require("path");
|
||||
const common = require("../../../webpack.common");
|
||||
const { merge } = require("webpack-merge");
|
||||
const path = require('path');
|
||||
const common = require('../../../webpack.common');
|
||||
const { merge } = require('webpack-merge');
|
||||
const { VueLoaderPlugin } = require('vue-loader');
|
||||
|
||||
module.exports = merge(common, {
|
||||
|
||||
const webpackConfig = merge(common, {
|
||||
resolve: {
|
||||
alias: {
|
||||
'@mixly/python': path.resolve(__dirname, '../python'),
|
||||
'@mixly/python-mixpy': path.resolve(__dirname, '../python_mixpy')
|
||||
'@mixly/python-mixpy': path.resolve(__dirname, '../python_mixpy'),
|
||||
'vue$': 'vue/dist/vue.esm-bundler.js',
|
||||
'@': __dirname
|
||||
},
|
||||
extensions: ['.ts', '.js'],
|
||||
extensions: ['*', '.ts', '.js', '.vue', '.json'],
|
||||
fallback: {
|
||||
// for ocaml bundle
|
||||
constants: require.resolve('constants-browserify'),
|
||||
@@ -28,7 +32,21 @@ module.exports = merge(common, {
|
||||
{
|
||||
resourceQuery: /asset-url/,
|
||||
type: 'asset/resource',
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
use: ['vue-style-loader', 'css-loader', 'sass-loader'],
|
||||
},
|
||||
]
|
||||
}
|
||||
});
|
||||
},
|
||||
plugins: [
|
||||
new VueLoaderPlugin()
|
||||
]
|
||||
});
|
||||
|
||||
webpackConfig.module.rules.unshift({
|
||||
test: /\.vue$/,
|
||||
use: ['vue-loader']
|
||||
});
|
||||
|
||||
module.exports = webpackConfig;
|
||||
94
package-lock.json
generated
94
package-lock.json
generated
@@ -44,10 +44,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babel/helper-validator-identifier": {
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
|
||||
"integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
|
||||
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">=6.9.0"
|
||||
}
|
||||
@@ -306,10 +307,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
||||
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
|
||||
"dev": true
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
||||
"dev": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/@jridgewell/trace-mapping": {
|
||||
"version": "0.3.25",
|
||||
@@ -3671,9 +3673,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
|
||||
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
|
||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -3681,6 +3683,7 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.cjs"
|
||||
},
|
||||
@@ -4045,10 +4048,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/picocolors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz",
|
||||
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
|
||||
"dev": true
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"dev": true,
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/picomatch": {
|
||||
"version": "2.3.1",
|
||||
@@ -4127,9 +4131,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/postcss": {
|
||||
"version": "8.4.39",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.39.tgz",
|
||||
"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"funding": [
|
||||
{
|
||||
@@ -4145,10 +4149,11 @@
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.0.1",
|
||||
"source-map-js": "^1.2.0"
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^10 || ^12 || >=14"
|
||||
@@ -4975,10 +4980,11 @@
|
||||
}
|
||||
},
|
||||
"node_modules/source-map-js": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true,
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@@ -5889,9 +5895,9 @@
|
||||
}
|
||||
},
|
||||
"@babel/helper-validator-identifier": {
|
||||
"version": "7.24.7",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.7.tgz",
|
||||
"integrity": "sha512-rR+PBcQ1SMQDDyF6X0wxtG8QyLCgUB0eRAGguqRLfkCA87l7yAP7ehq8SNj96OOGTO8OBV70KhuFYcIkHXOg0w==",
|
||||
"version": "7.27.1",
|
||||
"resolved": "https://registry.npmmirror.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
|
||||
"integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
|
||||
"dev": true
|
||||
},
|
||||
"@babel/highlight": {
|
||||
@@ -6088,9 +6094,9 @@
|
||||
}
|
||||
},
|
||||
"@jridgewell/sourcemap-codec": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
|
||||
"integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
|
||||
"version": "1.5.5",
|
||||
"resolved": "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
|
||||
"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
|
||||
"dev": true
|
||||
},
|
||||
"@jridgewell/trace-mapping": {
|
||||
@@ -8659,9 +8665,9 @@
|
||||
}
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.3.7",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.7.tgz",
|
||||
"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
|
||||
"version": "3.3.11",
|
||||
"resolved": "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.11.tgz",
|
||||
"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
|
||||
"dev": true
|
||||
},
|
||||
"natural-compare": {
|
||||
@@ -8931,9 +8937,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"picocolors": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.1.tgz",
|
||||
"integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==",
|
||||
"version": "1.1.1",
|
||||
"resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.1.1.tgz",
|
||||
"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
|
||||
"dev": true
|
||||
},
|
||||
"picomatch": {
|
||||
@@ -8991,14 +8997,14 @@
|
||||
}
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.39",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.39.tgz",
|
||||
"integrity": "sha512-0vzE+lAiG7hZl1/9I8yzKLx3aR9Xbof3fBHKunvMfOCYAtMhrsnccJY2iTURb9EZd5+pLuiNV9/c/GZJOHsgIw==",
|
||||
"version": "8.5.6",
|
||||
"resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.5.6.tgz",
|
||||
"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"nanoid": "^3.3.7",
|
||||
"picocolors": "^1.0.1",
|
||||
"source-map-js": "^1.2.0"
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
"source-map-js": "^1.2.1"
|
||||
}
|
||||
},
|
||||
"postcss-loader": {
|
||||
@@ -9609,9 +9615,9 @@
|
||||
"dev": true
|
||||
},
|
||||
"source-map-js": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.0.tgz",
|
||||
"integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz",
|
||||
"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
|
||||
"dev": true
|
||||
},
|
||||
"source-map-support": {
|
||||
|
||||
Reference in New Issue
Block a user