some work done on the running of the model

webpage/src/lib/FileUpload.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
-    let { replace_slot, accept, file } = $props<{
+    let { replace_slot, accept, file, notExpand } = $props<{
         replace_slot?: boolean,
         accept?: string,
         file?: File,
+        notExpand?: boolean
     }>();
 
     let fileInput: HTMLInputElement;
@@ -27,7 +28,7 @@
 </script>
 
 <div class="icon-holder">
-    <button class="icon" class:adapt={replace_slot && file} on:click={() => fileInput.click()}>
+    <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="" />

webpage/src/lib/requests.svelte.ts

@@ -42,6 +42,7 @@ export async function post(url: string, body: any) {
     if (r.status === 401) {
         userStore.user = undefined;
         goto("/login")
+        throw r;
     } else if (r.status !== 200) {
         throw r;
     }

webpage/src/routes/models/+page.svelte

@@ -39,7 +39,7 @@
                 New
             </a>
         </div>
-        <table>
+        <table class="table">
             <thead>
                 <tr>
                     <th>
@@ -101,4 +101,5 @@
         height: calc(100% - 20px);
         margin-top: 5px;
     }
+
 </style>

webpage/src/routes/models/edit/DeleteModel.svelte

@@ -1,15 +1,29 @@
 <script lang="ts">
+    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}: { model: Model } = $props();
+    let { model } = $props<{ model: Model }>();
     let name: string = $state("");
     let submmited: boolean = $state(false);
-    let nameDoesNotMatch: string = $state("");
 
-    function deleteModel() {
+    let messageSimple: MessageSimple;
+
+    async function deleteModel() {
         submmited = true;
-        nameDoesNotMatch = "";
-        console.error("TODO")
+        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>
 
@@ -19,12 +33,8 @@
             To delete this model please type "{model.name}":
         </label>
         <input name="name" id="name" required bind:value={name} />
-        {#if nameDoesNotMatch }
-            <span class="form-msg red">
-                Name does not match "{model.name}"
-            </span>
-        {/if}
     </fieldset>
+    <MessageSimple bind:this={messageSimple} />
     <button class="danger">
         Delete
     </button>

webpage/src/routes/models/edit/ModelData.svelte

@@ -127,12 +127,12 @@
         ...
 </pre>
                         </div>
-                        <FileUpload replace_slot bind:file={file} accept="application/zip" >
+                        <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">
+                            <div slot="replaced" style="display: inline;">
                                 <img src="/imgs/upload-icon.png" alt="" />
                                 <span>
                                     File selected

webpage/src/routes/models/edit/RunModel.svelte

@@ -8,7 +8,12 @@
 
     let file: File | undefined = $state();
 
-    let result: string | undefined = $state();
+    type Result = {
+        class: string,
+        confidence: number,
+    }
+
+    let _result: Promise<Result | undefined> = $state(new Promise(() => {}));
     let run = $state(false);
 
     let messages: MessageSimple;
@@ -25,7 +30,8 @@
         run = true;
 
         try {
-            result = await postFormData('models/run', form);
+            _result = await postFormData('models/run', form);
+            console.log(await _result);
         } catch (e) {
             if (e instanceof Response) {
                 messages.display(await e.json());
@@ -60,19 +66,21 @@
             Run
         </button>
         {#if run}
-            {#if !result}
-                <div class="result">
-                    <h1>
-                        The class was not found
-                    </h1>
-                </div>
-            {:else}
-                <div>
-                    <h1>
-                        Result
-                    </h1>
-                    The image was classified as {result}
-                </div>
-            {/if}
+            {#await _result then result}
+                {#if !result}
+                    <div class="result">
+                        <h1>
+                            The class was not found
+                        </h1>
+                    </div>
+                {:else}
+                    <div>
+                        <h1>
+                            Result
+                        </h1>
+                        The image was classified as {result.class} with confidence: {result.confidence}
+                    </div>
+                {/if}
+            {/await}
         {/if}
     </form>

webpage/src/styles/app.css

@@ -101,3 +101,33 @@ a.button {
 .card h3 {
     margin-top: 0;
 }
+
+
+.table {
+    width: 100%;
+    box-shadow: 0 2px 8px 1px #66666622;
+    border-radius: 10px;
+    border-collapse: collapse;
+    overflow: hidden;
+}
+
+.table thead {
+    background: #60606022;
+}
+
+.table tr td,
+.table tr th {
+    border-left: 1px solid #22222244;
+    padding: 15px;
+}
+
+.table tr td:first-child,
+.table tr th:first-child {
+    border-left: none;
+}
+
+.table tr td button,
+.table tr td .button {
+    padding: 5px 10px;
+    box-shadow: 0 2px 5px 1px #66666655;
+}