feat: add link to API playground for compatible models (#1488)

* feat: add link to API playground for compatible models

* fix: move buttons to correct spot

* fix: inference API placement button

src/lib/components/ModelCardMetadata.svelte

@@ -2,9 +2,13 @@
 	import CarbonEarth from "~icons/carbon/earth";
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 	import BIMeta from "~icons/bi/meta";
+	import CarbonCode from "~icons/carbon/code";
 	import type { Model } from "$lib/types/Model";
 
-	export let model: Pick<Model, "name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl">;
+	export let model: Pick<
+		Model,
+		"name" | "datasetName" | "websiteUrl" | "modelUrl" | "datasetUrl" | "hasInferenceAPI"
+	>;
 
 	export let variant: "light" | "dark" = "light";
 </script>
@@ -35,6 +39,16 @@
 			<div class="max-sm:hidden">&nbsp;page</div></a
 		>
 	{/if}
+	{#if model.hasInferenceAPI}
+		<a
+			href={"https://huggingface.co/playground?modelId=" + model.name}
+			target="_blank"
+			rel="noreferrer"
+			class="flex items-center hover:underline"
+			><CarbonCode class="mr-1.5 shrink-0 text-xs text-gray-400" />
+			API
+		</a>
+	{/if}
 	{#if model.websiteUrl}
 		<a
 			href={model.websiteUrl}

src/lib/server/models.ts

@@ -13,6 +13,7 @@ import JSON5 from "json5";
 import { getTokenizer } from "$lib/utils/getTokenizer";
 import { logger } from "$lib/server/logger";
 import { ToolResultStatus, type ToolInput } from "$lib/types/Tool";
+import { isHuggingChat } from "$lib/utils/isHuggingChat";
 
 type Optional<T, K extends keyof T> = Pick<Partial<T>, K> & Omit<T, K>;
 
@@ -253,10 +254,6 @@ const processModel = async (m: z.infer<typeof modelConfig>) => ({
 	parameters: { ...m.parameters, stop_sequences: m.parameters?.stop },
 });
 
-export type ProcessedModel = Awaited<ReturnType<typeof processModel>> & {
-	getEndpoint: () => Promise<Endpoint>;
-};
-
 const addEndpoint = (m: Awaited<ReturnType<typeof processModel>>) => ({
 	...m,
 	getEndpoint: async (): Promise<Endpoint> => {
@@ -316,10 +313,40 @@ const addEndpoint = (m: Awaited<ReturnType<typeof processModel>>) => ({
 	},
 });
 
-export const models: ProcessedModel[] = await Promise.all(
-	modelsRaw.map((e) => processModel(e).then(addEndpoint))
+const hasInferenceAPI = async (m: Awaited<ReturnType<typeof processModel>>) => {
+	if (!isHuggingChat) {
+		return false;
+	}
+
+	const r = await fetch(`https://huggingface.co/api/models/${m.id}`);
+
+	if (!r.ok) {
+		logger.warn(`Failed to check if ${m.id} has inference API: ${r.statusText}`);
+		return false;
+	}
+
+	const json = await r.json();
+
+	if (json.cardData.inference === false) {
+		return false;
+	}
+
+	return true;
+};
+
+export const models = await Promise.all(
+	modelsRaw.map((e) =>
+		processModel(e)
+			.then(addEndpoint)
+			.then(async (m) => ({
+				...m,
+				hasInferenceAPI: await hasInferenceAPI(m),
+			}))
+	)
 );
 
+export type ProcessedModel = (typeof models)[number];
+
 // super ugly but not sure how to make typescript happier
 export const validModelIdSchema = z.enum(models.map((m) => m.id) as [string, ...string[]]);
 
@@ -357,5 +384,5 @@ export const smallModel = env.TASK_MODEL
 
 export type BackendModel = Optional<
 	typeof defaultModel,
-	"preprompt" | "parameters" | "multimodal" | "unlisted" | "tools"
+	"preprompt" | "parameters" | "multimodal" | "unlisted" | "tools" | "hasInferenceAPI"
 >;

src/lib/types/Model.ts

@@ -18,4 +18,5 @@ export type Model = Pick<
 	| "multimodal"
 	| "unlisted"
 	| "tools"
+	| "hasInferenceAPI"
 >;

src/routes/+layout.server.ts

@@ -194,6 +194,7 @@ export const load: LayoutServerLoad = async ({ locals, depends, request }) => {
 				// disable tools on huggingchat android app
 				!request.headers.get("user-agent")?.includes("co.huggingface.chat_ui_android"),
 			unlisted: model.unlisted,
+			hasInferenceAPI: model.hasInferenceAPI,
 		})),
 		oldModels,
 		tools: [...toolFromConfigs, ...communityTools]

src/routes/api/models/+server.ts

@@ -19,6 +19,7 @@ export async function GET() {
 			multimodal: model.multimodal ?? false,
 			unlisted: model.unlisted ?? false,
 			tools: model.tools ?? false,
+			hasInferenceAPI: model.hasInferenceAPI ?? false,
 		}));
 	return Response.json(res);
 }

src/routes/settings/(nav)/[...model]/+page.svelte

@@ -9,6 +9,7 @@
 	import CarbonArrowUpRight from "~icons/carbon/arrow-up-right";
 	import CarbonLink from "~icons/carbon/link";
 	import CarbonChat from "~icons/carbon/chat";
+	import CarbonCode from "~icons/carbon/code";
 
 	import { goto } from "$app/navigation";
 
@@ -78,6 +79,19 @@
 				Model website
 			</a>
 		{/if}
+
+		{#if model.hasInferenceAPI}
+			<a
+				href={"https://huggingface.co/playground?modelId=" + model.name}
+				target="_blank"
+				rel="noreferrer"
+				class="flex items-center truncate underline underline-offset-2"
+			>
+				<CarbonCode class="mr-1.5 shrink-0 text-xs " />
+				API Playground
+			</a>
+		{/if}
+
 		<CopyToClipBoardBtn
 			value="{envPublic.PUBLIC_ORIGIN || $page.url.origin}{base}/models/{model.id}"
 			classNames="!border-none !shadow-none !py-0 !px-1 !rounded-md"