Merge pull request #2 from allozaur/feature/add-elevenlabs-scribe

Add ElevenLabs Scribe v1 model and set as default

Author: allozaur

apps/web/package.json

@@ -23,6 +23,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.6",
 		"@types/eslint": "^9.6.0",
+		"elevenlabs": "^1.56.0",
 		"eslint": "^9.0.0",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-svelte": "^2.36.0",

apps/web/src/lib/components/Recorder.svelte

@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte';
 	import WaveSurfer from 'wavesurfer.js';
 	import RecordPlugin from 'wavesurfer.js/dist/plugins/record.esm.js';
+	import { ElevenLabsClient } from 'elevenlabs';
 
 	import Button from './Button.svelte';
 	import ButtonPause from './ButtonPause.svelte';
@@ -18,13 +19,15 @@
 		recordingUrl?: string;
 		saveRecording: () => void;
 		scrollingWaveform?: boolean;
+		transcriptionModel?: 'elevenlabs-scribe-v1' | 'openai-whisper';
 	}
 
 	let {
 		discardRecording,
 		recordingUrl = $bindable(''),
 		saveRecording,
-		scrollingWaveform = true
+		scrollingWaveform = true,
+		transcriptionModel = 'elevenlabs-scribe-v1'
 	}: RecorderProps = $props();
 
 	let defaultDeviceId: string | undefined = $state(undefined);

apps/web/src/lib/components/RecorderOld.svelte

@@ -15,9 +15,12 @@
 		name,
 		savedRecordings = $bindable([]),
 		titleSlot,
-		transcription
+		transcription,
+		transcriptionModel = $bindable('elevenlabs-scribe-v1')
 	}: RecordingTileProps = $props();
 
+	$inspect(transcription);
+
 	let blob: Blob = $state(base64ToBlob(data));
 
 	let isPlaying = $state(false);
@@ -80,7 +83,7 @@
 		<div class="transcription">
 			<div class="inner">
 				<!-- svelte-ignore a11y_click_events_have_key_events -->
-				{#each transcription.words as { word, start, end }, i}
+				{#each transcription.words as { word, text, start, end }, i}
 					<!-- svelte-ignore a11y_click_events_have_key_events -->
 					<!-- svelte-ignore a11y_no_static_element_interactions -->
 					<span
@@ -91,11 +94,21 @@
 						class:read={currentTime >= start}
 						onclick={() => playFromTime(start)}
 					>
-						{#if i !== transcription.words.length - 1}
-							<span class="word">{word}</span>&nbsp;
-						{:else}
-							<span class="word">{word}</span>
-						{/if}
+						<span class="word">
+							{#if text}
+								{#if text === ' '}
+									&nbsp;
+								{:else}
+									{text}
+								{/if}
+							{:else if word}
+								{#if i !== transcription.words.length - 1}
+									{word}&nbsp;
+								{:else}
+									{word}
+								{/if}
+							{/if}
+						</span>
 					</span>
 				{/each}
 			</div>
@@ -109,6 +122,11 @@
 			{:else}
 				<span> You haven't transcribed this recording yet. </span>
 
+				<select bind:value={transcriptionModel}>
+					<option value="elevenlabs-scribe-v1">ElevenLabs Scribe v1</option>
+					<option value="openai-whisper">OpenAI Whisper</option>
+				</select>
+
 				<Button
 					kind="secondary"
 					label="Transcribe"
@@ -119,7 +137,7 @@
 
 						isTranscribing = true;
 
-						const transcription = await transcribeRecording(blob);
+						const transcription = await transcribeRecording(blob, transcriptionModel);
 
 						isTranscribing = false;