[Electron] Translate server config panel (#1817)

* Update i18 collection to include server config items

* Use translation

* Update locales [skip ci]

* nit

---------

Co-authored-by: github-actions <github-actions@github.com>

scripts/collect-i18n.ts

@@ -1,9 +1,10 @@
 import * as fs from 'fs'
 import { comfyPageFixture as test } from '../browser_tests/fixtures/ComfyPage'
 import { CORE_MENU_COMMANDS } from '../src/constants/coreMenuCommands'
+import { SERVER_CONFIG_ITEMS } from '../src/constants/serverConfig'
 import { formatCamelCase, normalizeI18nKey } from '../src/utils/formatUtil'
 import type { ComfyCommandImpl } from '../src/stores/commandStore'
-import type { SettingParams } from '../src/types/settingTypes'
+import type { FormItem, SettingParams } from '../src/types/settingTypes'
 
 const localePath = './src/locales/en.json'
 const extractMenuCommandLocaleStrings = (): Set<string> => {
@@ -71,6 +72,25 @@ test('collect-i18n', async ({ comfyPage }) => {
       ])
   )
 
+  const allServerConfigsLocale = Object.fromEntries(
+    SERVER_CONFIG_ITEMS.map((config) => [
+      normalizeI18nKey(config.id),
+      {
+        name: (config as unknown as FormItem).name,
+        tooltip: (config as unknown as FormItem).tooltip
+      }
+    ])
+  )
+
+  const allServerConfigCategoriesLocale = Object.fromEntries(
+    SERVER_CONFIG_ITEMS.flatMap((config) => {
+      return config.category ?? ['General']
+    }).map((category) => [
+      normalizeI18nKey(category),
+      formatCamelCase(category)
+    ])
+  )
+
   fs.writeFileSync(
     localePath,
     JSON.stringify(
@@ -83,7 +103,9 @@ test('collect-i18n', async ({ comfyPage }) => {
         settingsCategories: {
           ...(locale.settingsCategories ?? {}),
           ...allSettingCategoriesLocale
-        }
+        },
+        serverConfigItems: allServerConfigsLocale,
+        serverConfigCategories: allServerConfigCategoriesLocale
       },
       null,
       2

src/components/dialog/content/setting/ServerConfigPanel.vue

@@ -50,14 +50,14 @@
       :key="label"
     >
       <Divider v-if="i > 0" />
-      <h3>{{ formatCamelCase(label) }}</h3>
+      <h3>{{ $t(`serverConfigCategories.${label}`, label) }}</h3>
       <div
         v-for="item in items"
         :key="item.name"
         class="flex items-center mb-4"
       >
         <FormItem
-          :item="item"
+          :item="translateItem(item)"
           v-model:formValue="item.value"
           :id="item.id"
           :labelClass="{
@@ -75,13 +75,15 @@ import Message from 'primevue/message'
 import Divider from 'primevue/divider'
 import FormItem from '@/components/common/FormItem.vue'
 import PanelTemplate from './PanelTemplate.vue'
-import { formatCamelCase } from '@/utils/formatUtil'
 import { useServerConfigStore } from '@/stores/serverConfigStore'
 import { storeToRefs } from 'pinia'
 import { electronAPI } from '@/utils/envUtil'
 import { useSettingStore } from '@/stores/settingStore'
 import { watch } from 'vue'
 import { useCopyToClipboard } from '@/hooks/clipboardHooks'
+import type { FormItem as FormItemType } from '@/types/settingTypes'
+import type { ServerConfig } from '@/constants/serverConfig'
+import { useI18n } from 'vue-i18n'
 
 const settingStore = useSettingStore()
 const serverConfigStore = useServerConfigStore()
@@ -113,4 +115,15 @@ const { copyToClipboard } = useCopyToClipboard()
 const copyCommandLineArgs = async () => {
   await copyToClipboard(commandLineArgs.value)
 }
+
+const { t } = useI18n()
+const translateItem = (item: ServerConfig<any>): FormItemType => {
+  return {
+    ...item,
+    name: t(`serverConfigItems.${item.id}.name`, item.name),
+    tooltip: item.tooltip
+      ? t(`serverConfigItems.${item.id}.tooltip`, item.tooltip)
+      : undefined
+  }
+}
 </script>

src/locales/en.json

@@ -637,5 +637,121 @@
     "Window": "Window",
     "Server-Config": "Server-Config",
     "About": "About"
+  },
+  "serverConfigItems": {
+    "tls-keyfile": {
+      "name": "TLS Key File: Path to TLS key file for HTTPS"
+    },
+    "tls-certfile": {
+      "name": "TLS Certificate File: Path to TLS certificate file for HTTPS"
+    },
+    "enable-cors-header": {
+      "name": "Enable CORS header: Use \"*\" for all origins or specify domain"
+    },
+    "max-upload-size": {
+      "name": "Maximum upload size (MB)"
+    },
+    "cuda-device": {
+      "name": "CUDA device index to use"
+    },
+    "cuda-malloc": {
+      "name": "Use CUDA malloc for memory allocation"
+    },
+    "global-precision": {
+      "name": "Global floating point precision",
+      "tooltip": "Global floating point precision"
+    },
+    "unet-precision": {
+      "name": "UNET precision",
+      "tooltip": "UNET precision"
+    },
+    "vae-precision": {
+      "name": "VAE precision",
+      "tooltip": "VAE precision"
+    },
+    "cpu-vae": {
+      "name": "Run VAE on CPU"
+    },
+    "text-encoder-precision": {
+      "name": "Text Encoder precision",
+      "tooltip": "Text Encoder precision"
+    },
+    "force-channels-last": {
+      "name": "Force channels-last memory format"
+    },
+    "directml": {
+      "name": "DirectML device index"
+    },
+    "disable-ipex-optimize": {
+      "name": "Disable IPEX optimization"
+    },
+    "preview-method": {
+      "name": "Method used for latent previews"
+    },
+    "preview-size": {
+      "name": "Size of preview images"
+    },
+    "cache-classic": {
+      "name": "Use classic cache system"
+    },
+    "cache-lru": {
+      "name": "Use LRU caching with a maximum of N node results cached.",
+      "tooltip": "May use more RAM/VRAM."
+    },
+    "cross-attention-method": {
+      "name": "Cross attention method"
+    },
+    "disable-xformers": {
+      "name": "Disable xFormers optimization"
+    },
+    "force-upcast-attention": {
+      "name": "Force attention upcast"
+    },
+    "dont-upcast-attention": {
+      "name": "Prevent attention upcast"
+    },
+    "vram-management": {
+      "name": "VRAM management mode"
+    },
+    "reserve-vram": {
+      "name": "Reserved VRAM (GB)",
+      "tooltip": "Set the amount of vram in GB you want to reserve for use by your OS/other software. By default some amount is reverved depending on your OS."
+    },
+    "default-hashing-function": {
+      "name": "Default hashing function for model files"
+    },
+    "disable-smart-memory": {
+      "name": "Disable smart memory management",
+      "tooltip": "Force ComfyUI to aggressively offload to regular ram instead of keeping models in vram when it can."
+    },
+    "deterministic": {
+      "name": "Make pytorch use slower deterministic algorithms when it can.",
+      "tooltip": "Note that this might not make images deterministic in all cases."
+    },
+    "fast": {
+      "name": "Enable some untested and potentially quality deteriorating optimizations."
+    },
+    "dont-print-server": {
+      "name": "Don't print server output to console."
+    },
+    "disable-metadata": {
+      "name": "Disable saving prompt metadata in files."
+    },
+    "disable-all-custom-nodes": {
+      "name": "Disable loading all custom nodes."
+    },
+    "log-level": {
+      "name": "Logging verbosity level"
+    }
+  },
+  "serverConfigCategories": {
+    "Network": "Network",
+    "CUDA": "CUDA",
+    "Inference": "Inference",
+    "Memory": "Memory",
+    "Preview": "Preview",
+    "Cache": "Cache",
+    "Attention": "Attention",
+    "General": "General"
   }
 }

src/locales/ja.json

@@ -233,6 +233,122 @@
     "restart": "再起動",
     "revertChanges": "変更を元に戻す"
   },
+  "serverConfigCategories": {
+    "Attention": "アテンション",
+    "CUDA": "CUDA",
+    "Cache": "キャッシュ",
+    "General": "一般",
+    "Inference": "推論",
+    "Memory": "メモリ",
+    "Network": "ネットワーク",
+    "Preview": "プレビュー"
+  },
+  "serverConfigItems": {
+    "cache-classic": {
+      "name": "クラシックキャッシュシステムを使用する"
+    },
+    "cache-lru": {
+      "name": "最大Nノード結果をキャッシュするLRUキャッシングを使用する。",
+      "tooltip": "RAM/VRAMを多く使用する可能性があります。"
+    },
+    "cpu-vae": {
+      "name": "CPUでVAEを実行する"
+    },
+    "cross-attention-method": {
+      "name": "クロスアテンションメソッド"
+    },
+    "cuda-device": {
+      "name": "使用するCUDAデバイスインデックス"
+    },
+    "cuda-malloc": {
+      "name": "メモリ割り当てにCUDA mallocを使用する"
+    },
+    "default-hashing-function": {
+      "name": "モデルファイルのデフォルトハッシュ関数"
+    },
+    "deterministic": {
+      "name": "可能な場合、PyTorchが遅い決定論的アルゴリズムを使用する。",
+      "tooltip": "これにより、すべてのケースで画像が決定論的になるわけではないことに注意してください。"
+    },
+    "directml": {
+      "name": "DirectMLデバイスインデックス"
+    },
+    "disable-all-custom-nodes": {
+      "name": "すべてのカスタムノードの読み込みを無効にする。"
+    },
+    "disable-ipex-optimize": {
+      "name": "IPEX最適化を無効にする"
+    },
+    "disable-metadata": {
+      "name": "ファイルにプロンプトメタデータを保存しない。"
+    },
+    "disable-smart-memory": {
+      "name": "スマートメモリ管理を無効にする",
+      "tooltip": "ComfyUIがモデルをVRAMに保持する代わりに、通常のRAMに積極的にオフロードするように強制します。"
+    },
+    "disable-xformers": {
+      "name": "xFormers最適化を無効にする"
+    },
+    "dont-print-server": {
+      "name": "サーバー出力をコンソールに表示しない。"
+    },
+    "dont-upcast-attention": {
+      "name": "アテンションのアップキャストを防ぐ"
+    },
+    "enable-cors-header": {
+      "name": "CORSヘッダーを有効にする: \"*\"を使用してすべてのオリジンを許可するか、ドメインを指定する"
+    },
+    "fast": {
+      "name": "未テストの潜在的に品質を低下させる最適化を有効にする。"
+    },
+    "force-channels-last": {
+      "name": "チャネルを最後に強制するメモリ形式"
+    },
+    "force-upcast-attention": {
+      "name": "アテンションのアップキャストを強制する"
+    },
+    "global-precision": {
+      "name": "グローバル浮動小数点精度",
+      "tooltip": "グローバル浮動小数点精度"
+    },
+    "log-level": {
+      "name": "ログの冗長性レベル"
+    },
+    "max-upload-size": {
+      "name": "最大アップロードサイズ (MB)"
+    },
+    "preview-method": {
+      "name": "潜在プレビューに使用されるメソッド"
+    },
+    "preview-size": {
+      "name": "プレビュー画像のサイズ"
+    },
+    "reserve-vram": {
+      "name": "予約済みVRAM (GB)",
+      "tooltip": "OS/他のソフトウェアで使用するために予約したいVRAMの量をGB単位で設定します。デフォルトでは、OSに応じていくらかの量が予約されます。"
+    },
+    "text-encoder-precision": {
+      "name": "テキストエンコーダー精度",
+      "tooltip": "テキストエンコーダー精度"
+    },
+    "tls-certfile": {
+      "name": "TLS証明書ファイル: HTTPS用のTLS証明書ファイルのパス"
+    },
+    "tls-keyfile": {
+      "name": "TLSキーファイル: HTTPS用のTLSキーファイルのパス"
+    },
+    "unet-precision": {
+      "name": "UNET精度",
+      "tooltip": "UNET精度"
+    },
+    "vae-precision": {
+      "name": "VAE精度",
+      "tooltip": "VAE精度"
+    },
+    "vram-management": {
+      "name": "VRAM管理モード"
+    }
+  },
   "serverStart": {
     "openLogs": "ログを開く",
     "process": {