Minor fixes for audio widgets (#515)

* Style aud-to-aud widget output better

* Rm audio autoplay examples widget

* Lint

* Fix audio widget sample select

Author: Mishig Davaadorj

widgets/src/lib/InferenceWidget/widgets/AudioClassificationWidget/AudioClassificationWidget.svelte

@@ -28,7 +28,6 @@
 	let output: Array<{ label: string; score: number }> = [];
 	let outputJson: string;
 	let selectedSampleUrl = "";
-	let shouldAudioAutoplay = true;
 
 	function onRecordStart() {
 		file = null;
@@ -42,7 +41,6 @@
 	}
 
 	function onSelectFile(updatedFile: Blob | File) {
-		shouldAudioAutoplay = false;
 		isRecording = false;
 		selectedSampleUrl = "";
 
@@ -125,15 +123,14 @@
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		shouldAudioAutoplay = false;
+		file = null;
 		filename = sample.example_title;
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		shouldAudioAutoplay = true;
 		filename = sample.example_title;
 		fileUrl = sample.src;
 		output = [];
@@ -170,12 +167,7 @@
 				/>
 			</div>
 			{#if fileUrl}
-				<WidgetAudioTrack
-					classNames="mt-3"
-					autoplay={shouldAudioAutoplay}
-					label={filename}
-					src={fileUrl}
-				/>
+				<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
 			{/if}
 			<WidgetSubmitBtn
 				classNames="mt-2"

widgets/src/lib/InferenceWidget/widgets/AudioToAudioWidget/AudioToAudioWidget.svelte

@@ -27,7 +27,6 @@
 	let output: AudioItem[] = [];
 	let outputJson: string;
 	let selectedSampleUrl = "";
-	let shouldAudioAutoplay = true;
 
 	interface AudioItem {
 		blob: string;
@@ -48,7 +47,6 @@
 	}
 
 	function onSelectFile(updatedFile: Blob | File) {
-		shouldAudioAutoplay = false;
 		isRecording = false;
 		selectedSampleUrl = "";
 		if (updatedFile.size !== 0) {
@@ -131,15 +129,14 @@
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		shouldAudioAutoplay = false;
+		file = null;
 		filename = sample.example_title;
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		shouldAudioAutoplay = true;
 		filename = sample.example_title;
 		fileUrl = sample.src;
 		output = [];
@@ -176,12 +173,7 @@
 				/>
 			</div>
 			{#if fileUrl}
-				<WidgetAudioTrack
-					classNames="mt-3"
-					autoplay={shouldAudioAutoplay}
-					label={filename}
-					src={fileUrl}
-				/>
+				<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
 			{/if}
 			<WidgetSubmitBtn
 				classNames="mt-2"
@@ -195,9 +187,10 @@
 	</svelte:fragment>
 	<svelte:fragment slot="bottom">
 		{#each output as item}
-			<div>{item.label}</div>
-			:
-			<WidgetAudioTrack classNames="mt-4" src={item.src} />
+			<div class="flex items-center mt-2">
+				<span class="mr-2">{item.label}:</span>
+				<WidgetAudioTrack classNames="" src={item.src} />
+			</div>
 		{/each}
 	</svelte:fragment>
 </WidgetWrapper>

widgets/src/lib/InferenceWidget/widgets/AutomaticSpeechRecognitionWidget/AutomaticSpeechRecognitionWidget.svelte

@@ -28,7 +28,6 @@
 	let output = "";
 	let outputJson: string;
 	let selectedSampleUrl = "";
-	let shouldAudioAutoplay = true;
 
 	function onRecordStart() {
 		file = null;
@@ -42,7 +41,6 @@
 	}
 
 	function onSelectFile(updatedFile: Blob | File) {
-		shouldAudioAutoplay = false;
 		isRecording = false;
 		selectedSampleUrl = "";
 
@@ -114,15 +112,14 @@
 	}
 
 	function applyInputSample(sample: Record<string, any>) {
-		shouldAudioAutoplay = false;
+		file = null;
 		filename = sample.example_title;
 		fileUrl = sample.src;
 		selectedSampleUrl = sample.src;
 		getOutput();
 	}
 
 	function previewInputSample(sample: Record<string, any>) {
-		shouldAudioAutoplay = true;
 		filename = sample.example_title;
 		fileUrl = sample.src;
 		output = "";
@@ -159,12 +156,7 @@
 				/>
 			</div>
 			{#if fileUrl}
-				<WidgetAudioTrack
-					classNames="mt-3"
-					autoplay={shouldAudioAutoplay}
-					label={filename}
-					src={fileUrl}
-				/>
+				<WidgetAudioTrack classNames="mt-3" label={filename} src={fileUrl} />
 			{/if}
 			<WidgetSubmitBtn
 				classNames="mt-2"