Skip to content

GitLab

"src/git@developer.sourcefind.cn:chenpangpang/open-webui.git" did not exist on "b8790200e98c21719730c706380d2f66551bb568"
Commit 3c471ee2 authored by Ased Mammad's avatar Ased Mammad
Browse files

feat: Migrate hardcoded strings to i18n calls

parent 7a77f3c2
Hide whitespace changes
Inline Side-by-side
Showing with 243 additions and 195 deletions
src/lib/components/chat/Settings/Chats.svelte
View file @ 3c471ee2
...@@ -13,10 +13,12 @@ ...@@ -13,10 +13,12 @@
getChatList getChatList
} from '$lib/apis/chats'; } from '$lib/apis/chats';
import { getImportOrigin, convertOpenAIChats } from '$lib/utils'; import { getImportOrigin, convertOpenAIChats } from '$lib/utils';
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
export let saveSettings: Function; export let saveSettings: Function;
// Chats // Chats
let saveChatHistory = true; let saveChatHistory = true;
...@@ -104,7 +106,7 @@ ...@@ -104,7 +106,7 @@
class="flex flex-col justify-between rounded-md items-center py-2 px-3.5 w-full transition" 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="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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -128,7 +130,7 @@ ...@@ -128,7 +130,7 @@
/> />
</svg> </svg>
<span class="ml-2 self-center"> On </span> <span class="ml-2 self-center"> {$i18n.t('On')} </span>
{:else} {:else}
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -146,7 +148,7 @@ ...@@ -146,7 +148,7 @@
/> />
</svg> </svg>
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -180,7 +182,7 @@ ...@@ -180,7 +182,7 @@
/> />
</svg> </svg>
</div> </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>
<button <button
class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition" class=" flex rounded-md py-2 px-3.5 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
...@@ -202,7 +204,7 @@ ...@@ -202,7 +204,7 @@
/> />
</svg> </svg>
</div> </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> </button>
</div> </div>
...@@ -288,7 +290,7 @@ ...@@ -288,7 +290,7 @@
/> />
</svg> </svg>
</div> </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> </button>
{/if} {/if}
...@@ -316,7 +318,9 @@ ...@@ -316,7 +318,9 @@
/> />
</svg> </svg>
</div> </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> </button>
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
...@@ -330,7 +334,7 @@ ...@@ -330,7 +334,7 @@
}); });
if (res) { if (res) {
toast.success('Success'); toast.success($i18n.t('Success'));
} }
}} }}
> >
...@@ -348,7 +352,7 @@ ...@@ -348,7 +352,7 @@
/> />
</svg> </svg>
</div> </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> </button>
{/if} {/if}
</div> </div>
......
src/lib/components/chat/Settings/Connections.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { models, user } from '$lib/stores'; import { models, user } from '$lib/stores';
import { createEventDispatcher, onMount } from 'svelte'; import { createEventDispatcher, onMount, getContext } from 'svelte';
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
import { getOllamaAPIUrl, getOllamaVersion, updateOllamaAPIUrl } from '$lib/apis/ollama'; import { getOllamaAPIUrl, getOllamaVersion, updateOllamaAPIUrl } from '$lib/apis/ollama';
import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai'; import { getOpenAIKey, getOpenAIUrl, updateOpenAIKey, updateOpenAIUrl } from '$lib/apis/openai';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
export let getModels: Function; export let getModels: Function;
// External // External
...@@ -34,7 +36,7 @@ ...@@ -34,7 +36,7 @@
}); });
if (ollamaVersion) { if (ollamaVersion) {
toast.success('Server connection verified'); toast.success($i18n.t('Server connection verified'));
await models.set(await getModels()); await models.set(await getModels());
} }
}; };
...@@ -64,7 +66,7 @@ ...@@ -64,7 +66,7 @@
<div class=" space-y-3"> <div class=" space-y-3">
<div class="mt-2 space-y-2 pr-1.5"> <div class="mt-2 space-y-2 pr-1.5">
<div class="flex justify-between items-center text-sm"> <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 <button
class=" text-xs font-medium text-gray-500" class=" text-xs font-medium text-gray-500"
type="button" type="button"
...@@ -76,7 +78,7 @@ ...@@ -76,7 +78,7 @@
{#if showOpenAI} {#if showOpenAI}
<div> <div>
<div class=" mb-2.5 text-sm font-medium">API Key</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('API Key')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -90,7 +92,7 @@ ...@@ -90,7 +92,7 @@
</div> </div>
<div> <div>
<div class=" mb-2.5 text-sm font-medium">API Base URL</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('API Base URL')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -114,7 +116,7 @@ ...@@ -114,7 +116,7 @@
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <div>
<div class=" mb-2.5 text-sm font-medium">Ollama API URL</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('Ollama API URL')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
......
src/lib/components/chat/Settings/General.svelte
View file @ 3c471ee2
...@@ -91,10 +91,10 @@ ...@@ -91,10 +91,10 @@
<div class="flex flex-col h-full justify-between text-sm"> <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-[20.5rem]">
<div class=""> <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=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">Theme</div> <div class=" self-center text-xs font-medium">{$i18n.t('Theme')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<div class=" absolute right-16"> <div class=" absolute right-16">
{#if theme === 'dark'} {#if theme === 'dark'}
...@@ -146,16 +146,16 @@ ...@@ -146,16 +146,16 @@
console.log(theme); console.log(theme);
}} }}
> >
<option value="dark">Dark</option> <option value="dark">{$i18n.t('Dark')}</option>
<option value="light">Light</option> <option value="light">{$i18n.t('Light')}</option>
<option value="rose-pine dark">Rosé Pine</option> <option value="rose-pine dark">{$i18n.t('Rosé Pine')}</option>
<option value="rose-pine-dawn light">Rosé Pine Dawn</option> <option value="rose-pine-dawn light">{$i18n.t('Rosé Pine Dawn')}</option>
</select> </select>
</div> </div>
</div> </div>
<div class=" py-0.5 flex w-full justify-between"> <div class=" py-0.5 flex w-full justify-between">
<div class=" self-center text-xs font-medium">Language</div> <div class=" self-center text-xs font-medium">{$i18n.t('Language')}</div>
<div class="flex items-center relative"> <div class="flex items-center relative">
<select <select
class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right" class="w-fit pr-8 rounded py-2 px-2 text-xs bg-transparent outline-none text-right"
...@@ -175,7 +175,7 @@ ...@@ -175,7 +175,7 @@
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <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('Notification')}</div>
<button <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -185,9 +185,9 @@ ...@@ -185,9 +185,9 @@
type="button" type="button"
> >
{#if notificationEnabled === true} {#if notificationEnabled === true}
<span class="ml-2 self-center">On</span> <span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else} {:else}
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -197,7 +197,7 @@ ...@@ -197,7 +197,7 @@
<hr class=" dark:border-gray-700 my-3" /> <hr class=" dark:border-gray-700 my-3" />
<div> <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 <textarea
bind:value={system} bind:value={system}
class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none" class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
...@@ -207,7 +207,7 @@ ...@@ -207,7 +207,7 @@
<div class="mt-2 space-y-3 pr-1.5"> <div class="mt-2 space-y-3 pr-1.5">
<div class="flex justify-between items-center text-sm"> <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 <button
class=" text-xs font-medium text-gray-500" class=" text-xs font-medium text-gray-500"
type="button" type="button"
...@@ -223,7 +223,7 @@ ...@@ -223,7 +223,7 @@
<div class=" py-1 w-full justify-between"> <div class=" py-1 w-full justify-between">
<div class="flex 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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -233,9 +233,9 @@ ...@@ -233,9 +233,9 @@
}} }}
> >
{#if keepAlive === null} {#if keepAlive === null}
<span class="ml-2 self-center"> Default </span> <span class="ml-2 self-center"> {$i18n.t('Default')} </span>
{:else} {:else}
<span class="ml-2 self-center"> Custom </span> <span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
<div> <div>
<div class=" py-1 flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -263,7 +263,7 @@ ...@@ -263,7 +263,7 @@
}} }}
> >
{#if requestFormat === ''} {#if requestFormat === ''}
<span class="ml-2 self-center"> Default </span> <span class="ml-2 self-center"> {$i18n.t('Default')} </span>
{:else if requestFormat === 'json'} {:else if requestFormat === 'json'}
<!-- <svg <!-- <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -275,7 +275,7 @@ ...@@ -275,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" 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> --> </svg> -->
<span class="ml-2 self-center"> JSON </span> <span class="ml-2 self-center"> {$i18n.t('JSON')} </span>
{/if} {/if}
</button> </button>
</div> </div>
......
src/lib/components/chat/Settings/Images.svelte
View file @ 3c471ee2
...@@ -58,7 +58,7 @@ ...@@ -58,7 +58,7 @@
await getModels(); await getModels();
if (models) { if (models) {
toast.success('Server connection verified'); toast.success($i18n.t('Server connection verified'));
} }
} else { } else {
AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token); AUTOMATIC1111_BASE_URL = await getAUTOMATIC1111Url(localStorage.token);
...@@ -117,11 +117,13 @@ ...@@ -117,11 +117,13 @@
> >
<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-[20.5rem]">
<div> <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> <div>
<div class=" py-0.5 flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -131,9 +133,9 @@ ...@@ -131,9 +133,9 @@
type="button" type="button"
> >
{#if enableImageGeneration === true} {#if enableImageGeneration === true}
<span class="ml-2 self-center">On</span> <span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else} {:else}
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -141,7 +143,7 @@ ...@@ -141,7 +143,7 @@
</div> </div>
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
...@@ -189,7 +191,7 @@ ...@@ -189,7 +191,7 @@
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<select <select
...@@ -211,7 +213,7 @@ ...@@ -211,7 +213,7 @@
</div> </div>
<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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
...@@ -224,7 +226,7 @@ ...@@ -224,7 +226,7 @@
</div> </div>
<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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
......
src/lib/components/chat/Settings/Interface.svelte
View file @ 3c471ee2
...@@ -96,11 +96,11 @@ ...@@ -96,11 +96,11 @@
> >
<div class=" space-y-3 pr-1.5 overflow-y-scroll h-80"> <div class=" space-y-3 pr-1.5 overflow-y-scroll h-80">
<div> <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>
<div class=" py-0.5 flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -110,9 +110,9 @@ ...@@ -110,9 +110,9 @@
type="button" type="button"
> >
{#if titleAutoGenerate === true} {#if titleAutoGenerate === true}
<span class="ml-2 self-center">On</span> <span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else} {:else}
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -120,7 +120,7 @@ ...@@ -120,7 +120,7 @@
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -130,9 +130,9 @@ ...@@ -130,9 +130,9 @@
type="button" type="button"
> >
{#if responseAutoCopy === true} {#if responseAutoCopy === true}
<span class="ml-2 self-center">On</span> <span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else} {:else}
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
<div> <div>
<div class=" py-0.5 flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -150,9 +150,9 @@ ...@@ -150,9 +150,9 @@
type="button" type="button"
> >
{#if fullScreenMode === true} {#if fullScreenMode === true}
<span class="ml-2 self-center">On</span> <span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else} {:else}
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -172,9 +172,9 @@ ...@@ -172,9 +172,9 @@
type="button" type="button"
> >
{#if showUsername === true} {#if showUsername === true}
<span class="ml-2 self-center">On</span> <span class="ml-2 self-center">{$i18n.t('On')}</span>
{:else} {:else}
<span class="ml-2 self-center">Off</span> <span class="ml-2 self-center">{$i18n.t('Off')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -184,7 +184,7 @@ ...@@ -184,7 +184,7 @@
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<div> <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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<select <select
...@@ -227,7 +227,7 @@ ...@@ -227,7 +227,7 @@
</button> </button>
</div> </div>
<div class="mt-3"> <div class="mt-3">
<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 <textarea
bind:value={titleGenerationPrompt} bind:value={titleGenerationPrompt}
class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none" class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
...@@ -241,7 +241,7 @@ ...@@ -241,7 +241,7 @@
<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-80">
<div class="flex w-full justify-between mb-2"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
......
src/lib/components/chat/Settings/Models.svelte
View file @ 3c471ee2
...@@ -78,7 +78,7 @@ ...@@ -78,7 +78,7 @@
if (!data.success) { if (!data.success) {
toast.error(data.error); toast.error(data.error);
} else { } else {
toast.success(`Model '${modelName}' has been successfully downloaded.`); toast.success($i18n.t(`Model '${modelName}' has been successfully downloaded.`));
const notification = new Notification($WEBUI_NAME, { const notification = new Notification($WEBUI_NAME, {
body: `Model '${modelName}' has been successfully downloaded.`, body: `Model '${modelName}' has been successfully downloaded.`,
...@@ -243,7 +243,7 @@ ...@@ -243,7 +243,7 @@
}); });
if (res) { if (res) {
toast.success(`Deleted ${deleteModelTag}`); toast.success($i18n.t(`Deleted ${deleteModelTag}`));
} }
deleteModelTag = ''; deleteModelTag = '';
...@@ -372,7 +372,7 @@ ...@@ -372,7 +372,7 @@
<div> <div>
<div class=" mb-2 text-sm font-medium">Manage Ollama Models</div> <div class=" mb-2 text-sm font-medium">Manage Ollama Models</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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<input <input
...@@ -436,7 +436,7 @@ ...@@ -436,7 +436,7 @@
To access the available model names for downloading, <a To access the available model names for downloading, <a
class=" text-gray-500 dark:text-gray-300 font-medium underline" class=" text-gray-500 dark:text-gray-300 font-medium underline"
href="https://ollama.com/library" href="https://ollama.com/library"
target="_blank">click here.</a target="_blank">{$i18n.t('click here.')}</a
> >
</div> </div>
...@@ -461,7 +461,7 @@ ...@@ -461,7 +461,7 @@
</div> </div>
<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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<select <select
...@@ -503,7 +503,7 @@ ...@@ -503,7 +503,7 @@
<div> <div>
<div class="flex justify-between items-center text-xs"> <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 <button
class=" text-xs font-medium text-gray-500" class=" text-xs font-medium text-gray-500"
type="button" type="button"
...@@ -521,7 +521,7 @@ ...@@ -521,7 +521,7 @@
}} }}
> >
<div class=" mb-2 flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -535,9 +535,9 @@ ...@@ -535,9 +535,9 @@
type="button" type="button"
> >
{#if modelUploadMode === 'file'} {#if modelUploadMode === 'file'}
<span class="ml-2 self-center">File Mode</span> <span class="ml-2 self-center">{$i18n.t('File Mode')}</span>
{:else} {:else}
<span class="ml-2 self-center">URL Mode</span> <span class="ml-2 self-center">{$i18n.t('URL Mode')}</span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -642,7 +642,7 @@ ...@@ -642,7 +642,7 @@
{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')} {#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
<div> <div>
<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 <textarea
bind:value={modelFileContent} 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" class="w-full rounded py-2 px-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
...@@ -655,13 +655,13 @@ ...@@ -655,13 +655,13 @@
To access the GGUF models available for downloading, <a To access the GGUF models available for downloading, <a
class=" text-gray-500 dark:text-gray-300 font-medium underline" class=" text-gray-500 dark:text-gray-300 font-medium underline"
href="https://huggingface.co/models?search=gguf" href="https://huggingface.co/models?search=gguf"
target="_blank">click here.</a target="_blank">{$i18n.t('click here.')}</a
> >
</div> </div>
{#if uploadProgress !== null} {#if uploadProgress !== null}
<div class="mt-2"> <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 class="w-full rounded-full dark:bg-gray-800">
<div <div
...@@ -685,11 +685,11 @@ ...@@ -685,11 +685,11 @@
<div class=" space-y-3"> <div class=" space-y-3">
<div class="mt-2 space-y-3 pr-1.5"> <div class="mt-2 space-y-3 pr-1.5">
<div> <div>
<div class=" mb-2 text-sm font-medium">Manage LiteLLM Models</div> <div class=" mb-2 text-sm font-medium">{$i18n.t('Manage LiteLLM Models')}</div>
<div> <div>
<div class="flex justify-between items-center text-xs"> <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 <button
class=" text-xs font-medium text-gray-500" class=" text-xs font-medium text-gray-500"
type="button" type="button"
...@@ -732,7 +732,7 @@ ...@@ -732,7 +732,7 @@
{#if showLiteLLMParams} {#if showLiteLLMParams}
<div> <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 w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -746,7 +746,7 @@ ...@@ -746,7 +746,7 @@
</div> </div>
<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 w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -760,7 +760,7 @@ ...@@ -760,7 +760,7 @@
</div> </div>
<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 w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -774,7 +774,7 @@ ...@@ -774,7 +774,7 @@
</div> </div>
<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 w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -801,7 +801,7 @@ ...@@ -801,7 +801,7 @@
</div> </div>
<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 w-full">
<div class="flex-1 mr-2"> <div class="flex-1 mr-2">
<select <select
...@@ -810,8 +810,7 @@ ...@@ -810,8 +810,7 @@
placeholder={$i18n.t('Select a model')} placeholder={$i18n.t('Select a model')}
> >
{#if !deleteLiteLLMModelId} {#if !deleteLiteLLMModelId}
<option value="" disabled selected>{$i18n.t('Select a model')}</option <option value="" disabled selected>{$i18n.t('Select a model')}</option>
>
{/if} {/if}
{#each liteLLMModelInfo as model} {#each liteLLMModelInfo as model}
<option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700" <option value={model.model_info.id} class="bg-gray-100 dark:bg-gray-700"
...@@ -846,7 +845,7 @@ ...@@ -846,7 +845,7 @@
<!-- <div class="mt-2 space-y-3 pr-1.5"> <!-- <div class="mt-2 space-y-3 pr-1.5">
<div> <div>
<div class=" mb-2.5 text-sm font-medium">Add LiteLLM Model</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('Add LiteLLM Model')}</div>
<div class="flex w-full mb-2"> <div class="flex w-full mb-2">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -859,7 +858,7 @@ ...@@ -859,7 +858,7 @@
</div> </div>
<div class="flex justify-between items-center text-sm"> <div class="flex justify-between items-center text-sm">
<div class=" font-medium">Advanced Model Params</div> <div class=" font-medium">{$i18n.t('Advanced Model Params')}</div>
<button <button
class=" text-xs font-medium text-gray-500" class=" text-xs font-medium text-gray-500"
type="button" type="button"
...@@ -871,7 +870,7 @@ ...@@ -871,7 +870,7 @@
{#if showLiteLLMParams} {#if showLiteLLMParams}
<div> <div>
<div class=" mb-2.5 text-sm font-medium">LiteLLM API Key</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API Key')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -885,7 +884,7 @@ ...@@ -885,7 +884,7 @@
</div> </div>
<div> <div>
<div class=" mb-2.5 text-sm font-medium">LiteLLM API Base URL</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API Base URL')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
...@@ -899,7 +898,7 @@ ...@@ -899,7 +898,7 @@
</div> </div>
<div> <div>
<div class=" mb-2.5 text-sm font-medium">LiteLLM API RPM</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('LiteLLM API RPM')}</div>
<div class="flex w-full"> <div class="flex w-full">
<div class="flex-1"> <div class="flex-1">
<input <input
......
src/lib/components/chat/SettingsModal.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { models, settings, user } from '$lib/stores'; import { models, settings, user } from '$lib/stores';
...@@ -17,6 +18,8 @@ ...@@ -17,6 +18,8 @@
import Connections from './Settings/Connections.svelte'; import Connections from './Settings/Connections.svelte';
import Images from './Settings/Images.svelte'; import Images from './Settings/Images.svelte';
const i18n = getContext('i18n');
export let show = false; export let show = false;
const saveSettings = async (updated) => { const saveSettings = async (updated) => {
...@@ -58,7 +61,7 @@ ...@@ -58,7 +61,7 @@
<Modal bind:show> <Modal bind:show>
<div> <div>
<div class=" flex justify-between dark:text-gray-300 px-5 py-4"> <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 <button
class="self-center" class="self-center"
on:click={() => { on:click={() => {
...@@ -106,7 +109,7 @@ ...@@ -106,7 +109,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">General</div> <div class=" self-center">{$i18n.t('General')}</div>
</button> </button>
{#if $user?.role === 'admin'} {#if $user?.role === 'admin'}
...@@ -131,7 +134,7 @@ ...@@ -131,7 +134,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Connections</div> <div class=" self-center">{$i18n.t('Connections')}</div>
</button> </button>
<button <button
...@@ -157,7 +160,7 @@ ...@@ -157,7 +160,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Models</div> <div class=" self-center">{$i18n.t('Models')}</div>
</button> </button>
{/if} {/if}
...@@ -184,7 +187,7 @@ ...@@ -184,7 +187,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Interface</div> <div class=" self-center">{$i18n.t('Interface')}</div>
</button> </button>
<button <button
...@@ -211,7 +214,7 @@ ...@@ -211,7 +214,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Audio</div> <div class=" self-center">{$i18n.t('Audio')}</div>
</button> </button>
{#if $user.role === 'admin'} {#if $user.role === 'admin'}
...@@ -238,7 +241,7 @@ ...@@ -238,7 +241,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Images</div> <div class=" self-center">{$i18n.t('Images')}</div>
</button> </button>
{/if} {/if}
...@@ -265,7 +268,7 @@ ...@@ -265,7 +268,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Chats</div> <div class=" self-center">{$i18n.t('Chats')}</div>
</button> </button>
<button <button
...@@ -291,7 +294,7 @@ ...@@ -291,7 +294,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">Account</div> <div class=" self-center">{$i18n.t('Account')}</div>
</button> </button>
<button <button
...@@ -317,7 +320,7 @@ ...@@ -317,7 +320,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">About</div> <div class=" self-center">{$i18n.t('About')}</div>
</button> </button>
</div> </div>
<div class="flex-1 md:min-h-[380px]"> <div class="flex-1 md:min-h-[380px]">
......
src/lib/components/chat/ShareChatModal.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte';
import Modal from '../common/Modal.svelte'; import Modal from '../common/Modal.svelte';
const i18n = getContext('i18n');
export let downloadChat: Function; export let downloadChat: Function;
export let shareChat: Function; export let shareChat: Function;
...@@ -17,11 +20,11 @@ ...@@ -17,11 +20,11 @@
show = false; show = false;
}} }}
> >
Share to OpenWebUI Community {$i18n.t('Share to OpenWebUI Community')}
</button> </button>
<div class="flex justify-center space-x-1 mt-1.5"> <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 <button
class=" self-center rounded-full text-xs font-medium text-gray-700 dark:text-gray-500 underline" class=" self-center rounded-full text-xs font-medium text-gray-700 dark:text-gray-500 underline"
...@@ -31,7 +34,7 @@ ...@@ -31,7 +34,7 @@
show = false; show = false;
}} }}
> >
Download as a File {$i18n.t('Download as a File')}
</button> </button>
</div> </div>
</div> </div>
......
src/lib/components/chat/ShortcutsModal.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte';
import Modal from '../common/Modal.svelte'; import Modal from '../common/Modal.svelte';
const i18n = getContext('i18n');
export let show = false; export let show = false;
</script> </script>
<Modal bind:show> <Modal bind:show>
<div> <div>
<div class=" flex justify-between dark:text-gray-300 px-5 py-4"> <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 <button
class="self-center" class="self-center"
on:click={() => { on:click={() => {
...@@ -32,7 +35,7 @@ ...@@ -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 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="flex flex-col space-y-3 w-full self-start">
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -56,7 +59,7 @@ ...@@ -56,7 +59,7 @@
</div> </div>
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -74,7 +77,7 @@ ...@@ -74,7 +77,7 @@
</div> </div>
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -98,7 +101,7 @@ ...@@ -98,7 +101,7 @@
</div> </div>
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -124,7 +127,7 @@ ...@@ -124,7 +127,7 @@
<div class="flex flex-col space-y-3 w-full self-start"> <div class="flex flex-col space-y-3 w-full self-start">
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -141,7 +144,7 @@ ...@@ -141,7 +144,7 @@
</div> </div>
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -165,7 +168,7 @@ ...@@ -165,7 +168,7 @@
</div> </div>
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
...@@ -188,7 +191,7 @@ ...@@ -188,7 +191,7 @@
</div> </div>
<div class="w-full flex justify-between items-center"> <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 class="flex space-x-1 text-xs">
<div <div
......
src/lib/components/documents/AddDocModal.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { createNewDoc, getDocs, tagDocByName, updateDocByName } from '$lib/apis/documents'; import { createNewDoc, getDocs, tagDocByName, updateDocByName } from '$lib/apis/documents';
import Modal from '../common/Modal.svelte'; import Modal from '../common/Modal.svelte';
...@@ -13,6 +13,8 @@ ...@@ -13,6 +13,8 @@
import { transformFileName } from '$lib/utils'; import { transformFileName } from '$lib/utils';
import { SUPPORTED_FILE_EXTENSIONS, SUPPORTED_FILE_TYPE } from '$lib/constants'; import { SUPPORTED_FILE_EXTENSIONS, SUPPORTED_FILE_TYPE } from '$lib/constants';
const i18n = getContext('i18n');
export let show = false; export let show = false;
export let selectedDoc; export let selectedDoc;
...@@ -96,7 +98,7 @@ ...@@ -96,7 +98,7 @@
<Modal size="sm" bind:show> <Modal size="sm" bind:show>
<div> <div>
<div class=" flex justify-between dark:text-gray-300 px-5 py-4"> <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 <button
class="self-center" class="self-center"
on:click={() => { on:click={() => {
...@@ -145,7 +147,7 @@ ...@@ -145,7 +147,7 @@
<div class=" flex flex-col space-y-1.5"> <div class=" flex flex-col space-y-1.5">
<div class="flex flex-col w-full"> <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} /> <Tags {tags} addTag={addTagHandler} deleteTag={deleteTagHandler} />
</div> </div>
......
src/lib/components/documents/EditDocModal.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { getDocs, tagDocByName, updateDocByName } from '$lib/apis/documents'; import { getDocs, tagDocByName, updateDocByName } from '$lib/apis/documents';
import Modal from '../common/Modal.svelte'; import Modal from '../common/Modal.svelte';
...@@ -10,6 +10,8 @@ ...@@ -10,6 +10,8 @@
import Tags from '../common/Tags.svelte'; import Tags from '../common/Tags.svelte';
import { addTagById } from '$lib/apis/chats'; import { addTagById } from '$lib/apis/chats';
const i18n = getContext('i18n');
export let show = false; export let show = false;
export let selectedDoc; export let selectedDoc;
...@@ -74,7 +76,7 @@ ...@@ -74,7 +76,7 @@
<Modal size="sm" bind:show> <Modal size="sm" bind:show>
<div> <div>
<div class=" flex justify-between dark:text-gray-300 px-5 py-4"> <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 <button
class="self-center" class="self-center"
on:click={() => { on:click={() => {
...@@ -105,7 +107,7 @@ ...@@ -105,7 +107,7 @@
> >
<div class=" flex flex-col space-y-1.5"> <div class=" flex flex-col space-y-1.5">
<div class="flex flex-col w-full"> <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 class="flex flex-1">
<div <div
...@@ -134,7 +136,7 @@ ...@@ -134,7 +136,7 @@
</div> </div>
<div class="flex flex-col w-full"> <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"> <div class="flex-1">
<input <input
...@@ -148,7 +150,7 @@ ...@@ -148,7 +150,7 @@
</div> </div>
<div class="flex flex-col w-full"> <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} /> <Tags {tags} addTag={addTagHandler} deleteTag={deleteTagHandler} />
</div> </div>
......
src/lib/components/documents/Settings/General.svelte
View file @ 3c471ee2
...@@ -8,9 +8,11 @@ ...@@ -8,9 +8,11 @@
updateRAGTemplate updateRAGTemplate
} from '$lib/apis/rag'; } from '$lib/apis/rag';
import { documents } from '$lib/stores'; import { documents } from '$lib/stores';
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
const i18n = getContext('i18n');
export let saveHandler: Function; export let saveHandler: Function;
let loading = false; let loading = false;
...@@ -27,7 +29,7 @@ ...@@ -27,7 +29,7 @@
if (res) { if (res) {
await documents.set(await getDocs(localStorage.token)); await documents.set(await getDocs(localStorage.token));
toast.success('Scan complete!'); toast.success($i18n.t('Scan complete!'));
} }
}; };
...@@ -57,10 +59,12 @@ ...@@ -57,10 +59,12 @@
> >
<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-80">
<div> <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=" 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 <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 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
...@@ -73,7 +77,7 @@ ...@@ -73,7 +77,7 @@
type="button" type="button"
disabled={loading} disabled={loading}
> >
<div class="self-center font-medium">Scan</div> <div class="self-center font-medium">{$i18n.t('Scan')}</div>
<!-- <svg <!-- <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
...@@ -122,11 +126,11 @@ ...@@ -122,11 +126,11 @@
<hr class=" dark:border-gray-700" /> <hr class=" dark:border-gray-700" />
<div class=" "> <div class=" ">
<div class=" text-sm font-medium">Chunk Params</div> <div class=" text-sm font-medium">{$i18n.t('Chunk Params')}</div>
<div class=" flex"> <div class=" flex">
<div class=" flex w-full justify-between"> <div class=" flex w-full justify-between">
<div class="self-center text-xs font-medium min-w-fit">Chunk Size</div> <div class="self-center text-xs font-medium min-w-fit">{$i18n.t('Chunk Size')}</div>
<div class="self-center p-3"> <div class="self-center p-3">
<input <input
...@@ -141,7 +145,7 @@ ...@@ -141,7 +145,7 @@
</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 text-xs font-medium min-w-fit">{$i18n.t('Chunk Overlap')}</div>
<div class="self-center p-3"> <div class="self-center p-3">
<input <input
...@@ -157,7 +161,7 @@ ...@@ -157,7 +161,7 @@
</div> </div>
<div> <div>
<div class=" mb-2.5 text-sm font-medium">RAG Template</div> <div class=" mb-2.5 text-sm font-medium">{$i18n.t('RAG Template')}</div>
<textarea <textarea
bind:value={template} bind:value={template}
class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none" class="w-full rounded p-4 text-sm dark:text-gray-300 dark:bg-gray-800 outline-none resize-none"
......
src/lib/components/documents/SettingsModal.svelte
View file @ 3c471ee2
<script> <script>
import { getContext } from 'svelte';
import Modal from '../common/Modal.svelte'; import Modal from '../common/Modal.svelte';
import General from './Settings/General.svelte'; import General from './Settings/General.svelte';
const i18n = getContext('i18n');
export let show = false; export let show = false;
let selectedTab = 'general'; let selectedTab = 'general';
...@@ -10,7 +13,7 @@ ...@@ -10,7 +13,7 @@
<Modal bind:show> <Modal bind:show>
<div> <div>
<div class=" flex justify-between dark:text-gray-300 px-5 py-4"> <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 <button
class="self-center" class="self-center"
on:click={() => { on:click={() => {
...@@ -58,7 +61,7 @@ ...@@ -58,7 +61,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center">General</div> <div class=" self-center">{$i18n.t('General')}</div>
</button> </button>
</div> </div>
<div class="flex-1 md:min-h-[380px]"> <div class="flex-1 md:min-h-[380px]">
......
src/lib/components/layout/Navbar.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
...@@ -9,6 +10,8 @@ ...@@ -9,6 +10,8 @@
import TagInput from '../common/Tags/TagInput.svelte'; import TagInput from '../common/Tags/TagInput.svelte';
import Tags from '../common/Tags.svelte'; import Tags from '../common/Tags.svelte';
const i18n = getContext('i18n');
export let initNewChat: Function; export let initNewChat: Function;
export let title: string = $WEBUI_NAME; export let title: string = $WEBUI_NAME;
export let shareEnabled: boolean = false; export let shareEnabled: boolean = false;
...@@ -26,7 +29,7 @@ ...@@ -26,7 +29,7 @@
const chat = (await getChatById(localStorage.token, $chatId)).chat; const chat = (await getChatById(localStorage.token, $chatId)).chat;
console.log('share', 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 = 'https://openwebui.com';
// const url = 'http://localhost:5173'; // const url = 'http://localhost:5173';
......
src/lib/components/layout/Sidebar.svelte
View file @ 3c471ee2
...@@ -7,8 +7,7 @@ ...@@ -7,8 +7,7 @@
import { goto, invalidateAll } from '$app/navigation'; import { goto, invalidateAll } from '$app/navigation';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores'; import { user, chats, settings, showSettings, chatId, tags } from '$lib/stores';
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { getContext } from 'svelte';
const i18n = getContext('i18n'); const i18n = getContext('i18n');
...@@ -201,7 +200,7 @@ ...@@ -201,7 +200,7 @@
</div> </div>
<div class="flex self-center"> <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> </div>
</a> </a>
</div> </div>
...@@ -229,7 +228,7 @@ ...@@ -229,7 +228,7 @@
</div> </div>
<div class="flex self-center"> <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> </div>
</a> </a>
</div> </div>
...@@ -239,7 +238,7 @@ ...@@ -239,7 +238,7 @@
{#if !($settings.saveChatHistory ?? true)} {#if !($settings.saveChatHistory ?? true)}
<div class="absolute z-40 w-full h-full bg-black/90 flex justify-center"> <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=" 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"> <div class="text-xs mt-2">
When history is turned off, new chats on this browser won't appear in your history on 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" any of your devices. <span class=" font-semibold"
...@@ -596,7 +595,7 @@ ...@@ -596,7 +595,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center font-medium">Admin Panel</div> <div class=" self-center font-medium">{$i18n.t('Admin Panel')}</div>
</button> </button>
{/if} {/if}
...@@ -628,7 +627,7 @@ ...@@ -628,7 +627,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center font-medium">Settings</div> <div class=" self-center font-medium">{$i18n.t('Settings')}</div>
</button> </button>
</div> </div>
...@@ -662,7 +661,7 @@ ...@@ -662,7 +661,7 @@
/> />
</svg> </svg>
</div> </div>
<div class=" self-center font-medium">Sign Out</div> <div class=" self-center font-medium">{$i18n.t('Sign Out')}</div>
</button> </button>
</div> </div>
</div> </div>
......
src/routes/(app)/+layout.svelte
View file @ 3c471ee2
<script lang="ts"> <script lang="ts">
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
import { onMount, tick, getContext } from 'svelte';
import { openDB, deleteDB } from 'idb'; import { openDB, deleteDB } from 'idb';
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
import { onMount, tick } from 'svelte';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama'; import { getOllamaModels, getOllamaVersion } from '$lib/apis/ollama';
...@@ -35,6 +35,8 @@ ...@@ -35,6 +35,8 @@
import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte'; import ShortcutsModal from '$lib/components/chat/ShortcutsModal.svelte';
import ChangelogModal from '$lib/components/ChangelogModal.svelte'; import ChangelogModal from '$lib/components/ChangelogModal.svelte';
const i18n = getContext('i18n');
let ollamaVersion = ''; let ollamaVersion = '';
let loaded = false; let loaded = false;
...@@ -266,12 +268,14 @@ ...@@ -266,12 +268,14 @@
</div> </div>
<div class=" mt-4 text-center text-sm dark:text-gray-200 w-full"> <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 {$i18n.t(
take a moment to download and delete your chat logs by clicking the button below. "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"
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 <span class="font-semibold dark:text-white"
>. This ensures that your valuable conversations are securely saved to your backend >{$i18n.t('Settings')} > {$i18n.t('Chats')} > {$i18n.t('Import Chats')}</span
database. Thank you! >. {$i18n.t(
'This ensures that your valuable conversations are securely saved to your backend database. Thank you!'
)}
</div> </div>
<div class=" mt-6 mx-auto relative group w-fit"> <div class=" mt-6 mx-auto relative group w-fit">
......
src/routes/(app)/admin/+page.svelte
View file @ 3c471ee2
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
import { WEBUI_API_BASE_URL } from '$lib/constants'; import { WEBUI_API_BASE_URL } from '$lib/constants';
import { WEBUI_NAME, config, user } from '$lib/stores'; import { WEBUI_NAME, config, user } from '$lib/stores';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { toast } from 'svelte-sonner'; import { toast } from 'svelte-sonner';
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
import EditUserModal from '$lib/components/admin/EditUserModal.svelte'; import EditUserModal from '$lib/components/admin/EditUserModal.svelte';
import SettingsModal from '$lib/components/admin/SettingsModal.svelte'; import SettingsModal from '$lib/components/admin/SettingsModal.svelte';
const i18n = getContext('i18n');
let loaded = false; let loaded = false;
let users = []; let users = [];
...@@ -37,7 +39,7 @@ ...@@ -37,7 +39,7 @@
}); });
if (res) { if (res) {
users = await getUsers(localStorage.token); users = await getUsers(localStorage.token);
toast.success('Successfully updated'); toast.success($i18n.t('Successfully updated'));
} }
}; };
...@@ -115,7 +117,7 @@ ...@@ -115,7 +117,7 @@
/> />
</svg> </svg>
<div class=" text-xs">Admin Settings</div> <div class=" text-xs">{$i18n.t('Admin Settings')}</div>
</button> </button>
</div> </div>
</div> </div>
...@@ -131,10 +133,10 @@ ...@@ -131,10 +133,10 @@
class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400" class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400"
> >
<tr> <tr>
<th scope="col" class="px-3 py-2"> Role </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Role')} </th>
<th scope="col" class="px-3 py-2"> Name </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Name')} </th>
<th scope="col" class="px-3 py-2"> Email </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Email')} </th>
<th scope="col" class="px-3 py-2"> Action </th> <th scope="col" class="px-3 py-2"> {$i18n.t('Action')} </th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
......
src/routes/(app)/documents/+page.svelte
View file @ 3c471ee2
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { WEBUI_NAME, documents } from '$lib/stores'; import { WEBUI_NAME, documents } from '$lib/stores';
import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents'; import { createNewDoc, deleteDocByName, getDocs } from '$lib/apis/documents';
...@@ -17,6 +17,9 @@ ...@@ -17,6 +17,9 @@
import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte'; import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte';
import SettingsModal from '$lib/components/documents/SettingsModal.svelte'; import SettingsModal from '$lib/components/documents/SettingsModal.svelte';
import AddDocModal from '$lib/components/documents/AddDocModal.svelte'; import AddDocModal from '$lib/components/documents/AddDocModal.svelte';
const i18n = getContext('i18n');
let importFiles = ''; let importFiles = '';
let inputFiles = ''; let inputFiles = '';
...@@ -188,7 +191,7 @@ ...@@ -188,7 +191,7 @@
<div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10"> <div class="max-w-2xl mx-auto w-full px-3 md:px-0 my-10">
<div class="mb-6"> <div class="mb-6">
<div class="flex justify-between items-center"> <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> <div>
<button <button
...@@ -211,7 +214,7 @@ ...@@ -211,7 +214,7 @@
/> />
</svg> </svg>
<div class=" text-xs">Document Settings</div> <div class=" text-xs">{$i18n.t('Document Settings')}</div>
</button> </button>
</div> </div>
</div> </div>
...@@ -274,7 +277,7 @@ ...@@ -274,7 +277,7 @@
on:dragleave={onDragLeave} on:dragleave={onDragLeave}
> >
<div class=" pointer-events-none"> <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"> <div class=" mt-2 text-center text-sm dark:text-gray-200 w-full">
Drop any files here to add to my documents Drop any files here to add to my documents
...@@ -314,7 +317,7 @@ ...@@ -314,7 +317,7 @@
// await chats.set(await getChatListByTagName(localStorage.token, tag.name)); // 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> </button>
{#each tags as tag} {#each tags as tag}
...@@ -344,7 +347,7 @@ ...@@ -344,7 +347,7 @@
// await chats.set(await getChatListByTagName(localStorage.token, tag.name)); // 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> -->
<button <button
...@@ -354,7 +357,9 @@ ...@@ -354,7 +357,9 @@
// await chats.set(await getChatListByTagName(localStorage.token, tag.name)); // 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> </button>
</div> </div>
</div> </div>
...@@ -562,7 +567,7 @@ ...@@ -562,7 +567,7 @@
document.getElementById('documents-import-input')?.click(); document.getElementById('documents-import-input')?.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"> <div class=" self-center">
<svg <svg
...@@ -589,7 +594,7 @@ ...@@ -589,7 +594,7 @@
saveAs(blob, `documents-mapping-export-${Date.now()}.json`); 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"> <div class=" self-center">
<svg <svg
......
src/routes/(app)/modelfiles/+page.svelte
View file @ 3c471ee2
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
import fileSaver from 'file-saver'; import fileSaver from 'file-saver';
const { saveAs } = fileSaver; const { saveAs } = fileSaver;
import { onMount } from 'svelte'; import { onMount, getContext } from 'svelte';
import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores'; import { WEBUI_NAME, modelfiles, settings, user } from '$lib/stores';
import { createModel, deleteModel } from '$lib/apis/ollama'; import { createModel, deleteModel } from '$lib/apis/ollama';
...@@ -14,6 +14,8 @@ ...@@ -14,6 +14,8 @@
} from '$lib/apis/modelfiles'; } from '$lib/apis/modelfiles';
import { goto } from '$app/navigation'; import { goto } from '$app/navigation';
const i18n = getContext('i18n');
let localModelfiles = []; let localModelfiles = [];
let importFiles; let importFiles;
...@@ -23,7 +25,7 @@ ...@@ -23,7 +25,7 @@
success = await deleteModel(localStorage.token, tagName); success = await deleteModel(localStorage.token, tagName);
if (success) { if (success) {
toast.success(`Deleted ${tagName}`); toast.success($i18n.t(`Deleted {tagName}`, { tagName }));
} }
return success; return success;
...@@ -36,7 +38,7 @@ ...@@ -36,7 +38,7 @@
}; };
const shareModelfile = async (modelfile) => { 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'; const url = 'https://openwebui.com';
...@@ -78,7 +80,7 @@ ...@@ -78,7 +80,7 @@
<div class="min-h-screen max-h-[100dvh] w-full flex justify-center dark:text-white"> <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="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="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"> <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"> <div class=" self-center w-10">
...@@ -101,8 +103,8 @@ ...@@ -101,8 +103,8 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold">Create a modelfile</div> <div class=" font-bold">{$i18n.t('Create a modelfile')}</div>
<div class=" text-sm">Customize Ollama models for a specific purpose</div> <div class=" text-sm">{$i18n.t('Customize Ollama models for a specific purpose')}</div>
</div> </div>
</a> </a>
...@@ -266,7 +268,7 @@ ...@@ -266,7 +268,7 @@
document.getElementById('modelfiles-import-input')?.click(); document.getElementById('modelfiles-import-input')?.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"> <div class=" self-center">
<svg <svg
...@@ -290,7 +292,7 @@ ...@@ -290,7 +292,7 @@
saveModelfiles($modelfiles); 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"> <div class=" self-center">
<svg <svg
...@@ -331,7 +333,7 @@ ...@@ -331,7 +333,7 @@
await modelfiles.set(await getModelfiles(localStorage.token)); 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"> <div class=" self-center">
<svg <svg
...@@ -382,7 +384,7 @@ ...@@ -382,7 +384,7 @@
</div> </div>
<div class=" my-16"> <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 <a
class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2" class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-2"
...@@ -409,8 +411,8 @@ ...@@ -409,8 +411,8 @@
</div> </div>
<div class=" self-center"> <div class=" self-center">
<div class=" font-bold">Discover a modelfile</div> <div class=" font-bold">{$i18n.t('Discover a modelfile')}</div>
<div class=" text-sm">Discover, download, and explore model presets</div> <div class=" text-sm">{$i18n.t('Discover, download, and explore model presets')}</div>
</div> </div>
</a> </a>
</div> </div>
......
src/routes/(app)/modelfiles/create/+page.svelte
View file @ 3c471ee2
...@@ -6,10 +6,12 @@ ...@@ -6,10 +6,12 @@
import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte'; import AdvancedParams from '$lib/components/chat/Settings/Advanced/AdvancedParams.svelte';
import { splitStream } from '$lib/utils'; import { splitStream } from '$lib/utils';
import { onMount, tick } from 'svelte'; import { onMount, tick, getContext } from 'svelte';
import { createModel } from '$lib/apis/ollama'; import { createModel } from '$lib/apis/ollama';
import { createNewModelfile, getModelfileByTagName, getModelfiles } from '$lib/apis/modelfiles'; import { createNewModelfile, getModelfileByTagName, getModelfiles } from '$lib/apis/modelfiles';
const i18n = getContext('i18n');
let loading = false; let loading = false;
let filesInputElement; let filesInputElement;
...@@ -349,7 +351,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -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 <button
class="flex space-x-1" class="flex space-x-1"
...@@ -371,7 +373,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -371,7 +373,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
/> />
</svg> </svg>
</div> </div>
<div class=" self-center font-medium text-sm">Back</div> <div class=" self-center font-medium text-sm">{$i18n.t('Back')}</div>
</button> </button>
<hr class="my-3 dark:border-gray-700" /> <hr class="my-3 dark:border-gray-700" />
...@@ -418,7 +420,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -418,7 +420,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
<div class="my-2 flex space-x-2"> <div class="my-2 flex space-x-2">
<div class="flex-1"> <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> <div>
<input <input
...@@ -431,7 +433,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -431,7 +433,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="flex-1"> <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> <div>
<input <input
...@@ -445,7 +447,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -445,7 +447,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="my-2"> <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> <div>
<input <input
...@@ -459,7 +461,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -459,7 +461,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
<div class="my-2"> <div class="my-2">
<div class="flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -469,9 +471,9 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -469,9 +471,9 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
}} }}
> >
{#if raw} {#if raw}
<span class="ml-2 self-center"> Raw Format </span> <span class="ml-2 self-center"> {$i18n.t('Raw Format')} </span>
{:else} {:else}
<span class="ml-2 self-center"> Builder Mode </span> <span class="ml-2 self-center"> {$i18n.t('Builder Mode')} </span>
{/if} {/if}
</button> </button>
</div> </div>
...@@ -480,7 +482,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -480,7 +482,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
{#if raw} {#if raw}
<div class="mt-2"> <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> <div>
<textarea <textarea
...@@ -493,12 +495,13 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -493,12 +495,13 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="text-xs text-gray-400 dark:text-gray-500"> <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" class="text-gray-500 dark:text-gray-300 font-medium cursor-pointer"
type="button" type="button"
on:click={() => { on:click={() => {
raw = !raw; raw = !raw;
}}>Builder Mode</button }}>{$i18n.t('Builder Mode')}</button
> >
or or
<a <a
...@@ -506,13 +509,13 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -506,13 +509,13 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
href="https://openwebui.com" href="https://openwebui.com"
target="_blank" target="_blank"
> >
Click here to check other modelfiles. {$i18n.t('Click here to check other modelfiles.')}
</a> </a>
</div> </div>
</div> </div>
{:else} {:else}
<div class="my-2"> <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> <div>
<input <input
...@@ -524,16 +527,17 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -524,16 +527,17 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="mt-1 text-xs text-gray-400 dark:text-gray-500"> <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" class=" text-gray-500 dark:text-gray-300 font-medium"
href="https://ollama.com/library" href="https://ollama.com/library"
target="_blank">click here.</a target="_blank">{$i18n.t('click here.')}</a
> >
</div> </div>
</div> </div>
<div class="my-1"> <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> <div>
<textarea <textarea
...@@ -546,7 +550,9 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -546,7 +550,9 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="flex w-full justify-between"> <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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -556,16 +562,16 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -556,16 +562,16 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
}} }}
> >
{#if advanced} {#if advanced}
<span class="ml-2 self-center"> Custom </span> <span class="ml-2 self-center">{$i18n.t(' Custom ')}</span>
{:else} {:else}
<span class="ml-2 self-center"> Default </span> <span class="ml-2 self-center">{$i18n.t(' Default ')}</span>
{/if} {/if}
</button> </button>
</div> </div>
{#if advanced} {#if advanced}
<div class="my-2"> <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> <div>
<textarea <textarea
...@@ -578,7 +584,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -578,7 +584,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="my-2"> <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> <div>
<AdvancedParams bind:options /> <AdvancedParams bind:options />
...@@ -590,7 +596,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -590,7 +596,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
<div class="my-2"> <div class="my-2">
<div class="flex w-full justify-between mb-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 <button
class="p-1 px-3 text-xs flex rounded transition" class="p-1 px-3 text-xs flex rounded transition"
...@@ -647,7 +653,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -647,7 +653,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
</div> </div>
<div class="my-2"> <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"> <div class="grid grid-cols-4">
{#each Object.keys(categories) as category} {#each Object.keys(categories) as category}
...@@ -661,7 +667,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, ''); ...@@ -661,7 +667,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
{#if pullProgress !== null} {#if pullProgress !== null}
<div class="my-2"> <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="w-full rounded-full dark:bg-gray-800">
<div <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" 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, ''); ...@@ -684,7 +690,7 @@ SYSTEM """${system}"""`.replace(/^\s*\n/gm, '');
type="submit" type="submit"
disabled={loading} disabled={loading}
> >
<div class=" self-center font-medium">Save & Create</div> <div class=" self-center font-medium">{$i18n.t('Save & Create')}</div>
{#if loading} {#if loading}
<div class="ml-1.5 self-center"> <div class="ml-1.5 self-center">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment