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: {