Upload folder using huggingface_hub

.dockerignore

@@ -0,0 +1,2 @@
+templates/frontend
+templates/frontend/**/*

.gitattributes

@@ -33,3 +33,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+frpc_linux_amd64_v0.2 filter=lfs diff=lfs merge=lfs -text
+templates/frontend/assets/Index-Bk2HDCfO.js.map filter=lfs diff=lfs merge=lfs -text

README.md

@@ -1,12 +1,6 @@
 ---
-title: Gradio
-emoji: 🏃
-colorFrom: pink
-colorTo: blue
+title: gradio
+app_file: interface.py
 sdk: gradio
-sdk_version: 4.31.5
-app_file: app.py
-pinned: false
+sdk_version: 4.31.4
 ---
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

__init__.py

@@ -0,0 +1,107 @@
+import json
+
+import gradio._simple_templates
+import gradio.image_utils
+import gradio.processing_utils
+import gradio.templates
+from gradio import components, layouts, themes
+from gradio.blocks import Blocks
+from gradio.chat_interface import ChatInterface
+from gradio.components import (
+    HTML,
+    JSON,
+    AnnotatedImage,
+    Annotatedimage,
+    Audio,
+    BarPlot,
+    Button,
+    Chatbot,
+    Checkbox,
+    CheckboxGroup,
+    Checkboxgroup,
+    ClearButton,
+    Code,
+    ColorPicker,
+    DataFrame,
+    Dataframe,
+    Dataset,
+    DownloadButton,
+    Dropdown,
+    DuplicateButton,
+    File,
+    FileExplorer,
+    Gallery,
+    Highlight,
+    HighlightedText,
+    Highlightedtext,
+    Image,
+    ImageEditor,
+    Json,
+    Label,
+    LinePlot,
+    LoginButton,
+    LogoutButton,
+    Markdown,
+    Model3D,
+    MultimodalTextbox,
+    Number,
+    ParamViewer,
+    Plot,
+    Radio,
+    ScatterPlot,
+    Slider,
+    State,
+    Text,
+    Textbox,
+    UploadButton,
+    Video,
+    component,
+)
+from gradio.components.audio import WaveformOptions
+from gradio.components.image_editor import Brush, Eraser
+from gradio.data_classes import FileData
+from gradio.events import EventData, KeyUpData, LikeData, SelectData, on
+from gradio.exceptions import Error
+from gradio.external import load
+from gradio.flagging import (
+    CSVLogger,
+    FlaggingCallback,
+    HuggingFaceDatasetSaver,
+    SimpleCSVLogger,
+)
+from gradio.helpers import (
+    Info,
+    Progress,
+    Warning,
+    make_waveform,
+    skip,
+    update,
+)
+from gradio.helpers import create_examples as Examples  # noqa: N812
+from gradio.interface import Interface, TabbedInterface, close_all
+from gradio.layouts import Accordion, Column, Group, Row, Tab, TabItem, Tabs
+from gradio.oauth import OAuthProfile, OAuthToken
+from gradio.renderable import render
+from gradio.routes import Request, mount_gradio_app
+from gradio.templates import (
+    Files,
+    ImageMask,
+    List,
+    Matrix,
+    Mic,
+    Microphone,
+    Numpy,
+    Paint,
+    PlayableVideo,
+    Sketchpad,
+    TextArea,
+)
+from gradio.themes import Base as Theme
+from gradio.utils import NO_RELOAD, FileSize, get_package_version, set_static_paths
+from gradio.wasm_utils import IS_WASM
+
+if not IS_WASM:
+    from gradio.cli import deploy
+    from gradio.ipython_ext import load_ipython_extension
+
+__version__ = get_package_version()

_frontend_code/accordion/Index.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import Accordion from "./shared/Accordion.svelte";
+	import { Block } from "@gradio/atoms";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+
+	import Column from "@gradio/column";
+	import type { Gradio } from "@gradio/utils";
+
+	export let label: string;
+	export let elem_id: string;
+	export let elem_classes: string[];
+	export let visible = true;
+	export let open = true;
+	export let loading_status: LoadingStatus;
+	export let gradio: Gradio;
+</script>
+
+<Block {elem_id} {elem_classes} {visible}>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+
+	<Accordion {label} bind:open>
+		<Column>
+			<slot />
+		</Column>
+	</Accordion>
+</Block>

_frontend_code/accordion/package.json

@@ -0,0 +1,23 @@
+{
+	"name": "@gradio/accordion",
+	"version": "0.3.14",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"author": "",
+	"license": "ISC",
+	"private": true,
+	"main_changeset": true,
+	"dependencies": {
+		"@gradio/atoms": "workspace:^",
+		"@gradio/column": "workspace:^",
+		"@gradio/statustracker": "workspace:^",
+		"@gradio/utils": "workspace:0.4.1"
+	},
+	"devDependencies": {
+		"@gradio/preview": "workspace:^"
+	},
+	"exports": {
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
+	}
+}

_frontend_code/accordion/shared/Accordion.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	export let open = true;
+	export let label = "";
+</script>
+
+<button on:click={() => (open = !open)} class="label-wrap" class:open>
+	<span>{label}</span>
+	<span style:transform={open ? "rotate(0)" : "rotate(90deg)"} class="icon">
+		▼
+	</span>
+</button>
+<div style:display={open ? "block" : "none"}>
+	<slot />
+</div>
+
+<style>
+	span {
+		font-weight: var(--section-header-text-weight);
+		font-size: var(--section-header-text-size);
+	}
+	.label-wrap {
+		display: flex;
+		justify-content: space-between;
+		cursor: pointer;
+		width: var(--size-full);
+	}
+	.label-wrap.open {
+		margin-bottom: var(--size-2);
+	}
+
+	.icon {
+		transition: 150ms;
+	}
+</style>

_frontend_code/annotatedimage/Index.svelte

@@ -0,0 +1,251 @@
+<script lang="ts">
+	import type { Gradio, SelectData } from "@gradio/utils";
+
+	import { Block, BlockLabel, Empty } from "@gradio/atoms";
+	import { Image } from "@gradio/icons";
+	import { StatusTracker } from "@gradio/statustracker";
+	import type { LoadingStatus } from "@gradio/statustracker";
+	import { type FileData } from "@gradio/client";
+	import { resolve_wasm_src } from "@gradio/wasm/svelte";
+
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: {
+		image: FileData;
+		annotations: { image: FileData; label: string }[] | [];
+	} | null = null;
+	let old_value: {
+		image: FileData;
+		annotations: { image: FileData; label: string }[] | [];
+	} | null = null;
+	let _value: {
+		image: FileData;
+		annotations: { image: FileData; label: string }[];
+	} | null = null;
+	export let gradio: Gradio<{
+		change: undefined;
+		select: SelectData;
+	}>;
+	export let label = gradio.i18n("annotated_image.annotated_image");
+	export let show_label = true;
+	export let show_legend = true;
+	export let height: number | undefined;
+	export let width: number | undefined;
+	export let color_map: Record<string, string>;
+	export let container = true;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	let active: string | null = null;
+	export let loading_status: LoadingStatus;
+
+	// `value` can be updated before the Promises from `resolve_wasm_src` are resolved.
+	// In such a case, the resolved values for the old `value` have to be discarded,
+	// This variable `latest_promise` is used to pick up only the values resolved for the latest `value`.
+	let latest_promise: Promise<unknown> | null = null;
+	$: {
+		if (value !== old_value) {
+			old_value = value;
+			gradio.dispatch("change");
+		}
+		if (value) {
+			const normalized_value = {
+				image: value.image as FileData,
+				annotations: value.annotations.map((ann) => ({
+					image: ann.image as FileData,
+					label: ann.label
+				}))
+			};
+			_value = normalized_value;
+
+			// In normal (non-Wasm) Gradio, the `<img>` element should be rendered with the passed values immediately
+			// without waiting for `resolve_wasm_src()` to resolve.
+			// If it waits, a blank image is displayed until the async task finishes
+			// and it leads to undesirable flickering.
+			// So set `_value` immediately above, and update it with the resolved values below later.
+			const image_url_promise = resolve_wasm_src(normalized_value.image.url);
+			const annotation_urls_promise = Promise.all(
+				normalized_value.annotations.map((ann) =>
+					resolve_wasm_src(ann.image.url)
+				)
+			);
+			const current_promise = Promise.all([
+				image_url_promise,
+				annotation_urls_promise
+			]);
+			latest_promise = current_promise;
+			current_promise.then(([image_url, annotation_urls]) => {
+				if (latest_promise !== current_promise) {
+					return;
+				}
+				const async_resolved_value: typeof _value = {
+					image: {
+						...normalized_value.image,
+						url: image_url ?? undefined
+					},
+					annotations: normalized_value.annotations.map((ann, i) => ({
+						...ann,
+						image: {
+							...ann.image,
+							url: annotation_urls[i] ?? undefined
+						}
+					}))
+				};
+				_value = async_resolved_value;
+			});
+		} else {
+			_value = null;
+		}
+	}
+	function handle_mouseover(_label: string): void {
+		active = _label;
+	}
+	function handle_mouseout(): void {
+		active = null;
+	}
+
+	function handle_click(i: number, value: string): void {
+		gradio.dispatch("select", {
+			value: label,
+			index: i
+		});
+	}
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	{elem_classes}
+	padding={false}
+	{height}
+	{width}
+	allow_overflow={false}
+	{container}
+	{scale}
+	{min_width}
+>
+	<StatusTracker
+		autoscroll={gradio.autoscroll}
+		i18n={gradio.i18n}
+		{...loading_status}
+	/>
+	<BlockLabel
+		{show_label}
+		Icon={Image}
+		label={label || gradio.i18n("image.image")}
+	/>
+
+	<div class="container">
+		{#if _value == null}
+			<Empty size="large" unpadded_box={true}><Image /></Empty>
+		{:else}
+			<div class="image-container">
+				<img
+					class="base-image"
+					class:fit-height={height}
+					src={_value ? _value.image.url : null}
+					alt="the base file that is annotated"
+				/>
+				{#each _value ? _value?.annotations : [] as ann, i}
+					<img
+						alt="segmentation mask identifying {label} within the uploaded file"
+						class="mask fit-height"
+						class:active={active == ann.label}
+						class:inactive={active != ann.label && active != null}
+						src={ann.image.url}
+						style={color_map && ann.label in color_map
+							? null
+							: `filter: hue-rotate(${Math.round(
+									(i * 360) / _value?.annotations.length
+								)}deg);`}
+					/>
+				{/each}
+			</div>
+			{#if show_legend && _value}
+				<div class="legend">
+					{#each _value.annotations as ann, i}
+						<button
+							class="legend-item"
+							style="background-color: {color_map && ann.label in color_map
+								? color_map[ann.label] + '88'
+								: `hsla(${Math.round(
+										(i * 360) / _value.annotations.length
+									)}, 100%, 50%, 0.3)`}"
+							on:mouseover={() => handle_mouseover(ann.label)}
+							on:focus={() => handle_mouseover(ann.label)}
+							on:mouseout={() => handle_mouseout()}
+							on:blur={() => handle_mouseout()}
+							on:click={() => handle_click(i, ann.label)}
+						>
+							{ann.label}
+						</button>
+					{/each}
+				</div>
+			{/if}
+		{/if}
+	</div>
+</Block>
+
+<style>
+	.base-image {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+	.container {
+		display: flex;
+		position: relative;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		width: var(--size-full);
+		height: var(--size-full);
+	}
+	.image-container {
+		position: relative;
+		top: 0;
+		left: 0;
+		flex-grow: 1;
+		width: 100%;
+		overflow: hidden;
+	}
+	.fit-height {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		object-fit: contain;
+	}
+	.mask {
+		opacity: 0.85;
+		transition: all 0.2s ease-in-out;
+	}
+	.image-container:hover .mask {
+		opacity: 0.3;
+	}
+	.mask.active {
+		opacity: 1;
+	}
+	.mask.inactive {
+		opacity: 0;
+	}
+	.legend {
+		display: flex;
+		flex-direction: row;
+		flex-wrap: wrap;
+		align-content: center;
+		justify-content: center;
+		align-items: center;
+		gap: var(--spacing-sm);
+		padding: var(--spacing-sm);
+	}
+	.legend-item {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		cursor: pointer;
+		border-radius: var(--radius-sm);
+		padding: var(--spacing-sm);
+	}
+</style>

_frontend_code/annotatedimage/package.json

@@ -0,0 +1,26 @@
+{
+	"name": "@gradio/annotatedimage",
+	"version": "0.6.4",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"author": "",
+	"license": "ISC",
+	"private": true,
+	"main_changeset": true,
+	"exports": {
+		".": "./Index.svelte",
+		"./package.json": "./package.json"
+	},
+	"devDependencies": {
+		"@gradio/preview": "workspace:^"
+	},
+	"dependencies": {
+		"@gradio/atoms": "workspace:^",
+		"@gradio/icons": "workspace:^",
+		"@gradio/statustracker": "workspace:^",
+		"@gradio/upload": "workspace:^",
+		"@gradio/utils": "workspace:^",
+		"@gradio/client": "workspace:^",
+		"@gradio/wasm": "workspace:^"
+	}
+}

_frontend_code/atoms/package.json

@@ -0,0 +1,14 @@
+{
+	"name": "@gradio/atoms",
+	"version": "0.7.3",
+	"description": "Gradio UI packages",
+	"type": "module",
+	"main": "src/index.ts",
+	"author": "",
+	"license": "ISC",
+	"dependencies": {
+		"@gradio/utils": "workspace:^",
+		"@gradio/icons": "workspace:^"
+	},
+	"main_changeset": true
+}

_frontend_code/atoms/src/Block.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+	export let height: number | string | undefined = undefined;
+	export let width: number | string | undefined = undefined;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let variant: "solid" | "dashed" | "none" = "solid";
+	export let border_mode: "base" | "focus" | "contrast" = "base";
+	export let padding = true;
+	export let type: "normal" | "fieldset" = "normal";
+	export let test_id: string | undefined = undefined;
+	export let explicit_call = false;
+	export let container = true;
+	export let visible = true;
+	export let allow_overflow = true;
+	export let scale: number | null = null;
+	export let min_width = 0;
+
+	let tag = type === "fieldset" ? "fieldset" : "div";
+
+	const get_dimension = (
+		dimension_value: string | number | undefined
+	): string | undefined => {
+		if (dimension_value === undefined) {
+			return undefined;
+		}
+		if (typeof dimension_value === "number") {
+			return dimension_value + "px";
+		} else if (typeof dimension_value === "string") {
+			return dimension_value;
+		}
+	};
+</script>
+
+<svelte:element
+	this={tag}
+	data-testid={test_id}
+	id={elem_id}
+	class:hidden={visible === false}
+	class="block {elem_classes.join(' ')}"
+	class:padded={padding}
+	class:border_focus={border_mode === "focus"}
+	class:border_contrast={border_mode === "contrast"}
+	class:hide-container={!explicit_call && !container}
+	style:height={get_dimension(height)}
+	style:width={typeof width === "number"
+		? `calc(min(${width}px, 100%))`
+		: get_dimension(width)}
+	style:border-style={variant}
+	style:overflow={allow_overflow ? "visible" : "hidden"}
+	style:flex-grow={scale}
+	style:min-width={`calc(min(${min_width}px, 100%))`}
+	style:border-width="var(--block-border-width)"
+>
+	<slot />
+</svelte:element>
+
+<style>
+	.block {
+		position: relative;
+		margin: 0;
+		box-shadow: var(--block-shadow);
+		border-width: var(--block-border-width);
+		border-color: var(--block-border-color);
+		border-radius: var(--block-radius);
+		background: var(--block-background-fill);
+		width: 100%;
+		line-height: var(--line-sm);
+	}
+
+	.block.border_focus {
+		border-color: var(--color-accent);
+	}
+
+	.block.border_contrast {
+		border-color: var(--body-text-color);
+	}
+
+	.padded {
+		padding: var(--block-padding);
+	}
+
+	.hidden {
+		display: none;
+	}
+	.hide-container {
+		margin: 0;
+		box-shadow: none;
+		--block-border-width: 0;
+		background: transparent;
+		padding: 0;
+		overflow: visible;
+	}
+</style>

_frontend_code/atoms/src/BlockLabel.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+	export let label: string | null = null;
+	export let Icon: any;
+	export let show_label = true;
+	export let disable = false;
+	export let float = true;
+</script>
+
+<label
+	for=""
+	class:hide={!show_label}
+	class:sr-only={!show_label}
+	class:float
+	class:hide-label={disable}
+	data-testid="block-label"
+>
+	<span>
+		<Icon />
+	</span>
+	{label}
+</label>
+
+<style>
+	label {
+		display: inline-flex;
+		align-items: center;
+		z-index: var(--layer-2);
+		box-shadow: var(--block-label-shadow);
+		border: var(--block-label-border-width) solid var(--border-color-primary);
+		border-top: none;
+		border-left: none;
+		border-radius: var(--block-label-radius);
+		background: var(--block-label-background-fill);
+		padding: var(--block-label-padding);
+		pointer-events: none;
+		color: var(--block-label-text-color);
+		font-weight: var(--block-label-text-weight);
+		font-size: var(--block-label-text-size);
+		line-height: var(--line-sm);
+	}
+	:global(.gr-group) label {
+		border-top-left-radius: 0;
+	}
+
+	label.float {
+		position: absolute;
+		top: var(--block-label-margin);
+		left: var(--block-label-margin);
+	}
+	label:not(.float) {
+		position: static;
+		margin-top: var(--block-label-margin);
+		margin-left: var(--block-label-margin);
+	}
+
+	.hide {
+		height: 0;
+	}
+
+	span {
+		opacity: 0.8;
+		margin-right: var(--size-2);
+		width: calc(var(--block-label-text-size) - 1px);
+		height: calc(var(--block-label-text-size) - 1px);
+	}
+	.hide-label {
+		box-shadow: none;
+		border-width: 0;
+		background: transparent;
+		overflow: visible;
+	}
+</style>

_frontend_code/atoms/src/BlockTitle.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+	import { default as Info } from "./Info.svelte";
+	export let show_label = true;
+	export let info: string | undefined = undefined;
+</script>
+
+<span
+	class:sr-only={!show_label}
+	class:hide={!show_label}
+	class:has-info={info != null}
+	data-testid="block-info"
+>
+	<slot />
+</span>
+{#if info}
+	<Info>{info}</Info>
+{/if}
+
+<style>
+	span.has-info {
+		margin-bottom: var(--spacing-xs);
+	}
+	span:not(.has-info) {
+		margin-bottom: var(--spacing-lg);
+	}
+	span {
+		display: inline-block;
+		position: relative;
+		z-index: var(--layer-4);
+		border: solid var(--block-title-border-width)
+			var(--block-title-border-color);
+		border-radius: var(--block-title-radius);
+		background: var(--block-title-background-fill);
+		padding: var(--block-title-padding);
+		color: var(--block-title-text-color);
+		font-weight: var(--block-title-text-weight);
+		font-size: var(--block-title-text-size);
+		line-height: var(--line-sm);
+	}
+
+	.hide {
+		margin: 0;
+		height: 0;
+	}
+</style>

_frontend_code/atoms/src/Empty.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">
+	export let size: "small" | "large" = "small";
+	export let unpadded_box = false;
+
+	let el: HTMLDivElement;
+	$: parent_height = compare_el_to_parent(el);
+
+	function compare_el_to_parent(el: HTMLDivElement): boolean {
+		if (!el) return false;
+
+		const { height: el_height } = el.getBoundingClientRect();
+		const { height: parent_height } =
+			el.parentElement?.getBoundingClientRect() || { height: el_height };
+
+		return el_height > parent_height + 2;
+	}
+</script>
+
+<div
+	class="empty"
+	class:small={size === "small"}
+	class:large={size === "large"}
+	class:unpadded_box
+	bind:this={el}
+	class:small_parent={parent_height}
+	aria-label="Empty value"
+>
+	<div class="icon">
+		<slot />
+	</div>
+</div>
+
+<style>
+	.empty {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin-top: calc(0px - var(--size-6));
+		height: var(--size-full);
+	}
+
+	.icon {
+		opacity: 0.5;
+		height: var(--size-5);
+		color: var(--body-text-color);
+	}
+
+	.small {
+		min-height: calc(var(--size-32) - 20px);
+	}
+
+	.large {
+		min-height: calc(var(--size-64) - 20px);
+	}
+
+	.unpadded_box {
+		margin-top: 0;
+	}
+
+	.small_parent {
+		min-height: 100% !important;
+	}
+</style>