switch models api route to use remote functions

src/{routes/api/models/+server.ts → lib/remote/models.remote.ts}

@@ -1,6 +1,40 @@
-import type { Model } from "$lib/types.js";
-import { json } from "@sveltejs/kit";
-import type { RequestHandler } from "./$types.js";
+import { query } from "$app/server";
+import type { Provider, Model } from "$lib/types.js";
+import { debugError, debugLog } from "$lib/utils/debug.js";
+
+export type RouterData = {
+	object: string;
+	data: Datum[];
+};
+
+type Datum = {
+	id: string;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	object: any;
+	created: number;
+	owned_by: string;
+	providers: ProviderElement[];
+};
+
+type ProviderElement = {
+	provider: Provider;
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	status: any;
+	context_length?: number;
+	pricing?: Pricing;
+	supports_tools?: boolean;
+	supports_structured_output?: boolean;
+};
+
+type Pricing = {
+	input: number;
+	output: number;
+};
+
+export const getRouterData = query(async (): Promise<RouterData> => {
+	const res = await fetch("https://router.huggingface.co/v1/models");
+	return res.json();
+});
 
 enum CacheStatus {
 	SUCCESS = "success",
@@ -12,8 +46,7 @@ type Cache = {
 	data: Model[] | undefined;
 	timestamp: number;
 	status: CacheStatus;
-	// Track failed models to selectively refetch them
-	failedTokenizers: string[]; // Using array instead of Set for serialization compatibility
+	failedTokenizers: string[];
 	failedApiCalls: {
 		textGeneration: boolean;
 		imageTextToText: boolean;
@@ -31,9 +64,8 @@ const cache: Cache = {
 	},
 };
 
-// The time between cache refreshes
 const FULL_CACHE_REFRESH = 1000 * 60 * 60; // 1 hour
-const PARTIAL_CACHE_REFRESH = 1000 * 60 * 15; // 15 minutes (shorter for partial results)
+const PARTIAL_CACHE_REFRESH = 1000 * 60 * 15; // 15 minutes
 
 const headers: HeadersInit = {
 	"Upgrade-Insecure-Requests": "1",
@@ -73,14 +105,12 @@ const baseUrl = "https://huggingface.co/api/models";
 function buildApiUrl(params: ApiQueryParams): string {
 	const url = new URL(baseUrl);
 
-	// Add simple params
 	Object.entries(params).forEach(([key, value]) => {
 		if (!Array.isArray(value) && value !== undefined) {
 			url.searchParams.append(key, String(value));
 		}
 	});
 
-	// Handle array params specially
 	params.expand.forEach(item => {
 		url.searchParams.append("expand[]", item);
 	});
@@ -88,10 +118,7 @@ function buildApiUrl(params: ApiQueryParams): string {
 	return url.toString();
 }
 
-async function fetchAllModelsWithPagination(
-	pipeline_tag: "text-generation" | "image-text-to-text",
-	fetch: typeof globalThis.fetch,
-): Promise<Model[]> {
+async function fetchAllModelsWithPagination(pipeline_tag: "text-generation" | "image-text-to-text"): Promise<Model[]> {
 	const allModels: Model[] = [];
 	let skip = 0;
 	const batchSize = 1000;
@@ -113,46 +140,33 @@ async function fetchAllModelsWithPagination(
 		const models: Model[] = await response.json();
 
 		if (models.length === 0) {
-			break; // No more models to fetch
+			break;
 		}
 
 		allModels.push(...models);
 		skip += batchSize;
 
-		// Optional: Add a small delay to be respectful to the API
 		await new Promise(resolve => setTimeout(resolve, 100));
 	}
 
 	return allModels;
 }
 
-export type ApiModelsResponse = {
-	models: Model[];
-};
-
-function createResponse(data: ApiModelsResponse): Response {
-	return json(data);
-}
-
-export const GET: RequestHandler = async ({ fetch }) => {
+export const getModels = query(async (): Promise<Model[]> => {
 	const timestamp = Date.now();
 
-	// Determine if cache is valid
 	const elapsed = timestamp - cache.timestamp;
 	const cacheRefreshTime = cache.status === CacheStatus.SUCCESS ? FULL_CACHE_REFRESH : PARTIAL_CACHE_REFRESH;
 
-	// Use cache if it's still valid and has data
 	if (elapsed < cacheRefreshTime && cache.data?.length) {
-		console.log(`Using ${cache.status} cache (${Math.floor(elapsed / 1000 / 60)} min old)`);
-		return createResponse({ models: cache.data });
+		debugLog(`Using ${cache.status} cache (${Math.floor(elapsed / 1000 / 60)} min old)`);
+		return cache.data;
 	}
 
 	try {
-		// Determine which API calls we need to make based on cache status
 		const needTextGenFetch = elapsed >= FULL_CACHE_REFRESH || cache.failedApiCalls.textGeneration;
 		const needImgTextFetch = elapsed >= FULL_CACHE_REFRESH || cache.failedApiCalls.imageTextToText;
 
-		// Track the existing models we'll keep
 		const existingModels = new Map<string, Model>();
 		if (cache.data) {
 			cache.data.forEach(model => {
@@ -160,27 +174,24 @@ export const GET: RequestHandler = async ({ fetch }) => {
 			});
 		}
 
-		// Initialize new tracking for failed requests
 		const newFailedTokenizers: string[] = [];
 		const newFailedApiCalls = {
 			textGeneration: false,
 			imageTextToText: false,
 		};
 
-		// Fetch models as needed
 		let textGenModels: Model[] = [];
 		let imgText2TextModels: Model[] = [];
 
-		// Make the needed API calls in parallel
 		const apiPromises: Promise<void>[] = [];
 		if (needTextGenFetch) {
 			apiPromises.push(
-				fetchAllModelsWithPagination("text-generation", fetch)
+				fetchAllModelsWithPagination("text-generation")
 					.then(models => {
 						textGenModels = models;
 					})
 					.catch(error => {
-						console.error(`Error fetching text-generation models:`, error);
+						debugError(`Error fetching text-generation models:`, error);
 						newFailedApiCalls.textGeneration = true;
 					}),
 			);
@@ -188,12 +199,12 @@ export const GET: RequestHandler = async ({ fetch }) => {
 
 		if (needImgTextFetch) {
 			apiPromises.push(
-				fetchAllModelsWithPagination("image-text-to-text", fetch)
+				fetchAllModelsWithPagination("image-text-to-text")
 					.then(models => {
 						imgText2TextModels = models;
 					})
 					.catch(error => {
-						console.error(`Error fetching image-text-to-text models:`, error);
+						debugError(`Error fetching image-text-to-text models:`, error);
 						newFailedApiCalls.imageTextToText = true;
 					}),
 			);
@@ -201,7 +212,6 @@ export const GET: RequestHandler = async ({ fetch }) => {
 
 		await Promise.all(apiPromises);
 
-		// If both needed API calls failed and we have cached data, use it
 		if (
 			needTextGenFetch &&
 			newFailedApiCalls.textGeneration &&
@@ -209,14 +219,13 @@ export const GET: RequestHandler = async ({ fetch }) => {
 			newFailedApiCalls.imageTextToText &&
 			cache.data?.length
 		) {
-			console.log("All API requests failed. Using existing cache as fallback.");
+			debugLog("All API requests failed. Using existing cache as fallback.");
 			cache.status = CacheStatus.ERROR;
-			cache.timestamp = timestamp; // Update timestamp to avoid rapid retry loops
+			cache.timestamp = timestamp;
 			cache.failedApiCalls = newFailedApiCalls;
-			return createResponse({ models: cache.data });
+			return cache.data;
 		}
 
-		// For API calls we didn't need to make, use cached models
 		if (!needTextGenFetch && cache.data) {
 			textGenModels = cache.data.filter(model => model.pipeline_tag === "text-generation").map(model => model as Model);
 		}
@@ -232,9 +241,7 @@ export const GET: RequestHandler = async ({ fetch }) => {
 		);
 		models.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 
-		// Determine cache status based on failures
 		const hasApiFailures = newFailedApiCalls.textGeneration || newFailedApiCalls.imageTextToText;
-
 		const cacheStatus = hasApiFailures ? CacheStatus.PARTIAL : CacheStatus.SUCCESS;
 
 		cache.data = models;
@@ -243,34 +250,31 @@ export const GET: RequestHandler = async ({ fetch }) => {
 		cache.failedTokenizers = newFailedTokenizers;
 		cache.failedApiCalls = newFailedApiCalls;
 
-		console.log(
+		debugLog(
 			`Cache updated: ${models.length} models, status: ${cacheStatus}, ` +
 				`failed tokenizers: ${newFailedTokenizers.length}, ` +
 				`API failures: text=${newFailedApiCalls.textGeneration}, img=${newFailedApiCalls.imageTextToText}`,
 		);
 
-		return createResponse({ models });
+		return models;
 	} catch (error) {
-		console.error("Error fetching models:", error);
+		debugError("Error fetching models:", error);
 
-		// If we have cached data, use it as fallback
 		if (cache.data?.length) {
 			cache.status = CacheStatus.ERROR;
-			// Mark all API calls as failed so we retry them next time
 			cache.failedApiCalls = {
 				textGeneration: true,
 				imageTextToText: true,
 			};
-			return createResponse({ models: cache.data });
+			return cache.data;
 		}
 
-		// No cache available, return empty array
 		cache.status = CacheStatus.ERROR;
 		cache.timestamp = timestamp;
 		cache.failedApiCalls = {
 			textGeneration: true,
 			imageTextToText: true,
 		};
-		return createResponse({ models: [] });
+		return [];
 	}
-};
+});

src/lib/state/models.svelte.ts

@@ -1,22 +1,27 @@
-import { page } from "$app/state";
 import { type CustomModel, type Model } from "$lib/types.js";
 import { edit, randomPick } from "$lib/utils/array.js";
 import { safeParse } from "$lib/utils/json.js";
 import typia from "typia";
-import type { PageData } from "../../routes/$types.js";
 import { conversations } from "./conversations.svelte";
+import { getModels, getRouterData, type RouterData } from "$lib/remote/models.remote";
 
 const LOCAL_STORAGE_KEY = "hf_inference_playground_custom_models";
 
-const pageData = $derived(page.data as PageData);
-
 class Models {
-	remote = $derived(pageData.models);
+	routerData = $state<RouterData>();
+	remote: Model[] = $state([]);
 	trending = $derived(this.remote.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));
 	nonTrending = $derived(this.remote.filter(m => !this.trending.includes(m)));
 	all = $derived([...this.remote, ...this.custom]);
 
 	constructor() {
+		getModels().then(models => {
+			this.remote = models;
+		});
+		getRouterData().then(data => {
+			this.routerData = data;
+		});
+
 		const savedData = localStorage.getItem(LOCAL_STORAGE_KEY);
 		if (!savedData) return;
 
@@ -69,8 +74,9 @@ class Models {
 	}
 
 	supportsStructuredOutput(model: Model | CustomModel, provider?: string) {
+		if (!this.routerData) return false;
 		if (typia.is<CustomModel>(model)) return true;
-		const routerDataEntry = pageData.routerData.data.find(d => d.id === model.id);
+		const routerDataEntry = this.routerData?.data.find(d => d.id === model.id);
 		if (!routerDataEntry) return false;
 		return routerDataEntry.providers.find(p => p.provider === provider)?.supports_structured_output ?? false;
 	}

src/lib/utils/debug.ts

@@ -0,0 +1,11 @@
+const DEBUG_LOG = true;
+
+export const debugLog = (...args: unknown[]) => {
+	if (!DEBUG_LOG) return;
+	console.log("[LOG DEBUG]", ...args);
+};
+
+export const debugError = (...args: unknown[]) => {
+	if (!DEBUG_LOG) return;
+	console.error("[LOG DEBUG]", ...args);
+};

src/routes/+page.ts

@@ -1,47 +0,0 @@
-import type { Provider } from "$lib/types.js";
-import type { PageLoad } from "./$types.js";
-import type { ApiModelsResponse } from "./api/models/+server.js";
-
-export type RouterData = {
-	object: string;
-	data: Datum[];
-};
-
-type Datum = {
-	id: string;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	object: any;
-	created: number;
-	owned_by: string;
-	providers: ProviderElement[];
-};
-
-type ProviderElement = {
-	provider: Provider;
-	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	status: any;
-	context_length?: number;
-	pricing?: Pricing;
-	supports_tools?: boolean;
-	supports_structured_output?: boolean;
-};
-
-type Pricing = {
-	input: number;
-	output: number;
-};
-
-export const load: PageLoad = async ({ fetch }) => {
-	const [modelsRes, routerRes] = await Promise.all([
-		fetch("/api/models"),
-		fetch("https://router.huggingface.co/v1/models"),
-	]);
-
-	const models: ApiModelsResponse = await modelsRes.json();
-	const routerData = (await routerRes.json()) as RouterData;
-
-	return {
-		...models,
-		routerData,
-	};
-};

svelte.config.js

@@ -12,6 +12,9 @@ const config = {
 		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter(),
+		experimental: {
+			remoteFunctions: true,
+		},
 	},
 
 	compilerOptions: {