feat: add tasks closes #74
This commit is contained in:
@@ -35,12 +35,14 @@
|
||||
|
||||
import ModelData from './ModelData.svelte';
|
||||
import DeleteZip from './DeleteZip.svelte';
|
||||
import RunModel from './RunModel.svelte';
|
||||
|
||||
import Tabs from 'src/lib/Tabs.svelte';
|
||||
import TasksDataPage from './TasksDataPage.svelte';
|
||||
import ModelDataPage from './ModelDataPage.svelte';
|
||||
|
||||
import 'src/styles/forms.css';
|
||||
import RunModel from './RunModel.svelte';
|
||||
import Tabs from 'src/lib/Tabs.svelte';
|
||||
|
||||
let model: Promise<Model> = $state(new Promise(() => {}));
|
||||
let _model: Model | undefined = $state(undefined);
|
||||
let definitions: Promise<Definitions[]> = $state(new Promise(() => {}));
|
||||
@@ -148,9 +150,19 @@
|
||||
Model Data
|
||||
</button>
|
||||
{/if}
|
||||
{#if _model && [5, 6, 7].includes(_model.status)}
|
||||
<button
|
||||
class="tab"
|
||||
on:click|preventDefault={setActive('tasks')}
|
||||
class:selected={isActive('tasks')}
|
||||
>
|
||||
Tasks
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
{#if _model}
|
||||
<ModelDataPage model={_model} on:reload={getModel} active={isActive('model-data')} />
|
||||
<TasksDataPage model={_model} active={isActive('tasks')} />
|
||||
{/if}
|
||||
<div class="content" class:selected={isActive('model')}>
|
||||
{#await model}
|
||||
|
||||
@@ -3,11 +3,14 @@
|
||||
import type { Model } from "./+page.svelte";
|
||||
import FileUpload from "src/lib/FileUpload.svelte";
|
||||
import MessageSimple from "src/lib/MessageSimple.svelte";
|
||||
import { createEventDispatcher } from "svelte";
|
||||
|
||||
let {model} = $props<{model: Model}>();
|
||||
|
||||
let file: File | undefined = $state();
|
||||
|
||||
const dispatch = createEventDispatcher<{ upload: void }>();
|
||||
|
||||
type Result = {
|
||||
class: string,
|
||||
confidence: number,
|
||||
@@ -15,23 +18,24 @@
|
||||
|
||||
let _result: Promise<Result | undefined> = $state(new Promise(() => {}));
|
||||
let run = $state(false);
|
||||
let last_task: string | undefined = $state();
|
||||
|
||||
let messages: MessageSimple;
|
||||
|
||||
async function submit() {
|
||||
console.log("here", file);
|
||||
if (!file) return;
|
||||
messages.clear();
|
||||
|
||||
let form = new FormData();
|
||||
form.append("id", model.id);
|
||||
form.append("json_data", JSON.stringify({id: model.id}));
|
||||
form.append("file", file, "file");
|
||||
|
||||
run = true;
|
||||
|
||||
|
||||
try {
|
||||
_result = await postFormData('models/run', form);
|
||||
console.log(await _result);
|
||||
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());
|
||||
@@ -39,7 +43,8 @@
|
||||
messages.display("Could not run the model");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
dispatch('upload');
|
||||
}
|
||||
</script>
|
||||
<form on:submit|preventDefault={submit}>
|
||||
@@ -66,7 +71,11 @@
|
||||
Run
|
||||
</button>
|
||||
{#if run}
|
||||
{#await _result then result}
|
||||
{#await _result}
|
||||
<h1>
|
||||
Processing Image {last_task}
|
||||
</h1>
|
||||
{:then result}
|
||||
{#if !result}
|
||||
<div class="result">
|
||||
<h1>
|
||||
|
||||
16
webpage/src/routes/models/edit/TasksDataPage.svelte
Normal file
16
webpage/src/routes/models/edit/TasksDataPage.svelte
Normal file
@@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { post } from "src/lib/requests.svelte";
|
||||
import type { Model } from "src/routes/models/edit/+page.svelte";
|
||||
import RunModel from "./RunModel.svelte";
|
||||
import TasksTable from "./TasksTable.svelte";
|
||||
|
||||
const { active, model } = $props<{ active?: boolean, model: Model }>();
|
||||
|
||||
let table: TasksTable;
|
||||
</script>
|
||||
|
||||
|
||||
<div class="content" class:selected={active}>
|
||||
<RunModel model={model} on:upload={() => table.getList()} />
|
||||
<TasksTable model={model} bind:this={table} />
|
||||
</div>
|
||||
185
webpage/src/routes/models/edit/TasksTable.svelte
Normal file
185
webpage/src/routes/models/edit/TasksTable.svelte
Normal file
@@ -0,0 +1,185 @@
|
||||
<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;
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import { post } from 'src/lib/requests.svelte';
|
||||
import type { Model } from './+page.svelte';
|
||||
|
||||
let { model } = $props<{ model: Model, uploadCounter?: number }>();
|
||||
|
||||
let page = $state(0);
|
||||
let showNext = $state(false);
|
||||
let task_list = $state<Task[]>([]);
|
||||
|
||||
export async function getList() {
|
||||
try {
|
||||
const res = await post('tasks/list', {
|
||||
id: model.id,
|
||||
page: page,
|
||||
});
|
||||
showNext = res.show_next;
|
||||
task_list = res.task_list;
|
||||
} catch (e) {
|
||||
console.error('TODO notify user', e);
|
||||
}
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
if (model) {
|
||||
getList()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<h2>Tasks</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> Task type </th>
|
||||
<th>
|
||||
<!-- Img -->
|
||||
</th>
|
||||
<th> User Confirmed </th>
|
||||
<th> Result </th>
|
||||
<th> Status </th>
|
||||
<th> Status Message </th>
|
||||
<th> Created </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each task_list as task}
|
||||
<tr>
|
||||
<td>
|
||||
{#if task.type == 1}
|
||||
Image Run
|
||||
{:else}
|
||||
{task.type}
|
||||
{/if}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{#if task.type == 1}
|
||||
<img
|
||||
alt=""
|
||||
src="/api/savedData/{model.id}/tasks/{task.id}.{model.format}"
|
||||
height="30px"
|
||||
width="30px"
|
||||
style="object-fit: contain;"
|
||||
/>
|
||||
{:else}
|
||||
TODO Show more information {task.status}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if task.type == 1}
|
||||
{#if task.status == 4}
|
||||
{#if task.user_confirmed == 0}
|
||||
User has not agreed to the result of this task
|
||||
{:else if task.user_confirmed == -1}
|
||||
User has disagred with the result of this task
|
||||
{:else if task.user_confirmed == 1}
|
||||
User has aggred with the result of this task
|
||||
{:else}
|
||||
TODO {task.user_confirmed}
|
||||
{/if}
|
||||
{:else}
|
||||
-
|
||||
{/if}
|
||||
{:else}
|
||||
TODO Handle {task.type}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{#if task.status == 4}
|
||||
{#if task.type == 1}
|
||||
{@const temp = JSON.parse(task.result)}
|
||||
{temp.class}({temp.confidence * 100}%)
|
||||
{:else}
|
||||
{task.result}
|
||||
{/if}
|
||||
{/if}
|
||||
</td>
|
||||
<td>
|
||||
{task.status}
|
||||
</td>
|
||||
<td>
|
||||
{task.status_message}
|
||||
</td>
|
||||
<td>
|
||||
{(new Date(task.created)).toLocaleString()}
|
||||
</td>
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-center align-center">
|
||||
<div class="grow-1 flex justify-end align-center">
|
||||
{#if page > 0}
|
||||
<button on:click={() => (page -= 1)}> Prev </button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px;">
|
||||
{page}
|
||||
</div>
|
||||
|
||||
<div class="grow-1 flex justify-start align-center">
|
||||
{#if showNext}
|
||||
<button on:click={() => (page += 1)}> Next </button>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.buttons {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
& > button {
|
||||
margin: 3px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
box-shadow: 0 2px 8px 1px #66666622;
|
||||
border-radius: 10px;
|
||||
border-collapse: collapse;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
table thead {
|
||||
background: #60606022;
|
||||
}
|
||||
|
||||
table tr td,
|
||||
table tr th {
|
||||
border-left: 1px solid #22222244;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
table tr td:first-child,
|
||||
table tr th:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
table tr td button,
|
||||
table tr td .button {
|
||||
padding: 5px 10px;
|
||||
box-shadow: 0 2px 5px 1px #66666655;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user