@gradio/multimodaltextbox 0.14.4 → 0.15.0-dev.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @gradio/multimodaltextbox
 
+## 0.15.0-dev.0
+
+### Features
+
+- [#14002](https://github.com/gradio-app/gradio/pull/14002) [`dd82f43`](https://github.com/gradio-app/gradio/commit/dd82f435ee94c05ab9cdf946861a95ab77e72a47) - Remove `gradio sketch` and the vibe editor.  Thanks @dawoodkhan82!
+- [#13931](https://github.com/gradio-app/gradio/pull/13931) [`2c2b564`](https://github.com/gradio-app/gradio/commit/2c2b5642c3ed873bb53d1663fc2d36a6d53c00c9) - Let gr.Audio and gr.MultimodalTextbox pass media track constraints to the microphone.  Thanks @hysts!
+
+### Dependency updates
+
+- @gradio/upload@0.19.2-dev.0
+- @gradio/client@2.8.0-dev.0
+- @gradio/audio@0.25.0-dev.0
+- @gradio/image@0.29.0-dev.0
+- @gradio/video@0.24.0-dev.0
+
 ## 0.14.4
 
 ### Dependency updates

package/Index.svelte

@@ -157,6 +157,7 @@
 		autoscroll={gradio.shared.autoscroll}
 		file_count={gradio.props.file_count}
 		{sources_string}
+		microphone_options={gradio.props.microphone_options}
 		max_file_size={gradio.shared.max_file_size}
 		onchange={(e) => {
 			gradio.props.value = e;

package/MultimodalTextbox.test.ts

@@ -1,4 +1,4 @@
-import { test, describe, afterEach, expect } from "vitest";
+import { test, describe, afterEach, expect, vi } from "vitest";
 import {
 	cleanup,
 	render,
@@ -13,6 +13,7 @@ import {
 import { run_shared_prop_tests } from "@self/tootils/shared-prop-tests";
 import event from "@testing-library/user-event";
 import { tick } from "svelte";
+import RecordPlugin from "wavesurfer.js/dist/plugins/record.js";
 
 import MultimodalTextbox from "./Index.svelte";
 
@@ -154,6 +155,43 @@ describe("Props: sources", () => {
 	});
 });
 
+describe("Props: microphone_options", () => {
+	afterEach(() => {
+		vi.restoreAllMocks();
+		cleanup();
+	});
+
+	test("constraints are passed to the mic along with the device", async () => {
+		const constraints = { echoCancellation: false, autoGainControl: true };
+		vi.spyOn(RecordPlugin, "getAvailableAudioDevices").mockResolvedValue([
+			{
+				deviceId: "mic-1",
+				label: "mic-1",
+				kind: "audioinput"
+			} as MediaDeviceInfo
+		]);
+		const start_mic = vi
+			.spyOn(RecordPlugin.prototype, "startMic")
+			.mockResolvedValue(new MediaStream());
+		vi.spyOn(RecordPlugin.prototype, "startRecording").mockResolvedValue(
+			undefined
+		);
+		const { getByRole } = await render(MultimodalTextbox, {
+			...default_props,
+			sources: ["microphone"],
+			microphone_options: { constraints }
+		});
+
+		await fireEvent.click(getByRole("button", { name: "Record audio" }));
+
+		await waitFor(() => expect(start_mic).toHaveBeenCalled());
+		expect(start_mic).toHaveBeenCalledWith({
+			...constraints,
+			deviceId: "mic-1"
+		});
+	});
+});
+
 describe("Props: submit_btn / stop_btn", () => {
 	afterEach(() => cleanup());
 

package/dist/Index.svelte

@@ -157,6 +157,7 @@
 		autoscroll={gradio.shared.autoscroll}
 		file_count={gradio.props.file_count}
 		{sources_string}
+		microphone_options={gradio.props.microphone_options}
 		max_file_size={gradio.shared.max_file_size}
 		onchange={(e) => {
 			gradio.props.value = e;

package/dist/shared/MultimodalTextbox.svelte

@@ -6,7 +6,7 @@
 	import { Image } from "@gradio/image/shared";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { FileData, Client } from "@gradio/client";
-	import type { WaveformOptions } from "@gradio/audio";
+	import type { WaveformOptions, MicrophoneOptions } from "@gradio/audio";
 	import {
 		Clear,
 		File,
@@ -55,6 +55,7 @@
 		waveform_settings,
 		waveform_options: _waveform_options = { show_recording_waveform: true },
 		sources_string = "upload",
+		microphone_options = {},
 		active_source = $bindable<"microphone" | null>(),
 		html_attributes = null,
 		upload_promise = $bindable<Promise<any> | null>(),
@@ -98,6 +99,7 @@
 		max_plain_text_length?: number;
 		waveform_settings: Record<string, any>;
 		waveform_options?: WaveformOptions;
+		microphone_options?: MicrophoneOptions;
 		sources_string?:
 			| "upload"
 			| "upload,microphone"
@@ -417,6 +419,7 @@
 							{upload}
 							{root}
 							{max_file_size}
+							constraints={microphone_options.constraints ?? undefined}
 							bind:upload_promise
 							onchange={(audio_value) => {
 								mic_audio = audio_value;

package/dist/shared/MultimodalTextbox.svelte.d.ts

@@ -1,6 +1,6 @@
 import type { I18nFormatter } from "js/core/src/gradio_helper";
 import type { FileData, Client } from "@gradio/client";
-import type { WaveformOptions } from "@gradio/audio";
+import type { WaveformOptions, MicrophoneOptions } from "@gradio/audio";
 import { type SelectData } from "@gradio/utils";
 import type { InputHTMLAttributes } from "./types";
 type $$ComponentProps = {
@@ -32,6 +32,7 @@ type $$ComponentProps = {
     max_plain_text_length?: number;
     waveform_settings: Record<string, any>;
     waveform_options?: WaveformOptions;
+    microphone_options?: MicrophoneOptions;
     sources_string?: "upload" | "upload,microphone" | "microphone" | "microphone,upload";
     active_source?: "microphone" | null;
     html_attributes?: InputHTMLAttributes | null;

package/dist/types.d.ts

@@ -2,7 +2,7 @@ import type { FileData } from "@gradio/client";
 import type { SelectData } from "@gradio/utils";
 import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { InputHTMLAttributes } from "./shared/types";
-import type { WaveformOptions } from "js/audio/shared/types";
+import type { WaveformOptions, MicrophoneOptions } from "js/audio/shared/types";
 export interface MultimodalTextboxEvents {
     change: {
         text: string;
@@ -40,5 +40,6 @@ export interface MultimodalTextboxProps {
     max_plain_text_length: number;
     sources: ("microphone" | "upload")[];
     waveform_options: WaveformOptions;
+    microphone_options?: MicrophoneOptions;
     html_attributes: InputHTMLAttributes | null;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gradio/multimodaltextbox",
-  "version": "0.14.4",
+  "version": "0.15.0-dev.0",
   "description": "Gradio UI packages",
   "type": "module",
   "author": "",
@@ -22,17 +22,18 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@gradio/atoms": "^0.26.3",
     "@gradio/icons": "^0.16.0",
-    "@gradio/utils": "^0.15.0",
+    "@gradio/atoms": "^0.26.3",
     "@gradio/statustracker": "^0.16.0",
-    "@gradio/upload": "^0.19.1",
-    "@gradio/image": "^0.28.5",
-    "@gradio/video": "^0.23.3",
-    "@gradio/client": "^2.7.2",
-    "@gradio/audio": "^0.24.5"
+    "@gradio/image": "^0.29.0-dev.0",
+    "@gradio/utils": "^0.15.0",
+    "@gradio/upload": "^0.19.2-dev.0",
+    "@gradio/video": "^0.24.0-dev.0",
+    "@gradio/client": "^2.8.0-dev.0",
+    "@gradio/audio": "^0.25.0-dev.0"
   },
   "devDependencies": {
+    "wavesurfer.js": "7.11.0",
     "@gradio/preview": "^0.17.1"
   },
   "peerDependencies": {

package/shared/MultimodalTextbox.svelte

@@ -6,7 +6,7 @@
 	import { Image } from "@gradio/image/shared";
 	import type { I18nFormatter } from "js/core/src/gradio_helper";
 	import type { FileData, Client } from "@gradio/client";
-	import type { WaveformOptions } from "@gradio/audio";
+	import type { WaveformOptions, MicrophoneOptions } from "@gradio/audio";
 	import {
 		Clear,
 		File,
@@ -55,6 +55,7 @@
 		waveform_settings,
 		waveform_options: _waveform_options = { show_recording_waveform: true },
 		sources_string = "upload",
+		microphone_options = {},
 		active_source = $bindable<"microphone" | null>(),
 		html_attributes = null,
 		upload_promise = $bindable<Promise<any> | null>(),
@@ -98,6 +99,7 @@
 		max_plain_text_length?: number;
 		waveform_settings: Record<string, any>;
 		waveform_options?: WaveformOptions;
+		microphone_options?: MicrophoneOptions;
 		sources_string?:
 			| "upload"
 			| "upload,microphone"
@@ -417,6 +419,7 @@
 							{upload}
 							{root}
 							{max_file_size}
+							constraints={microphone_options.constraints ?? undefined}
 							bind:upload_promise
 							onchange={(audio_value) => {
 								mic_audio = audio_value;

package/types.ts

@@ -2,7 +2,7 @@ import type { FileData } from "@gradio/client";
 import type { SelectData } from "@gradio/utils";
 import type { ILoadingStatus as LoadingStatus } from "@gradio/statustracker";
 import type { InputHTMLAttributes } from "./shared/types";
-import type { WaveformOptions } from "js/audio/shared/types";
+import type { WaveformOptions, MicrophoneOptions } from "js/audio/shared/types";
 
 export interface MultimodalTextboxEvents {
 	change: { text: string; files: FileData[] };
@@ -36,5 +36,6 @@ export interface MultimodalTextboxProps {
 	max_plain_text_length: number;
 	sources: ("microphone" | "upload")[];
 	waveform_options: WaveformOptions;
+	microphone_options?: MicrophoneOptions;
 	html_attributes: InputHTMLAttributes | null;
 }