web/ProcessingQueueItem: format file size to be readable

web/src/components/queue/ProcessingQueueItem.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { formatFileSize } from "$lib/util";
     import { downloadFile } from "$lib/download";
     import { removeItem } from "$lib/state/queen-bee/queue";
 
@@ -27,6 +28,7 @@
     $: state = info.state;
 
     $: progress = runningWorker?.progress;
+    $: size = formatFileSize(runningWorker?.progress?.size);
 
     const download = (file: File) =>
         downloadFile({
@@ -58,12 +60,12 @@
         {/if}
         <div class="file-status">
             {#if info.state === "done"}
-                done: {info.resultFile?.size} bytes
+                done: {formatFileSize(info.resultFile?.size)}
             {:else if info.state === "running"}
                 {#if progress && progress.percentage}
-                    processing: {Math.ceil(progress.percentage)}%, {progress.size} bytes
+                    processing: {Math.ceil(progress.percentage)}%, {size}
-                {:else if progress && progress.size}
+                {:else if progress && size}
-                    processing: {progress.size}
+                    processing: {size}
                 {:else}
                     processing...
                 {/if}

web/src/lib/util.ts

@@ -0,0 +1,14 @@
+export const formatFileSize = (size: number | undefined) => {
+    size ||= 0;
+
+    // gigabyte, megabyte, kilobyte, byte
+    const units = ['G', 'M', 'K', ''];
+    while (size >= 1024 && units.length > 1) {
+        size /= 1024;
+        units.pop();
+    }
+
+    const roundedSize = parseFloat(size.toFixed(2));
+    const unit = units[units.length - 1] + "B";
+    return `${roundedSize} ${unit}`;
+}