chore: improve the result in classification closes #34

db.go

@@ -1,6 +0,0 @@
-package main
-
-import (
-)
-
-

logic/tasks/list.go

@@ -8,6 +8,26 @@ import (
 )
 
 func handleList(handler *Handle) {
+
+	handler.PostAuth("/tasks/task", 1, func(c *Context) *Error {
+		var getId JustId
+		if _err := c.ToJSON(&getId); _err != nil {
+			return _err
+		}
+
+		var task Task
+
+		err := GetDBOnce(c, &task, "tasks where id=$1;", getId.Id)
+		if err == NotFoundError {
+			return c.JsonBadRequest("Did not found task id")
+		} else if err != nil {
+			return c.E500M("Faied to get task", err)
+		}
+
+		c.ShowMessage = false
+		return c.SendJSON(task)
+	})
+
 	handler.PostAuth("/tasks/list", 1, func(c *Context) *Error {
 		var err error = nil
 
@@ -36,12 +56,12 @@ func handleList(handler *Handle) {
 		var rows []*Task = nil
 
 		if requestData.ModelId != "" {
-			rows, err = GetDbMultitple[Task](c, "tasks where model_id=$1 order by created_on desc limit 11 offset $2", requestData.ModelId, requestData.Page * 10)
+			rows, err = GetDbMultitple[Task](c, "tasks where model_id=$1 order by created_on desc limit 11 offset $2", requestData.ModelId, requestData.Page*10)
 			if err != nil {
 				return c.Error500(err)
 			}
 		} else {
-			rows, err = GetDbMultitple[Task](c, "tasks order by created_on desc limit 11 offset $1", requestData.Page * 10)
+			rows, err = GetDbMultitple[Task](c, "tasks order by created_on desc limit 11 offset $1", requestData.Page*10)
 			if err != nil {
 				return c.Error500(err)
 			}
@@ -53,7 +73,7 @@ func handleList(handler *Handle) {
 		return c.SendJSON(struct {
 			TaskList []*Task `json:"task_list"`
 			ShowNext bool    `json:"show_next"`
-        } {
+		}{
 			rows[0:max_len],
 			len(rows) > 10,
 		})

main.go

@@ -8,10 +8,10 @@ import (
 	_ "github.com/lib/pq"
 
 	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/models"
-	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/tasks"
 	models_utils "git.andr3h3nriqu3s.com/andr3/fyp/logic/models/utils"
-	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/utils"
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/tasks"
 	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/tasks/runner"
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/utils"
 )
 
 const (

webpage/src/lib/Spinner.svelte

@@ -0,0 +1,34 @@
+<svg width="24" height="24" stroke="#000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+	<style>
+		.spinner_V8m1 {
+			transform-origin: center;
+			animation: spinner_zKoa 2s linear infinite;
+		}
+		.spinner_V8m1 circle {
+			stroke-linecap: round;
+			animation: spinner_YpZS 1.5s ease-in-out infinite;
+		}
+		@keyframes spinner_zKoa {
+			100% {
+				transform: rotate(360deg);
+			}
+		}
+		@keyframes spinner_YpZS {
+			0% {
+				stroke-dasharray: 0 150;
+				stroke-dashoffset: 0;
+			}
+			47.5% {
+				stroke-dasharray: 42 150;
+				stroke-dashoffset: -16;
+			}
+			95%,
+			100% {
+				stroke-dasharray: 42 150;
+				stroke-dashoffset: -59;
+			}
+		}
+	</style><g class="spinner_V8m1"
+		><circle cx="12" cy="12" r="9.5" fill="none" stroke-width="3"></circle></g
+	>
+</svg>

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

@@ -1,95 +1,111 @@
 <script lang="ts">
-	import { postFormData } from "src/lib/requests.svelte";
-	import type { Model } from "./+page.svelte";
-    import FileUpload from "src/lib/FileUpload.svelte";
-	import MessageSimple from "src/lib/MessageSimple.svelte";
-	import { createEventDispatcher } from "svelte";
+	import { post, postFormData } from 'src/lib/requests.svelte';
+	import type { Model } from './+page.svelte';
+	import FileUpload from 'src/lib/FileUpload.svelte';
+	import MessageSimple from 'src/lib/MessageSimple.svelte';
+	import { createEventDispatcher, onDestroy } from 'svelte';
+	import Spinner from 'src/lib/Spinner.svelte';
+	import type { Task } from './TasksTable.svelte';
 
-    let {model} = $props<{model: Model}>();
+	let { model } = $props<{ model: Model }>();
 
 	let file: File | undefined = $state();
 
-    const dispatch = createEventDispatcher<{ upload: void }>();
+	const dispatch = createEventDispatcher<{ upload: void; taskReload: void }>();
 
-    type Result = {
-        class: string,
-        confidence: number,
-    }
-
-    let _result: Promise<Result | undefined> = $state(new Promise(() => {}));
+	let _result: Promise<Task> = $state(new Promise(() => {}));
 	let run = $state(false);
+
 	let last_task: string | undefined = $state();
+	let last_task_timeout: number | null = null;
 
 	let messages: MessageSimple;
 
+	async function reloadLastTimeout() {
+		if (!last_task) {
+			return;
+		}
+		last_task_timeout = null;
+
+		try {
+			const r = await post('tasks/task', { id: last_task });
+			if ([0, 1, 2, 3].includes(r.status)) {
+				setTimeout(reloadLastTimeout, 500);
+				setTimeout(() => dispatch('taskReload'), 500);
+			} else {
+				_result = Promise.resolve(r);
+			}
+		} catch (e) {
+			console.error('Failed to get data');
+		}
+	}
+
 	async function submit() {
 		if (!file) return;
 		messages.clear();
 
 		let form = new FormData();
-        form.append("json_data", JSON.stringify({id: model.id}));
-        form.append("file", file, "file");
+		form.append('json_data', JSON.stringify({ id: model.id }));
+		form.append('file', file, 'file');
 
 		run = true;
 
 		try {
 			const r = await postFormData('tasks/start/image', form);
-            last_task = r.id
+			last_task = r.id;
 			file = undefined;
+			last_task_timeout = setTimeout(() => reloadLastTimeout());
 		} catch (e) {
 			if (e instanceof Response) {
 				messages.display(await e.json());
 			} else {
-                messages.display("Could not run the model");
+				messages.display('Could not run the model');
 			}
 		}
 
 		dispatch('upload');
 	}
-</script>
-    <form on:submit|preventDefault={submit}>
-        <fieldset class="file-upload" >
-            <label for="file">Image</label>
-            <div class="form-msg">
-                Run image through them model and get the result
-            </div>
 
-            <FileUpload replace_slot bind:file accept="image/*" >
+	onDestroy(() => {
+		if (last_task_timeout) {
+			clearTimeout(last_task_timeout);
+		}
+	});
+</script>
+
+<form on:submit|preventDefault={submit}>
+	<fieldset class="file-upload">
+		<label for="file">Image</label>
+		<div class="form-msg">Run image through them model and get the result</div>
+
+		<FileUpload replace_slot bind:file accept="image/*">
 			<img src="/imgs/upload-icon.png" alt="" />
-                <span>
-                    Upload image
-                </span>
+			<span> Upload image </span>
 			<div slot="replaced-name">
-                    <span>
-                        Image selected
-                    </span>
+				<span> Image selected </span>
 			</div>
 		</FileUpload>
 	</fieldset>
 	<MessageSimple bind:this={messages} />
-        <button>
-            Run
-        </button>
+	<button> Run </button>
 	{#if run}
 		{#await _result}
 			<h1>
-                    Processing Image {last_task}
+				Processing Image! <Spinner />
 			</h1>
 		{:then result}
-                {#if !result}
-                    <div class="result">
-                        <h1>
-                            The class was not found
-                        </h1>
+			{#if result.status == 4}
+				{@const res = JSON.parse(result.result)}
+				<div>
+					<h1>Result</h1>
+					The image was classified as {res.class} with confidence: {res.confidence}
 				</div>
 			{:else}
-                    <div>
-                        <h1>
-                            Result
-                        </h1>
-                        The image was classified as {result.class} with confidence: {result.confidence}
+				<div class="result">
+					<h1>There was a problem running the task:</h1>
+					{result?.status_message}
 				</div>
 			{/if}
 		{/await}
 	{/if}
-    </form>
+</form>

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

@@ -1,16 +1,15 @@
 <script lang="ts">
-	import { post } from "src/lib/requests.svelte";
-	import type { Model } from "src/routes/models/edit/+page.svelte";
-	import RunModel from "./RunModel.svelte";
-	import TasksTable from "./TasksTable.svelte";
+	import { post } from 'src/lib/requests.svelte';
+	import type { Model } from 'src/routes/models/edit/+page.svelte';
+	import RunModel from './RunModel.svelte';
+	import TasksTable from './TasksTable.svelte';
 
-    const { active, model } = $props<{ active?: boolean, model: Model }>();
+	const { active, model } = $props<{ active?: boolean; model: Model }>();
 
 	let table: TasksTable;
 </script>
 
-
 <div class="content" class:selected={active}>
-    <RunModel model={model} on:upload={() => table.getList()} />
-    <TasksTable model={model} bind:this={table} />
+	<RunModel {model} on:upload={() => table.getList()} on:taskReload={() => table.getList()} />
+	<TasksTable {model} bind:this={table} />
 </div>

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

@@ -11,13 +11,31 @@
 		created: string;
 		result: string;
 	};
+	export const TaskType = {
+		TASK_FAILED_RUNNING: -2,
+		TASK_FAILED_CREATION: -1,
+		TASK_PREPARING: 0,
+		TASK_TODO: 1,
+		TASK_PICKED_UP: 2,
+		TASK_RUNNING: 3,
+		TASK_DONE: 4
+	};
+	export const TaskTypeStrings: Record<number, string> = {
+		[-2]: 'Task failed running',
+		[-1]: 'Failed to create task',
+		0: 'Preparing task',
+		1: 'Task to do',
+		2: 'Task picked up by a runner',
+		3: 'Task running',
+		4: 'Task complete'
+	};
 </script>
 
 <script lang="ts">
 	import { post } from 'src/lib/requests.svelte';
 	import type { Model } from './+page.svelte';
 
-	let { model } = $props<{ model: Model, uploadCounter?: number }>();
+	let { model } = $props<{ model: Model; uploadCounter?: number }>();
 
 	let page = $state(0);
 	let showNext = $state(false);
@@ -27,7 +45,7 @@
 		try {
 			const res = await post('tasks/list', {
 				id: model.id,
-                page: page,
+				page: page
 			});
 			showNext = res.show_next;
 			task_list = res.task_list;
@@ -38,9 +56,9 @@
 
 	$effect(() => {
 		if (model) {
-            getList()
+			getList();
 		}
-    })
+	});
 </script>
 
 <div>
@@ -112,13 +130,13 @@
 						{/if}
 					</td>
 					<td>
-                        {task.status}
+						{TaskTypeStrings[task.status]}
 					</td>
 					<td>
 						{task.status_message}
 					</td>
 					<td>
-                        {(new Date(task.created)).toLocaleString()}
+						{new Date(task.created).toLocaleString()}
 					</td>
 				</tr>
 			{/each}