Spaces:

huggingface
/

inference-playground

Running

App Files Files Community

Thomas G. Lopes commited on 4 days ago

Commit

5acf3a4

1 Parent(s): 17c3edf

move to csr

Browse files

Files changed (10) hide show

src/app.html +9 -1
src/lib/components/Avatar.svelte +0 -3
src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte +0 -3
src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte +0 -2
src/lib/stores/session.ts +12 -19
src/lib/stores/token.ts +3 -6
src/lib/utils/store.ts +1 -5
src/routes/+layout.ts +1 -0
src/routes/+page.ts +8 -0
src/routes/{+page.server.ts → api/models/+server.ts} +15 -8

src/app.html CHANGED Viewed

@@ -7,7 +7,15 @@
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" class="dark:bg-gray-900">
 		<script>
 			(function () {
 				const urlParams = new URLSearchParams(window.location.search);

 		%sveltekit.head%
 	</head>
+	<body data-sveltekit-preload-data="hover">
+		<style>
+			body {
+				background: white;
+			}
+			body.dark {
+				background: #101828;
+			}
+		</style>
 		<script>
 			(function () {
 				const urlParams = new URLSearchParams(window.location.search);

src/lib/components/Avatar.svelte CHANGED Viewed

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
 	export let orgName: string | undefined;
 	export let size: "sm" | "md" = "md";
@@ -9,7 +7,6 @@
 	async function getAvatarUrl(orgName?: string) {
 		if (!orgName) return;
 		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
-		if (!browser) return;
 		const res = await fetch(url);
 		if (!res.ok) {
 			console.error(`Error getting avatar url for org: ${orgName}`, res.status, res.statusText);

 <script lang="ts">
 	export let orgName: string | undefined;
 	export let size: "sm" | "md" = "md";
 	async function getAvatarUrl(orgName?: string) {
 		if (!orgName) return;
 		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
 		const res = await fetch(url);
 		if (!res.ok) {
 			console.error(`Error getting avatar url for org: ${orgName}`, res.status, res.statusText);

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte CHANGED Viewed

@@ -1,6 +1,4 @@
 <script lang="ts">
-	import { browser } from "$app/environment";
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import IconCross from "../Icons/IconCross.svelte";
@@ -35,7 +33,6 @@
 	});
 	onDestroy(() => {
-		if (!browser) return;
 		// remove inert attribute if this is the last modal
 		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
 			document.getElementById("app")?.removeAttribute("inert");

 <script lang="ts">
 	import { createEventDispatcher, onDestroy, onMount } from "svelte";
 	import IconCross from "../Icons/IconCross.svelte";
 	});
 	onDestroy(() => {
 		// remove inert attribute if this is the last modal
 		if (document.querySelectorAll('[role="dialog"]:not(#app *)').length === 1) {
 			document.getElementById("app")?.removeAttribute("inert");

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte CHANGED Viewed

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import type { Conversation } from "$lib/types";
-	import { browser } from "$app/environment";
 	import { randomPick } from "$lib/utils/array";
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
@@ -13,7 +12,6 @@
 	export { classes as class };
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
-		if (!browser) return;
 		const validProvider = providers.find(p => p.provider === conversation.provider);
 		if (validProvider) return;
 		conversation.provider = randomPick(providers)?.provider;

 <script lang="ts">
 	import type { Conversation } from "$lib/types";
 	import { randomPick } from "$lib/utils/array";
 	import { cn } from "$lib/utils/cn";
 	import { createSelect, createSync } from "@melt-ui/svelte";
 	export { classes as class };
 	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
 		const validProvider = providers.find(p => p.provider === conversation.provider);
 		if (validProvider) return;
 		conversation.provider = randomPick(providers)?.provider;

src/lib/stores/session.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { browser } from "$app/environment";
 import { goto } from "$app/navigation";
 import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
 import { models } from "$lib/stores/models";
@@ -44,7 +43,7 @@ function createSessionStore() {
 		const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
 		// Parse URL query parameters
-		const searchParams = new URLSearchParams(browser ? window.location.search : undefined);
 		const searchProviders = searchParams.getAll("provider");
 		const searchModelIds = searchParams.getAll("modelId");
 		const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
@@ -62,14 +61,12 @@ function createSessionStore() {
 			conversations: [defaultConversation],
 		};
-		if (browser) {
-			const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
-			if (savedData) {
-				const parsed = safeParse(savedData);
-				const res = typia.validate<Session>(parsed);
-				if (res.success) savedSession = parsed;
-				else localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
-			}
 		}
 		// Merge query params with savedSession.
@@ -100,12 +97,10 @@ function createSessionStore() {
 			const s = cb($s);
 			// Save to localStorage
-			if (browser) {
-				try {
-					localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(s));
-				} catch (e) {
-					console.error("Failed to save session to localStorage:", e);
-				}
 			}
 			// Update URL query parameters
@@ -137,9 +132,7 @@ function createSessionStore() {
 	// Add a method to clear localStorage
 	const clearSavedSession = () => {
-		if (browser) {
-			localStorage.removeItem(LOCAL_STORAGE_KEY);
-		}
 	};
 	return { ...store, set, update, clearSavedSession };

 import { goto } from "$app/navigation";
 import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
 import { models } from "$lib/stores/models";
 		const defaultModel = featured[0] ?? $models[0] ?? emptyModel;
 		// Parse URL query parameters
+		const searchParams = new URLSearchParams(window.location.search);
 		const searchProviders = searchParams.getAll("provider");
 		const searchModelIds = searchParams.getAll("modelId");
 		const modelsFromSearch = searchModelIds.map(id => $models.find(model => model.id === id)).filter(Boolean);
 			conversations: [defaultConversation],
 		};
+		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
+		if (savedData) {
+			const parsed = safeParse(savedData);
+			const res = typia.validate<Session>(parsed);
+			if (res.success) savedSession = parsed;
+			else localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(savedSession));
 		}
 		// Merge query params with savedSession.
 			const s = cb($s);
 			// Save to localStorage
+			try {
+				localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify(s));
+			} catch (e) {
+				console.error("Failed to save session to localStorage:", e);
 			}
 			// Update URL query parameters
 	// Add a method to clear localStorage
 	const clearSavedSession = () => {
+		localStorage.removeItem(LOCAL_STORAGE_KEY);
 	};
 	return { ...store, set, update, clearSavedSession };

src/lib/stores/token.ts CHANGED Viewed

@@ -1,4 +1,3 @@
-import { browser } from "$app/environment";
 import { writable } from "svelte/store";
 const key = "hf_token";
@@ -13,11 +12,9 @@ function createTokenStore() {
 		});
 	}
-	if (browser) {
-		const storedHfToken = localStorage.getItem(key);
-		if (storedHfToken !== null) {
-			setValue(JSON.parse(storedHfToken));
-		}
 	}
 	return {

 import { writable } from "svelte/store";
 const key = "hf_token";
 		});
 	}
+	const storedHfToken = localStorage.getItem(key);
+	if (storedHfToken !== null) {
+		setValue(JSON.parse(storedHfToken));
 	}
 	return {

src/lib/utils/store.ts CHANGED Viewed

@@ -1,9 +1,5 @@
-import { browser } from "$app/environment";
-import { page } from "$app/stores";
-import { readable, type Writable } from "svelte/store";
 export function partialSet<T extends Record<string, unknown>>(store: Writable<T>, partial: Partial<T>) {
 	store.update(s => ({ ...s, ...partial }));
 }
-export const safePage = browser ? page : readable(undefined);

+import { type Writable } from "svelte/store";
 export function partialSet<T extends Record<string, unknown>>(store: Writable<T>, partial: Partial<T>) {
 	store.update(s => ({ ...s, ...partial }));
 }

src/routes/+layout.ts ADDED Viewed

	@@ -0,0 +1 @@


1	+ export const ssr = false;

src/routes/+page.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+import type { ModelWithTokenizer } from "$lib/types";
+import type { PageLoad } from "./$types";
+export const load: PageLoad = async ({ fetch }) => {
+	const res = await fetch("/api/models");
+	const models: ModelWithTokenizer[] = await res.json();
+	return { models };
+};

src/routes/{+page.server.ts → api/models/+server.ts} RENAMED Viewed

@@ -1,17 +1,20 @@
 import { env } from "$env/dynamic/private";
 import type { Model, ModelWithTokenizer } from "$lib/types";
-import type { PageServerLoad } from "./$types";
-let cache: { models: ModelWithTokenizer[] } | undefined;
-export const load: PageServerLoad = async ({ fetch }) => {
-	if (cache) {
 		console.log("Skipping load, using in memory cache");
-		return cache;
 	}
 	const apiUrl =
 		"https://huggingface.co/api/models?pipeline_tag=text-generation&filter=conversational&inference_provider=all&limit=100&expand[]=inferenceProviderMapping&expand[]=config&expand[]=library_name&expand[]=pipeline_tag&expand[]=tags&expand[]=mask_token&expand[]=trendingScore";
 	const HF_TOKEN = env.HF_TOKEN;
 	const res = await fetch(apiUrl, {
@@ -19,10 +22,12 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			Authorization: `Bearer ${HF_TOKEN}`,
 		},
 	});
 	if (!res.ok) {
 		console.error(`Error fetching warm models`, res.status, res.statusText);
-		return { models: [] };
 	}
 	const compatibleModels: Model[] = await res.json();
 	compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
@@ -33,16 +38,18 @@ export const load: PageServerLoad = async ({ fetch }) => {
 				Authorization: `Bearer ${HF_TOKEN}`,
 			},
 		});
 		if (!res.ok) {
 			console.error(`Error fetching tokenizer file for ${model.id}`, res.status, res.statusText);
 			return null; // Ignore failed requests by returning null
 		}
 		const tokenizerConfig = await res.json();
 		return { ...model, tokenizerConfig } satisfies ModelWithTokenizer;
 	});
 	const models: ModelWithTokenizer[] = (await Promise.all(promises)).filter(model => model !== null);
-	cache = { models };
-	return { models };
 };

 import { env } from "$env/dynamic/private";
 import type { Model, ModelWithTokenizer } from "$lib/types";
+import { json } from "@sveltejs/kit";
+import type { RequestHandler } from "./$types";
+import { dev } from "$app/environment";
+let cache: ModelWithTokenizer[] | undefined;
+export const GET: RequestHandler = async ({ fetch }) => {
+	if (cache && dev) {
 		console.log("Skipping load, using in memory cache");
+		return json(cache);
 	}
 	const apiUrl =
 		"https://huggingface.co/api/models?pipeline_tag=text-generation&filter=conversational&inference_provider=all&limit=100&expand[]=inferenceProviderMapping&expand[]=config&expand[]=library_name&expand[]=pipeline_tag&expand[]=tags&expand[]=mask_token&expand[]=trendingScore";
 	const HF_TOKEN = env.HF_TOKEN;
 	const res = await fetch(apiUrl, {
 			Authorization: `Bearer ${HF_TOKEN}`,
 		},
 	});
 	if (!res.ok) {
 		console.error(`Error fetching warm models`, res.status, res.statusText);
+		return json({ models: [] });
 	}
 	const compatibleModels: Model[] = await res.json();
 	compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 				Authorization: `Bearer ${HF_TOKEN}`,
 			},
 		});
 		if (!res.ok) {
 			console.error(`Error fetching tokenizer file for ${model.id}`, res.status, res.statusText);
 			return null; // Ignore failed requests by returning null
 		}
 		const tokenizerConfig = await res.json();
 		return { ...model, tokenizerConfig } satisfies ModelWithTokenizer;
 	});
 	const models: ModelWithTokenizer[] = (await Promise.all(promises)).filter(model => model !== null);
+	cache = models;
+	return json(cache);
 };