ran prettier

This commit is contained in:
Andre Henriques 2024-04-14 15:22:46 +01:00
parent e7eeccd09e
commit 5f11126acd
19 changed files with 528 additions and 565 deletions

View File

@ -1,44 +1,53 @@
<script lang="ts">
let { replace_slot, accept, file, notExpand } = $props<{
replace_slot?: boolean,
accept?: string,
file?: File,
notExpand?: boolean
}>();
let { replace_slot, accept, file, notExpand } = $props<{
replace_slot?: boolean;
accept?: string;
file?: File;
notExpand?: boolean;
}>();
let fileInput: HTMLInputElement;
let fileInput: HTMLInputElement;
let fileData: string | undefined = $state(undefined);
let fileData: string | undefined = $state(undefined);
function onChange(e: Event & {currentTarget: HTMLInputElement}) {
if (!e.currentTarget.files) {
return;
}
function onChange(e: Event & { currentTarget: HTMLInputElement }) {
if (!e.currentTarget.files) {
return;
}
file = e.currentTarget.files[0];
const fileReader = new FileReader();
fileReader.onloadend = () => {
fileData = String(fileReader.result);
//elm.classList.add("adapt");
}
fileReader.readAsDataURL(file)
}
file = e.currentTarget.files[0];
const fileReader = new FileReader();
fileReader.onloadend = () => {
fileData = String(fileReader.result);
//elm.classList.add("adapt");
};
fileReader.readAsDataURL(file);
}
</script>
<div class="icon-holder">
<button class="icon" class:adapt={replace_slot && file && !notExpand} on:click={() => fileInput.click()}>
{#if replace_slot && file}
<slot name="replaced" file={file}>
<img src={fileData} alt="" />
<slot name="replaced-name">
Image Uploaded
</slot>
</slot>
{:else}
<slot></slot>
{/if}
</button>
<input id="file" name="file" type="file" required accept={accept} bind:this={fileInput} on:change={onChange} />
<button
class="icon"
class:adapt={replace_slot && file && !notExpand}
on:click={() => fileInput.click()}
>
{#if replace_slot && file}
<slot name="replaced" {file}>
<img src={fileData} alt="" />
<slot name="replaced-name">Image Uploaded</slot>
</slot>
{:else}
<slot />
{/if}
</button>
<input
id="file"
name="file"
type="file"
required
{accept}
bind:this={fileInput}
on:change={onChange}
/>
</div>

View File

@ -14,10 +14,10 @@
let timeout: number | undefined = undefined;
export function clear() {
if (timeout) clearTimeout(timeout);
message = undefined;
}
export function clear() {
if (timeout) clearTimeout(timeout);
message = undefined;
}
export function display(
msg: string,

View File

@ -1,73 +1,71 @@
<script lang="ts">
let {active, nobox} = $props<{active?: string, nobox?: boolean}>();
function setActive(name: string) {
return () => active = name;
}
let { active, nobox } = $props<{ active?: string; nobox?: boolean }>();
function isActive(name: string) {
return name == active;
}
function setActive(name: string) {
return () => (active = name);
}
function isActive(name: string) {
return name == active;
}
</script>
<div class="tabs" class:nobox>
<div class="tab-buttons">
<slot name="buttons" {setActive} {isActive} />
</div>
<slot {isActive} {active} />
<div class="tab-buttons">
<slot name="buttons" {setActive} {isActive} />
</div>
<slot {isActive} {active} />
</div>
<style lang="scss">
.tabs {
border-radius: 5px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
box-shadow: 0 2px 8px 1px #66666655;
gap: 0 5px;
.tabs {
border-radius: 5px;
overflow: hidden;
display: flex;
flex-wrap: wrap;
box-shadow: 0 2px 8px 1px #66666655;
gap: 0 5px;
.tab-buttons {
display: flex;
overflow-x: scroll;
width: 100%;
.tab-buttons {
display: flex;
overflow-x: scroll;
width: 100%;
:global(.buttons) {
width: 100%;
}
:global(.buttons) {
width: 100%;
}
:global(.tab) {
padding: 5px;
background: var(--light-grey);
border-radius: 5px 5px 0 0;
box-shadow: none;
font-size: 1.1rem;
}
:global(.tab) {
padding: 5px;
background: var(--light-grey);
border-radius: 5px 5px 0 0;
box-shadow: none;
font-size: 1.1rem;
}
:global(.tab.selected) {
box-shadow: inset 0 2px 8px 1px #66666655;
}
}
:global(.tab.selected) {
box-shadow: inset 0 2px 8px 1px #66666655;
}
}
:global(.content) {
display: none;
padding: 5px;
width: 100%;
}
:global(.content) {
display: none;
padding: 5px;
width: 100%;
}
:global(.content.selected) {
display: block;
box-shadow: 0 2px 2px 1px #66666655;
}
:global(.content.selected) {
display: block;
box-shadow: 0 2px 2px 1px #66666655;
}
&.nobox {
box-shadow: none;
overflow: visible;
&.nobox {
box-shadow: none;
overflow: visible;
:global(.content.selected) {
box-shadow: none;
}
}
}
:global(.content.selected) {
box-shadow: none;
}
}
}
</style>

View File

@ -1,17 +1,17 @@
<script lang="ts">
import { page } from '$app/stores';
import { page } from '$app/stores';
import Page404 from './Page404.svelte';
</script>
{#if $page.error}
{#if $page.status == 404}
<Page404 />
{:else}
<h1>
{$page.status}
</h1>
<h2>
{$page.error.message}
</h2>
{/if}
{#if $page.status == 404}
<Page404 />
{:else}
<h1>
{$page.status}
</h1>
<h2>
{$page.error.message}
</h2>
{/if}
{/if}

View File

@ -1,7 +1,7 @@
<script lang="ts">
import '../styles/fonts.css';
import '../styles/app.css';
import NavBar from "../NavBar.svelte";
import NavBar from '../NavBar.svelte';
</script>
<NavBar />

View File

@ -1,54 +1,46 @@
<script lang="ts">
let { message, goBackLink } = $props<{message?: string, goBackLink?: string}>();
let { message, goBackLink } = $props<{ message?: string; goBackLink?: string }>();
</script>
<div class="page404">
<div>
<h1>
404
</h1>
{#if message}
<h2>
{message}
</h2>
{#if goBackLink}
<div class="description">
<a href={goBackLink}>
👈 Go back
</a>
</div>
{/if}
{:else}
<h2>
Page Not found
</h2>
<div class="description">
The page you were looking for does not exist
</div>
{/if}
</div>
<div>
<h1>404</h1>
{#if message}
<h2>
{message}
</h2>
{#if goBackLink}
<div class="description">
<a href={goBackLink}> 👈 Go back </a>
</div>
{/if}
{:else}
<h2>Page Not found</h2>
<div class="description">The page you were looking for does not exist</div>
{/if}
</div>
</div>
<style lang="scss">
.page404 {
display: grid;
place-items: center;
height: calc(100vh - 60px);
text-align: center;
.page404 {
display: grid;
place-items: center;
height: calc(100vh - 60px);
text-align: center;
h1 {
font-size: 10em;
margin: 0;
}
h1 {
font-size: 10em;
margin: 0;
}
h2 {
font-size: 5em;
margin: 0;
margin-bottom: 0.3em;
}
h2 {
font-size: 5em;
margin: 0;
margin-bottom: 0.3em;
}
div.description {
font-size: 1.5em;
}
}
div.description {
font-size: 1.5em;
}
}
</style>

View File

@ -1,55 +1,55 @@
import { goto } from "$app/navigation";
import { goto } from '$app/navigation';
type User = {
token: string,
id: string,
user_type: number,
username: string,
email: string,
token: string;
id: string;
user_type: number;
username: string;
email: string;
};
export function createUserStore() {
let user = $state<User | undefined>(undefined);
let user = $state<User | undefined>(undefined);
function getValue() {
if (user == undefined) {
let storage = localStorage.getItem('user');
if (storage) {
try {
user = JSON.parse(storage);
} catch {
user = undefined;
}
}
}
return user;
}
function getValue() {
if (user == undefined) {
let storage = localStorage.getItem('user');
if (storage) {
try {
user = JSON.parse(storage);
} catch {
user = undefined;
}
}
}
return user;
}
return {
get user() {
return getValue();
},
set user(value: User | undefined) {
if (value) {
localStorage.setItem('user', JSON.stringify(value));
} else {
localStorage.removeItem('user');
}
user = value;
},
checkUser(pathOnFail: string, level?: number) {
if (user && user.level > (level ?? 2) ) {
goto(pathOnFail);
return true;
}
return {
get user() {
return getValue();
},
set user(value: User | undefined) {
if (value) {
localStorage.setItem('user', JSON.stringify(value));
} else {
localStorage.removeItem('user');
}
user = value;
},
checkUser(pathOnFail: string, level?: number) {
if (user && user.level > (level ?? 2)) {
goto(pathOnFail);
return true;
}
return false;
},
isLogin() {
if (getValue()) return true;
return false;
}
}
return false;
},
isLogin() {
if (getValue()) return true;
return false;
}
};
}
export const userStore = createUserStore();

View File

@ -1,83 +1,77 @@
<script lang="ts">
import { post } from 'src/lib/requests.svelte';
import 'src/styles/forms.css';
import 'src/styles/forms.css';
import { userStore } from '../UserStore.svelte';
import { goto } from '$app/navigation';
let submitted = $state(false);
let loginData = $state({
email: '',
password: '',
});
let submitted = $state(false);
let errorMessage = $state("");
let loginData = $state({
email: '',
password: ''
});
async function onSubmit() {
submitted = true;
errorMessage = "";
try {
const req = await post('login', loginData);
userStore.user = req;
goto("/");
} catch (e) {
loginData.password = "";
if (e instanceof Response) {
errorMessage = await e.json();
} else {
errorMessage = "Server could not perform login";
}
}
}
let errorMessage = $state('');
async function onSubmit() {
submitted = true;
errorMessage = '';
try {
const req = await post('login', loginData);
userStore.user = req;
goto('/');
} catch (e) {
loginData.password = '';
if (e instanceof Response) {
errorMessage = await e.json();
} else {
errorMessage = 'Server could not perform login';
}
}
}
</script>
<svelte:head>
<title> Login </title>
<title>Login</title>
</svelte:head>
<div class="login-page">
<div>
<h1>
Login
</h1>
<form on:submit|preventDefault={onSubmit} class:submitted >
<fieldset>
<label for="email">Email</label>
<input type="email" required name="email" bind:value={loginData.email} />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input required name="password" type="password" bind:value={loginData.password} />
{#if errorMessage}
<span class="form-msg error">
{errorMessage}
<!--Either the password or the email are incorrect-->
</span>
{/if}
</fieldset>
<button>
Login
</button>
<div class="spacer"></div>
<a class="simple-link text-center w100 spacer" href="/register">
Register
</a>
</form>
</div>
<div>
<h1>Login</h1>
<form on:submit|preventDefault={onSubmit} class:submitted>
<fieldset>
<label for="email">Email</label>
<input type="email" required name="email" bind:value={loginData.email} />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input required name="password" type="password" bind:value={loginData.password} />
{#if errorMessage}
<span class="form-msg error">
{errorMessage}
<!--Either the password or the email are incorrect-->
</span>
{/if}
</fieldset>
<button> Login </button>
<div class="spacer"></div>
<a class="simple-link text-center w100 spacer" href="/register"> Register </a>
</form>
</div>
</div>
<style lang="scss">
/* Login Page */
.login-page {
display: grid;
place-items: center;
margin-bottom: 40px;
& > div {
width: 40vw;
}
h1 {
text-align: center;
}
}
/* Login Page */
.login-page {
display: grid;
place-items: center;
margin-bottom: 40px;
& > div {
width: 40vw;
}
h1 {
text-align: center;
}
}
</style>

View File

@ -1,10 +1,10 @@
<script lang="ts">
import { onMount } from "svelte";
import { userStore } from "../UserStore.svelte";
import { goto } from "$app/navigation";
import { onMount } from 'svelte';
import { userStore } from '../UserStore.svelte';
import { goto } from '$app/navigation';
onMount(() => {
userStore.user = undefined;
goto('/');
});
onMount(() => {
userStore.user = undefined;
goto('/');
});
</script>

View File

@ -1,105 +1,94 @@
<script lang="ts">
import MessageSimple from "src/lib/MessageSimple.svelte";
import { onMount } from "svelte";
import { get } from '$lib/requests.svelte'
import MessageSimple from 'src/lib/MessageSimple.svelte';
import { onMount } from 'svelte';
import { get } from '$lib/requests.svelte';
let list = $state<{
name: string,
id: string,
}[]>([]);
let list = $state<
{
name: string;
id: string;
}[]
>([]);
let message: MessageSimple;
let message: MessageSimple;
onMount(async () => {
try {
list = await get("models");
} catch (e) {
if (e instanceof Response) {
message.display(await e.json())
} else {
message.display("Could not request list of models");
}
}
});
onMount(async () => {
try {
list = await get('models');
} catch (e) {
if (e instanceof Response) {
message.display(await e.json());
} else {
message.display('Could not request list of models');
}
}
});
</script>
<svelte:head>
<title>
Models
</title>
<title>Models</title>
</svelte:head>
<main>
<MessageSimple bind:this={message} />
{#if list.length > 0}
<div class="list-header">
<h2>My Models</h2>
<div class="expand"></div>
<a class="button" href="/models/add">
New
</a>
</div>
<table class="table">
<thead>
<tr>
<th>
Name
</th>
<th>
<!-- Open Button -->
</th>
</tr>
</thead>
<tbody>
{#each list as item}
<tr>
<td>
{item.name}
</td>
<td class="text-center">
<a class="button simple" href="/models/edit?id={item.id}">
Edit
</a>
</td>
</tr>
{/each}
</tbody>
</table>
{:else}
<h2 class="text-center">
You don't have any models
</h2>
<div class="text-center">
<a class="button padded" href="/models/add">
Create a new model
</a>
</div>
{/if}
<MessageSimple bind:this={message} />
{#if list.length > 0}
<div class="list-header">
<h2>My Models</h2>
<div class="expand"></div>
<a class="button" href="/models/add"> New </a>
</div>
<table class="table">
<thead>
<tr>
<th> Name </th>
<th>
<!-- Open Button -->
</th>
</tr>
</thead>
<tbody>
{#each list as item}
<tr>
<td>
{item.name}
</td>
<td class="text-center">
<a class="button simple" href="/models/edit?id={item.id}"> Edit </a>
</td>
</tr>
{/each}
</tbody>
</table>
{:else}
<h2 class="text-center">You don't have any models</h2>
<div class="text-center">
<a class="button padded" href="/models/add"> Create a new model </a>
</div>
{/if}
</main>
<style lang="scss">
main {
padding: 20px 15vw;
}
.list-header {
display: flex;
padding-bottom: 10px;
}
main {
padding: 20px 15vw;
}
.list-header {
display: flex;
padding-bottom: 10px;
}
.list-header h2 {
margin: 0;
padding: 10px 5px;
}
.list-header h2 {
margin: 0;
padding: 10px 5px;
}
.list-header .expand {
flex-grow: 1;
}
.list-header .button,
.list-header button {
padding: 10px 10px;
height: calc(100% - 20px);
margin-top: 5px;
}
.list-header .expand {
flex-grow: 1;
}
.list-header .button,
.list-header button {
padding: 10px 10px;
height: calc(100% - 20px);
margin-top: 5px;
}
</style>

View File

@ -1,101 +1,91 @@
<script lang="ts">
import FileUpload from "src/lib/FileUpload.svelte";
import MessageSimple from "src/lib/MessageSimple.svelte";
import { postFormData } from "src/lib/requests.svelte";
import {goto} from '$app/navigation';
import FileUpload from 'src/lib/FileUpload.svelte';
import MessageSimple from 'src/lib/MessageSimple.svelte';
import { postFormData } from 'src/lib/requests.svelte';
import { goto } from '$app/navigation';
import "src/styles/forms.css";
import 'src/styles/forms.css';
let submitted = $state(false);
let submitted = $state(false);
let message: MessageSimple;
let message: MessageSimple;
let buttonClicked: Promise<void> = $state(Promise.resolve());
let buttonClicked: Promise<void> = $state(Promise.resolve());
let data = $state<{
name: string,
file?: File,
}>({
name: '',
file: undefined,
});
let data = $state<{
name: string;
file?: File;
}>({
name: '',
file: undefined
});
async function onSubmit() {
message.display("");
buttonClicked = new Promise<void>(() => {});
async function onSubmit() {
message.display('');
buttonClicked = new Promise<void>(() => {});
if (!data.file || !data.name) return;
let formData = new FormData();
formData.append("name", data.name);
formData.append("file", data.file, 'base-image.png')
try {
let id = await postFormData('models/add', formData);
goto(`/models/edit?id=${id}`)
} catch (e) {
if (e instanceof Response) {
message.display(await e.json())
} else {
message.display("Was not able to create model")
}
}
if (!data.file || !data.name) return;
buttonClicked = Promise.resolve();
}
let formData = new FormData();
formData.append('name', data.name);
formData.append('file', data.file, 'base-image.png');
try {
let id = await postFormData('models/add', formData);
goto(`/models/edit?id=${id}`);
} catch (e) {
if (e instanceof Response) {
message.display(await e.json());
} else {
message.display('Was not able to create model');
}
}
buttonClicked = Promise.resolve();
}
</script>
<svelte:head>
<title>Create new Model</title>
<title>Create new Model</title>
</svelte:head>
<main>
<h1>
Create new Model
</h1>
<form class:submitted on:submit|preventDefault={onSubmit}>
<fieldset>
<label for="name">Name</label>
<input id="name" name="name" required bind:value={data.name} />
<!--{{if .NameFoundError}}
<h1>Create new Model</h1>
<form class:submitted on:submit|preventDefault={onSubmit}>
<fieldset>
<label for="name">Name</label>
<input id="name" name="name" required bind:value={data.name} />
<!--{{if .NameFoundError}}
<span class="form-msg error">
You already have a model with that name.
</span>
{{end}}-->
</fieldset>
<fieldset class="file-upload" >
<label for="file">Base image</label>
<div class="form-msg">
Please provide a base image.<br/>
This image is a sample of the images that you are going to classfiy.
</div>
<FileUpload replace_slot bind:file={data.file} >
<img src="/imgs/upload-icon.png" alt="" />
<span>
Upload image
</span>
<div slot="replaced-name">
<span>
Image selected
</span>
</div>
</FileUpload>
</fieldset>
<MessageSimple bind:this={message} />
{#await buttonClicked}
<div class="text-center">
File Uploading
</div>
{:then}
<button>
Create
</button>
{/await}
</form>
</fieldset>
<fieldset class="file-upload">
<label for="file">Base image</label>
<div class="form-msg">
Please provide a base image.<br />
This image is a sample of the images that you are going to classfiy.
</div>
<FileUpload replace_slot bind:file={data.file}>
<img src="/imgs/upload-icon.png" alt="" />
<span> Upload image </span>
<div slot="replaced-name">
<span> Image selected </span>
</div>
</FileUpload>
</fieldset>
<MessageSimple bind:this={message} />
{#await buttonClicked}
<div class="text-center">File Uploading</div>
{:then}
<button> Create </button>
{/await}
</form>
</main>
<style lang="scss">
main {
padding: 20px 15vw;
}
main {
padding: 20px 15vw;
}
</style>

View File

@ -44,7 +44,7 @@
import 'src/styles/forms.css';
let model: Promise<Model> = $state(new Promise(() => {}));
let _model: Model | undefined = $state(undefined);
let _model: Model | undefined = $state(undefined);
let definitions: Promise<Definitions[]> = $state(new Promise(() => {}));
let id: string | undefined = $state();
@ -64,7 +64,7 @@
}
model = Promise.resolve(temp_model);
_model = temp_model;
_model = temp_model;
} catch (e) {
if (e instanceof Response) {
model = Promise.reject(await e.json());
@ -160,10 +160,10 @@
</button>
{/if}
</div>
{#if _model}
<ModelDataPage model={_model} on:reload={getModel} active={isActive('model-data')} />
<TasksDataPage model={_model} active={isActive('tasks')} />
{/if}
{#if _model}
<ModelDataPage model={_model} on:reload={getModel} active={isActive('model-data')} />
<TasksDataPage model={_model} active={isActive('tasks')} />
{/if}
<div class="content" class:selected={isActive('model')}>
{#await model}
Loading

View File

@ -23,21 +23,21 @@
</div>
<style>
.model-card {
h1 {
margin: 0;
padding-bottom: 10px;
}
.model-card {
h1 {
margin: 0;
padding-bottom: 10px;
}
img {
width: 25%;
height: 100%;
object-fit: contain;
}
img {
width: 25%;
height: 100%;
object-fit: contain;
}
.second-line {
display: flex;
gap: 20px;
}
}
.second-line {
display: flex;
gap: 20px;
}
}
</style>

View File

@ -1,41 +1,39 @@
<script lang="ts">
import MessageSimple from 'src/lib/MessageSimple.svelte';
import type { Model } from './+page.svelte';
import { rdelete } from '$lib/requests.svelte'
import MessageSimple from 'src/lib/MessageSimple.svelte';
import type { Model } from './+page.svelte';
import { rdelete } from '$lib/requests.svelte';
import { goto } from '$app/navigation';
let { model } = $props<{ model: Model }>();
let name: string = $state("");
let submmited: boolean = $state(false);
let messageSimple: MessageSimple;
let { model } = $props<{ model: Model }>();
let name: string = $state('');
let submmited: boolean = $state(false);
async function deleteModel() {
submmited = true;
messageSimple.display("");
let messageSimple: MessageSimple;
try {
await rdelete("models/delete", {id: model.id, name});
goto("/models");
} catch (e) {
if (e instanceof Response) {
messageSimple.display(await e.json());
} else {
messageSimple.display("Could not delete the model");
}
}
}
async function deleteModel() {
submmited = true;
messageSimple.display('');
try {
await rdelete('models/delete', { id: model.id, name });
goto('/models');
} catch (e) {
if (e instanceof Response) {
messageSimple.display(await e.json());
} else {
messageSimple.display('Could not delete the model');
}
}
}
</script>
<form on:submit|preventDefault={deleteModel} class:submmited>
<fieldset>
<label for="name">
To delete this model please type "{model.name}":
</label>
<input name="name" id="name" required bind:value={name} />
</fieldset>
<MessageSimple bind:this={messageSimple} />
<button class="danger">
Delete
</button>
<fieldset>
<label for="name">
To delete this model please type "{model.name}":
</label>
<input name="name" id="name" required bind:value={name} />
</fieldset>
<MessageSimple bind:this={messageSimple} />
<button class="danger"> Delete </button>
</form>

View File

@ -1,45 +1,42 @@
<script lang="ts">
import { rdelete } from "src/lib/requests.svelte";
import type { Model } from "./+page.svelte";
import MessageSimple from "src/lib/MessageSimple.svelte";
import { createEventDispatcher } from "svelte";
import { rdelete } from 'src/lib/requests.svelte';
import type { Model } from './+page.svelte';
import MessageSimple from 'src/lib/MessageSimple.svelte';
import { createEventDispatcher } from 'svelte';
let message: MessageSimple;
let message: MessageSimple;
let { model, expand } = $props<{model: Model, expand?: boolean}>();
let { model, expand } = $props<{ model: Model; expand?: boolean }>();
const dispatch = createEventDispatcher<{reload: void}>();
const dispatch = createEventDispatcher<{ reload: void }>();
async function deleteZip() {
message.clear();
async function deleteZip() {
message.clear();
try {
await rdelete("models/data/delete-zip-file", { id: model.id });
dispatch('reload');
} catch (e) {
if (e instanceof Response) {
message.display(await e.json());
} else {
message.display("Could not delete the zip file");
}
}
}
try {
await rdelete('models/data/delete-zip-file', { id: model.id });
dispatch('reload');
} catch (e) {
if (e instanceof Response) {
message.display(await e.json());
} else {
message.display('Could not delete the zip file');
}
}
}
</script>
<form on:submit|preventDefault={deleteZip}>
{#if expand}
Failed to proccess the zip file.<br/>
Delete file and upload a correct version do add more classes.<br/>
<br/>
{:else}
Failed to proccess the zip file.<br/>
Delete file and proccess again.<br/>
<br/>
{/if}
<div class="spacer" ></div>
<MessageSimple bind:this={message} />
<button class="danger">
Delete Zip File
</button>
{#if expand}
Failed to proccess the zip file.<br />
Delete file and upload a correct version do add more classes.<br />
<br />
{:else}
Failed to proccess the zip file.<br />
Delete file and proccess again.<br />
<br />
{/if}
<div class="spacer"></div>
<MessageSimple bind:this={message} />
<button class="danger"> Delete Zip File </button>
</form>

View File

@ -1,48 +1,46 @@
<script lang="ts">
import { createEventDispatcher } from "svelte";
import type { Model } from "./+page.svelte";
import ModelData from "./ModelData.svelte";
import { post } from "src/lib/requests.svelte";
import ModelDataPageStatsGraph from "./ModelDataPageStatsGraph.svelte";
import type { ModelStats } from "./types";
import DeleteZip from "./DeleteZip.svelte";
import { createEventDispatcher } from 'svelte';
import type { Model } from './+page.svelte';
import ModelData from './ModelData.svelte';
import { post } from 'src/lib/requests.svelte';
import ModelDataPageStatsGraph from './ModelDataPageStatsGraph.svelte';
import type { ModelStats } from './types';
import DeleteZip from './DeleteZip.svelte';
let { model, active } = $props<{model: Model, active?: boolean}>()
const dispatch = createEventDispatcher<{ reload: void }>();
let { model, active } = $props<{ model: Model; active?: boolean }>();
$effect(() => {
if (active)
getData();
});
const dispatch = createEventDispatcher<{ reload: void }>();
let stats: ModelStats | undefined = $state();
$effect(() => {
if (active) getData();
});
async function getData() {
if (!model) return;
try {
stats = await post(`models/class/stats`, { id: model.id });
} catch {
return;
}
}
let stats: ModelStats | undefined = $state();
async function getData() {
if (!model) return;
try {
stats = await post(`models/class/stats`, { id: model.id });
} catch {
return;
}
}
</script>
<div class="content" class:selected={active}>
{#if stats}
<ModelDataPageStatsGraph data={stats} />
{/if}
{#if stats}
<ModelDataPageStatsGraph data={stats} />
{/if}
{#if [-6, -2].includes(model.status)}
<DeleteZip {model} on:reload={() => dispatch('reload')} expand />
{/if}
{#if [-6, -2].includes(model.status)}
<DeleteZip model={model} on:reload={() => dispatch('reload')} expand />
{/if}
<ModelData model={model} on:reload={() => {
getData();
dispatch('reload');
}} />
<ModelData
{model}
on:reload={() => {
getData();
dispatch('reload');
}}
/>
</div>

View File

@ -32,7 +32,7 @@
$effect(() => {
if (data && ctx) {
if (chart) {
console.log("update")
console.log('update');
chart.data = {
labels: data.map((a) => a.name),
datasets: [
@ -48,7 +48,7 @@
};
chart.update('resize');
} else {
console.log("create")
console.log('create');
chart = new Chart(ctx, {
type: 'bar',
data: {

View File

@ -113,9 +113,7 @@
{:else}
<form class:submitted on:submit|preventDefault={submitRetrain}>
{#if has_data}
<h2>
This model has new classes and can be expanded
</h2>
<h2>This model has new classes and can be expanded</h2>
{#if number_of_invalid_images > 0}
<p class="danger">
There are images {number_of_invalid_images} that were loaded that do not have the correct format.DeleteZip

View File

@ -1,5 +1,5 @@
export type ModelStats = Array<{
name: string,
training: number,
testing: number,
}>
name: string;
training: number;
testing: number;
}>;