logic/db_types/user.go

@@ -14,10 +14,19 @@ const (
 )
 
 type User struct {
-	Id       string `db:"u.id"`
+	Id       string `db:"u.id" json:"id"`
-	Username string `db:"u.username"`
+	Username string `db:"u.username" json:"username"`
-	Email    string `db:"u.email"`
+	Email    string `db:"u.email" json:"email"`
-	UserType int    `db:"u.user_type"`
+	UserType int    `db:"u.user_type" json:"user_type"`
+}
+
+func UserFromId(db db.Db, id string) (*User, error) {
+	var user User
+	err := GetDBOnce(db, &user, "users as u where u.id=$1", id)
+	if err != nil {
+		return nil, err
+	}
+	return &user, nil
 }
 
 func UserFromToken(db db.Db, token string) (*User, error) {

logic/models/train/train.go

@@ -1313,7 +1313,7 @@ func generateExpandableDefinition(c BasePack, model *BaseModel, target_accuracy
 
 	log.Info("Size of the simple block", "loop", loop)
 
-	//loop = max(loop, 3)
+	loop = max(loop, min(2, model.ImageMode))
 
 	for i := 0; i < loop; i++ {
 		err = MakeLayerExpandable(db, def_id, order, LAYER_SIMPLE_BLOCK, "", 1)

logic/tasks/README.md

@@ -1,7 +0,0 @@
-# Runner Protocol
-
-```
-    				   /----\
-    				  \/	|
-Register -> Init -> Active ---> Ready -> Info
-```

logic/tasks/index.go

@@ -9,4 +9,5 @@ func HandleTasks(handle *Handle) {
 	handleList(handle)
 	handleRequests(handle)
 	handleRemoteRunner(handle)
+	handleRunnerData(handle)
 }

logic/tasks/runner.go

@@ -936,7 +936,12 @@ func handleRemoteRunner(x *Handle) {
 			return c.E500M("Failed to set class status", err)
 		}
 
-		_, err = c.Exec("update exp_model_head set status=$1 where status=$2 and model_id=$3", MODEL_HEAD_STATUS_READY, MODEL_HEAD_STATUS_TRAINING, model.Id)
+		defs, err := model.GetDefinitions(c, "")
+		if err != nil {
+			return c.E500M("Failed to get definitions", err)
+		}
+
+		_, err = c.Exec("update exp_model_head set status=$1 where status=$2 and def_id=$3", MODEL_HEAD_STATUS_READY, MODEL_HEAD_STATUS_TRAINING, defs[0].Id)
 		if err != nil {
 			return c.E500M("Failed to set head status", err)
 		}

logic/tasks/runner/runner.go

@@ -185,9 +185,7 @@ func RunnerOrchestrator(db db.Db, config Config, handler *Handle) {
 		Prefix:          "Runner Orchestrator Logger",
 	})
 
-	// Setup vars
+	setupHandle(handler)
-	handler.DataMap["runners"] = map[string]interface{}{}
-	handler.DataMap["runners_mutex"] = &sync.Mutex{}
 
 	base := BasePackStruct{
 		Db:     db,
@@ -206,7 +204,7 @@ func RunnerOrchestrator(db db.Db, config Config, handler *Handle) {
 
 	defer func() {
 		if r := recover(); r != nil {
-			logger.Error("Recovered in Orchestrator restarting", "due to", r)
+			logger.Error("Recovered in Orchestrator restarting", "due to", r, "stack", string(debug.Stack()))
 			for x := range task_runners {
 				close(task_runners[x])
 			}
@@ -221,6 +219,10 @@ func RunnerOrchestrator(db db.Db, config Config, handler *Handle) {
 	for i := 0; i < gpu_workers; i++ {
 		task_runners[i] = make(chan Task, 10)
 		task_runners_used[i] = false
+		AddLocalRunner(handler, LocalRunner{
+			RunnerNum: i + 1,
+			Task:      nil,
+		})
 		go runner(config, db, task_runners[i], i+1, back_channel)
 	}
 
@@ -228,6 +230,7 @@ func RunnerOrchestrator(db db.Db, config Config, handler *Handle) {
 
 	for i := range back_channel {
 
+		if i != 0 {
 			if i > 0 {
 				logger.Info("Runner freed", "runner", i)
 				task_runners_used[i-1] = false
@@ -237,6 +240,8 @@ func RunnerOrchestrator(db db.Db, config Config, handler *Handle) {
 				task_runners_used[i] = false
 				go runner(config, db, task_runners[i], i+1, back_channel)
 			}
+			AddLocalTask(handler, int(math.Abs(float64(i))), nil)
+		}
 
 		if task_to_dispatch == nil {
 			var task TaskT
@@ -290,6 +295,7 @@ func RunnerOrchestrator(db db.Db, config Config, handler *Handle) {
 				if !task_runners_used[i] {
 					task_runners[i] <- *task_to_dispatch
 					task_runners_used[i] = true
+					AddLocalTask(handler, i+1, task_to_dispatch)
 					task_to_dispatch = nil
 					break
 				}

logic/tasks/runner/utils.go

@@ -0,0 +1,51 @@
+package task_runner
+
+import (
+	"sync"
+
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/tasks/utils"
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/utils"
+)
+
+type LocalRunner struct {
+	RunnerNum int   `json:"id"`
+	Task      *Task `json:"task"`
+}
+
+type LocalRunners map[int]*LocalRunner
+
+func LockRunners(handler *Handle, t string) *sync.Mutex {
+	req := t + "_runners_mutex"
+	if t == "" {
+		req = "runners_mutex"
+	}
+	mutex := handler.DataMap[req].(*sync.Mutex)
+	mutex.Lock()
+	return mutex
+}
+
+func setupHandle(handler *Handle) {
+	// Setup Remote Runner data
+	handler.DataMap["runners"] = map[string]interface{}{}
+	handler.DataMap["runners_mutex"] = &sync.Mutex{}
+
+	// Setup Local Runner data
+	handler.DataMap["local_runners"] = &LocalRunners{}
+	handler.DataMap["local_runners_mutex"] = &sync.Mutex{}
+}
+
+func AddLocalRunner(handler *Handle, runner LocalRunner) {
+	mutex := LockRunners(handler, "local")
+	defer mutex.Unlock()
+
+	runners := handler.DataMap["local_runners"].(*LocalRunners)
+	(*runners)[runner.RunnerNum] = &runner
+}
+
+func AddLocalTask(handler *Handle, runner_id int, task *Task) {
+	mutex := LockRunners(handler, "local")
+	defer mutex.Unlock()
+
+	runners := handler.DataMap["local_runners"].(*LocalRunners)
+	(*(*runners)[runner_id]).Task = task
+}

logic/tasks/runner_data.go

@@ -0,0 +1,25 @@
+package tasks
+
+import (
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/db_types"
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/tasks/runner"
+	. "git.andr3h3nriqu3s.com/andr3/fyp/logic/utils"
+)
+
+func handleRunnerData(x *Handle) {
+	type NonType struct{}
+	PostAuthJson(x, "/tasks/runner/info", User_Admin, func(c *Context, dat *NonType) *Error {
+		mutex_remote := LockRunners(x, "")
+		defer mutex_remote.Unlock()
+		mutex_local := LockRunners(x, "local")
+		defer mutex_local.Unlock()
+
+		return c.SendJSON(struct {
+			RemoteRunners map[string]interface{} `json:"remoteRunners"`
+			LocalRunner   *LocalRunners          `json:"localRunners"`
+		}{
+			RemoteRunners: x.DataMap["runners"].(map[string]interface{}),
+			LocalRunner:   x.DataMap["local_runners"].(*LocalRunners),
+		})
+	})
+}

logic/users/users.go

@@ -241,6 +241,17 @@ func UsersEndpints(db db.Db, handle *Handle) {
 		return c.SendJSON(userReturn)
 	})
 
+	PostAuthJson(handle, "/user/info/get", User_Admin, func(c *Context, dat *JustId) *Error {
+		var user *User
+		user, err := UserFromId(c, dat.Id)
+		if err == NotFoundError {
+			return c.SendJSONStatus(404, "User not found")
+		} else if err != nil {
+			return c.E500M("Could not get user", err)
+		}
+		return c.SendJSON(user)
+	})
+
 	// Handles updating users
 	type UpdateUserData struct {
 		Id    string `json:"id"`

logic/utils/config.go

@@ -114,12 +114,16 @@ func (c *Config) Cleanup(db db.Db) {
 			tasks[i].UpdateStatus(base, TASK_FAILED_RUNNING, "Task inturupted by server restart please try again")
 			_, err = db.Exec("update models set status=$1 where id=$2", READY_RETRAIN_FAILED, tasks[i].ModelId)
 			failLog(err)
+			_, err = db.Exec("update model_classes set status=$1 where model_id=$2 and status=$3", CLASS_STATUS_TO_TRAIN, tasks[i].ModelId, CLASS_STATUS_TRAINING)
+			failLog(err)
 			continue
 		}
 		if tasks[i].TaskType == int(TASK_TYPE_TRAINING) {
 			tasks[i].UpdateStatus(base, TASK_FAILED_RUNNING, "Task inturupted by server restart please try again")
 			_, err = db.Exec("update models set status=$1 where id=$2", FAILED_TRAINING, tasks[i].ModelId)
 			failLog(err)
+			_, err = db.Exec("update model_classes set status=$1 where model_id=$2 and status=$3", CLASS_STATUS_TO_TRAIN, tasks[i].ModelId, CLASS_STATUS_TRAINING)
+			failLog(err)
 			continue
 		}
 	}

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;
 		  }[]
-	>([]);
+		| undefined
-
+	>(undefined);
-	let message: MessageSimple;
 
 	onMount(async () => {
 		try {
 			list = await get('models');
 		} catch (e) {
-			if (e instanceof Response) {
+			showMessage(e, notificationStore, 'Could not request list of models');
-				message.display(await e.json());
-			} else {
-				message.display('Could not request list of models');
-			}
 		}
 	});
 </script>
@@ -30,7 +26,7 @@
 </svelte:head>
 
 <main>
-	<MessageSimple bind:this={message} />
+	{#if list}
 		{#if list.length > 0}
 			<div class="list-header">
 				<h2>My Models</h2>
@@ -65,6 +61,11 @@
 				<a class="button padded" href="/models/add"> Create a new model </a>
 			</div>
 		{/if}
+	{:else}
+		<div style="text-align: center;">
+			<Spinner />
+		</div>
+	{/if}
 </main>
 
 <style lang="scss">

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, showMessage } from 'src/lib/requests.svelte';
-	import { postFormData } 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) {
+			showMessage(e, notificationStore, 'Was not able to create model');
-				message.display(await e.json());
-			} else {
-				message.display('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/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) {
+			showMessage(e, notificationStore, 'Could not run the model');
-				messages.display(await e.json());
-			} else {
-				messages.display('Could not run the model');
-			}
 		}
 
 		dispatch('upload');
@@ -73,7 +69,72 @@
 	});
 </script>
 
-<form on:submit|preventDefault={submit}>
+<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');
+
+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>
@@ -86,7 +147,6 @@
 					</div>
 				</FileUpload>
 			</fieldset>
-	<MessageSimple bind:this={messages} />
 			<button> Run </button>
 			{#if run}
 				{#await _result}
@@ -109,3 +169,11 @@
 				{/await}
 			{/if}
 		</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',
+					'Classfication Unknown'
-					'Non Classfication Error',
-					'Non Classfication Success'
 				],
 				datasets: [
 					{
 						label: 'Total',
-						data: [
+						data: [t.c_error, t.c_success, t.c_failure, t.c_pre_running, t.c_running, t.c_unknown]
-							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
 				]
+			},
+			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,9 +156,14 @@
 <h1>Statistics (Day)</h1>
 
 <h2>Total</h2>
+<div class="pies">
 	<div>
 		<canvas bind:this={pie}></canvas>
 	</div>
+	<div>
+		<canvas bind:this={pie2}></canvas>
+	</div>
+</div>
 
 <h2>Hourly</h2>
 <div>
@@ -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
+		}
+	}
 });