Merge pull request #1187 from open-webui/dev

0.1.113

CHANGELOG.md

@@ -5,6 +5,25 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.1.113] - 2024-03-18
+
+### Added
+
+- 🌍 **Localization**: You can now change the UI language in Settings > General. We support Ukrainian, German, Farsi (Persian), Traditional and Simplified Chinese and French translations. You can help us to translate the UI into your language! More info in our [CONTRIBUTION.md](https://github.com/open-webui/open-webui/blob/main/docs/CONTRIBUTING.md#-translations-and-internationalization).
+- 🎨 **System-wide Theme**: Introducing a new system-wide theme for enhanced visual experience.
+
+### Fixed
+
+- 🌑 **Dark Background on Select Fields**: Improved readability by adding a dark background to select fields, addressing issues on certain browsers/devices.
+- **Multiple OPENAI_API_BASE_URLS Issue**: Resolved issue where multiple base URLs caused conflicts when one wasn't functioning.
+- **RAG Encoding Issue**: Fixed encoding problem in RAG.
+- **npm Audit Fix**: Addressed npm audit findings.
+- **Reduced Scroll Threshold**: Improved auto-scroll experience by reducing the scroll threshold from 50px to 5px.
+
+### Changed
+
+- 🔄 **Sidebar UI Update**: Updated sidebar UI to feature a chat menu dropdown, replacing two icons for improved navigation.
+
 ## [0.1.112] - 2024-03-15
 
 ### Fixed

README.md

@@ -11,7 +11,7 @@
 [![Discord](https://img.shields.io/badge/Discord-Open_WebUI-blue?logo=discord&logoColor=white)](https://discord.gg/5rJgQTnV4s)
 [![](https://img.shields.io/static/v1?label=Sponsor&message=%E2%9D%A4&logo=GitHub&color=%23fe8e86)](https://github.com/sponsors/tjbck)
 
-User-friendly WebUI for LLMs, supported LLM runners include Ollama and OpenAI-compatible APIs. For more information, be sure to check out our [Open WebUI Documentation](https://docs.openwebui.com/).
+Open WebUI is an extensible, feature-rich, and user-friendly self-hosted WebUI designed to operate entirely offline. It supports various LLM runners, including Ollama and OpenAI-compatible APIs. For more information, be sure to check out our [Open WebUI Documentation](https://docs.openwebui.com/).
 
 ![Open WebUI Demo](./demo.gif)
 
@@ -79,6 +79,8 @@ User-friendly WebUI for LLMs, supported LLM runners include Ollama and OpenAI-co
 
 - 🔒 **Backend Reverse Proxy Support**: Bolster security through direct communication between Open WebUI backend and Ollama. This key feature eliminates the need to expose Ollama over LAN. Requests made to the '/ollama/api' route from the web UI are seamlessly redirected to Ollama from the backend, enhancing overall system security.
 
+- 🌐🌍 **Multilingual Support**: Experience Open WebUI in your preferred language with our internationalization (i18n) support. Join us in expanding our supported languages! We're actively seeking contributors!
+
 - 🌟 **Continuous Updates**: We are committed to improving Open WebUI with regular updates and new features.
 
 ## 🔗 Also Check Out Open WebUI Community!

backend/apps/ollama/main.py

@@ -98,13 +98,14 @@ def merge_models_lists(model_lists):
     merged_models = {}
 
     for idx, model_list in enumerate(model_lists):
-        for model in model_list:
-            digest = model["digest"]
-            if digest not in merged_models:
-                model["urls"] = [idx]
-                merged_models[digest] = model
-            else:
-                merged_models[digest]["urls"].append(idx)
+        if model_list is not None:
+            for model in model_list:
+                digest = model["digest"]
+                if digest not in merged_models:
+                    model["urls"] = [idx]
+                    merged_models[digest] = model
+                else:
+                    merged_models[digest]["urls"].append(idx)
 
     return list(merged_models.values())
 
@@ -116,11 +117,10 @@ async def get_all_models():
     print("get_all_models")
     tasks = [fetch_url(f"{url}/api/tags") for url in app.state.OLLAMA_BASE_URLS]
     responses = await asyncio.gather(*tasks)
-    responses = list(filter(lambda x: x is not None, responses))
 
     models = {
         "models": merge_models_lists(
-            map(lambda response: response["models"], responses)
+            map(lambda response: response["models"] if response else None, responses)
         )
     }
 

backend/apps/openai/main.py

@@ -111,6 +111,7 @@ async def speech(request: Request, user=Depends(get_verified_user)):
         headers["Authorization"] = f"Bearer {app.state.OPENAI_API_KEYS[idx]}"
         headers["Content-Type"] = "application/json"
 
+        r = None
         try:
             r = requests.post(
                 url=f"{app.state.OPENAI_API_BASE_URLS[idx]}/audio/speech",
@@ -143,7 +144,9 @@ async def speech(request: Request, user=Depends(get_verified_user)):
                 except:
                     error_detail = f"External: {e}"
 
-            raise HTTPException(status_code=r.status_code, detail=error_detail)
+            raise HTTPException(
+                status_code=r.status_code if r else 500, detail=error_detail
+            )
 
     except ValueError:
         raise HTTPException(status_code=401, detail=ERROR_MESSAGES.OPENAI_NOT_FOUND)
@@ -165,14 +168,15 @@ def merge_models_lists(model_lists):
     merged_list = []
 
     for idx, models in enumerate(model_lists):
-        merged_list.extend(
-            [
-                {**model, "urlIdx": idx}
-                for model in models
-                if "api.openai.com" not in app.state.OPENAI_API_BASE_URLS[idx]
-                or "gpt" in model["id"]
-            ]
-        )
+        if models is not None and "error" not in models:
+            merged_list.extend(
+                [
+                    {**model, "urlIdx": idx}
+                    for model in models
+                    if "api.openai.com" not in app.state.OPENAI_API_BASE_URLS[idx]
+                    or "gpt" in model["id"]
+                ]
+            )
 
     return merged_list
 
@@ -187,15 +191,22 @@ async def get_all_models():
             fetch_url(f"{url}/models", app.state.OPENAI_API_KEYS[idx])
             for idx, url in enumerate(app.state.OPENAI_API_BASE_URLS)
         ]
+
         responses = await asyncio.gather(*tasks)
-        responses = list(
-            filter(lambda x: x is not None and "error" not in x, responses)
-        )
         models = {
             "data": merge_models_lists(
-                list(map(lambda response: response["data"], responses))
+                list(
+                    map(
+                        lambda response: (
+                            response["data"] if "data" in response else None
+                        ),
+                        responses,
+                    )
+                )
             )
         }
+
+        print(models)
         app.state.MODELS = {model["id"]: model for model in models["data"]}
 
         return models
@@ -218,6 +229,9 @@ async def get_models(url_idx: Optional[int] = None, user=Depends(get_current_use
         return models
     else:
         url = app.state.OPENAI_API_BASE_URLS[url_idx]
+
+        r = None
+
         try:
             r = requests.request(method="GET", url=f"{url}/models")
             r.raise_for_status()
@@ -290,6 +304,8 @@ async def proxy(path: str, request: Request, user=Depends(get_verified_user)):
     headers["Authorization"] = f"Bearer {key}"
     headers["Content-Type"] = "application/json"
 
+    r = None
+
     try:
         r = requests.request(
             method=request.method,
@@ -322,4 +338,6 @@ async def proxy(path: str, request: Request, user=Depends(get_verified_user)):
             except:
                 error_detail = f"External: {e}"
 
-        raise HTTPException(status_code=r.status_code, detail=error_detail)
+        raise HTTPException(
+            status_code=r.status_code if r else 500, detail=error_detail
+        )

backend/apps/rag/main.py

@@ -400,9 +400,9 @@ def get_loader(filename: str, file_content_type: str, file_path: str):
     elif file_ext in known_source_ext or (
         file_content_type and file_content_type.find("text/") >= 0
     ):
-        loader = TextLoader(file_path)
+        loader = TextLoader(file_path, autodetect_encoding=True)
     else:
-        loader = TextLoader(file_path)
+        loader = TextLoader(file_path, autodetect_encoding=True)
         known_type = False
 
     return loader, known_type

backend/config.py

@@ -250,8 +250,10 @@ OPENAI_API_BASE_URLS = (
     OPENAI_API_BASE_URLS if OPENAI_API_BASE_URLS != "" else OPENAI_API_BASE_URL
 )
 
-OPENAI_API_BASE_URLS = [url.strip() for url in OPENAI_API_BASE_URLS.split(";")]
-
+OPENAI_API_BASE_URLS = [
+    url.strip() if url != "" else "https://api.openai.com/v1"
+    for url in OPENAI_API_BASE_URLS.split(";")
+]
 
 ####################################
 # WEBUI

docs/CONTRIBUTING.md

@@ -50,6 +50,18 @@ We welcome pull requests. Before submitting one, please:
 
 Help us make Open WebUI more accessible by improving documentation, writing tutorials, or creating guides on setting up and optimizing the web UI.
 
+### 🌐 Translations and Internationalization
+
+Help us make Open WebUI available to a wider audience. In this section, we'll guide you through the process of adding new translations to the project.
+
+We use JSON files to store translations. You can find the existing translation files in the `src/lib/i18n/locales` directory. Each directory corresponds to a specific language, for example, `en-US` for English (US), `fr-FR` for French (France) and so on. You can refer to [ISO 639 Language Codes][http://www.lingoes.net/en/translator/langcode.htm] to find the appropriate code for a specific language.
+
+To add a new language:
+
+- Create a new directory in the `src/lib/i18n/locales` path with the appropriate language code as its name. For instance, if you're adding translations for Spanish (Spain), create a new directory named `es-ES`.
+- Copy the American English translation file(s) (from `en-US` directory in `src/lib/i18n/locale`) to this new directory and update the string values in JSON format according to your language. Make sure to preserve the structure of the JSON object.
+- Add the language code and its respective title to languages file at `src/lib/i18n/locales/languages.json`.
+
 ### 🤔 Questions & Feedback
 
 Got questions or feedback? Join our [Discord community](https://discord.gg/5rJgQTnV4s) or open an issue. We're here to help!

i18next-parser.config.ts

@@ -0,0 +1,38 @@
+// i18next-parser.config.ts
+import { getLanguages } from './src/lib/i18n/index.ts';
+
+const getLangCodes = async () => {
+	const languages = await getLanguages();
+	return languages.map((l) => l.code);
+};
+
+export default {
+	contextSeparator: '_',
+	createOldCatalogs: false,
+	defaultNamespace: 'translation',
+	defaultValue: '',
+	indentation: 2,
+	keepRemoved: false,
+	keySeparator: false,
+	lexers: {
+		svelte: ['JavascriptLexer'],
+		js: ['JavascriptLexer'],
+		ts: ['JavascriptLexer'],
+
+		default: ['JavascriptLexer']
+	},
+	lineEnding: 'auto',
+	locales: await getLangCodes(),
+	namespaceSeparator: false,
+	output: 'src/lib/i18n/locales/$LOCALE/$NAMESPACE.json',
+	pluralSeparator: '_',
+	input: 'src/**/*.{js,svelte}',
+	sort: true,
+	verbose: true,
+	failOnWarnings: false,
+	failOnUpdate: false,
+	customValueTemplate: null,
+	resetDefaultValueLocale: null,
+	i18nextOptions: null,
+	yamlOptions: null
+};

kubernetes/helm/templates/webui-service.yaml

@@ -4,6 +4,9 @@ metadata:
   name: {{ include "open-webui.name" . }}
   labels:
     {{- include "open-webui.labels" . | nindent 4 }}
+    {{- with .Values.webui.service.labels }}
+    {{- toYaml . | nindent 4 }}
+    {{- end }}
   {{- with .Values.webui.service.annotations }}
   annotations:
     {{- toYaml . | nindent 4 }}
@@ -11,14 +14,16 @@ metadata:
 spec:
   selector:
     {{- include "open-webui.selectorLabels" . | nindent 4 }}
-{{- with .Values.webui.service }}
-  type: {{ .type }}
+  type: {{ .Values.webui.service.type | default "ClusterIP" }}
   ports:
   - protocol: TCP
     name: http
-    port: {{ .port }}
+    port: {{ .Values.webui.service.port }}
     targetPort: http
-    {{- if .nodePort }}
-    nodePort: {{ .nodePort | int }}
+    {{- if .Values.webui.service.nodePort }}
+    nodePort: {{ .Values.webui.service.nodePort | int }}
     {{- end }}
-{{- end }}
+  {{- if .Values.webui.service.loadBalancerClass }}
+  loadBalancerClass: {{ .Values.webui.service.loadBalancerClass | quote }}
+  {{- end }}
+

kubernetes/helm/values.yaml

@@ -70,3 +70,5 @@ webui:
     port: 80
     containerPort: 8080
     nodePort: ""
+    labels: {}
+    loadBalancerClass: "" 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "open-webui",
-	"version": "0.1.112",
+	"version": "0.1.113",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev --host",
@@ -13,7 +13,8 @@
 		"lint:types": "npm run check",
 		"lint:backend": "pylint backend/",
 		"format": "prettier --plugin-search-dir --write '**/*.{js,ts,svelte,css,md,html,json}'",
-		"format:backend": "yapf --recursive backend -p -i"
+		"format:backend": "yapf --recursive backend -p -i",
+		"i18n:parse": "i18next --config i18next-parser.config.ts && prettier --write 'src/lib/i18n/**/*.{js,json}'"
 	},
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^2.0.0",
@@ -27,6 +28,7 @@
 		"eslint": "^8.56.0",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-plugin-svelte": "^2.30.0",
+		"i18next-parser": "^8.13.0",
 		"postcss": "^8.4.31",
 		"prettier": "^2.8.0",
 		"prettier-plugin-svelte": "^2.10.1",
@@ -42,9 +44,13 @@
 	"dependencies": {
 		"@sveltejs/adapter-node": "^1.3.1",
 		"async": "^3.2.5",
+		"bits-ui": "^0.19.7",
 		"dayjs": "^1.11.10",
 		"file-saver": "^2.0.5",
 		"highlight.js": "^11.9.0",
+		"i18next": "^23.10.0",
+		"i18next-browser-languagedetector": "^7.2.0",
+		"i18next-resources-to-backend": "^1.2.0",
 		"idb": "^7.1.1",
 		"js-sha256": "^0.10.1",
 		"katex": "^0.16.9",

src/app.html

@@ -8,18 +8,35 @@
 		<meta name="robots" content="noindex,nofollow" />
 		<script>
 			// On page load or when changing themes, best to add inline in `head` to avoid FOUC
-			if (
-				localStorage.theme === 'light' ||
-				(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
-			) {
-				document.documentElement.classList.add('light');
-			} else if (localStorage.theme) {
-				localStorage.theme.split(' ').forEach((e) => {
-					document.documentElement.classList.add(e);
+			(() => {
+				if (
+					localStorage.theme === 'light' ||
+					(!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: light)').matches)
+				) {
+					document.documentElement.classList.add('light');
+				} else if (localStorage.theme && localStorage.theme !== 'system') {
+					localStorage.theme.split(' ').forEach((e) => {
+						document.documentElement.classList.add(e);
+					});
+				} else if (localStorage.theme && localStorage.theme === 'system') {
+					systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
+					document.documentElement.classList.add(systemTheme ? 'dark' : 'light');
+				} else {
+					document.documentElement.classList.add('dark');
+				}
+
+				window.matchMedia('(prefers-color-scheme: dark)').addListener((e) => {
+					if (localStorage.theme === 'system') {
+						if (e.matches) {
+							document.documentElement.classList.add('dark');
+							document.documentElement.classList.remove('light');
+						} else {
+							document.documentElement.classList.add('light');
+							document.documentElement.classList.remove('dark');
+						}
+					}
 				});
-			} else {
-				document.documentElement.classList.add('dark');
-			}
+			})();
 		</script>
 
 		%sveltekit.head%

src/lib/components/AddFilesPlaceholder.svelte

@@ -1,8 +1,13 @@
+<script>
+	import { getContext } from 'svelte';
+	const i18n = getContext('i18n');
+</script>
+
 <div class="  text-center text-6xl mb-3">📄</div>
-<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Files</div>
+<div class="text-center dark:text-white text-2xl font-semibold z-50">{$i18n.t('Add Files')}</div>
 
 <slot
 	><div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
-		Drop any files here to add to the conversation
+		{$i18n.t('Drop any files here to add to the conversation')}
 	</div>
 </slot>

src/lib/components/ChangelogModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { Confetti } from 'svelte-confetti';
 
 	import { WEBUI_NAME, config } from '$lib/stores';
@@ -9,6 +9,8 @@
 
 	import Modal from './common/Modal.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 
 	let changelog = null;
@@ -23,7 +25,8 @@
 	<div class="px-5 py-4 dark:text-gray-300">
 		<div class="flex justify-between items-start">
 			<div class="text-xl font-bold">
-				What’s New in {$WEBUI_NAME}
+				{$i18n.t('What’s New in')}
+				{$WEBUI_NAME}
 				<Confetti x={[-1, -0.25]} y={[0, 0.5]} />
 			</div>
 			<button
@@ -45,7 +48,7 @@
 			</button>
 		</div>
 		<div class="flex items-center mt-1">
-			<div class="text-sm dark:text-gray-200">Release Notes</div>
+			<div class="text-sm dark:text-gray-200">{$i18n.t('Release Notes')}</div>
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
 			<div class="text-sm dark:text-gray-200">
 				v{WEBUI_VERSION}
@@ -108,7 +111,7 @@
 				}}
 				class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			>
-				<span class="relative">Okay, Let's Go!</span>
+				<span class="relative">{$i18n.t("Okay, Let's Go!")}</span>
 			</button>
 		</div>
 	</div>

src/lib/components/admin/EditUserModal.svelte

@@ -2,11 +2,12 @@
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
 	import { createEventDispatcher } from 'svelte';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { updateUserById } from '$lib/apis/users';
 	import Modal from '../common/Modal.svelte';
 
+	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
 	export let show = false;
@@ -42,7 +43,7 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Edit User</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Edit User')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -84,7 +85,8 @@
 							<div class=" self-center capitalize font-semibold">{selectedUser.name}</div>
 
 							<div class="text-xs text-gray-500">
-								Created at {dayjs(selectedUser.timestamp * 1000).format('MMMM DD, YYYY')}
+								{$i18n.t('Created at')}
+								{dayjs(selectedUser.timestamp * 1000).format($i18n.t('MMMM DD, YYYY'))}
 							</div>
 						</div>
 					</div>
@@ -93,7 +95,7 @@
 
 					<div class=" flex flex-col space-y-1.5">
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">Email</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Email')}</div>
 
 							<div class="flex-1">
 								<input
@@ -108,7 +110,7 @@
 						</div>
 
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">Name</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
 
 							<div class="flex-1">
 								<input
@@ -122,7 +124,7 @@
 						</div>
 
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">New Password</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
 
 							<div class="flex-1">
 								<input
@@ -140,7 +142,7 @@
 							class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 							type="submit"
 						>
-							Save
+							{$i18n.t('Save')}
 						</button>
 					</div>
 				</form>

src/lib/components/admin/Settings/Database.svelte

@@ -1,6 +1,8 @@
 <script lang="ts">
 	import { downloadDatabase } from '$lib/apis/utils';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 
@@ -17,10 +19,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">Database</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div>
 
 			<div class="  flex w-full justify-between">
-				<!-- <div class=" self-center text-xs font-medium">Allow Chat Deletion</div> -->
+				<!-- <div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div> -->
 
 				<button
 					class=" flex rounded-md py-1.5 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
@@ -46,7 +48,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center text-sm font-medium">Download Database</div>
+					<div class=" self-center text-sm font-medium">{$i18n.t('Download Database')}</div>
 				</button>
 			</div>
 		</div>

src/lib/components/admin/Settings/General.svelte

@@ -7,7 +7,9 @@
 		updateDefaultUserRole,
 		updateJWTExpiresDuration
 	} from '$lib/apis/auths';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 	let signUpEnabled = true;
@@ -43,10 +45,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">General Settings</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('General Settings')}</div>
 
 			<div class="  flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Enable New Sign Ups</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Enable New Sign Ups')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -66,7 +68,7 @@
 								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
 							/>
 						</svg>
-						<span class="ml-2 self-center">Enabled</span>
+						<span class="ml-2 self-center">{$i18n.t('Enabled')}</span>
 					{:else}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -81,25 +83,25 @@
 							/>
 						</svg>
 
-						<span class="ml-2 self-center">Disabled</span>
+						<span class="ml-2 self-center">{$i18n.t('Disabled')}</span>
 					{/if}
 				</button>
 			</div>
 
 			<div class=" flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Default User Role</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Default User Role')}</div>
 				<div class="flex items-center relative">
 					<select
-						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
+						class="dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
 						bind:value={defaultUserRole}
 						placeholder="Select a theme"
 						on:change={(e) => {
 							updateDefaultUserRoleHandler(e.target.value);
 						}}
 					>
-						<option value="pending">Pending</option>
-						<option value="user">User</option>
-						<option value="admin">Admin</option>
+						<option value="pending">{$i18n.t('pending')}</option>
+						<option value="user">{$i18n.t('user')}</option>
+						<option value="admin">{$i18n.t('admin')}</option>
 					</select>
 				</div>
 			</div>
@@ -108,7 +110,7 @@
 
 			<div class=" w-full justify-between">
 				<div class="flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">JWT Expiration</div>
+					<div class=" self-center text-xs font-medium">{$i18n.t('JWT Expiration')}</div>
 				</div>
 
 				<div class="flex mt-2 space-x-2">
@@ -121,8 +123,9 @@
 				</div>
 
 				<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-					Valid time units: <span class=" text-gray-300 font-medium"
-						>'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.</span
+					{$i18n.t('Valid time units:')}
+					<span class=" text-gray-300 font-medium"
+						>{$i18n.t("'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.")}</span
 					>
 				</div>
 			</div>
@@ -134,7 +137,7 @@
 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			type="submit"
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </form>

src/lib/components/admin/Settings/Users.svelte

@@ -2,8 +2,11 @@
 	import { getModelFilterConfig, updateModelFilterConfig } from '$lib/apis';
 	import { getSignUpEnabledStatus, toggleSignUpEnabledStatus } from '$lib/apis/auths';
 	import { getUserPermissions, updateUserPermissions } from '$lib/apis/users';
+
+	import { onMount, getContext } from 'svelte';
 	import { models } from '$lib/stores';
-	import { onMount } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let saveHandler: Function;
 
@@ -39,10 +42,10 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">User Permissions</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('User Permissions')}</div>
 
 			<div class="  flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Allow Chat Deletion</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -62,7 +65,7 @@
 								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
 							/>
 						</svg>
-						<span class="ml-2 self-center">Allow</span>
+						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
 					{:else}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -77,7 +80,7 @@
 							/>
 						</svg>
 
-						<span class="ml-2 self-center">Don't Allow</span>
+						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
 					{/if}
 				</button>
 			</div>
@@ -89,21 +92,21 @@
 			<div>
 				<div class="mb-2">
 					<div class="flex justify-between items-center text-xs">
-						<div class=" text-sm font-medium">Manage Models</div>
+						<div class=" text-sm font-medium">{$i18n.t('Manage Models')}</div>
 					</div>
 				</div>
 
 				<div class=" space-y-3">
 					<div>
 						<div class="flex justify-between items-center text-xs">
-							<div class=" text-xs font-medium">Model Whitelisting</div>
+							<div class=" text-xs font-medium">{$i18n.t('Model Whitelisting')}</div>
 
 							<button
 								class=" text-xs font-medium text-gray-500"
 								type="button"
 								on:click={() => {
 									whitelistEnabled = !whitelistEnabled;
-								}}>{whitelistEnabled ? 'On' : 'Off'}</button
+								}}>{whitelistEnabled ? $i18n.t('On') : $i18n.t('Off')}</button
 							>
 						</div>
 					</div>
@@ -119,7 +122,7 @@
 												bind:value={modelId}
 												placeholder="Select a model"
 											>
-												<option value="" disabled selected>Select a model</option>
+												<option value="" disabled selected>{$i18n.t('Select a model')}</option>
 												{#each $models.filter((model) => model.id) as model}
 													<option value={model.id} class="bg-gray-100 dark:bg-gray-700"
 														>{model.name}</option
@@ -174,7 +177,8 @@
 
 							<div class="flex justify-end items-center text-xs mt-1.5 text-right">
 								<div class=" text-xs font-medium">
-									{whitelistModels.length} Model(s) Whitelisted
+									{whitelistModels.length}
+									{$i18n.t('Model(s) Whitelisted')}
 								</div>
 							</div>
 						</div>
@@ -189,7 +193,7 @@
 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			type="submit"
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </form>

src/lib/components/admin/SettingsModal.svelte

@@ -1,10 +1,13 @@
 <script>
+	import { getContext } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 	import Database from './Settings/Database.svelte';
 
 	import General from './Settings/General.svelte';
 	import Users from './Settings/Users.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 
 	let selectedTab = 'general';
@@ -13,7 +16,7 @@
 <Modal bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Admin Settings</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Admin Settings')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -61,7 +64,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">General</div>
+					<div class=" self-center">{$i18n.t('General')}</div>
 				</button>
 
 				<button
@@ -85,7 +88,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Users</div>
+					<div class=" self-center">{$i18n.t('Users')}</div>
 				</button>
 
 				<button
@@ -113,7 +116,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Database</div>
+					<div class=" self-center">{$i18n.t('Database')}</div>
 				</button>
 			</div>
 			<div class="flex-1 md:min-h-[380px]">

src/lib/components/chat/MessageInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 	import { settings } from '$lib/stores';
 	import { blobToFile, calculateSHA256, findWordIndices } from '$lib/utils';
 
@@ -14,6 +14,8 @@
 	import { transcribeAudio } from '$lib/apis/audio';
 	import Tooltip from '../common/Tooltip.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let submitPrompt: Function;
 	export let stopResponse: Function;
 
@@ -209,11 +211,11 @@
 					// Event triggered when an error occurs
 					speechRecognition.onerror = function (event) {
 						console.log(event);
-						toast.error(`Speech recognition error: ${event.error}`);
+						toast.error($i18n.t(`Speech recognition error: {{error}}`, { error: event.error }));
 						isRecording = false;
 					};
 				} else {
-					toast.error('SpeechRecognition API is not supported in this browser.');
+					toast.error($i18n.t('SpeechRecognition API is not supported in this browser.'));
 				}
 			}
 		}
@@ -333,12 +335,15 @@
 						uploadDoc(file);
 					} else {
 						toast.error(
-							`Unknown File Type '${file['type']}', but accepting and treating as plain text`
+							$i18n.t(
+								`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
+								{ file_type: file['type'] }
+							)
 						);
 						uploadDoc(file);
 					}
 				} else {
-					toast.error(`File not found.`);
+					toast.error($i18n.t(`File not found.`));
 				}
 			}
 
@@ -477,13 +482,16 @@
 								filesInputElement.value = '';
 							} else {
 								toast.error(
-									`Unknown File Type '${file['type']}', but accepting and treating as plain text`
+									$i18n.t(
+										`Unknown File Type '{{file_type}}', but accepting and treating as plain text`,
+										{ file_type: file['type'] }
+									)
 								);
 								uploadDoc(file);
 								filesInputElement.value = '';
 							}
 						} else {
-							toast.error(`File not found.`);
+							toast.error($i18n.t(`File not found.`));
 						}
 					}}
 				/>
@@ -570,7 +578,7 @@
 													{file.name}
 												</div>
 
-												<div class=" text-gray-500 text-sm">Document</div>
+												<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
 											</div>
 										</div>
 									{:else if file.type === 'collection'}
@@ -598,7 +606,7 @@
 													{file?.title ?? `#${file.name}`}
 												</div>
 
-												<div class=" text-gray-500 text-sm">Collection</div>
+												<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
 											</div>
 										</div>
 									{/if}
@@ -632,7 +640,7 @@
 					<div class=" flex">
 						{#if fileUploadEnabled}
 							<div class=" self-end mb-2 ml-1">
-								<Tooltip content="Upload files">
+								<Tooltip content={$i18n.t('Upload files')}>
 									<button
 										class="bg-gray-50 hover:bg-gray-100 text-gray-800 dark:bg-gray-850 dark:text-white dark:hover:bg-gray-800 transition rounded-full p-1.5"
 										type="button"
@@ -664,8 +672,8 @@
 							placeholder={chatInputPlaceholder !== ''
 								? chatInputPlaceholder
 								: isRecording
-								? 'Listening...'
-								: 'Send a message'}
+								? $i18n.t('Listening...')
+								: $i18n.t('Send a Messsage')}
 							bind:value={prompt}
 							on:keypress={(e) => {
 								if (e.keyCode == 13 && !e.shiftKey) {
@@ -804,7 +812,7 @@
 
 						<div class="self-end mb-2 flex space-x-1 mr-1">
 							{#if messages.length == 0 || messages.at(-1).done == true}
-								<Tooltip content="Record voice">
+								<Tooltip content={$i18n.t('Record voice')}>
 									{#if speechRecognitionEnabled}
 										<button
 											id="voice-input-button"
@@ -873,7 +881,7 @@
 									{/if}
 								</Tooltip>
 
-								<Tooltip content="Send message">
+								<Tooltip content={$i18n.t('Send message')}>
 									<button
 										class="{prompt !== ''
 											? 'bg-black text-white hover:bg-gray-900 dark:bg-white dark:text-black dark:hover:bg-gray-100 '
@@ -919,7 +927,7 @@
 				</form>
 
 				<div class="mt-1.5 text-xs text-gray-500 text-center">
-					LLMs can make mistakes. Verify important information.
+					{$i18n.t('LLMs can make mistakes. Verify important information.')}
 				</div>
 			</div>
 		</div>

src/lib/components/chat/MessageInput/Documents.svelte

@@ -3,9 +3,11 @@
 
 	import { documents } from '$lib/stores';
 	import { removeFirstHashWord, isValidHttpUrl } from '$lib/utils';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let prompt = '';
 
 	const dispatch = createEventDispatcher();
@@ -117,7 +119,7 @@
 									{doc?.title ?? `#${doc.name}`}
 								</div>
 
-								<div class=" text-xs text-gray-600 line-clamp-1">Collection</div>
+								<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Collection')}</div>
 							{:else}
 								<div class=" font-medium text-black line-clamp-1">
 									#{doc.name} ({doc.filename})
@@ -140,7 +142,9 @@
 									confirmSelectWeb(url);
 								} else {
 									toast.error(
-										'Oops! Looks like the URL is invalid. Please double-check and try again.'
+										$i18n.t(
+											'Oops! Looks like the URL is invalid. Please double-check and try again.'
+										)
 									);
 								}
 							}}
@@ -149,7 +153,7 @@
 								{prompt.split(' ')?.at(0)?.substring(1)}
 							</div>
 
-							<div class=" text-xs text-gray-600 line-clamp-1">Web</div>
+							<div class=" text-xs text-gray-600 line-clamp-1">{$i18n.t('Web')}</div>
 						</button>
 					{/if}
 				</div>

src/lib/components/chat/MessageInput/Models.svelte

@@ -2,9 +2,11 @@
 	import { generatePrompt } from '$lib/apis/ollama';
 	import { models } from '$lib/stores';
 	import { splitStream } from '$lib/utils';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let prompt = '';
 	export let user = null;
 
@@ -41,7 +43,7 @@
 		user = JSON.parse(JSON.stringify(model.name));
 		await tick();
 
-		chatInputPlaceholder = `'${model.name}' is thinking...`;
+		chatInputPlaceholder = $i18n.t('{{modelName}} is thinking...', { modelName: model.name });
 
 		const chatInputElement = document.getElementById('chat-textarea');
 
@@ -113,7 +115,9 @@
 					toast.error(error.error);
 				}
 			} else {
-				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
+				toast.error(
+					$i18n.t('Uh-oh! There was an issue connecting to {{provider}}.', { provider: 'llama' })
+				);
 			}
 		}
 

src/lib/components/chat/MessageInput/PromptCommands.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { prompts } from '$lib/stores';
 	import { findWordIndices } from '$lib/utils';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let prompt = '';
 	let selectedCommandIdx = 0;
 	let filteredPromptCommands = [];
@@ -29,7 +31,7 @@
 
 		if (command.content.includes('{{CLIPBOARD}}')) {
 			const clipboardText = await navigator.clipboard.readText().catch((err) => {
-				toast.error('Failed to read clipboard contents');
+				toast.error($i18n.t('Failed to read clipboard contents'));
 				return '{{CLIPBOARD}}';
 			});
 
@@ -113,8 +115,9 @@
 					</div>
 
 					<div class="line-clamp-1">
-						Tip: Update multiple variable slots consecutively by pressing the tab key in the chat
-						input after each replacement.
+						{$i18n.t(
+							'Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.'
+						)}
 					</div>
 				</div>
 			</div>

src/lib/components/chat/Messages.svelte

@@ -2,7 +2,7 @@
 	import { v4 as uuidv4 } from 'uuid';
 
 	import { chats, config, modelfiles, settings, user } from '$lib/stores';
-	import { tick } from 'svelte';
+	import { tick, getContext } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
 	import { getChatList, updateChatById } from '$lib/apis/chats';
@@ -13,6 +13,8 @@
 	import Spinner from '../common/Spinner.svelte';
 	import { imageGenerations } from '$lib/apis/images';
 
+	const i18n = getContext('i18n');
+
 	export let chatId = '';
 	export let sendPrompt: Function;
 	export let continueGeneration: Function;
@@ -67,7 +69,7 @@
 		navigator.clipboard.writeText(text).then(
 			function () {
 				console.log('Async: Copying to clipboard was successful!');
-				toast.success('Copying to clipboard was successful!');
+				toast.success($i18n.t('Copying to clipboard was successful!'));
 			},
 			function (err) {
 				console.error('Async: Could not copy text: ', err);

src/lib/components/chat/Messages/Placeholder.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import { user } from '$lib/stores';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let models = [];
 	export let modelfiles = [];
@@ -64,9 +66,9 @@
 					</div>
 				{/if}
 			{:else}
-				<div class=" line-clamp-1">Hello, {$user.name}</div>
+				<div class=" line-clamp-1">{$i18n.t('Hello, {{name}}', { name: $user.name })}</div>
 
-				<div>How can I help you today?</div>
+				<div>{$i18n.t('How can I help you today?')}</div>
 			{/if}
 		</div>
 	</div>

src/lib/components/chat/Messages/ResponseMessage.svelte

@@ -8,7 +8,9 @@
 
 	import { fade } from 'svelte/transition';
 	import { createEventDispatcher } from 'svelte';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	const dispatch = createEventDispatcher();
 
@@ -316,7 +318,7 @@
 
 				{#if message.timestamp}
 					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
-						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:mm')}
+						{dayjs(message.timestamp * 1000).format($i18n.t('DD/MM/YYYY HH:mm'))}
 					</span>
 				{/if}
 			</Name>
@@ -360,7 +362,7 @@
 											editMessageConfirmHandler();
 										}}
 									>
-										Save
+										{$i18n.t('Save')}
 									</button>
 
 									<button
@@ -369,7 +371,7 @@
 											cancelEditMessage();
 										}}
 									>
-										Cancel
+										{$i18n.t('Cancel')}
 									</button>
 								</div>
 							</div>

src/lib/components/chat/Messages/UserMessage.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
 	import dayjs from 'dayjs';
 
-	import { tick, createEventDispatcher } from 'svelte';
+	import { tick, createEventDispatcher, getContext } from 'svelte';
 	import Name from './Name.svelte';
 	import ProfileImage from './ProfileImage.svelte';
 	import { modelfiles, settings } from '$lib/stores';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
+	const i18n = getContext('i18n');
+
 	const dispatch = createEventDispatcher();
 
 	export let user;
@@ -65,17 +67,18 @@
 					{#if $modelfiles.map((modelfile) => modelfile.tagName).includes(message.user)}
 						{$modelfiles.find((modelfile) => modelfile.tagName === message.user)?.title}
 					{:else}
-						You <span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
+						{$i18n.t('You')}
+						<span class=" text-gray-500 text-sm font-medium">{message?.user ?? ''}</span>
 					{/if}
 				{:else if $settings.showUsername}
 					{user.name}
 				{:else}
-					You
+					{$i18n.t('You')}
 				{/if}
 
 				{#if message.timestamp}
 					<span class=" invisible group-hover:visible text-gray-400 text-xs font-medium">
-						{dayjs(message.timestamp * 1000).format('DD/MM/YYYY HH:mm')}
+						{dayjs(message.timestamp * 1000).format($i18n.t('DD/MM/YYYY HH:mm'))}
 					</span>
 				{/if}
 			</Name>
@@ -123,7 +126,7 @@
 											{file.name}
 										</div>
 
-										<div class=" text-gray-500 text-sm">Document</div>
+										<div class=" text-gray-500 text-sm">{$i18n.t('Document')}</div>
 									</div>
 								</button>
 							{:else if file.type === 'collection'}
@@ -152,7 +155,7 @@
 											{file?.title ?? `#${file.name}`}
 										</div>
 
-										<div class=" text-gray-500 text-sm">Collection</div>
+										<div class=" text-gray-500 text-sm">{$i18n.t('Collection')}</div>
 									</div>
 								</button>
 							{/if}
@@ -181,7 +184,7 @@
 								editMessageConfirmHandler();
 							}}
 						>
-							Save & Submit
+							{$i18n.t('Save & Submit')}
 						</button>
 
 						<button
@@ -190,7 +193,7 @@
 								cancelEditMessage();
 							}}
 						>
-							Cancel
+							{$i18n.t('Cancel')}
 						</button>
 					</div>
 				</div>

src/lib/components/chat/ModelSelector.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import { setDefaultModels } from '$lib/apis/configs';
 	import { models, showSettings, settings, user } from '$lib/stores';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let selectedModels = [''];
 	export let disabled = false;
 
 	const saveDefaultModel = async () => {
 		const hasEmptyModel = selectedModels.filter((it) => it === '');
 		if (hasEmptyModel.length) {
-			toast.error('Choose a model before saving...');
+			toast.error($i18n.t('Choose a model before saving...'));
 			return;
 		}
 		settings.set({ ...$settings, models: selectedModels });
@@ -20,7 +22,7 @@
 			console.log('setting default models globally');
 			await setDefaultModels(localStorage.token, selectedModels.join(','));
 		}
-		toast.success('Default model updated');
+		toast.success($i18n.t('Default model updated'));
 	};
 
 	$: if (selectedModels.length > 0 && $models.length > 0) {
@@ -39,7 +41,9 @@
 				bind:value={selectedModel}
 				{disabled}
 			>
-				<option class=" text-gray-700" value="" selected disabled>Select a model</option>
+				<option class=" text-gray-700" value="" selected disabled
+					>{$i18n.t('Select a model')}</option
+				>
 
 				{#each $models as model}
 					{#if model.name === 'hr'}
@@ -133,5 +137,5 @@
 </div>
 
 <div class="text-left mt-1.5 text-xs text-gray-500">
-	<button on:click={saveDefaultModel}> Set as default</button>
+	<button on:click={saveDefaultModel}> {$i18n.t('Set as default')}</button>
 </div>

src/lib/components/chat/Settings/About.svelte

@@ -4,7 +4,9 @@
 	import { WEBUI_VERSION } from '$lib/constants';
 	import { WEBUI_NAME, config, showChangelog } from '$lib/stores';
 	import { compareVersion } from '$lib/utils';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	let ollamaVersion = '';
 
@@ -43,7 +45,8 @@
 		<div>
 			<div class=" mb-2.5 text-sm font-medium flex space-x-2 items-center">
 				<div>
-					{$WEBUI_NAME} Version
+					{$WEBUI_NAME}
+					{$i18n.t('Version')}
 				</div>
 			</div>
 			<div class="flex w-full justify-between items-center">
@@ -56,10 +59,10 @@
 							target="_blank"
 						>
 							{updateAvailable === null
-								? 'Checking for updates...'
+								? $i18n.t('Checking for updates...')
 								: updateAvailable
-								? `(v${version.latest} available!)`
-								: '(latest)'}
+								? `(v${version.latest} ${$i18n.t('available!')})`
+								: $i18n.t('(latest)')}
 						</a>
 					</div>
 
@@ -69,7 +72,7 @@
 							showChangelog.set(true);
 						}}
 					>
-						<div>See what's new</div>
+						<div>{$i18n.t("See what's new")}</div>
 					</button>
 				</div>
 
@@ -79,7 +82,7 @@
 						checkForVersionUpdates();
 					}}
 				>
-					Check for updates
+					{$i18n.t('Check for updates')}
 				</button>
 			</div>
 		</div>
@@ -88,7 +91,7 @@
 			<hr class=" dark:border-gray-700" />
 
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Ollama Version</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama Version')}</div>
 				<div class="flex w-full">
 					<div class="flex-1 text-xs text-gray-700 dark:text-gray-200">
 						{ollamaVersion ?? 'N/A'}
@@ -123,7 +126,8 @@
 		</div>
 
 		<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-			Created by <a
+			{$i18n.t('Created by')}
+			<a
 				class=" text-gray-500 dark:text-gray-300 font-medium"
 				href="https://github.com/tjbck"
 				target="_blank">Timothy J. Baek</a

src/lib/components/chat/Settings/Account.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { user } from '$lib/stores';
 	import { updateUserProfile } from '$lib/apis/auths';
@@ -9,6 +9,8 @@
 	import { getGravatarUrl } from '$lib/apis/utils';
 	import { copyToClipboard } from '$lib/utils';
 
+	const i18n = getContext('i18n');
+
 	export let saveHandler: Function;
 
 	let profileImageUrl = '';
@@ -38,7 +40,7 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]">
 		<input
 			id="profile-image-input"
 			bind:this={profileImageInputElement}
@@ -101,7 +103,7 @@
 			}}
 		/>
 
-		<div class=" mb-2.5 text-sm font-medium">Profile</div>
+		<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Profile')}</div>
 
 		<div class="flex space-x-5">
 			<div class="flex flex-col">
@@ -143,13 +145,13 @@
 						const url = await getGravatarUrl($user.email);
 
 						profileImageUrl = url;
-					}}>Use Gravatar</button
+					}}>{$i18n.t('Use Gravatar')}</button
 				>
 			</div>
 
 			<div class="flex-1">
 				<div class="flex flex-col w-full">
-					<div class=" mb-1 text-xs text-gray-500">Name</div>
+					<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name')}</div>
 
 					<div class="flex-1">
 						<input
@@ -170,7 +172,7 @@
 
 		<div class=" w-full justify-between">
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">JWT Token</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('JWT Token')}</div>
 			</div>
 
 			<div class="flex mt-2">
@@ -280,7 +282,7 @@
 				}
 			}}
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </div>

src/lib/components/chat/Settings/Account/UpdatePassword.svelte

@@ -1,7 +1,10 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { updateUserPassword } from '$lib/apis/auths';
 
+	const i18n = getContext('i18n');
+
 	let show = false;
 	let currentPassword = '';
 	let newPassword = '';
@@ -17,7 +20,7 @@
 			);
 
 			if (res) {
-				toast.success('Successfully updated.');
+				toast.success($i18n.t('Successfully updated.'));
 			}
 
 			currentPassword = '';
@@ -40,20 +43,20 @@
 	}}
 >
 	<div class="flex justify-between items-center text-sm">
-		<div class="  font-medium">Change Password</div>
+		<div class="  font-medium">{$i18n.t('Change Password')}</div>
 		<button
 			class=" text-xs font-medium text-gray-500"
 			type="button"
 			on:click={() => {
 				show = !show;
-			}}>{show ? 'Hide' : 'Show'}</button
+			}}>{show ? $i18n.t('Hide') : $i18n.t('Show')}</button
 		>
 	</div>
 
 	{#if show}
 		<div class=" py-2.5 space-y-1.5">
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">Current Password</div>
+				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Current Password')}</div>
 
 				<div class="flex-1">
 					<input
@@ -67,7 +70,7 @@
 			</div>
 
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">New Password</div>
+				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('New Password')}</div>
 
 				<div class="flex-1">
 					<input
@@ -81,7 +84,7 @@
 			</div>
 
 			<div class="flex flex-col w-full">
-				<div class=" mb-1 text-xs text-gray-500">Confirm Password</div>
+				<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Confirm Password')}</div>
 
 				<div class="flex-1">
 					<input
@@ -99,7 +102,7 @@
 			<button
 				class=" px-4 py-2 text-xs bg-gray-800 hover:bg-gray-900 dark:bg-gray-700 dark:hover:bg-gray-800 text-gray-100 transition rounded-md font-medium"
 			>
-				Update password
+				{$i18n.t('Update password')}
 			</button>
 		</div>
 	{/if}

src/lib/components/chat/Settings/Advanced.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import AdvancedParams from './Advanced/AdvancedParams.svelte';
+
+	const i18n = getContext('i18n');
 	const dispatch = createEventDispatcher();
 
-	import AdvancedParams from './Advanced/AdvancedParams.svelte';
 	export let saveSettings: Function;
 
 	// Advanced
@@ -55,14 +57,14 @@
 
 <div class="flex flex-col h-full justify-between text-sm">
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
-		<div class=" text-sm font-medium">Parameters</div>
+		<div class=" text-sm font-medium">{$i18n.t('Parameters')}</div>
 
 		<AdvancedParams bind:options />
 		<hr class=" dark:border-gray-700" />
 
 		<div class=" py-1 w-full justify-between">
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Keep Alive</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Keep Alive')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -72,9 +74,9 @@
 					}}
 				>
 					{#if keepAlive === null}
-						<span class="ml-2 self-center"> Default </span>
+						<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 					{:else}
-						<span class="ml-2 self-center"> Custom </span>
+						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
 			</div>
@@ -84,7 +86,7 @@
 					<input
 						class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
 						type="text"
-						placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
+						placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
 						bind:value={keepAlive}
 					/>
 				</div>
@@ -93,7 +95,7 @@
 
 		<div>
 			<div class=" py-1 flex w-full justify-between">
-				<div class=" self-center text-sm font-medium">Request Mode</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Request Mode')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -102,7 +104,7 @@
 					}}
 				>
 					{#if requestFormat === ''}
-						<span class="ml-2 self-center"> Default </span>
+						<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
 					{:else if requestFormat === 'json'}
 						<!-- <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -114,7 +116,7 @@
                                 d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
                             />
                         </svg> -->
-						<span class="ml-2 self-center"> JSON </span>
+						<span class="ml-2 self-center">{$i18n.t('JSON')}</span>
 					{/if}
 				</button>
 			</div>
@@ -147,7 +149,7 @@
 				dispatch('save');
 			}}
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </div>

src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte

@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
 	export let options = {
 		// Advanced
 		seed: 0,
@@ -20,7 +24,7 @@
 <div class=" space-y-3 text-xs">
 	<div>
 		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" w-20 text-xs font-medium self-center">Seed</div>
+			<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Seed')}</div>
 			<div class=" flex-1 self-center">
 				<input
 					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
@@ -36,12 +40,12 @@
 
 	<div>
 		<div class=" py-0.5 flex w-full justify-between">
-			<div class=" w-20 text-xs font-medium self-center">Stop Sequence</div>
+			<div class=" w-20 text-xs font-medium self-center">{$i18n.t('Stop Sequence')}</div>
 			<div class=" flex-1 self-center">
 				<input
 					class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
 					type="text"
-					placeholder="Enter Stop Sequence"
+					placeholder={$i18n.t('Enter stop sequence')}
 					bind:value={options.stop}
 					autocomplete="off"
 				/>
@@ -51,7 +55,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Temperature</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Temperature')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -61,9 +65,9 @@
 				}}
 			>
 				{#if options.temperature === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 				{/if}
 			</button>
 		</div>
@@ -97,7 +101,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -107,9 +111,9 @@
 				}}
 			>
 				{#if options.mirostat === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -143,7 +147,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat Eta</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Eta')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -153,9 +157,9 @@
 				}}
 			>
 				{#if options.mirostat_eta === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -189,7 +193,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Mirostat Tau</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Mirostat Tau')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -199,9 +203,9 @@
 				}}
 			>
 				{#if options.mirostat_tau === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 				{/if}
 			</button>
 		</div>
@@ -235,7 +239,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Top K</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Top K')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -245,9 +249,9 @@
 				}}
 			>
 				{#if options.top_k === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -281,7 +285,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Top P</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Top P')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -291,9 +295,9 @@
 				}}
 			>
 				{#if options.top_p === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -327,7 +331,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Repeat Penalty</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Repeat Penalty')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -337,9 +341,9 @@
 				}}
 			>
 				{#if options.repeat_penalty === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -373,7 +377,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Repeat Last N</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Repeat Last N')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -383,9 +387,9 @@
 				}}
 			>
 				{#if options.repeat_last_n === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -419,7 +423,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Tfs Z</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Tfs Z')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -429,9 +433,9 @@
 				}}
 			>
 				{#if options.tfs_z === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -465,7 +469,7 @@
 
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Context Length</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Context Length')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -475,9 +479,9 @@
 				}}
 			>
 				{#if options.num_ctx === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>
@@ -510,7 +514,7 @@
 	</div>
 	<div class=" py-0.5 w-full justify-between">
 		<div class="flex w-full justify-between">
-			<div class=" self-center text-xs font-medium">Max Tokens</div>
+			<div class=" self-center text-xs font-medium">{$i18n.t('Max Tokens')}</div>
 
 			<button
 				class="p-1 px-3 text-xs flex rounded transition"
@@ -520,9 +524,9 @@
 				}}
 			>
 				{#if options.num_predict === ''}
-					<span class="ml-2 self-center"> Default </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{:else}
-					<span class="ml-2 self-center"> Custom </span>
+					<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 				{/if}
 			</button>
 		</div>

src/lib/components/chat/Settings/Audio.svelte

@@ -1,8 +1,10 @@
 <script lang="ts">
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
+	const i18n = getContext('i18n');
+
 	export let saveSettings: Function;
 
 	// Audio
@@ -101,32 +103,36 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-1 text-sm font-medium">STT Settings</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('STT Settings')}</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Speech-to-Text Engine</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Speech-to-Text Engine')}</div>
 				<div class="flex items-center relative">
 					<select
-						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+						class="dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
 						bind:value={STTEngine}
 						placeholder="Select a mode"
 						on:change={(e) => {
 							if (e.target.value !== '') {
 								navigator.mediaDevices.getUserMedia({ audio: true }).catch(function (err) {
-									toast.error(`Permission denied when accessing microphone: ${err}`);
+									toast.error(
+										$i18n.t(`Permission denied when accessing microphone: {{error}}`, {
+											error: err
+										})
+									);
 									STTEngine = '';
 								});
 							}
 						}}
 					>
-						<option value="">Default (Web API)</option>
-						<option value="whisper-local">Whisper (Local)</option>
+						<option value="">{$i18n.t('Default (Web API)')}</option>
+						<option value="whisper-local">{$i18n.t('Whisper (Local)')}</option>
 					</select>
 				</div>
 			</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Conversation Mode</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Conversation Mode')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -136,15 +142,17 @@
 					type="button"
 				>
 					{#if conversationMode === true}
-						<span class="ml-2 self-center">On</span>
+						<span class="ml-2 self-center">{$i18n.t('On')}</span>
 					{:else}
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Auto-send input after 3 sec.</div>
+				<div class=" self-center text-xs font-medium">
+					{$i18n.t('Auto-send input after 3 sec.')}
+				</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -154,22 +162,22 @@
 					type="button"
 				>
 					{#if speechAutoSend === true}
-						<span class="ml-2 self-center">On</span>
+						<span class="ml-2 self-center">{$i18n.t('On')}</span>
 					{:else}
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
 		</div>
 
 		<div>
-			<div class=" mb-1 text-sm font-medium">TTS Settings</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('TTS Settings')}</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Text-to-Speech Engine</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Text-to-Speech Engine')}</div>
 				<div class="flex items-center relative">
 					<select
-						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
+						class=" dark:bg-gray-900 w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
 						bind:value={TTSEngine}
 						placeholder="Select a mode"
 						on:change={(e) => {
@@ -182,14 +190,14 @@
 							}
 						}}
 					>
-						<option value="">Default (Web API)</option>
-						<option value="openai">Open AI</option>
+						<option value="">{$i18n.t('Default (Web API)')}</option>
+						<option value="openai">{$i18n.t('Open AI')}</option>
 					</select>
 				</div>
 			</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Auto-playback response</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Auto-playback response')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -199,9 +207,9 @@
 					type="button"
 				>
 					{#if responseAutoPlayback === true}
-						<span class="ml-2 self-center">On</span>
+						<span class="ml-2 self-center">{$i18n.t('On')}</span>
 					{:else}
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
@@ -211,7 +219,7 @@
 
 		{#if TTSEngine === ''}
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Voice')}</div>
 				<div class="flex w-full">
 					<div class="flex-1">
 						<select
@@ -219,7 +227,7 @@
 							bind:value={speaker}
 							placeholder="Select a voice"
 						>
-							<option value="" selected>Default</option>
+							<option value="" selected>{$i18n.t('Default')}</option>
 							{#each voices.filter((v) => v.localService === true) as voice}
 								<option value={voice.name} class="bg-gray-100 dark:bg-gray-700">{voice.name}</option
 								>
@@ -230,7 +238,7 @@
 			</div>
 		{:else if TTSEngine === 'openai'}
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Voice</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Voice')}</div>
 				<div class="flex w-full">
 					<div class="flex-1">
 						<select
@@ -254,7 +262,7 @@
 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 			type="submit"
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </form>

src/lib/components/chat/Settings/Chats.svelte

@@ -13,10 +13,12 @@
 		getChatList
 	} from '$lib/apis/chats';
 	import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let saveSettings: Function;
 	// Chats
 	let saveChatHistory = true;
@@ -99,13 +101,13 @@
 	});
 </script>
 
-<div class="flex flex-col h-full justify-between space-y-3 text-sm">
+<div class="flex flex-col h-full justify-between space-y-3 text-sm max-h-[22rem]">
 	<div class=" space-y-2">
 		<div
 			class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition"
 		>
 			<div class="flex w-full justify-between">
-				<div class=" self-center text-sm font-medium">Chat History</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Chat History')}</div>
 
 				<button
 					class="p-1 px-3 text-xs flex rounded transition"
@@ -129,7 +131,7 @@
 							/>
 						</svg>
 
-						<span class="ml-2 self-center"> On </span>
+						<span class="ml-2 self-center"> {$i18n.t('On')} </span>
 					{:else}
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
@@ -147,13 +149,13 @@
 							/>
 						</svg>
 
-						<span class="ml-2 self-center">Off</span>
+						<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 					{/if}
 				</button>
 			</div>
 
 			<div class="text-xs text-left w-full font-medium mt-0.5">
-				This setting does not sync across browsers or devices.
+				{$i18n.t('This setting does not sync across browsers or devices.')}
 			</div>
 		</div>
 
@@ -188,7 +190,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center text-sm font-medium">Import Chats</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Import Chats')}</div>
 			</button>
 			<button
 				class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
@@ -210,7 +212,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center text-sm font-medium">Export Chats</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Export Chats')}</div>
 			</button>
 		</div>
 
@@ -232,7 +234,7 @@
 							clip-rule="evenodd"
 						/>
 					</svg>
-					<span>Are you sure?</span>
+					<span>{$i18n.t('Are you sure?')}</span>
 				</div>
 
 				<div class="flex space-x-1.5 items-center">
@@ -296,7 +298,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center text-sm font-medium">Delete Chats</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Delete Chats')}</div>
 			</button>
 		{/if}
 
@@ -324,7 +326,9 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center text-sm font-medium">Export All Chats (All Users)</div>
+				<div class=" self-center text-sm font-medium">
+					{$i18n.t('Export All Chats (All Users)')}
+				</div>
 			</button>
 
 			<hr class=" dark:border-gray-700" />
@@ -338,7 +342,7 @@
 					});
 
 					if (res) {
-						toast.success('Success');
+						toast.success($i18n.t('Success'));
 					}
 				}}
 			>
@@ -356,7 +360,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center text-sm font-medium">Reset Vector Storage</div>
+				<div class=" self-center text-sm font-medium">{$i18n.t('Reset Vector Storage')}</div>
 			</button>
 		{/if}
 	</div>

src/lib/components/chat/Settings/Connections.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { models, user } from '$lib/stores';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	const dispatch = createEventDispatcher();
 
 	import { getOllamaUrls, getOllamaVersion, updateOllamaUrls } from '$lib/apis/ollama';
@@ -12,6 +12,8 @@
 	} from '$lib/apis/openai';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let getModels: Function;
 
 	// External
@@ -42,7 +44,7 @@
 		});
 
 		if (ollamaVersion) {
-			toast.success('Server connection verified');
+			toast.success($i18n.t('Server connection verified'));
 			await models.set(await getModels());
 		}
 	};
@@ -63,17 +65,17 @@
 		dispatch('save');
 	}}
 >
-	<div class="  pr-1.5 overflow-y-scroll max-h-[20.5rem] space-y-3">
+	<div class="  pr-1.5 overflow-y-scroll max-h-[22rem] space-y-3">
 		<div class=" space-y-3">
 			<div class="mt-2 space-y-2 pr-1.5">
 				<div class="flex justify-between items-center text-sm">
-					<div class="  font-medium">OpenAI API</div>
+					<div class="  font-medium">{$i18n.t('OpenAI API')}</div>
 					<button
 						class=" text-xs font-medium text-gray-500"
 						type="button"
 						on:click={() => {
 							showOpenAI = !showOpenAI;
-						}}>{showOpenAI ? 'Hide' : 'Show'}</button
+						}}>{showOpenAI ? $i18n.t('Hide') : $i18n.t('Show')}</button
 					>
 				</div>
 
@@ -84,7 +86,7 @@
 								<div class="flex-1">
 									<input
 										class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-										placeholder="API Base URL"
+										placeholder={$i18n.t('API Base URL')}
 										bind:value={url}
 										autocomplete="off"
 									/>
@@ -93,7 +95,7 @@
 								<div class="flex-1">
 									<input
 										class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-										placeholder="API Key"
+										placeholder={$i18n.t('API Key')}
 										bind:value={OPENAI_API_KEYS[idx]}
 										autocomplete="off"
 									/>
@@ -143,7 +145,8 @@
 								</div>
 							</div>
 							<div class=" mb-1 text-xs text-gray-400 dark:text-gray-500">
-								WebUI will make requests to <span class=" text-gray-200">'{url}/models'</span>
+								{$i18n.t('WebUI will make requests to')}
+								<span class=" text-gray-200">'{url}/models'</span>
 							</div>
 						{/each}
 					</div>
@@ -154,7 +157,7 @@
 		<hr class=" dark:border-gray-700" />
 
 		<div>
-			<div class=" mb-2.5 text-sm font-medium">Ollama Base URL</div>
+			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama Base URL')}</div>
 			<div class="flex w-full gap-1.5">
 				<div class="flex-1 flex flex-col gap-2">
 					{#each OLLAMA_BASE_URLS as url, idx}
@@ -233,13 +236,13 @@
 			</div>
 
 			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-				Trouble accessing Ollama?
+				{$i18n.t('Trouble accessing Ollama?')}
 				<a
-					class=" text-gray-300 font-medium"
+					class=" text-gray-300 font-medium underline"
 					href="https://github.com/open-webui/open-webui#troubleshooting"
 					target="_blank"
 				>
-					Click here for help.
+					{$i18n.t('Click here for help.')}
 				</a>
 			</div>
 		</div>
@@ -250,7 +253,7 @@
 			class="  px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 			type="submit"
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </form>

src/lib/components/chat/Settings/General.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
+	import { getLanguages } from '$lib/i18n';
 	const dispatch = createEventDispatcher();
 
-	import { models, user } from '$lib/stores';
+	import { models, user, theme } from '$lib/stores';
+
+	const i18n = getContext('i18n');
 
 	import AdvancedParams from './Advanced/AdvancedParams.svelte';
 
@@ -12,7 +15,10 @@
 
 	// General
 	let themes = ['dark', 'light', 'rose-pine dark', 'rose-pine-dawn light'];
-	let theme = 'dark';
+	let selectedTheme = 'system';
+
+	let languages = [];
+	let lang = $i18n.language;
 	let notificationEnabled = false;
 	let system = '';
 
@@ -63,9 +69,11 @@
 	};
 
 	onMount(async () => {
+		selectedTheme = localStorage.theme ?? 'system';
+
 		let settings = JSON.parse(localStorage.getItem('settings') ?? '{}');
+		languages = await getLanguages();
 
-		theme = localStorage.theme ?? 'dark';
 		notificationEnabled = settings.notificationEnabled ?? false;
 		system = settings.system ?? '';
 
@@ -81,77 +89,93 @@
 		options = { ...options, ...settings.options };
 		options.stop = (settings?.options?.stop ?? []).join(',');
 	});
+
+	const applyTheme = (_theme: string) => {
+		let themeToApply = _theme;
+
+		if (_theme === 'system') {
+			themeToApply = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+		}
+
+		themes
+			.filter((e) => e !== themeToApply)
+			.forEach((e) => {
+				e.split(' ').forEach((e) => {
+					document.documentElement.classList.remove(e);
+				});
+			});
+
+		themeToApply.split(' ').forEach((e) => {
+			document.documentElement.classList.add(e);
+		});
+
+		console.log(_theme);
+	};
+
+	const themeChangeHandler = (_theme: string) => {
+		theme.set(_theme);
+		localStorage.setItem('theme', _theme);
+
+		applyTheme(_theme);
+	};
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class="  pr-1.5 overflow-y-scroll max-h-[20.5rem]">
+	<div class="  pr-1.5 overflow-y-scroll max-h-[22rem]">
 		<div class="">
-			<div class=" mb-1 text-sm font-medium">WebUI Settings</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Settings')}</div>
 
-			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Theme</div>
+			<div class="flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">{$i18n.t('Theme')}</div>
 				<div class="flex items-center relative">
-					<div class=" absolute right-16">
-						{#if theme === 'dark'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path
-									fill-rule="evenodd"
-									d="M7.455 2.004a.75.75 0 01.26.77 7 7 0 009.958 7.967.75.75 0 011.067.853A8.5 8.5 0 116.647 1.921a.75.75 0 01.808.083z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						{:else if theme === 'light'}
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 20 20"
-								fill="currentColor"
-								class="w-4 h-4 self-center"
-							>
-								<path
-									d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
-								/>
-							</svg>
-						{/if}
-					</div>
-
 					<select
-						class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
-						bind:value={theme}
+						class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
+						bind:value={selectedTheme}
 						placeholder="Select a theme"
-						on:change={(e) => {
-							localStorage.theme = theme;
-
-							themes
-								.filter((e) => e !== theme)
-								.forEach((e) => {
-									e.split(' ').forEach((e) => {
-										document.documentElement.classList.remove(e);
-									});
-								});
-
-							theme.split(' ').forEach((e) => {
-								document.documentElement.classList.add(e);
-							});
+						on:change={() => themeChangeHandler(selectedTheme)}
+					>
+						<option value="system">⚙️ {$i18n.t('System')}</option>
+						<option value="dark">🌑 {$i18n.t('Dark')}</option>
+						<option value="light">☀️ {$i18n.t('Light')}</option>
+						<option value="rose-pine dark">🪻 {$i18n.t('Rosé Pine')}</option>
+						<option value="rose-pine-dawn light">🌷 {$i18n.t('Rosé Pine Dawn')}</option>
+					</select>
+				</div>
+			</div>
 
-							console.log(theme);
+			<div class=" flex w-full justify-between">
+				<div class=" self-center text-xs font-medium">{$i18n.t('Language')}</div>
+				<div class="flex items-center relative">
+					<select
+						class=" dark:bg-gray-900 w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
+						bind:value={lang}
+						placeholder="Select a language"
+						on:change={(e) => {
+							$i18n.changeLanguage(lang);
 						}}
 					>
-						<option value="dark">Dark</option>
-						<option value="light">Light</option>
-						<option value="rose-pine dark">Rosé Pine</option>
-						<option value="rose-pine-dawn light">Rosé Pine Dawn</option>
+						{#each languages as language}
+							<option value={language['code']}>{language['title']}</option>
+						{/each}
 					</select>
 				</div>
 			</div>
+			{#if $i18n.language === 'en-US'}
+				<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
+					Couldn't find your language?
+					<a
+						class=" text-gray-300 font-medium underline"
+						href="https://github.com/open-webui/open-webui/blob/main/docs/CONTRIBUTING.md#-translations-and-internationalization"
+						target="_blank"
+					>
+						Help us translate Open WebUI!
+					</a>
+				</div>
+			{/if}
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Notification</div>
+					<div class=" self-center text-xs font-medium">{$i18n.t('Desktop Notifications')}</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
@@ -161,9 +185,9 @@
 						type="button"
 					>
 						{#if notificationEnabled === true}
-							<span class="ml-2 self-center">On</span>
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">Off</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
@@ -173,7 +197,7 @@
 		<hr class=" dark:border-gray-700 my-3" />
 
 		<div>
-			<div class=" my-2.5 text-sm font-medium">System Prompt</div>
+			<div class=" my-2.5 text-sm font-medium">{$i18n.t('System Prompt')}</div>
 			<textarea
 				bind:value={system}
 				class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
@@ -183,13 +207,13 @@
 
 		<div class="mt-2 space-y-3 pr-1.5">
 			<div class="flex justify-between items-center text-sm">
-				<div class="  font-medium">Advanced Parameters</div>
+				<div class="  font-medium">{$i18n.t('Advanced Parameters')}</div>
 				<button
 					class=" text-xs font-medium text-gray-500"
 					type="button"
 					on:click={() => {
 						showAdvanced = !showAdvanced;
-					}}>{showAdvanced ? 'Hide' : 'Show'}</button
+					}}>{showAdvanced ? $i18n.t('Hide') : $i18n.t('Show')}</button
 				>
 			</div>
 
@@ -199,7 +223,7 @@
 
 				<div class=" py-1 w-full justify-between">
 					<div class="flex w-full justify-between">
-						<div class=" self-center text-xs font-medium">Keep Alive</div>
+						<div class=" self-center text-xs font-medium">{$i18n.t('Keep Alive')}</div>
 
 						<button
 							class="p-1 px-3 text-xs flex rounded transition"
@@ -209,9 +233,9 @@
 							}}
 						>
 							{#if keepAlive === null}
-								<span class="ml-2 self-center"> Default </span>
+								<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
 							{:else}
-								<span class="ml-2 self-center"> Custom </span>
+								<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 							{/if}
 						</button>
 					</div>
@@ -221,7 +245,7 @@
 							<input
 								class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
 								type="text"
-								placeholder={`e.g.) "30s","10m". Valid time units are "s", "m", "h".`}
+								placeholder={$i18n.t("e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.")}
 								bind:value={keepAlive}
 							/>
 						</div>
@@ -230,7 +254,7 @@
 
 				<div>
 					<div class=" py-1 flex w-full justify-between">
-						<div class=" self-center text-sm font-medium">Request Mode</div>
+						<div class=" self-center text-sm font-medium">{$i18n.t('Request Mode')}</div>
 
 						<button
 							class="p-1 px-3 text-xs flex rounded transition"
@@ -239,7 +263,7 @@
 							}}
 						>
 							{#if requestFormat === ''}
-								<span class="ml-2 self-center"> Default </span>
+								<span class="ml-2 self-center"> {$i18n.t('Default')} </span>
 							{:else if requestFormat === 'json'}
 								<!-- <svg
                             xmlns="http://www.w3.org/2000/svg"
@@ -251,7 +275,7 @@
                                 d="M10 2a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 2zM10 15a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 15zM10 7a3 3 0 100 6 3 3 0 000-6zM15.657 5.404a.75.75 0 10-1.06-1.06l-1.061 1.06a.75.75 0 001.06 1.06l1.06-1.06zM6.464 14.596a.75.75 0 10-1.06-1.06l-1.06 1.06a.75.75 0 001.06 1.06l1.06-1.06zM18 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 0118 10zM5 10a.75.75 0 01-.75.75h-1.5a.75.75 0 010-1.5h1.5A.75.75 0 015 10zM14.596 15.657a.75.75 0 001.06-1.06l-1.06-1.061a.75.75 0 10-1.06 1.06l1.06 1.06zM5.404 6.464a.75.75 0 001.06-1.06l-1.06-1.06a.75.75 0 10-1.061 1.06l1.06 1.06z"
                             />
                         </svg> -->
-								<span class="ml-2 self-center"> JSON </span>
+								<span class="ml-2 self-center"> {$i18n.t('JSON')} </span>
 							{/if}
 						</button>
 					</div>
@@ -286,7 +310,7 @@
 				dispatch('save');
 			}}
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </div>

src/lib/components/chat/Settings/Images.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	import { config, user } from '$lib/stores';
 	import {
 		getAUTOMATIC1111Url,
@@ -21,6 +21,8 @@
 	import { getBackendConfig } from '$lib/apis';
 	const dispatch = createEventDispatcher();
 
+	const i18n = getContext('i18n');
+
 	export let saveSettings: Function;
 
 	let loading = false;
@@ -61,7 +63,7 @@
 			await getModels();
 
 			if (models) {
-				toast.success('Server connection verified');
+				toast.success($i18n.t('Server connection verified'));
 			}
 		} else {
 			AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
@@ -136,39 +138,41 @@
 		loading = false;
 	}}
 >
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[20.5rem]">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[24rem]">
 		<div>
-			<div class=" mb-1 text-sm font-medium">Image Settings</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('Image Settings')}</div>
 
 			<div class=" py-0.5 flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Image Generation Engine</div>
+				<div class=" self-center text-xs font-medium">{$i18n.t('Image Generation Engine')}</div>
 				<div class="flex items-center relative">
 					<select
 						class="w-fit pr-8 rounded px-2 p-1 text-xs bg-transparent outline-none text-right"
 						bind:value={imageGenerationEngine}
-						placeholder="Select a mode"
+						placeholder={$i18n.t('Select a mode')}
 						on:change={async () => {
 							await updateImageGeneration();
 						}}
 					>
-						<option value="">Default (Automatic1111)</option>
-						<option value="openai">Open AI (Dall-E)</option>
+						<option value="">{$i18n.t('Default (Automatic1111)')}</option>
+						<option value="openai">{$i18n.t('Open AI (Dall-E)')}</option>
 					</select>
 				</div>
 			</div>
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Image Generation (Experimental)</div>
+					<div class=" self-center text-xs font-medium">
+						{$i18n.t('Image Generation (Experimental)')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
 						on:click={() => {
 							if (imageGenerationEngine === '' && AUTOMATIC1111_BASE_URL === '') {
-								toast.error('AUTOMATIC1111 Base URL is required.');
+								toast.error($i18n.t('AUTOMATIC1111 Base URL is required.'));
 								enableImageGeneration = false;
 							} else if (imageGenerationEngine === 'openai' && OPENAI_API_KEY === '') {
-								toast.error('OpenAI API Key is required.');
+								toast.error($i18n.t('OpenAI API Key is required.'));
 								enableImageGeneration = false;
 							} else {
 								enableImageGeneration = !enableImageGeneration;
@@ -179,9 +183,9 @@
 						type="button"
 					>
 						{#if enableImageGeneration === true}
-							<span class="ml-2 self-center">On</span>
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">Off</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
@@ -190,12 +194,12 @@
 		<hr class=" dark:border-gray-700" />
 
 		{#if imageGenerationEngine === ''}
-			<div class=" mb-2.5 text-sm font-medium">AUTOMATIC1111 Base URL</div>
+			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('AUTOMATIC1111 Base URL')}</div>
 			<div class="flex w-full">
 				<div class="flex-1 mr-2">
 					<input
 						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-						placeholder="Enter URL (e.g. http://127.0.0.1:7860/)"
+						placeholder={$i18n.t('Enter URL (e.g. http://127.0.0.1:7860/)')}
 						bind:value={AUTOMATIC1111_BASE_URL}
 					/>
 				</div>
@@ -224,22 +228,22 @@
 			</div>
 
 			<div class="mt-2 text-xs text-gray-400 dark:text-gray-500">
-				Include `--api` flag when running stable-diffusion-webui
+				{$i18n.t('Include `--api` flag when running stable-diffusion-webui')}
 				<a
 					class=" text-gray-300 font-medium"
 					href="https://github.com/AUTOMATIC1111/stable-diffusion-webui/discussions/3734"
 					target="_blank"
 				>
-					(e.g. `sh webui.sh --api`)
+					{$i18n.t('(e.g. `sh webui.sh --api`)')}
 				</a>
 			</div>
 		{:else if imageGenerationEngine === 'openai'}
-			<div class=" mb-2.5 text-sm font-medium">OpenAI API Key</div>
+			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('OpenAI API Key')}</div>
 			<div class="flex w-full">
 				<div class="flex-1 mr-2">
 					<input
 						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-						placeholder="Enter API Key"
+						placeholder={$i18n.t('Enter API Key')}
 						bind:value={OPENAI_API_KEY}
 					/>
 				</div>
@@ -250,16 +254,16 @@
 			<hr class=" dark:border-gray-700" />
 
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Default Model</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Default Model')}</div>
 				<div class="flex w-full">
 					<div class="flex-1 mr-2">
 						<select
 							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 							bind:value={selectedModel}
-							placeholder="Select a model"
+							placeholder={$i18n.t('Select a model')}
 						>
 							{#if !selectedModel}
-								<option value="" disabled selected>Select a model</option>
+								<option value="" disabled selected>{$i18n.t('Select a model')}</option>
 							{/if}
 							{#each models ?? [] as model}
 								<option value={model.id} class="bg-gray-100 dark:bg-gray-700">{model.name}</option>
@@ -270,12 +274,12 @@
 			</div>
 
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Image Size</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Image Size')}</div>
 				<div class="flex w-full">
 					<div class="flex-1 mr-2">
 						<input
 							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							placeholder="Enter Image Size (e.g. 512x512)"
+							placeholder={$i18n.t('Enter Image Size (e.g. 512x512)')}
 							bind:value={imageSize}
 						/>
 					</div>
@@ -283,12 +287,12 @@
 			</div>
 
 			<div>
-				<div class=" mb-2.5 text-sm font-medium">Set Steps</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Steps')}</div>
 				<div class="flex w-full">
 					<div class="flex-1 mr-2">
 						<input
 							class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-							placeholder="Enter Number of Steps (e.g. 50)"
+							placeholder={$i18n.t('Enter Number of Steps (e.g. 50)')}
 							bind:value={steps}
 						/>
 					</div>
@@ -305,7 +309,7 @@
 			type="submit"
 			disabled={loading}
 		>
-			Save
+			{$i18n.t('Save')}
 
 			{#if loading}
 				<div class="ml-2 self-center">

src/lib/components/chat/Settings/Interface.svelte

@@ -2,10 +2,12 @@
 	import { getBackendConfig } from '$lib/apis';
 	import { setDefaultPromptSuggestions } from '$lib/apis/configs';
 	import { config, models, user } from '$lib/stores';
-	import { createEventDispatcher, onMount } from 'svelte';
+	import { createEventDispatcher, onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	const dispatch = createEventDispatcher();
 
+	const i18n = getContext('i18n');
+
 	export let saveSettings: Function;
 
 	// Addons
@@ -82,7 +84,9 @@
 		titleAutoGenerateModel = settings.titleAutoGenerateModel ?? '';
 		titleGenerationPrompt =
 			settings.titleGenerationPrompt ??
-			`Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}`;
+			$i18n.t(
+				"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':"
+			) + ' {{prompt}}';
 	});
 </script>
 
@@ -93,13 +97,13 @@
 		dispatch('save');
 	}}
 >
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-[22rem]">
 		<div>
-			<div class=" mb-1 text-sm font-medium">WebUI Add-ons</div>
+			<div class=" mb-1 text-sm font-medium">{$i18n.t('WebUI Add-ons')}</div>
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Title Auto-Generation</div>
+					<div class=" self-center text-xs font-medium">{$i18n.t('Title Auto-Generation')}</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
@@ -109,9 +113,9 @@
 						type="button"
 					>
 						{#if titleAutoGenerate === true}
-							<span class="ml-2 self-center">On</span>
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">Off</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
@@ -119,7 +123,9 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Response AutoCopy to Clipboard</div>
+					<div class=" self-center text-xs font-medium">
+						{$i18n.t('Response AutoCopy to Clipboard')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
@@ -129,9 +135,9 @@
 						type="button"
 					>
 						{#if responseAutoCopy === true}
-							<span class="ml-2 self-center">On</span>
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">Off</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
@@ -139,7 +145,7 @@
 
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
-					<div class=" self-center text-xs font-medium">Full Screen Mode</div>
+					<div class=" self-center text-xs font-medium">{$i18n.t('Full Screen Mode')}</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
@@ -149,9 +155,9 @@
 						type="button"
 					>
 						{#if fullScreenMode === true}
-							<span class="ml-2 self-center">On</span>
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">Off</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
@@ -160,7 +166,7 @@
 			<div>
 				<div class=" py-0.5 flex w-full justify-between">
 					<div class=" self-center text-xs font-medium">
-						Display the username instead of "You" in the Chat
+						{$i18n.t('Display the username instead of You in the Chat')}
 					</div>
 
 					<button
@@ -171,9 +177,9 @@
 						type="button"
 					>
 						{#if showUsername === true}
-							<span class="ml-2 self-center">On</span>
+							<span class="ml-2 self-center">{$i18n.t('On')}</span>
 						{:else}
-							<span class="ml-2 self-center">Off</span>
+							<span class="ml-2 self-center">{$i18n.t('Off')}</span>
 						{/if}
 					</button>
 				</div>
@@ -183,15 +189,15 @@
 		<hr class=" dark:border-gray-700" />
 
 		<div>
-			<div class=" mb-2.5 text-sm font-medium">Set Title Auto-Generation Model</div>
+			<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Set Title Auto-Generation Model')}</div>
 			<div class="flex w-full">
 				<div class="flex-1 mr-2">
 					<select
 						class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 						bind:value={titleAutoGenerateModel}
-						placeholder="Select a model"
+						placeholder={$i18n.t('Select a model')}
 					>
-						<option value="" selected>Current Model</option>
+						<option value="" selected>{$i18n.t('Current Model')}</option>
 						{#each $models as model}
 							{#if model.size != null}
 								<option value={model.name} class="bg-gray-100 dark:bg-gray-700">
@@ -202,8 +208,9 @@
 					</select>
 				</div>
 			</div>
+
 			<div class="mt-3 mr-2">
-				<div class=" mb-2.5 text-sm font-medium">Title Generation Prompt</div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Title Generation Prompt')}</div>
 				<textarea
 					bind:value={titleGenerationPrompt}
 					class="w-full rounded-lg p-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none resize-none"
@@ -217,7 +224,9 @@
 
 			<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 				<div class="flex w-full justify-between mb-2">
-					<div class=" self-center text-sm font-semibold">Default Prompt Suggestions</div>
+					<div class=" self-center text-sm font-semibold">
+						{$i18n.t('Default Prompt Suggestions')}
+					</div>
 
 					<button
 						class="p-1 px-3 text-xs flex rounded transition"
@@ -290,19 +299,19 @@
 
 				{#if promptSuggestions.length > 0}
 					<div class="text-xs text-left w-full mt-2">
-						Adjusting these settings will apply changes universally to all users.
+						{$i18n.t('Adjusting these settings will apply changes universally to all users.')}
 					</div>
 				{/if}
 			</div>
 		{/if}
 	</div>
 
-	<div class="flex justify-end pt-3 text-sm font-medium">
+	<div class="flex justify-end text-sm font-medium">
 		<button
 			class=" px-4 py-2 bg-emerald-700 hover:bg-emerald-800 text-gray-100 transition rounded-lg"
 			type="submit"
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </form>

src/lib/components/chat/Settings/Models.svelte

@@ -12,10 +12,12 @@
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, models, user } from '$lib/stores';
 	import { splitStream } from '$lib/utils';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { addLiteLLMModel, deleteLiteLLMModel, getLiteLLMModelInfo } from '$lib/apis/litellm';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let getModels: Function;
 
 	let showLiteLLM = false;
@@ -134,11 +136,17 @@
 	const pullModelHandler = async () => {
 		const sanitizedModelTag = modelTag.trim();
 		if (modelDownloadStatus[sanitizedModelTag]) {
-			toast.error(`Model '${sanitizedModelTag}' is already in queue for downloading.`);
+			toast.error(
+				$i18n.t(`Model '{{modelTag}}' is already in queue for downloading.`, {
+					modelTag: sanitizedModelTag
+				})
+			);
 			return;
 		}
 		if (Object.keys(modelDownloadStatus).length === 3) {
-			toast.error('Maximum of 3 models can be downloaded simultaneously. Please try again later.');
+			toast.error(
+				$i18n.t('Maximum of 3 models can be downloaded simultaneously. Please try again later.')
+			);
 			return;
 		}
 
@@ -156,10 +164,12 @@
 				if (!data.success) {
 					toast.error(data.error);
 				} else {
-					toast.success(`Model '${modelName}' has been successfully downloaded.`);
+					toast.success(
+						$i18n.t(`Model '{{modelName}}' has been successfully downloaded.`, { modelName })
+					);
 
 					const notification = new Notification($WEBUI_NAME, {
-						body: `Model '${modelName}' has been successfully downloaded.`,
+						body: $i18n.t(`Model '{{modelName}}' has been successfully downloaded.`, { modelName }),
 						icon: `${WEBUI_BASE_URL}/static/favicon.png`
 					});
 
@@ -323,7 +333,7 @@
 		);
 
 		if (res) {
-			toast.success(`Deleted ${deleteModelTag}`);
+			toast.success($i18n.t(`Deleted {{deleteModelTag}}`, { deleteModelTag }));
 		}
 
 		deleteModelTag = '';
@@ -410,7 +420,7 @@
 				}
 			}
 		} else {
-			toast.error(`Model ${liteLLMModelName} already exists.`);
+			toast.error($i18n.t(`Model {{modelName}} already exists.`, { modelName: liteLLMModelName }));
 		}
 
 		liteLLMModelName = '';
@@ -459,10 +469,10 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
-	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[23rem]">
+	<div class=" space-y-3 pr-1.5 overflow-y-scroll h-[24rem]">
 		{#if ollamaVersion}
 			<div class="space-y-2 pr-1.5">
-				<div class="text-sm font-medium">Manage Ollama Models</div>
+				<div class="text-sm font-medium">{$i18n.t('Manage Ollama Models')}</div>
 
 				{#if OLLAMA_URLS.length > 0}
 					<div class="flex gap-2">
@@ -470,7 +480,7 @@
 							<select
 								class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 								bind:value={selectedOllamaUrlIdx}
-								placeholder="Select an Ollama instance"
+								placeholder={$i18n.t('Select an Ollama instance')}
 							>
 								{#each OLLAMA_URLS as url, idx}
 									<option value={idx} class="bg-gray-100 dark:bg-gray-700">{url}</option>
@@ -513,12 +523,14 @@
 
 				<div class="space-y-2">
 					<div>
-						<div class=" mb-2 text-sm font-medium">Pull a model from Ollama.com</div>
+						<div class=" mb-2 text-sm font-medium">{$i18n.t('Pull a model from Ollama.com')}</div>
 						<div class="flex w-full">
 							<div class="flex-1 mr-2">
 								<input
 									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-									placeholder="Enter model tag (e.g. mistral:7b)"
+									placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
+										modelTag: 'mistral:7b'
+									})}
 									bind:value={modelTag}
 								/>
 							</div>
@@ -573,14 +585,13 @@
 							</button>
 						</div>
 
-						<div>
-							<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
-								To access the available model names for downloading, <a
-									class=" text-gray-500 dark:text-gray-300 font-medium underline"
-									href="https://ollama.com/library"
-									target="_blank">click here.</a
-								>
-							</div>
+						<div class="mt-2 mb-1 text-xs text-gray-400 dark:text-gray-500">
+							{$i18n.t('To access the available model names for downloading,')}
+							<a
+								class=" text-gray-500 dark:text-gray-300 font-medium underline"
+								href="https://ollama.com/library"
+								target="_blank">{$i18n.t('click here.')}</a
+							>
 						</div>
 
 						{#if Object.keys(modelDownloadStatus).length > 0}
@@ -604,16 +615,16 @@
 					</div>
 
 					<div>
-						<div class=" mb-2 text-sm font-medium">Delete a model</div>
+						<div class=" mb-2 text-sm font-medium">{$i18n.t('Delete a model')}</div>
 						<div class="flex w-full">
 							<div class="flex-1 mr-2">
 								<select
 									class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 									bind:value={deleteModelTag}
-									placeholder="Select a model"
+									placeholder={$i18n.t('Select a model')}
 								>
 									{#if !deleteModelTag}
-										<option value="" disabled selected>Select a model</option>
+										<option value="" disabled selected>{$i18n.t('Select a model')}</option>
 									{/if}
 									{#each $models.filter((m) => m.size != null && (selectedOllamaUrlIdx === null ? true : (m?.urls ?? []).includes(selectedOllamaUrlIdx))) as model}
 										<option value={model.name} class="bg-gray-100 dark:bg-gray-700"
@@ -646,13 +657,13 @@
 
 					<div class="pt-1">
 						<div class="flex justify-between items-center text-xs">
-							<div class=" text-sm font-medium">Experimental</div>
+							<div class=" text-sm font-medium">{$i18n.t('Experimental')}</div>
 							<button
 								class=" text-xs font-medium text-gray-500"
 								type="button"
 								on:click={() => {
 									showExperimentalOllama = !showExperimentalOllama;
-								}}>{showExperimentalOllama ? 'Hide' : 'Show'}</button
+								}}>{showExperimentalOllama ? $i18n.t('Hide') : $i18n.t('Show')}</button
 							>
 						</div>
 					</div>
@@ -664,7 +675,7 @@
 							}}
 						>
 							<div class=" mb-2 flex w-full justify-between">
-								<div class="  text-sm font-medium">Upload a GGUF model</div>
+								<div class="  text-sm font-medium">{$i18n.t('Upload a GGUF model')}</div>
 
 								<button
 									class="p-1 px-3 text-xs flex rounded transition"
@@ -678,9 +689,9 @@
 									type="button"
 								>
 									{#if modelUploadMode === 'file'}
-										<span class="ml-2 self-center">File Mode</span>
+										<span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
 									{:else}
-										<span class="ml-2 self-center">URL Mode</span>
+										<span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
 									{/if}
 								</button>
 							</div>
@@ -712,7 +723,7 @@
 												{#if modelInputFile && modelInputFile.length > 0}
 													{modelInputFile[0].name}
 												{:else}
-													Click here to select
+													{$i18n.t('Click here to select')}
 												{/if}
 											</button>
 										</div>
@@ -726,7 +737,7 @@
 												type="url"
 												required
 												bind:value={modelFileUrl}
-												placeholder="Type Hugging Face Resolve (Download) URL"
+												placeholder={$i18n.t('Type Hugging Face Resolve (Download) URL')}
 											/>
 										</div>
 									{/if}
@@ -786,7 +797,7 @@
 							{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
 								<div>
 									<div>
-										<div class=" my-2.5 text-sm font-medium">Modelfile Content</div>
+										<div class=" my-2.5 text-sm font-medium">{$i18n.t('Modelfile Content')}</div>
 										<textarea
 											bind:value={modelFileContent}
 											class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
@@ -796,16 +807,17 @@
 								</div>
 							{/if}
 							<div class=" mt-1 text-xs text-gray-400 dark:text-gray-500">
-								To access the GGUF models available for downloading, <a
+								{$i18n.t('To access the GGUF models available for downloading,')}
+								<a
 									class=" text-gray-500 dark:text-gray-300 font-medium underline"
 									href="https://huggingface.co/models?search=gguf"
-									target="_blank">click here.</a
+									target="_blank">{$i18n.t('click here.')}</a
 								>
 							</div>
 
 							{#if uploadProgress !== null}
 								<div class="mt-2">
-									<div class=" mb-2 text-xs">Upload Progress</div>
+									<div class=" mb-2 text-xs">{$i18n.t('Upload Progress')}</div>
 
 									<div class="w-full rounded-full dark:bg-gray-800">
 										<div
@@ -832,13 +844,13 @@
 				<div>
 					<div class="mb-2">
 						<div class="flex justify-between items-center text-xs">
-							<div class=" text-sm font-medium">Manage LiteLLM Models</div>
+							<div class=" text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div>
 							<button
 								class=" text-xs font-medium text-gray-500"
 								type="button"
 								on:click={() => {
 									showLiteLLM = !showLiteLLM;
-								}}>{showLiteLLM ? 'Hide' : 'Show'}</button
+								}}>{showLiteLLM ? $i18n.t('Hide') : $i18n.t('Show')}</button
 							>
 						</div>
 					</div>
@@ -846,14 +858,16 @@
 					{#if showLiteLLM}
 						<div>
 							<div class="flex justify-between items-center text-xs">
-								<div class=" text-sm font-medium">Add a model</div>
+								<div class=" text-sm font-medium">{$i18n.t('Add a model')}</div>
 								<button
 									class=" text-xs font-medium text-gray-500"
 									type="button"
 									on:click={() => {
 										showLiteLLMParams = !showLiteLLMParams;
 									}}
-									>{showLiteLLMParams ? 'Hide Additional Params' : 'Show Additional Params'}</button
+									>{showLiteLLMParams
+										? $i18n.t('Hide Additional Params')
+										: $i18n.t('Show Additional Params')}</button
 								>
 							</div>
 						</div>
@@ -863,7 +877,7 @@
 								<div class="flex-1 mr-2">
 									<input
 										class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-										placeholder="Enter LiteLLM Model (litellm_params.model)"
+										placeholder={$i18n.t('Enter LiteLLM Model (litellm_params.model)')}
 										bind:value={liteLLMModel}
 										autocomplete="off"
 									/>
@@ -890,7 +904,7 @@
 
 							{#if showLiteLLMParams}
 								<div>
-									<div class=" mb-1.5 text-sm font-medium">Model Name</div>
+									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('Model Name')}</div>
 									<div class="flex w-full">
 										<div class="flex-1">
 											<input
@@ -904,12 +918,14 @@
 								</div>
 
 								<div>
-									<div class=" mb-1.5 text-sm font-medium">API Base URL</div>
+									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Base URL')}</div>
 									<div class="flex w-full">
 										<div class="flex-1">
 											<input
 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-												placeholder="Enter LiteLLM API Base URL (litellm_params.api_base)"
+												placeholder={$i18n.t(
+													'Enter LiteLLM API Base URL (litellm_params.api_base)'
+												)}
 												bind:value={liteLLMAPIBase}
 												autocomplete="off"
 											/>
@@ -918,12 +934,12 @@
 								</div>
 
 								<div>
-									<div class=" mb-1.5 text-sm font-medium">API Key</div>
+									<div class=" mb-1.5 text-sm font-medium">{$i18n.t('API Key')}</div>
 									<div class="flex w-full">
 										<div class="flex-1">
 											<input
 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-												placeholder="Enter LiteLLM API Key (litellm_params.api_key)"
+												placeholder={$i18n.t('Enter LiteLLM API Key (litellm_params.api_key)')}
 												bind:value={liteLLMAPIKey}
 												autocomplete="off"
 											/>
@@ -932,12 +948,12 @@
 								</div>
 
 								<div>
-									<div class="mb-1.5 text-sm font-medium">API RPM</div>
+									<div class="mb-1.5 text-sm font-medium">{$i18n.t('API RPM')}</div>
 									<div class="flex w-full">
 										<div class="flex-1">
 											<input
 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-												placeholder="Enter LiteLLM API RPM (litellm_params.rpm)"
+												placeholder={$i18n.t('Enter LiteLLM API RPM (litellm_params.rpm)')}
 												bind:value={liteLLMRPM}
 												autocomplete="off"
 											/>
@@ -946,12 +962,12 @@
 								</div>
 
 								<div>
-									<div class="mb-1.5 text-sm font-medium">Max Tokens</div>
+									<div class="mb-1.5 text-sm font-medium">{$i18n.t('Max Tokens')}</div>
 									<div class="flex w-full">
 										<div class="flex-1">
 											<input
 												class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
-												placeholder="Enter Max Tokens (litellm_params.max_tokens)"
+												placeholder={$i18n.t('Enter Max Tokens (litellm_params.max_tokens)')}
 												bind:value={liteLLMMaxTokens}
 												type="number"
 												min="1"
@@ -964,27 +980,27 @@
 						</div>
 
 						<div class="mb-2 text-xs text-gray-400 dark:text-gray-500">
-							Not sure what to add?
+							{$i18n.t('Not sure what to add?')}
 							<a
 								class=" text-gray-300 font-medium underline"
 								href="https://litellm.vercel.app/docs/proxy/configs#quick-start"
 								target="_blank"
 							>
-								Click here for help.
+								{$i18n.t('Click here for help.')}
 							</a>
 						</div>
 
 						<div>
-							<div class=" mb-2.5 text-sm font-medium">Delete a model</div>
+							<div class=" mb-2.5 text-sm font-medium">{$i18n.t('Delete a model')}</div>
 							<div class="flex w-full">
 								<div class="flex-1 mr-2">
 									<select
 										class="w-full rounded-lg py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-850 outline-none"
 										bind:value={deleteLiteLLMModelId}
-										placeholder="Select a model"
+										placeholder={$i18n.t('Select a model')}
 									>
 										{#if !deleteLiteLLMModelId}
-											<option value="" disabled selected>Select a model</option>
+											<option value="" disabled selected>{$i18n.t('Select a model')}</option>
 										{/if}
 										{#each liteLLMModelInfo as model}
 											<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700"

src/lib/components/chat/SettingsModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { models, settings, user } from '$lib/stores';
 
@@ -17,6 +18,8 @@
 	import Connections from './Settings/Connections.svelte';
 	import Images from './Settings/Images.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 
 	const saveSettings = async (updated) => {
@@ -58,7 +61,7 @@
 <Modal bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Settings</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -106,7 +109,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">General</div>
+					<div class=" self-center">{$i18n.t('General')}</div>
 				</button>
 
 				{#if $user?.role === 'admin'}
@@ -131,7 +134,7 @@
 								/>
 							</svg>
 						</div>
-						<div class=" self-center">Connections</div>
+						<div class=" self-center">{$i18n.t('Connections')}</div>
 					</button>
 
 					<button
@@ -157,7 +160,7 @@
 								/>
 							</svg>
 						</div>
-						<div class=" self-center">Models</div>
+						<div class=" self-center">{$i18n.t('Models')}</div>
 					</button>
 				{/if}
 
@@ -184,7 +187,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Interface</div>
+					<div class=" self-center">{$i18n.t('Interface')}</div>
 				</button>
 
 				<button
@@ -211,7 +214,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Audio</div>
+					<div class=" self-center">{$i18n.t('Audio')}</div>
 				</button>
 
 				{#if $user.role === 'admin'}
@@ -238,7 +241,7 @@
 								/>
 							</svg>
 						</div>
-						<div class=" self-center">Images</div>
+						<div class=" self-center">{$i18n.t('Images')}</div>
 					</button>
 				{/if}
 
@@ -265,7 +268,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Chats</div>
+					<div class=" self-center">{$i18n.t('Chats')}</div>
 				</button>
 
 				<button
@@ -291,7 +294,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">Account</div>
+					<div class=" self-center">{$i18n.t('Account')}</div>
 				</button>
 
 				<button
@@ -317,16 +320,16 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">About</div>
+					<div class=" self-center">{$i18n.t('About')}</div>
 				</button>
 			</div>
-			<div class="flex-1 md:min-h-[380px]">
+			<div class="flex-1 md:min-h-[25rem]">
 				{#if selectedTab === 'general'}
 					<General
 						{getModels}
 						{saveSettings}
 						on:save={() => {
-							toast.success('Settings saved successfully!');
+							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
 				{:else if selectedTab === 'models'}
@@ -335,28 +338,28 @@
 					<Connections
 						{getModels}
 						on:save={() => {
-							toast.success('Settings saved successfully!');
+							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
 				{:else if selectedTab === 'interface'}
 					<Interface
 						{saveSettings}
 						on:save={() => {
-							toast.success('Settings saved successfully!');
+							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
 				{:else if selectedTab === 'audio'}
 					<Audio
 						{saveSettings}
 						on:save={() => {
-							toast.success('Settings saved successfully!');
+							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
 				{:else if selectedTab === 'images'}
 					<Images
 						{saveSettings}
 						on:save={() => {
-							toast.success('Settings saved successfully!');
+							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
 				{:else if selectedTab === 'chats'}
@@ -364,7 +367,7 @@
 				{:else if selectedTab === 'account'}
 					<Account
 						saveHandler={() => {
-							toast.success('Settings saved successfully!');
+							toast.success($i18n.t('Settings saved successfully!'));
 						}}
 					/>
 				{:else if selectedTab === 'about'}

src/lib/components/chat/ShareChatModal.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let downloadChat: Function;
 	export let shareChat: Function;
 
@@ -17,11 +20,11 @@
 				show = false;
 			}}
 		>
-			Share to OpenWebUI Community
+			{$i18n.t('Share to OpenWebUI Community')}
 		</button>
 
 		<div class="flex justify-center space-x-1 mt-1.5">
-			<div class=" self-center text-gray-400 text-xs font-medium">or</div>
+			<div class=" self-center text-gray-400 text-xs font-medium">{$i18n.t('or')}</div>
 
 			<button
 				class=" self-center rounded-full text-xs font-medium text-gray-700 dark:text-gray-500 underline"
@@ -31,7 +34,7 @@
 					show = false;
 				}}
 			>
-				Download as a File
+				{$i18n.t('Download as a File')}
 			</button>
 		</div>
 	</div>

src/lib/components/chat/ShortcutsModal.svelte

@@ -1,13 +1,16 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 </script>
 
 <Modal bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Keyboard shortcuts</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Keyboard shortcuts')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -32,7 +35,7 @@
 			<div class=" flex flex-col w-full sm:flex-row sm:justify-center sm:space-x-6">
 				<div class="flex flex-col space-y-3 w-full self-start">
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Open new chat</div>
+						<div class=" text-sm">{$i18n.t('Open new chat')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -56,7 +59,7 @@
 					</div>
 
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Focus chat input</div>
+						<div class=" text-sm">{$i18n.t('Focus chat input')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -74,7 +77,7 @@
 					</div>
 
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Copy last code block</div>
+						<div class=" text-sm">{$i18n.t('Copy last code block')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -98,7 +101,7 @@
 					</div>
 
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Copy last response</div>
+						<div class=" text-sm">{$i18n.t('Copy last response')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -124,7 +127,7 @@
 
 				<div class="flex flex-col space-y-3 w-full self-start">
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Toggle settings</div>
+						<div class=" text-sm">{$i18n.t('Toggle settings')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -141,7 +144,7 @@
 					</div>
 
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Toggle sidebar</div>
+						<div class=" text-sm">{$i18n.t('Toggle sidebar')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -165,7 +168,7 @@
 					</div>
 
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Delete chat</div>
+						<div class=" text-sm">{$i18n.t('Delete chat')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div
@@ -188,7 +191,7 @@
 					</div>
 
 					<div class="w-full flex justify-between items-center">
-						<div class=" text-sm">Show shortcuts</div>
+						<div class=" text-sm">{$i18n.t('Show shortcuts')}</div>
 
 						<div class="flex space-x-1 text-xs">
 							<div

src/lib/components/common/Dropdown.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+	import { createEventDispatcher } from 'svelte';
+
+	const dispatch = createEventDispatcher();
+</script>
+
+<DropdownMenu.Root
+	onOpenChange={(state) => {
+		dispatch('change', state);
+	}}
+>
+	<DropdownMenu.Trigger>
+		<slot />
+	</DropdownMenu.Trigger>
+
+	<slot name="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700 z-50 bg-gray-850 text-white"
+			sideOffset={8}
+			side="bottom"
+			align="start"
+		>
+			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+				<div class="flex items-center">Profile</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+				<div class="flex items-center">Profile</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item class="flex items-center px-3 py-2 text-sm  font-medium">
+				<div class="flex items-center">Profile</div>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</slot>
+</DropdownMenu.Root>

src/lib/components/common/Tags/TagInput.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
-	import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher, getContext } from 'svelte';
 	const dispatch = createEventDispatcher();
 
+	const i18n = getContext('i18n');
+
 	let showTagInput = false;
 	let tagName = '';
 </script>
@@ -9,12 +11,6 @@
 <div class="flex space-x-1 pl-1.5">
 	{#if showTagInput}
 		<div class="flex items-center">
-			<input
-				bind:value={tagName}
-				class=" cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[4rem]"
-				placeholder="Add a tag"
-			/>
-
 			<button
 				type="button"
 				on:click={() => {
@@ -36,6 +32,11 @@
 					/>
 				</svg>
 			</button>
+			<input
+				bind:value={tagName}
+				class=" pl-2 cursor-pointer self-center text-xs h-fit bg-transparent outline-none line-clamp-1 w-[8rem]"
+				placeholder={$i18n.t('Add a tag')}
+			/>
 		</div>
 
 		<!-- TODO: Tag Suggestions -->

src/lib/components/documents/AddDocModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { createNewDoc, getDocs, tagDocByName, updateDocByName } from '$lib/apis/documents';
 	import Modal from '../common/Modal.svelte';
@@ -13,6 +13,8 @@
 	import { transformFileName } from '$lib/utils';
 	import { SUPPORTED_FILE_EXTENSIONS, SUPPORTED_FILE_TYPE } from '$lib/constants';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 	export let selectedDoc;
 	let uploadDocInputElement: HTMLInputElement;
@@ -71,7 +73,7 @@
 			inputFiles = null;
 			uploadDocInputElement.value = '';
 		} else {
-			toast.error(`File not found.`);
+			toast.error($i18n.t(`File not found.`));
 		}
 
 		show = false;
@@ -96,7 +98,7 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Add Docs</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Add Docs')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -145,14 +147,14 @@
 							{#if inputFiles}
 								{inputFiles.length > 0 ? `${inputFiles.length}` : ''} document(s) selected.
 							{:else}
-								Click here to select documents.
+								{$i18n.t('Click here to select documents.')}
 							{/if}
 						</button>
 					</div>
 
 					<div class=" flex flex-col space-y-1.5">
 						<div class="flex flex-col w-full">
-							<div class=" mb-1.5 text-xs text-gray-500">Tags</div>
+							<div class=" mb-1.5 text-xs text-gray-500">{$i18n.t('Tags')}</div>
 
 							<Tags {tags} addTag={addTagHandler} deleteTag={deleteTagHandler} />
 						</div>
@@ -163,7 +165,7 @@
 							class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 							type="submit"
 						>
-							Save
+							{$i18n.t('Save')}
 						</button>
 					</div>
 				</form>

src/lib/components/documents/EditDocModal.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
 	import dayjs from 'dayjs';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { getDocs, tagDocByName, updateDocByName } from '$lib/apis/documents';
 	import Modal from '../common/Modal.svelte';
@@ -10,6 +10,8 @@
 	import Tags from '../common/Tags.svelte';
 	import { addTagById } from '$lib/apis/chats';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 	export let selectedDoc;
 
@@ -74,7 +76,7 @@
 <Modal size="sm" bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Edit Doc</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Edit Doc')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -105,7 +107,7 @@
 				>
 					<div class=" flex flex-col space-y-1.5">
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">Name Tag</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Name Tag')}</div>
 
 							<div class="flex flex-1">
 								<div
@@ -134,7 +136,7 @@
 						</div>
 
 						<div class="flex flex-col w-full">
-							<div class=" mb-1 text-xs text-gray-500">Title</div>
+							<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Title')}</div>
 
 							<div class="flex-1">
 								<input
@@ -148,7 +150,7 @@
 						</div>
 
 						<div class="flex flex-col w-full">
-							<div class=" mb-1.5 text-xs text-gray-500">Tags</div>
+							<div class=" mb-1.5 text-xs text-gray-500">{$i18n.t('Tags')}</div>
 
 							<Tags {tags} addTag={addTagHandler} deleteTag={deleteTagHandler} />
 						</div>
@@ -159,7 +161,7 @@
 							class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 							type="submit"
 						>
-							Save
+							{$i18n.t('Save')}
 						</button>
 					</div>
 				</form>

src/lib/components/documents/Settings/General.svelte

@@ -8,9 +8,11 @@
 		updateQuerySettings
 	} from '$lib/apis/rag';
 	import { documents } from '$lib/stores';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	export let saveHandler: Function;
 
 	let loading = false;
@@ -31,7 +33,7 @@
 
 		if (res) {
 			await documents.set(await getDocs(localStorage.token));
-			toast.success('Scan complete!');
+			toast.success($i18n.t('Scan complete!'));
 		}
 	};
 
@@ -69,10 +71,12 @@
 >
 	<div class=" space-y-3 pr-1.5 overflow-y-scroll max-h-80">
 		<div>
-			<div class=" mb-2 text-sm font-medium">General Settings</div>
+			<div class=" mb-2 text-sm font-medium">{$i18n.t('General Settings')}</div>
 
 			<div class="  flex w-full justify-between">
-				<div class=" self-center text-xs font-medium">Scan for documents from '/data/docs'</div>
+				<div class=" self-center text-xs font-medium">
+					{$i18n.t('Scan for documents from {{path}}', { path: '/data/docs' })}
+				</div>
 
 				<button
 					class=" self-center text-xs p-1 px-3 bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 rounded flex flex-row space-x-1 items-center {loading
@@ -85,7 +89,7 @@
 					type="button"
 					disabled={loading}
 				>
-					<div class="self-center font-medium">Scan</div>
+					<div class="self-center font-medium">{$i18n.t('Scan')}</div>
 
 					<!-- <svg
 						xmlns="http://www.w3.org/2000/svg"
@@ -133,77 +137,76 @@
 
 		<hr class=" dark:border-gray-700" />
 
-		<div class=" space-y-3">
-			<div class=" space-y-3">
-				<div class=" text-sm font-medium">Chunk Params</div>
-
-				<div class=" flex gap-2">
-					<div class="  flex w-full justify-between gap-2">
-						<div class="self-center text-xs font-medium min-w-fit">Chunk Size</div>
-
-						<div class="self-center">
-							<input
-								class=" w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
-								type="number"
-								placeholder="Enter Chunk Size"
-								bind:value={chunkSize}
-								autocomplete="off"
-								min="0"
-							/>
-						</div>
-					</div>
-
-					<div class="flex w-full gap-2">
-						<div class=" self-center text-xs font-medium min-w-fit">Chunk Overlap</div>
-
-						<div class="self-center">
-							<input
-								class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
-								type="number"
-								placeholder="Enter Chunk Overlap"
-								bind:value={chunkOverlap}
-								autocomplete="off"
-								min="0"
-							/>
-						</div>
+		<div class=" ">
+			<div class=" text-sm font-medium">{$i18n.t('Chunk Params')}</div>
+
+			<div class=" flex">
+				<div class="  flex w-full justify-between">
+					<div class="self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Size')}</div>
+
+					<div class="self-center p-3">
+						<input
+							class=" w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+							type="number"
+							placeholder={$i18n.t('Enter Chunk Size')}
+							bind:value={chunkSize}
+							autocomplete="off"
+							min="0"
+						/>
 					</div>
 				</div>
 
-				<div>
-					<div class="flex justify-between items-center text-xs">
-						<div class=" text-xs font-medium">PDF Extract Images (OCR)</div>
-
-						<button
-							class=" text-xs font-medium text-gray-500"
-							type="button"
-							on:click={() => {
-								pdfExtractImages = !pdfExtractImages;
-							}}>{pdfExtractImages ? 'On' : 'Off'}</button
-						>
+				<div class="flex w-full">
+					<div class=" self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Overlap')}</div>
+
+					<div class="self-center p-3">
+						<input
+							class="w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+							type="number"
+							placeholder={$i18n.t('Enter Chunk Overlap')}
+							bind:value={chunkOverlap}
+							autocomplete="off"
+							min="0"
+						/>
 					</div>
 				</div>
 			</div>
 
 			<div>
-				<div class=" text-sm font-medium">Query Params</div>
-
-				<div class=" flex py-2">
-					<div class="  flex w-full justify-between gap-2">
-						<div class="self-center text-xs font-medium flex-1">Top K</div>
+				<div class="flex justify-between items-center text-xs">
+					<div class=" text-xs font-medium">{$i18n.t('PDF Extract Images (OCR)')}</div>
+
+					<button
+						class=" text-xs font-medium text-gray-500"
+						type="button"
+						on:click={() => {
+							pdfExtractImages = !pdfExtractImages;
+						}}>{pdfExtractImages ? $i18n.t('On') : $i18n.t('Off')}</button
+					>
+				</div>
+			</div>
+		</div>
 
-						<div class="self-center">
-							<input
-								class=" w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
-								type="number"
-								placeholder="Enter Top K"
-								bind:value={querySettings.k}
-								autocomplete="off"
-								min="0"
-							/>
-						</div>
+		<div>
+			<div class=" text-sm font-medium">{$i18n.t('Query Params')}</div>
+
+			<div class=" flex">
+				<div class="  flex w-full justify-between">
+					<div class="self-center text-xs font-medium flex-1">{$i18n.t('Top K')}</div>
+
+					<div class="self-center p-3">
+						<input
+							class=" w-full rounded py-1.5 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none border border-gray-100 dark:border-gray-600"
+							type="number"
+							placeholder={$i18n.t('Enter Top K')}
+							bind:value={querySettings.k}
+							autocomplete="off"
+							min="0"
+						/>
 					</div>
+				</div>
 
-					<!-- <div class="flex w-full">
+				<!-- <div class="flex w-full">
 						<div class=" self-center text-xs font-medium min-w-fit">Chunk Overlap</div>
 	
 						<div class="self-center p-3">
@@ -217,16 +220,15 @@
 							/>
 						</div>
 					</div> -->
-				</div>
+			</div>
 
-				<div>
-					<div class=" mb-2.5 text-sm font-medium">RAG Template</div>
-					<textarea
-						bind:value={querySettings.template}
-						class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
-						rows="4"
-					/>
-				</div>
+			<div>
+				<div class=" mb-2.5 text-sm font-medium">{$i18n.t('RAG Template')}</div>
+				<textarea
+					bind:value={querySettings.template}
+					class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
+					rows="4"
+				/>
 			</div>
 		</div>
 	</div>
@@ -236,7 +238,7 @@
 			class=" px-4 py-2 bg-emerald-600 hover:bg-emerald-700 text-gray-100 transition rounded"
 			type="submit"
 		>
-			Save
+			{$i18n.t('Save')}
 		</button>
 	</div>
 </form>

src/lib/components/documents/SettingsModal.svelte

@@ -1,7 +1,10 @@
 <script>
+	import { getContext } from 'svelte';
 	import Modal from '../common/Modal.svelte';
 	import General from './Settings/General.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let show = false;
 
 	let selectedTab = 'general';
@@ -10,7 +13,7 @@
 <Modal bind:show>
 	<div>
 		<div class=" flex justify-between dark:text-gray-300 px-5 py-4">
-			<div class=" text-lg font-medium self-center">Document Settings</div>
+			<div class=" text-lg font-medium self-center">{$i18n.t('Document Settings')}</div>
 			<button
 				class="self-center"
 				on:click={() => {
@@ -58,7 +61,7 @@
 							/>
 						</svg>
 					</div>
-					<div class=" self-center">General</div>
+					<div class=" self-center">{$i18n.t('General')}</div>
 				</button>
 			</div>
 			<div class="flex-1 md:min-h-[380px]">

src/lib/components/icons/GarbageBin.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+	/>
+</svg>

src/lib/components/icons/Pencil.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let className = 'w-4 h-4';
+	export let strokeWidth = '1.5';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	fill="none"
+	viewBox="0 0 24 24"
+	stroke-width={strokeWidth}
+	stroke="currentColor"
+	class={className}
+>
+	<path
+		stroke-linecap="round"
+		stroke-linejoin="round"
+		d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
+	/>
+</svg>

src/lib/components/layout/Navbar.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
@@ -9,6 +10,8 @@
 	import TagInput from '../common/Tags/TagInput.svelte';
 	import Tags from '../common/Tags.svelte';
 
+	const i18n = getContext('i18n');
+
 	export let initNewChat: Function;
 	export let title: string = $WEBUI_NAME;
 	export let shareEnabled: boolean = false;
@@ -26,7 +29,7 @@
 		const chat = (await getChatById(localStorage.token, $chatId)).chat;
 		console.log('share', chat);
 
-		toast.success('Redirecting you to OpenWebUI Community');
+		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
 		const url = 'https://openwebui.com';
 		// const url = 'http://localhost:5173';
 

src/lib/components/layout/Sidebar.svelte

@@ -7,7 +7,10 @@
 	import { goto, invalidateAll } from '$app/navigation';
 	import { page } from '$app/stores';
 	import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
+
 	import {
 		deleteChatById,
 		getChatList,
@@ -20,6 +23,8 @@
 	import { slide } from 'svelte/transition';
 	import { WEBUI_BASE_URL } from '$lib/constants';
 	import Tooltip from '../common/Tooltip.svelte';
+	import Dropdown from '../common/Dropdown.svelte';
+	import ChatMenu from './Sidebar/ChatMenu.svelte';
 
 	let show = false;
 	let navElement;
@@ -27,6 +32,8 @@
 	let title: string = 'UI';
 	let search = '';
 
+	let selectedChatId = null;
+
 	let chatDeleteId = null;
 	let chatTitleEditId = null;
 	let chatTitle = '';
@@ -82,7 +89,10 @@
 		});
 
 		if (res) {
-			goto('/');
+			if ($chatId === id) {
+				goto('/');
+			}
+
 			await chats.set(await getChatList(localStorage.token));
 		}
 	};
@@ -112,6 +122,8 @@
 				class="flex-grow flex justify-between rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 				href="/"
 				on:click={async () => {
+					selectedChatId = null;
+
 					await goto('/');
 					const newChatButton = document.getElementById('new-chat-button');
 					setTimeout(() => {
@@ -128,7 +140,7 @@
 						/>
 					</div>
 
-					<div class=" self-center font-medium text-sm">New Chat</div>
+					<div class=" self-center font-medium text-sm">{$i18n.t('New Chat')}</div>
 				</div>
 
 				<div class="self-center">
@@ -154,6 +166,10 @@
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 					href="/modelfiles"
+					on:click={() => {
+						selectedChatId = null;
+						chatId.set('');
+					}}
 				>
 					<div class="self-center">
 						<svg
@@ -173,7 +189,7 @@
 					</div>
 
 					<div class="flex self-center">
-						<div class=" self-center font-medium text-sm">Modelfiles</div>
+						<div class=" self-center font-medium text-sm">{$i18n.t('Modelfiles')}</div>
 					</div>
 				</a>
 			</div>
@@ -182,6 +198,10 @@
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 					href="/prompts"
+					on:click={() => {
+						selectedChatId = null;
+						chatId.set('');
+					}}
 				>
 					<div class="self-center">
 						<svg
@@ -201,7 +221,7 @@
 					</div>
 
 					<div class="flex self-center">
-						<div class=" self-center font-medium text-sm">Prompts</div>
+						<div class=" self-center font-medium text-sm">{$i18n.t('Prompts')}</div>
 					</div>
 				</a>
 			</div>
@@ -210,6 +230,10 @@
 				<a
 					class="flex-grow flex space-x-3 rounded-xl px-3.5 py-2 hover:bg-gray-900 transition"
 					href="/documents"
+					on:click={() => {
+						selectedChatId = null;
+						chatId.set('');
+					}}
 				>
 					<div class="self-center">
 						<svg
@@ -229,7 +253,7 @@
 					</div>
 
 					<div class="flex self-center">
-						<div class=" self-center font-medium text-sm">Documents</div>
+						<div class=" self-center font-medium text-sm">{$i18n.t('Documents')}</div>
 					</div>
 				</a>
 			</div>
@@ -239,11 +263,13 @@
 			{#if !($settings.saveChatHistory ?? true)}
 				<div class="absolute z-40 w-full h-full bg-black/90 flex justify-center">
 					<div class=" text-left px-5 py-2">
-						<div class=" font-medium">Chat History is off for this browser.</div>
+						<div class=" font-medium">{$i18n.t('Chat History is off for this browser.')}</div>
 						<div class="text-xs mt-2">
-							When history is turned off, new chats on this browser won't appear in your history on
-							any of your devices. <span class=" font-semibold"
-								>This setting does not sync across browsers or devices.</span
+							{$i18n.t(
+								"When history is turned off, new chats on this browser won't appear in your history on any of your devices."
+							)}
+							<span class=" font-semibold"
+								>{$i18n.t('This setting does not sync across browsers or devices.')}</span
 							>
 						</div>
 
@@ -270,7 +296,7 @@
 									/>
 								</svg>
 
-								<div>Enable Chat History</div>
+								<div>{$i18n.t('Enable Chat History')}</div>
 							</button>
 						</div>
 					</div>
@@ -296,29 +322,12 @@
 
 					<input
 						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm text-gray-300 bg-gray-950 outline-none"
-						placeholder="Search"
+						placeholder={$i18n.t('Search')}
 						bind:value={search}
 						on:focus={() => {
 							enrichChatsWithContent($chats);
 						}}
 					/>
-
-					<!-- <div class="self-center pr-3 py-2  bg-gray-900">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							fill="none"
-							viewBox="0 0 24 24"
-							stroke-width="1.5"
-							stroke="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								stroke-linecap="round"
-								stroke-linejoin="round"
-								d="M12 3c2.755 0 5.455.232 8.083.678.533.09.917.556.917 1.096v1.044a2.25 2.25 0 01-.659 1.591l-5.432 5.432a2.25 2.25 0 00-.659 1.591v2.927a2.25 2.25 0 01-1.244 2.013L9.75 21v-6.568a2.25 2.25 0 00-.659-1.591L3.659 7.409A2.25 2.25 0 013 5.818V4.774c0-.54.384-1.006.917-1.096A48.32 48.32 0 0112 3z"
-							/>
-						</svg>
-					</div> -->
 				</div>
 			</div>
 
@@ -370,24 +379,31 @@
 						return title.includes(query) || contentMatches;
 					}
 				}) as chat, i}
-					<div class=" w-full pr-2 relative">
+					<div class=" w-full pr-2 relative group">
 						{#if chatTitleEditId === chat.id}
 							<div
-								class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id ===
-								$chatId
+								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
+								chat.id === chatTitleEditId ||
+								chat.id === chatDeleteId
 									? 'bg-gray-900'
-									: ''} transition whitespace-nowrap text-ellipsis"
+									: chat.id === selectedChatId
+									? 'bg-gray-950'
+									: 'group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
 							>
 								<input bind:value={chatTitle} class=" bg-transparent w-full outline-none mr-10" />
 							</div>
 						{:else}
 							<a
-								class=" w-full flex justify-between rounded-xl px-3 py-2 hover:bg-gray-900 {chat.id ===
-								$chatId
+								class=" w-full flex justify-between rounded-xl px-3 py-2 {chat.id === $chatId ||
+								chat.id === chatTitleEditId ||
+								chat.id === chatDeleteId
 									? 'bg-gray-900'
-									: ''} transition whitespace-nowrap text-ellipsis"
+									: chat.id === selectedChatId
+									? 'bg-gray-950'
+									: 'group-hover:bg-gray-950'}  whitespace-nowrap text-ellipsis"
 								href="/c/{chat.id}"
 								on:click={() => {
+									selectedChatId = chat.id;
 									if (window.innerWidth < 1024) {
 										show = false;
 									}
@@ -395,156 +411,142 @@
 								draggable="false"
 							>
 								<div class=" flex self-center flex-1 w-full">
-									<div
-										class=" text-left self-center overflow-hidden {chat.id === $chatId
-											? 'w-[160px]'
-											: 'w-full'}  h-[20px]"
-									>
+									<div class=" text-left self-center overflow-hidden w-full h-[20px]">
 										{chat.title}
 									</div>
 								</div>
 							</a>
 						{/if}
 
-						{#if chat.id === $chatId}
-							<div class=" absolute right-[22px] top-[10px]">
-								{#if chatTitleEditId === chat.id}
-									<div class="flex self-center space-x-1.5">
-										<button
-											class=" self-center hover:text-white transition"
-											on:click={() => {
-												editChatTitle(chat.id, chatTitle);
-												chatTitleEditId = null;
-												chatTitle = '';
-											}}
-										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													fill-rule="evenodd"
-													d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-										</button>
-										<button
-											class=" self-center hover:text-white transition"
-											on:click={() => {
-												chatTitleEditId = null;
-												chatTitle = '';
-											}}
+						<div
+							class="
+							
+							{chat.id === $chatId || chat.id === chatTitleEditId || chat.id === chatDeleteId
+								? ' from-gray-900'
+								: chat.id === selectedChatId
+								? 'from-gray-950'
+								: 'invisible group-hover:visible from-gray-950'}
+								absolute right-[10px] top-[10px] pr-2 pl-5 bg-gradient-to-l from-80%
+								
+								  to-transparent"
+						>
+							{#if chatTitleEditId === chat.id}
+								<div class="flex self-center space-x-1.5 z-10">
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											editChatTitle(chat.id, chatTitle);
+											chatTitleEditId = null;
+											chatTitle = '';
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="w-4 h-4"
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-												/>
-											</svg>
-										</button>
-									</div>
-								{:else if chatDeleteId === chat.id}
-									<div class="flex self-center space-x-1.5">
-										<button
-											class=" self-center hover:text-white transition"
-											on:click={() => {
-												deleteChat(chat.id);
-											}}
+											<path
+												fill-rule="evenodd"
+												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</button>
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											chatTitleEditId = null;
+											chatTitle = '';
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="w-4 h-4"
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													fill-rule="evenodd"
-													d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
-													clip-rule="evenodd"
-												/>
-											</svg>
-										</button>
-										<button
-											class=" self-center hover:text-white transition"
-											on:click={() => {
-												chatDeleteId = null;
-											}}
+											<path
+												d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+											/>
+										</svg>
+									</button>
+								</div>
+							{:else if chatDeleteId === chat.id}
+								<div class="flex self-center space-x-1.5 z-10">
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											deleteChat(chat.id);
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="w-4 h-4"
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												viewBox="0 0 20 20"
-												fill="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
-												/>
-											</svg>
-										</button>
-									</div>
-								{:else}
-									<div class="flex self-center space-x-1.5">
-										<button
-											id="delete-chat-button"
-											class=" hidden"
-											on:click={() => {
-												deleteChat(chat.id);
-											}}
-										/>
-										<button
-											class=" self-center hover:text-white transition"
-											on:click={() => {
-												chatTitle = chat.title;
-												chatTitleEditId = chat.id;
-											}}
+											<path
+												fill-rule="evenodd"
+												d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</button>
+									<button
+										class=" self-center hover:text-white transition"
+										on:click={() => {
+											chatDeleteId = null;
+										}}
+									>
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 20 20"
+											fill="currentColor"
+											class="w-4 h-4"
 										>
-											<svg
-												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
-												class="w-4 h-4"
-											>
-												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L6.832 19.82a4.5 4.5 0 01-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 011.13-1.897L16.863 4.487zm0 0L19.5 7.125"
-												/>
-											</svg>
-										</button>
+											<path
+												d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z"
+											/>
+										</svg>
+									</button>
+								</div>
+							{:else}
+								<div class="flex self-center space-x-1.5 z-10">
+									<ChatMenu
+										renameHandler={() => {
+											chatTitle = chat.title;
+											chatTitleEditId = chat.id;
+										}}
+										deleteHandler={() => {
+											chatDeleteId = chat.id;
+										}}
+										onClose={() => {
+											selectedChatId = null;
+										}}
+									>
 										<button
+											aria-label="Chat Menu"
 											class=" self-center hover:text-white transition"
 											on:click={() => {
-												chatDeleteId = chat.id;
+												selectedChatId = chat.id;
 											}}
 										>
 											<svg
 												xmlns="http://www.w3.org/2000/svg"
-												fill="none"
-												viewBox="0 0 24 24"
-												stroke-width="1.5"
-												stroke="currentColor"
+												viewBox="0 0 16 16"
+												fill="currentColor"
 												class="w-4 h-4"
 											>
 												<path
-													stroke-linecap="round"
-													stroke-linejoin="round"
-													d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0"
+													d="M2 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM6.5 8a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0ZM12.5 6.5a1.5 1.5 0 1 0 0 3 1.5 1.5 0 0 0 0-3Z"
 												/>
 											</svg>
 										</button>
-									</div>
-								{/if}
-							</div>
-						{/if}
+									</ChatMenu>
+								</div>
+							{/if}
+						</div>
 					</div>
 				{/each}
 			</div>
@@ -602,7 +604,7 @@
 												/>
 											</svg>
 										</div>
-										<div class=" self-center font-medium">Admin Panel</div>
+										<div class=" self-center font-medium">{$i18n.t('Admin Panel')}</div>
 									</button>
 
 									<button
@@ -628,7 +630,7 @@
 												/>
 											</svg>
 										</div>
-										<div class=" self-center font-medium">Playground</div>
+										<div class=" self-center font-medium">{$i18n.t('Playground')}</div>
 									</button>
 								{/if}
 
@@ -660,7 +662,7 @@
 											/>
 										</svg>
 									</div>
-									<div class=" self-center font-medium">Settings</div>
+									<div class=" self-center font-medium">{$i18n.t('Settings')}</div>
 								</button>
 							</div>
 
@@ -694,7 +696,7 @@
 											/>
 										</svg>
 									</div>
-									<div class=" self-center font-medium">Sign Out</div>
+									<div class=" self-center font-medium">{$i18n.t('Sign Out')}</div>
 								</button>
 							</div>
 						</div>
@@ -707,7 +709,11 @@
 	<div
 		class="fixed left-0 top-[50dvh] z-40 -translate-y-1/2 transition-transform translate-x-[255px] md:translate-x-[260px] rotate-0"
 	>
-		<Tooltip placement="right" content={`${show ? 'Close' : 'Open'} sidebar`} touch={false}>
+		<Tooltip
+			placement="right"
+			content={`${show ? $i18n.t('Close') : $i18n.t('Open')} ${$i18n.t('sidebar')}`}
+			touch={false}
+		>
 			<button
 				id="sidebar-toggle-button"
 				class=" group"

src/lib/components/layout/Sidebar/ChatMenu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { DropdownMenu } from 'bits-ui';
+
+	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
+	import Pencil from '$lib/components/icons/Pencil.svelte';
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+
+	export let renameHandler: Function;
+	export let deleteHandler: Function;
+
+	export let onClose: Function;
+</script>
+
+<Dropdown
+	on:change={(e) => {
+		if (e.detail === false) {
+			onClose();
+		}
+	}}
+>
+	<Tooltip content="More">
+		<slot />
+	</Tooltip>
+
+	<div slot="content">
+		<DropdownMenu.Content
+			class="w-full max-w-[130px] rounded-lg px-1 py-1.5 border border-gray-700/50 z-50 bg-gray-850 text-white"
+			sideOffset={-2}
+			side="bottom"
+			align="start"
+		>
+			<DropdownMenu.Item
+				class="flex gap-2 items-center px-3 py-2 text-sm  font-medium cursor-pointer"
+				on:click={() => {
+					renameHandler();
+				}}
+			>
+				<Pencil strokeWidth="2" />
+				<div class="flex items-center">Rename</div>
+			</DropdownMenu.Item>
+
+			<DropdownMenu.Item
+				class="flex  gap-2  items-center px-3 py-2 text-sm  font-medium cursor-pointer"
+				on:click={() => {
+					deleteHandler();
+				}}
+			>
+				<GarbageBin strokeWidth="2" />
+				<div class="flex items-center">Delete</div>
+			</DropdownMenu.Item>
+		</DropdownMenu.Content>
+	</div>
+</Dropdown>

src/lib/components/playground/ChatCompletion.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let messages = [];
 	let textAreaElement: HTMLTextAreaElement;
@@ -19,16 +21,20 @@
 					class="px-2 py-1 text-sm font-semibold uppercase min-w-[6rem] text-left dark:group-hover:bg-gray-800 rounded-lg transition"
 					on:click={() => {
 						message.role = message.role === 'user' ? 'assistant' : 'user';
-					}}>{message.role}</button
+					}}>{$i18n.t(message.role)}</button
 				>
 			</div>
 
 			<div class="flex-1">
+				<!-- $i18n.t('a user') -->
+				<!-- $i18n.t('an assistant') -->
 				<textarea
 					id="{message.role}-{idx}-textarea"
 					bind:this={textAreaElement}
 					class="w-full bg-transparent outline-none rounded-lg p-2 text-sm resize-none overflow-hidden"
-					placeholder="Enter {message.role === 'user' ? 'a user' : 'an assistant'} message here"
+					placeholder={$i18n.t(`Enter {{role}} message here`, {
+						role: message.role === 'user' ? $i18n.t('a user') : $i18n.t('an assistant')
+					})}
 					rows="1"
 					on:input={(e) => {
 						textAreaElement.style.height = '';
@@ -100,6 +106,6 @@
 			</svg>
 		</div>
 
-		<div class=" text-sm font-medium">Add message</div>
+		<div class=" text-sm font-medium">{$i18n.t('Add message')}</div>
 	</button>
 </div>

src/lib/i18n/index.ts

@@ -0,0 +1,73 @@
+import i18next from 'i18next';
+import resourcesToBackend from 'i18next-resources-to-backend';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import type { i18n as i18nType } from 'i18next';
+import { writable } from 'svelte/store';
+
+const createI18nStore = (i18n: i18nType) => {
+	const i18nWritable = writable(i18n);
+
+	i18n.on('initialized', () => {
+		i18nWritable.set(i18n);
+	});
+	i18n.on('loaded', () => {
+		i18nWritable.set(i18n);
+	});
+	i18n.on('added', () => i18nWritable.set(i18n));
+	i18n.on('languageChanged', () => {
+		i18nWritable.set(i18n);
+	});
+	return i18nWritable;
+};
+
+const createIsLoadingStore = (i18n: i18nType) => {
+	const isLoading = writable(false);
+
+	// if loaded resources are empty || {}, set loading to true
+	i18n.on('loaded', (resources) => {
+		// console.log('loaded:', resources);
+		Object.keys(resources).length !== 0 && isLoading.set(false);
+	});
+
+	// if resources failed loading, set loading to true
+	i18n.on('failedLoading', () => {
+		isLoading.set(true);
+	});
+
+	return isLoading;
+};
+
+i18next
+	.use(
+		resourcesToBackend(
+			(language: string, namespace: string) => import(`./locales/${language}/${namespace}.json`)
+		)
+	)
+	.use(LanguageDetector)
+	.init({
+		debug: false,
+		detection: {
+			order: ['querystring', 'localStorage', 'navigator'],
+			caches: ['localStorage'],
+			lookupQuerystring: 'lang',
+			lookupLocalStorage: 'locale'
+		},
+		fallbackLng: {
+			default: ['en-US']
+		},
+		ns: 'translation',
+		returnEmptyString: false,
+		interpolation: {
+			escapeValue: false // not needed for svelte as it escapes by default
+		}
+	});
+
+const i18n = createI18nStore(i18next);
+const isLoadingStore = createIsLoadingStore(i18next);
+
+export const getLanguages = async () => {
+	const languages = (await import(`./locales/languages.json`)).default;
+	return languages;
+};
+export default i18n;
+export const isLoading = isLoadingStore;

src/lib/i18n/locales/de-DE/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' oder '-1' für kein Ablaufdatum.",
+	"(Beta)": "(Beta)",
+	"(e.g. `sh webui.sh --api`)": "(z.B. `sh webui.sh --api`)",
+	"(latest)": "(neueste)",
+	"{{modelName}} is thinking...": "{{modelName}} denkt nach...",
+	"{{webUIName}} Backend Required": "{{webUIName}}-Backend erforderlich",
+	"a user": "",
+	"About": "Über",
+	"Account": "Account",
+	"Action": "Aktion",
+	"Add a model": "Füge ein Modell hinzu",
+	"Add a model tag name": "Benenne dein Modell-Tag",
+	"Add a short description about what this modelfile does": "Füge eine kurze Beschreibung hinzu, was dieses Modelfile kann",
+	"Add a short title for this prompt": "Füge einen kurzen Titel für diesen Prompt hinzu",
+	"Add a tag": "Tag hinzugügen",
+	"Add Docs": "Dokumente hinzufügen",
+	"Add Files": "Dateien hinzufügen",
+	"Add message": "Nachricht eingeben",
+	"add tags": "Tags hinzufügen",
+	"Adjusting these settings will apply changes universally to all users.": "Das Anpassen dieser Einstellungen wirkt sich universell auf alle Benutzer aus.",
+	"admin": "Administrator",
+	"Admin Panel": "Admin Panel",
+	"Admin Settings": "Admin Einstellungen",
+	"Advanced Parameters": "Erweiterte Parameter",
+	"all": "Alle",
+	"All Users": "Alle Benutzer",
+	"Allow": "Erlauben",
+	"Allow Chat Deletion": "Chat Löschung erlauben",
+	"alphanumeric characters and hyphens": "alphanumerische Zeichen und Bindestriche",
+	"Already have an account?": "Hast du vielleicht schon ein Account?",
+	"an assistant": "",
+	"and": "und",
+	"API Base URL": "API Basis URL",
+	"API Key": "API Key",
+	"API RPM": "API RPM",
+	"are allowed - Activate this command by typing": "sind erlaubt - Aktiviere diesen Befehl, indem du",
+	"Are you sure?": "",
+	"Audio": "Audio",
+	"Auto-playback response": "Automatische Wiedergabe der Antwort",
+	"Auto-send input after 3 sec.": "Automatisches Senden der Eingabe nach 3 Sek",
+	"AUTOMATIC1111 Base URL": "AUTOMATIC1111 Basis URL",
+	"AUTOMATIC1111 Base URL is required.": "",
+	"available!": "verfügbar!",
+	"Back": "Zurück",
+	"Builder Mode": "Builder Modus",
+	"Cancel": "Abbrechen",
+	"Categories": "Kategorien",
+	"Change Password": "Passwort ändern",
+	"Chat": "Chat",
+	"Chat History": "Chat Verlauf",
+	"Chat History is off for this browser.": "Chat Verlauf ist für diesen Browser ausgeschaltet.",
+	"Chats": "Chats",
+	"Check Again": "Erneut überprüfen",
+	"Check for updates": "Nach Updates suchen",
+	"Checking for updates...": "Nach Updates suchen...",
+	"Choose a model before saving...": "Wähle bitte zuerst ein Modell, bevor du speicherst...",
+	"Chunk Overlap": "Chunk Overlap",
+	"Chunk Params": "Chunk Parameter",
+	"Chunk Size": "Chunk Size",
+	"Click here for help.": "Klicke hier für Hilfe.",
+	"Click here to check other modelfiles.": "Klicke hier, um andere Modelfiles zu überprüfen.",
+	"Click here to select": "",
+	"Click here to select documents.": "",
+	"click here.": "hier klicken.",
+	"Click on the user role button to change a user's role.": "Klicke auf die Benutzerrollenschaltfläche, um die Rolle eines Benutzers zu ändern.",
+	"Close": "Schließe",
+	"Collection": "Kollektion",
+	"Command": "Befehl",
+	"Confirm Password": "Passwort bestätigen",
+	"Connections": "Verbindungen",
+	"Content": "Inhalt",
+	"Context Length": "Context Length",
+	"Conversation Mode": "Konversationsmodus",
+	"Copy last code block": "Letzten Codeblock kopieren",
+	"Copy last response": "Letzte Antwort kopieren",
+	"Copying to clipboard was successful!": "Das Kopieren in die Zwischenablage war erfolgreich!",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "Erstelle einen prägnanten Satz mit 3-5 Wörtern als Überschrift für die folgende Abfrage. Halte dich dabei strikt an die 3-5-Wort-Grenze und vermeide die Verwendung des Wortes Titel:",
+	"Create a modelfile": "Modelfiles erstellen",
+	"Create Account": "Konto erstellen",
+	"Created at": "Erstellt am",
+	"Created by": "Erstellt von",
+	"Current Model": "Aktuelles Modell",
+	"Current Password": "Aktuelles Passwort",
+	"Custom": "Benutzerdefiniert",
+	"Customize Ollama models for a specific purpose": "Ollama-Modelle für einen bestimmten Zweck anpassen",
+	"Dark": "Dunkel",
+	"Database": "Datenbank",
+	"DD/MM/YYYY HH:mm": "DD.MM.YYYY HH:mm",
+	"Default": "Standard",
+	"Default (Automatic1111)": "",
+	"Default (Web API)": "Standard (Web-API)",
+	"Default model updated": "Standardmodell aktualisiert",
+	"Default Prompt Suggestions": "Standard-Prompt-Vorschläge",
+	"Default User Role": "Standardbenutzerrolle",
+	"delete": "löschen",
+	"Delete a model": "Ein Modell löschen",
+	"Delete chat": "Chat löschen",
+	"Delete Chats": "Chats löschen",
+	"Deleted {{deleteModelTag}}": "{{deleteModelTag}} gelöscht",
+	"Deleted {tagName}": "{tagName} gelöscht",
+	"Description": "Beschreibung",
+	"Desktop Notifications": "Desktop-Benachrichtigungen",
+	"Disabled": "Deaktiviert",
+	"Discover a modelfile": "Eine Modelfiles entdecken",
+	"Discover a prompt": "Einen Prompt entdecken",
+	"Discover, download, and explore custom prompts": "Benutzerdefinierte Prompts entdecken, herunterladen und erkunden",
+	"Discover, download, and explore model presets": "Modellvorgaben entdecken, herunterladen und erkunden",
+	"Display the username instead of You in the Chat": "Den Benutzernamen anstelle von 'Du' im Chat anzeigen",
+	"Document": "Dokument",
+	"Document Settings": "Dokumenteinstellungen",
+	"Documents": "Dokumente",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "stellt keine externen Verbindungen her, und Deine Daten bleiben sicher auf Deinen lokal gehosteten Server.",
+	"Don't Allow": "Nicht erlauben",
+	"Don't have an account?": "Hast du vielleicht noch kein Account?",
+	"Download as a File": "Als Datei herunterladen",
+	"Download Database": "Datenbank herunterladen",
+	"Drop any files here to add to the conversation": "Lasse Dateien hier fallen, um sie dem Chat anzuhängen",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "z.B. '30s','10m'. Gültige Zeiteinheiten sind 's', 'm', 'h'.",
+	"Edit Doc": "Dokument bearbeiten",
+	"Edit User": "Benutzer bearbeiten",
+	"Email": "E-Mail",
+	"Enable Chat History": "Chat-Verlauf aktivieren",
+	"Enable New Sign Ups": "Neue Anmeldungen aktivieren",
+	"Enabled": "Aktiviert",
+	"Enter {{role}} message here": "",
+	"Enter API Key": "",
+	"Enter Chunk Overlap": "",
+	"Enter Chunk Size": "",
+	"Enter Image Size (e.g. 512x512)": "",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "",
+	"Enter LiteLLM Model (litellm_params.model)": "",
+	"Enter Max Tokens (litellm_params.max_tokens)": "",
+	"Enter model tag (e.g. {{modelTag}})": "",
+	"Enter Number of Steps (e.g. 50)": "",
+	"Enter stop sequence": "Stop-Sequenz eingeben",
+	"Enter Top K": "",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "",
+	"Enter Your Email": "Geben Deine E-Mail-Adresse ein",
+	"Enter Your Full Name": "Gebe Deinen vollständigen Namen ein",
+	"Enter Your Password": "Gebe Dein Passwort ein",
+	"Experimental": "Experimentell",
+	"Export All Chats (All Users)": "Alle Chats exportieren (alle Benutzer)",
+	"Export Chats": "Chats exportieren",
+	"Export Documents Mapping": "Dokumentenmapping exportieren",
+	"Export Modelfiles": "Modelfiles exportieren",
+	"Export Prompts": "Prompts exportieren",
+	"Failed to read clipboard contents": "Fehler beim Lesen des Zwischenablageninhalts",
+	"File Mode": "File Mode",
+	"File not found.": "Datei nicht gefunden.",
+	"Focus chat input": "Chat-Eingabe fokussieren",
+	"Format your variables using square brackets like this:": "Formatiere Deine Variablen mit eckigen Klammern wie folgt:",
+	"From (Base Model)": "Von (Basismodell)",
+	"Full Screen Mode": "Vollbildmodus",
+	"General": "Allgemein",
+	"General Settings": "Allgemeine Einstellungen",
+	"Hello, {{name}}": "Hallo, {{name}}",
+	"Hide": "Verbergen",
+	"Hide Additional Params": "Hide Additional Params",
+	"How can I help you today?": "Wie kann ich Dir heute helfen?",
+	"Image Generation (Experimental)": "Bildgenerierung (experimentell)",
+	"Image Generation Engine": "",
+	"Image Settings": "Bildeinstellungen",
+	"Images": "Bilder",
+	"Import Chats": "Chats importieren",
+	"Import Documents Mapping": "Dokumentenmapping importieren",
+	"Import Modelfiles": "Modelfiles importieren",
+	"Import Prompts": "Prompts importieren",
+	"Include `--api` flag when running stable-diffusion-webui": "Füge das `--api`-Flag hinzu, wenn Du stable-diffusion-webui nutzt",
+	"Interface": "Benutzeroberfläche",
+	"join our Discord for help.": "Trete unserem Discord bei, um Hilfe zu erhalten.",
+	"JSON": "JSON",
+	"JWT Expiration": "JWT-Ablauf",
+	"JWT Token": "JWT-Token",
+	"Keep Alive": "Keep Alive",
+	"Keyboard shortcuts": "Tastenkürzel",
+	"Language": "Sprache",
+	"Light": "Hell",
+	"Listening...": "Hören...",
+	"LLMs can make mistakes. Verify important information.": "LLMs können Fehler machen. Überprüfe wichtige Informationen.",
+	"Made by OpenWebUI Community": "Von der OpenWebUI-Community",
+	"Make sure to enclose them with": "Formatiere Deine Variablen mit:",
+	"Manage LiteLLM Models": "LiteLLM-Modelle verwalten",
+	"Manage Models": "Modelle verwalten",
+	"Manage Ollama Models": "Ollama-Modelle verwalten",
+	"Max Tokens": "Maximale Tokens",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "Es können maximal 3 Modelle gleichzeitig heruntergeladen werden. Bitte versuche es später erneut.",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "DD.MM.YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "Modell '{{modelName}}' wurde erfolgreich heruntergeladen.",
+	"Model '{{modelTag}}' is already in queue for downloading.": "Modell '{{modelTag}}' befindet sich bereits in der Warteschlange zum Herunterladen.",
+	"Model {{modelId}} not found": "Modell {{modelId}} nicht gefunden",
+	"Model {{modelName}} already exists.": "Modell {{modelName}} existiert bereits.",
+	"Model Name": "Modellname",
+	"Model not selected": "Modell nicht ausgewählt",
+	"Model Tag Name": "Modell-Tag-Name",
+	"Model Whitelisting": "Modell-Whitelisting",
+	"Model(s) Whitelisted": "Modell(e) auf der Whitelist",
+	"Modelfile": "Modelfiles",
+	"Modelfile Advanced Settings": "Erweiterte Modelfileseinstellungen",
+	"Modelfile Content": "Modelfile Content",
+	"Modelfiles": "Modelfiles",
+	"Models": "Modelle",
+	"My Documents": "Meine Dokumente",
+	"My Modelfiles": "Meine Modelfiles",
+	"My Prompts": "Meine Prompts",
+	"Name": "Name",
+	"Name Tag": "Namens-Tag",
+	"Name your modelfile": "Name your modelfile",
+	"New Chat": "Neuer Chat",
+	"New Password": "Neues Passwort",
+	"Not sure what to add?": "Nicht sicher, was hinzugefügt werden soll?",
+	"Not sure what to write? Switch to": "Nicht sicher, was Du schreiben sollst? Wechsel zu",
+	"Off": "Aus",
+	"Okay, Let's Go!": "Okay, los geht's!",
+	"Ollama Base URL": "",
+	"Ollama Version": "Ollama-Version",
+	"On": "Ein",
+	"Only": "Nur",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "Nur alphanumerische Zeichen und Bindestriche sind im Befehlsstring erlaubt.",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "Hoppla! Warte noch einen Moment! Die Dateien sind noch im der Verarbeitung. Bitte habe etwas Geduld und wir informieren Dich, sobald sie bereit sind.",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "Oops! Looks like the URL is invalid. Please double-check and try again.",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.",
+	"Open": "Öffne",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "",
+	"Open new chat": "Neuen Chat öffnen",
+	"OpenAI API": "OpenAI-API",
+	"OpenAI API Key": "",
+	"OpenAI API Key is required.": "",
+	"or": "oder",
+	"Parameters": "Parameter",
+	"Password": "Passwort",
+	"PDF Extract Images (OCR)": "Text von Bilder aus PDFs extrahieren (OCR)",
+	"pending": "ausstehend",
+	"Permission denied when accessing microphone: {{error}}": "Zugriff auf das Mikrofon verweigert: {{error}}",
+	"Playground": "Playground",
+	"Profile": "Profil",
+	"Prompt Content": "Prompt-Inhalt",
+	"Prompt suggestions": "Prompt-Vorschläge",
+	"Prompts": "Prompts",
+	"Pull a model from Ollama.com": "Ein Modell von Ollama.com abrufen",
+	"Pull Progress": "Fortschritt abrufen",
+	"Query Params": "Query Parameter",
+	"RAG Template": "RAG-Vorlage",
+	"Raw Format": "Rohformat",
+	"Record voice": "Stimme aufnehmen",
+	"Redirecting you to OpenWebUI Community": "Du wirst zur OpenWebUI-Community weitergeleitet",
+	"Release Notes": "Versionshinweise",
+	"Repeat Last N": "Repeat Last N",
+	"Repeat Penalty": "Repeat Penalty",
+	"Request Mode": "Request-Modus",
+	"Reset Vector Storage": "Vektorspeicher zurücksetzen",
+	"Response AutoCopy to Clipboard": "Antwort automatisch in die Zwischenablage kopieren",
+	"Role": "Rolle",
+	"Rosé Pine": "Rosé Pine",
+	"Rosé Pine Dawn": "Rosé Pine Dawn",
+	"Save": "Speichern",
+	"Save & Create": "Speichern und erstellen",
+	"Save & Submit": "Speichern und senden",
+	"Save & Update": "Speichern und aktualisieren",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "Das direkte Speichern von Chat-Protokollen im Browser-Speicher wird nicht mehr unterstützt. Bitte nehme Dir einen Moment Zeit, um Deine Chat-Protokolle herunterzuladen und zu löschen, indem Du auf die Schaltfläche unten klickst. Keine Sorge, Du kannst Deine Chat-Protokolle problemlos über das Backend wieder importieren.",
+	"Scan": "Scannen",
+	"Scan complete!": "Scan abgeschlossen!",
+	"Scan for documents from {{path}}": "Dokumente von {{path}} scannen",
+	"Search": "Suchen",
+	"Search Documents": "Dokumente suchen",
+	"Search Prompts": "Prompts suchen",
+	"See readme.md for instructions": "Anleitung in readme.md anzeigen",
+	"See what's new": "Was gibt's Neues",
+	"Seed": "Seed",
+	"Select a mode": "",
+	"Select a model": "Ein Modell auswählen",
+	"Select an Ollama instance": "",
+	"Send a Messsage": "Eine Nachricht senden",
+	"Send message": "Nachricht senden",
+	"Server connection verified": "Serververbindung überprüft",
+	"Set as default": "Als Standard festlegen",
+	"Set Default Model": "Standardmodell festlegen",
+	"Set Image Size": "Bildgröße festlegen",
+	"Set Steps": "Schritte festlegen",
+	"Set Title Auto-Generation Model": "Modell für automatische Titelgenerierung festlegen",
+	"Set Voice": "Stimme festlegen",
+	"Settings": "Einstellungen",
+	"Settings saved successfully!": "Einstellungen erfolgreich gespeichert!",
+	"Share to OpenWebUI Community": "Mit OpenWebUI Community teilen",
+	"short-summary": "kurze-zusammenfassung",
+	"Show": "Anzeigen",
+	"Show Additional Params": "Show Additional Params",
+	"Show shortcuts": "Verknüpfungen anzeigen",
+	"sidebar": "Seitenleiste",
+	"Sign in": "Anmelden",
+	"Sign Out": "Abmelden",
+	"Sign up": "Registrieren",
+	"Speech recognition error: {{error}}": "Spracherkennungsfehler: {{error}}",
+	"Speech-to-Text Engine": "Sprache-zu-Text-Engine",
+	"SpeechRecognition API is not supported in this browser.": "Die SpeechRecognition-API wird in diesem Browser nicht unterstützt.",
+	"Stop Sequence": "Stop Sequence",
+	"STT Settings": "STT-Einstellungen",
+	"Submit": "Senden",
+	"Success": "Erfolg",
+	"Successfully updated.": "Erfolgreich aktualisiert.",
+	"Sync All": "Alles synchronisieren",
+	"System": "System",
+	"System Prompt": "System-Prompt",
+	"Tags": "Tags",
+	"Temperature": "Temperatur",
+	"Template": "Vorlage",
+	"Text Completion": "Textvervollständigung",
+	"Text-to-Speech Engine": "Text-zu-Sprache-Engine",
+	"Tfs Z": "Tfs Z",
+	"Theme": "Design",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "Dadurch werden Deine wertvollen Unterhaltungen sicher in der Backend-Datenbank gespeichert. Vielen Dank!",
+	"This setting does not sync across browsers or devices.": "Diese Einstellung wird nicht zwischen Browsern oder Geräten synchronisiert.",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.",
+	"Title": "Titel",
+	"Title Auto-Generation": "Automatische Titelgenerierung",
+	"Title Generation Prompt": "Prompt für Titelgenerierung",
+	"to": "für",
+	"To access the available model names for downloading,": "Um auf die verfügbaren Modellnamen zum Herunterladen zuzugreifen,",
+	"To access the GGUF models available for downloading,": "To access the GGUF models available for downloading,",
+	"to chat input.": "to chat input.",
+	"Toggle settings": "Einstellungen umschalten",
+	"Toggle sidebar": "Seitenleiste umschalten",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "Probleme beim Zugriff auf Ollama?",
+	"TTS Settings": "TTS-Einstellungen",
+	"Type Hugging Face Resolve (Download) URL": "",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "Ups! Es gab ein Problem bei der Verbindung mit {{provider}}.",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "Unknown File Type '{{file_type}}', but accepting and treating as plain text",
+	"Update password": "Passwort aktualisieren",
+	"Upload a GGUF model": "Upload a GGUF model",
+	"Upload files": "Dateien hochladen",
+	"Upload Progress": "Upload Progress",
+	"URL Mode": "URL Mode",
+	"Use '#' in the prompt input to load and select your documents.": "Verwende '#' in der Prompt-Eingabe, um Deine Dokumente zu laden und auszuwählen.",
+	"Use Gravatar": "",
+	"user": "Benutzer",
+	"User Permissions": "Benutzerberechtigungen",
+	"Users": "Benutzer",
+	"Utilize": "Nutze die",
+	"Valid time units:": "Gültige Zeiteinheiten:",
+	"variable": "Variable",
+	"variable to have them replaced with clipboard content.": "Variable, um den Inhalt der Zwischenablage beim Nutzen des Prompts zu ersetzen.",
+	"Version": "Version",
+	"Web": "Web",
+	"WebUI Add-ons": "WebUI-Add-Ons",
+	"WebUI Settings": "WebUI-Einstellungen",
+	"WebUI will make requests to": "Wenn aktiviert sendet WebUI externe Anfragen an",
+	"What’s New in": "Was gibt's Neues in",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "Wenn die Historie ausgeschaltet ist, werden neue Chats nicht in Deiner Historie auf Deine Geräte angezeigt.",
+	"Whisper (Local)": "Whisper (Lokal)",
+	"Write a prompt suggestion (e.g. Who are you?)": "Gebe einen Prompt-Vorschlag ein (z.B. Wer bist du?)",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "Schreibe eine kurze Zusammenfassung in 50 Wörtern, die [Thema oder Schlüsselwort] zusammenfasst.",
+	"You": "Du",
+	"You're a helpful assistant.": "Du bist ein hilfreicher Assistent.",
+	"You're now logged in.": "Du bist nun eingeloggt."
+}

src/lib/i18n/locales/en-US/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.",
+	"(Beta)": "(Beta)",
+	"(e.g. `sh webui.sh --api`)": "(e.g. `sh webui.sh --api`)",
+	"(latest)": "(latest)",
+	"{{modelName}} is thinking...": "{{modelName}} is thinking...",
+	"{{webUIName}} Backend Required": "{{webUIName}} Backend Required",
+	"a user": "",
+	"About": "About",
+	"Account": "Account",
+	"Action": "Action",
+	"Add a model": "Add a model",
+	"Add a model tag name": "Add a model tag name",
+	"Add a short description about what this modelfile does": "Add a short description about what this modelfile does",
+	"Add a short title for this prompt": "Add a short title for this prompt",
+	"Add a tag": "Add a tag",
+	"Add Docs": "Add Docs",
+	"Add Files": "Add Files",
+	"Add message": "Add message",
+	"add tags": "add tags",
+	"Adjusting these settings will apply changes universally to all users.": "Adjusting these settings will apply changes universally to all users.",
+	"admin": "admin",
+	"Admin Panel": "Admin Panel",
+	"Admin Settings": "Admin Settings",
+	"Advanced Parameters": "Advanced Parameters",
+	"all": "all",
+	"All Users": "All Users",
+	"Allow": "Allow",
+	"Allow Chat Deletion": "Allow Chat Deletion",
+	"alphanumeric characters and hyphens": "alphanumeric characters and hyphens",
+	"Already have an account?": "Already have an account?",
+	"an assistant": "",
+	"and": "and",
+	"API Base URL": "API Base URL",
+	"API Key": "API Key",
+	"API RPM": "API RPM",
+	"are allowed - Activate this command by typing": "are allowed - Activate this command by typing",
+	"Are you sure?": "",
+	"Audio": "Audio",
+	"Auto-playback response": "Auto-playback response",
+	"Auto-send input after 3 sec.": "Auto-send input after 3 sec.",
+	"AUTOMATIC1111 Base URL": "AUTOMATIC1111 Base URL",
+	"AUTOMATIC1111 Base URL is required.": "",
+	"available!": "available!",
+	"Back": "Back",
+	"Builder Mode": "Builder Mode",
+	"Cancel": "Cancel",
+	"Categories": "Categories",
+	"Change Password": "Change Password",
+	"Chat": "Chat",
+	"Chat History": "Chat History",
+	"Chat History is off for this browser.": "Chat History is off for this browser.",
+	"Chats": "Chats",
+	"Check Again": "Check Again",
+	"Check for updates": "Check for updates",
+	"Checking for updates...": "Checking for updates...",
+	"Choose a model before saving...": "Choose a model before saving...",
+	"Chunk Overlap": "Chunk Overlap",
+	"Chunk Params": "Chunk Params",
+	"Chunk Size": "Chunk Size",
+	"Click here for help.": "Click here for help.",
+	"Click here to check other modelfiles.": "Click here to check other modelfiles.",
+	"Click here to select": "",
+	"Click here to select documents.": "",
+	"click here.": "click here.",
+	"Click on the user role button to change a user's role.": "Click on the user role button to change a user's role.",
+	"Close": "Close",
+	"Collection": "Collection",
+	"Command": "Command",
+	"Confirm Password": "Confirm Password",
+	"Connections": "Connections",
+	"Content": "Content",
+	"Context Length": "Context Length",
+	"Conversation Mode": "Conversation Mode",
+	"Copy last code block": "Copy last code block",
+	"Copy last response": "Copy last response",
+	"Copying to clipboard was successful!": "Copying to clipboard was successful!",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':",
+	"Create a modelfile": "Create a modelfile",
+	"Create Account": "Create Account",
+	"Created at": "Created at",
+	"Created by": "Created by",
+	"Current Model": "Current Model",
+	"Current Password": "Current Password",
+	"Custom": "Custom",
+	"Customize Ollama models for a specific purpose": "Customize Ollama models for a specific purpose",
+	"Dark": "Dark",
+	"Database": "Database",
+	"DD/MM/YYYY HH:mm": "DD/MM/YYYY HH:mm",
+	"Default": "Default",
+	"Default (Automatic1111)": "",
+	"Default (Web API)": "Default (Web API)",
+	"Default model updated": "Default model updated",
+	"Default Prompt Suggestions": "Default Prompt Suggestions",
+	"Default User Role": "Default User Role",
+	"delete": "delete",
+	"Delete a model": "Delete a model",
+	"Delete chat": "Delete chat",
+	"Delete Chats": "Delete Chats",
+	"Deleted {{deleteModelTag}}": "Deleted {{deleteModelTag}}",
+	"Deleted {tagName}": "Deleted {tagName}",
+	"Description": "Description",
+	"Desktop Notifications": "Notification",
+	"Disabled": "Disabled",
+	"Discover a modelfile": "Discover a modelfile",
+	"Discover a prompt": "Discover a prompt",
+	"Discover, download, and explore custom prompts": "Discover, download, and explore custom prompts",
+	"Discover, download, and explore model presets": "Discover, download, and explore model presets",
+	"Display the username instead of You in the Chat": "Display the username instead of 'You' in the Chat",
+	"Document": "Document",
+	"Document Settings": "Document Settings",
+	"Documents": "Documents",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "does not make any external connections, and your data stays securely on your locally hosted server.",
+	"Don't Allow": "Don't Allow",
+	"Don't have an account?": "Don't have an account?",
+	"Download as a File": "Download as a File",
+	"Download Database": "Download Database",
+	"Drop any files here to add to the conversation": "Drop any files here to add to the conversation",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.",
+	"Edit Doc": "Edit Doc",
+	"Edit User": "Edit User",
+	"Email": "Email",
+	"Enable Chat History": "Enable Chat History",
+	"Enable New Sign Ups": "Enable New Sign Ups",
+	"Enabled": "Enabled",
+	"Enter {{role}} message here": "",
+	"Enter API Key": "",
+	"Enter Chunk Overlap": "",
+	"Enter Chunk Size": "",
+	"Enter Image Size (e.g. 512x512)": "",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "",
+	"Enter LiteLLM Model (litellm_params.model)": "",
+	"Enter Max Tokens (litellm_params.max_tokens)": "",
+	"Enter model tag (e.g. {{modelTag}})": "",
+	"Enter Number of Steps (e.g. 50)": "",
+	"Enter stop sequence": "Enter stop sequence",
+	"Enter Top K": "",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "",
+	"Enter Your Email": "Enter Your Email",
+	"Enter Your Full Name": "Enter Your Full Name",
+	"Enter Your Password": "Enter Your Password",
+	"Experimental": "Experimental",
+	"Export All Chats (All Users)": "Export All Chats (All Users)",
+	"Export Chats": "Export Chats",
+	"Export Documents Mapping": "Export Documents Mapping",
+	"Export Modelfiles": "Export Modelfiles",
+	"Export Prompts": "Export Prompts",
+	"Failed to read clipboard contents": "Failed to read clipboard contents",
+	"File Mode": "File Mode",
+	"File not found.": "File not found.",
+	"Focus chat input": "Focus chat input",
+	"Format your variables using square brackets like this:": "Format your variables using square brackets like this:",
+	"From (Base Model)": "From (Base Model)",
+	"Full Screen Mode": "Full Screen Mode",
+	"General": "General",
+	"General Settings": "General Settings",
+	"Hello, {{name}}": "Hello, {{name}}",
+	"Hide": "Hide",
+	"Hide Additional Params": "Hide Additional Params",
+	"How can I help you today?": "How can I help you today?",
+	"Image Generation (Experimental)": "Image Generation (Experimental)",
+	"Image Generation Engine": "",
+	"Image Settings": "Image Settings",
+	"Images": "Images",
+	"Import Chats": "Import Chats",
+	"Import Documents Mapping": "Import Documents Mapping",
+	"Import Modelfiles": "Import Modelfiles",
+	"Import Prompts": "Import Prompts",
+	"Include `--api` flag when running stable-diffusion-webui": "Include `--api` flag when running stable-diffusion-webui",
+	"Interface": "Interface",
+	"join our Discord for help.": "join our Discord for help.",
+	"JSON": "JSON",
+	"JWT Expiration": "JWT Expiration",
+	"JWT Token": "JWT Token",
+	"Keep Alive": "Keep Alive",
+	"Keyboard shortcuts": "Keyboard shortcuts",
+	"Language": "Language",
+	"Light": "Light",
+	"Listening...": "Listening...",
+	"LLMs can make mistakes. Verify important information.": "LLMs can make mistakes. Verify important information.",
+	"Made by OpenWebUI Community": "Made by OpenWebUI Community",
+	"Make sure to enclose them with": "Make sure to enclose them with",
+	"Manage LiteLLM Models": "Manage LiteLLM Models",
+	"Manage Models": "Manage Models",
+	"Manage Ollama Models": "Manage Ollama Models",
+	"Max Tokens": "Max Tokens",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "Maximum of 3 models can be downloaded simultaneously. Please try again later.",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "MMMM DD, YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "Model '{{modelName}}' has been successfully downloaded.",
+	"Model '{{modelTag}}' is already in queue for downloading.": "Model '{{modelTag}}' is already in queue for downloading.",
+	"Model {{modelId}} not found": "Model {{modelId}} not found",
+	"Model {{modelName}} already exists.": "Model {{modelName}} already exists.",
+	"Model Name": "Model Name",
+	"Model not selected": "Model not selected",
+	"Model Tag Name": "Model Tag Name",
+	"Model Whitelisting": "Model Whitelisting",
+	"Model(s) Whitelisted": "Model(s) Whitelisted",
+	"Modelfile": "Modelfile",
+	"Modelfile Advanced Settings": "Modelfile Advanced Settings",
+	"Modelfile Content": "Modelfile Content",
+	"Modelfiles": "Modelfiles",
+	"Models": "Models",
+	"My Documents": "My Documents",
+	"My Modelfiles": "My Modelfiles",
+	"My Prompts": "My Prompts",
+	"Name": "Name",
+	"Name Tag": "Name Tag",
+	"Name your modelfile": "Name your modelfile",
+	"New Chat": "New Chat",
+	"New Password": "New Password",
+	"Not sure what to add?": "Not sure what to add?",
+	"Not sure what to write? Switch to": "Not sure what to write? Switch to",
+	"Off": "Off",
+	"Okay, Let's Go!": "Okay, Let's Go!",
+	"Ollama Base URL": "",
+	"Ollama Version": "Ollama Version",
+	"On": "On",
+	"Only": "Only",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "Only alphanumeric characters and hyphens are allowed in the command string.",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "Oops! Looks like the URL is invalid. Please double-check and try again.",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.",
+	"Open": "Open",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "",
+	"Open new chat": "Open new chat",
+	"OpenAI API": "OpenAI API",
+	"OpenAI API Key": "",
+	"OpenAI API Key is required.": "",
+	"or": "or",
+	"Parameters": "Parameters",
+	"Password": "Password",
+	"PDF Extract Images (OCR)": "PDF Extract Images (OCR)",
+	"pending": "pending",
+	"Permission denied when accessing microphone: {{error}}": "Permission denied when accessing microphone: {{error}}",
+	"Playground": "Playground",
+	"Profile": "Profile",
+	"Prompt Content": "Prompt Content",
+	"Prompt suggestions": "Prompt suggestions",
+	"Prompts": "Prompts",
+	"Pull a model from Ollama.com": "Pull a model from Ollama.com",
+	"Pull Progress": "Pull Progress",
+	"Query Params": "Query Params",
+	"RAG Template": "RAG Template",
+	"Raw Format": "Raw Format",
+	"Record voice": "Record voice",
+	"Redirecting you to OpenWebUI Community": "Redirecting you to OpenWebUI Community",
+	"Release Notes": "Release Notes",
+	"Repeat Last N": "Repeat Last N",
+	"Repeat Penalty": "Repeat Penalty",
+	"Request Mode": "Request Mode",
+	"Reset Vector Storage": "Reset Vector Storage",
+	"Response AutoCopy to Clipboard": "Response AutoCopy to Clipboard",
+	"Role": "Role",
+	"Rosé Pine": "Rosé Pine",
+	"Rosé Pine Dawn": "Rosé Pine Dawn",
+	"Save": "Save",
+	"Save & Create": "Save & Create",
+	"Save & Submit": "Save & Submit",
+	"Save & Update": "Save & Update",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through",
+	"Scan": "Scan",
+	"Scan complete!": "Scan complete!",
+	"Scan for documents from {{path}}": "Scan for documents from {{path}}",
+	"Search": "Search",
+	"Search Documents": "Search Documents",
+	"Search Prompts": "Search Prompts",
+	"See readme.md for instructions": "See readme.md for instructions",
+	"See what's new": "See what's new",
+	"Seed": "Seed",
+	"Select a mode": "",
+	"Select a model": "Select a model",
+	"Select an Ollama instance": "",
+	"Send a Messsage": "Send a Messsage",
+	"Send message": "Send message",
+	"Server connection verified": "Server connection verified",
+	"Set as default": "Set as default",
+	"Set Default Model": "Set Default Model",
+	"Set Image Size": "Set Image Size",
+	"Set Steps": "Set Steps",
+	"Set Title Auto-Generation Model": "Set Title Auto-Generation Model",
+	"Set Voice": "Set Voice",
+	"Settings": "Settings",
+	"Settings saved successfully!": "Settings saved successfully!",
+	"Share to OpenWebUI Community": "Share to OpenWebUI Community",
+	"short-summary": "short-summary",
+	"Show": "Show",
+	"Show Additional Params": "Show Additional Params",
+	"Show shortcuts": "Show shortcuts",
+	"sidebar": "sidebar",
+	"Sign in": "Sign in",
+	"Sign Out": "Sign Out",
+	"Sign up": "Sign up",
+	"Speech recognition error: {{error}}": "Speech recognition error: {{error}}",
+	"Speech-to-Text Engine": "Speech-to-Text Engine",
+	"SpeechRecognition API is not supported in this browser.": "SpeechRecognition API is not supported in this browser.",
+	"Stop Sequence": "Stop Sequence",
+	"STT Settings": "STT Settings",
+	"Submit": "Submit",
+	"Success": "Success",
+	"Successfully updated.": "Successfully updated.",
+	"Sync All": "Sync All",
+	"System": "System",
+	"System Prompt": "System Prompt",
+	"Tags": "Tags",
+	"Temperature": "Temperature",
+	"Template": "Template",
+	"Text Completion": "Text Completion",
+	"Text-to-Speech Engine": "Text-to-Speech Engine",
+	"Tfs Z": "Tfs Z",
+	"Theme": "Theme",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "This ensures that your valuable conversations are securely saved to your backend database. Thank you!",
+	"This setting does not sync across browsers or devices.": "This setting does not sync across browsers or devices.",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.",
+	"Title": "Title",
+	"Title Auto-Generation": "Title Auto-Generation",
+	"Title Generation Prompt": "Title Generation Prompt",
+	"to": "to",
+	"To access the available model names for downloading,": "To access the available model names for downloading,",
+	"To access the GGUF models available for downloading,": "To access the GGUF models available for downloading,",
+	"to chat input.": "to chat input.",
+	"Toggle settings": "Toggle settings",
+	"Toggle sidebar": "Toggle sidebar",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "Trouble accessing Ollama?",
+	"TTS Settings": "TTS Settings",
+	"Type Hugging Face Resolve (Download) URL": "",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "Uh-oh! There was an issue connecting to {{provider}}.",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "Unknown File Type '{{file_type}}', but accepting and treating as plain text",
+	"Update password": "Update password",
+	"Upload a GGUF model": "Upload a GGUF model",
+	"Upload files": "Upload files",
+	"Upload Progress": "Upload Progress",
+	"URL Mode": "URL Mode",
+	"Use '#' in the prompt input to load and select your documents.": "Use '#' in the prompt input to load and select your documents.",
+	"Use Gravatar": "",
+	"user": "user",
+	"User Permissions": "User Permissions",
+	"Users": "Users",
+	"Utilize": "Utilize",
+	"Valid time units:": "Valid time units:",
+	"variable": "variable",
+	"variable to have them replaced with clipboard content.": "variable to have them replaced with clipboard content.",
+	"Version": "Version",
+	"Web": "Web",
+	"WebUI Add-ons": "WebUI Add-ons",
+	"WebUI Settings": "WebUI Settings",
+	"WebUI will make requests to": "WebUI will make requests to",
+	"What’s New in": "What’s New in",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "When history is turned off, new chats on this browser won't appear in your history on any of your devices.",
+	"Whisper (Local)": "Whisper (Local)",
+	"Write a prompt suggestion (e.g. Who are you?)": "Write a prompt suggestion (e.g. Who are you?)",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "Write a summary in 50 words that summarizes [topic or keyword].",
+	"You": "You",
+	"You're a helpful assistant.": "You're a helpful assistant.",
+	"You're now logged in.": "You're now logged in."
+}

src/lib/i18n/locales/fa-IR/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' یا '-1' برای غیر فعال کردن انقضا.",
+	"(Beta)": "(بتا)",
+	"(e.g. `sh webui.sh --api`)": "(e.g. `sh webui.sh --api`)",
+	"(latest)": "(آخرین)",
+	"{{modelName}} is thinking...": "{{modelName}} در حال فکر کردن است...",
+	"{{webUIName}} Backend Required": "بکند {{webUIName}} نیاز است.",
+	"a user": "یک کاربر",
+	"About": "درباره",
+	"Account": "حساب کاربری",
+	"Action": "عمل",
+	"Add a model": "اضافه کردن یک مدل",
+	"Add a model tag name": "اضافه کردن یک نام تگ برای مدل",
+	"Add a short description about what this modelfile does": "توضیح کوتاهی در مورد کاری که این فایل\u200cمدل انجام می دهد اضافه کنید",
+	"Add a short title for this prompt": "یک عنوان کوتاه برای این درخواست اضافه کنید",
+	"Add a tag": "اضافه کردن یک تگ",
+	"Add Docs": "اضافه کردن اسناد",
+	"Add Files": "اضافه کردن فایل\u200cها",
+	"Add message": "اضافه کردن پیغام",
+	"add tags": "اضافه کردن تگ\u200cها",
+	"Adjusting these settings will apply changes universally to all users.": "با تنظیم این تنظیمات، تغییرات به طور کلی برای همه کاربران اعمال می شود.",
+	"admin": "مدیر",
+	"Admin Panel": "پنل مدیریت",
+	"Admin Settings": "تنظیمات مدیریت",
+	"Advanced Parameters": "پارامترهای پیشرفته",
+	"all": "همه",
+	"All Users": "همه کاربران",
+	"Allow": "اجازه دادن",
+	"Allow Chat Deletion": "اجازه حذف گپ",
+	"alphanumeric characters and hyphens": "حروف الفبایی و خط فاصله",
+	"Already have an account?": "از قبل حساب کاربری دارید؟",
+	"an assistant": "یک دستیار",
+	"and": "و",
+	"API Base URL": "API Base URL",
+	"API Key": "API Key",
+	"API RPM": "API RPM",
+	"are allowed - Activate this command by typing": "مجاز هستند - این دستور را با تایپ کردن این فعال کنید:",
+	"Are you sure?": "آیا مطمئن هستید؟",
+	"Audio": "صدا",
+	"Auto-playback response": "پخش خودکار پاسخ ",
+	"Auto-send input after 3 sec.": "به طور خودکار ورودی را پس از 3 ثانیه ارسال کن.",
+	"AUTOMATIC1111 Base URL": "پایه URL AUTOMATIC1111 ",
+	"AUTOMATIC1111 Base URL is required.": "به URL پایه AUTOMATIC1111 مورد نیاز است.",
+	"available!": "در دسترس!",
+	"Back": "بازگشت",
+	"Builder Mode": "حالت سازنده",
+	"Cancel": "لغو",
+	"Categories": "دسته\u200cبندی\u200cها",
+	"Change Password": "تغییر رمز عبور",
+	"Chat": "گپ",
+	"Chat History": "تاریخچه\u200cی گفتگو",
+	"Chat History is off for this browser.": "سابقه گپ برای این مرورگر خاموش است.",
+	"Chats": "گپ\u200cها",
+	"Check Again": "چک مجدد",
+	"Check for updates": "بررسی به\u200cروزرسانی",
+	"Checking for updates...": "در حال بررسی برای به\u200cروزرسانی..",
+	"Choose a model before saving...": "قبل از ذخیره یک مدل را انتخاب کنید...",
+	"Chunk Overlap": "همپوشانی تکه",
+	"Chunk Params": "پارامترهای تکه",
+	"Chunk Size": "اندازه تکه",
+	"Click here for help.": "برای کمک اینجا را کلیک کنید.",
+	"Click here to check other modelfiles.": "برای بررسی سایر فایل\u200cهای مدل اینجا را کلیک کنید.",
+	"Click here to select": "برای انتخاب اینجا کلیک کنید",
+	"Click here to select documents.": "برای انتخاب اسناد اینجا را کلیک کنید.",
+	"click here.": "اینجا کلیک کنید.",
+	"Click on the user role button to change a user's role.": "برای تغییر نقش کاربر، روی دکمه نقش کاربر کلیک کنید.",
+	"Close": "بسته",
+	"Collection": "مجموعه",
+	"Command": "دستور",
+	"Confirm Password": "تایید رمز عبور",
+	"Connections": "ارتباطات",
+	"Content": "محتوا",
+	"Context Length": "طول زمینه",
+	"Conversation Mode": "حالت مکالمه",
+	"Copy last code block": "کپی آخرین بلوک کد",
+	"Copy last response": "کپی آخرین پاسخ",
+	"Copying to clipboard was successful!": "کپی کردن در کلیپ بورد با موفقیت انجام شد!",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "یک عبارت مختصر و ۳ تا ۵ کلمه ای را به عنوان سرفصل برای پرس و جو زیر ایجاد کنید، به شدت محدودیت ۳-۵ کلمه را رعایت کنید و از استفاده از کلمه 'عنوان' خودداری کنید:",
+	"Create a modelfile": "ایجاد یک فایل مدل",
+	"Create Account": "ساخت حساب کاربری",
+	"Created at": "ایجاد شده در",
+	"Created by": "ایجاد شده توسط",
+	"Current Model": "مدل فعلی",
+	"Current Password": "رمز عبور فعلی",
+	"Custom": "دلخواه",
+	"Customize Ollama models for a specific purpose": "مدل های اولاما را برای یک هدف خاص سفارشی کنید",
+	"Dark": "تیره",
+	"Database": "پایگاه داده",
+	"DD/MM/YYYY HH:mm": "DD/MM/YYYY HH:mm",
+	"Default": "پیشفرض",
+	"Default (Automatic1111)": "پیشفرض (Automatic1111)",
+	"Default (Web API)": "پیشفرض (Web API)",
+	"Default model updated": "مدل پیشفرض به\u200cروزرسانی شد",
+	"Default Prompt Suggestions": "پیشنهادات پرامپت پیش فرض",
+	"Default User Role": "نقش کاربر پیش فرض",
+	"delete": "حذف",
+	"Delete a model": "حذف یک مدل",
+	"Delete chat": "حذف گپ",
+	"Delete Chats": "حذف گپ\u200cها",
+	"Deleted {{deleteModelTag}}": "{{deleteModelTag}} پاک شد",
+	"Deleted {tagName}": "{tagName} حذف شد",
+	"Description": "توضیحات",
+	"Desktop Notifications": "اعلان",
+	"Disabled": "غیرفعال",
+	"Discover a modelfile": "فایل مدل را کشف کنید",
+	"Discover a prompt": "یک اعلان را کشف کنید",
+	"Discover, download, and explore custom prompts": "پرامپت\u200cهای سفارشی را کشف، دانلود و کاوش کنید",
+	"Discover, download, and explore model presets": "پیش تنظیمات مدل را کشف، دانلود و کاوش کنید",
+	"Display the username instead of You in the Chat": "نمایش نام کاربری به جای «شما» در چت",
+	"Document": "سند",
+	"Document Settings": "تنظیمات سند",
+	"Documents": "اسناد",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "هیچ اتصال خارجی ایجاد نمی کند و داده های شما به طور ایمن در سرور میزبان محلی شما باقی می ماند.",
+	"Don't Allow": "اجازه نده",
+	"Don't have an account?": "حساب کاربری ندارید؟",
+	"Download as a File": "دانلود به صورت فایل",
+	"Download Database": "دانلود پایگاه داده",
+	"Drop any files here to add to the conversation": "هر فایلی را اینجا رها کنید تا به مکالمه اضافه شود",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "به طور مثال '30s','10m'. واحد\u200cهای زمانی معتبر 's', 'm', 'h' هستند.",
+	"Edit Doc": "ویرایش سند",
+	"Edit User": "ویرایش کاربر",
+	"Email": "ایمیل",
+	"Enable Chat History": "تاریخچه چت را فعال کنید",
+	"Enable New Sign Ups": "فعال کردن ثبت نام\u200cهای جدید",
+	"Enabled": "فعال",
+	"Enter {{role}} message here": "پیام {{role}} را اینجا وارد کنید",
+	"Enter API Key": "کلید API را وارد کنید",
+	"Enter Chunk Overlap": "مقدار Chunk Overlap را وارد کنید",
+	"Enter Chunk Size": "مقدار Chunk Size را وارد کنید",
+	"Enter Image Size (e.g. 512x512)": "اندازه تصویر را وارد کنید (مثال: 512x512)",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "URL پایه مربوط به LiteLLM API را وارد کنید (litellm_params.api_base)",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "کلید API مربوط به LiteLLM را وارد کنید (litellm_params.api_key)",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "RPM API مربوط به LiteLLM را وارد کنید (litellm_params.rpm)",
+	"Enter LiteLLM Model (litellm_params.model)": "مدل مربوط به LiteLLM را وارد کنید (litellm_params.model)",
+	"Enter Max Tokens (litellm_params.max_tokens)": "حداکثر تعداد توکن را وارد کنید (litellm_params.max_tokens)",
+	"Enter model tag (e.g. {{modelTag}})": "تگ مدل را وارد کنید (مثلا {{modelTag}})",
+	"Enter Number of Steps (e.g. 50)": "تعداد گام ها را وارد کنید (مثال: 50)",
+	"Enter stop sequence": "توالی توقف را وارد کنید",
+	"Enter Top K": "مقدار Top K را وارد کنید",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "مقدار URL را وارد کنید (مثال http://127.0.0.1:7860/)",
+	"Enter Your Email": "ایمیل خود را وارد کنید",
+	"Enter Your Full Name": "نام کامل خود را وارد کنید",
+	"Enter Your Password": "رمز عبور خود را وارد کنید",
+	"Experimental": "آزمایشی",
+	"Export All Chats (All Users)": "اکسپورت از همه گپ\u200cها(همه کاربران)",
+	"Export Chats": "اکسپورت از گپ\u200cها",
+	"Export Documents Mapping": "اکسپورت از نگاشت اسناد",
+	"Export Modelfiles": "اکسپورت از فایل\u200cهای مدل",
+	"Export Prompts": "اکسپورت از پرامپت\u200cها",
+	"Failed to read clipboard contents": "خواندن محتوای کلیپ بورد ناموفق بود",
+	"File Mode": "حالت فایل",
+	"File not found.": "فایل یافت نشد.",
+	"Focus chat input": "فوکوس کردن ورودی گپ",
+	"Format your variables using square brackets like this:": "متغیرهای خود را با استفاده از براکت مربع به شکل زیر قالب بندی کنید:",
+	"From (Base Model)": "از (مدل پایه)",
+	"Full Screen Mode": "حالت تمام صفحه",
+	"General": "عمومی",
+	"General Settings": "تنظیمات عمومی",
+	"Hello, {{name}}": "سلام، {{name}}",
+	"Hide": "پنهان",
+	"Hide Additional Params": "پنهان کردن پارامترهای اضافه",
+	"How can I help you today?": "امروز چطور می توانم کمک تان کنم؟",
+	"Image Generation (Experimental)": "تولید تصویر (آزمایشی)",
+	"Image Generation Engine": "موتور تولید تصویر",
+	"Image Settings": "تنظیمات تصویر",
+	"Images": "تصاویر",
+	"Import Chats": "ایمپورت گپ\u200cها",
+	"Import Documents Mapping": "ایمپورت نگاشت اسناد",
+	"Import Modelfiles": "ایمپورت فایل\u200cهای مدل",
+	"Import Prompts": "ایمپورت پرامپت\u200cها",
+	"Include `--api` flag when running stable-diffusion-webui": "فلگ `--api` را هنکام اجرای stable-diffusion-webui استفاده کنید.",
+	"Interface": "رابط",
+	"join our Discord for help.": "برای کمک به دیسکورد ما بپیوندید.",
+	"JSON": "JSON",
+	"JWT Expiration": "JWT انقضای",
+	"JWT Token": "JWT توکن",
+	"Keep Alive": "Keep Alive",
+	"Keyboard shortcuts": "میانبرهای صفحه کلید",
+	"Language": "زبان",
+	"Light": "روشن",
+	"Listening...": "در حال گوش دادن...",
+	"LLMs can make mistakes. Verify important information.": "مدل\u200cهای زبانی بزرگ می\u200cتوانند اشتباه کنند. اطلاعات مهم را راستی\u200cآزمایی کنید.",
+	"Made by OpenWebUI Community": "ساخته شده توسط OpenWebUI Community",
+	"Make sure to enclose them with": "مطمئن شوید که آنها را با این محصور کنید:",
+	"Manage LiteLLM Models": "Manage LiteLLM Models",
+	"Manage Models": "مدیریت مدل\u200cها",
+	"Manage Ollama Models": "مدیریت مدل\u200cهای اولاما",
+	"Max Tokens": "حداکثر توکن",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "حداکثر 3 مدل را می توان به طور همزمان دانلود کرد. لطفاً بعداً دوباره امتحان کنید.",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "MMMM DD, YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "مدل '{{modelName}}' با موفقیت دانلود شد.",
+	"Model '{{modelTag}}' is already in queue for downloading.": "مدل '{{modelTag}}' در حال حاضر در صف برای دانلود است.",
+	"Model {{modelId}} not found": "مدل {{modelId}} یافت نشد",
+	"Model {{modelName}} already exists.": "مدل {{modelName}} در حال حاضر وجود دارد.",
+	"Model Name": "نام مدل",
+	"Model not selected": "مدل انتخاب نشده",
+	"Model Tag Name": "نام تگ مدل",
+	"Model Whitelisting": "لیست سفید مدل",
+	"Model(s) Whitelisted": "مدل در لیست سفید ثبت شد",
+	"Modelfile": "فایل مدل",
+	"Modelfile Advanced Settings": "تنظیمات پیشرفته فایل\u200cمدل",
+	"Modelfile Content": "محتویات فایل مدل",
+	"Modelfiles": "فایل\u200cهای مدل",
+	"Models": "مدل\u200cها",
+	"My Documents": "اسناد من",
+	"My Modelfiles": "فایل\u200cهای مدل من",
+	"My Prompts": "پرامپت\u200cهای من",
+	"Name": "نام",
+	"Name Tag": "نام تگ",
+	"Name your modelfile": "فایل مدل را نام\u200cگذاری کنید",
+	"New Chat": "گپ جدید",
+	"New Password": "رمز عبور جدید",
+	"Not sure what to add?": "مطمئن نیستید چه چیزی را اضافه کنید؟",
+	"Not sure what to write? Switch to": "مطمئن نیستید چه بنویسید؟ تغییر به",
+	"Off": "خاموش",
+	"Okay, Let's Go!": "باشه، بزن بریم!",
+	"Ollama Base URL": "URL پایه اولاما",
+	"Ollama Version": "نسخه اولاما",
+	"On": "روشن",
+	"Only": "فقط",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "فقط کاراکترهای الفبایی و خط فاصله در رشته فرمان مجاز هستند.",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "اوه! فایل های شما هنوز در فر پردازش هستند. ما آنها را کامل می پزیم. لطفا صبور باشید، به محض آماده شدن به شما اطلاع خواهیم داد.",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "اوه! به نظر می رسد URL نامعتبر است. لطفاً دوباره بررسی کنید و دوباره امتحان کنید.",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "اوه! شما از یک روش پشتیبانی نشده (فقط frontend) استفاده می کنید. لطفاً WebUI را از بکند اجرا کنید.",
+	"Open": "باز",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "Open AI (Dall-E)",
+	"Open new chat": "باز کردن گپ جدید",
+	"OpenAI API": "OpenAI API",
+	"OpenAI API Key": "کلید OpenAI API",
+	"OpenAI API Key is required.": "مقدار کلید OpenAI API مورد نیاز است.",
+	"or": "روشن",
+	"Parameters": "پارامترها",
+	"Password": "رمز عبور",
+	"PDF Extract Images (OCR)": "استخراج تصاویر از PDF (OCR)",
+	"pending": "در انتظار",
+	"Permission denied when accessing microphone: {{error}}": "هنگام دسترسی به میکروفون، اجازه داده نشد: {{error}}",
+	"Playground": "زمین بازی",
+	"Profile": "پروفایل",
+	"Prompt Content": "محتویات پرامپت",
+	"Prompt suggestions": "پیشنهادات پرامپت",
+	"Prompts": "پرامپت\u200cها",
+	"Pull a model from Ollama.com": "دریافت یک مدل از Ollama.com",
+	"Pull Progress": "پیشرفت دریافت",
+	"Query Params": "پارامترهای پرس و جو",
+	"RAG Template": "RAG الگوی",
+	"Raw Format": "فرمت خام",
+	"Record voice": "ضبط صدا",
+	"Redirecting you to OpenWebUI Community": "در حال هدایت به OpenWebUI Community",
+	"Release Notes": "یادداشت\u200cهای انتشار",
+	"Repeat Last N": "Repeat Last N",
+	"Repeat Penalty": "Repeat Penalty",
+	"Request Mode": "حالت درخواست",
+	"Reset Vector Storage": "بازنشانی ذخیره سازی برداری",
+	"Response AutoCopy to Clipboard": "کپی خودکار پاسخ به کلیپ بورد",
+	"Role": "نقش",
+	"Rosé Pine": "Rosé Pine",
+	"Rosé Pine Dawn": "Rosé Pine Dawn",
+	"Save": "ذخیره",
+	"Save & Create": "ذخیره و ایجاد",
+	"Save & Submit": "ذخیره و ارسال",
+	"Save & Update": "ذخیره و به\u200cروزرسانی",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "ذخیره گزارش\u200cهای چت مستقیماً در حافظه مرورگر شما دیگر پشتیبانی نمی\u200cشود. لطفاً با کلیک بر روی دکمه زیر، چند لحظه برای دانلود و حذف گزارش های چت خود وقت بگذارید. نگران نباشید، شما به راحتی می توانید گزارش های چت خود را از طریق بکند دوباره وارد کنید",
+	"Scan": "اسکن",
+	"Scan complete!": "اسکن کامل شد!",
+	"Scan for documents from {{path}}": "اسکن اسناد از {{path}}",
+	"Search": "جستجو",
+	"Search Documents": "جستجوی اسناد",
+	"Search Prompts": "جستجوی پرامپت\u200cها",
+	"See readme.md for instructions": "برای مشاهده دستورالعمل\u200cها به readme.md مراجعه کنید",
+	"See what's new": "ببینید موارد جدید چه بوده",
+	"Seed": "Seed",
+	"Select a mode": "یک حالت انتخاب کنید",
+	"Select a model": "انتخاب یک مدل",
+	"Select an Ollama instance": "انتخاب یک نمونه از اولاما",
+	"Send a Messsage": "ارسال یک پیام",
+	"Send message": "ارسال پیام",
+	"Server connection verified": "اتصال سرور تأیید شد",
+	"Set as default": "تنظیم به عنوان پیشفرض",
+	"Set Default Model": "تنظیم مدل پیش فرض",
+	"Set Image Size": "تنظیم اندازه تصویر",
+	"Set Steps": "تنظیم گام\u200cها",
+	"Set Title Auto-Generation Model": "تنظیم مدل تولید خودکار عنوان",
+	"Set Voice": "تنظیم صدا",
+	"Settings": "تنظیمات",
+	"Settings saved successfully!": "تنظیمات با موفقیت ذخیره شد!",
+	"Share to OpenWebUI Community": "اشتراک گذاری با OpenWebUI Community",
+	"short-summary": "خلاصه کوتاه",
+	"Show": "نمایش",
+	"Show Additional Params": "نمایش پارامترهای اضافه",
+	"Show shortcuts": "نمایش میانبرها",
+	"sidebar": "نوار کناری",
+	"Sign in": "ورود",
+	"Sign Out": "خروج",
+	"Sign up": "ثبت نام",
+	"Speech recognition error: {{error}}": "خطای تشخیص گفتار: {{error}}",
+	"Speech-to-Text Engine": "موتور گفتار به متن",
+	"SpeechRecognition API is not supported in this browser.": "API تشخیص گفتار در این مرورگر پشتیبانی نمی شود.",
+	"Stop Sequence": "توالی توقف",
+	"STT Settings": "STT تنظیمات",
+	"Submit": "ارسال",
+	"Success": "موفقیت",
+	"Successfully updated.": "با موفقیت به روز شد",
+	"Sync All": "همگام سازی همه",
+	"System": "سیستم",
+	"System Prompt": "پرامپت سیستم",
+	"Tags": "تگ\u200cها",
+	"Temperature": "دما",
+	"Template": "الگو",
+	"Text Completion": "تکمیل متن",
+	"Text-to-Speech Engine": "موتور تبدیل متن به گفتار",
+	"Tfs Z": "Tfs Z",
+	"Theme": "قالب",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "این تضمین می کند که مکالمات ارزشمند شما به طور ایمن در پایگاه داده بکند ذخیره می شود. تشکر!",
+	"This setting does not sync across browsers or devices.": "این تنظیم در مرورگرها یا دستگاه\u200cها همگام\u200cسازی نمی\u200cشود.",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "با فشردن کلید Tab در ورودی چت پس از هر بار تعویض، چندین متغیر را به صورت متوالی به روزرسانی کنید.",
+	"Title": "عنوان",
+	"Title Auto-Generation": "تولید خودکار عنوان",
+	"Title Generation Prompt": "پرامپت تولید عنوان",
+	"to": "به",
+	"To access the available model names for downloading,": "برای دسترسی به نام مدل های موجود برای دانلود،",
+	"To access the GGUF models available for downloading,": "برای دسترسی به مدل\u200cهای GGUF موجود برای دانلود،",
+	"to chat input.": "در ورودی گپ.",
+	"Toggle settings": "نمایش/عدم نمایش تنظیمات",
+	"Toggle sidebar": "نمایش/عدم نمایش نوار کناری",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "در دسترسی به اولاما مشکل دارید؟",
+	"TTS Settings": "تنظیمات TTS",
+	"Type Hugging Face Resolve (Download) URL": "مقدار URL دانلود (Resolve) Hugging Face را وارد کنید",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "اوه اوه! مشکلی در اتصال به {{provider}} وجود داشت.",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "نوع فایل '{{file_type}}' ناشناخته است، به عنوان یک فایل متنی ساده با آن برخورد می شود.",
+	"Update password": "به روزرسانی رمزعبور",
+	"Upload a GGUF model": "آپلود یک مدل GGUF",
+	"Upload files": "بارگذاری فایل\u200cها",
+	"Upload Progress": "پیشرفت آپلود",
+	"URL Mode": "حالت URL",
+	"Use '#' in the prompt input to load and select your documents.": "در پرامپت از '#' برای لود و انتخاب اسناد خود استفاده کنید.",
+	"Use Gravatar": "استفاده از گراواتار",
+	"user": "کاربر",
+	"User Permissions": "مجوزهای کاربر",
+	"Users": "کاربران",
+	"Utilize": "استفاده کنید",
+	"Valid time units:": "واحدهای زمانی معتبر:",
+	"variable": "متغیر",
+	"variable to have them replaced with clipboard content.": "متغیر برای جایگزینی آنها با محتوای کلیپ بورد.",
+	"Version": "نسخه",
+	"Web": "وب",
+	"WebUI Add-ons": "WebUI افزونه\u200cهای",
+	"WebUI Settings": "تنظیمات WebUI",
+	"WebUI will make requests to": "WebUI درخواست\u200cها را ارسال خواهد کرد به",
+	"What’s New in": "موارد جدید در",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "وقتی سابقه خاموش است، چت\u200cهای جدید در این مرورگر در سابقه شما در هیچ یک از دستگاه\u200cهایتان ظاهر نمی\u200cشوند.",
+	"Whisper (Local)": "ویسپر (محلی)",
+	"Write a prompt suggestion (e.g. Who are you?)": "یک پیشنهاد پرامپت بنویسید (مثلاً شما کی هستید؟)",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "خلاصه ای در 50 کلمه بنویسید که [موضوع یا کلمه کلیدی] را خلاصه کند.",
+	"You": "شما",
+	"You're a helpful assistant.": "تو یک دستیار سودمند هستی.",
+	"You're now logged in.": "شما اکنون وارد شده\u200cاید."
+}

src/lib/i18n/locales/fr-FR/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' ou '-1' pour aucune expiration.",
+	"(Beta)": "(Bêta)",
+	"(e.g. `sh webui.sh --api`)": "(par ex. `sh webui.sh --api`)",
+	"(latest)": "",
+	"{{modelName}} is thinking...": "{{modelName}} réfléchit...",
+	"{{webUIName}} Backend Required": "Backend {{webUIName}} requis",
+	"a user": "",
+	"About": "À propos",
+	"Account": "Compte",
+	"Action": "Action",
+	"Add a model": "Ajouter un modèle",
+	"Add a model tag name": "Ajouter un nom de tag pour le modèle",
+	"Add a short description about what this modelfile does": "Ajouter une courte description de ce que fait ce fichier de modèle",
+	"Add a short title for this prompt": "Ajouter un court titre pour ce prompt",
+	"Add a tag": "",
+	"Add Docs": "Ajouter des documents",
+	"Add Files": "Ajouter des fichiers",
+	"Add message": "Ajouter un message",
+	"add tags": "ajouter des tags",
+	"Adjusting these settings will apply changes universally to all users.": "L'ajustement de ces paramètres appliquera les changements à tous les utilisateurs.",
+	"admin": "Administrateur",
+	"Admin Panel": "Panneau d'administration",
+	"Admin Settings": "Paramètres d'administration",
+	"Advanced Parameters": "Paramètres avancés",
+	"all": "tous",
+	"All Users": "Tous les utilisateurs",
+	"Allow": "Autoriser",
+	"Allow Chat Deletion": "Autoriser la suppression du chat",
+	"alphanumeric characters and hyphens": "caractères alphanumériques et tirets",
+	"Already have an account?": "Vous avez déjà un compte ?",
+	"an assistant": "",
+	"and": "et",
+	"API Base URL": "URL de base de l'API",
+	"API Key": "Clé API",
+	"API RPM": "RPM API",
+	"are allowed - Activate this command by typing": "sont autorisés - Activez cette commande en tapant",
+	"Are you sure?": "",
+	"Audio": "Audio",
+	"Auto-playback response": "Réponse en lecture automatique",
+	"Auto-send input after 3 sec.": "Envoyer automatiquement l'entrée après 3 sec.",
+	"AUTOMATIC1111 Base URL": "URL de base AUTOMATIC1111",
+	"AUTOMATIC1111 Base URL is required.": "",
+	"available!": "disponible !",
+	"Back": "Retour",
+	"Builder Mode": "Mode Constructeur",
+	"Cancel": "Annuler",
+	"Categories": "Catégories",
+	"Change Password": "Changer le mot de passe",
+	"Chat": "Chat",
+	"Chat History": "Historique du chat",
+	"Chat History is off for this browser.": "L'historique du chat est désactivé pour ce navigateur.",
+	"Chats": "Chats",
+	"Check Again": "Vérifier à nouveau",
+	"Check for updates": "Vérifier les mises à jour",
+	"Checking for updates...": "Vérification des mises à jour...",
+	"Choose a model before saving...": "Choisissez un modèle avant d'enregistrer...",
+	"Chunk Overlap": "Chevauchement de bloc",
+	"Chunk Params": "Paramètres de bloc",
+	"Chunk Size": "Taille de bloc",
+	"Click here for help.": "",
+	"Click here to check other modelfiles.": "Cliquez ici pour vérifier d'autres fichiers de modèle.",
+	"Click here to select": "",
+	"Click here to select documents.": "",
+	"click here.": "cliquez ici.",
+	"Click on the user role button to change a user's role.": "Cliquez sur le bouton de rôle d'utilisateur pour changer le rôle d'un utilisateur.",
+	"Close": "Fermer",
+	"Collection": "Collection",
+	"Command": "Commande",
+	"Confirm Password": "Confirmer le mot de passe",
+	"Connections": "Connexions",
+	"Content": "Contenu",
+	"Context Length": "Longueur du contexte",
+	"Conversation Mode": "Mode de conversation",
+	"Copy last code block": "Copier le dernier bloc de code",
+	"Copy last response": "Copier la dernière réponse",
+	"Copying to clipboard was successful!": "La copie dans le presse-papiers a réussi !",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "Créez une phrase concise de 3-5 mots comme en-tête pour la requête suivante, en respectant strictement la limite de 3-5 mots et en évitant l'utilisation du mot 'titre' :",
+	"Create a modelfile": "Créer un fichier de modèle",
+	"Create Account": "Créer un compte",
+	"Created at": "Créé le",
+	"Created by": "Créé par",
+	"Current Model": "Modèle actuel",
+	"Current Password": "Mot de passe actuel",
+	"Custom": "Personnalisé",
+	"Customize Ollama models for a specific purpose": "Personnaliser les modèles Ollama pour un objectif spécifique",
+	"Dark": "Sombre",
+	"Database": "Base de données",
+	"DD/MM/YYYY HH:mm": "DD/MM/YYYY HH:mm",
+	"Default": "Par défaut",
+	"Default (Automatic1111)": "",
+	"Default (Web API)": "Par défaut (API Web)",
+	"Default model updated": "Modèle par défaut mis à jour",
+	"Default Prompt Suggestions": "Suggestions de prompt par défaut",
+	"Default User Role": "Rôle d'utilisateur par défaut",
+	"delete": "supprimer",
+	"Delete a model": "Supprimer un modèle",
+	"Delete chat": "Supprimer le chat",
+	"Delete Chats": "Supprimer les chats",
+	"Deleted {{deleteModelTag}}": "{{deleteModelTag}} supprimé",
+	"Deleted {tagName}": "{tagName} supprimé",
+	"Description": "Description",
+	"Desktop Notifications": "Notifications de bureau",
+	"Disabled": "Désactivé",
+	"Discover a modelfile": "Découvrir un fichier de modèle",
+	"Discover a prompt": "Découvrir un prompt",
+	"Discover, download, and explore custom prompts": "Découvrir, télécharger et explorer des prompts personnalisés",
+	"Discover, download, and explore model presets": "Découvrir, télécharger et explorer des préconfigurations de modèles",
+	"Display the username instead of You in the Chat": "Afficher le nom d'utilisateur au lieu de 'Vous' dans le Chat",
+	"Document": "Document",
+	"Document Settings": "Paramètres du document",
+	"Documents": "Documents",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "ne fait aucune connexion externe, et vos données restent en sécurité sur votre serveur hébergé localement.",
+	"Don't Allow": "Ne pas autoriser",
+	"Don't have an account?": "Vous n'avez pas de compte ?",
+	"Download as a File": "Télécharger en tant que fichier",
+	"Download Database": "Télécharger la base de données",
+	"Drop any files here to add to the conversation": "Déposez des fichiers ici pour les ajouter à la conversation",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "par ex. '30s', '10m'. Les unités de temps valides sont 's', 'm', 'h'.",
+	"Edit Doc": "Éditer le document",
+	"Edit User": "Éditer l'utilisateur",
+	"Email": "Email",
+	"Enable Chat History": "Activer l'historique du chat",
+	"Enable New Sign Ups": "Activer les nouvelles inscriptions",
+	"Enabled": "Activé",
+	"Enter {{role}} message here": "",
+	"Enter API Key": "",
+	"Enter Chunk Overlap": "",
+	"Enter Chunk Size": "",
+	"Enter Image Size (e.g. 512x512)": "",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "",
+	"Enter LiteLLM Model (litellm_params.model)": "",
+	"Enter Max Tokens (litellm_params.max_tokens)": "",
+	"Enter model tag (e.g. {{modelTag}})": "",
+	"Enter Number of Steps (e.g. 50)": "",
+	"Enter stop sequence": "Entrez la séquence d'arrêt",
+	"Enter Top K": "",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "",
+	"Enter Your Email": "Entrez votre email",
+	"Enter Your Full Name": "Entrez votre nom complet",
+	"Enter Your Password": "Entrez votre mot de passe",
+	"Experimental": "Expérimental",
+	"Export All Chats (All Users)": "Exporter tous les chats (tous les utilisateurs)",
+	"Export Chats": "Exporter les chats",
+	"Export Documents Mapping": "Exporter la correspondance des documents",
+	"Export Modelfiles": "Exporter les fichiers de modèle",
+	"Export Prompts": "Exporter les prompts",
+	"Failed to read clipboard contents": "Échec de la lecture du contenu du presse-papiers",
+	"File Mode": "Mode fichier",
+	"File not found.": "Fichier non trouvé.",
+	"Focus chat input": "Concentrer sur l'entrée du chat",
+	"Format your variables using square brackets like this:": "Formatez vos variables en utilisant des crochets comme ceci :",
+	"From (Base Model)": "De (Modèle de base)",
+	"Full Screen Mode": "Mode plein écran",
+	"General": "Général",
+	"General Settings": "Paramètres généraux",
+	"Hello, {{name}}": "Bonjour, {{name}}",
+	"Hide": "Cacher",
+	"Hide Additional Params": "Hide Additional Params",
+	"How can I help you today?": "Comment puis-je vous aider aujourd'hui ?",
+	"Image Generation (Experimental)": "Génération d'image (Expérimental)",
+	"Image Generation Engine": "",
+	"Image Settings": "Paramètres d'image",
+	"Images": "Images",
+	"Import Chats": "Importer les chats",
+	"Import Documents Mapping": "Importer la correspondance des documents",
+	"Import Modelfiles": "Importer les fichiers de modèle",
+	"Import Prompts": "Importer les prompts",
+	"Include `--api` flag when running stable-diffusion-webui": "Inclure le drapeau `--api` lors de l'exécution de stable-diffusion-webui",
+	"Interface": "Interface",
+	"join our Discord for help.": "rejoignez notre Discord pour obtenir de l'aide.",
+	"JSON": "JSON",
+	"JWT Expiration": "Expiration JWT",
+	"JWT Token": "Jeton JWT",
+	"Keep Alive": "Garder en vie",
+	"Keyboard shortcuts": "Raccourcis clavier",
+	"Language": "Langue",
+	"Light": "Clair",
+	"Listening...": "Écoute...",
+	"LLMs can make mistakes. Verify important information.": "Les LLMs peuvent faire des erreurs. Vérifiez les informations importantes.",
+	"Made by OpenWebUI Community": "Réalisé par la communauté OpenWebUI",
+	"Make sure to enclose them with": "Assurez-vous de les entourer avec",
+	"Manage LiteLLM Models": "Gérer les modèles LiteLLM",
+	"Manage Models": "",
+	"Manage Ollama Models": "Gérer les modèles Ollama",
+	"Max Tokens": "Tokens maximaux",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "Un maximum de 3 modèles peut être téléchargé simultanément. Veuillez réessayer plus tard.",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "MMMM DD, YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "Le modèle '{{modelName}}' a été téléchargé avec succès.",
+	"Model '{{modelTag}}' is already in queue for downloading.": "Le modèle '{{modelTag}}' est déjà dans la file d'attente pour le téléchargement.",
+	"Model {{modelId}} not found": "Modèle {{modelId}} non trouvé",
+	"Model {{modelName}} already exists.": "Le modèle {{modelName}} existe déjà.",
+	"Model Name": "Nom du modèle",
+	"Model not selected": "Modèle non sélectionné",
+	"Model Tag Name": "Nom de tag du modèle",
+	"Model Whitelisting": "",
+	"Model(s) Whitelisted": "",
+	"Modelfile": "Fichier de modèle",
+	"Modelfile Advanced Settings": "Paramètres avancés du fichier de modèle",
+	"Modelfile Content": "Contenu du fichier de modèle",
+	"Modelfiles": "Fichiers de modèle",
+	"Models": "Modèles",
+	"My Documents": "Mes documents",
+	"My Modelfiles": "Mes fichiers de modèle",
+	"My Prompts": "Mes prompts",
+	"Name": "Nom",
+	"Name Tag": "Tag de nom",
+	"Name your modelfile": "Nommez votre fichier de modèle",
+	"New Chat": "Nouveau chat",
+	"New Password": "Nouveau mot de passe",
+	"Not sure what to add?": "Vous ne savez pas quoi ajouter ?",
+	"Not sure what to write? Switch to": "Vous ne savez pas quoi écrire ? Basculer vers",
+	"Off": "Désactivé",
+	"Okay, Let's Go!": "D'accord, allons-y !",
+	"Ollama Base URL": "",
+	"Ollama Version": "Version Ollama",
+	"On": "Activé",
+	"Only": "Seulement",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "Seuls les caractères alphanumériques et les tirets sont autorisés dans la chaîne de commande.",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "Oups ! Tenez bon ! Vos fichiers sont encore dans le four. Nous les cuisinons à la perfection. Soyez patient et nous vous informerons dès qu'ils seront prêts.",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "Oops! Looks like the URL is invalid. Please double-check and try again.",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.",
+	"Open": "Ouvrir",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "",
+	"Open new chat": "Ouvrir un nouveau chat",
+	"OpenAI API": "API OpenAI",
+	"OpenAI API Key": "",
+	"OpenAI API Key is required.": "",
+	"or": "ou",
+	"Parameters": "Paramètres",
+	"Password": "Mot de passe",
+	"PDF Extract Images (OCR)": "",
+	"pending": "en attente",
+	"Permission denied when accessing microphone: {{error}}": "Permission refusée lors de l'accès au microphone : {{error}}",
+	"Playground": "Aire de jeu",
+	"Profile": "Profil",
+	"Prompt Content": "Contenu du prompt",
+	"Prompt suggestions": "Suggestions de prompt",
+	"Prompts": "Prompts",
+	"Pull a model from Ollama.com": "Tirer un modèle de Ollama.com",
+	"Pull Progress": "Progression du tirage",
+	"Query Params": "",
+	"RAG Template": "Modèle RAG",
+	"Raw Format": "Format brut",
+	"Record voice": "Enregistrer la voix",
+	"Redirecting you to OpenWebUI Community": "Vous redirige vers la communauté OpenWebUI",
+	"Release Notes": "Notes de version",
+	"Repeat Last N": "Répéter les derniers N",
+	"Repeat Penalty": "Pénalité de répétition",
+	"Request Mode": "Mode de demande",
+	"Reset Vector Storage": "Réinitialiser le stockage de vecteur",
+	"Response AutoCopy to Clipboard": "Copie automatique de la réponse dans le presse-papiers",
+	"Role": "Rôle",
+	"Rosé Pine": "Pin Rosé",
+	"Rosé Pine Dawn": "Aube Pin Rosé",
+	"Save": "Enregistrer",
+	"Save & Create": "Enregistrer & Créer",
+	"Save & Submit": "Enregistrer & Soumettre",
+	"Save & Update": "Enregistrer & Mettre à jour",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "La sauvegarde des chat directement dans le stockage de votre navigateur n'est plus prise en charge. Veuillez prendre un moment pour télécharger et supprimer vos journaux de chat en cliquant sur le bouton ci-dessous. Ne vous inquiétez pas, vous pouvez facilement importer vos sauvegardes de chat via",
+	"Scan": "Scanner",
+	"Scan complete!": "Scan terminé !",
+	"Scan for documents from {{path}}": "Scanner des documents depuis {{path}}",
+	"Search": "Recherche",
+	"Search Documents": "Rechercher des documents",
+	"Search Prompts": "Rechercher des prompts",
+	"See readme.md for instructions": "Voir readme.md pour les instructions",
+	"See what's new": "Voir les nouveautés",
+	"Seed": "Graine",
+	"Select a mode": "",
+	"Select a model": "Sélectionner un modèle",
+	"Select an Ollama instance": "",
+	"Send a Messsage": "Envoyer un message",
+	"Send message": "Envoyer un message",
+	"Server connection verified": "Connexion au serveur vérifiée",
+	"Set as default": "Définir par défaut",
+	"Set Default Model": "Définir le modèle par défaut",
+	"Set Image Size": "Définir la taille de l'image",
+	"Set Steps": "Définir les étapes",
+	"Set Title Auto-Generation Model": "Définir le modèle de génération automatique de titre",
+	"Set Voice": "Définir la voix",
+	"Settings": "Paramètres",
+	"Settings saved successfully!": "",
+	"Share to OpenWebUI Community": "Partager avec la communauté OpenWebUI",
+	"short-summary": "résumé court",
+	"Show": "Montrer",
+	"Show Additional Params": "Show Additional Params",
+	"Show shortcuts": "Afficher les raccourcis",
+	"sidebar": "barre latérale",
+	"Sign in": "Se connecter",
+	"Sign Out": "Se déconnecter",
+	"Sign up": "S'inscrire",
+	"Speech recognition error: {{error}}": "Erreur de reconnaissance vocale : {{error}}",
+	"Speech-to-Text Engine": "Moteur de reconnaissance vocale",
+	"SpeechRecognition API is not supported in this browser.": "L'API SpeechRecognition n'est pas prise en charge dans ce navigateur.",
+	"Stop Sequence": "Séquence d'arrêt",
+	"STT Settings": "Paramètres STT",
+	"Submit": "Soumettre",
+	"Success": "Succès",
+	"Successfully updated.": "Mis à jour avec succès.",
+	"Sync All": "Synchroniser tout",
+	"System": "Système",
+	"System Prompt": "Invite de système",
+	"Tags": "Tags",
+	"Temperature": "Température",
+	"Template": "Modèle",
+	"Text Completion": "Complétion de texte",
+	"Text-to-Speech Engine": "Moteur de synthèse vocale",
+	"Tfs Z": "Tfs Z",
+	"Theme": "Thème",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "Cela garantit que vos précieuses conversations sont en sécurité dans votre base de données. Merci !",
+	"This setting does not sync across browsers or devices.": "Ce paramètre ne se synchronise pas entre les navigateurs ou les appareils.",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.",
+	"Title": "Titre",
+	"Title Auto-Generation": "Génération automatique de titre",
+	"Title Generation Prompt": "Prompt de génération de titre",
+	"to": "à",
+	"To access the available model names for downloading,": "Pour accéder aux noms de modèles disponibles pour le téléchargement,",
+	"To access the GGUF models available for downloading,": "To access the GGUF models available for downloading,",
+	"to chat input.": "to chat input.",
+	"Toggle settings": "Basculer les paramètres",
+	"Toggle sidebar": "Basculer la barre latérale",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "Problèmes d'accès à Ollama ?",
+	"TTS Settings": "Paramètres TTS",
+	"Type Hugging Face Resolve (Download) URL": "",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "Uh-oh ! Il y a eu un problème de connexion à {{provider}}.",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "Unknown File Type '{{file_type}}', but accepting and treating as plain text",
+	"Update password": "",
+	"Upload a GGUF model": "Upload a GGUF model",
+	"Upload files": "Téléverser des fichiers",
+	"Upload Progress": "Upload Progress",
+	"URL Mode": "URL Mode",
+	"Use '#' in the prompt input to load and select your documents.": "Utilisez '#' dans l'entrée du prompt pour charger et sélectionner vos documents.",
+	"Use Gravatar": "",
+	"user": "Utilisateur",
+	"User Permissions": "Permissions d'utilisateur",
+	"Users": "Utilisateurs",
+	"Utilize": "Utiliser",
+	"Valid time units:": "Unités de temps valides :",
+	"variable": "variable",
+	"variable to have them replaced with clipboard content.": "variable pour les remplacer par le contenu du presse-papiers.",
+	"Version": "",
+	"Web": "Web",
+	"WebUI Add-ons": "Add-ons WebUI",
+	"WebUI Settings": "Paramètres WebUI",
+	"WebUI will make requests to": "",
+	"What’s New in": "Quoi de neuf dans",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "Lorsque l'historique est désactivé, les nouveaux chats sur ce navigateur n'apparaîtront pas dans votre historique sur aucun de vos appareils.",
+	"Whisper (Local)": "Whisper (Local)",
+	"Write a prompt suggestion (e.g. Who are you?)": "Écrivez un prompt (e.x. Qui est-tu ?)",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "Ecrivez un résumé en 50 mots [sujet ou mot-clé]",
+	"You": "You",
+	"You're a helpful assistant.": "Vous êtes un assistant utile",
+	"You're now logged in.": "Vous êtes maintenant connecté."
+}

src/lib/i18n/locales/languages.json

@@ -0,0 +1,30 @@
+[
+	{
+		"code": "en-US",
+		"title": "English (US)"
+	},
+	{
+		"code": "fa-IR",
+		"title": "فارسی (Farsi)"
+	},
+	{
+		"code": "de-DE",
+		"title": "Deutsch"
+	},
+	{
+		"code": "fr-FR",
+		"title": "French (France)"
+	},
+	{
+		"code": "uk-UA",
+		"title": "Ukrainian"
+	},
+	{
+		"code": "zh-TW",
+		"title": "Chinese (Traditional)"
+	},
+	{
+		"code": "zh-CN",
+		"title": "Chinese (Simplified)"
+	}
+]

src/lib/i18n/locales/uk-UA/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' or '-1' для відсутності терміну дії.",
+	"(Beta)": "(Beta)",
+	"(e.g. `sh webui.sh --api`)": "(e.g. `sh webui.sh --api`)",
+	"(latest)": "(остання)",
+	"{{modelName}} is thinking...": "{{modelName}} думає...",
+	"{{webUIName}} Backend Required": "Необхідний бекенд {{webUIName}}",
+	"a user": "користувача",
+	"About": "Про програму",
+	"Account": "Обліковий запис",
+	"Action": "Дія",
+	"Add a model": "Додати модель",
+	"Add a model tag name": "Додати ім'я тегу моделі",
+	"Add a short description about what this modelfile does": "Додати короткий опис того, що робить цей файл моделі",
+	"Add a short title for this prompt": "Додати коротку назву для цього промту",
+	"Add a tag": "Додайте тег",
+	"Add Docs": "Додати документи",
+	"Add Files": "Додати файли",
+	"Add message": "Додати повідомлення",
+	"add tags": "додати теги",
+	"Adjusting these settings will apply changes universally to all users.": "Зміни в цих налаштуваннях будуть застосовані для всіх користувачів.",
+	"admin": "адмін",
+	"Admin Panel": "Панель адміністратора",
+	"Admin Settings": "Налаштування адміністратора",
+	"Advanced Parameters": "Розширені параметри",
+	"all": "всі",
+	"All Users": "Всі користувачі",
+	"Allow": "Дозволити",
+	"Allow Chat Deletion": "Дозволити видалення чату",
+	"alphanumeric characters and hyphens": "алфавітно-цифрові символи та дефіси",
+	"Already have an account?": "Вже є обліковий запис?",
+	"an assistant": "асистента",
+	"and": "та",
+	"API Base URL": "Базова адреса URL API",
+	"API Key": "Ключ API",
+	"API RPM": "API RPM",
+	"are allowed - Activate this command by typing": "дозволено - активізуйте цю команду набором",
+	"Are you sure?": "Ви впевнені?",
+	"Audio": "Аудіо",
+	"Auto-playback response": "Автоматичне відтворення відповіді",
+	"Auto-send input after 3 sec.": "Автоматична відправка вводу через 3 сек.",
+	"AUTOMATIC1111 Base URL": "Базова адреса URL AUTOMATIC1111",
+	"AUTOMATIC1111 Base URL is required.": "AUTOMATIC1111 Необхідна URL-адреса.",
+	"available!": "доступно!",
+	"Back": "Назад",
+	"Builder Mode": "Режим конструктора",
+	"Cancel": "Скасувати",
+	"Categories": "Категорії",
+	"Change Password": "Змінити пароль",
+	"Chat": "Чат",
+	"Chat History": "Історія чату",
+	"Chat History is off for this browser.": "Історія чату вимкнена для цього браузера.",
+	"Chats": "Чати",
+	"Check Again": "Перевірити ще раз",
+	"Check for updates": "Перевірити оновлення",
+	"Checking for updates...": "Перевірка оновлень...",
+	"Choose a model before saving...": "Оберіть модель перед збереженням...",
+	"Chunk Overlap": "Перекриття фрагментів",
+	"Chunk Params": "Параметри фрагментів",
+	"Chunk Size": "Розмір фрагменту",
+	"Click here for help.": "Клацніть тут, щоб отримати допомогу.",
+	"Click here to check other modelfiles.": "Клацніть тут, щоб перевірити інші файли моделей.",
+	"Click here to select": "Натисніть тут, щоб вибрати",
+	"Click here to select documents.": "Натисніть тут, щоб вибрати документи.",
+	"click here.": "клацніть тут.",
+	"Click on the user role button to change a user's role.": "Натисніть кнопку ролі користувача, щоб змінити роль користувача.",
+	"Close": "Закрити",
+	"Collection": "Колекція",
+	"Command": "Команда",
+	"Confirm Password": "Підтвердіть пароль",
+	"Connections": "З'єднання",
+	"Content": "Зміст",
+	"Context Length": "Довжина контексту",
+	"Conversation Mode": "Режим розмови",
+	"Copy last code block": "Копіювати останній блок коду",
+	"Copy last response": "Копіювати останню відповідь",
+	"Copying to clipboard was successful!": "Копіювання в буфер обміну виконано успішно!",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':",
+	"Create a modelfile": "Створити файл моделі",
+	"Create Account": "Створити обліковий запис",
+	"Created at": "Створено",
+	"Created by": "Створено",
+	"Current Model": "Поточна модель",
+	"Current Password": "Поточний пароль",
+	"Custom": "Налаштувати",
+	"Customize Ollama models for a specific purpose": "Налаштувати моделі Ollama для конкретної мети",
+	"Dark": "Темна",
+	"Database": "База даних",
+	"DD/MM/YYYY HH:mm": "DD/MM/YYYY HH:mm",
+	"Default": "За замовчуванням",
+	"Default (Automatic1111)": "За замовчуванням (Automatic1111)",
+	"Default (Web API)": "За замовчуванням (Web API)",
+	"Default model updated": "Модель за замовчуванням оновлено",
+	"Default Prompt Suggestions": "Пропозиції промтів замовчуванням",
+	"Default User Role": "Роль користувача за замовчуванням",
+	"delete": "видалити",
+	"Delete a model": "Видалити модель",
+	"Delete chat": "Видалити чат",
+	"Delete Chats": "Видалити чати",
+	"Deleted {{deleteModelTag}}": "Видалено {{deleteModelTag}}",
+	"Deleted {tagName}": "Видалено {tagName}",
+	"Description": "Опис",
+	"Desktop Notifications": "Сповіщення",
+	"Disabled": "Вимкнено",
+	"Discover a modelfile": "Знайти файл моделі",
+	"Discover a prompt": "Знайти промт",
+	"Discover, download, and explore custom prompts": "Знайдіть, завантажте та досліджуйте налаштовані промти",
+	"Discover, download, and explore model presets": "Знайдіть, завантажте та досліджуйте налаштовані налаштування моделі",
+	"Display the username instead of You in the Chat": "Показувати ім'я користувача замість 'Ви' в чаті",
+	"Document": "Документ",
+	"Document Settings": "Налаштування документа",
+	"Documents": "Документи",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "не встановлює жодних зовнішніх з'єднань, і ваші дані залишаються в безпеці на вашому локальному сервері.",
+	"Don't Allow": "Не дозволяти",
+	"Don't have an account?": "Немає облікового запису?",
+	"Download as a File": "Завантажити як файл",
+	"Download Database": "Завантажити базу даних",
+	"Drop any files here to add to the conversation": "Перетягніть сюди файли, щоб додати до розмови",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "напр. '30s','10m'. Дійсні одиниці часу: 'с', 'хв', 'г'.",
+	"Edit Doc": "Редагувати документ",
+	"Edit User": "Редагувати користувача",
+	"Email": "Електронна пошта",
+	"Enable Chat History": "Увімкнути історію чату",
+	"Enable New Sign Ups": "Дозволити нові реєстрації",
+	"Enabled": "Увімкнено",
+	"Enter {{role}} message here": "Введіть повідомлення {{role}} тут",
+	"Enter API Key": "Введіть API-ключ",
+	"Enter Chunk Overlap": "Введіть перекриття фрагменту",
+	"Enter Chunk Size": "Введіть розмір фрагменту",
+	"Enter Image Size (e.g. 512x512)": "Введіть розмір зображення (напр. 512x512)",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "Введіть URL-адресу API LiteLLM (litellm_params.api_base)",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "Введіть ключ API LiteLLM (litellm_params.api_key)",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "Введіть RPM API LiteLLM (litellm_params.rpm)",
+	"Enter LiteLLM Model (litellm_params.model)": "Введіть модель LiteLLM (litellm_params.model)",
+	"Enter Max Tokens (litellm_params.max_tokens)": "Введіть максимальну кількість токенів (litellm_params.max_tokens)",
+	"Enter model tag (e.g. {{modelTag}})": "Введіть тег моделі (напр. {{modelTag}})",
+	"Enter Number of Steps (e.g. 50)": "Введіть кількість кроків (напр. 50)",
+	"Enter stop sequence": "Введіть символ зупинки",
+	"Enter Top K": "Введіть Top K",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "Введіть URL-адресу (напр. http://127.0.0.1:7860/)",
+	"Enter Your Email": "Введіть вашу електронну пошту",
+	"Enter Your Full Name": "Введіть ваше ім'я",
+	"Enter Your Password": "Введіть ваш пароль",
+	"Experimental": "Експериментальне",
+	"Export All Chats (All Users)": "Експортувати всі чати (всі користувачі)",
+	"Export Chats": "Експортувати чати",
+	"Export Documents Mapping": "Експортувати відображення документів",
+	"Export Modelfiles": "Експортувати файл моделі",
+	"Export Prompts": "Експортувати промти",
+	"Failed to read clipboard contents": "Не вдалося прочитати вміст буфера обміну",
+	"File Mode": "Файловий режим",
+	"File not found.": "Файл не знайдено.",
+	"Focus chat input": "Фокус вводу чату",
+	"Format your variables using square brackets like this:": "Форматуйте свої змінні квадратними дужками так:",
+	"From (Base Model)": "Від (базова модель)",
+	"Full Screen Mode": "Режим повного екрану",
+	"General": "Загальні",
+	"General Settings": "Загальні налаштування",
+	"Hello, {{name}}": "Привіт, {{name}}",
+	"Hide": "Приховати",
+	"Hide Additional Params": "Приховати додаткові параметри",
+	"How can I help you today?": "Чим я можу допомогти вам сьогодні?",
+	"Image Generation (Experimental)": "Генерування зображень (експериментально)",
+	"Image Generation Engine": "Механізм генерації зображень",
+	"Image Settings": "Налаштування зображення",
+	"Images": "Зображення",
+	"Import Chats": "Імпортувати чати",
+	"Import Documents Mapping": "Імпортувати відображення документів",
+	"Import Modelfiles": "Імпортувати файл моделі",
+	"Import Prompts": "Імпортувати промти",
+	"Include `--api` flag when running stable-diffusion-webui": "Включіть прапор `--api` при запуску stable-diffusion-webui",
+	"Interface": "Інтерфейс",
+	"join our Discord for help.": "приєднуйтеся до нашого Discord для допомоги.",
+	"JSON": "JSON",
+	"JWT Expiration": "Термін дії JWT",
+	"JWT Token": "Токен JWT",
+	"Keep Alive": "Зберегти активність",
+	"Keyboard shortcuts": "Клавіатурні скорочення",
+	"Language": "Мова",
+	"Light": "Світла",
+	"Listening...": "Слухаю...",
+	"LLMs can make mistakes. Verify important information.": "LLMs можуть помилятися. Перевірте важливу інформацію.",
+	"Made by OpenWebUI Community": "Зроблено спільнотою OpenWebUI",
+	"Make sure to enclose them with": "Переконайтеся, що вони закриті",
+	"Manage LiteLLM Models": "Керування моделями LiteLLM",
+	"Manage Models": "Керування моделями",
+	"Manage Ollama Models": "Керування моделями Ollama",
+	"Max Tokens": "Максимальна кількість токенів",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "Максимум 3 моделі можна завантажити одночасно. Будь ласка, спробуйте пізніше.",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "MMMM DD, YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "Модель '{{modelName}}' успішно завантажено.",
+	"Model '{{modelTag}}' is already in queue for downloading.": "Модель '{{modelTag}}' вже знаходиться в черзі на завантаження.",
+	"Model {{modelId}} not found": "Модель {{modelId}} не знайдено",
+	"Model {{modelName}} already exists.": "Модель {{modelName}} вже існує.",
+	"Model Name": "Назва моделі",
+	"Model not selected": "Модель не вибрана",
+	"Model Tag Name": "Ім'я тегу моделі",
+	"Model Whitelisting": "Модель білого списку",
+	"Model(s) Whitelisted": "Модель(і) білого списку",
+	"Modelfile": "Файли моделі",
+	"Modelfile Advanced Settings": "Додаткові налаштування файлу моделі",
+	"Modelfile Content": "Вміст файлу моделі",
+	"Modelfiles": "Файли моделей",
+	"Models": "Моделі",
+	"My Documents": "Мої документи",
+	"My Modelfiles": "Мої файли моделей",
+	"My Prompts": "Мої промти",
+	"Name": "Ім'я",
+	"Name Tag": "Назва тегу",
+	"Name your modelfile": "Назвіть свій файл моделі",
+	"New Chat": "Новий чат",
+	"New Password": "Новий пароль",
+	"Not sure what to add?": "Не впевнений, що додати?",
+	"Not sure what to write? Switch to": "Не впевнений, що писати? Переключитися на",
+	"Off": "Вимк",
+	"Okay, Let's Go!": "Гаразд, давайте почнемо!",
+	"Ollama Base URL": "Основна URL-адреса Ollama",
+	"Ollama Version": "Версія Ollama",
+	"On": "Увімк",
+	"Only": "Тільки",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "У рядку команди дозволено використовувати лише алфавітно-цифрові символи та дефіси.",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "Ой! Зачекайте, будь ласка! Ваші файли ще готуються. Ми робимо все, щоб вони були ідеальними. Будь ласка, будьте терплячі, ми повідомимо вам, коли вони будуть готові.",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "Упс! Схоже, що URL-адреса невірна. Будь ласка, перевірте ще раз та спробуйте ще раз.",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "Упс! Ви використовуєте непідтримуваний метод (тільки для фронтенду). Будь ласка, обслуговуйте WebUI з бекенду.",
+	"Open": "Відкрити",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "Open AI (Dall-E)",
+	"Open new chat": "Відкрити новий чат",
+	"OpenAI API": "API OpenAI",
+	"OpenAI API Key": "Ключ API OpenAI",
+	"OpenAI API Key is required.": "Потрібен ключ OpenAI API.",
+	"or": "або",
+	"Parameters": "Параметри",
+	"Password": "Пароль",
+	"PDF Extract Images (OCR)": "Розпізнавання зображень з PDF (OCR)",
+	"pending": "на розгляді",
+	"Permission denied when accessing microphone: {{error}}": "Доступ до мікрофона заборонено: {{error}}",
+	"Playground": "Майданчик",
+	"Profile": "Профіль",
+	"Prompt Content": "Зміст промту",
+	"Prompt suggestions": "Швидкі промти",
+	"Prompts": "Промти",
+	"Pull a model from Ollama.com": "Завантажити модель з Ollama.com",
+	"Pull Progress": "Прогрес завантаження",
+	"Query Params": "Параметри запиту",
+	"RAG Template": "Шаблон RAG",
+	"Raw Format": "Необроблений формат",
+	"Record voice": "Записати голос",
+	"Redirecting you to OpenWebUI Community": "Перенаправляємо вас до спільноти OpenWebUI",
+	"Release Notes": "Нотатки до випуску",
+	"Repeat Last N": "Повторити останні N",
+	"Repeat Penalty": "Штраф за повторення",
+	"Request Mode": "Режим запиту",
+	"Reset Vector Storage": "Скинути векторне сховище",
+	"Response AutoCopy to Clipboard": "Автокопіювання відповіді в буфер обміну",
+	"Role": "Роль",
+	"Rosé Pine": "Rosé Pine",
+	"Rosé Pine Dawn": "Rosé Pine Dawn",
+	"Save": "Зберегти",
+	"Save & Create": "Зберегти та створити",
+	"Save & Submit": "Зберегти та надіслати",
+	"Save & Update": "Зберегти та оновити",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "Збереження журналів чату безпосередньо в сховище вашого браузера більше не підтримується. Будь ласка, завантажте та видаліть журнали чату, натиснувши кнопку нижче. Не хвилюйтеся, ви можете легко повторно імпортувати журнали чату до бекенду через",
+	"Scan": "Сканування",
+	"Scan complete!": "Сканування завершено!",
+	"Scan for documents from {{path}}": "Сканування документів з {{path}}",
+	"Search": "Пошук",
+	"Search Documents": "Пошук документів",
+	"Search Prompts": "Пошук промтів",
+	"See readme.md for instructions": "Див. readme.md для інструкцій",
+	"See what's new": "Подивіться, що нового",
+	"Seed": "Сід",
+	"Select a mode": "Оберіть режим",
+	"Select a model": "Виберіть модель",
+	"Select an Ollama instance": "Виберіть екземпляр Ollama",
+	"Send a Messsage": "Надіслати повідомлення",
+	"Send message": "Надіслати повідомлення",
+	"Server connection verified": "З'єднання з сервером підтверджено",
+	"Set as default": "Встановити за замовчуванням",
+	"Set Default Model": "Встановити модель за замовчуванням",
+	"Set Image Size": "Встановити розмір зображення",
+	"Set Steps": "Встановити кроки",
+	"Set Title Auto-Generation Model": "Встановити модель автогенерації заголовків",
+	"Set Voice": "Встановити голос",
+	"Settings": "Налаштування",
+	"Settings saved successfully!": "Налаштування успішно збережено!",
+	"Share to OpenWebUI Community": "Поділитися зі спільнотою OpenWebUI",
+	"short-summary": "короткий зміст",
+	"Show": "Показати",
+	"Show Additional Params": "Показати додаткові параметри",
+	"Show shortcuts": "Показати клавіатурні скорочення",
+	"sidebar": "бокова панель",
+	"Sign in": "Увійти",
+	"Sign Out": "Вийти",
+	"Sign up": "Зареєструватися",
+	"Speech recognition error: {{error}}": "Помилка розпізнавання мови: {{error}}",
+	"Speech-to-Text Engine": "Система розпізнавання мови",
+	"SpeechRecognition API is not supported in this browser.": "SpeechRecognition API не підтримується в цьому браузері.",
+	"Stop Sequence": "Символ зупинки",
+	"STT Settings": "Налаштування STT",
+	"Submit": "Надіслати",
+	"Success": "Успіх",
+	"Successfully updated.": "Успішно оновлено.",
+	"Sync All": "Синхронізувати все",
+	"System": "Система",
+	"System Prompt": "Системний промт",
+	"Tags": "Теги",
+	"Temperature": "Температура",
+	"Template": "Шаблон",
+	"Text Completion": "Завершення тексту",
+	"Text-to-Speech Engine": "Система синтезу мови",
+	"Tfs Z": "Tfs Z",
+	"Theme": "Тема",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "Це забезпечує збереження ваших цінних розмов у безпечному бекенд-сховищі. Дякуємо!",
+	"This setting does not sync across browsers or devices.": "Це налаштування не синхронізується між браузерами або пристроями.",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "Порада: Оновіть кілька слотів змінних послідовно, натискаючи клавішу табуляції у вікні чату після кожної заміни.",
+	"Title": "Заголовок",
+	"Title Auto-Generation": "Автогенерація заголовків",
+	"Title Generation Prompt": "Промт для генерування заголовків",
+	"to": "в",
+	"To access the available model names for downloading,": "Щоб отримати доступ до назв доступних для завантаження моделей,",
+	"To access the GGUF models available for downloading,": "Щоб отримати доступ до моделей GGUF, які можна завантажити,,",
+	"to chat input.": "в чаті.",
+	"Toggle settings": "Переключити налаштування",
+	"Toggle sidebar": "Переключити бокову панель",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "Проблеми з доступом до Ollama?",
+	"TTS Settings": "Налаштування TTS",
+	"Type Hugging Face Resolve (Download) URL": "Введіть URL ресурсу Hugging Face Resolve (завантаження)",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "Ой! Виникла проблема при підключенні до {{provider}}.",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "Невідомий тип файлу '{{file_type}}', але приймається та обробляється як звичайний текст",
+	"Update password": "Оновити пароль",
+	"Upload a GGUF model": "Завантажити GGUF модель",
+	"Upload files": "Завантажити файли",
+	"Upload Progress": "Прогрес завантаження",
+	"URL Mode": "Режим URL",
+	"Use '#' in the prompt input to load and select your documents.": "Для введення промтів до веб-сторінок (URL) або вибору документів, будь ласка, використовуйте символ '#'.",
+	"Use Gravatar": "Змінити аватар",
+	"user": "користувач",
+	"User Permissions": "Дозволи користувача",
+	"Users": "Користувачі",
+	"Utilize": "Використовувати",
+	"Valid time units:": "Дійсні одиниці часу:",
+	"variable": "змінна",
+	"variable to have them replaced with clipboard content.": "змінна, щоб замінити їх вмістом буфера обміну.",
+	"Version": "Версія",
+	"Web": "Веб",
+	"WebUI Add-ons": "Додатки WebUI",
+	"WebUI Settings": "Налаштування WebUI",
+	"WebUI will make requests to": "WebUI буде робити запити до",
+	"What’s New in": "Що нового в",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "Коли історія вимкнена, нові чати в цьому браузері не будуть відображатися в історії на жодному з ваших пристроїв.",
+	"Whisper (Local)": "Whisper (локально)",
+	"Write a prompt suggestion (e.g. Who are you?)": "Напишіть промт (напр. Хто ти?)",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "Напишіть стислий зміст у 50 слів, який узагальнює [тема або ключове слово].",
+	"You": "Ви",
+	"You're a helpful assistant.": "Ви корисний асистент.",
+	"You're now logged in.": "Ви увійшли в систему."
+}

src/lib/i18n/locales/zh-CN/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' 或 '-1' 表示无过期时间。",
+	"(Beta)": "（测试版）",
+	"(e.g. `sh webui.sh --api`)": "（例如 `sh webui.sh --api`）",
+	"(latest)": "",
+	"{{modelName}} is thinking...": "{{modelName}} 正在思考...",
+	"{{webUIName}} Backend Required": "需要 {{webUIName}} 后端",
+	"a user": "",
+	"About": "关于",
+	"Account": "账户",
+	"Action": "操作",
+	"Add a model": "添加模型",
+	"Add a model tag name": "添加模型标签名称",
+	"Add a short description about what this modelfile does": "添加关于此模型文件功能的简短描述",
+	"Add a short title for this prompt": "为这个提示添加一个简短的标题",
+	"Add a tag": "",
+	"Add Docs": "添加文档",
+	"Add Files": "添加文件",
+	"Add message": "添加消息",
+	"add tags": "添加标签",
+	"Adjusting these settings will apply changes universally to all users.": "调整这些设置将对所有用户普遍应用更改。",
+	"admin": "管理员",
+	"Admin Panel": "管理员面板",
+	"Admin Settings": "管理员设置",
+	"Advanced Parameters": "高级参数",
+	"all": "所有",
+	"All Users": "所有用户",
+	"Allow": "允许",
+	"Allow Chat Deletion": "允许删除聊天",
+	"alphanumeric characters and hyphens": "字母数字字符和连字符",
+	"Already have an account?": "已经有账户了吗？",
+	"an assistant": "",
+	"and": "和",
+	"API Base URL": "API 基础 URL",
+	"API Key": "API 密钥",
+	"API RPM": "API RPM",
+	"are allowed - Activate this command by typing": "被允许 - 通过输入激活此命令",
+	"Are you sure?": "你确定吗？",
+	"Audio": "音频",
+	"Auto-playback response": "自动播放回应",
+	"Auto-send input after 3 sec.": "3秒后自动发送输入",
+	"AUTOMATIC1111 Base URL": "AUTOMATIC1111 基础 URL",
+	"AUTOMATIC1111 Base URL is required.": "需要 AUTOMATIC1111 基础 URL。",
+	"available!": "可用！",
+	"Back": "返回",
+	"Builder Mode": "构建者模式",
+	"Cancel": "取消",
+	"Categories": "分类",
+	"Change Password": "更改密码",
+	"Chat": "聊天",
+	"Chat History": "聊天历史",
+	"Chat History is off for this browser.": "此浏览器已关闭聊天历史。",
+	"Chats": "聊天",
+	"Check Again": "再次检查",
+	"Check for updates": "检查更新",
+	"Checking for updates...": "正在检查更新...",
+	"Choose a model before saving...": "保存前选择一个模型...",
+	"Chunk Overlap": "块重叠",
+	"Chunk Params": "块参数",
+	"Chunk Size": "块大小",
+	"Click here for help.": "点击这里获取帮助。",
+	"Click here to check other modelfiles.": "点击这里检查其他模型文件。",
+	"Click here to select": "点击这里选择",
+	"Click here to select documents.": "点击这里选择文档。",
+	"click here.": "点击这里。",
+	"Click on the user role button to change a user's role.": "点击用户角色按钮以更改用户的角色。",
+	"Close": "关闭",
+	"Collection": "收藏",
+	"Command": "命令",
+	"Confirm Password": "确认密码",
+	"Connections": "连接",
+	"Content": "内容",
+	"Context Length": "上下文长度",
+	"Conversation Mode": "对话模式",
+	"Copy last code block": "复制最后一个代码块",
+	"Copy last response": "复制最后一次回复",
+	"Copying to clipboard was successful!": "复制到剪贴板成功！",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "为以下查询创建一个简洁的、3-5个词的短语作为标题，严格遵守3-5个词的限制并避免使用“标题”一词：",
+	"Create a modelfile": "创建模型文件",
+	"Create Account": "创建账户",
+	"Created at": "创建于",
+	"Created by": "创建者",
+	"Current Model": "当前模型",
+	"Current Password": "当前密码",
+	"Custom": "自定义",
+	"Customize Ollama models for a specific purpose": "为特定目的定制Ollama模型",
+	"Dark": "暗色",
+	"Database": "数据库",
+	"DD/MM/YYYY HH:mm": "DD/MM/YYYY HH:mm",
+	"Default": "默认",
+	"Default (Automatic1111)": "默认（Automatic1111）",
+	"Default (Web API)": "默认（Web API）",
+	"Default model updated": "默认模型已更新",
+	"Default Prompt Suggestions": "默认提示词建议",
+	"Default User Role": "默认用户角色",
+	"delete": "删除",
+	"Delete a model": "删除一个模型",
+	"Delete chat": "删除聊天",
+	"Delete Chats": "删除聊天记录",
+	"Deleted {{deleteModelTag}}": "已删除{{deleteModelTag}}",
+	"Deleted {tagName}": "已删除{tagName}",
+	"Description": "描述",
+	"Desktop Notifications": "桌面通知",
+	"Disabled": "禁用",
+	"Discover a modelfile": "探索模型文件",
+	"Discover a prompt": "探索提示词",
+	"Discover, download, and explore custom prompts": "发现、下载并探索自定义提示词",
+	"Discover, download, and explore model presets": "发现、下载并探索模型预设",
+	"Display the username instead of You in the Chat": "在聊天中显示用户名而不是“您”",
+	"Document": "文档",
+	"Document Settings": "文档设置",
+	"Documents": "文档",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "不进行任何外部连接，您的数据安全地存储在您的本地服务器上。",
+	"Don't Allow": "不允许",
+	"Don't have an account?": "没有账户？",
+	"Download as a File": "下载为文件",
+	"Download Database": "下载数据库",
+	"Drop any files here to add to the conversation": "将任何文件拖到这里以添加到对话中",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "例如 '30s','10m'。有效的时间单位是's', 'm', 'h'。",
+	"Edit Doc": "编辑文档",
+	"Edit User": "编辑用户",
+	"Email": "电子邮件",
+	"Enable Chat History": "启用聊天历史",
+	"Enable New Sign Ups": "启用新注册",
+	"Enabled": "启用",
+	"Enter {{role}} message here": "",
+	"Enter API Key": "",
+	"Enter Chunk Overlap": "",
+	"Enter Chunk Size": "",
+	"Enter Image Size (e.g. 512x512)": "",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "",
+	"Enter LiteLLM Model (litellm_params.model)": "",
+	"Enter Max Tokens (litellm_params.max_tokens)": "",
+	"Enter model tag (e.g. {{modelTag}})": "",
+	"Enter Number of Steps (e.g. 50)": "",
+	"Enter stop sequence": "输入停止序列",
+	"Enter Top K": "",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "",
+	"Enter Your Email": "输入您的电子邮件",
+	"Enter Your Full Name": "输入您的全名",
+	"Enter Your Password": "输入您的密码",
+	"Experimental": "实验性",
+	"Export All Chats (All Users)": "导出所有聊天（所有用户）",
+	"Export Chats": "导出聊天",
+	"Export Documents Mapping": "导出文档映射",
+	"Export Modelfiles": "导出模型文件",
+	"Export Prompts": "导出提示词",
+	"Failed to read clipboard contents": "无法读取剪贴板内容",
+	"File Mode": "文件模式",
+	"File not found.": "文件未找到。",
+	"Focus chat input": "聚焦聊天输入",
+	"Format your variables using square brackets like this:": "使用这样的方括号格式化你的变量：",
+	"From (Base Model)": "来自（基础模型）",
+	"Full Screen Mode": "全屏模式",
+	"General": "通用",
+	"General Settings": "通用设置",
+	"Hello, {{name}}": "你好，{{name}}",
+	"Hide": "隐藏",
+	"Hide Additional Params": "隐藏额外参数",
+	"How can I help you today?": "今天我如何能帮到你？",
+	"Image Generation (Experimental)": "图像生成（实验性）",
+	"Image Generation Engine": "图像生成引擎",
+	"Image Settings": "图像设置",
+	"Images": "图像",
+	"Import Chats": "导入聊天",
+	"Import Documents Mapping": "导入文档映射",
+	"Import Modelfiles": "导入模型文件",
+	"Import Prompts": "导入提示",
+	"Include `--api` flag when running stable-diffusion-webui": "运行stable-diffusion-webui时包含`--api`标志",
+	"Interface": "界面",
+	"join our Discord for help.": "加入我们的Discord寻求帮助。",
+	"JSON": "JSON",
+	"JWT Expiration": "JWT过期",
+	"JWT Token": "JWT令牌",
+	"Keep Alive": "保持活动",
+	"Keyboard shortcuts": "键盘快捷键",
+	"Language": "语言",
+	"Light": "浅色",
+	"Listening...": "监听中...",
+	"LLMs can make mistakes. Verify important information.": "大型语言模型可能会犯错。验证重要信息。",
+	"Made by OpenWebUI Community": "由OpenWebUI社区制作",
+	"Make sure to enclose them with": "确保将它们包含在内",
+	"Manage LiteLLM Models": "管理LiteLLM模型",
+	"Manage Models": "",
+	"Manage Ollama Models": "管理Ollama模型",
+	"Max Tokens": "最大令牌数",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "最多可以同时下载3个模型。请稍后再试。",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "MMMM DD, YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "模型'{{modelName}}'已成功下载。",
+	"Model '{{modelTag}}' is already in queue for downloading.": "模型'{{modelTag}}'已在下载队列中。",
+	"Model {{modelId}} not found": "未找到模型{{modelId}}",
+	"Model {{modelName}} already exists.": "模型{{modelName}}已存在。",
+	"Model Name": "模型名称",
+	"Model not selected": "未选择模型",
+	"Model Tag Name": "模型标签名称",
+	"Model Whitelisting": "",
+	"Model(s) Whitelisted": "",
+	"Modelfile": "模型文件",
+	"Modelfile Advanced Settings": "模型文件高级设置",
+	"Modelfile Content": "模型文件内容",
+	"Modelfiles": "模型文件",
+	"Models": "模型",
+	"My Documents": "我的文档",
+	"My Modelfiles": "我的模型文件",
+	"My Prompts": "我的提示",
+	"Name": "名称",
+	"Name Tag": "名称标签",
+	"Name your modelfile": "命名你的模型文件",
+	"New Chat": "新聊天",
+	"New Password": "新密码",
+	"Not sure what to add?": "不确定要添加什么？",
+	"Not sure what to write? Switch to": "不确定写什么？切换到",
+	"Off": "关闭",
+	"Okay, Let's Go!": "好的，我们开始吧！",
+	"Ollama Base URL": "Ollama 基础 URL",
+	"Ollama Version": "Ollama 版本",
+	"On": "开",
+	"Only": "仅",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "命令字符串中只允许使用字母数字字符和连字符。",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "哎呀！请稍等！您的文件仍在处理中。我们正在将它们做得尽善尽美，请耐心等待，一旦准备好我们会通知您。",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "哎呀！看起来 URL 无效。请仔细检查后再试一次。",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "哎呀！您正在使用不支持的方法（仅限前端）。请从后端提供 WebUI。",
+	"Open": "打开",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "Open AI (Dall-E)",
+	"Open new chat": "打开新聊天",
+	"OpenAI API": "OpenAI API",
+	"OpenAI API Key": "OpenAI API 密钥",
+	"OpenAI API Key is required.": "需要 OpenAI API 密钥。",
+	"or": "或",
+	"Parameters": "参数",
+	"Password": "密码",
+	"PDF Extract Images (OCR)": "",
+	"pending": "待定",
+	"Permission denied when accessing microphone: {{error}}": "访问麦克风时权限被拒绝：{{error}}",
+	"Playground": "游乐场",
+	"Profile": "个人资料",
+	"Prompt Content": "提示词内容",
+	"Prompt suggestions": "提示词建议",
+	"Prompts": "提示词",
+	"Pull a model from Ollama.com": "从 Ollama.com 拉取一个模型",
+	"Pull Progress": "拉取进度",
+	"Query Params": "查询参数",
+	"RAG Template": "RAG 模板",
+	"Raw Format": "原始格式",
+	"Record voice": "录音",
+	"Redirecting you to OpenWebUI Community": "正在将您重定向到 OpenWebUI 社区",
+	"Release Notes": "发布说明",
+	"Repeat Last N": "重复最后 N 次",
+	"Repeat Penalty": "重复惩罚",
+	"Request Mode": "请求模式",
+	"Reset Vector Storage": "重置向量存储",
+	"Response AutoCopy to Clipboard": "响应自动复制到剪贴板",
+	"Role": "角色",
+	"Rosé Pine": "Rosé Pine",
+	"Rosé Pine Dawn": "Rosé Pine Dawn",
+	"Save": "保存",
+	"Save & Create": "保存并创建",
+	"Save & Submit": "保存并提交",
+	"Save & Update": "保存并更新",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "直接将聊天记录保存到浏览器存储中不再受支持。请点击下面的按钮下载并删除您的聊天记录。别担心，您可以通过轻松地将聊天记录重新导入到后端",
+	"Scan": "扫描",
+	"Scan complete!": "扫描完成！",
+	"Scan for documents from {{path}}": "从 {{path}} 扫描文档",
+	"Search": "搜索",
+	"Search Documents": "搜索文档",
+	"Search Prompts": "搜索提示词",
+	"See readme.md for instructions": "查看 readme.md 以获取说明",
+	"See what's new": "查看最新内容",
+	"Seed": "种子",
+	"Select a mode": "选择一个模式",
+	"Select a model": "选择一个模型",
+	"Select an Ollama instance": "",
+	"Send a Messsage": "发送消息",
+	"Send message": "发送消息",
+	"Server connection verified": "服务器连接已验证",
+	"Set as default": "设为默认",
+	"Set Default Model": "设置默认模型",
+	"Set Image Size": "设置图片大小",
+	"Set Steps": "设置步骤",
+	"Set Title Auto-Generation Model": "设置标题自动生成模型",
+	"Set Voice": "设置声音",
+	"Settings": "设置",
+	"Settings saved successfully!": "",
+	"Share to OpenWebUI Community": "分享到OpenWebUI社区",
+	"short-summary": "简短总结",
+	"Show": "显示",
+	"Show Additional Params": "显示额外参数",
+	"Show shortcuts": "显示快捷方式",
+	"sidebar": "侧边栏",
+	"Sign in": "登录",
+	"Sign Out": "登出",
+	"Sign up": "注册",
+	"Speech recognition error: {{error}}": "语音识别错误：{{error}}",
+	"Speech-to-Text Engine": "语音转文字引擎",
+	"SpeechRecognition API is not supported in this browser.": "此浏览器不支持SpeechRecognition API。",
+	"Stop Sequence": "停止序列",
+	"STT Settings": "语音转文字设置",
+	"Submit": "提交",
+	"Success": "成功",
+	"Successfully updated.": "成功更新。",
+	"Sync All": "同步所有",
+	"System": "系统",
+	"System Prompt": "系统提示",
+	"Tags": "标签",
+	"Temperature": "温度",
+	"Template": "模板",
+	"Text Completion": "文本完成",
+	"Text-to-Speech Engine": "文本转语音引擎",
+	"Tfs Z": "Tfs Z",
+	"Theme": "主题",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "这确保了您宝贵的对话被安全保存到后端数据库中。谢谢！",
+	"This setting does not sync across browsers or devices.": "此设置不会在浏览器或设备之间同步。",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "提示：在每次替换后，在聊天输入中按Tab键可以连续更新多个变量槽。",
+	"Title": "标题",
+	"Title Auto-Generation": "标题自动生成",
+	"Title Generation Prompt": "标题生成提示",
+	"to": "到",
+	"To access the available model names for downloading,": "要访问可下载的模型名称，",
+	"To access the GGUF models available for downloading,": "要访问可下载的GGUF模型，",
+	"to chat input.": "到聊天输入。",
+	"Toggle settings": "切换设置",
+	"Toggle sidebar": "切换侧边栏",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "访问Ollama时遇到问题？",
+	"TTS Settings": "文本转语音设置",
+	"Type Hugging Face Resolve (Download) URL": "输入Hugging Face解析（下载）URL",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "哦哦！连接到{{provider}}时出现问题。",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "未知文件类型'{{file_type}}'，但接受并视为纯文本",
+	"Update password": "",
+	"Upload a GGUF model": "上传一个GGUF模型",
+	"Upload files": "上传文件",
+	"Upload Progress": "上传进度",
+	"URL Mode": "URL模式",
+	"Use '#' in the prompt input to load and select your documents.": "在提示输入中使用'#'来加载和选择你的文档。",
+	"Use Gravatar": "使用Gravatar",
+	"user": "用户",
+	"User Permissions": "用户权限",
+	"Users": "用户",
+	"Utilize": "利用",
+	"Valid time units:": "有效时间单位：",
+	"variable": "变量",
+	"variable to have them replaced with clipboard content.": "变量将被剪贴板内容替换。",
+	"Version": "",
+	"Web": "网页",
+	"WebUI Add-ons": "WebUI 插件",
+	"WebUI Settings": "WebUI 设置",
+	"WebUI will make requests to": "",
+	"What’s New in": "最新变化",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "当历史记录被关闭时，这个浏览器上的新聊天不会出现在你任何设备的历史记录中。",
+	"Whisper (Local)": "私语（本地）",
+	"Write a prompt suggestion (e.g. Who are you?)": "写一个提示建议（例如：你是谁？）",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "用50个字写一个总结[主题或关键词]。",
+	"You": "你",
+	"You're a helpful assistant.": "你是一个有帮助的助手。",
+	"You're now logged in.": "你现在已经登录了。"
+}

src/lib/i18n/locales/zh-TW/translation.json

@@ -0,0 +1,363 @@
+{
+	"'s', 'm', 'h', 'd', 'w' or '-1' for no expiration.": "'s', 'm', 'h', 'd', 'w' 或 '-1' 表示無期限。",
+	"(Beta)": "(測試版)",
+	"(e.g. `sh webui.sh --api`)": "(例如 `sh webui.sh --api`)",
+	"(latest)": "",
+	"{{modelName}} is thinking...": "{{modelName}} 正在思考...",
+	"{{webUIName}} Backend Required": "需要 {{webUIName}} 後端",
+	"a user": "",
+	"About": "關於",
+	"Account": "帳戶",
+	"Action": "動作",
+	"Add a model": "添加模型",
+	"Add a model tag name": "添加模型標籤名稱",
+	"Add a short description about what this modelfile does": "添加關於此模型文件功能的簡短描述",
+	"Add a short title for this prompt": "為此提示添加一個簡短的標題",
+	"Add a tag": "添加標籤",
+	"Add Docs": "添加文件",
+	"Add Files": "添加文件",
+	"Add message": "添加信息",
+	"add tags": "添加標籤",
+	"Adjusting these settings will apply changes universally to all users.": "調整這些設置將對所有用戶進行通用更改。",
+	"admin": "管理員",
+	"Admin Panel": "管理員面板",
+	"Admin Settings": "管理設置",
+	"Advanced Parameters": "高級參數",
+	"all": "所有",
+	"All Users": "所有用戶",
+	"Allow": "允許",
+	"Allow Chat Deletion": "允許刪除聊天",
+	"alphanumeric characters and hyphens": "字母數字字符和連字符",
+	"Already have an account?": "已經有帳戶了嗎？",
+	"an assistant": "",
+	"and": "和",
+	"API Base URL": "API Base URL",
+	"API Key": "API Key",
+	"API RPM": "API RPM",
+	"are allowed - Activate this command by typing": "是允許的 - 通過輸入啟動此命令",
+	"Are you sure?": "你確定嗎？",
+	"Audio": "音頻",
+	"Auto-playback response": "自動播放回應",
+	"Auto-send input after 3 sec.": "3秒後自動發送輸入",
+	"AUTOMATIC1111 Base URL": "AUTOMATIC1111 Base URL - 啟動的連接網址",
+	"AUTOMATIC1111 Base URL is required.": "需要 AUTOMATIC1111 Base URL - 啟動的連接網址",
+	"available!": "可用！",
+	"Back": "返回",
+	"Builder Mode": "建構模式",
+	"Cancel": "取消",
+	"Categories": "分類",
+	"Change Password": "更改密碼",
+	"Chat": "聊天",
+	"Chat History": "聊天歷史",
+	"Chat History is off for this browser.": "此瀏覽器已關閉聊天歷史。",
+	"Chats": "聊天",
+	"Check Again": "再次檢查",
+	"Check for updates": "檢查更新",
+	"Checking for updates...": "正在檢查更新...",
+	"Choose a model before saving...": "保存前選擇一個模型...",
+	"Chunk Overlap": "區塊重疊",
+	"Chunk Params": "區塊參數",
+	"Chunk Size": "區塊大小",
+	"Click here for help.": "點擊這裡尋求幫助。",
+	"Click here to check other modelfiles.": "點擊這裡檢查其他模型文件。",
+	"Click here to select": "點擊這裡選擇",
+	"Click here to select documents.": "點擊這裡選擇文件。",
+	"click here.": "點擊這裡。",
+	"Click on the user role button to change a user's role.": "點擊用戶角色按鈕以更改用戶的角色。",
+	"Close": "關閉",
+	"Collection": "收藏",
+	"Command": "命令",
+	"Confirm Password": "確認密碼",
+	"Connections": "連接",
+	"Content": "內容",
+	"Context Length": "上下文長度",
+	"Conversation Mode": "對話模式",
+	"Copy last code block": "複製最後一個代碼塊",
+	"Copy last response": "複製最後一個回應",
+	"Copying to clipboard was successful!": "複製到剪貼板成功！",
+	"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':": "為下面的查詢創建一個簡潔的、3-5個詞的短語作為標題，嚴格遵守3-5個詞的限制，避免使用'標題'這個詞：",
+	"Create a modelfile": "創建一個模型文件",
+	"Create Account": "創建帳戶",
+	"Created at": "創建於",
+	"Created by": "創建者",
+	"Current Model": "當前模型",
+	"Current Password": "當前密碼",
+	"Custom": "自定義",
+	"Customize Ollama models for a specific purpose": "為特定目的自定義Ollama模型",
+	"Dark": "暗色系",
+	"Database": "資料庫",
+	"DD/MM/YYYY HH:mm": "DD/MM/YYYY HH:mm",
+	"Default": "預設",
+	"Default (Automatic1111)": "預設（Automatic1111）",
+	"Default (Web API)": "預設（Web API）",
+	"Default model updated": "預設模型已更新",
+	"Default Prompt Suggestions": "預設提示建議",
+	"Default User Role": "預設用戶角色",
+	"delete": "刪除",
+	"Delete a model": "刪除一個模型",
+	"Delete chat": "刪除聊天",
+	"Delete Chats": "刪除聊天",
+	"Deleted {{deleteModelTag}}": "已刪除{{deleteModelTag}}",
+	"Deleted {tagName}": "已刪除{tagName}",
+	"Description": "描述",
+	"Desktop Notifications": "桌面通知",
+	"Disabled": "已禁用",
+	"Discover a modelfile": "發現一個模型文件",
+	"Discover a prompt": "發現一個提示",
+	"Discover, download, and explore custom prompts": "發現、下載並探索自定義提示",
+	"Discover, download, and explore model presets": "發現、下載並探索模型預設",
+	"Display the username instead of You in the Chat": "在聊天中顯示用戶名而不是“您”",
+	"Document": "文檔",
+	"Document Settings": "文件設置",
+	"Documents": "文件",
+	"does not make any external connections, and your data stays securely on your locally hosted server.": "不建立任何外部連接，您的數據安全地留在您的本地服務器上。",
+	"Don't Allow": "不允許",
+	"Don't have an account?": "沒有帳號？",
+	"Download as a File": "作為文件下載",
+	"Download Database": "下載資料庫",
+	"Drop any files here to add to the conversation": "拖拽任何文件到此處以添加到對話中",
+	"e.g. '30s','10m'. Valid time units are 's', 'm', 'h'.": "例如 '30秒', '10分鐘'。有效的時間單位為 '秒', '分', '小時'。",
+	"Edit Doc": "編輯文檔",
+	"Edit User": "編輯用戶",
+	"Email": "電子郵件",
+	"Enable Chat History": "啟用聊天歷史",
+	"Enable New Sign Ups": "允許新用戶註冊",
+	"Enabled": "已啟用",
+	"Enter {{role}} message here": "",
+	"Enter API Key": "輸入API Key",
+	"Enter Chunk Overlap": "輸入區塊重疊",
+	"Enter Chunk Size": "輸入區塊大小",
+	"Enter Image Size (e.g. 512x512)": "輸入圖片大小（例如 512x512）",
+	"Enter LiteLLM API Base URL (litellm_params.api_base)": "輸入 LiteLLM API 基礎 URL（litellm_params.api_base）",
+	"Enter LiteLLM API Key (litellm_params.api_key)": "輸入 LiteLLM API 鍵（litellm_params.api_key）",
+	"Enter LiteLLM API RPM (litellm_params.rpm)": "輸入 LiteLLM API RPM（litellm_params.rpm）",
+	"Enter LiteLLM Model (litellm_params.model)": "輸入 LiteLLM 模型（litellm_params.model）",
+	"Enter Max Tokens (litellm_params.max_tokens)": "輸入最大令牌數（litellm_params.max_tokens）",
+	"Enter model tag (e.g. {{modelTag}})": "輸入模型標籤（例如 {{modelTag}}）",
+	"Enter Number of Steps (e.g. 50)": "輸入步數（例如 50）",
+	"Enter stop sequence": "輸入停止序列",
+	"Enter Top K": "輸入 Top K",
+	"Enter URL (e.g. http://127.0.0.1:7860/)": "輸入 URL（例如 http://127.0.0.1:7860/）",
+	"Enter Your Email": "輸入您的電子郵件",
+	"Enter Your Full Name": "輸入您的全名",
+	"Enter Your Password": "輸入您的密碼",
+	"Experimental": "實驗性的",
+	"Export All Chats (All Users)": "導出所有聊天（所有用戶）",
+	"Export Chats": "導出聊天",
+	"Export Documents Mapping": "導出文件映射",
+	"Export Modelfiles": "導出模型文件",
+	"Export Prompts": "導出提示",
+	"Failed to read clipboard contents": "無法讀取剪貼板內容",
+	"File Mode": "文件模式",
+	"File not found.": "文件未找到。",
+	"Focus chat input": "聚焦聊天輸入",
+	"Format your variables using square brackets like this:": "使用這樣的方括號來格式化你的變量：",
+	"From (Base Model)": "來自（基礎模型）",
+	"Full Screen Mode": "全屏模式",
+	"General": "通用",
+	"General Settings": "通用設置",
+	"Hello, {{name}}": "你好, {{name}}",
+	"Hide": "隱藏",
+	"Hide Additional Params": "隱藏附加參數",
+	"How can I help you today?": "我今天如何幫助您？",
+	"Image Generation (Experimental)": "圖像生成（實驗性）",
+	"Image Generation Engine": "圖像生成引擎",
+	"Image Settings": "圖像設置",
+	"Images": "圖片",
+	"Import Chats": "導入聊天",
+	"Import Documents Mapping": "導入文件映射",
+	"Import Modelfiles": "導入模型文件",
+	"Import Prompts": "導入提示",
+	"Include `--api` flag when running stable-diffusion-webui": "運行 stable-diffusion-webui 時包含 `--api` 標誌",
+	"Interface": "介面",
+	"join our Discord for help.": "加入我們的 Discord 尋求幫助。",
+	"JSON": "JSON",
+	"JWT Expiration": "JWT 過期",
+	"JWT Token": "JWT 令牌",
+	"Keep Alive": "保持活動",
+	"Keyboard shortcuts": "鍵盤快捷鍵",
+	"Language": "語言",
+	"Light": "亮色",
+	"Listening...": "聽...",
+	"LLMs can make mistakes. Verify important information.": "LLM 可能會犯錯。驗證重要信息。",
+	"Made by OpenWebUI Community": "由 OpenWebUI 社區製作",
+	"Make sure to enclose them with": "確保用...圍起來",
+	"Manage LiteLLM Models": "管理 LiteLLM 模型",
+	"Manage Models": "",
+	"Manage Ollama Models": "管理 Ollama 模型",
+	"Max Tokens": "最大令牌數",
+	"Maximum of 3 models can be downloaded simultaneously. Please try again later.": "最多可以同時下載3個模型。請稍後再試。",
+	"Mirostat": "Mirostat",
+	"Mirostat Eta": "Mirostat Eta",
+	"Mirostat Tau": "Mirostat Tau",
+	"MMMM DD, YYYY": "MMMM DD, YYYY",
+	"Model '{{modelName}}' has been successfully downloaded.": "模型 '{{modelName}}' 已成功下載。",
+	"Model '{{modelTag}}' is already in queue for downloading.": "模型 '{{modelTag}}' 已經在下載隊列中。",
+	"Model {{modelId}} not found": "模型 {{modelId}} 未找到",
+	"Model {{modelName}} already exists.": "模型 {{modelName}} 已存在。",
+	"Model Name": "模型名稱",
+	"Model not selected": "未選擇模型",
+	"Model Tag Name": "模型標籤名稱",
+	"Model Whitelisting": "",
+	"Model(s) Whitelisted": "",
+	"Modelfile": "模型文件",
+	"Modelfile Advanced Settings": "模型文件高級設置",
+	"Modelfile Content": "模型文件內容",
+	"Modelfiles": "模型文件",
+	"Models": "模型",
+	"My Documents": "我的文件",
+	"My Modelfiles": "我的模型文件",
+	"My Prompts": "我的提示",
+	"Name": "名稱",
+	"Name Tag": "名稱標籤",
+	"Name your modelfile": "命名您的模型文件",
+	"New Chat": "新聊天",
+	"New Password": "新密碼",
+	"Not sure what to add?": "不確定要添加什麼？",
+	"Not sure what to write? Switch to": "不確定寫什麼？切換到",
+	"Off": "關",
+	"Okay, Let's Go!": "好的，啟動吧！",
+	"Ollama Base URL": "Ollama Base URL - Ollama 啟動的連接網址",
+	"Ollama Version": "Ollama 版本",
+	"On": "開",
+	"Only": "僅有",
+	"Only alphanumeric characters and hyphens are allowed in the command string.": "命令字符串中只允許使用字母數字字符和連字符。",
+	"Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.": "哎呀！請稍等！您的文件仍在處理中。我們正在將它們烹飪至完美。請耐心等待，一旦準備好，我們會通知您。",
+	"Oops! Looks like the URL is invalid. Please double-check and try again.": "哎呀！看起來 URL 無效。請仔細檢查後再試一次。",
+	"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend.": "哎呀！您正在使用不支持的方法（僅限前端）。請從後端提供 WebUI。",
+	"Open": "打開",
+	"Open AI": "Open AI",
+	"Open AI (Dall-E)": "Open AI (Dall-E)",
+	"Open new chat": "打開新聊天",
+	"OpenAI API": "OpenAI API",
+	"OpenAI API Key": "OpenAI API Key",
+	"OpenAI API Key is required.": "需要 OpenAI API Key。",
+	"or": "或",
+	"Parameters": "參數",
+	"Password": "密碼",
+	"PDF Extract Images (OCR)": "",
+	"pending": "待定",
+	"Permission denied when accessing microphone: {{error}}": "訪問麥克風時權限被拒絕: {{error}}",
+	"Playground": "AI 對話遊樂場",
+	"Profile": "個人資料",
+	"Prompt Content": "提示內容",
+	"Prompt suggestions": "提示建議",
+	"Prompts": "提示",
+	"Pull a model from Ollama.com": "從 Ollama.com 下載模型",
+	"Pull Progress": "下載進度",
+	"Query Params": "查詢參數",
+	"RAG Template": "RAG 範例",
+	"Raw Format": "原始格式",
+	"Record voice": "錄音",
+	"Redirecting you to OpenWebUI Community": "重定向您到 OpenWebUI 社群",
+	"Release Notes": "發布說明",
+	"Repeat Last N": "重複最後 N 次",
+	"Repeat Penalty": "重複懲罰",
+	"Request Mode": "請求模式",
+	"Reset Vector Storage": "重置向量存儲",
+	"Response AutoCopy to Clipboard": "回應自動複製到剪貼板",
+	"Role": "角色",
+	"Rosé Pine": "玫瑰松",
+	"Rosé Pine Dawn": "玫瑰松黎明",
+	"Save": "保存",
+	"Save & Create": "保存並創建",
+	"Save & Submit": "保存並提交",
+	"Save & Update": "保存並更新",
+	"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through": "直接將聊天記錄保存到您的瀏覽器存儲中不再被支持。請點擊下面的按鈕下載並刪除您的聊天記錄。別擔心，您可以通過以下方式輕鬆地重新導入您的聊天記錄到後端",
+	"Scan": "掃描",
+	"Scan complete!": "掃描完成！",
+	"Scan for documents from {{path}}": "從 {{path}} 掃描文檔",
+	"Search": "搜索",
+	"Search Documents": "搜索文檔",
+	"Search Prompts": "搜索提示",
+	"See readme.md for instructions": "查看 readme.md 獲取指南",
+	"See what's new": "查看最新內容",
+	"Seed": "種子",
+	"Select a mode": "選擇模式",
+	"Select a model": "選擇一個模型",
+	"Select an Ollama instance": "",
+	"Send a Messsage": "發送消息",
+	"Send message": "發送消息",
+	"Server connection verified": "伺服器連接已驗證",
+	"Set as default": "設為默認",
+	"Set Default Model": "設置默認模型",
+	"Set Image Size": "設置圖像大小",
+	"Set Steps": "設置步驟",
+	"Set Title Auto-Generation Model": "設置標題自動生成模型",
+	"Set Voice": "設置語音",
+	"Settings": "設置",
+	"Settings saved successfully!": "",
+	"Share to OpenWebUI Community": "分享到 OpenWebUI 社群",
+	"short-summary": "簡短摘要",
+	"Show": "顯示",
+	"Show Additional Params": "顯示額外參數",
+	"Show shortcuts": "顯示快捷方式",
+	"sidebar": "側邊欄",
+	"Sign in": "登錄",
+	"Sign Out": "登出",
+	"Sign up": "註冊",
+	"Speech recognition error: {{error}}": "語音識別錯誤: {{error}}",
+	"Speech-to-Text Engine": "語音轉文字引擎",
+	"SpeechRecognition API is not supported in this browser.": "此瀏覽器不支持 SpeechRecognition API。",
+	"Stop Sequence": "停止序列",
+	"STT Settings": "語音轉文字設置",
+	"Submit": "提交",
+	"Success": "成功",
+	"Successfully updated.": "更新成功。",
+	"Sync All": "同步所有",
+	"System": "系統",
+	"System Prompt": "系統提示",
+	"Tags": "標籤",
+	"Temperature": "溫度",
+	"Template": "模板",
+	"Text Completion": "文本完成",
+	"Text-to-Speech Engine": "文本轉語音引擎",
+	"Tfs Z": "Tfs Z",
+	"Theme": "主題",
+	"This ensures that your valuable conversations are securely saved to your backend database. Thank you!": "這確保了您寶貴的對話安全地保存到您的後端數據庫。謝謝您！",
+	"This setting does not sync across browsers or devices.": "此設置不會在瀏覽器或設備之間同步。",
+	"Tip: Update multiple variable slots consecutively by pressing the tab key in the chat input after each replacement.": "提示：通過在每次替換後在聊天輸入中按 Tab 鍵連續更新多個變量槽。",
+	"Title": "標題",
+	"Title Auto-Generation": "標題自動生成",
+	"Title Generation Prompt": "標題生成提示",
+	"to": "到",
+	"To access the available model names for downloading,": "要訪問可供下載的模型名稱，",
+	"To access the GGUF models available for downloading,": "要訪問可供下載的 GGUF 模型，",
+	"to chat input.": "到聊天輸入。",
+	"Toggle settings": "切換設置",
+	"Toggle sidebar": "切換側邊欄",
+	"Top K": "Top K",
+	"Top P": "Top P",
+	"Trouble accessing Ollama?": "訪問 Ollama 時遇到問題？",
+	"TTS Settings": "文本轉語音設置",
+	"Type Hugging Face Resolve (Download) URL": "輸入 Hugging Face 解析（下載）URL",
+	"Uh-oh! There was an issue connecting to {{provider}}.": "哎呀！連接到 {{provider}} 時出現問題。",
+	"Unknown File Type '{{file_type}}', but accepting and treating as plain text": "未知的文件類型 '{{file_type}}'，但接受並視為純文本",
+	"Update password": "更新密碼",
+	"Upload a GGUF model": "上傳一個 GGUF 模型",
+	"Upload files": "上傳文件",
+	"Upload Progress": "上傳進度",
+	"URL Mode": "URL 模式",
+	"Use '#' in the prompt input to load and select your documents.": "使用 '#' 在提示輸入中以加載並選擇您的文檔。",
+	"Use Gravatar": "使用 Gravatar",
+	"user": "用戶",
+	"User Permissions": "用戶權限",
+	"Users": "用戶",
+	"Utilize": "利用",
+	"Valid time units:": "有效時間單位：",
+	"variable": "變量",
+	"variable to have them replaced with clipboard content.": "變量將它們替換為剪貼板內容。",
+	"Version": "",
+	"Web": "網頁",
+	"WebUI Add-ons": "WebUI 插件",
+	"WebUI Settings": "WebUI 設置",
+	"WebUI will make requests to": "",
+	"What’s New in": "什麼是新的在",
+	"When history is turned off, new chats on this browser won't appear in your history on any of your devices.": "當歷史被關閉時，這個瀏覽器上的新聊天將不會出現在任何設備的歷史記錄中。",
+	"Whisper (Local)": "Whisper（本地）",
+	"Write a prompt suggestion (e.g. Who are you?)": "寫一個提示建議（例如，你是誰？）",
+	"Write a summary in 50 words that summarizes [topic or keyword].": "寫一個50字的摘要來概括[主題或關鍵詞]。",
+	"You": "你",
+	"You're a helpful assistant.": "你是一個有幫助的助手。",
+	"You're now logged in.": "你現在已經登錄了。"
+}

src/lib/stores/index.ts

@@ -7,7 +7,7 @@ export const config = writable(undefined);
 export const user = writable(undefined);
 
 // Frontend
-export const theme = writable('dark');
+export const theme = writable('system');
 
 export const chatId = writable('');
 

src/routes/(app)/+layout.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { toast } from 'svelte-sonner';
+	import { onMount, tick, getContext } from 'svelte';
 	import { openDB, deleteDB } from 'idb';
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { onMount, tick } from 'svelte';
 	import { goto } from '$app/navigation';
 
 	import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
@@ -36,6 +36,8 @@
 	import ChangelogModal from '$lib/components/ChangelogModal.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 
+	const i18n = getContext('i18n');
+
 	let ollamaVersion = '';
 	let loaded = false;
 	let showShortcutsButtonElement: HTMLButtonElement;
@@ -199,7 +201,7 @@
 
 {#if loaded}
 	<div class=" hidden lg:flex fixed bottom-0 right-0 px-3 py-3 z-10">
-		<Tooltip content="help" placement="left">
+		<Tooltip content="Help" placement="left">
 			<button
 				id="show-shortcuts-button"
 				bind:this={showShortcutsButtonElement}
@@ -240,7 +242,7 @@
 										location.href = '/';
 									}}
 								>
-									Check Again
+									{$i18n.t('Check Again')}
 								</button>
 
 								<button
@@ -248,7 +250,7 @@
 									on:click={async () => {
 										localStorage.removeItem('token');
 										location.href = '/auth';
-									}}>Sign Out</button
+									}}>{$i18n.t('Sign Out')}</button
 								>
 							</div>
 						</div>
@@ -267,12 +269,14 @@
 							</div>
 
 							<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full">
-								Saving chat logs directly to your browser's storage is no longer supported. Please
-								take a moment to download and delete your chat logs by clicking the button below.
-								Don't worry, you can easily re-import your chat logs to the backend through <span
-									class="font-semibold dark:text-white">Settings > Chats > Import Chats</span
-								>. This ensures that your valuable conversations are securely saved to your backend
-								database. Thank you!
+								{$i18n.t(
+									"Saving chat logs directly to your browser's storage is no longer supported. Please take a moment to download and delete your chat logs by clicking the button below. Don't worry, you can easily re-import your chat logs to the backend through"
+								)}
+								<span class="font-semibold dark:text-white"
+									>{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
+								>. {$i18n.t(
+									'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
+								)}
 							</div>
 
 							<div class=" mt-6 mx-auto relative group w-fit">
@@ -298,7 +302,7 @@
 									class="text-xs text-center w-full mt-2 text-gray-400 underline"
 									on:click={async () => {
 										localDBChats = [];
-									}}>Close</button
+									}}>{$i18n.t('Close')}</button
 								>
 							</div>
 						</div>

src/routes/(app)/+page.svelte

@@ -2,7 +2,7 @@
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-sonner';
 
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
@@ -39,6 +39,9 @@
 	import { RAGTemplate } from '$lib/utils/rag';
 	import { LITELLM_API_BASE_URL, OPENAI_API_BASE_URL } from '$lib/constants';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+
+	const i18n = getContext('i18n');
+
 	let stopResponseFlag = false;
 	let autoScroll = true;
 	let processing = '';
@@ -157,7 +160,7 @@
 		);
 
 		if (selectedModels.includes('')) {
-			toast.error('Model not selected');
+			toast.error($i18n.t('Model not selected'));
 		} else if (messages.length != 0 && messages.at(-1).done != true) {
 			// Response not done
 			console.log('wait');
@@ -167,7 +170,9 @@
 		) {
 			// Upload not done
 			toast.error(
-				`Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.`
+				$i18n.t(
+					`Oops! Hold tight! Your files are still in the processing oven. We're cooking them up to perfection. Please be patient and we'll let you know once they're ready.`
+				)
 			);
 		} else {
 			// Reset chat message textarea height
@@ -203,7 +208,7 @@
 				if ($settings.saveChatHistory ?? true) {
 					chat = await createNewChat(localStorage.token, {
 						id: $chatId,
-						title: 'New Chat',
+						title: $i18n.t('New Chat'),
 						models: selectedModels,
 						system: $settings.system ?? undefined,
 						options: {
@@ -269,7 +274,7 @@
 						await sendPromptOllama(model, prompt, responseMessageId, _chatId);
 					}
 				} else {
-					toast.error(`Model ${modelId} not found`);
+					toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
 				}
 			})
 		);
@@ -481,12 +486,18 @@
 					responseMessage.content = error.error;
 				}
 			} else {
-				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
-				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
+				toast.error(
+					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, { provider: 'Ollama' })
+				);
+				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+					provider: 'Ollama'
+				});
 			}
 
 			responseMessage.error = true;
-			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
+			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: 'Ollama'
+			});
 			responseMessage.done = true;
 			messages = messages;
 		}
@@ -659,12 +670,18 @@
 					}
 				}
 			} else {
-				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
-				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
+				toast.error(
+					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, { provider: model })
+				);
+				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+					provider: model
+				});
 			}
 
 			responseMessage.error = true;
-			responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
+			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: model
+			});
 			responseMessage.done = true;
 			messages = messages;
 		}
@@ -733,7 +750,7 @@
 					);
 			}
 		} else {
-			toast.error(`Model ${modelId} not found`);
+			toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
 		}
 	};
 
@@ -742,7 +759,9 @@
 			const title = await generateTitle(
 				localStorage.token,
 				$settings?.titleGenerationPrompt ??
-					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
+					$i18n.t(
+						"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':"
+					) + ' {{prompt}}',
 				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
 			);
@@ -813,7 +832,7 @@
 			on:scroll={(e) => {
 				autoScroll =
 					messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
-					messagesContainerElement.clientHeight + 50;
+					messagesContainerElement.clientHeight + 5;
 			}}
 		>
 			<div

src/routes/(app)/admin/+page.svelte

@@ -2,7 +2,7 @@
 	import { WEBUI_API_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user } from '$lib/stores';
 	import { goto } from '$app/navigation';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
 
@@ -11,6 +11,8 @@
 	import EditUserModal from '$lib/components/admin/EditUserModal.svelte';
 	import SettingsModal from '$lib/components/admin/SettingsModal.svelte';
 
+	const i18n = getContext('i18n');
+
 	let loaded = false;
 	let users = [];
 
@@ -37,7 +39,7 @@
 		});
 		if (res) {
 			users = await getUsers(localStorage.token);
-			toast.success('Successfully updated');
+			toast.success($i18n.t('Successfully updated.'));
 		}
 	};
 
@@ -62,9 +64,7 @@
 </script>
 
 <svelte:head>
-	<title>
-		{`Admin Panel | ${$WEBUI_NAME}`}
-	</title>
+	<title>{$i18n.t('Admin Panel')} | {$WEBUI_NAME}</title>
 </svelte:head>
 
 {#key selectedUser}
@@ -88,7 +88,7 @@
 					<div class=" flex flex-col justify-center">
 						<div class=" flex justify-between items-center">
 							<div class="flex items-center text-2xl font-semibold">
-								All Users
+								{$i18n.t('All Users')}
 								<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-200 dark:bg-gray-700" />
 								<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
 									>{users.length}</span
@@ -115,12 +115,12 @@
 										/>
 									</svg>
 
-									<div class=" text-xs">Admin Settings</div>
+									<div class=" text-xs">{$i18n.t('Admin Settings')}</div>
 								</button>
 							</div>
 						</div>
 						<div class=" text-gray-500 text-xs mt-1">
-							ⓘ Click on the user role button to change a user's role.
+							ⓘ {$i18n.t("Click on the user role button to change a user's role.")}
 						</div>
 
 						<hr class=" my-3 dark:border-gray-600" />
@@ -131,10 +131,10 @@
 									class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
 								>
 									<tr>
-										<th scope="col" class="px-3 py-2"> Role </th>
-										<th scope="col" class="px-3 py-2"> Name </th>
-										<th scope="col" class="px-3 py-2"> Email </th>
-										<th scope="col" class="px-3 py-2"> Action </th>
+										<th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
+										<th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
+										<th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
+										<th scope="col" class="px-3 py-2"> {$i18n.t('Action')} </th>
 									</tr>
 								</thead>
 								<tbody>
@@ -163,7 +163,7 @@
 															'bg-green-600 dark:bg-green-300'} {user.role === 'pending' &&
 															'bg-gray-600 dark:bg-gray-300'}"
 													/>
-													{user.role}</button
+													{$i18n.t(user.role)}</button
 												>
 											</td>
 											<td class="px-3 py-2 font-medium text-gray-900 dark:text-white w-max">

src/routes/(app)/c/[id]/+page.svelte

@@ -2,7 +2,7 @@
 	import { v4 as uuidv4 } from 'uuid';
 	import { toast } from 'svelte-sonner';
 
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/stores';
 
@@ -40,6 +40,8 @@
 	import { RAGTemplate } from '$lib/utils/rag';
 	import { LITELLM_API_BASE_URL, OPENAI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 
+	const i18n = getContext('i18n');
+
 	let loaded = false;
 
 	let stopResponseFlag = false;
@@ -173,7 +175,7 @@
 		console.log('submitPrompt', $chatId);
 
 		if (selectedModels.includes('')) {
-			toast.error('Model not selected');
+			toast.error($i18n.t('Model not selected'));
 		} else if (messages.length != 0 && messages.at(-1).done != true) {
 			// Response not done
 			console.log('wait');
@@ -219,7 +221,7 @@
 				if ($settings.saveChatHistory ?? true) {
 					chat = await createNewChat(localStorage.token, {
 						id: $chatId,
-						title: 'New Chat',
+						title: $i18n.t('New Chat'),
 						models: selectedModels,
 						system: $settings.system ?? undefined,
 						options: {
@@ -282,7 +284,7 @@
 						await sendPromptOllama(model, prompt, responseMessageId, _chatId);
 					}
 				} else {
-					toast.error(`Model ${modelId} not found`);
+					toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
 				}
 			})
 		);
@@ -494,12 +496,18 @@
 					responseMessage.content = error.error;
 				}
 			} else {
-				toast.error(`Uh-oh! There was an issue connecting to Ollama.`);
-				responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
+				toast.error(
+					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, { provider: 'Ollama' })
+				);
+				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+					provider: 'Ollama'
+				});
 			}
 
 			responseMessage.error = true;
-			responseMessage.content = `Uh-oh! There was an issue connecting to Ollama.`;
+			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: 'Ollama'
+			});
 			responseMessage.done = true;
 			messages = messages;
 		}
@@ -672,12 +680,18 @@
 					}
 				}
 			} else {
-				toast.error(`Uh-oh! There was an issue connecting to ${model}.`);
-				responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
+				toast.error(
+					$i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, { provider: model })
+				);
+				responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+					provider: model
+				});
 			}
 
 			responseMessage.error = true;
-			responseMessage.content = `Uh-oh! There was an issue connecting to ${model}.`;
+			responseMessage.content = $i18n.t(`Uh-oh! There was an issue connecting to {{provider}}.`, {
+				provider: model
+			});
 			responseMessage.done = true;
 			messages = messages;
 		}
@@ -733,7 +747,7 @@
 					);
 			}
 		} else {
-			toast.error(`Model ${modelId} not found`);
+			toast.error($i18n.t(`Model {{modelId}} not found`, { modelId }));
 		}
 	};
 
@@ -755,7 +769,9 @@
 			const title = await generateTitle(
 				localStorage.token,
 				$settings?.titleGenerationPrompt ??
-					"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title': {{prompt}}",
+					$i18n.t(
+						"Create a concise, 3-5 word phrase as a header for the following query, strictly adhering to the 3-5 word limit and avoiding the use of the word 'title':"
+					) + ' {{prompt}}',
 				$settings?.titleAutoGenerateModel ?? selectedModels[0],
 				userPrompt
 			);
@@ -845,7 +861,7 @@
 				on:scroll={(e) => {
 					autoScroll =
 						messagesContainerElement.scrollHeight - messagesContainerElement.scrollTop <=
-						messagesContainerElement.clientHeight + 50;
+						messagesContainerElement.clientHeight + 5;
 				}}
 			>
 				<div

src/routes/(app)/documents/+page.svelte

@@ -3,7 +3,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { WEBUI_NAME, documents } from '$lib/stores';
 	import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
 
@@ -17,6 +17,9 @@
 	import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
 	import SettingsModal from '$lib/components/documents/SettingsModal.svelte';
 	import AddDocModal from '$lib/components/documents/AddDocModal.svelte';
+
+	const i18n = getContext('i18n');
+
 	let importFiles = '';
 
 	let inputFiles = '';
@@ -120,7 +123,7 @@
 						}
 					}
 				} else {
-					toast.error(`File not found.`);
+					toast.error($i18n.t(`File not found.`));
 				}
 			}
 
@@ -149,9 +152,7 @@
 </script>
 
 <svelte:head>
-	<title>
-		{`Documents | ${$WEBUI_NAME}`}
-	</title>
+	<title>{$i18n.t('Documents')} | {$WEBUI_NAME}</title>
 </svelte:head>
 
 {#if dragged}
@@ -188,7 +189,7 @@
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<div class="mb-6">
 				<div class="flex justify-between items-center">
-					<div class=" text-2xl font-semibold self-center">My Documents</div>
+					<div class=" text-2xl font-semibold self-center">{$i18n.t('My Documents')}</div>
 
 					<div>
 						<button
@@ -211,12 +212,12 @@
 								/>
 							</svg>
 
-							<div class=" text-xs">Document Settings</div>
+							<div class=" text-xs">{$i18n.t('Document Settings')}</div>
 						</button>
 					</div>
 				</div>
 				<div class=" text-gray-500 text-xs mt-1">
-					ⓘ Use '#' in the prompt input to load and select your documents.
+					ⓘ {$i18n.t("Use '#' in the prompt input to load and select your documents.")}
 				</div>
 			</div>
 
@@ -239,7 +240,7 @@
 					<input
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
 						bind:value={query}
-						placeholder="Search Document"
+						placeholder={$i18n.t('Search Documents')}
 					/>
 				</div>
 
@@ -274,7 +275,7 @@
 					on:dragleave={onDragLeave}
 				>
 					<div class="  pointer-events-none">
-						<div class="text-center dark:text-white text-2xl font-semibold z-50">Add Files</div>
+						<div class="text-center dark:text-white text-2xl font-semibold z-50">{$i18n.t('Add Files')}</div>
 
 						<div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
 							Drop any files here to add to my documents
@@ -314,7 +315,7 @@
 								// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
 							}}
 						>
-							<div class=" text-xs font-medium self-center line-clamp-1">all</div>
+							<div class=" text-xs font-medium self-center line-clamp-1">{$i18n.t('all')}</div>
 						</button>
 
 						{#each tags as tag}
@@ -344,7 +345,7 @@
 										// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
 									}}
 								>
-									<div class=" text-xs font-medium self-center line-clamp-1">add tags</div>
+									<div class=" text-xs font-medium self-center line-clamp-1">{$i18n.t('add tags')}</div>
 								</button> -->
 
 								<button
@@ -354,7 +355,9 @@
 										// await chats.set(await getChatListByTagName(localStorage.token, tag.name));
 									}}
 								>
-									<div class=" text-xs font-medium self-center line-clamp-1">delete</div>
+									<div class=" text-xs font-medium self-center line-clamp-1">
+										{$i18n.t('delete')}
+									</div>
 								</button>
 							</div>
 						</div>
@@ -563,7 +566,7 @@
 							documentsImportInputElement.click();
 						}}
 					>
-						<div class=" self-center mr-2 font-medium">Import Documents Mapping</div>
+						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Documents Mapping')}</div>
 
 						<div class=" self-center">
 							<svg
@@ -590,7 +593,7 @@
 							saveAs(blob, `documents-mapping-export-${Date.now()}.json`);
 						}}
 					>
-						<div class=" self-center mr-2 font-medium">Export Documents Mapping</div>
+						<div class=" self-center mr-2 font-medium">{$i18n.t('Export Documents Mapping')}</div>
 
 						<div class=" self-center">
 							<svg

src/routes/(app)/modelfiles/+page.svelte

@@ -3,7 +3,7 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 
 	import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores';
 	import { createModel, deleteModel } from '$lib/apis/ollama';
@@ -14,6 +14,8 @@
 	} from '$lib/apis/modelfiles';
 	import { goto } from '$app/navigation';
 
+	const i18n = getContext('i18n');
+
 	let localModelfiles = [];
 	let importFiles;
 	let modelfilesImportInputElement: HTMLInputElement;
@@ -26,7 +28,7 @@
 		});
 
 		if (success) {
-			toast.success(`Deleted ${tagName}`);
+			toast.success($i18n.t(`Deleted {tagName}`, { tagName }));
 		}
 
 		return success;
@@ -39,7 +41,7 @@
 	};
 
 	const shareModelfile = async (modelfile) => {
-		toast.success('Redirecting you to OpenWebUI Community');
+		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
 
 		const url = 'https://openwebui.com';
 
@@ -74,14 +76,14 @@
 
 <svelte:head>
 	<title>
-		{`Modelfiles | ${$WEBUI_NAME}`}
+		{$i18n.t('Modelfiles')} | {$WEBUI_NAME}
 	</title>
 </svelte:head>
 
 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-3">My Modelfiles</div>
+			<div class=" text-2xl font-semibold mb-3">{$i18n.t('My Modelfiles')}</div>
 
 			<a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" href="/modelfiles/create">
 				<div class=" self-center w-10">
@@ -104,8 +106,8 @@
 				</div>
 
 				<div class=" self-center">
-					<div class=" font-bold">Create a modelfile</div>
-					<div class=" text-sm">Customize Ollama models for a specific purpose</div>
+					<div class=" font-bold">{$i18n.t('Create a modelfile')}</div>
+					<div class=" text-sm">{$i18n.t('Customize Ollama models for a specific purpose')}</div>
 				</div>
 			</a>
 
@@ -270,7 +272,7 @@
 							modelfilesImportInputElement.click();
 						}}
 					>
-						<div class=" self-center mr-2 font-medium">Import Modelfiles</div>
+						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Modelfiles')}</div>
 
 						<div class=" self-center">
 							<svg
@@ -294,7 +296,7 @@
 							saveModelfiles($modelfiles);
 						}}
 					>
-						<div class=" self-center mr-2 font-medium">Export Modelfiles</div>
+						<div class=" self-center mr-2 font-medium">{$i18n.t('Export Modelfiles')}</div>
 
 						<div class=" self-center">
 							<svg
@@ -335,7 +337,7 @@
 									await modelfiles.set(await getModelfiles(localStorage.token));
 								}}
 							>
-								<div class=" self-center mr-2 font-medium">Sync All</div>
+								<div class=" self-center mr-2 font-medium">{$i18n.t('Sync All')}</div>
 
 								<div class=" self-center">
 									<svg
@@ -386,7 +388,7 @@
 			</div>
 
 			<div class=" my-16">
-				<div class=" text-2xl font-semibold mb-3">Made by OpenWebUI Community</div>
+				<div class=" text-2xl font-semibold mb-3">{$i18n.t('Made by OpenWebUI Community')}</div>
 
 				<a
 					class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
@@ -413,8 +415,8 @@
 					</div>
 
 					<div class=" self-center">
-						<div class=" font-bold">Discover a modelfile</div>
-						<div class=" text-sm">Discover, download, and explore model presets</div>
+						<div class=" font-bold">{$i18n.t('Discover a modelfile')}</div>
+						<div class=" text-sm">{$i18n.t('Discover, download, and explore model presets')}</div>
 					</div>
 				</a>
 			</div>

src/routes/(app)/modelfiles/create/+page.svelte

@@ -6,10 +6,12 @@
 
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
 	import { splitStream } from '$lib/utils';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 	import { createModel } from '$lib/apis/ollama';
 	import { createNewModelfile, getModelfileByTagName, getModelfiles } from '$lib/apis/modelfiles';
 
+	const i18n = getContext('i18n');
+
 	let loading = false;
 
 	let filesInputElement;
@@ -349,7 +351,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 				}}
 			/>
 
-			<div class=" text-2xl font-semibold mb-6">My Modelfiles</div>
+			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Modelfiles')}</div>
 
 			<button
 				class="flex space-x-1"
@@ -371,7 +373,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 						/>
 					</svg>
 				</div>
-				<div class=" self-center font-medium text-sm">Back</div>
+				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
 			</button>
 			<hr class="my-3 dark:border-gray-700" />
 
@@ -418,12 +420,12 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 
 				<div class="my-2 flex space-x-2">
 					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">Name*</div>
+						<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
 
 						<div>
 							<input
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder="Name your modelfile"
+								placeholder={$i18n.t('Name your modelfile')}
 								bind:value={title}
 								required
 							/>
@@ -431,12 +433,12 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 					</div>
 
 					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">Model Tag Name*</div>
+						<div class=" text-sm font-semibold mb-2">{$i18n.t('Model Tag Name')}*</div>
 
 						<div>
 							<input
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder="Add a model tag name"
+								placeholder={$i18n.t('Add a model tag name')}
 								bind:value={tagName}
 								required
 							/>
@@ -445,12 +447,12 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 				</div>
 
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Description*</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}*</div>
 
 					<div>
 						<input
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder="Add a short description about what this modelfile does"
+							placeholder={$i18n.t('Add a short description about what this modelfile does')}
 							bind:value={desc}
 							required
 						/>
@@ -459,7 +461,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 
 				<div class="my-2">
 					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">Modelfile</div>
+						<div class=" self-center text-sm font-semibold">{$i18n.t('Modelfile')}</div>
 
 						<button
 							class="p-1 px-3 text-xs flex rounded transition"
@@ -469,9 +471,9 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 							}}
 						>
 							{#if raw}
-								<span class="ml-2 self-center"> Raw Format </span>
+								<span class="ml-2 self-center"> {$i18n.t('Raw Format')} </span>
 							{:else}
-								<span class="ml-2 self-center"> Builder Mode </span>
+								<span class="ml-2 self-center"> {$i18n.t('Builder Mode')} </span>
 							{/if}
 						</button>
 					</div>
@@ -480,7 +482,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 
 					{#if raw}
 						<div class="mt-2">
-							<div class=" text-xs font-semibold mb-2">Content*</div>
+							<div class=" text-xs font-semibold mb-2">{$i18n.t('Content')}*</div>
 
 							<div>
 								<textarea
@@ -493,12 +495,13 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 							</div>
 
 							<div class="text-xs text-gray-400 dark:text-gray-500">
-								Not sure what to write? Switch to <button
+								{$i18n.t('Not sure what to write? Switch to')}
+								<button
 									class="text-gray-500 dark:text-gray-300 font-medium cursor-pointer"
 									type="button"
 									on:click={() => {
 										raw = !raw;
-									}}>Builder Mode</button
+									}}>{$i18n.t('Builder Mode')}</button
 								>
 								or
 								<a
@@ -506,13 +509,13 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 									href="https://openwebui.com"
 									target="_blank"
 								>
-									Click here to check other modelfiles.
+									{$i18n.t('Click here to check other modelfiles.')}
 								</a>
 							</div>
 						</div>
 					{:else}
 						<div class="my-2">
-							<div class=" text-xs font-semibold mb-2">From (Base Model)*</div>
+							<div class=" text-xs font-semibold mb-2">{$i18n.t('From (Base Model)')}*</div>
 
 							<div>
 								<input
@@ -524,16 +527,17 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 							</div>
 
 							<div class="mt-1 text-xs text-gray-400 dark:text-gray-500">
-								To access the available model names for downloading, <a
+								{$i18n.t('To access the available model names for downloading,')}
+								<a
 									class=" text-gray-500 dark:text-gray-300 font-medium"
 									href="https://ollama.com/library"
-									target="_blank">click here.</a
+									target="_blank">{$i18n.t('click here.')}</a
 								>
 							</div>
 						</div>
 
 						<div class="my-1">
-							<div class=" text-xs font-semibold mb-2">System Prompt</div>
+							<div class=" text-xs font-semibold mb-2">{$i18n.t('System Prompt')}</div>
 
 							<div>
 								<textarea
@@ -546,7 +550,9 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 						</div>
 
 						<div class="flex w-full justify-between">
-							<div class=" self-center text-sm font-semibold">Modelfile Advanced Settings</div>
+							<div class=" self-center text-sm font-semibold">
+								{$i18n.t('Modelfile Advanced Settings')}
+							</div>
 
 							<button
 								class="p-1 px-3 text-xs flex rounded transition"
@@ -556,16 +562,16 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 								}}
 							>
 								{#if advanced}
-									<span class="ml-2 self-center"> Custom </span>
+									<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 								{:else}
-									<span class="ml-2 self-center"> Default </span>
+									<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 								{/if}
 							</button>
 						</div>
 
 						{#if advanced}
 							<div class="my-2">
-								<div class=" text-xs font-semibold mb-2">Template</div>
+								<div class=" text-xs font-semibold mb-2">{$i18n.t('Template')}</div>
 
 								<div>
 									<textarea
@@ -578,7 +584,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 							</div>
 
 							<div class="my-2">
-								<div class=" text-xs font-semibold mb-2">Parameters</div>
+								<div class=" text-xs font-semibold mb-2">{$i18n.t('Parameters')}</div>
 
 								<div>
 									<AdvancedParams bind:options />
@@ -590,7 +596,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 
 				<div class="my-2">
 					<div class="flex w-full justify-between mb-2">
-						<div class=" self-center text-sm font-semibold">Prompt suggestions</div>
+						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
 
 						<button
 							class="p-1 px-3 text-xs flex rounded transition"
@@ -618,7 +624,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 							<div class=" flex border dark:border-gray-600 rounded-lg">
 								<input
 									class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
-									placeholder="Write a prompt suggestion (e.g. Who are you?)"
+									placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
 									bind:value={prompt.content}
 								/>
 
@@ -647,7 +653,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 				</div>
 
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Categories</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Categories')}</div>
 
 					<div class="grid grid-cols-4">
 						{#each Object.keys(categories) as category}
@@ -661,7 +667,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 
 				{#if pullProgress !== null}
 					<div class="my-2">
-						<div class=" text-sm font-semibold mb-2">Pull Progress</div>
+						<div class=" text-sm font-semibold mb-2">{$i18n.t('Pull Progress')}</div>
 						<div class="w-full rounded-full dark:bg-gray-800">
 							<div
 								class="dark:bg-gray-600 bg-gray-500 text-xs font-medium text-gray-100 text-center p-0.5 leading-none rounded-full"
@@ -684,7 +690,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
 						type="submit"
 						disabled={loading}
 					>
-						<div class=" self-center font-medium">Save & Create</div>
+						<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
 
 						{#if loading}
 							<div class="ml-1.5 self-center">

src/routes/(app)/modelfiles/edit/+page.svelte

@@ -3,7 +3,7 @@
 	import { toast } from 'svelte-sonner';
 	import { goto } from '$app/navigation';
 
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { page } from '$app/stores';
 
 	import { settings, user, config, modelfiles } from '$lib/stores';
@@ -14,6 +14,8 @@
 
 	import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
 
+	const i18n = getContext('i18n');
+
 	let loading = false;
 
 	let filesInputElement;
@@ -248,7 +250,7 @@
 				}}
 			/>
 
-			<div class=" text-2xl font-semibold mb-6">My Modelfiles</div>
+			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Modelfiles')}</div>
 
 			<button
 				class="flex space-x-1"
@@ -270,7 +272,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center font-medium text-sm">Back</div>
+				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
 			</button>
 			<hr class="my-3 dark:border-gray-700" />
 
@@ -317,12 +319,12 @@
 
 				<div class="my-2 flex space-x-2">
 					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">Name*</div>
+						<div class=" text-sm font-semibold mb-2">{$i18n.t('Name')}*</div>
 
 						<div>
 							<input
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder="Name your modelfile"
+								placeholder={$i18n.t('Name your modelfile')}
 								bind:value={title}
 								required
 							/>
@@ -330,12 +332,12 @@
 					</div>
 
 					<div class="flex-1">
-						<div class=" text-sm font-semibold mb-2">Model Tag Name*</div>
+						<div class=" text-sm font-semibold mb-2">{$i18n.t('Model Tag Name')}*</div>
 
 						<div>
 							<input
 								class="px-3 py-1.5 text-sm w-full bg-transparent disabled:text-gray-500 border dark:border-gray-600 outline-none rounded-lg"
-								placeholder="Add a model tag name"
+								placeholder={$i18n.t('Add a model tag name')}
 								value={tagName}
 								disabled
 								required
@@ -345,12 +347,12 @@
 				</div>
 
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Description*</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Description')}*</div>
 
 					<div>
 						<input
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder="Add a short description about what this modelfile does"
+							placeholder={$i18n.t('Add a short description about what this modelfile does')}
 							bind:value={desc}
 							required
 						/>
@@ -359,13 +361,13 @@
 
 				<div class="my-2">
 					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">Modelfile</div>
+						<div class=" self-center text-sm font-semibold">{$i18n.t('Modelfile')}</div>
 					</div>
 
 					<!-- <div class=" text-sm font-semibold mb-2"></div> -->
 
 					<div class="mt-2">
-						<div class=" text-xs font-semibold mb-2">Content*</div>
+						<div class=" text-xs font-semibold mb-2">{$i18n.t('Content')}*</div>
 
 						<div>
 							<textarea
@@ -381,7 +383,7 @@
 
 				<div class="my-2">
 					<div class="flex w-full justify-between mb-2">
-						<div class=" self-center text-sm font-semibold">Prompt suggestions</div>
+						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt suggestions')}</div>
 
 						<button
 							class="p-1 px-3 text-xs flex rounded transition"
@@ -409,7 +411,7 @@
 							<div class=" flex border dark:border-gray-600 rounded-lg">
 								<input
 									class="px-3 py-1.5 text-sm w-full bg-transparent outline-none border-r dark:border-gray-600"
-									placeholder="Write a prompt suggestion (e.g. Who are you?)"
+									placeholder={$i18n.t('Write a prompt suggestion (e.g. Who are you?)')}
 									bind:value={prompt.content}
 								/>
 
@@ -438,7 +440,7 @@
 				</div>
 
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Categories</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Categories')}</div>
 
 					<div class="grid grid-cols-4">
 						{#each Object.keys(categories) as category}
@@ -453,7 +455,7 @@
 
 				{#if pullProgress !== null}
 					<div class="my-2">
-						<div class=" text-sm font-semibold mb-2">Pull Progress</div>
+						<div class=" text-sm font-semibold mb-2">{$i18n.t('Pull Progress')}</div>
 						<div class="w-full rounded-full dark:bg-gray-800">
 							<div
 								class="dark:bg-gray-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full"
@@ -476,7 +478,7 @@
 						type="submit"
 						disabled={loading}
 					>
-						<div class=" self-center font-medium">Save & Update</div>
+						<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
 
 						{#if loading}
 							<div class="ml-1.5 self-center">

src/routes/(app)/playground/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 
 	import { toast } from 'svelte-sonner';
 
@@ -19,6 +19,8 @@
 	import { splitStream } from '$lib/utils';
 	import ChatCompletion from '$lib/components/playground/ChatCompletion.svelte';
 
+	const i18n = getContext('i18n');
+
 	let mode = 'chat';
 	let loaded = false;
 	let text = '';
@@ -261,7 +263,7 @@
 
 <svelte:head>
 	<title>
-		{`Playground | ${$WEBUI_NAME}`}
+		{$i18n.t('Playground')} | {$WEBUI_NAME}
 	</title>
 </svelte:head>
 
@@ -272,7 +274,8 @@
 				<div class="flex flex-col justify-between mb-2.5 gap-1">
 					<div class="flex justify-between items-center gap-2">
 						<div class=" text-2xl font-semibold self-center flex">
-							Playground <span class=" text-xs text-gray-500 self-center ml-1">(Beta)</span>
+							{$i18n.t('Playground')}
+							<span class=" text-xs text-gray-500 self-center ml-1">{$i18n.t('(Beta)')}</span>
 						</div>
 
 						<div>
@@ -289,9 +292,9 @@
 								}}
 							>
 								{#if mode === 'complete'}
-									Text Completion
+									{$i18n.t('Text Completion')}
 								{:else if mode === 'chat'}
-									Chat
+									{$i18n.t('Chat')}
 								{/if}
 
 								<div>
@@ -318,7 +321,9 @@
 							class="outline-none bg-transparent text-sm font-medium rounded-lg w-full placeholder-gray-400"
 							bind:value={selectedModelId}
 						>
-							<option class=" text-gray-800" value="" selected disabled>Select a model</option>
+							<option class=" text-gray-800" value="" selected disabled
+								>{$i18n.t('Select a model')}</option
+							>
 
 							{#each $models as model}
 								{#if model.name === 'hr'}
@@ -363,12 +368,12 @@
 				{#if mode === 'chat'}
 					<div class="p-1">
 						<div class="p-3 outline outline-1 outline-gray-200 dark:outline-gray-800 rounded-lg">
-							<div class=" text-sm font-medium">System</div>
+							<div class=" text-sm font-medium">{$i18n.t('System')}</div>
 							<textarea
 								id="system-textarea"
 								class="w-full h-full bg-transparent resize-none outline-none text-sm"
 								bind:value={system}
-								placeholder="You're a helpful assistant."
+								placeholder={$i18n.t("You're a helpful assistant.")}
 								rows="4"
 							/>
 						</div>
@@ -388,7 +393,7 @@
 									bind:this={textCompletionAreaElement}
 									class="w-full h-full p-3 bg-transparent outline outline-1 outline-gray-200 dark:outline-gray-800 resize-none rounded-lg text-sm"
 									bind:value={text}
-									placeholder="You're a helpful assistant."
+									placeholder={$i18n.t("You're a helpful assistant.")}
 								/>
 							{:else if mode === 'chat'}
 								<ChatCompletion bind:messages />
@@ -405,7 +410,7 @@
 								submitHandler();
 							}}
 						>
-							Submit
+							{$i18n.t('Submit')}
 						</button>
 					{:else}
 						<button
@@ -414,7 +419,7 @@
 								stopResponse();
 							}}
 						>
-							Cancel
+							{$i18n.t('Cancel')}
 						</button>
 					{/if}
 				</div>

src/routes/(app)/prompts/+page.svelte

@@ -3,17 +3,19 @@
 	import fileSaver from 'file-saver';
 	const { saveAs } = fileSaver;
 
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { WEBUI_NAME, prompts } from '$lib/stores';
 	import { createNewPrompt, deletePromptByCommand, getPrompts } from '$lib/apis/prompts';
 	import { error } from '@sveltejs/kit';
 	import { goto } from '$app/navigation';
 
+	const i18n = getContext('i18n');
+
 	let importFiles = '';
 	let query = '';
 	let promptsImportInputElement: HTMLInputElement;
 	const sharePrompt = async (prompt) => {
-		toast.success('Redirecting you to OpenWebUI Community');
+		toast.success($i18n.t('Redirecting you to OpenWebUI Community'));
 
 		const url = 'https://openwebui.com';
 
@@ -38,7 +40,7 @@
 
 <svelte:head>
 	<title>
-		{`Prompts | ${$WEBUI_NAME}`}
+		{$i18n.t('Prompts')} | {$WEBUI_NAME}
 	</title>
 </svelte:head>
 
@@ -46,7 +48,7 @@
 	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
 			<div class="mb-6 flex justify-between items-center">
-				<div class=" text-2xl font-semibold self-center">My Prompts</div>
+				<div class=" text-2xl font-semibold self-center">{$i18n.t('My Prompts')}</div>
 			</div>
 
 			<div class=" flex w-full space-x-2">
@@ -68,7 +70,7 @@
 					<input
 						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
 						bind:value={query}
-						placeholder="Search Prompt"
+						placeholder={$i18n.t('Search Prompts')}
 					/>
 				</div>
 
@@ -246,7 +248,7 @@
 							promptsImportInputElement.click();
 						}}
 					>
-						<div class=" self-center mr-2 font-medium">Import Prompts</div>
+						<div class=" self-center mr-2 font-medium">{$i18n.t('Import Prompts')}</div>
 
 						<div class=" self-center">
 							<svg
@@ -274,7 +276,7 @@
 							saveAs(blob, `prompts-export-${Date.now()}.json`);
 						}}
 					>
-						<div class=" self-center mr-2 font-medium">Export Prompts</div>
+						<div class=" self-center mr-2 font-medium">{$i18n.t('Export Prompts')}</div>
 
 						<div class=" self-center">
 							<svg
@@ -303,7 +305,7 @@
 			</div>
 
 			<div class=" my-16">
-				<div class=" text-2xl font-semibold mb-3">Made by OpenWebUI Community</div>
+				<div class=" text-2xl font-semibold mb-3">{$i18n.t('Made by OpenWebUI Community')}</div>
 
 				<a
 					class=" flex space-x-4 cursor-pointer w-full mb-3 px-3 py-2"
@@ -330,8 +332,8 @@
 					</div>
 
 					<div class=" self-center">
-						<div class=" font-bold">Discover a prompt</div>
-						<div class=" text-sm">Discover, download, and explore custom prompts</div>
+						<div class=" font-bold">{$i18n.t('Discover a prompt')}</div>
+						<div class=" text-sm">{$i18n.t('Discover, download, and explore custom prompts')}</div>
 					</div>
 				</a>
 			</div>

src/routes/(app)/prompts/create/+page.svelte

@@ -3,10 +3,12 @@
 
 	import { goto } from '$app/navigation';
 	import { prompts } from '$lib/stores';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
 
 	import { createNewPrompt, getPrompts } from '$lib/apis/prompts';
 
+	const i18n = getContext('i18n');
+
 	let loading = false;
 
 	// ///////////
@@ -36,7 +38,9 @@
 				await goto('/prompts');
 			}
 		} else {
-			toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
+			toast.error(
+				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
+			);
 		}
 
 		loading = false;
@@ -92,7 +96,7 @@
 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	<div class=" flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-6">My Prompts</div>
+			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
 
 			<button
 				class="flex space-x-1"
@@ -114,7 +118,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center font-medium text-sm">Back</div>
+				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
 			</button>
 			<hr class="my-3 dark:border-gray-700" />
 
@@ -125,12 +129,12 @@
 				}}
 			>
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Title*</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
 
 					<div>
 						<input
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder="Add a short title for this prompt"
+							placeholder={$i18n.t('Add a short title for this prompt')}
 							bind:value={title}
 							required
 						/>
@@ -138,7 +142,7 @@
 				</div>
 
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Command*</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
 
 					<div class="flex items-center mb-1">
 						<div
@@ -148,34 +152,38 @@
 						</div>
 						<input
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-r-lg"
-							placeholder="short-summary"
+							placeholder={$i18n.t('short-summary')}
 							bind:value={command}
 							required
 						/>
 					</div>
 
 					<div class="text-xs text-gray-400 dark:text-gray-500">
-						Only <span class=" text-gray-600 dark:text-gray-300 font-medium"
-							>alphanumeric characters and hyphens</span
+						{$i18n.t('Only')}
+						<span class=" text-gray-600 dark:text-gray-300 font-medium"
+							>{$i18n.t('alphanumeric characters and hyphens')}</span
 						>
-						are allowed; Activate this command by typing "<span
+						{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
 							class=" text-gray-600 dark:text-gray-300 font-medium"
 						>
 							/{command}
-						</span>" to chat input.
+						</span>" &nbsp;
+						{$i18n.t('to chat input.')}
 					</div>
 				</div>
 
 				<div class="my-2">
 					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">Prompt Content*</div>
+						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
 					</div>
 
 					<div class="mt-2">
 						<div>
 							<textarea
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={`Write a summary in 50 words that summarizes [topic or keyword].`}
+								placeholder={$i18n.t(
+									'Write a summary in 50 words that summarizes [topic or keyword].'
+								)}
 								rows="6"
 								bind:value={content}
 								required
@@ -183,18 +191,20 @@
 						</div>
 
 						<div class="text-xs text-gray-400 dark:text-gray-500">
-							ⓘ Format your variables using square brackets like this: <span
-								class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
-							>
-							. Make sure to enclose them with
+							ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
+								class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
+							>.
+							{$i18n.t('Make sure to enclose them with')}
 							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
-							and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
+							{$i18n.t('and')}
+							<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
 						</div>
 
 						<div class="text-xs text-gray-400 dark:text-gray-500">
-							Utilize <span class=" text-gray-600 dark:text-gray-300 font-medium"
-								>{`{{CLIPBOARD}}`}</span
-							> variable to have them replaced with clipboard content.
+							{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
+								{` {{CLIPBOARD}}`}</span
+							>
+							{$i18n.t('variable to have them replaced with clipboard content.')}
 						</div>
 					</div>
 				</div>
@@ -207,7 +217,7 @@
 						type="submit"
 						disabled={loading}
 					>
-						<div class=" self-center font-medium">Save & Create</div>
+						<div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
 
 						{#if loading}
 							<div class="ml-1.5 self-center">

src/routes/(app)/prompts/edit/+page.svelte

@@ -3,7 +3,9 @@
 
 	import { goto } from '$app/navigation';
 	import { prompts } from '$lib/stores';
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	import { getPrompts, updatePromptByCommand } from '$lib/apis/prompts';
 	import { page } from '$app/stores';
@@ -34,7 +36,9 @@
 				await goto('/prompts');
 			}
 		} else {
-			toast.error('Only alphanumeric characters and hyphens are allowed in the command string.');
+			toast.error(
+				$i18n.t('Only alphanumeric characters and hyphens are allowed in the command string.')
+			);
 		}
 
 		loading = false;
@@ -74,7 +78,7 @@
 <div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white">
 	<div class="flex flex-col justify-between w-full overflow-y-auto">
 		<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
-			<div class=" text-2xl font-semibold mb-6">My Prompts</div>
+			<div class=" text-2xl font-semibold mb-6">{$i18n.t('My Prompts')}</div>
 
 			<button
 				class="flex space-x-1"
@@ -96,7 +100,7 @@
 						/>
 					</svg>
 				</div>
-				<div class=" self-center font-medium text-sm">Back</div>
+				<div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
 			</button>
 			<hr class="my-3 dark:border-gray-700" />
 
@@ -107,12 +111,12 @@
 				}}
 			>
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Title*</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Title')}*</div>
 
 					<div>
 						<input
 							class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-							placeholder="Add a short title for this prompt"
+							placeholder={$i18n.t('Add a short title for this prompt')}
 							bind:value={title}
 							required
 						/>
@@ -120,7 +124,7 @@
 				</div>
 
 				<div class="my-2">
-					<div class=" text-sm font-semibold mb-2">Command*</div>
+					<div class=" text-sm font-semibold mb-2">{$i18n.t('Command')}*</div>
 
 					<div class="flex items-center mb-1">
 						<div
@@ -138,27 +142,31 @@
 					</div>
 
 					<div class="text-xs text-gray-400 dark:text-gray-500">
-						Only <span class=" text-gray-600 dark:text-gray-300 font-medium"
-							>alphanumeric characters and hyphens</span
+						{$i18n.t('Only')}
+						<span class=" text-gray-600 dark:text-gray-300 font-medium"
+							>{$i18n.t('alphanumeric characters and hyphens')}</span
 						>
-						are allowed; Activate this command by typing "<span
+						{$i18n.t('are allowed - Activate this command by typing')}&nbsp;"<span
 							class=" text-gray-600 dark:text-gray-300 font-medium"
 						>
 							/{command}
-						</span>" to chat input.
+						</span>" &nbsp;
+						{$i18n.t('to chat input.')}
 					</div>
 				</div>
 
 				<div class="my-2">
 					<div class="flex w-full justify-between">
-						<div class=" self-center text-sm font-semibold">Prompt Content*</div>
+						<div class=" self-center text-sm font-semibold">{$i18n.t('Prompt Content')}*</div>
 					</div>
 
 					<div class="mt-2">
 						<div>
 							<textarea
 								class="px-3 py-1.5 text-sm w-full bg-transparent border dark:border-gray-600 outline-none rounded-lg"
-								placeholder={`Write a summary in 50 words that summarizes [topic or keyword].`}
+								placeholder={$i18n.t(
+									`Write a summary in 50 words that summarizes [topic or keyword].`
+								)}
 								rows="6"
 								bind:value={content}
 								required
@@ -166,12 +174,20 @@
 						</div>
 
 						<div class="text-xs text-gray-400 dark:text-gray-500">
-							Format your variables using square brackets like this: <span
-								class=" text-gray-600 dark:text-gray-300 font-medium">[variable]</span
-							>
-							. Make sure to enclose them with
+							ⓘ {$i18n.t('Format your variables using square brackets like this:')}&nbsp;<span
+								class=" text-gray-600 dark:text-gray-300 font-medium">[{$i18n.t('variable')}]</span
+							>.
+							{$i18n.t('Make sure to enclose them with')}
 							<span class=" text-gray-600 dark:text-gray-300 font-medium">'['</span>
-							and <span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span> .
+							{$i18n.t('and')}
+							<span class=" text-gray-600 dark:text-gray-300 font-medium">']'</span>.
+						</div>
+
+						<div class="text-xs text-gray-400 dark:text-gray-500">
+							{$i18n.t('Utilize')}<span class=" text-gray-600 dark:text-gray-300 font-medium">
+								{` {{CLIPBOARD}}`}</span
+							>
+							{$i18n.t('variable to have them replaced with clipboard content.')}
 						</div>
 					</div>
 				</div>
@@ -184,7 +200,7 @@
 						type="submit"
 						disabled={loading}
 					>
-						<div class=" self-center font-medium">Save & Update</div>
+						<div class=" self-center font-medium">{$i18n.t('Save & Update')}</div>
 
 						{#if loading}
 							<div class="ml-1.5 self-center">

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script>
-	import { onMount, tick } from 'svelte';
+	import { onMount, tick, setContext } from 'svelte';
 	import { config, user, theme, WEBUI_NAME } from '$lib/stores';
 	import { goto } from '$app/navigation';
 	import { Toaster, toast } from 'svelte-sonner';
@@ -11,6 +11,9 @@
 	import '../tailwind.css';
 	import 'tippy.js/dist/tippy.css';
 	import { WEBUI_BASE_URL } from '$lib/constants';
+	import i18n from '$lib/i18n';
+
+	setContext('i18n', i18n);
 
 	let loaded = false;
 

src/routes/auth/+page.svelte

@@ -3,9 +3,11 @@
 	import { userSignIn, userSignUp } from '$lib/apis/auths';
 	import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants';
 	import { WEBUI_NAME, config, user } from '$lib/stores';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
+	const i18n = getContext('i18n');
+
 	let loaded = false;
 	let mode = 'signin';
 
@@ -16,7 +18,7 @@
 	const setSessionUser = async (sessionUser) => {
 		if (sessionUser) {
 			console.log(sessionUser);
-			toast.success(`You're now logged in.`);
+			toast.success($i18n.t(`You're now logged in.`));
 			localStorage.token = sessionUser.token;
 			await user.set(sessionUser);
 			goto('/');
@@ -96,26 +98,30 @@
 					}}
 				>
 					<div class=" text-xl sm:text-2xl font-bold">
-						{mode === 'signin' ? 'Sign in' : 'Sign up'} to {$WEBUI_NAME}
+						{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Sign up')}
+						{$i18n.t('to')}
+						{$WEBUI_NAME}
 					</div>
 
 					{#if mode === 'signup'}
 						<div class=" mt-1 text-xs font-medium text-gray-500">
-							ⓘ {$WEBUI_NAME} does not make any external connections, and your data stays securely on
-							your locally hosted server.
+							ⓘ {$WEBUI_NAME}
+							{$i18n.t(
+								'does not make any external connections, and your data stays securely on your locally hosted server.'
+							)}
 						</div>
 					{/if}
 
 					<div class="flex flex-col mt-4">
 						{#if mode === 'signup'}
 							<div>
-								<div class=" text-sm font-semibold text-left mb-1">Name</div>
+								<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Name')}</div>
 								<input
 									bind:value={name}
 									type="text"
 									class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
 									autocomplete="name"
-									placeholder="Enter Your Full Name"
+									placeholder={$i18n.t('Enter Your Full Name')}
 									required
 								/>
 							</div>
@@ -124,24 +130,24 @@
 						{/if}
 
 						<div class="mb-2">
-							<div class=" text-sm font-semibold text-left mb-1">Email</div>
+							<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Email')}</div>
 							<input
 								bind:value={email}
 								type="email"
 								class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
 								autocomplete="email"
-								placeholder="Enter Your Email"
+								placeholder={$i18n.t('Enter Your Email')}
 								required
 							/>
 						</div>
 
 						<div>
-							<div class=" text-sm font-semibold text-left mb-1">Password</div>
+							<div class=" text-sm font-semibold text-left mb-1">{$i18n.t('Password')}</div>
 							<input
 								bind:value={password}
 								type="password"
 								class=" border px-4 py-2.5 rounded-2xl w-full text-sm"
-								placeholder="Enter Your Password"
+								placeholder={$i18n.t('Enter Your Password')}
 								autocomplete="current-password"
 								required
 							/>
@@ -153,11 +159,13 @@
 							class=" bg-gray-900 hover:bg-gray-800 w-full rounded-full text-white font-semibold text-sm py-3 transition"
 							type="submit"
 						>
-							{mode === 'signin' ? 'Sign In' : 'Create Account'}
+							{mode === 'signin' ? $i18n.t('Sign in') : $i18n.t('Create Account')}
 						</button>
 
 						<div class=" mt-4 text-sm text-center">
-							{mode === 'signin' ? `Don't have an account?` : `Already have an account?`}
+							{mode === 'signin'
+								? $i18n.t("Don't have an account?")
+								: $i18n.t('Already have an account?')}
 
 							<button
 								class=" font-medium underline"
@@ -170,7 +178,7 @@
 									}
 								}}
 							>
-								{mode === 'signin' ? `Sign up` : `Sign In`}
+								{mode === 'signin' ? $i18n.t('Sign up') : $i18n.t('Sign in')}
 							</button>
 						</div>
 					</div>

src/routes/error/+page.svelte

@@ -1,7 +1,9 @@
 <script>
 	import { goto } from '$app/navigation';
 	import { WEBUI_NAME, config } from '$lib/stores';
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	let loaded = false;
 
@@ -19,22 +21,25 @@
 		<div class="absolute rounded-xl w-full h-full backdrop-blur flex justify-center">
 			<div class="m-auto pb-44 flex flex-col justify-center">
 				<div class="max-w-md">
-					<div class="text-center text-2xl font-medium z-50">{$WEBUI_NAME} Backend Required</div>
+					<div class="text-center text-2xl font-medium z-50">
+						{$i18n.t('{{webUIName}} Backend Required', { webUIName: $WEBUI_NAME })}
+					</div>
 
 					<div class=" mt-4 text-center text-sm w-full">
-						Oops! You're using an unsupported method (frontend only). Please serve the WebUI from
-						the backend.
+						{$i18n.t(
+							"Oops! You're using an unsupported method (frontend only). Please serve the WebUI from the backend."
+						)}
 
 						<br class=" " />
 						<br class=" " />
 						<a
 							class=" font-semibold underline"
 							href="https://github.com/open-webui/open-webui#how-to-install-"
-							target="_blank">See readme.md for instructions</a
+							target="_blank">{$i18n.t('See readme.md for instructions')}</a
 						>
-						or
+						{$i18n.t('or')}
 						<a class=" font-semibold underline" href="https://discord.gg/5rJgQTnV4s" target="_blank"
-							>join our Discord for help.</a
+							>{$i18n.t('join our Discord for help.')}</a
 						>
 					</div>
 
@@ -45,7 +50,7 @@
 								location.href = '/';
 							}}
 						>
-							Check Again
+							{$i18n.t('Check Again')}
 						</button>
 					</div>
 				</div>