Pass inferenceProvider as mapping (#553)

* Pass inferenceProvider as mapping

* txt

* run formatter

* fix lint

* should fix lint

* go for it

* finally?

Author: Wauplin

README.md

@@ -398,43 +398,47 @@ The `InferenceSnippet` component is used to render an interactive interface for
 
 Below is a description of the props that can be passed to this component:
 
-- **modelId** (string, required):  
-  The identifier of the AI model to be used for inference. This should be a valid model ID, such as `"deepseek-ai/DeepSeek-R1"`.
-
 - **pipeline** (string, required):  
   Specifies the type of pipeline to be used for inference. Common values include `"text-generation"`, `"text-classification"`, etc.
 
+- **providersMapping** (mapping of {modelId: string, providerModelId: string}, required):  
+  A mapping which keys are provider names and values are objects with `modelId` and `providerModelId`.
+  Example: `{"fireworks-ai": {modelId: "deepseek-ai/DeepSeek-R1", providerModelId: "accounts/fireworks/models/deepseek-r1", novita: {modelId: "deepseek-ai/DeepSeek-V3-0324", providerModelId: "deepseek/deepseek-v3-0324"}}`
+
 - **conversational** (boolean, optional):  
   If set to `true`, the component will enable conversational mode, allowing for multi-turn interactions for `text-generation` models.
 
-- **providers** (array of strings, required):  
-  A list of provider names that support the specified model and pipeline. Example: `["fireworks-ai", "cerebras", "cohere", "hyperbolic"]`.
-
 #### Example Usage
 
 ```svelte
 <InferenceSnippet
-	modelId="deepseek-ai/DeepSeek-R1"
 	pipeline="text-generation"
 	conversational
-	providers={["fireworks-ai", "cerebras", "cohere", "hyperbolic"]}
+	providersMapping={{
+    "fireworks-ai": {modelId: "deepseek-ai/DeepSeek-R1", providerModelId: "accounts/fireworks/models/deepseek-r1"},
+    novita: {modelId: "deepseek-ai/DeepSeek-V3-0324", providerModelId: "deepseek/deepseek-v3-0324"}
+  }}
 />
 ```
 
 ```svelte
 <InferenceSnippet
-	modelId="deepseek-ai/DeepSeek-R1"
 	pipeline="text-generation"
 	conversational
-	providers={["fireworks-ai"]}
+	providers={{
+    "fireworks-ai": {modelId: "deepseek-ai/DeepSeek-R1", providerModelId: "accounts/fireworks/models/deepseek-r1"}
+  }}
 />
 ```
 
 ```svelte
 <InferenceSnippet
-	modelId="black-forest-labs/FLUX.1-dev"
 	pipeline="text-to-image"
-	providers={["black-forest-labs", "replicate", "fal-ai"]}
+	providers={{
+    "black-forest-labs": {modelId: "black-forest-labs/FLUX.1-dev", providerModelId: "flux-dev"},
+    "replicate": {modelId: "black-forest-labs/FLUX.1-dev", providerModelId: "black-forest-labs/flux-dev"},
+    "fal-ai": {modelId: "black-forest-labs/FLUX.1-dev", providerModelId: "fal-ai/flux/dev"},
+  }}
 />
 ```
 

kit/src/lib/InferenceSnippet/InferenceSnippet.svelte

@@ -28,16 +28,26 @@
 	import Dropdown from "$lib/Dropdown.svelte";
 	import DropdownEntry from "$lib/DropdownEntry.svelte";
 
-	export let modelId: string;
+	type InferenceProviderNotOpenAI = Exclude<InferenceProvider, "openai">;
+
 	export let pipeline: PipelineType;
 	export let conversational = false;
-	export let providers: Exclude<InferenceProvider, "openai">[] = [];
+	export let providersMapping: Partial<
+		Record<
+			InferenceProviderNotOpenAI,
+			{
+				modelId: string;
+				providerModelId: string;
+			}
+		>
+	> = {};
 
+	let providers = Object.keys(providersMapping) as InferenceProviderNotOpenAI[];
 	let selectedProvider = providers[0];
 	let streaming = false;
 
 	const model = {
-		id: modelId,
+		id: providersMapping[selectedProvider]!.modelId,
 		pipeline_tag: pipeline,
 		tags: conversational ? ["conversational"] : [],
 	};
@@ -46,7 +56,8 @@
 	const availableSnippets = snippets.getInferenceSnippets(
 		model as ModelDataMinimal,
 		accessToken,
-		selectedProvider
+		selectedProvider,
+		providersMapping[selectedProvider]!.providerModelId
 	);
 	const languages = [...new Set(availableSnippets.map((s) => s.language))];
 	let selectedLanguage = languages[0];
@@ -60,15 +71,18 @@
 	$: selectedClient = clients?.[0];
 
 	$: code = snippets
-		.getInferenceSnippets(model as ModelDataMinimal, accessToken, selectedProvider, undefined, {
-			streaming,
-		})
+		.getInferenceSnippets(
+			model as ModelDataMinimal,
+			accessToken,
+			selectedProvider,
+			providersMapping[selectedProvider]!.providerModelId,
+			{
+				streaming,
+			}
+		)
 		.find((s) => s.language === selectedLanguage && s.client === selectedClient)?.content;
 
-	const PRETTY_NAMES: Record<
-		Exclude<InferenceProvider, "openai"> | InferenceSnippetLanguage,
-		string
-	> = {
+	const PRETTY_NAMES: Record<InferenceProviderNotOpenAI | InferenceSnippetLanguage, string> = {
 		// inference providers
 		"black-forest-labs": "Black Forest Labs",
 		cerebras: "Cerebras",
@@ -90,7 +104,7 @@
 	};
 
 	const ICONS: Record<
-		Exclude<InferenceProvider, "openai"> | InferenceSnippetLanguage,
+		InferenceProviderNotOpenAI | InferenceSnippetLanguage,
 		new (...args: any) => SvelteComponent
 	> = {
 		// inference providers

kit/src/lib/InferenceSnippet/README.md

@@ -6,43 +6,59 @@ The `InferenceSnippet` component is used to render an interactive interface for
 
 Below is a description of the props that can be passed to this component:
 
-- **modelId** (string, required):  
-  The identifier of the AI model to be used for inference. This should be a valid model ID, such as `"deepseek-ai/DeepSeek-R1"`.
-
 - **pipeline** (string, required):  
   Specifies the type of pipeline to be used for inference. Common values include `"text-generation"`, `"text-classification"`, etc.
 
+- **providersMapping** (mapping of {modelId: string, providerModelId: string}, required):  
+  A mapping which keys are provider names and values are objects with `modelId` and `providerModelId`.
+  Example: `{"fireworks-ai": {modelId: "deepseek-ai/DeepSeek-R1", providerModelId: "accounts/fireworks/models/deepseek-r1", novita: {modelId: "deepseek-ai/DeepSeek-V3-0324", providerModelId: "deepseek/deepseek-v3-0324"}}`
+
 - **conversational** (boolean, optional):  
   If set to `true`, the component will enable conversational mode, allowing for multi-turn interactions for `text-generation` models.
 
-- **providers** (array of strings, required):  
-  A list of provider names that support the specified model and pipeline. Example: `["fireworks-ai", "cerebras", "cohere", "hyperbolic"]`.
-
 #### Example Usage
 
 ```svelte
 <InferenceSnippet
-	modelId="deepseek-ai/DeepSeek-R1"
 	pipeline="text-generation"
 	conversational
-	providers={["fireworks-ai", "cerebras", "cohere", "hyperbolic"]}
+	providersMapping={{
+		"fireworks-ai": {
+			modelId: "deepseek-ai/DeepSeek-R1",
+			providerModelId: "accounts/fireworks/models/deepseek-r1",
+		},
+		novita: {
+			modelId: "deepseek-ai/DeepSeek-V3-0324",
+			providerModelId: "deepseek/deepseek-v3-0324",
+		},
+	}}
 />
 ```
 
 ```svelte
 <InferenceSnippet
-	modelId="deepseek-ai/DeepSeek-R1"
 	pipeline="text-generation"
 	conversational
-	providers={["fireworks-ai"]}
+	providers={{
+		"fireworks-ai": {
+			modelId: "deepseek-ai/DeepSeek-R1",
+			providerModelId: "accounts/fireworks/models/deepseek-r1",
+		},
+	}}
 />
 ```
 
 ```svelte
 <InferenceSnippet
-	modelId="black-forest-labs/FLUX.1-dev"
 	pipeline="text-to-image"
-	providers={["black-forest-labs", "replicate", "fal-ai"]}
+	providers={{
+		"black-forest-labs": { modelId: "black-forest-labs/FLUX.1-dev", providerModelId: "flux-dev" },
+		replicate: {
+			modelId: "black-forest-labs/FLUX.1-dev",
+			providerModelId: "black-forest-labs/flux-dev",
+		},
+		"fal-ai": { modelId: "black-forest-labs/FLUX.1-dev", providerModelId: "fal-ai/flux/dev" },
+	}}
 />
 ```