Merge pull request #1 from huggingface/list_currently_running_models

package.json

@@ -30,6 +30,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@huggingface/hub": "^0.15.1",
 		"@huggingface/inference": "^2.7.0",
 		"@tailwindcss/container-queries": "^0.1.1"
 	}

pnpm-lock.yaml

@@ -5,6 +5,9 @@ settings:
   excludeLinksFromLockfile: false
 
 dependencies:
+  '@huggingface/hub':
+    specifier: ^0.15.1
+    version: 0.15.1
   '@huggingface/inference':
     specifier: ^2.7.0
     version: 2.7.0
@@ -280,6 +283,14 @@ packages:
     dev: true
     optional: true
 
+  /@huggingface/[email protected]:
+    resolution: {integrity: sha512-uHb4aFkJDoGfLeRHfFTjkI36Z8IV6Z1c+KzhMDqUSC56opyr7Mn1Nsx7Rri/C7KDwROhQfBp/fOOqqjTzn6Cgg==}
+    engines: {node: '>=18'}
+    dependencies:
+      '@huggingface/tasks': 0.10.19
+      hash-wasm: 4.11.0
+    dev: false
+
   /@huggingface/[email protected]:
     resolution: {integrity: sha512-u7Fn637Q3f7nUB1tajM4CgzhvoFQkOQr5W5Fm+2wT9ETgGoLBh25BLlYPTJRjAd2WY01s71v0lqAwNvHHCc3mg==}
     engines: {node: '>=18'}
@@ -1043,6 +1054,10 @@ packages:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-HVusNXlVqHe0fzIzdQOGolnFN6mX/fqcrSAOcTBXdvzrXVHwTz11vXeKRmkR5gTuwVpvHZEIyKoePDvuAR+XwQ==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==}
     engines: {node: '>= 0.4'}

src/lib/components/Playground/Playground.svelte

@@ -10,32 +10,10 @@
 	import PlaygroundOptions from '$lib/components/Playground/PlaygroundOptions.svelte';
 	import PlaygroundTokenModal from './PlaygroundTokenModal.svelte';
 	import PlaygroundModelSelector from './PlaygroundModelSelector.svelte';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
+	import { type ModelEntry } from "@huggingface/hub";
 
-	const compatibleModels: string[] = [
-		'01-ai/Yi-1.5-34B-Chat',
-		'codellama/CodeLlama-34b-Instruct-hf',
-		'CohereForAI/c4ai-command-r-plus',
-		'google/gemma-1.1-2b-it',
-		'google/gemma-1.1-7b-it',
-		'google/gemma-2-27b-it',
-
-		'HuggingFaceH4/zephyr-7b-beta',
-		'HuggingFaceH4/zephyr-orpo-141b-A35b-v0.1',
-		'HuggingFaceM4/idefics-9b-instruct',
-
-		'meta-llama/Llama-2-13b-chat-hf',
-		'meta-llama/Llama-2-70b-chat-hf',
-		'meta-llama/Llama-2-7b-chat-hf',
-		'meta-llama/Meta-Llama-3-70B-Instruct',
-		'meta-llama/Meta-Llama-3-8B-Instruct',
-		'microsoft/Phi-3-mini-4k-instruct',
-		'mistralai/Mistral-7B-Instruct-v0.1',
-		'mistralai/Mistral-7B-Instruct-v0.2',
-		'mistralai/Mistral-7B-Instruct-v0.3',
-		'mistralai/Mixtral-8x7B-Instruct-v0.1',
-		'tiiuae/falcon-7b-instruct'
-	];
+	let compatibleModels: ModelEntry[] = [];
 
 	const startMessages: Message[] = [{ role: 'user', content: '' }];
 
@@ -66,6 +44,14 @@
 	let messageContainer: HTMLDivElement | null = null;
 	let abortController: AbortController | null = null;
 
+	onMount(() => {
+		(async () => {
+			// TODO: use hfjs.hub listModels after https://github.com/huggingface/huggingface.js/pull/795
+			const res = await fetch("https://huggingface.co/api/models?pipeline_tag=text-generation&inferenceStatus=loaded&filter=conversational");
+			compatibleModels = await res.json() as ModelEntry[];
+		})();
+	})
+
 	onDestroy(() => {
 		if (abortController) {
 			abortController.abort();
@@ -424,7 +410,7 @@
 						}}
 					>
 						{#each compatibleModels as model}
-							<option value={model}>{model}</option>
+							<option value={model.id}>{model.id}</option>
 						{/each}
 					</select>
 				</div>

src/lib/components/Playground/PlaygroundModelSelector.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-	export let compatibleModels: string[] = [];
+	import { type ModelEntry } from "@huggingface/hub";
+
+	export let compatibleModels: ModelEntry[] = [];
 	export let currentModel = compatibleModels[0];
 	export let disabled = false;
 </script>
@@ -16,7 +18,7 @@
 		class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 	>
 		{#each compatibleModels as model}
-			<option value={model}>{model}</option>
+			<option value={model.id}>{model.id}</option>
 		{/each}
 	</select>
 </div>

src/lib/types/index.d.ts

@@ -1,3 +1,5 @@
+import type { ModelEntry } from "@huggingface/hub";
+
 type Message = {
 	role: string;
 	content: string;
@@ -14,7 +16,7 @@ type ModelConfig = {
 
 type Conversation = {
 	id: string;
-	model: Model;
+	model: ModelEntry;
 	config: ModelConfig;
 	messages: Message[];
 };