From 7dc703c33533c0cb1f71082d945a8c2080cf7450 Mon Sep 17 00:00:00 2001
From: pluja <github_pluja@r3d.red>
Date: Tue, 21 Nov 2023 17:20:32 +0100
Subject: [PATCH] feat: add upload progress bar (#20)

---
 .../components/ModalTranscriptionForm.svelte  | 47 +++++++++++++++----
 .../components/ModalTranslationForm.svelte    |  3 +-
 frontend/src/lib/stores.js                    |  3 ++
 frontend/src/routes/+page.svelte              | 27 +++++++----
 4 files changed, 60 insertions(+), 20 deletions(-)

diff --git a/frontend/src/lib/components/ModalTranscriptionForm.svelte b/frontend/src/lib/components/ModalTranscriptionForm.svelte
index 88d00f4..5cc1ce8 100644
--- a/frontend/src/lib/components/ModalTranscriptionForm.svelte
+++ b/frontend/src/lib/components/ModalTranscriptionForm.svelte
@@ -1,6 +1,7 @@
 <script>
 	import { validateURL, CLIENT_API_HOST } from '$lib/utils.js';
 	import { env } from '$env/dynamic/public';
+	import { uploadProgress } from '$lib/stores';
 
 	import toast from 'svelte-french-toast';
 
@@ -10,7 +11,7 @@
 	let language = 'auto';
 	let sourceUrl = '';
 	let fileInput;
-	let device = (env.PUBLIC_WHISHPER_PROFILE == "gpu") ? 'cuda' : 'cpu';
+	let device = env.PUBLIC_WHISHPER_PROFILE == 'gpu' ? 'cuda' : 'cpu';
 
 	let languages = [
 		'auto',
@@ -83,14 +84,44 @@
 			formData.append('file', fileInput.files[0]);
 		}
 
-		const res = await fetch(`${CLIENT_API_HOST}/api/transcriptions`, {
-			method: 'POST',
-			body: formData
+		return new Promise((resolve, reject) => {
+			const xhr = new XMLHttpRequest();
+
+			// Set up progress event listener
+			xhr.upload.addEventListener('progress', (event) => {
+				if (event.lengthComputable) {
+					const percentCompleted = Math.round((event.loaded * 100) / event.total);
+					uploadProgress.set(percentCompleted);
+				}
+			});
+
+			// Set up load event listener
+			xhr.addEventListener('load', () => {
+				if (xhr.status === 200) {
+					resolve(xhr.response);
+					toast.success('Success!');
+				} else {
+					reject(xhr.statusText);
+					toast.error('Upload failed');
+				}
+				uploadProgress.set(0); // Reset progress after completion
+			});
+
+			// Set up error event listener
+			xhr.addEventListener('error', () => {
+				reject(xhr.statusText);
+				toast.error('An error occurred during upload');
+				uploadProgress.set(0); // Reset progress on error
+			});
+
+			xhr.open('POST', `${CLIENT_API_HOST}/api/transcriptions`);
+			xhr.send(formData);
 		});
 
 		// Set file and sourceUrl to empty
 		sourceUrl = '';
 		fileInput.value = '';
+		uploadProgress.set(0);
 
 		toast.success('Success!');
 	}
@@ -182,7 +213,7 @@
 					<span class="label-text">Device</span>
 				</label>
 				<select name="device" bind:value={device} class="select select-bordered">
-					{#if env.PUBLIC_WHISHPER_PROFILE == "gpu" }
+					{#if env.PUBLIC_WHISHPER_PROFILE == 'gpu'}
 						<option selected value="cuda">GPU</option>
 						<option value="cpu">CPU</option>
 					{:else}
@@ -199,7 +230,7 @@
 			>Start</button
 		>
 	</form>
-    <form method="dialog" class="modal-backdrop">
-        <button>close</button>
-    </form>
+	<form method="dialog" class="modal-backdrop">
+		<button>close</button>
+	</form>
 </dialog>
diff --git a/frontend/src/lib/components/ModalTranslationForm.svelte b/frontend/src/lib/components/ModalTranslationForm.svelte
index a126e0c..4a28396 100644
--- a/frontend/src/lib/components/ModalTranslationForm.svelte
+++ b/frontend/src/lib/components/ModalTranslationForm.svelte
@@ -15,7 +15,6 @@
             .then(data => {
                 if (data) {
                     availableLanguages = data;
-                    console.log(availableLanguages)
                     // Languages fetched successfully, stop trying
                     clearInterval(fetchLanguagesInterval);
                 }
@@ -56,7 +55,7 @@
                 <!-- Language picker -->
                 <div class="w-full max-w-xs form-control">
                     <label for="target-lan" class="label">
-                      <span class="label-text">Target language</span>
+                      <span class="label-text">Target languages for {tr.result.language}</span>
                     </label>
                     <select bind:value={targetLanguage} name="target-lan" class="select select-bordered">
                       <option disabled selected>Pick one</option>
diff --git a/frontend/src/lib/stores.js b/frontend/src/lib/stores.js
index e5bbb93..88b0ab9 100644
--- a/frontend/src/lib/stores.js
+++ b/frontend/src/lib/stores.js
@@ -13,6 +13,9 @@ export const downloadTranscription = writable(null);
 
 export const editorHistory = writable([]);
 
+// Upload progress and status
+export const uploadProgress = writable(0);
+
 // editor settings
 export let editorSettings = writable({
     autosave: false,
diff --git a/frontend/src/routes/+page.svelte b/frontend/src/routes/+page.svelte
index 8a2d35b..f838e08 100644
--- a/frontend/src/routes/+page.svelte
+++ b/frontend/src/routes/+page.svelte
@@ -1,6 +1,6 @@
 <script>
 	import { Toaster } from 'svelte-french-toast';
-	import { transcriptions } from '$lib/stores';
+	import { transcriptions, uploadProgress } from '$lib/stores';
 	import { browser, dev } from '$app/environment';
 	import { CLIENT_WS_HOST } from '$lib/utils';
 	import { onMount, onDestroy } from 'svelte';
@@ -89,21 +89,28 @@
 <ModalTranscriptionForm />
 
 <header>
-	<h1 class="flex items-center justify-center space-x-4 font-bold text-4xl mt-8">
+	<h1 class="flex items-center justify-center mt-8 space-x-4 text-4xl font-bold">
 		<span>
 			<img class="w-20 h-20" src="/logo.svg" alt="Logo: a cloud whispering" />
 		</span>
 		<span> Whishper </span>
 	</h1>
-	<h2 class="text-md text-center opacity-70 font-mono">{data.randomSentence}</h2>
+	<h2 class="font-mono text-center text-md opacity-70">{data.randomSentence}</h2>
 </header>
 
-<main class="card w-4/6 bg-neutral text-neutral-content mx-auto mt-4 mb-8">
-	<button
-		class="btn btn-primary mx-auto max-w-md mt-8 btn-md"
-		onclick="modalNewTranscription.showModal()">✨ new transcription</button
-	>
-	<div class="card-body items-center text-center mb-0">
+<main class="w-4/6 mx-auto mt-4 mb-8 card bg-neutral text-neutral-content">
+	{#if $uploadProgress > 0}
+		<div class="flex flex-col items-center justify-center px-4 pt-4 my-4">
+			<progress class="w-full mx-2 progress progress-success" value="{$uploadProgress}" max="100"></progress>
+			<span>Uploading...</span>
+		</div>
+	{:else}
+		<button
+			class="max-w-md mx-auto mt-8 btn btn-primary btn-md"
+			onclick="modalNewTranscription.showModal()">✨ new transcription</button
+		>
+	{/if}
+	<div class="items-center mb-0 text-center card-body">
 		{#if $transcriptions.length > 0}
 			{#each $transcriptions as tr (tr.id)}
 				{#if tr.status == 2}
@@ -120,7 +127,7 @@
 				{/if}
 			{/each}
 		{:else}
-			<p class="text-center font-bold text-2xl">🔮 No transcriptions yet 🔮</p>
+			<p class="text-2xl font-bold text-center">🔮 No transcriptions yet 🔮</p>
 		{/if}
 	</div>
 </main>