From 7cfaa7fb36a6d17d6966f2a509c299114fc98d4f Mon Sep 17 00:00:00 2001
From: Belem Zhang <belem.zhang@intel.com>
Date: Wed, 13 Sep 2023 17:22:58 +0800
Subject: [PATCH] testqueue

---
 src/lib/assets/css/global.css                |  25 +++++
 src/lib/assets/js/utils.js                   |  30 ++++--
 src/lib/components/ConfigBackends.svelte     |   8 +-
 src/lib/components/ConfigModels.svelte       |  21 ++--
 src/lib/components/ConfigModelsManual.svelte |  15 ++-
 src/lib/components/ConfigNumOfRuns.svelte    |   4 +-
 src/lib/components/Results.svelte            |  12 +++
 src/lib/components/TestQueue.svelte          |   6 --
 src/lib/store/store.js                       |   2 +-
 src/routes/+page.svelte                      |  50 +++------
 src/routes/onnx/mobilenet_v2/+page.svelte    |  95 ----------------
 src/routes/run/mobilenet_v2/+page.svelte     | 108 +++++++++++++++++++
 src/routes/run/resnet50_v1/+page.svelte      | 108 +++++++++++++++++++
 13 files changed, 315 insertions(+), 169 deletions(-)
 create mode 100644 src/lib/components/Results.svelte
 delete mode 100644 src/routes/onnx/mobilenet_v2/+page.svelte
 create mode 100644 src/routes/run/mobilenet_v2/+page.svelte
 create mode 100644 src/routes/run/resnet50_v1/+page.svelte

diff --git a/src/lib/assets/css/global.css b/src/lib/assets/css/global.css
index 5cb16ed..0b26491 100644
--- a/src/lib/assets/css/global.css
+++ b/src/lib/assets/css/global.css
@@ -374,4 +374,29 @@ padding: 2px 4px 2px 4px;
 	.group, .config label.extra {
     margin-bottom: 4px;
   }
+}
+
+.run {
+  text-align: center;
+  margin-top: 1em;
+}
+.run button {
+  padding: 4px 16px;
+  background-color: var(--green);
+  border: 1px solid var(--green);
+  color: white;
+  display: inline-block;
+  margin: 10px;
+  cursor: pointer;
+  box-shadow:
+    var(--green) 0px 10px 20px -12px,
+    var(--green) 0px 18px 16px -18px;
+}
+
+.run button:hover {
+  background-color: var(--pink);
+  border: 1px solid var(--pink);
+  box-shadow:
+    var(--pink) 0px 6px 12px -8px,
+    var(--pink) 0px 12px 10px -12px;
 }
\ No newline at end of file
diff --git a/src/lib/assets/js/utils.js b/src/lib/assets/js/utils.js
index a620e7b..9f65a2f 100644
--- a/src/lib/assets/js/utils.js
+++ b/src/lib/assets/js/utils.js
@@ -1,4 +1,4 @@
-import { autoStore, numberOfRunsStore, backendsStore, dataTypesStore, modelTypesStore, modelsStore, testQueueStore, resultStore } from '../../store/store'
+import { autoStore, numberOfRunsStore, backendsStore, dataTypesStore, modelTypesStore, modelsStore, testQueueStore, resultsStore } from '../../store/store'
 import { models } from '../../config';
 import { goto } from '$app/navigation';
 import { base } from '$app/paths';
@@ -26,7 +26,11 @@ export const getGpu = () => {
 }
 
 export const addResult = (result) => {
-  resultStore.update((arr) => [...arr, result]);
+  resultsStore.update((arr) => [...arr, result]);
+}
+
+export const resetResult = () => {
+  resultsStore.update(() => []);
 }
 
 export const clearTestQueue = () => {
@@ -49,6 +53,7 @@ export const resetStore = () => {
   modelTypesStore.update(() => []);
   modelsStore.update(() => []);
   testQueueStore.update(() => []);
+  resultsStore.update(() => []);
 }
 
 /**
@@ -100,6 +105,14 @@ modelsStore.subscribe((value) => {
   selectedModels = value;
 });
 
+/**
+ * @type {string[]}
+ */
+let testQueue;
+testQueueStore.subscribe((value) => {
+  testQueue = value;
+});
+
 export const goTo = () => {
   if (selectedModels.length > 0 && selectedBackends.length > 0 && selectedDataTypes.length > 0 && selectedModelTypes.length > 0) {
     if (selectedBackends.length > 0 && selectedBackends.length <= 8) {
@@ -127,8 +140,6 @@ export const goTo = () => {
       let model = selectedModels.toString();
       let url;
 
-      console.log(location.href + ' ' + location.pathname)
-
       if (location.pathname === '/' || location.pathname === '/web-ai-benchmark') {
         url = `${base}?modeltype=${modelType}&datatype=${dataType}&backend=${backend}&run=${numOfRuns}&model=${model}`
       } else {
@@ -147,7 +158,7 @@ export const goTo = () => {
   }
 }
 
-export const testQueue = () => {
+export const updateTestQueue = () => {
   /**
    * @type {string[]}
    */
@@ -195,6 +206,11 @@ export const stringToArray = (value) => {
   return value;
 };
 
+export const filterTestQueue = (id) => {
+  let filteredTestQueue = testQueue.filter((testQueue) => testQueue.id !== id);
+  testQueueStore.update(() => filteredTestQueue);
+}
+
 export const urlToStoreHome = (urlSearchParams) => {
   if (urlSearchParams.size > 0) {
     let modelType = urlSearchParams.get('modeltype');
@@ -262,4 +278,6 @@ export const urlToStoreHome = (urlSearchParams) => {
       }
     }
   }
-};
\ No newline at end of file
+};
+
+export const sleep = (time) => new Promise(resolve => setTimeout(resolve, time));
\ No newline at end of file
diff --git a/src/lib/components/ConfigBackends.svelte b/src/lib/components/ConfigBackends.svelte
index 04688f5..852a955 100644
--- a/src/lib/components/ConfigBackends.svelte
+++ b/src/lib/components/ConfigBackends.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { backendsStore } from '../store/store';
-	import { testQueue, goTo } from '$lib/assets/js/utils';
+	import { updateTestQueue, goTo } from '$lib/assets/js/utils';
 	import { onMount } from 'svelte';
 
 	/**
@@ -21,7 +21,7 @@
 	 * @type {string[]}
 	 */
 	let selectedBackends;
-	const unsubscribeBackends = backendsStore.subscribe((value) => {
+	backendsStore.subscribe((value) => {
 		selectedBackends = value;
 	});
 
@@ -49,7 +49,7 @@
 		let invertBackends = allBackends.filter((item) => !selectedBackends.includes(item));
 		backendsStore.update((arr) => invertBackends);
 
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -70,7 +70,7 @@
 			backendsStore.update((arr) => [...arr, backend]);
 		}
 
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
diff --git a/src/lib/components/ConfigModels.svelte b/src/lib/components/ConfigModels.svelte
index ff9d384..21f9ab7 100644
--- a/src/lib/components/ConfigModels.svelte
+++ b/src/lib/components/ConfigModels.svelte
@@ -1,9 +1,8 @@
 <script>
-	import { testQueue, goTo } from '$lib/assets/js/utils';
+	import { updateTestQueue, goTo } from '$lib/assets/js/utils';
 	import { models } from '../config';
 	import { modelTypesStore, dataTypesStore, modelsStore } from '../store/store';
 	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
 
 	let filteredModels = models;
 	/**
@@ -18,7 +17,7 @@
 	 * @type {string[]}
 	 */
 	let selectedModelTypes;
-	const unsubscribeModelTypes = modelTypesStore.subscribe((value) => {
+	modelTypesStore.subscribe((value) => {
 		selectedModelTypes = value;
 	});
 
@@ -26,7 +25,7 @@
 	 * @type {string[]}
 	 */
 	let selectedDataTypes;
-	const unsubscribeDataTypes = dataTypesStore.subscribe((value) => {
+	dataTypesStore.subscribe((value) => {
 		selectedDataTypes = value;
 	});
 
@@ -34,7 +33,7 @@
 	 * @type {string[]}
 	 */
 	let selectedModels;
-	const unsubscribeModels = modelsStore.subscribe((value) => {
+	modelsStore.subscribe((value) => {
 		selectedModels = value;
 	});
 
@@ -123,7 +122,7 @@
 		const invertDataTypes = allDataTypes.filter((item) => !selectedDataTypes.includes(item));
 		dataTypesStore.update((arr) => invertDataTypes);
 		modelsStore.update(() => []);
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -143,7 +142,7 @@
 		} else {
 			dataTypesStore.update((arr) => [...arr, dataType]);
 		}
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -161,7 +160,7 @@
 		const invertModelTypes = allModelTypes.filter((item) => !selectedModelTypes.includes(item));
 		modelTypesStore.update((arr) => invertModelTypes);
 		modelsStore.update(() => []);
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -183,7 +182,7 @@
 			modelTypesStore.update((arr) => [...arr, modelType]);
 		}
 
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -201,7 +200,7 @@
 		const invertModels = allModels.filter((item) => !selectedModels.includes(item));
 		modelsStore.update((arr) => invertModels);
 
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -233,7 +232,7 @@
 			modelsStore.update((arr) => [...arr, model]);
 		}
 
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
diff --git a/src/lib/components/ConfigModelsManual.svelte b/src/lib/components/ConfigModelsManual.svelte
index d597216..1fcab57 100644
--- a/src/lib/components/ConfigModelsManual.svelte
+++ b/src/lib/components/ConfigModelsManual.svelte
@@ -1,14 +1,13 @@
 <script>
-	import { testQueue, goTo } from '$lib/assets/js/utils';
+	import { updateTestQueue, goTo } from '$lib/assets/js/utils';
 	import { modelTypesStore, dataTypesStore } from '../store/store';
 	import { onMount } from 'svelte';
-	import { page } from '$app/stores';
 
 	/**
 	 * @type {string[]}
 	 */
 	let selectedModelTypes;
-	const unsubscribeModelTypes = modelTypesStore.subscribe((value) => {
+	modelTypesStore.subscribe((value) => {
 		selectedModelTypes = value;
 	});
 
@@ -16,7 +15,7 @@
 	 * @type {string[]}
 	 */
 	let selectedDataTypes;
-	const unsubscribeDataTypes = dataTypesStore.subscribe((value) => {
+	dataTypesStore.subscribe((value) => {
 		selectedDataTypes = value;
 	});
 
@@ -61,7 +60,7 @@
 		 */
 		const invertDataTypes = allDataTypes.filter((item) => !selectedDataTypes.includes(item));
 		dataTypesStore.update((arr) => invertDataTypes);
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -80,7 +79,7 @@
 		} else {
 			dataTypesStore.update((arr) => [...arr, dataType]);
 		}
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -96,7 +95,7 @@
 		 */
 		const invertModelTypes = allModelTypes.filter((item) => !selectedModelTypes.includes(item));
 		modelTypesStore.update((arr) => invertModelTypes);
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
@@ -117,7 +116,7 @@
 			modelTypesStore.update((arr) => [...arr, modelType]);
 		}
 
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
diff --git a/src/lib/components/ConfigNumOfRuns.svelte b/src/lib/components/ConfigNumOfRuns.svelte
index fb9d81a..82379eb 100644
--- a/src/lib/components/ConfigNumOfRuns.svelte
+++ b/src/lib/components/ConfigNumOfRuns.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { numberOfRunsStore } from '../store/store';
-	import { testQueue, goTo } from '$lib/assets/js/utils';
+	import { updateTestQueue, goTo } from '$lib/assets/js/utils';
 	import { onMount } from 'svelte';
 
 	/**
@@ -14,7 +14,7 @@
 
 	const setNumberOfRuns = () => {
 		numberOfRunsStore.update(() => numOfRuns);
-		testQueue();
+		updateTestQueue();
 		goTo();
 	};
 
diff --git a/src/lib/components/Results.svelte b/src/lib/components/Results.svelte
new file mode 100644
index 0000000..c797e8a
--- /dev/null
+++ b/src/lib/components/Results.svelte
@@ -0,0 +1,12 @@
+<script>
+	import { resultsStore } from '../../lib/store/store';
+	/**
+	 * @type {string[]}
+	 */
+	let results;
+	resultsStore.subscribe((value) => {
+		results = value;
+	});
+</script>
+
+<div>{JSON.stringify(results)}</div>
diff --git a/src/lib/components/TestQueue.svelte b/src/lib/components/TestQueue.svelte
index 720e897..33d3fef 100644
--- a/src/lib/components/TestQueue.svelte
+++ b/src/lib/components/TestQueue.svelte
@@ -1,11 +1,5 @@
 <script>
 	import { testQueueStore } from '../../lib/store/store';
-	import {
-		stringToArray,
-		urlToStoreHome,
-		updateStore,
-		clearTestQueue
-	} from '../../lib/assets/js/utils';
 
 	/**
 	 * @type {string[]}
diff --git a/src/lib/store/store.js b/src/lib/store/store.js
index 9ad2455..4fb2d4d 100644
--- a/src/lib/store/store.js
+++ b/src/lib/store/store.js
@@ -7,4 +7,4 @@ export const modelTypesStore = persisted('modelTypesStore', []);
 export const modelsStore = persisted('modelsStore', []);
 export const autoStore = persisted('autoStore', false);
 export const testQueueStore = persisted('testQueueStore', []);
-export const resultStore = persisted('resultQueueStore', []);
\ No newline at end of file
+export const resultsStore = persisted('resultsStore', []);
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 636f90d..07073b5 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -2,73 +2,51 @@
 	import Environment from '$lib/components/Environment.svelte';
 	import Config from '$lib/components/Config.svelte';
 	import TestQueue from '$lib/components/TestQueue.svelte';
+	import Results from '$lib/components/Results.svelte';
 	import { beforeUpdate, onMount } from 'svelte';
 	import { base } from '$app/paths';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
-	import { autoStore, modelsStore } from '../lib/store/store';
-	import { urlToStoreHome, clearTestQueue, resetStore } from '../lib/assets/js/utils';
+	import { onDestroy } from 'svelte';
+	import { autoStore, testQueueStore } from '../lib/store/store';
+	import { urlToStoreHome } from '../lib/assets/js/utils';
 
 	/**
 	 * @type {string[]}
 	 */
-	let selectedModels;
-	modelsStore.subscribe((value) => {
-		selectedModels = value;
+	let testQueue;
+	testQueueStore.subscribe((value) => {
+		testQueue = value;
 	});
 
 	const runTests = () => {
 		autoStore.update(() => true);
-		let path = `${base}/onnx/${selectedModels[0]}`;
+		let path = `${base}/run/${testQueue[0].model}`;
 		goto(path);
 	};
 
 	beforeUpdate(() => {
-		console.log($page.url.searchParams);
 		urlToStoreHome($page.url.searchParams);
 	});
 
 	onMount(() => {});
+
+	onDestroy(() => {});
 </script>
 
 <div>
 	<Config />
 	<TestQueue />
 
-	<div class="temp">
-		{#if selectedModels[0]}
-			<button on:click|once={runTests}>Run Tests</button>
+	<div class="run">
+		{#if testQueue[0]}
+			<button on:click={runTests}>Run Tests</button>
 		{/if}
-		<button on:click|once={clearTestQueue}> Clear Test Queue </button>
-		<button on:click|once={resetStore}> Reset Store </button>
 	</div>
 
+	<Results />
 	<Environment />
 </div>
 
 <style>
-	.temp {
-		text-align: center;
-		margin-top: 1em;
-	}
-	button {
-		padding: 4px 16px;
-		background-color: var(--green);
-		border: 1px solid var(--green);
-		color: white;
-		display: inline-block;
-		margin: 10px;
-		cursor: pointer;
-		box-shadow:
-			var(--green) 0px 10px 20px -12px,
-			var(--green) 0px 18px 16px -18px;
-	}
-
-	button:hover {
-		background-color: var(--pink);
-		border: 1px solid var(--pink);
-		box-shadow:
-			var(--pink) 0px 6px 12px -8px,
-			var(--pink) 0px 12px 10px -12px;
-	}
 </style>
diff --git a/src/routes/onnx/mobilenet_v2/+page.svelte b/src/routes/onnx/mobilenet_v2/+page.svelte
deleted file mode 100644
index 3d64abc..0000000
--- a/src/routes/onnx/mobilenet_v2/+page.svelte
+++ /dev/null
@@ -1,95 +0,0 @@
-<script>
-	import { beforeUpdate } from 'svelte';
-	import Environment from '$lib/components/Environment.svelte';
-	import ConfigNumOfRuns from '$lib/components/ConfigNumOfRuns.svelte';
-	import ConfigBackends from '$lib/components/ConfigBackends.svelte';
-	import ConfigModelsManual from '$lib/components/ConfigModelsManual.svelte';
-	import {
-		autoStore,
-		numberOfRunsStore,
-		backendsStore,
-		modelTypesStore,
-		dataTypesStore
-	} from '../../../lib/store/store';
-
-	/**
-	 * @type {boolean}
-	 */
-	let auto;
-	autoStore.subscribe((value) => {
-		auto = value;
-	});
-
-	/**
-	 * @type {number}
-	 */
-	let selectedNumOfRuns;
-
-	numberOfRunsStore.subscribe((value) => {
-		selectedNumOfRuns = value;
-	});
-
-	/**
-	 * @type {string[]}
-	 */
-	let selectedBackends;
-	backendsStore.subscribe((value) => {
-		selectedBackends = value;
-	});
-
-	/**
-	 * @type {string[]}
-	 */
-	let selectedModelTypes;
-	modelTypesStore.subscribe((value) => {
-		selectedModelTypes = value;
-	});
-
-	/**
-	 * @type {string[]}
-	 */
-	let selectedDataTypes;
-	dataTypesStore.subscribe((value) => {
-		selectedDataTypes = value;
-	});
-
-	const runTest = () => {};
-
-	beforeUpdate(() => {});
-</script>
-
-<div>
-	{#if !auto}
-		<div class="config">
-			<ConfigBackends />
-			<ConfigModelsManual />
-			<ConfigNumOfRuns />
-		</div>
-	{/if}
-	<div class="temp">
-		<span class="tobe">MobileNetv2</span><br /><br />
-		To be tested when complete MobileNetv2<br /><br />
-		<br />Backends: {selectedBackends}
-		<br />Model Types: {selectedModelTypes}
-		<br />Data Types: {selectedDataTypes}
-		<br />Number of Runs: {selectedNumOfRuns}<br /><br />
-	</div>
-
-	<button on:click|once={runTest}> Run </button>
-
-	<Environment />
-</div>
-
-<style>
-	.temp {
-		text-align: center;
-		margin: 10px;
-	}
-	.tobe {
-		padding: 4px 16px;
-		background-color: var(--pink);
-		color: white;
-		display: inline-block;
-		margin: 10px;
-	}
-</style>
diff --git a/src/routes/run/mobilenet_v2/+page.svelte b/src/routes/run/mobilenet_v2/+page.svelte
new file mode 100644
index 0000000..b2eb175
--- /dev/null
+++ b/src/routes/run/mobilenet_v2/+page.svelte
@@ -0,0 +1,108 @@
+<script>
+	import { beforeUpdate, onMount } from 'svelte';
+	import Environment from '$lib/components/Environment.svelte';
+	import ConfigNumOfRuns from '$lib/components/ConfigNumOfRuns.svelte';
+	import ConfigBackends from '$lib/components/ConfigBackends.svelte';
+	import ConfigModelsManual from '$lib/components/ConfigModelsManual.svelte';
+	import Results from '$lib/components/Results.svelte';
+	import TestQueue from '$lib/components/TestQueue.svelte';
+	import { autoStore, modelsStore, testQueueStore } from '../../../lib/store/store';
+	import { addResult, filterTestQueue, sleep } from '../../../lib/assets/js/utils';
+	import { base } from '$app/paths';
+	import { goto } from '$app/navigation';
+
+	/**
+	 * @type {boolean}
+	 */
+	let auto;
+	autoStore.subscribe((value) => {
+		auto = value;
+	});
+
+	/**
+	 * @type {string[]}
+	 */
+	let selectedModels;
+	modelsStore.subscribe((value) => {
+		selectedModels = value;
+	});
+
+	/**
+	 * @type {string[]}
+	 */
+	let testQueue;
+	testQueueStore.subscribe((value) => {
+		testQueue = value;
+	});
+
+	/**
+	 * @type {string}
+	 */
+	let info;
+
+	const random = () => {
+		return Math.floor(Math.random() * 2);
+	};
+
+	const runTests = async () => {
+		if (testQueue[0] && location.pathname.replace('/run/', '') === testQueue[0].model) {
+			let t0 = testQueue[0];
+			let r = {
+				id: t0.id,
+				model: t0.model,
+				modeltype: t0.modeltype,
+				datatype: t0.datatype,
+				backend: t0.backend,
+				inferencetime: [random(), random(), random(), random(), random()]
+			};
+			filterTestQueue(t0.id);
+			addResult(r);
+			runTests();
+		} else if (testQueue[0]) {
+			console.log(testQueue[0].model);
+			let path = `${base}/run/${testQueue[0].model}`;
+			info = `Now go to next page to test ${testQueue[0].model}`;
+			await sleep(5000);
+			goto(path);
+		} else {
+			info = `Test completed`;
+			let path = `${base}/`;
+			goto(path);
+		}
+	};
+
+	beforeUpdate(() => {});
+
+	onMount(() => {
+		if (auto) {
+			runTests();
+		}
+	});
+</script>
+
+<div>
+	{#if !auto}
+		<div class="config">
+			<ConfigBackends />
+			<ConfigModelsManual />
+			<ConfigNumOfRuns />
+		</div>
+	{/if}
+
+	<TestQueue />
+
+	<div class="run">
+		{#if selectedModels[0] && !auto}
+			<button on:click={runTests}>Run Tests</button>
+		{/if}
+	</div>
+
+	<div class="info">
+		{info}
+	</div>
+	<Results />
+	<Environment />
+</div>
+
+<style>
+</style>
diff --git a/src/routes/run/resnet50_v1/+page.svelte b/src/routes/run/resnet50_v1/+page.svelte
new file mode 100644
index 0000000..b2eb175
--- /dev/null
+++ b/src/routes/run/resnet50_v1/+page.svelte
@@ -0,0 +1,108 @@
+<script>
+	import { beforeUpdate, onMount } from 'svelte';
+	import Environment from '$lib/components/Environment.svelte';
+	import ConfigNumOfRuns from '$lib/components/ConfigNumOfRuns.svelte';
+	import ConfigBackends from '$lib/components/ConfigBackends.svelte';
+	import ConfigModelsManual from '$lib/components/ConfigModelsManual.svelte';
+	import Results from '$lib/components/Results.svelte';
+	import TestQueue from '$lib/components/TestQueue.svelte';
+	import { autoStore, modelsStore, testQueueStore } from '../../../lib/store/store';
+	import { addResult, filterTestQueue, sleep } from '../../../lib/assets/js/utils';
+	import { base } from '$app/paths';
+	import { goto } from '$app/navigation';
+
+	/**
+	 * @type {boolean}
+	 */
+	let auto;
+	autoStore.subscribe((value) => {
+		auto = value;
+	});
+
+	/**
+	 * @type {string[]}
+	 */
+	let selectedModels;
+	modelsStore.subscribe((value) => {
+		selectedModels = value;
+	});
+
+	/**
+	 * @type {string[]}
+	 */
+	let testQueue;
+	testQueueStore.subscribe((value) => {
+		testQueue = value;
+	});
+
+	/**
+	 * @type {string}
+	 */
+	let info;
+
+	const random = () => {
+		return Math.floor(Math.random() * 2);
+	};
+
+	const runTests = async () => {
+		if (testQueue[0] && location.pathname.replace('/run/', '') === testQueue[0].model) {
+			let t0 = testQueue[0];
+			let r = {
+				id: t0.id,
+				model: t0.model,
+				modeltype: t0.modeltype,
+				datatype: t0.datatype,
+				backend: t0.backend,
+				inferencetime: [random(), random(), random(), random(), random()]
+			};
+			filterTestQueue(t0.id);
+			addResult(r);
+			runTests();
+		} else if (testQueue[0]) {
+			console.log(testQueue[0].model);
+			let path = `${base}/run/${testQueue[0].model}`;
+			info = `Now go to next page to test ${testQueue[0].model}`;
+			await sleep(5000);
+			goto(path);
+		} else {
+			info = `Test completed`;
+			let path = `${base}/`;
+			goto(path);
+		}
+	};
+
+	beforeUpdate(() => {});
+
+	onMount(() => {
+		if (auto) {
+			runTests();
+		}
+	});
+</script>
+
+<div>
+	{#if !auto}
+		<div class="config">
+			<ConfigBackends />
+			<ConfigModelsManual />
+			<ConfigNumOfRuns />
+		</div>
+	{/if}
+
+	<TestQueue />
+
+	<div class="run">
+		{#if selectedModels[0] && !auto}
+			<button on:click={runTests}>Run Tests</button>
+		{/if}
+	</div>
+
+	<div class="info">
+		{info}
+	</div>
+	<Results />
+	<Environment />
+</div>
+
+<style>
+</style>