No commit message

huggingface · Oct 28, 2024 · d2193ba · d2193ba
1 parent 0be1e57
commit d2193ba
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 16 deletions.
diff --git a/src/lib/components/chat/ChatWindow.svelte b/src/lib/components/chat/ChatWindow.svelte
@@ -230,6 +230,8 @@
 	let audioChunks: BlobPart[] = [];
 	let isLoadingModel = false;
 	let isTranscribing = false;
+	let webgpuSupported = false;
+	let microphoneButton: HTMLButtonElement;
 
 	async function initializeTranscriber() {
 		if (!transcriber) {
@@ -273,21 +275,16 @@
 	}
 
 	onMount(() => {
-		const microphoneButton = document.querySelector("#microphone-button");
-		if (microphoneButton) {
-			microphoneButton.addEventListener("click", async () => {
-				if (!transcriber) {
-					await initializeTranscriber();
-				}
-			});
+		if (navigator.gpu) {
+			webgpuSupported = true;
 		}
 	});
 </script>
 
 <svelte:window
 	on:dragenter={onDragEnter}
 	on:dragleave={onDragLeave}
-	on:dragover|preventDefault
+	on:dragleover|preventDefault
 	on:drop|preventDefault={() => (onDrag = false)}
 />
 
@@ -513,14 +510,16 @@
 							>
 								<CarbonSendAltFilled />
 							</button>
-							<button
-								id="microphone-button"
-								class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 enabled:hover:text-gray-700 disabled:opacity-60 enabled:dark:hover:text-gray-100 dark:disabled:opacity-40"
-								on:click={isRecording ? stopRecording : startRecording}
-								type="button"
-							>
-								<CarbonMicrophone />
-							</button>
+								{#if webgpuSupported}
+									<button
+										bind:this={microphoneButton}
+										class="btn mx-1 my-1 h-[2.4rem] self-end rounded-lg bg-transparent p-1 px-[0.7rem] text-gray-400 enabled:hover:text-gray-700 disabled:opacity-60 enabled:dark:hover:text-gray-100 dark:disabled:opacity-40"
+										on:click={isRecording ? stopRecording : startRecording}
+										type="button"
+									>
+										<CarbonMicrophone />
+									</button>
+								{/if}
 						{/if}
 					</div>
 				{/if}

diff --git a/src/lib/components/icons/IconMicrophone.svelte b/src/lib/components/icons/IconMicrophone.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
 	export let classNames = "";
+	export let webgpuSupported = true;
 </script>
 
+{#if webgpuSupported}
 <svg
 	class={classNames}
 	xmlns="http://www.w3.org/2000/svg"
@@ -18,3 +20,4 @@
 		d="M12 14a3.5 3.5 0 0 0 3.5-3.5V5.5A3.5 3.5 0 0 0 12 2a3.5 3.5 0 0 0-3.5 3.5v5A3.5 3.5 0 0 0 12 14zm6.5-3.5a6.5 6.5 0 0 1-13 0h-2a8.5 8.5 0 0 0 17 0h-2zM11 18v4h2v-4h-2z"
 	/>
 </svg>
+{/if}