feat: add show mask workflow

web/src/lib/components/ToolPage.svelte

@@ -14,6 +14,8 @@
 	let status = $state<Status>('idle');
 	let source = $state<PixelImage | null>(null);
 	let result = $state<PixelImage | null>(null);
+	let previewResult = $state<PixelImage | null>(null);
+	let showMask = $state(false);
 	let info = $state<ImageInfo | null>(null);
 	let errorText = $state('');
 	let values = $state<Record<string, any>>({});
@@ -32,6 +34,8 @@
 			source = await decodeFile(file);
 			values = defaultParams(tool);
 			result = null;
+			previewResult = null;
+			showMask = false;
 			info = isInfo ? imageInfo(source) : null;
 			if (isInfo) {
 				status = 'loaded';
@@ -50,8 +54,17 @@
 		lastRunValuesJson = JSON.stringify(sanitized);
 		try {
 			const next = await tool.run(source, sanitized);
+			let nextPreview: PixelImage | null = null;
+			if (tool.preview) {
+				try {
+					nextPreview = await tool.preview(source, sanitized);
+				} catch {
+					nextPreview = null;
+				}
+			}
 			if (token !== runToken) return;
 			result = next;
+			previewResult = nextPreview;
 			status = 'loaded';
 		} catch (e) {
 			if (token !== runToken) return;
@@ -75,6 +88,8 @@
 	function reset() {
 		source = null;
 		result = null;
+		previewResult = null;
+		showMask = false;
 		info = null;
 		errorText = '';
 		status = 'idle';
@@ -125,6 +140,8 @@
 				sourceLoaded={!!source}
 				{status}
 				{result}
+				{previewResult}
+				bind:showMask
 				{info}
 				{isInfo}
 				params={sanitized}

web/src/lib/components/tool/ResultCard.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
+	import CheckboxField from '../ui/CheckboxField.svelte';
+	import DownloadButton from '../DownloadButton.svelte';
+	import EmptyState from '../ui/EmptyState.svelte';
+	import InfoPanel from '../InfoPanel.svelte';
+	import Preview from '../Preview.svelte';
 	import type { ImageInfo } from '$lib/core/analyze';
 	import type { PixelImage } from '$lib/core/types';
 	import { outputOf, type ToolEntry } from '$lib/registry';
-	import DownloadButton from '../DownloadButton.svelte';
-	import InfoPanel from '../InfoPanel.svelte';
-	import Preview from '../Preview.svelte';
-	import EmptyState from '../ui/EmptyState.svelte';
 
 	type Status = 'idle' | 'loaded' | 'processing' | 'error';
 
@@ -14,6 +15,8 @@
 		sourceLoaded: boolean;
 		status: Status;
 		result: PixelImage | null;
+		previewResult: PixelImage | null;
+		showMask: boolean;
 		info: ImageInfo | null;
 		isInfo: boolean;
 		params: Record<string, unknown>;
@@ -25,11 +28,16 @@
 		sourceLoaded,
 		status,
 		result,
+		previewResult,
+		showMask = $bindable(false),
 		info,
 		isInfo,
 		params,
 		onDownloadError
 	}: Props = $props();
+
+	const hasPreview = $derived(typeof tool.preview === 'function');
+	const shown = $derived(showMask && previewResult ? previewResult : result);
 </script>
 
 <div class="container">
@@ -55,8 +63,11 @@
 			{/if}
 		</div>
 	{:else}
+		{#if hasPreview}
+			<CheckboxField id="show-mask" label="Показать маску" bind:checked={showMask} />
+		{/if}
 		<div class="media">
-			<Preview image={result} />
+			<Preview image={shown} />
 			{#if status === 'processing'}
 				<span class="recalc" aria-live="polite">Пересчёт…</span>
 			{/if}