misc

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -59,7 +59,7 @@
 		on:keydown={handleKeydown}
 	>
 		<form on:submit|preventDefault class="relative rounded-lg bg-white shadow dark:bg-gray-900">
-			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-600">
+			<div class="flex items-center justify-between rounded-t border-b p-4 md:px-5 md:py-4 dark:border-gray-800">
 				<h3 class="flex items-center gap-2.5 text-lg font-semibold text-gray-900 dark:text-white">
 					<img
 						alt="Hugging Face's logo"
@@ -78,9 +78,9 @@
 			</div>
 			<!-- Modal body -->
 			<div class="p-4 md:p-5">
-				<p class="text-base leading-relaxed text-gray-800  dark:text-gray-300 mb-5">
+				<p class="text-base leading-relaxed text-gray-800  dark:text-gray-300 mb-5 2xl:text-balance">
 					You need a free Hugging Face token to use this application. <strong class="font-semibold"
-						>Make sure you create a token with Gated models access and Inference API permissions.</strong
+						>Make sure you create a token with Inference API permission.</strong
 					><br /> Your token is kept safe by only being used from your browser.
 				</p>
 				<div>
@@ -104,9 +104,9 @@
 			</div>
 
 			<!-- Modal footer -->
-			<div class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-600">
+			<div class="flex items-center justify-between rounded-b border-t border-gray-200 p-4 md:p-5 dark:border-gray-800">
 				<a
-					href="https://huggingface.co/settings/tokens/new?globalPermissions=inference.serverless.write&canReadGatedRepos=true&tokenType=fineGrained"
+					href="https://huggingface.co/settings/tokens/new?globalPermissions=inference.serverless.write&tokenType=fineGrained"
 					tabindex="-1"
 					target="_blank"
 					class="rounded-lg border border-gray-200 bg-white px-5 py-2.5 text-sm font-medium text-gray-900 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:outline-none focus:ring-4 focus:ring-gray-100 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white dark:focus:ring-gray-700"

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -54,7 +54,7 @@
 	</label>
 
 	<button
-		class="flex items-center justify-between gap-6 overflow-hidden whitespace-nowrap rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight shadow dark:border-gray-700 dark:bg-gray-800"
+		class="flex items-center justify-between relative gap-6 overflow-hidden whitespace-nowrap hover:brightness-95 dark:hover:brightness-110 rounded-lg border bg-gray-100/80 px-3 py-1.5 leading-tight shadow dark:border-gray-700 dark:bg-gray-800"
 		on:click={() => (showModelPickerModal = true)}
 	>
 		<div class="flex flex-col items-start">
@@ -66,6 +66,6 @@
 			</div>
 			<div>{modelName}</div>
 		</div>
-		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded" />
+		<IconCaret classNames="text-xl bg-gray-100 dark:bg-gray-600 rounded size-4 flex-none absolute right-2" />
 	</button>
 </div>

src/lib/components/InferencePlayground/InferencePlaygroundModelSelectorModal.svelte

@@ -97,6 +97,7 @@
 
 <svelte:window on:keydown={handleKeydown} on:mousemove={() => (ignoreCursorHighlight = false)} />
 
+<!-- svelte-ignore a11y-no-static-element-interactions a11y-click-events-have-key-events -->
 <div
 	class="fixed inset-0 z-10 flex h-screen items-start justify-center bg-black/85 pt-32"
 	bind:this={backdropEl}
@@ -117,7 +118,7 @@
 				/>
 			</div>
 			<div class="max-h-[300px] overflow-y-auto overflow-x-hidden">
-				<div class="p-1">
+				<div>
 					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Trending</div>
 					<div>
 						{#each featuredModels as model, idx}
@@ -135,15 +136,14 @@
 								<IconStar classNames="lucide lucide-star mr-2 h-4 w-4 text-yellow-400" />
 								<span class="inline-flex items-center"
 									><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
-										class="mx-1 text-black dark:text-white">/</span
+										class="mx-1 text-gray-300 dark:text-gray-700">/</span
 									><span class="text-black dark:text-white">{modelName}</span></span
 								>
 							</button>
 						{/each}
 					</div>
 				</div>
-				<div class="mx-1 h-px bg-gray-200 dark:bg-gray-700"></div>
-				<div class="p-1">
+				<div>
 					<div class="px-2 py-1.5 text-xs font-medium text-gray-500">Other Models</div>
 					<div>
 						{#each otherModels as model, _idx}
@@ -161,7 +161,7 @@
 							>
 								<span class="inline-flex items-center"
 									><span class="text-gray-500 dark:text-gray-400">{nameSpace}</span><span
-										class="mx-1 text-black dark:text-white">/</span
+										class="mx-1 text-gray-300 dark:text-gray-700">/</span
 									><span class="text-black dark:text-white">{modelName}</span></span
 								>
 							</button>

src/lib/components/InferencePlayground/inferencePlaygroundUtils.ts

@@ -68,7 +68,9 @@ export function isSystemPromptSupported(model: ModelEntryWithTokenizer) {
 }
 
 export const FEATUED_MODELS_IDS = [
-	"meta-llama/Meta-Llama-3-70B-Instruct",
-	"google/gemma-1.1-7b-it",
-	"mistralai/Mixtral-8x7B-Instruct-v0.1",
+	"meta-llama/Meta-Llama-3.1-70B-Instruct",
+	"meta-llama/Meta-Llama-3.1-8B-Instruct",
+	"google/gemma-2-9b-it",
+	"mistralai/Mistral-7B-Instruct-v0.3",
+	"mistralai/Mistral-Nemo-Instruct-2407",
 ];