fix structured output detection

Author: TGlide

src/lib/components/inference-playground/code-snippets.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { type ConversationClass } from "$lib/state/conversations.svelte";
-	import { structuredForbiddenProviders } from "$lib/state/models.svelte";
 	import { token } from "$lib/state/token.svelte.js";
 	import { billing } from "$lib/state/billing.svelte";
 	import { isCustomModel } from "$lib/types.js";
@@ -59,7 +58,7 @@
 			// eslint-disable-next-line @typescript-eslint/no-explicit-any
 		} as any;
 		// eslint-disable-next-line @typescript-eslint/no-explicit-any
-		if (data.structuredOutput && !structuredForbiddenProviders.includes(conversation.data.provider as any)) {
+		if (data.structuredOutput && conversation.isStructuredOutputAllowed) {
 			opts.structured_output = data.structuredOutput;
 		}
 

src/lib/components/inference-playground/generation-config.svelte

@@ -1,14 +1,13 @@
 <script lang="ts">
 	import type { ConversationClass } from "$lib/state/conversations.svelte.js";
-	import { structuredForbiddenProviders } from "$lib/state/models.svelte.js";
 	import { maxAllowedTokens } from "$lib/utils/business.svelte.js";
+	import { cn } from "$lib/utils/cn.js";
 	import { isNumber } from "$lib/utils/is.js";
 	import { watch } from "runed";
 	import IconX from "~icons/carbon/close";
+	import ExtraParamsModal, { openExtraParamsModal } from "./extra-params-modal.svelte";
 	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generation-config-settings.js";
 	import StructuredOutputModal, { openStructuredOutputModal } from "./structured-output-modal.svelte";
-	import ExtraParamsModal, { openExtraParamsModal } from "./extra-params-modal.svelte";
-	import { cn } from "$lib/utils/cn.js";
 
 	interface Props {
 		conversation: ConversationClass;
@@ -103,7 +102,7 @@
 	</label>
 
 	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
-	{#if !structuredForbiddenProviders.includes(conversation.data.provider as any)}
+	{#if conversation.isStructuredOutputAllowed}
 		<label class="mt-2 flex cursor-pointer items-center justify-between" for="structured-output">
 			<span class="text-sm font-medium text-gray-900 dark:text-gray-300">Structured Output</span>
 			<div class="flex items-center gap-2">

src/lib/state/conversations.svelte.ts

@@ -4,10 +4,10 @@ import {
 } from "$lib/components/inference-playground/generation-config-settings.js";
 import { addToast } from "$lib/components/toaster.svelte.js";
 import { AbortManager } from "$lib/spells/abort-manager.svelte";
-import { PipelineTag, Provider, type ConversationMessage, type GenerationStatistics, type Model } from "$lib/types.js";
+import { PipelineTag, type ConversationMessage, type GenerationStatistics, type Model } from "$lib/types.js";
 import { handleNonStreamingResponse, handleStreamingResponse, estimateTokens } from "$lib/utils/business.svelte.js";
 import { omit, snapshot } from "$lib/utils/object.svelte";
-import { models, structuredForbiddenProviders } from "./models.svelte";
+import { models } from "./models.svelte";
 import { pricing } from "./pricing.svelte.js";
 import { DEFAULT_PROJECT_ID, ProjectEntity, projects } from "./projects.svelte";
 import { token } from "./token.svelte";
@@ -107,9 +107,7 @@ export class ConversationClass {
 	}
 
 	get isStructuredOutputAllowed() {
-		const forbiddenProvider =
-			this.data.provider && structuredForbiddenProviders.includes(this.data.provider as Provider);
-		return !forbiddenProvider;
+		return models.supportsStructuredOutput(this.model, this.data.provider);
 	}
 
 	get isStructuredOutputEnabled() {

src/lib/state/models.svelte.ts

@@ -1,5 +1,5 @@
 import { page } from "$app/state";
-import { Provider, type CustomModel } from "$lib/types.js";
+import { Provider, 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";
@@ -10,13 +10,6 @@ const LOCAL_STORAGE_KEY = "hf_inference_playground_custom_models";
 
 const pageData = $derived(page.data as PageData);
 
-export const structuredForbiddenProviders: Provider[] = [
-	Provider.Hyperbolic,
-	Provider.Nebius,
-	Provider.Novita,
-	Provider.Sambanova,
-];
-
 class Models {
 	remote = $derived(pageData.models);
 	trending = $derived(this.remote.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, 5));
@@ -74,6 +67,13 @@ class Models {
 			c.update({ modelId: randomPick(models.trending)?.id });
 		});
 	}
+
+	supportsStructuredOutput(model: Model | CustomModel, provider?: string) {
+		if (typia.is<CustomModel>(model)) return true;
+		const routerDataEntry = pageData.routerData.data.find(d => d.id === model.id);
+		if (!routerDataEntry) return false;
+		return routerDataEntry.providers.find(p => p.provider === provider)?.supports_structured_output ?? false;
+	}
 }
 
 export const models = new Models();

src/lib/utils/business.svelte.ts

@@ -28,8 +28,8 @@ import { AutoTokenizer, PreTrainedTokenizer } from "@huggingface/transformers";
 import OpenAI from "openai";
 import { images } from "$lib/state/images.svelte.js";
 import { projects } from "$lib/state/projects.svelte.js";
-import { structuredForbiddenProviders } from "$lib/state/models.svelte.js";
 import { modifySnippet } from "$lib/utils/snippets.js";
+import { models } from "$lib/state/models.svelte";
 
 type ChatCompletionInputMessageChunk =
 	NonNullable<ChatCompletionInputMessage["content"]> extends string | (infer U)[] ? U : never;
@@ -89,7 +89,7 @@ function getResponseFormatObj(conversation: ConversationClass | Conversation) {
 	const data = conversation instanceof ConversationClass ? conversation.data : conversation;
 	const json = safeParse(data.structuredOutput?.schema ?? "");
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	if (json && data.structuredOutput?.enabled && !structuredForbiddenProviders.includes(data.provider as any)) {
+	if (json && data.structuredOutput?.enabled && models.supportsStructuredOutput(conversation.model, data.provider)) {
 		switch (data.provider) {
 			case "cohere": {
 				return {
@@ -366,7 +366,7 @@ export function getInferenceSnippet(
 			if (
 				opts?.structured_output?.schema &&
 				opts.structured_output.enabled &&
-				!structuredForbiddenProviders.includes(provider as Provider)
+				models.supportsStructuredOutput(conversation.model, provider)
 			) {
 				return {
 					...s,

src/routes/+page.ts

@@ -1,14 +1,44 @@
+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();
+	const routerData = (await routerRes.json()) as RouterData;
 
 	return {
 		...models,