Added first token latency and replaced latency with total generation time.

src/lib/components/InferencePlayground/InferencePlayground.svelte

@@ -42,7 +42,8 @@
 	let viewSettings = false;
 	let showTokenModal = false;
 	let loading = false;
-	let latency = 0;
+	let latency = 0; // Renamed to total generation time
+	let firstTokenLatency = 0; // New variable for first token latency
 	let generatedTokensCount = 0;
 	let abortController: AbortController | undefined = undefined;
 	let waitForNonStreaming = true;
@@ -91,12 +92,16 @@
 
 		(document.activeElement as HTMLElement).blur();
 		loading = true;
+		firstTokenLatency = 0; // Reset before each submission
+		generatedTokensCount = 0; // Reset before each submission
+
 
 		try {
 			const startTime = performance.now();
 			const hf = createHfInference(hfToken);
 
 			if (conversation.streaming) {
+				let firstTokenReceived = false; // Flag to track first token
 				const streamingMessage = { role: "assistant", content: "" };
 				conversation.messages = [...conversation.messages, streamingMessage];
 				abortController = new AbortController();
@@ -109,6 +114,11 @@
 							streamingMessage.content = content;
 							conversation.messages = [...conversation.messages];
 							generatedTokensCount += 1;
+
+							if (!firstTokenReceived) { // Check if it's the first token
+								firstTokenLatency = Math.round(performance.now() - startTime);
+								firstTokenReceived = true;
+							}
 						}
 					},
 					abortController
@@ -123,11 +133,11 @@
 				if (waitForNonStreaming) {
 					conversation.messages = [...conversation.messages, newMessage];
 					generatedTokensCount += newTokensCount;
+					firstTokenLatency = latency; //In non-streaming, first token latency equals total latency.
 				}
 			}
 
-			const endTime = performance.now();
-			latency = Math.round(endTime - startTime);
+			latency = Math.round(performance.now() - startTime); // Total generation time
 		} catch (error) {
 			if (conversation.messages.at(-1)?.role === "assistant" && !conversation.messages.at(-1)?.content?.trim()) {
 				conversation.messages.pop();
@@ -261,7 +271,9 @@
 				<IconDelete />
 			</button>
 			<div class="flex-1 items-center justify-center text-center text-sm text-gray-500">
-				<span class="max-xl:hidden">{generatedTokensCount} tokens · Latency {latency}ms</span>
+				<span class="max-xl:hidden">
+					{generatedTokensCount} tokens · First Token: {firstTokenLatency}ms · Total Generation: {latency}ms
+				</span>
 			</div>
 			<button
 				type="button"
@@ -269,8 +281,8 @@
 				class="flex h-[39px] items-center gap-2 rounded-lg border border-gray-200 bg-white px-3 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"
 			>
 				<IconCode />
-				{!viewCode ? "View Code" : "Hide Code"}</button
-			>
+				{!viewCode ? "View Code" : "Hide Code"}
+			</button>
 			<button
 				on:click={() => {
 					viewCode = false;
@@ -357,4 +369,4 @@
 >
 	<IconInfo classNames="text-xs" />
 	Give feedback
-</a>
+</a>