Team2890/PhotonVision
4
0
Fork 0
mirror of https://github.com/PhotonVision/photonvision synced 2026-06-23 01:21:40 +00:00
Code Issues Packages Projects Releases Wiki Activity

Vue 3 Upgrade (#1900)

Browse Source 
## Description

Upgrades to Vue 3 and necessary associated dependencies. Also fixes some
issues with the layout and adds validation for object detection models.

Closes #885, closes #1943, closes #1449.
## Meta

Merge checklist:
- [x] Pull Request title is [short, imperative
summary](https://cbea.ms/git-commit/) of proposed changes
- [x] The description documents the _what_ and _why_
- [ ] If this PR changes behavior or adds a feature, user documentation
is updated
- [ ] If this PR touches photon-serde, all messages have been
regenerated and hashes have not changed unexpectedly
- [ ] If this PR touches configuration, this is backwards compatible
with settings back to v2024.3.1
- [ ] If this PR touches pipeline settings or anything related to data
exchange, the frontend typing is updated
- [ ] If this PR addresses a bug, a regression test for it is added

---------

Co-authored-by: Matt M <matthew.morley.ca@gmail.com>
Co-authored-by: Gold856 <117957790+Gold856@users.noreply.github.com>
Co-authored-by: samfreund <techguy763@gmail.com>
This commit is contained in:
Graham
2025-05-06 18:21:41 -04:00
committed by GitHub
parent 29f76bc1c3
commit bec8092660
54 changed files with 1661 additions and 1843 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
photon-client/src/components/settings/ObjectDetectionCard.vue
View File

@@ -1,5 +1,5 @@
<script setup lang="ts">
import { ref, computed } from "vue";
import { ref, computed, inject } from "vue";
import axios from "axios";
import { useStateStore } from "@/stores/StateStore";
import { useSettingsStore } from "@/stores/settings/GeneralSettingsStore";
@@ -8,6 +8,28 @@ const showImportDialog = ref(false);
const importRKNNFile = ref<File | null>(null);
const importLabelsFile = ref<File | null>(null);
const host = inject<string>("backendHost");
const areValidFileNames = (weights: string | null, labels: string | null) => {
const weightsRegex = /^([a-zA-Z0-9._]+)-(\d+)-(\d+)-(yolov(?:5|8|11)[nsmlx]*)\.rknn$/;
const labelsRegex = /^([a-zA-Z0-9._]+)-(\d+)-(\d+)-(yolov(?:5|8|11)[nsmlx]*)-labels\.txt$/;
if (weights && labels) {
const weightsMatch = weights.match(weightsRegex);
const labelsMatch = labels.match(labelsRegex);
if (weightsMatch && labelsMatch) {
return (
weightsMatch[1] === labelsMatch[1] &&
weightsMatch[2] === labelsMatch[2] &&
weightsMatch[3] === labelsMatch[3] &&
weightsMatch[4] === labelsMatch[4]
);
}
}
return false;
};
// TODO gray out the button when model is uploading
const handleImport = async () => {
if (importRKNNFile.value === null || importLabelsFile.value === null) return;
@@ -65,19 +87,19 @@ const supportedModels = computed(() => {
</script>
<template>
<v-card dark class="mb-3" style="background-color: #006492">
<v-card class="mb-3" style="background-color: #006492">
<v-card-title class="pa-6">Object Detection</v-card-title>
<div class="pa-6 pt-0">
<v-row>
<v-col cols="12 ">
<v-btn color="secondary" class="justify-center" @click="() => (showImportDialog = true)">
<v-icon left class="open-icon"> mdi-import </v-icon>
<v-icon start class="open-icon"> mdi-import </v-icon>
<span class="open-label">Import New Model</span>
</v-btn>
<v-dialog
v-model="showImportDialog"
width="600"
@input="
@update:modelValue="
() => {
importRKNNFile = null;
importLabelsFile = null;
@@ -87,30 +109,28 @@ const supportedModels = computed(() => {
<v-card color="primary" dark>
<v-card-title>Import New Object Detection Model</v-card-title>
<v-card-text>
Upload a new object detection model to this device that can be used in a pipeline. Naming convention
should be <code>name-verticalResolution-horizontalResolution-yolovXXX</code>. The
<code>name</code> should only include alphanumeric characters, periods, and underscores. Additionally,
the labels file ought to have the same name as the RKNN file, with <code>-labels</code> appended to the
end. For example, if the RKNN file is named <code>note-640-640-yolov5s.rknn</code>, the labels file
should be named <code>note-640-640-yolov5s-labels.txt</code>. Note that ONLY 640x640 YOLOv5, YOLOv8, and
YOLOv11 models trained and converted to `.rknn` format for RK3588 CPUs are currently supported!
Upload a new object detection model to this device that can be used in a pipeline. Note that ONLY
640x640 YOLOv5, YOLOv8, and YOLOv11 models trained and converted to `.rknn` format for RK3588 CPUs are
currently supported! See [the documentation]({{
host
}}/docs/objectDetection/about-object-detection.html) for more details.
<v-row class="mt-6 ml-4 mr-8">
<v-file-input v-model="importRKNNFile" label="RKNN File" accept=".rknn" />
</v-row>
<v-row class="mt-6 ml-4 mr-8">
<v-file-input v-model="importLabelsFile" label="Labels File" accept=".txt" />
</v-row>
<v-row
class="mt-12 ml-8 mr-8 mb-1"
style="display: flex; align-items: center; justify-content: center"
align="center"
>
<v-row class="mt-12 ml-8 mr-8 mb-1" style="display: flex; align-items: center; justify-content: center">
<v-btn
color="secondary"
:disabled="importRKNNFile === null || importLabelsFile === null"
:disabled="
importRKNNFile === null ||
importLabelsFile === null ||
!areValidFileNames(importRKNNFile.name, importLabelsFile.name)
"
@click="handleImport"
>
<v-icon left class="open-icon"> mdi-import </v-icon>
<v-icon start class="open-icon"> mdi-import </v-icon>
<span class="open-label">Import Object Detection Model</span>
</v-btn>
</v-row>
@@ -121,7 +141,7 @@ const supportedModels = computed(() => {
</v-row>
<v-row>
<v-col cols="12">
<v-simple-table fixed-header height="100%" dense dark>
<v-table fixed-header height="100%" density="compact" dark>
<thead style="font-size: 1.25rem">
<tr>
<th class="text-left">Available Models</th>
@@ -132,7 +152,7 @@ const supportedModels = computed(() => {
<td>{{ model }}</td>
</tr>
</tbody>
</v-simple-table>
</v-table>
</v-col>
</v-row>
</div>
@@ -151,7 +171,7 @@ const supportedModels = computed(() => {
display: none;
}
}
.v-data-table {
.v-table {
width: 100%;
height: 100%;
text-align: center;