mirror of
https://github.com/Ku6epXBOCTuK/easy-png-tools.git
synced 2026-09-14 13:36:36 +00:00
feat: update schema components
This commit is contained in:
@@ -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
|
||||
|
||||
@@ -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}
|
||||
|
||||
Reference in New Issue
Block a user