format

Author: mishig25

src/lib/components/InferencePlayground/InferencePlaygroundCodeSnippets.svelte

@@ -293,17 +293,17 @@ print(output.choices[0].message)`,
 	</div>
 
 	{#each snippetsByLanguage[selectedLanguage] as { label, code, language, needsToken }}
-		<div class="flex items-center justify-between px-2 pb-4 pt-6 ">
+		<div class="flex items-center justify-between px-2 pb-4 pt-6">
 			<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">
+					<label class="flex select-none items-center gap-x-1.5 text-sm">
 						<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 bg-white border dark:border-gray-800 shadow-sm px-1.5 py-0.5 text-sm transition dark:bg-gray-800"
+					class="flex items-center gap-x-2 rounded-md border bg-white px-1.5 py-0.5 text-sm shadow-sm transition dark:border-gray-800 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 classNames="text-xs"/> 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-3.5 md:px-6 py-6 hover:bg-gray-50 dark:hover:bg-gray-800/50"
+			class="flex px-3.5 py-6 hover:bg-gray-50 md:px-6 dark:hover:bg-gray-800/50"
 			on:click={() => dispatch("addMessage")}
 			disabled={loading}
 		>

src/lib/components/InferencePlayground/InferencePlaygroundHFTokenModal.svelte

@@ -78,13 +78,13 @@
 			</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 2xl:text-balance">
+				<p class="mb-5 text-base leading-relaxed text-gray-800 2xl:text-balance dark:text-gray-300">
 					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
 					><br /> Your token is kept safe by only being used from your browser.
 				</p>
 				<div>
-					<label for="hf-token" class="mb-3 block text-smd font-medium text-gray-900 dark:text-white "
+					<label for="hf-token" class="text-smd mb-3 block font-medium text-gray-900 dark:text-white"
 						>Hugging Face Token</label
 					>
 					<input
@@ -96,11 +96,10 @@
 						class="block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-sm text-gray-900 focus:border-blue-500 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:text-white dark:placeholder-gray-400 dark:focus:border-blue-500 dark:focus:ring-blue-500"
 					/>
 				</div>
-				<label class="flex items-center gap-x-1.5 text-gray-900 dark:text-gray-200 mt-4">
+				<label class="mt-4 flex items-center gap-x-1.5 text-gray-900 dark:text-gray-200">
 					<input type="checkbox" bind:checked={storeLocallyHfToken} />
-					<p class="leading-none text-sm">
-						Save to local storage for future use
-				</label>
+					<p class="text-sm leading-none">Save to local storage for future use</p></label
+				>
 			</div>
 
 			<!-- Modal footer -->

src/lib/components/InferencePlayground/InferencePlaygroundModelSelector.svelte

@@ -54,7 +54,7 @@
 	</label>
 
 	<button
-		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"
+		class="relative 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 hover:brightness-95 dark:border-gray-700 dark:bg-gray-800 dark:hover:brightness-110"
 		on:click={() => (showModelPickerModal = true)}
 	>
 		<div class="flex flex-col items-start">

tailwind.config.ts

@@ -3,7 +3,7 @@ import containerQueries from "@tailwindcss/container-queries";
 
 export default {
 	content: ["./src/**/*.{html,js,svelte,ts}"],
-	darkMode: 'selector',
+	darkMode: "selector",
 	theme: {
 		extend: {},
 	},