refactor: Formatters

tools/server/webui/src/lib/components/app/chat/ChatAttachments/ChatAttachmentThumbnailFile.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { RemoveButton } from '$lib/components/app';
-	import { formatFileSize, getFileTypeLabel, getPreviewText } from '$lib/utils/file-preview';
+	import { getFileTypeLabel, getPreviewText } from '$lib/utils/file-preview';
+	import { formatFileSize } from '$lib/utils/formatters';
 	import { isTextFile } from '$lib/utils/attachment-type';
 	import type { DatabaseMessageExtra } from '$lib/types/database';
 

tools/server/webui/src/lib/components/app/dialogs/DialogChatAttachmentPreview.svelte

@@ -2,7 +2,7 @@
 	import * as Dialog from '$lib/components/ui/dialog';
 	import type { DatabaseMessageExtra } from '$lib/types/database';
 	import { ChatAttachmentPreview } from '$lib/components/app';
-	import { formatFileSize } from '$lib/utils/file-preview';
+	import { formatFileSize } from '$lib/utils/formatters';
 	import { getAttachmentTypeLabel } from '$lib/utils/attachment-type';
 
 	interface Props {

tools/server/webui/src/lib/components/app/dialogs/DialogModelInformation.svelte

@@ -7,6 +7,7 @@
 	import type { ApiModelListResponse } from '$lib/types/api';
 	import { Copy } from '@lucide/svelte';
 	import { copyToClipboard } from '$lib/utils/copy';
+	import { formatFileSize, formatParameters, formatNumber } from '$lib/utils/formatters';
 
 	interface Props {
 		open?: boolean;
@@ -30,6 +31,7 @@
 
 	async function loadModelsData() {
 		isLoadingModels = true;
+
 		try {
 			modelsData = await ChatService.getModels();
 		} catch (error) {
@@ -40,40 +42,6 @@
 			isLoadingModels = false;
 		}
 	}
-
-	// Format helpers
-	function formatSize(sizeBytes: number | unknown): string {
-		if (typeof sizeBytes !== 'number') return 'Unknown';
-
-		// Convert to GB for better readability
-		const sizeGB = sizeBytes / (1024 * 1024 * 1024);
-		if (sizeGB >= 1) {
-			return `${sizeGB.toFixed(2)} GB`;
-		}
-
-		// Convert to MB for smaller models
-		const sizeMB = sizeBytes / (1024 * 1024);
-		return `${sizeMB.toFixed(2)} MB`;
-	}
-
-	function formatParameters(params: number | unknown): string {
-		if (typeof params !== 'number') return 'Unknown';
-		if (params >= 1e9) {
-			return `${(params / 1e9).toFixed(2)}B`;
-		}
-		if (params >= 1e6) {
-			return `${(params / 1e6).toFixed(2)}M`;
-		}
-		if (params >= 1e3) {
-			return `${(params / 1e3).toFixed(2)}K`;
-		}
-		return params.toString();
-	}
-
-	function formatNumber(num: number | unknown): string {
-		if (typeof num !== 'number') return 'Unknown';
-		return num.toLocaleString();
-	}
 </script>
 
 <Dialog.Root bind:open {onOpenChange}>
@@ -167,7 +135,7 @@
 							{#if modelMeta?.size}
 								<Table.Row>
 									<Table.Cell class="h-10 align-middle font-medium">Model Size</Table.Cell>
-									<Table.Cell>{formatSize(modelMeta.size)}</Table.Cell>
+									<Table.Cell>{formatFileSize(modelMeta.size)}</Table.Cell>
 								</Table.Row>
 							{/if}
 

tools/server/webui/src/lib/utils/file-preview.ts

@@ -1,18 +1,3 @@
-/**
- * Formats file size in bytes to human readable format
- * @param bytes - File size in bytes
- * @returns Formatted file size string
- */
-export function formatFileSize(bytes: number): string {
-	if (bytes === 0) return '0 Bytes';
-
-	const k = 1024;
-	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-	const i = Math.floor(Math.log(bytes) / Math.log(k));
-
-	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-}
-
 /**
  * Gets a display label for a file type
  * @param fileType - The file type/mime type

tools/server/webui/src/lib/utils/formatters.ts

@@ -0,0 +1,53 @@
+/**
+ * Formats file size in bytes to human readable format
+ * Supports Bytes, KB, MB, and GB
+ *
+ * @param bytes - File size in bytes (or unknown for safety)
+ * @returns Formatted file size string
+ */
+export function formatFileSize(bytes: number | unknown): string {
+	if (typeof bytes !== 'number') return 'Unknown';
+	if (bytes === 0) return '0 Bytes';
+
+	const k = 1024;
+	const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+	const i = Math.floor(Math.log(bytes) / Math.log(k));
+
+	return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+}
+
+/**
+ * Format parameter count to human-readable format (B, M, K)
+ *
+ * @param params - Parameter count
+ * @returns Human-readable parameter count
+ */
+export function formatParameters(params: number | unknown): string {
+	if (typeof params !== 'number') return 'Unknown';
+
+	if (params >= 1e9) {
+		return `${(params / 1e9).toFixed(2)}B`;
+	}
+
+	if (params >= 1e6) {
+		return `${(params / 1e6).toFixed(2)}M`;
+	}
+
+	if (params >= 1e3) {
+		return `${(params / 1e3).toFixed(2)}K`;
+	}
+
+	return params.toString();
+}
+
+/**
+ * Format number with locale-specific thousands separators
+ *
+ * @param num - Number to format
+ * @returns Human-readable number
+ */
+export function formatNumber(num: number | unknown): string {
+	if (typeof num !== 'number') return 'Unknown';
+
+	return num.toLocaleString();
+}