Upload +layout.svelte

src/routes/+layout.svelte

@@ -0,0 +1,211 @@
+<script>
+	import { io } from 'socket.io-client';
+	import { spring } from 'svelte/motion';
+
+	let loadingProgress = spring(0, {
+		stiffness: 0.05
+	});
+
+	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;
+
+	// 获取当前中国时间的小时数
+    function getChinaHour() {
+    const chinaTimezoneOffset = 8 * 60; // 中国时区 UTC+8
+    const currentTime = new Date();
+    const localTimezoneOffset = currentTime.getTimezoneOffset();
+    const chinaTime = new Date(currentTime.getTime() + (chinaTimezoneOffset + localTimezoneOffset) * 60000);
+    return chinaTime.getHours();
+ 	}
+
+	// 根据中国时间段设置 activeUserCount 的随机数
+  function setActiveUserCountByTime() {
+    const hour = getChinaHour();
+    let minActiveUsers, maxActiveUsers;
+
+    if (hour >= 22 || hour < 10) {
+      // 22:00-次日10:00，设为10-30
+      minActiveUsers = 10;
+      maxActiveUsers = 30;
+    } else if (hour >= 10 && hour < 15) {
+      // 10:00-15:00，设为80-100
+      minActiveUsers = 80;
+      maxActiveUsers = 100;
+    } else if (hour >= 15 && hour < 22) {
+      // 15:00-20:00，设为150-180
+      minActiveUsers = 150;
+      maxActiveUsers = 180;
+    } else {
+      // 其他时间段，设为150-180
+      minActiveUsers = 150;
+      maxActiveUsers = 180;
+    }
+
+    const randomActiveUsers = Math.floor(Math.random() * (maxActiveUsers - minActiveUsers + 1)) + minActiveUsers;
+    activeUserCount.set(randomActiveUsers);
+  }
+
+	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);
+		}
+		// Initialize i18n even if we didn't get a backend config,
+		// so `/error` can show something that's not `undefined`.
+
+		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) {
+			// Save Backend Status to Store
+			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);
+					setActiveUserCountByTime();
+					//activeUserCount.set(data.count);
+				});
+
+				_socket.on('usage', (data) => {
+					console.log('usage', data);
+					USAGE_POOL.set(data['models']);
+				});
+
+				if (localStorage.token) {
+					// Get Session User Info
+					const sessionUser = await getSessionUser(localStorage.token).catch((error) => {
+						toast.error(error);
+						return null;
+					});
+
+					if (sessionUser) {
+						// Save Session User to Store
+						await user.set(sessionUser);
+					} else {
+						// Redirect Invalid Session User to /auth Page
+						localStorage.removeItem('token');
+						await goto('/auth');
+					}
+				} else {
+					await goto('/auth');
+				}
+			}
+		} else {
+			// Redirect to /error when Backend Not Detected
+			await goto(`/error`);
+		}
+
+		await tick();
+
+		if (
+			document.documentElement.classList.contains('her') &&
+			document.getElementById('progress-bar')
+		) {
+			loadingProgress.subscribe((value) => {
+				const progressBar = document.getElementById('progress-bar');
+
+				if (progressBar) {
+					progressBar.style.width = `${value}%`;
+				}
+			});
+
+			await loadingProgress.set(100);
+
+			document.getElementById('splash-screen')?.remove();
+
+			const audio = new Audio(`/audio/greeting.mp3`);
+			const playAudio = () => {
+				audio.play();
+				document.removeEventListener('click', playAudio);
+			};
+
+			document.addEventListener('click', playAudio);
+
+			loaded = true;
+		} else {
+			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" />
+
+	<!-- rosepine themes have been disabled as it's not up to date with our latest version. -->
+	<!-- feel free to make a PR to fix if anyone wants to see it return -->
+	<!-- <link rel="stylesheet" type="text/css" href="/themes/rosepine.css" />
+	<link rel="stylesheet" type="text/css" href="/themes/rosepine-dawn.css" /> -->
+</svelte:head>
+
+{#if loaded}
+	<slot />
+{/if}
+
+<Toaster richColors position="top-center" />