From 60d788a85625199c4c68d45481ef48ae6ca4c09a Mon Sep 17 00:00:00 2001 From: Hannah Date: Fri, 3 Nov 2023 13:29:43 +0000 Subject: [PATCH 01/14] add wrapper around content and source selection --- js/audio/interactive/InteractiveAudio.svelte | 136 ++++++++++--------- js/video/shared/InteractiveVideo.svelte | 134 +++++++++--------- 2 files changed, 137 insertions(+), 133 deletions(-) diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte index 29bd5410e602..4ffcf9cdc3fc 100644 --- a/js/audio/interactive/InteractiveAudio.svelte +++ b/js/audio/interactive/InteractiveAudio.svelte @@ -53,7 +53,7 @@ function get_modules(): void { module_promises = [ import("extendable-media-recorder"), - import("extendable-media-recorder-wav-encoder") + import("extendable-media-recorder-wav-encoder"), ]; } @@ -204,75 +204,77 @@ float={active_source === "upload" && value === null} label={label || i18n("audio.audio")} /> -{#if value === null || streaming} - {#if active_source === "microphone"} - - {#if streaming} - - {:else} - +
+ {#if value === null || streaming} + {#if active_source === "microphone"} + + {#if streaming} + + {:else} + + {/if} + {:else if active_source === "upload"} + + + + + {/if} - {:else if active_source === "upload"} - - - - - - {/if} -{:else} - (mode = "edit")} - absolute={true} - /> + {:else} + (mode = "edit")} + absolute={true} + /> - -{/if} + + {/if} -{#if sources.length > 1} - - - - -{/if} + {#if sources.length > 1} + + + + + {/if} +
diff --git a/js/atoms/src/SelectSource.svelte b/js/atoms/src/SelectSource.svelte new file mode 100644 index 000000000000..35a09b3a8693 --- /dev/null +++ b/js/atoms/src/SelectSource.svelte @@ -0,0 +1,74 @@ + + +{#if sources.length > 1} + + {#if sources.includes("upload")} + + {/if} + + {#if sources.includes("microphone")} + + {/if} + + {#if sources.includes("webcam")} + + {/if} + +{/if} + + diff --git a/js/atoms/src/UploadText.svelte b/js/atoms/src/UploadText.svelte index 33b3fda3ddcf..50cda0c79fc1 100644 --- a/js/atoms/src/UploadText.svelte +++ b/js/atoms/src/UploadText.svelte @@ -33,6 +33,7 @@ flex-direction: column; justify-content: center; align-items: center; + min-height: var(--size-60); color: var(--block-label-text-color); line-height: var(--line-md); height: 100%; diff --git a/js/atoms/src/index.ts b/js/atoms/src/index.ts index deec2de14118..7a5748730a2f 100644 --- a/js/atoms/src/index.ts +++ b/js/atoms/src/index.ts @@ -7,5 +7,6 @@ export { default as Info } from "./Info.svelte"; export { default as ShareButton } from "./ShareButton.svelte"; export { default as UploadText } from "./UploadText.svelte"; export { default as Toolbar } from "./Toolbar.svelte"; +export { default as SelectSource } from "./SelectSource.svelte"; export const BLOCK_KEY = {}; diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte index 5cc54281b38c..d6dac312cec0 100644 --- a/js/audio/Index.svelte +++ b/js/audio/Index.svelte @@ -149,6 +149,7 @@ variant={value === null && active_source === "upload" ? "dashed" : "solid"} border_mode={dragging ? "focus" : "base"} padding={false} + grid={sources.length > 1} {elem_id} {elem_classes} {visible} diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte index c67fdc0ff003..6f1ce175a28f 100644 --- a/js/audio/interactive/InteractiveAudio.svelte +++ b/js/audio/interactive/InteractiveAudio.svelte @@ -3,7 +3,7 @@ import { Upload, ModifyUpload } from "@gradio/upload"; import { upload, prepare_files, type FileData } from "@gradio/client"; import { BlockLabel } from "@gradio/atoms"; - import { Music, Microphone, Upload as UploadIcon } from "@gradio/icons"; + import { Music } from "@gradio/icons"; import AudioPlayer from "../player/AudioPlayer.svelte"; import { _ } from "svelte-i18n"; @@ -11,6 +11,7 @@ import type { I18nFormatter } from "js/app/src/gradio_helper"; import AudioRecorder from "../recorder/AudioRecorder.svelte"; import StreamAudio from "../streaming/StreamAudio.svelte"; + import { SelectSource } from "@gradio/atoms"; export let value: null | FileData = null; export let label: string; @@ -53,7 +54,7 @@ function get_modules(): void { module_promises = [ import("extendable-media-recorder"), - import("extendable-media-recorder-wav-encoder") + import("extendable-media-recorder-wav-encoder"), ]; } @@ -253,48 +254,4 @@ /> {/if} -{#if sources.length > 1} - - - - -{/if} - - + diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte index 7330af47710c..537fa1dc4896 100644 --- a/js/image/shared/Webcam.svelte +++ b/js/image/shared/Webcam.svelte @@ -38,7 +38,7 @@ try { stream = await navigator.mediaDevices.getUserMedia({ video: device_id ? { deviceId: { exact: device_id } } : true, - audio: include_audio + audio: include_audio, }); video_source.srcObject = stream; video_source.muted = true; @@ -98,7 +98,7 @@ data: e.target.result, name: "sample." + mimeType.substring(6), is_example: false, - is_file: false + is_file: false, }); dispatch("stop_recording"); } @@ -119,7 +119,7 @@ return; } media_recorder = new MediaRecorder(stream, { - mimeType: mimeType + mimeType: mimeType, }); media_recorder.addEventListener("dataavailable", function (e) { recorded_blobs.push(e.data); @@ -169,7 +169,7 @@ return { destroy() { document.removeEventListener("click", handle_click, true); - } + }, }; } diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte index f853a63faa7b..5d3242b08c89 100644 --- a/js/upload/src/Upload.svelte +++ b/js/upload/src/Upload.svelte @@ -122,6 +122,7 @@ button { cursor: pointer; width: var(--size-full); + height: var(--size-full); } .hidden { diff --git a/js/video/Index.svelte b/js/video/Index.svelte index 50e405065310..2f58b0569f82 100644 --- a/js/video/Index.svelte +++ b/js/video/Index.svelte @@ -174,6 +174,7 @@ {scale} {min_width} allow_overflow={false} + grid={sources.length > 1} > 1} - - - - -{/if} + From bdc613ab9bdd90763d773829ee5bc19dd76ba9b7 Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 6 Nov 2023 18:09:48 +0100 Subject: [PATCH 06/14] formatting --- js/atoms/src/UploadText.svelte | 2 +- js/audio/interactive/InteractiveAudio.svelte | 2 +- js/image/shared/Webcam.svelte | 8 ++++---- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/js/atoms/src/UploadText.svelte b/js/atoms/src/UploadText.svelte index 50cda0c79fc1..84112f82980d 100644 --- a/js/atoms/src/UploadText.svelte +++ b/js/atoms/src/UploadText.svelte @@ -12,7 +12,7 @@ video: "upload_text.drop_video", audio: "upload_text.drop_audio", file: "upload_text.drop_file", - csv: "upload_text.drop_csv", + csv: "upload_text.drop_csv" }; diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte index 6f1ce175a28f..1ade99139f27 100644 --- a/js/audio/interactive/InteractiveAudio.svelte +++ b/js/audio/interactive/InteractiveAudio.svelte @@ -54,7 +54,7 @@ function get_modules(): void { module_promises = [ import("extendable-media-recorder"), - import("extendable-media-recorder-wav-encoder"), + import("extendable-media-recorder-wav-encoder") ]; } diff --git a/js/image/shared/Webcam.svelte b/js/image/shared/Webcam.svelte index 537fa1dc4896..7330af47710c 100644 --- a/js/image/shared/Webcam.svelte +++ b/js/image/shared/Webcam.svelte @@ -38,7 +38,7 @@ try { stream = await navigator.mediaDevices.getUserMedia({ video: device_id ? { deviceId: { exact: device_id } } : true, - audio: include_audio, + audio: include_audio }); video_source.srcObject = stream; video_source.muted = true; @@ -98,7 +98,7 @@ data: e.target.result, name: "sample." + mimeType.substring(6), is_example: false, - is_file: false, + is_file: false }); dispatch("stop_recording"); } @@ -119,7 +119,7 @@ return; } media_recorder = new MediaRecorder(stream, { - mimeType: mimeType, + mimeType: mimeType }); media_recorder.addEventListener("dataavailable", function (e) { recorded_blobs.push(e.data); @@ -169,7 +169,7 @@ return { destroy() { document.removeEventListener("click", handle_click, true); - }, + } }; } From f48f9ea120a79c54d76e9cb8ef5e9118e6da58f3 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Mon, 6 Nov 2023 17:09:52 +0000 Subject: [PATCH 07/14] add changeset --- .changeset/mean-papayas-try.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.changeset/mean-papayas-try.md b/.changeset/mean-papayas-try.md index 87b7af6a7c27..780bca883647 100644 --- a/.changeset/mean-papayas-try.md +++ b/.changeset/mean-papayas-try.md @@ -1,6 +1,8 @@ --- "@gradio/atoms": patch -"@gradio/upload": patch +"@gradio/audio": patch +"@gradio/image": patch +"@gradio/video": patch "gradio": patch --- From 5626f716fdebbb8632abb90b3b004e665e9a6e3c Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Mon, 6 Nov 2023 17:10:56 +0000 Subject: [PATCH 08/14] add changeset --- .changeset/mean-papayas-try.md | 1 - 1 file changed, 1 deletion(-) diff --git a/.changeset/mean-papayas-try.md b/.changeset/mean-papayas-try.md index 780bca883647..8a0125e1b4ea 100644 --- a/.changeset/mean-papayas-try.md +++ b/.changeset/mean-papayas-try.md @@ -1,7 +1,6 @@ --- "@gradio/atoms": patch "@gradio/audio": patch -"@gradio/image": patch "@gradio/video": patch "gradio": patch --- From f42717daa9eaefbcf253eaf995f03cf4238a1444 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Mon, 6 Nov 2023 18:05:32 +0000 Subject: [PATCH 09/14] add changeset --- .changeset/mean-papayas-try.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/mean-papayas-try.md b/.changeset/mean-papayas-try.md index 8a0125e1b4ea..028474c03627 100644 --- a/.changeset/mean-papayas-try.md +++ b/.changeset/mean-papayas-try.md @@ -5,4 +5,4 @@ "gradio": patch --- -fix:Add div wrapper around content and source selection +fix:Ensure source selection does not get hidden in overflow From c9b79a0d4ff67b47d1c1cb41a381c3cbadf6ecb7 Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 6 Nov 2023 19:23:48 +0100 Subject: [PATCH 10/14] tweak height to accomodate source selection --- js/atoms/src/Block.svelte | 6 ----- js/audio/Index.svelte | 4 ++-- js/audio/interactive/InteractiveAudio.svelte | 3 ++- js/upload/src/Upload.svelte | 3 ++- js/video/Index.svelte | 1 - js/video/Video.stories.svelte | 24 ++++++++++---------- js/video/shared/InteractiveVideo.svelte | 1 + 7 files changed, 19 insertions(+), 23 deletions(-) diff --git a/js/atoms/src/Block.svelte b/js/atoms/src/Block.svelte index e43129f06f07..65d56434f07a 100644 --- a/js/atoms/src/Block.svelte +++ b/js/atoms/src/Block.svelte @@ -14,7 +14,6 @@ export let allow_overflow = true; export let scale: number | null = null; export let min_width = 0; - export let grid = false; let tag = type === "fieldset" ? "fieldset" : "div"; @@ -37,7 +36,6 @@ style:flex-grow={scale} style:min-width={`calc(min(${min_width}px, 100%))`} style:border-width="var(--block-border-width)" - class:grid > @@ -75,8 +73,4 @@ padding: 0; overflow: visible; } - - .grid { - display: grid; - } diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte index d6dac312cec0..950e7f63b50d 100644 --- a/js/audio/Index.svelte +++ b/js/audio/Index.svelte @@ -99,7 +99,7 @@ cursorColor: "#ddd5e9", barRadius: 10, dragToSeek: true, - mediaControls: waveform_options.show_controls + mediaControls: waveform_options.show_controls, }; function handle_error({ detail }: CustomEvent): void { @@ -149,13 +149,13 @@ variant={value === null && active_source === "upload" ? "dashed" : "solid"} border_mode={dragging ? "focus" : "base"} padding={false} - grid={sources.length > 1} {elem_id} {elem_classes} {visible} {container} {scale} {min_width} + allow_overflow={false} > dispatch("error", detail)} {root} + full_height={sources.length === 1} > diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte index 5d3242b08c89..ae30283b682f 100644 --- a/js/upload/src/Upload.svelte +++ b/js/upload/src/Upload.svelte @@ -13,6 +13,7 @@ export let disable_click = false; export let root: string; export let hidden = false; + export let full_height = true; // Needed for wasm support const upload_fn = getContext("upload_files"); @@ -94,6 +95,7 @@ class:center class:boundedheight class:flex + style:height={full_height ? "100%" : undefined} on:drag|preventDefault|stopPropagation on:dragstart|preventDefault|stopPropagation on:dragend|preventDefault|stopPropagation @@ -122,7 +124,6 @@ button { cursor: pointer; width: var(--size-full); - height: var(--size-full); } .hidden { diff --git a/js/video/Index.svelte b/js/video/Index.svelte index 2f58b0569f82..50e405065310 100644 --- a/js/video/Index.svelte +++ b/js/video/Index.svelte @@ -174,7 +174,6 @@ {scale} {min_width} allow_overflow={false} - grid={sources.length > 1} > @@ -36,9 +36,9 @@ format: "mp4", label: "world video", show_label: true, - interactive: "true", + interactive: true, height: 400, - width: 400 + width: 400, }} /> @@ -49,14 +49,14 @@ video: { path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4", url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4", - orig_name: "world.mp4" - } + orig_name: "world.mp4", + }, }, label: "world video", show_label: true, - interactive: "false", + interactive: false, height: 200, - width: 400 + width: 400, }} /> @@ -64,11 +64,11 @@ name="Upload video" args={{ label: "world video", - show_label: "true", - interactive: "true", + show_label: true, + interactive: true, sources: ["upload", "webcam"], width: 400, height: 400, - value: null + value: null, }} /> diff --git a/js/video/shared/InteractiveVideo.svelte b/js/video/shared/InteractiveVideo.svelte index 78fe187e6b3e..1caefe06ba3c 100644 --- a/js/video/shared/InteractiveVideo.svelte +++ b/js/video/shared/InteractiveVideo.svelte @@ -70,6 +70,7 @@ on:load={handle_load} on:error={({ detail }) => dispatch("error", detail)} {root} + full_height={sources.length === 1} > From 7e1dd9f765d13f84f6e024b32f16af52da47dbf5 Mon Sep 17 00:00:00 2001 From: gradio-pr-bot Date: Mon, 6 Nov 2023 18:24:49 +0000 Subject: [PATCH 11/14] add changeset --- .changeset/mean-papayas-try.md | 1 + 1 file changed, 1 insertion(+) diff --git a/.changeset/mean-papayas-try.md b/.changeset/mean-papayas-try.md index 028474c03627..10c47501d678 100644 --- a/.changeset/mean-papayas-try.md +++ b/.changeset/mean-papayas-try.md @@ -1,6 +1,7 @@ --- "@gradio/atoms": patch "@gradio/audio": patch +"@gradio/upload": patch "@gradio/video": patch "gradio": patch --- From 1054c41c8c9353af33ac41611b189b164e8fdd8a Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 6 Nov 2023 19:30:37 +0100 Subject: [PATCH 12/14] calc new height with source selection --- js/audio/interactive/InteractiveAudio.svelte | 2 +- js/upload/src/Upload.svelte | 4 ++-- js/video/shared/InteractiveVideo.svelte | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte index d4f155209e71..8617438471b0 100644 --- a/js/audio/interactive/InteractiveAudio.svelte +++ b/js/audio/interactive/InteractiveAudio.svelte @@ -228,7 +228,7 @@ bind:dragging on:error={({ detail }) => dispatch("error", detail)} {root} - full_height={sources.length === 1} + include_sources={sources.length > 1} > diff --git a/js/upload/src/Upload.svelte b/js/upload/src/Upload.svelte index ae30283b682f..2a12a7e97c1a 100644 --- a/js/upload/src/Upload.svelte +++ b/js/upload/src/Upload.svelte @@ -13,7 +13,7 @@ export let disable_click = false; export let root: string; export let hidden = false; - export let full_height = true; + export let include_sources = false; // Needed for wasm support const upload_fn = getContext("upload_files"); @@ -95,7 +95,7 @@ class:center class:boundedheight class:flex - style:height={full_height ? "100%" : undefined} + style:height={include_sources ? "calc(100% - 40px" : "100%"} on:drag|preventDefault|stopPropagation on:dragstart|preventDefault|stopPropagation on:dragend|preventDefault|stopPropagation diff --git a/js/video/shared/InteractiveVideo.svelte b/js/video/shared/InteractiveVideo.svelte index 1caefe06ba3c..c6ad8780950d 100644 --- a/js/video/shared/InteractiveVideo.svelte +++ b/js/video/shared/InteractiveVideo.svelte @@ -70,7 +70,7 @@ on:load={handle_load} on:error={({ detail }) => dispatch("error", detail)} {root} - full_height={sources.length === 1} + include_sources={sources.length > 1} > From 2e259d8b9d4996ddc32faa3372bb2d006bb25853 Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 6 Nov 2023 19:36:08 +0100 Subject: [PATCH 13/14] formatting --- js/audio/Index.svelte | 2 +- js/audio/interactive/InteractiveAudio.svelte | 2 +- js/video/Video.stories.svelte | 16 ++++++++-------- 3 files changed, 10 insertions(+), 10 deletions(-) diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte index 950e7f63b50d..94db10eb9a18 100644 --- a/js/audio/Index.svelte +++ b/js/audio/Index.svelte @@ -99,7 +99,7 @@ cursorColor: "#ddd5e9", barRadius: 10, dragToSeek: true, - mediaControls: waveform_options.show_controls, + mediaControls: waveform_options.show_controls }; function handle_error({ detail }: CustomEvent): void { diff --git a/js/audio/interactive/InteractiveAudio.svelte b/js/audio/interactive/InteractiveAudio.svelte index 8617438471b0..5058d6b93965 100644 --- a/js/audio/interactive/InteractiveAudio.svelte +++ b/js/audio/interactive/InteractiveAudio.svelte @@ -54,7 +54,7 @@ function get_modules(): void { module_promises = [ import("extendable-media-recorder"), - import("extendable-media-recorder-wav-encoder"), + import("extendable-media-recorder-wav-encoder") ]; } diff --git a/js/video/Video.stories.svelte b/js/video/Video.stories.svelte index f8cda503b8b4..eae239d3f9ac 100644 --- a/js/video/Video.stories.svelte +++ b/js/video/Video.stories.svelte @@ -13,14 +13,14 @@ control: "text", description: "A path or URL for the default value that Video component is going to take. Can also be a tuple consisting of (video filepath, subtitle filepath). If a subtitle file is provided, it should be of type .srt or .vtt. Or can be callable, in which case the function will be called whenever the app loads to set the initial value of the component.", - name: "value", + name: "value" }, autoplay: { control: [true, false], description: "Whether to autoplay the video on load", name: "autoplay", - value: true, - }, + value: true + } }} /> @@ -38,7 +38,7 @@ show_label: true, interactive: true, height: 400, - width: 400, + width: 400 }} /> @@ -49,14 +49,14 @@ video: { path: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4", url: "https://gradio-static-files.s3.us-west-2.amazonaws.com/world.mp4", - orig_name: "world.mp4", - }, + orig_name: "world.mp4" + } }, label: "world video", show_label: true, interactive: false, height: 200, - width: 400, + width: 400 }} /> @@ -69,6 +69,6 @@ sources: ["upload", "webcam"], width: 400, height: 400, - value: null, + value: null }} /> From 8e6513fac9922438b4aca60cc6aeafaec182c3ca Mon Sep 17 00:00:00 2001 From: Hannah Date: Mon, 6 Nov 2023 19:39:29 +0100 Subject: [PATCH 14/14] tweak --- js/atoms/src/Block.svelte | 1 - js/audio/Index.svelte | 1 - 2 files changed, 2 deletions(-) diff --git a/js/atoms/src/Block.svelte b/js/atoms/src/Block.svelte index 65d56434f07a..b4422c4fe5af 100644 --- a/js/atoms/src/Block.svelte +++ b/js/atoms/src/Block.svelte @@ -50,7 +50,6 @@ border-radius: var(--block-radius); background: var(--block-background-fill); width: 100%; - height: 100%; line-height: var(--line-sm); } diff --git a/js/audio/Index.svelte b/js/audio/Index.svelte index 94db10eb9a18..5cc54281b38c 100644 --- a/js/audio/Index.svelte +++ b/js/audio/Index.svelte @@ -155,7 +155,6 @@ {container} {scale} {min_width} - allow_overflow={false} >