[i18n] Add translation to mask editor. (#3024)

Co-authored-by: samnyan <4137880+samnyan@users.noreply.github.com>
Co-authored-by: github-actions <github-actions@github.com>

.github/workflows/i18n.yaml

@@ -34,7 +34,11 @@ jobs:
         git config --global user.name 'github-actions'
         git config --global user.email 'github-actions@github.com'
         git fetch origin ${{ github.head_ref }}
+        # Stash any local changes before checkout
+        git stash -u
         git checkout -B ${{ github.head_ref }} origin/${{ github.head_ref }}
+        # Apply the stashed changes if any
+        git stash pop || true
         git add src/locales/
         git diff --staged --quiet || git commit -m "Update locales [skip ci]"
         git push origin HEAD:${{ github.head_ref }}

src/extensions/core/maskeditor.ts

@@ -1,5 +1,7 @@
 import { debounce } from 'lodash'
 
+import { t } from '@/i18n'
+
 import { api } from '../../scripts/api'
 import { app } from '../../scripts/app'
 import { ComfyApp } from '../../scripts/app'
@@ -1086,7 +1088,7 @@ class MaskEditorDialog extends ComfyDialog {
     formData.append('type', 'input')
     formData.append('subfolder', 'clipspace')
 
-    this.uiManager.setSaveButtonText('Saving')
+    this.uiManager.setSaveButtonText(t('g.saving'))
     this.uiManager.setSaveButtonEnabled(false)
     this.keyboardManager.removeListeners()
 
@@ -1115,7 +1117,7 @@ class MaskEditorDialog extends ComfyDialog {
       this.close()
       this.isOpen = false
     } else {
-      this.uiManager.setSaveButtonText('Save')
+      this.uiManager.setSaveButtonText(t('g.save'))
       this.uiManager.setSaveButtonEnabled(true)
       this.keyboardManager.addListeners()
     }
@@ -2846,7 +2848,7 @@ class UIManager {
   }
 
   async initUI() {
-    this.saveButton.innerText = 'Save'
+    this.saveButton.innerText = t('g.save')
     this.saveButton.disabled = false
 
     await this.setImages(this.imgCanvas) //probably change method to initImageCanvas
@@ -2887,11 +2889,15 @@ class UIManager {
       : 'maskEditor_brushShape_light'
     const brush_settings_container = this.createContainer(true)
 
-    const brush_settings_title = this.createHeadline('Brush Settings')
+    const brush_settings_title = this.createHeadline(
+      t('maskEditor.Brush Settings')
+    )
 
     const brush_shape_outer_container = this.createContainer(true)
 
-    const brush_shape_title = this.createContainerTitle('Brush Shape')
+    const brush_shape_title = this.createContainerTitle(
+      t('maskEditor.Brush Shape')
+    )
 
     const brush_shape_container = this.createContainer(false)
 
@@ -2939,7 +2945,7 @@ class UIManager {
     brush_shape_outer_container.appendChild(brush_shape_container)
 
     const thicknesSliderObj = this.createSlider(
-      'Thickness',
+      t('maskEditor.Thickness'),
       1,
       100,
       1,
@@ -2952,7 +2958,7 @@ class UIManager {
     this.brushSizeSlider = thicknesSliderObj.slider
 
     const opacitySliderObj = this.createSlider(
-      'Opacity',
+      t('maskEditor.Opacity'),
       0,
       1,
       0.01,
@@ -2965,7 +2971,7 @@ class UIManager {
     this.brushOpacitySlider = opacitySliderObj.slider
 
     const hardnessSliderObj = this.createSlider(
-      'Hardness',
+      t('maskEditor.Hardness'),
       0,
       1,
       0.01,
@@ -2978,7 +2984,7 @@ class UIManager {
     this.brushHardnessSlider = hardnessSliderObj.slider
 
     const brushSmoothingPrecisionSliderObj = this.createSlider(
-      'Smoothing Precision',
+      t('maskEditor.Smoothing Precision'),
       1,
       100,
       1,
@@ -2993,7 +2999,7 @@ class UIManager {
 
     const resetBrushSettingsButton = document.createElement('button')
     resetBrushSettingsButton.id = 'resetBrushSettingsButton'
-    resetBrushSettingsButton.innerText = 'Reset to Default'
+    resetBrushSettingsButton.innerText = t('maskEditor.Reset to Default')
 
     resetBrushSettingsButton.addEventListener('click', () => {
       this.messageBroker.publish('setBrushShape', BrushShape.Arc)
@@ -3031,12 +3037,12 @@ class UIManager {
     const paint_bucket_settings_container = this.createContainer(true)
 
     const paint_bucket_settings_title = this.createHeadline(
-      'Paint Bucket Settings'
+      t('maskEditor.Paint Bucket Settings')
     )
 
     const tolerance = await this.messageBroker.pull('getTolerance')
     const paintBucketToleranceSliderObj = this.createSlider(
-      'Tolerance',
+      t('maskEditor.Tolerance'),
       0,
       255,
       1,
@@ -3049,7 +3055,7 @@ class UIManager {
     // Add new slider for fill opacity
     const fillOpacity = (await this.messageBroker.pull('getFillOpacity')) || 100
     const fillOpacitySliderObj = this.createSlider(
-      'Fill Opacity',
+      t('maskEditor.Fill Opacity'),
       0,
       100,
       1,
@@ -3073,12 +3079,12 @@ class UIManager {
     const color_select_settings_container = this.createContainer(true)
 
     const color_select_settings_title = this.createHeadline(
-      'Color Select Settings'
+      t('maskEditor.Color Select Settings')
     )
 
     var tolerance = await this.messageBroker.pull('getTolerance')
     const colorSelectToleranceSliderObj = this.createSlider(
-      'Tolerance',
+      t('maskEditor.Tolerance'),
       0,
       255,
       1,
@@ -3090,7 +3096,7 @@ class UIManager {
 
     // Add new slider for selection opacity
     const selectionOpacitySliderObj = this.createSlider(
-      'Selection Opacity',
+      t('maskEditor.Selection Opacity'),
       0,
       100,
       1,
@@ -3101,14 +3107,14 @@ class UIManager {
     )
 
     const livePreviewToggle = this.createToggle(
-      'Live Preview',
+      t('maskEditor.Live Preview'),
       (event, value) => {
         this.messageBroker.publish('setLivePreview', value)
       }
     )
 
     const wholeImageToggle = this.createToggle(
-      'Apply to Whole Image',
+      t('maskEditor.Apply to Whole Image'),
       (event, value) => {
         this.messageBroker.publish('setWholeImage', value)
       }
@@ -3116,7 +3122,7 @@ class UIManager {
 
     const methodOptions = Object.values(ColorComparisonMethod)
     const methodSelect = this.createDropdown(
-      'Method',
+      t('maskEditor.Method'),
       methodOptions,
       (event, value) => {
         this.messageBroker.publish('setColorComparisonMethod', value)
@@ -3124,14 +3130,14 @@ class UIManager {
     )
 
     const maskBoundaryToggle = this.createToggle(
-      'Stop at mask',
+      t('maskEditor.Stop at mask'),
       (event, value) => {
         this.messageBroker.publish('setMaskBoundary', value)
       }
     )
 
     const maskToleranceSliderObj = this.createSlider(
-      'Mask Tolerance',
+      t('maskEditor.Mask Tolerance'),
       0,
       255,
       1,
@@ -3167,9 +3173,13 @@ class UIManager {
 
     const image_layer_settings_container = this.createContainer(true)
 
-    const image_layer_settings_title = this.createHeadline('Layers')
+    const image_layer_settings_title = this.createHeadline(
+      t('maskEditor.Layers')
+    )
 
-    const mask_layer_title = this.createContainerTitle('Mask Layer')
+    const mask_layer_title = this.createContainerTitle(
+      t('maskEditor.Mask Layer')
+    )
 
     const mask_layer_container = this.createContainer(false)
     mask_layer_container.classList.add(accentColor)
@@ -3228,7 +3238,7 @@ class UIManager {
     mask_layer_container.appendChild(mask_layer_dropdown)
 
     const mask_layer_opacity_sliderObj = this.createSlider(
-      'Mask Opacity',
+      t('maskEditor.Mask Opacity'),
       0.0,
       1.0,
       0.01,
@@ -3246,7 +3256,9 @@ class UIManager {
     )
     this.maskOpacitySlider = mask_layer_opacity_sliderObj.slider
 
-    const image_layer_title = this.createContainerTitle('Image Layer')
+    const image_layer_title = this.createContainerTitle(
+      t('maskEditor.Image Layer')
+    )
 
     const image_layer_container = this.createContainer(false)
     image_layer_container.classList.add(accentColor)
@@ -3471,7 +3483,7 @@ class UIManager {
     var top_bar_invert_button = document.createElement('button')
     top_bar_invert_button.id = 'maskEditor_topBarInvertButton'
     top_bar_invert_button.classList.add(buttonAccentColor)
-    top_bar_invert_button.innerText = 'Invert'
+    top_bar_invert_button.innerText = t('maskEditor.Invert')
     top_bar_invert_button.addEventListener('click', () => {
       this.messageBroker.publish('invert')
     })
@@ -3479,7 +3491,7 @@ class UIManager {
     var top_bar_clear_button = document.createElement('button')
     top_bar_clear_button.id = 'maskEditor_topBarClearButton'
     top_bar_clear_button.classList.add(buttonAccentColor)
-    top_bar_clear_button.innerText = 'Clear'
+    top_bar_clear_button.innerText = t('maskEditor.Clear')
 
     top_bar_clear_button.addEventListener('click', () => {
       this.maskCtx.clearRect(
@@ -3494,7 +3506,7 @@ class UIManager {
     var top_bar_save_button = document.createElement('button')
     top_bar_save_button.id = 'maskEditor_topBarSaveButton'
     top_bar_save_button.classList.add(buttonAccentColor)
-    top_bar_save_button.innerText = 'Save'
+    top_bar_save_button.innerText = t('g.save')
     this.saveButton = top_bar_save_button
 
     top_bar_save_button.addEventListener('click', () => {
@@ -3504,7 +3516,7 @@ class UIManager {
     var top_bar_cancel_button = document.createElement('button')
     top_bar_cancel_button.id = 'maskEditor_topBarCancelButton'
     top_bar_cancel_button.classList.add(buttonAccentColor)
-    top_bar_cancel_button.innerText = 'Cancel'
+    top_bar_cancel_button.innerText = t('g.cancel')
 
     top_bar_cancel_button.addEventListener('click', () => {
       this.maskEditor.close()

src/locales/en/main.json

@@ -40,6 +40,7 @@
     "delete": "Delete",
     "rename": "Rename",
     "save": "Save",
+    "saving": "Saving",
     "no": "No",
     "cancel": "Cancel",
     "close": "Close",
@@ -538,6 +539,31 @@
     "cancel": "Cancel Download",
     "cancelled": "Cancelled"
   },
+  "maskEditor": {
+    "Invert": "Invert",
+    "Clear": "Clear",
+    "Brush Settings": "Brush Settings",
+    "Brush Shape": "Brush Shape",
+    "Thickness": "Thickness",
+    "Opacity": "Opacity",
+    "Hardness": "Hardness",
+    "Smoothing Precision": "Smoothing Precision",
+    "Reset to Default": "Reset to Default",
+    "Paint Bucket Settings": "Paint Bucket Settings",
+    "Tolerance": "Tolerance",
+    "Fill Opacity": "Fill Opacity",
+    "Color Select Settings": "Color Select Settings",
+    "Selection Opacity": "Selection Opacity",
+    "Live Preview": "Live Preview",
+    "Apply to Whole Image": "Apply to Whole Image",
+    "Method": "Method",
+    "Stop at mask": "Stop at mask",
+    "Mask Tolerance": "Mask Tolerance",
+    "Layers": "Layers",
+    "Mask Layer": "Mask Layer",
+    "Mask Opacity": "Mask Opacity",
+    "Image Layer": "Image Layer"
+  },
   "menuLabels": {
     "Workflow": "Workflow",
     "Edit": "Edit",

src/locales/fr/main.json

@@ -188,6 +188,7 @@
     "resetKeybindingsTooltip": "Réinitialiser les raccourcis clavier par défaut",
     "resultsCount": "{count} Résultats Trouvés",
     "save": "Enregistrer",
+    "saving": "Enregistrement",
     "searchExtensions": "Rechercher des extensions",
     "searchFailedMessage": "Nous n'avons trouvé aucun paramètre correspondant à votre recherche. Essayez d'ajuster vos termes de recherche.",
     "searchKeybindings": "Rechercher des raccourcis clavier",
@@ -418,6 +419,31 @@
     "update": "Mettre à jour",
     "version": "Version"
   },
+  "maskEditor": {
+    "Apply to Whole Image": "Appliquer à toute l'image",
+    "Brush Settings": "Paramètres de brosse",
+    "Brush Shape": "Forme de brosse",
+    "Clear": "Effacer",
+    "Color Select Settings": "Paramètres de sélection de couleur",
+    "Fill Opacity": "Opacité de remplissage",
+    "Hardness": "Dureté",
+    "Image Layer": "Couche d'image",
+    "Invert": "Inverser",
+    "Layers": "Couches",
+    "Live Preview": "Aperçu en direct",
+    "Mask Layer": "Couche de masque",
+    "Mask Opacity": "Opacité du masque",
+    "Mask Tolerance": "Tolérance du masque",
+    "Method": "Méthode",
+    "Opacity": "Opacité",
+    "Paint Bucket Settings": "Paramètres du seau de peinture",
+    "Reset to Default": "Réinitialiser par défaut",
+    "Selection Opacity": "Opacité de sélection",
+    "Smoothing Precision": "Précision de lissage",
+    "Stop at mask": "Arrêter au masque",
+    "Thickness": "Épaisseur",
+    "Tolerance": "Tolérance"
+  },
   "menu": {
     "autoQueue": "File d'attente automatique",
     "batchCount": "Nombre de lots",

src/locales/ja/main.json

@@ -188,6 +188,7 @@
     "resetKeybindingsTooltip": "キーバインディングをデフォルトにリセット",
     "resultsCount": "{count}件の結果が見つかりました",
     "save": "保存",
+    "saving": "保存中",
     "searchExtensions": "拡張機能を検索",
     "searchFailedMessage": "検索に一致する設定が見つかりませんでした。検索キーワードを調整してみてください。",
     "searchKeybindings": "キーバインディングを検索",
@@ -418,6 +419,31 @@
     "update": "更新",
     "version": "バージョン"
   },
+  "maskEditor": {
+    "Apply to Whole Image": "全画像に適用",
+    "Brush Settings": "ブラシ設定",
+    "Brush Shape": "ブラシ形状",
+    "Clear": "クリア",
+    "Color Select Settings": "色選択設定",
+    "Fill Opacity": "塗りつぶしの不透明度",
+    "Hardness": "硬さ",
+    "Image Layer": "画像レイヤー",
+    "Invert": "反転",
+    "Layers": "レイヤー",
+    "Live Preview": "ライブプレビュー",
+    "Mask Layer": "マスクレイヤー",
+    "Mask Opacity": "マスクの不透明度",
+    "Mask Tolerance": "マスクの許容範囲",
+    "Method": "方法",
+    "Opacity": "不透明度",
+    "Paint Bucket Settings": "ペイントバケツ設定",
+    "Reset to Default": "デフォルトにリセット",
+    "Selection Opacity": "選択範囲の不透明度",
+    "Smoothing Precision": "スムージング精度",
+    "Stop at mask": "マスクで停止",
+    "Thickness": "厚さ",
+    "Tolerance": "許容範囲"
+  },
   "menu": {
     "autoQueue": "自動キュー",
     "batchCount": "バッチ数",

src/locales/ko/main.json

@@ -188,6 +188,7 @@
     "resetKeybindingsTooltip": "키 바인딩을 기본값으로 재설정",
     "resultsCount": "{count} 개의 결과를 찾았습니다",
     "save": "저장",
+    "saving": "저장 중",
     "searchExtensions": "확장 검색",
     "searchFailedMessage": "검색어와 일치하는 설정을 찾을 수 없습니다. 검색어를 조정해 보세요.",
     "searchKeybindings": "키 바인딩 검색",
@@ -418,6 +419,31 @@
     "update": "업데이트",
     "version": "버전"
   },
+  "maskEditor": {
+    "Apply to Whole Image": "전체 이미지에 적용",
+    "Brush Settings": "브러시 설정",
+    "Brush Shape": "브러시 모양",
+    "Clear": "지우기",
+    "Color Select Settings": "색상 선택 설정",
+    "Fill Opacity": "채우기 투명도",
+    "Hardness": "경도",
+    "Image Layer": "이미지 레이어",
+    "Invert": "반전",
+    "Layers": "레이어",
+    "Live Preview": "실시간 미리보기",
+    "Mask Layer": "마스크 레이어",
+    "Mask Opacity": "마스크 투명도",
+    "Mask Tolerance": "마스크 허용 오차",
+    "Method": "방법",
+    "Opacity": "투명도",
+    "Paint Bucket Settings": "페인트 버킷 설정",
+    "Reset to Default": "기본값으로 재설정",
+    "Selection Opacity": "선택 투명도",
+    "Smoothing Precision": "스무딩 정밀도",
+    "Stop at mask": "마스크에서 중지",
+    "Thickness": "두께",
+    "Tolerance": "허용 오차"
+  },
   "menu": {
     "autoQueue": "자동 실행 큐",
     "batchCount": "배치 수",

src/locales/ru/main.json

@@ -188,6 +188,7 @@
     "resetKeybindingsTooltip": "Сбросить сочетания клавиш по умолчанию",
     "resultsCount": "Найдено {count} результатов",
     "save": "Сохранить",
+    "saving": "Сохранение",
     "searchExtensions": "Поиск расширений",
     "searchFailedMessage": "Мы не смогли найти настройки, соответствующие вашему запросу. Попробуйте изменить поисковые термины.",
     "searchKeybindings": "Поиск сочетаний клавиш",
@@ -418,6 +419,31 @@
     "update": "Обновить",
     "version": "Версия"
   },
+  "maskEditor": {
+    "Apply to Whole Image": "Применить ко всему изображению",
+    "Brush Settings": "Настройки кисти",
+    "Brush Shape": "Форма кисти",
+    "Clear": "Очистить",
+    "Color Select Settings": "Настройки выбора цвета",
+    "Fill Opacity": "Прозрачность заливки",
+    "Hardness": "Жесткость",
+    "Image Layer": "Слой изображения",
+    "Invert": "Инвертировать",
+    "Layers": "Слои",
+    "Live Preview": "Предварительный просмотр",
+    "Mask Layer": "Слой маски",
+    "Mask Opacity": "Прозрачность маски",
+    "Mask Tolerance": "Толерантность маски",
+    "Method": "Метод",
+    "Opacity": "Прозрачность",
+    "Paint Bucket Settings": "Настройки заливки",
+    "Reset to Default": "Сбросить до стандартных",
+    "Selection Opacity": "Прозрачность выбора",
+    "Smoothing Precision": "Точность сглаживания",
+    "Stop at mask": "Остановиться на маске",
+    "Thickness": "Толщина",
+    "Tolerance": "Толерантность"
+  },
   "menu": {
     "autoQueue": "Автоочередь",
     "batchCount": "Количество пакетов",

src/locales/zh/main.json

@@ -188,6 +188,7 @@
     "resetKeybindingsTooltip": "将快捷键重置为默认",
     "resultsCount": "找到 {count} 个结果",
     "save": "保存",
+    "saving": "正在保存",
     "searchExtensions": "搜索扩展",
     "searchFailedMessage": "我们找不到任何与您的搜索匹配的设置。请尝试调整您的搜索词。",
     "searchKeybindings": "搜索快捷键",
@@ -418,6 +419,31 @@
     "update": "更新",
     "version": "版本"
   },
+  "maskEditor": {
+    "Apply to Whole Image": "应用到整个图像",
+    "Brush Settings": "笔刷设置",
+    "Brush Shape": "笔刷形状",
+    "Clear": "清空",
+    "Color Select Settings": "颜色选择设置",
+    "Fill Opacity": "填充不透明度",
+    "Hardness": "硬度",
+    "Image Layer": "图像图层",
+    "Invert": "反转",
+    "Layers": "图层",
+    "Live Preview": "实时预览",
+    "Mask Layer": "遮罩图层",
+    "Mask Opacity": "遮罩不透明度",
+    "Mask Tolerance": "遮罩容差",
+    "Method": "方法",
+    "Opacity": "不透明度",
+    "Paint Bucket Settings": "油漆桶设置",
+    "Reset to Default": "恢复默认",
+    "Selection Opacity": "选区不透明度",
+    "Smoothing Precision": "平滑精度",
+    "Stop at mask": "在遮罩处停止",
+    "Thickness": "粗细",
+    "Tolerance": "容差"
+  },
   "menu": {
     "autoQueue": "自动执行",
     "batchCount": "批次数量",