refactor: use client API for spaces-config endpoint

Author: nsarrazin

src/lib/server/api/routes/groups/misc.ts

@@ -4,6 +4,7 @@ import { requiresUser } from "$lib/server/auth";
 import { collections } from "$lib/server/database";
 import { authCondition } from "$lib/server/auth";
 import { config } from "$lib/server/config";
+import { Client } from "@gradio/client";
 
 export interface FeatureFlags {
 	searchEnabled: boolean;
@@ -16,6 +17,8 @@ export interface FeatureFlags {
 	isAdmin: boolean;
 }
 
+export type ApiReturnType = Awaited<ReturnType<typeof Client.prototype.view_api>>;
+
 export const misc = new Elysia()
 	.use(authPlugin)
 	.get("/public-config", async () => config.getPublicConfig())
@@ -71,7 +74,33 @@ export const misc = new Elysia()
 			isAdmin: locals.isAdmin,
 		} satisfies FeatureFlags;
 	})
-	.get("/spaces-config", () => {
-		// todo: get spaces config
-		return;
+	.get("/spaces-config", async ({ query }) => {
+		if (config.COMMUNITY_TOOLS !== "true") {
+			throw new Error("Community tools are not enabled");
+		}
+
+		const space = query.space;
+
+		if (!space) {
+			throw new Error("Missing space");
+		}
+
+		// Extract namespace from space URL or use as-is if it's already in namespace format
+		let namespace = null;
+		if (space.startsWith("https://huggingface.co/spaces/")) {
+			namespace = space.split("/").slice(-2).join("/");
+		} else if (space.match(/^[^/]+\/[^/]+$/)) {
+			namespace = space;
+		}
+
+		if (!namespace) {
+			throw new Error("Invalid space name. Specify a namespace or a full URL on huggingface.co.");
+		}
+
+		try {
+			const api = await (await Client.connect(namespace)).view_api();
+			return api as ApiReturnType;
+		} catch (e) {
+			throw new Error("Error fetching space API. Is the name correct?");
+		}
 	});

src/lib/utils/getGradioApi.ts

@@ -8,14 +8,14 @@
 	import { browser } from "$app/environment";
 	import ToolLogo from "$lib/components/ToolLogo.svelte";
 	import { colors, icons } from "$lib/utils/tools";
-	import { getGradioApi } from "$lib/utils/getGradioApi";
 	import { goto } from "$app/navigation";
 	import { base } from "$app/paths";
 	import ToolInputComponent from "./ToolInputComponent.svelte";
 	import { error as errorStore } from "$lib/stores/errors";
 
 	import CarbonInformation from "~icons/carbon/information";
 	import { page } from "$app/state";
+	import { throwOnError, useAPIClient } from "$lib/APIClient";
 
 	interface Props {
 		tool?: CommunityToolEditable | undefined;
@@ -31,6 +31,9 @@
 
 	let APIloading = $state(false);
 	let formLoading = $state(false);
+
+	const client = useAPIClient();
+
 	const dispatch = createEventDispatcher<{ close: void }>();
 
 	onMount(async () => {
@@ -67,7 +70,13 @@
 
 		APIloading = true;
 
-		const api = await getGradioApi(editableTool.baseUrl);
+		const api = await client["spaces-config"]
+			.get({
+				query: {
+					space: editableTool.baseUrl,
+				},
+			})
+			.then(throwOnError);
 
 		const newInputs = api.named_endpoints[editableTool.endpoint].parameters.map((param, idx) => {
 			if (tool?.inputs[idx]?.name === param.parameter_name) {
@@ -319,7 +328,7 @@
 				{/if}
 
 				{#if editableTool.baseUrl}
-					{#await getGradioApi(spaceUrl)}
+					{#await client["spaces-config"].get({ query: { space: spaceUrl } }).then(throwOnError)}
 						<p class="text-sm text-gray-500">Loading...</p>
 					{:then api}
 						<div class="flex flex-row flex-wrap gap-4">
@@ -596,8 +605,8 @@
 								No endpoints found in this space. Try another one.
 							</p>
 						{/if}
-					{:catch error}
-						<p class="text-sm text-gray-500">{error}</p>
+					{:catch rejected}
+						<p class="text-sm text-gray-500">{JSON.parse(rejected.message).value}</p>
 					{/await}
 				{/if}
 			</div>