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