feat: add single tool schema rendering
This commit is contained in:
@@ -0,0 +1,216 @@
|
||||
<script lang="ts">
|
||||
import { decodeFile, encode } from "$lib/core/io";
|
||||
import { debounce } from "$lib/core/debounce";
|
||||
import type { PixelImage } from "$lib/core/types";
|
||||
import {
|
||||
defaultSchemaParams,
|
||||
sanitizeSchemaParams,
|
||||
type ToolSchema,
|
||||
} from "$lib/registry-schema";
|
||||
import { executeStep } from "$lib/tools/executor";
|
||||
import type { ToolEntry } from "$lib/registry";
|
||||
import SchemaFields from "$lib/components/kit/SchemaFields.svelte";
|
||||
import SchemaPreview from "$lib/components/kit/SchemaPreview.svelte";
|
||||
|
||||
interface Props {
|
||||
tool: ToolEntry;
|
||||
}
|
||||
let { tool }: Props = $props();
|
||||
|
||||
const schema = $derived(
|
||||
tool.schema as ToolSchema<Record<string, unknown>> | undefined,
|
||||
);
|
||||
|
||||
let values = $state<Record<string, unknown>>({});
|
||||
let source = $state<PixelImage | null>(null);
|
||||
let result = $state<PixelImage | null>(null);
|
||||
let running = $state(false);
|
||||
let error = $state("");
|
||||
let started = $state(false);
|
||||
|
||||
const debouncedRun = debounce(() => run(), 200);
|
||||
|
||||
function init() {
|
||||
if (!schema || started) return;
|
||||
started = true;
|
||||
values = defaultSchemaParams(schema);
|
||||
}
|
||||
|
||||
function setValue(id: string, value: unknown) {
|
||||
values = { ...values, [id]: value };
|
||||
}
|
||||
|
||||
function reset() {
|
||||
values = schema ? defaultSchemaParams(schema) : {};
|
||||
result = null;
|
||||
error = "";
|
||||
}
|
||||
|
||||
async function handleFile(file: File) {
|
||||
error = "";
|
||||
try {
|
||||
source = await decodeFile(file);
|
||||
} catch (e) {
|
||||
error = errorText(e);
|
||||
}
|
||||
}
|
||||
|
||||
async function run() {
|
||||
if (!schema || !tool.run || !source) return;
|
||||
running = true;
|
||||
error = "";
|
||||
const params = sanitizeSchemaParams(schema, values);
|
||||
try {
|
||||
result = await executeStep(tool, source, params);
|
||||
} catch (e) {
|
||||
error = errorText(e);
|
||||
} finally {
|
||||
running = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function download() {
|
||||
if (!result) return;
|
||||
const blob = await encode(result, "image/png");
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement("a");
|
||||
a.href = url;
|
||||
a.download = "with-border.png";
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
$effect(() => {
|
||||
init();
|
||||
});
|
||||
|
||||
$effect(() => {
|
||||
if (!source || !started) return;
|
||||
void values;
|
||||
debouncedRun();
|
||||
return () => debouncedRun.cancel();
|
||||
});
|
||||
|
||||
function errorText(e: unknown): string {
|
||||
return e instanceof Error ? e.message : String(e);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#if schema}
|
||||
<div class="schema-tool">
|
||||
<header class="header">
|
||||
<div class="title-block">
|
||||
<span class="eyebrow">PNG PROCESSING <span>/</span> SINGLE TOOL</span>
|
||||
<h1>{tool.title}</h1>
|
||||
<p class="lede">{tool.description}</p>
|
||||
</div>
|
||||
<span class="status"><i></i> LIVE PREVIEW</span>
|
||||
</header>
|
||||
|
||||
<div class="workspace">
|
||||
<section class="panel settings">
|
||||
<div class="panel-head">
|
||||
<span class="label">TOOL SETTINGS</span>
|
||||
<strong>Configure output</strong>
|
||||
</div>
|
||||
<SchemaFields {schema} {values} onchange={setValue} onreset={reset} />
|
||||
</section>
|
||||
|
||||
<section class="panel">
|
||||
<SchemaPreview
|
||||
{source}
|
||||
{result}
|
||||
{running}
|
||||
{error}
|
||||
onupload={handleFile}
|
||||
ondownload={download}
|
||||
/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="no-schema">This tool has no schema yet.</p>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.schema-tool {
|
||||
padding: calc(var(--space-xxxl) + var(--space-l))
|
||||
clamp(var(--space-m), 4vw, var(--space-xxxl));
|
||||
}
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-l);
|
||||
margin-bottom: var(--space-xxxl);
|
||||
}
|
||||
.title-block h1 {
|
||||
margin: var(--space-s) 0 0;
|
||||
font-size: clamp(var(--font-size-xl), 4vw, var(--font-size-2xl));
|
||||
line-height: 1.1;
|
||||
color: var(--color-text);
|
||||
}
|
||||
.eyebrow,
|
||||
.label,
|
||||
.status {
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
letter-spacing: var(--space-text-l);
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
.eyebrow span,
|
||||
.label {
|
||||
color: var(--color-main);
|
||||
}
|
||||
.lede {
|
||||
max-width: 100%;
|
||||
margin: var(--space-m) 0 0;
|
||||
color: var(--color-text-muted);
|
||||
font-size: var(--font-size-s);
|
||||
line-height: 1.5;
|
||||
}
|
||||
.status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-m);
|
||||
align-self: flex-start;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.status i {
|
||||
width: var(--size-border-thick);
|
||||
height: var(--size-border-thick);
|
||||
border-radius: 50%;
|
||||
background: var(--color-success);
|
||||
}
|
||||
.workspace {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
|
||||
gap: var(--space-xxl);
|
||||
align-items: start;
|
||||
}
|
||||
.panel {
|
||||
border: var(--size-border) solid var(--color-border);
|
||||
border-radius: var(--radius-m);
|
||||
background: var(--color-panel);
|
||||
padding: var(--space-xl);
|
||||
}
|
||||
.panel-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: var(--space-m);
|
||||
padding-bottom: var(--space-l);
|
||||
border-bottom: var(--size-border) solid var(--color-border);
|
||||
margin-bottom: var(--space-xl);
|
||||
}
|
||||
.panel-head strong {
|
||||
font-size: var(--font-size-l);
|
||||
color: var(--color-text);
|
||||
}
|
||||
.no-schema {
|
||||
font: var(--font-size-s) var(--font-mono);
|
||||
}
|
||||
@media (max-width: var(--bp-tablet)) {
|
||||
.workspace {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user