From 2542a6bf93ecb27054f639517621142fcc1d8a62 Mon Sep 17 00:00:00 2001
From: xbol0 <xbolo@duck.com>
Date: Tue, 8 Aug 2023 07:50:57 +0000
Subject: [PATCH] init i18n extension

---
 .gitignore                                |    1 +
 web/extensions/core/colorPalette.js       |   10 +-
 web/extensions/core/i18n.js               |   46 +
 web/extensions/core/widgetInputs.js       |    1 +
 web/i18n/en_US.js                         |  125 ++
 web/i18n/zh_CN.js                         |  125 ++
 web/index.html                            |    2 +
 web/lib/i18next.js                        | 2265 +++++++++++++++++++++
 web/lib/i18nextBrowserLanguageDetector.js |  422 ++++
 web/lib/litegraph.core.js                 |    8 +-
 web/scripts/app.js                        |  132 +-
 web/scripts/ui.js                         |   80 +-
 12 files changed, 3109 insertions(+), 108 deletions(-)
 create mode 100644 web/extensions/core/i18n.js
 create mode 100644 web/i18n/en_US.js
 create mode 100644 web/i18n/zh_CN.js
 create mode 100644 web/lib/i18next.js
 create mode 100644 web/lib/i18nextBrowserLanguageDetector.js

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/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/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/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 2682ff309..0af6fcde9 100644
--- a/web/lib/litegraph.core.js
+++ b/web/lib/litegraph.core.js
@@ -12522,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);
@@ -12554,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)
 			{
diff --git a/web/scripts/app.js b/web/scripts/app.js
index 40156abc3..8d997f2a5 100644
--- a/web/scripts/app.js
+++ b/web/scripts/app.js
@@ -5,6 +5,19 @@ 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
  */
@@ -61,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 "";
@@ -72,7 +85,7 @@ export class ComfyApp {
 	}
 
 	static onClipspaceEditorSave() {
-		if(ComfyApp.clipspace_return_node) {
+		if (ComfyApp.clipspace_return_node) {
 			ComfyApp.pasteFromClipspace(ComfyApp.clipspace_return_node);
 		}
 	}
@@ -83,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 = [];
 
@@ -101,7 +114,7 @@ export class ComfyApp {
 		}
 
 		var selectedIndex = 0;
-		if(node.imageIndex) {
+		if (node.imageIndex) {
 			selectedIndex = node.imageIndex;
 		}
 
@@ -116,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];
@@ -147,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;
@@ -156,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;
@@ -285,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();
+						}
+					});
 				}
 			}
 		};
@@ -316,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;
 			}
@@ -371,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 {
@@ -616,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"];
@@ -676,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) {
@@ -694,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;
@@ -714,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) {
@@ -739,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) {
@@ -804,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;
 			}
@@ -891,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;
@@ -1117,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
@@ -1135,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)) {
@@ -1165,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 });
 					}
 
@@ -1430,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
 				}
@@ -1558,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/ui.js b/web/scripts/ui.js
index 86e2a1c41..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 = "", options = undefined}) {
+	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;
@@ -417,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()),
 		)
@@ -457,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: () => {
@@ -486,7 +486,7 @@ class ComfyList {
 						await this.load();
 					},
 				}),
-				$el("button", {textContent: "Refresh", onclick: () => this.load()}),
+				$el("button", { textContent: "Refresh", onclick: () => this.load() }),
 			])
 		);
 	}
@@ -579,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",
@@ -596,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) => {
@@ -616,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;
@@ -651,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();
@@ -666,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();
@@ -677,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) {
@@ -688,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();
@@ -706,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) {
@@ -716,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();
@@ -734,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();
@@ -750,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()
 					}
@@ -763,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 &&