feat: update schema components

This commit is contained in:
2026-09-10 12:01:49 +05:00
parent ba8a518861
commit b6db1c8f19
4 changed files with 42 additions and 70 deletions
@@ -3,7 +3,7 @@
import { Sparkles, Upload } from "@lucide/svelte";
interface Props {
inputMode: "file" | "text" | "none";
inputMode: "image" | "text" | "none";
canDownload: boolean;
running: boolean;
onupload: (file: File) => void;
@@ -26,7 +26,7 @@
<Sparkles size={14} />
{running ? "Generating…" : "Generate"}
</button>
{:else if inputMode === "file"}
{:else if inputMode === "image"}
<label class="btn upload">
<Upload size={14} /> Open image
<input
+13 -14
View File
@@ -4,10 +4,11 @@
import SchemaResultTile from "$lib/components/kit/SchemaResultTile.svelte";
import SchemaSourceTile from "$lib/components/kit/SchemaSourceTile.svelte";
import type { PixelImage } from "$lib/core/types";
import type { InputMode, ResultKind } from "$lib/registry-new";
interface Props {
inputMode?: "file" | "text" | "none";
resultKind?: "image" | "text" | "verdict";
inputMode: InputMode;
resultKind?: ResultKind;
source: PixelImage | null;
result: PixelImage | null;
textSource?: string;
@@ -23,7 +24,7 @@
ondownload: () => void;
}
let {
inputMode = "file",
inputMode,
resultKind = "image",
source,
result,
@@ -80,21 +81,19 @@
{/if}
<div class="pair">
{#if !isGenerator}
<SchemaSourceTile
mode={inputMode === "text" ? "text" : "file"}
{source}
{textSource}
{running}
ontextinput={ontextsource}
{onrendertext}
/>
{/if}
<SchemaSourceTile
mode={inputMode}
{source}
{textSource}
{running}
ontextinput={ontextsource}
{onrendertext}
/>
<SchemaResultTile
{resultKind}
{result}
{textResult}
wide={isGenerator || resultKind !== "image"}
wide={resultKind !== "image"}
{running}
oncopy={oncopytext}
{ondownloadtxt}
@@ -1,10 +1,11 @@
<script lang="ts">
import { toDataUrl } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types";
import type { InputMode } from "$lib/registry-new";
import SchemaTextSource from "./SchemaTextSource.svelte";
interface Props {
mode: "file" | "text";
mode: InputMode;
source: PixelImage | null;
textSource?: string;
running?: boolean;
@@ -35,10 +36,12 @@
onrender={onrendertext ?? (() => {})}
/>
</div>
{:else if sourceUrl}
{:else if mode === "image" && sourceUrl}
<img src={sourceUrl} alt="source" />
{:else}
{:else if mode === "image"}
<span class="empty">choose an image</span>
{:else}
<span class="empty">no source — configure the parameters</span>
{/if}
</div>
</figure>
@@ -2,15 +2,11 @@
import SchemaFields from "$lib/components/kit/SchemaFields.svelte";
import SchemaPreview from "$lib/components/kit/SchemaPreview.svelte";
import { debounce } from "$lib/core/debounce";
import { ToolError } from "$lib/core/errors";
import { decodeFile, encode } from "$lib/core/io";
import type { PixelImage } from "$lib/core/types";
import {
executeFromText,
executeGenerate,
executeStep,
executeTextToText,
executeToText,
} from "$lib/preview/executor";
import { t } from "$lib/i18n/t";
import { execute } from "$lib/preview/executor";
import type { ToolEntry } from "$lib/registry-new";
import {
defaultSchemaParams,
@@ -27,8 +23,7 @@
tool.schema as ToolSchema<Record<string, unknown>> | undefined,
);
const isGenerator = $derived(Boolean(tool.generate && !tool.run));
const inputMode = $derived(tool.input ?? "file");
const inputMode = $derived(tool.input);
const resultKind = $derived(tool.result ?? "image");
let values = $state<Record<string, unknown>>({});
@@ -70,33 +65,20 @@
async function run() {
if (!schema) return;
if (isGenerator) {
if (!tool.generate) return;
await runGenerate();
return;
}
error = "";
const params = sanitizeSchemaParams(schema, values);
running = true;
try {
if (inputMode === "text") {
if (!textSource.trim()) return;
if (tool.textToText) {
textResult = await executeTextToText(tool, textSource);
result = null;
} else {
result = await executeFromText(tool, textSource, params);
textResult = null;
}
const out = await execute(tool, {
params: sanitizeSchemaParams(schema, values),
source: source ?? undefined,
text: textSource || undefined,
});
if (resultKind === "image") {
result = out as PixelImage;
textResult = null;
} else {
if (!source) return;
if (resultKind !== "image" && tool.toText) {
textResult = await executeToText(tool, source, params);
result = null;
} else {
result = await executeStep(tool, source, params);
textResult = null;
}
textResult = out as string;
result = null;
}
} catch (e) {
error = errorText(e);
@@ -105,20 +87,6 @@
}
}
async function runGenerate() {
if (!schema || !tool.generate) return;
running = true;
error = "";
const params = sanitizeSchemaParams(schema, values);
try {
result = await executeGenerate(tool, params);
} catch (e) {
error = errorText(e);
} finally {
running = false;
}
}
async function download() {
if (!result || !schema) return;
const out = tool.output;
@@ -159,14 +127,16 @@
});
$effect(() => {
if (inputMode === "text" || isGenerator || !source || !started) return;
if (inputMode !== "image" || !source || !started) return;
void values;
debouncedRun();
return () => debouncedRun.cancel();
});
function errorText(e: unknown): string {
return e instanceof Error ? e.message : String(e);
if (e instanceof ToolError) return t(e.key, e.vars);
if (e instanceof Error) return e.message;
return String(e);
}
</script>
@@ -201,9 +171,9 @@
{running}
{error}
onupload={handleFile}
ongenerate={runGenerate}
ontextsource={(t) => {
textSource = t;
ongenerate={run}
ontextsource={(textValue) => {
textSource = textValue;
}}
onrendertext={run}
oncopytext={copyText}