Ku6epXBOCTuK/easy-png-tools2
1
0
Fork 0
mirror of https://github.com/Ku6epXBOCTuK/easy-png-tools.git synced 2026-11-13 17:08:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: change id - remove png intents

Browse Source
This commit is contained in:
Ku6epXBOCTuK
2026-09-27 16:48:20 +05:00
parent d09c954694
commit 7b7e12fafc
21 changed files with 433 additions and 433 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/executor/executor.test.ts
+3 -3
View File
@@ -281,7 +281,7 @@ describe("handleWorkerRequest", () => {
it("serializes image results and preserves ToolError keys", async () => { it("serializes image results and preserves ToolError keys", async () => {
const imageResult = await handleWorkerRequest({ const imageResult = await handleWorkerRequest({
id: 1, id: 1,
toolId: "flip-png", toolId: "flip",
params: {}, params: {},
source: image(), source: image(),
}); });
@@ -295,7 +295,7 @@ describe("handleWorkerRequest", () => {
const errorResult = await handleWorkerRequest({ const errorResult = await handleWorkerRequest({
id: 2, id: 2,
toolId: "bytes-to-png", toolId: "from-bytes",
params: { width: 32 }, params: { width: 32 },
text: Array.from({ length: 132 }, () => "1").join(" "), text: Array.from({ length: 132 }, () => "1").join(" "),
}); });
@@ -310,7 +310,7 @@ describe("handleWorkerRequest", () => {
it("serializes FileResult transfers", async () => { it("serializes FileResult transfers", async () => {
const result = await handleWorkerRequest({ const result = await handleWorkerRequest({
id: 3, id: 3,
toolId: "split-into-parts-png", toolId: "split-into-parts",
params: { columns: 2, rows: 2 }, params: { columns: 2, rows: 2 },
source: image(), source: image(),
}); });
web/src/lib/i18n/en.ts
+37 -37
View File
@@ -337,83 +337,83 @@ export const en: Dict = {
// EN-строка из реестра страниц (`web/src/lib/registry/pages/`). // EN-строка из реестра страниц (`web/src/lib/registry/pages/`).
pages: {}, pages: {},
tools: { tools: {
"png-file-size": { "file-size": {
results: { results: {
line: "PNG size: {kb} KB", line: "PNG size: {kb} KB",
}, },
}, },
"verify-is-png": { "verify-png": {
results: { results: {
verifyYes: "Yes — this is a valid PNG signature.", verifyYes: "Yes — this is a valid PNG signature.",
verifyNo: "No — the signature does not match a PNG file.", verifyNo: "No — the signature does not match a PNG file.",
}, },
}, },
"png-is-grayscale": { "is-grayscale": {
results: { results: {
grayscaleYes: "Yes — all pixels are shades of gray.", grayscaleYes: "Yes — all pixels are shades of gray.",
grayscaleNo: "No — colored pixels were found.", grayscaleNo: "No — colored pixels were found.",
}, },
}, },
"png-is-transparent": { "is-transparent": {
results: { results: {
transparentYes: transparentYes:
"Yes — there are transparent or semi-transparent pixels.", "Yes — there are transparent or semi-transparent pixels.",
transparentNo: "No — all pixels are fully opaque.", transparentNo: "No — all pixels are fully opaque.",
}, },
}, },
"png-orientation": { orientation: {
results: { results: {
orientationPortrait: "Portrait — height is greater than width.", orientationPortrait: "Portrait — height is greater than width.",
orientationLandscape: "Landscape — width is greater than height.", orientationLandscape: "Landscape — width is greater than height.",
orientationSquare: "Square — the sides are equal.", orientationSquare: "Square — the sides are equal.",
}, },
}, },
"show-transparent-png": { "show-transparent": {
options: { options: {
mode: { binary: "Black & white mask", highlight: "Color highlight" }, mode: { binary: "Black & white mask", highlight: "Color highlight" },
}, },
}, },
"show-grayscale-pixels-png": { "show-grayscale-pixels": {
options: { options: {
mode: { binary: "Black & white mask", highlight: "Color highlight" }, mode: { binary: "Black & white mask", highlight: "Color highlight" },
}, },
}, },
"show-color-pixels-png": { "show-color-pixels": {
options: { options: {
mode: { binary: "Black & white mask", highlight: "Color highlight" }, mode: { binary: "Black & white mask", highlight: "Color highlight" },
}, },
}, },
"light-pixel-mask-png": { "light-pixel-mask": {
options: { options: {
mode: { binary: "Black & white mask", highlight: "Color highlight" }, mode: { binary: "Black & white mask", highlight: "Color highlight" },
}, },
}, },
"dark-pixel-mask-png": { "dark-pixel-mask": {
options: { options: {
mode: { binary: "Black & white mask", highlight: "Color highlight" }, mode: { binary: "Black & white mask", highlight: "Color highlight" },
}, },
}, },
"unique-color-mask-png": { "unique-color-mask": {
options: { options: {
mode: { binary: "Black & white mask", highlight: "Color highlight" }, mode: { binary: "Black & white mask", highlight: "Color highlight" },
}, },
}, },
"add-noise-png": { "add-noise": {
options: { options: {
mode: { mono: "Monochrome grain", color: "Color noise" }, mode: { mono: "Monochrome grain", color: "Color noise" },
}, },
}, },
"dithering-png": { dithering: {
options: { options: {
pattern: { "floyd-steinberg": "Floyd–Steinberg", bayer: "Bayer 4x4" }, pattern: { "floyd-steinberg": "Floyd–Steinberg", bayer: "Bayer 4x4" },
}, },
}, },
"extract-channel-png": { "extract-channel": {
options: { options: {
channel: { red: "Red", green: "Green", blue: "Blue" }, channel: { red: "Red", green: "Green", blue: "Blue" },
}, },
}, },
"swap-channels-png": { "swap-channels": {
options: { options: {
pair: { pair: {
"r-g": "Red ↔ Green", "r-g": "Red ↔ Green",
@@ -422,7 +422,7 @@ export const en: Dict = {
}, },
}, },
}, },
"decrease-color-count-png": { "decrease-color-count": {
options: { options: {
maxColors: { maxColors: {
"2": "2", "2": "2",
@@ -439,37 +439,37 @@ export const en: Dict = {
}, },
}, },
}, },
"png-to-hsl": { "to-hsl": {
options: { options: {
display: { gray: "Grayscale", color: "Space as RGB" }, display: { gray: "Grayscale", color: "Space as RGB" },
}, },
}, },
"png-to-hsv": { "to-hsv": {
options: { options: {
display: { gray: "Grayscale", color: "Space as RGB" }, display: { gray: "Grayscale", color: "Space as RGB" },
}, },
}, },
"png-to-hsi": { "to-hsi": {
options: { options: {
display: { gray: "Grayscale", color: "Space as RGB" }, display: { gray: "Grayscale", color: "Space as RGB" },
}, },
}, },
"png-to-cmyk": { "to-cmyk": {
options: { options: {
display: { gray: "Grayscale", color: "Space as RGB" }, display: { gray: "Grayscale", color: "Space as RGB" },
}, },
}, },
"png-to-ycbcr": { "to-ycbcr": {
options: { options: {
display: { gray: "Grayscale", color: "Space as RGB" }, display: { gray: "Grayscale", color: "Space as RGB" },
}, },
}, },
"png-to-lab": { "to-lab": {
options: { options: {
display: { gray: "Grayscale", color: "Space as RGB" }, display: { gray: "Grayscale", color: "Space as RGB" },
}, },
}, },
"rotate-png": { rotate: {
options: { options: {
angle: { angle: {
"90": "90° clockwise", "90": "90° clockwise",
@@ -478,7 +478,7 @@ export const en: Dict = {
}, },
}, },
}, },
"flip-png": { flip: {
options: { options: {
axis: { axis: {
horizontal: "Horizontal (left to right)", horizontal: "Horizontal (left to right)",
@@ -486,7 +486,7 @@ export const en: Dict = {
}, },
}, },
}, },
"change-canvas-size-png": { "change-canvas-size": {
options: { options: {
anchor: { anchor: {
"top-left": "Top left", "top-left": "Top left",
@@ -501,7 +501,7 @@ export const en: Dict = {
}, },
}, },
}, },
"change-aspect-ratio-png": { "change-aspect-ratio": {
options: { options: {
ratio: { ratio: {
"1:1": "1:1", "1:1": "1:1",
@@ -515,12 +515,12 @@ export const en: Dict = {
mode: { crop: "Crop to fill", pad: "Pad to fit" }, mode: { crop: "Crop to fill", pad: "Pad to fit" },
}, },
}, },
"swap-orientation-png": { "swap-orientation": {
options: { options: {
target: { portrait: "Portrait", landscape: "Landscape" }, target: { portrait: "Portrait", landscape: "Landscape" },
}, },
}, },
"symmetric-copy-png": { "symmetric-copy": {
options: { options: {
axis: { axis: {
vertical: "Vertical (double width)", vertical: "Vertical (double width)",
@@ -534,47 +534,47 @@ export const en: Dict = {
}, },
}, },
}, },
"color-spectrum-png": { "color-spectrum": {
options: { options: {
direction: { horizontal: "Horizontal", vertical: "Vertical" }, direction: { horizontal: "Horizontal", vertical: "Vertical" },
}, },
}, },
"step-colors-png": { "step-colors": {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"complementary-png": { complementary: {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"triadic-png": { triadic: {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"tetradic-png": { tetradic: {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"analogous-png": { analogous: {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"monochromatic-png": { monochromatic: {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"shades-png": { shades: {
options: { options: {
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
}, },
}, },
"sort-colors-png": { "sort-colors": {
options: { options: {
order: { hue: "Hue", luma: "Brightness", sat: "Saturation" }, order: { hue: "Hue", luma: "Brightness", sat: "Saturation" },
layout: { grid: "Grid", strip: "Strip" }, layout: { grid: "Grid", strip: "Strip" },
web/src/lib/i18n/ru.ts
+105 -105
View File
@@ -932,17 +932,17 @@ export const ru: Dict = {
}, },
tools: { tools: {
"hex-to-png": { "from-hex": {
params: { width: "Ширина изображения" }, params: { width: "Ширина изображения" },
}, },
"resize-png": { resize: {
params: { params: {
width: "Ширина (0 — авто)", width: "Ширина (0 — авто)",
height: "Высота (0 — авто)", height: "Высота (0 — авто)",
keepAspect: "Сохранять пропорции", keepAspect: "Сохранять пропорции",
}, },
}, },
"crop-png": { crop: {
params: { params: {
x: "X (слева)", x: "X (слева)",
y: "Y (сверху)", y: "Y (сверху)",
@@ -950,7 +950,7 @@ export const ru: Dict = {
height: "Высота области", height: "Высота области",
}, },
}, },
"rotate-png": { rotate: {
params: { angle: "Угол поворота" }, params: { angle: "Угол поворота" },
options: { options: {
angle: { angle: {
@@ -960,7 +960,7 @@ export const ru: Dict = {
}, },
}, },
}, },
"flip-png": { flip: {
params: { axis: "Ось отражения" }, params: { axis: "Ось отражения" },
options: { options: {
axis: { axis: {
@@ -969,17 +969,17 @@ export const ru: Dict = {
}, },
}, },
}, },
"add-padding-png": { "add-padding": {
params: { params: {
padding: "Поля, px", padding: "Поля, px",
transparent: "Прозрачные поля", transparent: "Прозрачные поля",
color: "Цвет полей", color: "Цвет полей",
}, },
}, },
"add-border-png": { "add-border": {
params: { thickness: "Толщина рамки, px", color: "Цвет рамки" }, params: { thickness: "Толщина рамки, px", color: "Цвет рамки" },
}, },
"fit-on-background-png": { "fit-on-background": {
params: { params: {
width: "Ширина полотна", width: "Ширина полотна",
height: "Высота полотна", height: "Высота полотна",
@@ -987,29 +987,29 @@ export const ru: Dict = {
color: "Цвет фона", color: "Цвет фона",
}, },
}, },
"tile-png": { tile: {
params: { columns: "Столбцов", rows: "Строк" }, params: { columns: "Столбцов", rows: "Строк" },
}, },
"blur-png": { blur: {
params: { radius: "Радиус, px" }, params: { radius: "Радиус, px" },
}, },
"sharpen-png": { sharpen: {
params: { strength: "Сила, %" }, params: { strength: "Сила, %" },
}, },
"adjust-brightness-contrast-png": { "adjust-brightness-contrast": {
params: { brightness: "Яркость", contrast: "Контраст" }, params: { brightness: "Яркость", contrast: "Контраст" },
}, },
"change-png-opacity": { "change-opacity": {
params: { percent: "Прозрачность, %" }, params: { percent: "Прозрачность, %" },
}, },
"change-png-hue": { "change-hue": {
params: { degrees: "Сдвиг тона, °" }, params: { degrees: "Сдвиг тона, °" },
}, },
"extract-channel-png": { "extract-channel": {
params: { channel: "Канал" }, params: { channel: "Канал" },
options: { channel: { red: "Красный", green: "Зелёный", blue: "Синий" } }, options: { channel: { red: "Красный", green: "Зелёный", blue: "Синий" } },
}, },
"swap-channels-png": { "swap-channels": {
params: { pair: "Пара каналов" }, params: { pair: "Пара каналов" },
options: { options: {
pair: { pair: {
@@ -1019,62 +1019,62 @@ export const ru: Dict = {
}, },
}, },
}, },
"png-to-hsl": { "to-hsl": {
options: { options: {
display: { gray: "Оттенки серого", color: "Пространство как RGB" }, display: { gray: "Оттенки серого", color: "Пространство как RGB" },
}, },
}, },
"png-to-hsv": { "to-hsv": {
options: { options: {
display: { gray: "Оттенки серого", color: "Пространство как RGB" }, display: { gray: "Оттенки серого", color: "Пространство как RGB" },
}, },
}, },
"png-to-hsi": { "to-hsi": {
options: { options: {
display: { gray: "Оттенки серого", color: "Пространство как RGB" }, display: { gray: "Оттенки серого", color: "Пространство как RGB" },
}, },
}, },
"png-to-cmyk": { "to-cmyk": {
options: { options: {
display: { gray: "Оттенки серого", color: "Пространство как RGB" }, display: { gray: "Оттенки серого", color: "Пространство как RGB" },
}, },
}, },
"png-to-ycbcr": { "to-ycbcr": {
options: { options: {
display: { gray: "Оттенки серого", color: "Пространство как RGB" }, display: { gray: "Оттенки серого", color: "Пространство как RGB" },
}, },
}, },
"png-to-lab": { "to-lab": {
options: { options: {
display: { gray: "Оттенки серого", color: "Пространство как RGB" }, display: { gray: "Оттенки серого", color: "Пространство как RGB" },
}, },
}, },
"black-and-white-png": { "black-and-white": {
params: { threshold: "Порог яркости, %" }, params: { threshold: "Порог яркости, %" },
}, },
"posterize-png": { posterize: {
params: { levels: "Уровней на канал" }, params: { levels: "Уровней на канал" },
}, },
"two-colors-png": { "two-colors": {
params: { params: {
lightColor: "Цвет светлых участков", lightColor: "Цвет светлых участков",
darkColor: "Цвет тёмных участков", darkColor: "Цвет тёмных участков",
threshold: "Порог яркости, %", threshold: "Порог яркости, %",
}, },
}, },
"convert-png-to-jpg": { "to-jpg": {
params: { background: "Цвет подложки", quality: "Качество JPEG" }, params: { background: "Цвет подложки", quality: "Качество JPEG" },
}, },
"convert-png-to-webp": { "to-webp": {
params: { quality: "Качество WebP" }, params: { quality: "Качество WebP" },
}, },
"set-alpha-channel-png": { "set-alpha-channel": {
params: { percent: "Прозрачность, %" }, params: { percent: "Прозрачность, %" },
}, },
"round-corners-png": { "round-corners": {
params: { radius: "Радиус скругления, %" }, params: { radius: "Радиус скругления, %" },
}, },
"remove-background-png": { "remove-background": {
params: { params: {
color: "Цвет фона", color: "Цвет фона",
tolerance: "Допуск похожести, %", tolerance: "Допуск похожести, %",
@@ -1082,34 +1082,34 @@ export const ru: Dict = {
smooth: "Сглаживание границы, проходы", smooth: "Сглаживание границы, проходы",
}, },
}, },
"add-stroke-png": { "add-stroke": {
params: { color: "Цвет обводки", thickness: "Толщина, px" }, params: { color: "Цвет обводки", thickness: "Толщина, px" },
}, },
"find-contour-png": { "find-contour": {
params: { color: "Цвет линии", thickness: "Толщина линии, px" }, params: { color: "Цвет линии", thickness: "Толщина линии, px" },
}, },
"make-thicker-png": { "make-thicker": {
params: { radius: "На сколько px" }, params: { radius: "На сколько px" },
}, },
"make-thinner-png": { "make-thinner": {
params: { radius: "На сколько px" }, params: { radius: "На сколько px" },
}, },
"harden-alpha-png": { "harden-alpha": {
params: { threshold: "Порог альфы, %" }, params: { threshold: "Порог альфы, %" },
}, },
"despeckle-alpha-png": { "despeckle-alpha": {
params: { radius: "Радиус очистки, px" }, params: { radius: "Радиус очистки, px" },
}, },
"close-holes-png": { "close-holes": {
params: { radius: "Радиус закрытия, px" }, params: { radius: "Радиус закрытия, px" },
}, },
"remove-color-from-png": { "remove-color-from": {
params: { params: {
targetColor: "Цвет для удаления", targetColor: "Цвет для удаления",
tolerance: "Порог похожести, %", tolerance: "Порог похожести, %",
}, },
}, },
"create-empty-png": { "create-empty": {
params: { params: {
width: "Ширина", width: "Ширина",
height: "Высота", height: "Высота",
@@ -1117,13 +1117,13 @@ export const ru: Dict = {
color: "Цвет", color: "Цвет",
}, },
}, },
"single-color-png": { "single-color": {
params: { width: "Ширина", height: "Высота", color: "Цвет" }, params: { width: "Ширина", height: "Высота", color: "Цвет" },
}, },
"random-noise-png": { "random-noise": {
params: { width: "Ширина", height: "Высота", seed: "Зерно" }, params: { width: "Ширина", height: "Высота", seed: "Зерно" },
}, },
"linear-gradient-png": { "linear-gradient": {
params: { params: {
width: "Ширина", width: "Ширина",
height: "Высота", height: "Высота",
@@ -1132,10 +1132,10 @@ export const ru: Dict = {
direction: "Направление", direction: "Направление",
}, },
}, },
"color-wheel-png": { "color-wheel": {
params: { width: "Размер", lightness: "Светлота, %" }, params: { width: "Размер", lightness: "Светлота, %" },
}, },
"complementary-png": { complementary: {
params: { params: {
baseColor: "Базовый цвет", baseColor: "Базовый цвет",
width: "Ширина", width: "Ширина",
@@ -1143,7 +1143,7 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"triadic-png": { triadic: {
params: { params: {
baseColor: "Базовый цвет", baseColor: "Базовый цвет",
width: "Ширина", width: "Ширина",
@@ -1151,7 +1151,7 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"tetradic-png": { tetradic: {
params: { params: {
baseColor: "Базовый цвет", baseColor: "Базовый цвет",
width: "Ширина", width: "Ширина",
@@ -1159,7 +1159,7 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"analogous-png": { analogous: {
params: { params: {
baseColor: "Базовый цвет", baseColor: "Базовый цвет",
width: "Ширина", width: "Ширина",
@@ -1169,7 +1169,7 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"monochromatic-png": { monochromatic: {
params: { params: {
baseColor: "Базовый цвет", baseColor: "Базовый цвет",
width: "Ширина", width: "Ширина",
@@ -1179,7 +1179,7 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"shades-png": { shades: {
params: { params: {
baseColor: "Базовый цвет", baseColor: "Базовый цвет",
width: "Ширина", width: "Ширина",
@@ -1189,13 +1189,13 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"mix-colors-png": { "mix-colors": {
params: { colors: "Цвета (hex через запятую)", width: "Ширина" }, params: { colors: "Цвета (hex через запятую)", width: "Ширина" },
}, },
"blend-two-png": { "blend-two": {
params: { colorA: "Цвет A", colorB: "Цвет B", width: "Ширина" }, params: { colorA: "Цвет A", colorB: "Цвет B", width: "Ширина" },
}, },
"step-colors-png": { "step-colors": {
params: { params: {
colorA: "Цвет A", colorA: "Цвет A",
colorB: "Цвет B", colorB: "Цвет B",
@@ -1205,7 +1205,7 @@ export const ru: Dict = {
}, },
options: { layout: { grid: "Сетка", strip: "Полоса" } }, options: { layout: { grid: "Сетка", strip: "Полоса" } },
}, },
"sort-colors-png": { "sort-colors": {
params: { params: {
colors: "Цвета (hex через запятую)", colors: "Цвета (hex через запятую)",
order: "Сортировка", order: "Сортировка",
@@ -1217,20 +1217,20 @@ export const ru: Dict = {
layout: { grid: "Сетка", strip: "Полоса" }, layout: { grid: "Сетка", strip: "Полоса" },
}, },
}, },
"png-is-grayscale": { "is-grayscale": {
results: { results: {
grayscaleYes: "Да — все пиксели являются оттенками серого.", grayscaleYes: "Да — все пиксели являются оттенками серого.",
grayscaleNo: "Нет — найдены цветные пиксели.", grayscaleNo: "Нет — найдены цветные пиксели.",
}, },
}, },
"circle-mask-png": { "circle-mask": {
params: { params: {
size: "Диаметр, % меньшей стороны", size: "Диаметр, % меньшей стороны",
offsetX: "Смещение X, %", offsetX: "Смещение X, %",
offsetY: "Смещение Y, %", offsetY: "Смещение Y, %",
}, },
}, },
"square-mask-png": { "square-mask": {
params: { params: {
widthPct: "Ширина, % меньшей стороны", widthPct: "Ширина, % меньшей стороны",
heightPct: "Высота, % меньшей стороны", heightPct: "Высота, % меньшей стороны",
@@ -1238,7 +1238,7 @@ export const ru: Dict = {
offsetY: "Смещение Y, %", offsetY: "Смещение Y, %",
}, },
}, },
"star-mask-png": { "star-mask": {
params: { params: {
points: "Лучи", points: "Лучи",
innerRadius: "Радиус впадин, %", innerRadius: "Радиус впадин, %",
@@ -1248,7 +1248,7 @@ export const ru: Dict = {
offsetY: "Смещение Y, %", offsetY: "Смещение Y, %",
}, },
}, },
"wavy-mask-png": { "wavy-mask": {
params: { params: {
size: "Базовый радиус, % меньшей стороны", size: "Базовый радиус, % меньшей стороны",
amplitude: "Амплитуда волн, %", amplitude: "Амплитуда волн, %",
@@ -1258,10 +1258,10 @@ export const ru: Dict = {
offsetY: "Смещение Y, %", offsetY: "Смещение Y, %",
}, },
}, },
"trim-empty-space-png": { "trim-empty-space": {
params: { threshold: "Порог альфы" }, params: { threshold: "Порог альфы" },
}, },
"change-canvas-size-png": { "change-canvas-size": {
params: { width: "Ширина", height: "Высота", anchor: "Якорь" }, params: { width: "Ширина", height: "Высота", anchor: "Якорь" },
options: { options: {
anchor: { anchor: {
@@ -1277,7 +1277,7 @@ export const ru: Dict = {
}, },
}, },
}, },
"change-aspect-ratio-png": { "change-aspect-ratio": {
params: { ratio: "Целевое отношение", mode: "Режим" }, params: { ratio: "Целевое отношение", mode: "Режим" },
options: { options: {
ratio: { ratio: {
@@ -1295,11 +1295,11 @@ export const ru: Dict = {
}, },
}, },
}, },
"swap-orientation-png": { "swap-orientation": {
params: { target: "Целевая ориентация" }, params: { target: "Целевая ориентация" },
options: { target: { portrait: "Портрет", landscape: "Ландшафт" } }, options: { target: { portrait: "Портрет", landscape: "Ландшафт" } },
}, },
"symmetric-copy-png": { "symmetric-copy": {
params: { axis: "Линия зеркала", keepSide: "Какая сторона остаётся" }, params: { axis: "Линия зеркала", keepSide: "Какая сторона остаётся" },
options: { options: {
axis: { axis: {
@@ -1314,38 +1314,38 @@ export const ru: Dict = {
}, },
}, },
}, },
"feather-edges-png": { "feather-edges": {
params: { radius: "Радиус растушёвки, px" }, params: { radius: "Радиус растушёвки, px" },
}, },
"clean-edges-png": { "clean-edges": {
params: { radius: "Радиус поиска, px" }, params: { radius: "Радиус поиска, px" },
}, },
"pixelate-png": { pixelate: {
params: { blockSize: "Размер блока, px" }, params: { blockSize: "Размер блока, px" },
}, },
"randomize-pixels-png": { "randomize-pixels": {
params: { blockSize: "Размер блока, px", seed: "Seed" }, params: { blockSize: "Размер блока, px", seed: "Seed" },
}, },
"add-noise-png": { "add-noise": {
params: { amount: "Сила, %", mode: "Тип шума", seed: "Seed" }, params: { amount: "Сила, %", mode: "Тип шума", seed: "Seed" },
options: { mode: { mono: "Монохромное зерно", color: "Цветной шум" } }, options: { mode: { mono: "Монохромное зерно", color: "Цветной шум" } },
}, },
"silhouette-png": { silhouette: {
params: { color: "Цвет силуэта", threshold: "Порог видимости, %" }, params: { color: "Цвет силуэта", threshold: "Порог видимости, %" },
}, },
"bytes-to-png": { "from-bytes": {
params: { width: "Ширина изображения" }, params: { width: "Ширина изображения" },
}, },
"rgb-values-to-png": { "from-rgb-values": {
params: { width: "Ширина изображения" }, params: { width: "Ширина изображения" },
}, },
"verify-is-png": { "verify-png": {
results: { results: {
verifyYes: "Да — сигнатура настоящего PNG.", verifyYes: "Да — сигнатура настоящего PNG.",
verifyNo: "Нет — сигнатура не совпадает с PNG-файлом.", verifyNo: "Нет — сигнатура не совпадает с PNG-файлом.",
}, },
}, },
"text-to-png": { "from-text": {
params: { params: {
text: "Текст", text: "Текст",
fontSize: "Размер шрифта, px", fontSize: "Размер шрифта, px",
@@ -1357,10 +1357,10 @@ export const ru: Dict = {
padding: "Отступ, px", padding: "Отступ, px",
}, },
}, },
"emoji-to-png": { "from-emoji": {
params: { emoji: "Эмодзи / символ", size: "Размер" }, params: { emoji: "Эмодзи / символ", size: "Размер" },
}, },
"placeholder-png": { placeholder: {
params: { params: {
width: "Ширина", width: "Ширина",
height: "Высота", height: "Высота",
@@ -1369,7 +1369,7 @@ export const ru: Dict = {
showText: "Печатать размеры", showText: "Печатать размеры",
}, },
}, },
"color-spectrum-png": { "color-spectrum": {
params: { params: {
width: "Ширина", width: "Ширина",
height: "Высота", height: "Высота",
@@ -1381,7 +1381,7 @@ export const ru: Dict = {
direction: { horizontal: "По горизонтали", vertical: "По вертикали" }, direction: { horizontal: "По горизонтали", vertical: "По вертикали" },
}, },
}, },
"random-colors-png": { "random-colors": {
params: { params: {
width: "Ширина", width: "Ширина",
height: "Высота", height: "Высота",
@@ -1389,7 +1389,7 @@ export const ru: Dict = {
seed: "Seed", seed: "Seed",
}, },
}, },
"draw-grid-png": { "draw-grid": {
params: { params: {
width: "Ширина", width: "Ширина",
height: "Высота", height: "Высота",
@@ -1400,10 +1400,10 @@ export const ru: Dict = {
transparentBg: "Прозрачный фон", transparentBg: "Прозрачный фон",
}, },
}, },
"quantize-png": { quantize: {
params: { colors: "Цветов (k)" }, params: { colors: "Цветов (k)" },
}, },
"decrease-color-count-png": { "decrease-color-count": {
params: { maxColors: "Максимум цветов" }, params: { maxColors: "Максимум цветов" },
options: { options: {
maxColors: { maxColors: {
@@ -1421,21 +1421,21 @@ export const ru: Dict = {
}, },
}, },
}, },
"custom-palette-png": { "custom-palette": {
params: { colors: "Палитра (hex через запятую)" }, params: { colors: "Палитра (hex через запятую)" },
}, },
"dithering-png": { dithering: {
params: { colors: "Цветов (k)", pattern: "Узор" }, params: { colors: "Цветов (k)", pattern: "Узор" },
options: { options: {
pattern: { "floyd-steinberg": "Флойд–Стейнберг", bayer: "Байер 4×4" }, pattern: { "floyd-steinberg": "Флойд–Стейнберг", bayer: "Байер 4×4" },
}, },
}, },
"png-file-size": { "file-size": {
results: { results: {
line: "Размер PNG: {kb} КБ", line: "Размер PNG: {kb} КБ",
}, },
}, },
"show-transparent-png": { "show-transparent": {
params: { params: {
mode: "Режим маски", mode: "Режим маски",
color: "Цвет подсветки", color: "Цвет подсветки",
@@ -1445,7 +1445,7 @@ export const ru: Dict = {
mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" }, mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" },
}, },
}, },
"show-grayscale-pixels-png": { "show-grayscale-pixels": {
params: { params: {
tolerance: "Допуск по каналам", tolerance: "Допуск по каналам",
mode: "Режим маски", mode: "Режим маски",
@@ -1456,7 +1456,7 @@ export const ru: Dict = {
mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" }, mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" },
}, },
}, },
"show-color-pixels-png": { "show-color-pixels": {
params: { params: {
tolerance: "Допуск по каналам", tolerance: "Допуск по каналам",
mode: "Режим маски", mode: "Режим маски",
@@ -1467,7 +1467,7 @@ export const ru: Dict = {
mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" }, mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" },
}, },
}, },
"light-pixel-mask-png": { "light-pixel-mask": {
params: { params: {
threshold: "Порог яркости, %", threshold: "Порог яркости, %",
mode: "Режим маски", mode: "Режим маски",
@@ -1478,7 +1478,7 @@ export const ru: Dict = {
mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" }, mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" },
}, },
}, },
"dark-pixel-mask-png": { "dark-pixel-mask": {
params: { params: {
threshold: "Порог яркости, %", threshold: "Порог яркости, %",
mode: "Режим маски", mode: "Режим маски",
@@ -1489,7 +1489,7 @@ export const ru: Dict = {
mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" }, mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" },
}, },
}, },
"unique-color-mask-png": { "unique-color-mask": {
params: { params: {
rarity: "Максимум повторов", rarity: "Максимум повторов",
mode: "Режим маски", mode: "Режим маски",
@@ -1500,13 +1500,13 @@ export const ru: Dict = {
mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" }, mode: { binary: "Чёрно-белая маска", highlight: "Цветная подсветка" },
}, },
}, },
"extract-color-from-png": { "extract-color-from": {
params: { params: {
color: "Какой цвет оставить", color: "Какой цвет оставить",
tolerance: "Допуск похожести, %", tolerance: "Допуск похожести, %",
}, },
}, },
"watermark-tile-png": { "watermark-tile": {
params: { params: {
text: "Текст", text: "Текст",
fontSize: "Размер шрифта, px", fontSize: "Размер шрифта, px",
@@ -1519,7 +1519,7 @@ export const ru: Dict = {
bold: "Жирный", bold: "Жирный",
}, },
}, },
"add-text-png": { "add-text": {
params: { params: {
text: "Текст", text: "Текст",
fontSize: "Размер шрифта, px", fontSize: "Размер шрифта, px",
@@ -1533,7 +1533,7 @@ export const ru: Dict = {
plateOpacity: "Прозрачность плашки, %", plateOpacity: "Прозрачность плашки, %",
}, },
}, },
"date-stamp-png": { "date-stamp": {
params: { params: {
format: "Формат", format: "Формат",
fontSize: "Размер шрифта, px", fontSize: "Размер шрифта, px",
@@ -1547,47 +1547,47 @@ export const ru: Dict = {
plateOpacity: "Прозрачность плашки, %", plateOpacity: "Прозрачность плашки, %",
}, },
}, },
"skew-png": { skew: {
params: { degX: "Наклон по X, °", degY: "Наклон по Y, °" }, params: { degX: "Наклон по X, °", degY: "Наклон по Y, °" },
}, },
"rotate-free-png": { "rotate-free": {
params: { angle: "Угол, °" }, params: { angle: "Угол, °" },
}, },
"zoom-png": { zoom: {
params: { scale: "Масштаб, %" }, params: { scale: "Масштаб, %" },
}, },
"shift-png": { shift: {
params: { params: {
offsetX: "Смещение X, px", offsetX: "Смещение X, px",
offsetY: "Смещение Y, px", offsetY: "Смещение Y, px",
color: "Цвет фона", color: "Цвет фона",
}, },
}, },
"vignette-png": { vignette: {
params: { strength: "Сила затемнения, %" }, params: { strength: "Сила затемнения, %" },
}, },
"jpeg-artifacts-png": { "jpeg-artifacts": {
params: { quality: "Качество JPEG" }, params: { quality: "Качество JPEG" },
}, },
"gamma-png": { gamma: {
params: { value: "Гамма" }, params: { value: "Гамма" },
}, },
"temperature-png": { temperature: {
params: { percent: "Температура" }, params: { percent: "Температура" },
}, },
"tint-png": { tint: {
params: { color: "Цвет тонирования", strength: "Сила, %" }, params: { color: "Цвет тонирования", strength: "Сила, %" },
}, },
"svg-to-png": { "from-svg": {
params: { width: "Ширина результата, px" }, params: { width: "Ширина результата, px" },
}, },
"png-is-transparent": { "is-transparent": {
results: { results: {
transparentYes: "Да — есть прозрачные или полупрозрачные пиксели.", transparentYes: "Да — есть прозрачные или полупрозрачные пиксели.",
transparentNo: "Нет — все пиксели полностью непрозрачны.", transparentNo: "Нет — все пиксели полностью непрозрачны.",
}, },
}, },
"png-orientation": { orientation: {
results: { results: {
orientationPortrait: "Портрет — высота больше ширины.", orientationPortrait: "Портрет — высота больше ширины.",
orientationLandscape: "Ландшафт — ширина больше высоты.", orientationLandscape: "Ландшафт — ширина больше высоты.",
web/src/lib/i18n/schema-tool-strings.test.ts
+6 -6
View File
@@ -53,34 +53,34 @@ describe("searchPages (кросс-языковой поиск каталога)"
describe("verdictText (вердикт с vars)", () => { describe("verdictText (вердикт с vars)", () => {
it("интерполирует {vars} в обоих локалях", () => { it("интерполирует {vars} в обоих локалях", () => {
setLocale("ru"); setLocale("ru");
expect(verdictText("png-file-size", "line", { kb: "12.3" })).toBe( expect(verdictText("file-size", "line", { kb: "12.3" })).toBe(
"Размер PNG: 12.3 КБ", "Размер PNG: 12.3 КБ",
); );
setLocale("en"); setLocale("en");
expect(verdictText("png-file-size", "line", { kb: "12.3" })).toBe( expect(verdictText("file-size", "line", { kb: "12.3" })).toBe(
"PNG size: 12.3 KB", "PNG size: 12.3 KB",
); );
}); });
it("без vars возвращает ключ как есть при отсутствии в словаре", () => { it("без vars возвращает ключ как есть при отсутствии в словаре", () => {
expect(verdictText("png-file-size", "нет-такого")).toBe("нет-такого"); expect(verdictText("file-size", "нет-такого")).toBe("нет-такого");
}); });
it.each([ it.each([
[ [
"verify-is-png", "verify-png",
"verifyYes", "verifyYes",
"Да — сигнатура настоящего PNG.", "Да — сигнатура настоящего PNG.",
"Yes — this is a valid PNG signature.", "Yes — this is a valid PNG signature.",
], ],
[ [
"png-is-transparent", "is-transparent",
"transparentNo", "transparentNo",
"Нет — все пиксели полностью непрозрачны.", "Нет — все пиксели полностью непрозрачны.",
"No — all pixels are fully opaque.", "No — all pixels are fully opaque.",
], ],
[ [
"png-orientation", "orientation",
"orientationLandscape", "orientationLandscape",
"Ландшафт — ширина больше высоты.", "Ландшафт — ширина больше высоты.",
"Landscape — width is greater than height.", "Landscape — width is greater than height.",
web/src/lib/registry/pages/alpha.ts
+20 -20
View File
@@ -7,7 +7,7 @@ export const alphaPages: Page[] = [
description: description:
"Adds a colored ring outline around the opaque content with the chosen thickness.", "Adds a colored ring outline around the opaque content with the chosen thickness.",
category: "alpha", category: "alpha",
steps: [{ id: "add-stroke-png" }], steps: [{ id: "add-stroke" }],
}, },
{ {
slug: "find-contour-png", slug: "find-contour-png",
@@ -15,7 +15,7 @@ export const alphaPages: Page[] = [
description: description:
"Leaves only a line along the boundary of opaque regions in the chosen color and thickness.", "Leaves only a line along the boundary of opaque regions in the chosen color and thickness.",
category: "alpha", category: "alpha",
steps: [{ id: "find-contour-png" }], steps: [{ id: "find-contour" }],
}, },
{ {
slug: "remove-color-from-png", slug: "remove-color-from-png",
@@ -23,7 +23,7 @@ export const alphaPages: Page[] = [
description: description:
"Makes all pixels close to the chosen color transparent. The tolerance sets the allowed deviation as a percentage of the maximum color distance.", "Makes all pixels close to the chosen color transparent. The tolerance sets the allowed deviation as a percentage of the maximum color distance.",
category: "alpha", category: "alpha",
steps: [{ id: "remove-color-from-png" }], steps: [{ id: "remove-color-from" }],
}, },
{ {
slug: "circle-mask-png", slug: "circle-mask-png",
@@ -31,7 +31,7 @@ export const alphaPages: Page[] = [
description: description:
"Cuts the image into a circle. Diameter is set as a share of the smaller side.", "Cuts the image into a circle. Diameter is set as a share of the smaller side.",
category: "alpha", category: "alpha",
steps: [{ id: "circle-mask-png" }], steps: [{ id: "circle-mask" }],
}, },
{ {
slug: "square-mask-png", slug: "square-mask-png",
@@ -39,7 +39,7 @@ export const alphaPages: Page[] = [
description: description:
"Cuts the image into a rectangle with sides as a share of the smaller side.", "Cuts the image into a rectangle with sides as a share of the smaller side.",
category: "alpha", category: "alpha",
steps: [{ id: "square-mask-png" }], steps: [{ id: "square-mask" }],
}, },
{ {
slug: "star-mask-png", slug: "star-mask-png",
@@ -47,7 +47,7 @@ export const alphaPages: Page[] = [
description: description:
"Cuts the image into an n-pointed star with adjustable inner radius and rotation.", "Cuts the image into an n-pointed star with adjustable inner radius and rotation.",
category: "alpha", category: "alpha",
steps: [{ id: "star-mask-png" }], steps: [{ id: "star-mask" }],
}, },
{ {
slug: "wavy-mask-png", slug: "wavy-mask-png",
@@ -55,7 +55,7 @@ export const alphaPages: Page[] = [
description: description:
"Cuts the image into a wavy-edged circle: radius is modulated by a sine with chosen amplitude and frequency.", "Cuts the image into a wavy-edged circle: radius is modulated by a sine with chosen amplitude and frequency.",
category: "alpha", category: "alpha",
steps: [{ id: "wavy-mask-png" }], steps: [{ id: "wavy-mask" }],
}, },
{ {
slug: "remove-alpha-channel-png", slug: "remove-alpha-channel-png",
@@ -63,7 +63,7 @@ export const alphaPages: Page[] = [
description: description:
"Composites the image over a white background and saves without transparency.", "Composites the image over a white background and saves without transparency.",
category: "alpha", category: "alpha",
steps: [{ id: "remove-alpha-channel-png" }], steps: [{ id: "remove-alpha-channel" }],
}, },
{ {
slug: "set-alpha-channel-png", slug: "set-alpha-channel-png",
@@ -71,14 +71,14 @@ export const alphaPages: Page[] = [
description: description:
"Assigns the same opacity to all pixels; colors stay unchanged.", "Assigns the same opacity to all pixels; colors stay unchanged.",
category: "alpha", category: "alpha",
steps: [{ id: "set-alpha-channel-png" }], steps: [{ id: "set-alpha-channel" }],
}, },
{ {
slug: "extract-alpha-mask-png", slug: "extract-alpha-mask-png",
title: "Extract alpha mask PNG", title: "Extract alpha mask PNG",
description: "Turns transparency into a black-and-white opaque mask.", description: "Turns transparency into a black-and-white opaque mask.",
category: "alpha", category: "alpha",
steps: [{ id: "extract-alpha-mask-png" }], steps: [{ id: "extract-alpha-mask" }],
}, },
{ {
slug: "round-corners-png", slug: "round-corners-png",
@@ -86,14 +86,14 @@ export const alphaPages: Page[] = [
description: description:
"Clips corners by a radius set as a percentage of half the smaller side.", "Clips corners by a radius set as a percentage of half the smaller side.",
category: "alpha", category: "alpha",
steps: [{ id: "round-corners-png" }], steps: [{ id: "round-corners" }],
}, },
{ {
slug: "invert-alpha-png", slug: "invert-alpha-png",
title: "Invert alpha PNG", title: "Invert alpha PNG",
description: "Opaque areas become transparent and vice versa.", description: "Opaque areas become transparent and vice versa.",
category: "alpha", category: "alpha",
steps: [{ id: "invert-alpha-png" }], steps: [{ id: "invert-alpha" }],
}, },
{ {
slug: "remove-background-png", slug: "remove-background-png",
@@ -101,14 +101,14 @@ export const alphaPages: Page[] = [
description: description:
"Removes a solid background: by color with tolerance, outer regions from the edges only, or every matching pixel. Can smooth the boundary.", "Removes a solid background: by color with tolerance, outer regions from the edges only, or every matching pixel. Can smooth the boundary.",
category: "alpha", category: "alpha",
steps: [{ id: "remove-background-png" }], steps: [{ id: "remove-background" }],
}, },
{ {
slug: "make-thicker-png", slug: "make-thicker-png",
title: "Thicken PNG", title: "Thicken PNG",
description: "Expands opaque areas by the given number of pixels.", description: "Expands opaque areas by the given number of pixels.",
category: "alpha", category: "alpha",
steps: [{ id: "make-thicker-png" }], steps: [{ id: "make-thicker" }],
}, },
{ {
slug: "make-thinner-png", slug: "make-thinner-png",
@@ -116,7 +116,7 @@ export const alphaPages: Page[] = [
description: description:
"Shrinks opaque areas — thins the strokes of text and details.", "Shrinks opaque areas — thins the strokes of text and details.",
category: "alpha", category: "alpha",
steps: [{ id: "make-thinner-png" }], steps: [{ id: "make-thinner" }],
}, },
{ {
slug: "feather-edges-png", slug: "feather-edges-png",
@@ -124,7 +124,7 @@ export const alphaPages: Page[] = [
description: description:
"Blurs only the alpha channel: hard cutout edges become soft and gradual, colors stay untouched.", "Blurs only the alpha channel: hard cutout edges become soft and gradual, colors stay untouched.",
category: "alpha", category: "alpha",
steps: [{ id: "feather-edges-png" }], steps: [{ id: "feather-edges" }],
}, },
{ {
slug: "clean-edges-png", slug: "clean-edges-png",
@@ -132,7 +132,7 @@ export const alphaPages: Page[] = [
description: description:
"Replaces edge-halo colors of semi-transparent pixels with the nearest fully opaque color. Alpha stays as is.", "Replaces edge-halo colors of semi-transparent pixels with the nearest fully opaque color. Alpha stays as is.",
category: "alpha", category: "alpha",
steps: [{ id: "clean-edges-png" }], steps: [{ id: "clean-edges" }],
}, },
{ {
slug: "harden-alpha-png", slug: "harden-alpha-png",
@@ -140,7 +140,7 @@ export const alphaPages: Page[] = [
description: description:
"Binarizes the alpha channel by threshold: semi-transparent pixels become either fully transparent or fully opaque.", "Binarizes the alpha channel by threshold: semi-transparent pixels become either fully transparent or fully opaque.",
category: "alpha", category: "alpha",
steps: [{ id: "harden-alpha-png" }], steps: [{ id: "harden-alpha" }],
}, },
{ {
slug: "despeckle-alpha-png", slug: "despeckle-alpha-png",
@@ -148,13 +148,13 @@ export const alphaPages: Page[] = [
description: description:
"Opening: removes lone semi-transparent pixels and small specks.", "Opening: removes lone semi-transparent pixels and small specks.",
category: "alpha", category: "alpha",
steps: [{ id: "despeckle-alpha-png" }], steps: [{ id: "despeckle-alpha" }],
}, },
{ {
slug: "close-holes-png", slug: "close-holes-png",
title: "Close holes PNG", title: "Close holes PNG",
description: "Closing: fills lone transparent dots inside the object.", description: "Closing: fills lone transparent dots inside the object.",
category: "alpha", category: "alpha",
steps: [{ id: "close-holes-png" }], steps: [{ id: "close-holes" }],
}, },
]; ];
web/src/lib/registry/pages/analyze.ts
+12 -12
View File
@@ -7,7 +7,7 @@ export const analyzePages: Page[] = [
description: description:
"Keeps only pixels close to the chosen color and makes everything else transparent — the inverse of Remove Color.", "Keeps only pixels close to the chosen color and makes everything else transparent — the inverse of Remove Color.",
category: "analyze", category: "analyze",
steps: [{ id: "extract-color-from-png" }], steps: [{ id: "extract-color-from" }],
}, },
{ {
slug: "show-transparent-png", slug: "show-transparent-png",
@@ -15,7 +15,7 @@ export const analyzePages: Page[] = [
description: description:
"Highlights every transparent or semi-transparent pixel with the chosen color so gaps become obvious.", "Highlights every transparent or semi-transparent pixel with the chosen color so gaps become obvious.",
category: "analyze", category: "analyze",
steps: [{ id: "show-transparent-png" }], steps: [{ id: "show-transparent" }],
}, },
{ {
slug: "show-grayscale-pixels-png", slug: "show-grayscale-pixels-png",
@@ -23,7 +23,7 @@ export const analyzePages: Page[] = [
description: description:
"Finds pixels whose channels are nearly equal and renders them as a mask. Tolerance is in channel units.", "Finds pixels whose channels are nearly equal and renders them as a mask. Tolerance is in channel units.",
category: "analyze", category: "analyze",
steps: [{ id: "show-grayscale-pixels-png" }], steps: [{ id: "show-grayscale-pixels" }],
}, },
{ {
slug: "show-color-pixels-png", slug: "show-color-pixels-png",
@@ -31,21 +31,21 @@ export const analyzePages: Page[] = [
description: description:
"Finds colored (non-gray) pixels beyond the channel tolerance and renders them as a mask.", "Finds colored (non-gray) pixels beyond the channel tolerance and renders them as a mask.",
category: "analyze", category: "analyze",
steps: [{ id: "show-color-pixels-png" }], steps: [{ id: "show-color-pixels" }],
}, },
{ {
slug: "light-pixel-mask-png", slug: "light-pixel-mask-png",
title: "Light Pixel Mask PNG", title: "Light Pixel Mask PNG",
description: "Selects pixels brighter than the luminance threshold.", description: "Selects pixels brighter than the luminance threshold.",
category: "analyze", category: "analyze",
steps: [{ id: "light-pixel-mask-png" }], steps: [{ id: "light-pixel-mask" }],
}, },
{ {
slug: "dark-pixel-mask-png", slug: "dark-pixel-mask-png",
title: "Dark Pixel Mask PNG", title: "Dark Pixel Mask PNG",
description: "Selects pixels darker than the luminance threshold.", description: "Selects pixels darker than the luminance threshold.",
category: "analyze", category: "analyze",
steps: [{ id: "dark-pixel-mask-png" }], steps: [{ id: "dark-pixel-mask" }],
}, },
{ {
slug: "unique-color-mask-png", slug: "unique-color-mask-png",
@@ -53,7 +53,7 @@ export const analyzePages: Page[] = [
description: description:
"Selects colors that occur no more than the given number of times — rare and one-off pixels.", "Selects colors that occur no more than the given number of times — rare and one-off pixels.",
category: "analyze", category: "analyze",
steps: [{ id: "unique-color-mask-png" }], steps: [{ id: "unique-color-mask" }],
}, },
{ {
slug: "verify-is-png", slug: "verify-is-png",
@@ -61,14 +61,14 @@ export const analyzePages: Page[] = [
description: description:
"Checks the signature of pasted base64 / data-uri content and reports whether it is a real PNG.", "Checks the signature of pasted base64 / data-uri content and reports whether it is a real PNG.",
category: "analyze", category: "analyze",
steps: [{ id: "verify-is-png" }], steps: [{ id: "verify-png" }],
}, },
{ {
slug: "png-is-grayscale", slug: "png-is-grayscale",
title: "Check: is PNG grayscale?", title: "Check: is PNG grayscale?",
description: "Reports whether the image consists only of shades of gray.", description: "Reports whether the image consists only of shades of gray.",
category: "analyze", category: "analyze",
steps: [{ id: "png-is-grayscale" }], steps: [{ id: "is-grayscale" }],
}, },
{ {
slug: "png-file-size", slug: "png-file-size",
@@ -76,7 +76,7 @@ export const analyzePages: Page[] = [
description: description:
"Encodes the image as PNG and reports the resulting file size.", "Encodes the image as PNG and reports the resulting file size.",
category: "analyze", category: "analyze",
steps: [{ id: "png-file-size" }], steps: [{ id: "file-size" }],
}, },
{ {
slug: "png-is-transparent", slug: "png-is-transparent",
@@ -84,13 +84,13 @@ export const analyzePages: Page[] = [
description: description:
"Reports whether the image contains transparent or semi-transparent pixels.", "Reports whether the image contains transparent or semi-transparent pixels.",
category: "analyze", category: "analyze",
steps: [{ id: "png-is-transparent" }], steps: [{ id: "is-transparent" }],
}, },
{ {
slug: "png-orientation", slug: "png-orientation",
title: "PNG orientation", title: "PNG orientation",
description: "Reports whether it is portrait, landscape or square.", description: "Reports whether it is portrait, landscape or square.",
category: "analyze", category: "analyze",
steps: [{ id: "png-orientation" }], steps: [{ id: "orientation" }],
}, },
]; ];
web/src/lib/registry/pages/color.ts
+25 -25
View File
@@ -7,7 +7,7 @@ export const colorPages: Page[] = [
description: description:
"Recolors the image into two chosen colors by luminance threshold.", "Recolors the image into two chosen colors by luminance threshold.",
category: "color", category: "color",
steps: [{ id: "two-colors-png" }], steps: [{ id: "two-colors" }],
}, },
{ {
slug: "gamma-png", slug: "gamma-png",
@@ -15,7 +15,7 @@ export const colorPages: Page[] = [
description: description:
"Corrects midtone brightness. <1 darker, >1 lighter, 1 — unchanged.", "Corrects midtone brightness. <1 darker, >1 lighter, 1 — unchanged.",
category: "color", category: "color",
steps: [{ id: "gamma-png" }], steps: [{ id: "gamma" }],
}, },
{ {
slug: "temperature-png", slug: "temperature-png",
@@ -23,7 +23,7 @@ export const colorPages: Page[] = [
description: description:
"Positive values make the image warmer (more orange), negative ones cooler (more blue).", "Positive values make the image warmer (more orange), negative ones cooler (more blue).",
category: "color", category: "color",
steps: [{ id: "temperature-png" }], steps: [{ id: "temperature" }],
}, },
{ {
slug: "tint-png", slug: "tint-png",
@@ -31,7 +31,7 @@ export const colorPages: Page[] = [
description: description:
"Multiplies color channels by the chosen tint with the given strength.", "Multiplies color channels by the chosen tint with the given strength.",
category: "color", category: "color",
steps: [{ id: "tint-png" }], steps: [{ id: "tint" }],
}, },
{ {
slug: "quantize-png", slug: "quantize-png",
@@ -39,7 +39,7 @@ export const colorPages: Page[] = [
description: description:
"Reduces the image to k colors via median-cut palette. Transparent pixels are preserved.", "Reduces the image to k colors via median-cut palette. Transparent pixels are preserved.",
category: "color", category: "color",
steps: [{ id: "quantize-png" }], steps: [{ id: "quantize" }],
}, },
{ {
slug: "custom-palette-png", slug: "custom-palette-png",
@@ -47,7 +47,7 @@ export const colorPages: Page[] = [
description: description:
"Maps every pixel to the nearest color from your comma-separated hex list.", "Maps every pixel to the nearest color from your comma-separated hex list.",
category: "color", category: "color",
steps: [{ id: "custom-palette-png" }], steps: [{ id: "custom-palette" }],
}, },
{ {
slug: "dithering-png", slug: "dithering-png",
@@ -55,7 +55,7 @@ export const colorPages: Page[] = [
description: description:
"Applies Floyd–Steinberg error diffusion or ordered Bayer dithering while reducing to k colors.", "Applies Floyd–Steinberg error diffusion or ordered Bayer dithering while reducing to k colors.",
category: "color", category: "color",
steps: [{ id: "dithering-png" }], steps: [{ id: "dithering" }],
}, },
{ {
slug: "grayscale-png", slug: "grayscale-png",
@@ -63,7 +63,7 @@ export const colorPages: Page[] = [
description: description:
"Converts the image to shades of gray using the BT.601 luminance formula. Alpha is preserved.", "Converts the image to shades of gray using the BT.601 luminance formula. Alpha is preserved.",
category: "color", category: "color",
steps: [{ id: "grayscale-png" }], steps: [{ id: "grayscale" }],
}, },
{ {
slug: "invert-colors-png", slug: "invert-colors-png",
@@ -71,7 +71,7 @@ export const colorPages: Page[] = [
description: description:
"Inverts each color channel (255 − value). Alpha is unchanged.", "Inverts each color channel (255 − value). Alpha is unchanged.",
category: "color", category: "color",
steps: [{ id: "invert-colors-png" }], steps: [{ id: "invert-colors" }],
}, },
{ {
slug: "adjust-brightness-contrast-png", slug: "adjust-brightness-contrast-png",
@@ -79,7 +79,7 @@ export const colorPages: Page[] = [
description: description:
"Adjusts brightness and contrast in the range from −100 to +100. Zero means no change.", "Adjusts brightness and contrast in the range from −100 to +100. Zero means no change.",
category: "color", category: "color",
steps: [{ id: "adjust-brightness-contrast-png" }], steps: [{ id: "adjust-brightness-contrast" }],
}, },
{ {
slug: "change-png-opacity", slug: "change-png-opacity",
@@ -87,14 +87,14 @@ export const colorPages: Page[] = [
description: description:
"Multiplies the alpha channel by a percentage: 0% — fully transparent, 100% — unchanged.", "Multiplies the alpha channel by a percentage: 0% — fully transparent, 100% — unchanged.",
category: "color", category: "color",
steps: [{ id: "change-png-opacity" }], steps: [{ id: "change-opacity" }],
}, },
{ {
slug: "sepia-png", slug: "sepia-png",
title: "Sepia effect", title: "Sepia effect",
description: "Tints the image into the warm brown tones of classic sepia.", description: "Tints the image into the warm brown tones of classic sepia.",
category: "color", category: "color",
steps: [{ id: "sepia-png" }], steps: [{ id: "sepia" }],
}, },
{ {
slug: "change-png-hue", slug: "change-png-hue",
@@ -102,7 +102,7 @@ export const colorPages: Page[] = [
description: description:
"Shifts the hue around the circle. Saturation and lightness are preserved.", "Shifts the hue around the circle. Saturation and lightness are preserved.",
category: "color", category: "color",
steps: [{ id: "change-png-hue" }], steps: [{ id: "change-hue" }],
}, },
{ {
slug: "extract-channel-png", slug: "extract-channel-png",
@@ -110,7 +110,7 @@ export const colorPages: Page[] = [
description: description:
"Keeps only the chosen channel — red, green or blue — as shades of gray.", "Keeps only the chosen channel — red, green or blue — as shades of gray.",
category: "color", category: "color",
steps: [{ id: "extract-channel-png" }], steps: [{ id: "extract-channel" }],
}, },
{ {
slug: "swap-channels-png", slug: "swap-channels-png",
@@ -118,7 +118,7 @@ export const colorPages: Page[] = [
description: description:
"Swaps two color channels — a quick way to get unusual coloring.", "Swaps two color channels — a quick way to get unusual coloring.",
category: "color", category: "color",
steps: [{ id: "swap-channels-png" }], steps: [{ id: "swap-channels" }],
}, },
{ {
slug: "black-and-white-png", slug: "black-and-white-png",
@@ -126,14 +126,14 @@ export const colorPages: Page[] = [
description: description:
"Hard binarization by luminance: every pixel becomes black or white.", "Hard binarization by luminance: every pixel becomes black or white.",
category: "color", category: "color",
steps: [{ id: "black-and-white-png" }], steps: [{ id: "black-and-white" }],
}, },
{ {
slug: "posterize-png", slug: "posterize-png",
title: "Posterize PNG", title: "Posterize PNG",
description: "Reduces the number of levels per channel — a poster effect.", description: "Reduces the number of levels per channel — a poster effect.",
category: "color", category: "color",
steps: [{ id: "posterize-png" }], steps: [{ id: "posterize" }],
}, },
{ {
slug: "auto-contrast-png", slug: "auto-contrast-png",
@@ -141,7 +141,7 @@ export const colorPages: Page[] = [
description: description:
"Stretches each channel's range across the full available brightness range.", "Stretches each channel's range across the full available brightness range.",
category: "color", category: "color",
steps: [{ id: "auto-contrast-png" }], steps: [{ id: "auto-contrast" }],
}, },
{ {
slug: "decrease-color-count-png", slug: "decrease-color-count-png",
@@ -149,7 +149,7 @@ export const colorPages: Page[] = [
description: description:
"Median-cut engine as a quick way to drop to 2–256 colors. Presets marked (extreme/strong/balanced/light) match the classic compression levels.", "Median-cut engine as a quick way to drop to 2–256 colors. Presets marked (extreme/strong/balanced/light) match the classic compression levels.",
category: "color", category: "color",
steps: [{ id: "decrease-color-count-png" }], steps: [{ id: "decrease-color-count" }],
}, },
{ {
slug: "png-to-hsl", slug: "png-to-hsl",
@@ -157,7 +157,7 @@ export const colorPages: Page[] = [
description: description:
"Decomposes the image into Hue, Saturation and Lightness components.", "Decomposes the image into Hue, Saturation and Lightness components.",
category: "color", category: "color",
steps: [{ id: "png-to-hsl" }], steps: [{ id: "to-hsl" }],
}, },
{ {
slug: "png-to-hsv", slug: "png-to-hsv",
@@ -165,7 +165,7 @@ export const colorPages: Page[] = [
description: description:
"Decomposes the image into Hue, Saturation and Value (brightness) components.", "Decomposes the image into Hue, Saturation and Value (brightness) components.",
category: "color", category: "color",
steps: [{ id: "png-to-hsv" }], steps: [{ id: "to-hsv" }],
}, },
{ {
slug: "png-to-hsi", slug: "png-to-hsi",
@@ -173,7 +173,7 @@ export const colorPages: Page[] = [
description: description:
"Decomposes the image into Hue, Saturation and Intensity components.", "Decomposes the image into Hue, Saturation and Intensity components.",
category: "color", category: "color",
steps: [{ id: "png-to-hsi" }], steps: [{ id: "to-hsi" }],
}, },
{ {
slug: "png-to-cmyk", slug: "png-to-cmyk",
@@ -181,7 +181,7 @@ export const colorPages: Page[] = [
description: description:
"Decomposes the image into print-style Cyan, Magenta, Yellow and Key (black) components.", "Decomposes the image into print-style Cyan, Magenta, Yellow and Key (black) components.",
category: "color", category: "color",
steps: [{ id: "png-to-cmyk" }], steps: [{ id: "to-cmyk" }],
}, },
{ {
slug: "png-to-ycbcr", slug: "png-to-ycbcr",
@@ -189,7 +189,7 @@ export const colorPages: Page[] = [
description: description:
"Decomposes the image into Luma (Y) and Blue-difference / Red-difference chroma components.", "Decomposes the image into Luma (Y) and Blue-difference / Red-difference chroma components.",
category: "color", category: "color",
steps: [{ id: "png-to-ycbcr" }], steps: [{ id: "to-ycbcr" }],
}, },
{ {
slug: "png-to-lab", slug: "png-to-lab",
@@ -197,6 +197,6 @@ export const colorPages: Page[] = [
description: description:
"Decomposes the image into perceptual Lightness and green–magenta / blue–yellow opponents.", "Decomposes the image into perceptual Lightness and green–magenta / blue–yellow opponents.",
category: "color", category: "color",
steps: [{ id: "png-to-lab" }], steps: [{ id: "to-lab" }],
}, },
]; ];
web/src/lib/registry/pages/convert.ts
+14 -14
View File
@@ -7,7 +7,7 @@ export const convertPages: Page[] = [
description: description:
"Transparency is composited over the chosen backdrop color (white by default) and saved as JPEG.", "Transparency is composited over the chosen backdrop color (white by default) and saved as JPEG.",
category: "convert", category: "convert",
steps: [{ id: "convert-png-to-jpg" }], steps: [{ id: "to-jpg" }],
}, },
{ {
slug: "convert-png-to-webp", slug: "convert-png-to-webp",
@@ -15,7 +15,7 @@ export const convertPages: Page[] = [
description: description:
"Re-encodes the image into WebP with adjustable quality. Transparency is preserved.", "Re-encodes the image into WebP with adjustable quality. Transparency is preserved.",
category: "convert", category: "convert",
steps: [{ id: "convert-png-to-webp" }], steps: [{ id: "to-webp" }],
}, },
{ {
slug: "png-to-bmp", slug: "png-to-bmp",
@@ -23,7 +23,7 @@ export const convertPages: Page[] = [
description: description:
"Saves the image as 24-bit BMP without an alpha channel: transparency is replaced with a black background.", "Saves the image as 24-bit BMP without an alpha channel: transparency is replaced with a black background.",
category: "convert", category: "convert",
steps: [{ id: "png-to-bmp" }], steps: [{ id: "to-bmp" }],
}, },
{ {
slug: "png-to-base64", slug: "png-to-base64",
@@ -31,7 +31,7 @@ export const convertPages: Page[] = [
description: description:
"Encodes the image into a base64 string for embedding in code or styles.", "Encodes the image into a base64 string for embedding in code or styles.",
category: "convert", category: "convert",
steps: [{ id: "png-to-base64" }], steps: [{ id: "to-base64" }],
}, },
{ {
slug: "png-to-data-uri", slug: "png-to-data-uri",
@@ -39,7 +39,7 @@ export const convertPages: Page[] = [
description: description:
"Builds a full data-uri (data:image/png;base64,…) for embedding in HTML/CSS.", "Builds a full data-uri (data:image/png;base64,…) for embedding in HTML/CSS.",
category: "convert", category: "convert",
steps: [{ id: "png-to-data-uri" }], steps: [{ id: "to-data-uri" }],
}, },
{ {
slug: "png-to-hex", slug: "png-to-hex",
@@ -47,7 +47,7 @@ export const convertPages: Page[] = [
description: description:
"Shows all pixels as rrggbbaa hex values — row by row, space separated.", "Shows all pixels as rrggbbaa hex values — row by row, space separated.",
category: "convert", category: "convert",
steps: [{ id: "png-to-hex" }], steps: [{ id: "to-hex" }],
}, },
{ {
slug: "png-to-bytes", slug: "png-to-bytes",
@@ -55,7 +55,7 @@ export const convertPages: Page[] = [
description: description:
"Lists every pixel as four decimal bytes (R G B A), one image row per line.", "Lists every pixel as four decimal bytes (R G B A), one image row per line.",
category: "convert", category: "convert",
steps: [{ id: "png-to-bytes" }], steps: [{ id: "to-bytes" }],
}, },
{ {
slug: "png-to-rgb-values", slug: "png-to-rgb-values",
@@ -63,7 +63,7 @@ export const convertPages: Page[] = [
description: description:
"Lists every pixel as rgba(r, g, b, a), one image row per line.", "Lists every pixel as rgba(r, g, b, a), one image row per line.",
category: "convert", category: "convert",
steps: [{ id: "png-to-rgb-values" }], steps: [{ id: "to-rgb-values" }],
}, },
{ {
slug: "base64-to-png", slug: "base64-to-png",
@@ -71,14 +71,14 @@ export const convertPages: Page[] = [
description: description:
"Decodes a base64 string or data-uri back into an image. Paste the string on the left.", "Decodes a base64 string or data-uri back into an image. Paste the string on the left.",
category: "convert", category: "convert",
steps: [{ id: "base64-to-png" }], steps: [{ id: "from-base64" }],
}, },
{ {
slug: "data-uri-to-png", slug: "data-uri-to-png",
title: "Data URI to PNG", title: "Data URI to PNG",
description: "Decodes data:image/…;base64,… back into an image file.", description: "Decodes data:image/…;base64,… back into an image file.",
category: "convert", category: "convert",
steps: [{ id: "data-uri-to-png" }], steps: [{ id: "from-data-uri" }],
}, },
{ {
slug: "hex-to-png", slug: "hex-to-png",
@@ -86,7 +86,7 @@ export const convertPages: Page[] = [
description: description:
"Assembles an image from rrggbbaa hex values (space separated). Set the width — the height is computed automatically.", "Assembles an image from rrggbbaa hex values (space separated). Set the width — the height is computed automatically.",
category: "convert", category: "convert",
steps: [{ id: "hex-to-png" }], steps: [{ id: "from-hex" }],
}, },
{ {
slug: "bytes-to-png", slug: "bytes-to-png",
@@ -94,7 +94,7 @@ export const convertPages: Page[] = [
description: description:
"Assembles an image from decimal RGBA byte numbers (any separators). Set the width — height is computed automatically.", "Assembles an image from decimal RGBA byte numbers (any separators). Set the width — height is computed automatically.",
category: "convert", category: "convert",
steps: [{ id: "bytes-to-png" }], steps: [{ id: "from-bytes" }],
}, },
{ {
slug: "rgb-values-to-png", slug: "rgb-values-to-png",
@@ -102,7 +102,7 @@ export const convertPages: Page[] = [
description: description:
"Assembles an image from rgba(r, g, b, a) numbers. Set the width — height is computed automatically.", "Assembles an image from rgba(r, g, b, a) numbers. Set the width — height is computed automatically.",
category: "convert", category: "convert",
steps: [{ id: "rgb-values-to-png" }], steps: [{ id: "from-rgb-values" }],
}, },
{ {
slug: "svg-to-png", slug: "svg-to-png",
@@ -110,6 +110,6 @@ export const convertPages: Page[] = [
description: description:
"Decodes SVG markup into a raster image. Paste the SVG code on the left.", "Decodes SVG markup into a raster image. Paste the SVG code on the left.",
category: "convert", category: "convert",
steps: [{ id: "svg-to-png" }], steps: [{ id: "from-svg" }],
}, },
]; ];
web/src/lib/registry/pages/filters.ts
+8 -8
View File
@@ -7,7 +7,7 @@ export const filtersPages: Page[] = [
description: description:
"Gaussian blur: three passes of separable box blur — fast at any radius. Transparent edges do not darken.", "Gaussian blur: three passes of separable box blur — fast at any radius. Transparent edges do not darken.",
category: "filters", category: "filters",
steps: [{ id: "blur-png" }], steps: [{ id: "blur" }],
}, },
{ {
slug: "sharpen-png", slug: "sharpen-png",
@@ -15,7 +15,7 @@ export const filtersPages: Page[] = [
description: description:
"Emphasizes edges with a sharpening kernel; strength sets the blend with the original. 0% means no change.", "Emphasizes edges with a sharpening kernel; strength sets the blend with the original. 0% means no change.",
category: "filters", category: "filters",
steps: [{ id: "sharpen-png" }], steps: [{ id: "sharpen" }],
}, },
{ {
slug: "silhouette-png", slug: "silhouette-png",
@@ -23,7 +23,7 @@ export const filtersPages: Page[] = [
description: description:
"Turns all visible pixels into a single solid color while keeping their transparency — instant silhouette.", "Turns all visible pixels into a single solid color while keeping their transparency — instant silhouette.",
category: "filters", category: "filters",
steps: [{ id: "silhouette-png" }], steps: [{ id: "silhouette" }],
}, },
{ {
slug: "vignette-png", slug: "vignette-png",
@@ -31,7 +31,7 @@ export const filtersPages: Page[] = [
description: description:
"Smoothly darkens the edges of the image, leaving the center untouched.", "Smoothly darkens the edges of the image, leaving the center untouched.",
category: "filters", category: "filters",
steps: [{ id: "vignette-png" }], steps: [{ id: "vignette" }],
}, },
{ {
slug: "pixelate-png", slug: "pixelate-png",
@@ -39,7 +39,7 @@ export const filtersPages: Page[] = [
description: description:
"Averages every blockSize×blockSize area into one color — classic mosaic.", "Averages every blockSize×blockSize area into one color — classic mosaic.",
category: "filters", category: "filters",
steps: [{ id: "pixelate-png" }], steps: [{ id: "pixelate" }],
}, },
{ {
slug: "randomize-pixels-png", slug: "randomize-pixels-png",
@@ -47,7 +47,7 @@ export const filtersPages: Page[] = [
description: description:
"Shuffles blocks of the image between positions. Same seed gives the same arrangement.", "Shuffles blocks of the image between positions. Same seed gives the same arrangement.",
category: "filters", category: "filters",
steps: [{ id: "randomize-pixels-png" }], steps: [{ id: "randomize-pixels" }],
}, },
{ {
slug: "add-noise-png", slug: "add-noise-png",
@@ -55,7 +55,7 @@ export const filtersPages: Page[] = [
description: description:
"Adds film-grain style noise. Deterministic by seed; monochrome keeps original hue balance.", "Adds film-grain style noise. Deterministic by seed; monochrome keeps original hue balance.",
category: "filters", category: "filters",
steps: [{ id: "add-noise-png" }], steps: [{ id: "add-noise" }],
}, },
{ {
slug: "jpeg-artifacts-png", slug: "jpeg-artifacts-png",
@@ -63,6 +63,6 @@ export const filtersPages: Page[] = [
description: description:
"Simulates low-quality JPEG re-compression — visible blocks and smeared colors.", "Simulates low-quality JPEG re-compression — visible blocks and smeared colors.",
category: "filters", category: "filters",
steps: [{ id: "jpeg-artifacts-png" }], steps: [{ id: "jpeg-artifacts" }],
}, },
]; ];
web/src/lib/registry/pages/generate.ts
+21 -21
View File
@@ -7,14 +7,14 @@ export const generatePages: Page[] = [
description: description:
"Creates a blank canvas of the chosen dimensions, either transparent or filled with a solid color.", "Creates a blank canvas of the chosen dimensions, either transparent or filled with a solid color.",
category: "generate", category: "generate",
steps: [{ id: "create-empty-png" }], steps: [{ id: "create-empty" }],
}, },
{ {
slug: "single-color-png", slug: "single-color-png",
title: "Create solid color PNG", title: "Create solid color PNG",
description: "Generates a rectangle of the given size and color.", description: "Generates a rectangle of the given size and color.",
category: "generate", category: "generate",
steps: [{ id: "single-color-png" }], steps: [{ id: "single-color" }],
}, },
{ {
slug: "random-noise-png", slug: "random-noise-png",
@@ -22,7 +22,7 @@ export const generatePages: Page[] = [
description: description:
"Generates an image with random pixels. The seed fixes the result: one seed — one image.", "Generates an image with random pixels. The seed fixes the result: one seed — one image.",
category: "generate", category: "generate",
steps: [{ id: "random-noise-png" }], steps: [{ id: "random-noise" }],
}, },
{ {
slug: "linear-gradient-png", slug: "linear-gradient-png",
@@ -30,7 +30,7 @@ export const generatePages: Page[] = [
description: description:
"Generates a smooth transition between two colors along a chosen angle.", "Generates a smooth transition between two colors along a chosen angle.",
category: "generate", category: "generate",
steps: [{ id: "linear-gradient-png" }], steps: [{ id: "linear-gradient" }],
}, },
{ {
slug: "color-spectrum-png", slug: "color-spectrum-png",
@@ -38,7 +38,7 @@ export const generatePages: Page[] = [
description: description:
"Full hue rainbow 0–360° along the chosen axis with adjustable saturation and lightness.", "Full hue rainbow 0–360° along the chosen axis with adjustable saturation and lightness.",
category: "generate", category: "generate",
steps: [{ id: "color-spectrum-png" }], steps: [{ id: "color-spectrum" }],
}, },
{ {
slug: "random-colors-png", slug: "random-colors-png",
@@ -46,7 +46,7 @@ export const generatePages: Page[] = [
description: description:
"Fills the canvas with random vivid color blocks. Deterministic by seed.", "Fills the canvas with random vivid color blocks. Deterministic by seed.",
category: "generate", category: "generate",
steps: [{ id: "random-colors-png" }], steps: [{ id: "random-colors" }],
}, },
{ {
slug: "draw-grid-png", slug: "draw-grid-png",
@@ -54,7 +54,7 @@ export const generatePages: Page[] = [
description: description:
"Draws a grid with custom columns, rows and line width on a transparent or white background.", "Draws a grid with custom columns, rows and line width on a transparent or white background.",
category: "generate", category: "generate",
steps: [{ id: "draw-grid-png" }], steps: [{ id: "draw-grid" }],
}, },
{ {
slug: "placeholder-png", slug: "placeholder-png",
@@ -62,21 +62,21 @@ export const generatePages: Page[] = [
description: description:
"Generates a placeholder rectangle with its dimensions printed in the center.", "Generates a placeholder rectangle with its dimensions printed in the center.",
category: "generate", category: "generate",
steps: [{ id: "placeholder-png" }], steps: [{ id: "placeholder" }],
}, },
{ {
slug: "blend-two-png", slug: "blend-two-png",
title: "Blend Two Colors PNG", title: "Blend Two Colors PNG",
description: "A continuous horizontal gradient between two colors.", description: "A continuous horizontal gradient between two colors.",
category: "generate", category: "generate",
steps: [{ id: "blend-two-png" }], steps: [{ id: "blend-two" }],
}, },
{ {
slug: "step-colors-png", slug: "step-colors-png",
title: "Color Steps PNG", title: "Color Steps PNG",
description: "A discrete set of evenly spaced steps between two colors.", description: "A discrete set of evenly spaced steps between two colors.",
category: "generate", category: "generate",
steps: [{ id: "step-colors-png" }], steps: [{ id: "step-colors" }],
}, },
{ {
slug: "emoji-to-png", slug: "emoji-to-png",
@@ -84,7 +84,7 @@ export const generatePages: Page[] = [
description: description:
"Renders an emoji or any Unicode symbol as a transparent PNG of the chosen size.", "Renders an emoji or any Unicode symbol as a transparent PNG of the chosen size.",
category: "generate", category: "generate",
steps: [{ id: "emoji-to-png" }], steps: [{ id: "from-emoji" }],
}, },
{ {
slug: "color-wheel-png", slug: "color-wheel-png",
@@ -92,7 +92,7 @@ export const generatePages: Page[] = [
description: description:
"Generates an HSL color wheel: hue around the circle, saturation from center to edge, chosen lightness.", "Generates an HSL color wheel: hue around the circle, saturation from center to edge, chosen lightness.",
category: "generate", category: "generate",
steps: [{ id: "color-wheel-png" }], steps: [{ id: "color-wheel" }],
}, },
{ {
slug: "complementary-png", slug: "complementary-png",
@@ -100,14 +100,14 @@ export const generatePages: Page[] = [
description: description:
"Two opposite colors on the color wheel — the base and its complement.", "Two opposite colors on the color wheel — the base and its complement.",
category: "generate", category: "generate",
steps: [{ id: "complementary-png" }], steps: [{ id: "complementary" }],
}, },
{ {
slug: "triadic-png", slug: "triadic-png",
title: "Triadic Palette PNG", title: "Triadic Palette PNG",
description: "Three colors evenly spaced 120° apart on the color wheel.", description: "Three colors evenly spaced 120° apart on the color wheel.",
category: "generate", category: "generate",
steps: [{ id: "triadic-png" }], steps: [{ id: "triadic" }],
}, },
{ {
slug: "tetradic-png", slug: "tetradic-png",
@@ -115,7 +115,7 @@ export const generatePages: Page[] = [
description: description:
"Four colors in two complementary pairs, 90° apart on the wheel.", "Four colors in two complementary pairs, 90° apart on the wheel.",
category: "generate", category: "generate",
steps: [{ id: "tetradic-png" }], steps: [{ id: "tetradic" }],
}, },
{ {
slug: "analogous-png", slug: "analogous-png",
@@ -123,7 +123,7 @@ export const generatePages: Page[] = [
description: description:
"Neighboring hues around the base color — calm, related color scheme.", "Neighboring hues around the base color — calm, related color scheme.",
category: "generate", category: "generate",
steps: [{ id: "analogous-png" }], steps: [{ id: "analogous" }],
}, },
{ {
slug: "monochromatic-png", slug: "monochromatic-png",
@@ -131,14 +131,14 @@ export const generatePages: Page[] = [
description: description:
"Tones of a single hue: lightness varies within the chosen range, hue and saturation stay fixed.", "Tones of a single hue: lightness varies within the chosen range, hue and saturation stay fixed.",
category: "generate", category: "generate",
steps: [{ id: "monochromatic-png" }], steps: [{ id: "monochromatic" }],
}, },
{ {
slug: "shades-png", slug: "shades-png",
title: "Shade Ramp PNG", title: "Shade Ramp PNG",
description: "A ramp of the base color getting darker step by step.", description: "A ramp of the base color getting darker step by step.",
category: "generate", category: "generate",
steps: [{ id: "shades-png" }], steps: [{ id: "shades" }],
}, },
{ {
slug: "mix-colors-png", slug: "mix-colors-png",
@@ -146,7 +146,7 @@ export const generatePages: Page[] = [
description: description:
"Averages the selected colors into one swatch. Colors become one uniform fill.", "Averages the selected colors into one swatch. Colors become one uniform fill.",
category: "generate", category: "generate",
steps: [{ id: "mix-colors-png" }], steps: [{ id: "mix-colors" }],
}, },
{ {
slug: "sort-colors-png", slug: "sort-colors-png",
@@ -154,7 +154,7 @@ export const generatePages: Page[] = [
description: description:
"Renders the chosen colors as swatches sorted by hue, brightness or saturation.", "Renders the chosen colors as swatches sorted by hue, brightness or saturation.",
category: "generate", category: "generate",
steps: [{ id: "sort-colors-png" }], steps: [{ id: "sort-colors" }],
}, },
{ {
slug: "text-to-png", slug: "text-to-png",
@@ -162,6 +162,6 @@ export const generatePages: Page[] = [
description: description:
"Creates a PNG image from text: the canvas is sized to fit the label plus padding.", "Creates a PNG image from text: the canvas is sized to fit the label plus padding.",
category: "generate", category: "generate",
steps: [{ id: "text-to-png" }], steps: [{ id: "from-text" }],
}, },
]; ];
web/src/lib/registry/pages/geometry.ts
+19 -19
View File
@@ -7,7 +7,7 @@ export const geometryPages: Page[] = [
description: description:
"Draws a colored frame of the chosen thickness around the image.", "Draws a colored frame of the chosen thickness around the image.",
category: "geometry", category: "geometry",
steps: [{ id: "add-border-png" }], steps: [{ id: "add-border" }],
}, },
{ {
slug: "fit-on-background-png", slug: "fit-on-background-png",
@@ -15,7 +15,7 @@ export const geometryPages: Page[] = [
description: description:
"Places the image centered on a canvas of the given size with a transparent or colored background.", "Places the image centered on a canvas of the given size with a transparent or colored background.",
category: "geometry", category: "geometry",
steps: [{ id: "fit-on-background-png" }], steps: [{ id: "fit-on-background" }],
}, },
{ {
slug: "change-canvas-size-png", slug: "change-canvas-size-png",
@@ -23,7 +23,7 @@ export const geometryPages: Page[] = [
description: description:
"Sets the exact canvas size: overflow is cropped, missing space is filled with transparency. Anchor picks which part of the image stays.", "Sets the exact canvas size: overflow is cropped, missing space is filled with transparency. Anchor picks which part of the image stays.",
category: "geometry", category: "geometry",
steps: [{ id: "change-canvas-size-png" }], steps: [{ id: "change-canvas-size" }],
}, },
{ {
slug: "resize-png", slug: "resize-png",
@@ -31,7 +31,7 @@ export const geometryPages: Page[] = [
description: description:
"Scales the image with bilinear interpolation. With aspect kept, one side defines the scale; if both are set, the image fits inside them.", "Scales the image with bilinear interpolation. With aspect kept, one side defines the scale; if both are set, the image fits inside them.",
category: "geometry", category: "geometry",
steps: [{ id: "resize-png" }], steps: [{ id: "resize" }],
}, },
{ {
slug: "crop-png", slug: "crop-png",
@@ -39,21 +39,21 @@ export const geometryPages: Page[] = [
description: description:
"Cuts out a rectangular area. Coordinates and sizes may go beyond the image — the area is clipped to the intersection.", "Cuts out a rectangular area. Coordinates and sizes may go beyond the image — the area is clipped to the intersection.",
category: "geometry", category: "geometry",
steps: [{ id: "crop-png" }], steps: [{ id: "crop" }],
}, },
{ {
slug: "rotate-png", slug: "rotate-png",
title: "Rotate PNG", title: "Rotate PNG",
description: "Rotates by 90°, 180° or 270° clockwise without quality loss.", description: "Rotates by 90°, 180° or 270° clockwise without quality loss.",
category: "geometry", category: "geometry",
steps: [{ id: "rotate-png" }], steps: [{ id: "rotate" }],
}, },
{ {
slug: "flip-png", slug: "flip-png",
title: "Flip PNG", title: "Flip PNG",
description: "Mirrors horizontally or vertically without quality loss.", description: "Mirrors horizontally or vertically without quality loss.",
category: "geometry", category: "geometry",
steps: [{ id: "flip-png" }], steps: [{ id: "flip" }],
}, },
{ {
slug: "add-padding-png", slug: "add-padding-png",
@@ -61,14 +61,14 @@ export const geometryPages: Page[] = [
description: description:
"Expands the canvas on all sides by the chosen number of pixels.", "Expands the canvas on all sides by the chosen number of pixels.",
category: "geometry", category: "geometry",
steps: [{ id: "add-padding-png" }], steps: [{ id: "add-padding" }],
}, },
{ {
slug: "tile-png", slug: "tile-png",
title: "Tile PNG", title: "Tile PNG",
description: "Repeats the image in a grid of the chosen columns and rows.", description: "Repeats the image in a grid of the chosen columns and rows.",
category: "geometry", category: "geometry",
steps: [{ id: "tile-png" }], steps: [{ id: "tile" }],
}, },
{ {
slug: "split-into-parts-png", slug: "split-into-parts-png",
@@ -76,7 +76,7 @@ export const geometryPages: Page[] = [
description: description:
"Divides the image into a grid of equal-sized parts. The canvas is padded with transparency to keep every part the same size.", "Divides the image into a grid of equal-sized parts. The canvas is padded with transparency to keep every part the same size.",
category: "geometry", category: "geometry",
steps: [{ id: "split-into-parts-png" }], steps: [{ id: "split-into-parts" }],
}, },
{ {
slug: "center-by-alpha-png", slug: "center-by-alpha-png",
@@ -84,7 +84,7 @@ export const geometryPages: Page[] = [
description: description:
"Finds the opaque part of the image and centers it on the original canvas.", "Finds the opaque part of the image and centers it on the original canvas.",
category: "geometry", category: "geometry",
steps: [{ id: "center-by-alpha-png" }], steps: [{ id: "center-by-alpha" }],
}, },
{ {
slug: "skew-png", slug: "skew-png",
@@ -92,7 +92,7 @@ export const geometryPages: Page[] = [
description: description:
"Shifts content horizontally and vertically — a perspective effect.", "Shifts content horizontally and vertically — a perspective effect.",
category: "geometry", category: "geometry",
steps: [{ id: "skew-png" }], steps: [{ id: "skew" }],
}, },
{ {
slug: "rotate-free-png", slug: "rotate-free-png",
@@ -100,7 +100,7 @@ export const geometryPages: Page[] = [
description: description:
"Rotation by any angle. The canvas grows to fit the new bounds; corners stay transparent.", "Rotation by any angle. The canvas grows to fit the new bounds; corners stay transparent.",
category: "geometry", category: "geometry",
steps: [{ id: "rotate-free-png" }], steps: [{ id: "rotate-free" }],
}, },
{ {
slug: "zoom-png", slug: "zoom-png",
@@ -108,7 +108,7 @@ export const geometryPages: Page[] = [
description: description:
"Magnifies content toward the center. The canvas keeps its size — edges are cropped.", "Magnifies content toward the center. The canvas keeps its size — edges are cropped.",
category: "geometry", category: "geometry",
steps: [{ id: "zoom-png" }], steps: [{ id: "zoom" }],
}, },
{ {
slug: "trim-empty-space-png", slug: "trim-empty-space-png",
@@ -116,7 +116,7 @@ export const geometryPages: Page[] = [
description: description:
"Crops transparent borders around the content. Pixels with alpha above the threshold count as content.", "Crops transparent borders around the content. Pixels with alpha above the threshold count as content.",
category: "geometry", category: "geometry",
steps: [{ id: "trim-empty-space-png" }], steps: [{ id: "trim-empty-space" }],
}, },
{ {
slug: "change-aspect-ratio-png", slug: "change-aspect-ratio-png",
@@ -124,7 +124,7 @@ export const geometryPages: Page[] = [
description: description:
"Fits the image into a target aspect ratio: crop the center to fill, or pad with transparency.", "Fits the image into a target aspect ratio: crop the center to fill, or pad with transparency.",
category: "geometry", category: "geometry",
steps: [{ id: "change-aspect-ratio-png" }], steps: [{ id: "change-aspect-ratio" }],
}, },
{ {
slug: "swap-orientation-png", slug: "swap-orientation-png",
@@ -132,7 +132,7 @@ export const geometryPages: Page[] = [
description: description:
"Rotates the image by 90° when its orientation differs from the target — landscape becomes portrait and back. Square images are untouched.", "Rotates the image by 90° when its orientation differs from the target — landscape becomes portrait and back. Square images are untouched.",
category: "geometry", category: "geometry",
steps: [{ id: "swap-orientation-png" }], steps: [{ id: "swap-orientation" }],
}, },
{ {
slug: "symmetric-copy-png", slug: "symmetric-copy-png",
@@ -140,13 +140,13 @@ export const geometryPages: Page[] = [
description: description:
"Doubles the canvas by mirroring the kept side onto the empty half — instant symmetric pattern.", "Doubles the canvas by mirroring the kept side onto the empty half — instant symmetric pattern.",
category: "geometry", category: "geometry",
steps: [{ id: "symmetric-copy-png" }], steps: [{ id: "symmetric-copy" }],
}, },
{ {
slug: "shift-png", slug: "shift-png",
title: "Shift PNG", title: "Shift PNG",
description: "Moves content by the given X and Y offset.", description: "Moves content by the given X and Y offset.",
category: "geometry", category: "geometry",
steps: [{ id: "shift-png" }], steps: [{ id: "shift" }],
}, },
]; ];
web/src/lib/registry/pages/text.ts
+3 -3
View File
@@ -7,7 +7,7 @@ export const textPages: Page[] = [
description: description:
"Draws a text label on the image: font, size, color, bold, position on a 3×3 grid and an optional backing plate.", "Draws a text label on the image: font, size, color, bold, position on a 3×3 grid and an optional backing plate.",
category: "text", category: "text",
steps: [{ id: "add-text-png" }], steps: [{ id: "add-text" }],
}, },
{ {
slug: "date-stamp-png", slug: "date-stamp-png",
@@ -15,7 +15,7 @@ export const textPages: Page[] = [
description: description:
"Stamps the current date and time using a format string (YYYY MM DD hh mm ss tokens). Same styling options as Add text.", "Stamps the current date and time using a format string (YYYY MM DD hh mm ss tokens). Same styling options as Add text.",
category: "text", category: "text",
steps: [{ id: "date-stamp-png" }], steps: [{ id: "date-stamp" }],
}, },
{ {
slug: "watermark-tile-png", slug: "watermark-tile-png",
@@ -23,6 +23,6 @@ export const textPages: Page[] = [
description: description:
"Covers the image with a repeating diagonal semi-transparent text tile — a protection watermark.", "Covers the image with a repeating diagonal semi-transparent text tile — a protection watermark.",
category: "text", category: "text",
steps: [{ id: "watermark-tile-png" }], steps: [{ id: "watermark-tile" }],
}, },
]; ];
web/src/lib/registry/registry.test.ts
+43 -43
View File
@@ -92,7 +92,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("guard: input=none работает без источника", async () => { it("guard: input=none работает без источника", async () => {
const tool = TOOLS.find((t) => t.id === "create-empty-png")!; const tool = TOOLS.find((t) => t.id === "create-empty")!;
const img = asImage( const img = asImage(
await tool.run({ params: sanitizeSchemaParams(tool.schema, {}) }), await tool.run({ params: sanitizeSchemaParams(tool.schema, {}) }),
); );
@@ -112,12 +112,12 @@ describe("registry-new (переведённые инструменты)", () =>
it("DOM-dependent tools bypass the worker", () => { it("DOM-dependent tools bypass the worker", () => {
for (const id of [ for (const id of [
"png-to-base64", "to-base64",
"png-to-data-uri", "to-data-uri",
"base64-to-png", "from-base64",
"data-uri-to-png", "from-data-uri",
"jpeg-artifacts-png", "jpeg-artifacts",
"placeholder-png", "placeholder",
]) { ]) {
expect(TOOLS.find((tool) => tool.id === id)?.domOnly, id).toBe(true); expect(TOOLS.find((tool) => tool.id === id)?.domOnly, id).toBe(true);
} }
@@ -168,7 +168,7 @@ describe("registry-new (переведённые инструменты)", () =>
it("resize и crop получают размеры текущего source", async () => { it("resize и crop получают размеры текущего source", async () => {
const source = solid(64, 48); const source = solid(64, 48);
const resize = TOOLS.find((t) => t.id === "resize-png")!; const resize = TOOLS.find((t) => t.id === "resize")!;
const resizeDefaults = defaultSchemaParams(resize.schema, { source }); const resizeDefaults = defaultSchemaParams(resize.schema, { source });
expect(resizeDefaults.size).toEqual({ width: 64, height: 48 }); expect(resizeDefaults.size).toEqual({ width: 64, height: 48 });
const resized = asImage( const resized = asImage(
@@ -179,7 +179,7 @@ describe("registry-new (переведённые инструменты)", () =>
); );
expect([resized.width, resized.height]).toEqual([64, 48]); expect([resized.width, resized.height]).toEqual([64, 48]);
const crop = TOOLS.find((t) => t.id === "crop-png")!; const crop = TOOLS.find((t) => t.id === "crop")!;
const cropDefaults = defaultSchemaParams(crop.schema, { source }); const cropDefaults = defaultSchemaParams(crop.schema, { source });
expect(cropDefaults).toMatchObject({ expect(cropDefaults).toMatchObject({
x: 0, x: 0,
@@ -196,14 +196,14 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("create-empty: dimension-дефолты корректны", () => { it("create-empty: dimension-дефолты корректны", () => {
const tool = TOOLS.find((t) => t.id === "create-empty-png")!; const tool = TOOLS.find((t) => t.id === "create-empty")!;
const d = defaultSchemaParams(tool.schema); const d = defaultSchemaParams(tool.schema);
expect(d.size).toEqual({ width: 800, height: 600 }); expect(d.size).toEqual({ width: 800, height: 600 });
expect(d.transparent).toBe(true); expect(d.transparent).toBe(true);
}); });
it("sanitize клампит dimension к min/max и чинит мусор", () => { it("sanitize клампит dimension к min/max и чинит мусор", () => {
const tool = TOOLS.find((t) => t.id === "create-empty-png")!; const tool = TOOLS.find((t) => t.id === "create-empty")!;
const s = sanitizeSchemaParams(tool.schema, { const s = sanitizeSchemaParams(tool.schema, {
size: { width: 999999, height: -5 }, size: { width: 999999, height: -5 },
transparent: false, transparent: false,
@@ -215,7 +215,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("executeGenerate для create-empty даёт картинку нужного размера", async () => { it("executeGenerate для create-empty даёт картинку нужного размера", async () => {
const tool = TOOLS.find((t) => t.id === "create-empty-png")!; const tool = TOOLS.find((t) => t.id === "create-empty")!;
const params = sanitizeSchemaParams(tool.schema, { const params = sanitizeSchemaParams(tool.schema, {
size: { width: 320, height: 200 }, size: { width: 320, height: 200 },
transparent: true, transparent: true,
@@ -228,10 +228,10 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it.each([ it.each([
["single-color-png", { size: { width: 40, height: 30 }, color: "#00ff00" }], ["single-color", { size: { width: 40, height: 30 }, color: "#00ff00" }],
["random-noise-png", { size: { width: 40, height: 30 }, seed: 5 }], ["random-noise", { size: { width: 40, height: 30 }, seed: 5 }],
[ [
"linear-gradient-png", "linear-gradient",
{ {
size: { width: 40, height: 30 }, size: { width: 40, height: 30 },
gradient: { gradient: {
@@ -242,7 +242,7 @@ describe("registry-new (переведённые инструменты)", () =>
}, },
], ],
[ [
"color-spectrum-png", "color-spectrum",
{ {
size: { width: 40, height: 30 }, size: { width: 40, height: 30 },
direction: "horizontal", direction: "horizontal",
@@ -251,11 +251,11 @@ describe("registry-new (переведённые инструменты)", () =>
}, },
], ],
[ [
"random-colors-png", "random-colors",
{ size: { width: 40, height: 30 }, blockSize: 16, seed: 7 }, { size: { width: 40, height: 30 }, blockSize: 16, seed: 7 },
], ],
[ [
"draw-grid-png", "draw-grid",
{ {
size: { width: 40, height: 30 }, size: { width: 40, height: 30 },
cols: 4, cols: 4,
@@ -275,7 +275,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("random-noisе детерминирован по seed", async () => { it("random-noisе детерминирован по seed", async () => {
const tool = TOOLS.find((t) => t.id === "random-noise-png")!; const tool = TOOLS.find((t) => t.id === "random-noise")!;
const a = asImage( const a = asImage(
await tool.run({ await tool.run({
params: sanitizeSchemaParams(tool.schema, { params: sanitizeSchemaParams(tool.schema, {
@@ -296,7 +296,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("resize: keepAspect с одной стороной сохраняет пропорции", async () => { it("resize: keepAspect с одной стороной сохраняет пропорции", async () => {
const tool = TOOLS.find((t) => t.id === "resize-png")!; const tool = TOOLS.find((t) => t.id === "resize")!;
const img = solid(100, 50); const img = solid(100, 50);
const out = asImage( const out = asImage(
await tool.run({ await tool.run({
@@ -312,7 +312,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("crop вырезает область по x/y", async () => { it("crop вырезает область по x/y", async () => {
const tool = TOOLS.find((t) => t.id === "crop-png")!; const tool = TOOLS.find((t) => t.id === "crop")!;
const img = solid(100, 100); const img = solid(100, 100);
const out = asImage( const out = asImage(
await tool.run({ await tool.run({
@@ -329,7 +329,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("fit-on-background центрирует картинку на канвасе", async () => { it("fit-on-background центрирует картинку на канвасе", async () => {
const tool = TOOLS.find((t) => t.id === "fit-on-background-png")!; const tool = TOOLS.find((t) => t.id === "fit-on-background")!;
const img = solid(20, 10); const img = solid(20, 10);
const out = asImage( const out = asImage(
await tool.run({ await tool.run({
@@ -347,7 +347,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("change-canvas-size использует anchor для позиции", async () => { it("change-canvas-size использует anchor для позиции", async () => {
const tool = TOOLS.find((t) => t.id === "change-canvas-size-png")!; const tool = TOOLS.find((t) => t.id === "change-canvas-size")!;
const img = solid(10, 10); const img = solid(10, 10);
const out = asImage( const out = asImage(
await tool.run({ await tool.run({
@@ -367,7 +367,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("blend-two: дефолты пары и работа генератора", async () => { it("blend-two: дефолты пары и работа генератора", async () => {
const tool = TOOLS.find((t) => t.id === "blend-two-png")!; const tool = TOOLS.find((t) => t.id === "blend-two")!;
const d = defaultSchemaParams(tool.schema); const d = defaultSchemaParams(tool.schema);
expect(d.pair).toEqual({ from: "#000000", to: "#ffffff" }); expect(d.pair).toEqual({ from: "#000000", to: "#ffffff" });
const img = asImage( const img = asImage(
@@ -382,7 +382,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("step-colors: рендерит steps полос по паре", async () => { it("step-colors: рендерит steps полос по паре", async () => {
const tool = TOOLS.find((t) => t.id === "step-colors-png")!; const tool = TOOLS.find((t) => t.id === "step-colors")!;
const img = asImage( const img = asImage(
await tool.run({ await tool.run({
params: sanitizeSchemaParams(tool.schema, { params: sanitizeSchemaParams(tool.schema, {
@@ -397,7 +397,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("two-colors: перекрашивает светлые/тёмные пиксели по паре", async () => { it("two-colors: перекрашивает светлые/тёмные пиксели по паре", async () => {
const tool = TOOLS.find((t) => t.id === "two-colors-png")!; const tool = TOOLS.find((t) => t.id === "two-colors")!;
// 50×1, левая половина тёмная, правая светлая // 50×1, левая половина тёмная, правая светлая
const data = new Uint8ClampedArray(50 * 4).fill(255); const data = new Uint8ClampedArray(50 * 4).fill(255);
const img = { width: 50, height: 1, data }; const img = { width: 50, height: 1, data };
@@ -426,7 +426,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("linear-gradient: дефолты gradient и направление по углу", async () => { it("linear-gradient: дефолты gradient и направление по углу", async () => {
const tool = TOOLS.find((t) => t.id === "linear-gradient-png")!; const tool = TOOLS.find((t) => t.id === "linear-gradient")!;
const d = defaultSchemaParams(tool.schema); const d = defaultSchemaParams(tool.schema);
expect(d.gradient).toEqual({ expect(d.gradient).toEqual({
from: "#000000", from: "#000000",
@@ -469,7 +469,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("sanitize чинит мусор в gradient и клампит angle в 0..360", () => { it("sanitize чинит мусор в gradient и клампит angle в 0..360", () => {
const tool = TOOLS.find((t) => t.id === "linear-gradient-png")!; const tool = TOOLS.find((t) => t.id === "linear-gradient")!;
const s = sanitizeSchemaParams(tool.schema, { const s = sanitizeSchemaParams(tool.schema, {
size: { width: 10, height: 10 }, size: { width: 10, height: 10 },
gradient: { gradient: {
@@ -487,7 +487,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("sanitize чинит мусор в паре и клампит threshold", () => { it("sanitize чинит мусор в паре и клампит threshold", () => {
const tool = TOOLS.find((t) => t.id === "two-colors-png")!; const tool = TOOLS.find((t) => t.id === "two-colors")!;
const s = sanitizeSchemaParams(tool.schema, { const s = sanitizeSchemaParams(tool.schema, {
pair: { from: "not-a-color", to: "#00ff00", extra: 1 }, pair: { from: "not-a-color", to: "#00ff00", extra: 1 },
threshold: 999, threshold: 999,
@@ -497,7 +497,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("circle-mask: срезает углы и сохраняет центр", async () => { it("circle-mask: срезает углы и сохраняет центр", async () => {
const tool = TOOLS.find((t) => t.id === "circle-mask-png")!; const tool = TOOLS.find((t) => t.id === "circle-mask")!;
const img = asImage( const img = asImage(
await tool.run({ await tool.run({
source: solid(100, 100), source: solid(100, 100),
@@ -514,7 +514,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("circle-mask: offset сдвигает фигуру", async () => { it("circle-mask: offset сдвигает фигуру", async () => {
const tool = TOOLS.find((t) => t.id === "circle-mask-png")!; const tool = TOOLS.find((t) => t.id === "circle-mask")!;
const img = asImage( const img = asImage(
await tool.run({ await tool.run({
source: solid(100, 100), source: solid(100, 100),
@@ -530,7 +530,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("star-mask: сохраняет центр, режет углы", async () => { it("star-mask: сохраняет центр, режет углы", async () => {
const tool = TOOLS.find((t) => t.id === "star-mask-png")!; const tool = TOOLS.find((t) => t.id === "star-mask")!;
const img = asImage( const img = asImage(
await tool.run({ await tool.run({
source: solid(100, 100), source: solid(100, 100),
@@ -548,7 +548,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("sanitize клампит offset к min/max и чинит мусор", () => { it("sanitize клампит offset к min/max и чинит мусор", () => {
const tool = TOOLS.find((t) => t.id === "wavy-mask-png")!; const tool = TOOLS.find((t) => t.id === "wavy-mask")!;
const s = sanitizeSchemaParams(tool.schema, { const s = sanitizeSchemaParams(tool.schema, {
size: 90, size: 90,
amplitude: 8, amplitude: 8,
@@ -563,7 +563,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("add-text: дефолты position9, font-style, plate и текстовых полей", () => { it("add-text: дефолты position9, font-style, plate и текстовых полей", () => {
const tool = TOOLS.find((t) => t.id === "add-text-png")!; const tool = TOOLS.find((t) => t.id === "add-text")!;
const d = defaultSchemaParams(tool.schema); const d = defaultSchemaParams(tool.schema);
expect(d.position).toBe("bottom-right"); expect(d.position).toBe("bottom-right");
expect(d.text).toBe("Hello!"); expect(d.text).toBe("Hello!");
@@ -581,7 +581,7 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
it("sanitize чинит мусор в position9, font-style, plate и оставляет валидные значения", () => { it("sanitize чинит мусор в position9, font-style, plate и оставляет валидные значения", () => {
const tool = TOOLS.find((t) => t.id === "date-stamp-png")!; const tool = TOOLS.find((t) => t.id === "date-stamp")!;
const s = sanitizeSchemaParams(tool.schema, { const s = sanitizeSchemaParams(tool.schema, {
format: "YYYY-MM-DD", format: "YYYY-MM-DD",
style: { style: {
@@ -624,8 +624,8 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
}); });
it("text-to-png: дефолты font-style и sanitize", () => { it("from-text: дефолты font-style и sanitize", () => {
const tool = TOOLS.find((t) => t.id === "text-to-png")!; const tool = TOOLS.find((t) => t.id === "from-text")!;
const d = defaultSchemaParams(tool.schema); const d = defaultSchemaParams(tool.schema);
expect(d.style).toEqual({ expect(d.style).toEqual({
font: "sans", font: "sans",
@@ -647,9 +647,9 @@ describe("registry-new (переведённые инструменты)", () =>
}); });
}); });
describe("split-into-parts-png", () => { describe("split-into-parts", () => {
it("объявлен с result=files и дефолтом 2x2", () => { it("объявлен с result=files и дефолтом 2x2", () => {
const tool = TOOLS.find((t) => t.id === "split-into-parts-png")!; const tool = TOOLS.find((t) => t.id === "split-into-parts")!;
expect(tool).toBeDefined(); expect(tool).toBeDefined();
expect(tool.result).toBe("files"); expect(tool.result).toBe("files");
const defaults = sanitizeSchemaParams(tool.schema, {}); const defaults = sanitizeSchemaParams(tool.schema, {});
@@ -658,7 +658,7 @@ describe("split-into-parts-png", () => {
}); });
it("на ровном размере даёт cols*rows частей одинакового размера", async () => { it("на ровном размере даёт cols*rows частей одинакового размера", async () => {
const tool = TOOLS.find((t) => t.id === "split-into-parts-png")!; const tool = TOOLS.find((t) => t.id === "split-into-parts")!;
const files = asFiles( const files = asFiles(
await tool.run({ await tool.run({
source: solid(100, 100), source: solid(100, 100),
@@ -682,7 +682,7 @@ describe("split-into-parts-png", () => {
}); });
it("на неделимом размере части строго равные (канвас дополняется)", async () => { it("на неделимом размере части строго равные (канвас дополняется)", async () => {
const tool = TOOLS.find((t) => t.id === "split-into-parts-png")!; const tool = TOOLS.find((t) => t.id === "split-into-parts")!;
const files = asFiles( const files = asFiles(
await tool.run({ await tool.run({
source: solid(101, 77), source: solid(101, 77),
@@ -700,7 +700,7 @@ describe("split-into-parts-png", () => {
}); });
it("работает максимум 6x6 = 36 частей", async () => { it("работает максимум 6x6 = 36 частей", async () => {
const tool = TOOLS.find((t) => t.id === "split-into-parts-png")!; const tool = TOOLS.find((t) => t.id === "split-into-parts")!;
const files = asFiles( const files = asFiles(
await tool.run({ await tool.run({
source: solid(120, 120), source: solid(120, 120),
@@ -714,7 +714,7 @@ describe("split-into-parts-png", () => {
}); });
it("выбрасывает errors.tooManyParts при переполнении", () => { it("выбрасывает errors.tooManyParts при переполнении", () => {
const tool = TOOLS.find((t) => t.id === "split-into-parts-png")!; const tool = TOOLS.find((t) => t.id === "split-into-parts")!;
expect(() => expect(() =>
tool.run({ tool.run({
source: solid(120, 120), source: solid(120, 120),
web/src/lib/registry/tools/alpha.ts
+20 -20
View File
@@ -45,7 +45,7 @@ export const addStrokeSchema = toolSchema<AddStrokeParams>({
}); });
const addStroke: Tool<AddStrokeParams> = { const addStroke: Tool<AddStrokeParams> = {
id: "add-stroke-png", id: "add-stroke",
schema: addStrokeSchema, schema: addStrokeSchema,
input: "image", input: "image",
run: imgTool((img, p) => strokeImage(img, p.thickness, p.color)), run: imgTool((img, p) => strokeImage(img, p.thickness, p.color)),
@@ -68,7 +68,7 @@ export const findContourSchema = toolSchema<FindContourParams>({
}); });
const findContour: Tool<FindContourParams> = { const findContour: Tool<FindContourParams> = {
id: "find-contour-png", id: "find-contour",
schema: findContourSchema, schema: findContourSchema,
input: "image", input: "image",
run: imgTool((img, p) => contourImage(img, p.thickness, p.color)), run: imgTool((img, p) => contourImage(img, p.thickness, p.color)),
@@ -91,7 +91,7 @@ export const removeColorSchema = toolSchema<RemoveColorParams>({
}); });
const removeColor: Tool<RemoveColorParams> = { const removeColor: Tool<RemoveColorParams> = {
id: "remove-color-from-png", id: "remove-color-from",
schema: removeColorSchema, schema: removeColorSchema,
input: "image", input: "image",
run: imgTool((img, p) => removeColorToAlpha(img, p.targetColor, p.tolerance)), run: imgTool((img, p) => removeColorToAlpha(img, p.targetColor, p.tolerance)),
@@ -130,7 +130,7 @@ const circleMaskSchema = toolSchema<CircleMaskParams>(
); );
const circleMask: Tool<CircleMaskParams> = { const circleMask: Tool<CircleMaskParams> = {
id: "circle-mask-png", id: "circle-mask",
schema: circleMaskSchema, schema: circleMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -188,7 +188,7 @@ const squareMaskSchema = toolSchema<SquareMaskParams>(
); );
const squareMask: Tool<SquareMaskParams> = { const squareMask: Tool<SquareMaskParams> = {
id: "square-mask-png", id: "square-mask",
schema: squareMaskSchema, schema: squareMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -262,7 +262,7 @@ const starMaskSchema = toolSchema<StarMaskParams>(
); );
const starMask: Tool<StarMaskParams> = { const starMask: Tool<StarMaskParams> = {
id: "star-mask-png", id: "star-mask",
schema: starMaskSchema, schema: starMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -336,7 +336,7 @@ const wavyMaskSchema = toolSchema<WavyMaskParams>(
); );
const wavyMask: Tool<WavyMaskParams> = { const wavyMask: Tool<WavyMaskParams> = {
id: "wavy-mask-png", id: "wavy-mask",
schema: wavyMaskSchema, schema: wavyMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -354,7 +354,7 @@ interface EmptyParams {}
export const removeAlphaChannelSchema = toolSchema<EmptyParams>({}); export const removeAlphaChannelSchema = toolSchema<EmptyParams>({});
const removeAlphaChannel: Tool<EmptyParams> = { const removeAlphaChannel: Tool<EmptyParams> = {
id: "remove-alpha-channel-png", id: "remove-alpha-channel",
schema: removeAlphaChannelSchema, schema: removeAlphaChannelSchema,
input: "image", input: "image",
run: imgTool((img) => flattenOntoColor(img, "#ffffff")), run: imgTool((img) => flattenOntoColor(img, "#ffffff")),
@@ -375,7 +375,7 @@ export const setAlphaChannelSchema = toolSchema<SetAlphaChannelParams>({
}); });
const setAlphaChannelTool: Tool<SetAlphaChannelParams> = { const setAlphaChannelTool: Tool<SetAlphaChannelParams> = {
id: "set-alpha-channel-png", id: "set-alpha-channel",
schema: setAlphaChannelSchema, schema: setAlphaChannelSchema,
input: "image", input: "image",
run: imgTool((img, p) => setAlphaChannel(img, p.percent)), run: imgTool((img, p) => setAlphaChannel(img, p.percent)),
@@ -384,7 +384,7 @@ const setAlphaChannelTool: Tool<SetAlphaChannelParams> = {
export const extractAlphaMaskSchema = toolSchema<EmptyParams>({}); export const extractAlphaMaskSchema = toolSchema<EmptyParams>({});
const extractAlphaMaskTool: Tool<EmptyParams> = { const extractAlphaMaskTool: Tool<EmptyParams> = {
id: "extract-alpha-mask-png", id: "extract-alpha-mask",
schema: extractAlphaMaskSchema, schema: extractAlphaMaskSchema,
input: "image", input: "image",
run: imgTool((img) => extractAlphaMask(img)), run: imgTool((img) => extractAlphaMask(img)),
@@ -405,7 +405,7 @@ export const roundCornersSchema = toolSchema<RoundCornersParams>({
}); });
const roundCornersTool: Tool<RoundCornersParams> = { const roundCornersTool: Tool<RoundCornersParams> = {
id: "round-corners-png", id: "round-corners",
schema: roundCornersSchema, schema: roundCornersSchema,
input: "image", input: "image",
run: imgTool((img, p) => roundCorners(img, p.radius)), run: imgTool((img, p) => roundCorners(img, p.radius)),
@@ -414,7 +414,7 @@ const roundCornersTool: Tool<RoundCornersParams> = {
export const invertAlphaSchema = toolSchema<EmptyParams>({}); export const invertAlphaSchema = toolSchema<EmptyParams>({});
const invertAlphaTool: Tool<EmptyParams> = { const invertAlphaTool: Tool<EmptyParams> = {
id: "invert-alpha-png", id: "invert-alpha",
schema: invertAlphaSchema, schema: invertAlphaSchema,
input: "image", input: "image",
run: imgTool((img) => invertAlpha(img)), run: imgTool((img) => invertAlpha(img)),
@@ -461,7 +461,7 @@ export const removeBackgroundSchema = toolSchema<RemoveBackgroundParams>(
); );
const removeBackgroundTool: Tool<RemoveBackgroundParams> = { const removeBackgroundTool: Tool<RemoveBackgroundParams> = {
id: "remove-background-png", id: "remove-background",
schema: removeBackgroundSchema, schema: removeBackgroundSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -489,7 +489,7 @@ export const makeThickerSchema = toolSchema<MakeThickerParams>({
}); });
const makeThickerTool: Tool<MakeThickerParams> = { const makeThickerTool: Tool<MakeThickerParams> = {
id: "make-thicker-png", id: "make-thicker",
schema: makeThickerSchema, schema: makeThickerSchema,
input: "image", input: "image",
run: imgTool((img, p) => dilateImage(img, p.radius)), run: imgTool((img, p) => dilateImage(img, p.radius)),
@@ -510,7 +510,7 @@ export const makeThinnerSchema = toolSchema<MakeThinnerParams>({
}); });
const makeThinnerTool: Tool<MakeThinnerParams> = { const makeThinnerTool: Tool<MakeThinnerParams> = {
id: "make-thinner-png", id: "make-thinner",
schema: makeThinnerSchema, schema: makeThinnerSchema,
input: "image", input: "image",
run: imgTool((img, p) => erodeImage(img, p.radius)), run: imgTool((img, p) => erodeImage(img, p.radius)),
@@ -531,7 +531,7 @@ export const featherEdgesSchema = toolSchema<FeatherEdgesParams>({
}); });
const featherEdgesTool: Tool<FeatherEdgesParams> = { const featherEdgesTool: Tool<FeatherEdgesParams> = {
id: "feather-edges-png", id: "feather-edges",
schema: featherEdgesSchema, schema: featherEdgesSchema,
input: "image", input: "image",
run: imgTool((img, p) => featherAlpha(img, p.radius)), run: imgTool((img, p) => featherAlpha(img, p.radius)),
@@ -552,7 +552,7 @@ export const cleanEdgesSchema = toolSchema<CleanEdgesParams>({
}); });
const cleanEdgesTool: Tool<CleanEdgesParams> = { const cleanEdgesTool: Tool<CleanEdgesParams> = {
id: "clean-edges-png", id: "clean-edges",
schema: cleanEdgesSchema, schema: cleanEdgesSchema,
input: "image", input: "image",
run: imgTool((img, p) => defringe(img, p.radius)), run: imgTool((img, p) => defringe(img, p.radius)),
@@ -573,7 +573,7 @@ export const hardenAlphaSchema = toolSchema<HardenAlphaParams>({
}); });
const hardenAlphaTool: Tool<HardenAlphaParams> = { const hardenAlphaTool: Tool<HardenAlphaParams> = {
id: "harden-alpha-png", id: "harden-alpha",
schema: hardenAlphaSchema, schema: hardenAlphaSchema,
input: "image", input: "image",
run: imgTool((img, p) => hardenAlpha(img, p.threshold)), run: imgTool((img, p) => hardenAlpha(img, p.threshold)),
@@ -594,7 +594,7 @@ export const despeckleAlphaSchema = toolSchema<DespeckleAlphaParams>({
}); });
const despeckleAlphaTool: Tool<DespeckleAlphaParams> = { const despeckleAlphaTool: Tool<DespeckleAlphaParams> = {
id: "despeckle-alpha-png", id: "despeckle-alpha",
schema: despeckleAlphaSchema, schema: despeckleAlphaSchema,
input: "image", input: "image",
run: imgTool((img, p) => openingImage(img, p.radius)), run: imgTool((img, p) => openingImage(img, p.radius)),
@@ -615,7 +615,7 @@ export const closeHolesSchema = toolSchema<CloseHolesParams>({
}); });
const closeHolesTool: Tool<CloseHolesParams> = { const closeHolesTool: Tool<CloseHolesParams> = {
id: "close-holes-png", id: "close-holes",
schema: closeHolesSchema, schema: closeHolesSchema,
input: "image", input: "image",
run: imgTool((img, p) => closingImage(img, p.radius)), run: imgTool((img, p) => closingImage(img, p.radius)),
web/src/lib/registry/tools/analyze.ts
+12 -12
View File
@@ -32,7 +32,7 @@ export const extractColorSchema = toolSchema<ExtractColorParams>({
}); });
const extractColor: Tool<ExtractColorParams> = { const extractColor: Tool<ExtractColorParams> = {
id: "extract-color-from-png", id: "extract-color-from",
schema: extractColorSchema, schema: extractColorSchema,
input: "image", input: "image",
run: imgTool((img, p) => extractByColor(img, p.color, p.tolerance)), run: imgTool((img, p) => extractByColor(img, p.color, p.tolerance)),
@@ -88,7 +88,7 @@ export const showTransparentSchema = toolSchema<MaskParams>({
}); });
const showTransparent: Tool<MaskParams> = { const showTransparent: Tool<MaskParams> = {
id: "show-transparent-png", id: "show-transparent",
schema: showTransparentSchema, schema: showTransparentSchema,
input: "image", input: "image",
run: imgTool((img, p) => renderMask(img, p, (_r, _g, _b, a) => a < 255)), run: imgTool((img, p) => renderMask(img, p, (_r, _g, _b, a) => a < 255)),
@@ -110,7 +110,7 @@ export const showGrayscalePixelsSchema = toolSchema<GrayscalePixelsParams>({
}); });
const showGrayscalePixels: Tool<GrayscalePixelsParams> = { const showGrayscalePixels: Tool<GrayscalePixelsParams> = {
id: "show-grayscale-pixels-png", id: "show-grayscale-pixels",
schema: showGrayscalePixelsSchema, schema: showGrayscalePixelsSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -134,7 +134,7 @@ export const showColorPixelsSchema = toolSchema<ColorPixelsParams>({
}); });
const showColorPixels: Tool<ColorPixelsParams> = { const showColorPixels: Tool<ColorPixelsParams> = {
id: "show-color-pixels-png", id: "show-color-pixels",
schema: showColorPixelsSchema, schema: showColorPixelsSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -158,7 +158,7 @@ export const lightPixelMaskSchema = toolSchema<LightPixelParams>({
}); });
const lightPixelMask: Tool<LightPixelParams> = { const lightPixelMask: Tool<LightPixelParams> = {
id: "light-pixel-mask-png", id: "light-pixel-mask",
schema: lightPixelMaskSchema, schema: lightPixelMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -182,7 +182,7 @@ export const darkPixelMaskSchema = toolSchema<DarkPixelParams>({
}); });
const darkPixelMask: Tool<DarkPixelParams> = { const darkPixelMask: Tool<DarkPixelParams> = {
id: "dark-pixel-mask-png", id: "dark-pixel-mask",
schema: darkPixelMaskSchema, schema: darkPixelMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -206,7 +206,7 @@ export const uniqueColorMaskSchema = toolSchema<UniqueColorParams>({
}); });
const uniqueColorMask: Tool<UniqueColorParams> = { const uniqueColorMask: Tool<UniqueColorParams> = {
id: "unique-color-mask-png", id: "unique-color-mask",
schema: uniqueColorMaskSchema, schema: uniqueColorMaskSchema,
input: "image", input: "image",
run: imgTool((img, p) => renderMask(img, p, rarityPredicate(img, p.rarity))), run: imgTool((img, p) => renderMask(img, p, rarityPredicate(img, p.rarity))),
@@ -217,7 +217,7 @@ interface NoParams {}
const emptySchema = toolSchema<NoParams>({}); const emptySchema = toolSchema<NoParams>({});
const verifyIsPng: Tool<NoParams> = { const verifyIsPng: Tool<NoParams> = {
id: "verify-is-png", id: "verify-png",
schema: emptySchema, schema: emptySchema,
input: "text", input: "text",
result: "verdict", result: "verdict",
@@ -227,7 +227,7 @@ const verifyIsPng: Tool<NoParams> = {
}; };
const pngIsGrayscale: Tool<NoParams> = { const pngIsGrayscale: Tool<NoParams> = {
id: "png-is-grayscale", id: "is-grayscale",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "verdict", result: "verdict",
@@ -235,7 +235,7 @@ const pngIsGrayscale: Tool<NoParams> = {
}; };
const pngFileSize: Tool<NoParams> = { const pngFileSize: Tool<NoParams> = {
id: "png-file-size", id: "file-size",
schema: emptySchema, schema: emptySchema,
domOnly: true, domOnly: true,
input: "image", input: "image",
@@ -249,7 +249,7 @@ const pngFileSize: Tool<NoParams> = {
}; };
const pngIsTransparent: Tool<NoParams> = { const pngIsTransparent: Tool<NoParams> = {
id: "png-is-transparent", id: "is-transparent",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "verdict", result: "verdict",
@@ -259,7 +259,7 @@ const pngIsTransparent: Tool<NoParams> = {
}; };
const pngOrientation: Tool<NoParams> = { const pngOrientation: Tool<NoParams> = {
id: "png-orientation", id: "orientation",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "verdict", result: "verdict",
web/src/lib/registry/tools/color.ts
+20 -20
View File
@@ -44,7 +44,7 @@ export const twoColorsSchema = toolSchema<TwoColorsParams>({
}); });
const twoColorsTool: Tool<TwoColorsParams> = { const twoColorsTool: Tool<TwoColorsParams> = {
id: "two-colors-png", id: "two-colors",
schema: twoColorsSchema, schema: twoColorsSchema,
input: "image", input: "image",
run: imgTool((img, p) => twoColors(img, p.pair.from, p.pair.to, p.threshold)), run: imgTool((img, p) => twoColors(img, p.pair.from, p.pair.to, p.threshold)),
@@ -65,7 +65,7 @@ export const gammaSchema = toolSchema<GammaParams>({
}); });
const gammaTool: Tool<GammaParams> = { const gammaTool: Tool<GammaParams> = {
id: "gamma-png", id: "gamma",
schema: gammaSchema, schema: gammaSchema,
input: "image", input: "image",
run: imgTool((img, p) => gammaCorrection(img, p.value)), run: imgTool((img, p) => gammaCorrection(img, p.value)),
@@ -86,7 +86,7 @@ export const temperatureSchema = toolSchema<TemperatureParams>({
}); });
const temperatureTool: Tool<TemperatureParams> = { const temperatureTool: Tool<TemperatureParams> = {
id: "temperature-png", id: "temperature",
schema: temperatureSchema, schema: temperatureSchema,
input: "image", input: "image",
run: imgTool((img, p) => temperature(img, p.percent)), run: imgTool((img, p) => temperature(img, p.percent)),
@@ -109,7 +109,7 @@ export const tintSchema = toolSchema<TintParams>({
}); });
const tintTool: Tool<TintParams> = { const tintTool: Tool<TintParams> = {
id: "tint-png", id: "tint",
schema: tintSchema, schema: tintSchema,
input: "image", input: "image",
run: imgTool((img, p) => tint(img, p.color, p.strength)), run: imgTool((img, p) => tint(img, p.color, p.strength)),
@@ -130,7 +130,7 @@ export const quantizeSchema = toolSchema<QuantizeParams>({
}); });
const quantizeTool: Tool<QuantizeParams> = { const quantizeTool: Tool<QuantizeParams> = {
id: "quantize-png", id: "quantize",
schema: quantizeSchema, schema: quantizeSchema,
input: "image", input: "image",
run: imgTool((img, p) => quantizeImage(img, p.colors).image), run: imgTool((img, p) => quantizeImage(img, p.colors).image),
@@ -145,7 +145,7 @@ export const customPaletteSchema = toolSchema<CustomPaletteParams>({
}); });
const customPalette: Tool<CustomPaletteParams> = { const customPalette: Tool<CustomPaletteParams> = {
id: "custom-palette-png", id: "custom-palette",
schema: customPaletteSchema, schema: customPaletteSchema,
input: "image", input: "image",
run: imgTool((img, p) => mapToNearest(img, parseHexList(p.colors))), run: imgTool((img, p) => mapToNearest(img, parseHexList(p.colors))),
@@ -175,7 +175,7 @@ export const ditheringSchema = toolSchema<DitheringParams>({
}); });
const ditheringTool: Tool<DitheringParams> = { const ditheringTool: Tool<DitheringParams> = {
id: "dithering-png", id: "dithering",
schema: ditheringSchema, schema: ditheringSchema,
input: "image", input: "image",
run: imgTool((img, p) => ditherImage(img, p.colors, p.pattern)), run: imgTool((img, p) => ditherImage(img, p.colors, p.pattern)),
@@ -186,7 +186,7 @@ interface EmptyParams {}
export const grayscaleSchema = toolSchema<EmptyParams>({}); export const grayscaleSchema = toolSchema<EmptyParams>({});
const grayscaleTool: Tool<EmptyParams> = { const grayscaleTool: Tool<EmptyParams> = {
id: "grayscale-png", id: "grayscale",
schema: grayscaleSchema, schema: grayscaleSchema,
input: "image", input: "image",
run: imgTool((img) => grayscale(img)), run: imgTool((img) => grayscale(img)),
@@ -195,7 +195,7 @@ const grayscaleTool: Tool<EmptyParams> = {
export const invertColorsSchema = toolSchema<EmptyParams>({}); export const invertColorsSchema = toolSchema<EmptyParams>({});
const invertColorsTool: Tool<EmptyParams> = { const invertColorsTool: Tool<EmptyParams> = {
id: "invert-colors-png", id: "invert-colors",
schema: invertColorsSchema, schema: invertColorsSchema,
input: "image", input: "image",
run: imgTool((img) => invert(img)), run: imgTool((img) => invert(img)),
@@ -233,7 +233,7 @@ export const brightnessContrastSchema = toolSchema<BrightnessContrastParams>(
); );
const brightnessContrastTool: Tool<BrightnessContrastParams> = { const brightnessContrastTool: Tool<BrightnessContrastParams> = {
id: "adjust-brightness-contrast-png", id: "adjust-brightness-contrast",
schema: brightnessContrastSchema, schema: brightnessContrastSchema,
input: "image", input: "image",
run: imgTool((img, p) => brightnessContrast(img, p.brightness, p.contrast)), run: imgTool((img, p) => brightnessContrast(img, p.brightness, p.contrast)),
@@ -254,7 +254,7 @@ export const opacitySchema = toolSchema<OpacityParams>({
}); });
const opacityTool: Tool<OpacityParams> = { const opacityTool: Tool<OpacityParams> = {
id: "change-png-opacity", id: "change-opacity",
schema: opacitySchema, schema: opacitySchema,
input: "image", input: "image",
run: imgTool((img, p) => setOpacity(img, p.percent)), run: imgTool((img, p) => setOpacity(img, p.percent)),
@@ -263,7 +263,7 @@ const opacityTool: Tool<OpacityParams> = {
export const sepiaSchema = toolSchema<EmptyParams>({}); export const sepiaSchema = toolSchema<EmptyParams>({});
const sepiaTool: Tool<EmptyParams> = { const sepiaTool: Tool<EmptyParams> = {
id: "sepia-png", id: "sepia",
schema: sepiaSchema, schema: sepiaSchema,
input: "image", input: "image",
run: imgTool((img) => sepia(img)), run: imgTool((img) => sepia(img)),
@@ -284,7 +284,7 @@ export const hueShiftSchema = toolSchema<HueShiftParams>({
}); });
const hueShiftTool: Tool<HueShiftParams> = { const hueShiftTool: Tool<HueShiftParams> = {
id: "change-png-hue", id: "change-hue",
schema: hueShiftSchema, schema: hueShiftSchema,
input: "image", input: "image",
run: imgTool((img, p) => changeHue(img, p.degrees)), run: imgTool((img, p) => changeHue(img, p.degrees)),
@@ -307,7 +307,7 @@ export const extractChannelSchema = toolSchema<ExtractChannelParams>({
}); });
const extractChannelTool: Tool<ExtractChannelParams> = { const extractChannelTool: Tool<ExtractChannelParams> = {
id: "extract-channel-png", id: "extract-channel",
schema: extractChannelSchema, schema: extractChannelSchema,
input: "image", input: "image",
run: imgTool((img, p) => extractChannel(img, p.channel)), run: imgTool((img, p) => extractChannel(img, p.channel)),
@@ -330,7 +330,7 @@ export const swapChannelsSchema = toolSchema<SwapChannelsParams>({
}); });
const swapChannelsTool: Tool<SwapChannelsParams> = { const swapChannelsTool: Tool<SwapChannelsParams> = {
id: "swap-channels-png", id: "swap-channels",
schema: swapChannelsSchema, schema: swapChannelsSchema,
input: "image", input: "image",
run: imgTool((img, p) => swapChannels(img, p.pair)), run: imgTool((img, p) => swapChannels(img, p.pair)),
@@ -351,7 +351,7 @@ export const blackAndWhiteSchema = toolSchema<BlackAndWhiteParams>({
}); });
const blackAndWhiteTool: Tool<BlackAndWhiteParams> = { const blackAndWhiteTool: Tool<BlackAndWhiteParams> = {
id: "black-and-white-png", id: "black-and-white",
schema: blackAndWhiteSchema, schema: blackAndWhiteSchema,
input: "image", input: "image",
run: imgTool((img, p) => thresholdBlackWhite(img, p.threshold)), run: imgTool((img, p) => thresholdBlackWhite(img, p.threshold)),
@@ -372,7 +372,7 @@ export const posterizeSchema = toolSchema<PosterizeParams>({
}); });
const posterizeTool: Tool<PosterizeParams> = { const posterizeTool: Tool<PosterizeParams> = {
id: "posterize-png", id: "posterize",
schema: posterizeSchema, schema: posterizeSchema,
input: "image", input: "image",
run: imgTool((img, p) => posterize(img, p.levels)), run: imgTool((img, p) => posterize(img, p.levels)),
@@ -381,7 +381,7 @@ const posterizeTool: Tool<PosterizeParams> = {
export const autoContrastSchema = toolSchema<EmptyParams>({}); export const autoContrastSchema = toolSchema<EmptyParams>({});
const autoContrastTool: Tool<EmptyParams> = { const autoContrastTool: Tool<EmptyParams> = {
id: "auto-contrast-png", id: "auto-contrast",
schema: autoContrastSchema, schema: autoContrastSchema,
input: "image", input: "image",
run: imgTool((img) => autoContrast(img)), run: imgTool((img) => autoContrast(img)),
@@ -413,7 +413,7 @@ export const decreaseColorCountSchema = toolSchema<DecreaseColorCountParams>({
}); });
const decreaseColorCountTool: Tool<DecreaseColorCountParams> = { const decreaseColorCountTool: Tool<DecreaseColorCountParams> = {
id: "decrease-color-count-png", id: "decrease-color-count",
schema: decreaseColorCountSchema, schema: decreaseColorCountSchema,
input: "image", input: "image",
run: imgTool((img, p) => quantizeImage(img, Number(p.maxColors)).image), run: imgTool((img, p) => quantizeImage(img, Number(p.maxColors)).image),
@@ -432,7 +432,7 @@ function channelEntries(): Tool<ChannelParams>[] {
return CHANNEL_SPACES.map((space) => { return CHANNEL_SPACES.map((space) => {
const components = SPACES[space].components; const components = SPACES[space].components;
return { return {
id: `png-to-${space}`, id: `to-${space}`,
schema: toolSchema<ChannelParams>({ schema: toolSchema<ChannelParams>({
component: field.select({ component: field.select({
label: "fields.component", label: "fields.component",
web/src/lib/registry/tools/convert.ts
+14 -14
View File
@@ -39,7 +39,7 @@ export const convertToJpgSchema = toolSchema<ConvertToJpgParams>({
}); });
const convertToJpg: Tool<ConvertToJpgParams> = { const convertToJpg: Tool<ConvertToJpgParams> = {
id: "convert-png-to-jpg", id: "to-jpg",
schema: convertToJpgSchema, schema: convertToJpgSchema,
input: "image", input: "image",
run: imgTool((img, p) => flattenOntoColor(img, p.background)), run: imgTool((img, p) => flattenOntoColor(img, p.background)),
@@ -61,7 +61,7 @@ export const convertToWebpSchema = toolSchema<ConvertToWebpParams>({
}); });
const convertToWebp: Tool<ConvertToWebpParams> = { const convertToWebp: Tool<ConvertToWebpParams> = {
id: "convert-png-to-webp", id: "to-webp",
schema: convertToWebpSchema, schema: convertToWebpSchema,
input: "image", input: "image",
run: imgTool((img) => clonePixelImage(img)), run: imgTool((img) => clonePixelImage(img)),
@@ -73,7 +73,7 @@ interface ConvertToBmpParams {}
export const convertToBmpSchema = toolSchema<ConvertToBmpParams>({}); export const convertToBmpSchema = toolSchema<ConvertToBmpParams>({});
const convertToBmp: Tool<ConvertToBmpParams> = { const convertToBmp: Tool<ConvertToBmpParams> = {
id: "png-to-bmp", id: "to-bmp",
schema: convertToBmpSchema, schema: convertToBmpSchema,
input: "image", input: "image",
run: imgTool((img) => flattenOntoColor(img, "#000000")), run: imgTool((img) => flattenOntoColor(img, "#000000")),
@@ -85,7 +85,7 @@ interface NoParams {}
const emptySchema = toolSchema<NoParams>({}); const emptySchema = toolSchema<NoParams>({});
const pngToBase64: Tool<NoParams> = { const pngToBase64: Tool<NoParams> = {
id: "png-to-base64", id: "to-base64",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "text", result: "text",
@@ -94,7 +94,7 @@ const pngToBase64: Tool<NoParams> = {
}; };
const pngToDataUri: Tool<NoParams> = { const pngToDataUri: Tool<NoParams> = {
id: "png-to-data-uri", id: "to-data-uri",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "text", result: "text",
@@ -103,7 +103,7 @@ const pngToDataUri: Tool<NoParams> = {
}; };
const pngToHex: Tool<NoParams> = { const pngToHex: Tool<NoParams> = {
id: "png-to-hex", id: "to-hex",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "text", result: "text",
@@ -111,7 +111,7 @@ const pngToHex: Tool<NoParams> = {
}; };
const pngToBytes: Tool<NoParams> = { const pngToBytes: Tool<NoParams> = {
id: "png-to-bytes", id: "to-bytes",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "text", result: "text",
@@ -119,7 +119,7 @@ const pngToBytes: Tool<NoParams> = {
}; };
const pngToRgbValues: Tool<NoParams> = { const pngToRgbValues: Tool<NoParams> = {
id: "png-to-rgb-values", id: "to-rgb-values",
schema: emptySchema, schema: emptySchema,
input: "image", input: "image",
result: "text", result: "text",
@@ -127,7 +127,7 @@ const pngToRgbValues: Tool<NoParams> = {
}; };
const base64ToPng: Tool<NoParams> = { const base64ToPng: Tool<NoParams> = {
id: "base64-to-png", id: "from-base64",
schema: emptySchema, schema: emptySchema,
input: "text", input: "text",
domOnly: true, domOnly: true,
@@ -135,7 +135,7 @@ const base64ToPng: Tool<NoParams> = {
}; };
const dataUriToPng: Tool<NoParams> = { const dataUriToPng: Tool<NoParams> = {
id: "data-uri-to-png", id: "from-data-uri",
schema: emptySchema, schema: emptySchema,
input: "text", input: "text",
domOnly: true, domOnly: true,
@@ -151,7 +151,7 @@ export const hexToPngSchema = toolSchema<HexToPngParams>({
}); });
const hexToPng: Tool<HexToPngParams> = { const hexToPng: Tool<HexToPngParams> = {
id: "hex-to-png", id: "from-hex",
schema: hexToPngSchema, schema: hexToPngSchema,
input: "text", input: "text",
run: textGen((text, p) => hexToPixels(text, Math.trunc(p.width))), run: textGen((text, p) => hexToPixels(text, Math.trunc(p.width))),
@@ -166,7 +166,7 @@ export const bytesToPngSchema = toolSchema<BytesToPngParams>({
}); });
const bytesToPng: Tool<BytesToPngParams> = { const bytesToPng: Tool<BytesToPngParams> = {
id: "bytes-to-png", id: "from-bytes",
schema: bytesToPngSchema, schema: bytesToPngSchema,
input: "text", input: "text",
run: textGen((text, p) => bytesToImage(text, Math.trunc(p.width))), run: textGen((text, p) => bytesToImage(text, Math.trunc(p.width))),
@@ -181,7 +181,7 @@ export const rgbValuesToPngSchema = toolSchema<RgbValuesToPngParams>({
}); });
const rgbValuesToPng: Tool<RgbValuesToPngParams> = { const rgbValuesToPng: Tool<RgbValuesToPngParams> = {
id: "rgb-values-to-png", id: "from-rgb-values",
schema: rgbValuesToPngSchema, schema: rgbValuesToPngSchema,
input: "text", input: "text",
run: textGen((text, p) => rgbValuesToImage(text, Math.trunc(p.width))), run: textGen((text, p) => rgbValuesToImage(text, Math.trunc(p.width))),
@@ -196,7 +196,7 @@ export const svgToPngSchema = toolSchema<SvgToPngParams>({
}); });
const svgToPng: Tool<SvgToPngParams> = { const svgToPng: Tool<SvgToPngParams> = {
id: "svg-to-png", id: "from-svg",
schema: svgToPngSchema, schema: svgToPngSchema,
input: "text", input: "text",
domOnly: true, domOnly: true,
web/src/lib/registry/tools/filters.ts
+8 -8
View File
@@ -25,7 +25,7 @@ export const blurSchema = toolSchema<BlurParams>({
}); });
const blurTool: Tool<BlurParams> = { const blurTool: Tool<BlurParams> = {
id: "blur-png", id: "blur",
schema: blurSchema, schema: blurSchema,
input: "image", input: "image",
run: imgTool((img, p) => gaussianBlur(img, p.radius)), run: imgTool((img, p) => gaussianBlur(img, p.radius)),
@@ -46,7 +46,7 @@ export const sharpenSchema = toolSchema<SharpenParams>({
}); });
const sharpenTool: Tool<SharpenParams> = { const sharpenTool: Tool<SharpenParams> = {
id: "sharpen-png", id: "sharpen",
schema: sharpenSchema, schema: sharpenSchema,
input: "image", input: "image",
run: imgTool((img, p) => sharpenImage(img, p.strength)), run: imgTool((img, p) => sharpenImage(img, p.strength)),
@@ -69,7 +69,7 @@ export const silhouetteSchema = toolSchema<SilhouetteParams>({
}); });
const silhouetteTool: Tool<SilhouetteParams> = { const silhouetteTool: Tool<SilhouetteParams> = {
id: "silhouette-png", id: "silhouette",
schema: silhouetteSchema, schema: silhouetteSchema,
input: "image", input: "image",
run: imgTool((img, p) => silhouette(img, p.color, p.threshold * 2.55)), run: imgTool((img, p) => silhouette(img, p.color, p.threshold * 2.55)),
@@ -90,7 +90,7 @@ export const vignetteSchema = toolSchema<VignetteParams>({
}); });
const vignetteTool: Tool<VignetteParams> = { const vignetteTool: Tool<VignetteParams> = {
id: "vignette-png", id: "vignette",
schema: vignetteSchema, schema: vignetteSchema,
input: "image", input: "image",
run: imgTool((img, p) => vignette(img, p.strength)), run: imgTool((img, p) => vignette(img, p.strength)),
@@ -111,7 +111,7 @@ export const pixelateSchema = toolSchema<PixelateParams>({
}); });
const pixelateTool: Tool<PixelateParams> = { const pixelateTool: Tool<PixelateParams> = {
id: "pixelate-png", id: "pixelate",
schema: pixelateSchema, schema: pixelateSchema,
input: "image", input: "image",
run: imgTool((img, p) => pixelate(img, p.blockSize)), run: imgTool((img, p) => pixelate(img, p.blockSize)),
@@ -149,7 +149,7 @@ export const randomizePixelsSchema = toolSchema<RandomizePixelsParams>(
); );
const randomizePixels: Tool<RandomizePixelsParams> = { const randomizePixels: Tool<RandomizePixelsParams> = {
id: "randomize-pixels-png", id: "randomize-pixels",
schema: randomizePixelsSchema, schema: randomizePixelsSchema,
input: "image", input: "image",
run: imgTool((img, p) => shuffleBlocks(img, p.blockSize, p.seed)), run: imgTool((img, p) => shuffleBlocks(img, p.blockSize, p.seed)),
@@ -197,7 +197,7 @@ export const addNoiseSchema = toolSchema<AddNoiseParams>(
); );
const addNoiseTool: Tool<AddNoiseParams> = { const addNoiseTool: Tool<AddNoiseParams> = {
id: "add-noise-png", id: "add-noise",
schema: addNoiseSchema, schema: addNoiseSchema,
input: "image", input: "image",
run: imgTool((img, p) => addNoise(img, p.amount, p.mode, p.seed)), run: imgTool((img, p) => addNoise(img, p.amount, p.mode, p.seed)),
@@ -218,7 +218,7 @@ export const jpegArtifactsSchema = toolSchema<JpegArtifactsParams>({
}); });
const jpegArtifacts: Tool<JpegArtifactsParams> = { const jpegArtifacts: Tool<JpegArtifactsParams> = {
id: "jpeg-artifacts-png", id: "jpeg-artifacts",
schema: jpegArtifactsSchema, schema: jpegArtifactsSchema,
input: "image", input: "image",
domOnly: true, domOnly: true,
web/src/lib/registry/tools/generate.ts
+21 -21
View File
@@ -105,7 +105,7 @@ export const createEmptySchema = toolSchema<CreateEmptyParams>(
); );
const createEmpty: Tool<CreateEmptyParams> = { const createEmpty: Tool<CreateEmptyParams> = {
id: "create-empty-png", id: "create-empty",
schema: createEmptySchema, schema: createEmptySchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -135,7 +135,7 @@ export const singleColorSchema = toolSchema<SingleColorParams>({
}); });
const singleColor: Tool<SingleColorParams> = { const singleColor: Tool<SingleColorParams> = {
id: "single-color-png", id: "single-color",
schema: singleColorSchema, schema: singleColorSchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -168,7 +168,7 @@ export const randomNoiseSchema = toolSchema<RandomNoiseParams>({
}); });
const randomNoise: Tool<RandomNoiseParams> = { const randomNoise: Tool<RandomNoiseParams> = {
id: "random-noise-png", id: "random-noise",
schema: randomNoiseSchema, schema: randomNoiseSchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -210,7 +210,7 @@ export const linearGradientSchema = toolSchema<LinearGradientParams>(
); );
const linearGradient: Tool<LinearGradientParams> = { const linearGradient: Tool<LinearGradientParams> = {
id: "linear-gradient-png", id: "linear-gradient",
schema: linearGradientSchema, schema: linearGradientSchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -279,7 +279,7 @@ export const colorSpectrumSchema = toolSchema<ColorSpectrumParams>(
); );
const colorSpectrumTool: Tool<ColorSpectrumParams> = { const colorSpectrumTool: Tool<ColorSpectrumParams> = {
id: "color-spectrum-png", id: "color-spectrum",
schema: colorSpectrumSchema, schema: colorSpectrumSchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -330,7 +330,7 @@ export const randomColorsSchema = toolSchema<RandomColorsParams>(
); );
const randomColors: Tool<RandomColorsParams> = { const randomColors: Tool<RandomColorsParams> = {
id: "random-colors-png", id: "random-colors",
schema: randomColorsSchema, schema: randomColorsSchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -400,7 +400,7 @@ export const drawGridSchema = toolSchema<DrawGridParams>(
); );
const drawGridTool: Tool<DrawGridParams> = { const drawGridTool: Tool<DrawGridParams> = {
id: "draw-grid-png", id: "draw-grid",
schema: drawGridSchema, schema: drawGridSchema,
input: "none", input: "none",
run: genTool((p) => { run: genTool((p) => {
@@ -457,7 +457,7 @@ export const placeholderSchema = toolSchema<PlaceholderParams>(
); );
const placeholder: Tool<PlaceholderParams> = { const placeholder: Tool<PlaceholderParams> = {
id: "placeholder-png", id: "placeholder",
schema: placeholderSchema, schema: placeholderSchema,
input: "none", input: "none",
domOnly: true, domOnly: true,
@@ -503,7 +503,7 @@ export const blendTwoSchema = toolSchema<BlendTwoParams>({
}); });
const blendTwo: Tool<BlendTwoParams> = { const blendTwo: Tool<BlendTwoParams> = {
id: "blend-two-png", id: "blend-two",
schema: blendTwoSchema, schema: blendTwoSchema,
input: "none", input: "none",
run: genTool((p) => renderBlend(p.pair.from, p.pair.to, p.width)), run: genTool((p) => renderBlend(p.pair.from, p.pair.to, p.width)),
@@ -561,7 +561,7 @@ export const stepColorsSchema = toolSchema<StepColorsParams>(
); );
const stepColorsTool: Tool<StepColorsParams> = { const stepColorsTool: Tool<StepColorsParams> = {
id: "step-colors-png", id: "step-colors",
schema: stepColorsSchema, schema: stepColorsSchema,
input: "none", input: "none",
run: genTool((p) => run: genTool((p) =>
@@ -590,7 +590,7 @@ export const emojiToPngSchema = toolSchema<EmojiToPngParams>({
}); });
const emojiToPng: Tool<EmojiToPngParams> = { const emojiToPng: Tool<EmojiToPngParams> = {
id: "emoji-to-png", id: "from-emoji",
domOnly: true, domOnly: true,
schema: emojiToPngSchema, schema: emojiToPngSchema,
input: "none", input: "none",
@@ -620,7 +620,7 @@ export const colorWheelSchema = toolSchema<ColorWheelParams>({
}); });
const colorWheelTool: Tool<ColorWheelParams> = { const colorWheelTool: Tool<ColorWheelParams> = {
id: "color-wheel-png", id: "color-wheel",
schema: colorWheelSchema, schema: colorWheelSchema,
input: "none", input: "none",
run: genTool((p) => renderWheel(p.size, p.lightness)), run: genTool((p) => renderWheel(p.size, p.lightness)),
@@ -665,7 +665,7 @@ const paletteLayoutGroup = {
}; };
const complementaryTool: Tool<PaletteBaseParams> = { const complementaryTool: Tool<PaletteBaseParams> = {
id: "complementary-png", id: "complementary",
schema: toolSchema<PaletteBaseParams>( schema: toolSchema<PaletteBaseParams>(
{ ...paletteBaseSchema }, { ...paletteBaseSchema },
{ ...paletteLayoutGroup }, { ...paletteLayoutGroup },
@@ -677,7 +677,7 @@ const complementaryTool: Tool<PaletteBaseParams> = {
}; };
const triadicTool: Tool<PaletteBaseParams> = { const triadicTool: Tool<PaletteBaseParams> = {
id: "triadic-png", id: "triadic",
schema: toolSchema<PaletteBaseParams>( schema: toolSchema<PaletteBaseParams>(
{ {
...paletteBaseSchema, ...paletteBaseSchema,
@@ -692,7 +692,7 @@ const triadicTool: Tool<PaletteBaseParams> = {
}; };
const tetradicTool: Tool<PaletteBaseParams> = { const tetradicTool: Tool<PaletteBaseParams> = {
id: "tetradic-png", id: "tetradic",
schema: toolSchema<PaletteBaseParams>( schema: toolSchema<PaletteBaseParams>(
{ {
...paletteBaseSchema, ...paletteBaseSchema,
@@ -712,7 +712,7 @@ interface AnalogousParams extends PaletteBaseParams {
} }
const analogousTool: Tool<AnalogousParams> = { const analogousTool: Tool<AnalogousParams> = {
id: "analogous-png", id: "analogous",
schema: toolSchema<AnalogousParams>( schema: toolSchema<AnalogousParams>(
{ {
...paletteBaseSchema, ...paletteBaseSchema,
@@ -750,7 +750,7 @@ interface MonochromaticParams extends PaletteBaseParams {
} }
const monochromaticTool: Tool<MonochromaticParams> = { const monochromaticTool: Tool<MonochromaticParams> = {
id: "monochromatic-png", id: "monochromatic",
schema: toolSchema<MonochromaticParams>( schema: toolSchema<MonochromaticParams>(
{ {
...paletteBaseSchema, ...paletteBaseSchema,
@@ -788,7 +788,7 @@ interface ShadesParams extends PaletteBaseParams {
} }
const shadesTool: Tool<ShadesParams> = { const shadesTool: Tool<ShadesParams> = {
id: "shades-png", id: "shades",
schema: toolSchema<ShadesParams>( schema: toolSchema<ShadesParams>(
{ {
...paletteBaseSchema, ...paletteBaseSchema,
@@ -846,7 +846,7 @@ export const mixColorsSchema = toolSchema<MixColorsParams>(
); );
const mixColorsTool: Tool<MixColorsParams> = { const mixColorsTool: Tool<MixColorsParams> = {
id: "mix-colors-png", id: "mix-colors",
schema: mixColorsSchema, schema: mixColorsSchema,
input: "none", input: "none",
run: genTool((p) => renderSwatches([mixColors(p.colors)], p.width, "strip")), run: genTool((p) => renderSwatches([mixColors(p.colors)], p.width, "strip")),
@@ -912,7 +912,7 @@ export const sortColorsSchema = toolSchema<SortColorsParams>(
); );
const sortColorsTool: Tool<SortColorsParams> = { const sortColorsTool: Tool<SortColorsParams> = {
id: "sort-colors-png", id: "sort-colors",
schema: sortColorsSchema, schema: sortColorsSchema,
input: "none", input: "none",
run: genTool((p) => run: genTool((p) =>
@@ -975,7 +975,7 @@ export const textToPngSchema = toolSchema<TextToPngParams>(
); );
const textToPng: Tool<TextToPngParams> = { const textToPng: Tool<TextToPngParams> = {
id: "text-to-png", id: "from-text",
domOnly: true, domOnly: true,
schema: textToPngSchema, schema: textToPngSchema,
input: "none", input: "none",
web/src/lib/registry/tools/geometry.ts
+19 -19
View File
@@ -48,7 +48,7 @@ export const addBorderSchema = toolSchema<AddBorderParams>({
}); });
const addBorder: Tool<AddBorderParams> = { const addBorder: Tool<AddBorderParams> = {
id: "add-border-png", id: "add-border",
schema: addBorderSchema, schema: addBorderSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -95,7 +95,7 @@ export const fitOnBackgroundSchema = toolSchema<FitOnBackgroundParams>(
); );
const fitOnBackground: Tool<FitOnBackgroundParams> = { const fitOnBackground: Tool<FitOnBackgroundParams> = {
id: "fit-on-background-png", id: "fit-on-background",
schema: fitOnBackgroundSchema, schema: fitOnBackgroundSchema,
input: "image", input: "image",
run: imgTool((img, p) => { run: imgTool((img, p) => {
@@ -158,7 +158,7 @@ export const changeCanvasSizeSchema = toolSchema<ChangeCanvasSizeParams>(
); );
const changeCanvasSizeTool: Tool<ChangeCanvasSizeParams> = { const changeCanvasSizeTool: Tool<ChangeCanvasSizeParams> = {
id: "change-canvas-size-png", id: "change-canvas-size",
schema: changeCanvasSizeSchema, schema: changeCanvasSizeSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -199,7 +199,7 @@ export const resizeSchema = toolSchema<ResizeParams>(
); );
const resizeTool: Tool<ResizeParams> = { const resizeTool: Tool<ResizeParams> = {
id: "resize-png", id: "resize",
schema: resizeSchema, schema: resizeSchema,
input: "image", input: "image",
run: imgTool((img, p) => { run: imgTool((img, p) => {
@@ -266,7 +266,7 @@ export const cropSchema = toolSchema<CropParams>(
); );
const cropTool: Tool<CropParams> = { const cropTool: Tool<CropParams> = {
id: "crop-png", id: "crop",
schema: cropSchema, schema: cropSchema,
input: "image", input: "image",
run: imgTool((img, p) => { run: imgTool((img, p) => {
@@ -296,7 +296,7 @@ export const rotateSchema = toolSchema<RotateParams>({
}); });
const rotateTool: Tool<RotateParams> = { const rotateTool: Tool<RotateParams> = {
id: "rotate-png", id: "rotate",
schema: rotateSchema, schema: rotateSchema,
input: "image", input: "image",
run: imgTool((img, p) => rotate90(img, Number(p.angle) / 90)), run: imgTool((img, p) => rotate90(img, Number(p.angle) / 90)),
@@ -318,7 +318,7 @@ export const flipSchema = toolSchema<FlipParams>({
}); });
const flipTool: Tool<FlipParams> = { const flipTool: Tool<FlipParams> = {
id: "flip-png", id: "flip",
schema: flipSchema, schema: flipSchema,
input: "image", input: "image",
run: imgTool((img, p) => flip(img, p.axis)), run: imgTool((img, p) => flip(img, p.axis)),
@@ -353,7 +353,7 @@ export const addPaddingSchema = toolSchema<AddPaddingParams>(
); );
const addPaddingTool: Tool<AddPaddingParams> = { const addPaddingTool: Tool<AddPaddingParams> = {
id: "add-padding-png", id: "add-padding",
schema: addPaddingSchema, schema: addPaddingSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
@@ -391,7 +391,7 @@ export const tileSchema = toolSchema<TileParams>({
}); });
const tileTool: Tool<TileParams> = { const tileTool: Tool<TileParams> = {
id: "tile-png", id: "tile",
schema: tileSchema, schema: tileSchema,
input: "image", input: "image",
run: imgTool((img, p) => tile(img, p.columns, p.rows)), run: imgTool((img, p) => tile(img, p.columns, p.rows)),
@@ -422,7 +422,7 @@ export const splitPartsSchema = toolSchema<SplitPartsParams>({
}); });
const splitPartsTool: Tool<SplitPartsParams> = { const splitPartsTool: Tool<SplitPartsParams> = {
id: "split-into-parts-png", id: "split-into-parts",
schema: splitPartsSchema, schema: splitPartsSchema,
input: "image", input: "image",
result: "files", result: "files",
@@ -455,7 +455,7 @@ interface EmptyParams {}
export const centerByAlphaSchema = toolSchema<EmptyParams>({}); export const centerByAlphaSchema = toolSchema<EmptyParams>({});
const centerByAlphaTool: Tool<EmptyParams> = { const centerByAlphaTool: Tool<EmptyParams> = {
id: "center-by-alpha-png", id: "center-by-alpha",
schema: centerByAlphaSchema, schema: centerByAlphaSchema,
input: "image", input: "image",
run: imgTool((img) => centerByAlpha(img)), run: imgTool((img) => centerByAlpha(img)),
@@ -484,7 +484,7 @@ export const skewSchema = toolSchema<SkewParams>({
}); });
const skewTool: Tool<SkewParams> = { const skewTool: Tool<SkewParams> = {
id: "skew-png", id: "skew",
schema: skewSchema, schema: skewSchema,
input: "image", input: "image",
run: imgTool((img, p) => skewImage(img, p.degX, p.degY)), run: imgTool((img, p) => skewImage(img, p.degX, p.degY)),
@@ -505,7 +505,7 @@ export const rotateFreeSchema = toolSchema<RotateFreeParams>({
}); });
const rotateFreeTool: Tool<RotateFreeParams> = { const rotateFreeTool: Tool<RotateFreeParams> = {
id: "rotate-free-png", id: "rotate-free",
schema: rotateFreeSchema, schema: rotateFreeSchema,
input: "image", input: "image",
run: imgTool((img, p) => rotateFreeImage(img, p.angle)), run: imgTool((img, p) => rotateFreeImage(img, p.angle)),
@@ -526,7 +526,7 @@ export const zoomSchema = toolSchema<ZoomParams>({
}); });
const zoomTool: Tool<ZoomParams> = { const zoomTool: Tool<ZoomParams> = {
id: "zoom-png", id: "zoom",
schema: zoomSchema, schema: zoomSchema,
input: "image", input: "image",
run: imgTool((img, p) => zoomImage(img, p.scale)), run: imgTool((img, p) => zoomImage(img, p.scale)),
@@ -547,7 +547,7 @@ export const trimEmptySpaceSchema = toolSchema<TrimEmptySpaceParams>({
}); });
const trimEmptySpaceTool: Tool<TrimEmptySpaceParams> = { const trimEmptySpaceTool: Tool<TrimEmptySpaceParams> = {
id: "trim-empty-space-png", id: "trim-empty-space",
schema: trimEmptySpaceSchema, schema: trimEmptySpaceSchema,
input: "image", input: "image",
run: imgTool((img, p) => trimToContent(img, p.threshold)), run: imgTool((img, p) => trimToContent(img, p.threshold)),
@@ -585,7 +585,7 @@ export const changeAspectRatioSchema = toolSchema<ChangeAspectRatioParams>({
}); });
const changeAspectRatioTool: Tool<ChangeAspectRatioParams> = { const changeAspectRatioTool: Tool<ChangeAspectRatioParams> = {
id: "change-aspect-ratio-png", id: "change-aspect-ratio",
schema: changeAspectRatioSchema, schema: changeAspectRatioSchema,
input: "image", input: "image",
run: imgTool((img, p) => { run: imgTool((img, p) => {
@@ -611,7 +611,7 @@ export const swapOrientationSchema = toolSchema<SwapOrientationParams>({
}); });
const swapOrientationTool: Tool<SwapOrientationParams> = { const swapOrientationTool: Tool<SwapOrientationParams> = {
id: "swap-orientation-png", id: "swap-orientation",
schema: swapOrientationSchema, schema: swapOrientationSchema,
input: "image", input: "image",
run: imgTool((img, p) => forceOrientation(img, p.target)), run: imgTool((img, p) => forceOrientation(img, p.target)),
@@ -647,7 +647,7 @@ export const symmetricCopySchema = toolSchema<SymmetricCopyParams>({
}); });
const symmetricCopyTool: Tool<SymmetricCopyParams> = { const symmetricCopyTool: Tool<SymmetricCopyParams> = {
id: "symmetric-copy-png", id: "symmetric-copy",
schema: symmetricCopySchema, schema: symmetricCopySchema,
input: "image", input: "image",
run: imgTool((img, p) => symmetricCopy(img, p.axis, p.keepSide)), run: imgTool((img, p) => symmetricCopy(img, p.axis, p.keepSide)),
@@ -678,7 +678,7 @@ export const shiftSchema = toolSchema<ShiftParams>({
}); });
const shiftTool: Tool<ShiftParams> = { const shiftTool: Tool<ShiftParams> = {
id: "shift-png", id: "shift",
schema: shiftSchema, schema: shiftSchema,
input: "image", input: "image",
run: imgTool((img, p) => run: imgTool((img, p) =>
web/src/lib/registry/tools/text.ts
+3 -3
View File
@@ -59,7 +59,7 @@ const addTextSchema = toolSchema<AddTextParams>(
); );
const addText: Tool<AddTextParams> = { const addText: Tool<AddTextParams> = {
id: "add-text-png", id: "add-text",
domOnly: true, domOnly: true,
schema: addTextSchema, schema: addTextSchema,
input: "image", input: "image",
@@ -133,7 +133,7 @@ const dateStampSchema = toolSchema<DateStampParams>(
); );
const dateStamp: Tool<DateStampParams> = { const dateStamp: Tool<DateStampParams> = {
id: "date-stamp-png", id: "date-stamp",
domOnly: true, domOnly: true,
schema: dateStampSchema, schema: dateStampSchema,
input: "image", input: "image",
@@ -222,7 +222,7 @@ const watermarkTileSchema = toolSchema<WatermarkTileParams>(
); );
const watermarkTile: Tool<WatermarkTileParams> = { const watermarkTile: Tool<WatermarkTileParams> = {
id: "watermark-tile-png", id: "watermark-tile",
domOnly: true, domOnly: true,
schema: watermarkTileSchema, schema: watermarkTileSchema,
input: "image", input: "image",