mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-02-23 11:39:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

allow audio components to take a string value (#930)

Browse Source 
* allow audio components to take a string value

* normalise audio + video input data types

* tweaks
This commit is contained in:
pngwn 2022-04-07 18:18:41 +01:00 committed by GitHub
parent d722de0a79
commit 03838573c9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 108 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
ui/packages/app/src/components/Audio/Audio.svelte
View File

@ -1,33 +1,39 @@
<script lang="ts">
import { Audio } from "@gradio/audio";
import type { FileData } from "@gradio/upload";
import { normalise_file } from "@gradio/upload";
export let mode: "static" | "dynamic";
export let value: null | FileData = null;
export let theme: string;
export let value: null | FileData | string = null;
export let default_value: null | FileData | string = null;
export let style: string | null;
export let name: string;
export let source: "microphone" | "upload";
export let type: "normal" | "numpy" = "normal";
export let label: string;
if (default_value) value = default_value;
let _value: null | FileData;
$: _value = normalise_file(value);
</script>
{#if mode === "dynamic"}
<Audio
{value}
{theme}
{label}
value={_value}
on:change={({ detail }) => (value = detail)}
{style}
{name}
{source}
{type}
on:change={({ detail }) => (value = detail)}
on:edit
on:play
on:pause
on:ended
/>
{:else if value}
<audio {theme} {style} controls>
<source src={value.data} />
{:else if _value}
<audio {style} controls>
<source src={_value.data} />
</audio>
{/if}

2
ui/packages/app/src/components/Checkbox/Checkbox.svelte
View File

@ -3,7 +3,7 @@
export let value: boolean = false;
export let default_value: boolean = false;
export let style: string | null;
export let style: string = "";
export let label: string;
export let mode: "static" | "dynamic";

3
ui/packages/app/src/components/Column/Column.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
export let value: boolean = true;
export let default_value: boolean;
export let style: string = "";
if ($$props.default) value = $$props.default;
if (default_value) value = default_value;
</script>
<div {style} class:hidden={!value} class="flex flex-1 flex-col gap-4">

5
ui/packages/app/src/components/Dropdown/Dropdown.svelte
View File

@ -3,11 +3,10 @@
export let label: string = "";
export let value: string = "";
export let default_value: string = "";
export let theme: string;
export let style: string | null;
export let style: string = "";
export let choices: Array<string>;
if (default_value) value = default_value;
</script>
<Dropdown bind:value {theme} {style} {choices} {label} on:change />
<Dropdown bind:value {style} {choices} {label} on:change />

18
ui/packages/app/src/components/File/File.svelte
View File

@ -1,18 +1,28 @@
<script lang="ts">
import { File, FileUpload } from "@gradio/file";
import type { FileData } from "@gradio/upload";
import { normalise_file } from "@gradio/upload";
export let value: null | FileData = null;
export let default_value: null | FileData = null;
export let theme: string;
export let style: string | null;
export let style: string = "";
export let mode: "static" | "dynamic";
if (default_value) value = default_value;
let _value: null | FileData;
$: _value = normalise_file(value);
</script>
{#if mode === "dynamic"}
<FileUpload bind:value {theme} {style} on:change on:clear />
{:else if value}
<File {value} {theme} {style} />
<FileUpload
value={_value}
on:change={({ detail }) => (value = detail)}
{style}
on:change
on:clear
/>
{:else if _value}
<File value={_value} {theme} {style} />
{/if}

5
ui/packages/app/src/components/HTML/HTML.svelte
View File

@ -5,8 +5,7 @@
export let label: string;
export let value: string;
export let default_value: string;
export let theme: string;
export let style: string | null;
export let style: string = "";
const dispatch = createEventDispatcher<{ change: undefined }>();
@ -15,4 +14,4 @@
if (default_value) value = default_value;
</script>
<HTML {value} {theme} {style} on:change />
<HTML {value} {style} on:change />

5
ui/packages/app/src/components/HighlightedText/HighlightedText.svelte
View File

@ -4,8 +4,7 @@
export let value: Array<[string, string | number]>;
export let default_value: Array<[string, string | number]>;
export let theme: string;
export let style: string | null;
export let style: string = "";
export let show_legend: boolean;
export let color_map: Record<string, string> = {};
@ -16,4 +15,4 @@
$: value, dispatch("change");
</script>
<HighlightedText {value} {theme} {style} {show_legend} {color_map} />
<HighlightedText {value} {style} {show_legend} {color_map} />

7
ui/packages/app/src/components/Image/Image.svelte
View File

@ -4,10 +4,10 @@
export let value: null | string = null;
export let default_value: null | string = null;
export let theme: string;
export let style: string | null;
export let style: string = "";
export let source: "canvas" | "webcam" | "upload" = "upload";
export let tool: "editor" | "select" = "editor";
export let label: string;
export let mode: "static" | "dynamic";
@ -21,7 +21,6 @@
{#if mode === "static"}
<div
class="output-image w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative"
{theme}
{style}
>
<!-- svelte-ignore a11y-missing-attribute -->
@ -30,12 +29,12 @@
{:else}
<Image
bind:value
{theme}
{style}
{source}
{tool}
on:edit
on:clear
on:change
{label}
/>
{/if}

3
ui/packages/app/src/components/Row/Row.svelte
View File

@ -1,8 +1,9 @@
<script lang="ts">
export let value: boolean;
export let default_value: boolean;
export let style: string = "";
if ($$props.default_value) value = $$props.default_value;
if (default_value) value = default_value;
</script>
<div {style} class:hidden={!value} class="flex flex-row gap-4">

5
ui/packages/app/src/components/Slider/Slider.svelte
View File

@ -5,8 +5,8 @@
export let label: string;
export let default_value: number;
export let theme: string;
export let style: string | null;
export let style: string = "";
export let minimum: number;
export let maximum: number;
export let step: number;
@ -18,7 +18,6 @@
<Range
bind:value
{label}
{theme}
{style}
{minimum}
{maximum}

26
ui/packages/app/src/components/Video/Video.svelte
View File

@ -1,48 +1,54 @@
<script lang="ts">
import type { FileData } from "@gradio/upload";
import { normalise_file } from "@gradio/upload";
import { playable } from "../utils/helpers";
import { Video } from "@gradio/video";
import { _ } from "svelte-i18n";
export let value: FileData | null = null;
export let value: FileData | null | string = null;
export let label: string;
export let default_value: FileData | null;
export let theme: string;
export let style: string | null;
export let style: string = "";
export let source: string;
export let mode: "static" | "dynamic";
if (default_value) value = default_value;
let _value: null | FileData;
$: _value = normalise_file(value);
</script>
{#if mode === "static" && value}
{#if mode === "static" && _value}
<div
class="output-video w-full h-60 flex justify-center items-center bg-gray-200 dark:bg-gray-600 relative"
>
{#if playable(value.name)}
{#if playable(_value.data)}
<!-- svelte-ignore a11y-media-has-caption -->
<video
class="video_preview w-full h-full object-contain"
controls
playsInline
preload="auto"
src={value.data}
src={_value.data}
/>
{:else}
<a
href={value.data}
download={value.name}
href={_value.data}
download={_value.name}
class="file-preview h-60 w-full flex flex-col justify-center items-center relative"
>
<div class="file-name text-4xl p-6 break-all">{value.name}</div>
<div class="file-name text-4xl p-6 break-all">{_value.name}</div>
</a>
{/if}
</div>
{:else}
<Video
bind:value
{theme}
value={_value}
on:change={({ detail }) => (value = detail)}
{label}
{style}
{source}
drop_text={$_("interface.drop_video")}

5
ui/packages/audio/src/Audio.svelte
View File

@ -16,6 +16,7 @@
import audio_icon from "./music.svg";
export let value: null | { name: string; data: string } = null;
export let label: string;
export let style: string | null;
export let name: string;
export let source: "microphone" | "upload" | "none";
@ -125,7 +126,7 @@
}: {
detail: { values: [number, number] };
}) {
if (!value?.data) return;
if (!value) return;
dispatch("change", {
data: value.data,
@ -154,7 +155,7 @@
color={dragging ? "green" : "grey"}
padding={false}
>
<BlockLabel image={audio_icon} label={"Audio"} />
<BlockLabel image={audio_icon} label={label || "Audio"} />
{#if value === null}
{#if source === "microphone"}
{#if recording}

3
ui/packages/chatbot/src/ChatBot.svelte
View File

@ -1,6 +1,9 @@
<script lang="ts">
import { beforeUpdate, afterUpdate, createEventDispatcher } from "svelte";
export let value: Array<[string, string]>;
export let style: string = "";
let div: HTMLDivElement;
let autoscroll: Boolean;

3
ui/packages/file/src/FileUpload.svelte
View File

@ -8,11 +8,12 @@
import file_icon from "./file.svg";
export let value: null | FileData;
export let drop_text: string = "Drop a file file";
export let or_text: string = "or";
export let upload_text: string = "click to upload";
export let label: string = "";
export let style: string;
let file_count: string;
function handle_upload({ detail }: CustomEvent<FileData>) {

1
ui/packages/form/src/Checkbox.svelte
View File

@ -6,6 +6,7 @@
export let value: boolean;
export let disabled: boolean = false;
export let label: string;
export let style: string;
const dispatch = createEventDispatcher<{ change: boolean }>();

1
ui/packages/form/src/CheckboxGroup.svelte
View File

@ -6,6 +6,7 @@
export let choices: Array<string>;
export let disabled: boolean = false;
export let label: string;
export let style: string;
const dispatch = createEventDispatcher<{ change: Array<string> }>();

1
ui/packages/form/src/Dropdown.svelte
View File

@ -5,6 +5,7 @@
export let label: string;
export let value: string | undefined = undefined;
export let choices: Array<string>;
export let style: string;
const dispatch = createEventDispatcher<{ change: string }>();

1
ui/packages/form/src/Number.svelte
View File

@ -5,6 +5,7 @@
export let value: number = 0;
export let disabled: boolean = false;
export let label: string;
export let style: string;
const dispatch =
createEventDispatcher<{ change: number; submit: undefined }>();

1
ui/packages/form/src/Radio.svelte
View File

@ -6,6 +6,7 @@
export let choices: Array<string>;
export let disabled: boolean = false;
export let label: string;
export let style: string;
const dispatch = createEventDispatcher();

5
ui/packages/form/src/Textbox.svelte
View File

@ -3,11 +3,10 @@
import { BlockTitle, Block } from "@gradio/atoms";
export let value: string = "";
export let theme: string = "default";
export let lines: number = 1;
export let placeholder: string = "";
export let style = "";
export let label: string;
export let style: string;
const dispatch =
createEventDispatcher<{ change: string; submit: undefined }>();
@ -38,7 +37,6 @@
class="block gr-box gr-input w-full gr-text-input"
bind:value
{placeholder}
{theme}
{style}
rows={lines}
/>
@ -48,7 +46,6 @@
class="gr-box gr-input w-full gr-text-input"
{placeholder}
bind:value
{theme}
on:keypress={handle_keypress}
{style}
/>

1
ui/packages/highlighted-text/src/HighlightedText.svelte
View File

@ -5,6 +5,7 @@
export let theme: string = "default";
export let show_legend: boolean = false;
export let color_map: Record<string, string> = {};
export let style: string;
let ctx: CanvasRenderingContext2D;

4
ui/packages/html/src/HTML.svelte
View File

@ -2,13 +2,13 @@
import { createEventDispatcher } from "svelte";
export let value: string;
export let theme: string = "default";
export let style: string;
const dispatch = createEventDispatcher<{ change: undefined }>();
$: value, dispatch("change");
</script>
<div class="output-html" {theme}>
<div class="output-html">
{@html value}
</div>

1
ui/packages/image/src/Image.svelte
View File

@ -14,6 +14,7 @@
export let value: null | string;
export let label: string;
export let style: string;
export let source: "canvas" | "webcam" | "upload" = "upload";
export let tool: "editor" | "select" = "editor";

1
ui/packages/upload/src/index.ts
View File

@ -1,3 +1,4 @@
export { default as Upload } from "./Upload.svelte";
export { default as ModifyUpload } from "./ModifyUpload.svelte";
export type { FileData } from "./types";
export * from "./utils";

13
ui/packages/upload/src/utils.ts Normal file
View File

@ -0,0 +1,13 @@
import type { FileData } from "./types";
export function normalise_file(
file: string | FileData | null
): FileData | null {
if (file == null) return null;
if (typeof file === "string") {
return {
name: "file_data",
data: file
};
} else return file;
}

1
ui/packages/video/src/Video.svelte
View File

@ -12,6 +12,7 @@
export let theme: string = "default";
export let source: string;
export let label: string;
export let style: string;
export let drop_text: string = "Drop a video file";
export let or_text: string = "or";

16
ui/pnpm-lock.yaml
View File

@ -98,7 +98,7 @@ importers:
'@gradio/upload': link:../upload
'@gradio/video': link:../video
mime-types: 2.1.34
svelte-i18n: 3.3.13_svelte@3.46.3
svelte-i18n: 3.3.13
packages/audio:
specifiers:
@ -4340,6 +4340,20 @@ packages:
dependencies:
svelte: 3.46.3
/svelte-i18n/3.3.13:
resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
engines: {node: '>= 11.15.0'}
hasBin: true
peerDependencies:
svelte: ^3.25.1
dependencies:
deepmerge: 4.2.2
estree-walker: 2.0.2
intl-messageformat: 9.11.4
sade: 1.8.1
tiny-glob: 0.2.9
dev: false
/svelte-i18n/3.3.13_svelte@3.46.3:
resolution: {integrity: sha512-RQM+ys4+Y9ztH//tX22H1UL2cniLNmIR+N4xmYygV6QpQ6EyQvloZiENRew8XrVzfvJ8HaE8NU6/yurLkl7z3g==}
engines: {node: '>= 11.15.0'}