Merge branch 'main' of github.com:clement-pages/hf-separation-pipeline-visualization

pyannote_viewer/frontend/package-lock.json

@@ -17,6 +17,7 @@
         "@gradio/upload": "0.8.5",
         "@gradio/utils": "0.3.2",
         "@gradio/wasm": "0.10.0",
+        "@gryannote/wavesurfer.js": "^7.8.13",
         "@types/wavesurfer.js": "^6.0.10",
         "extendable-media-recorder": "^9.0.0",
         "extendable-media-recorder-wav-encoder": "^7.0.76",
@@ -621,6 +622,12 @@
         "path-browserify": "^1.0.1"
       }
     },
+    "node_modules/@gryannote/wavesurfer.js": {
+      "version": "7.8.13",
+      "resolved": "https://registry.npmjs.org/@gryannote/wavesurfer.js/-/wavesurfer.js-7.8.13.tgz",
+      "integrity": "sha512-4ZlUZhU+dmys3o/j5A087stnGthjKL/xx1dBv+wvt29idBoZ+oPbxc5AgRTF7YRZ6fhwUkm8kSEoZQ1C0p3P1g==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@isaacs/cliui": {
       "version": "8.0.2",
       "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz",

pyannote_viewer/frontend/package.json

@@ -15,6 +15,7 @@
     "@gradio/upload": "0.8.5",
     "@gradio/utils": "0.3.2",
     "@gradio/wasm": "0.10.0",
+    "@gryannote/wavesurfer.js": "^7.8.13",
     "@types/wavesurfer.js": "^6.0.10",
     "extendable-media-recorder": "^9.0.0",
     "extendable-media-recorder-wav-encoder": "^7.0.76",

pyannote_viewer/frontend/player/AudioPlayer.svelte

@@ -2,9 +2,9 @@
 	import { onMount } from "svelte";
 	import { Music } from "@gradio/icons";
 	import { format_time, type I18nFormatter } from "@gradio/utils";
-	import WaveSurfer from "wavesurfer.js";
-	import RegionsPlugin from "wavesurfer.js/dist/plugins/regions";
-	import { skip_audio } from "../shared/utils";
+	import WaveSurfer from "@gryannote/wavesurfer.js";
+	import RegionsPlugin, {type Region} from "@gryannote/wavesurfer.js/dist/plugins/regions";
+	import { skip_audio, process_audio } from "../shared/utils";
 	import WaveformControls from "../shared/WaveformControls.svelte";
 	import { Empty } from "@gradio/atoms";
 	import type { WaveformOptions, PipelineOutput } from "../shared/types";
@@ -73,7 +73,6 @@
 	$: waveform?.on("decode", (duration: any) => {
 		audioDecoded = true;
 		const numChannels = waveform.getDecodedData().numberOfChannels;
-		console.log(numChannels);
 		audio_duration = duration;
 		durationRef && (durationRef.textContent = format_time(duration));
 	
@@ -88,19 +87,20 @@
 
 		// add diarization annotation on each source:
 		if(!wsRegion){
-			wsRegion = waveform.registerPlugin(RegionsPlugin.create())
+			wsRegion = waveform.registerPlugin(RegionsPlugin.create({avoidOverlap:!value.multichannel}))
 			value.segments.forEach(segment => {
 				const region = wsRegion.addRegion({
 					start: segment.start,
 					end: segment.end,
-					channelIdx: value.multichannel ? segment.channel : 0,
+					channelIdx: value.multichannel ? segment.channel : -1,
 					drag: false,
 					resize: false,
 					color: colors[segment.channel % colors.length],
 				});
-
-				const regionHeight = 100 / (value.multichannel ? numChannels : 1);
-				region.element.style.cssText += `height: ${regionHeight}% !important;`;
+				if(value.multichannel){
+					const regionHeight = 100 / numChannels;
+					region.element.style.cssText += `height: ${regionHeight}% !important;`;
+				}
 				// TODO: Can we do better than force region color ?
 				region.element.style.cssText += `background-color: ${region.color} !important;`;
 			});

pyannote_viewer/frontend/recorder/AudioRecorder.svelte

@@ -2,12 +2,12 @@
 	import { onMount } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
 	import { createEventDispatcher } from "svelte";
-	import WaveSurfer from "wavesurfer.js";
+	import WaveSurfer from "@gryannote/wavesurfer.js";
 	import { skip_audio, process_audio } from "../shared/utils";
-	import WSRecord from "wavesurfer.js/dist/plugins/record.js";
+	import WSRecord from "@gryannote/wavesurfer.js/dist/plugins/record.js";
 	import WaveformControls from "../shared/WaveformControls.svelte";
 	import WaveformRecordControls from "../shared/WaveformRecordControls.svelte";
-	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import RecordPlugin from "@gryannote/wavesurfer.js/dist/plugins/record.js";
 	import type { WaveformOptions } from "../shared/types";
 	import { format_time } from "@gradio/utils";
 

pyannote_viewer/frontend/shared/DeviceSelect.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import RecordPlugin from "@gryannote/wavesurfer.js/dist/plugins/record.js";
 	import type { I18nFormatter } from "@gradio/utils";
 	import { createEventDispatcher } from "svelte";
 

pyannote_viewer/frontend/shared/VolumeControl.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { onMount } from "svelte";
-	import WaveSurfer from "wavesurfer.js";
+	import WaveSurfer from "@gryannote/wavesurfer.js";
 
 	export let currentVolume = 1;
 	export let show_volume_slider = false;

pyannote_viewer/frontend/shared/WaveformControls.svelte

@@ -2,10 +2,10 @@
 	import { Play, Pause, Forward, Backward, Undo, Trim } from "@gradio/icons";
 	import { get_skip_rewind_amount } from "../shared/utils";
 	import type { I18nFormatter } from "@gradio/utils";
-	import WaveSurfer from "wavesurfer.js";
+	import WaveSurfer from "@gryannote/wavesurfer.js";
 	import RegionsPlugin, {
 		type Region
-	} from "wavesurfer.js/dist/plugins/regions.js";
+	} from "@gryannote/wavesurfer.js/dist/plugins/regions.js";
 	import type { WaveformOptions } from "./types";
 	import VolumeLevels from "./VolumeLevels.svelte";
 	import VolumeControl from "./VolumeControl.svelte";

pyannote_viewer/frontend/shared/WaveformRecordControls.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { Pause } from "@gradio/icons";
 	import type { I18nFormatter } from "@gradio/utils";
-	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import RecordPlugin from "@gryannote/wavesurfer.js/dist/plugins/record.js";
 	import DeviceSelect from "./DeviceSelect.svelte";
 
 	export let record: RecordPlugin;

pyannote_viewer/frontend/shared/utils.ts

@@ -1,4 +1,4 @@
-import type WaveSurfer from "wavesurfer.js";
+import type WaveSurfer from "@gryannote/wavesurfer.js";
 import { audioBufferToWav } from "./audioBufferToWav";
 
 export interface LoadedParams {

pyannote_viewer/frontend/streaming/StreamAudio.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from "svelte";
 	import type { I18nFormatter } from "@gradio/utils";
-	import WaveSurfer from "wavesurfer.js";
-	import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
+	import WaveSurfer from "@gryannote/wavesurfer.js";
+	import RecordPlugin from "@gryannote/wavesurfer.js/dist/plugins/record.js";
 	import type { WaveformOptions } from "../shared/types";
 	import DeviceSelect from "../shared/DeviceSelect.svelte";