andr3/fyp
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 1 Releases Wiki Activity

ran prettier

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
webpage/src/lib/FileUpload.svelte
View File

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

6
webpage/src/lib/Tabs.svelte
View File

@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
let {active, nobox} = $props<{active?: string, nobox?: boolean}>(); let { active, nobox } = $props<{ active?: string; nobox?: boolean }>();
function setActive(name: string) { function setActive(name: string) {
return () => active = name; return () => (active = name);
} }
function isActive(name: string) { function isActive(name: string) {
@ -63,11 +63,9 @@
box-shadow: none; box-shadow: none;
overflow: visible; overflow: visible;
:global(.content.selected) { :global(.content.selected) {
box-shadow: none; box-shadow: none;
} }
} }
} }
</style> </style>

2
webpage/src/routes/+layout.svelte
View File

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

18
webpage/src/routes/Page404.svelte
View File

@ -1,30 +1,22 @@
<script lang="ts"> <script lang="ts">
let { message, goBackLink } = $props<{message?: string, goBackLink?: string}>(); let { message, goBackLink } = $props<{ message?: string; goBackLink?: string }>();
</script> </script>
<div class="page404"> <div class="page404">
<div> <div>
<h1> <h1>404</h1>
404
</h1>
{#if message} {#if message}
<h2> <h2>
{message} {message}
</h2> </h2>
{#if goBackLink} {#if goBackLink}
<div class="description"> <div class="description">
<a href={goBackLink}> <a href={goBackLink}> 👈 Go back </a>
👈 Go back
</a>
</div> </div>
{/if} {/if}
{:else} {:else}
<h2> <h2>Page Not found</h2>
Page Not found <div class="description">The page you were looking for does not exist</div>
</h2>
<div class="description">
The page you were looking for does not exist
</div>
{/if} {/if}
</div> </div>
</div> </div>

16
webpage/src/routes/UserStore.svelte.ts
View File

@ -1,11 +1,11 @@
import { goto } from "$app/navigation"; import { goto } from '$app/navigation';
type User = { type User = {
token: string, token: string;
id: string, id: string;
user_type: number, user_type: number;
username: string, username: string;
email: string, email: string;
}; };
export function createUserStore() { export function createUserStore() {
@ -38,7 +38,7 @@ export function createUserStore() {
user = value; user = value;
}, },
checkUser(pathOnFail: string, level?: number) { checkUser(pathOnFail: string, level?: number) {
if (user && user.level > (level ?? 2) ) { if (user && user.level > (level ?? 2)) {
goto(pathOnFail); goto(pathOnFail);
return true; return true;
} }
@ -49,7 +49,7 @@ export function createUserStore() {
if (getValue()) return true; if (getValue()) return true;
return false; return false;
} }
} };
} }
export const userStore = createUserStore(); export const userStore = createUserStore();

28
webpage/src/routes/login/+page.svelte
View File

@ -8,40 +8,38 @@
let loginData = $state({ let loginData = $state({
email: '', email: '',
password: '', password: ''
}); });
let errorMessage = $state(""); let errorMessage = $state('');
async function onSubmit() { async function onSubmit() {
submitted = true; submitted = true;
errorMessage = ""; errorMessage = '';
try { try {
const req = await post('login', loginData); const req = await post('login', loginData);
userStore.user = req; userStore.user = req;
goto("/"); goto('/');
} catch (e) { } catch (e) {
loginData.password = ""; loginData.password = '';
if (e instanceof Response) { if (e instanceof Response) {
errorMessage = await e.json(); errorMessage = await e.json();
} else { } else {
errorMessage = "Server could not perform login"; errorMessage = 'Server could not perform login';
} }
} }
} }
</script> </script>
<svelte:head> <svelte:head>
<title> Login </title> <title>Login</title>
</svelte:head> </svelte:head>
<div class="login-page"> <div class="login-page">
<div> <div>
<h1> <h1>Login</h1>
Login <form on:submit|preventDefault={onSubmit} class:submitted>
</h1>
<form on:submit|preventDefault={onSubmit} class:submitted >
<fieldset> <fieldset>
<label for="email">Email</label> <label for="email">Email</label>
<input type="email" required name="email" bind:value={loginData.email} /> <input type="email" required name="email" bind:value={loginData.email} />
@ -56,13 +54,9 @@
</span> </span>
{/if} {/if}
</fieldset> </fieldset>
<button> <button> Login </button>
Login
</button>
<div class="spacer"></div> <div class="spacer"></div>
<a class="simple-link text-center w100 spacer" href="/register"> <a class="simple-link text-center w100 spacer" href="/register"> Register </a>
Register
</a>
</form> </form>
</div> </div>
</div> </div>

6
webpage/src/routes/logout/+page.svelte
View File

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

47
webpage/src/routes/models/+page.svelte
View File

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

54
webpage/src/routes/models/add/+page.svelte
View File

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

16
webpage/src/routes/models/edit/DeleteModel.svelte
View File

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

35
webpage/src/routes/models/edit/DeleteZip.svelte
View File

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

32
webpage/src/routes/models/edit/ModelDataPage.svelte
View File

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

4
webpage/src/routes/models/edit/ModelDataPageStatsGraph.svelte
View File

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

4
webpage/src/routes/models/edit/TrainModel.svelte
View File

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

8
webpage/src/routes/models/edit/types.ts
View File

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