chore: moved model page to svelte
This commit is contained in:
@@ -1,25 +1,25 @@
|
||||
<script lang="ts" context="module">
|
||||
export type Model = {
|
||||
id: string;
|
||||
name: string;
|
||||
color_mode: string;
|
||||
width: number;
|
||||
height: number;
|
||||
status: number;
|
||||
}
|
||||
export type Model = {
|
||||
id: string;
|
||||
name: string;
|
||||
color_mode: string;
|
||||
width: number;
|
||||
height: number;
|
||||
status: number;
|
||||
};
|
||||
|
||||
export type Layer = {
|
||||
layer_type: number;
|
||||
shape: string;
|
||||
}
|
||||
export type Layer = {
|
||||
layer_type: number;
|
||||
shape: string;
|
||||
};
|
||||
|
||||
export type Definitions = {
|
||||
epoch: number;
|
||||
epoch_progress: number;
|
||||
status: number;
|
||||
accuracy: number;
|
||||
layers?: Layer[];
|
||||
}
|
||||
export type Definitions = {
|
||||
epoch: number;
|
||||
epoch_progress: number;
|
||||
status: number;
|
||||
accuracy: number;
|
||||
layers?: Layer[];
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -28,12 +28,14 @@
|
||||
import BaseModelInfo from "./BaseModelInfo.svelte";
|
||||
import DeleteModel from "./DeleteModel.svelte";
|
||||
import { goto } from "$app/navigation";
|
||||
import { get } from "src/lib/requests.svelte";
|
||||
import { get, rdelete } from "src/lib/requests.svelte";
|
||||
import MessageSimple from "$lib/MessageSimple.svelte"
|
||||
|
||||
import 'src/styles/forms.css'
|
||||
import ModelData from "./ModelData.svelte";
|
||||
import DeleteZip from "./DeleteZip.svelte";
|
||||
|
||||
import 'src/styles/forms.css'
|
||||
import RunModel from "./RunModel.svelte";
|
||||
let model: Promise<Model> = $state(new Promise(() => {}));
|
||||
let definitions: Promise<Definitions[]> = $state(new Promise(() => {}));
|
||||
|
||||
@@ -43,10 +45,18 @@
|
||||
try {
|
||||
let temp_model: Model = await get(`models/edit?id=${id}`);
|
||||
|
||||
console.log(temp_model)
|
||||
|
||||
if (temp_model.status == 3) {
|
||||
setTimeout(getModel, 2000);
|
||||
}
|
||||
|
||||
if (temp_model.status == 4) {
|
||||
setTimeout(getModel, 5000);
|
||||
|
||||
definitions = await get(`models/edit/definitions?id=${id}`);
|
||||
}
|
||||
|
||||
model = Promise.resolve(temp_model);
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
@@ -69,457 +79,253 @@
|
||||
getModel();
|
||||
});
|
||||
|
||||
let resetMessages: MessageSimple;
|
||||
|
||||
async function resetModel() {
|
||||
throw new Error("TODO");
|
||||
resetMessages.display("");
|
||||
|
||||
let _model = await model;
|
||||
|
||||
try {
|
||||
await rdelete('models/train/reset', {
|
||||
"id": _model.id
|
||||
});
|
||||
|
||||
getModel();
|
||||
} catch (e) {
|
||||
if (e instanceof Response) {
|
||||
resetMessages.display(await e.json())
|
||||
} else {
|
||||
resetMessages.display("Could not reset model!")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Auto reload after 2s when model.status 3,4
|
||||
// Auto reload after 2s when model.status 3,4
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
{#await model}
|
||||
<title>
|
||||
Model
|
||||
</title>
|
||||
{:then m}
|
||||
{#if m}
|
||||
<title>
|
||||
Model: {m.name}
|
||||
</title>
|
||||
{:else}
|
||||
<title>
|
||||
Model
|
||||
</title>
|
||||
{/if}
|
||||
{/await}
|
||||
{#await model}
|
||||
<title>Model</title>
|
||||
{:then m}
|
||||
{#if m}
|
||||
<title>
|
||||
Model: {m.name}
|
||||
</title>
|
||||
{:else}
|
||||
<title>Model</title>
|
||||
{/if}
|
||||
{/await}
|
||||
</svelte:head>
|
||||
|
||||
<!-- {{/* Is called from a diffrent endpoint so that it does not matter where this is from :) which means that . can mean what ever I want */}}
|
||||
{{ define "data-model-create-class-table-table" }}
|
||||
<div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
File Path
|
||||
</th>
|
||||
<th>
|
||||
Mode
|
||||
</th>
|
||||
<th>
|
||||
<!-- Img -- >
|
||||
</th>
|
||||
<th>
|
||||
<!-- Status -- >
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{range .List}}
|
||||
<tr>
|
||||
<td>
|
||||
{{ if eq .FilePath "id://" }}
|
||||
Managed
|
||||
{{ else }}
|
||||
{{.FilePath}}
|
||||
{{ end }}
|
||||
</td>
|
||||
<td>
|
||||
{{ if (eq .Mode 2) }}
|
||||
Testing
|
||||
{{ else }}
|
||||
Training
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ if startsWith .FilePath "id://" }}
|
||||
<img src="/savedData/{{ $.Model.Id }}/data/{{ .Id }}.{{ $.Model.Format }}" height="30px" width="30px" style="object-fit: contain;" />
|
||||
{{ else }}
|
||||
TODO
|
||||
img {{ .FilePath }}
|
||||
{{ end }}
|
||||
</td>
|
||||
<td class="text-center">
|
||||
{{ if eq .Status 1 }}
|
||||
<span class="bi bi-check-circle-fill" style="color: green"></span>
|
||||
{{ else }}
|
||||
<span class="bi bi-exclamation-triangle-fill" style="color: red"></span>
|
||||
{{ end }}
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="flex justify-center align-center">
|
||||
<div class="grow-1 flex justify-end align-center ">
|
||||
{{ if gt .Page 0 }}
|
||||
<button
|
||||
hx-get="/models/data/list?id={{ .Id }}&page={{ add .Page -1 }}"
|
||||
hx-target=".content[data-tab='{{ .Name }}']"
|
||||
hx-swap="innerHTML"
|
||||
hx-headers='{"REQUEST-TYPE": "html"}'
|
||||
data-tab="{{ .Name }}">
|
||||
Prev
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
|
||||
<div style="padding: 10px;">
|
||||
{{ .Page }}
|
||||
</div>
|
||||
|
||||
<div class="grow-1 flex justify-start align-center">
|
||||
{{ if .ShowNext }}
|
||||
<button
|
||||
hx-get="/models/data/list?id={{ .Id }}&page={{ add .Page 1 }}"
|
||||
hx-target=".content[data-tab='{{ .Name }}']"
|
||||
hx-swap="innerHTML"
|
||||
hx-headers='{"REQUEST-TYPE": "html"}'
|
||||
data-tab="{{ .Name }}">
|
||||
Next
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{{ end }}
|
||||
|
||||
-->
|
||||
|
||||
<!--
|
||||
{{ define "data-model-create-class-table" }}
|
||||
{{ if eq (len .Classes) 0 }}
|
||||
TODO CREATE TABLE
|
||||
{{else}}
|
||||
<div class="tabs-header">
|
||||
{{/* Handle the case where there are to many buttons */}}
|
||||
<div class="header">
|
||||
{{ range .Classes }}
|
||||
{{/* TODO Auto Load 1st */}}
|
||||
<button
|
||||
hx-get="/models/data/list?id={{ .Id }}"
|
||||
hx-target=".content[data-tab='{{ .Name }}']"
|
||||
hx-swap="innerHTML"
|
||||
hx-headers='{"REQUEST-TYPE": "html"}'
|
||||
hx-trigger="click"
|
||||
class="tab"
|
||||
data-tab="{{ .Name }}">
|
||||
{{ .Name }}
|
||||
</button>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ range $i, $a := .Classes }}
|
||||
{{ if eq $i 0}}
|
||||
<div
|
||||
hx-get="/models/data/list?id={{ .Id }}"
|
||||
hx-target=".content[data-tab='{{ $a.Name }}']"
|
||||
hx-swap="innerHTML"
|
||||
hx-headers='{"REQUEST-TYPE": "html"}'
|
||||
hx-trigger="load"
|
||||
class="content"
|
||||
data-tab="{{ $a.Name }}">
|
||||
</div>
|
||||
{{ else }}
|
||||
<div
|
||||
class="content"
|
||||
data-tab="{{ $a.Name }}" >
|
||||
</div>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{end}}
|
||||
{{ end }}
|
||||
-->
|
||||
|
||||
<!--
|
||||
{{ define "train-model-card" }}
|
||||
<form hx-post="/models/train" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML" {{ if .Error }} class="submitted" {{end}} >
|
||||
{{ if .HasData }}
|
||||
{{ if .NumberOfInvalidImages }}
|
||||
{{ if gt .NumberOfInvalidImages 0 }}
|
||||
<p class="danger">
|
||||
There are images {{ .NumberOfInvalidImages }} that were loaded that do not have the correct format. These images will be delete when the model trains.
|
||||
</p>
|
||||
<input type="hidden" value="{{ .NumberOfInvalidImages }}" name="id" />
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
{{ if .ErrorMessage }}
|
||||
<p class="danger">
|
||||
{{ .ErrorMessage }}
|
||||
</p>
|
||||
{{ end }}
|
||||
{{/* TODO expading mode */}}
|
||||
<input type="hidden" value="{{ .Model.Id }}" name="id" />
|
||||
<fieldset>
|
||||
<legend>
|
||||
Model Type
|
||||
</legend>
|
||||
<div class="input-radial">
|
||||
<input id="model_type_simple" value="simple" name="model_type" type="radio" checked />
|
||||
<label for="model_type_simple">Simple</label><br/>
|
||||
<input id="model_type_expandable" value="expandable" name="model_type" type="radio" />
|
||||
<label for="model_type_expandable">Expandable</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
{{/* TODO allow more models to be created */}}
|
||||
<fieldset>
|
||||
<label for="number_of_models">Number of Models</label>
|
||||
<input id="number_of_models" type="number" name="number_of_models" value="1" />
|
||||
</fieldset>
|
||||
{{/* TODO to Change the acc */}}
|
||||
<fieldset>
|
||||
<label for="accuracy">Target accuracy</label>
|
||||
<input id="accuracy" type="number" name="accuracy" value="95" />
|
||||
</fieldset>
|
||||
{{/* TODO allow to chose the base of the model */}}
|
||||
{{/* TODO allow to change the shape of the model */}}
|
||||
<button>
|
||||
Train
|
||||
</button>
|
||||
{{ else }}
|
||||
<h2>
|
||||
To train the model please provide data to the model first
|
||||
</h2>
|
||||
{{ end }}
|
||||
</form>
|
||||
{{ end }}
|
||||
|
||||
-->
|
||||
|
||||
<!--
|
||||
{{ define "run-model-card" }}
|
||||
<form hx-headers='{"REQUEST-TYPE": "html"}' enctype="multipart/form-data" hx-post="/models/run" hx-swap="outerHTML">
|
||||
<input type="hidden" name="id" value={{.Model.Id}} />
|
||||
<fieldset class="file-upload" >
|
||||
<label for="file">Image</label>
|
||||
<div class="form-msg">
|
||||
Run image through them model and get the result
|
||||
</div>
|
||||
<div class="icon-holder">
|
||||
<button class="icon">
|
||||
<img replace="icon" src="/imgs/upload-icon.png" />
|
||||
<span replace="File Selected">
|
||||
Image File
|
||||
</span>
|
||||
</button>
|
||||
{{ if .ImageError }}
|
||||
<span class="form-msg error">
|
||||
The provided image was not valid for this model
|
||||
</span>
|
||||
{{ end }}
|
||||
<input id="file" name="file" type="file" required accept="image/png" />
|
||||
</div>
|
||||
</fieldset>
|
||||
<button>
|
||||
Run
|
||||
</button>
|
||||
{{ if .NotFound }}
|
||||
<div class="result">
|
||||
<h1>
|
||||
The class was not found
|
||||
</h1>
|
||||
</div>
|
||||
{{ else if .Result }}
|
||||
<div>
|
||||
<h1>
|
||||
Result
|
||||
</h1>
|
||||
The image was classified as {{.Result}}
|
||||
</div>
|
||||
{{ end }}
|
||||
</form>
|
||||
{{ end }}
|
||||
|
||||
-->
|
||||
|
||||
<main>
|
||||
{#await model}
|
||||
Loading
|
||||
{:then m}
|
||||
{#if m.status == 1}
|
||||
<div>
|
||||
<h1 class="text-center">
|
||||
{ m.name }
|
||||
</h1>
|
||||
<!-- TODO add cool animation -->
|
||||
<h2 class="text-center">
|
||||
Preparing the model
|
||||
</h2>
|
||||
</div>
|
||||
{:else if m.status == -1}
|
||||
<div>
|
||||
<h1 class="text-center">
|
||||
{m.name}
|
||||
</h1>
|
||||
<!-- TODO improve message -->
|
||||
<h2 class="text-center">
|
||||
Failed to prepare model
|
||||
</h2>
|
||||
{#await model}
|
||||
Loading
|
||||
{:then m}
|
||||
{#if m.status == 1}
|
||||
<div>
|
||||
<h1 class="text-center">
|
||||
{m.name}
|
||||
</h1>
|
||||
<!-- TODO add cool animation -->
|
||||
<h2 class="text-center">Preparing the model</h2>
|
||||
</div>
|
||||
{:else if m.status == -1}
|
||||
<div>
|
||||
<h1 class="text-center">
|
||||
{m.name}
|
||||
</h1>
|
||||
<!-- TODO improve message -->
|
||||
<h2 class="text-center">Failed to prepare model</h2>
|
||||
|
||||
<div>
|
||||
TODO button delete
|
||||
</div>
|
||||
|
||||
<!--form hx-delete="/models/delete">
|
||||
<div>TODO button delete</div>
|
||||
|
||||
<!--form hx-delete="/models/delete">
|
||||
<input type="hidden" name="id" value="{{ .Model.Id }}" />
|
||||
<button class="danger">
|
||||
Delete
|
||||
</button>
|
||||
</form-->
|
||||
</div>
|
||||
<!-- PRE TRAINING STATUS -->
|
||||
{:else if m.status == 2 }
|
||||
<BaseModelInfo model={m} />
|
||||
<ModelData model={m} on:reload={getModel} />
|
||||
<!-- {{ template "train-model-card" . }} -->
|
||||
<DeleteModel model={m} />
|
||||
{:else if m.status == -2 }
|
||||
<BaseModelInfo model={m} />
|
||||
<DeleteZip model={m} on:reload={getModel} />
|
||||
<DeleteModel model={m} />
|
||||
{:else if m.status == 3 }
|
||||
<BaseModelInfo model={m} />
|
||||
<div class="card">
|
||||
<!-- TODO improve this -->
|
||||
Processing zip file...
|
||||
</div>
|
||||
{:else if m.status == -3 || m.status == -4}
|
||||
<BaseModelInfo model={m} />
|
||||
<form on:submit={resetModel}>
|
||||
Failed Prepare for training.<br/>
|
||||
<div class="spacer" ></div>
|
||||
<button class="danger">
|
||||
Try Again
|
||||
<button>
|
||||
</form>
|
||||
<DeleteModel model={m} />
|
||||
{:else if m.status == 4}
|
||||
<BaseModelInfo model={m} />
|
||||
<!-- TODO request /models/edit?id={m.id} -->
|
||||
<div class="card">
|
||||
<!-- TODO improve this -->
|
||||
Training the model...<br/>
|
||||
<!-- TODO Add progress status on definitions -->
|
||||
{#await definitions}
|
||||
Loading
|
||||
{:then defs}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Done Progress
|
||||
</th>
|
||||
<th>
|
||||
Training Round Progress
|
||||
</th>
|
||||
<th>
|
||||
Accuracy
|
||||
</th>
|
||||
<th>
|
||||
Status
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each defs as def}
|
||||
<tr>
|
||||
<td>
|
||||
{def.epoch}
|
||||
</td>
|
||||
<td>
|
||||
{def.epoch_progress}/20
|
||||
</td>
|
||||
<td>
|
||||
{def.accuracy}%
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
{#if def.status == 2}
|
||||
<span class="bi bi-book" style="color: green;"></span>
|
||||
{:else if [3,6,-3].includes(def.status) }
|
||||
<span class="bi bi-book-half" style="color: {{
|
||||
'3': 'green',
|
||||
'-3': 'red',
|
||||
'6': 'orange',
|
||||
}[String(def.status)]};"></span>
|
||||
{:else}
|
||||
{def.status}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{#if def.status == 3 && def.layers}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<svg viewBox="0 200 1000 600">
|
||||
{#each def.layers as layer, i}
|
||||
{@const sep_mod = def.layers.length > 8 ? Math.max(10, 100 - (def.layers.length - 8) * 10) : 100}
|
||||
{#if layer.layer_type == 1}
|
||||
<polygon
|
||||
points="50,450 200,250 200,550 50,750"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="green"></polygon>
|
||||
{:else if layer.layer_type == 4}
|
||||
<polygon
|
||||
points="{50 + (i * sep_mod)},450 {200 + (i * sep_mod)},250 {200 + (i * sep_mod)},550 {50 + (i * sep_mod)},750"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="orange">
|
||||
</polygon>
|
||||
{:else if layer.layer_type == 3}
|
||||
<polygon
|
||||
points="{50 + (i * sep_mod)},450 {200 + (i * sep_mod)},250 {200 + (i * sep_mod)}},550 {50 + (i * sep_mod)},750"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="red">
|
||||
</polygon>
|
||||
{:else if layer.layer_type == 3}
|
||||
<polygon
|
||||
points="{50 + (i * sep_mod)},550 {200 + (i * sep_mod)},350 {200 + (i * sep_mod)},450 {50 + (i * sep_mod)},650"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="blue">
|
||||
</polygon>
|
||||
{:else}
|
||||
<div>
|
||||
{layer.layer_type}
|
||||
{layer.shape}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/await}
|
||||
{{/* TODO Add ability to stop training */}}
|
||||
</div>
|
||||
{:else if m.status == 5}
|
||||
<BaseModelInfo model={m} />
|
||||
TODO run model
|
||||
<!--
|
||||
<form hx-delete="/models/train/reset" hx-headers='{"REQUEST-TYPE": "html"}' hx-swap="outerHTML">
|
||||
Failed Prepare for training.<br/>
|
||||
<div class="spacer" ></div>
|
||||
<input type="hidden" name="id" value="{{ .Model.Id }}" />
|
||||
<button class="danger">
|
||||
Try Again
|
||||
</button>
|
||||
</form>
|
||||
-->
|
||||
<DeleteModel model={m} />
|
||||
{:else}
|
||||
<h1>
|
||||
Unknown Status of the model.
|
||||
</h1>
|
||||
{/if}
|
||||
{/await}
|
||||
</div>
|
||||
<!-- PRE TRAINING STATUS -->
|
||||
{:else if m.status == 2}
|
||||
<BaseModelInfo model={m} />
|
||||
<ModelData model={m} on:reload={getModel} />
|
||||
<!-- {{ template "train-model-card" . }} -->
|
||||
<DeleteModel model={m} />
|
||||
{:else if m.status == -2}
|
||||
<BaseModelInfo model={m} />
|
||||
<DeleteZip model={m} on:reload={getModel} />
|
||||
<DeleteModel model={m} />
|
||||
{:else if m.status == 3}
|
||||
<BaseModelInfo model={m} />
|
||||
<div class="card">
|
||||
<!-- TODO improve this -->
|
||||
Processing zip file...
|
||||
</div>
|
||||
{:else if m.status == -3 || m.status == -4}
|
||||
<BaseModelInfo model={m} />
|
||||
<form on:submit={resetModel}>
|
||||
Failed Prepare for training.<br />
|
||||
<div class="spacer"></div>
|
||||
<MessageSimple bind:this={resetMessages} />
|
||||
<button class="danger"> Try Again </button>
|
||||
</form>
|
||||
<DeleteModel model={m} />
|
||||
{:else if m.status == 4}
|
||||
<BaseModelInfo model={m} />
|
||||
<!-- TODO request /models/edit?id={m.id} -->
|
||||
<div class="card">
|
||||
<!-- TODO improve this -->
|
||||
Training the model...<br />
|
||||
<!-- TODO Add progress status on definitions -->
|
||||
{#await definitions}
|
||||
Loading
|
||||
{:then defs}
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th> Done Progress </th>
|
||||
<th> Training Round Progress </th>
|
||||
<th> Accuracy </th>
|
||||
<th> Status </th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each defs as def}
|
||||
<tr>
|
||||
<td>
|
||||
{def.epoch}
|
||||
</td>
|
||||
<td>
|
||||
{def.epoch_progress}/20
|
||||
</td>
|
||||
<td>
|
||||
{def.accuracy}%
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
{#if def.status == 2}
|
||||
<span class="bi bi-book" style="color: green;"></span>
|
||||
{:else if [3, 6, -3].includes(def.status)}
|
||||
<span
|
||||
class="bi bi-book-half"
|
||||
style="color: {{
|
||||
'3': 'green',
|
||||
'-3': 'red',
|
||||
'6': 'orange'
|
||||
}[String(def.status)]};"
|
||||
></span>
|
||||
{:else}
|
||||
{def.status}
|
||||
{/if}
|
||||
</td>
|
||||
</tr>
|
||||
{#if def.status == 3 && def.layers}
|
||||
<tr>
|
||||
<td colspan="4">
|
||||
<svg viewBox="0 200 1000 600">
|
||||
{#each def.layers as layer, i}
|
||||
{@const sep_mod =
|
||||
def.layers.length > 8
|
||||
? Math.max(10, 100 - (def.layers.length - 8) * 10)
|
||||
: 100}
|
||||
{#if layer.layer_type == 1}
|
||||
<polygon
|
||||
points="50,450 200,250 200,550 50,750"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="green"
|
||||
></polygon>
|
||||
{:else if layer.layer_type == 4}
|
||||
<polygon
|
||||
points="{50 + i * sep_mod},450 {200 + i * sep_mod},250 {200 +
|
||||
i * sep_mod},550 {50 + i * sep_mod},750"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="orange"
|
||||
>
|
||||
</polygon>
|
||||
{:else if layer.layer_type == 3}
|
||||
<polygon
|
||||
points="{50 + i * sep_mod},450 {200 + i * sep_mod},250 {200 +
|
||||
i * sep_mod},550 {50 + i * sep_mod},750"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="red"
|
||||
>
|
||||
</polygon>
|
||||
{:else if layer.layer_type == 2}
|
||||
<polygon
|
||||
points="{50 + i * sep_mod},550 {200 + i * sep_mod},350 {200 +
|
||||
i * sep_mod},450 {50 + i * sep_mod},650"
|
||||
stroke="black"
|
||||
stroke-width="2"
|
||||
fill="blue"
|
||||
>
|
||||
</polygon>
|
||||
{:else}
|
||||
<div>
|
||||
{layer.layer_type}
|
||||
{layer.shape}
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</svg>
|
||||
</td>
|
||||
</tr>
|
||||
{/if}
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/await}
|
||||
<!-- TODO Add ability to stop training -->
|
||||
</div>
|
||||
{:else if m.status == 5}
|
||||
<BaseModelInfo model={m} />
|
||||
<RunModel model={m} />
|
||||
<DeleteModel model={m} />
|
||||
{:else}
|
||||
<h1>Unknown Status of the model.</h1>
|
||||
{/if}
|
||||
{/await}
|
||||
</main>
|
||||
|
||||
<style lang="scss">
|
||||
main {
|
||||
padding: 20px 15vw;
|
||||
}
|
||||
main {
|
||||
padding: 20px 15vw;
|
||||
}
|
||||
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