mirror/gradio
2
0
Fork 0
mirror of https://github.com/gradio-app/gradio.git synced 2025-04-12 12:40:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

remove index files and update test paths (#5262)

Browse Source
This commit is contained in:
pngwn 2023-08-18 16:33:07 +01:00 committed by GitHub
parent 807fb883d3
commit 96e4f5b922
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
50 changed files with 152 additions and 1415 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
js/app/src/Login.svelte
View File

@ -1,6 +1,6 @@
<script lang="ts">
import Form from "@gradio/form";
import Textbox from "@gradio/textbox";
import Textbox from "@gradio/textbox/interactive";
import { BaseButton } from "@gradio/button/static";
import Column from "@gradio/column";
import { _ } from "svelte-i18n";
@ -20,7 +20,7 @@
let response = await fetch(root + "/login", {
method: "POST",
body: formData,
body: formData
});
if (response.status === 400) {
incorrect_credentials = true;
@ -52,7 +52,6 @@
lines={1}
show_label={true}
max_lines={1}
mode="interactive"
on:submit={submit}
bind:value={username}
/>
@ -61,7 +60,6 @@
lines={1}
show_label={true}
max_lines={1}
mode="interactive"
type="password"
on:submit={submit}
bind:value={password}

151
js/app/test/components.test.ts
View File

@ -10,29 +10,45 @@ import {
import { render, cleanup } from "@gradio/tootils";
import { setupi18n } from "../src/i18n";
import AnnotatedImage from "@gradio/annotatedimage";
import Audio from "@gradio/audio";
import Chatbot from "@gradio/chatbot";
import Checkbox from "@gradio/checkbox";
import CheckboxGroup from "@gradio/checkboxgroup";
import ColorPicker from "@gradio/colorpicker";
import DataFrame from "@gradio/dataframe";
import Dropdown from "@gradio/dropdown";
import File from "@gradio/file";
import Gallery from "@gradio/gallery";
import HTML from "@gradio/html";
import HighlightedText from "@gradio/highlightedtext";
import Json from "@gradio/json";
import Label from "@gradio/label";
import Markdown from "@gradio/markdown";
import Model3D from "@gradio/model3d";
import Number from "@gradio/number";
import Radio from "@gradio/radio";
import Slider from "@gradio/slider";
import Textbox from "@gradio/textbox";
import TimeSeries from "@gradio/timeseries";
import UploadButton from "@gradio/uploadbutton";
import Video from "@gradio/video";
import StaticAnnotatedImage from "@gradio/annotatedimage/static";
import StaticAudio from "@gradio/audio/static";
import StaticChatbot from "@gradio/chatbot/static";
import StaticCheckbox from "@gradio/checkbox/static";
import StaticCheckboxGroup from "@gradio/checkboxgroup/static";
import StaticColorPicker from "@gradio/colorpicker/static";
import StaticDataframe from "@gradio/dataframe/static";
import StaticDropdown from "@gradio/dropdown/static";
import StaticFile from "@gradio/file/static";
import StaticGallery from "@gradio/gallery/static";
import StaticHTML from "@gradio/html/static";
import StaticHighlightedText from "@gradio/highlightedtext/static";
import StaticJson from "@gradio/json/static";
import StaticLabel from "@gradio/label/static";
import StaticMarkdown from "@gradio/markdown/static";
import StaticModel3D from "@gradio/model3d/static";
import StaticNumber from "@gradio/number/static";
import StaticRadio from "@gradio/radio/static";
import StaticSlider from "@gradio/slider/static";
import StaticTextbox from "@gradio/textbox/static";
import StaticTimeSeries from "@gradio/timeseries/static";
import StaticUploadButton from "@gradio/uploadbutton/static";
import StaticVideo from "@gradio/video/static";
import InteractiveAudio from "@gradio/audio/interactive";
import InteractiveCheckbox from "@gradio/checkbox/interactive";
import InteractiveCheckboxGroup from "@gradio/checkboxgroup/interactive";
import InteractiveColorPicker from "@gradio/colorpicker/interactive";
import InteractiveDataframe from "@gradio/dataframe/interactive";
import InteractiveDropdown from "@gradio/dropdown/interactive";
import InteractiveFile from "@gradio/file/interactive";
import InteractiveModel3D from "@gradio/model3d/interactive";
import InteractiveNumber from "@gradio/number/interactive";
import InteractiveRadio from "@gradio/radio/interactive";
import InteractiveSlider from "@gradio/slider/interactive";
import InteractiveTextbox from "@gradio/textbox/interactive";
import InteractiveTimeSeries from "@gradio/timeseries/interactive";
import InteractiveUploadButton from "@gradio/uploadbutton/interactive";
import InteractiveVideo from "@gradio/video/interactive";
import { LoadingStatus } from "@gradio/statustracker";
const loading_status: LoadingStatus = {
@ -47,38 +63,67 @@ const loading_status: LoadingStatus = {
};
const components = [
["AnnotatedImage", AnnotatedImage, { height: 100, width: 100, value: null }],
["Audio", Audio, {}],
// ["Button", Button, {}],
["Chatbot", Chatbot, {}],
["Checkbox", Checkbox, {}],
["CheckboxGroup", CheckboxGroup, { choices: ["a", "b", "c"] }],
// ["Code", Code, {}],
["ColorPicker", ColorPicker, {}],
[
"DataFrame",
DataFrame,
"StaticAnnotatedImage",
StaticAnnotatedImage,
{ height: 100, width: 100, value: null }
],
["InteractiveAudio", InteractiveAudio, {}],
["StaticAudio", StaticAudio, {}],
["StaticChatbot", StaticChatbot, {}],
["InteractiveCheckbox", InteractiveCheckbox, {}],
["StaticCheckbox", StaticCheckbox, {}],
[
"InteractiveCheckboxGroup",
InteractiveCheckboxGroup,
{ choices: ["a", "b", "c"] }
],
["StaticCheckboxGroup", StaticCheckboxGroup, { choices: ["a", "b", "c"] }],
["InteractiveColorPicker", InteractiveColorPicker, {}],
["StaticColorPicker", StaticColorPicker, {}],
[
"InteractiveDataFrame",
InteractiveDataframe,
{ value: [[1, 2, 3]], col_count: [3, "fixed"], row_count: [3, "fixed"] }
],
// ["Dataset", Dataset, {}],
["Dropdown", Dropdown, { choices: ["a", "b", "c"] }],
["File", File, {}],
["Gallery", Gallery, {}],
["HTML", HTML, {}],
["HighlightedText", HighlightedText, {}],
// ["Image",, {} Image],
["Json", Json, {}],
["Label", Label, {}],
["Markdown", Markdown, {}],
["Model3D", Model3D, {}],
["Number", Number, {}],
// ["Plot", Plot, {}],
["Radio", Radio, {}],
["Slider", Slider, {}],
["Textbox", Textbox, { container: false }],
["TimeSeries", TimeSeries, {}],
["UploadButton", UploadButton, {}],
["Video", Video, {}]
[
"StaticDataFrame",
StaticDataframe,
{ value: [[1, 2, 3]], col_count: [3, "fixed"], row_count: [3, "fixed"] }
],
["InteractiveDropdown", InteractiveDropdown, { choices: ["a", "b", "c"] }],
["StaticDropdown", StaticDropdown, { choices: ["a", "b", "c"] }],
["InteractiveFile", InteractiveFile, {}],
["StaticFile", StaticFile, {}],
["StaticGallery", StaticGallery, {}],
["StaticHTML", StaticHTML, {}],
["StaticHighlightedText", StaticHighlightedText, {}],
["StaticJson", StaticJson, {}],
["StaticLabel", StaticLabel, {}],
["StaticMarkdown", StaticMarkdown, {}],
["InteractiveModel3D", InteractiveModel3D, {}],
["StaticModel3D", StaticModel3D, {}],
["InteractiveNumber", InteractiveNumber, {}],
["StaticNumber", StaticNumber, {}],
["InteractiveRadio", InteractiveRadio, {}],
["StaticRadio", StaticRadio, {}],
["InteractiveSlider", InteractiveSlider, {}],
["StaticSlider", StaticSlider, {}],
["InteractiveTextbox", InteractiveTextbox, { container: false }],
["StaticTextbox", StaticTextbox, { container: false }],
["InteractiveTimeSeries", InteractiveTimeSeries, {}],
["StaticTimeSeries", StaticTimeSeries, {}],
["InteractiveUploadButton", InteractiveUploadButton, {}],
["StaticUploadButton", StaticUploadButton, {}],
["InteractiveVideo", InteractiveVideo, {}],
["StaticVideo", StaticVideo, {}]
] as const;
describe("all components should apply provided class names", () => {
@ -174,7 +219,7 @@ describe("all components should have the appropriate label when set via the `lab
});
components
.filter(([name]) => name !== "Markdown" && name !== "HTML")
.filter(([name]) => name !== "StaticMarkdown" && name !== "StaticHTML")
.forEach(([name, component, props]) => {
test(name, async () => {
const { getAllByText } = await render(component, {

98
js/audio/index.svelte
View File

@ -1,98 +0,0 @@
<svelte:options accessors={true} />
<script lang="ts">
import type { FileData } from "@gradio/upload";
import type { LoadingStatus } from "@gradio/statustracker";
import Audio from "./interactive";
import StaticAudio from "./static";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let mode: "static" | "interactive";
export let value: null | FileData | string = null;
export let name: string;
export let source: "microphone" | "upload";
export let label: string;
export let root: string;
export let show_label: boolean;
export let pending: boolean;
export let streaming: boolean;
export let root_url: null | string;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let autoplay = false;
export let show_download_button = true;
export let show_share_button = false;
export let show_edit_button = true;
</script>
{#if mode === "interactive"}
<Audio
{elem_id}
{elem_classes}
{visible}
bind:value
{name}
{source}
{label}
{root}
{show_label}
{pending}
{streaming}
{root_url}
{container}
{scale}
{min_width}
{loading_status}
{autoplay}
{show_edit_button}
on:change
on:stream
on:drag
on:edit
on:play
on:pause
on:stop
on:end
on:start_recording
on:stop_recording
on:upload
on:error
/>
{:else}
<StaticAudio
{elem_id}
{elem_classes}
{visible}
{mode}
bind:value
{source}
{label}
{root}
{show_label}
{root_url}
{container}
{scale}
{min_width}
{loading_status}
{autoplay}
{show_download_button}
{show_share_button}
on:change
on:stream
on:drag
on:edit
on:play
on:pause
on:stop
on:end
on:start_recording
on:stop_recording
on:upload
on:error
/>
{/if}

1
js/audio/package.json
View File

@ -20,7 +20,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

2
js/chatbot/Chatbot.stories.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Chatbot from "./index.svelte";
import Chatbot from "./static";
</script>
<Meta

2
js/chatbot/Chatbot.test.ts
View File

@ -1,6 +1,6 @@
import { test, describe, assert, afterEach } from "vitest";
import { cleanup, render } from "@gradio/tootils";
import Chatbot from "./index.svelte";
import Chatbot from "./static";
import type { LoadingStatus } from "@gradio/statustracker";
import type { FileData } from "@gradio/upload";

55
js/chatbot/index.svelte
View File

@ -1,55 +0,0 @@
<script lang="ts">
import Chatbot from "./static";
import type { LoadingStatus } from "@gradio/statustracker";
import type { ThemeMode } from "js/app/src/components/types";
import type { FileData } from "@gradio/upload";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: [string | FileData | null, string | FileData | null][] = [];
export let latex_delimiters: {
left: string;
right: string;
display: boolean;
}[];
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let label: string;
export let show_label = true;
export let root: string;
export let root_url: null | string;
export let selectable = false;
export let theme_mode: ThemeMode;
export let show_share_button = false;
export let rtl = false;
export let show_copy_button = false;
export let loading_status: LoadingStatus | undefined = undefined;
export let height = 400;
</script>
<Chatbot
{elem_id}
{elem_classes}
{visible}
bind:value
{scale}
{min_width}
{label}
{show_label}
{root}
{root_url}
{selectable}
{theme_mode}
{show_share_button}
{rtl}
{show_copy_button}
{latex_delimiters}
on:change
on:select
on:share
on:error
{loading_status}
{height}
/>

1
js/chatbot/package.json
View File

@ -25,7 +25,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

54
js/checkbox/index.svelte
View File

@ -1,54 +0,0 @@
<script lang="ts">
import StaticCheckbox from "./static";
import InteractiveCheckbox from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
import { _ } from "svelte-i18n";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value = false;
export let value_is_output = false;
export let label = $_("checkbox.checkbox");
export let info: string | undefined = undefined;
export let mode: "static" | "interactive";
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
</script>
{#if mode === "static"}
<StaticCheckbox
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{label}
{info}
{container}
{scale}
{min_width}
{loading_status}
on:change
on:input
on:select
/>
{:else}
<InteractiveCheckbox
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{label}
{info}
{container}
{scale}
{min_width}
{loading_status}
on:change
on:input
on:select
/>
{/if}

1
js/checkbox/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

63
js/checkboxgroup/index.svelte
View File

@ -1,63 +0,0 @@
<script lang="ts">
import StaticCheckboxgroup from "./static";
import InteractiveCheckboxgroup from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
import { _ } from "svelte-i18n";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: (string | number)[] = [];
export let value_is_output = false;
export let choices: [string, number][];
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let mode: "static" | "interactive";
export let label = $_("checkbox.checkbox_group");
export let info: string | undefined = undefined;
export let show_label: boolean;
export let loading_status: LoadingStatus;
</script>
{#if mode === "static"}
<StaticCheckboxgroup
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{choices}
{container}
{scale}
{min_width}
{label}
{info}
{show_label}
{loading_status}
on:select
on:change
on:input
/>
{:else}
<InteractiveCheckboxgroup
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{choices}
{container}
{scale}
{min_width}
{label}
{info}
{show_label}
{loading_status}
on:select
on:change
on:input
/>
{/if}

1
js/checkboxgroup/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

55
js/code/index.svelte
View File

@ -1,55 +0,0 @@
<script lang="ts">
import { _ } from "svelte-i18n";
import type { LoadingStatus } from "@gradio/statustracker";
import StaticCode from "./static";
import InteractiveCode from "./interactive";
export let value = "";
export let value_is_output = false;
export let language = "";
export let lines = 5;
export let target: HTMLElement;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let mode: "static" | "interactive";
export let label = $_("code.code");
export let show_label = true;
export let loading_status: LoadingStatus;
</script>
{#if mode == "static"}
<StaticCode
bind:value
bind:value_is_output
{language}
{lines}
{target}
{elem_id}
{elem_classes}
{visible}
{label}
{show_label}
{loading_status}
on:change
on:input
/>
{:else}
<InteractiveCode
bind:value
bind:value_is_output
{language}
{lines}
{target}
{elem_id}
{elem_classes}
{visible}
{label}
{show_label}
{loading_status}
on:change
on:input
/>
{/if}

1
js/code/package.json
View File

@ -35,7 +35,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

67
js/colorpicker/index.svelte
View File

@ -1,67 +0,0 @@
<svelte:options accessors={true} />
<script lang="ts">
import StaticColorpicker from "./static";
import InteractiveColorpicker from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
export let label = "ColorPicker";
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: string;
export let value_is_output = false;
export let show_label: boolean;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let mode: "static" | "interactive";
export let interactive: boolean;
</script>
{#if mode === "static"}
<StaticColorpicker
{label}
{info}
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{show_label}
{container}
{scale}
{min_width}
{loading_status}
{interactive}
on:change
on:input
on:submit
on:blur
on:focus
/>
{:else}
<InteractiveColorpicker
{label}
{info}
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{show_label}
{container}
{scale}
{min_width}
{loading_status}
{interactive}
on:change
on:input
on:submit
on:blur
on:focus
/>
{/if}

1
js/colorpicker/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

71
js/dataframe/index.svelte
View File

@ -1,71 +0,0 @@
<script lang="ts">
import type { LoadingStatus } from "@gradio/statustracker";
import StaticDataframe from "./static";
import InteractiveDataframe from "./interactive";
type Headers = string[];
type Data = (string | number)[][];
type Datatype = "str" | "markdown" | "html" | "number" | "bool" | "date";
export let headers: Headers = [];
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value_is_output = false;
export let mode: "static" | "interactive";
export let col_count: [number, "fixed" | "dynamic"];
export let row_count: [number, "fixed" | "dynamic"];
export let label: string | null = null;
export let wrap: boolean;
export let datatype: Datatype | Datatype[];
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let value: { data: Data; headers: Headers } = {
data: [["", "", ""]],
headers: ["1", "2", "3"]
};
</script>
{#if mode === "static"}
<StaticDataframe
{headers}
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{col_count}
{row_count}
{label}
{wrap}
{datatype}
{scale}
{min_width}
{loading_status}
on:change
on:select
on:input
/>
{:else}
<InteractiveDataframe
{headers}
{elem_id}
{elem_classes}
{visible}
bind:value
bind:value_is_output
{col_count}
{row_count}
{label}
{wrap}
{datatype}
{scale}
{min_width}
{loading_status}
on:change
on:select
on:input
/>
{/if}

1
js/dataframe/package.json
View File

@ -19,7 +19,6 @@
"dequal": "^2.0.2"
},
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

81
js/dropdown/index.svelte
View File

@ -1,81 +0,0 @@
<script lang="ts">
import StaticDropdown from "./static";
import InteractiveDropdown from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
import { _ } from "svelte-i18n";
export let label = $_("dropdown.dropdown");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: string | string[];
export let value_is_output = false;
export let multiselect = false;
export let max_choices: number;
export let choices: string[];
export let show_label: boolean;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let allow_custom_value = false;
export let mode: "static" | "interactive";
if (multiselect && !value) {
value = [];
} else if (!value) {
value = "";
}
</script>
{#if mode === "static"}
<StaticDropdown
{visible}
{elem_id}
{elem_classes}
{container}
{scale}
{min_width}
bind:value
bind:value_is_output
{choices}
{multiselect}
{max_choices}
{label}
{info}
{show_label}
{allow_custom_value}
{loading_status}
on:change
on:input
on:select
on:blur
on:focus
/>
{:else}
<InteractiveDropdown
{visible}
{elem_id}
{elem_classes}
{container}
{scale}
{min_width}
bind:value
bind:value_is_output
{choices}
{multiselect}
{max_choices}
{label}
{info}
{show_label}
{allow_custom_value}
{loading_status}
on:change
on:input
on:select
on:blur
on:focus
/>
{/if}

1
js/dropdown/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

76
js/file/index.svelte
View File

@ -1,76 +0,0 @@
<svelte:options accessors={true} />
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { FileData } from "@gradio/upload";
import type { LoadingStatus } from "@gradio/statustracker";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: null | FileData | FileData[];
export let mode: "static" | "interactive";
export let root: string;
export let label: string;
export let show_label: boolean;
export let file_count: string;
export let file_types: string[] = ["file"];
export let root_url: null | string;
export let selectable = false;
export let loading_status: LoadingStatus;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let height: number | undefined = undefined;
</script>
{#if mode === "static"}
<Static
{elem_id}
{elem_classes}
{visible}
bind:value
{mode}
{root}
{label}
{show_label}
{root_url}
{selectable}
{loading_status}
{container}
{scale}
{min_width}
{height}
on:clear
on:select
on:change
on:upload
on:error
/>
{:else}
<Interactive
{elem_id}
{elem_classes}
{visible}
bind:value
{mode}
{root}
{label}
{show_label}
{file_count}
{file_types}
{root_url}
{selectable}
{loading_status}
{container}
{scale}
{min_width}
{height}
on:clear
on:select
on:change
on:upload
on:error
/>
{/if}

1
js/file/package.json
View File

@ -17,7 +17,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

2
js/image/Image.test.ts
View File

@ -11,7 +11,7 @@ import { spy } from "tinyspy";
import { cleanup, render } from "@gradio/tootils";
import { setupi18n } from "../app/src/i18n";
import Image from "./index.svelte";
import Image from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
const loading_status = {

112
js/image/index.svelte
View File

@ -1,112 +0,0 @@
<svelte:options accessors={true} />
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import { createEventDispatcher } from "svelte";
import StaticImage from "./static";
import Image from "./interactive";
import { Block } from "@gradio/atoms";
import { _ } from "svelte-i18n";
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
import { UploadText } from "@gradio/atoms";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: null | string = null;
export let source: "canvas" | "webcam" | "upload" = "upload";
export let tool: "editor" | "select" | "sketch" | "color-sketch" = "editor";
export let label: string;
export let show_label: boolean;
export let show_download_button: boolean;
export let streaming: boolean;
export let pending: boolean;
export let height: number | undefined;
export let width: number | undefined;
export let mirror_webcam: boolean;
export let shape: [number, number];
export let brush_radius: number;
export let brush_color: string;
export let mask_opacity: number;
export let selectable = false;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let mode: "static" | "interactive";
export let show_share_button = false;
const dispatch = createEventDispatcher<{
change: undefined;
error: string;
}>();
$: value, dispatch("change");
let dragging: boolean;
const FIXED_HEIGHT = 240;
$: value = !value ? null : value;
</script>
{#if mode === "static"}
<Static
bind:value
{elem_id}
{elem_classes}
{visible}
{label}
{show_label}
{show_download_button}
{height}
{width}
{selectable}
{container}
{scale}
{min_width}
{loading_status}
{show_share_button}
on:edit
on:clear
on:stream
on:upload
on:select
on:share
on:error
></Static>
{:else}
<Interactive
bind:value
{elem_id}
{elem_classes}
{visible}
{source}
{tool}
{label}
{show_label}
{streaming}
{pending}
{height}
{width}
{mirror_webcam}
{shape}
{brush_radius}
{brush_color}
{mask_opacity}
{selectable}
{container}
{scale}
{min_width}
{loading_status}
on:edit
on:clear
on:stream
on:upload
on:select
on:share
on:error
></Interactive>
{/if}

1
js/image/package.json
View File

@ -19,7 +19,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

60
js/model3D/index.svelte
View File

@ -1,60 +0,0 @@
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { FileData } from "@gradio/upload";
import type { LoadingStatus } from "@gradio/statustracker";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: null | FileData = null;
export let mode: "static" | "interactive";
export let root: string;
export let root_url: null | string;
export let clearColor: [number, number, number, number];
export let loading_status: LoadingStatus;
export let label: string;
export let show_label: boolean;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
</script>
{#if mode === "static"}
<Static
{elem_id}
{elem_classes}
{visible}
bind:value
{root}
{root_url}
{clearColor}
{loading_status}
{label}
{show_label}
{container}
{scale}
{min_width}
on:change
on:clear
></Static>
{:else}
<Interactive
{elem_id}
{elem_classes}
{visible}
bind:value
{root}
{root_url}
{clearColor}
{loading_status}
{label}
{show_label}
{container}
{scale}
{min_width}
on:change
on:clear
></Interactive>
{/if}

1
js/model3D/package.json
View File

@ -17,7 +17,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

2
js/number/Number.stories.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Number from "./index.svelte";
import Number from "./interactive";
</script>
<Meta title="Components/Number" component={Number} />

72
js/number/index.svelte
View File

@ -1,72 +0,0 @@
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
import { _ } from "svelte-i18n";
export let label = $_("number.number");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let value = 0;
export let show_label: boolean;
export let minimum: number | undefined = undefined;
export let maximum: number | undefined = undefined;
export let loading_status: LoadingStatus;
export let mode: "static" | "interactive";
export let value_is_output = false;
export let step: number | null = null;
</script>
{#if mode === "static"}
<Static
bind:value
bind:value_is_output
{label}
{info}
{elem_id}
{elem_classes}
{visible}
{container}
{scale}
{min_width}
{show_label}
{minimum}
{maximum}
{loading_status}
{step}
on:change
on:input
on:submit
on:blur
on:focus
/>
{:else}
<Interactive
bind:value
bind:value_is_output
{label}
{info}
{elem_id}
{elem_classes}
{visible}
{container}
{scale}
{min_width}
{show_label}
{minimum}
{maximum}
{step}
{loading_status}
on:change
on:input
on:submit
on:blur
on:focus
/>
{/if}

1
js/number/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

6
js/radio/Radio.test.ts
View File

@ -3,7 +3,7 @@ import { test, describe, assert, afterEach } from "vitest";
import { cleanup, render } from "@gradio/tootils";
import event from "@testing-library/user-event";
import Radio from "./index.svelte";
import Radio from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
const loading_status = {
@ -40,7 +40,9 @@ describe("Radio", () => {
true
);
const radioButtons: HTMLOptionElement[] = getAllByRole("radio");
const radioButtons: HTMLOptionElement[] = getAllByRole(
"radio"
) as HTMLOptionElement[];
assert.equal(radioButtons.length, 3);
radioButtons.forEach((radioButton: HTMLOptionElement, index) => {

61
js/radio/index.svelte
View File

@ -1,61 +0,0 @@
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
import { _ } from "svelte-i18n";
export let label = $_("radio.radio");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: string | number | null = null;
export let value_is_output = false;
export let choices: [string, number][] = [];
export let mode: "static" | "interactive";
export let show_label: boolean;
export let container = false;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
</script>
{#if mode === "static"}
<Static
bind:value
bind:value_is_output
{label}
{info}
{elem_id}
{elem_classes}
{visible}
{choices}
{show_label}
{container}
{scale}
{min_width}
{loading_status}
on:change
on:input
on:select
/>
{:else}
<Interactive
bind:value
bind:value_is_output
{label}
{info}
{elem_id}
{elem_classes}
{visible}
{choices}
{show_label}
{container}
{scale}
{min_width}
{loading_status}
on:change
on:input
on:select
/>
{/if}

1
js/radio/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

2
js/row/Row.stories.svelte
View File

@ -1,7 +1,7 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Row from "./static";
import Image from "@gradio/image";
import Image from "@gradio/image/interactive";
</script>
<Meta title="Layout Elements/Row" component={Row} />

2
js/slider/Slider.component.spec.ts
View File

@ -1,6 +1,6 @@
import { test, expect } from "@playwright/experimental-ct-svelte";
import type { Page, Locator } from "@playwright/test";
import Slider from "./index.svelte";
import Slider from "./interactive";
import { spy } from "tinyspy";
import type { LoadingStatus } from "@gradio/statustracker";

68
js/slider/index.svelte
View File

@ -1,68 +0,0 @@
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import { _ } from "svelte-i18n";
import type { LoadingStatus } from "@gradio/statustracker";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value = 0;
export let label = $_("slider.slider");
export let info: string | undefined = undefined;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let minimum: number;
export let maximum: number;
export let step: number;
export let mode: "static" | "interactive";
export let show_label: boolean;
export let loading_status: LoadingStatus;
export let value_is_output = false;
</script>
{#if mode === "static"}
<Static
bind:value
bind:value_is_output
{label}
{info}
{show_label}
{minimum}
{maximum}
{step}
{visible}
{elem_id}
{elem_classes}
{container}
{scale}
{min_width}
{loading_status}
on:input
on:change
on:release
/>
{:else}
<Interactive
bind:value
bind:value_is_output
{label}
{info}
{show_label}
{minimum}
{maximum}
{step}
{visible}
{elem_id}
{elem_classes}
{container}
{scale}
{min_width}
{loading_status}
on:input
on:change
on:release
/>
{/if}

1
js/slider/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

2
js/textbox/Textbox.stories.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Textbox from "./index.svelte";
import Textbox from "./interactive";
</script>
<Meta

8
js/textbox/Textbox.test.ts
View File

@ -3,7 +3,7 @@ import { spy } from "tinyspy";
import { cleanup, fireEvent, render, get_text, wait } from "@gradio/tootils";
import event from "@testing-library/user-event";
import Textbox from "./index.svelte";
import Textbox from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
const loading_status = {
@ -30,7 +30,9 @@ describe("Textbox", () => {
label: "Textbox"
});
const item: HTMLInputElement = getByDisplayValue("hello world");
const item: HTMLInputElement = getByDisplayValue(
"hello world"
) as HTMLInputElement;
assert.equal(item.value, "hello world");
});
@ -45,7 +47,7 @@ describe("Textbox", () => {
label: "Textbox"
});
const item: HTMLInputElement = getByDisplayValue("hi");
const item: HTMLInputElement = getByDisplayValue("hi") as HTMLInputElement;
const mock = spy();
component.$on("change", mock);

90
js/textbox/index.svelte
View File

@ -1,90 +0,0 @@
<svelte:options accessors={true} />
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
export let label = "Textbox";
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value = "";
export let lines: number;
export let placeholder = "";
export let show_label: boolean;
export let max_lines: number;
export let type: "text" | "password" | "email" = "text";
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let show_copy_button = false;
export let loading_status: LoadingStatus | undefined = undefined;
export let mode: "static" | "interactive";
export let value_is_output = false;
export let rtl = false;
export let text_align: "left" | "right" | undefined = undefined;
export let autofocus = false;
</script>
{#if mode === "static"}
<Static
{label}
{info}
{elem_id}
{elem_classes}
{visible}
bind:value
{lines}
{placeholder}
{show_label}
{max_lines}
{type}
{container}
{scale}
{min_width}
{show_copy_button}
{loading_status}
bind:value_is_output
{rtl}
{text_align}
{autofocus}
on:change
on:input
on:submit
on:blur
on:select
on:focus
></Static>
{:else}
<Interactive
{label}
{info}
{elem_id}
{elem_classes}
{visible}
bind:value
{lines}
{placeholder}
{show_label}
{max_lines}
{type}
{container}
{scale}
{min_width}
{show_copy_button}
{loading_status}
bind:value_is_output
{rtl}
{text_align}
{autofocus}
on:change
on:input
on:submit
on:blur
on:select
on:focus
></Interactive>
{/if}

1
js/textbox/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

61
js/timeseries/index.svelte
View File

@ -1,61 +0,0 @@
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { LoadingStatus } from "@gradio/statustracker";
interface StaticData {
data: number[][];
headers: string[];
}
interface Data {
data: number[][] | string;
headers?: string[];
}
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: null | Data;
export let y: string[];
export let x: string;
export let mode: "static" | "interactive";
export let label: string;
export let show_label: boolean;
export let colors: string[];
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
</script>
{#if mode === "static"}
<Static
bind:value
{elem_id}
{elem_classes}
{visible}
{label}
{show_label}
{colors}
{container}
{scale}
{min_width}
{loading_status}
></Static>
{:else}
<Interactive
bind:value
{elem_id}
{elem_classes}
{visible}
{y}
{x}
{label}
{show_label}
{colors}
{container}
{scale}
{min_width}
{loading_status}
></Interactive>
{/if}

1
js/timeseries/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

3
js/uploadbutton/UploadButton.test.ts
View File

@ -3,8 +3,7 @@ import { spy, spyOn } from "tinyspy";
import { cleanup, render, wait_for_event } from "@gradio/tootils";
import event from "@testing-library/user-event";
import { setupi18n } from "../app/src/i18n";
import type { LoadingStatus } from "@gradio/statustracker";
import UploadButton from "./index.svelte";
import UploadButton from "./interactive";
describe("UploadButton", () => {
afterEach(() => {

58
js/uploadbutton/index.svelte
View File

@ -1,58 +0,0 @@
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { FileData } from "@gradio/upload";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let label: string;
export let value: null | FileData;
export let file_count: string;
export let file_types: string[] = [];
export let root: string;
export let size: "sm" | "lg" = "lg";
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let mode: "static" | "dynamic" = "dynamic";
export let variant: "primary" | "secondary" | "stop" = "secondary";
</script>
{#if mode === "static"}
<Static
bind:value
{elem_id}
{elem_classes}
{visible}
{file_count}
{file_types}
{size}
{scale}
{min_width}
{variant}
{label}
{root}
on:click
on:upload
on:change
/>
{:else}
<Interactive
bind:value
{elem_id}
{elem_classes}
{visible}
{file_count}
{file_types}
{size}
{scale}
{min_width}
{variant}
{label}
{root}
on:click
on:upload
on:change
/>
{/if}

1
js/uploadbutton/package.json
View File

@ -9,7 +9,6 @@
"private": true,
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",

2
js/video/Video.stories.svelte
View File

@ -1,6 +1,6 @@
<script>
import { Meta, Template, Story } from "@storybook/addon-svelte-csf";
import Video from "./index.svelte";
import Video from "./interactive";
</script>
<Meta

66
js/video/Video.test.ts
View File

@ -12,7 +12,9 @@ import { spy, spyOn } from "tinyspy";
import { cleanup, render } from "@gradio/tootils";
import { setupi18n } from "../app/src/i18n";
import Video from "./index.svelte";
import InteractiveVideo from "./interactive";
import StaticVideo from "./static";
import type { LoadingStatus } from "@gradio/statustracker";
const loading_status = {
@ -35,10 +37,9 @@ describe("Video", () => {
afterEach(() => cleanup());
test("renders provided value and label", async () => {
const { getByTestId, queryAllByText } = await render(Video, {
const { getByTestId, queryAllByText } = await render(InteractiveVideo, {
show_label: true,
loading_status,
mode: "dynamic",
value: [
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
@ -55,18 +56,17 @@ describe("Video", () => {
source: "upload"
});
assert.isTrue(
getByTestId("Test Label-player").src.endsWith(
(getByTestId("Test Label-player") as HTMLVideoElement).src.endsWith(
"foo/file=https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
)
);
assert(queryAllByText("Test Label").length, 1);
assert.equal(queryAllByText("Test Label").length, 1);
});
test("hides label", async () => {
const { queryAllByText } = await render(Video, {
const { queryAllByText } = await render(InteractiveVideo, {
show_label: false,
loading_status,
mode: "dynamic",
value: {
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
data: null,
@ -80,14 +80,13 @@ describe("Video", () => {
name: "bar",
source: "upload"
});
assert(queryAllByText("Video Component").length, 0);
assert.equal(queryAllByText("Video Component").length, 1);
});
test("static Video sets value", async () => {
const { getByTestId } = await render(Video, {
const { getByTestId } = await render(StaticVideo, {
show_label: true,
loading_status,
mode: "static",
value: [
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
@ -103,14 +102,14 @@ describe("Video", () => {
source: "upload"
});
assert.isTrue(
getByTestId("test-player").src.endsWith(
(getByTestId("test-player") as HTMLVideoElement).src.endsWith(
"foo/file=https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav"
)
);
});
test("when autoplay is true `media.play` should be called in static mode", async () => {
const { getByTestId } = await render(Video, {
const { getByTestId } = await render(StaticVideo, {
show_label: true,
loading_status,
mode: "static",
@ -128,17 +127,16 @@ describe("Video", () => {
source: "upload",
autoplay: true
});
const startButton = getByTestId<HTMLAudioElement>("test-player");
const startButton = getByTestId("test-player") as HTMLVideoElement;
const fn = spyOn(startButton, "play");
startButton.dispatchEvent(new Event("loadeddata"));
assert.equal(fn.callCount, 1);
});
test("when autoplay is true `media.play` should be called in dynamic mode", async () => {
const { getByTestId } = await render(Video, {
const { getByTestId } = await render(InteractiveVideo, {
show_label: true,
loading_status,
mode: "dynamic",
value: [
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
@ -153,14 +151,14 @@ describe("Video", () => {
source: "upload",
autoplay: true
});
const startButton = getByTestId<HTMLAudioElement>("test-player");
const startButton = getByTestId("test-player") as HTMLVideoElement;
const fn = spyOn(startButton, "play");
startButton.dispatchEvent(new Event("loadeddata"));
assert.equal(fn.callCount, 1);
});
test("when autoplay is true `media.play` should be called in static mode when the Video data is updated", async () => {
const { component, getByTestId } = await render(Video, {
const { component, getByTestId } = await render(StaticVideo, {
show_label: true,
loading_status,
mode: "static",
@ -178,22 +176,24 @@ describe("Video", () => {
source: "upload",
autoplay: true
});
const startButton = getByTestId<HTMLAudioElement>("test-player");
const startButton = getByTestId("test-player") as HTMLVideoElement;
const fn = spyOn(startButton, "play");
startButton.dispatchEvent(new Event("loadeddata"));
component.$set({
value: {
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
data: null,
is_file: true
}
value: [
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
data: null,
is_file: true
}
]
});
startButton.dispatchEvent(new Event("loadeddata"));
assert.equal(fn.callCount, 2);
});
test("when autoplay is true `media.play` should be called in dynamic mode when the Video data is updated", async () => {
const { component, getByTestId } = await render(Video, {
const { component, getByTestId } = await render(InteractiveVideo, {
show_label: true,
loading_status,
mode: "dynamic",
@ -211,15 +211,17 @@ describe("Video", () => {
source: "upload",
autoplay: true
});
const startButton = getByTestId<HTMLAudioElement>("test-player");
const startButton = getByTestId("test-player") as HTMLVideoElement;
const fn = spyOn(startButton, "play");
startButton.dispatchEvent(new Event("loadeddata"));
component.$set({
value: {
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
data: null,
is_file: true
}
value: [
{
name: "https://gradio-builds.s3.amazonaws.com/demo-files/audio_sample.wav",
data: null,
is_file: true
}
]
});
startButton.dispatchEvent(new Event("loadeddata"));
assert.equal(fn.callCount, 2);
@ -232,7 +234,7 @@ describe("Video", () => {
is_file: true
}
];
const results = await render(Video, {
const results = await render(StaticVideo, {
mode: "static",
label: "video",
show_label: true,
@ -250,7 +252,7 @@ describe("Video", () => {
});
test("video change event trigger fires when value is changed and only fires once", async () => {
const { component } = await render(Video, {
const { component } = await render(InteractiveVideo, {
show_label: true,
loading_status,
mode: "dynamic",

91
js/video/index.svelte
View File

@ -1,91 +0,0 @@
<svelte:options accessors={true} />
<script lang="ts">
import Static from "./static";
import Interactive from "./interactive";
import type { FileData } from "@gradio/upload";
import type { LoadingStatus } from "@gradio/statustracker";
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value: [FileData, FileData | null] | null = null;
export let label: string;
export let source: "upload" | "webcam";
export let root: string;
export let root_url: null | string;
export let show_label: boolean;
export let loading_status: LoadingStatus;
export let height: number | undefined;
export let width: number | undefined;
export let mirror_webcam: boolean;
export let include_audio: boolean;
export let container = false;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let mode: "static" | "interactive";
export let autoplay = false;
export let show_share_button = true;
</script>
{#if mode === "static"}
<Static
{elem_id}
{elem_classes}
{visible}
bind:value
{label}
{source}
{root}
{root_url}
{show_label}
{loading_status}
{height}
{width}
{container}
{scale}
{min_width}
{autoplay}
{show_share_button}
on:clear
on:play
on:pause
on:upload
on:stop
on:end
on:start_recording
on:stop_recording
on:change
></Static>
{:else}
<Interactive
{elem_id}
{elem_classes}
{visible}
bind:value
{label}
{source}
{root}
{root_url}
{show_label}
{loading_status}
{height}
{width}
{mirror_webcam}
{include_audio}
{container}
{scale}
{min_width}
{autoplay}
on:clear
on:play
on:pause
on:upload
on:stop
on:end
on:start_recording
on:stop_recording
on:change
></Interactive>
{/if}

1
js/video/package.json
View File

@ -17,7 +17,6 @@
},
"main_changeset": true,
"exports": {
".": "./index.svelte",
"./package.json": "./package.json",
"./interactive": "./interactive/index.ts",
"./static": "./static/index.ts",