Provider selector (#60)

package.json

@@ -20,6 +20,7 @@
 		"@tailwindcss/postcss": "^4.0.9",
 		"@typescript-eslint/eslint-plugin": "^6.21.0",
 		"@typescript-eslint/parser": "^6.21.0",
+		"clsx": "^2.1.1",
 		"eslint": "^8.57.1",
 		"eslint-config-prettier": "^8.10.0",
 		"eslint-plugin-svelte": "^2.44.0",
@@ -30,6 +31,7 @@
 		"prettier-plugin-tailwindcss": "^0.6.11",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
+		"tailwind-merge": "^3.0.2",
 		"tailwindcss": "^4.0.9",
 		"tslib": "^2.4.1",
 		"typescript": "^5.6.2",
@@ -40,6 +42,7 @@
 		"@huggingface/hub": "^1.0.1",
 		"@huggingface/inference": "^3.5.1",
 		"@huggingface/tasks": "^0.17.1",
+		"@melt-ui/svelte": "^0.86.3",
 		"@tailwindcss/container-queries": "^0.1.1"
 	}
 }

pnpm-lock.yaml

@@ -17,6 +17,9 @@ importers:
       '@huggingface/tasks':
         specifier: ^0.17.1
         version: 0.17.1
+      '@melt-ui/svelte':
+        specifier: ^0.86.3
+        version: 0.86.3([email protected])
       '@tailwindcss/container-queries':
         specifier: ^0.1.1
         version: 0.1.1([email protected])
@@ -42,6 +45,9 @@ importers:
       '@typescript-eslint/parser':
         specifier: ^6.21.0
         version: 6.21.0([email protected])([email protected])
+      clsx:
+        specifier: ^2.1.1
+        version: 2.1.1
       eslint:
         specifier: ^8.57.1
         version: 8.57.1
@@ -72,6 +78,9 @@ importers:
       svelte-check:
         specifier: ^3.6.0
         version: 3.8.6([email protected]([email protected]))([email protected])([email protected])
+      tailwind-merge:
+        specifier: ^3.0.2
+        version: 3.0.2
       tailwindcss:
         specifier: ^4.0.9
         version: 4.0.9
@@ -251,6 +260,15 @@ packages:
     resolution: {integrity: sha512-d9zaMRSTIKDLhctzH12MtXvJKSSUhaHcjV+2Z+GK+EEY7XKpP5yR4x+N3TAcHTcu963nIr+TMcCb4DBCYX1z6Q==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==}
+
+  '@floating-ui/[email protected]':
+    resolution: {integrity: sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==}
+
   '@huggingface/[email protected]':
     resolution: {integrity: sha512-wogGVETaNUV/wYBkny0uQD48L0rK9cttVtbaA1Rw/pGCuSYoZ8YlvTV6zymsGJfXaxQU8zup0aOR2XLIf6HVfg==}
     engines: {node: '>=18'}
@@ -278,6 +296,9 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     deprecated: Use @eslint/object-schema instead
 
+  '@internationalized/[email protected]':
+    resolution: {integrity: sha512-VJ5WS3fcVx0bejE/YHfbDKR/yawZgKqn/if+oEeLqNwBtPzVB06olkfcnojTmEMX+gTpH+FlQ69SHNitJ8/erQ==}
+
   '@jridgewell/[email protected]':
     resolution: {integrity: sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==}
     engines: {node: '>=6.0.0'}
@@ -296,6 +317,11 @@ packages:
   '@jridgewell/[email protected]':
     resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==}
 
+  '@melt-ui/[email protected]':
+    resolution: {integrity: sha512-ZsWmHGd6P636mws1CgatlX7JtLkWoUBPXeNzPzvHYgZdagp8io8MPFotDIfRyKwTEQFUqF9fhBks6CWr0Nupuw==}
+    peerDependencies:
+      svelte: ^3.0.0 || ^4.0.0 || ^5.0.0-next.118
+
   '@nodelib/[email protected]':
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -476,6 +502,9 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
 
+  '@swc/[email protected]':
+    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
+
   '@tailwindcss/[email protected]':
     resolution: {integrity: sha512-p18dswChx6WnTSaJCSGx6lTmrGzNNvm2FtXmiO6AuA1V4U5REyoqwmT6kgAsIMdjo07QdAfYXHJ4hnMtfHzWgA==}
     peerDependencies:
@@ -709,6 +738,10 @@ packages:
     resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==}
     engines: {node: '>= 8.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==}
 
@@ -758,6 +791,10 @@ packages:
     resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
     engines: {node: '>=0.10.0'}
 
+  [email protected]:
+    resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==}
+    engines: {node: '>=6'}
+
   [email protected]:
     resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==}
     engines: {node: '>=8'}
@@ -902,6 +939,9 @@ packages:
   [email protected]:
     resolution: {integrity: sha512-GX+ysw4PBCz0PzosHDepZGANEuFCMLrnRTiEy9McGjmkCQYwRq4A/X786G/fjM/+OjsWSU1ZrY5qyARZmO/uwg==}
 
+  [email protected]:
+    resolution: {integrity: sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==}
+
   [email protected]:
     resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==}
 
@@ -1170,6 +1210,11 @@ packages:
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
     hasBin: true
 
+  [email protected]:
+    resolution: {integrity: sha512-b+CiXQCNMUGe0Ri64S9SXFcP9hogjAJ2Rd6GdVxhPLRm7mhGaM7VgOvCAJ1ZshfHbqVDI3uqTI5C8/GaKuLI7g==}
+    engines: {node: ^18 || >=20}
+    hasBin: true
+
   [email protected]:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
@@ -1506,6 +1551,12 @@ packages:
     resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==}
     engines: {node: '>=16'}
 
+  [email protected]:
+    resolution: {integrity: sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==}
+
+  [email protected]:
+    resolution: {integrity: sha512-l7z+OYZ7mu3DTqrL88RiKrKIqO3NcpEO8V/Od04bNpvk0kiIFndGEoqfuzvj4yuhRkHKjRkII2z+KS2HfPcSxw==}
+
   [email protected]:
     resolution: {integrity: sha512-12laZu+fv1ONDRoNR9ipTOpUD7RN9essRVkX36sjxuRUInpN7hIiHN4lBd/SIFjbISvnXzp8h/hXzmU8SQQYhw==}
 
@@ -1717,6 +1768,17 @@ snapshots:
 
   '@eslint/[email protected]': {}
 
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/[email protected]':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/utils': 0.2.9
+
+  '@floating-ui/[email protected]': {}
+
   '@huggingface/[email protected]':
     dependencies:
       '@huggingface/tasks': 0.15.9
@@ -1741,6 +1803,10 @@ snapshots:
 
   '@humanwhocodes/[email protected]': {}
 
+  '@internationalized/[email protected]':
+    dependencies:
+      '@swc/helpers': 0.5.15
+
   '@jridgewell/[email protected]':
     dependencies:
       '@jridgewell/set-array': 1.2.1
@@ -1758,6 +1824,16 @@ snapshots:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.5.0
 
+  '@melt-ui/[email protected]([email protected])':
+    dependencies:
+      '@floating-ui/core': 1.6.9
+      '@floating-ui/dom': 1.6.13
+      '@internationalized/date': 3.7.0
+      dequal: 2.0.3
+      focus-trap: 7.6.4
+      nanoid: 5.1.2
+      svelte: 4.2.19
+
   '@nodelib/[email protected]':
     dependencies:
       '@nodelib/fs.stat': 2.0.5
@@ -1918,6 +1994,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@swc/[email protected]':
+    dependencies:
+      tslib: 2.8.1
+
   '@tailwindcss/[email protected]([email protected])':
     dependencies:
       tailwindcss: 4.0.9
@@ -2154,6 +2234,8 @@ snapshots:
     optionalDependencies:
       fsevents: 2.3.3
 
+  [email protected]: {}
+
   [email protected]:
     dependencies:
       '@jridgewell/sourcemap-codec': 1.5.0
@@ -2195,6 +2277,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -2391,6 +2475,10 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]:
+    dependencies:
+      tabbable: 6.2.0
+
   [email protected]: {}
 
   [email protected]:
@@ -2608,6 +2696,8 @@ snapshots:
 
   [email protected]: {}
 
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}
@@ -2881,6 +2971,10 @@ snapshots:
       magic-string: 0.30.17
       periscopic: 3.1.0
 
+  [email protected]: {}
+
+  [email protected]: {}
+
   [email protected]: {}
 
   [email protected]: {}

src/lib/components/Avatar.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
-	export let orgName: string;
+	import { browser } from "$app/environment";
+
+	export let orgName: string | undefined;
 	export let size: "sm" | "md" = "md";
 
-	const sizeClass = size === "sm" ? "size-3" : "size-4";
+	$: sizeClass = size === "sm" ? "size-3" : "size-4";
 
-	async function getAvatarUrl(orgName: string) {
+	async function getAvatarUrl(orgName?: string) {
+		if (!orgName) return;
 		const url = `https://huggingface.co/api/organizations/${orgName}/avatar`;
+		if (!browser) return;
 		const res = await fetch(url);
 		if (!res.ok) {
 			console.error(`Error getting avatar url for org: ${orgName}`, res.status, res.statusText);
@@ -20,7 +24,11 @@
 {#await getAvatarUrl(orgName)}
 	<div class="{sizeClass} flex-none rounded-sm bg-gray-200"></div>
 {:then avatarUrl}
-	<img class="{sizeClass} flex-none rounded-sm bg-gray-200 object-cover" src={avatarUrl} alt="{orgName} avatar" />
+	{#if avatarUrl}
+		<img class="{sizeClass} flex-none rounded-sm bg-gray-200 object-cover" src={avatarUrl} alt="{orgName} avatar" />
+	{:else}
+		<div class="{sizeClass} flex-none rounded-sm bg-gray-200"></div>
+	{/if}
 {:catch}
 	<div class="{sizeClass} flex-none rounded-sm bg-gray-200"></div>
 {/await}

src/lib/components/Icons/IconExternal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let classNames = "";
+</script>
+
+<svg class={classNames} xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
+	><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z" /></svg
+>

src/lib/components/Icons/IconProvider.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+	export let provider: string | undefined;
+	const icons = {
+		"sambanova":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><path d="M23.9395 23H22.8288V9.38464C22.8288 6.5566 20.4901 4.11242 17.6039 4.11242H10.3219C7.43574 4.11242 5.10488 6.44692 5.10488 9.2828C5.10488 12.1108 7.43574 14.4454 10.3219 14.4454H11.0493C12.2695 14.4454 13.2707 15.4481 13.2707 16.6702C13.2707 17.8923 12.2695 18.8872 11.0493 18.8872H3.93945V17.7826H10.9946C11.6047 17.7826 12.1053 17.2812 12.1053 16.725C12.1053 16.114 11.6047 15.6674 10.9946 15.6674H10.2672C6.82565 15.6126 3.93945 12.7767 3.93945 9.2828C3.93945 5.78104 6.82565 3 10.3219 3H17.6587C21.1002 3 23.9395 5.94555 23.9395 9.38464V23Z" fill="#EE7624"></path><path d="M11.1041 13.6069C12.6606 13.6617 14.1624 15.0562 14.1624 16.717C14.1624 18.3856 12.7701 19.827 11.0493 19.827H3.93945V20.9394H10.9946C13.3255 20.9394 15.2652 19.0515 15.2652 16.717C15.2652 16.1137 15.1557 15.5575 14.882 15.0013C14.6551 14.5 14.2719 13.9986 13.8808 13.6069C13.435 13.223 12.9344 12.941 12.379 12.7217C11.7142 12.5023 11.0493 12.5571 10.3219 12.5023C9.93085 12.5023 9.047 12.2751 8.54641 11.9461C8.04583 11.6092 7.65474 11.1627 7.43574 10.6692C7.26366 10.2226 7.15416 9.7761 7.15416 9.27473C7.15416 7.55127 8.54641 6.16466 10.2672 6.16466H17.5961C19.3168 6.16466 20.7091 7.66878 20.7091 9.32957V22.9919H21.8198V9.3844C21.8198 7.05773 19.9348 5.05225 17.5961 5.05225H10.3219C7.99108 5.05225 6.0513 6.94022 6.0513 9.27473C6.0513 9.88577 6.16081 10.442 6.43456 10.9982C6.66139 11.4996 6.9899 12.0009 7.43574 12.3848C7.82682 12.7765 8.38216 13.0507 8.88275 13.2779C9.1565 13.3875 9.43808 13.4424 9.76659 13.4972C10.5488 13.552 11.0493 13.6069 11.1041 13.6069Z" fill="#EE7624"></path><path d="M10.9946 23H3.93945V21.8876H10.9946C13.8808 21.8876 16.2116 19.5531 16.2116 16.7172C16.2116 13.8892 13.8808 11.5546 10.9946 11.5546H10.2672C9.047 11.5546 8.04583 10.5519 8.04583 9.32981C8.04583 8.10772 9.047 7.10498 10.2672 7.10498H17.6039C18.8241 7.10498 19.8253 8.16256 19.8253 9.38465V22.9922H18.7146V9.38465C18.7146 8.78144 18.214 8.22523 17.6587 8.22523H10.3219C9.71184 8.22523 9.27383 8.7266 9.27383 9.27498C9.27383 9.83118 9.77442 10.3326 10.3845 10.3326H11.1041C14.6004 10.3326 17.4396 13.1606 17.4396 16.6075C17.3849 20.1641 14.4909 22.9922 10.9946 22.9922V23Z" fill="#EE7624"></path></svg>',
+		"fal":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.5899 2.37891C16.9579 2.37891 17.2529 2.67812 17.2881 3.04443C17.6019 6.31174 20.2023 8.91191 23.4698 9.22569C23.8361 9.26089 24.1353 9.55582 24.1353 9.92378V16.0761C24.1353 16.4441 23.8361 16.739 23.4698 16.7742C20.2023 17.088 17.6019 19.6881 17.2881 22.9555C17.2529 23.3218 16.9579 23.621 16.5899 23.621H10.4373C10.0692 23.621 9.77432 23.3218 9.73912 22.9555C9.42534 19.6881 6.82494 17.088 3.5574 16.7742C3.19109 16.739 2.89185 16.4441 2.89185 16.0761V9.92378C2.89185 9.55582 3.19109 9.26089 3.55741 9.22569C6.82494 8.91191 9.42534 6.31174 9.73912 3.04443C9.77432 2.67812 10.0692 2.37891 10.4373 2.37891H16.5899ZM7.15714 12.982C7.15714 16.5163 10.0192 19.3814 13.5498 19.3814C17.0804 19.3814 19.9426 16.5163 19.9426 12.982C19.9426 9.44762 17.0804 6.58248 13.5498 6.58248C10.0192 6.58248 7.15714 9.44762 7.15714 12.982Z" fill="currentColor"></path></svg>',
+		"cerebras":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26" fill="none"><path d="M15 22C10.0294 22 6 17.9706 6 13C6 8.02939 10.0294 4 15 4M10.3635 18.5622C7.2966 15.989 6.89677 11.417 9.46998 8.35026C12.0432 5.28338 16.6151 4.88355 19.6819 7.45675M12.4088 17.8643C9.72407 16.447 8.69627 13.1212 10.1136 10.4368C11.5308 7.75157 14.8559 6.72427 17.5411 8.14156M15 16.746C12.9314 16.746 11.2543 15.0689 11.2543 13.0003C11.2543 10.9316 12.9314 9.25454 15 9.25454" stroke="#F15A29" stroke-width="1.5" stroke-miterlimit="10"></path></svg>',
+		"replicate":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><rect x="3.14136" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="url(#paint0_linear_171_78)"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M19.9161 7.72173V6.18848H7.49072V19.8116H9.21034V7.72173H19.9161ZM19.919 9.09575V10.629H12.4584V19.8109H10.7388V9.09575H19.919ZM19.9161 11.9922V13.5342H15.7008V19.8082H13.9811V11.9922H19.9161Z" fill="white"></path><defs><linearGradient id="paint0_linear_171_78" x1="22.9091" y1="3.17345" x2="4.19652" y2="22.4427" gradientUnits="userSpaceOnUse"><stop stop-color="#EBFF18"></stop><stop offset="0.5" stop-color="#EB40F0"></stop><stop offset="1" stop-color="#BE0000"></stop></linearGradient></defs></svg>',
+		"black-forest-labs":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.1146 5L22.5938 18.9541L20.7344 18.9687L13.1146 7.54511L6.55208 17.528H14.6458L16.1042 18.9687C16.1042 19.0468 4 18.9541 4 18.9541L13.1146 5ZM21.3906 9.46122C21.3979 9.47585 21.6969 9.95853 22.0615 10.5436C22.4188 11.1287 22.7615 11.6918 22.9583 12.0063H19.8229L20.2458 11.3262C20.2458 11.3262 20.8365 10.3827 21.026 10.0463C21.2229 9.70988 21.3833 9.44659 21.3906 9.46122Z" fill="currentColor"></path><path d="M19.6305 18.9541H17.917L13.4326 12.0794H15.2555L19.6305 18.9541Z" fill="currentColor"></path><path d="M13.224 15.9556H10.1979L11.6563 13.5787L13.224 15.9556Z" fill="currentColor"></path></svg>',
+		"fireworks-ai":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><path d="M19.7941 2.5H6.20588C4.15918 2.5 2.5 4.15918 2.5 6.20588V19.7941C2.5 21.8408 4.15918 23.5 6.20588 23.5H19.7941C21.8408 23.5 23.5 21.8408 23.5 19.7941V6.20588C23.5 4.15918 21.8408 2.5 19.7941 2.5Z" fill="#5019C5"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M12.9917 14.8005C12.4958 14.8005 12.0508 14.5061 11.861 14.0503L9.57335 8.58789H10.9123L12.9995 13.5848L15.0847 8.58789H16.4237L14.1223 14.0523C13.9316 14.5061 13.4875 14.8005 12.9917 14.8005ZM15.9767 17.4106C15.4828 17.4106 15.0398 17.1181 14.8481 16.6663C14.6554 16.2105 14.7551 15.6902 15.1034 15.3371L19.2699 11.1168L19.7902 12.3442L15.9758 16.2007L21.4128 16.1704L21.9331 17.3979L15.9777 17.4125L15.9758 17.4106H15.9767ZM4.58722 16.1684L4.06689 17.3959L4.06885 17.394L10.0242 17.4076C10.5162 17.4076 10.9612 17.1162 11.1529 16.6633C11.3466 16.2085 11.2458 15.6863 10.8977 15.3342L6.73113 11.1138L6.2108 12.3413L10.0242 16.1988L4.58722 16.1684Z" fill="white"></path></svg>',
+		"together":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><g clip-path="url(#clip0_55_1726)"><path d="M19.925 2.5H6.33674C4.29004 2.5 2.63086 4.15918 2.63086 6.20588V19.7941C2.63086 21.8408 4.29004 23.5 6.33674 23.5H19.925C21.9717 23.5 23.6309 21.8408 23.6309 19.7941V6.20588C23.6309 4.15918 21.9717 2.5 19.925 2.5Z" fill="#F1EFED"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M17.6087 12.5368C19.6554 12.5368 21.3146 10.8776 21.3146 8.83088C21.3146 6.78418 19.6554 5.125 17.6087 5.125C15.562 5.125 13.9028 6.78418 13.9028 8.83088C13.9028 10.8776 15.562 12.5368 17.6087 12.5368ZM17.6087 21.1842C19.6554 21.1842 21.3146 19.525 21.3146 17.4783C21.3146 15.4316 19.6554 13.7725 17.6087 13.7725C15.562 13.7725 13.9028 15.4316 13.9028 17.4783C13.9028 19.525 15.562 21.1842 17.6087 21.1842ZM12.6676 17.4783C12.6676 19.525 11.0084 21.1842 8.96174 21.1842C6.91504 21.1842 5.25586 19.525 5.25586 17.4783C5.25586 15.4316 6.91504 13.7725 8.96174 13.7725C11.0084 13.7725 12.6676 15.4316 12.6676 17.4783Z" fill="#D3D1D1"></path><path d="M8.96174 12.5368C11.0084 12.5368 12.6676 10.8776 12.6676 8.83088C12.6676 6.78418 11.0084 5.125 8.96174 5.125C6.91504 5.125 5.25586 6.78418 5.25586 8.83088C5.25586 10.8776 6.91504 12.5368 8.96174 12.5368Z" fill="#0F6FFF"></path></g><defs><clipPath id="clip0_55_1726"><rect width="21" height="21" fill="white" transform="translate(2.63086 2.5)"></rect></clipPath></defs></svg>',
+		"nebius":
+			'<svg width="1em" height="1em" viewBox="0 0 26 26" class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" preserveAspectRatio="xMidYMid meet"><rect x="3.14136" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="#D9FE00"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M22 5.2226H19V18.4781C19 18.4781 22 18.2885 22 14.6817V5.2226ZM4 11.3183V20.7701H7V7.5146C7 7.5146 8.80257 7.25164 9.75584 9.56444L13.5339 18.6933C14.1519 20.1708 15.1636 21 16.5923 21C18.021 21 19 19.7855 19 18.4842C19 18.4842 17.1974 18.7471 16.2383 16.4356L12.4661 7.30668C11.8481 5.82923 10.8364 5 9.40771 5C7.97897 5 7 6.21327 7 7.5146C6.99416 7.5146 4 7.71029 4 11.3183Z" fill="#002C44"></path></svg>',
+		"hyperbolic":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><path d="M3.4211 4.72C3.66077 4.42 4.22 3.9 4.65939 3.58C5.09879 3.26 5.71793 3 6.03749 3C6.397 3 6.69659 3.16 6.87634 3.46C7.03612 3.7 7.67524 5.14 8.27442 6.64C8.89356 8.16 9.39287 9.58 9.39287 9.8C9.39287 10.18 9.35293 10.2 8.15458 9.9C7.45554 9.72 6.35705 9.34 5.69796 9.02C5.03887 8.7 4.16008 8.06 3.76063 7.62C3.16145 6.98 3.00167 6.64 3.00167 6.06C2.9817 5.58 3.14148 5.1 3.4211 4.72Z" fill="#594CE9"></path><path d="M17.7813 6.4C18.3406 5.02 18.9397 3.7 19.0995 3.46C19.2793 3.16 19.5988 3 19.9384 3C20.2379 3 20.8371 3.24 21.2765 3.56C21.7159 3.88 22.2552 4.34 22.4749 4.6C22.7545 4.92 22.8743 5.32 22.8743 6C22.8743 6.84 22.7745 7.08 22.1753 7.7C21.7958 8.1 20.937 8.68 20.2779 9C19.6188 9.32 18.5003 9.72 16.4831 10.2L16.6029 9.54C16.6828 9.2 17.2021 7.78 17.7813 6.4Z" fill="#594CE9"></path><path d="M4.71931 10.8C4.5795 10.3 4.39975 9.72 4.31986 9.52C4.23997 9.24 4.27991 9.16 4.45967 9.24C4.5795 9.32 5.23859 9.6 5.89769 9.86C6.55678 10.14 7.81505 10.52 8.69384 10.7C9.75238 10.92 11.2104 11.04 12.9879 11.04C14.7455 11.04 16.2434 10.92 17.282 10.7C18.1608 10.52 19.5189 10.1 20.2779 9.78C21.0568 9.48 21.6959 9.24 21.7359 9.26C21.7559 9.28 21.616 9.66 21.4363 10.1C21.1966 10.66 21.0968 11.48 21.0768 12.9C21.0768 14.36 21.1767 15.14 21.4363 15.8C21.636 16.3 21.7559 16.72 21.7359 16.74C21.6959 16.76 21.0568 16.52 20.2779 16.22C19.5189 15.9 18.1608 15.48 17.282 15.3C16.2235 15.06 14.7655 14.96 12.9879 14.96C11.2104 14.96 9.75238 15.06 8.69384 15.3C7.81505 15.48 6.47689 15.9 5.69796 16.22C4.93901 16.52 4.27991 16.76 4.25994 16.74C4.23997 16.72 4.39975 16.2 4.59947 15.6C4.83914 14.94 4.99892 13.94 4.99892 13.1C4.99892 12.34 4.87909 11.3 4.71931 10.8Z" fill="#594CE9"></path><path d="M5.69796 17C6.35705 16.68 7.43557 16.3 8.07469 16.14C9.13323 15.88 9.27304 15.9 9.33296 16.18C9.39287 16.36 9.05334 17.44 8.59397 18.6C8.13461 19.76 7.53543 21.2 7.23584 21.8C6.79645 22.7 6.59672 22.9 6.15733 22.96C5.83777 22.98 5.29851 22.82 4.95898 22.62C4.59947 22.42 4.0003 21.92 3.66077 21.52C3.14148 20.96 3.00167 20.62 3.00167 20C3.00167 19.36 3.14148 19.04 3.76063 18.38C4.16008 17.94 5.03887 17.3 5.69796 17Z" fill="#594CE9"></path><path d="M17.7813 19.6C17.2021 18.22 16.7028 16.84 16.6629 16.52L16.583 15.94L17.4817 16.06C17.981 16.14 18.9797 16.44 19.7386 16.74C20.6174 17.1 21.4163 17.62 22.0754 18.24C23.074 19.2 23.074 19.22 22.9342 20.16C22.8543 20.68 22.6346 21.28 22.4349 21.48C22.2352 21.68 21.7159 22.12 21.2765 22.44C20.8371 22.76 20.2379 23 19.9384 23C19.5788 23 19.2793 22.84 19.0995 22.56C18.9397 22.3 18.3406 20.98 17.7813 19.6Z" fill="#594CE9"></path></svg>',
+		"novita":
+			'<svg width="1em" height="1em" viewBox="0 0 26 26" class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" preserveAspectRatio="xMidYMid meet" version="1.2"><rect x="2.43628" y="2.43652" width="21.1274" height="21.1274" rx="3.54011" fill="black"></rect><path d="M10.7187 5.79061C10.6923 5.80858 10.6791 6.78313 10.6835 8.13942L10.6923 10.4568C4.90331 16.3759 3.23298 18.105 3.24617 18.1274C3.25496 18.1454 4.93408 18.1589 6.97804 18.1589H10.6923C10.6923 14.5391 10.7055 13.4792 10.7275 13.4703C10.7451 13.4568 11.7956 14.5077 13.066 15.8056L15.3736 18.1589C21.1143 18.1589 22.789 18.1454 22.7978 18.123C22.811 18.105 20.1077 15.3161 16.789 11.9253C13.4703 8.53463 10.7407 5.77265 10.7187 5.79061Z" fill="#26D57A"></path></svg>',
+		"cohere":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.48 14.92C10.0133 14.92 11.08 14.8933 12.5733 14.28C14.3067 13.56 17.72 12.28 20.2 10.9467C21.9333 10.0133 22.68 8.78667 22.68 7.13333C22.68 4.86667 20.84 3 18.5467 3H8.94667C5.66667 3 3 5.66667 3 8.94667C3 12.2267 5.50667 14.92 9.48 14.92Z" fill="#39594D"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1066 19C11.1066 17.4 12.0666 15.9333 13.5599 15.32L16.5732 14.0666C19.6399 12.8133 22.9999 15.0533 22.9999 18.36C22.9999 20.92 20.9199 23 18.3599 23H15.0799C12.8932 23 11.1066 21.2133 11.1066 19Z" fill="#D18EE2"></path><path d="M6.44 15.6934C4.54667 15.6934 3 17.24 3 19.1334V19.5867C3 21.4534 4.54667 23 6.44 23C8.33333 23 9.88 21.4534 9.88 19.56V19.1067C9.85333 17.24 8.33333 15.6934 6.44 15.6934Z" fill="#FF7759"></path></svg>',
+		"hf-inference":
+			'<svg class="text-lg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 26 26"><rect x="3.34856" y="3.02654" width="19.9474" height="19.9474" rx="2.95009" fill="#FFD21E" stroke="#FFB41E" stroke-width="1.18004"></rect><path fill-rule="evenodd" clip-rule="evenodd" d="M7.69336 9.74609V16.9754H9.32329V13.9595H11.8181V16.9754H13.4591V9.74609H11.8181V12.5292H9.32329V9.74609H7.69336ZM15.1646 9.74609V16.9754H16.7945V14.1702H19.3004V12.7953H16.7945V11.121H19.7217V9.74609H15.1646Z" fill="#814D00"></path></svg>',
+	};
+
+	$: icon = provider && provider in icons ? icons[provider as keyof typeof icons] : null;
+</script>
+
+{#if icon}
+	<span class="inline-block">{@html icon}</span>
+{:else}
+	<!-- Allow passing custom fallback -->
+	<slot>
+		<div class="size-4 flex-none rounded-sm bg-gray-200"></div>
+	</slot>
+{/if}

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import type { Conversation, ConversationMessage, ModelEntryWithTokenizer, Session } from "./types";
+	import type { Conversation, ConversationMessage, ModelWithTokenizer } from "$lib/types";
 
-	import { page } from "$app/stores";
-	import { defaultGenerationConfig } from "./generationConfigSettings";
 	import {
-		createHfInference,
-		FEATURED_MODELS_IDS,
 		handleNonStreamingResponse,
 		handleStreamingResponse,
 		isSystemPromptSupported,
 	} from "./inferencePlaygroundUtils";
 
-	import { goto } from "$app/navigation";
-	import { onDestroy, onMount } from "svelte";
+	import { models } from "$lib/stores/models";
+	import { session } from "$lib/stores/session";
+	import { token } from "$lib/stores/token";
+	import { isMac } from "$lib/utils/platform";
+	import { HfInference } from "@huggingface/inference";
+	import { onDestroy } from "svelte";
 	import IconCode from "../Icons/IconCode.svelte";
 	import IconCompare from "../Icons/IconCompare.svelte";
 	import IconDelete from "../Icons/IconDelete.svelte";
@@ -20,93 +20,57 @@
 	import IconThrashcan from "../Icons/IconThrashcan.svelte";
 	import PlaygroundConversation from "./InferencePlaygroundConversation.svelte";
 	import PlaygroundConversationHeader from "./InferencePlaygroundConversationHeader.svelte";
-	import GenerationConfig, { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
+	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import HFTokenModal from "./InferencePlaygroundHFTokenModal.svelte";
 	import ModelSelector from "./InferencePlaygroundModelSelector.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-
-	export let models: ModelEntryWithTokenizer[];
+	import IconExternal from "../Icons/IconExternal.svelte";
 
 	const startMessageUser: ConversationMessage = { role: "user", content: "" };
-	const modelIdsFromQueryParam = $page.url.searchParams.get("modelId")?.split(",");
-	const modelsFromQueryParam = modelIdsFromQueryParam?.map(id => models.find(model => model.id === id));
-	const systemMessage: ConversationMessage = {
-		role: "system",
-		content: modelIdsFromQueryParam ? (defaultSystemMessage?.[modelIdsFromQueryParam[0]] ?? "") : "",
-	};
-
-	let session: Session = {
-		conversations: [
-			{
-				model: models.find(m => FEATURED_MODELS_IDS.includes(m.id)) ?? models[0],
-				config: { ...defaultGenerationConfig },
-				messages: [{ ...startMessageUser }],
-				systemMessage,
-				streaming: true,
-			},
-		],
-	};
-
-	if (modelsFromQueryParam?.length) {
-		const conversations = modelsFromQueryParam.map(model => {
-			return {
-				model,
-				config: { ...defaultGenerationConfig },
-				messages: [{ ...startMessageUser }],
-				systemMessage,
-				streaming: true,
-			};
-		}) as [Conversation] | [Conversation, Conversation];
-		session.conversations = conversations;
-		session = session;
-	}
 
-	let hfToken = "";
 	let viewCode = false;
 	let viewSettings = false;
-	let showTokenModal = false;
 	let loading = false;
 	let abortControllers: AbortController[] = [];
 	let waitForNonStreaming = true;
-	let storeLocallyHfToken = true;
 	let selectCompareModelOpen = false;
 
 	interface GenerationStatistics {
 		latency: number;
 		generatedTokensCount: number;
 	}
-	let generationStats = session.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
+	let generationStats = $session.conversations.map(_ => ({ latency: 0, generatedTokensCount: 0 })) as
 		| [GenerationStatistics]
 		| [GenerationStatistics, GenerationStatistics];
 
-	const hfTokenLocalStorageKey = "hf_token";
-
-	$: systemPromptSupported = session.conversations.some(conversation => isSystemPromptSupported(conversation.model));
-	$: compareActive = session.conversations.length === 2;
+	$: systemPromptSupported = $session.conversations.some(conversation => isSystemPromptSupported(conversation.model));
+	$: compareActive = $session.conversations.length === 2;
 
 	function addMessage(conversationIdx: number) {
-		const conversation = session.conversations[conversationIdx];
+		const conversation = $session.conversations[conversationIdx];
+		if (!conversation) return;
+		const msgs = conversation.messages.slice();
 		conversation.messages = [
-			...conversation.messages,
+			...msgs,
 			{
-				role: conversation.messages.at(-1)?.role === "user" ? "assistant" : "user",
+				role: msgs.at(-1)?.role === "user" ? "assistant" : "user",
 				content: "",
 			},
 		];
-		session = session;
+		$session = $session;
 	}
 
 	function deleteMessage(conversationIdx: number, idx: number) {
-		session.conversations[conversationIdx].messages.splice(idx, 1)[0];
-		session = session;
+		$session.conversations[conversationIdx]?.messages.splice(idx, 1)[0];
+		$session = $session;
 	}
 
 	function reset() {
-		session.conversations.map(conversation => {
+		$session.conversations.map(conversation => {
 			conversation.systemMessage.content = "";
 			conversation.messages = [{ ...startMessageUser }];
 		});
-		session = session;
+		// session = session;
 	}
 
 	function abort() {
@@ -120,15 +84,9 @@
 		waitForNonStreaming = false;
 	}
 
-	function resetToken() {
-		hfToken = "";
-		localStorage.removeItem(hfTokenLocalStorageKey);
-		showTokenModal = true;
-	}
-
 	async function runInference(conversation: Conversation, conversationIdx: number) {
 		const startTime = performance.now();
-		const hf = createHfInference(hfToken);
+		const hf = new HfInference($token.value);
 
 		if (conversation.streaming) {
 			let addStreamingMessage = true;
@@ -146,8 +104,9 @@
 							conversation.messages = [...conversation.messages, streamingMessage];
 							addStreamingMessage = false;
 						}
-						session = session;
-						generationStats[conversationIdx].generatedTokensCount += 1;
+						$session = $session;
+						const c = generationStats[conversationIdx];
+						if (c) c.generatedTokensCount += 1;
 					}
 				},
 				abortController
@@ -161,24 +120,26 @@
 			// check if the user did not abort the request
 			if (waitForNonStreaming) {
 				conversation.messages = [...conversation.messages, newMessage];
-				generationStats[conversationIdx].generatedTokensCount += newTokensCount;
+				const c = generationStats[conversationIdx];
+				if (c) c.generatedTokensCount += newTokensCount;
 			}
 		}
 
 		const endTime = performance.now();
-		generationStats[conversationIdx].latency = Math.round(endTime - startTime);
+		const c = generationStats[conversationIdx];
+		if (c) c.latency = Math.round(endTime - startTime);
 	}
 
 	async function submit() {
-		if (!hfToken) {
-			showTokenModal = true;
+		if (!$token.value) {
+			$token.showModal = true;
 			return;
 		}
 
-		for (const [idx, conversation] of session.conversations.entries()) {
+		for (const [idx, conversation] of $session.conversations.entries()) {
 			if (conversation.messages.at(-1)?.role === "assistant") {
 				let prefix = "";
-				if (session.conversations.length === 2) {
+				if ($session.conversations.length === 2) {
 					prefix = `Error on ${idx === 0 ? "left" : "right"} conversation. `;
 				}
 				return alert(`${prefix}Messages must alternate between user/assistant roles.`);
@@ -189,21 +150,19 @@
 		loading = true;
 
 		try {
-			const promises = session.conversations.map((conversation, idx) => runInference(conversation, idx));
+			const promises = $session.conversations.map((conversation, idx) => runInference(conversation, idx));
 			await Promise.all(promises);
 		} catch (error) {
-			for (const conversation of session.conversations) {
+			for (const conversation of $session.conversations) {
 				if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
 					conversation.messages.pop();
 					conversation.messages = [...conversation.messages];
 				}
-				session = session;
+				$session = $session;
 			}
 			if (error instanceof Error) {
 				if (error.message.includes("token seems invalid")) {
-					hfToken = "";
-					localStorage.removeItem(hfTokenLocalStorageKey);
-					showTokenModal = true;
+					token.reset();
 				}
 				if (error.name !== "AbortError") {
 					alert("error: " + error.message);
@@ -229,63 +188,30 @@
 		const submittedHfToken = (formData.get("hf-token") as string).trim() ?? "";
 		const RE_HF_TOKEN = /\bhf_[a-zA-Z0-9]{34}\b/;
 		if (RE_HF_TOKEN.test(submittedHfToken)) {
-			hfToken = submittedHfToken;
-			if (storeLocallyHfToken) {
-				localStorage.setItem(hfTokenLocalStorageKey, JSON.stringify(hfToken));
-			}
+			token.setValue(submittedHfToken);
 			submit();
-			showTokenModal = false;
 		} else {
 			alert("Please provide a valid HF token.");
 		}
 	}
 
-	function addCompareModel(modelId: ModelEntryWithTokenizer["id"]) {
-		const model = models.find(m => m.id === modelId);
-		if (!model || session.conversations.length === 2) {
+	function addCompareModel(modelId: ModelWithTokenizer["id"]) {
+		const model = $models.find(m => m.id === modelId);
+		if (!model || $session.conversations.length === 2) {
 			return;
 		}
-		const newConversation = { ...JSON.parse(JSON.stringify(session.conversations[0])), model };
-		session.conversations = [...session.conversations, newConversation];
+		const newConversation = { ...JSON.parse(JSON.stringify($session.conversations[0])), model };
+		$session.conversations = [...$session.conversations, newConversation];
 		generationStats = [generationStats[0], { latency: 0, generatedTokensCount: 0 }];
-
-		// update query param
-		const url = new URL($page.url);
-		const queryParamValue = `${session.conversations[0].model.id},${modelId}`;
-		url.searchParams.set("modelId", queryParamValue);
-
-		const parentOrigin = "https://huggingface.co";
-		window.parent.postMessage({ queryString: `modelId=${queryParamValue}` }, parentOrigin);
-		goto(url.toString(), { replaceState: true });
 	}
 
 	function removeCompareModal(conversationIdx: number) {
-		session.conversations.splice(conversationIdx, 1)[0];
-		session = session;
+		$session.conversations.splice(conversationIdx, 1)[0];
+		$session = $session;
 		generationStats.splice(conversationIdx, 1)[0];
 		generationStats = generationStats;
-
-		// update query param
-		const url = new URL($page.url);
-		const queryParamValue = url.searchParams.get("modelId");
-		if (queryParamValue) {
-			const modelIds = queryParamValue.split(",") as [string, string];
-			const newQueryParamValue = conversationIdx === 1 ? modelIds[0] : modelIds[1];
-			url.searchParams.set("modelId", newQueryParamValue);
-
-			const parentOrigin = "https://huggingface.co";
-			window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
-			goto(url.toString(), { replaceState: true });
-		}
 	}
 
-	onMount(() => {
-		const storedHfToken = localStorage.getItem(hfTokenLocalStorageKey);
-		if (storedHfToken !== null) {
-			hfToken = JSON.parse(storedHfToken);
-		}
-	});
-
 	onDestroy(() => {
 		for (const abortController of abortControllers) {
 			abortController.abort();
@@ -293,8 +219,12 @@
 	});
 </script>
 
-{#if showTokenModal}
-	<HFTokenModal bind:storeLocallyHfToken on:close={() => (showTokenModal = false)} on:submit={handleTokenSubmit} />
+{#if $token.showModal}
+	<HFTokenModal
+		bind:storeLocallyHfToken={$token.writeToLocalStorage}
+		on:close={() => ($token.showModal = false)}
+		on:submit={handleTokenSubmit}
+	/>
 {/if}
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -316,12 +246,12 @@
 				placeholder={systemPromptSupported
 					? "Enter a custom prompt"
 					: "System prompt is not supported with the chosen model."}
-				value={systemPromptSupported ? session.conversations[0].systemMessage.content : ""}
+				value={systemPromptSupported ? $session.conversations[0].systemMessage.content : ""}
 				on:input={e => {
-					for (const conversation of session.conversations) {
+					for (const conversation of $session.conversations) {
 						conversation.systemMessage.content = e.currentTarget.value;
 					}
-					session = session;
+					$session = $session;
 				}}
 				class="absolute inset-x-0 bottom-0 h-full resize-none bg-transparent px-3 pt-10 text-sm outline-hidden"
 			></textarea>
@@ -331,11 +261,10 @@
 		<div
 			class="flex h-[calc(100dvh-5rem-120px)] divide-x divide-gray-200 overflow-x-auto overflow-y-hidden *:w-full max-sm:w-dvw md:h-[calc(100dvh-5rem)] md:pt-3 dark:divide-gray-800"
 		>
-			{#each session.conversations as conversation, conversationIdx}
+			{#each $session.conversations as conversation, conversationIdx}
 				<div class="max-sm:min-w-full">
 					{#if compareActive}
 						<PlaygroundConversationHeader
-							{models}
 							{conversationIdx}
 							bind:conversation
 							on:close={() => removeCompareModal(conversationIdx)}
@@ -345,7 +274,6 @@
 						{loading}
 						{conversation}
 						{viewCode}
-						{hfToken}
 						{compareActive}
 						on:addMessage={() => addMessage(conversationIdx)}
 						on:deleteMessage={e => deleteMessage(conversationIdx, e.detail)}
@@ -403,7 +331,7 @@
 					{#if loading}
 						<div class="flex flex-none items-center gap-[3px]">
 							<span class="mr-2">
-								{#if session.conversations[0].streaming || session.conversations[1]?.streaming}
+								{#if $session.conversations[0].streaming || $session.conversations[1]?.streaming}
 									Stop
 								{:else}
 									Cancel
@@ -425,7 +353,7 @@
 					{:else}
 						Run <span
 							class="inline-flex gap-0.5 rounded-sm border border-white/20 bg-white/10 px-0.5 text-xs text-white/70"
-							>⌘<span class="translate-y-px">↵</span></span
+							>{isMac() ? "⌘" : "Ctrl"}<span class="translate-y-px">↵</span></span
 						>
 					{/if}
 				</button>
@@ -438,7 +366,7 @@
 				class="flex flex-1 flex-col gap-6 overflow-y-hidden rounded-xl border border-gray-200/80 bg-white bg-linear-to-b from-white via-white p-3 shadow-xs dark:border-white/5 dark:bg-gray-900 dark:from-gray-800/40 dark:via-gray-800/40"
 			>
 				<div class="flex flex-col gap-2">
-					<ModelSelector {models} bind:conversation={session.conversations[0]} />
+					<ModelSelector bind:conversation={$session.conversations[0]} />
 					<div class="flex items-center gap-2 self-end px-2 text-xs whitespace-nowrap">
 						<button
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
@@ -448,22 +376,21 @@
 							Compare
 						</button>
 						<a
-							href="https://huggingface.co/{session.conversations[0].model.id}"
+							href="https://huggingface.co/{$session.conversations[0].model.id}?inference_provider={$session
+								.conversations[0].provider}"
 							target="_blank"
 							class="flex items-center gap-0.5 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
 						>
-							<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 32 32"
-								><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6H10z" /></svg
-							>
+							<IconExternal />
 							Model page
 						</a>
 					</div>
 				</div>
 
-				<GenerationConfig bind:conversation={session.conversations[0]} />
-				{#if hfToken}
+				<GenerationConfig bind:conversation={$session.conversations[0]} />
+				{#if $token.value}
 					<button
-						on:click={resetToken}
+						on:click={token.reset}
 						class="mt-auto flex items-center gap-1 self-end text-sm text-gray-500 underline decoration-gray-300 hover:text-gray-800 dark:text-gray-400 dark:decoration-gray-600 dark:hover:text-gray-200"
 						><svg xmlns="http://www.w3.org/2000/svg" class="text-xs" width="1em" height="1em" viewBox="0 0 32 32"
 							><path
@@ -517,8 +444,7 @@
 
 {#if selectCompareModelOpen}
 	<ModelSelectorModal
-		{models}
-		conversation={session.conversations[0]}
+		conversation={$session.conversations[0]}
 		on:modelSelected={e => addCompareModel(e.detail)}
 		on:close={() => (selectCompareModelOpen = false)}
 	/>

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -1,442 +1,141 @@
 <script lang="ts">
-	import type { Conversation } from "./types";
+	import type { Conversation } from "$lib/types";
 
-	import { createEventDispatcher, onDestroy } from "svelte";
 	import hljs from "highlight.js/lib/core";
+	import http from "highlight.js/lib/languages/http";
 	import javascript from "highlight.js/lib/languages/javascript";
 	import python from "highlight.js/lib/languages/python";
-	import http from "highlight.js/lib/languages/http";
+	import { createEventDispatcher } from "svelte";
 
+	import { token } from "$lib/stores/token";
+	import { entries, fromEntries, keys } from "$lib/utils/object";
+	import type { InferenceProvider } from "@huggingface/inference";
 	import IconCopyCode from "../Icons/IconCopyCode.svelte";
-	import { isSystemPromptSupported } from "./inferencePlaygroundUtils";
+	import IconExternal from "../Icons/IconExternal.svelte";
+	import {
+		getInferenceSnippet,
+		type GetInferenceSnippetReturn,
+		type InferenceSnippetLanguage,
+	} from "./inferencePlaygroundUtils";
 
 	hljs.registerLanguage("javascript", javascript);
 	hljs.registerLanguage("python", python);
 	hljs.registerLanguage("http", http);
 
 	export let conversation: Conversation;
-	export let hfToken: string;
 
 	const dispatch = createEventDispatcher<{ closeCode: void }>();
 
-	const lanuages = ["javascript", "python", "http"];
-	type Language = (typeof lanuages)[number];
-	const labelsByLanguage: Record<Language, string> = {
+	const labelsByLanguage = {
 		javascript: "JavaScript",
 		python: "Python",
-		http: "Curl",
-	};
-
-	interface Snippet {
-		label: string;
-		code: string;
-		language?: Language;
-		needsToken?: boolean;
-	}
-
-	interface ClientSnippet {
-		name: string;
-		snippets: Snippet[];
-	}
-
-	interface MessagesJoiner {
-		sep: string;
-		start: string;
-		end: string;
-	}
+		http: "cURL",
+	} as const satisfies Record<string, string>;
+	type Language = keyof typeof labelsByLanguage;
 
-	let selectedLanguage: Language = "javascript";
-	let timeout: ReturnType<typeof setTimeout>;
+	let lang: Language = "javascript";
 	let showToken = false;
 
 	$: tokenStr = getTokenStr(showToken);
 
-	$: clientSnippetsByLang = {
-		javascript: [
-			{ name: "@huggingface/inference", snippets: getJavascriptSnippetsHfClient(conversation, tokenStr) },
-			{ name: "openai", snippets: getJavascriptSnippetsOAIClient(conversation, tokenStr) },
-		],
-		python: [
-			{ name: "huggingface_hub", snippets: getPythonSnippetsHfClient(conversation, tokenStr) },
-			{ name: "openai", snippets: getPythonSnippetsOAIClient(conversation, tokenStr) },
-		],
-		http: [{ name: "curl", snippets: getHttpSnippets(conversation, tokenStr) }],
-	} as Record<Language, ClientSnippet[]>;
-
-	const selectedClientIdxByLang: Record<Language, number> = Object.fromEntries(lanuages.map(lang => [lang, 0]));
-
-	function getTokenStr(showToken: boolean) {
-		if (hfToken && showToken) {
-			return hfToken;
-		}
-		return "YOUR_HF_TOKEN";
-	}
-
-	function getMessages() {
-		const placeholder = [{ role: "user", content: "Tell me a story" }];
-
-		let messages = [...conversation.messages];
-		if (messages.length === 1 && messages[0].role === "user" && !messages[0].content) {
-			messages = placeholder;
-		}
-
-		const { model, systemMessage } = conversation;
-		if (isSystemPromptSupported(model) && systemMessage.content?.length) {
-			messages.unshift(systemMessage);
-		}
-
-		const res = messages.map(({ role, content }) => ({
-			role,
-			content: JSON.stringify(content).slice(1, -1),
-		}));
-		messages = res;
-
-		return res;
-	}
-
-	function highlight(code: string, language: Language) {
-		return hljs.highlight(code, { language }).value;
-	}
-
-	function getJavascriptSnippetsHfClient(conversation: Conversation, tokenStr: string) {
-		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			getMessages()
-				.map(({ role, content }) => `{ role: "${role}", content: "${content}" }`)
-				.join(sep) +
-			end;
-
-		const formattedConfig = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			Object.entries(conversation.config)
-				.map(([key, val]) => `${key}: ${val}`)
-				.join(sep) +
-			end;
-
-		const snippets: Snippet[] = [];
-		snippets.push({
-			label: "Install @huggingface/inference",
-			language: "http",
-			code: `npm install --save @huggingface/inference`,
-		});
-		if (conversation.streaming) {
-			snippets.push({
-				label: "Streaming API",
-				needsToken: true,
-				code: `import { HfInference } from "@huggingface/inference"
-
-const client = new HfInference("${tokenStr}")
-
-let out = "";
-
-const stream = client.chatCompletionStream({
-	model: "${conversation.model.id}",
-	messages: ${formattedMessages({ sep: ",\n\t\t", start: "[\n\t\t", end: "\n\t]" })},
-	${formattedConfig({ sep: ",\n\t", start: "", end: "" })}
-});
-
-for await (const chunk of stream) {
-	if (chunk.choices && chunk.choices.length > 0) {
-		const newContent = chunk.choices[0].delta.content;
-		out += newContent;
-		console.log(newContent);
-	}
-}`,
-			});
-		} else {
-			// non-streaming
-			snippets.push({
-				label: "Non-Streaming API",
-				needsToken: true,
-				code: `import { HfInference } from '@huggingface/inference'
-
-const client = new HfInference("${tokenStr}")
-
-const chatCompletion = await client.chatCompletion({
-	model: "${conversation.model.id}",
-	messages: ${formattedMessages({ sep: ",\n\t\t", start: "[\n\t\t", end: "\n\t]" })},
-	${formattedConfig({ sep: ",\n\t", start: "", end: "" })}
-});
-
-console.log(chatCompletion.choices[0].message);`,
-			});
-		}
-
-		return snippets;
-	}
-
-	function getJavascriptSnippetsOAIClient(conversation: Conversation, tokenStr: string) {
-		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			getMessages()
-				.map(({ role, content }) => `{ role: "${role}", content: "${content}" }`)
-				.join(sep) +
-			end;
-
-		const formattedConfig = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			Object.entries(conversation.config)
-				.map(([key, val]) => `${key}: ${val}`)
-				.join(sep) +
-			end;
-
-		const snippets: Snippet[] = [];
-		snippets.push({
-			label: "Install openai",
-			language: "http",
-			code: `npm install --save openai`,
+	type GetSnippetArgs = {
+		tokenStr: string;
+		conversation: Conversation;
+		lang: InferenceSnippetLanguage;
+	};
+	function getSnippet({ tokenStr, conversation, lang }: GetSnippetArgs) {
+		return getInferenceSnippet(conversation.model, conversation.provider as InferenceProvider, lang, tokenStr, {
+			messages: conversation.messages,
+			streaming: conversation.streaming,
+			max_tokens: conversation.config.max_tokens,
+			temperature: conversation.config.temperature,
+			top_p: conversation.config.top_p,
 		});
-		if (conversation.streaming) {
-			snippets.push({
-				label: "Streaming API",
-				needsToken: true,
-				code: `import { OpenAI } from "openai"
-
-const client = new OpenAI({
-	baseURL: "https://api-inference.huggingface.co/v1/",
-    apiKey: "${tokenStr}"
-})
-
-let out = "";
-
-const stream = await client.chat.completions.create({
-	model: "${conversation.model.id}",
-	messages: ${formattedMessages({ sep: ",\n\t\t", start: "[\n\t\t", end: "\n\t]" })},
-	${formattedConfig({ sep: ",\n\t", start: "", end: "" })},
-	stream: true,
-});
-
-for await (const chunk of stream) {
-	if (chunk.choices && chunk.choices.length > 0) {
-		const newContent = chunk.choices[0].delta.content;
-		out += newContent;
-		console.log(newContent);
 	}
-}`,
-			});
-		} else {
-			// non-streaming
-			snippets.push({
-				label: "Non-Streaming API",
-				needsToken: true,
-				code: `import { OpenAI } from "openai"
 
-const client = new OpenAI({
-    baseURL: "https://api-inference.huggingface.co/v1/",
-    apiKey: "${tokenStr}"
-})
-
-const chatCompletion = await client.chat.completions.create({
-	model: "${conversation.model.id}",
-	messages: ${formattedMessages({ sep: ",\n\t\t", start: "[\n\t\t", end: "\n\t]" })},
-	${formattedConfig({ sep: ",\n\t", start: "", end: "" })}
-});
-
-console.log(chatCompletion.choices[0].message);`,
-			});
+	$: snippetsByLang = {
+		javascript: getSnippet({ lang: "js", tokenStr, conversation }),
+		python: getSnippet({ lang: "python", tokenStr, conversation }),
+		http: getSnippet({ lang: "curl", tokenStr, conversation }),
+	} as Record<Language, GetInferenceSnippetReturn>;
+
+	// { javascript: 0, python: 0, http: 0 } at first
+	const selectedSnippetIdxByLang: Record<Language, number> = fromEntries(
+		keys(labelsByLanguage).map(lang => {
+			return [lang, 0];
+		})
+	);
+	$: selectedSnippet = snippetsByLang[lang][selectedSnippetIdxByLang[lang]];
+
+	type InstallInstructions = {
+		title: string;
+		content: string;
+		docs: string;
+	};
+	$: installInstructions = (function getInstallInstructions(): InstallInstructions | undefined {
+		if (lang === "javascript") {
+			const isHugging = selectedSnippet?.client.includes("hugging");
+			const toInstall = isHugging ? "@huggingface/inference" : "openai";
+			const docs = isHugging
+				? "https://huggingface.co/docs/huggingface.js/inference/README"
+				: "https://platform.openai.com/docs/libraries";
+			return {
+				title: `Install ${toInstall}`,
+				content: `npm install --save ${toInstall}`,
+				docs,
+			};
+		} else if (lang === "python") {
+			const isHugging = selectedSnippet?.client.includes("hugging");
+			const toInstall = isHugging ? "huggingface_hub" : "openai";
+			const docs = isHugging
+				? "https://huggingface.co/docs/huggingface_hub/guides/inference"
+				: "https://platform.openai.com/docs/libraries";
+			return {
+				title: `Install the latest`,
+				content: `pip install --upgrade ${toInstall}`,
+				docs,
+			};
 		}
+	})();
 
-		return snippets;
-	}
-
-	function getPythonSnippetsHfClient(conversation: Conversation, tokenStr: string) {
-		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			getMessages()
-				.map(({ role, content }) => `{ "role": "${role}", "content": "${content}" }`)
-				.join(sep) +
-			end;
-
-		const formattedConfig = ({ sep, start, end, connector }: MessagesJoiner & { connector: string }) =>
-			start +
-			Object.entries(conversation.config)
-				.map(([key, val]) => `${key}${connector}${val}`)
-				.join(sep) +
-			end;
-
-		const snippets: Snippet[] = [];
-		snippets.push({
-			label: "Install the latest huggingface_hub",
-			language: "http",
-			code: `pip install huggingface_hub --upgrade`,
-		});
-		if (conversation.streaming) {
-			snippets.push({
-				label: "Streaming API",
-				needsToken: true,
-				code: `from huggingface_hub import InferenceClient
-
-client = InferenceClient(api_key="${tokenStr}")
-
-messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
-
-stream = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
-	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
-	stream=True
-)
-
-for chunk in stream:
-    print(chunk.choices[0].delta.content)`,
-			});
-		} else {
-			// non-streaming
-			snippets.push({
-				label: "Non-Streaming API",
-				needsToken: true,
-				code: `from huggingface_hub import InferenceClient
-
-client = InferenceClient(api_key="${tokenStr}")
-
-messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
-
-completion = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
-	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
-)
-
-print(completion.choices[0].message)`,
-			});
+	function getTokenStr(showToken: boolean) {
+		if ($token.value && showToken) {
+			return $token.value;
 		}
-
-		return snippets;
+		return "YOUR_HF_TOKEN";
 	}
 
-	function getPythonSnippetsOAIClient(conversation: Conversation, tokenStr: string) {
-		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			getMessages()
-				.map(({ role, content }) => `{ "role": "${role}", "content": "${content}" }`)
-				.join(sep) +
-			end;
-
-		const formattedConfig = ({ sep, start, end, connector }: MessagesJoiner & { connector: string }) =>
-			start +
-			Object.entries(conversation.config)
-				.map(([key, val]) => `${key}${connector}${val}`)
-				.join(sep) +
-			end;
-
-		const snippets: Snippet[] = [];
-		snippets.push({
-			label: "Install the latest openai",
-			language: "http",
-			code: `pip install openai --upgrade`,
-		});
-		if (conversation.streaming) {
-			snippets.push({
-				label: "Streaming API",
-				needsToken: true,
-				code: `from openai import OpenAI
-
-client = OpenAI(
-	base_url="https://api-inference.huggingface.co/v1/",
-	api_key="${tokenStr}"
-)
-
-messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
-
-stream = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
-	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })},
-	stream=True
-)
-
-for chunk in stream:
-    print(chunk.choices[0].delta.content)`,
-			});
-		} else {
-			// non-streaming
-			snippets.push({
-				label: "Non-Streaming API",
-				needsToken: true,
-				code: `from openai import OpenAI
-
-client = OpenAI(
-	base_url="https://api-inference.huggingface.co/v1/",
-	api_key="${tokenStr}"
-)
-
-messages = ${formattedMessages({ sep: ",\n\t", start: `[\n\t`, end: `\n]` })}
-
-completion = client.chat.completions.create(
-    model="${conversation.model.id}",
-	messages=messages,
-	${formattedConfig({ sep: ",\n\t", start: "", end: "", connector: "=" })}
-)
-
-print(completion.choices[0].message)`,
-			});
-		}
-
-		return snippets;
+	function highlight(code?: string, language?: InferenceSnippetLanguage) {
+		if (!code || !language) return "";
+		return hljs.highlight(code, { language: language === "curl" ? "http" : language }).value;
 	}
 
-	function getHttpSnippets(conversation: Conversation, tokenStr: string) {
-		if (tokenStr === "YOUR_HF_TOKEN") {
-			tokenStr = "{YOUR_HF_TOKEN}";
-		}
-		const formattedMessages = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			getMessages()
-				.map(({ role, content }) => {
-					// escape single quotes since single quotes is used to define http post body inside curl requests
-					content = content?.replace(/'/g, "'\\''");
-					return `{ "role": "${role}", "content": "${content}" }`;
-				})
-				.join(sep) +
-			end;
-
-		const formattedConfig = ({ sep, start, end }: MessagesJoiner) =>
-			start +
-			Object.entries(conversation.config)
-				.map(([key, val]) => `"${key}": ${val}`)
-				.join(sep) +
-			end;
-
-		const snippets: Snippet[] = [];
+	function copy(el: HTMLElement, _content?: string) {
+		let timeout: ReturnType<typeof setTimeout>;
+		let content = _content ?? "";
 
-		if (conversation.streaming) {
-			snippets.push({
-				label: "Streaming API",
-				needsToken: true,
-				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model.id}/v1/chat/completions' \\
---header "Authorization: Bearer ${tokenStr}" \\
---header 'Content-Type: application/json' \\
---data '{
-    "model": "${conversation.model.id}",
-    "messages": ${formattedMessages({ sep: ",\n    ", start: `[\n    `, end: `\n]` })},
-    ${formattedConfig({ sep: ",\n    ", start: "", end: "" })},
-    "stream": true
-}'`,
-			});
-		} else {
-			// non-streaming
-			snippets.push({
-				label: "Non-Streaming API",
-				needsToken: true,
-				code: `curl 'https://api-inference.huggingface.co/models/${conversation.model.id}/v1/chat/completions' \\
---header "Authorization: Bearer ${tokenStr}" \\
---header 'Content-Type: application/json' \\
---data '{
-    "model": "${conversation.model.id}",
-    "messages": ${formattedMessages({ sep: ",\n    ", start: `[\n    `, end: `\n]` })},
-    ${formattedConfig({ sep: ",\n    ", start: "", end: "" })}
-}'`,
-			});
+		function update(_content?: string) {
+			content = _content ?? "";
 		}
 
-		return snippets;
-	}
-
-	onDestroy(() => {
-		if (timeout) {
+		function onClick() {
+			el.classList.add("text-green-500");
+			navigator.clipboard.writeText(content);
 			clearTimeout(timeout);
+			timeout = setTimeout(() => {
+				el.classList.remove("text-green-500");
+			}, 400);
 		}
-	});
+		el.addEventListener("click", onClick);
+
+		return {
+			update,
+			destroy() {
+				clearTimeout(timeout);
+				el.removeEventListener("click", onClick);
+			},
+		};
+	}
 </script>
 
 <div class="px-2 pt-2">
@@ -444,11 +143,11 @@ print(completion.choices[0].message)`,
 		class="border-b border-gray-200 text-center text-sm font-medium text-gray-500 dark:border-gray-700 dark:text-gray-400"
 	>
 		<ul class="-mb-px flex flex-wrap">
-			{#each Object.entries(labelsByLanguage) as [language, label]}
+			{#each entries(labelsByLanguage) as [language, label]}
 				<li>
 					<button
-						on:click={() => (selectedLanguage = language)}
-						class="inline-block rounded-t-lg border-b-2 p-4 {language === selectedLanguage
+						on:click={() => (lang = language)}
+						class="inline-block rounded-t-lg border-b-2 p-4 {lang === language
 							? 'border-black text-black dark:border-blue-500 dark:text-blue-500'
 							: 'border-transparent hover:border-gray-300 hover:text-gray-600 dark:hover:text-gray-300'}"
 						aria-current="page">{label}</button
@@ -468,55 +167,72 @@ print(completion.choices[0].message)`,
 		</ul>
 	</div>
 
-	{#if clientSnippetsByLang[selectedLanguage].length > 1}
+	{#if (snippetsByLang[lang]?.length ?? 0) > 1}
 		<div class="flex gap-x-2 px-2 pt-6">
-			{#each clientSnippetsByLang[selectedLanguage] as { name }, idx}
+			{#each snippetsByLang[lang] ?? [] as { client }, idx}
+				{@const isActive = idx === selectedSnippetIdxByLang[lang]}
 				<button
-					class="rounded-md px-1.5 py-0.5 leading-tight {idx === selectedClientIdxByLang[selectedLanguage]
-						? 'bg-black text-gray-100 dark:bg-gray-600 dark:text-white'
-						: 'text-gray-500 hover:text-gray-600 dark:hover:text-gray-400'}"
-					on:click={() => (selectedClientIdxByLang[selectedLanguage] = idx)}>{name}</button
+					class="rounded-lg border px-1.5 py-0.5 text-sm leading-tight
+					{isActive
+						? 'bg-black text-gray-100 dark:border-gray-500 dark:bg-gray-700 dark:text-white'
+						: 'text-gray-500 hover:text-gray-600 dark:border-gray-600 dark:hover:text-gray-400'}"
+					on:click={() => (selectedSnippetIdxByLang[lang] = idx)}>{client}</button
 				>
 			{/each}
 		</div>
 	{/if}
 
-	{#each clientSnippetsByLang[selectedLanguage] as { snippets }, idx}
-		{#if idx === selectedClientIdxByLang[selectedLanguage]}
-			{#each snippets as { label, code, language, needsToken }}
-				<div class="flex items-center justify-between px-2 pt-6 pb-4">
-					<h2 class="font-semibold">{label}</h2>
-					<div class="flex items-center gap-x-4">
-						{#if needsToken && hfToken}
-							<label class="flex items-center gap-x-1.5 text-sm select-none">
-								<input type="checkbox" bind:checked={showToken} />
-								<p class="leading-none">With token</p>
-							</label>
-						{/if}
-						<button
-							class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
-							on:click={e => {
-								const el = e.currentTarget;
-								el.classList.add("text-green-500");
-								navigator.clipboard.writeText(code);
-								if (timeout) {
-									clearTimeout(timeout);
-								}
-								timeout = setTimeout(() => {
-									el.classList.remove("text-green-500");
-								}, 400);
-							}}
-						>
-							<IconCopyCode classNames="text-xs" /> Copy code
-						</button>
-					</div>
-				</div>
-				<pre
-					class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
-						code,
-						language ?? selectedLanguage
-					)}</pre>
-			{/each}
+	{#if installInstructions}
+		<div class="flex items-center justify-between px-2 pt-6 pb-4">
+			<h2 class="flex items-baseline gap-2 font-semibold">
+				{installInstructions.title}
+				<a
+					href={installInstructions.docs}
+					target="_blank"
+					class="relative -bottom-[1px] flex items-center gap-1 text-sm font-normal text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+				>
+					<IconExternal classNames="size-3" />
+					Docs
+				</a>
+			</h2>
+			<div class="flex items-center gap-x-4">
+				<button
+					class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
+					use:copy={installInstructions.content}
+				>
+					<IconCopyCode classNames="text-xs" /> Copy code
+				</button>
+			</div>
+		</div>
+		<pre
+			class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
+				installInstructions.content,
+				selectedSnippet?.language
+			)}</pre>
+	{/if}
+
+	<div class="flex items-center justify-between px-2 pt-6 pb-4">
+		{#if conversation.streaming}
+			<h2 class="font-semibold">Streaming API</h2>
+		{:else}
+			<h2 class="font-semibold">Non-Streaming API</h2>
 		{/if}
-	{/each}
+		<div class="flex items-center gap-x-4">
+			<label class="flex items-center gap-x-1.5 text-sm select-none">
+				<input type="checkbox" bind:checked={showToken} />
+				<p class="leading-none">With token</p>
+			</label>
+			<button
+				class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-xs transition dark:border-gray-800 dark:bg-gray-800"
+				use:copy={selectedSnippet?.content}
+			>
+				<IconCopyCode classNames="text-xs" /> Copy code
+			</button>
+		</div>
+	</div>
+	<pre
+		class="overflow-x-auto rounded-lg border border-gray-200/80 bg-white px-4 py-6 text-sm shadow-xs dark:border-gray-800 dark:bg-gray-800/50">{@html highlight(
+			selectedSnippet?.content,
+			selectedSnippet?.language
+		)}</pre>
 </div>

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { Conversation } from "$lib/components/InferencePlayground/types";
+	import type { Conversation } from "$lib/types";
 
 	import { createEventDispatcher, tick } from "svelte";
 
@@ -10,7 +10,6 @@
 	export let conversation: Conversation;
 	export let loading: boolean;
 	export let viewCode: boolean;
-	export let hfToken: string;
 	export let compareActive: boolean;
 
 	let shouldScrollToBottom = true;
@@ -101,6 +100,6 @@
 			</div>
 		</button>
 	{:else}
-		<CodeSnippets {conversation} {hfToken} on:closeCode />
+		<CodeSnippets {conversation} on:closeCode />
 	{/if}
 </div>

src/lib/components/InferencePlayground/InferencePlaygroundConversationHeader.svelte

@@ -1,16 +1,15 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
+	import type { Conversation, ModelWithTokenizer } from "$lib/types";
 
 	import { createEventDispatcher } from "svelte";
 
-	import { page } from "$app/stores";
+	import { models } from "$lib/stores/models";
+	import Avatar from "../Avatar.svelte";
 	import IconCog from "../Icons/IconCog.svelte";
 	import GenerationConfig from "./InferencePlaygroundGenerationConfig.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import Avatar from "../Avatar.svelte";
-	import { goto } from "$app/navigation";
+	import InferencePlaygroundProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
 
-	export let models: ModelEntryWithTokenizer[];
 	export let conversation: Conversation;
 	export let conversationIdx: number;
 
@@ -18,35 +17,20 @@
 
 	let modelSelectorOpen = false;
 
-	function changeModel(newModelId: ModelEntryWithTokenizer["id"]) {
-		const model = models.find(m => m.id === newModelId);
+	function changeModel(newModelId: ModelWithTokenizer["id"]) {
+		const model = $models.find(m => m.id === newModelId);
 		if (!model) {
 			return;
 		}
 		conversation.model = model;
-
-		const url = new URL($page.url);
-		const queryParamValue = url.searchParams.get("modelId");
-		if (queryParamValue) {
-			const modelIds = queryParamValue.split(",") as [string, string];
-			modelIds[conversationIdx] = newModelId;
-
-			const newQueryParamValue = modelIds.join(",");
-			url.searchParams.set("modelId", newQueryParamValue);
-
-			const parentOrigin = "https://huggingface.co";
-			window.parent.postMessage({ queryString: `modelId=${newQueryParamValue}` }, parentOrigin);
-
-			goto(url.toString(), { replaceState: true });
-		}
+		conversation.provider = undefined;
 	}
 
-	$: [nameSpace] = conversation.model.id.split("/");
+	$: nameSpace = conversation.model.id.split("/")[0] ?? "";
 </script>
 
 {#if modelSelectorOpen}
 	<ModelSelectorModal
-		{models}
 		{conversation}
 		on:modelSelected={e => changeModel(e.detail)}
 		on:close={() => (modelSelectorOpen = false)}
@@ -78,3 +62,14 @@
 		/>
 	</button>
 </div>
+
+<div
+	class="{conversationIdx === 0
+		? 'mr-4 max-sm:ml-4'
+		: 'mx-4'}  mt-2 h-11 text-sm leading-none whitespace-nowrap max-sm:mt-4"
+>
+	<InferencePlaygroundProviderSelect
+		bind:conversation
+		class="rounded-lg border border-gray-200/80 bg-white dark:border-white/5 dark:bg-gray-800/70 dark:hover:bg-gray-800"
+	/>
+</div>

src/lib/components/InferencePlayground/InferencePlaygroundGenerationConfig.svelte

@@ -1,70 +1,12 @@
-<script context="module" lang="ts">
-	export const defaultSystemMessage: { [key: string]: string } = {
-		"Qwen/QwQ-32B-Preview":
-			"You are a helpful and harmless assistant. You are Qwen developed by Alibaba. You should think step-by-step.",
-	} as const;
-</script>
-
 <script lang="ts">
-	import type { Conversation } from "$lib/components/InferencePlayground/types";
+	import type { Conversation } from "$lib/types";
 
 	import { GENERATION_CONFIG_KEYS, GENERATION_CONFIG_SETTINGS } from "./generationConfigSettings";
+	import { customMaxTokens } from "./inferencePlaygroundUtils";
 
 	export let conversation: Conversation;
 	export let classNames = "";
 
-	const customMaxTokens: { [key: string]: number } = {
-		"01-ai/Yi-1.5-34B-Chat": 2048,
-		"HuggingFaceM4/idefics-9b-instruct": 2048,
-		"deepseek-ai/DeepSeek-Coder-V2-Instruct": 16384,
-		"bigcode/starcoder": 8192,
-		"bigcode/starcoderplus": 8192,
-		"HuggingFaceH4/starcoderbase-finetuned-oasst1": 8192,
-		"google/gemma-7b": 8192,
-		"google/gemma-1.1-7b-it": 8192,
-		"google/gemma-2b": 8192,
-		"google/gemma-1.1-2b-it": 8192,
-		"google/gemma-2-27b-it": 8192,
-		"google/gemma-2-9b-it": 4096,
-		"google/gemma-2-2b-it": 8192,
-		"tiiuae/falcon-7b": 8192,
-		"tiiuae/falcon-7b-instruct": 8192,
-		"timdettmers/guanaco-33b-merged": 2048,
-		"mistralai/Mixtral-8x7B-Instruct-v0.1": 32768,
-		"Qwen/Qwen2.5-72B-Instruct": 32768,
-		"Qwen/Qwen2.5-Coder-32B-Instruct": 32768,
-		"meta-llama/Meta-Llama-3-70B-Instruct": 8192,
-		"CohereForAI/c4ai-command-r-plus-08-2024": 32768,
-		"NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO": 32768,
-		"meta-llama/Llama-2-70b-chat-hf": 8192,
-		"HuggingFaceH4/zephyr-7b-alpha": 17432,
-		"HuggingFaceH4/zephyr-7b-beta": 32768,
-		"mistralai/Mistral-7B-Instruct-v0.1": 32768,
-		"mistralai/Mistral-7B-Instruct-v0.2": 32768,
-		"mistralai/Mistral-7B-Instruct-v0.3": 32768,
-		"mistralai/Mistral-Nemo-Instruct-2407": 32768,
-		"meta-llama/Meta-Llama-3-8B-Instruct": 8192,
-		"mistralai/Mistral-7B-v0.1": 32768,
-		"bigcode/starcoder2-3b": 16384,
-		"bigcode/starcoder2-15b": 16384,
-		"HuggingFaceH4/starchat2-15b-v0.1": 16384,
-		"codellama/CodeLlama-7b-hf": 8192,
-		"codellama/CodeLlama-13b-hf": 8192,
-		"codellama/CodeLlama-34b-Instruct-hf": 8192,
-		"meta-llama/Llama-2-7b-chat-hf": 8192,
-		"meta-llama/Llama-2-13b-chat-hf": 8192,
-		"OpenAssistant/oasst-sft-6-llama-30b": 2048,
-		"TheBloke/vicuna-7B-v1.5-GPTQ": 2048,
-		"HuggingFaceH4/starchat-beta": 8192,
-		"bigcode/octocoder": 8192,
-		"vwxyzjn/starcoderbase-triviaqa": 8192,
-		"lvwerra/starcoderbase-gsm8k": 8192,
-		"NousResearch/Hermes-3-Llama-3.1-8B": 16384,
-		"microsoft/Phi-3.5-mini-instruct": 32768,
-		"meta-llama/Llama-3.1-70B-Instruct": 32768,
-		"meta-llama/Llama-3.1-8B-Instruct": 8192,
-	} as const;
-
 	$: modelMaxLength = customMaxTokens[conversation.model.id] ?? conversation.model.tokenizerConfig.model_max_length;
 	$: maxTokens = Math.min(modelMaxLength ?? GENERATION_CONFIG_SETTINGS["max_tokens"].max, 64_000);
 </script>

src/lib/components/InferencePlayground/InferencePlaygroundMessage.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { createEventDispatcher } from "svelte";
-	import type { ConversationMessage } from "./types";
+	import type { ConversationMessage } from "$lib/types";
 
 	export let message: ConversationMessage;
 	export let loading: boolean = false;
@@ -22,7 +22,7 @@
 		{autofocus}
 		bind:value={message.content}
 		placeholder="Enter {message.role} message"
-		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
+		class="resize-none overflow-hidden rounded-sm bg-transparent px-2 py-2.5 ring-gray-100 outline-none group-hover/message:ring-3 hover:resize-y hover:bg-white focus:resize-y focus:bg-white focus:ring-3 @2xl:px-3 dark:ring-gray-600 dark:hover:bg-gray-900 dark:focus:bg-gray-900"
 		rows="1"
 		tabindex="2"
 		on:input={() => {

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -1,54 +1,40 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from "./types";
-
-	import { goto } from "$app/navigation";
-	import { page } from "$app/stores";
+	import type { Conversation, ModelWithTokenizer } from "$lib/types";
 
+	import { models } from "$lib/stores/models";
+	import Avatar from "../Avatar.svelte";
 	import IconCaret from "../Icons/IconCaret.svelte";
 	import ModelSelectorModal from "./InferencePlaygroundModelSelectorModal.svelte";
-	import Avatar from "../Avatar.svelte";
-	import { defaultSystemMessage } from "./InferencePlaygroundGenerationConfig.svelte";
+	import ProviderSelect from "./InferencePlaygroundProviderSelect.svelte";
+	import { defaultSystemMessage } from "./inferencePlaygroundUtils";
 
-	export let models: ModelEntryWithTokenizer[] = [];
 	export let conversation: Conversation;
 
 	let showModelPickerModal = false;
 
-	function changeModel(modelId: ModelEntryWithTokenizer["id"]) {
-		const model = models.find(m => m.id === modelId);
+	// Model
+	function changeModel(modelId: ModelWithTokenizer["id"]) {
+		const model = $models.find(m => m.id === modelId);
 		if (!model) {
 			return;
 		}
 		conversation.model = model;
 		conversation.systemMessage = { role: "system", content: defaultSystemMessage?.[modelId] ?? "" };
-
-		const url = new URL($page.url);
-		url.searchParams.set("modelId", model.id);
-
-		const parentOrigin = "https://huggingface.co";
-		window.parent.postMessage({ queryString: `modelId=${model.id}` }, parentOrigin);
-
-		goto(url.toString(), { replaceState: true });
+		conversation.provider = undefined;
 	}
 
-	$: [nameSpace, modelName] = conversation.model.id.split("/");
+	$: nameSpace = conversation.model.id.split("/")[0] ?? "";
+	$: modelName = conversation.model.id.split("/")[1] ?? "";
+	const id = crypto.randomUUID();
 </script>
 
-{#if showModelPickerModal}
-	<ModelSelectorModal
-		{models}
-		{conversation}
-		on:modelSelected={e => changeModel(e.detail)}
-		on:close={() => (showModelPickerModal = false)}
-	/>
-{/if}
-
 <div class="flex flex-col gap-2">
-	<label for="countries" class="flex items-baseline text-sm font-medium text-gray-900 dark:text-white"
-		>Models<span class="ml-4 font-normal text-gray-400">{models.length}</span>
+	<label for={id} class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
+		Models<span class="text-xs font-normal text-gray-400">{$models.length}</span>
 	</label>
 
 	<button
+		{id}
 		class="relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
 		on:click={() => (showModelPickerModal = true)}
 	>
@@ -62,3 +48,13 @@
 		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
 	</button>
 </div>
+
+{#if showModelPickerModal}
+	<ModelSelectorModal
+		{conversation}
+		on:modelSelected={e => changeModel(e.detail)}
+		on:close={() => (showModelPickerModal = false)}
+	/>
+{/if}
+
+<ProviderSelect bind:conversation />

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -1,30 +1,36 @@
 <script lang="ts">
-	import type { Conversation, ModelEntryWithTokenizer } from "./types";
+	import type { Conversation } from "$lib/types";
 
-	import { createEventDispatcher, tick } from "svelte";
+	import { createEventDispatcher, onMount, tick } from "svelte";
 
-	import { FEATURED_MODELS_IDS } from "./inferencePlaygroundUtils";
+	import { models } from "$lib/stores/models";
 	import IconSearch from "../Icons/IconSearch.svelte";
 	import IconStar from "../Icons/IconStar.svelte";
+	import { getTrending } from "$lib/utils/model";
+	import fuzzysearch from "$lib/utils/search";
 
-	export let models: ModelEntryWithTokenizer[];
 	export let conversation: Conversation;
 
 	let backdropEl: HTMLDivElement;
 	let highlightIdx = 0;
 	let ignoreCursorHighlight = false;
 	let containerEl: HTMLDivElement;
+	let query = "";
 
 	const dispatch = createEventDispatcher<{ modelSelected: string; close: void }>();
 
-	let featuredModels = models.filter(m => FEATURED_MODELS_IDS.includes(m.id));
-	let otherModels = models.filter(m => !FEATURED_MODELS_IDS.includes(m.id));
+	$: trendingModels = getTrending($models);
 
-	if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
-		highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
-	} else {
-		highlightIdx = featuredModels.length + otherModels.findIndex(model => model.id === conversation.model.id);
-	}
+	$: featuredModels = fuzzysearch({ needle: query, haystack: trendingModels, property: "id" });
+	$: otherModels = fuzzysearch({ needle: query, haystack: $models, property: "id" });
+
+	onMount(() => {
+		if (featuredModels.findIndex(model => model.id === conversation.model.id) !== -1) {
+			highlightIdx = featuredModels.findIndex(model => model.id === conversation.model.id);
+		} else {
+			highlightIdx = featuredModels.length + otherModels.findIndex(model => model.id === conversation.model.id);
+		}
+	});
 
 	function handleKeydown(event: KeyboardEvent) {
 		const { key } = event;
@@ -79,20 +85,6 @@
 			dispatch("close");
 		}
 	}
-
-	function filterModels(query: string) {
-		featuredModels = models.filter(m =>
-			query
-				? FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
-				: FEATURED_MODELS_IDS.includes(m.id)
-		);
-
-		otherModels = models.filter(m =>
-			query
-				? !FEATURED_MODELS_IDS.includes(m.id) && m.id.toLocaleLowerCase().includes(query.toLocaleLowerCase().trim())
-				: !FEATURED_MODELS_IDS.includes(m.id)
-		);
-	}
 </script>
 
 <svelte:window on:keydown={handleKeydown} on:mousemove={() => (ignoreCursorHighlight = false)} />
@@ -115,7 +107,7 @@
 					autofocus
 					class="flex h-10 w-full rounded-md bg-transparent py-3 text-sm placeholder-gray-400 outline-hidden"
 					placeholder="Search models ..."
-					on:input={e => filterModels(e.currentTarget.value)}
+					bind:value={query}
 				/>
 			</div>
 			<div class="max-h-[300px] overflow-x-hidden overflow-y-auto">

src/lib/components/InferencePlayground/InferencePlaygroundProviderSelect.svelte

@@ -0,0 +1,102 @@
+<script lang="ts">
+	import type { Conversation } from "$lib/types";
+
+	import { randomPick } from "$lib/utils/array";
+	import { cn } from "$lib/utils/cn";
+	import { createSelect, createSync } from "@melt-ui/svelte";
+	import IconCaret from "../Icons/IconCaret.svelte";
+	import IconProvider from "../Icons/IconProvider.svelte";
+
+	export let conversation: Conversation;
+	let classes: string | undefined = undefined;
+	export { classes as class };
+
+	function reset(providers: typeof conversation.model.inferenceProviderMapping) {
+		const validProvider = providers.find(p => p.provider === conversation.provider);
+		if (validProvider) return;
+		conversation.provider = randomPick(providers)?.provider;
+	}
+
+	$: providers = conversation.model.inferenceProviderMapping;
+	$: reset(providers);
+
+	const {
+		elements: { trigger, menu, option },
+		states: { selected },
+	} = createSelect<string, false>();
+	const sync = createSync({ selected });
+	$: sync.selected(
+		conversation.provider ? { value: conversation.provider } : undefined,
+		p => (conversation.provider = p?.value)
+	);
+
+	const nameMap: Record<string, string> = {
+		"sambanova": "SambaNova",
+		"fal": "fal",
+		"cerebras": "Cerebras",
+		"replicate": "Replicate",
+		"black-forest-labs": "Black Forest Labs",
+		"fireworks-ai": "Fireworks",
+		"together": "Together AI",
+		"nebius": "Nebius AI Studio",
+		"hyperbolic": "Hyperbolic",
+		"novita": "Novita",
+		"cohere": "Nohere",
+		"hf-inference": "HF Inference API",
+	};
+	const UPPERCASE_WORDS = ["hf", "ai"];
+
+	function formatName(provider: string) {
+		if (provider in nameMap) return nameMap[provider];
+
+		const words = provider
+			.toLowerCase()
+			.split("-")
+			.map(word => {
+				if (UPPERCASE_WORDS.includes(word)) {
+					return word.toUpperCase();
+				} else {
+					return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
+				}
+			});
+
+		return words.join(" ");
+	}
+</script>
+
+<div class="flex flex-col gap-2">
+	<!--
+	<label class="flex items-baseline gap-2 text-sm font-medium text-gray-900 dark:text-white">
+		Providers<span class="text-xs font-normal text-gray-400"></span>
+	</label>
+	-->
+
+	<button
+		{...$trigger}
+		use:trigger
+		class={cn(
+			"relative flex items-center justify-between gap-6 overflow-hidden rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight whitespace-nowrap shadow-sm",
+			"hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110",
+			classes
+		)}
+	>
+		<div class="flex items-center gap-1 text-sm text-gray-500 dark:text-gray-300">
+			<IconProvider provider={conversation.provider} />
+			{formatName(conversation.provider ?? "") ?? "loading"}
+		</div>
+		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded-sm size-4 flex-none absolute right-2" />
+	</button>
+
+	<div {...$menu} use:menu class="rounded-lg border bg-gray-100/80 dark:border-gray-700 dark:bg-gray-800">
+		{#each conversation.model.inferenceProviderMapping as { provider } (provider)}
+			<button {...$option({ value: provider })} use:option class="group block w-full p-1 text-sm dark:text-white">
+				<div
+					class="flex items-center gap-2 rounded-md px-2 py-1.5 group-data-[highlighted]:bg-gray-200 dark:group-data-[highlighted]:bg-gray-700"
+				>
+					<IconProvider {provider} />
+					{formatName(provider)}
+				</div>
+			</button>
+		{/each}
+	</div>
+</div>

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -1,11 +1,8 @@
+import type { Conversation, ModelWithTokenizer } from "$lib/types";
+import type { InferenceSnippet } from "@huggingface/tasks";
 import { type ChatCompletionOutputMessage } from "@huggingface/tasks";
-import type { Conversation, ModelEntryWithTokenizer } from "./types";
 
-import { HfInference } from "@huggingface/inference";
-
-export function createHfInference(token: string): HfInference {
-	return new HfInference(token);
-}
+import { HfInference, snippets, type InferenceProvider } from "@huggingface/inference";
 
 export async function handleStreamingResponse(
 	hf: HfInference,
@@ -23,6 +20,7 @@ export async function handleStreamingResponse(
 		{
 			model: model.id,
 			messages,
+			provider: conversation.provider,
 			...conversation.config,
 		},
 		{ signal: abortController.signal }
@@ -47,25 +45,118 @@ export async function handleNonStreamingResponse(
 	const response = await hf.chatCompletion({
 		model: model.id,
 		messages,
+		provider: conversation.provider,
 		...conversation.config,
 	});
 
 	if (response.choices && response.choices.length > 0) {
-		const { message } = response.choices[0];
+		// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+		const { message } = response.choices[0]!;
 		const { completion_tokens } = response.usage;
 		return { message, completion_tokens };
 	}
 	throw new Error("No response from the model");
 }
 
-export function isSystemPromptSupported(model: ModelEntryWithTokenizer) {
-	return model.tokenizerConfig?.chat_template?.includes("system");
+export function isSystemPromptSupported(model: ModelWithTokenizer) {
+	return model?.tokenizerConfig?.chat_template?.includes("system");
 }
 
-export const FEATURED_MODELS_IDS = [
-	"meta-llama/Llama-3.3-70B-Instruct",
-	"meta-llama/Llama-3.1-8B-Instruct",
-	"meta-llama/Llama-3.2-3B-Instruct",
-	"Qwen/Qwen2.5-72B-Instruct",
-	"Qwen/QwQ-32B-Preview",
-];
+export const defaultSystemMessage: { [key: string]: string } = {
+	"Qwen/QwQ-32B-Preview":
+		"You are a helpful and harmless assistant. You are Qwen developed by Alibaba. You should think step-by-step.",
+} as const;
+
+export const customMaxTokens: { [key: string]: number } = {
+	"01-ai/Yi-1.5-34B-Chat": 2048,
+	"HuggingFaceM4/idefics-9b-instruct": 2048,
+	"deepseek-ai/DeepSeek-Coder-V2-Instruct": 16384,
+	"bigcode/starcoder": 8192,
+	"bigcode/starcoderplus": 8192,
+	"HuggingFaceH4/starcoderbase-finetuned-oasst1": 8192,
+	"google/gemma-7b": 8192,
+	"google/gemma-1.1-7b-it": 8192,
+	"google/gemma-2b": 8192,
+	"google/gemma-1.1-2b-it": 8192,
+	"google/gemma-2-27b-it": 8192,
+	"google/gemma-2-9b-it": 4096,
+	"google/gemma-2-2b-it": 8192,
+	"tiiuae/falcon-7b": 8192,
+	"tiiuae/falcon-7b-instruct": 8192,
+	"timdettmers/guanaco-33b-merged": 2048,
+	"mistralai/Mixtral-8x7B-Instruct-v0.1": 32768,
+	"Qwen/Qwen2.5-72B-Instruct": 32768,
+	"Qwen/Qwen2.5-Coder-32B-Instruct": 32768,
+	"meta-llama/Meta-Llama-3-70B-Instruct": 8192,
+	"CohereForAI/c4ai-command-r-plus-08-2024": 32768,
+	"NousResearch/Nous-Hermes-2-Mixtral-8x7B-DPO": 32768,
+	"meta-llama/Llama-2-70b-chat-hf": 8192,
+	"HuggingFaceH4/zephyr-7b-alpha": 17432,
+	"HuggingFaceH4/zephyr-7b-beta": 32768,
+	"mistralai/Mistral-7B-Instruct-v0.1": 32768,
+	"mistralai/Mistral-7B-Instruct-v0.2": 32768,
+	"mistralai/Mistral-7B-Instruct-v0.3": 32768,
+	"mistralai/Mistral-Nemo-Instruct-2407": 32768,
+	"meta-llama/Meta-Llama-3-8B-Instruct": 8192,
+	"mistralai/Mistral-7B-v0.1": 32768,
+	"bigcode/starcoder2-3b": 16384,
+	"bigcode/starcoder2-15b": 16384,
+	"HuggingFaceH4/starchat2-15b-v0.1": 16384,
+	"codellama/CodeLlama-7b-hf": 8192,
+	"codellama/CodeLlama-13b-hf": 8192,
+	"codellama/CodeLlama-34b-Instruct-hf": 8192,
+	"meta-llama/Llama-2-7b-chat-hf": 8192,
+	"meta-llama/Llama-2-13b-chat-hf": 8192,
+	"OpenAssistant/oasst-sft-6-llama-30b": 2048,
+	"TheBloke/vicuna-7B-v1.5-GPTQ": 2048,
+	"HuggingFaceH4/starchat-beta": 8192,
+	"bigcode/octocoder": 8192,
+	"vwxyzjn/starcoderbase-triviaqa": 8192,
+	"lvwerra/starcoderbase-gsm8k": 8192,
+	"NousResearch/Hermes-3-Llama-3.1-8B": 16384,
+	"microsoft/Phi-3.5-mini-instruct": 32768,
+	"meta-llama/Llama-3.1-70B-Instruct": 32768,
+	"meta-llama/Llama-3.1-8B-Instruct": 8192,
+} as const;
+
+// Order of the elements in InferenceModal.svelte is determined by this const
+export const inferenceSnippetLanguages = ["python", "js", "curl"] as const;
+
+export type InferenceSnippetLanguage = (typeof inferenceSnippetLanguages)[number];
+
+const GET_SNIPPET_FN = {
+	curl: snippets.curl.getCurlInferenceSnippet,
+	js: snippets.js.getJsInferenceSnippet,
+	python: snippets.python.getPythonInferenceSnippet,
+} as const;
+
+export type GetInferenceSnippetReturn = (InferenceSnippet & { language: InferenceSnippetLanguage })[];
+
+export function getInferenceSnippet(
+	model: ModelWithTokenizer,
+	provider: InferenceProvider,
+	language: InferenceSnippetLanguage,
+	accessToken: string,
+	opts?: Record<string, unknown>
+): GetInferenceSnippetReturn {
+	const providerId = model.inferenceProviderMapping.find(p => p.provider === provider)?.providerId;
+	const snippetsByClient = GET_SNIPPET_FN[language](
+		{ ...model, inference: "" },
+		accessToken,
+		provider,
+		providerId,
+		opts
+	);
+	return snippetsByClient.map(snippetByClient => ({ ...snippetByClient, language }));
+}
+
+/**
+ * - If language is defined, the function checks if in an inference snippet is available for that specific language
+ */
+export function hasInferenceSnippet(
+	model: ModelWithTokenizer,
+	provider: InferenceProvider,
+	language: InferenceSnippetLanguage
+): boolean {
+	return getInferenceSnippet(model, provider, language, "").length > 0;
+}

src/lib/components/InferencePlayground/types.ts

@@ -1,26 +0,0 @@
-import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
-import type { ModelEntry } from "@huggingface/hub";
-import type { ChatCompletionInputMessage } from "@huggingface/tasks";
-
-export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
-
-export type Conversation = {
-	model: ModelEntryWithTokenizer;
-	config: GenerationConfig;
-	messages: ConversationMessage[];
-	systemMessage: ConversationMessage;
-	streaming: boolean;
-};
-
-export type Session = {
-	conversations: [Conversation] | [Conversation, Conversation];
-};
-
-interface TokenizerConfig {
-	chat_template?: string;
-	model_max_length?: number;
-}
-
-export interface ModelEntryWithTokenizer extends ModelEntry {
-	tokenizerConfig: TokenizerConfig;
-}

src/lib/index.ts

@@ -1 +0,0 @@
-// place files you want to import through the `$lib` alias in this folder.

src/lib/stores/models.ts

@@ -0,0 +1,8 @@
+import { page } from "$app/stores";
+import type { ModelWithTokenizer } from "$lib/types";
+import { readable } from "svelte/store";
+
+export const models = readable<ModelWithTokenizer[]>(undefined, set => {
+	const unsub = page.subscribe($p => set($p.data.models));
+	return unsub;
+});

src/lib/stores/session.ts

@@ -0,0 +1,103 @@
+import { browser } from "$app/environment";
+import { goto } from "$app/navigation";
+import { defaultGenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
+import { defaultSystemMessage } from "$lib/components/InferencePlayground/inferencePlaygroundUtils";
+import { PipelineTag, type Conversation, type ConversationMessage, type Session } from "$lib/types";
+
+import { models } from "$lib/stores/models";
+import { get, writable } from "svelte/store";
+import { getTrending } from "$lib/utils/model";
+
+function createSessionStore() {
+	const store = writable<Session>(undefined, (set, update) => {
+		const searchParams = new URLSearchParams(browser ? window.location.search : undefined);
+
+		const modelIdsFromSearchParam = searchParams.getAll("modelId");
+		const modelsFromSearchParam = modelIdsFromSearchParam?.map(id => get(models).find(model => model.id === id));
+
+		const providersFromSearchParam = searchParams.getAll("provider");
+
+		const startMessageUser: ConversationMessage = { role: "user", content: "" };
+		const systemMessage: ConversationMessage = {
+			role: "system",
+			content: modelIdsFromSearchParam?.[0] ? (defaultSystemMessage?.[modelIdsFromSearchParam[0]] ?? "") : "",
+		};
+
+		const $models = get(models);
+		const featured = getTrending($models);
+
+		set({
+			conversations: [
+				{
+					model: featured[0] ??
+						$models[0] ?? {
+							_id: "",
+							inferenceProviderMapping: [],
+							pipeline_tag: PipelineTag.TextGeneration,
+							trendingScore: 0,
+							tags: ["text-generation"],
+							id: "",
+							tokenizerConfig: {},
+							config: {
+								architectures: [] as string[],
+								model_type: "",
+								tokenizer_config: {},
+							},
+						},
+					config: { ...defaultGenerationConfig },
+					messages: [{ ...startMessageUser }],
+					systemMessage,
+					streaming: true,
+				},
+			],
+		});
+
+		if (modelsFromSearchParam?.length) {
+			const conversations = modelsFromSearchParam.map((model, i) => {
+				return {
+					model,
+					config: { ...defaultGenerationConfig },
+					messages: [{ ...startMessageUser }],
+					systemMessage,
+					streaming: true,
+					provider: providersFromSearchParam?.[i],
+				};
+			}) as [Conversation] | [Conversation, Conversation];
+			update(s => ({ ...s, conversations }));
+		}
+	});
+
+	const update: typeof store.update = cb => {
+		const prevQuery = window.location.search;
+		const query = new URLSearchParams(window.location.search);
+		query.delete("modelId");
+		query.delete("provider");
+
+		store.update($s => {
+			const s = cb($s);
+
+			const modelIds = s.conversations.map(c => c.model.id);
+			modelIds.forEach(m => query.append("modelId", m));
+
+			const providers = s.conversations.map(c => c.provider ?? "hf-inference");
+			providers.forEach(p => query.append("provider", p));
+
+			const newQuery = query.toString();
+			// slice to remove the ? prefix
+			if (newQuery !== prevQuery.slice(1)) {
+				console.log(prevQuery, newQuery);
+				goto(`?${query}`, { replaceState: true });
+			}
+
+			return s;
+		});
+	};
+
+	const set: typeof store.set = (...args) => {
+		update(_ => args[0]);
+	};
+
+	return { ...store, set, update };
+}
+
+export const session = createSessionStore();

src/lib/stores/token.ts

@@ -0,0 +1,34 @@
+import { browser } from "$app/environment";
+import { writable } from "svelte/store";
+
+const key = "hf_token";
+
+function createTokenStore() {
+	const store = writable({ value: "", writeToLocalStorage: true, showModal: false });
+
+	function setValue(token: string) {
+		store.update(s => {
+			if (s.writeToLocalStorage) localStorage.setItem(key, JSON.stringify(token));
+			return { ...s, value: token, showModal: !token.length };
+		});
+	}
+
+	if (browser) {
+		const storedHfToken = localStorage.getItem(key);
+		if (storedHfToken !== null) {
+			setValue(JSON.parse(storedHfToken));
+		}
+	}
+
+	return {
+		...store,
+		setValue,
+		reset() {
+			setValue("");
+			localStorage.removeItem(key);
+			store.update(s => ({ ...s, showModal: true }));
+		},
+	};
+}
+
+export const token = createTokenStore();

src/lib/types.ts

@@ -0,0 +1,158 @@
+import type { GenerationConfig } from "$lib/components/InferencePlayground/generationConfigSettings";
+import type { ChatCompletionInputMessage } from "@huggingface/tasks";
+
+export type ConversationMessage = Omit<ChatCompletionInputMessage, "content"> & { content?: string };
+
+export type Conversation = {
+	model: ModelWithTokenizer;
+	config: GenerationConfig;
+	messages: ConversationMessage[];
+	systemMessage: ConversationMessage;
+	streaming: boolean;
+	provider?: string;
+};
+
+export type Session = {
+	conversations: [Conversation] | [Conversation, Conversation];
+};
+
+interface TokenizerConfig {
+	chat_template?: string;
+	model_max_length?: number;
+}
+
+export type ModelWithTokenizer = Model & {
+	tokenizerConfig: TokenizerConfig;
+};
+
+export type Model = {
+	_id: string;
+	id: string;
+	inferenceProviderMapping: InferenceProviderMapping[];
+	trendingScore: number;
+	config: Config;
+	tags: string[];
+	pipeline_tag: PipelineTag;
+	library_name?: LibraryName;
+};
+
+export type Config = {
+	architectures: string[];
+	model_type: string;
+	tokenizer_config: TokenizerConfig;
+	auto_map?: AutoMap;
+	quantization_config?: QuantizationConfig;
+};
+
+export type AutoMap = {
+	AutoConfig: string;
+	AutoModel?: string;
+	AutoModelForCausalLM: string;
+	AutoModelForSequenceClassification?: string;
+	AutoModelForTokenClassification?: string;
+	AutoModelForQuestionAnswering?: string;
+};
+
+export type QuantizationConfig = {
+	quant_method: string;
+	bits?: number;
+};
+
+// export type TokenizerConfig = {
+// 	bos_token?: Token | BosTokenEnum | null;
+// 	chat_template: ChatTemplateElement[] | string;
+// 	eos_token: Token | EOSTokenEnum;
+// 	pad_token?: Token | null | string;
+// 	unk_token?: Token | UnkTokenEnum | null;
+// 	use_default_system_prompt?: boolean;
+// };
+
+export type Token = {
+	__type: Type;
+	content: Content;
+	lstrip: boolean;
+	normalized: boolean;
+	rstrip: boolean;
+	single_word: boolean;
+};
+
+export enum Type {
+	AddedToken = "AddedToken",
+}
+
+export enum Content {
+	BeginOfSentence = "<｜begin▁of▁sentence｜>",
+	ContentS = "</s>",
+	EndOfSentence = "<｜end▁of▁sentence｜>",
+	S = "<s>",
+	Unk = "<unk>",
+}
+
+export enum BosTokenEnum {
+	BeginOfText = "<|begin_of_text|>",
+	Bos = "<bos>",
+	BosToken = "<BOS_TOKEN>",
+	Endoftext = "<|endoftext|>",
+	IMStart = "<|im_start|>",
+	S = "<s>",
+	Startoftext = "<|startoftext|>",
+}
+
+export type ChatTemplateElement = {
+	name: string;
+	template: string;
+};
+
+export enum EOSTokenEnum {
+	EOS = "<eos>",
+	EndOfText = "<|end_of_text|>",
+	EndOfTurnToken = "<|END_OF_TURN_TOKEN|>",
+	Endoftext = "<|endoftext|>",
+	EotID = "<|eot_id|>",
+	IMEnd = "<|im_end|>",
+	S = "</s>",
+}
+
+export enum UnkTokenEnum {
+	Endoftext = "<|endoftext|>",
+	Unk = "<unk>",
+}
+
+export type InferenceProviderMapping = {
+	provider: Provider;
+	providerId: string;
+	status: Status;
+	task: Task;
+};
+
+export enum Provider {
+	Cerebras = "cerebras",
+	FalAI = "fal-ai",
+	FireworksAI = "fireworks-ai",
+	HFInference = "hf-inference",
+	Hyperbolic = "hyperbolic",
+	Nebius = "nebius",
+	Novita = "novita",
+	Replicate = "replicate",
+	Sambanova = "sambanova",
+	Together = "together",
+}
+
+export enum Status {
+	Live = "live",
+	Staging = "staging",
+}
+
+export enum Task {
+	Conversational = "conversational",
+}
+
+export enum LibraryName {
+	Mlx = "mlx",
+	Transformers = "transformers",
+	Vllm = "vllm",
+}
+
+export enum PipelineTag {
+	TextGeneration = "text-generation",
+}

src/lib/utils/array.ts

@@ -0,0 +1,7 @@
+export function last<T>(arr: T[]): T | undefined {
+	return arr[arr.length - 1];
+}
+
+export function randomPick<T>(arr: T[]): T | undefined {
+	return arr[Math.floor(Math.random() * arr.length)];
+}

src/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+	return twMerge(clsx(inputs));
+}

src/lib/utils/effect.ts

@@ -0,0 +1,51 @@
+import type { Stores, StoresValues } from "svelte/store";
+import { derived } from "svelte/store";
+import { safeOnDestroy } from "./lifecycle";
+import { noop } from "./noop";
+
+type EffectOptions = {
+	/**
+	 * Whether to skip the first run
+	 * @default undefined
+	 */
+	skipFirstRun?: boolean;
+};
+
+/**
+ * A utility function that creates an effect from a set of stores and a function.
+ * The effect is automatically cleaned up when the component is destroyed.
+ *
+ * @template S - The type of the stores object
+ * @param stores - The stores object to derive from
+ * @param fn - The function to run when the stores change
+ * @param opts {@link EffectOptions}
+ * @returns A function that can be used to unsubscribe the effect
+ */
+export function effect<S extends Stores>(
+	stores: S,
+	fn: (values: StoresValues<S>) => (() => void) | void,
+	opts: EffectOptions = {}
+): () => void {
+	const { skipFirstRun } = opts;
+	let isFirstRun = true;
+	let cb: (() => void) | void = undefined;
+
+	// Create a derived store that contains the stores object and an onUnsubscribe function
+	const destroy = derived(stores, stores => {
+		cb?.();
+		if (isFirstRun && skipFirstRun) {
+			isFirstRun = false;
+		} else {
+			cb = fn(stores);
+		}
+	}).subscribe(noop);
+
+	const unsub = () => {
+		destroy();
+		cb?.();
+	};
+
+	// Automatically unsubscribe the effect when the component is destroyed
+	safeOnDestroy(unsub);
+	return unsub;
+}

src/lib/utils/lifecycle.ts

@@ -0,0 +1,17 @@
+import { onDestroy, onMount } from "svelte";
+
+export const safeOnMount = (fn: (...args: unknown[]) => unknown) => {
+	try {
+		onMount(fn);
+	} catch {
+		return fn;
+	}
+};
+
+export const safeOnDestroy = (fn: (...args: unknown[]) => unknown) => {
+	try {
+		onDestroy(fn);
+	} catch {
+		return fn;
+	}
+};

src/lib/utils/model.ts

@@ -0,0 +1,5 @@
+import type { ModelWithTokenizer } from "$lib/types";
+
+export function getTrending(models: ModelWithTokenizer[], limit = 5) {
+	return models.toSorted((a, b) => b.trendingScore - a.trendingScore).slice(0, limit);
+}

src/lib/utils/noop.ts

@@ -0,0 +1,6 @@
+/**
+ * A no operation function (does nothing)
+ */
+export function noop() {
+	// do nothing
+}

src/lib/utils/object.ts

@@ -0,0 +1,14 @@
+// typed Object.keys
+export function keys<T extends object>(o: T): (keyof T)[] {
+	return Object.keys(o) as (keyof T)[];
+}
+
+// typed Object.entries
+export function entries<T extends object>(o: T): [keyof T, T[keyof T]][] {
+	return Object.entries(o) as [keyof T, T[keyof T]][];
+}
+
+// typed Object.fromEntries
+export function fromEntries<T extends object>(entries: [keyof T, T[keyof T]][]): T {
+	return Object.fromEntries(entries) as T;
+}

src/lib/utils/platform.ts

@@ -0,0 +1,3 @@
+export function isMac() {
+	return navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+}

src/lib/utils/search.ts

@@ -0,0 +1,64 @@
+/**
+ * Generic fuzzy search function that searches through arrays and returns matching items
+ *
+ * @param options Configuration object for the fuzzy search
+ * @returns Array of items that match the search criteria
+ */
+export default function fuzzysearch<T>(options: {
+	needle: string;
+	haystack: T[];
+	property: keyof T | ((item: T) => string);
+}): T[] {
+	const { needle, haystack, property } = options;
+
+	if (!Array.isArray(haystack)) {
+		throw new Error("Haystack must be an array");
+	}
+
+	if (!property) {
+		throw new Error("Property selector is required");
+	}
+
+	// Convert needle to lowercase for case-insensitive matching
+	const lowerNeedle = needle.toLowerCase();
+
+	// Filter the haystack to find matching items
+	return haystack.filter(item => {
+		// Extract the string value from the item based on the property selector
+		const value = typeof property === "function" ? property(item) : String(item[property]);
+
+		// Convert to lowercase for case-insensitive matching
+		const lowerValue = value.toLowerCase();
+
+		// Perform the fuzzy search
+		return fuzzyMatchString(lowerNeedle, lowerValue);
+	});
+}
+
+/**
+ * Internal helper function that performs the actual fuzzy string matching
+ */
+function fuzzyMatchString(needle: string, haystack: string): boolean {
+	const hlen = haystack.length;
+	const nlen = needle.length;
+
+	if (nlen > hlen) {
+		return false;
+	}
+
+	if (nlen === hlen) {
+		return needle === haystack;
+	}
+
+	outer: for (let i = 0, j = 0; i < nlen; i++) {
+		const nch = needle.charCodeAt(i);
+		while (j < hlen) {
+			if (haystack.charCodeAt(j++) === nch) {
+				continue outer;
+			}
+		}
+		return false;
+	}
+
+	return true;
+}

src/lib/utils/store.ts

@@ -0,0 +1,9 @@
+import { browser } from "$app/environment";
+import { page } from "$app/stores";
+import { readable, type Writable } from "svelte/store";
+
+export function partialSet<T extends Record<string, unknown>>(store: Writable<T>, partial: Partial<T>) {
+	store.update(s => ({ ...s, ...partial }));
+}
+
+export const safePage = browser ? page : readable(undefined);

src/routes/+page.server.ts

@@ -1,11 +1,10 @@
-import type { ModelEntryWithTokenizer } from "$lib/components/InferencePlayground/types";
-import type { ModelEntry } from "@huggingface/hub";
-import type { PageServerLoad } from "./$types";
 import { env } from "$env/dynamic/private";
+import type { Model, ModelWithTokenizer } from "$lib/types";
+import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ fetch }) => {
 	const apiUrl =
-		"https://huggingface.co/api/models?pipeline_tag=text-generation&inference_provider=hf-inference&filter=conversational";
+		"https://huggingface.co/api/models?pipeline_tag=text-generation&filter=conversational&inference_provider=all&limit=100&expand[]=inferenceProviderMapping&expand[]=config&expand[]=library_name&expand[]=pipeline_tag&expand[]=tags&expand[]=mask_token&expand[]=trendingScore";
 	const HF_TOKEN = env.HF_TOKEN;
 
 	const res = await fetch(apiUrl, {
@@ -17,7 +16,7 @@ export const load: PageServerLoad = async ({ fetch }) => {
 		console.error(`Error fetching warm models`, res.status, res.statusText);
 		return { models: [] };
 	}
-	const compatibleModels: ModelEntry[] = await res.json();
+	const compatibleModels: Model[] = await res.json();
 	compatibleModels.sort((a, b) => a.id.toLowerCase().localeCompare(b.id.toLowerCase()));
 
 	const promises = compatibleModels.map(async model => {
@@ -32,10 +31,10 @@ export const load: PageServerLoad = async ({ fetch }) => {
 			return null; // Ignore failed requests by returning null
 		}
 		const tokenizerConfig = await res.json();
-		return { ...model, tokenizerConfig } satisfies ModelEntryWithTokenizer;
+		return { ...model, tokenizerConfig } satisfies ModelWithTokenizer;
 	});
 
-	const models: ModelEntryWithTokenizer[] = (await Promise.all(promises)).filter(model => model !== null);
+	const models: ModelWithTokenizer[] = (await Promise.all(promises)).filter(model => model !== null);
 
 	return { models };
 };

src/routes/+page.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
-	export let data;
 	import InferencePlayground from "$lib/components/InferencePlayground/InferencePlayground.svelte";
 </script>
 
-<InferencePlayground models={data.models} />
+<InferencePlayground />

tsconfig.json

@@ -9,7 +9,8 @@
 		"skipLibCheck": true,
 		"sourceMap": true,
 		"strict": true,
-		"target": "ES2018"
+		"target": "ES2018",
+		"noUncheckedIndexedAccess": true
 	},
 	"exclude": ["vite.config.ts"]
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias