From 5f11126acdd19d10cb45ae93301094ac0acdcc30 Mon Sep 17 00:00:00 2001
From: Andre Henriques <andr3h3nriqu3s@gmail.com>
Date: Sun, 14 Apr 2024 15:22:46 +0100
Subject: [PATCH] ran prettier

---
 webpage/src/lib/FileUpload.svelte             |  77 ++++----
 webpage/src/lib/MessageSimple.svelte          |   8 +-
 webpage/src/lib/Tabs.svelte                   | 110 ++++++------
 webpage/src/routes/+error.svelte              |  22 +--
 webpage/src/routes/+layout.svelte             |   2 +-
 webpage/src/routes/Page404.svelte             |  78 ++++-----
 webpage/src/routes/UserStore.svelte.ts        |  88 +++++-----
 webpage/src/routes/login/+page.svelte         | 126 +++++++------
 webpage/src/routes/logout/+page.svelte        |  14 +-
 webpage/src/routes/models/+page.svelte        | 165 ++++++++----------
 webpage/src/routes/models/add/+page.svelte    | 146 ++++++++--------
 webpage/src/routes/models/edit/+page.svelte   |  12 +-
 .../routes/models/edit/BaseModelInfo.svelte   |  30 ++--
 .../src/routes/models/edit/DeleteModel.svelte |  62 ++++---
 .../src/routes/models/edit/DeleteZip.svelte   |  67 ++++---
 .../routes/models/edit/ModelDataPage.svelte   |  70 ++++----
 .../edit/ModelDataPageStatsGraph.svelte       |   4 +-
 .../src/routes/models/edit/TrainModel.svelte  |   4 +-
 webpage/src/routes/models/edit/types.ts       |   8 +-
 19 files changed, 528 insertions(+), 565 deletions(-)

diff --git a/webpage/src/lib/FileUpload.svelte b/webpage/src/lib/FileUpload.svelte
index dd479b1..25e2b0a 100644
--- a/webpage/src/lib/FileUpload.svelte
+++ b/webpage/src/lib/FileUpload.svelte
@@ -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>
diff --git a/webpage/src/lib/MessageSimple.svelte b/webpage/src/lib/MessageSimple.svelte
index 8da5f0d..16602db 100644
--- a/webpage/src/lib/MessageSimple.svelte
+++ b/webpage/src/lib/MessageSimple.svelte
@@ -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,
diff --git a/webpage/src/lib/Tabs.svelte b/webpage/src/lib/Tabs.svelte
index 825065a..f77d406 100644
--- a/webpage/src/lib/Tabs.svelte
+++ b/webpage/src/lib/Tabs.svelte
@@ -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>
diff --git a/webpage/src/routes/+error.svelte b/webpage/src/routes/+error.svelte
index b08aa0e..b618279 100644
--- a/webpage/src/routes/+error.svelte
+++ b/webpage/src/routes/+error.svelte
@@ -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}
diff --git a/webpage/src/routes/+layout.svelte b/webpage/src/routes/+layout.svelte
index 9d2737a..ef2f77a 100644
--- a/webpage/src/routes/+layout.svelte
+++ b/webpage/src/routes/+layout.svelte
@@ -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 />
diff --git a/webpage/src/routes/Page404.svelte b/webpage/src/routes/Page404.svelte
index e45f516..f6bd7a7 100644
--- a/webpage/src/routes/Page404.svelte
+++ b/webpage/src/routes/Page404.svelte
@@ -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>
diff --git a/webpage/src/routes/UserStore.svelte.ts b/webpage/src/routes/UserStore.svelte.ts
index e882482..5f082f2 100644
--- a/webpage/src/routes/UserStore.svelte.ts
+++ b/webpage/src/routes/UserStore.svelte.ts
@@ -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();
diff --git a/webpage/src/routes/login/+page.svelte b/webpage/src/routes/login/+page.svelte
index 242e0ea..fff357b 100644
--- a/webpage/src/routes/login/+page.svelte
+++ b/webpage/src/routes/login/+page.svelte
@@ -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>
diff --git a/webpage/src/routes/logout/+page.svelte b/webpage/src/routes/logout/+page.svelte
index 35bb995..314688b 100644
--- a/webpage/src/routes/logout/+page.svelte
+++ b/webpage/src/routes/logout/+page.svelte
@@ -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>
diff --git a/webpage/src/routes/models/+page.svelte b/webpage/src/routes/models/+page.svelte
index 2d018eb..f802c4d 100644
--- a/webpage/src/routes/models/+page.svelte
+++ b/webpage/src/routes/models/+page.svelte
@@ -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>
diff --git a/webpage/src/routes/models/add/+page.svelte b/webpage/src/routes/models/add/+page.svelte
index 914e87e..488b88a 100644
--- a/webpage/src/routes/models/add/+page.svelte
+++ b/webpage/src/routes/models/add/+page.svelte
@@ -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>
diff --git a/webpage/src/routes/models/edit/+page.svelte b/webpage/src/routes/models/edit/+page.svelte
index c9f0e6f..19cf0a0 100644
--- a/webpage/src/routes/models/edit/+page.svelte
+++ b/webpage/src/routes/models/edit/+page.svelte
@@ -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
diff --git a/webpage/src/routes/models/edit/BaseModelInfo.svelte b/webpage/src/routes/models/edit/BaseModelInfo.svelte
index 6961cb2..583cee3 100644
--- a/webpage/src/routes/models/edit/BaseModelInfo.svelte
+++ b/webpage/src/routes/models/edit/BaseModelInfo.svelte
@@ -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>
diff --git a/webpage/src/routes/models/edit/DeleteModel.svelte b/webpage/src/routes/models/edit/DeleteModel.svelte
index 261d98c..333e3cf 100644
--- a/webpage/src/routes/models/edit/DeleteModel.svelte
+++ b/webpage/src/routes/models/edit/DeleteModel.svelte
@@ -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>
diff --git a/webpage/src/routes/models/edit/DeleteZip.svelte b/webpage/src/routes/models/edit/DeleteZip.svelte
index 957c509..119d62f 100644
--- a/webpage/src/routes/models/edit/DeleteZip.svelte
+++ b/webpage/src/routes/models/edit/DeleteZip.svelte
@@ -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>
diff --git a/webpage/src/routes/models/edit/ModelDataPage.svelte b/webpage/src/routes/models/edit/ModelDataPage.svelte
index 93c23d0..6490be9 100644
--- a/webpage/src/routes/models/edit/ModelDataPage.svelte
+++ b/webpage/src/routes/models/edit/ModelDataPage.svelte
@@ -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>
-
diff --git a/webpage/src/routes/models/edit/ModelDataPageStatsGraph.svelte b/webpage/src/routes/models/edit/ModelDataPageStatsGraph.svelte
index 05bd56a..63e1e26 100644
--- a/webpage/src/routes/models/edit/ModelDataPageStatsGraph.svelte
+++ b/webpage/src/routes/models/edit/ModelDataPageStatsGraph.svelte
@@ -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: {
diff --git a/webpage/src/routes/models/edit/TrainModel.svelte b/webpage/src/routes/models/edit/TrainModel.svelte
index cfdbc2f..793bda4 100644
--- a/webpage/src/routes/models/edit/TrainModel.svelte
+++ b/webpage/src/routes/models/edit/TrainModel.svelte
@@ -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
diff --git a/webpage/src/routes/models/edit/types.ts b/webpage/src/routes/models/edit/types.ts
index 92bee0e..9dd192d 100644
--- a/webpage/src/routes/models/edit/types.ts
+++ b/webpage/src/routes/models/edit/types.ts
@@ -1,5 +1,5 @@
 export type ModelStats = Array<{
-    name: string,
-    training: number,
-    testing: number,
-}>
+	name: string;
+	training: number;
+	testing: number;
+}>;