feat: Displays slot usage details in the UI above the Chat Form

Author: allozaur

tools/server/webui/src/lib/components/app/SlotsInfo.svelte

@@ -0,0 +1,90 @@
+<script lang="ts">
+	import { useProcessingState } from '$lib/hooks/use-processing-state.svelte';
+	import { isLoading } from '$lib/stores/chat.svelte';
+	import { onMount } from 'svelte';
+
+	const processingState = useProcessingState();
+
+	let showSlotsInfo = $derived(isLoading());
+
+	let processingDetails = $derived(processingState.getProcessingDetails());
+
+	onMount(() => {
+		processingState.startMonitoring();
+		
+		return () => {
+			processingState.stopMonitoring();
+		};
+	});
+
+	$effect(() => {
+		if (isLoading()) {
+			processingState.startMonitoring();
+		} else {
+			processingState.stopMonitoring();
+		}
+	});
+</script>
+
+<div 
+	class="slots-info-container"
+	class:visible={showSlotsInfo}
+>
+	<div class="slots-info-content">
+		{#each processingDetails as detail (detail)}
+			<span class="slots-info-detail">{detail}</span>
+		{/each}
+	</div>
+</div>
+
+<style>
+	.slots-info-container {
+		position: sticky;
+		top: 0;
+		z-index: 10;
+		background: var(--background);
+		backdrop-filter: blur(8px);
+		background: rgba(var(--background-rgb), 0.95);
+		padding: 0.75rem 1rem;
+		margin-bottom: 1rem;
+		opacity: 0;
+		transform: translateY(-100%);
+		transition: opacity 300ms ease-out, transform 300ms ease-out;
+	}
+
+	.slots-info-container.visible {
+		opacity: 1;
+		transform: translateY(0);
+	}
+
+	.slots-info-content {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 1rem;
+		justify-content: center;
+		max-width: 48rem;
+		margin: 0 auto;
+	}
+
+	.slots-info-detail {
+		color: var(--muted-foreground);
+		font-size: 0.75rem;
+		padding: 0.25rem 0.75rem;
+		background: var(--muted);
+		border-radius: 0.375rem;
+		font-family: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
+		white-space: nowrap;
+	}
+
+	@media (max-width: 768px) {
+		.slots-info-content {
+			gap: 0.5rem;
+		}
+		
+		.slots-info-detail {
+			font-size: 0.7rem;
+			padding: 0.2rem 0.5rem;
+		}
+	}
+</style>

tools/server/webui/src/lib/components/app/chat/ChatMessages/ChatMessage.svelte

@@ -211,20 +211,12 @@
 			/>
 		{/if}
 
-		{#if message?.role === 'assistant' && !message.content && isLoading()}
+		{#if message?.role === 'assistant' && isLoading() && !message?.content?.trim()}
 			<div class="w-full max-w-[48rem] mt-6" in:fade>
 				<div class="processing-container">
 					<span class="processing-text">
 						{processingState.getProcessingMessage()}
 					</span>
-					
-					{#if processingState.shouldShowDetails()}
-						<div class="processing-details">
-							{#each processingState.getProcessingDetails() as detail}
-								<span class="processing-detail">{detail}</span>
-							{/each}
-						</div>
-					{/if}
 				</div>
 			</div>
 		{/if}

tools/server/webui/src/lib/components/app/chat/ChatScreen/ChatScreen.svelte

@@ -5,7 +5,7 @@
 	import { isFileTypeSupported } from '$lib/constants/supported-file-types';
 	import { filterFilesByModalities } from '$lib/utils/modality-file-validation';
 	import { supportsVision, supportsAudio, serverError, serverLoading } from '$lib/stores/server.svelte';
-	import { ChatForm, ChatScreenHeader, ChatMessages, ServerInfo, ServerErrorSplash, ServerLoadingSplash } from '$lib/components/app';
+	import { ChatForm, ChatScreenHeader, ChatMessages, ServerInfo, ServerErrorSplash, ServerLoadingSplash, SlotsInfo } from '$lib/components/app';
 	import {
 		activeMessages,
 		activeConversation,
@@ -23,7 +23,6 @@
 	import { deleteConversation } from '$lib/stores/chat.svelte';
 	import { goto } from '$app/navigation';
 
-
 	let { showCenteredEmpty = false } = $props();
 	let chatScrollContainer: HTMLDivElement | undefined = $state();
 	let scrollInterval: ReturnType<typeof setInterval> | undefined;
@@ -251,6 +250,8 @@
 		<ChatMessages class="mb-16 md:mb-24" messages={activeMessages()} />
 
 		<div class="sticky bottom-0 left-0 right-0 mt-auto" in:slide={{ duration: 150, axis: 'y' }}>
+			<SlotsInfo />
+
 			<div class="conversation-chat-form rounded-t-3xl pb-4">
 				<ChatForm
 					isLoading={isLoading()}

tools/server/webui/src/lib/components/app/index.ts

@@ -34,3 +34,4 @@ export { default as ServerStatus } from './ServerStatus.svelte';
 export { default as ServerErrorSplash } from './ServerErrorSplash.svelte';
 export { default as ServerLoadingSplash } from './ServerLoadingSplash.svelte';
 export { default as ServerInfo } from './ServerInfo.svelte';
+export { default as SlotsInfo } from './SlotsInfo.svelte';

tools/server/webui/src/lib/hooks/use-processing-state.svelte.ts

@@ -1,5 +1,6 @@
 import { slotsService } from '$lib/services/slots';
 import type { ApiProcessingState } from '$lib/types/api';
+import { config } from '$lib/stores/settings.svelte';
 
 export function useProcessingState() {
 	let processingState = $state<ApiProcessingState | null>(null);
@@ -63,11 +64,16 @@ export function useProcessingState() {
 		}
 
 		const details: string[] = [];
+		const currentConfig = config(); // Get fresh config each time
 
 		if (processingState.contextUsed > 0) {
 			const contextPercent = Math.round((processingState.contextUsed / processingState.contextTotal) * 100);
 			details.push(`Context: ${processingState.contextUsed}/${processingState.contextTotal} (${contextPercent}%)`);
 		}
+		
+		if (currentConfig.showTokensPerSecond && processingState.tokensPerSecond && processingState.tokensPerSecond > 0) {
+			details.push(`${processingState.tokensPerSecond.toFixed(1)} tokens/sec`);
+		}
 
 		if (processingState.temperature !== 0.8) {
 			details.push(`Temperature: ${processingState.temperature.toFixed(1)}`);

tools/server/webui/src/lib/services/chat.ts

@@ -31,7 +31,7 @@ export class ChatService {
 			repeat_last_n, repeat_penalty, presence_penalty, frequency_penalty,
 			dry_multiplier, dry_base, dry_allowed_length, dry_penalty_last_n,
 			// Other parameters
-			samplers, custom
+			samplers, custom, timings_per_token
 		} = options;
 
 		// Cancel any ongoing request and create a new abort controller
@@ -78,6 +78,9 @@ export class ChatService {
 			requestBody.samplers = typeof samplers === 'string' ? samplers.split(';').filter((s: string) => s.trim()) : samplers;
 		}
 
+		// Add timing parameters if provided
+		if (timings_per_token !== undefined) requestBody.timings_per_token = timings_per_token;
+
 		// Add custom parameters if provided
 		if (custom) {
 			try {

tools/server/webui/src/lib/services/slots.ts

@@ -7,6 +7,8 @@ export class SlotsService {
 	private callbacks: Set<(state: ApiProcessingState) => void> = new Set();
 	private slotsAvailable: boolean | null = null;
 	private slotsEndpointSupported: boolean | null = null;
+	private lastTokenCount: number = 0;
+	private lastTimestamp: number = 0;
 
 	constructor(pollingInterval = 500) {
 		this.pollingInterval = pollingInterval;
@@ -141,7 +143,8 @@ export class SlotsService {
 				temperature: 0.8,
 				topP: 0.95,
 				speculative: false,
-				hasNextToken: false
+				hasNextToken: false,
+				tokensPerSecond: 0
 			};
 		}
 
@@ -159,6 +162,29 @@ export class SlotsService {
 		const promptTokens = Math.floor(activeSlot.prompt.length / 4); // Rough estimate
 		const contextUsed = promptTokens + activeSlot.next_token.n_decoded;
 
+		// Calculate tokens per second
+		let tokensPerSecond = 0;
+		const currentTime = Date.now();
+		const currentTokens = activeSlot.next_token.n_decoded;
+		
+		if (status === 'generating' && this.lastTimestamp > 0 && currentTokens > this.lastTokenCount) {
+			const timeDiff = (currentTime - this.lastTimestamp) / 1000; // Convert to seconds
+			const tokenDiff = currentTokens - this.lastTokenCount;
+			if (timeDiff > 0) {
+				tokensPerSecond = tokenDiff / timeDiff;
+			}
+		}
+		
+		// Update tracking for next calculation
+		if (status === 'generating') {
+			this.lastTokenCount = currentTokens;
+			this.lastTimestamp = currentTime;
+		} else if (status === 'idle') {
+			// Reset when idle
+			this.lastTokenCount = 0;
+			this.lastTimestamp = 0;
+		}
+
 		return {
 			status,
 			tokensDecoded: activeSlot.next_token.n_decoded,
@@ -168,7 +194,8 @@ export class SlotsService {
 			temperature: activeSlot.params.temperature,
 			topP: activeSlot.params.top_p,
 			speculative: activeSlot.speculative,
-			hasNextToken: activeSlot.next_token.has_next_token
+			hasNextToken: activeSlot.next_token.has_next_token,
+			tokensPerSecond
 		};
 	}
 

tools/server/webui/src/lib/stores/chat.svelte.ts

@@ -160,6 +160,8 @@ class ChatStore {
 			// Generation parameters
 			temperature: Number(currentConfig.temperature) || 0.8,
 			max_tokens: Number(currentConfig.max_tokens) || 2048,
+			// Timing parameters
+			timings_per_token: currentConfig.showTokensPerSecond || false,
 			// Sampling parameters
 			dynatemp_range: Number(currentConfig.dynatemp_range) || 0.0,
 			dynatemp_exponent: Number(currentConfig.dynatemp_exponent) || 1.0,

tools/server/webui/src/lib/types/api.d.ts

@@ -229,4 +229,5 @@ export interface ApiProcessingState {
 	topP: number;
 	speculative: boolean;
 	hasNextToken: boolean;
+	tokensPerSecond?: number;
 }