|
<script> |
|
import { io } from 'socket.io-client'; |
|
|
|
import { onMount, tick, setContext } from 'svelte'; |
|
import { |
|
config, |
|
user, |
|
theme, |
|
WEBUI_NAME, |
|
mobile, |
|
socket, |
|
activeUserCount, |
|
USAGE_POOL |
|
} from '$lib/stores'; |
|
import { goto } from '$app/navigation'; |
|
import { Toaster, toast } from 'svelte-sonner'; |
|
|
|
import { getBackendConfig } from '$lib/apis'; |
|
import { getSessionUser } from '$lib/apis/auths'; |
|
|
|
import '../tailwind.css'; |
|
import '../app.css'; |
|
|
|
import 'tippy.js/dist/tippy.css'; |
|
|
|
import { WEBUI_BASE_URL, WEBUI_HOSTNAME } from '$lib/constants'; |
|
import i18n, { initI18n, getLanguages } from '$lib/i18n'; |
|
|
|
setContext('i18n', i18n); |
|
|
|
let loaded = false; |
|
const BREAKPOINT = 768; |
|
|
|
onMount(async () => { |
|
theme.set(localStorage.theme); |
|
|
|
mobile.set(window.innerWidth < BREAKPOINT); |
|
const onResize = () => { |
|
if (window.innerWidth < BREAKPOINT) { |
|
mobile.set(true); |
|
} else { |
|
mobile.set(false); |
|
} |
|
}; |
|
|
|
window.addEventListener('resize', onResize); |
|
|
|
let backendConfig = null; |
|
try { |
|
backendConfig = await getBackendConfig(); |
|
console.log('Backend config:', backendConfig); |
|
} catch (error) { |
|
console.error('Error loading backend config:', error); |
|
} |
|
|
|
|
|
|
|
const languages = await getLanguages(); |
|
|
|
const browserLanguage = navigator.languages |
|
? navigator.languages[0] |
|
: navigator.language || navigator.userLanguage; |
|
|
|
initI18n(languages.includes(browserLanguage) ? browserLanguage : backendConfig?.default_locale); |
|
|
|
if (backendConfig) { |
|
|
|
await config.set(backendConfig); |
|
await WEBUI_NAME.set(backendConfig.name); |
|
|
|
if ($config) { |
|
const _socket = io(`${WEBUI_BASE_URL}`, { |
|
path: '/ws/socket.io', |
|
auth: { token: localStorage.token } |
|
}); |
|
|
|
_socket.on('connect', () => { |
|
console.log('connected'); |
|
}); |
|
|
|
await socket.set(_socket); |
|
|
|
_socket.on('user-count', (data) => { |
|
console.log('user-count', data); |
|
activeUserCount.set(data.count); |
|
}); |
|
|
|
_socket.on('usage', (data) => { |
|
console.log('usage', data); |
|
USAGE_POOL.set(data['models']); |
|
}); |
|
|
|
if (localStorage.token) { |
|
|
|
const sessionUser = await getSessionUser(localStorage.token).catch((error) => { |
|
toast.error(error); |
|
return null; |
|
}); |
|
|
|
if (sessionUser) { |
|
|
|
await user.set(sessionUser); |
|
} else { |
|
|
|
localStorage.removeItem('token'); |
|
await goto('/auth'); |
|
} |
|
} else { |
|
await goto('/auth'); |
|
} |
|
} |
|
} else { |
|
|
|
await goto(`/error`); |
|
} |
|
|
|
await tick(); |
|
|
|
document.getElementById('splash-screen')?.remove(); |
|
loaded = true; |
|
|
|
return () => { |
|
window.removeEventListener('resize', onResize); |
|
}; |
|
}); |
|
</script> |
|
|
|
<svelte:head> |
|
<title>{$WEBUI_NAME}</title> |
|
<link crossorigin="anonymous" rel="icon" href="{WEBUI_BASE_URL}/static/favicon.png" /> |
|
|
|
|
|
|
|
|
|
|
|
</svelte:head> |
|
|
|
{#if loaded} |
|
<slot /> |
|
{/if} |
|
|
|
<Toaster richColors position="top-center" /> |
|
|