sylv/fyp
1
0
Fork 0
Code Issues 29 Pull Requests Packages Projects 1 Releases Wiki Activity

runner-go (#102)

Browse Source 
Reviewed-on: andr3/fyp#102
Co-authored-by: Andre Henriques <andr3h3nriqu3s@gmail.com>
Co-committed-by: Andre Henriques <andr3h3nriqu3s@gmail.com>
This commit was merged in pull request #102.
This commit is contained in:
Andre Henriques
2024-05-10 02:13:02 +01:00
committed by andr3
parent edd1e4c123
commit 0ac6ac8dce
44 changed files with 6609 additions and 511 deletions
Download Patch File Download Diff File Expand all files Collapse all files

156
webpage/src/routes/models/edit/RunModel.svelte
View File

@@ -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>