add: added Playground + AddFilesPlaceholder translation

src/lib/components/AddFilesPlaceholder.svelte

+<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/layout/Sidebar.svelte

@@ -628,7 +628,7 @@
 												/>
 											</svg>
 										</div>
-										<div class=" self-center font-medium">Playground</div>
+										<div class=" self-center font-medium">{$i18n.t('Playground')}</div>
 									</button>
 								{/if}
 

src/lib/components/playground/ChatCompletion.svelte

 <script lang="ts">
-	import { onMount } from 'svelte';
+	import { onMount, getContext } from 'svelte';
+
+	const i18n = getContext('i18n');
 
 	export let messages = [];
 
@@ -20,7 +22,7 @@
 					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>
 
@@ -28,7 +30,9 @@
 				<textarea
 					id="{message.role}-{idx}-textarea"
 					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 ${message.role === 'user' ? 'a user' : 'an assistant'} message here`
+					)}
 					rows="1"
 					on:input={(e) => {
 						e.target.style.height = '';
@@ -100,6 +104,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/locales/de/common.json

 {
 	"'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`)",
 	"{{item}} not provided": "{{item}} nicht angegeben",
 	"{{modelName}} is thinking...": "{{modelName}} denkt nach...",
@@ -14,6 +15,7 @@
 	"Add Docs": "Dokumente hinzufügen",
 	"Add Files": "Dateien hinzufügen",
 	"Add LiteLLM Model": "LiteLLM Modell 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",
@@ -33,6 +35,7 @@
 	"API Key": "API Key",
 	"API RPM": "API RPM",
 	"are allowed - Activate this command by typing": "sind erlaubt - Aktivieren Sie diesen Befehl, indem Sie",
+	"assistant": "Assistent",
 	"Audio": "Audio",
 	"Auto-playback response": "Automatische Wiedergabe der Antwort",
 	"Auto-send input after 3 sec.": "Automatisches Senden der Eingabe nach 3 Sek",
@@ -43,6 +46,7 @@
 	"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",
@@ -107,6 +111,7 @@
 	"Don't have an account?": "Sie haben noch kein Konto?",
 	"Download as a File": "Als Datei herunterladen",
 	"Download Database": "Datenbank herunterladen",
+	"Drop any files here to add to the conversation": "Lassen Sie Dateien hier fallen, um sie dem Chat hinzuzufügen",
 	"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",
@@ -114,6 +119,8 @@
 	"Enable Chat History": "Chat-Verlauf aktivieren",
 	"Enable New Sign Ups": "Neue Anmeldungen aktivieren",
 	"Enabled": "Aktiviert",
+	"Enter a user message here": "Geben Sie hier eine Benutzernachricht ein",
+	"Enter an assistant message here": "Geben Sie hier eine Assistentennachricht ein",
 	"Enter OpenAI API Key": "OpenAI-API-Key eingeben",
 	"Enter stop sequence": "Stop-Sequenz eingeben",
 	"Enter Your Email": "Geben Sie Ihre E-Mail-Adresse ein",
@@ -208,6 +215,7 @@
 	"Password": "Passwort",
 	"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",
@@ -265,13 +273,16 @@
 	"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",
@@ -310,5 +321,6 @@
 	"Whisper (Local)": "Whisper (Lokal)",
 	"Write a prompt suggestion (e.g. Who are you?)": "Schreiben Sie einen Prompt-Vorschlag (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're a helpful assistant.": "Du bist ein hilfreicher Assistent.",
 	"You're now logged in.": "Sie sind jetzt angemeldet."
 }

src/lib/i18n/locales/en/common.json

 {
 	"'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`)",
 	"{{item}} not provided": "{{item}} not provided",
 	"{{modelName}} is thinking...": "{{modelName}} is thinking...",
@@ -14,6 +15,7 @@
 	"Add Docs": "Add Docs",
 	"Add Files": "Add Files",
 	"Add LiteLLM Model": "Add LiteLLM Model",
+	"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",
@@ -33,6 +35,7 @@
 	"API Key": "API Key",
 	"API RPM": "API RPM",
 	"are allowed - Activate this command by typing": "are allowed - Activate this command by typing",
+	"assistant": "Assistant",
 	"Audio": "Audio",
 	"Auto-playback response": "Auto-playback response",
 	"Auto-send input after 3 sec.": "Auto-send input after 3 sec.",
@@ -43,6 +46,7 @@
 	"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",
@@ -107,6 +111,7 @@
 	"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",
@@ -114,6 +119,8 @@
 	"Enable Chat History": "Enable Chat History",
 	"Enable New Sign Ups": "Enable New Sign Ups",
 	"Enabled": "Enabled",
+	"Enter a user message here": "Enter a user message here",
+	"Enter an assistant message here": "Enter an assistant message here",
 	"Enter OpenAI API Key": "Enter OpenAI API Key",
 	"Enter stop sequence": "Enter stop sequence",
 	"Enter Your Email": "Enter Your Email",
@@ -208,6 +215,7 @@
 	"Password": "Password",
 	"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",
@@ -265,13 +273,16 @@
 	"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",
@@ -310,5 +321,6 @@
 	"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're a helpful assistant.": "You're a helpful assistant.",
 	"You're now logged in.": "You're now logged in."
 }

src/lib/i18n/locales/fa/common.json

@@ -310,5 +310,17 @@
 	"Add a short title for this prompt": "یک عنوان کوتاه برای این درخواست اضافه کنید",
 	"Open": "باز",
 	"Close": "بسته",
-	"sidebar": "نوار کناری"
+	"sidebar": "نوار کناری",
+	"Playground": "Playground",
+	"Submit": "Submit",
+	"(Beta)": "(Beta)",
+	"Text Completion": "Text Completion",
+	"Chat": "Chat",
+	"You're a helpful assistant.": "You're a helpful assistant.",
+	"System": "System",
+	"assistant": "Assistant",
+	"Add message": "Add message",
+	"Enter a user message here": "Enter a user message here",
+	"Enter an assistant message here": "Enter an assistant message here",
+	"Drop any files here to add to the conversation": "Drop any files here to add to the conversation"
 }

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

@@ -64,7 +64,7 @@
 </script>
 
 <svelte:head>
-	<title>{$i18n.t('Admin Panel')} | `${$WEBUI_NAME}`</title>
+	<title>{$i18n.t('Admin Panel')} | ${$WEBUI_NAME}</title>
 </svelte:head>
 
 {#key selectedUser}

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

@@ -152,9 +152,7 @@
 </script>
 
 <svelte:head>
-	<title>
-		{`Documents | ${$WEBUI_NAME}`}
-	</title>
+	<title>{$i18n.t('Documents')} | {$WEBUI_NAME}</title>
 </svelte:head>
 
 {#if dragged}

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

@@ -73,7 +73,7 @@
 
 <svelte:head>
 	<title>
-		{`Modelfiles | ${$WEBUI_NAME}`}
+		{$i18n.t('Modelfiles')} | {$WEBUI_NAME}
 	</title>
 </svelte:head>
 

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

 <script>
 	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;
 
@@ -300,7 +302,7 @@
 
 <svelte:head>
 	<title>
-		{`Playground | ${$WEBUI_NAME}`}
+		{$i18n.t('Playground')} | {$WEBUI_NAME}
 	</title>
 </svelte:head>
 
@@ -311,7 +313,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>
@@ -328,9 +331,9 @@
 								}}
 							>
 								{#if mode === 'complete'}
-									Text Completion
+									{$i18n.t('Text Completion')}
 								{:else if mode === 'chat'}
-									Chat
+									{$i18n.t('Chat')}
 								{/if}
 
 								<div>
@@ -357,7 +360,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'}
@@ -402,12 +407,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>
@@ -425,7 +430,7 @@
 									id="text-completion-textarea"
 									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 />
@@ -442,7 +447,7 @@
 								submitHandler();
 							}}
 						>
-							Submit
+							{$i18n.t('Submit')}
 						</button>
 					{:else}
 						<button
@@ -451,7 +456,7 @@
 								stopResponse();
 							}}
 						>
-							Cancel
+							{$i18n.t('Cancel')}
 						</button>
 					{/if}
 				</div>

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

@@ -40,7 +40,7 @@
 
 <svelte:head>
 	<title>
-		{`Prompts | ${$WEBUI_NAME}`}
+		{$i18n.t('Prompts')} | {$WEBUI_NAME}
 	</title>
 </svelte:head>