fix: disable download button while running jobs, auto run generator jobs

docs/backlog.md

@@ -16,7 +16,13 @@
 
 ## Мелочи всякие
 
-- [ ] сгенерировать или найти файлы для ручной проверки `A. Краевые PNG-файлы`
+- [x] сгенерировать или найти файлы для ручной проверки `A. Краевые PNG-файлы`
+- [ ] обдумать объединение пар `inputMode + source` и `resultKind + result` в
+      единую структуру, позволит упростить некоторые вещи - например
+      `sourceValue` \ `resultValue` в `SchemaPreview.svelte`
+- [ ] Рассмотреть необходимость всех этих пропсов в `SchemaPreview.svelte` они
+      дублируют друг друга `ontextsource`, `onrendertext`, `oncopytext`,
+      `ondownloadtxt`, `ondownload`,
 - [ ] Переделать внешний вид инструментов без настроек, например Remove alpha
       channel PNG "remove-alpha-channel-png". Сейчас выглядит слишком пустым.
 - [ ] Убрать описание формата в отображении исходник\результат - это должно быть
@@ -31,14 +37,14 @@
       паспортом, семейства с кириллицей)
 - [ ] Посмотреть темную тему - слишком темная и слишком много оттенка (убавить c
       в hct?)
-- [ ] на картинке результате при работе дергается высота надписи (высота иконки)
+- [x] на картинке результате при работе дергается высота надписи (высота иконки)
 - [x] Глянуть что за ошибка (воспроизвелось на blur-png, в том числе и повторно)
       [баг в хроме](https://issues.chromium.org/issues/556160936)
       `Uncaught TypeError: Cannot read properties of undefined (reading 'startTime')`
       `at et.reportAllChanges (anonymous:2:19429)`
 - [ ] сделать загрузку картинки исходника по ctrl+v и drag-and-drop (dropzone)
 - [x] не работают генераторы картинок (create-empty-png)
-- [ ] генераторы работают не автоматически - требуется нажать кнопку generate
+- [x] генераторы работают не автоматически - требуется нажать кнопку generate
       (create-empty-png)
 - [ ] square-mask-png - проверить работу - параметры неверно считаются. width -
       100, height - 100, x - 100, y - 100, обрезает 50% на 50% картинку
@@ -56,9 +62,9 @@
 - [ ] придумать процесс редактирования и настройки pipeline - drag-n-drop,
       удаление, добавление инструментов. переход один инструмент - pipeline без
       перезагрузки
-- [ ] Слаги инструментов (`*-png`) — надо обдумать, возможно что ссылки\маршруты
+- [ ] Слаги инструментов (`*-png`) — надо переименовть, они работают с любыми
-      должны быть с png, а названия инструментов - без. Это упростит названия
+      изображениями. Надо сделать отдельный интерфейс маппинга инструмент ->
-      инструментов и сделает их более понятными
+      ссылка
 
 ## Переезд
 
@@ -184,7 +190,12 @@
 
 9. **`png-info` (детальная информация о PNG)** — оценка M/L. Отложен из
    миграции. Отдельный райз: exif-теги, редактирование, структурированный вывод;
-   нужен свой отдельный случай в UI, не «ещё один text/verdict».
+   нужен свой отдельный случай в UI, не «ещё один text/verdict». возможно нужна
+   вообще отдельная страница, несовместимая с другими инструментами: 1) она
+   работает не с изображением, а с мета данными из файла, 2) она не может быть
+   частью цепочки, т.к. результат не является изображением, 3) если надо
+   изменить теги, никакого форматирования и изменения в изображение вносить не
+   надо, только в мета информацияю
 
 10. **Region-инструменты** (censor/erase/pixelate-area/blur-area/sharpen-area/
     reverse-area) — ждут UI выделения области на превью. Из

web/src/lib/components/SchemaActions.svelte

@@ -1,32 +1,20 @@
 <script lang="ts">
+	import { Upload } from "@lucide/svelte";
 	import DownloadButton from "./ui/DownloadButton.svelte";
-	import { Sparkles, Upload } from "@lucide/svelte";
 
 	interface Props {
 		inputMode: "image" | "text" | "none";
 		canDownload: boolean;
 		running: boolean;
 		onupload: (file: File) => void;
-		ongenerate: () => void;
 		ondownload: () => void;
 	}
-	let {
+	let { inputMode, canDownload, running, onupload, ondownload }: Props =
-		inputMode,
+		$props();
-		canDownload,
-		running,
-		onupload,
-		ongenerate,
-		ondownload,
-	}: Props = $props();
 </script>
 
 <div class="actions">
-	{#if inputMode === "none"}
+	{#if inputMode === "image"}
-		<button class="btn generate" onclick={ongenerate} disabled={running}>
-			<Sparkles size={14} />
-			{running ? "Generating…" : "Generate"}
-		</button>
-	{:else if inputMode === "image"}
 		<label class="btn upload">
 			<Upload size={14} /> Open image
 			<input
@@ -40,7 +28,11 @@
 		</label>
 	{/if}
 	{#if canDownload}
-		<DownloadButton label="Download result" onclick={ondownload} />
+		<DownloadButton
+			label="Download result"
+			onclick={ondownload}
+			disabled={running}
+		/>
 	{/if}
 </div>
 
@@ -62,15 +54,6 @@
 		color: var(--color-text-muted);
 		cursor: pointer;
 	}
-	.generate {
-		background: var(--color-main);
-		border-color: var(--color-main);
-		color: var(--color-background);
-	}
-	.generate:disabled {
-		opacity: 0.6;
-		cursor: default;
-	}
 	.upload input {
 		display: none;
 	}

web/src/lib/components/SchemaPreview.svelte

@@ -17,7 +17,6 @@
 		running?: boolean;
 		error?: string;
 		onupload: (file: File) => void;
-		ongenerate?: () => void;
 		ontextsource?: (text: string) => void;
 		onrendertext?: () => void;
 		oncopytext?: () => void;
@@ -35,7 +34,6 @@
 		running = false,
 		error = "",
 		onupload,
-		ongenerate,
 		ontextsource,
 		onrendertext,
 		oncopytext,
@@ -43,16 +41,16 @@
 		ondownload,
 	}: Props = $props();
 
-	const isGenerator = $derived(inputMode === "none");
+	const sourceValue = $derived.by(() => {
-	const sourceValue = $derived(
+		switch (inputMode) {
-		isGenerator
+			case "none":
-			? "—"
+				return "—";
-			: inputMode === "text"
+			case "text":
-				? "text"
+				return "text";
-				: source
+			case "image":
-					? `${source.width} × ${source.height} px`
+				return source ? `${source.width} × ${source.height} px` : "—";
-					: "—",
+		}
-	);
+	});
 	const resultValue = $derived(
 		resultKind === "image"
 			? result
@@ -77,15 +75,12 @@
 </script>
 
 <div class="panel-head">
-	<span class="label"
+	<span class="label">PREVIEW PANEL</span>
-		>{isGenerator ? "GENERATOR / RESULT" : "SOURCE / RESULT"}</span
-	>
 	<SchemaActions
 		{inputMode}
 		canDownload={hasResult}
 		{running}
 		{onupload}
-		ongenerate={ongenerate ?? (() => {})}
 		{ondownload}
 	/>
 </div>

web/src/lib/components/SchemaToolView.svelte

@@ -8,12 +8,12 @@
 	import { execute } from "$lib/executor";
 	import { t } from "$lib/i18n/t";
 	import type { FileResult, ToolEntry } from "$lib/registry";
-	import { downloadZip } from "$lib/zip";
 	import {
 		defaultSchemaParams,
 		sanitizeSchemaParams,
 		type ToolSchema,
 	} from "$lib/registry-schema";
+	import { downloadZip } from "$lib/zip";
 
 	interface Props {
 		tool: ToolEntry;
@@ -142,7 +142,8 @@
 	});
 
 	$effect(() => {
-		if (inputMode !== "image" || !source || !started) return;
+		// TODO: can any edge case start infinite loop?
+		if (!started) return;
 		void values;
 		debouncedRun();
 		return () => debouncedRun.cancel();
@@ -187,7 +188,6 @@
 					{running}
 					{error}
 					onupload={handleFile}
-					ongenerate={run}
 					ontextsource={(textValue) => {
 						textSource = textValue;
 					}}

web/src/lib/components/ui/DownloadButton.svelte

@@ -5,8 +5,9 @@
 	interface Props {
 		label: string;
 		onclick?: () => void;
+		disabled?: boolean;
 	}
-	let { label, onclick }: Props = $props();
+	let { label, onclick, disabled = false }: Props = $props();
 </script>
 
-<Button icon={Download} {label} {onclick} />
+<Button icon={Download} {label} {onclick} {disabled} />