From 371387ce81569921f5e143daec81275b63a1bab4 Mon Sep 17 00:00:00 2001 From: Ku6epXBOCTuK Date: Sun, 13 Sep 2026 09:04:05 +0500 Subject: [PATCH] fix: update i18n - update registry for tools --- web/src/lib/i18n/en.ts | 260 ++++++++++++++++++++++++ web/src/lib/i18n/ru.ts | 113 +++++++++++ web/src/lib/registry-schema.ts | 17 +- web/src/lib/registry/alpha.ts | 248 ++++++++++++++++++---- web/src/lib/registry/color.ts | 112 ++++++++-- web/src/lib/registry/generate.ts | 339 ++++++++++++++++++++++++++----- web/src/lib/registry/geometry.ts | 177 +++++++++++++--- web/src/lib/registry/text.ts | 88 ++++++-- 8 files changed, 1206 insertions(+), 148 deletions(-) diff --git a/web/src/lib/i18n/en.ts b/web/src/lib/i18n/en.ts index 69af37b..7d76869 100644 --- a/web/src/lib/i18n/en.ts +++ b/web/src/lib/i18n/en.ts @@ -204,24 +204,107 @@ export const en: Dict = { toolUnknown: 'No tool is registered under "{id}".', }, fields: { + alphaThreshold: "Alpha threshold", amount: "Amount", + amplitude: "Amplitude", + anchor: "Anchor", + angle: "Angle", + axis: "Axis", background: "Background", + backgroundColor: "Background color", + baseColor: "Base color", blockSize: "Block size", + borderColor: "Border color", + brightness: "Brightness", + canvasSize: "Canvas size", + channel: "Channel", + channelPair: "Channel pair", channelTolerance: "Channel tolerance", color: "Color", + colorCount: "Color count", + colorList: "Color list", + colorPair: "Color pair", colorTolerance: "Color tolerance", + cols: "Cols", + columns: "Columns", + component: "Component", + contrast: "Contrast", + count: "Count", + cropAreaSize: "Crop area size", + dateFormat: "Date format", + degrees: "Degrees", + depth: "Darken depth", + direction: "Direction", + display: "Display", + emoji: "Emoji", fillColor: "Fill color", + fitMode: "Fit mode", + gamma: "Gamma", + gradient: "Gradient", + hexList: "Hex list", highlightColor: "Highlight color", + imageSize: "Image size", + innerRadius: "Inner radius", + keepAspect: "Keep aspect", + keepSide: "Kept side", + layout: "Layout", + levels: "Levels", + lightness: "Lightness", + lineColor: "Line color", + lineWidth: "Line width", lumaThreshold: "Luminance threshold", + margin: "Margin", + maxColors: "Max colors", mode: "Mode", + offset: "Offset", + offsetX: "Offset X", + offsetY: "Offset Y", opacity: "Opacity", + order: "Order", + orientation: "Orientation", + outerOnly: "Outer only", + padding: "Padding", + pattern: "Pattern", + percent: "Percent", + phase: "Phase", + plate: "Plate", + points: "Points", + position: "Position", quality: "Quality", radius: "Radius", + range: "Lightness range", rarity: "Rarity", + ratio: "Aspect ratio", + rotation: "Rotation", + rows: "Rows", + saturation: "Saturation", + scalePct: "Zoom, %", seed: "Seed", + shapeHeightPct: "Height, %", + shapeSize: "Shape size", + shapeWidthPct: "Width, %", + showText: "Show text", + skewX: "Skew X", + skewY: "Skew Y", + smooth: "Smooth", + spread: "Spread", + steps: "Steps", + stepX: "Step X", + stepY: "Step Y", strength: "Strength", + strokeColor: "Stroke color", + targetColor: "Target color", + text: "Text", + textColor: "Text color", + textStyle: "Text style", + thickness: "Thickness", threshold: "Threshold", + transparent: "Transparent", + transparentBg: "Transparent bg", + waves: "Waves", width: "Width", + x: "X", + y: "Y", }, groups: { adjust: "Adjust", @@ -318,5 +401,182 @@ export const en: Dict = { mode: { mono: "Monochrome grain", color: "Color noise" }, }, }, + "dithering-png": { + options: { + pattern: { "floyd-steinberg": "Floyd–Steinberg", bayer: "Bayer 4x4" }, + }, + }, + "extract-channel-png": { + options: { + channel: { red: "Red", green: "Green", blue: "Blue" }, + }, + }, + "swap-channels-png": { + options: { + pair: { + "r-g": "Red ↔ Green", + "r-b": "Red ↔ Blue", + "g-b": "Green ↔ Blue", + }, + }, + }, + "decrease-color-count-png": { + options: { + maxColors: { + "2": "2", + "4": "4", + "8": "8", + "16": "16 (extreme)", + "32": "32", + "44": "44 (strong)", + "64": "64", + "96": "96 (balanced)", + "128": "128", + "192": "192 (light)", + "256": "256", + }, + }, + }, + "png-to-hsl": { + options: { + display: { gray: "Grayscale", color: "Space as RGB" }, + }, + }, + "png-to-hsv": { + options: { + display: { gray: "Grayscale", color: "Space as RGB" }, + }, + }, + "png-to-hsi": { + options: { + display: { gray: "Grayscale", color: "Space as RGB" }, + }, + }, + "png-to-cmyk": { + options: { + display: { gray: "Grayscale", color: "Space as RGB" }, + }, + }, + "png-to-ycbcr": { + options: { + display: { gray: "Grayscale", color: "Space as RGB" }, + }, + }, + "png-to-lab": { + options: { + display: { gray: "Grayscale", color: "Space as RGB" }, + }, + }, + "rotate-png": { + options: { + angle: { + "90": "90° clockwise", + "180": "180°", + "270": "270° clockwise", + }, + }, + }, + "flip-png": { + options: { + axis: { + horizontal: "Horizontal (left to right)", + vertical: "Vertical (top to bottom)", + }, + }, + }, + "change-canvas-size-png": { + options: { + anchor: { + "top-left": "Top left", + "top-center": "Top center", + "top-right": "Top right", + "middle-left": "Middle left", + center: "Center", + "middle-right": "Middle right", + "bottom-left": "Bottom left", + "bottom-center": "Bottom center", + "bottom-right": "Bottom right", + }, + }, + }, + "change-aspect-ratio-png": { + options: { + ratio: { + "1:1": "1:1", + "4:3": "4:3", + "3:4": "3:4", + "3:2": "3:2", + "2:3": "2:3", + "16:9": "16:9", + "9:16": "9:16", + }, + mode: { crop: "Crop to fill", pad: "Pad to fit" }, + }, + }, + "swap-orientation-png": { + options: { + target: { portrait: "Portrait", landscape: "Landscape" }, + }, + }, + "symmetric-copy-png": { + options: { + axis: { + vertical: "Vertical (double width)", + horizontal: "Horizontal (double height)", + }, + keepSide: { + left: "Left", + right: "Right", + top: "Top", + bottom: "Bottom", + }, + }, + }, + "color-spectrum-png": { + options: { + direction: { horizontal: "Horizontal", vertical: "Vertical" }, + }, + }, + "step-colors-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "complementary-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "triadic-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "tetradic-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "analogous-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "monochromatic-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "shades-png": { + options: { + layout: { grid: "Grid", strip: "Strip" }, + }, + }, + "sort-colors-png": { + options: { + order: { hue: "Hue", luma: "Brightness", sat: "Saturation" }, + layout: { grid: "Grid", strip: "Strip" }, + }, + }, }, }; diff --git a/web/src/lib/i18n/ru.ts b/web/src/lib/i18n/ru.ts index 6885631..cc24359 100644 --- a/web/src/lib/i18n/ru.ts +++ b/web/src/lib/i18n/ru.ts @@ -205,24 +205,107 @@ export const ru: Dict = { toolUnknown: "Инструмента с id «{id}» нет в реестре.", }, fields: { + alphaThreshold: "Порог альфы", amount: "Количество", + amplitude: "Амплитуда", + anchor: "Якорь", + angle: "Угол", + axis: "Ось", background: "Фон", + backgroundColor: "Цвет фона", + baseColor: "Базовый цвет", blockSize: "Размер блока", + borderColor: "Цвет рамки", + brightness: "Яркость", + canvasSize: "Размер холста", + channel: "Канал", + channelPair: "Пара каналов", channelTolerance: "Допуск по каналам", color: "Цвет", + colorCount: "Количество цветов", + colorList: "Список цветов", + colorPair: "Пара цветов", colorTolerance: "Допуск похожести", + cols: "Колонки", + columns: "Столбцы", + component: "Компонент", + contrast: "Контраст", + count: "Количество", + cropAreaSize: "Размер области", + dateFormat: "Формат даты", + degrees: "Градусы", + depth: "Глубина затемнения", + direction: "Направление", + display: "Отображение", + emoji: "Эмодзи", fillColor: "Цвет заливки", + fitMode: "Режим вписывания", + gamma: "Гамма", + gradient: "Градиент", + hexList: "Список hex-цветов", highlightColor: "Цвет подсветки", + imageSize: "Размер изображения", + innerRadius: "Внутренний радиус", + keepAspect: "Сохранять пропорции", + keepSide: "Остающаяся сторона", + layout: "Раскладка", + levels: "Уровни", + lightness: "Светлота", + lineColor: "Цвет линий", + lineWidth: "Толщина линий", lumaThreshold: "Порог яркости", + margin: "Отступ", + maxColors: "Максимум цветов", mode: "Режим", + offset: "Смещение", + offsetX: "Сдвиг по X", + offsetY: "Сдвиг по Y", opacity: "Непрозрачность", + order: "Порядок", + orientation: "Ориентация", + outerOnly: "Только с краёв", + padding: "Поля", + pattern: "Узор", + percent: "Процент", + phase: "Фаза", + plate: "Плашка", + points: "Количество лучей", + position: "Позиция", quality: "Качество", radius: "Радиус", + range: "Диапазон светлоты", rarity: "Максимум повторов", + ratio: "Соотношение сторон", + rotation: "Поворот", + rows: "Строки", + saturation: "Насыщенность", + scalePct: "Масштаб, %", seed: "Сид", + shapeHeightPct: "Высота, %", + shapeSize: "Размер фигуры", + shapeWidthPct: "Ширина, %", + showText: "Показывать текст", + skewX: "Наклон по X", + skewY: "Наклон по Y", + smooth: "Сглаживание", + spread: "Разброс", + steps: "Шаги", + stepX: "Шаг по X", + stepY: "Шаг по Y", strength: "Сила", + strokeColor: "Цвет обводки", + targetColor: "Целевой цвет", + text: "Текст", + textColor: "Цвет текста", + textStyle: "Стиль текста", + thickness: "Толщина", threshold: "Порог", + transparent: "Прозрачный", + transparentBg: "Прозрачный фон", + waves: "Волны", width: "Ширина", + x: "X", + y: "Y", }, groups: { adjust: "Коррекция", @@ -441,6 +524,36 @@ export const ru: Dict = { }, }, }, + "png-to-hsl": { + options: { + display: { gray: "Оттенки серого", color: "Пространство как RGB" }, + }, + }, + "png-to-hsv": { + options: { + display: { gray: "Оттенки серого", color: "Пространство как RGB" }, + }, + }, + "png-to-hsi": { + options: { + display: { gray: "Оттенки серого", color: "Пространство как RGB" }, + }, + }, + "png-to-cmyk": { + options: { + display: { gray: "Оттенки серого", color: "Пространство как RGB" }, + }, + }, + "png-to-ycbcr": { + options: { + display: { gray: "Оттенки серого", color: "Пространство как RGB" }, + }, + }, + "png-to-lab": { + options: { + display: { gray: "Оттенки серого", color: "Пространство как RGB" }, + }, + }, cmyk: { title: "Конвертировать PNG в цвета CMYK", description: diff --git a/web/src/lib/registry-schema.ts b/web/src/lib/registry-schema.ts index 7610cbf..f67342d 100644 --- a/web/src/lib/registry-schema.ts +++ b/web/src/lib/registry-schema.ts @@ -11,8 +11,8 @@ // с полями `P`, а `Field` тип-проверялся на соответствие `P[K]`. // Ошибки компилятора ловят расхождения между интерфейсом Params и схемой. -import type { Position9 } from "./core/textdraw"; import type { TextFont } from "./core/domText"; +import type { Position9 } from "./core/textdraw"; /** * Общее необязательное поле всех спеков: ключ подписи поля в словаре. @@ -269,6 +269,7 @@ export const field = { spec: { kind: "checkbox", ...s }, }), dimension: (s: { + label?: string; min: number; max: number; width: number; @@ -276,13 +277,18 @@ export const field = { }): Field => ({ spec: { kind: "dimension", ...s }, }), - colorPair: (s: { from: string; to: string }): Field => ({ + colorPair: (s: { + label?: string; + from: string; + to: string; + }): Field => ({ spec: { kind: "color-pair", ...s }, }), - colors: (s: { default: string[] }): Field => ({ + colors: (s: { label?: string; default: string[] }): Field => ({ spec: { kind: "colors", ...s }, }), offset: (s: { + label?: string; min: number; max: number; x: number; @@ -290,10 +296,11 @@ export const field = { }): Field => ({ spec: { kind: "offset", ...s }, }), - position9: (s: { default: Position9 }): Field => ({ + position9: (s: { label?: string; default: Position9 }): Field => ({ spec: { kind: "position9", ...s }, }), fontStyle: (s: { + label?: string; min: number; max: number; size: number; @@ -304,6 +311,7 @@ export const field = { spec: { kind: "font-style", ...s }, }), plate: (s: { + label?: string; enabled: boolean; color: string; opacity: number; @@ -311,6 +319,7 @@ export const field = { spec: { kind: "plate", ...s }, }), gradient: (s: { + label?: string; from: string; to: string; angle: number; diff --git a/web/src/lib/registry/alpha.ts b/web/src/lib/registry/alpha.ts index cb51560..dc142d9 100644 --- a/web/src/lib/registry/alpha.ts +++ b/web/src/lib/registry/alpha.ts @@ -1,6 +1,3 @@ -import { imgTool, type ToolEntry } from "./types"; -import { field, toolSchema } from "../registry-schema"; -import type { Offset } from "../registry-schema"; import { extractAlphaMask, flattenOntoColor, @@ -27,6 +24,9 @@ import { starTest, wavyTest, } from "../core/shapes"; +import type { Offset } from "../registry-schema"; +import { field, toolSchema } from "../registry-schema"; +import { imgTool, type ToolEntry } from "./types"; interface AddStrokeParams { color: string; @@ -34,8 +34,14 @@ interface AddStrokeParams { } export const addStrokeSchema = toolSchema({ - color: field.color({ default: "#ff0000" }), - thickness: field.slider({ min: 1, max: 10, step: 1, default: 3 }), + color: field.color({ label: "fields.strokeColor", default: "#ff0000" }), + thickness: field.slider({ + label: "fields.thickness", + min: 1, + max: 10, + step: 1, + default: 3, + }), }); const addStroke: ToolEntry = { @@ -55,8 +61,14 @@ interface FindContourParams { } export const findContourSchema = toolSchema({ - color: field.color({ default: "#000000" }), - thickness: field.slider({ min: 1, max: 5, step: 1, default: 1 }), + color: field.color({ label: "fields.strokeColor", default: "#000000" }), + thickness: field.slider({ + label: "fields.thickness", + min: 1, + max: 5, + step: 1, + default: 1, + }), }); const findContour: ToolEntry = { @@ -76,8 +88,14 @@ interface RemoveColorParams { } export const removeColorSchema = toolSchema({ - targetColor: field.color({ default: "#00ff00" }), - tolerance: field.slider({ min: 0, max: 100, step: 1, default: 10 }), + targetColor: field.color({ label: "fields.targetColor", default: "#00ff00" }), + tolerance: field.slider({ + label: "fields.colorTolerance", + min: 0, + max: 100, + step: 1, + default: 10, + }), }); const removeColor: ToolEntry = { @@ -98,8 +116,20 @@ interface CircleMaskParams { const circleMaskSchema = toolSchema( { - size: field.slider({ min: 20, max: 100, step: 1, default: 100 }), - offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }), + size: field.slider({ + label: "fields.shapeSize", + min: 20, + max: 100, + step: 1, + default: 100, + }), + offset: field.offset({ + label: "fields.offset", + min: -50, + max: 50, + x: 0, + y: 0, + }), }, { layout: { @@ -137,9 +167,27 @@ interface SquareMaskParams { const squareMaskSchema = toolSchema( { - widthPct: field.slider({ min: 10, max: 100, step: 1, default: 100 }), - heightPct: field.slider({ min: 10, max: 100, step: 1, default: 100 }), - offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }), + widthPct: field.slider({ + label: "fields.shapeWidthPct", + min: 10, + max: 100, + step: 1, + default: 100, + }), + heightPct: field.slider({ + label: "fields.shapeHeightPct", + min: 10, + max: 100, + step: 1, + default: 100, + }), + offset: field.offset({ + label: "fields.offset", + min: -50, + max: 50, + x: 0, + y: 0, + }), }, { layout: { @@ -183,11 +231,41 @@ interface StarMaskParams { const starMaskSchema = toolSchema( { - points: field.slider({ min: 3, max: 12, step: 1, default: 5 }), - innerRadius: field.slider({ min: 10, max: 90, step: 1, default: 45 }), - size: field.slider({ min: 20, max: 100, step: 1, default: 100 }), - rotation: field.slider({ min: -180, max: 180, step: 1, default: 0 }), - offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }), + points: field.slider({ + label: "fields.points", + min: 3, + max: 12, + step: 1, + default: 5, + }), + innerRadius: field.slider({ + label: "fields.innerRadius", + min: 10, + max: 90, + step: 1, + default: 45, + }), + size: field.slider({ + label: "fields.shapeSize", + min: 20, + max: 100, + step: 1, + default: 100, + }), + rotation: field.slider({ + label: "fields.rotation", + min: -180, + max: 180, + step: 1, + default: 0, + }), + offset: field.offset({ + label: "fields.offset", + min: -50, + max: 50, + x: 0, + y: 0, + }), }, { layout: { @@ -231,11 +309,41 @@ interface WavyMaskParams { const wavyMaskSchema = toolSchema( { - size: field.slider({ min: 20, max: 100, step: 1, default: 90 }), - amplitude: field.slider({ min: 2, max: 30, step: 1, default: 8 }), - waves: field.slider({ min: 3, max: 24, step: 1, default: 8 }), - phase: field.slider({ min: 0, max: 360, step: 1, default: 0 }), - offset: field.offset({ min: -50, max: 50, x: 0, y: 0 }), + size: field.slider({ + label: "fields.shapeSize", + min: 20, + max: 100, + step: 1, + default: 90, + }), + amplitude: field.slider({ + label: "fields.amplitude", + min: 2, + max: 30, + step: 1, + default: 8, + }), + waves: field.slider({ + label: "fields.waves", + min: 3, + max: 24, + step: 1, + default: 8, + }), + phase: field.slider({ + label: "fields.phase", + min: 0, + max: 360, + step: 1, + default: 0, + }), + offset: field.offset({ + label: "fields.offset", + min: -50, + max: 50, + x: 0, + y: 0, + }), }, { layout: { @@ -289,7 +397,13 @@ interface SetAlphaChannelParams { } export const setAlphaChannelSchema = toolSchema({ - percent: field.slider({ min: 0, max: 100, step: 1, default: 100 }), + percent: field.slider({ + label: "fields.percent", + min: 0, + max: 100, + step: 1, + default: 100, + }), }); const setAlphaChannelTool: ToolEntry = { @@ -319,7 +433,13 @@ interface RoundCornersParams { } export const roundCornersSchema = toolSchema({ - radius: field.slider({ min: 0, max: 50, step: 1, default: 10 }), + radius: field.slider({ + label: "fields.radius", + min: 0, + max: 50, + step: 1, + default: 10, + }), }); const roundCornersTool: ToolEntry = { @@ -354,10 +474,22 @@ interface RemoveBackgroundParams { export const removeBackgroundSchema = toolSchema( { - color: field.color({ default: "#ffffff" }), - tolerance: field.slider({ min: 0, max: 100, step: 1, default: 10 }), - outerOnly: field.checkbox({ default: true }), - smooth: field.slider({ min: 0, max: 8, step: 1, default: 1 }), + color: field.color({ label: "fields.backgroundColor", default: "#ffffff" }), + tolerance: field.slider({ + label: "fields.colorTolerance", + min: 0, + max: 100, + step: 1, + default: 10, + }), + outerOnly: field.checkbox({ label: "fields.outerOnly", default: true }), + smooth: field.slider({ + label: "fields.smooth", + min: 0, + max: 8, + step: 1, + default: 1, + }), }, { layout: { @@ -396,7 +528,13 @@ interface MakeThickerParams { } export const makeThickerSchema = toolSchema({ - radius: field.slider({ min: 1, max: 10, step: 1, default: 2 }), + radius: field.slider({ + label: "fields.radius", + min: 1, + max: 10, + step: 1, + default: 2, + }), }); const makeThickerTool: ToolEntry = { @@ -414,7 +552,13 @@ interface MakeThinnerParams { } export const makeThinnerSchema = toolSchema({ - radius: field.slider({ min: 1, max: 10, step: 1, default: 1 }), + radius: field.slider({ + label: "fields.radius", + min: 1, + max: 10, + step: 1, + default: 1, + }), }); const makeThinnerTool: ToolEntry = { @@ -432,7 +576,13 @@ interface FeatherEdgesParams { } export const featherEdgesSchema = toolSchema({ - radius: field.slider({ min: 1, max: 20, step: 1, default: 3 }), + radius: field.slider({ + label: "fields.radius", + min: 1, + max: 20, + step: 1, + default: 3, + }), }); const featherEdgesTool: ToolEntry = { @@ -451,7 +601,13 @@ interface CleanEdgesParams { } export const cleanEdgesSchema = toolSchema({ - radius: field.slider({ min: 1, max: 10, step: 1, default: 3 }), + radius: field.slider({ + label: "fields.radius", + min: 1, + max: 10, + step: 1, + default: 3, + }), }); const cleanEdgesTool: ToolEntry = { @@ -470,7 +626,13 @@ interface HardenAlphaParams { } export const hardenAlphaSchema = toolSchema({ - threshold: field.slider({ min: 0, max: 100, step: 1, default: 50 }), + threshold: field.slider({ + label: "fields.alphaThreshold", + min: 0, + max: 100, + step: 1, + default: 50, + }), }); const hardenAlphaTool: ToolEntry = { @@ -489,7 +651,13 @@ interface DespeckleAlphaParams { } export const despeckleAlphaSchema = toolSchema({ - radius: field.slider({ min: 1, max: 3, step: 1, default: 1 }), + radius: field.slider({ + label: "fields.radius", + min: 1, + max: 3, + step: 1, + default: 1, + }), }); const despeckleAlphaTool: ToolEntry = { @@ -508,7 +676,13 @@ interface CloseHolesParams { } export const closeHolesSchema = toolSchema({ - radius: field.slider({ min: 1, max: 3, step: 1, default: 1 }), + radius: field.slider({ + label: "fields.radius", + min: 1, + max: 3, + step: 1, + default: 1, + }), }); const closeHolesTool: ToolEntry = { diff --git a/web/src/lib/registry/color.ts b/web/src/lib/registry/color.ts index b572d68..f8feca4 100644 --- a/web/src/lib/registry/color.ts +++ b/web/src/lib/registry/color.ts @@ -29,8 +29,18 @@ interface TwoColorsParams { } export const twoColorsSchema = toolSchema({ - pair: field.colorPair({ from: "#ffffff", to: "#000000" }), - threshold: field.slider({ min: 0, max: 100, step: 1, default: 50 }), + pair: field.colorPair({ + label: "fields.colorPair", + from: "#ffffff", + to: "#000000", + }), + threshold: field.slider({ + label: "fields.threshold", + min: 0, + max: 100, + step: 1, + default: 50, + }), }); const twoColorsTool: ToolEntry = { @@ -49,7 +59,13 @@ interface GammaParams { } export const gammaSchema = toolSchema({ - value: field.slider({ min: 0.1, max: 3, step: 0.05, default: 1 }), + value: field.slider({ + label: "fields.gamma", + min: 0.1, + max: 3, + step: 0.05, + default: 1, + }), }); const gammaTool: ToolEntry = { @@ -68,7 +84,13 @@ interface TemperatureParams { } export const temperatureSchema = toolSchema({ - percent: field.slider({ min: -100, max: 100, step: 1, default: 0 }), + percent: field.slider({ + label: "fields.percent", + min: -100, + max: 100, + step: 1, + default: 0, + }), }); const temperatureTool: ToolEntry = { @@ -88,8 +110,14 @@ interface TintParams { } export const tintSchema = toolSchema({ - color: field.color({ default: "#ffb060" }), - strength: field.slider({ min: 0, max: 100, step: 1, default: 30 }), + color: field.color({ label: "fields.color", default: "#ffb060" }), + strength: field.slider({ + label: "fields.strength", + min: 0, + max: 100, + step: 1, + default: 30, + }), }); const tintTool: ToolEntry = { @@ -108,7 +136,13 @@ interface QuantizeParams { } export const quantizeSchema = toolSchema({ - colors: field.slider({ min: 2, max: 64, step: 1, default: 16 }), + colors: field.slider({ + label: "fields.colorCount", + min: 2, + max: 64, + step: 1, + default: 16, + }), }); const quantizeTool: ToolEntry = { @@ -127,7 +161,7 @@ interface CustomPaletteParams { } export const customPaletteSchema = toolSchema({ - colors: field.text({ default: "#000000,#ffffff" }), + colors: field.text({ label: "fields.hexList", default: "#000000,#ffffff" }), }); const customPalette: ToolEntry = { @@ -147,8 +181,15 @@ interface DitheringParams { } export const ditheringSchema = toolSchema({ - colors: field.slider({ min: 2, max: 16, step: 1, default: 4 }), + colors: field.slider({ + label: "fields.colorCount", + min: 2, + max: 16, + step: 1, + default: 4, + }), pattern: field.select({ + label: "fields.pattern", default: "floyd-steinberg", options: [ { value: "floyd-steinberg", label: "Floyd–Steinberg" }, @@ -202,8 +243,20 @@ interface BrightnessContrastParams { export const brightnessContrastSchema = toolSchema( { - brightness: field.slider({ min: -100, max: 100, step: 1, default: 0 }), - contrast: field.slider({ min: -100, max: 100, step: 1, default: 0 }), + brightness: field.slider({ + label: "fields.brightness", + min: -100, + max: 100, + step: 1, + default: 0, + }), + contrast: field.slider({ + label: "fields.contrast", + min: -100, + max: 100, + step: 1, + default: 0, + }), }, { layout: { @@ -230,7 +283,13 @@ interface OpacityParams { } export const opacitySchema = toolSchema({ - percent: field.slider({ min: 0, max: 100, step: 1, default: 100 }), + percent: field.slider({ + label: "fields.percent", + min: 0, + max: 100, + step: 1, + default: 100, + }), }); const opacityTool: ToolEntry = { @@ -261,7 +320,13 @@ interface HueShiftParams { } export const hueShiftSchema = toolSchema({ - degrees: field.slider({ min: -180, max: 180, step: 1, default: 0 }), + degrees: field.slider({ + label: "fields.degrees", + min: -180, + max: 180, + step: 1, + default: 0, + }), }); const hueShiftTool: ToolEntry = { @@ -281,6 +346,7 @@ interface ExtractChannelParams { export const extractChannelSchema = toolSchema({ channel: field.select({ + label: "fields.channel", default: "red", options: [ { value: "red", label: "Red" }, @@ -307,6 +373,7 @@ interface SwapChannelsParams { export const swapChannelsSchema = toolSchema({ pair: field.select({ + label: "fields.channelPair", default: "r-g", options: [ { value: "r-g", label: "Red ↔ Green" }, @@ -332,7 +399,13 @@ interface BlackAndWhiteParams { } export const blackAndWhiteSchema = toolSchema({ - threshold: field.slider({ min: 0, max: 100, step: 1, default: 50 }), + threshold: field.slider({ + label: "fields.threshold", + min: 0, + max: 100, + step: 1, + default: 50, + }), }); const blackAndWhiteTool: ToolEntry = { @@ -351,7 +424,13 @@ interface PosterizeParams { } export const posterizeSchema = toolSchema({ - levels: field.slider({ min: 2, max: 16, step: 1, default: 4 }), + levels: field.slider({ + label: "fields.levels", + min: 2, + max: 16, + step: 1, + default: 4, + }), }); const posterizeTool: ToolEntry = { @@ -384,6 +463,7 @@ interface DecreaseColorCountParams { export const decreaseColorCountSchema = toolSchema({ maxColors: field.select({ + label: "fields.maxColors", default: "16", options: [ { value: "2", label: "2" }, @@ -479,6 +559,7 @@ function channelEntries(): ToolEntry[] { category: "color", schema: toolSchema({ component: field.select({ + label: "fields.component", default: components[0], options: components.map((c) => ({ value: c, @@ -486,6 +567,7 @@ function channelEntries(): ToolEntry[] { })), }), display: field.select({ + label: "fields.display", default: "gray", options: [ { value: "gray", label: "Grayscale" }, diff --git a/web/src/lib/registry/generate.ts b/web/src/lib/registry/generate.ts index 36861c9..bc18bef 100644 --- a/web/src/lib/registry/generate.ts +++ b/web/src/lib/registry/generate.ts @@ -80,9 +80,15 @@ interface CreateEmptyParams { export const createEmptySchema = toolSchema( { - size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }), - transparent: field.checkbox({ default: true }), - color: field.color({ default: "#ffffff" }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 20000, + width: 800, + height: 600, + }), + transparent: field.checkbox({ label: "fields.transparent", default: true }), + color: field.color({ label: "fields.fillColor", default: "#ffffff" }), }, { layout: { @@ -118,8 +124,14 @@ interface SingleColorParams { } export const singleColorSchema = toolSchema({ - size: field.dimension({ min: 1, max: 20000, width: 256, height: 256 }), - color: field.color({ default: "#ff0000" }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 20000, + width: 256, + height: 256, + }), + color: field.color({ label: "fields.color", default: "#ff0000" }), }); const singleColor: ToolEntry = { @@ -142,8 +154,20 @@ interface RandomNoiseParams { } export const randomNoiseSchema = toolSchema({ - size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }), - seed: field.number({ min: 0, max: 999999999, step: 1, default: 1 }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 5000, + width: 512, + height: 512, + }), + seed: field.number({ + label: "fields.seed", + min: 0, + max: 999999999, + step: 1, + default: 1, + }), }); const randomNoise: ToolEntry = { @@ -168,8 +192,19 @@ interface LinearGradientParams { export const linearGradientSchema = toolSchema( { - size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }), - gradient: field.gradient({ from: "#000000", to: "#ffffff", angle: 0 }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 20000, + width: 800, + height: 600, + }), + gradient: field.gradient({ + label: "fields.gradient", + from: "#000000", + to: "#ffffff", + angle: 0, + }), }, { layout: { @@ -211,16 +246,35 @@ interface ColorSpectrumParams { export const colorSpectrumSchema = toolSchema( { - size: field.dimension({ min: 1, max: 5000, width: 1024, height: 128 }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 5000, + width: 1024, + height: 128, + }), direction: field.select({ + label: "fields.direction", default: "horizontal", options: [ { value: "horizontal", label: "Horizontal" }, { value: "vertical", label: "Vertical" }, ], }), - saturation: field.slider({ min: 0, max: 100, step: 1, default: 100 }), - lightness: field.slider({ min: 0, max: 100, step: 1, default: 50 }), + saturation: field.slider({ + label: "fields.saturation", + min: 0, + max: 100, + step: 1, + default: 100, + }), + lightness: field.slider({ + label: "fields.lightness", + min: 0, + max: 100, + step: 1, + default: 50, + }), }, { layout: { @@ -258,9 +312,27 @@ interface RandomColorsParams { export const randomColorsSchema = toolSchema( { - size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }), - blockSize: field.slider({ min: 4, max: 256, step: 2, default: 64 }), - seed: field.number({ min: 0, max: 999999999, step: 1, default: 7 }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 5000, + width: 512, + height: 512, + }), + blockSize: field.slider({ + label: "fields.blockSize", + min: 4, + max: 256, + step: 2, + default: 64, + }), + seed: field.number({ + label: "fields.seed", + min: 0, + max: 999999999, + step: 1, + default: 7, + }), }, { layout: { @@ -298,12 +370,39 @@ interface DrawGridParams { export const drawGridSchema = toolSchema( { - size: field.dimension({ min: 1, max: 5000, width: 512, height: 512 }), - cols: field.slider({ min: 1, max: 64, step: 1, default: 8 }), - rows: field.slider({ min: 1, max: 64, step: 1, default: 8 }), - lineWidth: field.slider({ min: 1, max: 40, step: 1, default: 2 }), - color: field.color({ default: "#111318" }), - transparentBg: field.checkbox({ default: true }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 5000, + width: 512, + height: 512, + }), + cols: field.slider({ + label: "fields.cols", + min: 1, + max: 64, + step: 1, + default: 8, + }), + rows: field.slider({ + label: "fields.rows", + min: 1, + max: 64, + step: 1, + default: 8, + }), + lineWidth: field.slider({ + label: "fields.lineWidth", + min: 1, + max: 40, + step: 1, + default: 2, + }), + color: field.color({ label: "fields.lineColor", default: "#111318" }), + transparentBg: field.checkbox({ + label: "fields.transparentBg", + default: true, + }), }, { layout: { @@ -351,10 +450,19 @@ interface PlaceholderParams { export const placeholderSchema = toolSchema( { - size: field.dimension({ min: 1, max: 5000, width: 800, height: 400 }), - backgroundColor: field.color({ default: "#dfe2e8" }), - color: field.color({ default: "#5c6470" }), - showText: field.checkbox({ default: true }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 5000, + width: 800, + height: 400, + }), + backgroundColor: field.color({ + label: "fields.backgroundColor", + default: "#dfe2e8", + }), + color: field.color({ label: "fields.textColor", default: "#5c6470" }), + showText: field.checkbox({ label: "fields.showText", default: true }), }, { layout: { @@ -406,8 +514,18 @@ interface BlendTwoParams { } export const blendTwoSchema = toolSchema({ - pair: field.colorPair({ from: "#000000", to: "#ffffff" }), - width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }), + pair: field.colorPair({ + label: "fields.colorPair", + from: "#000000", + to: "#ffffff", + }), + width: field.slider({ + label: "fields.width", + min: 128, + max: 1024, + step: 16, + default: 512, + }), }); const blendTwo: ToolEntry = { @@ -429,10 +547,27 @@ interface StepColorsParams { export const stepColorsSchema = toolSchema( { - pair: field.colorPair({ from: "#000000", to: "#ffffff" }), - steps: field.slider({ min: 2, max: 12, step: 1, default: 6 }), - width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }), + pair: field.colorPair({ + label: "fields.colorPair", + from: "#000000", + to: "#ffffff", + }), + steps: field.slider({ + label: "fields.steps", + min: 2, + max: 12, + step: 1, + default: 6, + }), + width: field.slider({ + label: "fields.width", + min: 128, + max: 1024, + step: 16, + default: 512, + }), layout: field.select({ + label: "fields.layout", default: "grid", options: [ { value: "grid", label: "Grid" }, @@ -476,8 +611,14 @@ interface EmojiToPngParams { } export const emojiToPngSchema = toolSchema({ - emoji: field.text({ default: "😀" }), - size: field.slider({ min: 32, max: 1024, step: 16, default: 256 }), + emoji: field.text({ label: "fields.emoji", default: "😀" }), + size: field.slider({ + label: "fields.imageSize", + min: 32, + max: 1024, + step: 16, + default: 256, + }), }); const emojiToPng: ToolEntry = { @@ -498,8 +639,20 @@ interface ColorWheelParams { } export const colorWheelSchema = toolSchema({ - size: field.slider({ min: 128, max: 1024, step: 16, default: 512 }), - lightness: field.slider({ min: 0, max: 100, step: 1, default: 50 }), + size: field.slider({ + label: "fields.imageSize", + min: 128, + max: 1024, + step: 16, + default: 512, + }), + lightness: field.slider({ + label: "fields.lightness", + min: 0, + max: 100, + step: 1, + default: 50, + }), }); const colorWheelTool: ToolEntry = { @@ -520,9 +673,16 @@ interface PaletteBaseParams { } const paletteBaseSchema = { - baseColor: field.color({ default: "#2563eb" }), - width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }), + baseColor: field.color({ label: "fields.baseColor", default: "#2563eb" }), + width: field.slider({ + label: "fields.width", + min: 128, + max: 1024, + step: 16, + default: 512, + }), layout: field.select({ + label: "fields.layout", default: "grid", options: [ { value: "grid", label: "Grid" }, @@ -568,7 +728,7 @@ const triadicTool: ToolEntry = { schema: toolSchema( { ...paletteBaseSchema, - baseColor: field.color({ default: "#ff0000" }), + baseColor: field.color({ label: "fields.baseColor", default: "#ff0000" }), }, { ...paletteLayoutGroup }, ), @@ -587,7 +747,7 @@ const tetradicTool: ToolEntry = { schema: toolSchema( { ...paletteBaseSchema, - baseColor: field.color({ default: "#8000ff" }), + baseColor: field.color({ label: "fields.baseColor", default: "#8000ff" }), }, { ...paletteLayoutGroup }, ), @@ -611,9 +771,21 @@ const analogousTool: ToolEntry = { schema: toolSchema( { ...paletteBaseSchema, - baseColor: field.color({ default: "#22c55e" }), - spread: field.slider({ min: 10, max: 90, step: 5, default: 30 }), - count: field.slider({ min: 3, max: 9, step: 1, default: 5 }), + baseColor: field.color({ label: "fields.baseColor", default: "#22c55e" }), + spread: field.slider({ + label: "fields.spread", + min: 10, + max: 90, + step: 5, + default: 30, + }), + count: field.slider({ + label: "fields.count", + min: 3, + max: 9, + step: 1, + default: 5, + }), }, { ...paletteLayoutGroup }, ), @@ -641,9 +813,21 @@ const monochromaticTool: ToolEntry = { schema: toolSchema( { ...paletteBaseSchema, - baseColor: field.color({ default: "#0ea5e9" }), - count: field.slider({ min: 2, max: 9, step: 1, default: 5 }), - range: field.slider({ min: 10, max: 90, step: 5, default: 40 }), + baseColor: field.color({ label: "fields.baseColor", default: "#0ea5e9" }), + count: field.slider({ + label: "fields.count", + min: 2, + max: 9, + step: 1, + default: 5, + }), + range: field.slider({ + label: "fields.range", + min: 10, + max: 90, + step: 5, + default: 40, + }), }, { ...paletteLayoutGroup }, ), @@ -670,9 +854,21 @@ const shadesTool: ToolEntry = { schema: toolSchema( { ...paletteBaseSchema, - baseColor: field.color({ default: "#f59e0b" }), - count: field.slider({ min: 2, max: 9, step: 1, default: 5 }), - depth: field.slider({ min: 10, max: 90, step: 5, default: 50 }), + baseColor: field.color({ label: "fields.baseColor", default: "#f59e0b" }), + count: field.slider({ + label: "fields.count", + min: 2, + max: 9, + step: 1, + default: 5, + }), + depth: field.slider({ + label: "fields.depth", + min: 10, + max: 90, + step: 5, + default: 50, + }), }, { ...paletteLayoutGroup }, ), @@ -689,8 +885,17 @@ interface MixColorsParams { export const mixColorsSchema = toolSchema( { - colors: field.colors({ default: ["#ff0000", "#00ff00", "#0000ff"] }), - width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }), + colors: field.colors({ + label: "fields.colorList", + default: ["#ff0000", "#00ff00", "#0000ff"], + }), + width: field.slider({ + label: "fields.width", + min: 128, + max: 1024, + step: 16, + default: 512, + }), }, { layout: { @@ -723,6 +928,7 @@ interface SortColorsParams { export const sortColorsSchema = toolSchema( { colors: field.colors({ + label: "fields.colorList", default: [ "#ff0000", "#ff8800", @@ -733,6 +939,7 @@ export const sortColorsSchema = toolSchema( ], }), order: field.select({ + label: "fields.order", default: "hue", options: [ { value: "hue", label: "Hue" }, @@ -740,8 +947,15 @@ export const sortColorsSchema = toolSchema( { value: "sat", label: "Saturation" }, ], }), - width: field.slider({ min: 128, max: 1024, step: 16, default: 512 }), + width: field.slider({ + label: "fields.width", + min: 128, + max: 1024, + step: 16, + default: 512, + }), layout: field.select({ + label: "fields.layout", default: "grid", options: [ { value: "grid", label: "Grid" }, @@ -786,8 +1000,13 @@ interface TextToPngParams { export const textToPngSchema = toolSchema( { - text: field.text({ default: "Hello!", placeholder: "Your text" }), + text: field.text({ + label: "fields.text", + default: "Hello!", + placeholder: "Your text", + }), style: field.fontStyle({ + label: "fields.textStyle", min: 8, max: 300, size: 96, @@ -795,9 +1014,21 @@ export const textToPngSchema = toolSchema( bold: true, color: "#111318", }), - transparentBg: field.checkbox({ default: false }), - backgroundColor: field.color({ default: "#ffffff" }), - padding: field.slider({ min: 0, max: 200, step: 2, default: 24 }), + transparentBg: field.checkbox({ + label: "fields.transparentBg", + default: false, + }), + backgroundColor: field.color({ + label: "fields.backgroundColor", + default: "#ffffff", + }), + padding: field.slider({ + label: "fields.padding", + min: 0, + max: 200, + step: 2, + default: 24, + }), }, { layout: { diff --git a/web/src/lib/registry/geometry.ts b/web/src/lib/registry/geometry.ts index 19f77b3..66631d3 100644 --- a/web/src/lib/registry/geometry.ts +++ b/web/src/lib/registry/geometry.ts @@ -37,8 +37,14 @@ interface AddBorderParams { } export const addBorderSchema = toolSchema({ - thickness: field.number({ min: 1, max: 500, step: 1, default: 5 }), - color: field.color({ default: "#000000" }), + thickness: field.number({ + label: "fields.thickness", + min: 1, + max: 500, + step: 1, + default: 5, + }), + color: field.color({ label: "fields.borderColor", default: "#000000" }), }); const addBorder: ToolEntry = { @@ -69,9 +75,18 @@ interface FitOnBackgroundParams { export const fitOnBackgroundSchema = toolSchema( { - size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }), - transparent: field.checkbox({ default: false }), - color: field.color({ default: "#ffffff" }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 20000, + width: 800, + height: 600, + }), + transparent: field.checkbox({ + label: "fields.transparent", + default: false, + }), + color: field.color({ label: "fields.background", default: "#ffffff" }), }, { layout: { @@ -117,8 +132,15 @@ interface ChangeCanvasSizeParams { export const changeCanvasSizeSchema = toolSchema( { - size: field.dimension({ min: 1, max: 20000, width: 800, height: 600 }), + size: field.dimension({ + label: "fields.canvasSize", + min: 1, + max: 20000, + width: 800, + height: 600, + }), anchor: field.select({ + label: "fields.anchor", default: "center", options: [ { value: "top-left", label: "Top left" }, @@ -168,8 +190,14 @@ interface ResizeParams { export const resizeSchema = toolSchema( { - size: field.dimension({ min: 0, max: 20000, width: 0, height: 0 }), - keepAspect: field.checkbox({ default: true }), + size: field.dimension({ + label: "fields.canvasSize", + min: 0, + max: 20000, + width: 0, + height: 0, + }), + keepAspect: field.checkbox({ label: "fields.keepAspect", default: true }), }, { layout: { @@ -219,9 +247,27 @@ interface CropParams { export const cropSchema = toolSchema( { - x: field.number({ min: -100000, max: 100000, step: 1, default: 0 }), - y: field.number({ min: -100000, max: 100000, step: 1, default: 0 }), - size: field.dimension({ min: 0, max: 100000, width: 0, height: 0 }), + x: field.number({ + label: "fields.x", + min: -100000, + max: 100000, + step: 1, + default: 0, + }), + y: field.number({ + label: "fields.y", + min: -100000, + max: 100000, + step: 1, + default: 0, + }), + size: field.dimension({ + label: "fields.cropAreaSize", + min: 0, + max: 100000, + width: 0, + height: 0, + }), }, { layout: { @@ -257,6 +303,7 @@ interface RotateParams { export const rotateSchema = toolSchema({ angle: field.select({ + label: "fields.angle", default: "90", options: [ { value: "90", label: "90° clockwise" }, @@ -282,6 +329,7 @@ interface FlipParams { export const flipSchema = toolSchema({ axis: field.select({ + label: "fields.axis", default: "horizontal", options: [ { value: "horizontal", label: "Horizontal (left to right)" }, @@ -308,9 +356,15 @@ interface AddPaddingParams { export const addPaddingSchema = toolSchema( { - padding: field.number({ min: 1, max: 2000, step: 1, default: 10 }), - transparent: field.checkbox({ default: true }), - color: field.color({ default: "#ffffff" }), + padding: field.number({ + label: "fields.padding", + min: 1, + max: 2000, + step: 1, + default: 10, + }), + transparent: field.checkbox({ label: "fields.transparent", default: true }), + color: field.color({ label: "fields.fillColor", default: "#ffffff" }), }, { layout: { @@ -348,8 +402,20 @@ interface TileParams { } export const tileSchema = toolSchema({ - columns: field.number({ min: 1, max: 50, step: 1, default: 2 }), - rows: field.number({ min: 1, max: 50, step: 1, default: 2 }), + columns: field.number({ + label: "fields.columns", + min: 1, + max: 50, + step: 1, + default: 2, + }), + rows: field.number({ + label: "fields.rows", + min: 1, + max: 50, + step: 1, + default: 2, + }), }); const tileTool: ToolEntry = { @@ -370,8 +436,20 @@ interface SplitPartsParams { } export const splitPartsSchema = toolSchema({ - columns: field.number({ min: 1, max: 6, step: 1, default: 2 }), - rows: field.number({ min: 1, max: 6, step: 1, default: 2 }), + columns: field.number({ + label: "fields.columns", + min: 1, + max: 6, + step: 1, + default: 2, + }), + rows: field.number({ + label: "fields.rows", + min: 1, + max: 6, + step: 1, + default: 2, + }), }); const splitPartsTool: ToolEntry = { @@ -428,8 +506,20 @@ interface SkewParams { } export const skewSchema = toolSchema({ - degX: field.slider({ min: -80, max: 80, step: 1, default: 0 }), - degY: field.slider({ min: -80, max: 80, step: 1, default: 0 }), + degX: field.slider({ + label: "fields.skewX", + min: -80, + max: 80, + step: 1, + default: 0, + }), + degY: field.slider({ + label: "fields.skewY", + min: -80, + max: 80, + step: 1, + default: 0, + }), }); const skewTool: ToolEntry = { @@ -448,7 +538,13 @@ interface RotateFreeParams { } export const rotateFreeSchema = toolSchema({ - angle: field.slider({ min: -180, max: 180, step: 1, default: 15 }), + angle: field.slider({ + label: "fields.angle", + min: -180, + max: 180, + step: 1, + default: 15, + }), }); const rotateFreeTool: ToolEntry = { @@ -467,7 +563,13 @@ interface ZoomParams { } export const zoomSchema = toolSchema({ - scale: field.slider({ min: 100, max: 500, step: 10, default: 200 }), + scale: field.slider({ + label: "fields.scalePct", + min: 100, + max: 500, + step: 10, + default: 200, + }), }); const zoomTool: ToolEntry = { @@ -486,7 +588,13 @@ interface TrimEmptySpaceParams { } export const trimEmptySpaceSchema = toolSchema({ - threshold: field.slider({ min: 0, max: 254, step: 1, default: 0 }), + threshold: field.slider({ + label: "fields.alphaThreshold", + min: 0, + max: 254, + step: 1, + default: 0, + }), }); const trimEmptySpaceTool: ToolEntry = { @@ -509,6 +617,7 @@ interface ChangeAspectRatioParams { export const changeAspectRatioSchema = toolSchema({ ratio: field.select({ + label: "fields.ratio", default: "1:1", options: [ { value: "1:1", label: "1:1" }, @@ -521,6 +630,7 @@ export const changeAspectRatioSchema = toolSchema({ ], }), mode: field.select({ + label: "fields.fitMode", default: "crop", options: [ { value: "crop", label: "Crop to fill" }, @@ -550,6 +660,7 @@ interface SwapOrientationParams { export const swapOrientationSchema = toolSchema({ target: field.select({ + label: "fields.orientation", default: "portrait", options: [ { value: "portrait", label: "Portrait" }, @@ -579,6 +690,7 @@ interface SymmetricCopyParams { export const symmetricCopySchema = toolSchema({ axis: field.select({ + label: "fields.axis", default: "vertical", options: [ { value: "vertical", label: "Vertical (double width)" }, @@ -586,6 +698,7 @@ export const symmetricCopySchema = toolSchema({ ], }), keepSide: field.select({ + label: "fields.keepSide", default: "left", options: [ { value: "left", label: "Left" }, @@ -614,9 +727,21 @@ interface ShiftParams { } export const shiftSchema = toolSchema({ - offsetX: field.number({ min: -5000, max: 5000, step: 1, default: 0 }), - offsetY: field.number({ min: -5000, max: 5000, step: 1, default: 0 }), - color: field.color({ default: "#ffffff" }), + offsetX: field.number({ + label: "fields.offsetX", + min: -5000, + max: 5000, + step: 1, + default: 0, + }), + offsetY: field.number({ + label: "fields.offsetY", + min: -5000, + max: 5000, + step: 1, + default: 0, + }), + color: field.color({ label: "fields.fillColor", default: "#ffffff" }), }); const shiftTool: ToolEntry = { diff --git a/web/src/lib/registry/text.ts b/web/src/lib/registry/text.ts index 6d9e23c..f051c47 100644 --- a/web/src/lib/registry/text.ts +++ b/web/src/lib/registry/text.ts @@ -15,8 +15,13 @@ interface AddTextParams { const addTextSchema = toolSchema( { - text: field.text({ default: "Hello!", placeholder: "Your text" }), + text: field.text({ + label: "fields.text", + default: "Hello!", + placeholder: "Your text", + }), style: field.fontStyle({ + label: "fields.textStyle", min: 8, max: 200, size: 48, @@ -24,9 +29,23 @@ const addTextSchema = toolSchema( bold: true, color: "#ffffff", }), - position: field.position9({ default: "bottom-right" }), - margin: field.slider({ min: 0, max: 200, step: 1, default: 24 }), - plate: field.plate({ enabled: false, color: "#000000", opacity: 60 }), + position: field.position9({ + label: "fields.position", + default: "bottom-right", + }), + margin: field.slider({ + label: "fields.margin", + min: 0, + max: 200, + step: 1, + default: 24, + }), + plate: field.plate({ + label: "fields.plate", + enabled: false, + color: "#000000", + opacity: 60, + }), }, { layout: { @@ -75,10 +94,12 @@ interface DateStampParams { const dateStampSchema = toolSchema( { format: field.text({ + label: "fields.dateFormat", default: "YYYY-MM-DD", placeholder: "YYYY-MM-DD hh:mm", }), style: field.fontStyle({ + label: "fields.textStyle", min: 8, max: 200, size: 32, @@ -86,9 +107,23 @@ const dateStampSchema = toolSchema( bold: false, color: "#ffffff", }), - position: field.position9({ default: "bottom-right" }), - margin: field.slider({ min: 0, max: 200, step: 1, default: 20 }), - plate: field.plate({ enabled: true, color: "#000000", opacity: 55 }), + position: field.position9({ + label: "fields.position", + default: "bottom-right", + }), + margin: field.slider({ + label: "fields.margin", + min: 0, + max: 200, + step: 1, + default: 20, + }), + plate: field.plate({ + label: "fields.plate", + enabled: true, + color: "#000000", + opacity: 55, + }), }, { layout: { @@ -137,8 +172,13 @@ interface WatermarkTileParams { const watermarkTileSchema = toolSchema( { - text: field.text({ default: "DRAFT", placeholder: "Watermark text" }), + text: field.text({ + label: "fields.text", + default: "DRAFT", + placeholder: "Watermark text", + }), style: field.fontStyle({ + label: "fields.textStyle", min: 12, max: 160, size: 56, @@ -146,10 +186,34 @@ const watermarkTileSchema = toolSchema( bold: true, color: "#ffffff", }), - opacity: field.slider({ min: 5, max: 100, step: 5, default: 30 }), - angle: field.slider({ min: -90, max: 90, step: 1, default: -30 }), - stepX: field.slider({ min: 40, max: 600, step: 10, default: 220 }), - stepY: field.slider({ min: 40, max: 600, step: 10, default: 180 }), + opacity: field.slider({ + label: "fields.opacity", + min: 5, + max: 100, + step: 5, + default: 30, + }), + angle: field.slider({ + label: "fields.angle", + min: -90, + max: 90, + step: 1, + default: -30, + }), + stepX: field.slider({ + label: "fields.stepX", + min: 40, + max: 600, + step: 10, + default: 220, + }), + stepY: field.slider({ + label: "fields.stepY", + min: 40, + max: 600, + step: 10, + default: 180, + }), }, { layout: {