chore: did more clean up
This commit is contained in:
@@ -2,21 +2,21 @@
|
||||
export type Image = {
|
||||
file_path: string;
|
||||
mode: number;
|
||||
status: number;
|
||||
id: string;
|
||||
status: number;
|
||||
id: string;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import Tabs from 'src/lib/Tabs.svelte';
|
||||
import type { Class } from './ModelData.svelte';
|
||||
import { get, postFormData, rdelete } from 'src/lib/requests.svelte';
|
||||
import { post, postFormData, rdelete } from 'src/lib/requests.svelte';
|
||||
import type { Model } from './+page.svelte';
|
||||
import FileUpload from 'src/lib/FileUpload.svelte';
|
||||
import MessageSimple from 'src/lib/MessageSimple.svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
const dispatch = createEventDispatcher<{reload: void}>();
|
||||
const dispatch = createEventDispatcher<{ reload: void }>();
|
||||
|
||||
let selected_class: Class | undefined = $state();
|
||||
|
||||
@@ -37,11 +37,10 @@
|
||||
|
||||
async function getList() {
|
||||
try {
|
||||
let url = new URLSearchParams();
|
||||
url.append('id', selected_class?.id ?? '');
|
||||
url.append('page', `${page}`);
|
||||
|
||||
let res = await get('models/data/list?' + url.toString());
|
||||
let res = await post('models/data/list', {
|
||||
id: selected_class?.id ?? '',
|
||||
page: page
|
||||
});
|
||||
showNext = res.showNext;
|
||||
image_list = res.image_list;
|
||||
} catch (e) {
|
||||
@@ -61,43 +60,42 @@
|
||||
}
|
||||
});
|
||||
|
||||
let file: File | undefined = $state();
|
||||
let uploadImage: MessageSimple;
|
||||
let uploading = $state(Promise.resolve());
|
||||
let file: File | undefined = $state();
|
||||
let uploadImage: MessageSimple;
|
||||
let uploading = $state(Promise.resolve());
|
||||
|
||||
async function uploadZip() {
|
||||
uploadImage.clear();
|
||||
if (!file) return;
|
||||
async function uploadZip() {
|
||||
uploadImage.clear();
|
||||
if (!file) return;
|
||||
|
||||
uploading = new Promise(() => {});
|
||||
uploading = new Promise(() => {});
|
||||
|
||||
let form = new FormData();
|
||||
form.append('id', model.id);
|
||||
form.append('file', file, 'upload.zip');
|
||||
|
||||
try {
|
||||
await postFormData('models/data/class/upload', form);
|
||||
dispatch('reload');
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
uploadImage.display(await e.json());
|
||||
} else {
|
||||
uploadImage.display('');
|
||||
}
|
||||
}
|
||||
let form = new FormData();
|
||||
form.append('id', model.id);
|
||||
form.append('file', file, 'upload.zip');
|
||||
|
||||
uploading = Promise.resolve();
|
||||
}
|
||||
|
||||
function deleteDataPoint(id: string) {
|
||||
try {
|
||||
rdelete('models/data/point', { id })
|
||||
getList()
|
||||
} catch (e) {
|
||||
try {
|
||||
await postFormData('models/data/class/upload', form);
|
||||
dispatch('reload');
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
uploadImage.display(await e.json());
|
||||
} else {
|
||||
uploadImage.display('');
|
||||
}
|
||||
}
|
||||
|
||||
uploading = Promise.resolve();
|
||||
}
|
||||
|
||||
function deleteDataPoint(id: string) {
|
||||
try {
|
||||
rdelete('models/data/point', { id });
|
||||
getList();
|
||||
} catch (e) {
|
||||
console.error('TODO notify user', e);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if classes.length == 0}
|
||||
@@ -106,47 +104,48 @@
|
||||
<Tabs active={classes[0]?.name} let:isActive>
|
||||
<div class="buttons" slot="buttons" let:setActive let:isActive>
|
||||
<!-- TODO Auto Load 1st -->
|
||||
<div>
|
||||
{#each classes as item}
|
||||
<button
|
||||
on:click={() => setActiveClass(item, setActive)}
|
||||
class="tab"
|
||||
class:selected={isActive(item.name)}
|
||||
>
|
||||
{item.name}
|
||||
{#if model.model_type == 2}
|
||||
{#if item.status == 1}
|
||||
<span class="bi bi-book" style="color: orange;" />
|
||||
{:else if item.status == 2}
|
||||
<span class="bi bi-book" style="color: green;" />
|
||||
{:else if item.status == 3}
|
||||
<span class="bi bi-check" style="color: green;" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<button on:click={() => {
|
||||
setActive("-----New Class-----")();
|
||||
selected_class = undefined;
|
||||
}}>
|
||||
<span class="bi bi-plus" />
|
||||
</button>
|
||||
<div>
|
||||
{#each classes as item}
|
||||
<button
|
||||
on:click={() => setActiveClass(item, setActive)}
|
||||
class="tab"
|
||||
class:selected={isActive(item.name)}
|
||||
>
|
||||
{item.name}
|
||||
{#if model.model_type == 2}
|
||||
{#if item.status == 1}
|
||||
<span class="bi bi-book" style="color: orange;" />
|
||||
{:else if item.status == 2}
|
||||
<span class="bi bi-book" style="color: green;" />
|
||||
{:else if item.status == 3}
|
||||
<span class="bi bi-check" style="color: green;" />
|
||||
{/if}
|
||||
{/if}
|
||||
</button>
|
||||
{/each}
|
||||
</div>
|
||||
<button
|
||||
on:click={() => {
|
||||
setActive('-----New Class-----')();
|
||||
selected_class = undefined;
|
||||
}}
|
||||
>
|
||||
<span class="bi bi-plus" />
|
||||
</button>
|
||||
</div>
|
||||
{#if selected_class == undefined && isActive('-----New Class-----')}
|
||||
<div class="content selected">
|
||||
<h2>
|
||||
Add New Class
|
||||
</h2>
|
||||
<form on:submit|preventDefault={uploadZip}>
|
||||
<fieldset class="file-upload" >
|
||||
<label for="file">Data file</label>
|
||||
<div class="form-msg">
|
||||
Please provide a file that has the training and testing data<br/>
|
||||
The file must have 2 folders one with testing images and one with training images. <br/>
|
||||
Each of the folders will contain the classes of the model. The folders must be the same in testing and training.
|
||||
The class folders must have the images for the classes.
|
||||
<pre>
|
||||
{#if selected_class == undefined && isActive('-----New Class-----')}
|
||||
<div class="content selected">
|
||||
<h2>Add New Class</h2>
|
||||
<form on:submit|preventDefault={uploadZip}>
|
||||
<fieldset class="file-upload">
|
||||
<label for="file">Data file</label>
|
||||
<div class="form-msg">
|
||||
Please provide a file that has the training and testing data<br />
|
||||
The file must have 2 folders one with testing images and one with training images.
|
||||
<br />
|
||||
Each of the folders will contain the classes of the model. The folders must be the same
|
||||
in testing and training. The class folders must have the images for the classes.
|
||||
<pre>
|
||||
training\
|
||||
class1\
|
||||
img1.png
|
||||
@@ -172,147 +171,132 @@
|
||||
...
|
||||
...
|
||||
</pre>
|
||||
</div>
|
||||
<FileUpload replace_slot bind:file={file} accept="application/zip" notExpand >
|
||||
<img src="/imgs/upload-icon.png" alt="" />
|
||||
<span>
|
||||
Upload Zip File
|
||||
</span>
|
||||
<div slot="replaced" style="display: inline;">
|
||||
<img src="/imgs/upload-icon.png" alt="" />
|
||||
<span>
|
||||
File selected
|
||||
</span>
|
||||
</div>
|
||||
</FileUpload>
|
||||
</fieldset>
|
||||
<MessageSimple bind:this={uploadImage} />
|
||||
{#if file}
|
||||
{#await uploading}
|
||||
<button disabled>
|
||||
Uploading
|
||||
</button>
|
||||
{:then}
|
||||
<button>
|
||||
Add
|
||||
</button>
|
||||
{/await}
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
{#if selected_class}
|
||||
<div class="content selected">
|
||||
{#if model.model_type == 2}
|
||||
{#if selected_class?.status == 1}
|
||||
<h2>
|
||||
Class to train
|
||||
</h2>
|
||||
{:else if selected_class?.status == 2}
|
||||
<h2>
|
||||
Class training
|
||||
</h2>
|
||||
{:else if selected_class?.status == 3}
|
||||
<h2>
|
||||
Class trained
|
||||
</h2>
|
||||
{/if}
|
||||
{/if}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> File Path </th>
|
||||
<th> Mode </th>
|
||||
<th>
|
||||
<!-- Img -->
|
||||
</th>
|
||||
<th>
|
||||
<!-- Status -->
|
||||
</th>
|
||||
<th>
|
||||
<!-- Remove -->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each image_list as image}
|
||||
<tr>
|
||||
<td>
|
||||
{#if image.file_path == 'id://'}
|
||||
Managed
|
||||
{:else}
|
||||
{image.file_path}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if image.mode == 2}
|
||||
Testing
|
||||
{:else}
|
||||
Training
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if image.file_path == 'id://'}
|
||||
<img
|
||||
alt=""
|
||||
src="/api/savedData/{model.id}/data/{image.id}.{model.format}"
|
||||
height="30px"
|
||||
width="30px"
|
||||
style="object-fit: contain;"
|
||||
/>
|
||||
{:else}
|
||||
TODO img {image.file_path}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if image.status == 1}
|
||||
<span class="bi bi-check-circle-fill" style="color: green"></span>
|
||||
{:else}
|
||||
<span class="bi bi-exclamation-triangle-fill" style="color: red"></span>
|
||||
{/if}
|
||||
</td>
|
||||
<td style="width: 3ch">
|
||||
<button class="danger" on:click={() => deleteDataPoint(image.id)}>
|
||||
<span class="bi bi-trash"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-center align-center">
|
||||
<div class="grow-1 flex justify-end align-center">
|
||||
{#if page > 0}
|
||||
<button on:click={() => (page -= 1)}> Prev </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<FileUpload replace_slot bind:file accept="application/zip" notExpand>
|
||||
<img src="/imgs/upload-icon.png" alt="" />
|
||||
<span> Upload Zip File </span>
|
||||
<div slot="replaced" style="display: inline;">
|
||||
<img src="/imgs/upload-icon.png" alt="" />
|
||||
<span> File selected </span>
|
||||
</div>
|
||||
</FileUpload>
|
||||
</fieldset>
|
||||
<MessageSimple bind:this={uploadImage} />
|
||||
{#if file}
|
||||
{#await uploading}
|
||||
<button disabled> Uploading </button>
|
||||
{:then}
|
||||
<button> Add </button>
|
||||
{/await}
|
||||
{/if}
|
||||
</form>
|
||||
</div>
|
||||
{/if}
|
||||
{#if selected_class}
|
||||
<div class="content selected">
|
||||
{#if model.model_type == 2}
|
||||
{#if selected_class?.status == 1}
|
||||
<h2>Class to train</h2>
|
||||
{:else if selected_class?.status == 2}
|
||||
<h2>Class training</h2>
|
||||
{:else if selected_class?.status == 3}
|
||||
<h2>Class trained</h2>
|
||||
{/if}
|
||||
{/if}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> File Path </th>
|
||||
<th> Mode </th>
|
||||
<th>
|
||||
<!-- Img -->
|
||||
</th>
|
||||
<th>
|
||||
<!-- Status -->
|
||||
</th>
|
||||
<th>
|
||||
<!-- Remove -->
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each image_list as image}
|
||||
<tr>
|
||||
<td>
|
||||
{#if image.file_path == 'id://'}
|
||||
Managed
|
||||
{:else}
|
||||
{image.file_path}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if image.mode == 2}
|
||||
Testing
|
||||
{:else}
|
||||
Training
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if image.file_path == 'id://'}
|
||||
<img
|
||||
alt=""
|
||||
src="/api/savedData/{model.id}/data/{image.id}.{model.format}"
|
||||
height="30px"
|
||||
width="30px"
|
||||
style="object-fit: contain;"
|
||||
/>
|
||||
{:else}
|
||||
TODO img {image.file_path}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if image.status == 1}
|
||||
<span class="bi bi-check-circle-fill" style="color: green"></span>
|
||||
{:else}
|
||||
<span class="bi bi-exclamation-triangle-fill" style="color: red"></span>
|
||||
{/if}
|
||||
</td>
|
||||
<td style="width: 3ch">
|
||||
<button class="danger" on:click={() => deleteDataPoint(image.id)}>
|
||||
<span class="bi bi-trash"></span>
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-center align-center">
|
||||
<div class="grow-1 flex justify-end align-center">
|
||||
{#if page > 0}
|
||||
<button on:click={() => (page -= 1)}> Prev </button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px;">
|
||||
{page}
|
||||
</div>
|
||||
<div style="padding: 10px;">
|
||||
{page}
|
||||
</div>
|
||||
|
||||
<div class="grow-1 flex justify-start align-center">
|
||||
{#if showNext}
|
||||
<button on:click={() => (page += 1)}> Next </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="grow-1 flex justify-start align-center">
|
||||
{#if showNext}
|
||||
<button on:click={() => (page += 1)}> Next </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</Tabs>
|
||||
{/if}
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
&>button {
|
||||
margin: 3px 5px;
|
||||
}
|
||||
}
|
||||
& > button {
|
||||
margin: 3px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
|
||||
Reference in New Issue
Block a user