chore: improve the result in classification closes #34
This commit is contained in:
@@ -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();
|
||||
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<Task> = $state(new Promise(() => {}));
|
||||
let run = $state(false);
|
||||
|
||||
let _result: Promise<Result | undefined> = $state(new Promise(() => {}));
|
||||
let run = $state(false);
|
||||
let last_task: string | undefined = $state();
|
||||
let last_task: string | undefined = $state();
|
||||
let last_task_timeout: number | null = null;
|
||||
|
||||
let messages: MessageSimple;
|
||||
let messages: MessageSimple;
|
||||
|
||||
async function submit() {
|
||||
if (!file) return;
|
||||
messages.clear();
|
||||
async function reloadLastTimeout() {
|
||||
if (!last_task) {
|
||||
return;
|
||||
}
|
||||
last_task_timeout = null;
|
||||
|
||||
let form = new FormData();
|
||||
form.append("json_data", JSON.stringify({id: model.id}));
|
||||
form.append("file", file, "file");
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
run = true;
|
||||
|
||||
try {
|
||||
const r = await postFormData('tasks/start/image', form);
|
||||
last_task = r.id
|
||||
file = undefined;
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
messages.display(await e.json());
|
||||
} else {
|
||||
messages.display("Could not run the model");
|
||||
}
|
||||
}
|
||||
async function submit() {
|
||||
if (!file) return;
|
||||
messages.clear();
|
||||
|
||||
dispatch('upload');
|
||||
}
|
||||
let form = new FormData();
|
||||
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;
|
||||
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');
|
||||
}
|
||||
}
|
||||
|
||||
dispatch('upload');
|
||||
}
|
||||
|
||||
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>
|
||||
<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 {last_task}
|
||||
</h1>
|
||||
{:then result}
|
||||
{#if !result}
|
||||
<div class="result">
|
||||
<h1>
|
||||
The class was not found
|
||||
</h1>
|
||||
</div>
|
||||
{:else}
|
||||
<div>
|
||||
<h1>
|
||||
Result
|
||||
</h1>
|
||||
The image was classified as {result.class} with confidence: {result.confidence}
|
||||
</div>
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
</form>
|
||||
<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>
|
||||
<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>
|
||||
{/if}
|
||||
{/await}
|
||||
{/if}
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user