add: added Playground + AddFilesPlaceholder translation

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

@@ -1,7 +1,7 @@
 <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>