diff --git a/.gitignore b/.gitignore
index 0177e1d7d..6b28b976f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -14,3 +14,4 @@ venv/
 web/extensions/*
 !web/extensions/logging.js.example
 !web/extensions/core/
+!web/extensions/i18n/
diff --git a/comfy/model_management.py b/comfy/model_management.py
index 0ffca06da..4dd15b41c 100644
--- a/comfy/model_management.py
+++ b/comfy/model_management.py
@@ -535,7 +535,7 @@ def should_use_fp16(device=None, model_params=0):
         return False
 
     #FP16 is just broken on these cards
-    nvidia_16_series = ["1660", "1650", "1630", "T500", "T550", "T600", "MX550", "MX450"]
+    nvidia_16_series = ["1660", "1650", "1630", "T500", "T550", "T600", "MX550", "MX450", "CMP 30HX"]
     for x in nvidia_16_series:
         if x in props.name:
             return False
diff --git a/comfy/sd.py b/comfy/sd.py
index 922cbf21e..2996a938b 100644
--- a/comfy/sd.py
+++ b/comfy/sd.py
@@ -70,13 +70,22 @@ def load_lora(lora, to_load):
             alpha = lora[alpha_name].item()
             loaded_keys.add(alpha_name)
 
-        A_name = "{}.lora_up.weight".format(x)
-        B_name = "{}.lora_down.weight".format(x)
-        mid_name = "{}.lora_mid.weight".format(x)
+        regular_lora = "{}.lora_up.weight".format(x)
+        diffusers_lora = "{}_lora.up.weight".format(x)
+        A_name = None
 
-        if A_name in lora.keys():
+        if regular_lora in lora.keys():
+            A_name = regular_lora
+            B_name = "{}.lora_down.weight".format(x)
+            mid_name = "{}.lora_mid.weight".format(x)
+        elif diffusers_lora in lora.keys():
+            A_name = diffusers_lora
+            B_name = "{}_lora.down.weight".format(x)
+            mid_name = None
+
+        if A_name is not None:
             mid = None
-            if mid_name in lora.keys():
+            if mid_name is not None and mid_name in lora.keys():
                 mid = lora[mid_name]
                 loaded_keys.add(mid_name)
             patch_dict[to_load[x]] = (lora[A_name], lora[B_name], alpha, mid)
@@ -202,6 +211,11 @@ def model_lora_keys_unet(model, key_map={}):
         if k.endswith(".weight"):
             key_lora = k[:-len(".weight")].replace(".", "_")
             key_map["lora_unet_{}".format(key_lora)] = "diffusion_model.{}".format(diffusers_keys[k])
+
+            diffusers_lora_key = "unet.{}".format(k[:-len(".weight")].replace(".to_", ".processor.to_"))
+            if diffusers_lora_key.endswith(".to_out.0"):
+                diffusers_lora_key = diffusers_lora_key[:-2]
+            key_map[diffusers_lora_key] = "diffusion_model.{}".format(diffusers_keys[k])
     return key_map
 
 def set_attr(obj, attr, value):
@@ -864,7 +878,7 @@ def load_controlnet(ckpt_path, model=None):
         use_fp16 = model_management.should_use_fp16()
         controlnet_config = model_detection.model_config_from_unet(controlnet_data, prefix, use_fp16).unet_config
     controlnet_config.pop("out_channels")
-    controlnet_config["hint_channels"] = 3
+    controlnet_config["hint_channels"] = controlnet_data["{}input_hint_block.0.weight".format(prefix)].shape[1]
     control_model = cldm.ControlNet(**controlnet_config)
 
     if pth:
diff --git a/cuda_malloc.py b/cuda_malloc.py
index a808b2071..d033529cc 100644
--- a/cuda_malloc.py
+++ b/cuda_malloc.py
@@ -40,7 +40,8 @@ def cuda_malloc_supported():
     blacklist = {"GeForce GTX TITAN X", "GeForce GTX 980", "GeForce GTX 970", "GeForce GTX 960", "GeForce GTX 950", "GeForce 945M",
                  "GeForce 940M", "GeForce 930M", "GeForce 920M", "GeForce 910M", "GeForce GTX 750", "GeForce GTX 745", "Quadro K620",
                  "Quadro K1200", "Quadro K2200", "Quadro M500", "Quadro M520", "Quadro M600", "Quadro M620", "Quadro M1000",
-                 "Quadro M1200", "Quadro M2000", "Quadro M2200", "Quadro M3000", "Quadro M4000", "Quadro M5000", "Quadro M5500", "Quadro M6000"}
+                 "Quadro M1200", "Quadro M2000", "Quadro M2200", "Quadro M3000", "Quadro M4000", "Quadro M5000", "Quadro M5500", "Quadro M6000",
+                 "GeForce MX110", "GeForce MX130", "GeForce 830M", "GeForce 840M", "GeForce GTX 850M", "GeForce GTX 860M"}
 
     try:
         names = get_gpu_names()
diff --git a/notebooks/comfyui_colab.ipynb b/notebooks/comfyui_colab.ipynb
index 1bb90f7d0..b1c487101 100644
--- a/notebooks/comfyui_colab.ipynb
+++ b/notebooks/comfyui_colab.ipynb
@@ -159,13 +159,64 @@
         "\n"
       ]
     },
+    {
+      "cell_type": "markdown",
+      "metadata": {
+        "id": "kkkkkkkkkkkkkkk"
+      },
+      "source": [
+        "### Run ComfyUI with cloudflared (Recommended Way)\n",
+        "\n",
+        "\n"
+      ]
+    },
+    {
+      "cell_type": "code",
+      "execution_count": null,
+      "metadata": {
+        "id": "jjjjjjjjjjjjjj"
+      },
+      "outputs": [],
+      "source": [
+        "!wget https://github.com/cloudflare/cloudflared/releases/latest/download/cloudflared-linux-amd64.deb\n",
+        "!dpkg -i cloudflared-linux-amd64.deb\n",
+        "\n",
+        "import subprocess\n",
+        "import threading\n",
+        "import time\n",
+        "import socket\n",
+        "import urllib.request\n",
+        "\n",
+        "def iframe_thread(port):\n",
+        "  while True:\n",
+        "      time.sleep(0.5)\n",
+        "      sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)\n",
+        "      result = sock.connect_ex(('127.0.0.1', port))\n",
+        "      if result == 0:\n",
+        "        break\n",
+        "      sock.close()\n",
+        "  print(\"\\nComfyUI finished loading, trying to launch cloudflared (if it gets stuck here cloudflared is having issues)\\n\")\n",
+        "\n",
+        "  p = subprocess.Popen([\"cloudflared\", \"tunnel\", \"--url\", \"http://127.0.0.1:{}\".format(port)], stdout=subprocess.PIPE, stderr=subprocess.PIPE)\n",
+        "  for line in p.stderr:\n",
+        "    l = line.decode()\n",
+        "    if \"trycloudflare.com \" in l:\n",
+        "      print(\"This is the URL to access ComfyUI:\", l[l.find(\"http\"):], end='')\n",
+        "    #print(l, end='')\n",
+        "\n",
+        "\n",
+        "threading.Thread(target=iframe_thread, daemon=True, args=(8188,)).start()\n",
+        "\n",
+        "!python main.py --dont-print-server"
+      ]
+    },
     {
       "cell_type": "markdown",
       "metadata": {
         "id": "kkkkkkkkkkkkkk"
       },
       "source": [
-        "### Run ComfyUI with localtunnel (Recommended Way)\n",
+        "### Run ComfyUI with localtunnel\n",
         "\n",
         "\n"
       ]
diff --git a/server.py b/server.py
index f61b11a97..fab33be3e 100644
--- a/server.py
+++ b/server.py
@@ -345,6 +345,11 @@ class PromptServer():
             vram_total, torch_vram_total = comfy.model_management.get_total_memory(device, torch_total_too=True)
             vram_free, torch_vram_free = comfy.model_management.get_free_memory(device, torch_free_too=True)
             system_stats = {
+                "system": {
+                    "os": os.name,
+                    "python_version": sys.version,
+                    "embedded_python": os.path.split(os.path.split(sys.executable)[0])[1] == "python_embeded"
+                },
                 "devices": [
                     {
                         "name": device_name,
diff --git a/web/extensions/core/colorPalette.js b/web/extensions/core/colorPalette.js
index 3695b08e2..d414d4298 100644
--- a/web/extensions/core/colorPalette.js
+++ b/web/extensions/core/colorPalette.js
@@ -435,7 +435,7 @@ app.registerExtension({
 					$el("td", [
 						$el("label", {
 							for: id.replaceAll(".", "-"),
-							textContent: "Color palette",
+							textContent: i18next.t("settings.Comfy.ColorPalette"),
 						}),
 					]),
 					$el("td", [
@@ -449,7 +449,7 @@ app.registerExtension({
 						}, [
 							$el("input", {
 								type: "button",
-								value: "Export",
+								value: i18next.t("settings.Comfy.ColorPalette.export"),
 								onclick: async () => {
 									const colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
 									const colorPalette = await completeColorPalette(getColorPalette(colorPaletteId));
@@ -471,14 +471,14 @@ app.registerExtension({
 							}),
 							$el("input", {
 								type: "button",
-								value: "Import",
+								value: i18next.t("settings.Comfy.ColorPalette.import"),
 								onclick: () => {
 									fileInput.click();
 								}
 							}),
 							$el("input", {
 								type: "button",
-								value: "Template",
+								value: i18next.t("settings.Comfy.ColorPalette.template"),
 								onclick: async () => {
 									const colorPalette = await getColorPaletteTemplate();
 									const json = JSON.stringify(colorPalette, null, 2); // convert the data to a JSON string
@@ -499,7 +499,7 @@ app.registerExtension({
 							}),
 							$el("input", {
 								type: "button",
-								value: "Delete",
+								value: i18next.t("settings.Comfy.ColorPalette.delete"),
 								onclick: async () => {
 									let colorPaletteId = app.ui.settings.getSettingValue(id, defaultColorPaletteId);
 
diff --git a/web/extensions/core/contextMenuFilter.js b/web/extensions/core/contextMenuFilter.js
index e0e8854b3..152cd7043 100644
--- a/web/extensions/core/contextMenuFilter.js
+++ b/web/extensions/core/contextMenuFilter.js
@@ -27,10 +27,13 @@ const ext = {
 					const clickedComboValue = currentNode.widgets
 						.filter(w => w.type === "combo" && w.options.values.length === values.length)
 						.find(w => w.options.values.every((v, i) => v === values[i]))
-						.value;
+						?.value;
 
-					let selectedIndex = values.findIndex(v => v === clickedComboValue);
-					let selectedItem = displayedItems?.[selectedIndex];
+					let selectedIndex = clickedComboValue ? values.findIndex(v => v === clickedComboValue) : 0;
+					if (selectedIndex < 0) {
+						selectedIndex = 0;
+					} 
+					let selectedItem = displayedItems[selectedIndex];
 					updateSelected();
 
 					// Apply highlighting to the selected item
diff --git a/web/extensions/core/i18n.js b/web/extensions/core/i18n.js
new file mode 100644
index 000000000..883fed988
--- /dev/null
+++ b/web/extensions/core/i18n.js
@@ -0,0 +1,46 @@
+import { app } from "../../scripts/app.js";
+
+app.registerExtension({
+    name: "i18next",
+    addCustomNodeDefs(defs) {
+        for (const k in defs) {
+            defs[k].display_name = i18next.t(`node.title.${k}`)
+
+            if ("input" in defs[k] && defs[k].input.required) {
+                for (const i in defs[k].input.required) {
+                    if (defs[k].input.required[i].length > 1) {
+                        defs[k].input.required[i][1].label = i18next.t(`node.input.${k}.${i}`)
+                    } else {
+                        defs[k].input.required[i].push({ label: i18next.t(`node.input.${k}.${i}`) })
+                    }
+                }
+            }
+        }
+    },
+    nodeCreated(node) {
+        if ("inputs" in node) {
+            for (const item of node.inputs) {
+                item.label = i18next.t(`node.input.${node.comfyClass}.${item.name}`)
+            }
+        }
+
+        if ("widgets" in node) {
+            for (const item of node.widgets) {
+                item.label = i18next.t(`node.input.${node.comfyClass}.${item.name}`)
+            }
+        }
+
+        if ("outputs" in node) {
+            for (const item of node.outputs) {
+                item.label = i18next.t(`node.output.${node.comfyClass}.${item.name}`)
+            }
+        }
+    },
+    afterNodesRegistrations() {
+        const defs = LiteGraph.registered_node_types
+
+        for (const k in defs) {
+            defs[k].category = i18next.t(`category.${defs[k].category}`)
+        }
+    }
+})
\ No newline at end of file
diff --git a/web/extensions/core/linkRenderMode.js b/web/extensions/core/linkRenderMode.js
new file mode 100644
index 000000000..8b8d4e01f
--- /dev/null
+++ b/web/extensions/core/linkRenderMode.js
@@ -0,0 +1,25 @@
+import { app } from "/scripts/app.js";
+
+const id = "Comfy.LinkRenderMode";
+const ext = {
+	name: id,
+	async setup(app) {
+		app.ui.settings.addSetting({
+			id,
+			name: "Link Render Mode",
+			defaultValue: 2,
+			type: "combo",
+			options: LiteGraph.LINK_RENDER_MODES.map((m, i) => ({
+				value: i,
+				text: m,
+				selected: i == app.canvas.links_render_mode,
+			})),
+			onChange(value) {
+				app.canvas.links_render_mode = +value;
+				app.graph.setDirtyCanvas(true);
+			},
+		});
+	},
+};
+
+app.registerExtension(ext);
diff --git a/web/extensions/core/widgetInputs.js b/web/extensions/core/widgetInputs.js
index d9eaf8a0c..e4ab088dd 100644
--- a/web/extensions/core/widgetInputs.js
+++ b/web/extensions/core/widgetInputs.js
@@ -57,6 +57,7 @@ function convertToInput(node, widget, config) {
 	const sz = node.size;
 	node.addInput(widget.name, linkType, {
 		widget: { name: widget.name, config },
+		label: config?.[1] ? i18next.t(config?.[1].label) : void 0,
 	});
 
 	for (const widget of node.widgets) {
diff --git a/web/i18n/en_US.js b/web/i18n/en_US.js
new file mode 100644
index 000000000..4012f47a6
--- /dev/null
+++ b/web/i18n/en_US.js
@@ -0,0 +1,125 @@
+export default {
+    translation: {
+        "ui.queue_btn": "Queue Prompt",
+        "ui.queue_front_btn": "Queue Front",
+        "ui.view_queue_btn": "View Queue",
+        "ui.view_history_btn": "View History",
+        "ui.save_btn": "Save",
+        "ui.load_btn": "Load",
+        "ui.refresh_btn": "Refresh",
+        "ui.clipspace_btn": "Clipspace",
+        "ui.clear_btn": "Clear",
+        "ui.load_default_btn": "Load Default",
+        "ui.close_btn": "Close",
+        "ui.queue_size": "Queue size: ",
+        "ui.extra_options": "Extra options",
+
+        "ui.settings.title": "Settings",
+
+        "ui.canvas_menu_add_node": "Add Node",
+        "ui.canvas_menu_add_group": "Add Group",
+
+        "ui.node_panel.header.properties": "Properties",
+        "ui.node_panel.header.title": "Title",
+        "ui.node_panel.header.mode": "Mode",
+        "ui.node_panel.header.color": "Color",
+
+        "node.title.KSampler": "KSampler",
+        "node.title.KSamplerAdvanced": "KSampler (Advanced)",
+        // Loaders
+        "node.title.CheckpointLoader": "Load Checkpoint (With Config)",
+        "node.title.CheckpointLoaderSimple": "Load Checkpoint",
+        "node.title.VAELoader": "Load VAE",
+        "node.title.LoraLoader": "Load LoRA",
+        "node.title.CLIPLoader": "Load CLIP",
+        "node.title.ControlNetLoader": "Load ControlNet Model",
+        "node.title.DiffControlNetLoader": "Load ControlNet Model (diff)",
+        "node.title.StyleModelLoader": "Load Style Model",
+        "node.title.CLIPVisionLoader": "Load CLIP Vision",
+        "node.title.UpscaleModelLoader": "Load Upscale Model",
+        // Conditioning
+        "node.title.CLIPVisionEncode": "CLIP Vision Encode",
+        "node.title.StyleModelApply": "Apply Style Model",
+        "node.title.CLIPTextEncode": "CLIP Text Encode (Prompt)",
+        "node.title.CLIPSetLastLayer": "CLIP Set Last Layer",
+        "node.title.ConditioningCombine": "Conditioning (Combine)",
+        "node.title.ConditioningAverage ": "Conditioning (Average)",
+        "node.title.ConditioningConcat": "Conditioning (Concat)",
+        "node.title.ConditioningSetArea": "Conditioning (Set Area)",
+        "node.title.ConditioningSetMask": "Conditioning (Set Mask)",
+        "node.title.ControlNetApply": "Apply ControlNet",
+        "node.title.ControlNetApplyAdvanced": "Apply ControlNet (Advanced)",
+        // Latent
+        "node.title.VAEEncodeForInpaint": "VAE Encode (for Inpainting)",
+        "node.title.SetLatentNoiseMask": "Set Latent Noise Mask",
+        "node.title.VAEDecode": "VAE Decode",
+        "node.title.VAEEncode": "VAE Encode",
+        "node.title.LatentRotate": "Rotate Latent",
+        "node.title.LatentFlip": "Flip Latent",
+        "node.title.LatentCrop": "Crop Latent",
+        "node.title.EmptyLatentImage": "Empty Latent Image",
+        "node.title.LatentUpscale": "Upscale Latent",
+        "node.title.LatentUpscaleBy": "Upscale Latent By",
+        "node.title.LatentComposite": "Latent Composite",
+        "node.title.LatentBlend": "Latent Blend",
+        "LatentFromBatch": "Latent From Batch",
+        "node.title.RepeatLatentBatch": "Repeat Latent Batch",
+        // Image
+        "node.title.SaveImage": "Save Image",
+        "node.title.PreviewImage": "Preview Image",
+        "node.title.LoadImage": "Load Image",
+        "node.title.LoadImageMask": "Load Image (as Mask)",
+        "node.title.ImageScale": "Upscale Image",
+        "node.title.ImageScaleBy": "Upscale Image By",
+        "node.title.ImageUpscaleWithModel": "Upscale Image (using Model)",
+        "node.title.ImageInvert": "Invert Image",
+        "node.title.ImagePadForOutpaint": "Pad Image for Outpainting",
+        // _for_testing
+        "node.title.VAEDecodeTiled": "VAE Decode (Tiled)",
+        "node.title.VAEEncodeTiled": "VAE Encode (Tiled)",
+
+        "node.input.SaveImage.filename_prefix": "filename_prefix",
+        "node.input.SaveImage.images": "images",
+
+        "node.output.CheckpointLoaderSimple.MODEL": "MODEL",
+
+        "category.conditioning": "conditioning",
+        "category.loaders": "loaders",
+        "category.latent": "latent",
+        "category.latent/inpaint": "latent/inpaint",
+        "category.latent/batch": "latent/batch",
+        "category.image": "image",
+        "category.mask": "mask",
+        "category.image/upscaling": "image/upscaling",
+        "category.sampling": "sampling",
+        "category._for_testing": "_for_testing",
+        "category.latent/transform": "latent/transform",
+        "category.advanced/loaders": "advanced/loaders",
+        "category.conditioning/style_model": "conditioning/style_model",
+        "category.conditioning/gligen": "conditioning/gligen",
+        "category.advanced/loaders/deprecated": "advanced/loaders/deprecated",
+        "category.advanced/conditioning": "advanced/conditioning",
+        "category.image/postprocessing": "image/postprocessing",
+        "category.advanced/model_merging": "advanced/model_merging",
+        "category.image/preprocessors": "image/preprocessors",
+        "category.utils": "utils",
+
+        "settings.Comfy.ConfirmClear": "Require confirmation when clearing workflow",
+        "settings.Comfy.PromptFilename": "Prompt for filename when saving workflow",
+        "settings.Comfy.PreviewFormat": "When displaying a preview in the image widget, convert it to a lightweight image, e.g. webp, jpeg, webp;50, etc.",
+        "settings.Comfy.DisableSliders": "Disable sliders.",
+        "settings.Comfy.DevMode": "Enable Dev mode Options",
+        "settings.Comfy.ColorPalette": "Color Palette",
+        "settings.Comfy.EditAttention.Delta": "Ctrl+up/down precision",
+        "settings.Comfy.InvertMenuScrolling": "Invert Menu Scrolling",
+        "settings.Comfy.LinkRenderMode": "Link Render Mode",
+        "settings.Comfy.NodeSuggestions.number": "Number of nodes suggestions",
+        "settings.Comfy.SnapToGrid.GridSize": "Grid Size",
+        "settings.Comfy.Logging.Enabled": "Comfy.Logging.Enabled",
+        "settings.Comfy.MenuPosition": "Save menu position",
+        "settings.Comfy.ColorPalette.export": "Export",
+        "settings.Comfy.ColorPalette.import": "Import",
+        "settings.Comfy.ColorPalette.template": "Template",
+        "settings.Comfy.ColorPalette.delete": "Delete",
+    }
+}
\ No newline at end of file
diff --git a/web/i18n/zh_CN.js b/web/i18n/zh_CN.js
new file mode 100644
index 000000000..b018a668e
--- /dev/null
+++ b/web/i18n/zh_CN.js
@@ -0,0 +1,125 @@
+export default {
+    translation: {
+        "ui.queue_btn": "冲冲冲",
+        "ui.queue_front_btn": "插队冲冲冲",
+        "ui.view_queue_btn": "查看队列",
+        "ui.view_history_btn": "查看历史",
+        "ui.save_btn": "保存",
+        "ui.load_btn": "加载",
+        "ui.refresh_btn": "刷新",
+        "ui.clipspace_btn": "Clipspace",
+        "ui.clear_btn": "清空",
+        "ui.load_default_btn": "加载默认配置",
+        "ui.close_btn": "关闭",
+        "ui.queue_size": "队列数量: ",
+        "ui.extra_options": "额外选项",
+
+        "ui.settings.title": "设置",
+
+        "ui.canvas_menu_add_node": "添加节点",
+        "ui.canvas_menu_add_group": "添加组",
+
+        "ui.node_panel.header.properties": "属性",
+        "ui.node_panel.header.title": "标题",
+        "ui.node_panel.header.mode": "模式",
+        "ui.node_panel.header.color": "颜色",
+
+        "node.title.KSampler": "采样器",
+        "node.title.KSamplerAdvanced": "采样器 (高级)",
+        // Loaders
+        "node.title.CheckpointLoader": "Load Checkpoint (With Config)",
+        "node.title.CheckpointLoaderSimple": "加载模型",
+        "node.title.VAELoader": "Load VAE",
+        "node.title.LoraLoader": "Load LoRA",
+        "node.title.CLIPLoader": "Load CLIP",
+        "node.title.ControlNetLoader": "Load ControlNet Model",
+        "node.title.DiffControlNetLoader": "Load ControlNet Model (diff)",
+        "node.title.StyleModelLoader": "Load Style Model",
+        "node.title.CLIPVisionLoader": "Load CLIP Vision",
+        "node.title.UpscaleModelLoader": "Load Upscale Model",
+        // Conditioning
+        "node.title.CLIPVisionEncode": "CLIP Vision Encode",
+        "node.title.StyleModelApply": "Apply Style Model",
+        "node.title.CLIPTextEncode": "CLIP Text Encode (Prompt)",
+        "node.title.CLIPSetLastLayer": "CLIP Set Last Layer",
+        "node.title.ConditioningCombine": "Conditioning (Combine)",
+        "node.title.ConditioningAverage ": "Conditioning (Average)",
+        "node.title.ConditioningConcat": "Conditioning (Concat)",
+        "node.title.ConditioningSetArea": "Conditioning (Set Area)",
+        "node.title.ConditioningSetMask": "Conditioning (Set Mask)",
+        "node.title.ControlNetApply": "Apply ControlNet",
+        "node.title.ControlNetApplyAdvanced": "Apply ControlNet (Advanced)",
+        // Latent
+        "node.title.VAEEncodeForInpaint": "VAE Encode (for Inpainting)",
+        "node.title.SetLatentNoiseMask": "Set Latent Noise Mask",
+        "node.title.VAEDecode": "VAE Decode",
+        "node.title.VAEEncode": "VAE Encode",
+        "node.title.LatentRotate": "Rotate Latent",
+        "node.title.LatentFlip": "Flip Latent",
+        "node.title.LatentCrop": "Crop Latent",
+        "node.title.EmptyLatentImage": "Empty Latent Image",
+        "node.title.LatentUpscale": "Upscale Latent",
+        "node.title.LatentUpscaleBy": "Upscale Latent By",
+        "node.title.LatentComposite": "Latent Composite",
+        "node.title.LatentBlend": "Latent Blend",
+        "LatentFromBatch": "Latent From Batch",
+        "node.title.RepeatLatentBatch": "Repeat Latent Batch",
+        // Image
+        "node.title.SaveImage": "Save Image",
+        "node.title.PreviewImage": "Preview Image",
+        "node.title.LoadImage": "Load Image",
+        "node.title.LoadImageMask": "Load Image (as Mask)",
+        "node.title.ImageScale": "Upscale Image",
+        "node.title.ImageScaleBy": "Upscale Image By",
+        "node.title.ImageUpscaleWithModel": "Upscale Image (using Model)",
+        "node.title.ImageInvert": "Invert Image",
+        "node.title.ImagePadForOutpaint": "Pad Image for Outpainting",
+        // _for_testing
+        "node.title.VAEDecodeTiled": "VAE Decode (Tiled)",
+        "node.title.VAEEncodeTiled": "VAE Encode (Tiled)",
+
+        "node.input.SaveImage.filename_prefix": "文件名前缀",
+        "node.input.SaveImage.images": "图片",
+
+        "node.output.CheckpointLoaderSimple.MODEL": "模型",
+
+        "category.conditioning": "可调参数",
+        "category.loaders": "加载器",
+        "category.latent": "潜在",
+        "category.latent/inpaint": "潜在/修复",
+        "category.latent/batch": "潜在/批量",
+        "category.image": "图像",
+        "category.mask": "遮罩",
+        "category.image/upscaling": "图像/外扩",
+        "category.sampling": "采样",
+        "category._for_testing": "测试",
+        "category.latent/transform": "潜在/转换",
+        "category.advanced/loaders": "高级/加载器",
+        "category.conditioning/style_model": "可调参数/风格模型",
+        "category.conditioning/gligen": "可调参数/gligen",
+        "category.advanced/loaders/deprecated": "高级/加载器/已弃用",
+        "category.advanced/conditioning": "高级/可调参数",
+        "category.image/postprocessing": "图像/后期处理",
+        "category.advanced/model_merging": "高级/模型合并",
+        "category.image/preprocessors": "图像/前期处理",
+        "category.utils": "工具",
+
+        "settings.Comfy.ConfirmClear": "清空工作流需要确认",
+        "settings.Comfy.PromptFilename": "Prompt for filename when saving workflow",
+        "settings.Comfy.PreviewFormat": "预览图格式和压缩尺寸, e.g. webp, jpeg, webp;50, etc.",
+        "settings.Comfy.DisableSliders": "Disable sliders.",
+        "settings.Comfy.DevMode": "启用开发模式",
+        "settings.Comfy.ColorPalette": "主题",
+        "settings.Comfy.EditAttention.Delta": "Ctrl+up/down precision",
+        "settings.Comfy.InvertMenuScrolling": "反转滚动",
+        "settings.Comfy.LinkRenderMode": "链接渲染模式",
+        "settings.Comfy.NodeSuggestions.number": "Number of nodes suggestions",
+        "settings.Comfy.SnapToGrid.GridSize": "单元格尺寸",
+        "settings.Comfy.Logging.Enabled": "记录日志",
+        "settings.Comfy.MenuPosition": "保存菜单位置",
+        "settings.Comfy.ColorPalette.export": "导出",
+        "settings.Comfy.ColorPalette.import": "导入",
+        "settings.Comfy.ColorPalette.template": "模版",
+        "settings.Comfy.ColorPalette.delete": "删除",
+    }
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 71067d993..c3620a134 100644
--- a/web/index.html
+++ b/web/index.html
@@ -6,6 +6,8 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
 		<link rel="stylesheet" type="text/css" href="./lib/litegraph.css" />
 		<link rel="stylesheet" type="text/css" href="./style.css" />
+		<script type="text/javascript" src="./lib/i18next.js"></script>
+		<script type="text/javascript" src="./lib/i18nextBrowserLanguageDetector.js"></script>
 		<script type="text/javascript" src="./lib/litegraph.core.js"></script>
 		<script type="text/javascript" src="./lib/litegraph.extensions.js" defer></script>
 		<script type="module">
diff --git a/web/lib/i18next.js b/web/lib/i18next.js
new file mode 100644
index 000000000..0f73afee3
--- /dev/null
+++ b/web/lib/i18next.js
@@ -0,0 +1,2265 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+        typeof define === 'function' && define.amd ? define(factory) :
+            (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.i18next = factory());
+})(this, (function () {
+    'use strict';
+
+    const consoleLogger = {
+        type: 'logger',
+        log(args) {
+            this.output('log', args);
+        },
+        warn(args) {
+            this.output('warn', args);
+        },
+        error(args) {
+            this.output('error', args);
+        },
+        output(type, args) {
+            if (console && console[type]) console[type].apply(console, args);
+        }
+    };
+    class Logger {
+        constructor(concreteLogger) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            this.init(concreteLogger, options);
+        }
+        init(concreteLogger) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            this.prefix = options.prefix || 'i18next:';
+            this.logger = concreteLogger || consoleLogger;
+            this.options = options;
+            this.debug = options.debug;
+        }
+        log() {
+            for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+            }
+            return this.forward(args, 'log', '', true);
+        }
+        warn() {
+            for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+            }
+            return this.forward(args, 'warn', '', true);
+        }
+        error() {
+            for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+            }
+            return this.forward(args, 'error', '');
+        }
+        deprecate() {
+            for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+            }
+            return this.forward(args, 'warn', 'WARNING DEPRECATED: ', true);
+        }
+        forward(args, lvl, prefix, debugOnly) {
+            if (debugOnly && !this.debug) return null;
+            if (typeof args[0] === 'string') args[0] = `${prefix}${this.prefix} ${args[0]}`;
+            return this.logger[lvl](args);
+        }
+        create(moduleName) {
+            return new Logger(this.logger, {
+                ...{
+                    prefix: `${this.prefix}:${moduleName}:`
+                },
+                ...this.options
+            });
+        }
+        clone(options) {
+            options = options || this.options;
+            options.prefix = options.prefix || this.prefix;
+            return new Logger(this.logger, options);
+        }
+    }
+    var baseLogger = new Logger();
+
+    class EventEmitter {
+        constructor() {
+            this.observers = {};
+        }
+        on(events, listener) {
+            events.split(' ').forEach(event => {
+                this.observers[event] = this.observers[event] || [];
+                this.observers[event].push(listener);
+            });
+            return this;
+        }
+        off(event, listener) {
+            if (!this.observers[event]) return;
+            if (!listener) {
+                delete this.observers[event];
+                return;
+            }
+            this.observers[event] = this.observers[event].filter(l => l !== listener);
+        }
+        emit(event) {
+            for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                args[_key - 1] = arguments[_key];
+            }
+            if (this.observers[event]) {
+                const cloned = [].concat(this.observers[event]);
+                cloned.forEach(observer => {
+                    observer(...args);
+                });
+            }
+            if (this.observers['*']) {
+                const cloned = [].concat(this.observers['*']);
+                cloned.forEach(observer => {
+                    observer.apply(observer, [event, ...args]);
+                });
+            }
+        }
+    }
+
+    function defer() {
+        let res;
+        let rej;
+        const promise = new Promise((resolve, reject) => {
+            res = resolve;
+            rej = reject;
+        });
+        promise.resolve = res;
+        promise.reject = rej;
+        return promise;
+    }
+    function makeString(object) {
+        if (object == null) return '';
+        return '' + object;
+    }
+    function copy(a, s, t) {
+        a.forEach(m => {
+            if (s[m]) t[m] = s[m];
+        });
+    }
+    function getLastOfPath(object, path, Empty) {
+        function cleanKey(key) {
+            return key && key.indexOf('###') > -1 ? key.replace(/###/g, '.') : key;
+        }
+        function canNotTraverseDeeper() {
+            return !object || typeof object === 'string';
+        }
+        const stack = typeof path !== 'string' ? [].concat(path) : path.split('.');
+        while (stack.length > 1) {
+            if (canNotTraverseDeeper()) return {};
+            const key = cleanKey(stack.shift());
+            if (!object[key] && Empty) object[key] = new Empty();
+            if (Object.prototype.hasOwnProperty.call(object, key)) {
+                object = object[key];
+            } else {
+                object = {};
+            }
+        }
+        if (canNotTraverseDeeper()) return {};
+        return {
+            obj: object,
+            k: cleanKey(stack.shift())
+        };
+    }
+    function setPath(object, path, newValue) {
+        const {
+            obj,
+            k
+        } = getLastOfPath(object, path, Object);
+        obj[k] = newValue;
+    }
+    function pushPath(object, path, newValue, concat) {
+        const {
+            obj,
+            k
+        } = getLastOfPath(object, path, Object);
+        obj[k] = obj[k] || [];
+        if (concat) obj[k] = obj[k].concat(newValue);
+        if (!concat) obj[k].push(newValue);
+    }
+    function getPath(object, path) {
+        const {
+            obj,
+            k
+        } = getLastOfPath(object, path);
+        if (!obj) return undefined;
+        return obj[k];
+    }
+    function getPathWithDefaults(data, defaultData, key) {
+        const value = getPath(data, key);
+        if (value !== undefined) {
+            return value;
+        }
+        return getPath(defaultData, key);
+    }
+    function deepExtend(target, source, overwrite) {
+        for (const prop in source) {
+            if (prop !== '__proto__' && prop !== 'constructor') {
+                if (prop in target) {
+                    if (typeof target[prop] === 'string' || target[prop] instanceof String || typeof source[prop] === 'string' || source[prop] instanceof String) {
+                        if (overwrite) target[prop] = source[prop];
+                    } else {
+                        deepExtend(target[prop], source[prop], overwrite);
+                    }
+                } else {
+                    target[prop] = source[prop];
+                }
+            }
+        }
+        return target;
+    }
+    function regexEscape(str) {
+        return str.replace(/[\-\[\]\/\{\}\(\)\*\+\?\.\\\^\$\|]/g, '\\$&');
+    }
+    var _entityMap = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#39;',
+        '/': '&#x2F;'
+    };
+    function escape(data) {
+        if (typeof data === 'string') {
+            return data.replace(/[&<>"'\/]/g, s => _entityMap[s]);
+        }
+        return data;
+    }
+    const chars = [' ', ',', '?', '!', ';'];
+    function looksLikeObjectPath(key, nsSeparator, keySeparator) {
+        nsSeparator = nsSeparator || '';
+        keySeparator = keySeparator || '';
+        const possibleChars = chars.filter(c => nsSeparator.indexOf(c) < 0 && keySeparator.indexOf(c) < 0);
+        if (possibleChars.length === 0) return true;
+        const r = new RegExp(`(${possibleChars.map(c => c === '?' ? '\\?' : c).join('|')})`);
+        let matched = !r.test(key);
+        if (!matched) {
+            const ki = key.indexOf(keySeparator);
+            if (ki > 0 && !r.test(key.substring(0, ki))) {
+                matched = true;
+            }
+        }
+        return matched;
+    }
+    function deepFind(obj, path) {
+        let keySeparator = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '.';
+        if (!obj) return undefined;
+        if (obj[path]) return obj[path];
+        const paths = path.split(keySeparator);
+        let current = obj;
+        for (let i = 0; i < paths.length; ++i) {
+            if (!current) return undefined;
+            if (typeof current[paths[i]] === 'string' && i + 1 < paths.length) {
+                return undefined;
+            }
+            if (current[paths[i]] === undefined) {
+                let j = 2;
+                let p = paths.slice(i, i + j).join(keySeparator);
+                let mix = current[p];
+                while (mix === undefined && paths.length > i + j) {
+                    j++;
+                    p = paths.slice(i, i + j).join(keySeparator);
+                    mix = current[p];
+                }
+                if (mix === undefined) return undefined;
+                if (mix === null) return null;
+                if (path.endsWith(p)) {
+                    if (typeof mix === 'string') return mix;
+                    if (p && typeof mix[p] === 'string') return mix[p];
+                }
+                const joinedPath = paths.slice(i + j).join(keySeparator);
+                if (joinedPath) return deepFind(mix, joinedPath, keySeparator);
+                return undefined;
+            }
+            current = current[paths[i]];
+        }
+        return current;
+    }
+    function getCleanedCode(code) {
+        if (code && code.indexOf('_') > 0) return code.replace('_', '-');
+        return code;
+    }
+
+    class ResourceStore extends EventEmitter {
+        constructor(data) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+                ns: ['translation'],
+                defaultNS: 'translation'
+            };
+            super();
+            this.data = data || {};
+            this.options = options;
+            if (this.options.keySeparator === undefined) {
+                this.options.keySeparator = '.';
+            }
+            if (this.options.ignoreJSONStructure === undefined) {
+                this.options.ignoreJSONStructure = true;
+            }
+        }
+        addNamespaces(ns) {
+            if (this.options.ns.indexOf(ns) < 0) {
+                this.options.ns.push(ns);
+            }
+        }
+        removeNamespaces(ns) {
+            const index = this.options.ns.indexOf(ns);
+            if (index > -1) {
+                this.options.ns.splice(index, 1);
+            }
+        }
+        getResource(lng, ns, key) {
+            let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+            const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+            const ignoreJSONStructure = options.ignoreJSONStructure !== undefined ? options.ignoreJSONStructure : this.options.ignoreJSONStructure;
+            let path = [lng, ns];
+            if (key && typeof key !== 'string') path = path.concat(key);
+            if (key && typeof key === 'string') path = path.concat(keySeparator ? key.split(keySeparator) : key);
+            if (lng.indexOf('.') > -1) {
+                path = lng.split('.');
+            }
+            const result = getPath(this.data, path);
+            if (result || !ignoreJSONStructure || typeof key !== 'string') return result;
+            return deepFind(this.data && this.data[lng] && this.data[lng][ns], key, keySeparator);
+        }
+        addResource(lng, ns, key, value) {
+            let options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
+                silent: false
+            };
+            const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+            let path = [lng, ns];
+            if (key) path = path.concat(keySeparator ? key.split(keySeparator) : key);
+            if (lng.indexOf('.') > -1) {
+                path = lng.split('.');
+                value = ns;
+                ns = path[1];
+            }
+            this.addNamespaces(ns);
+            setPath(this.data, path, value);
+            if (!options.silent) this.emit('added', lng, ns, key, value);
+        }
+        addResources(lng, ns, resources) {
+            let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {
+                silent: false
+            };
+            for (const m in resources) {
+                if (typeof resources[m] === 'string' || Object.prototype.toString.apply(resources[m]) === '[object Array]') this.addResource(lng, ns, m, resources[m], {
+                    silent: true
+                });
+            }
+            if (!options.silent) this.emit('added', lng, ns, resources);
+        }
+        addResourceBundle(lng, ns, resources, deep, overwrite) {
+            let options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {
+                silent: false
+            };
+            let path = [lng, ns];
+            if (lng.indexOf('.') > -1) {
+                path = lng.split('.');
+                deep = resources;
+                resources = ns;
+                ns = path[1];
+            }
+            this.addNamespaces(ns);
+            let pack = getPath(this.data, path) || {};
+            if (deep) {
+                deepExtend(pack, resources, overwrite);
+            } else {
+                pack = {
+                    ...pack,
+                    ...resources
+                };
+            }
+            setPath(this.data, path, pack);
+            if (!options.silent) this.emit('added', lng, ns, resources);
+        }
+        removeResourceBundle(lng, ns) {
+            if (this.hasResourceBundle(lng, ns)) {
+                delete this.data[lng][ns];
+            }
+            this.removeNamespaces(ns);
+            this.emit('removed', lng, ns);
+        }
+        hasResourceBundle(lng, ns) {
+            return this.getResource(lng, ns) !== undefined;
+        }
+        getResourceBundle(lng, ns) {
+            if (!ns) ns = this.options.defaultNS;
+            if (this.options.compatibilityAPI === 'v1') return {
+                ...{},
+                ...this.getResource(lng, ns)
+            };
+            return this.getResource(lng, ns);
+        }
+        getDataByLanguage(lng) {
+            return this.data[lng];
+        }
+        hasLanguageSomeTranslations(lng) {
+            const data = this.getDataByLanguage(lng);
+            const n = data && Object.keys(data) || [];
+            return !!n.find(v => data[v] && Object.keys(data[v]).length > 0);
+        }
+        toJSON() {
+            return this.data;
+        }
+    }
+
+    var postProcessor = {
+        processors: {},
+        addPostProcessor(module) {
+            this.processors[module.name] = module;
+        },
+        handle(processors, value, key, options, translator) {
+            processors.forEach(processor => {
+                if (this.processors[processor]) value = this.processors[processor].process(value, key, options, translator);
+            });
+            return value;
+        }
+    };
+
+    const checkedLoadedFor = {};
+    class Translator extends EventEmitter {
+        constructor(services) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            super();
+            copy(['resourceStore', 'languageUtils', 'pluralResolver', 'interpolator', 'backendConnector', 'i18nFormat', 'utils'], services, this);
+            this.options = options;
+            if (this.options.keySeparator === undefined) {
+                this.options.keySeparator = '.';
+            }
+            this.logger = baseLogger.create('translator');
+        }
+        changeLanguage(lng) {
+            if (lng) this.language = lng;
+        }
+        exists(key) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+                interpolation: {}
+            };
+            if (key === undefined || key === null) {
+                return false;
+            }
+            const resolved = this.resolve(key, options);
+            return resolved && resolved.res !== undefined;
+        }
+        extractFromKey(key, options) {
+            let nsSeparator = options.nsSeparator !== undefined ? options.nsSeparator : this.options.nsSeparator;
+            if (nsSeparator === undefined) nsSeparator = ':';
+            const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+            let namespaces = options.ns || this.options.defaultNS || [];
+            const wouldCheckForNsInKey = nsSeparator && key.indexOf(nsSeparator) > -1;
+            const seemsNaturalLanguage = !this.options.userDefinedKeySeparator && !options.keySeparator && !this.options.userDefinedNsSeparator && !options.nsSeparator && !looksLikeObjectPath(key, nsSeparator, keySeparator);
+            if (wouldCheckForNsInKey && !seemsNaturalLanguage) {
+                const m = key.match(this.interpolator.nestingRegexp);
+                if (m && m.length > 0) {
+                    return {
+                        key,
+                        namespaces
+                    };
+                }
+                const parts = key.split(nsSeparator);
+                if (nsSeparator !== keySeparator || nsSeparator === keySeparator && this.options.ns.indexOf(parts[0]) > -1) namespaces = parts.shift();
+                key = parts.join(keySeparator);
+            }
+            if (typeof namespaces === 'string') namespaces = [namespaces];
+            return {
+                key,
+                namespaces
+            };
+        }
+        translate(keys, options, lastKey) {
+            if (typeof options !== 'object' && this.options.overloadTranslationOptionHandler) {
+                options = this.options.overloadTranslationOptionHandler(arguments);
+            }
+            if (typeof options === 'object') options = {
+                ...options
+            };
+            if (!options) options = {};
+            if (keys === undefined || keys === null) return '';
+            if (!Array.isArray(keys)) keys = [String(keys)];
+            const returnDetails = options.returnDetails !== undefined ? options.returnDetails : this.options.returnDetails;
+            const keySeparator = options.keySeparator !== undefined ? options.keySeparator : this.options.keySeparator;
+            const {
+                key,
+                namespaces
+            } = this.extractFromKey(keys[keys.length - 1], options);
+            const namespace = namespaces[namespaces.length - 1];
+            const lng = options.lng || this.language;
+            const appendNamespaceToCIMode = options.appendNamespaceToCIMode || this.options.appendNamespaceToCIMode;
+            if (lng && lng.toLowerCase() === 'cimode') {
+                if (appendNamespaceToCIMode) {
+                    const nsSeparator = options.nsSeparator || this.options.nsSeparator;
+                    if (returnDetails) {
+                        return {
+                            res: `${namespace}${nsSeparator}${key}`,
+                            usedKey: key,
+                            exactUsedKey: key,
+                            usedLng: lng,
+                            usedNS: namespace
+                        };
+                    }
+                    return `${namespace}${nsSeparator}${key}`;
+                }
+                if (returnDetails) {
+                    return {
+                        res: key,
+                        usedKey: key,
+                        exactUsedKey: key,
+                        usedLng: lng,
+                        usedNS: namespace
+                    };
+                }
+                return key;
+            }
+            const resolved = this.resolve(keys, options);
+            let res = resolved && resolved.res;
+            const resUsedKey = resolved && resolved.usedKey || key;
+            const resExactUsedKey = resolved && resolved.exactUsedKey || key;
+            const resType = Object.prototype.toString.apply(res);
+            const noObject = ['[object Number]', '[object Function]', '[object RegExp]'];
+            const joinArrays = options.joinArrays !== undefined ? options.joinArrays : this.options.joinArrays;
+            const handleAsObjectInI18nFormat = !this.i18nFormat || this.i18nFormat.handleAsObject;
+            const handleAsObject = typeof res !== 'string' && typeof res !== 'boolean' && typeof res !== 'number';
+            if (handleAsObjectInI18nFormat && res && handleAsObject && noObject.indexOf(resType) < 0 && !(typeof joinArrays === 'string' && resType === '[object Array]')) {
+                if (!options.returnObjects && !this.options.returnObjects) {
+                    if (!this.options.returnedObjectHandler) {
+                        this.logger.warn('accessing an object - but returnObjects options is not enabled!');
+                    }
+                    const r = this.options.returnedObjectHandler ? this.options.returnedObjectHandler(resUsedKey, res, {
+                        ...options,
+                        ns: namespaces
+                    }) : `key '${key} (${this.language})' returned an object instead of string.`;
+                    if (returnDetails) {
+                        resolved.res = r;
+                        return resolved;
+                    }
+                    return r;
+                }
+                if (keySeparator) {
+                    const resTypeIsArray = resType === '[object Array]';
+                    const copy = resTypeIsArray ? [] : {};
+                    const newKeyToUse = resTypeIsArray ? resExactUsedKey : resUsedKey;
+                    for (const m in res) {
+                        if (Object.prototype.hasOwnProperty.call(res, m)) {
+                            const deepKey = `${newKeyToUse}${keySeparator}${m}`;
+                            copy[m] = this.translate(deepKey, {
+                                ...options,
+                                ...{
+                                    joinArrays: false,
+                                    ns: namespaces
+                                }
+                            });
+                            if (copy[m] === deepKey) copy[m] = res[m];
+                        }
+                    }
+                    res = copy;
+                }
+            } else if (handleAsObjectInI18nFormat && typeof joinArrays === 'string' && resType === '[object Array]') {
+                res = res.join(joinArrays);
+                if (res) res = this.extendTranslation(res, keys, options, lastKey);
+            } else {
+                let usedDefault = false;
+                let usedKey = false;
+                const needsPluralHandling = options.count !== undefined && typeof options.count !== 'string';
+                const hasDefaultValue = Translator.hasDefaultValue(options);
+                const defaultValueSuffix = needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, options) : '';
+                const defaultValueSuffixOrdinalFallback = options.ordinal && needsPluralHandling ? this.pluralResolver.getSuffix(lng, options.count, {
+                    ordinal: false
+                }) : '';
+                const defaultValue = options[`defaultValue${defaultValueSuffix}`] || options[`defaultValue${defaultValueSuffixOrdinalFallback}`] || options.defaultValue;
+                if (!this.isValidLookup(res) && hasDefaultValue) {
+                    usedDefault = true;
+                    res = defaultValue;
+                }
+                if (!this.isValidLookup(res)) {
+                    usedKey = true;
+                    res = key;
+                }
+                const missingKeyNoValueFallbackToKey = options.missingKeyNoValueFallbackToKey || this.options.missingKeyNoValueFallbackToKey;
+                const resForMissing = missingKeyNoValueFallbackToKey && usedKey ? undefined : res;
+                const updateMissing = hasDefaultValue && defaultValue !== res && this.options.updateMissing;
+                if (usedKey || usedDefault || updateMissing) {
+                    this.logger.log(updateMissing ? 'updateKey' : 'missingKey', lng, namespace, key, updateMissing ? defaultValue : res);
+                    if (keySeparator) {
+                        const fk = this.resolve(key, {
+                            ...options,
+                            keySeparator: false
+                        });
+                        if (fk && fk.res) this.logger.warn('Seems the loaded translations were in flat JSON format instead of nested. Either set keySeparator: false on init or make sure your translations are published in nested format.');
+                    }
+                    let lngs = [];
+                    const fallbackLngs = this.languageUtils.getFallbackCodes(this.options.fallbackLng, options.lng || this.language);
+                    if (this.options.saveMissingTo === 'fallback' && fallbackLngs && fallbackLngs[0]) {
+                        for (let i = 0; i < fallbackLngs.length; i++) {
+                            lngs.push(fallbackLngs[i]);
+                        }
+                    } else if (this.options.saveMissingTo === 'all') {
+                        lngs = this.languageUtils.toResolveHierarchy(options.lng || this.language);
+                    } else {
+                        lngs.push(options.lng || this.language);
+                    }
+                    const send = (l, k, specificDefaultValue) => {
+                        const defaultForMissing = hasDefaultValue && specificDefaultValue !== res ? specificDefaultValue : resForMissing;
+                        if (this.options.missingKeyHandler) {
+                            this.options.missingKeyHandler(l, namespace, k, defaultForMissing, updateMissing, options);
+                        } else if (this.backendConnector && this.backendConnector.saveMissing) {
+                            this.backendConnector.saveMissing(l, namespace, k, defaultForMissing, updateMissing, options);
+                        }
+                        this.emit('missingKey', l, namespace, k, res);
+                    };
+                    if (this.options.saveMissing) {
+                        if (this.options.saveMissingPlurals && needsPluralHandling) {
+                            lngs.forEach(language => {
+                                this.pluralResolver.getSuffixes(language, options).forEach(suffix => {
+                                    send([language], key + suffix, options[`defaultValue${suffix}`] || defaultValue);
+                                });
+                            });
+                        } else {
+                            send(lngs, key, defaultValue);
+                        }
+                    }
+                }
+                res = this.extendTranslation(res, keys, options, resolved, lastKey);
+                if (usedKey && res === key && this.options.appendNamespaceToMissingKey) res = `${namespace}:${key}`;
+                if ((usedKey || usedDefault) && this.options.parseMissingKeyHandler) {
+                    if (this.options.compatibilityAPI !== 'v1') {
+                        res = this.options.parseMissingKeyHandler(this.options.appendNamespaceToMissingKey ? `${namespace}:${key}` : key, usedDefault ? res : undefined);
+                    } else {
+                        res = this.options.parseMissingKeyHandler(res);
+                    }
+                }
+            }
+            if (returnDetails) {
+                resolved.res = res;
+                return resolved;
+            }
+            return res;
+        }
+        extendTranslation(res, key, options, resolved, lastKey) {
+            var _this = this;
+            if (this.i18nFormat && this.i18nFormat.parse) {
+                res = this.i18nFormat.parse(res, {
+                    ...this.options.interpolation.defaultVariables,
+                    ...options
+                }, resolved.usedLng, resolved.usedNS, resolved.usedKey, {
+                    resolved
+                });
+            } else if (!options.skipInterpolation) {
+                if (options.interpolation) this.interpolator.init({
+                    ...options,
+                    ...{
+                        interpolation: {
+                            ...this.options.interpolation,
+                            ...options.interpolation
+                        }
+                    }
+                });
+                const skipOnVariables = typeof res === 'string' && (options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables);
+                let nestBef;
+                if (skipOnVariables) {
+                    const nb = res.match(this.interpolator.nestingRegexp);
+                    nestBef = nb && nb.length;
+                }
+                let data = options.replace && typeof options.replace !== 'string' ? options.replace : options;
+                if (this.options.interpolation.defaultVariables) data = {
+                    ...this.options.interpolation.defaultVariables,
+                    ...data
+                };
+                res = this.interpolator.interpolate(res, data, options.lng || this.language, options);
+                if (skipOnVariables) {
+                    const na = res.match(this.interpolator.nestingRegexp);
+                    const nestAft = na && na.length;
+                    if (nestBef < nestAft) options.nest = false;
+                }
+                if (!options.lng && this.options.compatibilityAPI !== 'v1' && resolved && resolved.res) options.lng = resolved.usedLng;
+                if (options.nest !== false) res = this.interpolator.nest(res, function () {
+                    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                        args[_key] = arguments[_key];
+                    }
+                    if (lastKey && lastKey[0] === args[0] && !options.context) {
+                        _this.logger.warn(`It seems you are nesting recursively key: ${args[0]} in key: ${key[0]}`);
+                        return null;
+                    }
+                    return _this.translate(...args, key);
+                }, options);
+                if (options.interpolation) this.interpolator.reset();
+            }
+            const postProcess = options.postProcess || this.options.postProcess;
+            const postProcessorNames = typeof postProcess === 'string' ? [postProcess] : postProcess;
+            if (res !== undefined && res !== null && postProcessorNames && postProcessorNames.length && options.applyPostProcessor !== false) {
+                res = postProcessor.handle(postProcessorNames, res, key, this.options && this.options.postProcessPassResolved ? {
+                    i18nResolved: resolved,
+                    ...options
+                } : options, this);
+            }
+            return res;
+        }
+        resolve(keys) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            let found;
+            let usedKey;
+            let exactUsedKey;
+            let usedLng;
+            let usedNS;
+            if (typeof keys === 'string') keys = [keys];
+            keys.forEach(k => {
+                if (this.isValidLookup(found)) return;
+                const extracted = this.extractFromKey(k, options);
+                const key = extracted.key;
+                usedKey = key;
+                let namespaces = extracted.namespaces;
+                if (this.options.fallbackNS) namespaces = namespaces.concat(this.options.fallbackNS);
+                const needsPluralHandling = options.count !== undefined && typeof options.count !== 'string';
+                const needsZeroSuffixLookup = needsPluralHandling && !options.ordinal && options.count === 0 && this.pluralResolver.shouldUseIntlApi();
+                const needsContextHandling = options.context !== undefined && (typeof options.context === 'string' || typeof options.context === 'number') && options.context !== '';
+                const codes = options.lngs ? options.lngs : this.languageUtils.toResolveHierarchy(options.lng || this.language, options.fallbackLng);
+                namespaces.forEach(ns => {
+                    if (this.isValidLookup(found)) return;
+                    usedNS = ns;
+                    if (!checkedLoadedFor[`${codes[0]}-${ns}`] && this.utils && this.utils.hasLoadedNamespace && !this.utils.hasLoadedNamespace(usedNS)) {
+                        checkedLoadedFor[`${codes[0]}-${ns}`] = true;
+                        this.logger.warn(`key "${usedKey}" for languages "${codes.join(', ')}" won't get resolved as namespace "${usedNS}" was not yet loaded`, 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
+                    }
+                    codes.forEach(code => {
+                        if (this.isValidLookup(found)) return;
+                        usedLng = code;
+                        const finalKeys = [key];
+                        if (this.i18nFormat && this.i18nFormat.addLookupKeys) {
+                            this.i18nFormat.addLookupKeys(finalKeys, key, code, ns, options);
+                        } else {
+                            let pluralSuffix;
+                            if (needsPluralHandling) pluralSuffix = this.pluralResolver.getSuffix(code, options.count, options);
+                            const zeroSuffix = `${this.options.pluralSeparator}zero`;
+                            const ordinalPrefix = `${this.options.pluralSeparator}ordinal${this.options.pluralSeparator}`;
+                            if (needsPluralHandling) {
+                                finalKeys.push(key + pluralSuffix);
+                                if (options.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+                                    finalKeys.push(key + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
+                                }
+                                if (needsZeroSuffixLookup) {
+                                    finalKeys.push(key + zeroSuffix);
+                                }
+                            }
+                            if (needsContextHandling) {
+                                const contextKey = `${key}${this.options.contextSeparator}${options.context}`;
+                                finalKeys.push(contextKey);
+                                if (needsPluralHandling) {
+                                    finalKeys.push(contextKey + pluralSuffix);
+                                    if (options.ordinal && pluralSuffix.indexOf(ordinalPrefix) === 0) {
+                                        finalKeys.push(contextKey + pluralSuffix.replace(ordinalPrefix, this.options.pluralSeparator));
+                                    }
+                                    if (needsZeroSuffixLookup) {
+                                        finalKeys.push(contextKey + zeroSuffix);
+                                    }
+                                }
+                            }
+                        }
+                        let possibleKey;
+                        while (possibleKey = finalKeys.pop()) {
+                            if (!this.isValidLookup(found)) {
+                                exactUsedKey = possibleKey;
+                                found = this.getResource(code, ns, possibleKey, options);
+                            }
+                        }
+                    });
+                });
+            });
+            return {
+                res: found,
+                usedKey,
+                exactUsedKey,
+                usedLng,
+                usedNS
+            };
+        }
+        isValidLookup(res) {
+            return res !== undefined && !(!this.options.returnNull && res === null) && !(!this.options.returnEmptyString && res === '');
+        }
+        getResource(code, ns, key) {
+            let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+            if (this.i18nFormat && this.i18nFormat.getResource) return this.i18nFormat.getResource(code, ns, key, options);
+            return this.resourceStore.getResource(code, ns, key, options);
+        }
+        static hasDefaultValue(options) {
+            const prefix = 'defaultValue';
+            for (const option in options) {
+                if (Object.prototype.hasOwnProperty.call(options, option) && prefix === option.substring(0, prefix.length) && undefined !== options[option]) {
+                    return true;
+                }
+            }
+            return false;
+        }
+    }
+
+    function capitalize(string) {
+        return string.charAt(0).toUpperCase() + string.slice(1);
+    }
+    class LanguageUtil {
+        constructor(options) {
+            this.options = options;
+            this.supportedLngs = this.options.supportedLngs || false;
+            this.logger = baseLogger.create('languageUtils');
+        }
+        getScriptPartFromCode(code) {
+            code = getCleanedCode(code);
+            if (!code || code.indexOf('-') < 0) return null;
+            const p = code.split('-');
+            if (p.length === 2) return null;
+            p.pop();
+            if (p[p.length - 1].toLowerCase() === 'x') return null;
+            return this.formatLanguageCode(p.join('-'));
+        }
+        getLanguagePartFromCode(code) {
+            code = getCleanedCode(code);
+            if (!code || code.indexOf('-') < 0) return code;
+            const p = code.split('-');
+            return this.formatLanguageCode(p[0]);
+        }
+        formatLanguageCode(code) {
+            if (typeof code === 'string' && code.indexOf('-') > -1) {
+                const specialCases = ['hans', 'hant', 'latn', 'cyrl', 'cans', 'mong', 'arab'];
+                let p = code.split('-');
+                if (this.options.lowerCaseLng) {
+                    p = p.map(part => part.toLowerCase());
+                } else if (p.length === 2) {
+                    p[0] = p[0].toLowerCase();
+                    p[1] = p[1].toUpperCase();
+                    if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
+                } else if (p.length === 3) {
+                    p[0] = p[0].toLowerCase();
+                    if (p[1].length === 2) p[1] = p[1].toUpperCase();
+                    if (p[0] !== 'sgn' && p[2].length === 2) p[2] = p[2].toUpperCase();
+                    if (specialCases.indexOf(p[1].toLowerCase()) > -1) p[1] = capitalize(p[1].toLowerCase());
+                    if (specialCases.indexOf(p[2].toLowerCase()) > -1) p[2] = capitalize(p[2].toLowerCase());
+                }
+                return p.join('-');
+            }
+            return this.options.cleanCode || this.options.lowerCaseLng ? code.toLowerCase() : code;
+        }
+        isSupportedCode(code) {
+            if (this.options.load === 'languageOnly' || this.options.nonExplicitSupportedLngs) {
+                code = this.getLanguagePartFromCode(code);
+            }
+            return !this.supportedLngs || !this.supportedLngs.length || this.supportedLngs.indexOf(code) > -1;
+        }
+        getBestMatchFromCodes(codes) {
+            if (!codes) return null;
+            let found;
+            codes.forEach(code => {
+                if (found) return;
+                const cleanedLng = this.formatLanguageCode(code);
+                if (!this.options.supportedLngs || this.isSupportedCode(cleanedLng)) found = cleanedLng;
+            });
+            if (!found && this.options.supportedLngs) {
+                codes.forEach(code => {
+                    if (found) return;
+                    const lngOnly = this.getLanguagePartFromCode(code);
+                    if (this.isSupportedCode(lngOnly)) return found = lngOnly;
+                    found = this.options.supportedLngs.find(supportedLng => {
+                        if (supportedLng === lngOnly) return supportedLng;
+                        if (supportedLng.indexOf('-') < 0 && lngOnly.indexOf('-') < 0) return;
+                        if (supportedLng.indexOf(lngOnly) === 0) return supportedLng;
+                    });
+                });
+            }
+            if (!found) found = this.getFallbackCodes(this.options.fallbackLng)[0];
+            return found;
+        }
+        getFallbackCodes(fallbacks, code) {
+            if (!fallbacks) return [];
+            if (typeof fallbacks === 'function') fallbacks = fallbacks(code);
+            if (typeof fallbacks === 'string') fallbacks = [fallbacks];
+            if (Object.prototype.toString.apply(fallbacks) === '[object Array]') return fallbacks;
+            if (!code) return fallbacks.default || [];
+            let found = fallbacks[code];
+            if (!found) found = fallbacks[this.getScriptPartFromCode(code)];
+            if (!found) found = fallbacks[this.formatLanguageCode(code)];
+            if (!found) found = fallbacks[this.getLanguagePartFromCode(code)];
+            if (!found) found = fallbacks.default;
+            return found || [];
+        }
+        toResolveHierarchy(code, fallbackCode) {
+            const fallbackCodes = this.getFallbackCodes(fallbackCode || this.options.fallbackLng || [], code);
+            const codes = [];
+            const addCode = c => {
+                if (!c) return;
+                if (this.isSupportedCode(c)) {
+                    codes.push(c);
+                } else {
+                    this.logger.warn(`rejecting language code not found in supportedLngs: ${c}`);
+                }
+            };
+            if (typeof code === 'string' && (code.indexOf('-') > -1 || code.indexOf('_') > -1)) {
+                if (this.options.load !== 'languageOnly') addCode(this.formatLanguageCode(code));
+                if (this.options.load !== 'languageOnly' && this.options.load !== 'currentOnly') addCode(this.getScriptPartFromCode(code));
+                if (this.options.load !== 'currentOnly') addCode(this.getLanguagePartFromCode(code));
+            } else if (typeof code === 'string') {
+                addCode(this.formatLanguageCode(code));
+            }
+            fallbackCodes.forEach(fc => {
+                if (codes.indexOf(fc) < 0) addCode(this.formatLanguageCode(fc));
+            });
+            return codes;
+        }
+    }
+
+    let sets = [{
+        lngs: ['ach', 'ak', 'am', 'arn', 'br', 'fil', 'gun', 'ln', 'mfe', 'mg', 'mi', 'oc', 'pt', 'pt-BR', 'tg', 'tl', 'ti', 'tr', 'uz', 'wa'],
+        nr: [1, 2],
+        fc: 1
+    }, {
+        lngs: ['af', 'an', 'ast', 'az', 'bg', 'bn', 'ca', 'da', 'de', 'dev', 'el', 'en', 'eo', 'es', 'et', 'eu', 'fi', 'fo', 'fur', 'fy', 'gl', 'gu', 'ha', 'hi', 'hu', 'hy', 'ia', 'it', 'kk', 'kn', 'ku', 'lb', 'mai', 'ml', 'mn', 'mr', 'nah', 'nap', 'nb', 'ne', 'nl', 'nn', 'no', 'nso', 'pa', 'pap', 'pms', 'ps', 'pt-PT', 'rm', 'sco', 'se', 'si', 'so', 'son', 'sq', 'sv', 'sw', 'ta', 'te', 'tk', 'ur', 'yo'],
+        nr: [1, 2],
+        fc: 2
+    }, {
+        lngs: ['ay', 'bo', 'cgg', 'fa', 'ht', 'id', 'ja', 'jbo', 'ka', 'km', 'ko', 'ky', 'lo', 'ms', 'sah', 'su', 'th', 'tt', 'ug', 'vi', 'wo', 'zh'],
+        nr: [1],
+        fc: 3
+    }, {
+        lngs: ['be', 'bs', 'cnr', 'dz', 'hr', 'ru', 'sr', 'uk'],
+        nr: [1, 2, 5],
+        fc: 4
+    }, {
+        lngs: ['ar'],
+        nr: [0, 1, 2, 3, 11, 100],
+        fc: 5
+    }, {
+        lngs: ['cs', 'sk'],
+        nr: [1, 2, 5],
+        fc: 6
+    }, {
+        lngs: ['csb', 'pl'],
+        nr: [1, 2, 5],
+        fc: 7
+    }, {
+        lngs: ['cy'],
+        nr: [1, 2, 3, 8],
+        fc: 8
+    }, {
+        lngs: ['fr'],
+        nr: [1, 2],
+        fc: 9
+    }, {
+        lngs: ['ga'],
+        nr: [1, 2, 3, 7, 11],
+        fc: 10
+    }, {
+        lngs: ['gd'],
+        nr: [1, 2, 3, 20],
+        fc: 11
+    }, {
+        lngs: ['is'],
+        nr: [1, 2],
+        fc: 12
+    }, {
+        lngs: ['jv'],
+        nr: [0, 1],
+        fc: 13
+    }, {
+        lngs: ['kw'],
+        nr: [1, 2, 3, 4],
+        fc: 14
+    }, {
+        lngs: ['lt'],
+        nr: [1, 2, 10],
+        fc: 15
+    }, {
+        lngs: ['lv'],
+        nr: [1, 2, 0],
+        fc: 16
+    }, {
+        lngs: ['mk'],
+        nr: [1, 2],
+        fc: 17
+    }, {
+        lngs: ['mnk'],
+        nr: [0, 1, 2],
+        fc: 18
+    }, {
+        lngs: ['mt'],
+        nr: [1, 2, 11, 20],
+        fc: 19
+    }, {
+        lngs: ['or'],
+        nr: [2, 1],
+        fc: 2
+    }, {
+        lngs: ['ro'],
+        nr: [1, 2, 20],
+        fc: 20
+    }, {
+        lngs: ['sl'],
+        nr: [5, 1, 2, 3],
+        fc: 21
+    }, {
+        lngs: ['he', 'iw'],
+        nr: [1, 2, 20, 21],
+        fc: 22
+    }];
+    let _rulesPluralsTypes = {
+        1: function (n) {
+            return Number(n > 1);
+        },
+        2: function (n) {
+            return Number(n != 1);
+        },
+        3: function (n) {
+            return 0;
+        },
+        4: function (n) {
+            return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
+        },
+        5: function (n) {
+            return Number(n == 0 ? 0 : n == 1 ? 1 : n == 2 ? 2 : n % 100 >= 3 && n % 100 <= 10 ? 3 : n % 100 >= 11 ? 4 : 5);
+        },
+        6: function (n) {
+            return Number(n == 1 ? 0 : n >= 2 && n <= 4 ? 1 : 2);
+        },
+        7: function (n) {
+            return Number(n == 1 ? 0 : n % 10 >= 2 && n % 10 <= 4 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
+        },
+        8: function (n) {
+            return Number(n == 1 ? 0 : n == 2 ? 1 : n != 8 && n != 11 ? 2 : 3);
+        },
+        9: function (n) {
+            return Number(n >= 2);
+        },
+        10: function (n) {
+            return Number(n == 1 ? 0 : n == 2 ? 1 : n < 7 ? 2 : n < 11 ? 3 : 4);
+        },
+        11: function (n) {
+            return Number(n == 1 || n == 11 ? 0 : n == 2 || n == 12 ? 1 : n > 2 && n < 20 ? 2 : 3);
+        },
+        12: function (n) {
+            return Number(n % 10 != 1 || n % 100 == 11);
+        },
+        13: function (n) {
+            return Number(n !== 0);
+        },
+        14: function (n) {
+            return Number(n == 1 ? 0 : n == 2 ? 1 : n == 3 ? 2 : 3);
+        },
+        15: function (n) {
+            return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n % 10 >= 2 && (n % 100 < 10 || n % 100 >= 20) ? 1 : 2);
+        },
+        16: function (n) {
+            return Number(n % 10 == 1 && n % 100 != 11 ? 0 : n !== 0 ? 1 : 2);
+        },
+        17: function (n) {
+            return Number(n == 1 || n % 10 == 1 && n % 100 != 11 ? 0 : 1);
+        },
+        18: function (n) {
+            return Number(n == 0 ? 0 : n == 1 ? 1 : 2);
+        },
+        19: function (n) {
+            return Number(n == 1 ? 0 : n == 0 || n % 100 > 1 && n % 100 < 11 ? 1 : n % 100 > 10 && n % 100 < 20 ? 2 : 3);
+        },
+        20: function (n) {
+            return Number(n == 1 ? 0 : n == 0 || n % 100 > 0 && n % 100 < 20 ? 1 : 2);
+        },
+        21: function (n) {
+            return Number(n % 100 == 1 ? 1 : n % 100 == 2 ? 2 : n % 100 == 3 || n % 100 == 4 ? 3 : 0);
+        },
+        22: function (n) {
+            return Number(n == 1 ? 0 : n == 2 ? 1 : (n < 0 || n > 10) && n % 10 == 0 ? 2 : 3);
+        }
+    };
+    const nonIntlVersions = ['v1', 'v2', 'v3'];
+    const intlVersions = ['v4'];
+    const suffixesOrder = {
+        zero: 0,
+        one: 1,
+        two: 2,
+        few: 3,
+        many: 4,
+        other: 5
+    };
+    function createRules() {
+        const rules = {};
+        sets.forEach(set => {
+            set.lngs.forEach(l => {
+                rules[l] = {
+                    numbers: set.nr,
+                    plurals: _rulesPluralsTypes[set.fc]
+                };
+            });
+        });
+        return rules;
+    }
+    class PluralResolver {
+        constructor(languageUtils) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            this.languageUtils = languageUtils;
+            this.options = options;
+            this.logger = baseLogger.create('pluralResolver');
+            if ((!this.options.compatibilityJSON || intlVersions.includes(this.options.compatibilityJSON)) && (typeof Intl === 'undefined' || !Intl.PluralRules)) {
+                this.options.compatibilityJSON = 'v3';
+                this.logger.error('Your environment seems not to be Intl API compatible, use an Intl.PluralRules polyfill. Will fallback to the compatibilityJSON v3 format handling.');
+            }
+            this.rules = createRules();
+        }
+        addRule(lng, obj) {
+            this.rules[lng] = obj;
+        }
+        getRule(code) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            if (this.shouldUseIntlApi()) {
+                try {
+                    return new Intl.PluralRules(getCleanedCode(code), {
+                        type: options.ordinal ? 'ordinal' : 'cardinal'
+                    });
+                } catch {
+                    return;
+                }
+            }
+            return this.rules[code] || this.rules[this.languageUtils.getLanguagePartFromCode(code)];
+        }
+        needsPlural(code) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            const rule = this.getRule(code, options);
+            if (this.shouldUseIntlApi()) {
+                return rule && rule.resolvedOptions().pluralCategories.length > 1;
+            }
+            return rule && rule.numbers.length > 1;
+        }
+        getPluralFormsOfKey(code, key) {
+            let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            return this.getSuffixes(code, options).map(suffix => `${key}${suffix}`);
+        }
+        getSuffixes(code) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            const rule = this.getRule(code, options);
+            if (!rule) {
+                return [];
+            }
+            if (this.shouldUseIntlApi()) {
+                return rule.resolvedOptions().pluralCategories.sort((pluralCategory1, pluralCategory2) => suffixesOrder[pluralCategory1] - suffixesOrder[pluralCategory2]).map(pluralCategory => `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${pluralCategory}`);
+            }
+            return rule.numbers.map(number => this.getSuffix(code, number, options));
+        }
+        getSuffix(code, count) {
+            let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            const rule = this.getRule(code, options);
+            if (rule) {
+                if (this.shouldUseIntlApi()) {
+                    return `${this.options.prepend}${options.ordinal ? `ordinal${this.options.prepend}` : ''}${rule.select(count)}`;
+                }
+                return this.getSuffixRetroCompatible(rule, count);
+            }
+            this.logger.warn(`no plural rule found for: ${code}`);
+            return '';
+        }
+        getSuffixRetroCompatible(rule, count) {
+            const idx = rule.noAbs ? rule.plurals(count) : rule.plurals(Math.abs(count));
+            let suffix = rule.numbers[idx];
+            if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+                if (suffix === 2) {
+                    suffix = 'plural';
+                } else if (suffix === 1) {
+                    suffix = '';
+                }
+            }
+            const returnSuffix = () => this.options.prepend && suffix.toString() ? this.options.prepend + suffix.toString() : suffix.toString();
+            if (this.options.compatibilityJSON === 'v1') {
+                if (suffix === 1) return '';
+                if (typeof suffix === 'number') return `_plural_${suffix.toString()}`;
+                return returnSuffix();
+            } else if (this.options.compatibilityJSON === 'v2') {
+                return returnSuffix();
+            } else if (this.options.simplifyPluralSuffix && rule.numbers.length === 2 && rule.numbers[0] === 1) {
+                return returnSuffix();
+            }
+            return this.options.prepend && idx.toString() ? this.options.prepend + idx.toString() : idx.toString();
+        }
+        shouldUseIntlApi() {
+            return !nonIntlVersions.includes(this.options.compatibilityJSON);
+        }
+    }
+
+    function deepFindWithDefaults(data, defaultData, key) {
+        let keySeparator = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : '.';
+        let ignoreJSONStructure = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : true;
+        let path = getPathWithDefaults(data, defaultData, key);
+        if (!path && ignoreJSONStructure && typeof key === 'string') {
+            path = deepFind(data, key, keySeparator);
+            if (path === undefined) path = deepFind(defaultData, key, keySeparator);
+        }
+        return path;
+    }
+    class Interpolator {
+        constructor() {
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            this.logger = baseLogger.create('interpolator');
+            this.options = options;
+            this.format = options.interpolation && options.interpolation.format || (value => value);
+            this.init(options);
+        }
+        init() {
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            if (!options.interpolation) options.interpolation = {
+                escapeValue: true
+            };
+            const iOpts = options.interpolation;
+            this.escape = iOpts.escape !== undefined ? iOpts.escape : escape;
+            this.escapeValue = iOpts.escapeValue !== undefined ? iOpts.escapeValue : true;
+            this.useRawValueToEscape = iOpts.useRawValueToEscape !== undefined ? iOpts.useRawValueToEscape : false;
+            this.prefix = iOpts.prefix ? regexEscape(iOpts.prefix) : iOpts.prefixEscaped || '{{';
+            this.suffix = iOpts.suffix ? regexEscape(iOpts.suffix) : iOpts.suffixEscaped || '}}';
+            this.formatSeparator = iOpts.formatSeparator ? iOpts.formatSeparator : iOpts.formatSeparator || ',';
+            this.unescapePrefix = iOpts.unescapeSuffix ? '' : iOpts.unescapePrefix || '-';
+            this.unescapeSuffix = this.unescapePrefix ? '' : iOpts.unescapeSuffix || '';
+            this.nestingPrefix = iOpts.nestingPrefix ? regexEscape(iOpts.nestingPrefix) : iOpts.nestingPrefixEscaped || regexEscape('$t(');
+            this.nestingSuffix = iOpts.nestingSuffix ? regexEscape(iOpts.nestingSuffix) : iOpts.nestingSuffixEscaped || regexEscape(')');
+            this.nestingOptionsSeparator = iOpts.nestingOptionsSeparator ? iOpts.nestingOptionsSeparator : iOpts.nestingOptionsSeparator || ',';
+            this.maxReplaces = iOpts.maxReplaces ? iOpts.maxReplaces : 1000;
+            this.alwaysFormat = iOpts.alwaysFormat !== undefined ? iOpts.alwaysFormat : false;
+            this.resetRegExp();
+        }
+        reset() {
+            if (this.options) this.init(this.options);
+        }
+        resetRegExp() {
+            const regexpStr = `${this.prefix}(.+?)${this.suffix}`;
+            this.regexp = new RegExp(regexpStr, 'g');
+            const regexpUnescapeStr = `${this.prefix}${this.unescapePrefix}(.+?)${this.unescapeSuffix}${this.suffix}`;
+            this.regexpUnescape = new RegExp(regexpUnescapeStr, 'g');
+            const nestingRegexpStr = `${this.nestingPrefix}(.+?)${this.nestingSuffix}`;
+            this.nestingRegexp = new RegExp(nestingRegexpStr, 'g');
+        }
+        interpolate(str, data, lng, options) {
+            let match;
+            let value;
+            let replaces;
+            const defaultData = this.options && this.options.interpolation && this.options.interpolation.defaultVariables || {};
+            function regexSafe(val) {
+                return val.replace(/\$/g, '$$$$');
+            }
+            const handleFormat = key => {
+                if (key.indexOf(this.formatSeparator) < 0) {
+                    const path = deepFindWithDefaults(data, defaultData, key, this.options.keySeparator, this.options.ignoreJSONStructure);
+                    return this.alwaysFormat ? this.format(path, undefined, lng, {
+                        ...options,
+                        ...data,
+                        interpolationkey: key
+                    }) : path;
+                }
+                const p = key.split(this.formatSeparator);
+                const k = p.shift().trim();
+                const f = p.join(this.formatSeparator).trim();
+                return this.format(deepFindWithDefaults(data, defaultData, k, this.options.keySeparator, this.options.ignoreJSONStructure), f, lng, {
+                    ...options,
+                    ...data,
+                    interpolationkey: k
+                });
+            };
+            this.resetRegExp();
+            const missingInterpolationHandler = options && options.missingInterpolationHandler || this.options.missingInterpolationHandler;
+            const skipOnVariables = options && options.interpolation && options.interpolation.skipOnVariables !== undefined ? options.interpolation.skipOnVariables : this.options.interpolation.skipOnVariables;
+            const todos = [{
+                regex: this.regexpUnescape,
+                safeValue: val => regexSafe(val)
+            }, {
+                regex: this.regexp,
+                safeValue: val => this.escapeValue ? regexSafe(this.escape(val)) : regexSafe(val)
+            }];
+            todos.forEach(todo => {
+                replaces = 0;
+                while (match = todo.regex.exec(str)) {
+                    const matchedVar = match[1].trim();
+                    value = handleFormat(matchedVar);
+                    if (value === undefined) {
+                        if (typeof missingInterpolationHandler === 'function') {
+                            const temp = missingInterpolationHandler(str, match, options);
+                            value = typeof temp === 'string' ? temp : '';
+                        } else if (options && Object.prototype.hasOwnProperty.call(options, matchedVar)) {
+                            value = '';
+                        } else if (skipOnVariables) {
+                            value = match[0];
+                            continue;
+                        } else {
+                            this.logger.warn(`missed to pass in variable ${matchedVar} for interpolating ${str}`);
+                            value = '';
+                        }
+                    } else if (typeof value !== 'string' && !this.useRawValueToEscape) {
+                        value = makeString(value);
+                    }
+                    const safeValue = todo.safeValue(value);
+                    str = str.replace(match[0], safeValue);
+                    if (skipOnVariables) {
+                        todo.regex.lastIndex += value.length;
+                        todo.regex.lastIndex -= match[0].length;
+                    } else {
+                        todo.regex.lastIndex = 0;
+                    }
+                    replaces++;
+                    if (replaces >= this.maxReplaces) {
+                        break;
+                    }
+                }
+            });
+            return str;
+        }
+        nest(str, fc) {
+            let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            let match;
+            let value;
+            let clonedOptions;
+            function handleHasOptions(key, inheritedOptions) {
+                const sep = this.nestingOptionsSeparator;
+                if (key.indexOf(sep) < 0) return key;
+                const c = key.split(new RegExp(`${sep}[ ]*{`));
+                let optionsString = `{${c[1]}`;
+                key = c[0];
+                optionsString = this.interpolate(optionsString, clonedOptions);
+                const matchedSingleQuotes = optionsString.match(/'/g);
+                const matchedDoubleQuotes = optionsString.match(/"/g);
+                if (matchedSingleQuotes && matchedSingleQuotes.length % 2 === 0 && !matchedDoubleQuotes || matchedDoubleQuotes.length % 2 !== 0) {
+                    optionsString = optionsString.replace(/'/g, '"');
+                }
+                try {
+                    clonedOptions = JSON.parse(optionsString);
+                    if (inheritedOptions) clonedOptions = {
+                        ...inheritedOptions,
+                        ...clonedOptions
+                    };
+                } catch (e) {
+                    this.logger.warn(`failed parsing options string in nesting for key ${key}`, e);
+                    return `${key}${sep}${optionsString}`;
+                }
+                delete clonedOptions.defaultValue;
+                return key;
+            }
+            while (match = this.nestingRegexp.exec(str)) {
+                let formatters = [];
+                clonedOptions = {
+                    ...options
+                };
+                clonedOptions = clonedOptions.replace && typeof clonedOptions.replace !== 'string' ? clonedOptions.replace : clonedOptions;
+                clonedOptions.applyPostProcessor = false;
+                delete clonedOptions.defaultValue;
+                let doReduce = false;
+                if (match[0].indexOf(this.formatSeparator) !== -1 && !/{.*}/.test(match[1])) {
+                    const r = match[1].split(this.formatSeparator).map(elem => elem.trim());
+                    match[1] = r.shift();
+                    formatters = r;
+                    doReduce = true;
+                }
+                value = fc(handleHasOptions.call(this, match[1].trim(), clonedOptions), clonedOptions);
+                if (value && match[0] === str && typeof value !== 'string') return value;
+                if (typeof value !== 'string') value = makeString(value);
+                if (!value) {
+                    this.logger.warn(`missed to resolve ${match[1]} for nesting ${str}`);
+                    value = '';
+                }
+                if (doReduce) {
+                    value = formatters.reduce((v, f) => this.format(v, f, options.lng, {
+                        ...options,
+                        interpolationkey: match[1].trim()
+                    }), value.trim());
+                }
+                str = str.replace(match[0], value);
+                this.regexp.lastIndex = 0;
+            }
+            return str;
+        }
+    }
+
+    function parseFormatStr(formatStr) {
+        let formatName = formatStr.toLowerCase().trim();
+        const formatOptions = {};
+        if (formatStr.indexOf('(') > -1) {
+            const p = formatStr.split('(');
+            formatName = p[0].toLowerCase().trim();
+            const optStr = p[1].substring(0, p[1].length - 1);
+            if (formatName === 'currency' && optStr.indexOf(':') < 0) {
+                if (!formatOptions.currency) formatOptions.currency = optStr.trim();
+            } else if (formatName === 'relativetime' && optStr.indexOf(':') < 0) {
+                if (!formatOptions.range) formatOptions.range = optStr.trim();
+            } else {
+                const opts = optStr.split(';');
+                opts.forEach(opt => {
+                    if (!opt) return;
+                    const [key, ...rest] = opt.split(':');
+                    const val = rest.join(':').trim().replace(/^'+|'+$/g, '');
+                    if (!formatOptions[key.trim()]) formatOptions[key.trim()] = val;
+                    if (val === 'false') formatOptions[key.trim()] = false;
+                    if (val === 'true') formatOptions[key.trim()] = true;
+                    if (!isNaN(val)) formatOptions[key.trim()] = parseInt(val, 10);
+                });
+            }
+        }
+        return {
+            formatName,
+            formatOptions
+        };
+    }
+    function createCachedFormatter(fn) {
+        const cache = {};
+        return function invokeFormatter(val, lng, options) {
+            const key = lng + JSON.stringify(options);
+            let formatter = cache[key];
+            if (!formatter) {
+                formatter = fn(getCleanedCode(lng), options);
+                cache[key] = formatter;
+            }
+            return formatter(val);
+        };
+    }
+    class Formatter {
+        constructor() {
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            this.logger = baseLogger.create('formatter');
+            this.options = options;
+            this.formats = {
+                number: createCachedFormatter((lng, opt) => {
+                    const formatter = new Intl.NumberFormat(lng, {
+                        ...opt
+                    });
+                    return val => formatter.format(val);
+                }),
+                currency: createCachedFormatter((lng, opt) => {
+                    const formatter = new Intl.NumberFormat(lng, {
+                        ...opt,
+                        style: 'currency'
+                    });
+                    return val => formatter.format(val);
+                }),
+                datetime: createCachedFormatter((lng, opt) => {
+                    const formatter = new Intl.DateTimeFormat(lng, {
+                        ...opt
+                    });
+                    return val => formatter.format(val);
+                }),
+                relativetime: createCachedFormatter((lng, opt) => {
+                    const formatter = new Intl.RelativeTimeFormat(lng, {
+                        ...opt
+                    });
+                    return val => formatter.format(val, opt.range || 'day');
+                }),
+                list: createCachedFormatter((lng, opt) => {
+                    const formatter = new Intl.ListFormat(lng, {
+                        ...opt
+                    });
+                    return val => formatter.format(val);
+                })
+            };
+            this.init(options);
+        }
+        init(services) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+                interpolation: {}
+            };
+            const iOpts = options.interpolation;
+            this.formatSeparator = iOpts.formatSeparator ? iOpts.formatSeparator : iOpts.formatSeparator || ',';
+        }
+        add(name, fc) {
+            this.formats[name.toLowerCase().trim()] = fc;
+        }
+        addCached(name, fc) {
+            this.formats[name.toLowerCase().trim()] = createCachedFormatter(fc);
+        }
+        format(value, format, lng) {
+            let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+            const formats = format.split(this.formatSeparator);
+            const result = formats.reduce((mem, f) => {
+                const {
+                    formatName,
+                    formatOptions
+                } = parseFormatStr(f);
+                if (this.formats[formatName]) {
+                    let formatted = mem;
+                    try {
+                        const valOptions = options && options.formatParams && options.formatParams[options.interpolationkey] || {};
+                        const l = valOptions.locale || valOptions.lng || options.locale || options.lng || lng;
+                        formatted = this.formats[formatName](mem, l, {
+                            ...formatOptions,
+                            ...options,
+                            ...valOptions
+                        });
+                    } catch (error) {
+                        this.logger.warn(error);
+                    }
+                    return formatted;
+                } else {
+                    this.logger.warn(`there was no format function for ${formatName}`);
+                }
+                return mem;
+            }, value);
+            return result;
+        }
+    }
+
+    function removePending(q, name) {
+        if (q.pending[name] !== undefined) {
+            delete q.pending[name];
+            q.pendingCount--;
+        }
+    }
+    class Connector extends EventEmitter {
+        constructor(backend, store, services) {
+            let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+            super();
+            this.backend = backend;
+            this.store = store;
+            this.services = services;
+            this.languageUtils = services.languageUtils;
+            this.options = options;
+            this.logger = baseLogger.create('backendConnector');
+            this.waitingReads = [];
+            this.maxParallelReads = options.maxParallelReads || 10;
+            this.readingCalls = 0;
+            this.maxRetries = options.maxRetries >= 0 ? options.maxRetries : 5;
+            this.retryTimeout = options.retryTimeout >= 1 ? options.retryTimeout : 350;
+            this.state = {};
+            this.queue = [];
+            if (this.backend && this.backend.init) {
+                this.backend.init(services, options.backend, options);
+            }
+        }
+        queueLoad(languages, namespaces, options, callback) {
+            const toLoad = {};
+            const pending = {};
+            const toLoadLanguages = {};
+            const toLoadNamespaces = {};
+            languages.forEach(lng => {
+                let hasAllNamespaces = true;
+                namespaces.forEach(ns => {
+                    const name = `${lng}|${ns}`;
+                    if (!options.reload && this.store.hasResourceBundle(lng, ns)) {
+                        this.state[name] = 2;
+                    } else if (this.state[name] < 0); else if (this.state[name] === 1) {
+                        if (pending[name] === undefined) pending[name] = true;
+                    } else {
+                        this.state[name] = 1;
+                        hasAllNamespaces = false;
+                        if (pending[name] === undefined) pending[name] = true;
+                        if (toLoad[name] === undefined) toLoad[name] = true;
+                        if (toLoadNamespaces[ns] === undefined) toLoadNamespaces[ns] = true;
+                    }
+                });
+                if (!hasAllNamespaces) toLoadLanguages[lng] = true;
+            });
+            if (Object.keys(toLoad).length || Object.keys(pending).length) {
+                this.queue.push({
+                    pending,
+                    pendingCount: Object.keys(pending).length,
+                    loaded: {},
+                    errors: [],
+                    callback
+                });
+            }
+            return {
+                toLoad: Object.keys(toLoad),
+                pending: Object.keys(pending),
+                toLoadLanguages: Object.keys(toLoadLanguages),
+                toLoadNamespaces: Object.keys(toLoadNamespaces)
+            };
+        }
+        loaded(name, err, data) {
+            const s = name.split('|');
+            const lng = s[0];
+            const ns = s[1];
+            if (err) this.emit('failedLoading', lng, ns, err);
+            if (data) {
+                this.store.addResourceBundle(lng, ns, data);
+            }
+            this.state[name] = err ? -1 : 2;
+            const loaded = {};
+            this.queue.forEach(q => {
+                pushPath(q.loaded, [lng], ns);
+                removePending(q, name);
+                if (err) q.errors.push(err);
+                if (q.pendingCount === 0 && !q.done) {
+                    Object.keys(q.loaded).forEach(l => {
+                        if (!loaded[l]) loaded[l] = {};
+                        const loadedKeys = q.loaded[l];
+                        if (loadedKeys.length) {
+                            loadedKeys.forEach(n => {
+                                if (loaded[l][n] === undefined) loaded[l][n] = true;
+                            });
+                        }
+                    });
+                    q.done = true;
+                    if (q.errors.length) {
+                        q.callback(q.errors);
+                    } else {
+                        q.callback();
+                    }
+                }
+            });
+            this.emit('loaded', loaded);
+            this.queue = this.queue.filter(q => !q.done);
+        }
+        read(lng, ns, fcName) {
+            let tried = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+            let wait = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : this.retryTimeout;
+            let callback = arguments.length > 5 ? arguments[5] : undefined;
+            if (!lng.length) return callback(null, {});
+            if (this.readingCalls >= this.maxParallelReads) {
+                this.waitingReads.push({
+                    lng,
+                    ns,
+                    fcName,
+                    tried,
+                    wait,
+                    callback
+                });
+                return;
+            }
+            this.readingCalls++;
+            const resolver = (err, data) => {
+                this.readingCalls--;
+                if (this.waitingReads.length > 0) {
+                    const next = this.waitingReads.shift();
+                    this.read(next.lng, next.ns, next.fcName, next.tried, next.wait, next.callback);
+                }
+                if (err && data && tried < this.maxRetries) {
+                    setTimeout(() => {
+                        this.read.call(this, lng, ns, fcName, tried + 1, wait * 2, callback);
+                    }, wait);
+                    return;
+                }
+                callback(err, data);
+            };
+            const fc = this.backend[fcName].bind(this.backend);
+            if (fc.length === 2) {
+                try {
+                    const r = fc(lng, ns);
+                    if (r && typeof r.then === 'function') {
+                        r.then(data => resolver(null, data)).catch(resolver);
+                    } else {
+                        resolver(null, r);
+                    }
+                } catch (err) {
+                    resolver(err);
+                }
+                return;
+            }
+            return fc(lng, ns, resolver);
+        }
+        prepareLoading(languages, namespaces) {
+            let options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+            let callback = arguments.length > 3 ? arguments[3] : undefined;
+            if (!this.backend) {
+                this.logger.warn('No backend was added via i18next.use. Will not load resources.');
+                return callback && callback();
+            }
+            if (typeof languages === 'string') languages = this.languageUtils.toResolveHierarchy(languages);
+            if (typeof namespaces === 'string') namespaces = [namespaces];
+            const toLoad = this.queueLoad(languages, namespaces, options, callback);
+            if (!toLoad.toLoad.length) {
+                if (!toLoad.pending.length) callback();
+                return null;
+            }
+            toLoad.toLoad.forEach(name => {
+                this.loadOne(name);
+            });
+        }
+        load(languages, namespaces, callback) {
+            this.prepareLoading(languages, namespaces, {}, callback);
+        }
+        reload(languages, namespaces, callback) {
+            this.prepareLoading(languages, namespaces, {
+                reload: true
+            }, callback);
+        }
+        loadOne(name) {
+            let prefix = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+            const s = name.split('|');
+            const lng = s[0];
+            const ns = s[1];
+            this.read(lng, ns, 'read', undefined, undefined, (err, data) => {
+                if (err) this.logger.warn(`${prefix}loading namespace ${ns} for language ${lng} failed`, err);
+                if (!err && data) this.logger.log(`${prefix}loaded namespace ${ns} for language ${lng}`, data);
+                this.loaded(name, err, data);
+            });
+        }
+        saveMissing(languages, namespace, key, fallbackValue, isUpdate) {
+            let options = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : {};
+            let clb = arguments.length > 6 && arguments[6] !== undefined ? arguments[6] : () => { };
+            if (this.services.utils && this.services.utils.hasLoadedNamespace && !this.services.utils.hasLoadedNamespace(namespace)) {
+                this.logger.warn(`did not save key "${key}" as the namespace "${namespace}" was not yet loaded`, 'This means something IS WRONG in your setup. You access the t function before i18next.init / i18next.loadNamespace / i18next.changeLanguage was done. Wait for the callback or Promise to resolve before accessing it!!!');
+                return;
+            }
+            if (key === undefined || key === null || key === '') return;
+            if (this.backend && this.backend.create) {
+                const opts = {
+                    ...options,
+                    isUpdate
+                };
+                const fc = this.backend.create.bind(this.backend);
+                if (fc.length < 6) {
+                    try {
+                        let r;
+                        if (fc.length === 5) {
+                            r = fc(languages, namespace, key, fallbackValue, opts);
+                        } else {
+                            r = fc(languages, namespace, key, fallbackValue);
+                        }
+                        if (r && typeof r.then === 'function') {
+                            r.then(data => clb(null, data)).catch(clb);
+                        } else {
+                            clb(null, r);
+                        }
+                    } catch (err) {
+                        clb(err);
+                    }
+                } else {
+                    fc(languages, namespace, key, fallbackValue, clb, opts);
+                }
+            }
+            if (!languages || !languages[0]) return;
+            this.store.addResource(languages[0], namespace, key, fallbackValue);
+        }
+    }
+
+    function get() {
+        return {
+            debug: false,
+            initImmediate: true,
+            ns: ['translation'],
+            defaultNS: ['translation'],
+            fallbackLng: ['dev'],
+            fallbackNS: false,
+            supportedLngs: false,
+            nonExplicitSupportedLngs: false,
+            load: 'all',
+            preload: false,
+            simplifyPluralSuffix: true,
+            keySeparator: '.',
+            nsSeparator: ':',
+            pluralSeparator: '_',
+            contextSeparator: '_',
+            partialBundledLanguages: false,
+            saveMissing: false,
+            updateMissing: false,
+            saveMissingTo: 'fallback',
+            saveMissingPlurals: true,
+            missingKeyHandler: false,
+            missingInterpolationHandler: false,
+            postProcess: false,
+            postProcessPassResolved: false,
+            returnNull: false,
+            returnEmptyString: true,
+            returnObjects: false,
+            joinArrays: false,
+            returnedObjectHandler: false,
+            parseMissingKeyHandler: false,
+            appendNamespaceToMissingKey: false,
+            appendNamespaceToCIMode: false,
+            overloadTranslationOptionHandler: function handle(args) {
+                let ret = {};
+                if (typeof args[1] === 'object') ret = args[1];
+                if (typeof args[1] === 'string') ret.defaultValue = args[1];
+                if (typeof args[2] === 'string') ret.tDescription = args[2];
+                if (typeof args[2] === 'object' || typeof args[3] === 'object') {
+                    const options = args[3] || args[2];
+                    Object.keys(options).forEach(key => {
+                        ret[key] = options[key];
+                    });
+                }
+                return ret;
+            },
+            interpolation: {
+                escapeValue: true,
+                format: (value, format, lng, options) => value,
+                prefix: '{{',
+                suffix: '}}',
+                formatSeparator: ',',
+                unescapePrefix: '-',
+                nestingPrefix: '$t(',
+                nestingSuffix: ')',
+                nestingOptionsSeparator: ',',
+                maxReplaces: 1000,
+                skipOnVariables: true
+            }
+        };
+    }
+    function transformOptions(options) {
+        if (typeof options.ns === 'string') options.ns = [options.ns];
+        if (typeof options.fallbackLng === 'string') options.fallbackLng = [options.fallbackLng];
+        if (typeof options.fallbackNS === 'string') options.fallbackNS = [options.fallbackNS];
+        if (options.supportedLngs && options.supportedLngs.indexOf('cimode') < 0) {
+            options.supportedLngs = options.supportedLngs.concat(['cimode']);
+        }
+        return options;
+    }
+
+    function noop() { }
+    function bindMemberFunctions(inst) {
+        const mems = Object.getOwnPropertyNames(Object.getPrototypeOf(inst));
+        mems.forEach(mem => {
+            if (typeof inst[mem] === 'function') {
+                inst[mem] = inst[mem].bind(inst);
+            }
+        });
+    }
+    class I18n extends EventEmitter {
+        constructor() {
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            let callback = arguments.length > 1 ? arguments[1] : undefined;
+            super();
+            this.options = transformOptions(options);
+            this.services = {};
+            this.logger = baseLogger;
+            this.modules = {
+                external: []
+            };
+            bindMemberFunctions(this);
+            if (callback && !this.isInitialized && !options.isClone) {
+                if (!this.options.initImmediate) {
+                    this.init(options, callback);
+                    return this;
+                }
+                setTimeout(() => {
+                    this.init(options, callback);
+                }, 0);
+            }
+        }
+        init() {
+            var _this = this;
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            let callback = arguments.length > 1 ? arguments[1] : undefined;
+            if (typeof options === 'function') {
+                callback = options;
+                options = {};
+            }
+            if (!options.defaultNS && options.defaultNS !== false && options.ns) {
+                if (typeof options.ns === 'string') {
+                    options.defaultNS = options.ns;
+                } else if (options.ns.indexOf('translation') < 0) {
+                    options.defaultNS = options.ns[0];
+                }
+            }
+            const defOpts = get();
+            this.options = {
+                ...defOpts,
+                ...this.options,
+                ...transformOptions(options)
+            };
+            if (this.options.compatibilityAPI !== 'v1') {
+                this.options.interpolation = {
+                    ...defOpts.interpolation,
+                    ...this.options.interpolation
+                };
+            }
+            if (options.keySeparator !== undefined) {
+                this.options.userDefinedKeySeparator = options.keySeparator;
+            }
+            if (options.nsSeparator !== undefined) {
+                this.options.userDefinedNsSeparator = options.nsSeparator;
+            }
+            function createClassOnDemand(ClassOrObject) {
+                if (!ClassOrObject) return null;
+                if (typeof ClassOrObject === 'function') return new ClassOrObject();
+                return ClassOrObject;
+            }
+            if (!this.options.isClone) {
+                if (this.modules.logger) {
+                    baseLogger.init(createClassOnDemand(this.modules.logger), this.options);
+                } else {
+                    baseLogger.init(null, this.options);
+                }
+                let formatter;
+                if (this.modules.formatter) {
+                    formatter = this.modules.formatter;
+                } else if (typeof Intl !== 'undefined') {
+                    formatter = Formatter;
+                }
+                const lu = new LanguageUtil(this.options);
+                this.store = new ResourceStore(this.options.resources, this.options);
+                const s = this.services;
+                s.logger = baseLogger;
+                s.resourceStore = this.store;
+                s.languageUtils = lu;
+                s.pluralResolver = new PluralResolver(lu, {
+                    prepend: this.options.pluralSeparator,
+                    compatibilityJSON: this.options.compatibilityJSON,
+                    simplifyPluralSuffix: this.options.simplifyPluralSuffix
+                });
+                if (formatter && (!this.options.interpolation.format || this.options.interpolation.format === defOpts.interpolation.format)) {
+                    s.formatter = createClassOnDemand(formatter);
+                    s.formatter.init(s, this.options);
+                    this.options.interpolation.format = s.formatter.format.bind(s.formatter);
+                }
+                s.interpolator = new Interpolator(this.options);
+                s.utils = {
+                    hasLoadedNamespace: this.hasLoadedNamespace.bind(this)
+                };
+                s.backendConnector = new Connector(createClassOnDemand(this.modules.backend), s.resourceStore, s, this.options);
+                s.backendConnector.on('*', function (event) {
+                    for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+                        args[_key - 1] = arguments[_key];
+                    }
+                    _this.emit(event, ...args);
+                });
+                if (this.modules.languageDetector) {
+                    s.languageDetector = createClassOnDemand(this.modules.languageDetector);
+                    if (s.languageDetector.init) s.languageDetector.init(s, this.options.detection, this.options);
+                }
+                if (this.modules.i18nFormat) {
+                    s.i18nFormat = createClassOnDemand(this.modules.i18nFormat);
+                    if (s.i18nFormat.init) s.i18nFormat.init(this);
+                }
+                this.translator = new Translator(this.services, this.options);
+                this.translator.on('*', function (event) {
+                    for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+                        args[_key2 - 1] = arguments[_key2];
+                    }
+                    _this.emit(event, ...args);
+                });
+                this.modules.external.forEach(m => {
+                    if (m.init) m.init(this);
+                });
+            }
+            this.format = this.options.interpolation.format;
+            if (!callback) callback = noop;
+            if (this.options.fallbackLng && !this.services.languageDetector && !this.options.lng) {
+                const codes = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
+                if (codes.length > 0 && codes[0] !== 'dev') this.options.lng = codes[0];
+            }
+            if (!this.services.languageDetector && !this.options.lng) {
+                this.logger.warn('init: no languageDetector is used and no lng is defined');
+            }
+            const storeApi = ['getResource', 'hasResourceBundle', 'getResourceBundle', 'getDataByLanguage'];
+            storeApi.forEach(fcName => {
+                this[fcName] = function () {
+                    return _this.store[fcName](...arguments);
+                };
+            });
+            const storeApiChained = ['addResource', 'addResources', 'addResourceBundle', 'removeResourceBundle'];
+            storeApiChained.forEach(fcName => {
+                this[fcName] = function () {
+                    _this.store[fcName](...arguments);
+                    return _this;
+                };
+            });
+            const deferred = defer();
+            const load = () => {
+                const finish = (err, t) => {
+                    if (this.isInitialized && !this.initializedStoreOnce) this.logger.warn('init: i18next is already initialized. You should call init just once!');
+                    this.isInitialized = true;
+                    if (!this.options.isClone) this.logger.log('initialized', this.options);
+                    this.emit('initialized', this.options);
+                    deferred.resolve(t);
+                    callback(err, t);
+                };
+                if (this.languages && this.options.compatibilityAPI !== 'v1' && !this.isInitialized) return finish(null, this.t.bind(this));
+                this.changeLanguage(this.options.lng, finish);
+            };
+            if (this.options.resources || !this.options.initImmediate) {
+                load();
+            } else {
+                setTimeout(load, 0);
+            }
+            return deferred;
+        }
+        loadResources(language) {
+            let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+            let usedCallback = callback;
+            const usedLng = typeof language === 'string' ? language : this.language;
+            if (typeof language === 'function') usedCallback = language;
+            if (!this.options.resources || this.options.partialBundledLanguages) {
+                if (usedLng && usedLng.toLowerCase() === 'cimode') return usedCallback();
+                const toLoad = [];
+                const append = lng => {
+                    if (!lng) return;
+                    const lngs = this.services.languageUtils.toResolveHierarchy(lng);
+                    lngs.forEach(l => {
+                        if (toLoad.indexOf(l) < 0) toLoad.push(l);
+                    });
+                };
+                if (!usedLng) {
+                    const fallbacks = this.services.languageUtils.getFallbackCodes(this.options.fallbackLng);
+                    fallbacks.forEach(l => append(l));
+                } else {
+                    append(usedLng);
+                }
+                if (this.options.preload) {
+                    this.options.preload.forEach(l => append(l));
+                }
+                this.services.backendConnector.load(toLoad, this.options.ns, e => {
+                    if (!e && !this.resolvedLanguage && this.language) this.setResolvedLanguage(this.language);
+                    usedCallback(e);
+                });
+            } else {
+                usedCallback(null);
+            }
+        }
+        reloadResources(lngs, ns, callback) {
+            const deferred = defer();
+            if (!lngs) lngs = this.languages;
+            if (!ns) ns = this.options.ns;
+            if (!callback) callback = noop;
+            this.services.backendConnector.reload(lngs, ns, err => {
+                deferred.resolve();
+                callback(err);
+            });
+            return deferred;
+        }
+        use(module) {
+            if (!module) throw new Error('You are passing an undefined module! Please check the object you are passing to i18next.use()');
+            if (!module.type) throw new Error('You are passing a wrong module! Please check the object you are passing to i18next.use()');
+            if (module.type === 'backend') {
+                this.modules.backend = module;
+            }
+            if (module.type === 'logger' || module.log && module.warn && module.error) {
+                this.modules.logger = module;
+            }
+            if (module.type === 'languageDetector') {
+                this.modules.languageDetector = module;
+            }
+            if (module.type === 'i18nFormat') {
+                this.modules.i18nFormat = module;
+            }
+            if (module.type === 'postProcessor') {
+                postProcessor.addPostProcessor(module);
+            }
+            if (module.type === 'formatter') {
+                this.modules.formatter = module;
+            }
+            if (module.type === '3rdParty') {
+                this.modules.external.push(module);
+            }
+            return this;
+        }
+        setResolvedLanguage(l) {
+            if (!l || !this.languages) return;
+            if (['cimode', 'dev'].indexOf(l) > -1) return;
+            for (let li = 0; li < this.languages.length; li++) {
+                const lngInLngs = this.languages[li];
+                if (['cimode', 'dev'].indexOf(lngInLngs) > -1) continue;
+                if (this.store.hasLanguageSomeTranslations(lngInLngs)) {
+                    this.resolvedLanguage = lngInLngs;
+                    break;
+                }
+            }
+        }
+        changeLanguage(lng, callback) {
+            var _this2 = this;
+            this.isLanguageChangingTo = lng;
+            const deferred = defer();
+            this.emit('languageChanging', lng);
+            const setLngProps = l => {
+                this.language = l;
+                this.languages = this.services.languageUtils.toResolveHierarchy(l);
+                this.resolvedLanguage = undefined;
+                this.setResolvedLanguage(l);
+            };
+            const done = (err, l) => {
+                if (l) {
+                    setLngProps(l);
+                    this.translator.changeLanguage(l);
+                    this.isLanguageChangingTo = undefined;
+                    this.emit('languageChanged', l);
+                    this.logger.log('languageChanged', l);
+                } else {
+                    this.isLanguageChangingTo = undefined;
+                }
+                deferred.resolve(function () {
+                    return _this2.t(...arguments);
+                });
+                if (callback) callback(err, function () {
+                    return _this2.t(...arguments);
+                });
+            };
+            const setLng = lngs => {
+                if (!lng && !lngs && this.services.languageDetector) lngs = [];
+                const l = typeof lngs === 'string' ? lngs : this.services.languageUtils.getBestMatchFromCodes(lngs);
+                if (l) {
+                    if (!this.language) {
+                        setLngProps(l);
+                    }
+                    if (!this.translator.language) this.translator.changeLanguage(l);
+                    if (this.services.languageDetector && this.services.languageDetector.cacheUserLanguage) this.services.languageDetector.cacheUserLanguage(l);
+                }
+                this.loadResources(l, err => {
+                    done(err, l);
+                });
+            };
+            if (!lng && this.services.languageDetector && !this.services.languageDetector.async) {
+                setLng(this.services.languageDetector.detect());
+            } else if (!lng && this.services.languageDetector && this.services.languageDetector.async) {
+                if (this.services.languageDetector.detect.length === 0) {
+                    this.services.languageDetector.detect().then(setLng);
+                } else {
+                    this.services.languageDetector.detect(setLng);
+                }
+            } else {
+                setLng(lng);
+            }
+            return deferred;
+        }
+        getFixedT(lng, ns, keyPrefix) {
+            var _this3 = this;
+            const fixedT = function (key, opts) {
+                let options;
+                if (typeof opts !== 'object') {
+                    for (var _len3 = arguments.length, rest = new Array(_len3 > 2 ? _len3 - 2 : 0), _key3 = 2; _key3 < _len3; _key3++) {
+                        rest[_key3 - 2] = arguments[_key3];
+                    }
+                    options = _this3.options.overloadTranslationOptionHandler([key, opts].concat(rest));
+                } else {
+                    options = {
+                        ...opts
+                    };
+                }
+                options.lng = options.lng || fixedT.lng;
+                options.lngs = options.lngs || fixedT.lngs;
+                options.ns = options.ns || fixedT.ns;
+                options.keyPrefix = options.keyPrefix || keyPrefix || fixedT.keyPrefix;
+                const keySeparator = _this3.options.keySeparator || '.';
+                let resultKey;
+                if (options.keyPrefix && Array.isArray(key)) {
+                    resultKey = key.map(k => `${options.keyPrefix}${keySeparator}${k}`);
+                } else {
+                    resultKey = options.keyPrefix ? `${options.keyPrefix}${keySeparator}${key}` : key;
+                }
+                return _this3.t(resultKey, options);
+            };
+            if (typeof lng === 'string') {
+                fixedT.lng = lng;
+            } else {
+                fixedT.lngs = lng;
+            }
+            fixedT.ns = ns;
+            fixedT.keyPrefix = keyPrefix;
+            return fixedT;
+        }
+        t() {
+            return this.translator && this.translator.translate(...arguments);
+        }
+        exists() {
+            return this.translator && this.translator.exists(...arguments);
+        }
+        setDefaultNamespace(ns) {
+            this.options.defaultNS = ns;
+        }
+        hasLoadedNamespace(ns) {
+            let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+            if (!this.isInitialized) {
+                this.logger.warn('hasLoadedNamespace: i18next was not initialized', this.languages);
+                return false;
+            }
+            if (!this.languages || !this.languages.length) {
+                this.logger.warn('hasLoadedNamespace: i18n.languages were undefined or empty', this.languages);
+                return false;
+            }
+            const lng = options.lng || this.resolvedLanguage || this.languages[0];
+            const fallbackLng = this.options ? this.options.fallbackLng : false;
+            const lastLng = this.languages[this.languages.length - 1];
+            if (lng.toLowerCase() === 'cimode') return true;
+            const loadNotPending = (l, n) => {
+                const loadState = this.services.backendConnector.state[`${l}|${n}`];
+                return loadState === -1 || loadState === 2;
+            };
+            if (options.precheck) {
+                const preResult = options.precheck(this, loadNotPending);
+                if (preResult !== undefined) return preResult;
+            }
+            if (this.hasResourceBundle(lng, ns)) return true;
+            if (!this.services.backendConnector.backend || this.options.resources && !this.options.partialBundledLanguages) return true;
+            if (loadNotPending(lng, ns) && (!fallbackLng || loadNotPending(lastLng, ns))) return true;
+            return false;
+        }
+        loadNamespaces(ns, callback) {
+            const deferred = defer();
+            if (!this.options.ns) {
+                if (callback) callback();
+                return Promise.resolve();
+            }
+            if (typeof ns === 'string') ns = [ns];
+            ns.forEach(n => {
+                if (this.options.ns.indexOf(n) < 0) this.options.ns.push(n);
+            });
+            this.loadResources(err => {
+                deferred.resolve();
+                if (callback) callback(err);
+            });
+            return deferred;
+        }
+        loadLanguages(lngs, callback) {
+            const deferred = defer();
+            if (typeof lngs === 'string') lngs = [lngs];
+            const preloaded = this.options.preload || [];
+            const newLngs = lngs.filter(lng => preloaded.indexOf(lng) < 0);
+            if (!newLngs.length) {
+                if (callback) callback();
+                return Promise.resolve();
+            }
+            this.options.preload = preloaded.concat(newLngs);
+            this.loadResources(err => {
+                deferred.resolve();
+                if (callback) callback(err);
+            });
+            return deferred;
+        }
+        dir(lng) {
+            if (!lng) lng = this.resolvedLanguage || (this.languages && this.languages.length > 0 ? this.languages[0] : this.language);
+            if (!lng) return 'rtl';
+            const rtlLngs = ['ar', 'shu', 'sqr', 'ssh', 'xaa', 'yhd', 'yud', 'aao', 'abh', 'abv', 'acm', 'acq', 'acw', 'acx', 'acy', 'adf', 'ads', 'aeb', 'aec', 'afb', 'ajp', 'apc', 'apd', 'arb', 'arq', 'ars', 'ary', 'arz', 'auz', 'avl', 'ayh', 'ayl', 'ayn', 'ayp', 'bbz', 'pga', 'he', 'iw', 'ps', 'pbt', 'pbu', 'pst', 'prp', 'prd', 'ug', 'ur', 'ydd', 'yds', 'yih', 'ji', 'yi', 'hbo', 'men', 'xmn', 'fa', 'jpr', 'peo', 'pes', 'prs', 'dv', 'sam', 'ckb'];
+            const languageUtils = this.services && this.services.languageUtils || new LanguageUtil(get());
+            return rtlLngs.indexOf(languageUtils.getLanguagePartFromCode(lng)) > -1 || lng.toLowerCase().indexOf('-arab') > 1 ? 'rtl' : 'ltr';
+        }
+        static createInstance() {
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            let callback = arguments.length > 1 ? arguments[1] : undefined;
+            return new I18n(options, callback);
+        }
+        cloneInstance() {
+            let options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+            let callback = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : noop;
+            const forkResourceStore = options.forkResourceStore;
+            if (forkResourceStore) delete options.forkResourceStore;
+            const mergedOptions = {
+                ...this.options,
+                ...options,
+                ...{
+                    isClone: true
+                }
+            };
+            const clone = new I18n(mergedOptions);
+            if (options.debug !== undefined || options.prefix !== undefined) {
+                clone.logger = clone.logger.clone(options);
+            }
+            const membersToCopy = ['store', 'services', 'language'];
+            membersToCopy.forEach(m => {
+                clone[m] = this[m];
+            });
+            clone.services = {
+                ...this.services
+            };
+            clone.services.utils = {
+                hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+            };
+            if (forkResourceStore) {
+                clone.store = new ResourceStore(this.store.data, mergedOptions);
+                clone.services.resourceStore = clone.store;
+            }
+            clone.translator = new Translator(clone.services, mergedOptions);
+            clone.translator.on('*', function (event) {
+                for (var _len4 = arguments.length, args = new Array(_len4 > 1 ? _len4 - 1 : 0), _key4 = 1; _key4 < _len4; _key4++) {
+                    args[_key4 - 1] = arguments[_key4];
+                }
+                clone.emit(event, ...args);
+            });
+            clone.init(mergedOptions, callback);
+            clone.translator.options = mergedOptions;
+            clone.translator.backendConnector.services.utils = {
+                hasLoadedNamespace: clone.hasLoadedNamespace.bind(clone)
+            };
+            return clone;
+        }
+        toJSON() {
+            return {
+                options: this.options,
+                store: this.store,
+                language: this.language,
+                languages: this.languages,
+                resolvedLanguage: this.resolvedLanguage
+            };
+        }
+    }
+    const instance = I18n.createInstance();
+    instance.createInstance = I18n.createInstance;
+
+    return instance;
+
+}));
\ No newline at end of file
diff --git a/web/lib/i18nextBrowserLanguageDetector.js b/web/lib/i18nextBrowserLanguageDetector.js
new file mode 100644
index 000000000..442fc0517
--- /dev/null
+++ b/web/lib/i18nextBrowserLanguageDetector.js
@@ -0,0 +1,422 @@
+(function (global, factory) {
+    typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof define === 'function' && define.amd ? define(factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.i18nextBrowserLanguageDetector = factory());
+  })(this, (function () { 'use strict';
+  
+    function _classCallCheck(instance, Constructor) {
+      if (!(instance instanceof Constructor)) {
+        throw new TypeError("Cannot call a class as a function");
+      }
+    }
+  
+    function _typeof(obj) {
+      "@babel/helpers - typeof";
+  
+      return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+        return typeof obj;
+      } : function (obj) {
+        return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+      }, _typeof(obj);
+    }
+  
+    function _toPrimitive(input, hint) {
+      if (_typeof(input) !== "object" || input === null) return input;
+      var prim = input[Symbol.toPrimitive];
+      if (prim !== undefined) {
+        var res = prim.call(input, hint || "default");
+        if (_typeof(res) !== "object") return res;
+        throw new TypeError("@@toPrimitive must return a primitive value.");
+      }
+      return (hint === "string" ? String : Number)(input);
+    }
+  
+    function _toPropertyKey(arg) {
+      var key = _toPrimitive(arg, "string");
+      return _typeof(key) === "symbol" ? key : String(key);
+    }
+  
+    function _defineProperties(target, props) {
+      for (var i = 0; i < props.length; i++) {
+        var descriptor = props[i];
+        descriptor.enumerable = descriptor.enumerable || false;
+        descriptor.configurable = true;
+        if ("value" in descriptor) descriptor.writable = true;
+        Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+      }
+    }
+    function _createClass(Constructor, protoProps, staticProps) {
+      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+      if (staticProps) _defineProperties(Constructor, staticProps);
+      Object.defineProperty(Constructor, "prototype", {
+        writable: false
+      });
+      return Constructor;
+    }
+  
+    var arr = [];
+    var each = arr.forEach;
+    var slice = arr.slice;
+    function defaults(obj) {
+      each.call(slice.call(arguments, 1), function (source) {
+        if (source) {
+          for (var prop in source) {
+            if (obj[prop] === undefined) obj[prop] = source[prop];
+          }
+        }
+      });
+      return obj;
+    }
+  
+    // eslint-disable-next-line no-control-regex
+    var fieldContentRegExp = /^[\u0009\u0020-\u007e\u0080-\u00ff]+$/;
+    var serializeCookie = function serializeCookie(name, val, options) {
+      var opt = options || {};
+      opt.path = opt.path || '/';
+      var value = encodeURIComponent(val);
+      var str = "".concat(name, "=").concat(value);
+      if (opt.maxAge > 0) {
+        var maxAge = opt.maxAge - 0;
+        if (Number.isNaN(maxAge)) throw new Error('maxAge should be a Number');
+        str += "; Max-Age=".concat(Math.floor(maxAge));
+      }
+      if (opt.domain) {
+        if (!fieldContentRegExp.test(opt.domain)) {
+          throw new TypeError('option domain is invalid');
+        }
+        str += "; Domain=".concat(opt.domain);
+      }
+      if (opt.path) {
+        if (!fieldContentRegExp.test(opt.path)) {
+          throw new TypeError('option path is invalid');
+        }
+        str += "; Path=".concat(opt.path);
+      }
+      if (opt.expires) {
+        if (typeof opt.expires.toUTCString !== 'function') {
+          throw new TypeError('option expires is invalid');
+        }
+        str += "; Expires=".concat(opt.expires.toUTCString());
+      }
+      if (opt.httpOnly) str += '; HttpOnly';
+      if (opt.secure) str += '; Secure';
+      if (opt.sameSite) {
+        var sameSite = typeof opt.sameSite === 'string' ? opt.sameSite.toLowerCase() : opt.sameSite;
+        switch (sameSite) {
+          case true:
+            str += '; SameSite=Strict';
+            break;
+          case 'lax':
+            str += '; SameSite=Lax';
+            break;
+          case 'strict':
+            str += '; SameSite=Strict';
+            break;
+          case 'none':
+            str += '; SameSite=None';
+            break;
+          default:
+            throw new TypeError('option sameSite is invalid');
+        }
+      }
+      return str;
+    };
+    var cookie = {
+      create: function create(name, value, minutes, domain) {
+        var cookieOptions = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {
+          path: '/',
+          sameSite: 'strict'
+        };
+        if (minutes) {
+          cookieOptions.expires = new Date();
+          cookieOptions.expires.setTime(cookieOptions.expires.getTime() + minutes * 60 * 1000);
+        }
+        if (domain) cookieOptions.domain = domain;
+        document.cookie = serializeCookie(name, encodeURIComponent(value), cookieOptions);
+      },
+      read: function read(name) {
+        var nameEQ = "".concat(name, "=");
+        var ca = document.cookie.split(';');
+        for (var i = 0; i < ca.length; i++) {
+          var c = ca[i];
+          while (c.charAt(0) === ' ') {
+            c = c.substring(1, c.length);
+          }
+          if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
+        }
+        return null;
+      },
+      remove: function remove(name) {
+        this.create(name, '', -1);
+      }
+    };
+    var cookie$1 = {
+      name: 'cookie',
+      lookup: function lookup(options) {
+        var found;
+        if (options.lookupCookie && typeof document !== 'undefined') {
+          var c = cookie.read(options.lookupCookie);
+          if (c) found = c;
+        }
+        return found;
+      },
+      cacheUserLanguage: function cacheUserLanguage(lng, options) {
+        if (options.lookupCookie && typeof document !== 'undefined') {
+          cookie.create(options.lookupCookie, lng, options.cookieMinutes, options.cookieDomain, options.cookieOptions);
+        }
+      }
+    };
+  
+    var querystring = {
+      name: 'querystring',
+      lookup: function lookup(options) {
+        var found;
+        if (typeof window !== 'undefined') {
+          var search = window.location.search;
+          if (!window.location.search && window.location.hash && window.location.hash.indexOf('?') > -1) {
+            search = window.location.hash.substring(window.location.hash.indexOf('?'));
+          }
+          var query = search.substring(1);
+          var params = query.split('&');
+          for (var i = 0; i < params.length; i++) {
+            var pos = params[i].indexOf('=');
+            if (pos > 0) {
+              var key = params[i].substring(0, pos);
+              if (key === options.lookupQuerystring) {
+                found = params[i].substring(pos + 1);
+              }
+            }
+          }
+        }
+        return found;
+      }
+    };
+  
+    var hasLocalStorageSupport = null;
+    var localStorageAvailable = function localStorageAvailable() {
+      if (hasLocalStorageSupport !== null) return hasLocalStorageSupport;
+      try {
+        hasLocalStorageSupport = window !== 'undefined' && window.localStorage !== null;
+        var testKey = 'i18next.translate.boo';
+        window.localStorage.setItem(testKey, 'foo');
+        window.localStorage.removeItem(testKey);
+      } catch (e) {
+        hasLocalStorageSupport = false;
+      }
+      return hasLocalStorageSupport;
+    };
+    var localStorage = {
+      name: 'localStorage',
+      lookup: function lookup(options) {
+        var found;
+        if (options.lookupLocalStorage && localStorageAvailable()) {
+          var lng = window.localStorage.getItem(options.lookupLocalStorage);
+          if (lng) found = lng;
+        }
+        return found;
+      },
+      cacheUserLanguage: function cacheUserLanguage(lng, options) {
+        if (options.lookupLocalStorage && localStorageAvailable()) {
+          window.localStorage.setItem(options.lookupLocalStorage, lng);
+        }
+      }
+    };
+  
+    var hasSessionStorageSupport = null;
+    var sessionStorageAvailable = function sessionStorageAvailable() {
+      if (hasSessionStorageSupport !== null) return hasSessionStorageSupport;
+      try {
+        hasSessionStorageSupport = window !== 'undefined' && window.sessionStorage !== null;
+        var testKey = 'i18next.translate.boo';
+        window.sessionStorage.setItem(testKey, 'foo');
+        window.sessionStorage.removeItem(testKey);
+      } catch (e) {
+        hasSessionStorageSupport = false;
+      }
+      return hasSessionStorageSupport;
+    };
+    var sessionStorage = {
+      name: 'sessionStorage',
+      lookup: function lookup(options) {
+        var found;
+        if (options.lookupSessionStorage && sessionStorageAvailable()) {
+          var lng = window.sessionStorage.getItem(options.lookupSessionStorage);
+          if (lng) found = lng;
+        }
+        return found;
+      },
+      cacheUserLanguage: function cacheUserLanguage(lng, options) {
+        if (options.lookupSessionStorage && sessionStorageAvailable()) {
+          window.sessionStorage.setItem(options.lookupSessionStorage, lng);
+        }
+      }
+    };
+  
+    var navigator$1 = {
+      name: 'navigator',
+      lookup: function lookup(options) {
+        var found = [];
+        if (typeof navigator !== 'undefined') {
+          if (navigator.languages) {
+            // chrome only; not an array, so can't use .push.apply instead of iterating
+            for (var i = 0; i < navigator.languages.length; i++) {
+              found.push(navigator.languages[i]);
+            }
+          }
+          if (navigator.userLanguage) {
+            found.push(navigator.userLanguage);
+          }
+          if (navigator.language) {
+            found.push(navigator.language);
+          }
+        }
+        return found.length > 0 ? found : undefined;
+      }
+    };
+  
+    var htmlTag = {
+      name: 'htmlTag',
+      lookup: function lookup(options) {
+        var found;
+        var htmlTag = options.htmlTag || (typeof document !== 'undefined' ? document.documentElement : null);
+        if (htmlTag && typeof htmlTag.getAttribute === 'function') {
+          found = htmlTag.getAttribute('lang');
+        }
+        return found;
+      }
+    };
+  
+    var path = {
+      name: 'path',
+      lookup: function lookup(options) {
+        var found;
+        if (typeof window !== 'undefined') {
+          var language = window.location.pathname.match(/\/([a-zA-Z-]*)/g);
+          if (language instanceof Array) {
+            if (typeof options.lookupFromPathIndex === 'number') {
+              if (typeof language[options.lookupFromPathIndex] !== 'string') {
+                return undefined;
+              }
+              found = language[options.lookupFromPathIndex].replace('/', '');
+            } else {
+              found = language[0].replace('/', '');
+            }
+          }
+        }
+        return found;
+      }
+    };
+  
+    var subdomain = {
+      name: 'subdomain',
+      lookup: function lookup(options) {
+        // If given get the subdomain index else 1
+        var lookupFromSubdomainIndex = typeof options.lookupFromSubdomainIndex === 'number' ? options.lookupFromSubdomainIndex + 1 : 1;
+        // get all matches if window.location. is existing
+        // first item of match is the match itself and the second is the first group macht which sould be the first subdomain match
+        // is the hostname no public domain get the or option of localhost
+        var language = typeof window !== 'undefined' && window.location && window.location.hostname && window.location.hostname.match(/^(\w{2,5})\.(([a-z0-9-]{1,63}\.[a-z]{2,6})|localhost)/i);
+  
+        // if there is no match (null) return undefined
+        if (!language) return undefined;
+        // return the given group match
+        return language[lookupFromSubdomainIndex];
+      }
+    };
+  
+    function getDefaults() {
+      return {
+        order: ['querystring', 'cookie', 'localStorage', 'sessionStorage', 'navigator', 'htmlTag'],
+        lookupQuerystring: 'lng',
+        lookupCookie: 'i18next',
+        lookupLocalStorage: 'i18nextLng',
+        lookupSessionStorage: 'i18nextLng',
+        // cache user language
+        caches: ['localStorage'],
+        excludeCacheFor: ['cimode'],
+        // cookieMinutes: 10,
+        // cookieDomain: 'myDomain'
+  
+        convertDetectedLanguage: function convertDetectedLanguage(l) {
+          return l;
+        }
+      };
+    }
+    var Browser = /*#__PURE__*/function () {
+      function Browser(services) {
+        var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+        _classCallCheck(this, Browser);
+        this.type = 'languageDetector';
+        this.detectors = {};
+        this.init(services, options);
+      }
+      _createClass(Browser, [{
+        key: "init",
+        value: function init(services) {
+          var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+          var i18nOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+          this.services = services || {
+            languageUtils: {}
+          }; // this way the language detector can be used without i18next
+          this.options = defaults(options, this.options || {}, getDefaults());
+          if (typeof this.options.convertDetectedLanguage === 'string' && this.options.convertDetectedLanguage.indexOf('15897') > -1) {
+            this.options.convertDetectedLanguage = function (l) {
+              return l.replace('-', '_');
+            };
+          }
+  
+          // backwards compatibility
+          if (this.options.lookupFromUrlIndex) this.options.lookupFromPathIndex = this.options.lookupFromUrlIndex;
+          this.i18nOptions = i18nOptions;
+          this.addDetector(cookie$1);
+          this.addDetector(querystring);
+          this.addDetector(localStorage);
+          this.addDetector(sessionStorage);
+          this.addDetector(navigator$1);
+          this.addDetector(htmlTag);
+          this.addDetector(path);
+          this.addDetector(subdomain);
+        }
+      }, {
+        key: "addDetector",
+        value: function addDetector(detector) {
+          this.detectors[detector.name] = detector;
+        }
+      }, {
+        key: "detect",
+        value: function detect(detectionOrder) {
+          var _this = this;
+          if (!detectionOrder) detectionOrder = this.options.order;
+          var detected = [];
+          detectionOrder.forEach(function (detectorName) {
+            if (_this.detectors[detectorName]) {
+              var lookup = _this.detectors[detectorName].lookup(_this.options);
+              if (lookup && typeof lookup === 'string') lookup = [lookup];
+              if (lookup) detected = detected.concat(lookup);
+            }
+          });
+          detected = detected.map(function (d) {
+            return _this.options.convertDetectedLanguage(d);
+          });
+          if (this.services.languageUtils.getBestMatchFromCodes) return detected; // new i18next v19.5.0
+          return detected.length > 0 ? detected[0] : null; // a little backward compatibility
+        }
+      }, {
+        key: "cacheUserLanguage",
+        value: function cacheUserLanguage(lng, caches) {
+          var _this2 = this;
+          if (!caches) caches = this.options.caches;
+          if (!caches) return;
+          if (this.options.excludeCacheFor && this.options.excludeCacheFor.indexOf(lng) > -1) return;
+          caches.forEach(function (cacheName) {
+            if (_this2.detectors[cacheName]) _this2.detectors[cacheName].cacheUserLanguage(lng, _this2.options);
+          });
+        }
+      }]);
+      return Browser;
+    }();
+    Browser.type = 'languageDetector';
+  
+    return Browser;
+  
+  }));
\ No newline at end of file
diff --git a/web/lib/litegraph.core.js b/web/lib/litegraph.core.js
index 2a33bd4a7..0af6fcde9 100644
--- a/web/lib/litegraph.core.js
+++ b/web/lib/litegraph.core.js
@@ -9835,7 +9835,11 @@ LGraphNode.prototype.executeAction = function(action)
                         ctx.textAlign = "center";
                         ctx.fillStyle = text_color;
                         ctx.fillText(
-                            w.label || w.name + "  " + Number(w.value).toFixed(3),
+                            w.label || w.name + "  " + Number(w.value).toFixed(
+                                                            w.options.precision != null
+                                                                ? w.options.precision
+                                                                : 3
+                                                        ),
                             widget_width * 0.5,
                             y + H * 0.7
                         );
@@ -12518,7 +12522,7 @@ LGraphNode.prototype.executeAction = function(action)
 			panel.content.innerHTML = ""; //clear
 			panel.addHTML("<span class='node_type'>"+node.type+"</span><span class='node_desc'>"+(node.constructor.desc || "")+"</span><span class='separator'></span>");
 
-			panel.addHTML("<h3>Properties</h3>");
+			panel.addHTML(`<h3>${i18next.t("ui.node_panel.header.properties")}</h3>`);
 
             var fUpdate = function(name,value){
                             graphcanvas.graph.beforeChange(node);
@@ -12550,16 +12554,16 @@ LGraphNode.prototype.executeAction = function(action)
                             graphcanvas.dirty_canvas = true;
                         };
             
-            panel.addWidget( "string", "Title", node.title, {}, fUpdate);
+            panel.addWidget( "string", i18next.t("ui.node_panel.header.title"), node.title, {}, fUpdate);
             
-            panel.addWidget( "combo", "Mode", LiteGraph.NODE_MODES[node.mode], {values: LiteGraph.NODE_MODES}, fUpdate);
+            panel.addWidget( "combo", i18next.t("ui.node_panel.header.mode"), LiteGraph.NODE_MODES[node.mode], {values: LiteGraph.NODE_MODES}, fUpdate);
             
             var nodeCol = "";
             if (node.color !== undefined){
                 nodeCol = Object.keys(LGraphCanvas.node_colors).filter(function(nK){ return LGraphCanvas.node_colors[nK].color == node.color; });
             }
             
-            panel.addWidget( "combo", "Color", nodeCol, {values: Object.keys(LGraphCanvas.node_colors)}, fUpdate);
+            panel.addWidget( "combo", i18next.t("ui.node_panel.header.color"), nodeCol, {values: Object.keys(LGraphCanvas.node_colors)}, fUpdate);
             
             for(var pName in node.properties)
 			{
@@ -13835,7 +13839,7 @@ LGraphNode.prototype.executeAction = function(action)
         if (!disabled) {
             element.addEventListener("click", inner_onclick);
         }
-        if (options.autoopen) {
+        if (!disabled && options.autoopen) {
 			LiteGraph.pointerListenerAdd(element,"enter",inner_over);
         }
 
diff --git a/web/scripts/api.js b/web/scripts/api.js
index d3d15e47e..b1d245d73 100644
--- a/web/scripts/api.js
+++ b/web/scripts/api.js
@@ -264,6 +264,15 @@ class ComfyApi extends EventTarget {
 		}
 	}
 
+	/**
+	 * Gets system & device stats
+	 * @returns System stats such as python version, OS, per device info
+	 */
+	async getSystemStats() {
+		const res = await this.fetchApi("/system_stats");
+		return await res.json();
+	}
+
 	/**
 	 * Sends a POST request to the API
 	 * @param {*} type The endpoint to post to
diff --git a/web/scripts/app.js b/web/scripts/app.js
index 8c9e7a27f..8d997f2a5 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -1,9 +1,23 @@
+import { ComfyLogging } from "./logging.js";
 import { ComfyWidgets } from "./widgets.js";
 import { ComfyUI, $el } from "./ui.js";
 import { api } from "./api.js";
 import { defaultGraph } from "./defaultGraph.js";
 import { getPngMetadata, importA1111, getLatentMetadata } from "./pnginfo.js";
 
+import en from "../i18n/en_US.js"
+import cn from "../i18n/zh_CN.js"
+
+i18next.use(i18nextBrowserLanguageDetector).init({
+	fallbackLng: 'en',
+	resources: {
+		"en-US": en,
+		"en": en,
+		"zh_CN": cn,
+		"cn": cn,
+	},
+})
+
 /**
  * @typedef {import("types/comfy").ComfyExtension} ComfyExtension
  */
@@ -31,6 +45,7 @@ export class ComfyApp {
 
 	constructor() {
 		this.ui = new ComfyUI(this);
+		this.logging = new ComfyLogging(this);
 
 		/**
 		 * List of extensions that are registered with the app
@@ -59,7 +74,7 @@ export class ComfyApp {
 
 	getPreviewFormatParam() {
 		let preview_format = this.ui.settings.getSettingValue("Comfy.PreviewFormat");
-		if(preview_format)
+		if (preview_format)
 			return `&preview=${preview_format}`;
 		else
 			return "";
@@ -70,7 +85,7 @@ export class ComfyApp {
 	}
 
 	static onClipspaceEditorSave() {
-		if(ComfyApp.clipspace_return_node) {
+		if (ComfyApp.clipspace_return_node) {
 			ComfyApp.pasteFromClipspace(ComfyApp.clipspace_return_node);
 		}
 	}
@@ -81,13 +96,13 @@ export class ComfyApp {
 
 	static copyToClipspace(node) {
 		var widgets = null;
-		if(node.widgets) {
+		if (node.widgets) {
 			widgets = node.widgets.map(({ type, name, value }) => ({ type, name, value }));
 		}
 
 		var imgs = undefined;
 		var orig_imgs = undefined;
-		if(node.imgs != undefined) {
+		if (node.imgs != undefined) {
 			imgs = [];
 			orig_imgs = [];
 
@@ -99,7 +114,7 @@ export class ComfyApp {
 		}
 
 		var selectedIndex = 0;
-		if(node.imageIndex) {
+		if (node.imageIndex) {
 			selectedIndex = node.imageIndex;
 		}
 
@@ -114,30 +129,30 @@ export class ComfyApp {
 
 		ComfyApp.clipspace_return_node = null;
 
-		if(ComfyApp.clipspace_invalidate_handler) {
+		if (ComfyApp.clipspace_invalidate_handler) {
 			ComfyApp.clipspace_invalidate_handler();
 		}
 	}
 
 	static pasteFromClipspace(node) {
-		if(ComfyApp.clipspace) {
+		if (ComfyApp.clipspace) {
 			// image paste
-			if(ComfyApp.clipspace.imgs && node.imgs) {
-				if(node.images && ComfyApp.clipspace.images) {
-					if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+			if (ComfyApp.clipspace.imgs && node.imgs) {
+				if (node.images && ComfyApp.clipspace.images) {
+					if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {
 						node.images = [ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']]];
 					}
 					else {
 						node.images = ComfyApp.clipspace.images;
 					}
 
-					if(app.nodeOutputs[node.id + ""])
+					if (app.nodeOutputs[node.id + ""])
 						app.nodeOutputs[node.id + ""].images = node.images;
 				}
 
-				if(ComfyApp.clipspace.imgs) {
+				if (ComfyApp.clipspace.imgs) {
 					// deep-copy to cut link with clipspace
-					if(ComfyApp.clipspace['img_paste_mode'] == 'selected') {
+					if (ComfyApp.clipspace['img_paste_mode'] == 'selected') {
 						const img = new Image();
 						img.src = ComfyApp.clipspace.imgs[ComfyApp.clipspace['selectedIndex']].src;
 						node.imgs = [img];
@@ -145,7 +160,7 @@ export class ComfyApp {
 					}
 					else {
 						const imgs = [];
-						for(let i=0; i<ComfyApp.clipspace.imgs.length; i++) {
+						for (let i = 0; i < ComfyApp.clipspace.imgs.length; i++) {
 							imgs[i] = new Image();
 							imgs[i].src = ComfyApp.clipspace.imgs[i].src;
 							node.imgs = imgs;
@@ -154,25 +169,25 @@ export class ComfyApp {
 				}
 			}
 
-			if(node.widgets) {
-				if(ComfyApp.clipspace.images) {
+			if (node.widgets) {
+				if (ComfyApp.clipspace.images) {
 					const clip_image = ComfyApp.clipspace.images[ComfyApp.clipspace['selectedIndex']];
 					const index = node.widgets.findIndex(obj => obj.name === 'image');
-					if(index >= 0) {
-						if(node.widgets[index].type != 'image' && typeof node.widgets[index].value == "string" && clip_image.filename) {
-							node.widgets[index].value = (clip_image.subfolder?clip_image.subfolder+'/':'') + clip_image.filename + (clip_image.type?` [${clip_image.type}]`:'');
+					if (index >= 0) {
+						if (node.widgets[index].type != 'image' && typeof node.widgets[index].value == "string" && clip_image.filename) {
+							node.widgets[index].value = (clip_image.subfolder ? clip_image.subfolder + '/' : '') + clip_image.filename + (clip_image.type ? ` [${clip_image.type}]` : '');
 						}
 						else {
 							node.widgets[index].value = clip_image;
 						}
 					}
 				}
-				if(ComfyApp.clipspace.widgets) {
+				if (ComfyApp.clipspace.widgets) {
 					ComfyApp.clipspace.widgets.forEach(({ type, name, value }) => {
 						const prop = Object.values(node.widgets).find(obj => obj.type === type && obj.name === name);
 						if (prop && prop.type != 'button') {
-							if(prop.type != 'image' && typeof prop.value == "string" && value.filename) {
-								prop.value = (value.subfolder?value.subfolder+'/':'') + value.filename + (value.type?` [${value.type}]`:'');
+							if (prop.type != 'image' && typeof prop.value == "string" && value.filename) {
+								prop.value = (value.subfolder ? value.subfolder + '/' : '') + value.filename + (value.type ? ` [${value.type}]` : '');
 							}
 							else {
 								prop.value = value;
@@ -283,28 +298,28 @@ export class ComfyApp {
 			}
 
 			// prevent conflict of clipspace content
-			if(!ComfyApp.clipspace_return_node) {
+			if (!ComfyApp.clipspace_return_node) {
 				options.push({
-						content: "Copy (Clipspace)",
-						callback: (obj) => { ComfyApp.copyToClipspace(this); }
-					});
+					content: "Copy (Clipspace)",
+					callback: (obj) => { ComfyApp.copyToClipspace(this); }
+				});
 
-				if(ComfyApp.clipspace != null) {
+				if (ComfyApp.clipspace != null) {
 					options.push({
-							content: "Paste (Clipspace)",
-							callback: () => { ComfyApp.pasteFromClipspace(this); }
-						});
+						content: "Paste (Clipspace)",
+						callback: () => { ComfyApp.pasteFromClipspace(this); }
+					});
 				}
 
-				if(ComfyApp.isImageNode(this)) {
+				if (ComfyApp.isImageNode(this)) {
 					options.push({
-							content: "Open in MaskEditor",
-							callback: (obj) => {
-								ComfyApp.copyToClipspace(this);
-								ComfyApp.clipspace_return_node = this;
-								ComfyApp.open_maskeditor();
-							}
-						});
+						content: "Open in MaskEditor",
+						callback: (obj) => {
+							ComfyApp.copyToClipspace(this);
+							ComfyApp.clipspace_return_node = this;
+							ComfyApp.open_maskeditor();
+						}
+					});
 				}
 			}
 		};
@@ -314,7 +329,7 @@ export class ComfyApp {
 		const app = this;
 		const origNodeOnKeyDown = node.prototype.onKeyDown;
 
-		node.prototype.onKeyDown = function(e) {
+		node.prototype.onKeyDown = function (e) {
 			if (origNodeOnKeyDown && origNodeOnKeyDown.apply(this, e) === false) {
 				return false;
 			}
@@ -369,7 +384,7 @@ export class ComfyApp {
 					if (w.computeSize) {
 						shiftY += w.computeSize()[1] + 4;
 					}
-					else if(w.computedHeight) {
+					else if (w.computedHeight) {
 						shiftY += w.computedHeight;
 					}
 					else {
@@ -614,7 +629,7 @@ export class ComfyApp {
 			}
 			// Dragging from Chrome->Firefox there is a file but its a bmp, so ignore that
 			if (event.dataTransfer.files.length && event.dataTransfer.files[0].type !== "image/bmp") {
-			await this.handleFile(event.dataTransfer.files[0]);
+				await this.handleFile(event.dataTransfer.files[0]);
 			} else {
 				// Try loading the first URI in the transfer list
 				const validTypes = ["text/uri-list", "text/x-moz-url"];
@@ -674,7 +689,7 @@ export class ComfyApp {
 					data = data.slice(data.indexOf("workflow\n"));
 					data = data.slice(data.indexOf("{"));
 					workflow = JSON.parse(data);
-				} catch (error) {}
+				} catch (error) { }
 			}
 
 			if (workflow && workflow.version && workflow.nodes && workflow.extra) {
@@ -692,7 +707,7 @@ export class ComfyApp {
 		const self = this;
 
 		const origProcessMouseDown = LGraphCanvas.prototype.processMouseDown;
-		LGraphCanvas.prototype.processMouseDown = function(e) {
+		LGraphCanvas.prototype.processMouseDown = function (e) {
 			const res = origProcessMouseDown.apply(this, arguments);
 
 			this.selected_group_moving = false;
@@ -712,7 +727,7 @@ export class ComfyApp {
 		}
 
 		const origProcessMouseMove = LGraphCanvas.prototype.processMouseMove;
-		LGraphCanvas.prototype.processMouseMove = function(e) {
+		LGraphCanvas.prototype.processMouseMove = function (e) {
 			const orig_selected_group = this.selected_group;
 
 			if (this.selected_group && !this.selected_group_resizing && !this.selected_group_moving) {
@@ -737,7 +752,7 @@ export class ComfyApp {
 	#addProcessKeyHandler() {
 		const self = this;
 		const origProcessKey = LGraphCanvas.prototype.processKey;
-		LGraphCanvas.prototype.processKey = function(e) {
+		LGraphCanvas.prototype.processKey = function (e) {
 			const res = origProcessKey.apply(this, arguments);
 
 			if (res === false) {
@@ -802,7 +817,7 @@ export class ComfyApp {
 		const self = this;
 
 		const origDrawGroups = LGraphCanvas.prototype.drawGroups;
-		LGraphCanvas.prototype.drawGroups = function(canvas, ctx) {
+		LGraphCanvas.prototype.drawGroups = function (canvas, ctx) {
 			if (!this.graph) {
 				return;
 			}
@@ -889,7 +904,7 @@ export class ComfyApp {
 						12 + size[0] + 1,
 						12 + size[1] + LiteGraph.NODE_TITLE_HEIGHT,
 						[this.round_radius * 2, this.round_radius * 2, 2, 2]
-				);
+					);
 				else if (shape == LiteGraph.CIRCLE_SHAPE)
 					ctx.arc(size[0] * 0.5, size[1] * 0.5, size[0] * 0.5 + 6, 0, Math.PI * 2);
 				ctx.strokeStyle = color;
@@ -1023,6 +1038,7 @@ export class ComfyApp {
 	 */
 	async #loadExtensions() {
 		const extensions = await api.getExtensions();
+		this.logging.addEntry("Comfy.App", "debug", { Extensions: extensions });
 		for (const ext of extensions) {
 			try {
 				await import(api.apiURL(ext));
@@ -1114,9 +1130,10 @@ export class ComfyApp {
 		const defs = await api.getNodeDefs();
 		await this.registerNodesFromDefs(defs);
 		await this.#invokeExtensionsAsync("registerCustomNodes");
+		await this.#invokeExtensionsAsync("afterNodesRegistrations")
 	}
 
-    async registerNodesFromDefs(defs) {
+	async registerNodesFromDefs(defs) {
 		await this.#invokeExtensionsAsync("addCustomNodeDefs", defs);
 
 		// Generate list of known widgets
@@ -1132,15 +1149,15 @@ export class ComfyApp {
 			const node = Object.assign(
 				function ComfyNode() {
 					var inputs = nodeData["input"]["required"];
-					if (nodeData["input"]["optional"] != undefined){
-					    inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
+					if (nodeData["input"]["optional"] != undefined) {
+						inputs = Object.assign({}, nodeData["input"]["required"], nodeData["input"]["optional"])
 					}
 					const config = { minWidth: 1, minHeight: 1 };
 					for (const inputName in inputs) {
 						const inputData = inputs[inputName];
 						const type = inputData[0];
 
-						if(inputData[1]?.forceInput) {
+						if (inputData[1]?.forceInput) {
 							this.addInput(inputName, type);
 						} else {
 							if (Array.isArray(type)) {
@@ -1162,7 +1179,7 @@ export class ComfyApp {
 					for (const o in nodeData["output"]) {
 						const output = nodeData["output"][o];
 						const outputName = nodeData["output_name"][o] || output;
-						const outputShape = nodeData["output_is_list"][o] ? LiteGraph.GRID_SHAPE : LiteGraph.CIRCLE_SHAPE ;
+						const outputShape = nodeData["output_is_list"][o] ? LiteGraph.GRID_SHAPE : LiteGraph.CIRCLE_SHAPE;
 						this.addOutput(outputName, output, { shape: outputShape });
 					}
 
@@ -1306,6 +1323,9 @@ export class ComfyApp {
 					(t) => `<li>${t}</li>`
 				).join("")}</ul>Nodes that have failed to load will show as red on the graph.`
 			);
+			this.logging.addEntry("Comfy.App", "warn", {
+				MissingNodes: missingNodeTypes,
+			});
 		}
 	}
 
@@ -1356,7 +1376,7 @@ export class ComfyApp {
 						if (parent.isVirtualNode) {
 							link = parent.getInputLink(link.origin_slot);
 							if (link) {
-								parent = parent.getInputNode(link.origin_slot);
+								parent = parent.getInputNode(link.target_slot);
 								if (parent) {
 									found = true;
 								}
@@ -1424,9 +1444,9 @@ export class ComfyApp {
 		else if (error.response) {
 			let message = error.response.error.message;
 			if (error.response.error.details)
-			message += ": " + error.response.error.details;
+				message += ": " + error.response.error.details;
 			for (const [nodeID, nodeError] of Object.entries(error.response.node_errors)) {
-			message += "\n" + nodeError.class_type + ":"
+				message += "\n" + nodeError.class_type + ":"
 				for (const errorReason of nodeError.errors) {
 					message += "\n    - " + errorReason.message + ": " + errorReason.details
 				}
@@ -1552,22 +1572,22 @@ export class ComfyApp {
 	async refreshComboInNodes() {
 		const defs = await api.getNodeDefs();
 
-		for(let nodeNum in this.graph._nodes) {
+		for (let nodeNum in this.graph._nodes) {
 			const node = this.graph._nodes[nodeNum];
 
 			const def = defs[node.type];
 
 			// HOTFIX: The current patch is designed to prevent the rest of the code from breaking due to primitive nodes,
 			//         and additional work is needed to consider the primitive logic in the refresh logic.
-			if(!def)
+			if (!def)
 				continue;
 
-			for(const widgetNum in node.widgets) {
+			for (const widgetNum in node.widgets) {
 				const widget = node.widgets[widgetNum]
-				if(widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
+				if (widget.type == "combo" && def["input"]["required"][widget.name] !== undefined) {
 					widget.options.values = def["input"]["required"][widget.name][0];
 
-					if(widget.name != 'image' && !widget.options.values.includes(widget.value)) {
+					if (widget.name != 'image' && !widget.options.values.includes(widget.value)) {
 						widget.value = widget.options.values[0];
 						widget.callback(widget.value);
 					}
diff --git a/web/scripts/logging.js b/web/scripts/logging.js
new file mode 100644
index 000000000..c73462e1e
--- /dev/null
+++ b/web/scripts/logging.js
@@ -0,0 +1,367 @@
+import { $el, ComfyDialog } from "./ui.js";
+import { api } from "./api.js";
+
+$el("style", {
+	textContent: `
+        .comfy-logging-logs {
+            display: grid;
+            color: var(--fg-color);
+            white-space: pre-wrap;
+        }
+        .comfy-logging-log {
+            display: contents;
+        }
+        .comfy-logging-title {
+            background: var(--tr-even-bg-color);
+            font-weight: bold;
+            margin-bottom: 5px;
+            text-align: center;
+        }
+        .comfy-logging-log div {
+            background: var(--row-bg);
+            padding: 5px;
+        }
+    `,
+	parent: document.body,
+});
+
+// Stringify function supporting max depth and removal of circular references
+// https://stackoverflow.com/a/57193345
+function stringify(val, depth, replacer, space, onGetObjID) {
+	depth = isNaN(+depth) ? 1 : depth;
+	var recursMap = new WeakMap();
+	function _build(val, depth, o, a, r) {
+		// (JSON.stringify() has it's own rules, which we respect here by using it for property iteration)
+		return !val || typeof val != "object"
+			? val
+			: ((r = recursMap.has(val)),
+			  recursMap.set(val, true),
+			  (a = Array.isArray(val)),
+			  r
+					? (o = (onGetObjID && onGetObjID(val)) || null)
+					: JSON.stringify(val, function (k, v) {
+							if (a || depth > 0) {
+								if (replacer) v = replacer(k, v);
+								if (!k) return (a = Array.isArray(v)), (val = v);
+								!o && (o = a ? [] : {});
+								o[k] = _build(v, a ? depth : depth - 1);
+							}
+					  }),
+			  o === void 0 ? (a ? [] : {}) : o);
+	}
+	return JSON.stringify(_build(val, depth), null, space);
+}
+
+const jsonReplacer = (k, v, ui) => {
+	if (v instanceof Array && v.length === 1) {
+		v = v[0];
+	}
+	if (v instanceof Date) {
+		v = v.toISOString();
+		if (ui) {
+			v = v.split("T")[1];
+		}
+	}
+	if (v instanceof Error) {
+		let err = "";
+		if (v.name) err += v.name + "\n";
+		if (v.message) err += v.message + "\n";
+		if (v.stack) err += v.stack + "\n";
+		if (!err) {
+			err = v.toString();
+		}
+		v = err;
+	}
+	return v;
+};
+
+const fileInput = $el("input", {
+	type: "file",
+	accept: ".json",
+	style: { display: "none" },
+	parent: document.body,
+});
+
+class ComfyLoggingDialog extends ComfyDialog {
+	constructor(logging) {
+		super();
+		this.logging = logging;
+	}
+
+	clear() {
+		this.logging.clear();
+		this.show();
+	}
+
+	export() {
+		const blob = new Blob([stringify([...this.logging.entries], 20, jsonReplacer, "\t")], {
+			type: "application/json",
+		});
+		const url = URL.createObjectURL(blob);
+		const a = $el("a", {
+			href: url,
+			download: `comfyui-logs-${Date.now()}.json`,
+			style: { display: "none" },
+			parent: document.body,
+		});
+		a.click();
+		setTimeout(function () {
+			a.remove();
+			window.URL.revokeObjectURL(url);
+		}, 0);
+	}
+
+	import() {
+		fileInput.onchange = () => {
+			const reader = new FileReader();
+			reader.onload = () => {
+				fileInput.remove();
+				try {
+					const obj = JSON.parse(reader.result);
+					if (obj instanceof Array) {
+						this.show(obj);
+					} else {
+						throw new Error("Invalid file selected.");
+					}
+				} catch (error) {
+					alert("Unable to load logs: " + error.message);
+				}
+			};
+			reader.readAsText(fileInput.files[0]);
+		};
+		fileInput.click();
+	}
+
+	createButtons() {
+		return [
+			$el("button", {
+				type: "button",
+				textContent: "Clear",
+				onclick: () => this.clear(),
+			}),
+			$el("button", {
+				type: "button",
+				textContent: "Export logs...",
+				onclick: () => this.export(),
+			}),
+			$el("button", {
+				type: "button",
+				textContent: "View exported logs...",
+				onclick: () => this.import(),
+			}),
+			...super.createButtons(),
+		];
+	}
+
+	getTypeColor(type) {
+		switch (type) {
+			case "error":
+				return "red";
+			case "warn":
+				return "orange";
+			case "debug":
+				return "dodgerblue";
+		}
+	}
+
+	show(entries) {
+		if (!entries) entries = this.logging.entries;
+		this.element.style.width = "100%";
+		const cols = {
+			source: "Source",
+			type: "Type",
+			timestamp: "Timestamp",
+			message: "Message",
+		};
+		const keys = Object.keys(cols);
+		const headers = Object.values(cols).map((title) =>
+			$el("div.comfy-logging-title", {
+				textContent: title,
+			})
+		);
+		const rows = entries.map((entry, i) => {
+			return $el(
+				"div.comfy-logging-log",
+				{
+					$: (el) => el.style.setProperty("--row-bg", `var(--tr-${i % 2 ? "even" : "odd"}-bg-color)`),
+				},
+				keys.map((key) => {
+					let v = entry[key];
+					let color;
+					if (key === "type") {
+						color = this.getTypeColor(v);
+					} else {
+						v = jsonReplacer(key, v, true);
+
+						if (typeof v === "object") {
+							v = stringify(v, 5, jsonReplacer, "  ");
+						}
+					}
+
+					return $el("div", {
+						style: {
+							color,
+						},
+						textContent: v,
+					});
+				})
+			);
+		});
+
+		const grid = $el(
+			"div.comfy-logging-logs",
+			{
+				style: {
+					gridTemplateColumns: `repeat(${headers.length}, 1fr)`,
+				},
+			},
+			[...headers, ...rows]
+		);
+		const els = [grid];
+		if (!this.logging.enabled) {
+			els.unshift(
+				$el("h3", {
+					style: { textAlign: "center" },
+					textContent: "Logging is disabled",
+				})
+			);
+		}
+		super.show($el("div", els));
+	}
+}
+
+export class ComfyLogging {
+	/**
+	 * @type Array<{ source: string, type: string, timestamp: Date, message: any }>
+	 */
+	entries = [];
+
+	#enabled;
+	#console = {};
+
+	get enabled() {
+		return this.#enabled;
+	}
+
+	set enabled(value) {
+		if (value === this.#enabled) return;
+		if (value) {
+			this.patchConsole();
+		} else {
+			this.unpatchConsole();
+		}
+		this.#enabled = value;
+	}
+
+	constructor(app) {
+		this.app = app;
+
+		this.dialog = new ComfyLoggingDialog(this);
+		this.addSetting();
+		this.catchUnhandled();
+		this.addInitData();
+	}
+
+	addSetting() {
+		const settingId = "Comfy.Logging.Enabled";
+		const htmlSettingId = settingId.replaceAll(".", "-");
+		const setting = this.app.ui.settings.addSetting({
+			id: settingId,
+			name: settingId,
+			defaultValue: true,
+			type: (name, setter, value) => {
+				return $el("tr", [
+					$el("td", [
+						$el("label", {
+							textContent: "Logging",
+							for: htmlSettingId,
+						}),
+					]),
+					$el("td", [
+						$el("input", {
+							id: htmlSettingId,
+							type: "checkbox",
+							checked: value,
+							onchange: (event) => {
+								setter((this.enabled = event.target.checked));
+							},
+						}),
+						$el("button", {
+							textContent: "View Logs",
+							onclick: () => {
+								this.app.ui.settings.element.close();
+								this.dialog.show();
+							},
+							style: {
+								fontSize: "14px",
+								display: "block",
+								marginTop: "5px",
+							},
+						}),
+					]),
+				]);
+			},
+		});
+		this.enabled = setting.value;
+	}
+
+	patchConsole() {
+		// Capture common console outputs
+		const self = this;
+		for (const type of ["log", "warn", "error", "debug"]) {
+			const orig = console[type];
+			this.#console[type] = orig;
+			console[type] = function () {
+				orig.apply(console, arguments);
+				self.addEntry("console", type, ...arguments);
+			};
+		}
+	}
+
+	unpatchConsole() {
+		// Restore original console functions
+		for (const type of Object.keys(this.#console)) {
+			console[type] = this.#console[type];
+		}
+		this.#console = {};
+	}
+
+	catchUnhandled() {
+		// Capture uncaught errors
+		window.addEventListener("error", (e) => {
+			this.addEntry("window", "error", e.error ?? "Unknown error");
+			return false;
+		});
+
+		window.addEventListener("unhandledrejection", (e) => {
+			this.addEntry("unhandledrejection", "error", e.reason ?? "Unknown error");
+		});
+	}
+
+	clear() {
+		this.entries = [];
+	}
+
+	addEntry(source, type, ...args) {
+		if (this.enabled) {
+			this.entries.push({
+				source,
+				type,
+				timestamp: new Date(),
+				message: args,
+			});
+		}
+	}
+
+	log(source, ...args) {
+		this.addEntry(source, "log", ...args);
+	}
+
+	async addInitData() {
+		if (!this.enabled) return;
+		const source = "ComfyUI.Logging";
+		this.addEntry(source, "debug", { UserAgent: navigator.userAgent });
+		const systemStats = await api.getSystemStats();
+		this.addEntry(source, "debug", systemStats);
+	}
+}
diff --git a/web/scripts/ui.js b/web/scripts/ui.js
index 5d4e92542..8a9572c13 100644
--- a/web/scripts/ui.js
+++ b/web/scripts/ui.js
@@ -1,4 +1,4 @@
-import {api} from "./api.js";
+import { api } from "./api.js";
 
 export function $el(tag, propsOrChildren, children) {
 	const split = tag.split(".");
@@ -11,7 +11,7 @@ export function $el(tag, propsOrChildren, children) {
 		if (Array.isArray(propsOrChildren)) {
 			element.append(...propsOrChildren);
 		} else {
-			const {parent, $: cb, dataset, style} = propsOrChildren;
+			const { parent, $: cb, dataset, style } = propsOrChildren;
 			delete propsOrChildren.parent;
 			delete propsOrChildren.$;
 			delete propsOrChildren.dataset;
@@ -178,7 +178,7 @@ export class ComfyDialog {
 		return [
 			$el("button", {
 				type: "button",
-				textContent: "Close",
+				textContent: i18next.t("ui.close_btn"),
 				onclick: () => this.close(),
 			}),
 		];
@@ -206,11 +206,11 @@ class ComfySettingsDialog extends ComfyDialog {
 			parent: document.body,
 		}, [
 			$el("table.comfy-modal-content.comfy-table", [
-				$el("caption", {textContent: "Settings"}),
-				$el("tbody", {$: (tbody) => (this.textElement = tbody)}),
+				$el("caption", { textContent: i18next.t("ui.settings.title") }),
+				$el("tbody", { $: (tbody) => (this.textElement = tbody) }),
 				$el("button", {
 					type: "button",
-					textContent: "Close",
+					textContent: i18next.t("ui.close_btn"),
 					style: {
 						cursor: "pointer",
 					},
@@ -234,7 +234,7 @@ class ComfySettingsDialog extends ComfyDialog {
 		localStorage[settingId] = JSON.stringify(value);
 	}
 
-	addSetting({id, name, type, defaultValue, onChange, attrs = {}, tooltip = "",}) {
+	addSetting({ id, name, type, defaultValue, onChange, attrs = {}, tooltip = "", options = undefined }) {
 		if (!id) {
 			throw new Error("Settings must have an ID");
 		}
@@ -270,7 +270,7 @@ class ComfySettingsDialog extends ComfyDialog {
 					$el("label", {
 						for: htmlID,
 						classList: [tooltip !== "" ? "comfy-tooltip-indicator" : ""],
-						textContent: name,
+						textContent: i18next.t(`settings.${id}`),
 					})
 				]);
 
@@ -337,7 +337,7 @@ class ComfySettingsDialog extends ComfyDialog {
 											value,
 											id: htmlID,
 											type: "number",
-											style: {maxWidth: "4rem"},
+											style: { maxWidth: "4rem" },
 											oninput: (e) => {
 												setter(e.target.value);
 												e.target.previousElementSibling.value = e.target.value;
@@ -347,6 +347,32 @@ class ComfySettingsDialog extends ComfyDialog {
 								]),
 							]);
 							break;
+						case "combo":
+							element = $el("tr", [
+								labelCell,
+								$el("td", [
+									$el(
+										"select",
+										{
+											oninput: (e) => {
+												setter(e.target.value);
+											},
+										},
+										(typeof options === "function" ? options(value) : options || []).map((opt) => {
+											if (typeof opt === "string") {
+												opt = { text: opt };
+											}
+											const v = opt.value ?? opt.text;
+											return $el("option", {
+												value: v,
+												textContent: opt.text,
+												selected: value + "" === v + "",
+											});
+										})
+									),
+								]),
+							]);
+							break;
 						case "text":
 						default:
 							if (type !== "text") {
@@ -391,10 +417,10 @@ class ComfySettingsDialog extends ComfyDialog {
 	show() {
 		this.textElement.replaceChildren(
 			$el("tr", {
-				style: {display: "none"},
+				style: { display: "none" },
 			}, [
 				$el("th"),
-				$el("th", {style: {width: "33%"}})
+				$el("th", { style: { width: "33%" } })
 			]),
 			...this.settings.map((s) => s.render()),
 		)
@@ -431,7 +457,7 @@ class ComfyList {
 							name: "Delete",
 							cb: () => api.deleteItem(this.#type, item.prompt[1]),
 						};
-						return $el("div", {textContent: item.prompt[0] + ": "}, [
+						return $el("div", { textContent: item.prompt[0] + ": " }, [
 							$el("button", {
 								textContent: "Load",
 								onclick: () => {
@@ -460,7 +486,7 @@ class ComfyList {
 						await this.load();
 					},
 				}),
-				$el("button", {textContent: "Refresh", onclick: () => this.load()}),
+				$el("button", { textContent: "Refresh", onclick: () => this.load() }),
 			])
 		);
 	}
@@ -480,7 +506,7 @@ class ComfyList {
 
 	hide() {
 		this.element.style.display = "none";
-		this.button.textContent = "See " + this.#text;
+		this.button.textContent = "View " + this.#text;
 	}
 
 	toggle() {
@@ -553,14 +579,14 @@ export class ComfyUI {
 			id: "comfy-file-input",
 			type: "file",
 			accept: ".json,image/png,.latent,.safetensors",
-			style: {display: "none"},
+			style: { display: "none" },
 			parent: document.body,
 			onchange: () => {
 				app.handleFile(fileInput.files[0]);
 			},
 		});
 
-		this.menuContainer = $el("div.comfy-menu", {parent: document.body}, [
+		this.menuContainer = $el("div.comfy-menu", { parent: document.body }, [
 			$el("div.drag-handle", {
 				style: {
 					overflow: "hidden",
@@ -570,16 +596,16 @@ export class ComfyUI {
 				}
 			}, [
 				$el("span.drag-handle"),
-				$el("span", {$: (q) => (this.queueSize = q)}),
-				$el("button.comfy-settings-btn", {textContent: "⚙️", onclick: () => this.settings.show()}),
+				$el("span", { $: (q) => (this.queueSize = q) }),
+				$el("button.comfy-settings-btn", { textContent: "⚙️", onclick: () => this.settings.show() }),
 			]),
 			$el("button.comfy-queue-btn", {
 				id: "queue-button",
-				textContent: "Queue Prompt",
+				textContent: i18next.t("ui.queue_btn"),
 				onclick: () => app.queuePrompt(0, this.batchCount),
 			}),
 			$el("div", {}, [
-				$el("label", {innerHTML: "Extra options"}, [
+				$el("label", { innerHTML: i18next.t("ui.extra_options") }, [
 					$el("input", {
 						type: "checkbox",
 						onchange: (i) => {
@@ -590,14 +616,14 @@ export class ComfyUI {
 					}),
 				]),
 			]),
-			$el("div", {id: "extraOptions", style: {width: "100%", display: "none"}}, [
-				$el("label", {innerHTML: "Batch count"}, [
+			$el("div", { id: "extraOptions", style: { width: "100%", display: "none" } }, [
+				$el("label", { innerHTML: "Batch count" }, [
 					$el("input", {
 						id: "batchCountInputNumber",
 						type: "number",
 						value: this.batchCount,
 						min: "1",
-						style: {width: "35%", "margin-left": "0.4em"},
+						style: { width: "35%", "margin-left": "0.4em" },
 						oninput: (i) => {
 							this.batchCount = i.target.value;
 							document.getElementById("batchCountInputRange").value = this.batchCount;
@@ -625,13 +651,13 @@ export class ComfyUI {
 			$el("div.comfy-menu-btns", [
 				$el("button", {
 					id: "queue-front-button",
-					textContent: "Queue Front",
+					textContent: i18next.t("ui.queue_front_btn"),
 					onclick: () => app.queuePrompt(-1, this.batchCount)
 				}),
 				$el("button", {
 					$: (b) => (this.queue.button = b),
 					id: "comfy-view-queue-button",
-					textContent: "View Queue",
+					textContent: i18next.t("ui.view_queue_btn"),
 					onclick: () => {
 						this.history.hide();
 						this.queue.toggle();
@@ -640,7 +666,7 @@ export class ComfyUI {
 				$el("button", {
 					$: (b) => (this.history.button = b),
 					id: "comfy-view-history-button",
-					textContent: "View History",
+					textContent: i18next.t("ui.view_history_btn"),
 					onclick: () => {
 						this.queue.hide();
 						this.history.toggle();
@@ -651,7 +677,7 @@ export class ComfyUI {
 			this.history.element,
 			$el("button", {
 				id: "comfy-save-button",
-				textContent: "Save",
+				textContent: i18next.t("ui.save_btn"),
 				onclick: () => {
 					let filename = "workflow.json";
 					if (promptFilename.value) {
@@ -662,12 +688,12 @@ export class ComfyUI {
 						}
 					}
 					const json = JSON.stringify(app.graph.serialize(), null, 2); // convert the data to a JSON string
-					const blob = new Blob([json], {type: "application/json"});
+					const blob = new Blob([json], { type: "application/json" });
 					const url = URL.createObjectURL(blob);
 					const a = $el("a", {
 						href: url,
 						download: filename,
-						style: {display: "none"},
+						style: { display: "none" },
 						parent: document.body,
 					});
 					a.click();
@@ -680,7 +706,7 @@ export class ComfyUI {
 			$el("button", {
 				id: "comfy-dev-save-api-button",
 				textContent: "Save (API Format)",
-				style: {width: "100%", display: "none"},
+				style: { width: "100%", display: "none" },
 				onclick: () => {
 					let filename = "workflow_api.json";
 					if (promptFilename.value) {
@@ -690,14 +716,14 @@ export class ComfyUI {
 							filename += ".json";
 						}
 					}
-					app.graphToPrompt().then(p=>{
+					app.graphToPrompt().then(p => {
 						const json = JSON.stringify(p.output, null, 2); // convert the data to a JSON string
-						const blob = new Blob([json], {type: "application/json"});
+						const blob = new Blob([json], { type: "application/json" });
 						const url = URL.createObjectURL(blob);
 						const a = $el("a", {
 							href: url,
 							download: filename,
-							style: {display: "none"},
+							style: { display: "none" },
 							parent: document.body,
 						});
 						a.click();
@@ -708,15 +734,15 @@ export class ComfyUI {
 					});
 				},
 			}),
-			$el("button", {id: "comfy-load-button", textContent: "Load", onclick: () => fileInput.click()}),
+			$el("button", { id: "comfy-load-button", textContent: i18next.t("ui.load_btn"), onclick: () => fileInput.click() }),
 			$el("button", {
 				id: "comfy-refresh-button",
-				textContent: "Refresh",
+				textContent: i18next.t("ui.refresh_btn"),
 				onclick: () => app.refreshComboInNodes()
 			}),
-			$el("button", {id: "comfy-clipspace-button", textContent: "Clipspace", onclick: () => app.openClipspace()}),
+			$el("button", { id: "comfy-clipspace-button", textContent: i18next.t("ui.clipspace_btn"), onclick: () => app.openClipspace() }),
 			$el("button", {
-				id: "comfy-clear-button", textContent: "Clear", onclick: () => {
+				id: "comfy-clear-button", textContent: i18next.t("ui.clear_btn"), onclick: () => {
 					if (!confirmClear.value || confirm("Clear workflow?")) {
 						app.clean();
 						app.graph.clear();
@@ -724,7 +750,7 @@ export class ComfyUI {
 				}
 			}),
 			$el("button", {
-				id: "comfy-load-default-button", textContent: "Load Default", onclick: () => {
+				id: "comfy-load-default-button", textContent: i18next.t("ui.load_default_btn"), onclick: () => {
 					if (!confirmClear.value || confirm("Load default workflow?")) {
 						app.loadGraphData()
 					}
@@ -737,16 +763,16 @@ export class ComfyUI {
 			name: "Enable Dev mode Options",
 			type: "boolean",
 			defaultValue: false,
-			onChange: function(value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "block" : "none"},
+			onChange: function (value) { document.getElementById("comfy-dev-save-api-button").style.display = value ? "block" : "none" },
 		});
 
 		dragElement(this.menuContainer, this.settings);
 
-		this.setStatus({exec_info: {queue_remaining: "X"}});
+		this.setStatus({ exec_info: { queue_remaining: "X" } });
 	}
 
 	setStatus(status) {
-		this.queueSize.textContent = "Queue size: " + (status ? status.exec_info.queue_remaining : "ERR");
+		this.queueSize.textContent = i18next.t("ui.queue_size") + (status ? status.exec_info.queue_remaining : "ERR");
 		if (status) {
 			if (
 				this.lastQueueSize != 0 &&