style

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -297,13 +297,13 @@ print(output.choices[0].message)`,
 			<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">
+					<label class="flex items-center gap-x-1.5 text-sm select-none">
 						<input type="checkbox" bind:checked={showToken} />
-						<p class="leading-none">Show token</p>
+						<p class="leading-none">With token</p>
 					</label>
 				{/if}
 				<button
-					class="flex items-center gap-x-1.5 rounded-md bg-white border shadow-sm px-1.5 py-0.5 text-sm transition dark:bg-gray-950/80"
+					class="flex items-center gap-x-2 rounded-md bg-white border dark:border-gray-800 shadow-sm px-1.5 py-0.5 text-sm transition dark:bg-gray-800"
 					on:click={e => {
 						const el = e.currentTarget;
 						el.classList.add("text-green-500");
@@ -316,7 +316,7 @@ print(output.choices[0].message)`,
 						}, 400);
 					}}
 				>
-					<IconCopyCode /> Copy code
+					<IconCopyCode classNames="text-xs"/> Copy code
 				</button>
 			</div>
 		</div>

src/lib/components/InferencePlayground/InferencePlaygroundConversation.svelte

@@ -49,7 +49,7 @@
 		{/each}
 
 		<button
-			class="flex px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+			class="flex px-3.5 md:px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
 			on:click={() => dispatch("addMessage")}
 			disabled={loading}
 		>

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -78,9 +78,9 @@
 			</div>
 			<!-- Modal body -->
 			<div class="p-4 md:p-5">
-				<p class="text-base leading-relaxed text-gray-800 2xl:text-balance dark:text-gray-400 mb-5">
+				<p class="text-base leading-relaxed text-gray-800  dark:text-gray-300 mb-5">
 					You need a free Hugging Face token to use this application. <strong class="font-semibold"
-						>Make sure you create a token with Inference API permission.</strong
+						>Make sure you create a token with Gated models access and Inference API permissions.</strong
 					><br /> Your token is kept safe by only being used from your browser.
 				</p>
 				<div>
@@ -106,7 +106,7 @@
 			<!-- 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">
 				<a
-					href="https://huggingface.co/settings/tokens/new?globalPermissions=inference.serverless.write&tokenType=fineGrained"
+					href="https://huggingface.co/settings/tokens/new?globalPermissions=inference.serverless.write&canReadGatedRepos=true&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"