runner-go (#102)

Reviewed-on: andr3/fyp#102
Co-authored-by: Andre Henriques <andr3h3nriqu3s@gmail.com>
Co-committed-by: Andre Henriques <andr3h3nriqu3s@gmail.com>

webpage/package.json

@@ -15,7 +15,8 @@
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.6",
-    "@sveltejs/vite-plugin-svelte": "3.0.0",
+    "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@types/d3": "^7.4.3",
     "@types/eslint": "^8.56.9",
     "@typescript-eslint/eslint-plugin": "^7.7.0",
     "@typescript-eslint/parser": "^7.7.0",
@@ -25,7 +26,7 @@
     "prettier": "^3.2.5",
     "prettier-plugin-svelte": "^3.2.3",
     "sass": "^1.75.0",
-    "svelte": "5.0.0-next.104",
+    "svelte": "^5.0.0-next.104",
     "svelte-check": "^3.6.9",
     "tslib": "^2.6.2",
     "typescript": "^5.4.5",
@@ -33,6 +34,8 @@
   },
   "type": "module",
   "dependencies": {
-    "chart.js": "^4.4.2"
+    "chart.js": "^4.4.2",
+    "d3": "^7.9.0",
+    "highlight.js": "^11.9.0"
   }
 }

webpage/src/NavBar.svelte

@@ -15,8 +15,18 @@
 		{/if}
 		<li class="expand"></li>
 		{#if userStore.user}
+			{#if userStore.user.user_type == 2}
+				<li>
+					<a href="/admin/runners">
+						<span class="bi bi-cpu-fill"></span>
+						Runner
+					</a>
+				</li>
+			{/if}
 			<li>
 				<a href="/user/info"> <span class="bi bi-person-fill"></span> {userStore.user.username} </a>
+			</li>
+			<li>
 				<a href="/logout"> <span class="bi bi-box-arrow-right"></span> Logout </a>
 			</li>
 		{:else}

webpage/src/app.html

@@ -9,6 +9,8 @@
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.googleapis.com" />
 		<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+		<link href="https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,400..840;1,400..840&family=Bebas+Neue&family=Fira+Code:wght@300..700&display=swap" rel="stylesheet">
 		<link
 			href="https://fonts.googleapis.com/css2?family=Andada+Pro:ital,wght@0,400..840;1,400..840&family=Bebas+Neue&display=swap"
 			rel="stylesheet"

webpage/src/routes/UserStore.svelte.ts

@@ -1,7 +1,7 @@
 import { goto } from '$app/navigation';
 import { rdelete } from '$lib/requests.svelte';
 
-type User = {
+export type User = {
 	token: string;
 	id: string;
 	user_type: number;

webpage/src/routes/admin/runners/+page.svelte

@@ -0,0 +1,348 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { notificationStore } from 'src/lib/NotificationsStore.svelte';
+	import { post, showMessage } from 'src/lib/requests.svelte';
+	import { userStore } from 'src/routes/UserStore.svelte';
+	import { onMount } from 'svelte';
+	import * as d3 from 'd3';
+
+	import type { Base } from './types';
+	import CardInfo from './CardInfo.svelte';
+
+	let width = $state(0);
+	let height = $state(0);
+
+	function drag(simulation: any) {
+		function dragstarted(event: any, d: any) {
+			if (!event.active) simulation.alphaTarget(0.3).restart();
+			d.fx = d.x;
+			d.fy = d.y;
+			selected = d.data;
+		}
+
+		function dragged(event: any, d: any) {
+			d.fx = event.x;
+			d.fy = event.y;
+		}
+
+		function dragended(event: any, d: any) {
+			if (!event.active) simulation.alphaTarget(0);
+			d.fx = null;
+			d.fy = null;
+		}
+
+		return d3.drag().on('start', dragstarted).on('drag', dragged).on('end', dragended);
+	}
+
+	let graph: HTMLDivElement;
+
+	let selected: Base | undefined = $state();
+
+	async function getData() {
+		const dataObj: Base = {
+			name: 'API',
+			type: 'api',
+			children: []
+		};
+
+		if (!dataObj.children) throw new Error();
+
+		const localRunners: Base[] = [];
+		const remotePairs: Record<string, Base[]> = {};
+
+		try {
+			let data = await post('tasks/runner/info', {});
+
+			if (Object.keys(data.localRunners).length > 0) {
+				for (const objId of Object.keys(data.localRunners)) {
+					localRunners.push({ name: objId, type: 'local_runner' });
+				}
+
+				dataObj.children.push({
+					name: 'local runners',
+					type: 'runner_group',
+					children: localRunners
+				});
+			}
+
+			for (const objId of Object.keys(data.remoteRunners)) {
+				let obj = data.remoteRunners[objId];
+				if (remotePairs[obj.runner_info.user_id as string]) {
+					remotePairs[obj.runner_info.user_id as string].push({
+						name: objId,
+						type: 'runner',
+						task: obj.task,
+						parent: data.remoteRunners[objId].runner_info.user_id
+					});
+				} else {
+					remotePairs[data.remoteRunners[objId].runner_info.user_id] = [
+						{
+							name: objId,
+							type: 'runner',
+							task: obj.task,
+							parent: data.remoteRunners[objId].runner_info.user_id
+						}
+					];
+				}
+			}
+
+			dataObj.children.push({
+				name: 'remote runners',
+				type: 'runner_group',
+				task: undefined,
+				children: Object.keys(remotePairs).map(
+					(name) =>
+						({
+							name,
+							type: 'user_group',
+							task: undefined,
+							children: remotePairs[name]
+						}) as Base
+				)
+			});
+		} catch (ex) {
+			showMessage(ex, notificationStore, 'Failed to get Runner information');
+			return;
+		}
+
+		const root = d3.hierarchy(dataObj);
+		const links = root.links();
+		const nodes = root.descendants();
+		console.log(root, links, nodes);
+
+		const simulation = d3
+			.forceSimulation(nodes)
+			.force(
+				'link',
+				d3
+					.forceLink(links)
+					.id((d: any) => d.id)
+					.distance((d: any) => {
+						let data = d.source.data as Base;
+						switch (data.type) {
+							case 'api':
+								return 150;
+							case 'runner_group':
+								return 90;
+							case 'user_group':
+								return 80;
+							case 'runner':
+							case 'local_runner':
+								return 20;
+							default:
+								throw new Error();
+						}
+					})
+					.strength(1)
+			)
+			.force('charge', d3.forceManyBody().strength(-1000))
+			.force('x', d3.forceX())
+			.force('y', d3.forceY());
+
+		const svg = d3
+			.create('svg')
+			.attr('width', width)
+			.attr('height', height - 62)
+			.attr('viewBox', [-width / 2, -height / 2, width, height])
+			.attr('style', 'max-width: 100%; height: auto;');
+		// Append links.
+		const link = svg
+			.append('g')
+			.attr('stroke', '#999')
+			.attr('stroke-opacity', 0.6)
+			.selectAll('line')
+			.data(links)
+			.join('line');
+
+		const database_svg = `
+			<svg xmlns="http://www.w3.org/2000/svg" stroke-width="0.2" width="32" height="32" fill="currentColor" class="bi bi-database" viewBox="0 0 32 32">
+			  <path transform="scale(2)" d="M4.318 2.687C5.234 2.271 6.536 2 8 2s2.766.27 3.682.687C12.644 3.125 13 3.627 13 4c0 .374-.356.875-1.318 1.313C10.766 5.729 9.464 6 8 6s-2.766-.27-3.682-.687C3.356 4.875 3 4.373 3 4c0-.374.356-.875 1.318-1.313M13 5.698V7c0 .374-.356.875-1.318 1.313C10.766 8.729 9.464 9 8 9s-2.766-.27-3.682-.687C3.356 7.875 3 7.373 3 7V5.698c.271.202.58.378.904.525C4.978 6.711 6.427 7 8 7s3.022-.289 4.096-.777A5 5 0 0 0 13 5.698M14 4c0-1.007-.875-1.755-1.904-2.223C11.022 1.289 9.573 1 8 1s-3.022.289-4.096.777C2.875 2.245 2 2.993 2 4v9c0 1.007.875 1.755 1.904 2.223C4.978 15.71 6.427 16 8 16s3.022-.289 4.096-.777C13.125 14.755 14 14.007 14 13zm-1 4.698V10c0 .374-.356.875-1.318 1.313C10.766 11.729 9.464 12 8 12s-2.766-.27-3.682-.687C3.356 10.875 3 10.373 3 10V8.698c.271.202.58.378.904.525C4.978 9.71 6.427 10 8 10s3.022-.289 4.096-.777A5 5 0 0 0 13 8.698m0 3V13c0 .374-.356.875-1.318 1.313C10.766 14.729 9.464 15 8 15s-2.766-.27-3.682-.687C3.356 13.875 3 13.373 3 13v-1.302c.271.202.58.378.904.525C4.978 12.71 6.427 13 8 13s3.022-.289 4.096-.777c.324-.147.633-.323.904-.525"/>
+			</svg>
+		`;
+
+		const cpu_svg = `
+			<svg stroke="white" fill="white" xmlns="http://www.w3.org/2000/svg" stroke-width="0.2" width="32" height="32" fill="currentColor" class="bi bi-cpu-fill" viewBox="0 0 32 32">
+				<path transform="scale(2)" d="M6.5 6a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
+				<path transform="scale(2)" d="M5.5.5a.5.5 0 0 0-1 0V2A2.5 2.5 0 0 0 2 4.5H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2v1H.5a.5.5 0 0 0 0 1H2A2.5 2.5 0 0 0 4.5 14v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14h1v1.5a.5.5 0 0 0 1 0V14a2.5 2.5 0 0 0 2.5-2.5h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14v-1h1.5a.5.5 0 0 0 0-1H14A2.5 2.5 0 0 0 11.5 2V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1V.5a.5.5 0 0 0-1 0V2h-1zm1 4.5h3A1.5 1.5 0 0 1 11 6.5v3A1.5 1.5 0 0 1 9.5 11h-3A1.5 1.5 0 0 1 5 9.5v-3A1.5 1.5 0 0 1 6.5 5"/>
+			</svg>
+		`;
+
+		const user_svg = `
+			<svg fill="white" stroke="white" xmlns="http://www.w3.org/2000/svg" stroke-width="0.2" width="32" height="32" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 32 32">
+			  <path transform="scale(2)" d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+			</svg>
+		`;
+
+		const inbox_fill = `
+			<svg fill="white" stroke="white" xmlns="http://www.w3.org/2000/svg" stroke-width="0.2" width="32" height="32" fill="currentColor" class="bi bi-inbox-fill" viewBox="0 0 32 32">
+	  			<path transform="scale(2)" d="M4.98 4a.5.5 0 0 0-.39.188L1.54 8H6a.5.5 0 0 1 .5.5 1.5 1.5 0 1 0 3 0A.5.5 0 0 1 10 8h4.46l-3.05-3.812A.5.5 0 0 0 11.02 4zm-1.17-.437A1.5 1.5 0 0 1 4.98 3h6.04a1.5 1.5 0 0 1 1.17.563l3.7 4.625a.5.5 0 0 1 .106.374l-.39 3.124A1.5 1.5 0 0 1 14.117 13H1.883a1.5 1.5 0 0 1-1.489-1.314l-.39-3.124a.5.5 0 0 1 .106-.374z"/>
+			</svg>
+		`;
+
+		const node = svg
+			.append('g')
+			.attr('fill', '#fff')
+			.attr('stroke', '#000')
+			.attr('stroke-width', 1.5)
+			.selectAll('g')
+			.data(nodes)
+			.join('g')
+			.attr('style', 'cursor: pointer;')
+			.call(drag(simulation) as any)
+			.on('click', (e) => {
+				console.log('test');
+				function findData(obj: HTMLElement) {
+					if ((obj as any).__data__) {
+						return (obj as any).__data__;
+					}
+					if (!obj.parentElement) {
+						throw new Error();
+					}
+					return findData(obj.parentElement);
+				}
+				let obj = findData(e.srcElement);
+				console.log(obj);
+				selected = obj.data;
+			});
+
+		node
+			.append('circle')
+			.attr('fill', (d: any) => {
+				let data = d.data as Base;
+				switch (data.type) {
+					case 'api':
+						return '#caf0f8';
+					case 'runner_group':
+						return '#00b4d8';
+					case 'user_group':
+						return '#0000ff';
+					case 'runner':
+					case 'local_runner':
+						return '#03045e';
+					default:
+						throw new Error();
+				}
+			})
+			.attr('stroke', (d: any) => {
+				let data = d.data as Base;
+				switch (data.type) {
+					case 'api':
+					case 'user_group':
+					case 'runner_group':
+						return '#fff';
+					case 'runner':
+					case 'local_runner':
+						// TODO make this relient on the stauts
+						return '#000';
+					default:
+						throw new Error();
+				}
+			})
+			.attr('r', (d: any) => {
+				let data = d.data as Base;
+				switch (data.type) {
+					case 'api':
+						return 30;
+					case 'runner_group':
+						return 20;
+					case 'user_group':
+						return 25;
+					case 'runner':
+					case 'local_runner':
+						return 30;
+					default:
+						throw new Error();
+				}
+			})
+			.append('title')
+			.text((d: any) => d.data.name);
+
+		node
+			.filter((d) => {
+				return ['api', 'local_runner', 'runner', 'user_group', 'runner_group'].includes(
+					d.data.type
+				);
+			})
+			.append('g')
+			.html((d) => {
+				switch (d.data.type) {
+					case 'api':
+						return database_svg;
+					case 'user_group':
+						return user_svg;
+					case 'runner_group':
+						return inbox_fill;
+					case 'local_runner':
+					case 'runner':
+						return cpu_svg;
+					default:
+						throw new Error();
+				}
+			});
+
+		simulation.on('tick', () => {
+			link
+				.attr('x1', (d: any) => d.source.x)
+				.attr('y1', (d: any) => d.source.y)
+				.attr('x2', (d: any) => d.target.x)
+				.attr('y2', (d: any) => d.target.y);
+
+			node
+				.select('circle')
+				.attr('cx', (d: any) => d.x)
+				.attr('cy', (d: any) => d.y);
+			node
+				.select('svg')
+				.attr('x', (d: any) => d.x - 16)
+				.attr('y', (d: any) => d.y - 16);
+		});
+
+		//invalidation.then(() => simulation.stop());
+
+		graph.appendChild(svg.node() as any);
+	}
+
+	$effect(() => {
+		console.log(selected);
+	});
+
+	onMount(() => {
+		// Check if logged in and admin
+		if (!userStore.user || userStore.user.user_type != 2) {
+			goto('/');
+			return;
+		}
+		getData();
+	});
+</script>
+
+<svelte:window bind:innerWidth={width} bind:innerHeight={height} />
+<svelte:head>
+	<title>Runners</title>
+</svelte:head>
+
+<div class="graph-container">
+	<div class="graph" bind:this={graph}></div>
+	{#if selected}
+		<div class="selected">
+			<CardInfo item={selected} />
+		</div>
+	{/if}
+</div>
+
+<style lang="css">
+	.graph-container {
+		position: relative;
+		.selected {
+			position: absolute;
+			right: 40px;
+			top: 40px;
+			width: 20%;
+			height: auto;
+			padding: 20px;
+			background: white;
+			border-radius: 20px;
+			box-shadow: 1px 1px 8px 2px #22222244;
+		}
+	}
+</style>

webpage/src/routes/admin/runners/CardInfo.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { post, showMessage } from 'src/lib/requests.svelte';
+	import type { Base } from './types';
+	import { notificationStore } from 'src/lib/NotificationsStore.svelte';
+	import type { User } from 'src/routes/UserStore.svelte';
+	import Spinner from 'src/lib/Spinner.svelte';
+	import Tooltip from 'src/lib/Tooltip.svelte';
+
+	let { item }: { item: Base } = $props();
+
+	let user_data: User | undefined = $state();
+
+	async function getUserData(id: string) {
+		try {
+			user_data = await post('user/info/get', { id });
+			console.log(user_data);
+		} catch (ex) {
+			showMessage(ex, notificationStore, 'Could not get user information');
+		}
+	}
+
+	$effect(() => {
+		user_data = undefined;
+		if (item.type == 'user_group') {
+			getUserData(item.name);
+		} else if (item.type == 'runner') {
+			getUserData(item.parent ?? '');
+		}
+	});
+</script>
+
+{#if item.type == 'api'}
+	<h3>API</h3>
+{:else if item.type == 'runner_group'}
+	<h3>Runner Group</h3>
+	This reprents a the group of {item.name}.
+{:else if item.type == 'user_group'}
+	<h3>User</h3>
+	{#if user_data}
+		All Runners connected to this node bellong to <span class="accent">{user_data.username}</span>
+	{:else}
+		<div style="text-align: center;">
+			<Spinner />
+		</div>
+	{/if}
+{:else if item.type == 'local_runner'}
+	<h3>Local Runner</h3>
+	This is a local runner
+	<div>
+		{#if item.task}
+			test
+		{:else}
+			Not running any task
+		{/if}
+	</div>
+{:else if item.type == 'runner'}
+	<h3>Runner</h3>
+	{#if user_data}
+		<p>
+			This is a remote runner. This runner is owned by<span class="accent"
+				>{user_data?.username}</span
+			>
+		</p>
+		<div>
+			{#if item.task}
+				This runner is runing a <Tooltip title={item.task.id}>task</Tooltip>
+			{:else}
+				Not running any task
+			{/if}
+		</div>
+	{:else}
+		<div style="text-align: center;">
+			<Spinner />
+		</div>
+	{/if}
+{:else}
+	{item.type}
+{/if}
+
+<style lang="scss">
+	h3 {
+		text-align: center;
+		margin: 0;
+	}
+	.accent {
+		background: #22222222;
+		padding: 1px;
+		border-radius: 5px;
+	}
+</style>

webpage/src/routes/admin/runners/types.ts

@@ -0,0 +1,10 @@
+import type { Task } from 'src/routes/models/edit/tasks/types';
+
+export type BaseType = 'api' | 'runner_group' | 'user_group' | 'runner' | 'local_runner';
+export type Base = {
+	name: string;
+	type: BaseType;
+	children?: Base[];
+	task?: Task;
+	parent?: string;
+};

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

@@ -1,26 +1,22 @@
 <script lang="ts">
-	import MessageSimple from 'src/lib/MessageSimple.svelte';
 	import { onMount } from 'svelte';
-	import { get } from '$lib/requests.svelte';
+	import { get, showMessage } from '$lib/requests.svelte';
+	import { notificationStore } from 'src/lib/NotificationsStore.svelte';
+	import Spinner from 'src/lib/Spinner.svelte';
 
 	let list = $state<
-		{
-			name: string;
-			id: string;
-		}[]
-	>([]);
-
-	let message: MessageSimple;
+		| {
+				name: string;
+				id: string;
+		  }[]
+		| undefined
+	>(undefined);
 
 	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');
-			}
+			showMessage(e, notificationStore, 'Could not request list of models');
 		}
 	});
 </script>
@@ -30,39 +26,44 @@
 </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}
+	{#if list}
+		{#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>
-						<td>
-							{item.name}
-						</td>
-						<td class="text-center">
-							<a class="button simple" href="/models/edit?id={item.id}"> Edit </a>
-						</td>
+						<th> Name </th>
+						<th>
+							<!-- Open Button -->
+						</th>
 					</tr>
-				{/each}
-			</tbody>
-		</table>
+				</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}
 	{: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 style="text-align: center;">
+			<Spinner />
 		</div>
 	{/if}
 </main>

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

@@ -1,15 +1,13 @@
 <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 { postFormData, showMessage } from 'src/lib/requests.svelte';
 	import { goto } from '$app/navigation';
+	import { notificationStore } from 'src/lib/NotificationsStore.svelte';
 
 	import 'src/styles/forms.css';
 
 	let submitted = $state(false);
 
-	let message: MessageSimple;
-
 	let buttonClicked: Promise<void> = $state(Promise.resolve());
 
 	let data = $state<{
@@ -21,7 +19,6 @@
 	});
 
 	async function onSubmit() {
-		message.display('');
 		buttonClicked = new Promise<void>(() => {});
 
 		if (!data.file || !data.name) return;
@@ -34,11 +31,7 @@
 			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');
-			}
+			showMessage(e, notificationStore, 'Was not able to create model');
 		}
 
 		buttonClicked = Promise.resolve();
@@ -75,7 +68,6 @@
 				</div>
 			</FileUpload>
 		</fieldset>
-		<MessageSimple bind:this={message} />
 		{#await buttonClicked}
 			<div class="text-center">File Uploading</div>
 		{:then}

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

@@ -215,7 +215,7 @@
 					</div>
 				{:else if m.status == -3 || m.status == -4}
 					<BaseModelInfo model={m} />
-					<form on:submit={resetModel}>
+					<form on:submit|preventDefault={resetModel}>
 						Failed Prepare for training.<br />
 						<div class="spacer"></div>
 						<MessageSimple bind:this={resetMessages} />

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

@@ -1,11 +1,14 @@
 <script lang="ts">
-	import { post, postFormData } from 'src/lib/requests.svelte';
+	import { post, postFormData, showMessage } 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';
+	import type { Task } from './tasks/TasksTable.svelte';
+	import Tabs from 'src/lib/Tabs.svelte';
+	import hljs from 'highlight.js';
+	import { notificationStore } from 'src/lib/NotificationsStore.svelte';
 
 	let { model } = $props<{ model: Model }>();
 
@@ -19,8 +22,6 @@
 	let last_task: string | undefined = $state();
 	let last_task_timeout: number | null = null;
 
-	let messages: MessageSimple;
-
 	async function reloadLastTimeout() {
 		if (!last_task) {
 			return;
@@ -42,7 +43,6 @@
 
 	async function submit() {
 		if (!file) return;
-		messages.clear();
 
 		let form = new FormData();
 		form.append('json_data', JSON.stringify({ id: model.id }));
@@ -56,11 +56,7 @@
 			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');
-			}
+			showMessage(e, notificationStore, 'Could not run the model');
 		}
 
 		dispatch('upload');
@@ -73,39 +69,111 @@
 	});
 </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>
+<Tabs active="upload" let:isActive>
+	<div class="buttons" slot="buttons" let:setActive let:isActive>
+		<button class="tab" class:selected={isActive('upload')} on:click={setActive('upload')}>
+			Upload
+		</button>
+		<button class="tab" class:selected={isActive('api')} on:click={setActive('api')}> Api </button>
+	</div>
+	<div class="content" class:selected={isActive('api')}>
+		<div class="codeinfo">
+			To perform an image classfication please follow the example bellow:
+			<pre style="font-family: Fira Code;">{@html hljs.highlight(
+					`let form = new FormData();
+form.append('json_data', JSON.stringify({ id: '${model.id}' }));
+form.append('file', file, 'file');
 
-		<FileUpload replace_slot bind:file accept="image/*">
-			<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={messages} />
-	<button> Run </button>
-	{#if run}
-		{#await _result}
-			<h1>
-				Processing Image! <Spinner />
-			</h1>
-		{:then result}
-			{#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 class="result">
-					<h1>There was a problem running the task:</h1>
-					{result?.status_message}
-				</div>
+const headers = new Headers();
+headers.append('response-type', 'application/json');
+headers.append('token', token);
+
+const r = await fetch('${window.location.protocol}//${window.location.hostname}/api/tasks/start/image', {
+	method: 'POST',
+	headers: headers,
+	body: form
+});`,
+					{ language: 'javascript' }
+				).value}</pre>
+			On Success the request will return a json with this format:
+			<pre style="font-family: Fira Code;">{@html hljs.highlight(
+					`{ id	"00000000-0000-0000-0000-000000000000" }`,
+					{ language: 'json' }
+				).value}</pre>
+			This id can be used to query the API for the result of the task:
+			<pre style="font-family: Fira Code;">{@html hljs.highlight(
+					`const headers = new Headers();
+headers.append('content-type', 'application/json');
+headers.append('token', token);
+
+const r = await fetch('${window.location.protocol}//${window.location.hostname}/api/tasks/task', {
+	method: 'POST',
+	headers: headers,
+	body: JSON.stringify({ id: '00000000-0000-0000-0000-000000000000' })
+});`,
+					{ language: 'javascript' }
+				).value}</pre>
+			Once the task shows the status as 4 then the data can be obatined in the result field: The successful
+			return value has this type:
+			<pre style="font-family: Fira Code;">{@html hljs.highlight(
+					`{
+    "id": string,
+    "user_id": string,
+    "model_id": string,
+    "status": number,
+    "status_message": string,
+    "user_confirmed": number,
+    "compacted": number,
+    "type": number,
+    "extra_task_info": string,
+    "result": string,
+    "created": string
+}`,
+					{ language: 'javascript' }
+				).value}</pre>
+		</div>
+	</div>
+	<div class="content" class:selected={isActive('upload')}>
+		<form on:submit|preventDefault={submit} style="box-shadow: none;">
+			<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>
+					<div slot="replaced-name">
+						<span> Image selected </span>
+					</div>
+				</FileUpload>
+			</fieldset>
+			<button> Run </button>
+			{#if run}
+				{#await _result}
+					<h1>
+						Processing Image! <Spinner />
+					</h1>
+				{:then result}
+					{#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 class="result">
+							<h1>There was a problem running the task:</h1>
+							{result?.status_message}
+						</div>
+					{/if}
+				{/await}
 			{/if}
-		{/await}
-	{/if}
-</form>
+		</form>
+	</div>
+</Tabs>
+
+<style lang="scss">
+	.codeinfo {
+		padding: 20px;
+	}
+</style>

webpage/src/routes/models/edit/tasks/Stats.svelte

@@ -18,7 +18,6 @@
 		PointElement,
 		LineElement
 	} from 'chart.js';
-	import ModelData from '../ModelData.svelte';
 
 	Chart.register(
 		Title,
@@ -57,7 +56,9 @@
 	}
 
 	let pie: HTMLCanvasElement;
+	let pie2: HTMLCanvasElement;
 	let pieChart: Chart<'pie'> | undefined;
+	let pie2Chart: Chart<'pie'> | undefined;
 	function createPie(s: TasksStatsDay) {
 		if (pieChart) {
 			pieChart.destroy();
@@ -72,23 +73,31 @@
 					'Classfication Failure',
 					'Classfication Preparing',
 					'Classfication Running',
-					'Classfication Unknown',
-					'Non Classfication Error',
-					'Non Classfication Success'
+					'Classfication Unknown'
 				],
 				datasets: [
 					{
 						label: 'Total',
-						data: [
-							t.c_error,
-							t.c_success,
-							t.c_failure,
-							t.c_pre_running,
-							t.c_running,
-							t.c_unknown,
-							t.nc_error,
-							t.nc_success
-						]
+						data: [t.c_error, t.c_success, t.c_failure, t.c_pre_running, t.c_running, t.c_unknown]
+					}
+				]
+			},
+			options: {
+				animation: false
+			}
+		});
+
+		if (pie2Chart) {
+			pieChart.destroy();
+		}
+		pie2Chart = new Chart(pie2, {
+			type: 'pie',
+			data: {
+				labels: ['Non Classfication Error', 'Non Classfication Success'],
+				datasets: [
+					{
+						label: 'Total',
+						data: [t.nc_error, t.nc_success]
 					}
 				]
 			},
@@ -147,8 +156,13 @@
 <h1>Statistics (Day)</h1>
 
 <h2>Total</h2>
-<div>
-	<canvas bind:this={pie}></canvas>
+<div class="pies">
+	<div>
+		<canvas bind:this={pie}></canvas>
+	</div>
+	<div>
+		<canvas bind:this={pie2}></canvas>
+	</div>
 </div>
 
 <h2>Hourly</h2>
@@ -160,4 +174,12 @@
 	canvas {
 		width: 100%;
 	}
+	.pies {
+		display: flex;
+		align-content: stretch;
+
+		div {
+			width: 50%;
+		}
+	}
 </style>

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

@@ -1,16 +1,4 @@
 <script lang="ts" context="module">
-	export type Task = {
-		id: string;
-		user_id: string;
-		model_id: string;
-		status: number;
-		status_message: string;
-		user_confirmed: number;
-		compacted: number;
-		type: number;
-		created: string;
-		result: string;
-	};
 	export const TaskType = {
 		TASK_FAILED_RUNNING: -2,
 		TASK_FAILED_CREATION: -1,
@@ -55,6 +43,8 @@
 	import MessageSimple from 'src/lib/MessageSimple.svelte';
 	import Tooltip from 'src/lib/Tooltip.svelte';
 
+	import type { Task } from './types';
+
 	let { model }: { model: Model } = $props();
 
 	let page = $state(0);

webpage/src/routes/models/edit/tasks/types.ts

@@ -0,0 +1,12 @@
+export type Task = {
+	id: string;
+	user_id: string;
+	model_id: string;
+	status: number;
+	status_message: string;
+	user_confirmed: number;
+	compacted: number;
+	type: number;
+	created: string;
+	result: string;
+};

webpage/vite.config.ts

@@ -2,5 +2,10 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import { defineConfig } from 'vite';
 
 export default defineConfig({
-	plugins: [sveltekit()]
+	plugins: [sveltekit()],
+	build: {
+		commonjsOptions: {
+			esmExternals: true
+		}
+	}
 });