![](\"https://images.unsplash.com/photo-1574613362884-f79513a5128c?fit=crop&w=500&q=80\"/)
',\n", " ],\n", " [\n", " \"## hello again again\",\n", " \"Hello my name is frank, I am liking the small turtle you have there. It would be a shame if it went missing.\",\n", " 'Hello
" + + def preprocess(self, x: Any) -> Any: + return x + + def postprocess(self, y): + return y + @staticmethod def update( value: Any | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE, @@ -77,3 +86,6 @@ def update( "__type__": "update", } return updated_config + + def api_info(self) -> dict[str, Any]: + return {"type": "string"} diff --git a/gradio/components/image.py b/gradio/components/image.py index b5fd6a19cd02..de3c997bd708 100644 --- a/gradio/components/image.py +++ b/gradio/components/image.py @@ -11,39 +11,19 @@ import PIL.ImageOps from gradio_client import utils as client_utils from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import ImgSerializable from PIL import Image as _Image # using _ to minimize namespace pollution from gradio import processing_utils, utils -from gradio.components.base import IOComponent, _Keywords -from gradio.deprecation import warn_style_method_deprecation -from gradio.events import ( - Changeable, - Clearable, - Editable, - EventListenerMethod, - Selectable, - Streamable, - Uploadable, -) -from gradio.interpretation import TokenInterpretable +from gradio.components.base import Component, StreamingInput, _Keywords +from gradio.data_classes import FileData +from gradio.events import Events set_documentation_group("component") _Image.init() # fixes https://github.com/gradio-app/gradio/issues/2843 @document() -class Image( - Editable, - Clearable, - Changeable, - Streamable, - Selectable, - Uploadable, - IOComponent, - ImgSerializable, - TokenInterpretable, -): +class Image(StreamingInput, Component): """ Creates an image component that can be used to upload/draw images (as an input) or display images (as an output). Preprocessing: passes the uploaded image as a {numpy.array}, {PIL.Image} or {str} filepath depending on `type` -- unless `tool` is `sketch` AND source is one of `upload` or `webcam`. In these cases, a {dict} with keys `image` and `mask` is passed, and the format of the corresponding values depends on `type`. @@ -53,6 +33,16 @@ class Image( Guides: image-classification-in-pytorch, image-classification-in-tensorflow, image-classification-with-vision-transformers, building-a-pictionary_app, create-your-own-friends-with-a-gan """ + EVENTS = [ + Events.edit, + Events.clear, + Events.change, + Events.stream, + Events.select, + Events.upload, + ] + data_model = FileData + def __init__( self, value: str | _Image.Image | np.ndarray | None = None, @@ -144,19 +134,12 @@ def __init__( self.show_download_button = show_download_button if streaming and source != "webcam": raise ValueError("Image streaming only available if source is 'webcam'.") - self.select: EventListenerMethod - """ - Event listener for when the user clicks on a pixel within the image. - Uses event data gradio.SelectData to carry `index` to refer to the [x, y] coordinates of the clicked pixel. - See EventData documentation on how to use this event data. - """ self.show_share_button = ( (utils.get_space() is not None) if show_share_button is None else show_share_button ) - IOComponent.__init__( - self, + super().__init__( label=label, every=every, show_label=show_label, @@ -170,7 +153,6 @@ def __init__( value=value, **kwargs, ) - TokenInterpretable.__init__(self) @staticmethod def update( @@ -224,10 +206,9 @@ def _format_image( elif self.type == "numpy": return np.array(im) elif self.type == "filepath": - path = self.pil_to_temp_file( - im, dir=self.DEFAULT_TEMP_DIR, format=fmt or "png" + path = processing_utils.save_pil_to_cache( + im, cache_dir=self.GRADIO_CACHE, format=fmt or "png" # type: ignore ) - self.temp_files.add(path) return path else: raise ValueError( @@ -253,8 +234,10 @@ def preprocess( assert isinstance(x, dict) x, mask = x["image"], x["mask"] - assert isinstance(x, str) - im = processing_utils.decode_base64_to_image(x) + if isinstance(x, str): + im = processing_utils.decode_base64_to_image(x) + else: + im = _Image.open(x["name"]) with warnings.catch_warnings(): warnings.simplefilter("ignore") im = im.convert(self.image_mode) @@ -284,7 +267,7 @@ def preprocess( def postprocess( self, y: np.ndarray | _Image.Image | str | Path | None - ) -> str | None: + ) -> FileData | None: """ Parameters: y: image as a numpy array, PIL Image, string/Path filepath, or string URL @@ -294,125 +277,19 @@ def postprocess( if y is None: return None if isinstance(y, np.ndarray): - return processing_utils.encode_array_to_base64(y) + path = processing_utils.save_img_array_to_cache( + y, cache_dir=self.GRADIO_CACHE + ) elif isinstance(y, _Image.Image): - return processing_utils.encode_pil_to_base64(y) + path = processing_utils.save_pil_to_cache(y, cache_dir=self.GRADIO_CACHE) elif isinstance(y, (str, Path)): - return client_utils.encode_url_or_file_to_base64(y) + path = y if isinstance(y, str) else y.name else: raise ValueError("Cannot process this value as an Image") - - def set_interpret_parameters(self, segments: int = 16): - """ - Calculates interpretation score of image subsections by splitting the image into subsections, then using a "leave one out" method to calculate the score of each subsection by whiting out the subsection and measuring the delta of the output value. - Parameters: - segments: Number of interpretation segments to split image into. - """ - self.interpretation_segments = segments - return self - - def _segment_by_slic(self, x): - """ - Helper method that segments an image into superpixels using slic. - Parameters: - x: base64 representation of an image - """ - x = processing_utils.decode_base64_to_image(x) - if self.shape is not None: - x = processing_utils.resize_and_crop(x, self.shape) - resized_and_cropped_image = np.array(x) - try: - from skimage.segmentation import slic - except (ImportError, ModuleNotFoundError) as err: - raise ValueError( - "Error: running this interpretation for images requires scikit-image, please install it first." - ) from err - try: - segments_slic = slic( - resized_and_cropped_image, - self.interpretation_segments, - compactness=10, - sigma=1, - start_label=1, - ) - except TypeError: # For skimage 0.16 and older - segments_slic = slic( - resized_and_cropped_image, - self.interpretation_segments, - compactness=10, - sigma=1, - ) - return segments_slic, resized_and_cropped_image - - def tokenize(self, x): - """ - Segments image into tokens, masks, and leave-one-out-tokens - Parameters: - x: base64 representation of an image - Returns: - tokens: list of tokens, used by the get_masked_input() method - leave_one_out_tokens: list of left-out tokens, used by the get_interpretation_neighbors() method - masks: list of masks, used by the get_interpretation_neighbors() method - """ - segments_slic, resized_and_cropped_image = self._segment_by_slic(x) - tokens, masks, leave_one_out_tokens = [], [], [] - replace_color = np.mean(resized_and_cropped_image, axis=(0, 1)) - for segment_value in np.unique(segments_slic): - mask = segments_slic == segment_value - image_screen = np.copy(resized_and_cropped_image) - image_screen[segments_slic == segment_value] = replace_color - leave_one_out_tokens.append( - processing_utils.encode_array_to_base64(image_screen) - ) - token = np.copy(resized_and_cropped_image) - token[segments_slic != segment_value] = 0 - tokens.append(token) - masks.append(mask) - return tokens, leave_one_out_tokens, masks - - def get_masked_inputs(self, tokens, binary_mask_matrix): - masked_inputs = [] - for binary_mask_vector in binary_mask_matrix: - masked_input = np.zeros_like(tokens[0], dtype=int) - for token, b in zip(tokens, binary_mask_vector): - masked_input = masked_input + token * int(b) - masked_inputs.append(processing_utils.encode_array_to_base64(masked_input)) - return masked_inputs - - def get_interpretation_scores( - self, x, neighbors, scores, masks, tokens=None, **kwargs - ) -> list[list[float]]: - """ - Returns: - A 2D array representing the interpretation score of each pixel of the image. - """ - x = processing_utils.decode_base64_to_image(x) - if self.shape is not None: - x = processing_utils.resize_and_crop(x, self.shape) - x = np.array(x) - output_scores = np.zeros((x.shape[0], x.shape[1])) - - for score, mask in zip(scores, masks): - output_scores += score * mask - - max_val, min_val = np.max(output_scores), np.min(output_scores) - if max_val > 0: - output_scores = (output_scores - min_val) / (max_val - min_val) - return output_scores.tolist() - - def style(self, *, height: int | None = None, width: int | None = None, **kwargs): - """ - This method is deprecated. Please set these arguments in the constructor instead. - """ - warn_style_method_deprecation() - if height is not None: - self.height = height - if width is not None: - self.width = width - return self + return FileData(name=path, data=None, is_file=True) def check_streamable(self): - if self.source != "webcam": + if self.source != "webcam" and self.streaming: raise ValueError("Image streaming only available if source is 'webcam'.") def as_example(self, input_data: str | Path | None) -> str: @@ -423,3 +300,6 @@ def as_example(self, input_data: str | Path | None) -> str: if self.root_url or client_utils.is_http_url_like(input_data): return input_data return str(utils.abspath(input_data)) + + def example_inputs(self) -> Any: + return "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png" diff --git a/gradio/components/interpretation.py b/gradio/components/interpretation.py deleted file mode 100644 index b261f4f637d2..000000000000 --- a/gradio/components/interpretation.py +++ /dev/null @@ -1,55 +0,0 @@ -"""gr.Interpretation() component""" - -from __future__ import annotations - -from typing import Any, Literal - -from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import SimpleSerializable - -from gradio.components.base import Component, _Keywords - -set_documentation_group("component") - - -@document() -class Interpretation(Component, SimpleSerializable): - """ - Used to create an interpretation widget for a component. - Preprocessing: this component does *not* accept input. - Postprocessing: expects a {dict} with keys "original" and "interpretation". - - Guides: custom-interpretations-with-blocks - """ - - def __init__( - self, - component: Component, - *, - visible: bool = True, - elem_id: str | None = None, - elem_classes: list[str] | str | None = None, - **kwargs, - ): - """ - Parameters: - component: Which component to show in the interpretation widget. - visible: Whether or not the interpretation is visible. - elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. - elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. - """ - Component.__init__( - self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs - ) - self.component = component - - @staticmethod - def update( - value: Any | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE, - visible: bool | None = None, - ): - return { - "visible": visible, - "value": value, - "__type__": "update", - } diff --git a/gradio/components/json_component.py b/gradio/components/json_component.py index 46bef37ba671..02a75e2bcdec 100644 --- a/gradio/components/json_component.py +++ b/gradio/components/json_component.py @@ -4,22 +4,20 @@ import json import warnings +from pathlib import Path from typing import Any, Callable, Literal from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import JSONSerializable -from gradio.components.base import IOComponent, _Keywords +from gradio.components.base import Component, _Keywords from gradio.deprecation import warn_style_method_deprecation -from gradio.events import ( - Changeable, -) +from gradio.events import Events set_documentation_group("component") @document() -class JSON(Changeable, IOComponent, JSONSerializable): +class JSON(Component): """ Used to display arbitrary JSON output prettily. Preprocessing: this component does *not* accept input. @@ -28,6 +26,8 @@ class JSON(Changeable, IOComponent, JSONSerializable): Demos: zip_to_json, blocks_xray """ + EVENTS = [Events.change] + def __init__( self, value: str | dict | list | Callable | None = None, @@ -56,8 +56,7 @@ def __init__( elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. """ - IOComponent.__init__( - self, + super().__init__( label=label, every=every, show_label=show_label, @@ -110,6 +109,18 @@ def postprocess(self, y: dict | list | str | None) -> dict | list | None: else: return y + def preprocess(self, x: Any) -> Any: + return x + + def example_inputs(self) -> Any: + return {"foo": "bar"} + + def flag(self, x: Any, flag_dir: str | Path = "") -> str: + return json.dumps(x) + + def read_from_flag(self, x: Any, flag_dir: str | Path | None = None): + return json.loads(x) + def style(self, *, container: bool | None = None, **kwargs): """ This method is deprecated. Please set these arguments in the constructor instead. @@ -118,3 +129,6 @@ def style(self, *, container: bool | None = None, **kwargs): if container is not None: self.container = container return self + + def api_info(self) -> dict[str, Any]: + return {"type": {}, "description": "any valid json"} diff --git a/gradio/components/label.py b/gradio/components/label.py index f6e965b0a3f8..0d755e5e569d 100644 --- a/gradio/components/label.py +++ b/gradio/components/label.py @@ -2,29 +2,34 @@ from __future__ import annotations +import json import operator import warnings from pathlib import Path -from typing import Callable, Literal +from typing import Any, Callable, List, Literal, Optional, Union from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import ( - JSONSerializable, -) -from gradio.components.base import IOComponent, _Keywords +from gradio.components.base import Component, _Keywords +from gradio.data_classes import GradioModel from gradio.deprecation import warn_style_method_deprecation -from gradio.events import ( - Changeable, - EventListenerMethod, - Selectable, -) +from gradio.events import Events set_documentation_group("component") +class LabelConfidence(GradioModel): + label: Optional[Union[str, int, float]] = None + confidence: Optional[float] = None + + +class LabelData(GradioModel): + label: Union[str, int, float] + confidences: Optional[List[LabelConfidence]] = None + + @document() -class Label(Changeable, Selectable, IOComponent, JSONSerializable): +class Label(Component): """ Displays a classification label, along with confidence scores of top categories, if provided. Preprocessing: this component does *not* accept input. @@ -35,6 +40,8 @@ class Label(Changeable, Selectable, IOComponent, JSONSerializable): """ CONFIDENCES_KEY = "confidences" + data_model = LabelData + EVENTS = [Events.change, Events.select] def __init__( self, @@ -70,14 +77,7 @@ def __init__( """ self.num_top_classes = num_top_classes self.color = color - self.select: EventListenerMethod - """ - Event listener for when the user selects a category from Label. - Uses event data gradio.SelectData to carry `value` referring to name of selected category, and `index` to refer to index. - See EventData documentation on how to use this event data. - """ - IOComponent.__init__( - self, + super().__init__( label=label, every=every, show_label=show_label, @@ -91,7 +91,9 @@ def __init__( **kwargs, ) - def postprocess(self, y: dict[str, float] | str | float | None) -> dict | None: + def postprocess( + self, y: dict[str, float] | str | float | None + ) -> LabelData | dict | None: """ Parameters: y: a dictionary mapping labels to confidence value, or just a string/numerical label by itself @@ -101,9 +103,9 @@ def postprocess(self, y: dict[str, float] | str | float | None) -> dict | None: if y is None or y == {}: return {} if isinstance(y, str) and y.endswith(".json") and Path(y).exists(): - return self.serialize(y) + return LabelData(**json.loads(Path(y).read_text())) if isinstance(y, (str, float, int)): - return {"label": str(y)} + return LabelData(label=str(y)) if isinstance(y, dict): if "confidences" in y and isinstance(y["confidences"], dict): y = y["confidences"] @@ -111,12 +113,15 @@ def postprocess(self, y: dict[str, float] | str | float | None) -> dict | None: sorted_pred = sorted(y.items(), key=operator.itemgetter(1), reverse=True) if self.num_top_classes is not None: sorted_pred = sorted_pred[: self.num_top_classes] - return { - "label": sorted_pred[0][0], - "confidences": [ - {"label": pred[0], "confidence": pred[1]} for pred in sorted_pred - ], - } + return LabelData( + **{ + "label": sorted_pred[0][0], + "confidences": [ + {"label": pred[0], "confidence": pred[1]} + for pred in sorted_pred + ], + } + ) raise ValueError( "The `Label` output interface expects one of: a string label, or an int label, a " "float label, or a dictionary whose keys are labels and values are confidences. " @@ -175,3 +180,15 @@ def style( if container is not None: self.container = container return self + + def preprocess(self, x: Any) -> Any: + return x + + def example_inputs(self) -> Any: + return { + "label": "Cat", + "confidences": [ + {"label": "cat", "confidence": 0.9}, + {"label": "dog", "confidence": 0.1}, + ], + } diff --git a/gradio/components/line_plot.py b/gradio/components/line_plot.py index 7feb215679ce..59b523354918 100644 --- a/gradio/components/line_plot.py +++ b/gradio/components/line_plot.py @@ -3,14 +3,14 @@ from __future__ import annotations import warnings -from typing import Callable, Literal +from typing import Any, Callable, Literal import altair as alt import pandas as pd from gradio_client.documentation import document, set_documentation_group from gradio.components.base import _Keywords -from gradio.components.plot import AltairPlot, Plot +from gradio.components.plot import AltairPlot, AltairPlotData, Plot set_documentation_group("component") @@ -26,6 +26,8 @@ class LinePlot(Plot): Demos: line_plot, live_dashboard """ + data_model = AltairPlotData + def __init__( self, value: pd.DataFrame | Callable | None = None, @@ -423,7 +425,9 @@ def create_plot( return chart - def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None: + def postprocess( + self, y: pd.DataFrame | dict | None + ) -> AltairPlotData | dict | None: # if None or update if y is None or isinstance(y, dict): return y @@ -453,4 +457,12 @@ def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None: width=self.width, ) - return {"type": "altair", "plot": chart.to_json(), "chart": "line"} + return AltairPlotData( + **{"type": "altair", "plot": chart.to_json(), "chart": "line"} + ) + + def example_inputs(self) -> Any: + return None + + def preprocess(self, x: Any) -> Any: + return x diff --git a/gradio/components/markdown.py b/gradio/components/markdown.py index fa58269a4ff5..3ebcaa67404f 100644 --- a/gradio/components/markdown.py +++ b/gradio/components/markdown.py @@ -7,18 +7,15 @@ from typing import Any, Callable, Literal from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import StringSerializable -from gradio.components.base import IOComponent, _Keywords -from gradio.events import ( - Changeable, -) +from gradio.components.base import Component, _Keywords +from gradio.events import Events set_documentation_group("component") @document() -class Markdown(IOComponent, Changeable, StringSerializable): +class Markdown(Component): """ Used to render arbitrary Markdown output. Can also render latex enclosed by dollar signs. Preprocessing: this component does *not* accept input. @@ -28,6 +25,8 @@ class Markdown(IOComponent, Changeable, StringSerializable): Guides: key-features """ + EVENTS = [Events.change] + def __init__( self, value: str | Callable = "", @@ -53,14 +52,11 @@ def __init__( line_breaks: If True, will enable Github-flavored Markdown line breaks in chatbot messages. If False (default), single new lines will be ignored. """ self.rtl = rtl - if latex_delimiters is None: - latex_delimiters = [{"left": "$", "right": "$", "display": False}] self.latex_delimiters = latex_delimiters self.sanitize_html = sanitize_html self.line_breaks = line_breaks - IOComponent.__init__( - self, + super().__init__( visible=visible, elem_id=elem_id, elem_classes=elem_classes, @@ -106,3 +102,12 @@ def update( def as_example(self, input_data: str | None) -> str: postprocessed = self.postprocess(input_data) return postprocessed if postprocessed else "" + + def preprocess(self, x: Any) -> Any: + return x + + def example_inputs(self) -> Any: + return "# Hello!" + + def api_info(self) -> dict[str, Any]: + return {"type": "string"} diff --git a/gradio/components/model3d.py b/gradio/components/model3d.py index d11bef86b2c1..af2a80f06206 100644 --- a/gradio/components/model3d.py +++ b/gradio/components/model3d.py @@ -6,25 +6,17 @@ from pathlib import Path from typing import Any, Callable, Literal -from gradio_client import media_data from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import FileSerializable -from gradio.components.base import IOComponent, _Keywords -from gradio.events import ( - Changeable, - Clearable, - Editable, - Uploadable, -) +from gradio.components.base import Component, _Keywords +from gradio.data_classes import FileData +from gradio.events import Events set_documentation_group("component") @document() -class Model3D( - Changeable, Uploadable, Editable, Clearable, IOComponent, FileSerializable -): +class Model3D(Component): """ Component allows users to upload or view 3D Model files (.obj, .glb, or .gltf). Preprocessing: This component passes the uploaded file as a {str}filepath. @@ -34,6 +26,10 @@ class Model3D( Guides: how-to-use-3D-model-component """ + EVENTS = [Events.change, Events.upload, Events.edit, Events.clear] + + data_model = FileData + def __init__( self, value: str | Callable | None = None, @@ -80,9 +76,7 @@ def __init__( self.camera_position = camera_position self.height = height self.zoom_speed = zoom_speed - - IOComponent.__init__( - self, + super().__init__( label=label, every=every, show_label=show_label, @@ -96,12 +90,6 @@ def __init__( **kwargs, ) - def example_inputs(self) -> dict[str, Any]: - return { - "raw": {"is_file": False, "data": media_data.BASE64_MODEL3D}, - "serialized": "https://github.com/gradio-app/gradio/raw/main/test/test_files/Box.gltf", - } - @staticmethod def update( value: Any | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE, @@ -147,19 +135,9 @@ def preprocess(self, x: dict[str, str] | None) -> str | None: """ if x is None: return x - file_name, file_data, is_file = ( - x["name"], - x["data"], - x.get("is_file", False), - ) - if is_file: - temp_file_path = self.make_temp_copy_if_needed(file_name) - else: - temp_file_path = self.base64_to_temp_file_if_needed(file_data, file_name) - - return temp_file_path + return x["name"] - def postprocess(self, y: str | Path | None) -> dict[str, str] | None: + def postprocess(self, y: str | Path | None) -> FileData | None: """ Parameters: y: path to the model @@ -168,12 +146,11 @@ def postprocess(self, y: str | Path | None) -> dict[str, str] | None: """ if y is None: return y - data = { - "name": self.make_temp_copy_if_needed(y), - "data": None, - "is_file": True, - } - return data + return FileData(name=str(y), is_file=True) def as_example(self, input_data: str | None) -> str: return Path(input_data).name if input_data else "" + + def example_inputs(self): + # TODO: Use permanent link + return "https://raw.githubusercontent.com/gradio-app/gradio/main/demo/model3D/files/Fox.gltf" diff --git a/gradio/components/number.py b/gradio/components/number.py index 6f6d0149ac50..85ad9a3aece4 100644 --- a/gradio/components/number.py +++ b/gradio/components/number.py @@ -2,38 +2,20 @@ from __future__ import annotations -import math import warnings -from typing import Callable, Literal +from typing import Any, Callable, Literal -import numpy as np from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import NumberSerializable - -from gradio.components.base import FormComponent, IOComponent, _Keywords -from gradio.events import ( - Changeable, - Focusable, - Inputable, - Submittable, -) + +from gradio.components.base import FormComponent, _Keywords +from gradio.events import Events from gradio.exceptions import Error -from gradio.interpretation import NeighborInterpretable set_documentation_group("component") @document() -class Number( - FormComponent, - Changeable, - Inputable, - Submittable, - Focusable, - IOComponent, - NumberSerializable, - NeighborInterpretable, -): +class Number(FormComponent): """ Creates a numeric field for user to enter numbers as input or display numeric output. Preprocessing: passes field value as a {float} or {int} into the function, depending on `precision`. @@ -43,6 +25,8 @@ class Number( Demos: tax_calculator, titanic_survival, blocks_simple_squares """ + EVENTS = [Events.change, Events.input, Events.submit, Events.focus] + def __init__( self, value: float | Callable | None = None, @@ -88,8 +72,7 @@ def __init__( self.maximum = maximum self.step = step - IOComponent.__init__( - self, + super().__init__( label=label, info=info, every=every, @@ -104,7 +87,6 @@ def __init__( value=value, **kwargs, ) - NeighborInterpretable.__init__(self) @staticmethod def _round_to_precision(num: float | int, precision: int | None) -> float | int: @@ -188,51 +170,8 @@ def postprocess(self, y: float | None) -> float | None: return None return self._round_to_precision(y, self.precision) - def set_interpret_parameters( - self, steps: int = 3, delta: float = 1, delta_type: str = "percent" - ): - """ - Calculates interpretation scores of numeric values close to the input number. - Parameters: - steps: Number of nearby values to measure in each direction (above and below the input number). - delta: Size of step in each direction between nearby values. - delta_type: "percent" if delta step between nearby values should be a calculated as a percent, or "absolute" if delta should be a constant step change. - """ - self.interpretation_steps = steps - self.interpretation_delta = delta - self.interpretation_delta_type = delta_type - return self - - def get_interpretation_neighbors(self, x: float | int) -> tuple[list[float], dict]: - x = self._round_to_precision(x, self.precision) - if self.interpretation_delta_type == "percent": - delta = 1.0 * self.interpretation_delta * x / 100 - elif self.interpretation_delta_type == "absolute": - delta = self.interpretation_delta - else: - delta = self.interpretation_delta - if self.precision == 0 and math.floor(delta) != delta: - raise ValueError( - f"Delta value {delta} is not an integer and precision=0. Cannot generate valid set of neighbors. " - "If delta_type='percent', pick a value of delta such that x * delta is an integer. " - "If delta_type='absolute', pick a value of delta that is an integer." - ) - # run_interpretation will preprocess the neighbors so no need to convert to int here - negatives = ( - np.array(x) + np.arange(-self.interpretation_steps, 0) * delta - ).tolist() - positives = ( - np.array(x) + np.arange(1, self.interpretation_steps + 1) * delta - ).tolist() - return negatives + positives, {} - - def get_interpretation_scores( - self, x: float, neighbors: list[float], scores: list[float | None], **kwargs - ) -> list[tuple[float, float | None]]: - """ - Returns: - Each tuple set represents a numeric value near the input and its corresponding interpretation score. - """ - interpretation = list(zip(neighbors, scores)) - interpretation.insert(int(len(interpretation) / 2), (x, None)) - return interpretation + def api_info(self) -> dict[str, str]: + return {"type": "number"} + + def example_inputs(self) -> Any: + return 3 diff --git a/gradio/components/plot.py b/gradio/components/plot.py index 763f871c9d7b..03f37777efbe 100644 --- a/gradio/components/plot.py +++ b/gradio/components/plot.py @@ -10,18 +10,28 @@ import altair as alt import pandas as pd from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import JSONSerializable from gradio import processing_utils -from gradio.components.base import IOComponent, _Keywords +from gradio.components.base import Component, _Keywords +from gradio.data_classes import GradioModel from gradio.deprecation import warn_style_method_deprecation -from gradio.events import Changeable, Clearable +from gradio.events import Events set_documentation_group("component") +class PlotData(GradioModel): + type: Literal["altair", "bokeh", "plotly", "matplotlib"] + plot: str + + +class AltairPlotData(PlotData): + chart: Literal["bar", "line", "scatter"] + type: Literal["altair"] = "altair" + + @document() -class Plot(Changeable, Clearable, IOComponent, JSONSerializable): +class Plot(Component): """ Used to display various kinds of plots (matplotlib, plotly, or bokeh are supported) Preprocessing: this component does *not* accept input. @@ -31,6 +41,9 @@ class Plot(Changeable, Clearable, IOComponent, JSONSerializable): Guides: plot-component-for-maps """ + data_model = PlotData + EVENTS = [Events.change, Events.clear] + def __init__( self, value: Callable | None | pd.DataFrame = None, @@ -59,8 +72,7 @@ def __init__( elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. """ - IOComponent.__init__( - self, + super().__init__( label=label, every=every, show_label=show_label, @@ -111,7 +123,13 @@ def update( } return updated_config - def postprocess(self, y) -> dict[str, str] | None: + def preprocess(self, x: Any) -> Any: + return x + + def example_inputs(self) -> Any: + return None + + def postprocess(self, y) -> PlotData | None: """ Parameters: y: plot data @@ -134,7 +152,7 @@ def postprocess(self, y) -> dict[str, str] | None: is_altair = "altair" in y.__module__ dtype = "altair" if is_altair else "plotly" out_y = y.to_json() - return {"type": dtype, "plot": out_y} + return PlotData(**{"type": dtype, "plot": out_y}) def style(self, container: bool | None = None): """ diff --git a/gradio/components/radio.py b/gradio/components/radio.py index 2e1d1aad80b9..8fe38483a52a 100644 --- a/gradio/components/radio.py +++ b/gradio/components/radio.py @@ -6,26 +6,15 @@ from typing import Any, Callable, Literal from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import StringSerializable -from gradio.components.base import FormComponent, IOComponent, _Keywords -from gradio.deprecation import warn_deprecation, warn_style_method_deprecation -from gradio.events import Changeable, EventListenerMethod, Inputable, Selectable -from gradio.interpretation import NeighborInterpretable +from gradio.components.base import FormComponent, _Keywords +from gradio.events import Events set_documentation_group("component") @document() -class Radio( - FormComponent, - Selectable, - Changeable, - Inputable, - IOComponent, - StringSerializable, - NeighborInterpretable, -): +class Radio(FormComponent): """ Creates a set of (string or numeric type) radio buttons of which only one can be selected. Preprocessing: passes the value of the selected radio button as a {str} or {int} or {float} or its index as an {int} into the function, depending on `type`. @@ -35,6 +24,8 @@ class Radio( Demos: sentence_builder, titanic_survival, blocks_essay """ + EVENTS = [Events.select, Events.change, Events.input] + def __init__( self, choices: list[str | int | float | tuple[str, str | int | float]] | None = None, @@ -84,14 +75,7 @@ def __init__( f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}" ) self.type = type - self.select: EventListenerMethod - """ - Event listener for when the user selects Radio option. - Uses event data gradio.SelectData to carry `value` referring to label of selected option, and `index` to refer to index. - See EventData documentation on how to use this event data. - """ - IOComponent.__init__( - self, + super().__init__( label=label, info=info, every=every, @@ -106,13 +90,9 @@ def __init__( value=value, **kwargs, ) - NeighborInterpretable.__init__(self) - def example_inputs(self) -> dict[str, Any]: - return { - "raw": self.choices[0][1] if self.choices else None, - "serialized": self.choices[0][1] if self.choices else None, - } + def example_inputs(self) -> Any: + return self.choices[0][1] if self.choices else None @staticmethod def update( @@ -173,38 +153,15 @@ def preprocess(self, x: str | int | float | None) -> str | int | float | None: f"Unknown type: {self.type}. Please choose from: 'value', 'index'." ) - def get_interpretation_neighbors(self, x): - choices = [value for _, value in self.choices] - choices.remove(x) - return choices, {} - - def get_interpretation_scores( - self, x, neighbors, scores: list[float | None], **kwargs - ) -> list: - """ - Returns: - Each value represents the interpretation score corresponding to each choice. - """ - choices = [value for _, value in self.choices] - scores.insert(choices.index(x), None) - return scores + def postprocess(self, y): + return y - def style( - self, - *, - item_container: bool | None = None, - container: bool | None = None, - **kwargs, - ): - """ - This method is deprecated. Please set these arguments in the constructor instead. - """ - warn_style_method_deprecation() - if item_container is not None: - warn_deprecation("The `item_container` parameter is deprecated.") - if container is not None: - self.container = container - return self + def api_info(self) -> dict[str, Any]: + return { + "enum": [c[1] for c in self.choices], + "title": "Radio", + "type": "string", + } def as_example(self, input_data): return next((c[0] for c in self.choices if c[1] == input_data), None) diff --git a/gradio/components/scatter_plot.py b/gradio/components/scatter_plot.py index 2369570eb87e..d5c57f96fa8a 100644 --- a/gradio/components/scatter_plot.py +++ b/gradio/components/scatter_plot.py @@ -3,7 +3,7 @@ from __future__ import annotations import warnings -from typing import Callable, Literal +from typing import Any, Callable, Literal import altair as alt import pandas as pd @@ -11,7 +11,7 @@ from pandas.api.types import is_numeric_dtype from gradio.components.base import _Keywords -from gradio.components.plot import AltairPlot, Plot +from gradio.components.plot import AltairPlot, AltairPlotData, Plot set_documentation_group("component") @@ -28,6 +28,8 @@ class ScatterPlot(Plot): Guides: creating-a-dashboard-from-bigquery-data """ + data_model = AltairPlotData + def __init__( self, value: pd.DataFrame | Callable | None = None, @@ -463,7 +465,9 @@ def create_plot( return chart - def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None: + def postprocess( + self, y: pd.DataFrame | dict | None + ) -> AltairPlotData | dict | None: # if None or update if y is None or isinstance(y, dict): return y @@ -495,4 +499,12 @@ def postprocess(self, y: pd.DataFrame | dict | None) -> dict[str, str] | None: y_lim=self.y_lim, ) - return {"type": "altair", "plot": chart.to_json(), "chart": "scatter"} + return AltairPlotData( + **{"type": "altair", "plot": chart.to_json(), "chart": "scatter"} + ) + + def example_inputs(self) -> Any: + return None + + def preprocess(self, x: Any) -> Any: + return x diff --git a/gradio/components/slider.py b/gradio/components/slider.py index 514fec178b6a..7c1162259993 100644 --- a/gradio/components/slider.py +++ b/gradio/components/slider.py @@ -7,28 +7,16 @@ import warnings from typing import Any, Callable, Literal -import numpy as np from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import NumberSerializable -from gradio.components.base import FormComponent, IOComponent, _Keywords -from gradio.deprecation import warn_style_method_deprecation -from gradio.events import Changeable, Inputable, Releaseable -from gradio.interpretation import NeighborInterpretable +from gradio.components.base import FormComponent, _Keywords +from gradio.events import Events set_documentation_group("component") @document() -class Slider( - FormComponent, - Changeable, - Inputable, - Releaseable, - IOComponent, - NumberSerializable, - NeighborInterpretable, -): +class Slider(FormComponent): """ Creates a slider that ranges from `minimum` to `maximum` with a step size of `step`. Preprocessing: passes slider value as a {float} into the function. @@ -39,6 +27,8 @@ class Slider( Guides: create-your-own-friends-with-a-gan """ + EVENTS = [Events.change, Events.input, Events.release] + def __init__( self, minimum: float = 0, @@ -89,8 +79,7 @@ def __init__( self.step = step if randomize: value = self.get_random_value - IOComponent.__init__( - self, + super().__init__( label=label, info=info, every=every, @@ -105,22 +94,15 @@ def __init__( value=value, **kwargs, ) - NeighborInterpretable.__init__(self) - def api_info(self) -> dict[str, dict | bool]: + def api_info(self) -> dict[str, Any]: return { - "info": { - "type": "number", - "description": f"numeric value between {self.minimum} and {self.maximum}", - }, - "serialized_info": False, + "type": "number", + "description": f"numeric value between {self.minimum} and {self.maximum}", } - def example_inputs(self) -> dict[str, Any]: - return { - "raw": self.minimum, - "serialized": self.minimum, - } + def example_inputs(self) -> Any: + return self.minimum def get_random_value(self): n_steps = int((self.maximum - self.minimum) / self.step) @@ -176,30 +158,5 @@ def postprocess(self, y: float | None) -> float | None: """ return self.minimum if y is None else y - def set_interpret_parameters(self, steps: int = 8) -> Slider: - """ - Calculates interpretation scores of numeric values ranging between the minimum and maximum values of the slider. - Parameters: - steps: Number of neighboring values to measure between the minimum and maximum values of the slider range. - """ - self.interpretation_steps = steps - return self - - def get_interpretation_neighbors(self, x) -> tuple[object, dict]: - return ( - np.linspace(self.minimum, self.maximum, self.interpretation_steps).tolist(), - {}, - ) - - def style( - self, - *, - container: bool | None = None, - ): - """ - This method is deprecated. Please set these arguments in the constructor instead. - """ - warn_style_method_deprecation() - if container is not None: - self.container = container - return self + def preprocess(self, x: Any) -> Any: + return x diff --git a/gradio/components/state.py b/gradio/components/state.py index c027875b090f..a20689adab9f 100644 --- a/gradio/components/state.py +++ b/gradio/components/state.py @@ -6,15 +6,15 @@ from typing import Any from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import SimpleSerializable -from gradio.components.base import IOComponent +from gradio.components.base import Component set_documentation_group("component") @document() -class State(IOComponent, SimpleSerializable): +class State(Component): + EVENTS = [] """ Special hidden component that stores session state across runs of the demo by the same user. The value of the State variable is cleared when the user refreshes the page. @@ -43,7 +43,23 @@ def __init__( raise TypeError( f"The initial value of `gr.State` must be able to be deepcopied. The initial value of type {type(value)} cannot be deepcopied." ) from err - IOComponent.__init__(self, value=self.value, **kwargs) + super().__init__(value=self.value, **kwargs) + + def preprocess(self, x: Any) -> Any: + return x + + def postprocess(self, y): + return y + + def api_info(self) -> dict[str, Any]: + return {"type": {}, "description": "any valid json"} + + def example_inputs(self) -> Any: + return None + + @property + def skip_api(self): + return True class Variable(State): diff --git a/gradio/components/status_tracker.py b/gradio/components/status_tracker.py index a9abec2969d9..b5a9d35f9d4d 100644 --- a/gradio/components/status_tracker.py +++ b/gradio/components/status_tracker.py @@ -1,11 +1,11 @@ """gr.StatusTracker() component.""" -from gradio_client.serializing import SimpleSerializable - from gradio.components.base import Component from gradio.deprecation import warn_deprecation -class StatusTracker(Component, SimpleSerializable): +class StatusTracker(Component): + EVENTS = [] + def __init__( self, **kwargs, diff --git a/gradio/components/textbox.py b/gradio/components/textbox.py index 7b8bed6e19a4..9617ef7faa15 100644 --- a/gradio/components/textbox.py +++ b/gradio/components/textbox.py @@ -3,43 +3,21 @@ from __future__ import annotations import warnings -from typing import Callable, Literal +from typing import Any, Callable, Literal -import numpy as np from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import StringSerializable from gradio.components.base import ( FormComponent, - IOComponent, _Keywords, ) -from gradio.deprecation import warn_style_method_deprecation -from gradio.events import ( - Changeable, - EventListenerMethod, - Focusable, - Inputable, - Selectable, - Submittable, -) -from gradio.interpretation import TokenInterpretable +from gradio.events import Events set_documentation_group("component") @document() -class Textbox( - FormComponent, - Changeable, - Inputable, - Selectable, - Submittable, - Focusable, - IOComponent, - StringSerializable, - TokenInterpretable, -): +class Textbox(FormComponent): """ Creates a textarea for user to enter string input or display string output. Preprocessing: passes textarea value as a {str} into the function. @@ -50,6 +28,15 @@ class Textbox( Guides: creating-a-chatbot, real-time-speech-recognition """ + EVENTS = [ + Events.change, + Events.input, + Events.select, + Events.submit, + Events.focus, + Events.blur, + ] + def __init__( self, value: str | Callable | None = "", @@ -111,15 +98,8 @@ def __init__( self.placeholder = placeholder self.show_copy_button = show_copy_button self.autofocus = autofocus - self.select: EventListenerMethod self.autoscroll = autoscroll - """ - Event listener for when the user selects text in the Textbox. - Uses event data gradio.SelectData to carry `value` referring to selected substring, and `index` tuple referring to selected range endpoints. - See EventData documentation on how to use this event data. - """ - IOComponent.__init__( - self, + super().__init__( label=label, info=info, every=every, @@ -134,7 +114,6 @@ def __init__( value=value, **kwargs, ) - TokenInterpretable.__init__(self) self.type = type self.rtl = rtl self.text_align = text_align @@ -205,74 +184,8 @@ def postprocess(self, y: str | None) -> str | None: """ return None if y is None else str(y) - def set_interpret_parameters( - self, separator: str = " ", replacement: str | None = None - ): - """ - Calculates interpretation score of characters in input by splitting input into tokens, then using a "leave one out" method to calculate the score of each token by removing each token and measuring the delta of the output value. - Parameters: - separator: Separator to use to split input into tokens. - replacement: In the "leave one out" step, the text that the token should be replaced with. If None, the token is removed altogether. - """ - self.interpretation_separator = separator - self.interpretation_replacement = replacement - return self - - def tokenize(self, x: str) -> tuple[list[str], list[str], None]: - """ - Tokenizes an input string by dividing into "words" delimited by self.interpretation_separator - """ - tokens = x.split(self.interpretation_separator) - leave_one_out_strings = [] - for index in range(len(tokens)): - leave_one_out_set = list(tokens) - if self.interpretation_replacement is None: - leave_one_out_set.pop(index) - else: - leave_one_out_set[index] = self.interpretation_replacement - leave_one_out_strings.append( - self.interpretation_separator.join(leave_one_out_set) - ) - return tokens, leave_one_out_strings, None + def api_info(self) -> dict[str, Any]: + return {"type": "string"} - def get_masked_inputs( - self, tokens: list[str], binary_mask_matrix: list[list[int]] - ) -> list[str]: - """ - Constructs partially-masked sentences for SHAP interpretation - """ - masked_inputs = [] - for binary_mask_vector in binary_mask_matrix: - masked_input = np.array(tokens)[np.array(binary_mask_vector, dtype=bool)] - masked_inputs.append(self.interpretation_separator.join(masked_input)) - return masked_inputs - - def get_interpretation_scores( - self, x, neighbors, scores: list[float], tokens: list[str], masks=None, **kwargs - ) -> list[tuple[str, float]]: - """ - Returns: - Each tuple set represents a set of characters and their corresponding interpretation score. - """ - result = [] - for token, score in zip(tokens, scores): - result.append((token, score)) - result.append((self.interpretation_separator, 0)) - return result - - def style( - self, - *, - show_copy_button: bool | None = None, - container: bool | None = None, - **kwargs, - ): - """ - This method is deprecated. Please set these arguments in the constructor instead. - """ - warn_style_method_deprecation() - if show_copy_button is not None: - self.show_copy_button = show_copy_button - if container is not None: - self.container = container - return self + def example_inputs(self) -> Any: + return "Hello!!" diff --git a/gradio/components/timeseries.py b/gradio/components/timeseries.py deleted file mode 100644 index 7cdd82ecb092..000000000000 --- a/gradio/components/timeseries.py +++ /dev/null @@ -1,152 +0,0 @@ -"""gr.Timeseries() component.""" - -from __future__ import annotations - -import warnings -from pathlib import Path -from typing import Any, Callable, Literal - -import pandas as pd -from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import JSONSerializable - -from gradio.components.base import IOComponent, _Keywords -from gradio.events import Changeable - -set_documentation_group("component") - - -@document() -class Timeseries(Changeable, IOComponent, JSONSerializable): - """ - Creates a component that can be used to upload/preview timeseries csv files or display a dataframe consisting of a time series graphically. - Preprocessing: passes the uploaded timeseries data as a {pandas.DataFrame} into the function - Postprocessing: expects a {pandas.DataFrame} or {str} path to a csv to be returned, which is then displayed as a timeseries graph - Examples-format: a {str} filepath of csv data with time series data. - Demos: fraud_detector - """ - - def __init__( - self, - value: str | Callable | None = None, - *, - x: str | None = None, - y: str | list[str] | None = None, - colors: list[str] | None = None, - label: str | None = None, - every: float | None = None, - show_label: bool | None = None, - container: bool = True, - scale: int | None = None, - min_width: int = 160, - interactive: bool | None = None, - visible: bool = True, - elem_id: str | None = None, - elem_classes: list[str] | str | None = None, - **kwargs, - ): - """ - Parameters: - value: File path for the timeseries csv file. If callable, the function will be called whenever the app loads to set the initial value of the component. - x: Column name of x (time) series. None if csv has no headers, in which case first column is x series. - y: Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series. - label: component name in interface. - every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute. - colors: an ordered list of colors to use for each line plot - show_label: if True, will display label. - container: If True, will place the component in a container - providing some extra padding around the border. - scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer. - min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first. - interactive: if True, will allow users to upload a timeseries csv; if False, can only be used to display timeseries data. If not provided, this is inferred based on whether the component is used as an input or output. - visible: If False, component will be hidden. - elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. - elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles. - """ - self.x = x - if isinstance(y, str): - y = [y] - self.y = y - self.colors = colors - IOComponent.__init__( - self, - label=label, - every=every, - show_label=show_label, - container=container, - scale=scale, - min_width=min_width, - interactive=interactive, - visible=visible, - elem_id=elem_id, - elem_classes=elem_classes, - value=value, - **kwargs, - ) - - @staticmethod - def update( - value: Any | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE, - colors: list[str] | None = None, - label: str | None = None, - show_label: bool | None = None, - container: bool | None = None, - scale: int | None = None, - min_width: int | None = None, - interactive: bool | None = None, - visible: bool | None = None, - ): - warnings.warn( - "Using the update method is deprecated. Simply return a new object instead, e.g. `return gr.Timeseries(...)` instead of `return gr.Timeseries.update(...)`." - ) - return { - "colors": colors, - "label": label, - "show_label": show_label, - "container": container, - "scale": scale, - "min_width": min_width, - "interactive": interactive, - "visible": visible, - "value": value, - "__type__": "update", - } - - def preprocess(self, x: dict | None) -> pd.DataFrame | None: - """ - Parameters: - x: Dict with keys 'data': 2D array of str, numeric, or bool data, 'headers': list of strings for header names, 'range': optional two element list designating start of end of subrange. - Returns: - Dataframe of timeseries data - """ - if x is None: - return x - elif x.get("is_file"): - dataframe = pd.read_csv(x["name"]) - else: - dataframe = pd.DataFrame(data=x["data"], columns=x["headers"]) - if x.get("range") is not None: - dataframe = dataframe.loc[dataframe[self.x or 0] >= x["range"][0]] - dataframe = dataframe.loc[dataframe[self.x or 0] <= x["range"][1]] - return dataframe - - def postprocess(self, y: str | pd.DataFrame | None) -> dict | None: - """ - Parameters: - y: csv or dataframe with timeseries data - Returns: - JSON object with key 'headers' for list of header names, 'data' for 2D array of string or numeric data - """ - if y is None: - return None - if isinstance(y, str): - dataframe = pd.read_csv(y) - return { - "headers": dataframe.columns.values.tolist(), - "data": dataframe.values.tolist(), - } - if isinstance(y, pd.DataFrame): - return {"headers": y.columns.values.tolist(), "data": y.values.tolist()} - raise ValueError("Cannot process value as Timeseries data") - - def as_example(self, input_data: str | None) -> str: - return Path(input_data).name if input_data else "" diff --git a/gradio/components/upload_button.py b/gradio/components/upload_button.py index 268c6bfc0e91..27eb6a78474e 100644 --- a/gradio/components/upload_button.py +++ b/gradio/components/upload_button.py @@ -4,22 +4,25 @@ import tempfile import warnings -from typing import Any, Callable, Literal +from typing import Any, Callable, List, Literal -from gradio_client import utils as client_utils from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import FileSerializable -from gradio import utils -from gradio.components.base import IOComponent, _Keywords +from gradio.components.base import Component, _Keywords +from gradio.components.file import File +from gradio.data_classes import FileData, GradioRootModel from gradio.deprecation import warn_deprecation, warn_style_method_deprecation -from gradio.events import Clickable, Uploadable +from gradio.events import Events set_documentation_group("component") +class ListFiles(GradioRootModel): + root: List[FileData] + + @document() -class UploadButton(Clickable, Uploadable, IOComponent, FileSerializable): +class UploadButton(Component): """ Used to create an upload button, when clicked allows a user to upload files that satisfy the specified file type or generic files (if file_type not set). Preprocessing: passes the uploaded file as a {file-object} or {List[file-object]} depending on `file_count` (or a {bytes}/{List[bytes]} depending on `type`) @@ -28,6 +31,8 @@ class UploadButton(Clickable, Uploadable, IOComponent, FileSerializable): Demos: upload_button """ + EVENTS = [Events.click, Events.upload] + def __init__( self, label: str = "Upload a File", @@ -76,8 +81,7 @@ def __init__( self.file_types = file_types self.label = label self.variant = variant - IOComponent.__init__( - self, + super().__init__( label=label, visible=visible, elem_id=elem_id, @@ -89,6 +93,20 @@ def __init__( **kwargs, ) + def api_info(self) -> dict[str, list[str]]: + if self.file_count == "single": + return FileData.model_json_schema() + else: + return ListFiles.model_json_schema() + + def example_inputs(self) -> Any: + if self.file_count == "single": + return "https://github.com/gradio-app/gradio/raw/main/test/test_files/sample_file.pdf" + else: + return [ + "https://github.com/gradio-app/gradio/raw/main/test/test_files/sample_file.pdf" + ] + @staticmethod def update( value: str @@ -135,48 +153,30 @@ def preprocess( if x is None: return None - def process_single_file(f) -> bytes | tempfile._TemporaryFileWrapper: - file_name, data, is_file = ( - f["name"], - f["data"], - f.get("is_file", False), - ) - if self.type == "file": - if is_file: - path = self.make_temp_copy_if_needed(file_name) - else: - data, _ = client_utils.decode_base64_to_binary(data) - path = self.file_bytes_to_file(data, file_name=file_name) - path = str(utils.abspath(path)) - self.temp_files.add(path) - file = tempfile.NamedTemporaryFile( - delete=False, dir=self.DEFAULT_TEMP_DIR - ) - file.name = path - file.orig_name = file_name # type: ignore - return file - elif self.type == "bytes": - if is_file: - with open(file_name, "rb") as file_data: - return file_data.read() - return client_utils.decode_base64_to_binary(data)[0] - else: - raise ValueError( - "Unknown type: " - + str(self.type) - + ". Please choose from: 'file', 'bytes'." - ) - if self.file_count == "single": if isinstance(x, list): - return process_single_file(x[0]) + return File._process_single_file( + x[0], type=self.type, cache_dir=self.GRADIO_CACHE # type: ignore + ) else: - return process_single_file(x) + return File._process_single_file( + x, type=self.type, cache_dir=self.GRADIO_CACHE # type: ignore + ) else: if isinstance(x, list): - return [process_single_file(f) for f in x] + return [ + File._process_single_file( + f, type=self.type, cache_dir=self.GRADIO_CACHE # type: ignore + ) + for f in x + ] else: - return process_single_file(x) + return File._process_single_file( + x, type=self.type, cache_dir=self.GRADIO_CACHE # type: ignore + ) + + def postprocess(self, y): + return super().postprocess(y) def style( self, @@ -198,3 +198,7 @@ def style( if size is not None: self.size = size return self + + @property + def skip_api(self): + return False diff --git a/gradio/components/video.py b/gradio/components/video.py index 5b1d3e5a7473..cc5ee825e2a5 100644 --- a/gradio/components/video.py +++ b/gradio/components/video.py @@ -5,17 +5,16 @@ import tempfile import warnings from pathlib import Path -from typing import Callable, Literal +from typing import Any, Callable, Literal, Optional from gradio_client import utils as client_utils -from gradio_client.data_classes import FileData from gradio_client.documentation import document, set_documentation_group -from gradio_client.serializing import VideoSerializable from gradio import processing_utils, utils, wasm_utils -from gradio.components.base import IOComponent, _Keywords +from gradio.components.base import Component, _Keywords +from gradio.data_classes import FileData, GradioModel from gradio.deprecation import warn_style_method_deprecation -from gradio.events import Changeable, Clearable, Playable, Recordable, Uploadable +from gradio.events import Events if not wasm_utils.IS_WASM: # TODO: Support ffmpeg on Wasm @@ -24,16 +23,13 @@ set_documentation_group("component") +class VideoData(GradioModel): + video: FileData + subtitles: Optional[FileData] = None + + @document() -class Video( - Changeable, - Clearable, - Playable, - Recordable, - Uploadable, - IOComponent, - VideoSerializable, -): +class Video(Component): """ Creates a video component that can be used to upload/record videos (as an input) or display videos (as an output). For the video to be playable in the browser it must have a compatible container and codec combination. Allowed @@ -46,6 +42,19 @@ class Video( Demos: video_identity, video_subtitle """ + data_model = VideoData + input_data_model = FileData + EVENTS = [ + Events.change, + Events.clear, + Events.start_recording, + Events.stop_recording, + Events.stop, + Events.play, + Events.pause, + Events.end, + ] + def __init__( self, value: str @@ -115,8 +124,7 @@ def __init__( if show_share_button is None else show_share_button ) - IOComponent.__init__( - self, + super().__init__( label=label, every=every, show_label=show_label, @@ -170,9 +178,7 @@ def update( "__type__": "update", } - def preprocess( - self, x: tuple[FileData, FileData | None] | FileData | None - ) -> str | None: + def preprocess(self, x: dict | VideoData) -> str | None: """ Parameters: x: A tuple of (video file data, subtitle file data) or just video file data. @@ -181,30 +187,9 @@ def preprocess( """ if x is None: return None - elif isinstance(x, dict): - video = x - else: - video = x[0] - - file_name, file_data, is_file = ( - video.get("name"), - video["data"], - video.get("is_file", False), - ) - - if is_file: - if file_name is None: - raise ValueError("Received file data without a file name.") - if client_utils.is_http_url_like(file_name): - fn = self.download_temp_copy_if_needed - else: - fn = self.make_temp_copy_if_needed - file_name = Path(fn(file_name)) - else: - if file_data is None: - raise ValueError("Received empty file data.") - file_name = Path(self.base64_to_temp_file_if_needed(file_data, file_name)) - + data: VideoData = VideoData(**x) if isinstance(x, dict) else x + assert data.video.name + file_name = Path(data.video.name) uploaded_format = file_name.suffix.replace(".", "") needs_formatting = self.format is not None and uploaded_format != self.format flip = self.source == "webcam" and self.mirror_webcam @@ -248,7 +233,7 @@ def preprocess( def postprocess( self, y: str | Path | tuple[str | Path, str | Path | None] | None - ) -> tuple[FileData | None, FileData | None] | None: + ) -> VideoData | None: """ Processes a video to ensure that it is in the correct format before returning it to the front end. Parameters: @@ -289,8 +274,8 @@ def postprocess( ) else: raise Exception(f"Cannot process type as video: {type(y)}") - - return processed_files + assert processed_files[0] + return VideoData(video=processed_files[0], subtitles=processed_files[1]) def _format_video(self, video: str | Path | None) -> FileData | None: """ @@ -317,11 +302,13 @@ def _format_video(self, video: str | Path | None) -> FileData | None: # For cases where the video is a URL and does not need to be converted to another format, we can just return the URL if is_url and not (conversion_needed): - return {"name": video, "data": None, "is_file": True} + return FileData(name=video, is_file=True) # For cases where the video needs to be converted to another format if is_url: - video = self.download_temp_copy_if_needed(video) + video = processing_utils.save_url_to_cache( + video, cache_dir=self.GRADIO_CACHE + ) if ( processing_utils.ffmpeg_installed() and not processing_utils.video_is_playable(video) @@ -347,14 +334,7 @@ def _format_video(self, video: str | Path | None) -> FileData | None: ff.run() video = output_file_name - video = self.make_temp_copy_if_needed(video) - - return { - "name": video, - "data": None, - "is_file": True, - "orig_name": Path(video).name, - } + return FileData(name=video, data=None, is_file=True, orig_name=Path(video).name) def _format_subtitle(self, subtitle: str | Path | None) -> FileData | None: """ @@ -394,14 +374,14 @@ def srt_to_vtt(srt_file_path, vtt_file_path): # HTML5 only support vtt format if Path(subtitle).suffix == ".srt": temp_file = tempfile.NamedTemporaryFile( - delete=False, suffix=".vtt", dir=self.DEFAULT_TEMP_DIR + delete=False, suffix=".vtt", dir=self.GRADIO_CACHE ) srt_to_vtt(subtitle, temp_file.name) subtitle = temp_file.name subtitle_data = client_utils.encode_url_or_file_to_base64(subtitle) - return {"name": None, "data": subtitle_data, "is_file": False} + return FileData(name=None, data=subtitle_data, is_file=False) def style(self, *, height: int | None = None, width: int | None = None, **kwargs): """ @@ -413,3 +393,6 @@ def style(self, *, height: int | None = None, width: int | None = None, **kwargs if width is not None: self.width = width return self + + def example_inputs(self) -> Any: + return "https://github.com/gradio-app/gradio/raw/main/demo/video_component/files/world.mp4" diff --git a/gradio/data_classes.py b/gradio/data_classes.py index 514bed2accca..33a342e67828 100644 --- a/gradio/data_classes.py +++ b/gradio/data_classes.py @@ -1,9 +1,16 @@ """Pydantic data models and other dataclasses. This is the only file that uses Optional[] typing syntax instead of | None syntax to work with pydantic""" +from __future__ import annotations + +import pathlib +import secrets +import shutil +from abc import ABC, abstractmethod from enum import Enum, auto -from typing import Any, Dict, List, Optional, Union +from typing import Any, List, Optional, Union -from pydantic import BaseModel +from gradio_client.utils import traverse +from pydantic import BaseModel, RootModel, ValidationError from typing_extensions import Literal @@ -17,7 +24,7 @@ class PredictBody(BaseModel): bool ] = False # Whether the data is a batch of samples (i.e. called from the queue if batch=True) or a single sample (i.e. called from the UI) request: Optional[ - Union[Dict, List[Dict]] + Union[dict, List[dict]] ] = None # dictionary of request headers, query parameters, url, etc. (used to to pass in request for queuing) @@ -67,3 +74,90 @@ class LogMessage(BaseModel): msg: str = "log" log: str level: Literal["info", "warning"] + + +class GradioBaseModel(ABC): + def copy_to_dir(self, dir: str | pathlib.Path) -> GradioDataModel: + assert isinstance(self, (BaseModel, RootModel)) + if isinstance(dir, str): + dir = pathlib.Path(dir) + + # TODO: Making sure path is unique should be done in caller + def unique_copy(obj: dict): + data = FileData(**obj) + return data._copy_to_dir( + str(pathlib.Path(dir / secrets.token_hex(10))) + ).model_dump() + + return self.__class__.from_json( + x=traverse( + self.model_dump(), + unique_copy, + FileData.is_file_data, + ) + ) + + @classmethod + @abstractmethod + def from_json(cls, x) -> GradioDataModel: + pass + + +class GradioModel(GradioBaseModel, BaseModel): + @classmethod + def from_json(cls, x) -> GradioModel: + return cls(**x) + + +class GradioRootModel(GradioBaseModel, RootModel): + @classmethod + def from_json(cls, x) -> GradioRootModel: + return cls(root=x) + + +GradioDataModel = Union[GradioModel, GradioRootModel] + + +class FileData(GradioModel): + name: Optional[str] = None + data: Optional[str] = None # base64 encoded data + size: Optional[int] = None # size in bytes + is_file: Optional[bool] = None + orig_name: Optional[str] = None # original filename + mime_type: Optional[str] = None + + @property + def is_none(self): + return all( + f is None + for f in [ + self.name, + self.data, + self.size, + self.is_file, + self.orig_name, + self.mime_type, + ] + ) + + @classmethod + def from_path(cls, path: str) -> FileData: + return cls(name=path, is_file=True) + + def _copy_to_dir(self, dir: str) -> FileData: + pathlib.Path(dir).mkdir(exist_ok=True) + new_obj = dict(self) + if self.is_file: + assert self.name + new_name = shutil.copy(self.name, dir) + new_obj["name"] = new_name + return self.__class__(**new_obj) + + @classmethod + def is_file_data(cls, obj: Any): + if isinstance(obj, dict): + try: + return not FileData(**obj).is_none + except (TypeError, ValidationError): + return False + return False diff --git a/gradio/events.py b/gradio/events.py index 2fb5fdcf56d4..48a84d88cec6 100644 --- a/gradio/events.py +++ b/gradio/events.py @@ -3,22 +3,20 @@ from __future__ import annotations -from functools import wraps +import dataclasses +import string +from functools import partial, wraps from typing import TYPE_CHECKING, Any, Callable, Literal, Sequence -from gradio_client.documentation import document, set_documentation_group +from gradio_client.documentation import document + +if TYPE_CHECKING: + from gradio.blocks import Block, Component -from gradio.blocks import Block from gradio.context import Context from gradio.deprecation import warn_deprecation -from gradio.helpers import EventData from gradio.utils import get_cancel_function -if TYPE_CHECKING: # Only import for type checking (is False at runtime). - from gradio.components import Component - -set_documentation_group("events") - def set_cancel_events( triggers: Sequence[EventListenerMethod], @@ -41,35 +39,35 @@ def set_cancel_events( outputs=None, queue=False, preprocess=False, + api_name=False, cancels=fn_indices_to_cancel, ) -class EventListener(Block): - def __init__(self: Any): - for event_listener_class in EventListener.__subclasses__(): - if isinstance(self, event_listener_class): - event_listener_class.__init__(self) - - class Dependency(dict): - def __init__(self, key_vals, dep_index, fn): + def __init__(self, trigger, key_vals, dep_index, fn): super().__init__(key_vals) self.fn = fn - self.then = EventListenerMethod( - None, - "then", - trigger_after=dep_index, - trigger_only_on_success=False, + self.then = partial( + EventListener( + "then", + trigger_after=dep_index, + trigger_only_on_success=False, + has_trigger=False, + ).listener, + trigger, ) """ Triggered after directly preceding event is completed, regardless of success or failure. """ - self.success = EventListenerMethod( - None, - "success", - trigger_after=dep_index, - trigger_only_on_success=True, + self.success = partial( + EventListener( + "success", + trigger_after=dep_index, + trigger_only_on_success=True, + has_trigger=False, + ).listener, + trigger, ) """ Triggered after directly preceding event is completed, if it was successful. @@ -79,138 +77,242 @@ def __call__(self, *args, **kwargs): return self.fn(*args, **kwargs) -class EventListenerMethod: +@document() +class EventData: """ - Triggered on an event deployment. + When a subclass of EventData is added as a type hint to an argument of an event listener method, this object will be passed as that argument. + It contains information about the event that triggered the listener, such the target object, and other data related to the specific event that are attributes of the subclass. + + Example: + table = gr.Dataframe([[1, 2, 3], [4, 5, 6]]) + gallery = gr.Gallery([("cat.jpg", "Cat"), ("dog.jpg", "Dog")]) + textbox = gr.Textbox("Hello World!") + + statement = gr.Textbox() + + def on_select(evt: gr.SelectData): # SelectData is a subclass of EventData + return f"You selected {evt.value} at {evt.index} from {evt.target}" + + table.select(on_select, None, statement) + gallery.select(on_select, None, statement) + textbox.select(on_select, None, statement) + Demos: gallery_selections, tictactoe """ + def __init__(self, target: Block | None, _data: Any): + """ + Parameters: + target: The target object that triggered the event. Can be used to distinguish if multiple components are bound to the same listener. + """ + self.target = target + self._data = _data + + +class SelectData(EventData): + def __init__(self, target: Block | None, data: Any): + super().__init__(target, data) + self.index: int | tuple[int, int] = data["index"] + """ + The index of the selected item. Is a tuple if the component is two dimensional or selection is a range. + """ + self.value: Any = data["value"] + """ + The value of the selected item. + """ + self.selected: bool = data.get("selected", True) + """ + True if the item was selected, False if deselected. + """ + + +@dataclasses.dataclass +class EventListenerMethod: + block: Block | None + event_name: str + + +class EventListener(str): + def __new__(cls, event_name, *args, **kwargs): + return super().__new__(cls, event_name) + def __init__( self, - trigger: Block | None, event_name: str, - show_progress: Literal["full", "minimal", "hidden"] = "full", + has_trigger: bool = True, + config_data: Callable[..., dict[str, Any]] = lambda: {}, + show_progress: Literal["full", "minimal", "hidden"] | None = None, callback: Callable | None = None, trigger_after: int | None = None, trigger_only_on_success: bool = False, ): - self.trigger = trigger + super().__init__() + self.has_trigger = has_trigger + self.config_data = config_data self.event_name = event_name self.show_progress = show_progress - self.callback = callback self.trigger_after = trigger_after self.trigger_only_on_success = trigger_only_on_success + self.callback = callback + self.listener = self._setup( + event_name, + has_trigger, + show_progress, + callback, + trigger_after, + trigger_only_on_success, + ) - def __call__( - self, - fn: Callable | None | Literal["decorator"] = "decorator", - inputs: Component | Sequence[Component] | set[Component] | None = None, - outputs: Component | Sequence[Component] | None = None, - api_name: str | None | Literal[False] = None, - status_tracker: None = None, - scroll_to_output: bool = False, - show_progress: Literal["full", "minimal", "hidden"] | None = None, - queue: bool | None = None, - batch: bool = False, - max_batch_size: int = 4, - preprocess: bool = True, - postprocess: bool = True, - cancels: dict[str, Any] | list[dict[str, Any]] | None = None, - every: float | None = None, - _js: str | None = None, - ) -> Dependency: - """ - Parameters: - fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. - inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. - outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. - api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be exposed in the api docs as an unnamed endpoint, although this behavior will be changed in Gradio 4.0. If set to a string, the endpoint will be exposed in the api docs with the given name. - status_tracker: Deprecated and has no effect. - scroll_to_output: If True, will scroll to output component on completion - show_progress: If True, will show progress animation while pending - queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. - batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. - max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) - preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). - postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser. - cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. - every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled. - """ - if fn == "decorator": - - def wrapper(func): - self.__call__( - func, - inputs, - outputs, - api_name, - status_tracker, - scroll_to_output, - show_progress, - queue, - batch, - max_batch_size, - preprocess, - postprocess, - cancels, - every, - _js, + @staticmethod + def _setup( + _event_name: str, + _has_trigger: bool, + _show_progress: Literal["full", "minimal", "hidden"] | None, + _callback: Callable | None, + _trigger_after: int | None, + _trigger_only_on_success: bool, + ): + def event_trigger( + block: Block | None, + fn: Callable | None, + inputs: Component | list[Component] | set[Component] | None = None, + outputs: Component | list[Component] | None = None, + api_name: str | None | Literal[False] = None, + status_tracker: None = None, + scroll_to_output: bool = False, + show_progress: Literal["full", "minimal", "hidden"] = "full", + queue: bool | None = None, + batch: bool = False, + max_batch_size: int = 4, + preprocess: bool = True, + postprocess: bool = True, + cancels: dict[str, Any] | list[dict[str, Any]] | None = None, + every: float | None = None, + _js: str | None = None, + ) -> Dependency: + """ + Parameters: + fn: the function to call when this event is triggered. Often a machine learning model's prediction function. Each parameter of the function corresponds to one input component, and the function should return a single value or a tuple of values, with each element in the tuple corresponding to one output component. + inputs: List of gradio.components to use as inputs. If the function takes no inputs, this should be an empty list. + outputs: List of gradio.components to use as outputs. If the function returns no outputs, this should be an empty list. + api_name: Defines how the endpoint appears in the API docs. Can be a string, None, or False. If False, the endpoint will not be exposed in the api docs. If set to None, the endpoint will be given the name of the python function fn. If no fn is passed in, it will be given the name 'unnamed'. If set to a string, the endpoint will be exposed in the api docs with the given name. + status_tracker: Deprecated and has no effect. + scroll_to_output: If True, will scroll to output component on completion + show_progress: If True, will show progress animation while pending + queue: If True, will place the request on the queue, if the queue has been enabled. If False, will not put this event on the queue, even if the queue has been enabled. If None, will use the queue setting of the gradio app. + batch: If True, then the function should process a batch of inputs, meaning that it should accept a list of input values for each parameter. The lists should be of equal length (and be up to length `max_batch_size`). The function is then *required* to return a tuple of lists (even if there is only 1 output component), with each list in the tuple corresponding to one output component. + max_batch_size: Maximum number of inputs to batch together if this is called from the queue (only relevant if batch=True) + preprocess: If False, will not run preprocessing of component data before running 'fn' (e.g. leaving it as a base64 string if this method is called with the `Image` component). + postprocess: If False, will not run postprocessing of component data before returning 'fn' output to the browser. + cancels: A list of other events to cancel when this listener is triggered. For example, setting cancels=[click_event] will cancel the click_event, where click_event is the return value of another components .click method. Functions that have not yet run (or generators that are iterating) will be cancelled, but functions that are currently running will be allowed to finish. + every: Run this event 'every' number of seconds while the client connection is open. Interpreted in seconds. Queue must be enabled. + """ + + if fn == "decorator": + + def wrapper(func): + event_trigger( + block, + func, + inputs, + outputs, + api_name, + status_tracker, + scroll_to_output, + show_progress, + queue, + batch, + max_batch_size, + preprocess, + postprocess, + cancels, + every, + _js, + ) + + @wraps(func) + def inner(*args, **kwargs): + return func(*args, **kwargs) + + return inner + + return Dependency(None, {}, None, wrapper) + + if status_tracker: + warn_deprecation( + "The 'status_tracker' parameter has been deprecated and has no effect." + ) + if _event_name == "stop": + warn_deprecation( + "The `stop` event on Video and Audio has been deprecated and will be remove in a future version. Use `ended` instead." + ) + if block and "stream" in block.events: + block.check_streamable() # type: ignore + if isinstance(show_progress, bool): + show_progress = "full" if show_progress else "hidden" + + if api_name is None: + if fn is not None: + if not hasattr(fn, "__name__"): + if hasattr(fn, "__class__") and hasattr( + fn.__class__, "__name__" + ): + name = fn.__class__.__name__ + else: + name = "unnamed" + else: + name = fn.__name__ + api_name = "".join( + [ + s + for s in name + if s not in set(string.punctuation) - {"-", "_"} + ] + ) + else: + # Don't document _js only events + api_name = False + + if Context.root_block is None: + raise AttributeError( + "Cannot call {self.event_name} outside of a gradio.Blocks context." ) - @wraps(func) - def inner(*args, **kwargs): - return func(*args, **kwargs) - - return inner - - return Dependency({}, None, wrapper) - - if status_tracker: - warn_deprecation( - "The 'status_tracker' parameter has been deprecated and has no effect." + dep, dep_index = Context.root_block.set_event_trigger( + [EventListenerMethod(block if _has_trigger else None, _event_name)], + fn, + inputs, + outputs, + preprocess=preprocess, + postprocess=postprocess, + scroll_to_output=scroll_to_output, + show_progress=show_progress + if show_progress is not None + else _show_progress, + api_name=api_name, + js=_js, + queue=queue, + batch=batch, + max_batch_size=max_batch_size, + every=every, + trigger_after=_trigger_after, + trigger_only_on_success=_trigger_only_on_success, ) - if self.event_name == "stop": - warn_deprecation( - "The `stop` event on Video and Audio has been deprecated and will be remove in a future version. Use `ended` instead." + set_cancel_events( + [EventListenerMethod(block if _has_trigger else None, _event_name)], + cancels, ) + if _callback: + _callback(block) + return Dependency(block, dep, dep_index, fn) - if isinstance(self, Streamable): - self.check_streamable() - if isinstance(show_progress, bool): - show_progress = "full" if show_progress else "hidden" - - if Context.root_block is None: - raise AttributeError( - "Cannot call {self.event_name} outside of a gradio.Blocks context." - ) - - dep, dep_index = Context.root_block.set_event_trigger( - [self], - fn, - inputs, - outputs, - preprocess=preprocess, - postprocess=postprocess, - scroll_to_output=scroll_to_output, - show_progress=show_progress - if show_progress is not None - else self.show_progress, - api_name=api_name, - js=_js, - queue=queue, - batch=batch, - max_batch_size=max_batch_size, - every=every, - trigger_after=self.trigger_after, - trigger_only_on_success=self.trigger_only_on_success, - ) - set_cancel_events([self], cancels) - if self.callback: - self.callback() - return Dependency(dep, dep_index, fn) + event_trigger.event_name = _event_name + event_trigger.has_trigger = _has_trigger + return event_trigger +# TODO: Fix type def on( - triggers: Sequence[EventListenerMethod] | EventListenerMethod | None = None, + triggers: Sequence[Any] | Any | None = None, fn: Callable | None | Literal["decorator"] = "decorator", inputs: Component | list[Component] | set[Component] | None = None, outputs: Component | list[Component] | None = None, @@ -246,7 +348,7 @@ def on( """ from gradio.components.base import Component - if isinstance(triggers, EventListenerMethod): + if isinstance(triggers, EventListener): triggers = [triggers] if isinstance(inputs, Component): inputs = [inputs] @@ -278,13 +380,14 @@ def inner(*args, **kwargs): return inner - return Dependency({}, None, wrapper) + return Dependency(None, {}, None, wrapper) if Context.root_block is None: raise Exception("Cannot call on() outside of a gradio.Blocks context.") if triggers is None: - triggers = [input.change for input in inputs] if inputs is not None else [] - + triggers = [EventListenerMethod(input, "change") for input in inputs] if inputs is not None else [] # type: ignore + else: + triggers = [EventListenerMethod(t.__self__ if t.has_trigger else None, t.event_name) for t in triggers] # type: ignore dep, dep_index = Context.root_block.set_event_trigger( triggers, fn, @@ -302,216 +405,42 @@ def inner(*args, **kwargs): every=every, ) set_cancel_events(triggers, cancels) - return Dependency(dep, dep_index, fn) - - -@document("*change", inherit=True) -class Changeable(EventListener): - def __init__(self): - self.change = EventListenerMethod(self, "change") - """ - This listener is triggered when the component's value changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). - See `.input()` for a listener that is only triggered by user input. - """ - - -@document("*input", inherit=True) -class Inputable(EventListener): - def __init__(self): - self.input = EventListenerMethod(self, "input") - """ - This listener is triggered when the user changes the value of the component. - """ - - -@document("*click", inherit=True) -class Clickable(EventListener): - def __init__(self): - self.click = EventListenerMethod(self, "click") - """ - This listener is triggered when the component (e.g. a button) is clicked. - """ - - -@document("*submit", inherit=True) -class Submittable(EventListener): - def __init__(self): - self.submit = EventListenerMethod(self, "submit") - """ - This listener is triggered when the user presses the Enter key while the component (e.g. a textbox) is focused. - """ - - -@document("*edit", inherit=True) -class Editable(EventListener): - def __init__(self): - self.edit = EventListenerMethod(self, "edit") - """ - This listener is triggered when the user edits the component (e.g. image) using the - built-in editor. - """ - - -@document("*clear", inherit=True) -class Clearable(EventListener): - def __init__(self): - self.clear = EventListenerMethod(self, "clear") - """ - This listener is triggered when the user clears the component (e.g. image or audio) - using the X button for the component. - """ - - -@document("*play", "*pause", "*stop", "*end", inherit=True) -class Playable(EventListener): - def __init__(self): - self.play = EventListenerMethod(self, "play") - """ - This listener is triggered when the user plays the component (e.g. audio or video). - """ - - self.pause = EventListenerMethod(self, "pause") - """ - This listener is triggered when the media stops playing for any reason (e.g. audio or video). - """ - - self.stop = EventListenerMethod(self, "stop") - """ - This listener is triggered when the user reaches the end of the media track (e.g. audio or video). - """ - - self.end = EventListenerMethod(self, "end") - """ - This listener is triggered when the user reaches the end of the media track (e.g. audio or video). - """ - - -@document("*stream", inherit=True) -class Streamable(EventListener): - def __init__(self): - self.streaming: bool - self.stream = EventListenerMethod( - self, - "stream", - show_progress="hidden", - callback=lambda: setattr(self, "streaming", True), - ) - """ - This listener is triggered when the user streams the component (e.g. a live webcam - component). - """ - - def check_streamable(self): - pass - - -class StreamableOutput(EventListener): - def __init__(self): - self.streaming: bool - - def stream_output(self, y, output_id: str, first_chunk: bool) -> tuple[bytes, Any]: - raise NotImplementedError - - -@document("*start_recording", "*stop_recording", inherit=True) -class Recordable(EventListener): - def __init__(self): - self.start_recording = EventListenerMethod(self, "start_recording") - """ - This listener is triggered when the user starts recording with the component (e.g. audio or video). - """ - - self.stop_recording = EventListenerMethod(self, "stop_recording") - """ - This listener is triggered when the user stops recording with the component (e.g. audio or video). - """ - - -@document("*focus", "*blur", inherit=True) -class Focusable(EventListener): - def __init__(self): - self.focus = EventListenerMethod(self, "focus") - """ - This listener is triggered when the component is focused (e.g. when the user clicks inside a textbox). - """ - - self.blur = EventListenerMethod(self, "blur") - """ - This listener is triggered when the component's is unfocused/blurred (e.g. when the user clicks outside of a textbox). - """ - - -@document("*upload", inherit=True) -class Uploadable(EventListener): - def __init__(self): - self.upload = EventListenerMethod(self, "upload") - """ - This listener is triggered when the user uploads a file into the component (e.g. when the user uploads a video into a video component). - """ - - -@document("*release", inherit=True) -class Releaseable(EventListener): - def __init__(self): - self.release = EventListenerMethod(self, "release") - """ - This listener is triggered when the user releases the mouse on this component (e.g. when the user releases the slider). - """ - - -@document("*select", inherit=True) -class Selectable(EventListener): - def __init__(self): - self.selectable: bool = False - self.select = EventListenerMethod( - self, "select", callback=lambda: setattr(self, "selectable", True) - ) - """ - This listener is triggered when the user selects from within the Component. - This event has EventData of type gradio.SelectData that carries information, accessible through SelectData.index and SelectData.value. - See EventData documentation on how to use this event data. - """ - - def get_config(self): - config = super().get_config() - config["selectable"] = self.selectable - return config - - -class SelectData(EventData): - def __init__(self, target: Block | None, data: Any): - super().__init__(target, data) - self.index: int | tuple[int, int] = data["index"] - """ - The index of the selected item. Is a tuple if the component is two dimensional or selection is a range. - """ - self.value: Any = data["value"] - """ - The value of the selected item. - """ - self.selected: bool = data.get("selected", True) - """ - True if the item was selected, False if deselected. - """ - - -@document("*like", inherit=True) -class Likeable(EventListener): - def __init__(self): - self.likeable: bool = False - self.like = EventListenerMethod( - self, "like", callback=lambda: setattr(self, "likeable", True) - ) - """ - This listener is triggered when the user likes/dislikes from within the Component. - This event has EventData of type gradio.LikeData that carries information, accessible through LikeData.index and LikeData.value. - See EventData documentation on how to use this event data. - """ - - def get_config(self): - config = super().get_config() - config["likeable"] = self.likeable - return config + return Dependency(None, dep, dep_index, fn) + + +class Events: + change = "change" + input = "input" + click = "click" + submit = "submit" + edit = "edit" + clear = "clear" + play = "play" + pause = "pause" + stop = "stop" + end = "end" + start_recording = "start_recording" + stop_recording = "stop_recording" + focus = "focus" + blur = "blur" + upload = "upload" + release = "release" + select = EventListener( + "select", + config_data=lambda: {"selectable": False}, + callback=lambda block: setattr(block, "selectable", True), + ) + stream = EventListener( + "stream", + show_progress="hidden", + config_data=lambda: {"streamable": False}, + callback=lambda block: setattr(block, "streaming", True), + ) + like = EventListener( + "like", + config_data=lambda: {"likeable": False}, + callback=lambda block: setattr(block, "likeable", True), + ) class LikeData(EventData): diff --git a/gradio/exceptions.py b/gradio/exceptions.py index b8ed0989ae06..9667e2c9faed 100644 --- a/gradio/exceptions.py +++ b/gradio/exceptions.py @@ -81,3 +81,7 @@ def __init__(self, message: str = "Error raised."): def __str__(self): return repr(self.message) + + +class ComponentDefinitionError(NotImplementedError): + pass diff --git a/gradio/flagging.py b/gradio/flagging.py index a226fb8d50e4..5d2644f06d87 100644 --- a/gradio/flagging.py +++ b/gradio/flagging.py @@ -21,7 +21,7 @@ from gradio.deprecation import warn_deprecation if TYPE_CHECKING: - from gradio.components import IOComponent + from gradio.components import Component set_documentation_group("flagging") @@ -32,7 +32,7 @@ class FlaggingCallback(ABC): """ @abstractmethod - def setup(self, components: list[IOComponent], flagging_dir: str): + def setup(self, components: list[Component], flagging_dir: str): """ This method should be overridden and ensure that everything is set up correctly for flag(). This method gets called once at the beginning of the Interface.launch() method. @@ -80,7 +80,7 @@ def image_classifier(inp): def __init__(self): pass - def setup(self, components: list[IOComponent], flagging_dir: str | Path): + def setup(self, components: list[Component], flagging_dir: str | Path): self.components = components self.flagging_dir = flagging_dir os.makedirs(flagging_dir, exist_ok=True) @@ -99,11 +99,11 @@ def flag( save_dir = Path( flagging_dir ) / client_utils.strip_invalid_filename_characters(component.label or "") + save_dir.mkdir(exist_ok=True) csv_data.append( - component.deserialize( + component.flag( sample, save_dir, - None, ) ) @@ -135,7 +135,7 @@ def __init__(self): def setup( self, - components: list[IOComponent], + components: list[Component], flagging_dir: str | Path, ): self.components = components @@ -167,11 +167,12 @@ def flag( ) / client_utils.strip_invalid_filename_characters( getattr(component, "label", None) or f"component {idx}" ) + save_dir.mkdir(exist_ok=True) if utils.is_update(sample): csv_data.append(str(sample)) else: csv_data.append( - component.deserialize(sample, save_dir=save_dir) + component.flag(sample, flag_dir=save_dir) if sample is not None else "" ) @@ -234,7 +235,7 @@ def __init__( self.info_filename = info_filename self.separate_dirs = separate_dirs - def setup(self, components: list[IOComponent], flagging_dir: str): + def setup(self, components: list[Component], flagging_dir: str): """ Params: flagging_dir (str): local directory where the dataset is cloned, @@ -425,7 +426,8 @@ def _deserialize_components( # Get deserialized object (will save sample to disk if applicable -file, audio, image,...-) label = component.label or "" save_dir = data_dir / client_utils.strip_invalid_filename_characters(label) - deserialized = component.deserialize(sample, save_dir, None) + save_dir.mkdir(exist_ok=True, parents=True) + deserialized = component.flag(sample, save_dir) # Add deserialized object to row features[label] = {"dtype": "string", "_type": "Value"} diff --git a/gradio/helpers.py b/gradio/helpers.py index 794e0a98c998..893a789260f7 100644 --- a/gradio/helpers.py +++ b/gradio/helpers.py @@ -25,12 +25,13 @@ from gradio import components, oauth, processing_utils, routes, utils, wasm_utils from gradio.context import Context, LocalContext +from gradio.data_classes import GradioModel, GradioRootModel +from gradio.events import EventData from gradio.exceptions import Error from gradio.flagging import CSVLogger if TYPE_CHECKING: # Only import for type checking (to avoid circular imports). - from gradio.blocks import Block - from gradio.components import IOComponent + from gradio.components import Component CACHED_FOLDER = "gradio_cached_examples" LOG_FILE = "log.csv" @@ -40,8 +41,8 @@ def create_examples( examples: list[Any] | list[list[Any]] | str, - inputs: IOComponent | list[IOComponent], - outputs: IOComponent | list[IOComponent] | None = None, + inputs: Component | list[Component], + outputs: Component | list[Component] | None = None, fn: Callable | None = None, cache_examples: bool = False, examples_per_page: int = 10, @@ -91,8 +92,8 @@ class Examples: def __init__( self, examples: list[Any] | list[list[Any]] | str, - inputs: IOComponent | list[IOComponent], - outputs: IOComponent | list[IOComponent] | None = None, + inputs: Component | list[Component], + outputs: Component | list[Component] | None = None, fn: Callable | None = None, cache_examples: bool = False, examples_per_page: int = 10, @@ -206,13 +207,19 @@ def __init__( self.batch = batch with utils.set_directory(working_directory): - self.processed_examples = [ - [ - component.postprocess(sample) - for component, sample in zip(inputs, example) - ] - for example in examples - ] + self.processed_examples = [] + for example in examples: + sub = [] + for component, sample in zip(inputs, example): + prediction_value = component.postprocess(sample) + if isinstance(prediction_value, (GradioRootModel, GradioModel)): + prediction_value = prediction_value.model_dump() + prediction_value = processing_utils.move_files_to_cache( + prediction_value, component + ) + sub.append(prediction_value) + self.processed_examples.append(sub) + self.non_none_processed_examples = [ [ex for (ex, keep) in zip(example, input_has_examples) if keep] for example in self.processed_examples @@ -410,23 +417,21 @@ def load_from_cache(self, example_id: int) -> list[Any]: output.append(value_as_dict) except (ValueError, TypeError, SyntaxError, AssertionError): output.append( - component.serialize( - value_to_use, self.cached_folder, allow_links=True + component.read_from_flag( + value_to_use, + self.cached_folder, ) ) return output def merge_generated_values_into_output( - components: list[IOComponent], generated_values: list, output: list + components: list[Component], generated_values: list, output: list ): - from gradio.events import StreamableOutput + from gradio.components.base import StreamingOutput for output_index, output_component in enumerate(components): - if ( - isinstance(output_component, StreamableOutput) - and output_component.streaming - ): + if isinstance(output_component, StreamingOutput) and output_component.streaming: binary_chunks = [] for i, chunk in enumerate(generated_values): if len(components) > 1: @@ -1059,37 +1064,6 @@ def _animate(_): return output_mp4.name -@document() -class EventData: - """ - When a subclass of EventData is added as a type hint to an argument of an event listener method, this object will be passed as that argument. - It contains information about the event that triggered the listener, such the target object, and other data related to the specific event that are attributes of the subclass. - - Example: - table = gr.Dataframe([[1, 2, 3], [4, 5, 6]]) - gallery = gr.Gallery([("cat.jpg", "Cat"), ("dog.jpg", "Dog")]) - textbox = gr.Textbox("Hello World!") - - statement = gr.Textbox() - - def on_select(evt: gr.SelectData): # SelectData is a subclass of EventData - return f"You selected {evt.value} at {evt.index} from {evt.target}" - - table.select(on_select, None, statement) - gallery.select(on_select, None, statement) - textbox.select(on_select, None, statement) - Demos: gallery_selections, tictactoe - """ - - def __init__(self, target: Block | None, _data: Any): - """ - Parameters: - target: The target object that triggered the event. Can be used to distinguish if multiple components are bound to the same listener. - """ - self.target = target - self._data = _data - - def log_message(message: str, level: Literal["info", "warning"] = "info"): from gradio.context import LocalContext diff --git a/gradio/inputs.py b/gradio/inputs.py deleted file mode 100644 index 9345530649a0..000000000000 --- a/gradio/inputs.py +++ /dev/null @@ -1,451 +0,0 @@ -# type: ignore -""" -This module defines various classes that can serve as the `input` to an interface. Each class must inherit from -`InputComponent`, and each class must define a path to its template. All of the subclasses of `InputComponent` are -automatically added to a registry, which allows them to be easily referenced in other parts of the code. -""" - -from __future__ import annotations - -from typing import Any, Optional - -from gradio import components -from gradio.deprecation import warn_deprecation - - -def warn_inputs_deprecation(): - warn_deprecation( - "Usage of gradio.inputs is deprecated, and will not be supported in the future, please import your component from gradio.components", - ) - - -class Textbox(components.Textbox): - def __init__( - self, - lines: int = 1, - placeholder: Optional[str] = None, - default: str = "", - numeric: Optional[bool] = False, - type: Optional[str] = "text", - label: Optional[str] = None, - optional: bool = False, - ): - warn_inputs_deprecation() - super().__init__( - value=default, - lines=lines, - placeholder=placeholder, - label=label, - numeric=numeric, - type=type, - optional=optional, - ) - - -class Number(components.Number): - """ - Component creates a field for user to enter numeric input. Provides a number as an argument to the wrapped function. - Input type: float - """ - - def __init__( - self, - default: Optional[float] = None, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - default (float): default value. - label (str): component name in interface. - optional (bool): If True, the interface can be submitted with no value for this component. - """ - warn_inputs_deprecation() - super().__init__(value=default, label=label, optional=optional) - - -class Slider(components.Slider): - """ - Component creates a slider that ranges from `minimum` to `maximum`. Provides number as an argument to the wrapped function. - Input type: float - """ - - def __init__( - self, - minimum: float = 0, - maximum: float = 100, - step: Optional[float] = None, - default: Optional[float] = None, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - minimum (float): minimum value for slider. - maximum (float): maximum value for slider. - step (float): increment between slider values. - default (float): default value. - label (str): component name in interface. - optional (bool): this parameter is ignored. - """ - warn_inputs_deprecation() - - super().__init__( - value=default, - minimum=minimum, - maximum=maximum, - step=step, - label=label, - optional=optional, - ) - - -class Checkbox(components.Checkbox): - """ - Component creates a checkbox that can be set to `True` or `False`. Provides a boolean as an argument to the wrapped function. - Input type: bool - """ - - def __init__( - self, - default: bool = False, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - label (str): component name in interface. - default (bool): if True, checked by default. - optional (bool): this parameter is ignored. - """ - warn_inputs_deprecation() - super().__init__(value=default, label=label, optional=optional) - - -class CheckboxGroup(components.CheckboxGroup): - """ - Component creates a set of checkboxes of which a subset can be selected. Provides a list of strings representing the selected choices as an argument to the wrapped function. - Input type: Union[List[str], List[int]] - """ - - def __init__( - self, - choices: list[str], - default: list[str] | None = None, - type: str = "value", - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - choices (List[str]): list of options to select from. - default (List[str]): default selected list of options. - type (str): Type of value to be returned by component. "value" returns the list of strings of the choices selected, "index" returns the list of indices of the choices selected. - label (str): component name in interface. - optional (bool): this parameter is ignored. - """ - if default is None: - default = [] - warn_inputs_deprecation() - super().__init__( - value=default, - choices=choices, - type=type, - label=label, - optional=optional, - ) - - -class Radio(components.Radio): - """ - Component creates a set of radio buttons of which only one can be selected. Provides string representing selected choice as an argument to the wrapped function. - Input type: Union[str, int] - """ - - def __init__( - self, - choices: list[str], - type: str = "value", - default: Optional[str] = None, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - choices (List[str]): list of options to select from. - type (str): Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected. - default (str): the button selected by default. If None, no button is selected by default. - label (str): component name in interface. - optional (bool): this parameter is ignored. - """ - warn_inputs_deprecation() - super().__init__( - choices=choices, - type=type, - value=default, - label=label, - optional=optional, - ) - - -class Dropdown(components.Dropdown): - """ - Component creates a dropdown of which only one can be selected. Provides string representing selected choice as an argument to the wrapped function. - Input type: Union[str, int] - """ - - def __init__( - self, - choices: list[str], - type: str = "value", - default: Optional[str] = None, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - choices (List[str]): list of options to select from. - type (str): Type of value to be returned by component. "value" returns the string of the choice selected, "index" returns the index of the choice selected. - default (str): default value selected in dropdown. If None, no value is selected by default. - label (str): component name in interface. - optional (bool): this parameter is ignored. - """ - warn_inputs_deprecation() - super().__init__( - choices=choices, - type=type, - value=default, - label=label, - optional=optional, - ) - - -class Image(components.Image): - """ - Component creates an image upload box with editing capabilities. - Input type: Union[numpy.array, PIL.Image, file-object] - """ - - def __init__( - self, - shape: tuple[int, int] = None, - image_mode: str = "RGB", - invert_colors: bool = False, - source: str = "upload", - tool: str = "editor", - type: str = "numpy", - label: str = None, - optional: bool = False, - ): - """ - Parameters: - shape (Tuple[int, int]): (width, height) shape to crop and resize image to; if None, matches input image size. - image_mode (str): How to process the uploaded image. Accepts any of the PIL image modes, e.g. "RGB" for color images, "RGBA" to include the transparency mask, "L" for black-and-white images. - invert_colors (bool): whether to invert the image as a preprocessing step. - source (str): Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools. - tool (str): Tools used for editing. "editor" allows a full screen editor, "select" provides a cropping and zoom tool. - type (str): Type of value to be returned by component. "numpy" returns a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" returns a PIL image object, "file" returns a temporary file object whose path can be retrieved by file_obj.name, "filepath" returns the path directly. - label (str): component name in interface. - optional (bool): If True, the interface can be submitted with no uploaded image, in which case the input value is None. - """ - warn_inputs_deprecation() - super().__init__( - shape=shape, - image_mode=image_mode, - invert_colors=invert_colors, - source=source, - tool=tool, - type=type, - label=label, - optional=optional, - ) - - -class Video(components.Video): - """ - Component creates a video file upload that is converted to a file path. - - Input type: filepath - """ - - def __init__( - self, - type: Optional[str] = None, - source: str = "upload", - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - type (str): Type of video format to be returned by component, such as 'avi' or 'mp4'. If set to None, video will keep uploaded format. - source (str): Source of video. "upload" creates a box where user can drop an video file, "webcam" allows user to record a video from their webcam. - label (str): component name in interface. - optional (bool): If True, the interface can be submitted with no uploaded video, in which case the input value is None. - """ - warn_inputs_deprecation() - super().__init__(format=type, source=source, label=label, optional=optional) - - -class Audio(components.Audio): - """ - Component accepts audio input files. - Input type: Union[Tuple[int, numpy.array], file-object, numpy.array] - """ - - def __init__( - self, - source: str = "upload", - type: str = "numpy", - label: str = None, - optional: bool = False, - ): - """ - Parameters: - source (str): Source of audio. "upload" creates a box where user can drop an audio file, "microphone" creates a microphone input. - type (str): Type of value to be returned by component. "numpy" returns a 2-set tuple with an integer sample_rate and the data numpy.array of shape (samples, 2), "file" returns a temporary file object whose path can be retrieved by file_obj.name, "filepath" returns the path directly. - label (str): component name in interface. - optional (bool): If True, the interface can be submitted with no uploaded audio, in which case the input value is None. - """ - warn_inputs_deprecation() - super().__init__(source=source, type=type, label=label, optional=optional) - - -class File(components.File): - """ - Component accepts generic file uploads. - Input type: Union[file-object, bytes, List[Union[file-object, bytes]]] - """ - - def __init__( - self, - file_count: str = "single", - type: str = "file", - label: Optional[str] = None, - keep_filename: bool = True, - optional: bool = False, - ): - """ - Parameters: - file_count (str): if single, allows user to upload one file. If "multiple", user uploads multiple files. If "directory", user uploads all files in selected directory. Return type will be list for each file in case of "multiple" or "directory". - type (str): Type of value to be returned by component. "file" returns a temporary file object whose path can be retrieved by file_obj.name, "binary" returns an bytes object. - label (str): component name in interface. - keep_filename (bool): DEPRECATED. Original filename always kept. - optional (bool): If True, the interface can be submitted with no uploaded image, in which case the input value is None. - """ - warn_inputs_deprecation() - super().__init__( - file_count=file_count, - type=type, - label=label, - keep_filename=keep_filename, - optional=optional, - ) - - -class Dataframe(components.Dataframe): - """ - Component accepts 2D input through a spreadsheet interface. - Input type: Union[pandas.DataFrame, numpy.array, List[Union[str, float]], List[List[Union[str, float]]]] - """ - - def __init__( - self, - headers: Optional[list[str]] = None, - row_count: int = 3, - col_count: Optional[int] = 3, - datatype: str | list[str] = "str", - col_width: int | list[int] = None, - default: Optional[list[list[Any]]] = None, - type: str = "pandas", - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - headers (List[str]): Header names to dataframe. If None, no headers are shown. - row_count (int): Limit number of rows for input. - col_count (int): Limit number of columns for input. If equal to 1, return data will be one-dimensional. Ignored if `headers` is provided. - datatype (Union[str, List[str]]): Datatype of values in sheet. Can be provided per column as a list of strings, or for the entire sheet as a single string. Valid datatypes are "str", "number", "bool", and "date". - col_width (Union[int, List[int]]): Width of columns in pixels. Can be provided as single value or list of values per column. - default (List[List[Any]]): Default value - type (str): Type of value to be returned by component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for a Python array. - label (str): component name in interface. - optional (bool): this parameter is ignored. - """ - warn_inputs_deprecation() - super().__init__( - value=default, - headers=headers, - row_count=row_count, - col_count=col_count, - datatype=datatype, - col_width=col_width, - type=type, - label=label, - optional=optional, - ) - - -class Timeseries(components.Timeseries): - """ - Component accepts pandas.DataFrame uploaded as a timeseries csv file. - Input type: pandas.DataFrame - """ - - def __init__( - self, - x: Optional[str] = None, - y: str | list[str] = None, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - x (str): Column name of x (time) series. None if csv has no headers, in which case first column is x series. - y (Union[str, List[str]]): Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series. - label (str): component name in interface. - optional (bool): If True, the interface can be submitted with no uploaded csv file, in which case the input value is None. - """ - warn_inputs_deprecation() - super().__init__(x=x, y=y, label=label, optional=optional) - - -class State(components.State): - """ - Special hidden component that stores state across runs of the interface. - Input type: Any - """ - - def __init__( - self, - label: str = None, - default: Any = None, - ): - """ - Parameters: - label (str): component name in interface (not used). - default (Any): the initial value of the state. - optional (bool): this parameter is ignored. - """ - warn_inputs_deprecation() - super().__init__(value=default, label=label) - - -class Image3D(components.Model3D): - """ - Used for 3D image model output. - Input type: File object of type (.obj, glb, or .gltf) - """ - - def __init__( - self, - label: Optional[str] = None, - optional: bool = False, - ): - """ - Parameters: - label (str): component name in interface. - optional (bool): If True, the interface can be submitted with no uploaded image, in which case the input value is None. - """ - warn_inputs_deprecation() - super().__init__(label=label, optional=optional) diff --git a/gradio/interface.py b/gradio/interface.py index c4534e35a197..1681b75d5620 100644 --- a/gradio/interface.py +++ b/gradio/interface.py @@ -13,21 +13,20 @@ from gradio_client.documentation import document, set_documentation_group -from gradio import Examples, external, interpretation, utils +from gradio import Examples, external, utils from gradio.blocks import Blocks from gradio.components import ( Button, ClearButton, + Component, DuplicateButton, - Interpretation, - IOComponent, Markdown, State, get_component_instance, ) from gradio.data_classes import InterfaceTypes from gradio.deprecation import warn_deprecation -from gradio.events import Changeable, Streamable, Submittable, on +from gradio.events import Events, on from gradio.exceptions import RenderError from gradio.flagging import CSVLogger, FlaggingCallback, FlagMethod from gradio.layouts import Column, Row, Tab, Tabs @@ -39,8 +38,6 @@ if TYPE_CHECKING: # Only import for type checking (is False at runtime). from transformers.pipelines.base import Pipeline - from gradio.events import EventListenerMethod - @document("launch", "load", "from_pipeline", "integrate", "queue") class Interface(Blocks): @@ -125,14 +122,12 @@ def from_pipeline(cls, pipeline: Pipeline, **kwargs) -> Interface: def __init__( self, fn: Callable, - inputs: str | IOComponent | list[str | IOComponent] | None, - outputs: str | IOComponent | list[str | IOComponent] | None, + inputs: str | Component | list[str | Component] | None, + outputs: str | Component | list[str | Component] | None, examples: list[Any] | list[list[Any]] | str | None = None, cache_examples: bool | None = None, examples_per_page: int = 10, live: bool = False, - interpretation: Callable | str | None = None, - num_shap: float = 2.0, title: str | None = None, description: str | None = None, article: str | None = None, @@ -142,7 +137,7 @@ def __init__( allow_flagging: str | None = None, flagging_options: list[str] | list[tuple[str, str]] | None = None, flagging_dir: str = "flagged", - flagging_callback: FlaggingCallback = CSVLogger(), + flagging_callback: FlaggingCallback | None = None, analytics_enabled: bool | None = None, batch: bool = False, max_batch_size: int = 4, @@ -160,8 +155,6 @@ def __init__( cache_examples: If True, caches examples in the server for fast runtime in examples. If `fn` is a generator function, then the last yielded value will be used as the output. The default option in HuggingFace Spaces is True. The default option elsewhere is False. examples_per_page: If examples are provided, how many to display per page. live: whether the interface should automatically rerun if any of the inputs change. - interpretation: function that provides interpretation explaining prediction output. Pass "default" to use simple built-in interpreter, "shap" to use a built-in shapley-based interpreter, or your own custom interpretation function. For more information on the different interpretation methods, see the Advanced Interface Features guide. - num_shap: a multiplier that determines how many examples are computed for shap-based interpretation. Increasing this value will increase shap runtime, but improve results. Only applies if interpretation is "shap". title: a title for the interface; if provided, appears above the input and output components in large font. Also used as the tab title when opened in a browser window. description: a description for the interface; if provided, appears above the input and output components and beneath the title in regular font. Accepts Markdown and HTML content. article: an expanded article explaining the interface; if provided, appears below the input and output components in regular font. Accepts Markdown and HTML content. @@ -205,8 +198,8 @@ def __init__( inputs = [] self.interface_type = InterfaceTypes.OUTPUT_ONLY - assert isinstance(inputs, (str, list, IOComponent)) - assert isinstance(outputs, (str, list, IOComponent)) + assert isinstance(inputs, (str, list, Component)) + assert isinstance(outputs, (str, list, Component)) if not isinstance(inputs, list): inputs = [inputs] @@ -258,7 +251,7 @@ def __init__( ] for component in self.input_components + self.output_components: - if not (isinstance(component, IOComponent)): + if not (isinstance(component, Component)): raise ValueError( f"{component} is not a valid input/output component for Interface." ) @@ -275,23 +268,11 @@ def __init__( InterfaceTypes.OUTPUT_ONLY, ]: for o in self.output_components: - assert isinstance(o, IOComponent) + assert isinstance(o, Component) if o.interactive is None: # Unless explicitly otherwise specified, force output components to # be non-interactive o.interactive = False - if ( - interpretation is None - or isinstance(interpretation, list) - or callable(interpretation) - ): - self.interpretation = interpretation - elif isinstance(interpretation, str): - self.interpretation = [ - interpretation.lower() for _ in self.input_components - ] - else: - raise ValueError("Invalid value for parameter: interpretation") self.api_mode = _api_mode self.fn = fn @@ -309,7 +290,6 @@ def __init__( self.thumbnail = thumbnail self.examples = examples - self.num_shap = num_shap self.examples_per_page = examples_per_page self.simple_server = None @@ -359,8 +339,11 @@ def __init__( "flagging_options must be a list of strings or list of (string, string) tuples." ) + if not flagging_callback: + flagging_callback = CSVLogger() self.flagging_callback = flagging_callback self.flagging_dir = flagging_dir + self.batch = batch self.max_batch_size = max_batch_size self.allow_duplication = allow_duplication @@ -380,11 +363,11 @@ def __init__( if utils.is_special_typed_parameter(param_name, param_types): param_names.remove(param_name) for component, param_name in zip(self.input_components, param_names): - assert isinstance(component, IOComponent) + assert isinstance(component, Component) if component.label is None: component.label = param_name for i, component in enumerate(self.output_components): - assert isinstance(component, IOComponent) + assert isinstance(component, Component) if component.label is None: if len(self.output_components) == 1: component.label = "output" @@ -415,7 +398,6 @@ def __init__( None, None, ) - interpretation_btn, interpretation_set = None, None input_component_column, interpret_component_column = None, None with Row(equal_height=False): @@ -430,8 +412,6 @@ def __init__( stop_btn, flag_btns, input_component_column, - interpret_component_column, - interpretation_set, ) = self.render_input_column() if self.interface_type in [ InterfaceTypes.STANDARD, @@ -443,7 +423,6 @@ def __init__( duplicate_btn, stop_btn_2_out, flag_btns_out, - interpretation_btn, ) = self.render_output_column(submit_btn) submit_btn = submit_btn or submit_btn_out clear_btn = clear_btn or clear_btn_2_out @@ -459,12 +438,6 @@ def __init__( ) if duplicate_btn is not None: duplicate_btn.activate() - self.attach_interpretation_events( - interpretation_btn, - interpretation_set, - input_component_column, - interpret_component_column, - ) self.attach_flagging_events(flag_btns, clear_btn) self.render_examples() @@ -491,23 +464,14 @@ def render_input_column( Button | None, list[Button] | None, Column, - Column | None, - list[Interpretation] | None, ]: submit_btn, clear_btn, stop_btn, flag_btns = None, None, None, None - interpret_component_column, interpretation_set = None, None with Column(variant="panel"): input_component_column = Column() with input_component_column: for component in self.input_components: component.render() - if self.interpretation: - interpret_component_column = Column(visible=False) - interpretation_set = [] - with interpret_component_column: - for component in self.input_components: - interpretation_set.append(Interpretation(component)) with Row(): if self.interface_type in [ InterfaceTypes.STANDARD, @@ -543,8 +507,6 @@ def render_input_column( stop_btn, flag_btns, input_component_column, - interpret_component_column, - interpretation_set, ) def render_output_column( @@ -553,14 +515,12 @@ def render_output_column( ) -> tuple[ Button | None, ClearButton | None, - DuplicateButton, + DuplicateButton | None, Button | None, list | None, - Button | None, ]: submit_btn = submit_btn_in - interpretation_btn, clear_btn, duplicate_btn, flag_btns, stop_btn = ( - None, + clear_btn, duplicate_btn, flag_btns, stop_btn = ( None, None, None, @@ -592,9 +552,6 @@ def render_output_column( raise RenderError("Submit button not rendered") flag_btns = [submit_btn] - if self.interpretation: - interpretation_btn = Button("Interpret") - if self.allow_duplication: duplicate_btn = DuplicateButton(scale=1, size="lg", _activate=False) @@ -604,7 +561,6 @@ def render_output_column( duplicate_btn, stop_btn, flag_btns, - interpretation_btn, ) def render_article(self): @@ -630,12 +586,12 @@ def attach_submit_events(self, submit_btn: Button | None, stop_btn: Button | Non max_batch_size=self.max_batch_size, ) else: - events: list[EventListenerMethod] = [] + events: list[Callable] = [] for component in self.input_components: - if isinstance(component, Streamable) and component.streaming: - events.append(component.stream) - elif isinstance(component, Changeable): - events.append(component.change) + if component.has_event("stream") and component.streaming: # type: ignore + events.append(component.stream) # type: ignore + elif component.has_event("change"): + events.append(component.change) # type: ignore on( events, self.fn, @@ -652,9 +608,9 @@ def attach_submit_events(self, submit_btn: Button | None, stop_btn: Button | Non extra_output = [] triggers = [submit_btn.click] + [ - component.submit + component.submit # type: ignore for component in self.input_components - if isinstance(component, Submittable) + if component.has_event(Events.submit) ] if stop_btn: @@ -697,6 +653,7 @@ def cleanup(): outputs=[submit_btn, stop_btn], cancels=predict_event, queue=False, + api_name=False, ) else: on( @@ -723,8 +680,7 @@ def attach_clear_events( None, [], ( - ([input_component_column] if input_component_column else []) - + ([interpret_component_column] if self.interpretation else []) + [input_component_column] if input_component_column else [] ), # type: ignore _js=f"""() => {json.dumps( ( @@ -737,26 +693,10 @@ def attach_clear_events( ] else [] ) - + ([{'variant': None, 'visible': False, '__type__': 'update'}] if self.interpretation else []) )} """, ) - def attach_interpretation_events( - self, - interpretation_btn: Button | None, - interpretation_set: list[Interpretation] | None, - input_component_column: Column | None, - interpret_component_column: Column | None, - ): - if interpretation_btn: - interpretation_btn.click( - self.interpret_func, - inputs=self.input_components + self.output_components, - outputs=(interpretation_set or []) + [input_component_column, interpret_component_column], # type: ignore - preprocess=False, - ) - def attach_flagging_events( self, flag_btns: list[Button] | None, clear_btn: ClearButton ): @@ -797,6 +737,7 @@ def attach_flagging_events( None, flag_btn, queue=False, + api_name=False, ) flag_btn.click( flag_method, @@ -804,12 +745,10 @@ def attach_flagging_events( outputs=flag_btn, preprocess=False, queue=False, + api_name=False, ) clear_btn.click( - flag_method.reset, - None, - flag_btn, - queue=False, + flag_method.reset, None, flag_btn, queue=False, api_name=False ) def render_examples(self): @@ -845,20 +784,6 @@ def __repr__(self): repr += f"\n|-{component}" return repr - async def interpret_func(self, *args): - return await self.interpret(list(args)) + [ - Column(visible=False), - Column(visible=True), - ] - - async def interpret(self, raw_input: list[Any]) -> list[Any]: - return [ - {"original": raw_value, "interpretation": interpretation} - for interpretation, raw_value in zip( - (await interpretation.run_interpret(self, raw_input))[0], raw_input - ) - ] - def test_launch(self) -> None: """ Deprecated. diff --git a/gradio/interpretation.py b/gradio/interpretation.py deleted file mode 100644 index 3731a9d38153..000000000000 --- a/gradio/interpretation.py +++ /dev/null @@ -1,329 +0,0 @@ -"""Contains classes and methods related to interpretation for components in Gradio.""" - -from __future__ import annotations - -import copy -import math -from abc import ABC, abstractmethod -from typing import TYPE_CHECKING, Any - -import numpy as np -from gradio_client import utils as client_utils - -from gradio import components - -if TYPE_CHECKING: # Only import for type checking (is False at runtime). - from gradio import Interface - - -class Interpretable(ABC): # noqa: B024 - def __init__(self) -> None: - self.set_interpret_parameters() - - def set_interpret_parameters(self): # noqa: B027 - """ - Set any parameters for interpretation. Properties can be set here to be - used in get_interpretation_neighbors and get_interpretation_scores. - """ - pass - - def get_interpretation_scores( - self, x: Any, neighbors: list[Any] | None, scores: list[float], **kwargs - ) -> list: - """ - Arrange the output values from the neighbors into interpretation scores for the interface to render. - Parameters: - x: Input to interface - neighbors: Neighboring values to input x used for interpretation. - scores: Output value corresponding to each neighbor in neighbors - Returns: - Arrangement of interpretation scores for interfaces to render. - """ - return scores - - -class TokenInterpretable(Interpretable, ABC): - @abstractmethod - def tokenize(self, x: Any) -> tuple[list, list, None]: - """ - Interprets an input data point x by splitting it into a list of tokens (e.g - a string into words or an image into super-pixels). - """ - return [], [], None - - @abstractmethod - def get_masked_inputs(self, tokens: list, binary_mask_matrix: list[list]) -> list: - return [] - - -class NeighborInterpretable(Interpretable, ABC): - @abstractmethod - def get_interpretation_neighbors(self, x: Any) -> tuple[list, dict]: - """ - Generates values similar to input to be used to interpret the significance of the input in the final output. - Parameters: - x: Input to interface - Returns: (neighbor_values, interpret_kwargs, interpret_by_removal) - neighbor_values: Neighboring values to input x to compute for interpretation - interpret_kwargs: Keyword arguments to be passed to get_interpretation_scores - """ - return [], {} - - -async def run_interpret(interface: Interface, raw_input: list): - """ - Runs the interpretation command for the machine learning model. Handles both the "default" out-of-the-box - interpretation for a certain set of UI component types, as well as the custom interpretation case. - Parameters: - raw_input: a list of raw inputs to apply the interpretation(s) on. - """ - if isinstance(interface.interpretation, list): # Either "default" or "shap" - processed_input = [ - input_component.preprocess(raw_input[i]) - for i, input_component in enumerate(interface.input_components) - ] - original_output = await interface.call_function(0, processed_input) - original_output = original_output["prediction"] - - if len(interface.output_components) == 1: - original_output = [original_output] - - scores, alternative_outputs = [], [] - - for i, (x, interp) in enumerate(zip(raw_input, interface.interpretation)): - if interp == "default": - input_component = interface.input_components[i] - neighbor_raw_input = list(raw_input) - if isinstance(input_component, TokenInterpretable): - tokens, neighbor_values, masks = input_component.tokenize(x) - interface_scores = [] - alternative_output = [] - for neighbor_input in neighbor_values: - neighbor_raw_input[i] = neighbor_input - processed_neighbor_input = [ - input_component.preprocess(neighbor_raw_input[i]) - for i, input_component in enumerate( - interface.input_components - ) - ] - - neighbor_output = await interface.call_function( - 0, processed_neighbor_input - ) - neighbor_output = neighbor_output["prediction"] - if len(interface.output_components) == 1: - neighbor_output = [neighbor_output] - processed_neighbor_output = [ - output_component.postprocess(neighbor_output[i]) - for i, output_component in enumerate( - interface.output_components - ) - ] - - alternative_output.append(processed_neighbor_output) - interface_scores.append( - quantify_difference_in_label( - interface, original_output, neighbor_output - ) - ) - alternative_outputs.append(alternative_output) - scores.append( - input_component.get_interpretation_scores( - raw_input[i], - neighbor_values, - interface_scores, - masks=masks, - tokens=tokens, - ) - ) - elif isinstance(input_component, NeighborInterpretable): - ( - neighbor_values, - interpret_kwargs, - ) = input_component.get_interpretation_neighbors( - x - ) # type: ignore - interface_scores = [] - alternative_output = [] - for neighbor_input in neighbor_values: - neighbor_raw_input[i] = neighbor_input - processed_neighbor_input = [ - input_component.preprocess(neighbor_raw_input[i]) - for i, input_component in enumerate( - interface.input_components - ) - ] - neighbor_output = await interface.call_function( - 0, processed_neighbor_input - ) - neighbor_output = neighbor_output["prediction"] - if len(interface.output_components) == 1: - neighbor_output = [neighbor_output] - processed_neighbor_output = [ - output_component.postprocess(neighbor_output[i]) - for i, output_component in enumerate( - interface.output_components - ) - ] - - alternative_output.append(processed_neighbor_output) - interface_scores.append( - quantify_difference_in_label( - interface, original_output, neighbor_output - ) - ) - alternative_outputs.append(alternative_output) - interface_scores = [-score for score in interface_scores] - scores.append( - input_component.get_interpretation_scores( - raw_input[i], - neighbor_values, - interface_scores, - **interpret_kwargs, - ) - ) - else: - raise ValueError( - f"Component {input_component} does not support interpretation" - ) - elif interp == "shap" or interp == "shapley": - try: - import shap # type: ignore - except (ImportError, ModuleNotFoundError) as err: - raise ValueError( - "The package `shap` is required for this interpretation method. Try: `pip install shap`" - ) from err - input_component = interface.input_components[i] - if not isinstance(input_component, TokenInterpretable): - raise ValueError( - f"Input component {input_component} does not support `shap` interpretation" - ) - - tokens, _, masks = input_component.tokenize(x) - - # construct a masked version of the input - def get_masked_prediction(binary_mask): - assert isinstance(input_component, TokenInterpretable) - masked_xs = input_component.get_masked_inputs(tokens, binary_mask) - preds = [] - for masked_x in masked_xs: - processed_masked_input = copy.deepcopy(processed_input) - processed_masked_input[i] = input_component.preprocess(masked_x) - new_output = client_utils.synchronize_async( - interface.call_function, 0, processed_masked_input - ) - new_output = new_output["prediction"] - if len(interface.output_components) == 1: - new_output = [new_output] - pred = get_regression_or_classification_value( - interface, original_output, new_output - ) - preds.append(pred) - return np.array(preds) - - num_total_segments = len(tokens) - explainer = shap.KernelExplainer( - get_masked_prediction, np.zeros((1, num_total_segments)) - ) - shap_values = explainer.shap_values( - np.ones((1, num_total_segments)), - nsamples=int(interface.num_shap * num_total_segments), - silent=True, - ) - if shap_values is None: - raise ValueError("SHAP values could not be calculated") - scores.append( - input_component.get_interpretation_scores( - raw_input[i], - None, - shap_values[0].tolist(), - masks=masks, - tokens=tokens, - ) - ) - alternative_outputs.append([]) - elif interp is None: - scores.append(None) - alternative_outputs.append([]) - else: - raise ValueError(f"Unknown interpretation method: {interp}") - return scores, alternative_outputs - elif interface.interpretation: # custom interpretation function - processed_input = [ - input_component.preprocess(raw_input[i]) - for i, input_component in enumerate(interface.input_components) - ] - interpreter = interface.interpretation - interpretation = interpreter(*processed_input) - if len(raw_input) == 1: - interpretation = [interpretation] - return interpretation, [] - else: - raise ValueError("No interpretation method specified.") - - -def diff(original: Any, perturbed: Any) -> int | float: - try: # try computing numerical difference - score = float(original) - float(perturbed) - except ValueError: # otherwise, look at strict difference in label - score = int(original != perturbed) - return score - - -def quantify_difference_in_label( - interface: Interface, original_output: list, perturbed_output: list -) -> int | float: - output_component = interface.output_components[0] - post_original_output = output_component.postprocess(original_output[0]) - post_perturbed_output = output_component.postprocess(perturbed_output[0]) - - if isinstance(output_component, components.Label): - original_label = post_original_output["label"] - perturbed_label = post_perturbed_output["label"] - - # Handle different return types of Label interface - if "confidences" in post_original_output: - original_confidence = original_output[0][original_label] - perturbed_confidence = perturbed_output[0][original_label] - score = original_confidence - perturbed_confidence - else: - score = diff(original_label, perturbed_label) - return score - - elif isinstance(output_component, components.Number): - score = diff(post_original_output, post_perturbed_output) - return score - - else: - raise ValueError( - f"This interpretation method doesn't support the Output component: {output_component}" - ) - - -def get_regression_or_classification_value( - interface: Interface, original_output: list, perturbed_output: list -) -> int | float: - """Used to combine regression/classification for Shap interpretation method.""" - output_component = interface.output_components[0] - post_original_output = output_component.postprocess(original_output[0]) - post_perturbed_output = output_component.postprocess(perturbed_output[0]) - - if isinstance(output_component, components.Label): - original_label = post_original_output["label"] - perturbed_label = post_perturbed_output["label"] - - # Handle different return types of Label interface - if "confidences" in post_original_output: - if math.isnan(perturbed_output[0][original_label]): - return 0 - return perturbed_output[0][original_label] - else: - score = diff( - perturbed_label, original_label - ) # Intentionally inverted order of arguments. - return score - - else: - raise ValueError( - f"This interpretation method doesn't support the Output component: {output_component}" - ) diff --git a/gradio/layouts.py b/gradio/layouts.py deleted file mode 100644 index f4d4374aca36..000000000000 --- a/gradio/layouts.py +++ /dev/null @@ -1,373 +0,0 @@ -from __future__ import annotations - -import warnings -from typing import TYPE_CHECKING, Literal - -from gradio_client.documentation import document, set_documentation_group - -from gradio.blocks import BlockContext, Updateable -from gradio.deprecation import warn_deprecation, warn_style_method_deprecation -from gradio.events import Changeable, Selectable - -if TYPE_CHECKING: - from gradio.blocks import Block - -set_documentation_group("layout") - - -@document() -class Row(Updateable, BlockContext): - """ - Row is a layout element within Blocks that renders all children horizontally. - Example: - with gr.Blocks() as demo: - with gr.Row(): - gr.Image("lion.jpg", scale=2) - gr.Image("tiger.jpg", scale=1) - demo.launch() - Guides: controlling-layout - """ - - def __init__( - self, - *, - variant: Literal["default", "panel", "compact"] = "default", - visible: bool = True, - elem_id: str | None = None, - elem_classes: list[str] | str | None = None, - equal_height: bool = True, - **kwargs, - ): - """ - Parameters: - variant: row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap). - visible: If False, row will be hidden. - elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. - elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles. - equal_height: If True, makes every child element have equal height - """ - self.variant = variant - self.equal_height = equal_height - if variant == "compact": - self.allow_expected_parents = False - BlockContext.__init__( - self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs - ) - - @staticmethod - def update( - visible: bool | None = None, - ): - return { - "visible": visible, - "__type__": "update", - } - - def style( - self, - *, - equal_height: bool | None = None, - **kwargs, - ): - """ - Styles the Row. - Parameters: - equal_height: If True, makes every child element have equal height - """ - warn_style_method_deprecation() - if equal_height is not None: - self.equal_height = equal_height - return self - - -@document() -class Column(Updateable, BlockContext): - """ - Column is a layout element within Blocks that renders all children vertically. The widths of columns can be set through the `scale` and `min_width` parameters. - If a certain scale results in a column narrower than min_width, the min_width parameter will win. - Example: - with gr.Blocks() as demo: - with gr.Row(): - with gr.Column(scale=1): - text1 = gr.Textbox() - text2 = gr.Textbox() - with gr.Column(scale=4): - btn1 = gr.Button("Button 1") - btn2 = gr.Button("Button 2") - Guides: controlling-layout - """ - - def __init__( - self, - *, - scale: int = 1, - min_width: int = 320, - variant: Literal["default", "panel", "compact"] = "default", - visible: bool = True, - elem_id: str | None = None, - elem_classes: list[str] | str | None = None, - **kwargs, - ): - """ - Parameters: - scale: relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B. - min_width: minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first. - variant: column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap). - visible: If False, column will be hidden. - elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. - elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles. - """ - if scale != round(scale): - warn_deprecation( - f"'scale' value should be an integer. Using {scale} will cause issues." - ) - - self.scale = scale - self.min_width = min_width - self.variant = variant - if variant == "compact": - self.allow_expected_parents = False - BlockContext.__init__( - self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs - ) - - @staticmethod - def update( - variant: str | None = None, - visible: bool | None = None, - ): - return { - "variant": variant, - "visible": visible, - "__type__": "update", - } - - -class Tabs(Updateable, BlockContext, Changeable, Selectable): - """ - Tabs is a layout element within Blocks that can contain multiple "Tab" Components. - """ - - def __init__( - self, - *, - selected: int | str | None = None, - visible: bool = True, - elem_id: str | None = None, - elem_classes: list[str] | str | None = None, - **kwargs, - ): - """ - Parameters: - selected: The currently selected tab. Must correspond to an id passed to the one of the child TabItems. Defaults to the first TabItem. - visible: If False, Tabs will be hidden. - elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles. - elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles. - """ - BlockContext.__init__( - self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs - ) - Changeable.__init__(self) - Selectable.__init__(self) - self.selected = selected - - @staticmethod - def update( - selected: int | str | None = None, - ): - return { - "selected": selected, - "__type__": "update", - } - - -@document() -class Tab(Updateable, BlockContext, Selectable): - """ - Tab (or its alias TabItem) is a layout element. Components defined within the Tab will be visible when this tab is selected tab. - Example: - with gr.Blocks() as demo: - with gr.Tab("Lion"): - gr.Image("lion.jpg") - gr.Button("New Lion") - with gr.Tab("Tiger"): - gr.Image("tiger.jpg") - gr.Button("New Tiger") - Guides: controlling-layout - """ - - def __init__( - self, - label: str, - *, - id: int | str | None = None, - elem_id: str | None = None, - elem_classes: list[str] | str | None = None, - **kwargs, - ): - """ - Parameters: - label: The visual label for the tab - id: An optional identifier for the tab, required if you wish to control the selected tab from a predict function. - elem_id: An optional string that is assigned as the id of the containing the contents of the Tab layout. The same string followed by "-button" is attached to the Tab button. Can be used for targeting CSS styles.
- elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
- """
- BlockContext.__init__(
- self, elem_id=elem_id, elem_classes=elem_classes, **kwargs
- )
- Selectable.__init__(self)
- self.label = label
- self.id = id
-
- def get_expected_parent(self) -> type[Tabs]:
- return Tabs
-
- def get_block_name(self):
- return "tabitem"
-
-
-TabItem = Tab
-
-
-@document()
-class Group(Updateable, BlockContext):
- """
- Group is a layout element within Blocks which groups together children so that
- they do not have any padding or margin between them.
- Example:
- with gr.Group():
- gr.Textbox(label="First")
- gr.Textbox(label="Last")
- """
-
- def __init__(
- self,
- *,
- visible: bool = True,
- elem_id: str | None = None,
- elem_classes: list[str] | str | None = None,
- **kwargs,
- ):
- """
- Parameters:
- visible: If False, group will be hidden.
- elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
- elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
- """
- BlockContext.__init__(
- self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
- )
-
- @staticmethod
- def update(
- visible: bool | None = None,
- ):
- return {
- "visible": visible,
- "__type__": "update",
- }
-
-
-class Box(Updateable, BlockContext):
- """
- DEPRECATED.
- Box is a a layout element which places children in a box with rounded corners and
- some padding around them.
- Example:
- with gr.Box():
- gr.Textbox(label="First")
- gr.Textbox(label="Last")
- """
-
- def __init__(
- self,
- *,
- visible: bool = True,
- elem_id: str | None = None,
- **kwargs,
- ):
- """
- Parameters:
- visible: If False, box will be hidden.
- elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
- """
- warnings.warn("gr.Box is deprecated. Use gr.Group instead.", DeprecationWarning)
- BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
-
- @staticmethod
- def update(
- visible: bool | None = None,
- ):
- return {
- "visible": visible,
- "__type__": "update",
- }
-
- def style(self, **kwargs):
- warn_style_method_deprecation()
- return self
-
-
-class Form(Updateable, BlockContext):
- def __init__(self, *, scale: int = 0, min_width: int = 0, **kwargs):
- """
- Parameters:
- scale: relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.
- min_width: minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.
- """
- self.scale = scale
- self.min_width = min_width
- BlockContext.__init__(self, **kwargs)
-
- def add_child(self, child: Block):
- if isinstance(self.parent, Row):
- scale = getattr(child, "scale", None)
- self.scale += 1 if scale is None else scale
- self.min_width += getattr(child, "min_width", 0) or 0
- BlockContext.add_child(self, child)
-
-
-@document()
-class Accordion(Updateable, BlockContext):
- """
- Accordion is a layout element which can be toggled to show/hide the contained content.
- Example:
- with gr.Accordion("See Details"):
- gr.Markdown("lorem ipsum")
- """
-
- def __init__(
- self,
- label,
- *,
- open: bool = True,
- visible: bool = True,
- elem_id: str | None = None,
- elem_classes: list[str] | str | None = None,
- **kwargs,
- ):
- """
- Parameters:
- label: name of accordion section.
- open: if True, accordion is open by default.
- elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
- elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
- """
- self.label = label
- self.open = open
- BlockContext.__init__(
- self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
- )
-
- @staticmethod
- def update(
- open: bool | None = None,
- label: str | None = None,
- visible: bool | None = None,
- ):
- return {
- "visible": visible,
- "label": label,
- "open": open,
- "__type__": "update",
- }
diff --git a/gradio/layouts/__init__.py b/gradio/layouts/__init__.py
new file mode 100644
index 000000000000..f57d339cceac
--- /dev/null
+++ b/gradio/layouts/__init__.py
@@ -0,0 +1,19 @@
+from .accordion import Accordion
+from .box import Box
+from .column import Column
+from .form import Form
+from .group import Group
+from .row import Row
+from .tabs import Tab, TabItem, Tabs
+
+__all__ = [
+ "Accordion",
+ "Box",
+ "Column",
+ "Form",
+ "Row",
+ "Group",
+ "Tabs",
+ "Tab",
+ "TabItem",
+]
diff --git a/gradio/layouts/accordion.py b/gradio/layouts/accordion.py
new file mode 100644
index 000000000000..23f7d6003349
--- /dev/null
+++ b/gradio/layouts/accordion.py
@@ -0,0 +1,61 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+
+if TYPE_CHECKING:
+ pass
+
+set_documentation_group("layout")
+
+
+@document()
+class Accordion(BlockContext, metaclass=ComponentMeta):
+ """
+ Accordion is a layout element which can be toggled to show/hide the contained content.
+ Example:
+ with gr.Accordion("See Details"):
+ gr.Markdown("lorem ipsum")
+ """
+
+ EVENTS = []
+
+ def __init__(
+ self,
+ label,
+ *,
+ open: bool = True,
+ visible: bool = True,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ label: name of accordion section.
+ open: if True, accordion is open by default.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+ """
+ self.label = label
+ self.open = open
+ BlockContext.__init__(
+ self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+ )
+
+ @staticmethod
+ def update(
+ open: bool | None = None,
+ label: str | None = None,
+ visible: bool | None = None,
+ ):
+ return {
+ "visible": visible,
+ "label": label,
+ "open": open,
+ "__type__": "update",
+ }
diff --git a/gradio/layouts/box.py b/gradio/layouts/box.py
new file mode 100644
index 000000000000..af0f62425daa
--- /dev/null
+++ b/gradio/layouts/box.py
@@ -0,0 +1,49 @@
+from __future__ import annotations
+
+import warnings
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.deprecation import warn_style_method_deprecation
+
+
+class Box(BlockContext, metaclass=ComponentMeta):
+ """
+ DEPRECATED.
+ Box is a a layout element which places children in a box with rounded corners and
+ some padding around them.
+ Example:
+ with gr.Box():
+ gr.Textbox(label="First")
+ gr.Textbox(label="Last")
+ """
+
+ EVENTS = []
+
+ def __init__(
+ self,
+ *,
+ visible: bool = True,
+ elem_id: str | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ visible: If False, box will be hidden.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ """
+ warnings.warn("gr.Box is deprecated. Use gr.Group instead.", DeprecationWarning)
+ BlockContext.__init__(self, visible=visible, elem_id=elem_id, **kwargs)
+
+ @staticmethod
+ def update(
+ visible: bool | None = None,
+ ):
+ return {
+ "visible": visible,
+ "__type__": "update",
+ }
+
+ def style(self, **kwargs):
+ warn_style_method_deprecation()
+ return self
diff --git a/gradio/layouts/column.py b/gradio/layouts/column.py
new file mode 100644
index 000000000000..d06be4863f60
--- /dev/null
+++ b/gradio/layouts/column.py
@@ -0,0 +1,76 @@
+from __future__ import annotations
+
+from typing import Literal
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.deprecation import warn_deprecation
+
+set_documentation_group("layout")
+
+
+@document()
+class Column(BlockContext, metaclass=ComponentMeta):
+ """
+ Column is a layout element within Blocks that renders all children vertically. The widths of columns can be set through the `scale` and `min_width` parameters.
+ If a certain scale results in a column narrower than min_width, the min_width parameter will win.
+ Example:
+ with gr.Blocks() as demo:
+ with gr.Row():
+ with gr.Column(scale=1):
+ text1 = gr.Textbox()
+ text2 = gr.Textbox()
+ with gr.Column(scale=4):
+ btn1 = gr.Button("Button 1")
+ btn2 = gr.Button("Button 2")
+ Guides: controlling-layout
+ """
+
+ EVENTS = ["baz"]
+
+ def __init__(
+ self,
+ *,
+ scale: int = 1,
+ min_width: int = 320,
+ variant: Literal["default", "panel", "compact"] = "default",
+ visible: bool = True,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ scale: relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.
+ min_width: minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.
+ variant: column type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
+ visible: If False, column will be hidden.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+ """
+ if scale != round(scale):
+ warn_deprecation(
+ f"'scale' value should be an integer. Using {scale} will cause issues."
+ )
+
+ self.scale = scale
+ self.min_width = min_width
+ self.variant = variant
+ if variant == "compact":
+ self.allow_expected_parents = False
+ BlockContext.__init__(
+ self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+ )
+
+ @staticmethod
+ def update(
+ variant: str | None = None,
+ visible: bool | None = None,
+ ):
+ return {
+ "variant": variant,
+ "visible": visible,
+ "__type__": "update",
+ }
diff --git a/gradio/layouts/form.py b/gradio/layouts/form.py
new file mode 100644
index 000000000000..f998ff3c4013
--- /dev/null
+++ b/gradio/layouts/form.py
@@ -0,0 +1,35 @@
+from __future__ import annotations
+
+from typing import TYPE_CHECKING
+
+from gradio_client.documentation import set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.layouts.row import Row
+
+if TYPE_CHECKING:
+ from gradio.blocks import Block
+
+set_documentation_group("layout")
+
+
+class Form(BlockContext, metaclass=ComponentMeta):
+ EVENTS = []
+
+ def __init__(self, *, scale: int = 0, min_width: int = 0, **kwargs):
+ """
+ Parameters:
+ scale: relative width compared to adjacent Columns. For example, if Column A has scale=2, and Column B has scale=1, A will be twice as wide as B.
+ min_width: minimum pixel width of Column, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in a column narrower than min_width, the min_width parameter will be respected first.
+ """
+ self.scale = scale
+ self.min_width = min_width
+ BlockContext.__init__(self, **kwargs)
+
+ def add_child(self, child: Block):
+ if isinstance(self.parent, Row):
+ scale = getattr(child, "scale", None)
+ self.scale += 1 if scale is None else scale
+ self.min_width += getattr(child, "min_width", 0) or 0
+ BlockContext.add_child(self, child)
diff --git a/gradio/layouts/group.py b/gradio/layouts/group.py
new file mode 100644
index 000000000000..4237cf769fd4
--- /dev/null
+++ b/gradio/layouts/group.py
@@ -0,0 +1,49 @@
+from __future__ import annotations
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+
+set_documentation_group("layout")
+
+
+@document()
+class Group(BlockContext, metaclass=ComponentMeta):
+ """
+ Group is a layout element within Blocks which groups together children so that
+ they do not have any padding or margin between them.
+ Example:
+ with gr.Group():
+ gr.Textbox(label="First")
+ gr.Textbox(label="Last")
+ """
+
+ EVENTS = []
+
+ def __init__(
+ self,
+ *,
+ visible: bool = True,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ visible: If False, group will be hidden.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+ """
+ BlockContext.__init__(
+ self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+ )
+
+ @staticmethod
+ def update(
+ visible: bool | None = None,
+ ):
+ return {
+ "visible": visible,
+ "__type__": "update",
+ }
diff --git a/gradio/layouts/row.py b/gradio/layouts/row.py
new file mode 100644
index 000000000000..8240be216184
--- /dev/null
+++ b/gradio/layouts/row.py
@@ -0,0 +1,78 @@
+from __future__ import annotations
+
+from typing import Literal
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.deprecation import warn_style_method_deprecation
+
+set_documentation_group("layout")
+
+
+@document()
+class Row(BlockContext, metaclass=ComponentMeta):
+ """
+ Row is a layout element within Blocks that renders all children horizontally.
+ Example:
+ with gr.Blocks() as demo:
+ with gr.Row():
+ gr.Image("lion.jpg", scale=2)
+ gr.Image("tiger.jpg", scale=1)
+ demo.launch()
+ Guides: controlling-layout
+ """
+
+ EVENTS = []
+
+ def __init__(
+ self,
+ *,
+ variant: Literal["default", "panel", "compact"] = "default",
+ visible: bool = True,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ equal_height: bool = True,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ variant: row type, 'default' (no background), 'panel' (gray background color and rounded corners), or 'compact' (rounded corners and no internal gap).
+ visible: If False, row will be hidden.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+ equal_height: If True, makes every child element have equal height
+ """
+ self.variant = variant
+ self.equal_height = equal_height
+ if variant == "compact":
+ self.allow_expected_parents = False
+ BlockContext.__init__(
+ self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+ )
+
+ @staticmethod
+ def update(
+ visible: bool | None = None,
+ ):
+ return {
+ "visible": visible,
+ "__type__": "update",
+ }
+
+ def style(
+ self,
+ *,
+ equal_height: bool | None = None,
+ **kwargs,
+ ):
+ """
+ Styles the Row.
+ Parameters:
+ equal_height: If True, makes every child element have equal height
+ """
+ warn_style_method_deprecation()
+ if equal_height is not None:
+ self.equal_height = equal_height
+ return self
diff --git a/gradio/layouts/tabs.py b/gradio/layouts/tabs.py
new file mode 100644
index 000000000000..1eb883873dde
--- /dev/null
+++ b/gradio/layouts/tabs.py
@@ -0,0 +1,96 @@
+from __future__ import annotations
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.blocks import BlockContext
+from gradio.component_meta import ComponentMeta
+from gradio.events import Events
+
+set_documentation_group("layout")
+
+
+class Tabs(BlockContext, metaclass=ComponentMeta):
+ """
+ Tabs is a layout element within Blocks that can contain multiple "Tab" Components.
+ """
+
+ EVENTS = [Events.change, Events.select]
+
+ def __init__(
+ self,
+ *,
+ selected: int | str | None = None,
+ visible: bool = True,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ selected: The currently selected tab. Must correspond to an id passed to the one of the child TabItems. Defaults to the first TabItem.
+ visible: If False, Tabs will be hidden.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+ """
+ BlockContext.__init__(
+ self, visible=visible, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+ )
+ self.selected = selected
+
+ @staticmethod
+ def update(
+ selected: int | str | None = None,
+ ):
+ return {
+ "selected": selected,
+ "__type__": "update",
+ }
+
+
+@document()
+class Tab(BlockContext, metaclass=ComponentMeta):
+ """
+ Tab (or its alias TabItem) is a layout element. Components defined within the Tab will be visible when this tab is selected tab.
+ Example:
+ with gr.Blocks() as demo:
+ with gr.Tab("Lion"):
+ gr.Image("lion.jpg")
+ gr.Button("New Lion")
+ with gr.Tab("Tiger"):
+ gr.Image("tiger.jpg")
+ gr.Button("New Tiger")
+ Guides: controlling-layout
+ """
+
+ EVENTS = [Events.select]
+
+ def __init__(
+ self,
+ label: str,
+ *,
+ id: int | str | None = None,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ label: The visual label for the tab
+ id: An optional identifier for the tab, required if you wish to control the selected tab from a predict function.
+ elem_id: An optional string that is assigned as the id of the
containing the contents of the Tab layout. The same string followed by "-button" is attached to the Tab button. Can be used for targeting CSS styles.
+ elem_classes: An optional string or list of strings that are assigned as the class of this component in the HTML DOM. Can be used for targeting CSS styles.
+ """
+ BlockContext.__init__(
+ self, elem_id=elem_id, elem_classes=elem_classes, **kwargs
+ )
+ self.label = label
+ self.id = id
+
+ def get_expected_parent(self) -> type[Tabs]:
+ return Tabs
+
+ def get_block_name(self):
+ return "tabitem"
+
+
+TabItem = Tab
diff --git a/gradio/oauth.py b/gradio/oauth.py
index ccb63a79b758..78053a9dee89 100644
--- a/gradio/oauth.py
+++ b/gradio/oauth.py
@@ -86,12 +86,12 @@ async def oauth_login(request: fastapi.Request):
if ".hf.space" in redirect_uri:
# In Space, FastAPI redirect as http but we want https
redirect_uri = redirect_uri.replace("http://", "https://")
- return await oauth.huggingface.authorize_redirect(request, redirect_uri)
+ return await oauth.huggingface.authorize_redirect(request, redirect_uri) # type: ignore
@app.get("/login/callback")
async def oauth_redirect_callback(request: fastapi.Request) -> RedirectResponse:
"""Endpoint that handles the OAuth callback."""
- token = await oauth.huggingface.authorize_access_token(request)
+ token = await oauth.huggingface.authorize_access_token(request) # type: ignore
request.session["oauth_profile"] = token["userinfo"]
request.session["oauth_token"] = token
return RedirectResponse("/")
diff --git a/gradio/outputs.py b/gradio/outputs.py
deleted file mode 100644
index b6d2d20c8f5e..000000000000
--- a/gradio/outputs.py
+++ /dev/null
@@ -1,313 +0,0 @@
-# type: ignore
-"""
-This module defines various classes that can serve as the `output` to an interface. Each class must inherit from
-`OutputComponent`, and each class must define a path to its template. All of the subclasses of `OutputComponent` are
-automatically added to a registry, which allows them to be easily referenced in other parts of the code.
-"""
-
-from __future__ import annotations
-
-from typing import Optional
-
-from gradio import components
-from gradio.deprecation import warn_deprecation
-
-
-def warn_outputs_deprecation():
- warn_deprecation(
- "Usage of gradio.outputs is deprecated, and will not be supported in the future, "
- "please import your components from gradio.components",
- )
-
-
-class Textbox(components.Textbox):
- def __init__(
- self,
- type: str = "text",
- label: Optional[str] = None,
- ):
- warn_outputs_deprecation()
- super().__init__(label=label, type=type)
-
-
-class Image(components.Image):
- """
- Component displays an output image.
- Output type: Union[numpy.array, PIL.Image, str, matplotlib.pyplot, Tuple[Union[numpy.array, PIL.Image, str], List[Tuple[str, float, float, float, float]]]]
- """
-
- def __init__(
- self, type: str = "auto", plot: bool = False, label: Optional[str] = None
- ):
- """
- Parameters:
- type (str): Type of value to be passed to component. "numpy" expects a numpy array with shape (height, width, 3), "pil" expects a PIL image object, "file" expects a file path to the saved image or a remote URL, "plot" expects a matplotlib.pyplot object, "auto" detects return type.
- plot (bool): DEPRECATED. Whether to expect a plot to be returned by the function.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- if plot:
- type = "plot"
- super().__init__(type=type, label=label)
-
-
-class Video(components.Video):
- """
- Used for video output.
- Output type: filepath
- """
-
- def __init__(self, type: Optional[str] = None, label: Optional[str] = None):
- """
- Parameters:
- type (str): Type of video format to be passed to component, such as 'avi' or 'mp4'. Use 'mp4' to ensure browser playability. If set to None, video will keep returned format.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(format=type, label=label)
-
-
-class Audio(components.Audio):
- """
- Creates an audio player that plays the output audio.
- Output type: Union[Tuple[int, numpy.array], str]
- """
-
- def __init__(self, type: str = "auto", label: Optional[str] = None):
- """
- Parameters:
- type (str): Type of value to be passed to component. "numpy" returns a 2-set tuple with an integer sample_rate and the data as 16-bit int numpy.array of shape (samples, 2), "file" returns a temporary file path to the saved wav audio file, "auto" detects return type.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(type=type, label=label)
-
-
-class File(components.File):
- """
- Used for file output.
- Output type: Union[file-like, str]
- """
-
- def __init__(self, label: Optional[str] = None):
- """
- Parameters:
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(label=label)
-
-
-class Dataframe(components.Dataframe):
- """
- Component displays 2D output through a spreadsheet interface.
- Output type: Union[pandas.DataFrame, numpy.array, List[Union[str, float]], List[List[Union[str, float]]]]
- """
-
- def __init__(
- self,
- headers: Optional[list[str]] = None,
- max_rows: Optional[int] = 20,
- max_cols: Optional[int] = None,
- overflow_row_behaviour: str = "paginate",
- type: str = "auto",
- label: Optional[str] = None,
- ):
- """
- Parameters:
- headers (List[str]): Header names to dataframe. Only applicable if type is "numpy" or "array".
- max_rows (int): Maximum number of rows to display at once. Set to None for infinite.
- max_cols (int): Maximum number of columns to display at once. Set to None for infinite.
- overflow_row_behaviour (str): If set to "paginate", will create pages for overflow rows. If set to "show_ends", will show initial and final rows and truncate middle rows.
- type (str): Type of value to be passed to component. "pandas" for pandas dataframe, "numpy" for numpy array, or "array" for Python array, "auto" detects return type.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(
- headers=headers,
- type=type,
- label=label,
- max_rows=max_rows,
- max_cols=max_cols,
- overflow_row_behaviour=overflow_row_behaviour,
- )
-
-
-class Timeseries(components.Timeseries):
- """
- Component accepts pandas.DataFrame.
- Output type: pandas.DataFrame
- """
-
- def __init__(
- self, x: str = None, y: str | list[str] = None, label: Optional[str] = None
- ):
- """
- Parameters:
- x (str): Column name of x (time) series. None if csv has no headers, in which case first column is x series.
- y (Union[str, List[str]]): Column name of y series, or list of column names if multiple series. None if csv has no headers, in which case every column after first is a y series.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(x=x, y=y, label=label)
-
-
-class State(components.State):
- """
- Special hidden component that stores state across runs of the interface.
- Output type: Any
- """
-
- def __init__(self, label: Optional[str] = None):
- """
- Parameters:
- label (str): component name in interface (not used).
- """
- warn_outputs_deprecation()
- super().__init__(label=label)
-
-
-class Label(components.Label):
- """
- Component outputs a classification label, along with confidence scores of top categories if provided. Confidence scores are represented as a dictionary mapping labels to scores between 0 and 1.
- Output type: Union[Dict[str, float], str, int, float]
- """
-
- def __init__(
- self,
- num_top_classes: Optional[int] = None,
- type: str = "auto",
- label: Optional[str] = None,
- ):
- """
- Parameters:
- num_top_classes (int): number of most confident classes to show.
- type (str): Type of value to be passed to component. "value" expects a single out label, "confidences" expects a dictionary mapping labels to confidence scores, "auto" detects return type.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(num_top_classes=num_top_classes, type=type, label=label)
-
-
-class KeyValues:
- """
- Component displays a table representing values for multiple fields.
- Output type: Union[Dict, List[Tuple[str, Union[str, int, float]]]]
- """
-
- def __init__(self, value: str = " ", *, label: Optional[str] = None, **kwargs):
- """
- Parameters:
- value (str): IGNORED
- label (str): component name in interface.
- """
- raise DeprecationWarning(
- "The KeyValues component is deprecated. Please use the DataFrame or JSON "
- "components instead."
- )
-
-
-class HighlightedText(components.HighlightedText):
- """
- Component creates text that contains spans that are highlighted by category or numerical value.
- Output is represent as a list of Tuple pairs, where the first element represents the span of text represented by the tuple, and the second element represents the category or value of the text.
- Output type: List[Tuple[str, Union[float, str]]]
- """
-
- def __init__(
- self,
- color_map: dict[str, str] = None,
- label: Optional[str] = None,
- show_legend: bool = False,
- ):
- """
- Parameters:
- color_map (Dict[str, str]): Map between category and respective colors
- label (str): component name in interface.
- show_legend (bool): whether to show span categories in a separate legend or inline.
- """
- warn_outputs_deprecation()
- super().__init__(color_map=color_map, label=label, show_legend=show_legend)
-
-
-class JSON(components.JSON):
- """
- Used for JSON output. Expects a JSON string or a Python object that is JSON serializable.
- Output type: Union[str, Any]
- """
-
- def __init__(self, label: Optional[str] = None):
- """
- Parameters:
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(label=label)
-
-
-class HTML(components.HTML):
- """
- Used for HTML output. Expects an HTML valid string.
- Output type: str
- """
-
- def __init__(self, label: Optional[str] = None):
- """
- Parameters:
- label (str): component name in interface.
- """
- super().__init__(label=label)
-
-
-class Carousel(components.Carousel):
- """
- Component displays a set of output components that can be scrolled through.
- """
-
- def __init__(
- self,
- components: components.Component | list[components.Component],
- label: Optional[str] = None,
- ):
- """
- Parameters:
- components (Union[List[Component], Component]): Classes of component(s) that will be scrolled through.
- label (str): component name in interface.
- """
- warn_outputs_deprecation()
- super().__init__(components=components, label=label)
-
-
-class Chatbot(components.Chatbot):
- """
- Component displays a chatbot output showing both user submitted messages and responses
- Output type: List[Tuple[str, str]]
- """
-
- def __init__(self, label: Optional[str] = None):
- """
- Parameters:
- label (str): component name in interface (not used).
- """
- warn_outputs_deprecation()
- super().__init__(label=label)
-
-
-class Image3D(components.Model3D):
- """
- Used for 3D image model output.
- Input type: File object of type (.obj, glb, or .gltf)
- """
-
- def __init__(
- self,
- clear_color=None,
- label: Optional[str] = None,
- ):
- """
- Parameters:
- label (str): component name in interface.
- optional (bool): If True, the interface can be submitted with no uploaded image, in which case the input value is None.
- """
- warn_outputs_deprecation()
- super().__init__(clear_color=clear_color, label=label)
diff --git a/gradio/package.json b/gradio/package.json
index f22c0f1faef2..f9788268fe32 100644
--- a/gradio/package.json
+++ b/gradio/package.json
@@ -1,6 +1,6 @@
{
"name": "gradio",
- "version": "3.47.1",
+ "version": "3.45.0-beta.11",
"description": "",
"python": "true"
}
diff --git a/gradio/processing_utils.py b/gradio/processing_utils.py
index d2fd6292cffd..342dd0b12fd8 100644
--- a/gradio/processing_utils.py
+++ b/gradio/processing_utils.py
@@ -1,25 +1,33 @@
from __future__ import annotations
import base64
+import hashlib
import json
import logging
import os
+import secrets
import shutil
import subprocess
import tempfile
+import urllib.request
import warnings
from io import BytesIO
from pathlib import Path
+from typing import TYPE_CHECKING, Any, Literal
+import aiofiles
+import anyio
import numpy as np
+import requests
+from anyio import CapacityLimiter
+from fastapi import UploadFile
from gradio_client import utils as client_utils
from PIL import Image, ImageOps, PngImagePlugin
from gradio import wasm_utils
+from gradio.data_classes import FileData
-if not wasm_utils.IS_WASM:
- # TODO: Support ffmpeg on Wasm
- from ffmpy import FFmpeg, FFprobe, FFRuntimeError
+from .utils import abspath, is_in_or_equal
with warnings.catch_warnings():
warnings.simplefilter("ignore") # Ignore pydub warning if ffmpeg is not installed
@@ -27,6 +35,9 @@
log = logging.getLogger(__name__)
+if TYPE_CHECKING:
+ from gradio.components.base import Component
+
#########################
# GENERAL
#########################
@@ -108,6 +119,217 @@ def encode_array_to_base64(image_array):
return "data:image/png;base64," + base64_str
+def hash_file(file_path: str | Path, chunk_num_blocks: int = 128) -> str:
+ sha1 = hashlib.sha1()
+ with open(file_path, "rb") as f:
+ for chunk in iter(lambda: f.read(chunk_num_blocks * sha1.block_size), b""):
+ sha1.update(chunk)
+ return sha1.hexdigest()
+
+
+def hash_url(url: str, chunk_num_blocks: int = 128) -> str:
+ sha1 = hashlib.sha1()
+ remote = urllib.request.urlopen(url)
+ max_file_size = 100 * 1024 * 1024 # 100MB
+ total_read = 0
+ while True:
+ data = remote.read(chunk_num_blocks * sha1.block_size)
+ total_read += chunk_num_blocks * sha1.block_size
+ if not data or total_read > max_file_size:
+ break
+ sha1.update(data)
+ return sha1.hexdigest()
+
+
+def hash_bytes(bytes: bytes):
+ sha1 = hashlib.sha1()
+ sha1.update(bytes)
+ return sha1.hexdigest()
+
+
+def hash_base64(base64_encoding: str, chunk_num_blocks: int = 128) -> str:
+ sha1 = hashlib.sha1()
+ for i in range(0, len(base64_encoding), chunk_num_blocks * sha1.block_size):
+ data = base64_encoding[i : i + chunk_num_blocks * sha1.block_size]
+ sha1.update(data.encode("utf-8"))
+ return sha1.hexdigest()
+
+
+def save_pil_to_cache(
+ img: Image.Image, cache_dir: str, format: Literal["png", "jpg"] = "png"
+) -> str:
+ bytes_data = encode_pil_to_bytes(img, format)
+ temp_dir = Path(cache_dir) / hash_bytes(bytes_data)
+ temp_dir.mkdir(exist_ok=True, parents=True)
+ filename = str((temp_dir / f"image.{format}").resolve())
+ img.save(filename, pnginfo=get_pil_metadata(img))
+ return filename
+
+
+def save_img_array_to_cache(
+ arr: np.ndarray, cache_dir: str, format: Literal["png", "jpg"] = "png"
+) -> str:
+ pil_image = Image.fromarray(_convert(arr, np.uint8, force_copy=False))
+ return save_pil_to_cache(pil_image, cache_dir, format=format)
+
+
+def save_audio_to_cache(
+ data: np.ndarray, sample_rate: int, format: str, cache_dir: str
+) -> str:
+ temp_dir = Path(cache_dir) / hash_bytes(data.tobytes())
+ temp_dir.mkdir(exist_ok=True, parents=True)
+ filename = str((temp_dir / f"audio.{format}").resolve())
+ audio_to_file(sample_rate, data, filename, format=format)
+ return filename
+
+
+def save_bytes_to_cache(data: bytes, file_name: str, cache_dir: str) -> str:
+ path = Path(cache_dir) / hash_bytes(data)
+ path.mkdir(exist_ok=True, parents=True)
+ path = path / Path(file_name).name
+ path.write_bytes(data)
+ return str(path.resolve())
+
+
+def save_file_to_cache(file_path: str | Path, cache_dir: str) -> str:
+ """Returns a temporary file path for a copy of the given file path if it does
+ not already exist. Otherwise returns the path to the existing temp file."""
+ temp_dir = hash_file(file_path)
+ temp_dir = Path(cache_dir) / temp_dir
+ temp_dir.mkdir(exist_ok=True, parents=True)
+
+ name = client_utils.strip_invalid_filename_characters(Path(file_path).name)
+ full_temp_file_path = str(abspath(temp_dir / name))
+
+ if not Path(full_temp_file_path).exists():
+ shutil.copy2(file_path, full_temp_file_path)
+
+ return full_temp_file_path
+
+
+async def save_uploaded_file(
+ file: UploadFile, upload_dir: str, limiter: CapacityLimiter | None = None
+) -> str:
+ temp_dir = secrets.token_hex(
+ 20
+ ) # Since the full file is being uploaded anyways, there is no benefit to hashing the file.
+ temp_dir = Path(upload_dir) / temp_dir
+ temp_dir.mkdir(exist_ok=True, parents=True)
+
+ sha1 = hashlib.sha1()
+
+ if file.filename:
+ file_name = Path(file.filename).name
+ name = client_utils.strip_invalid_filename_characters(file_name)
+ else:
+ name = f"tmp{secrets.token_hex(5)}"
+
+ full_temp_file_path = str(abspath(temp_dir / name))
+
+ async with aiofiles.open(full_temp_file_path, "wb") as output_file:
+ while True:
+ content = await file.read(100 * 1024 * 1024)
+ if not content:
+ break
+ sha1.update(content)
+ await output_file.write(content)
+
+ directory = Path(upload_dir) / sha1.hexdigest()
+ directory.mkdir(exist_ok=True, parents=True)
+ dest = (directory / name).resolve()
+
+ await anyio.to_thread.run_sync(
+ shutil.move, full_temp_file_path, dest, limiter=limiter
+ )
+
+ return str(dest)
+
+
+def save_url_to_cache(url: str, cache_dir: str) -> str:
+ """Downloads a file and makes a temporary file path for a copy if does not already
+ exist. Otherwise returns the path to the existing temp file."""
+ temp_dir = hash_url(url)
+ temp_dir = Path(cache_dir) / temp_dir
+ temp_dir.mkdir(exist_ok=True, parents=True)
+
+ name = client_utils.strip_invalid_filename_characters(Path(url).name)
+ full_temp_file_path = str(abspath(temp_dir / name))
+
+ if not Path(full_temp_file_path).exists():
+ with requests.get(url, stream=True) as r, open(full_temp_file_path, "wb") as f:
+ shutil.copyfileobj(r.raw, f)
+
+ return full_temp_file_path
+
+
+def save_base64_to_cache(
+ base64_encoding: str, cache_dir: str, file_name: str | None = None
+) -> str:
+ """Converts a base64 encoding to a file and returns the path to the file if
+ the file doesn't already exist. Otherwise returns the path to the existing file.
+ """
+ temp_dir = hash_base64(base64_encoding)
+ temp_dir = Path(cache_dir) / temp_dir
+ temp_dir.mkdir(exist_ok=True, parents=True)
+
+ guess_extension = client_utils.get_extension(base64_encoding)
+ if file_name:
+ file_name = client_utils.strip_invalid_filename_characters(file_name)
+ elif guess_extension:
+ file_name = f"file.{guess_extension}"
+ else:
+ file_name = "file"
+
+ full_temp_file_path = str(abspath(temp_dir / file_name)) # type: ignore
+
+ if not Path(full_temp_file_path).exists():
+ data, _ = client_utils.decode_base64_to_binary(base64_encoding)
+ with open(full_temp_file_path, "wb") as fb:
+ fb.write(data)
+
+ return full_temp_file_path
+
+
+def move_files_to_cache(data: Any, block: Component):
+ """Move files to cache and replace the file path with the cache path.
+
+ Runs after postprocess and before preprocess.
+
+ Args:
+ data: The input or output data for a component.
+ block: The component
+ """
+
+ def _move_to_cache(d: dict):
+ payload = FileData(**d)
+ if payload.name and (
+ client_utils.is_http_url_like(payload.name)
+ or not is_in_or_equal(payload.name, block.GRADIO_CACHE)
+ ):
+ if payload.is_file:
+ if client_utils.is_http_url_like(payload.name):
+ temp_file_path = save_url_to_cache(
+ payload.name, cache_dir=block.GRADIO_CACHE
+ )
+ else:
+ temp_file_path = save_file_to_cache(
+ payload.name, cache_dir=block.GRADIO_CACHE
+ )
+ else:
+ assert payload.data
+ temp_file_path = save_base64_to_cache(
+ payload.data,
+ file_name=payload.name,
+ cache_dir=block.GRADIO_CACHE,
+ )
+ payload.is_file = True
+ block.temp_files.add(temp_file_path)
+ payload.name = temp_file_path
+ return payload.model_dump()
+
+ return client_utils.traverse(data, _move_to_cache, client_utils.is_file_obj)
+
+
def resize_and_crop(img, size, crop_type="center"):
"""
Resize and crop an image to fit the specified size.
@@ -505,6 +727,8 @@ def video_is_playable(video_filepath: str) -> bool:
.webm -> vp9
.ogg -> theora
"""
+ from ffmpy import FFprobe, FFRuntimeError
+
try:
container = Path(video_filepath).suffix.lower()
probe = FFprobe(
@@ -526,6 +750,8 @@ def video_is_playable(video_filepath: str) -> bool:
def convert_video_to_playable_mp4(video_path: str) -> str:
"""Convert the video to mp4. If something goes wrong return the original video."""
+ from ffmpy import FFmpeg, FFRuntimeError
+
try:
with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
output_path = Path(video_path).with_suffix(".mp4")
diff --git a/gradio/routes.py b/gradio/routes.py
index 9f110b957886..dc2e0c21fbac 100644
--- a/gradio/routes.py
+++ b/gradio/routes.py
@@ -46,7 +46,7 @@
import gradio
import gradio.ranged_response as ranged_response
-from gradio import route_utils, utils, wasm_utils
+from gradio import processing_utils, route_utils, utils, wasm_utils
from gradio.context import Context
from gradio.data_classes import ComponentServerBody, PredictBody, ResetBody
from gradio.deprecation import warn_deprecation
@@ -126,7 +126,7 @@ def __init__(self, **kwargs):
self.queue_token = secrets.token_urlsafe(32)
self.startup_events_triggered = False
self.uploaded_file_dir = os.environ.get("GRADIO_TEMP_DIR") or str(
- Path(tempfile.gettempdir()) / "gradio"
+ (Path(tempfile.gettempdir()) / "gradio").resolve()
)
self.change_event: None | threading.Event = None
self._asyncio_tasks: list[asyncio.Task] = []
@@ -351,8 +351,8 @@ def main(request: fastapi.Request, user: str = Depends(get_current_user)):
@app.get("/info/", dependencies=[Depends(login_check)])
@app.get("/info", dependencies=[Depends(login_check)])
def api_info(serialize: bool = True):
- config = app.get_blocks().config
- return gradio.blocks.get_api_info(config, serialize) # type: ignore
+ # config = app.get_blocks().get_api_info()
+ return app.get_blocks().get_api_info() # type: ignore
@app.get("/config/", dependencies=[Depends(login_check)])
@app.get("/config", dependencies=[Depends(login_check)])
@@ -371,6 +371,32 @@ def static_resource(path: str):
static_file = safe_join(STATIC_PATH_LIB, path)
return FileResponse(static_file)
+ @app.get("/custom_component/{id}/{type}/{file_name}")
+ def custom_component_path(id: str, type: str, file_name: str):
+ config = app.get_blocks().config
+ components = config["components"]
+ location = next(
+ (item for item in components if item["component_class_id"] == id), None
+ )
+
+ if location is None:
+ raise HTTPException(status_code=404, detail="Component not found.")
+
+ component_instance = app.get_blocks().get_component(location["id"])
+
+ module_name = component_instance.__class__.__module__
+ module_path = sys.modules[module_name].__file__
+
+ if module_path is None or component_instance is None:
+ raise HTTPException(status_code=404, detail="Component not found.")
+
+ return FileResponse(
+ safe_join(
+ str(Path(module_path).parent),
+ f"{component_instance.__class__.TEMPLATE_DIR}/{type}/{file_name}",
+ )
+ )
+
@app.get("/assets/{path:path}")
def build_resource(path: str):
build_file = safe_join(BUILD_PATH_LIB, path)
@@ -632,11 +658,10 @@ async def upload_file(
files: List[UploadFile] = File(...),
):
output_files = []
- file_manager = gradio.File()
for input_file in files:
output_files.append(
- await file_manager.save_uploaded_file(
- input_file, app.uploaded_file_dir
+ await processing_utils.save_uploaded_file(
+ input_file, app.uploaded_file_dir, app.get_blocks().limiter
)
)
return output_files
diff --git a/gradio/utils.py b/gradio/utils.py
index a7356397faec..20494fccdd95 100644
--- a/gradio/utils.py
+++ b/gradio/utils.py
@@ -37,7 +37,6 @@
import anyio
import matplotlib
import requests
-from gradio_client.serializing import Serializable
from typing_extensions import ParamSpec
import gradio
@@ -45,7 +44,7 @@
from gradio.strings import en
if TYPE_CHECKING: # Only import for type checking (is False at runtime).
- from gradio.blocks import Block, BlockContext, Blocks
+ from gradio.blocks import BlockContext, Blocks
from gradio.components import Component
from gradio.routes import App, Request
@@ -148,7 +147,7 @@ def watchfn(reloader: SourceFileReloader):
# The thread running watchfn will be the thread reloading
# the app. So we need to modify this thread_data attr here
# so that subsequent calls to reload don't launch the app
- from gradio.reload import reload_thread
+ from gradio.cli.commands.reload import reload_thread
reload_thread.running_reload = True
@@ -174,10 +173,13 @@ def iter_py_files() -> Iterator[Path]:
module = None
reload_dirs = [Path(dir_) for dir_ in reloader.watch_dirs]
+ import sys
+
+ for dir_ in reload_dirs:
+ sys.path.insert(0, str(dir_))
+
mtimes = {}
while reloader.should_watch():
- import sys
-
changed = get_changes()
if changed:
print(f"Changes detected in: {changed}")
@@ -867,7 +869,7 @@ def tex2svg(formula, *args):
fig = plt.figure(figsize=(0.01, 0.01))
fig.text(0, 0, rf"${formula}$", fontsize=fontsize)
output = BytesIO()
- fig.savefig(
+ fig.savefig( # type: ignore
output,
dpi=dpi,
transparent=True,
@@ -928,41 +930,6 @@ def is_in_or_equal(path_1: str | Path, path_2: str | Path):
return True
-def get_serializer_name(block: Block) -> str | None:
- if not hasattr(block, "serialize"):
- return None
-
- def get_class_that_defined_method(meth: Callable):
- # Adapted from: https://stackoverflow.com/a/25959545/5209347
- if isinstance(meth, functools.partial):
- return get_class_that_defined_method(meth.func)
- if inspect.ismethod(meth) or (
- inspect.isbuiltin(meth)
- and getattr(meth, "__self__", None) is not None
- and getattr(meth.__self__, "__class__", None)
- ):
- for cls in inspect.getmro(meth.__self__.__class__):
- # Find the first serializer defined in gradio_client that
- if issubclass(cls, Serializable) and "gradio_client" in cls.__module__:
- return cls
- if meth.__name__ in cls.__dict__:
- return cls
- meth = getattr(meth, "__func__", meth) # fallback to __qualname__ parsing
- if inspect.isfunction(meth):
- cls = getattr(
- inspect.getmodule(meth),
- meth.__qualname__.split(".", 1)[0].rsplit(".", 1)[0],
- None,
- )
- if isinstance(cls, type):
- return cls
- return getattr(meth, "__objclass__", None)
-
- cls = get_class_that_defined_method(block.serialize) # type: ignore
- if cls:
- return cls.__name__
-
-
HTML_TAG_RE = re.compile("<.*?>")
diff --git a/js/_spaces-test/src/lib/EndpointInputs.svelte b/js/_spaces-test/src/lib/EndpointInputs.svelte
index ae9833040f8a..6b0f5097381a 100644
--- a/js/_spaces-test/src/lib/EndpointInputs.svelte
+++ b/js/_spaces-test/src/lib/EndpointInputs.svelte
@@ -4,8 +4,6 @@
*/
export let app_info;
- $: console.log(app_info);
-
/**
* @type any[]
*/
diff --git a/js/_spaces-test/src/routes/+layout.svelte b/js/_spaces-test/src/routes/+layout.svelte
index 361ac4ccca02..733c54dae15b 100644
--- a/js/_spaces-test/src/routes/+layout.svelte
+++ b/js/_spaces-test/src/routes/+layout.svelte
@@ -4,8 +4,6 @@
import { page } from "$app/stores";
import { afterNavigate } from "$app/navigation";
- $: console.log($page);
-
const links = [
["/embeds", "Embeds"],
["/client-browser", "Client-Browser"],
diff --git a/js/_spaces-test/src/routes/client-browser/+page.svelte b/js/_spaces-test/src/routes/client-browser/+page.svelte
index 55e8bd101f44..3cb8d503462b 100644
--- a/js/_spaces-test/src/routes/client-browser/+page.svelte
+++ b/js/_spaces-test/src/routes/client-browser/+page.svelte
@@ -47,8 +47,6 @@
hf_token: hf_token
});
- console.log(app.config);
-
const { named_endpoints, unnamed_endpoints } = await app.view_api();
named = Object.keys(named_endpoints);
@@ -66,8 +64,6 @@
];
if (!_endpoint_info) return;
- console.log(_endpoint_info);
-
app_info = _endpoint_info;
active_endpoint = type === "unnamed" ? parseInt(_endpoint) : _endpoint;
}
@@ -93,8 +89,6 @@
.on("status", (_status) => {
status = _status.stage;
});
- // console.log(res);
- // response_data = res;
}
function cancel() {
diff --git a/js/accordion/static/StaticAccordion.svelte b/js/accordion/static/StaticAccordion.svelte
index b5858de3389e..dd69e9165c70 100644
--- a/js/accordion/static/StaticAccordion.svelte
+++ b/js/accordion/static/StaticAccordion.svelte
@@ -5,6 +5,7 @@
import type { LoadingStatus } from "@gradio/statustracker";
import Column from "@gradio/column";
+ import type { Gradio } from "js/utils/src";
export let label: string;
export let elem_id: string;
@@ -12,10 +13,15 @@
export let visible = true;
export let open = true;
export let loading_status: LoadingStatus;
+ export let gradio: Gradio;
-
diff --git a/js/annotatedimage/static/AnnotatedImage.svelte b/js/annotatedimage/static/AnnotatedImage.svelte
index f0fa9855d4e2..44f5cde62dae 100644
--- a/js/annotatedimage/static/AnnotatedImage.svelte
+++ b/js/annotatedimage/static/AnnotatedImage.svelte
@@ -6,14 +6,27 @@
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
import { type FileData, normalise_file } from "@gradio/upload";
- import { _ } from "svelte-i18n";
+
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
- export let value: [FileData, [FileData, string][]] | null;
- let old_value: [FileData, [FileData, string][]] | null;
- let _value: [FileData, [FileData, string][]] | null;
- export let label = $_("annotated_image.annotated_image");
+ 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;
@@ -26,10 +39,6 @@
export let root_url: string;
let active: string | null = null;
export let loading_status: LoadingStatus;
- export let gradio: Gradio<{
- change: undefined;
- select: SelectData;
- }>;
$: {
if (value !== old_value) {
@@ -37,13 +46,13 @@
gradio.dispatch("change");
}
if (value) {
- _value = [
- normalise_file(value[0], root, root_url) as FileData,
- value[1].map(([file, _label]) => [
- normalise_file(file, root, root_url) as FileData,
- _label,
- ]),
- ];
+ _value = {
+ image: normalise_file(value.image, root, root_url) as FileData,
+ annotations: value.annotations.map((ann) => ({
+ image: normalise_file(ann.image, root, root_url) as FileData,
+ label: ann.label
+ }))
+ };
} else {
_value = null;
}
@@ -55,7 +64,7 @@
active = null;
}
- function handle_click(i: number): void {
+ function handle_click(i: number, value: string): void {
gradio.dispatch("select", {
value: label,
index: i,
@@ -75,8 +84,16 @@
{scale}
{min_width}
>
-
+): string | undefined {
+ if (!pkg_json.exports) return undefined;
+ const _path = join(root, "..", `${pkg_json.exports[`./${path}`]}`);
+
+ return existsSync(_path) ? _path : undefined;
+}
+
+function generate_component_imports(): string {
+ const components = readdirSync(join(__dirname, ".."))
+ .map((dir) => {
+ if (!statSync(join(__dirname, "..", dir)).isDirectory()) return undefined;
+
+ const package_json_path = join(__dirname, "..", dir, "package.json");
+ if (existsSync(package_json_path)) {
+ const package_json = JSON.parse(
+ readFileSync(package_json_path, "utf8")
+ );
+
+ const interactive = get_export_path(
+ "interactive",
+ package_json_path,
+ package_json
+ );
+ const example = get_export_path(
+ "example",
+ package_json_path,
+ package_json
+ );
+ const static_dir = get_export_path(
+ "static",
+ package_json_path,
+ package_json
+ );
+
+ if (!interactive && !example && !static_dir) return undefined;
+
+ return {
+ name: package_json.name,
+ interactive,
+ example,
+ static: static_dir
+ };
+ }
+ return undefined;
+ })
+ .filter((x) => x !== undefined);
+
+ const imports = components.reduce((acc, component) => {
+ if (!component) return acc;
+
+ const interactive = component.interactive
+ ? `interactive: () => import("${component.name}/interactive"),\n`
+ : "";
+ const example = component.example
+ ? `example: () => import("${component.name}/example"),\n`
+ : "";
+ return `${acc}"${component.name.replace("@gradio/", "")}": {
+ ${interactive}
+ ${example}
+ static: () => import("${component.name}/static")
+ },\n`;
+ }, "");
+
+ return imports;
+}
+
+function load_virtual_component_loader(): string {
+ const loader_path = join(__dirname, "component_loader.js");
+ const component_map = `
+const component_map = {
+ ${generate_component_imports()}
+};
+`;
+
+ return `${component_map}\n\n${readFileSync(loader_path, "utf8")}`;
+}
+
+export function inject_component_loader(): Plugin {
+ const v_id = "virtual:component-loader";
+ const resolved_v_id = "\0" + v_id;
+
+ return {
+ name: "inject-component-loader",
+ enforce: "pre",
+ resolveId(id: string) {
+ if (id === v_id) return resolved_v_id;
+ },
+ load(id: string) {
+ if (id === resolved_v_id) {
+ return load_virtual_component_loader();
+ }
+ }
+ };
+}
+
+export function resolve_svelte(enable: boolean): Plugin {
+ return {
+ enforce: "pre",
+ name: "resolve-svelte",
+ async resolveId(id: string) {
+ if (
+ (enable && id === "./svelte/svelte.js") ||
+ id === "svelte" ||
+ id === "svelte/internal"
+ ) {
+ const mod = join(
+ __dirname,
+ "..",
+ "..",
+ "gradio",
+ "templates",
+ "frontend",
+ "assets",
+ "svelte",
+ "svelte.js"
+ );
+ return { id: mod, external: "absolute" };
+ }
+ }
+ };
+}
diff --git a/js/app/component_loader.js b/js/app/component_loader.js
new file mode 100644
index 000000000000..949c9b1f4d73
--- /dev/null
+++ b/js/app/component_loader.js
@@ -0,0 +1,55 @@
+// @ts-nocheck
+
+export async function load_component(api_url, name, mode, id) {
+ const comps = window.__GRADIO__CC__;
+
+ const _component_map = {
+ // eslint-disable-next-line no-undef
+ ...component_map,
+ ...(!comps ? {} : comps)
+ };
+ try {
+ //@ts-ignore
+ const c = await (
+ _component_map?.[id]?.[mode] || // for dev mode custom components
+ _component_map?.[name]?.[mode] ||
+ _component_map?.[name]?.["static"]
+ )();
+ return {
+ name,
+ component: c
+ };
+ } catch (e) {
+ try {
+ await load_css(`${api_url}/custom_component/${id}/${mode}/style.css`);
+ const c = await import(
+ /* @vite-ignore */ `${api_url}/custom_component/${id}/${mode}/index.js`
+ );
+ return {
+ name,
+ component: c
+ };
+ } catch (e) {
+ if (mode === "example") {
+ return {
+ name,
+ component: await import("@gradio/fallback/example")
+ };
+ }
+ console.error(`failed to load: ${name}`);
+ console.error(e);
+ throw e;
+ }
+ }
+}
+
+function load_css(url) {
+ return new Promise((resolve, reject) => {
+ const link = document.createElement("link");
+ link.rel = "stylesheet";
+ link.href = url;
+ document.head.appendChild(link);
+ link.onload = () => resolve();
+ link.onerror = () => reject();
+ });
+}
diff --git a/js/app/index.html b/js/app/index.html
index 05f1095a1e28..ba14140f7a37 100644
--- a/js/app/index.html
+++ b/js/app/index.html
@@ -34,7 +34,7 @@
/>
-
-
-{#if value}
- (obj: T): T => {
- return JSON.parse(JSON.stringify(obj));
-};
-
-export function randInt(min: number, max: number): number {
- return Math.floor(Math.random() * (max - min) + min);
-}
-
-export const getNextColor = (index: number, alpha = 1): string => {
- let default_colors = [
- [255, 99, 132],
- [54, 162, 235],
- [240, 176, 26],
- [153, 102, 255],
- [75, 192, 192],
- [255, 159, 64],
- [194, 88, 74],
- [44, 102, 219],
- [44, 163, 23],
- [191, 46, 217],
- [160, 162, 162],
- [163, 151, 27]
- ];
- if (index < default_colors.length) {
- var color_set = default_colors[index];
- } else {
- var color_set = [randInt(64, 196), randInt(64, 196), randInt(64, 196)];
- }
- return (
- "rgba(" +
- color_set[0] +
- ", " +
- color_set[1] +
- ", " +
- color_set[2] +
- ", " +
- alpha +
- ")"
- );
-};
-
-export const prettyBytes = (bytes: number): string => {
- let units = ["B", "KB", "MB", "GB", "PB"];
- let i = 0;
- while (bytes > 1024) {
- bytes /= 1024;
- i++;
- }
- let unit = units[i];
- return bytes.toFixed(1) + " " + unit;
-};
-
-export const prettySI = (num: number): string => {
- let units = ["", "k", "M", "G", "T", "P", "E", "Z"];
- let i = 0;
- while (num > 1000 && i < units.length - 1) {
- num /= 1000;
- i++;
- }
- let unit = units[i];
- return (Number.isInteger(num) ? num : num.toFixed(1)) + unit;
-};
diff --git a/js/app/src/gradio_helper.ts b/js/app/src/gradio_helper.ts
index 8963a5ddda1b..19a43957b702 100644
--- a/js/app/src/gradio_helper.ts
+++ b/js/app/src/gradio_helper.ts
@@ -1,26 +1,33 @@
-// import { _ } from "svelte-i18n";
+import { format } from "svelte-i18n";
+import { get } from "svelte/store";
-export class Gradio> {
+const x = get(format);
+
+export type I18nFormatter = typeof x;
+export class Gradio = Record> {
#id: number;
theme: string;
version: string;
- // i18n: typeof _;
+ i18n: typeof x;
#el: HTMLElement;
root: string;
+ autoscroll: boolean;
constructor(
id: number,
el: HTMLElement,
theme: string,
version: string,
- root: string
+ root: string,
+ autoscroll: boolean
) {
this.#id = id;
this.theme = theme;
this.version = version;
this.#el = el;
- // this.i18n = _;
+ this.i18n = get(format);
this.root = root;
+ this.autoscroll = autoscroll;
}
dispatch(event_name: E, data?: T[E]): void {
diff --git a/js/app/src/main.ts b/js/app/src/main.ts
index 4f4caadd13f5..b2bd4a91041a 100644
--- a/js/app/src/main.ts
+++ b/js/app/src/main.ts
@@ -1,8 +1,15 @@
-import "@gradio/theme";
+import "@gradio/theme/src/reset.css";
+import "@gradio/theme/src/global.css";
+import "@gradio/theme/src/pollen.css";
+import "@gradio/theme/src/typography.css";
import { client, upload_files } from "@gradio/client";
import { mount_css } from "./css";
-import Index from "./Index.svelte";
-import type { ThemeMode } from "./components/types";
+import type Index from "./Index.svelte";
+
+import type { ThemeMode } from "./types";
+
+//@ts-ignore
+import * as svelte from "./svelte/svelte.js";
declare let BUILD_MODE: string;
declare let GRADIO_VERSION: string;
@@ -13,7 +20,24 @@ let FONTS: string | [];
FONTS = "__FONTS_CSS__";
+//@ts-ignore
+let IndexComponent;
function create_custom_element(): void {
+ const o = {
+ SvelteComponent: svelte.SvelteComponent
+ };
+ for (const key in svelte) {
+ if (key === "SvelteComponent") continue;
+ if (key === "SvelteComponentDev") {
+ //@ts-ignore
+ o[key] = o["SvelteComponent"];
+ } else {
+ //@ts-ignore
+ o[key] = svelte[key];
+ }
+ }
+ //@ts-ignore
+ window.__gradio__svelte__internal = o;
class GradioApp extends HTMLElement {
control_page_title: string | null;
initial_height: string;
@@ -49,6 +73,7 @@ function create_custom_element(): void {
}
async connectedCallback(): Promise {
+ IndexComponent = (await import("./Index.svelte")).default;
this.loading = true;
if (this.app) {
@@ -73,7 +98,7 @@ function create_custom_element(): void {
observer.observe(this, { childList: true });
- this.app = new Index({
+ this.app = new IndexComponent({
target: this,
props: {
// embed source
@@ -140,7 +165,7 @@ function create_custom_element(): void {
this.src = new_val;
}
- this.app = new Index({
+ this.app = new IndexComponent({
target: this,
props: {
// embed source
diff --git a/js/app/src/stores.ts b/js/app/src/stores.ts
index 4642ff5b0466..a411249b4ed8 100644
--- a/js/app/src/stores.ts
+++ b/js/app/src/stores.ts
@@ -163,4 +163,3 @@ export function create_loading_status_store(): LoadingStatusStore {
}
export type LoadingStatusType = ReturnType;
-export const app_state = writable({ autoscroll: false });
diff --git a/js/app/src/components/types.ts b/js/app/src/types.ts
similarity index 89%
rename from js/app/src/components/types.ts
rename to js/app/src/types.ts
index e9c6d62b0003..dae5a95a4696 100644
--- a/js/app/src/components/types.ts
+++ b/js/app/src/types.ts
@@ -1,12 +1,14 @@
import type { ComponentType } from "svelte";
import type { SvelteComponent } from "svelte";
-import type { component_map } from "./directory";
-
-type ComponentMap = typeof component_map;
+interface ComponentImport {
+ interactive: SvelteComponent;
+ static: SvelteComponent;
+ example: SvelteComponent;
+}
export interface ComponentMeta {
- type: keyof ComponentMap;
+ type: string;
id: number;
has_modes: boolean;
props: Record & { mode: "interactive" | "static" };
@@ -15,6 +17,7 @@ export interface ComponentMeta {
documentation?: Documentation;
children?: ComponentMeta[];
value?: any;
+ component_class_id: string;
}
export interface DependencyTypes {
diff --git a/js/app/src/vite-env-override.d.ts b/js/app/src/vite-env-override.d.ts
index 5610442ae24d..4a525fa83272 100644
--- a/js/app/src/vite-env-override.d.ts
+++ b/js/app/src/vite-env-override.d.ts
@@ -4,3 +4,16 @@ declare module "*.whl" {
const content: string;
export default content;
}
+
+// virtual module component type definition
+declare module "virtual:component-loader" {
+ export function load_component(
+ api_url: string,
+ name: string,
+ mode: "interactive" | "static" | "example",
+ id: string
+ ): Promise<{
+ name: ComponentMeta["type"];
+ component: LoadedComponent;
+ }>;
+}
diff --git a/js/app/test/components.test.ts b/js/app/test/components.test.ts
index 06add2b61ed2..a92c90f74951 100644
--- a/js/app/test/components.test.ts
+++ b/js/app/test/components.test.ts
@@ -30,7 +30,7 @@ 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 StaticTimeSeries from "@gradio/timeseries/static";
import StaticUploadButton from "@gradio/uploadbutton/static";
import StaticVideo from "@gradio/video/static";
@@ -46,7 +46,7 @@ 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 InteractiveTimeSeries from "@gradio/timeseries/interactive";
import InteractiveUploadButton from "@gradio/uploadbutton/interactive";
import InteractiveVideo from "@gradio/video/interactive";
import { LoadingStatus } from "@gradio/statustracker";
@@ -118,8 +118,8 @@ const components = [
["StaticSlider", StaticSlider, {}],
["InteractiveTextbox", InteractiveTextbox, { container: false }],
["StaticTextbox", StaticTextbox, { container: false }],
- ["InteractiveTimeSeries", InteractiveTimeSeries, {}],
- ["StaticTimeSeries", StaticTimeSeries, {}],
+ // ["InteractiveTimeSeries", InteractiveTimeSeries, {}],
+ // ["StaticTimeSeries", StaticTimeSeries, {}],
["InteractiveUploadButton", InteractiveUploadButton, {}],
["StaticUploadButton", StaticUploadButton, {}],
["InteractiveVideo", InteractiveVideo, {}],
diff --git a/js/app/vite.config.ts b/js/app/vite.config.ts
index 69e5bf952636..0cda2500c7af 100644
--- a/js/app/vite.config.ts
+++ b/js/app/vite.config.ts
@@ -11,20 +11,29 @@ import { resolve } from "path";
const version_path = resolve(__dirname, "../../gradio/package.json");
const theme_token_path = resolve(__dirname, "../theme/src/tokens.css");
-const version_raw = JSON.parse(readFileSync(version_path, { encoding: "utf-8" })).version.trim();
+const version_raw = JSON.parse(
+ readFileSync(version_path, { encoding: "utf-8" })
+).version.trim();
const version = version_raw.replace(/\./g, "-");
const client_version_path = resolve(
__dirname,
"../../client/python/gradio_client/package.json"
);
-const client_version_raw = JSON.parse(readFileSync(client_version_path, { encoding: "utf-8" })).version.trim();
+const client_version_raw = JSON.parse(
+ readFileSync(client_version_path, {
+ encoding: "utf-8"
+ })
+).version.trim();
import {
inject_ejs,
patch_dynamic_import,
generate_cdn_entry,
- handle_ce_css
+ generate_dev_entry,
+ handle_ce_css,
+ inject_component_loader,
+ resolve_svelte
} from "./build_plugins";
const GRADIO_VERSION = process.env.GRADIO_VERSION || "asd_stub_asd";
@@ -36,6 +45,11 @@ const TEST_MODE = process.env.TEST_MODE || "jsdom";
//@ts-ignore
export default defineConfig(({ mode }) => {
+ const targets = {
+ "production:cdn": "../../gradio/templates/cdn",
+ "production:local": "../../gradio/templates/frontend",
+ "dev:custom": "../../gradio/templates/frontend"
+ };
const CDN_URL = mode === "production:cdn" ? CDN : "/";
const production =
mode === "production:cdn" ||
@@ -57,35 +71,39 @@ export default defineConfig(({ mode }) => {
sourcemap: true,
target: "esnext",
minify: production,
- outDir: is_lite
- ? resolve(__dirname, "../lite/dist")
- : `../../gradio/templates/${is_cdn ? "cdn" : "frontend"}`,
+ outDir: is_lite ? resolve(__dirname, "../lite/dist") : targets[mode],
// To build Gradio-lite as a library, we can't use the library mode
// like `lib: is_lite && {}`
// because it inevitably enables inlining of all the static file assets,
// while we need to disable inlining for the wheel files to pass their URLs to `micropip.install()`.
// So we build it as an app and only use the bundled JS and CSS files as library assets, ignoring the HTML file.
// See also `lite.ts` about it.
- rollupOptions: is_lite && {
- input: "./lite.html",
- output: {
- // To use it as a library, we don't add the hash to the file name.
- entryFileNames: "lite.js",
- assetFileNames: (file) => {
- if (file.name?.endsWith(".whl")) {
- // Python wheel files must follow the naming rules to be installed, so adding a hash to the name is not allowed.
- return `assets/[name].[ext]`;
- }
- if (file.name === "lite.css") {
+ rollupOptions: is_lite
+ ? {
+ input: "./lite.html",
+ output: {
// To use it as a library, we don't add the hash to the file name.
- return `[name].[ext]`;
- } else {
- return `assets/[name]-[hash].[ext]`;
+ entryFileNames: "lite.js",
+ assetFileNames: (file) => {
+ if (file.name?.endsWith(".whl")) {
+ // Python wheel files must follow the naming rules to be installed, so adding a hash to the name is not allowed.
+ return `assets/[name].[ext]`;
+ }
+ if (file.name === "lite.css") {
+ // To use it as a library, we don't add the hash to the file name.
+ return `[name].[ext]`;
+ } else {
+ return `assets/[name]-[hash].[ext]`;
+ }
+ }
}
- }
- }
- }
+ }
+ : {
+ external: ["./svelte/svelte.js"],
+ makeAbsoluteExternalsRelative: false
+ }
},
+
define: {
BUILD_MODE: production ? JSON.stringify("prod") : JSON.stringify("dev"),
BACKEND_URL: production
@@ -117,10 +135,13 @@ export default defineConfig(({ mode }) => {
}
},
plugins: [
+ resolve_svelte(mode === "development"),
+
svelte({
inspector: true,
compilerOptions: {
- dev: !production
+ dev: true,
+ discloseVersion: false
},
hot: !process.env.VITEST && !production,
preprocess: sveltePreprocess({
@@ -132,6 +153,7 @@ export default defineConfig(({ mode }) => {
}
})
}),
+ generate_dev_entry({ enable: mode !== "development" }),
inject_ejs(),
patch_dynamic_import({
mode: is_cdn ? "cdn" : "local",
@@ -139,7 +161,8 @@ export default defineConfig(({ mode }) => {
cdn_url: CDN_URL
}),
generate_cdn_entry({ enable: is_cdn, cdn_url: CDN_URL }),
- handle_ce_css()
+ handle_ce_css(),
+ inject_component_loader()
],
test: {
setupFiles: [resolve(__dirname, "../../.config/setup_vite_tests.ts")],
@@ -148,6 +171,7 @@ export default defineConfig(({ mode }) => {
TEST_MODE === "node"
? ["**/*.node-test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"]
: ["**/*.test.{js,mjs,cjs,ts,mts,cts,jsx,tsx}"],
+ exclude: ["**/node_modules/**", "**/gradio/gradio/**"],
globals: true
},
resolve: {
diff --git a/js/atoms/package.json b/js/atoms/package.json
index ceedb93e9cfa..316f9d340cda 100644
--- a/js/atoms/package.json
+++ b/js/atoms/package.json
@@ -6,7 +6,6 @@
"main": "src/index.ts",
"author": "",
"license": "ISC",
- "private": true,
"dependencies": {
"@gradio/utils": "workspace:^",
"@gradio/icons": "workspace:^"
diff --git a/js/atoms/src/ShareButton.svelte b/js/atoms/src/ShareButton.svelte
index da5be62f049a..450e02a8621a 100644
--- a/js/atoms/src/ShareButton.svelte
+++ b/js/atoms/src/ShareButton.svelte
@@ -4,7 +4,7 @@
import { createEventDispatcher } from "svelte";
import type { ShareData } from "@gradio/utils";
import { ShareError } from "@gradio/utils";
- import { _ } from "svelte-i18n";
+ import type { I18nFormatter } from "@gradio/utils";
const dispatch = createEventDispatcher<{
share: ShareData;
@@ -13,12 +13,13 @@
export let formatter: (arg0: any) => Promise;
export let value: any;
+ export let i18n: I18nFormatter;
let pending = false;
{
try {
diff --git a/js/atoms/src/UploadText.svelte b/js/atoms/src/UploadText.svelte
index 9925959d04cf..fc32638ba1b1 100644
--- a/js/atoms/src/UploadText.svelte
+++ b/js/atoms/src/UploadText.svelte
@@ -1,7 +1,8 @@
gradio.dispatch("change", value)}
on:select={(e) => gradio.dispatch("select", e.detail)}
@@ -69,5 +75,6 @@
bind:selected_index
{show_share_button}
{show_download_button}
+ i18n={gradio.i18n}
/>
diff --git a/js/group/CHANGELOG.md b/js/group/CHANGELOG.md
new file mode 100644
index 000000000000..d232c8ea37b3
--- /dev/null
+++ b/js/group/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @gradio/group
+
+## 0.0.2-beta.0
+
+### Features
+
+- [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
\ No newline at end of file
diff --git a/js/group/package.json b/js/group/package.json
index 27ae8e1b5971..15ef952a2726 100644
--- a/js/group/package.json
+++ b/js/group/package.json
@@ -1,12 +1,12 @@
{
"name": "@gradio/group",
- "version": "0.0.1",
+ "version": "0.0.2-beta.0",
"description": "Gradio UI packages",
"type": "module",
"main": "./static/index.ts",
"author": "",
"license": "ISC",
- "private": true,
+ "private": false,
"main_changeset": true,
"exports": {
".": "./static/index.ts",
diff --git a/js/highlightedtext/HighlightedText.stories.svelte b/js/highlightedtext/HighlightedText.stories.svelte
index 84bb7dbb3ad4..0023329f391c 100644
--- a/js/highlightedtext/HighlightedText.stories.svelte
+++ b/js/highlightedtext/HighlightedText.stories.svelte
@@ -1,7 +1,7 @@
diff --git a/js/highlightedtext/interactive/Highlightedtext.svelte b/js/highlightedtext/interactive/Highlightedtext.svelte
index fc11837cc6bd..3d4986240b43 100644
--- a/js/highlightedtext/interactive/Highlightedtext.svelte
+++ b/js/highlightedtext/interactive/Highlightedtext.svelte
@@ -6,7 +6,10 @@
import { correct_color_map, merge_elements } from "../utils";
import LabelInput from "./LabelInput.svelte";
- export let value: [string, string | number | null][] = [];
+ export let value: {
+ token: string;
+ class_or_confidence: string | number | null;
+ }[] = [];
export let show_legend = false;
export let color_map: Record = {};
export let selectable = false;
@@ -37,32 +40,40 @@
if (
selection?.toString() &&
activeElementIndex !== -1 &&
- value[activeElementIndex][0].toString().includes(selection.toString())
+ value[activeElementIndex].token.toString().includes(selection.toString())
) {
const tempFlag = Symbol();
- const str = value[activeElementIndex][0];
+ const str = value[activeElementIndex].token;
const [before, selected, after] = [
str.substring(0, startIndex),
str.substring(startIndex, endIndex),
- str.substring(endIndex),
+ str.substring(endIndex)
];
- let tempValue: [string, string | number | null, symbol?][] = [
+ let tempValue: {
+ token: string;
+ class_or_confidence: string | number | null;
+ flag?: symbol;
+ }[] = [
...value.slice(0, activeElementIndex),
- [before, null],
- [selected, mode === "scores" ? 1 : "label", tempFlag], // add a temp flag to the new highlighted text element
- [after, null],
- ...value.slice(activeElementIndex + 1),
+ { token: before, class_or_confidence: null },
+ {
+ token: selected,
+ class_or_confidence: mode === "scores" ? 1 : "label",
+ flag: tempFlag
+ }, // add a temp flag to the new highlighted text element
+ { token: after, class_or_confidence: null },
+ ...value.slice(activeElementIndex + 1)
];
// store the index of the new highlighted text element and remove the flag
- labelToEdit = tempValue.findIndex(([_, __, flag]) => flag === tempFlag);
- tempValue[labelToEdit].pop();
+ labelToEdit = tempValue.findIndex(({ flag }) => flag === tempFlag);
+ // tempValue[labelToEdit].pop();
// remove elements with empty labels
- tempValue = tempValue.filter((item) => item[0].trim() !== "");
- value = tempValue as [string, string | number | null][];
+ tempValue = tempValue.filter((item) => item.token.trim() !== "");
+ value = tempValue.map(({ flag, ...rest }) => rest);
handleValueChange();
document.getElementById(`label-input-${labelToEdit}`)?.focus();
@@ -80,8 +91,8 @@
}
function removeHighlightedText(index: number): void {
- if (index < 0 || index >= value.length) return;
- value[index][1] = null;
+ if (!value || index < 0 || index >= value.length) return;
+ value[index].class_or_confidence = null;
value = merge_elements(value, "equal");
handleValueChange();
window.getSelection()?.empty();
@@ -105,13 +116,13 @@
color_map = {};
}
if (value.length > 0) {
- for (let [_, label] of value) {
- if (label !== null) {
- if (typeof label === "string") {
+ for (let entry of value) {
+ if (entry.class_or_confidence !== null) {
+ if (typeof entry.class_or_confidence === "string") {
mode = "categories";
- if (!(label in color_map)) {
+ if (!(entry.class_or_confidence in color_map)) {
let color = get_next_color(Object.keys(color_map).length);
- color_map[label] = color;
+ color_map[entry.class_or_confidence] = color;
}
} else {
mode = "scores";
@@ -149,11 +160,11 @@
function handleSelect(
i: number,
text: string,
- category: string | number | null
+ class_or_confidence: string | number | null
): void {
dispatch("select", {
index: i,
- value: [text, category],
+ value: [text, class_or_confidence]
});
}
@@ -162,23 +173,23 @@
{#if mode === "categories"}
{#if show_legend}
{#if _value == null}
@@ -86,41 +103,41 @@
- {#each _value ? _value[1] : [] as [file, label], i}
+ {#each _value ? _value?.annotations : [] as ann, i}
{/each}
{#if show_legend && _value}
- {#each _value[1] as [_, label], i}
+ {#each _value.annotations as ann, i}
{/each}
diff --git a/js/app/build_plugins.ts b/js/app/build_plugins.ts
index 76bcd4086cde..87c1db3313e1 100644
--- a/js/app/build_plugins.ts
+++ b/js/app/build_plugins.ts
@@ -2,7 +2,7 @@ import type { Plugin } from "vite";
import { parse, HTMLElement } from "node-html-parser";
import { join } from "path";
-import { writeFileSync } from "fs";
+import { writeFileSync, cpSync } from "fs";
export function inject_ejs(): Plugin {
return {
@@ -89,6 +89,30 @@ export function generate_cdn_entry({
};
}
+const RE_SVELTE_IMPORT =
+ /import\s+([\w*{},\s]+)\s+from\s+['"](svelte|svelte\/internal)['"]/g;
+
+export function generate_dev_entry({ enable }: { enable: boolean }): Plugin {
+ return {
+ name: "generate-dev-entry",
+ transform(code, id) {
+ if (!enable) return;
+
+ const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
+ return `const ${$1.replace(
+ " as ",
+ ": "
+ )} = window.__gradio__svelte__internal;`;
+ });
+
+ return {
+ code: new_code,
+ map: null
+ };
+ }
+ };
+}
+
function make_entry(script: string): string {
const make_script = `
function make_script(src) {
@@ -177,3 +201,137 @@ export function handle_ce_css(): Plugin {
}
};
}
+
+// generate component importsy
+
+import * as url from "url";
+const __filename = url.fileURLToPath(import.meta.url);
+const __dirname = url.fileURLToPath(new URL(".", import.meta.url));
+
+import { readdirSync, existsSync, readFileSync, statSync } from "fs";
+
+function get_export_path(
+ path: string,
+ root: string,
+ pkg_json: Record
- {label}
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Checkbox.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Checkbox.svelte
deleted file mode 100644
index 80ff970080e2..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Checkbox.svelte
+++ /dev/null
@@ -1,88 +0,0 @@
-
-
-
- {#each interpretation as interpret_value}
-
- {/each}
-
-
- {label}
-
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/CheckboxGroup.svelte b/js/app/src/components/Interpretation/InterpretationComponents/CheckboxGroup.svelte
deleted file mode 100644
index 80c71c49295e..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/CheckboxGroup.svelte
+++ /dev/null
@@ -1,107 +0,0 @@
-
-
-
- {label}
- {#each choices as choice, i}
-
- {/each}
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Dropdown.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Dropdown.svelte
deleted file mode 100644
index 1878b74d9640..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Dropdown.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-
-
-
- {label}
-
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Image.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Image.svelte
deleted file mode 100644
index d50202ba10d8..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Image.svelte
+++ /dev/null
@@ -1,106 +0,0 @@
-
-
-
- {label}
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Number.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Number.svelte
deleted file mode 100644
index b62c361d3cdf..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Number.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-
-
-
- 
-
-
-
-
-
- {label}
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Radio.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Radio.svelte
deleted file mode 100644
index 942cfbe94b46..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Radio.svelte
+++ /dev/null
@@ -1,57 +0,0 @@
-
-
-
- {#each interpretation as interpret_value}
-
-
- {interpret_value[0]}
-
- {/each}
-
- {label}
- {#each choices as choice, i}
-
- {/each}
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Slider.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Slider.svelte
deleted file mode 100644
index bb07a9fed206..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Slider.svelte
+++ /dev/null
@@ -1,79 +0,0 @@
-
-
-
-
-
diff --git a/js/app/src/components/Interpretation/InterpretationComponents/Textbox.svelte b/js/app/src/components/Interpretation/InterpretationComponents/Textbox.svelte
deleted file mode 100644
index ba4f4822f07a..000000000000
--- a/js/app/src/components/Interpretation/InterpretationComponents/Textbox.svelte
+++ /dev/null
@@ -1,31 +0,0 @@
-
-
-
- {label}
- {#each interpretation as [text, saliency]}
-
- {text}
-
- {/each}
-
-
-
diff --git a/js/app/src/components/Interpretation/directory.ts b/js/app/src/components/Interpretation/directory.ts
deleted file mode 100644
index 020865fbea01..000000000000
--- a/js/app/src/components/Interpretation/directory.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import InterpretationNumber from "./InterpretationComponents/Number.svelte";
-import InterpretationDropdown from "./InterpretationComponents/Dropdown.svelte";
-import InterpretationCheckbox from "./InterpretationComponents/Checkbox.svelte";
-import InterpretationCheckboxGroup from "./InterpretationComponents/CheckboxGroup.svelte";
-import InterpretationSlider from "./InterpretationComponents/Slider.svelte";
-import InterpretationRadio from "./InterpretationComponents/Radio.svelte";
-import InterpretationImage from "./InterpretationComponents/Image.svelte";
-import InterpretationAudio from "./InterpretationComponents/Audio.svelte";
-import InterpretationTextbox from "./InterpretationComponents/Textbox.svelte";
-
-export const component_map = {
- audio: InterpretationAudio,
- dropdown: InterpretationDropdown,
- checkbox: InterpretationCheckbox,
- checkboxgroup: InterpretationCheckboxGroup,
- number: InterpretationNumber,
- slider: InterpretationSlider,
- radio: InterpretationRadio,
- image: InterpretationImage,
- textbox: InterpretationTextbox
-};
diff --git a/js/app/src/components/Interpretation/index.ts b/js/app/src/components/Interpretation/index.ts
deleted file mode 100644
index 1fb581699c9d..000000000000
--- a/js/app/src/components/Interpretation/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Interpretation.svelte";
diff --git a/js/app/src/components/Interpretation/utils.ts b/js/app/src/components/Interpretation/utils.ts
deleted file mode 100644
index 70110d6a04d1..000000000000
--- a/js/app/src/components/Interpretation/utils.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-export const getSaliencyColor = (value: number): string => {
- var color: [number, number, number] | null = null;
- if (value < 0) {
- color = [52, 152, 219];
- } else {
- color = [231, 76, 60];
- }
- return colorToString(interpolate(Math.abs(value), [255, 255, 255], color));
-};
-
-const interpolate = (
- val: number,
- rgb1: [number, number, number],
- rgb2: [number, number, number]
-): [number, number, number] => {
- if (val > 1) {
- val = 1;
- }
- val = Math.sqrt(val);
- var rgb: [number, number, number] = [0, 0, 0];
- var i;
- for (i = 0; i < 3; i++) {
- rgb[i] = Math.round(rgb1[i] * (1.0 - val) + rgb2[i] * val);
- }
- return rgb;
-};
-
-const colorToString = (rgb: [number, number, number]): string => {
- return "rgb(" + rgb[0] + ", " + rgb[1] + ", " + rgb[2] + ")";
-};
-
-export function getObjectFitSize(
- contains: boolean /* true = contain, false = cover */,
- containerWidth: number,
- containerHeight: number,
- width: number,
- height: number
-): { width: number; height: number; x: number; y: number } {
- var doRatio = width / height;
- var cRatio = containerWidth / containerHeight;
- var targetWidth = 0;
- var targetHeight = 0;
- var test = contains ? doRatio > cRatio : doRatio < cRatio;
-
- if (test) {
- targetWidth = containerWidth;
- targetHeight = targetWidth / doRatio;
- } else {
- targetHeight = containerHeight;
- targetWidth = targetHeight * doRatio;
- }
-
- return {
- width: targetWidth,
- height: targetHeight,
- x: (containerWidth - targetWidth) / 2,
- y: (containerHeight - targetHeight) / 2
- };
-}
diff --git a/js/app/src/components/State/index.ts b/js/app/src/components/State/index.ts
deleted file mode 100644
index 0d9ecfae7647..000000000000
--- a/js/app/src/components/State/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "@gradio/state";
diff --git a/js/app/src/components/directory.ts b/js/app/src/components/directory.ts
deleted file mode 100644
index 8c115d473e1a..000000000000
--- a/js/app/src/components/directory.ts
+++ /dev/null
@@ -1,142 +0,0 @@
-export const component_map = {
- accordion: {
- static: () => import("@gradio/accordion/static")
- },
- annotatedimage: {
- static: () => import("@gradio/annotatedimage/static")
- },
- audio: {
- static: () => import("@gradio/audio/static"),
- interactive: () => import("@gradio/audio/interactive")
- },
- box: {
- static: () => import("@gradio/box/static")
- },
- button: {
- static: () => import("@gradio/button/static")
- },
- chatbot: {
- static: () => import("@gradio/chatbot/static")
- },
- checkbox: {
- static: () => import("@gradio/checkbox/static"),
- interactive: () => import("@gradio/checkbox/interactive")
- },
- checkboxgroup: {
- static: () => import("@gradio/checkboxgroup/static"),
- interactive: () => import("@gradio/checkboxgroup/interactive")
- },
- code: {
- static: () => import("@gradio/code/static"),
- interactive: () => import("@gradio/code/interactive")
- },
- colorpicker: {
- static: () => import("@gradio/colorpicker/static"),
- interactive: () => import("@gradio/colorpicker/interactive")
- },
- column: {
- static: () => import("@gradio/column/static")
- },
- dataframe: {
- static: () => import("@gradio/dataframe/static"),
- interactive: () => import("@gradio/dataframe/interactive")
- },
- dataset: {
- static: () => import("./Dataset")
- },
- dropdown: {
- static: () => import("@gradio/dropdown/static"),
- interactive: () => import("@gradio/dropdown/interactive")
- },
- file: {
- static: () => import("@gradio/file/static"),
- interactive: () => import("@gradio/file/interactive")
- },
- form: {
- static: () => import("@gradio/form/static")
- },
- gallery: {
- static: () => import("@gradio/gallery/static")
- },
- group: {
- static: () => import("@gradio/group/static")
- },
- highlightedtext: {
- static: () => import("@gradio/highlightedtext/static"),
- interactive: () => import("@gradio/highlightedtext/interactive")
- },
- fileexplorer: {
- static: () => import("@gradio/fileexplorer/static"),
- interactive: () => import("@gradio/fileexplorer/interactive")
- },
- html: {
- static: () => import("@gradio/html/static")
- },
- image: {
- static: () => import("@gradio/image/static"),
- interactive: () => import("@gradio/image/interactive")
- },
- interpretation: {
- static: () => import("./Interpretation"),
- interactive: () => import("./Interpretation")
- },
- json: {
- static: () => import("@gradio/json/static")
- },
- label: {
- static: () => import("@gradio/label/static")
- },
- markdown: {
- static: () => import("@gradio/markdown/static")
- },
- model3d: {
- static: () => import("@gradio/model3d/static"),
- interactive: () => import("@gradio/model3d/interactive")
- },
- number: {
- static: () => import("@gradio/number/static"),
- interactive: () => import("@gradio/number/interactive")
- },
- plot: {
- static: () => import("@gradio/plot/static")
- },
- radio: {
- static: () => import("@gradio/radio/static"),
- interactive: () => import("@gradio/radio/interactive")
- },
- row: {
- static: () => import("@gradio/row/static")
- },
- slider: {
- static: () => import("@gradio/slider/static"),
- interactive: () => import("@gradio/slider/interactive")
- },
- state: {
- static: () => import("./State")
- },
- statustracker: {
- static: () => import("@gradio/statustracker/static")
- },
- tabs: {
- static: () => import("@gradio/tabs/static")
- },
- tabitem: {
- static: () => import("@gradio/tabitem/static")
- },
- textbox: {
- static: () => import("@gradio/textbox/static"),
- interactive: () => import("@gradio/textbox/interactive")
- },
- timeseries: {
- static: () => import("@gradio/timeseries/static"),
- interactive: () => import("@gradio/timeseries/interactive")
- },
- uploadbutton: {
- static: () => import("@gradio/uploadbutton/static"),
- interactive: () => import("@gradio/uploadbutton/interactive")
- },
- video: {
- static: () => import("@gradio/video/static"),
- interactive: () => import("@gradio/video/interactive")
- }
-};
diff --git a/js/app/src/components/utils/helpers.test.ts b/js/app/src/components/utils/helpers.test.ts
deleted file mode 100644
index d0204989786d..000000000000
--- a/js/app/src/components/utils/helpers.test.ts
+++ /dev/null
@@ -1,93 +0,0 @@
-import { assert, describe, test } from "vitest";
-import { prettyBytes, deepCopy, randInt, getNextColor } from "./helpers";
-
-describe("prettyBytes", () => {
- test("handle B", () => {
- assert.equal(prettyBytes(10), "10.0 B");
- });
-
- test("handles KB", () => {
- assert.equal(prettyBytes(1_300), "1.3 KB");
- });
-
- test("handles MB", () => {
- assert.equal(prettyBytes(1_300_000), "1.2 MB");
- });
-
- test("handles GB", () => {
- assert.equal(prettyBytes(1_300_000_123), "1.2 GB");
- });
-
- test("handles PB", () => {
- assert.equal(prettyBytes(1_300_000_123_000), "1.2 PB");
- });
-});
-
-describe("deepCopy", () => {
- test("handle arrays", () => {
- const array = [1, 2, 3];
- const copy = deepCopy(array);
- assert.ok(array !== copy);
- assert.deepEqual(array, copy);
- });
-
- test("handle objects", () => {
- const obj = { a: 1, b: 2, c: 3 };
- const copy = deepCopy(obj);
- assert.ok(obj !== copy);
- assert.deepEqual(obj, copy);
- });
-
- test("handle complex structures", () => {
- const obj = {
- a: 1,
- b: {
- a: 1,
- b: {
- a: 1,
- b: { a: 1, b: 2, c: 3 },
- c: [
- 1,
- 2,
- { a: 1, b: { a: 1, b: { a: 1, b: 2, c: 3 }, c: [1, 2, 3] } }
- ]
- },
- c: 3
- },
- c: 3
- };
- const copy = deepCopy(obj);
- assert.ok(obj !== copy);
- assert.deepEqual(obj, copy);
- });
-});
-
-describe("randInt", () => {
- test("returns a random number", () => {
- assert.typeOf(randInt(0, 10), "number");
- });
-
- test("respects min and max", () => {
- const n = randInt(0, 10);
- assert.ok(n >= 0 && n <= 10);
- });
-
- test("respects min and max when negative", () => {
- const n = randInt(-100, -10);
- assert.ok(n >= -100 && n <= -10);
- });
-});
-
-describe("getNextColor", () => {
- test("returns a color", () => {
- assert.equal(getNextColor(0), "rgba(255, 99, 132, 1)");
- });
-
- test("returns a color when index is very high", () => {
- assert.ok(
- getNextColor(999999999).match(
- /rgba\([0-9]{1,3}, [0-9]{1,3}, [0-9]{1,3}, [0-9]\)/
- )
- );
- });
-});
diff --git a/js/app/src/components/utils/helpers.ts b/js/app/src/components/utils/helpers.ts
deleted file mode 100644
index 99cd6f3d3b6c..000000000000
--- a/js/app/src/components/utils/helpers.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-// import mime from "mime-types";
-
-export const playable = (): boolean => {
- // let video_element = document.createElement("video");
- // let mime_type = mime.lookup(filename);
- // return video_element.canPlayType(mime_type) != "";
- return true; // FIX BEFORE COMMIT - mime import causing issues
-};
-
-export const deepCopy =
- {$_(defs[type])}
- - {$_("common.or")} -
- {$_("upload_text.click_to_upload")}
+ {i18n(defs[type])}
+ - {i18n("common.or")} -
+ {i18n("upload_text.click_to_upload")}
+
\ No newline at end of file
diff --git a/js/gallery/static/StaticGallery.svelte b/js/gallery/static/StaticGallery.svelte
index cf07e19143e9..6b11348da68a 100644
--- a/js/gallery/static/StaticGallery.svelte
+++ b/js/gallery/static/StaticGallery.svelte
@@ -14,8 +14,10 @@
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
- export let value: (FileData | string | [FileData | string, string])[] | null =
- null;
+ export let value:
+ | { image: FileData; caption: string | null }[]
+ | null
+ | null = null;
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
@@ -49,7 +51,11 @@
allow_overflow={false}
height={typeof height === "number" ? height : undefined}
>
-
{#if _color_map}
- {#each Object.entries(_color_map) as [category, color], i}
+ {#each Object.entries(_color_map) as [class_or_confidence, color], i}
handle_mouseover(category)}
- on:focus={() => handle_mouseover(category)}
+ on:mouseover={() => handle_mouseover(class_or_confidence)}
+ on:focus={() => handle_mouseover(class_or_confidence)}
on:mouseout={() => handle_mouseout()}
on:blur={() => handle_mouseout()}
- class="category-label"
+ class="class_or_confidence-label"
style={"background-color:" + color.secondary}
>
- {category}
+ {class_or_confidence}
{/each}
{/if}
@@ -186,33 +197,33 @@
{/if}
- {#each value as [text, category], i}
- {#each splitTextByNewline(text) as line, j}
+ {#each value as { token, class_or_confidence }, i}
+ {#each splitTextByNewline(token) as line, j}
{#if line.trim() !== ""}
-
+
{
- if (category !== null) {
- handleSelect(i, text, category);
+ if (class_or_confidence !== null) {
+ handleSelect(i, token, class_or_confidence);
}
}}
on:keydown={(e) => {
- if (category !== null) {
+ if (class_or_confidence !== null) {
labelToEdit = i;
- handleSelect(i, text, category);
+ handleSelect(i, token, class_or_confidence);
} else {
handleKeydownSelection(e);
}
@@ -221,7 +232,7 @@
on:mouseover={() => (activeElementIndex = i)}
>
handleKeydownSelection(e)}
@@ -230,37 +241,37 @@
on:click={() => (labelToEdit = i)}
tabindex="0">{line}
- {#if !show_legend && category !== null && labelToEdit !== i}
+ {#if !show_legend && class_or_confidence !== null && labelToEdit !== i}
(labelToEdit = i)}
on:keydown={() => (labelToEdit = i)}
>
- {category}
+ {class_or_confidence}
{/if}
- {#if labelToEdit === i && category !== null}
+ {#if labelToEdit === i && class_or_confidence !== null}
{/if} {/each} @@ -293,15 +304,19 @@ {/if}
-
{/if} {/each} @@ -293,15 +304,19 @@ {/if}
- {#each value as [text, _score], i}
- {@const score = typeof _score === "string" ? parseInt(_score) : _score}
+ {#each value as { token, class_or_confidence }, i}
+ {@const score =
+ typeof class_or_confidence === "string"
+ ? parseInt(class_or_confidence)
+ : class_or_confidence}
(activeElementIndex = i)}
on:focus={() => (activeElementIndex = i)}
on:click={() => (labelToEdit = i)}
@@ -316,22 +331,22 @@
: "239, 68, 60," + score) +
")"}
>
- {text}
- {#if _score && labelToEdit === i}
+ {token}
+ {#if class_or_confidence && labelToEdit === i}
{/if}
- {#each value as [text, category], i}
- {#each splitTextByNewline(text) as line, j}
+ {#each value as v, i}
+ {#each splitTextByNewline(v.token) as line, j}
{#if line.trim() !== ""}
{
dispatch("select", {
index: i,
- value: [text, category],
+ value: [v.token, v.class_or_confidence]
});
}}
>
{line}
- {#if !show_legend && category !== null}
+ {#if !show_legend && v.class_or_confidence !== null}
- {category}
+ {v.class_or_confidence}
{/if}
{/if}
- {#if j < splitTextByNewline(text).length - 1}
+ {#if j < splitTextByNewline(v.token).length - 1}
{/if} {/each} @@ -147,8 +151,11 @@
{/if}
{/if} {/each} @@ -147,8 +151,11 @@
- {#each value as [text, _score]}
- {@const score = typeof _score === "string" ? parseInt(_score) : _score}
+ {#each value as v}
+ {@const score =
+ typeof v.class_or_confidence === "string"
+ ? parseInt(v.class_or_confidence)
+ : v.class_or_confidence}
- {text}
+ {v.token}
{/each}
diff --git a/js/highlightedtext/static/StaticHighlightedtext.svelte b/js/highlightedtext/static/StaticHighlightedtext.svelte
index 81ea139d1193..fd209276a5aa 100644
--- a/js/highlightedtext/static/StaticHighlightedtext.svelte
+++ b/js/highlightedtext/static/StaticHighlightedtext.svelte
@@ -1,31 +1,33 @@
@@ -56,7 +58,11 @@
{scale}
{min_width}
>
-
): void {
if (tool === "color-sketch") {
- static_image = detail;
+ static_image = normalise_file(detail, root, null)?.data;
} else {
value =
(source === "upload" || source === "webcam") && tool === "sketch"
- ? { image: detail, mask: null }
- : detail;
+ ? { image: normalise_file(detail, root, null), mask: null }
+ : normalise_file(detail, root, null);
}
- dispatch("upload", detail);
+
+ dispatch("upload", normalise_file(detail, root, null));
}
function handle_clear({ detail }: CustomEvent): void {
@@ -105,6 +112,13 @@
$: dispatch("drag", dragging);
+ let value_: null | FileData = null;
+
+ $: if (value !== value_) {
+ value_ = value;
+ normalise_file(value_, root, null);
+ }
+
function handle_image_load(event: Event): void {
const element = event.currentTarget as HTMLImageElement;
img_width = element.naturalWidth;
@@ -203,14 +217,23 @@
on:load={handle_upload}
include_file_metadata={false}
disable_click={!!value}
+ {root}
>
{#if (value === null && !static_image) || streaming}
(handle_clear(e), (tool = "editor"))} />
+ (handle_clear(e), (tool = "editor"))}
+ />
{:else if tool === "editor"}
(tool = "select")}
on:clear={handle_clear}
editable
@@ -220,7 +243,7 @@
{/key}
{#if img_width > 0}
@@ -326,10 +350,14 @@
/>
{/if}
{:else if tool === "select"}
- (handle_clear(e), (tool = "editor"))} />
+ (handle_clear(e), (tool = "editor"))}
+ />
{:else if tool === "editor"}
(tool = "select")}
on:clear={handle_clear}
editable
@@ -338,9 +366,8 @@
-
- gradio.dispatch("edit")}
on:clear={() => gradio.dispatch("clear")}
on:stream={() => gradio.dispatch("stream")}
@@ -93,7 +101,8 @@
{pending}
{streaming}
{mirror_webcam}
+ i18n={gradio.i18n}
>
-
diff --git a/js/image/interactive/Webcam.svelte b/js/image/interactive/Webcam.svelte
index 8e85de1ad925..b501b26e00bf 100644
--- a/js/image/interactive/Webcam.svelte
+++ b/js/image/interactive/Webcam.svelte
@@ -1,7 +1,7 @@
- gradio.dispatch("select", detail)}
on:share={({ detail }) => gradio.dispatch("share", detail)}
on:error={({ detail }) => gradio.dispatch("error", detail)}
+ {root}
{value}
{label}
{show_label}
{show_download_button}
{selectable}
{show_share_button}
+ i18n={gradio.i18n}
/>
diff --git a/js/json/CHANGELOG.md b/js/json/CHANGELOG.md
index 918e54b5516d..a31dfc222c9e 100644
--- a/js/json/CHANGELOG.md
+++ b/js/json/CHANGELOG.md
@@ -73,4 +73,4 @@ Thanks [@pngwn](https://github.com/pngwn)!
### Patch Changes
- Updated dependencies []:
- - @gradio/atoms@0.0.2
+ - @gradio/atoms@0.0.2
\ No newline at end of file
diff --git a/js/json/package.json b/js/json/package.json
index 50ac66e2e820..8237adad284f 100644
--- a/js/json/package.json
+++ b/js/json/package.json
@@ -6,7 +6,7 @@
"main": "./static/index.ts",
"author": "",
"license": "ISC",
- "private": true,
+ "private": false,
"dependencies": {
"@gradio/atoms": "workspace:^",
"@gradio/icons": "workspace:^",
diff --git a/js/json/static/StaticJson.svelte b/js/json/static/StaticJson.svelte
index 498de5b30ea7..721cde89e5b1 100644
--- a/js/json/static/StaticJson.svelte
+++ b/js/json/static/StaticJson.svelte
@@ -6,7 +6,6 @@
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
- import { _ } from "svelte-i18n";
export let elem_id = "";
export let elem_classes: string[] = [];
@@ -51,7 +50,11 @@
/>
{/if}
-
-
- (dragging = detail)}
on:change={({ detail }) => gradio.dispatch("change", detail)}
on:clear={() => gradio.dispatch("clear")}
+ i18n={gradio.i18n}
>
-
diff --git a/js/model3D/interactive/Model3DUpload.svelte b/js/model3D/interactive/Model3DUpload.svelte
index aca84c889689..97439725bb1b 100644
--- a/js/model3D/interactive/Model3DUpload.svelte
+++ b/js/model3D/interactive/Model3DUpload.svelte
@@ -10,6 +10,8 @@
export let clear_color: [number, number, number, number] = [0, 0, 0, 0];
export let label = "";
export let show_label: boolean;
+ export let root: string;
+ export let i18n: I18nFormatter;
export let zoom_speed = 1;
// alpha, beta, radius
@@ -84,6 +86,7 @@
import * as BABYLON from "babylonjs";
import * as BABYLON_LOADERS from "babylonjs-loaders";
+ import type { I18nFormatter } from "js/utils/src";
BABYLON_LOADERS.OBJFileLoader.IMPORT_VERTEX_COLORS = true;
@@ -93,7 +96,12 @@
+
{:else}
@@ -101,6 +109,7 @@
diff --git a/js/model3D/static/StaticModel3d.svelte b/js/model3D/static/StaticModel3d.svelte
index ddb919c4ca1f..0deacde100c1 100644
--- a/js/model3D/static/StaticModel3d.svelte
+++ b/js/model3D/static/StaticModel3d.svelte
@@ -7,7 +7,7 @@
import { StatusTracker } from "@gradio/statustracker";
import type { LoadingStatus } from "@gradio/statustracker";
- import { _ } from "svelte-i18n";
+ import type { Gradio } from "@gradio/utils";
export let elem_id = "";
export let elem_classes: string[] = [];
@@ -22,6 +22,7 @@
export let container = true;
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
+ export let gradio: Gradio;
export let height: number | undefined = undefined;
export let zoom_speed = 1;
@@ -50,11 +51,16 @@
{min_width}
{height}
>
- ;
+ export let label = gradio.i18n("number.number");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
@@ -21,13 +27,6 @@
export let loading_status: LoadingStatus;
export let value_is_output = false;
export let step: number | null = null;
- export let gradio: Gradio<{
- change: never;
- input: never;
- submit: never;
- blur: never;
- focus: never;
- }>;
- ;
+ export let label = gradio.i18n("number.number");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
@@ -21,13 +27,6 @@
export let loading_status: LoadingStatus;
export let value_is_output = false;
export let step: number | null = null;
- export let gradio: Gradio<{
- change: never;
- input: never;
- submit: never;
- blur: never;
- focus: never;
- }>;
-
- =14.0.0"
+ },
+ "peerDependencies": {
+ "rollup": "^2.68.0||^3.0.0"
+ },
+ "peerDependenciesMeta": {
+ "rollup": {
+ "optional": true
+ }
+ }
+ },
+ "../../node_modules/.pnpm/@rollup+plugin-json@6.0.0_rollup@3.28.0/node_modules/@rollup/plugin-json": {
+ "version": "6.0.0",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@rollup/pluginutils": "^5.0.1"
+ },
+ "devDependencies": {
+ "@rollup/plugin-buble": "^1.0.0",
+ "@rollup/plugin-node-resolve": "^15.0.0",
+ "rollup": "^3.2.3",
+ "source-map-support": "^0.5.21"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "rollup": "^1.20.0||^2.0.0||^3.0.0"
+ },
+ "peerDependenciesMeta": {
+ "rollup": {
+ "optional": true
+ }
+ }
+ },
+ "../../node_modules/.pnpm/@rollup+plugin-node-resolve@15.1.0_rollup@3.28.0/node_modules/@rollup/plugin-node-resolve": {
+ "version": "15.1.0",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@rollup/pluginutils": "^5.0.1",
+ "@types/resolve": "1.20.2",
+ "deepmerge": "^4.2.2",
+ "is-builtin-module": "^3.2.1",
+ "is-module": "^1.0.0",
+ "resolve": "^1.22.1"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.19.1",
+ "@babel/plugin-transform-typescript": "^7.10.5",
+ "@rollup/plugin-babel": "^6.0.0",
+ "@rollup/plugin-commonjs": "^23.0.0",
+ "@rollup/plugin-json": "^5.0.0",
+ "es5-ext": "^0.10.62",
+ "rollup": "^3.2.3",
+ "source-map": "^0.7.4",
+ "string-capitalize": "^1.0.1"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "rollup": "^2.78.0||^3.0.0"
+ },
+ "peerDependenciesMeta": {
+ "rollup": {
+ "optional": true
+ }
+ }
+ },
+ "../../node_modules/.pnpm/@rollup+plugin-sucrase@5.0.1_rollup@3.28.0/node_modules/@rollup/plugin-sucrase": {
+ "version": "5.0.1",
+ "license": "MIT",
+ "dependencies": {
+ "@rollup/pluginutils": "^5.0.1",
+ "sucrase": "^3.27.0"
+ },
+ "devDependencies": {
+ "@rollup/plugin-alias": "^4.0.0",
+ "rollup": "^3.2.3"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "rollup": "^2.53.1||^3.0.0"
+ },
+ "peerDependenciesMeta": {
+ "rollup": {
+ "optional": true
+ }
+ }
+ },
+ "../../node_modules/.pnpm/@rollup+plugin-typescript@11.1.2_rollup@3.28.0_typescript@5.1.3/node_modules/@rollup/plugin-typescript": {
+ "version": "11.1.2",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "@rollup/pluginutils": "^5.0.1",
+ "resolve": "^1.22.1"
+ },
+ "devDependencies": {
+ "@rollup/plugin-buble": "^1.0.0",
+ "@rollup/plugin-commonjs": "^23.0.0",
+ "@types/node": "^14.18.30",
+ "@types/resolve": "^1.20.2",
+ "buble": "^0.20.0",
+ "rollup": "^3.2.3",
+ "typescript": "^4.8.3"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ },
+ "peerDependencies": {
+ "rollup": "^2.14.0||^3.0.0",
+ "tslib": "*",
+ "typescript": ">=3.7.0"
+ },
+ "peerDependenciesMeta": {
+ "rollup": {
+ "optional": true
+ },
+ "tslib": {
+ "optional": true
+ }
+ }
+ },
+ "../../node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/vite-plugin-svelte": {
+ "version": "2.4.2",
+ "license": "MIT",
+ "dependencies": {
+ "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3",
+ "debug": "^4.3.4",
+ "deepmerge": "^4.3.1",
+ "kleur": "^4.1.5",
+ "magic-string": "^0.30.0",
+ "svelte-hmr": "^0.15.2",
+ "vitefu": "^0.2.4"
+ },
+ "devDependencies": {
+ "@types/debug": "^4.1.8",
+ "esbuild": "^0.18.6",
+ "svelte": "^3.59.2",
+ "vite": "^4.3.9"
+ },
+ "engines": {
+ "node": "^14.18.0 || >= 16"
+ },
+ "peerDependencies": {
+ "svelte": "^3.54.0 || ^4.0.0",
+ "vite": "^4.0.0"
+ }
+ },
+ "../../node_modules/.pnpm/coffeescript@2.7.0/node_modules/coffeescript": {
+ "version": "2.7.0",
+ "license": "MIT",
+ "bin": {
+ "cake": "bin/cake",
+ "coffee": "bin/coffee"
+ },
+ "devDependencies": {
+ "@babel/core": "~7.17.8",
+ "@babel/preset-env": "~7.16.11",
+ "babel-preset-minify": "~0.5.1",
+ "codemirror": "~5.65.2",
+ "docco": "~0.9.1",
+ "highlight.js": "~11.5.0",
+ "jison": "~0.4.18",
+ "markdown-it": "~12.3.2",
+ "puppeteer": "~13.5.2",
+ "underscore": "~1.13.2",
+ "webpack": "~5.71.0"
+ },
+ "engines": {
+ "node": ">=6"
+ }
+ },
+ "../../node_modules/.pnpm/css-tree@2.3.1/node_modules/css-tree": {
+ "version": "2.3.1",
+ "license": "MIT",
+ "dependencies": {
+ "mdn-data": "2.0.30",
+ "source-map-js": "^1.0.1"
+ },
+ "devDependencies": {
+ "c8": "^7.12.0",
+ "clap": "^2.0.1",
+ "esbuild": "^0.14.53",
+ "eslint": "^8.4.1",
+ "json-to-ast": "^2.1.0",
+ "mocha": "^9.2.2",
+ "rollup": "^2.68.0"
+ },
+ "engines": {
+ "node": "^10 || ^12.20.0 || ^14.13.0 || >=15.0.0"
+ }
+ },
+ "../../node_modules/.pnpm/esbuild@0.19.0/node_modules/esbuild": {
+ "version": "0.19.0",
+ "hasInstallScript": true,
+ "license": "MIT",
+ "bin": {
+ "esbuild": "bin/esbuild"
+ },
+ "engines": {
+ "node": ">=12"
+ },
+ "optionalDependencies": {
+ "@esbuild/android-arm": "0.19.0",
+ "@esbuild/android-arm64": "0.19.0",
+ "@esbuild/android-x64": "0.19.0",
+ "@esbuild/darwin-arm64": "0.19.0",
+ "@esbuild/darwin-x64": "0.19.0",
+ "@esbuild/freebsd-arm64": "0.19.0",
+ "@esbuild/freebsd-x64": "0.19.0",
+ "@esbuild/linux-arm": "0.19.0",
+ "@esbuild/linux-arm64": "0.19.0",
+ "@esbuild/linux-ia32": "0.19.0",
+ "@esbuild/linux-loong64": "0.19.0",
+ "@esbuild/linux-mips64el": "0.19.0",
+ "@esbuild/linux-ppc64": "0.19.0",
+ "@esbuild/linux-riscv64": "0.19.0",
+ "@esbuild/linux-s390x": "0.19.0",
+ "@esbuild/linux-x64": "0.19.0",
+ "@esbuild/netbsd-x64": "0.19.0",
+ "@esbuild/openbsd-x64": "0.19.0",
+ "@esbuild/sunos-x64": "0.19.0",
+ "@esbuild/win32-arm64": "0.19.0",
+ "@esbuild/win32-ia32": "0.19.0",
+ "@esbuild/win32-x64": "0.19.0"
+ }
+ },
+ "../../node_modules/.pnpm/lightningcss@1.21.7/node_modules/lightningcss": {
+ "version": "1.21.7",
+ "license": "MPL-2.0",
+ "dependencies": {
+ "detect-libc": "^1.0.3"
+ },
+ "devDependencies": {
+ "@babel/parser": "^7.21.4",
+ "@babel/traverse": "^7.21.4",
+ "@codemirror/lang-css": "^6.0.1",
+ "@codemirror/lang-javascript": "^6.1.2",
+ "@codemirror/lint": "^6.1.0",
+ "@codemirror/theme-one-dark": "^6.1.0",
+ "@mdn/browser-compat-data": "^5.2.49",
+ "@napi-rs/cli": "^2.14.0",
+ "autoprefixer": "^10.4.14",
+ "codemirror": "^6.0.1",
+ "cssnano": "^5.0.8",
+ "esbuild": "^0.13.10",
+ "flowgen": "^1.21.0",
+ "jest-diff": "^27.4.2",
+ "json-schema-to-typescript": "^11.0.2",
+ "markdown-it-anchor": "^8.6.6",
+ "markdown-it-prism": "^2.3.0",
+ "markdown-it-table-of-contents": "^0.6.0",
+ "napi-wasm": "^1.0.1",
+ "node-fetch": "^3.1.0",
+ "parcel": "^2.8.2",
+ "patch-package": "^6.5.0",
+ "path-browserify": "^1.0.1",
+ "postcss": "^8.3.11",
+ "posthtml-include": "^1.7.4",
+ "posthtml-markdownit": "^1.3.1",
+ "posthtml-prism": "^1.0.4",
+ "process": "^0.11.10",
+ "puppeteer": "^12.0.1",
+ "recast": "^0.22.0",
+ "sharp": "^0.31.1",
+ "util": "^0.12.4",
+ "uvu": "^0.5.6"
+ },
+ "engines": {
+ "node": ">= 12.0.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/parcel"
+ },
+ "optionalDependencies": {
+ "lightningcss-darwin-arm64": "1.21.7",
+ "lightningcss-darwin-x64": "1.21.7",
+ "lightningcss-freebsd-x64": "1.21.7",
+ "lightningcss-linux-arm-gnueabihf": "1.21.7",
+ "lightningcss-linux-arm64-gnu": "1.21.7",
+ "lightningcss-linux-arm64-musl": "1.21.7",
+ "lightningcss-linux-x64-gnu": "1.21.7",
+ "lightningcss-linux-x64-musl": "1.21.7",
+ "lightningcss-win32-x64-msvc": "1.21.7"
+ }
+ },
+ "../../node_modules/.pnpm/pug@3.0.2/node_modules/pug": {
+ "version": "3.0.2",
+ "license": "MIT",
+ "dependencies": {
+ "pug-code-gen": "^3.0.2",
+ "pug-filters": "^4.0.0",
+ "pug-lexer": "^5.0.1",
+ "pug-linker": "^4.0.0",
+ "pug-load": "^3.0.0",
+ "pug-parser": "^6.0.0",
+ "pug-runtime": "^3.0.1",
+ "pug-strip-comments": "^2.0.0"
+ },
+ "devDependencies": {
+ "jstransformer-cdata": "^1.0.0",
+ "jstransformer-coffee-script": "^1.0.0",
+ "jstransformer-less": "^2.1.0",
+ "jstransformer-markdown-it": "^2.0.0",
+ "jstransformer-stylus": "^1.0.0",
+ "jstransformer-uglify-js": "^1.1.1",
+ "jstransformer-verbatim": "^1.0.0",
+ "mkdirp": "^0.5.1",
+ "rimraf": "^3.0.2",
+ "uglify-js": "github:mishoo/UglifyJS2#1c15d0db456ce32f1b9b507aad97e5ee5c8285f7"
+ }
+ },
+ "../../node_modules/.pnpm/rollup-plugin-ignore@1.0.10/node_modules/rollup-plugin-ignore": {
+ "version": "1.0.10",
+ "license": "MIT",
+ "devDependencies": {
+ "rollup": "^2.23.0"
+ }
+ },
+ "../../node_modules/.pnpm/rollup@3.28.0/node_modules/rollup": {
+ "version": "3.28.0",
+ "dev": true,
+ "license": "MIT",
+ "bin": {
+ "rollup": "dist/bin/rollup"
+ },
+ "devDependencies": {
+ "@codemirror/commands": "^6.2.4",
+ "@codemirror/lang-javascript": "^6.1.9",
+ "@codemirror/language": "^6.8.0",
+ "@codemirror/search": "^6.5.0",
+ "@codemirror/state": "^6.2.1",
+ "@codemirror/view": "^6.14.1",
+ "@jridgewell/sourcemap-codec": "^1.4.15",
+ "@mermaid-js/mermaid-cli": "^10.2.4",
+ "@rollup/plugin-alias": "^5.0.0",
+ "@rollup/plugin-buble": "^1.0.2",
+ "@rollup/plugin-commonjs": "^25.0.3",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.1.0",
+ "@rollup/plugin-replace": "^5.0.2",
+ "@rollup/plugin-terser": "^0.4.3",
+ "@rollup/plugin-typescript": "^11.1.2",
+ "@rollup/pluginutils": "^5.0.2",
+ "@types/estree": "1.0.1",
+ "@types/mocha": "^10.0.1",
+ "@types/node": "~14.18.54",
+ "@types/yargs-parser": "^21.0.0",
+ "@typescript-eslint/eslint-plugin": "^6.2.0",
+ "@typescript-eslint/parser": "^6.2.0",
+ "@vue/eslint-config-prettier": "^8.0.0",
+ "@vue/eslint-config-typescript": "^11.0.3",
+ "acorn": "^8.10.0",
+ "acorn-import-assertions": "^1.9.0",
+ "acorn-jsx": "^5.3.2",
+ "acorn-walk": "^8.2.0",
+ "buble": "^0.20.0",
+ "builtin-modules": "^3.3.0",
+ "chokidar": "^3.5.3",
+ "colorette": "^2.0.20",
+ "concurrently": "^8.2.0",
+ "core-js": "^3.31.1",
+ "date-time": "^4.0.0",
+ "es5-shim": "^4.6.7",
+ "es6-shim": "^0.35.8",
+ "eslint": "^8.45.0",
+ "eslint-config-prettier": "^8.8.0",
+ "eslint-plugin-import": "^2.27.5",
+ "eslint-plugin-prettier": "^5.0.0",
+ "eslint-plugin-unicorn": "^48.0.0",
+ "eslint-plugin-vue": "^9.15.1",
+ "fixturify": "^3.0.0",
+ "flru": "^1.0.2",
+ "fs-extra": "^11.1.1",
+ "github-api": "^3.4.0",
+ "hash.js": "^1.1.7",
+ "husky": "^8.0.3",
+ "inquirer": "^9.2.8",
+ "is-reference": "^3.0.1",
+ "lint-staged": "^13.2.3",
+ "locate-character": "^3.0.0",
+ "magic-string": "^0.30.1",
+ "mocha": "^10.2.0",
+ "nyc": "^15.1.0",
+ "pinia": "^2.1.4",
+ "prettier": "^3.0.0",
+ "pretty-bytes": "^6.1.1",
+ "pretty-ms": "^8.0.0",
+ "requirejs": "^2.3.6",
+ "rollup": "^3.26.3",
+ "rollup-plugin-license": "^3.0.1",
+ "rollup-plugin-string": "^3.0.0",
+ "rollup-plugin-thatworks": "^1.0.4",
+ "semver": "^7.5.4",
+ "shx": "^0.3.4",
+ "signal-exit": "^4.0.2",
+ "source-map": "^0.7.4",
+ "source-map-support": "^0.5.21",
+ "systemjs": "^6.14.1",
+ "terser": "^5.19.2",
+ "tslib": "^2.6.1",
+ "typescript": "^5.1.6",
+ "vite": "^4.4.7",
+ "vitepress": "^1.0.0-beta.6",
+ "vue": "^3.3.4",
+ "weak-napi": "^2.0.2",
+ "yargs-parser": "^21.1.1"
+ },
+ "engines": {
+ "node": ">=14.18.0",
+ "npm": ">=8.0.0"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ }
+ },
+ "../../node_modules/.pnpm/sass@1.66.1/node_modules/sass": {
+ "version": "1.66.1",
+ "license": "MIT",
+ "dependencies": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ },
+ "bin": {
+ "sass": "sass.js"
+ },
+ "engines": {
+ "node": ">=14.0.0"
+ }
+ },
+ "../../node_modules/.pnpm/stylus@0.60.0/node_modules/stylus": {
+ "version": "0.60.0",
+ "license": "MIT",
+ "dependencies": {
+ "@adobe/css-tools": "~4.2.0",
+ "debug": "^4.3.2",
+ "glob": "^7.1.6",
+ "sax": "~1.2.4",
+ "source-map": "^0.7.3"
+ },
+ "bin": {
+ "stylus": "bin/stylus"
+ },
+ "devDependencies": {
+ "chai": "^4.3.6",
+ "mocha": "^9.2.0"
+ },
+ "engines": {
+ "node": "*"
+ },
+ "funding": {
+ "url": "https://opencollective.com/stylus"
+ }
+ },
+ "../../node_modules/.pnpm/sucrase@3.34.0/node_modules/sucrase": {
+ "version": "3.34.0",
+ "license": "MIT",
+ "dependencies": {
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "commander": "^4.0.0",
+ "glob": "7.1.6",
+ "lines-and-columns": "^1.1.6",
+ "mz": "^2.7.0",
+ "pirates": "^4.0.1",
+ "ts-interface-checker": "^0.1.9"
+ },
+ "bin": {
+ "sucrase": "bin/sucrase",
+ "sucrase-node": "bin/sucrase-node"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.22.5",
+ "@jridgewell/trace-mapping": "^0.3.18",
+ "@types/glob": "^7",
+ "@types/mocha": "^9.1.1",
+ "@types/mz": "^2.7.4",
+ "@types/node": "^20.3.2",
+ "@typescript-eslint/eslint-plugin": "^5.60.1",
+ "@typescript-eslint/parser": "^5.60.1",
+ "chalk": "^4",
+ "codecov": "^3.8.3",
+ "eslint": "^8.43.0",
+ "eslint-config-airbnb-base": "^15.0.0",
+ "eslint-config-prettier": "^8.8.0",
+ "eslint-plugin-import": "~2.26",
+ "eslint-plugin-prettier": "^4.2.1",
+ "mocha": "^10.2.0",
+ "nyc": "^15.1.0",
+ "prettier": "^2.8.8",
+ "sucrase": "^3.33.0",
+ "test262-harness": "^10.0.0",
+ "ts-interface-builder": "^0.3.3",
+ "typescript": "~5.0"
+ },
+ "engines": {
+ "node": ">=8"
+ }
+ },
+ "../../node_modules/.pnpm/sugarss@4.0.1_postcss@8.4.27/node_modules/sugarss": {
+ "version": "4.0.1",
+ "license": "MIT",
+ "engines": {
+ "node": ">=12.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ "peerDependencies": {
+ "postcss": "^8.3.3"
+ }
+ },
+ "../../node_modules/.pnpm/svelte-hmr@0.15.3_svelte@4.2.0/node_modules/svelte-hmr": {
+ "version": "0.15.3",
+ "dev": true,
+ "license": "ISC",
+ "devDependencies": {
+ "dotenv": "^10.0.0",
+ "prettier": "^1.19.1",
+ "svelte": "^3.59.2",
+ "tap-mocha-reporter": "^5.0.3",
+ "zoar": "^0.3.0",
+ "zorax": "^0.0.14"
+ },
+ "engines": {
+ "node": "^12.20 || ^14.13.1 || >= 16"
+ },
+ "peerDependencies": {
+ "svelte": "^3.19.0 || ^4.0.0"
+ }
+ },
+ "../../node_modules/.pnpm/svelte@4.2.0/node_modules/svelte": {
+ "version": "4.2.0",
+ "license": "MIT",
+ "dependencies": {
+ "@ampproject/remapping": "^2.2.1",
+ "@jridgewell/sourcemap-codec": "^1.4.15",
+ "@jridgewell/trace-mapping": "^0.3.18",
+ "acorn": "^8.9.0",
+ "aria-query": "^5.3.0",
+ "axobject-query": "^3.2.1",
+ "code-red": "^1.0.3",
+ "css-tree": "^2.3.1",
+ "estree-walker": "^3.0.3",
+ "is-reference": "^3.0.1",
+ "locate-character": "^3.0.0",
+ "magic-string": "^0.30.0",
+ "periscopic": "^3.1.0"
+ },
+ "devDependencies": {
+ "@playwright/test": "^1.35.1",
+ "@rollup/plugin-commonjs": "^24.1.0",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.1.0",
+ "@sveltejs/eslint-config": "^6.0.4",
+ "@types/aria-query": "^5.0.1",
+ "@types/estree": "^1.0.1",
+ "@types/node": "^14.18.51",
+ "agadoo": "^3.0.0",
+ "dts-buddy": "^0.1.7",
+ "esbuild": "^0.18.11",
+ "happy-dom": "^9.20.3",
+ "jsdom": "^21.1.2",
+ "kleur": "^4.1.5",
+ "rollup": "^3.26.2",
+ "source-map": "^0.7.4",
+ "tiny-glob": "^0.2.9",
+ "typescript": "^5.1.3",
+ "vitest": "^0.33.0"
+ },
+ "engines": {
+ "node": ">=16"
+ }
+ },
+ "../../node_modules/.pnpm/vite@4.4.9_@types+node@20.3.1_less@4.1.3_lightningcss@1.21.7_sass@1.66.1_stylus@0.60.0_sugarss@4.0.1/node_modules/vite": {
+ "version": "4.4.9",
+ "dev": true,
+ "license": "MIT",
+ "dependencies": {
+ "esbuild": "^0.18.10",
+ "postcss": "^8.4.27",
+ "rollup": "^3.27.1"
+ },
+ "bin": {
+ "vite": "bin/vite.js"
+ },
+ "devDependencies": {
+ "@ampproject/remapping": "^2.2.1",
+ "@babel/parser": "^7.22.7",
+ "@babel/types": "^7.22.5",
+ "@jridgewell/trace-mapping": "^0.3.18",
+ "@rollup/plugin-alias": "^4.0.4",
+ "@rollup/plugin-commonjs": "^25.0.3",
+ "@rollup/plugin-dynamic-import-vars": "^2.0.4",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "15.1.0",
+ "@rollup/plugin-typescript": "^11.1.2",
+ "@rollup/pluginutils": "^5.0.2",
+ "@types/escape-html": "^1.0.2",
+ "@types/pnpapi": "^0.0.2",
+ "acorn": "^8.10.0",
+ "acorn-walk": "^8.2.0",
+ "cac": "^6.7.14",
+ "chokidar": "^3.5.3",
+ "connect": "^3.7.0",
+ "connect-history-api-fallback": "^2.0.0",
+ "convert-source-map": "^2.0.0",
+ "cors": "^2.8.5",
+ "cross-spawn": "^7.0.3",
+ "debug": "^4.3.4",
+ "dep-types": "link:./src/types",
+ "dotenv": "^16.3.1",
+ "dotenv-expand": "^9.0.0",
+ "es-module-lexer": "^1.3.0",
+ "escape-html": "^1.0.3",
+ "estree-walker": "^3.0.3",
+ "etag": "^1.8.1",
+ "fast-glob": "^3.3.1",
+ "http-proxy": "^1.18.1",
+ "json-stable-stringify": "^1.0.2",
+ "launch-editor-middleware": "^2.6.0",
+ "lightningcss": "^1.21.5",
+ "magic-string": "^0.30.2",
+ "micromatch": "^4.0.5",
+ "mlly": "^1.4.0",
+ "mrmime": "^1.0.1",
+ "okie": "^1.0.1",
+ "open": "^8.4.2",
+ "parse5": "^7.1.2",
+ "periscopic": "^3.1.0",
+ "picocolors": "^1.0.0",
+ "picomatch": "^2.3.1",
+ "postcss-import": "^15.1.0",
+ "postcss-load-config": "^4.0.1",
+ "postcss-modules": "^6.0.0",
+ "resolve.exports": "^2.0.2",
+ "rollup-plugin-license": "^3.0.1",
+ "sirv": "^2.0.3",
+ "source-map-support": "^0.5.21",
+ "strip-ansi": "^7.1.0",
+ "strip-literal": "^1.3.0",
+ "tsconfck": "^2.1.2",
+ "tslib": "^2.6.1",
+ "types": "link:./types",
+ "ufo": "^1.2.0",
+ "ws": "^8.13.0"
+ },
+ "engines": {
+ "node": "^14.18.0 || >=16.0.0"
+ },
+ "funding": {
+ "url": "https://github.com/vitejs/vite?sponsor=1"
+ },
+ "optionalDependencies": {
+ "fsevents": "~2.3.2"
+ },
+ "peerDependencies": {
+ "@types/node": ">= 14",
+ "less": "*",
+ "lightningcss": "^1.21.0",
+ "sass": "*",
+ "stylus": "*",
+ "sugarss": "*",
+ "terser": "^5.4.0"
+ },
+ "peerDependenciesMeta": {
+ "@types/node": {
+ "optional": true
+ },
+ "less": {
+ "optional": true
+ },
+ "lightningcss": {
+ "optional": true
+ },
+ "sass": {
+ "optional": true
+ },
+ "stylus": {
+ "optional": true
+ },
+ "sugarss": {
+ "optional": true
+ },
+ "terser": {
+ "optional": true
+ }
+ }
+ },
+ "../../node_modules/.pnpm/yootils@0.3.1/node_modules/yootils": {
+ "version": "0.3.1",
+ "license": "MIT",
+ "devDependencies": {
+ "agadoo": "^2.0.0",
+ "esbuild": "^0.12.8",
+ "prettier": "^2.3.1",
+ "typescript": "^4.3.2",
+ "uvu": "^0.5.1"
+ }
+ },
+ "node_modules/@originjs/vite-plugin-commonjs": {
+ "resolved": "../../node_modules/.pnpm/@originjs+vite-plugin-commonjs@1.0.3/node_modules/@originjs/vite-plugin-commonjs",
+ "link": true
+ },
+ "node_modules/@rollup/plugin-commonjs": {
+ "resolved": "../../node_modules/.pnpm/@rollup+plugin-commonjs@25.0.4_rollup@3.28.0/node_modules/@rollup/plugin-commonjs",
+ "link": true
+ },
+ "node_modules/@rollup/plugin-json": {
+ "resolved": "../../node_modules/.pnpm/@rollup+plugin-json@6.0.0_rollup@3.28.0/node_modules/@rollup/plugin-json",
+ "link": true
+ },
+ "node_modules/@rollup/plugin-node-resolve": {
+ "resolved": "../../node_modules/.pnpm/@rollup+plugin-node-resolve@15.1.0_rollup@3.28.0/node_modules/@rollup/plugin-node-resolve",
+ "link": true
+ },
+ "node_modules/@rollup/plugin-sucrase": {
+ "resolved": "../../node_modules/.pnpm/@rollup+plugin-sucrase@5.0.1_rollup@3.28.0/node_modules/@rollup/plugin-sucrase",
+ "link": true
+ },
+ "node_modules/@rollup/plugin-typescript": {
+ "resolved": "../../node_modules/.pnpm/@rollup+plugin-typescript@11.1.2_rollup@3.28.0_typescript@5.1.3/node_modules/@rollup/plugin-typescript",
+ "link": true
+ },
+ "node_modules/@sveltejs/vite-plugin-svelte": {
+ "resolved": "../../node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/vite-plugin-svelte",
+ "link": true
+ },
+ "node_modules/coffeescript": {
+ "resolved": "../../node_modules/.pnpm/coffeescript@2.7.0/node_modules/coffeescript",
+ "link": true
+ },
+ "node_modules/css-tree": {
+ "resolved": "../../node_modules/.pnpm/css-tree@2.3.1/node_modules/css-tree",
+ "link": true
+ },
+ "node_modules/esbuild": {
+ "resolved": "../../node_modules/.pnpm/esbuild@0.19.0/node_modules/esbuild",
+ "link": true
+ },
+ "node_modules/lightningcss": {
+ "resolved": "../../node_modules/.pnpm/lightningcss@1.21.7/node_modules/lightningcss",
+ "link": true
+ },
+ "node_modules/pug": {
+ "resolved": "../../node_modules/.pnpm/pug@3.0.2/node_modules/pug",
+ "link": true
+ },
+ "node_modules/rollup": {
+ "resolved": "../../node_modules/.pnpm/rollup@3.28.0/node_modules/rollup",
+ "link": true
+ },
+ "node_modules/rollup-plugin-ignore": {
+ "resolved": "../../node_modules/.pnpm/rollup-plugin-ignore@1.0.10/node_modules/rollup-plugin-ignore",
+ "link": true
+ },
+ "node_modules/sass": {
+ "resolved": "../../node_modules/.pnpm/sass@1.66.1/node_modules/sass",
+ "link": true
+ },
+ "node_modules/stylus": {
+ "resolved": "../../node_modules/.pnpm/stylus@0.60.0/node_modules/stylus",
+ "link": true
+ },
+ "node_modules/sucrase": {
+ "resolved": "../../node_modules/.pnpm/sucrase@3.34.0/node_modules/sucrase",
+ "link": true
+ },
+ "node_modules/sugarss": {
+ "resolved": "../../node_modules/.pnpm/sugarss@4.0.1_postcss@8.4.27/node_modules/sugarss",
+ "link": true
+ },
+ "node_modules/svelte": {
+ "resolved": "../../node_modules/.pnpm/svelte@4.2.0/node_modules/svelte",
+ "link": true
+ },
+ "node_modules/svelte-hmr": {
+ "resolved": "../../node_modules/.pnpm/svelte-hmr@0.15.3_svelte@4.2.0/node_modules/svelte-hmr",
+ "link": true
+ },
+ "node_modules/vite": {
+ "resolved": "../../node_modules/.pnpm/vite@4.4.9_@types+node@20.3.1_less@4.1.3_lightningcss@1.21.7_sass@1.66.1_stylus@0.60.0_sugarss@4.0.1/node_modules/vite",
+ "link": true
+ },
+ "node_modules/yootils": {
+ "resolved": "../../node_modules/.pnpm/yootils@0.3.1/node_modules/yootils",
+ "link": true
+ }
+ },
+ "dependencies": {
+ "@originjs/vite-plugin-commonjs": {
+ "version": "file:../../node_modules/.pnpm/@originjs+vite-plugin-commonjs@1.0.3/node_modules/@originjs/vite-plugin-commonjs",
+ "requires": {
+ "@types/node": "^15.12.2",
+ "esbuild": "^0.14.14",
+ "typescript": "^4.3.2",
+ "vite": "^2.3.6"
+ }
+ },
+ "@rollup/plugin-commonjs": {
+ "version": "file:../../node_modules/.pnpm/@rollup+plugin-commonjs@25.0.4_rollup@3.28.0/node_modules/@rollup/plugin-commonjs",
+ "requires": {
+ "@rollup/plugin-json": "^5.0.0",
+ "@rollup/plugin-node-resolve": "^15.0.0",
+ "@rollup/pluginutils": "^5.0.1",
+ "commondir": "^1.0.1",
+ "estree-walker": "^2.0.2",
+ "glob": "^8.0.3",
+ "is-reference": "1.2.1",
+ "locate-character": "^2.0.5",
+ "magic-string": "^0.27.0",
+ "require-relative": "^0.8.7",
+ "rollup": "^3.19.0",
+ "shx": "^0.3.4",
+ "source-map": "^0.7.4",
+ "source-map-support": "^0.5.21",
+ "typescript": "^4.8.3"
+ }
+ },
+ "@rollup/plugin-json": {
+ "version": "file:../../node_modules/.pnpm/@rollup+plugin-json@6.0.0_rollup@3.28.0/node_modules/@rollup/plugin-json",
+ "requires": {
+ "@rollup/plugin-buble": "^1.0.0",
+ "@rollup/plugin-node-resolve": "^15.0.0",
+ "@rollup/pluginutils": "^5.0.1",
+ "rollup": "^3.2.3",
+ "source-map-support": "^0.5.21"
+ }
+ },
+ "@rollup/plugin-node-resolve": {
+ "version": "file:../../node_modules/.pnpm/@rollup+plugin-node-resolve@15.1.0_rollup@3.28.0/node_modules/@rollup/plugin-node-resolve",
+ "requires": {
+ "@babel/core": "^7.19.1",
+ "@babel/plugin-transform-typescript": "^7.10.5",
+ "@rollup/plugin-babel": "^6.0.0",
+ "@rollup/plugin-commonjs": "^23.0.0",
+ "@rollup/plugin-json": "^5.0.0",
+ "@rollup/pluginutils": "^5.0.1",
+ "@types/resolve": "1.20.2",
+ "deepmerge": "^4.2.2",
+ "es5-ext": "^0.10.62",
+ "is-builtin-module": "^3.2.1",
+ "is-module": "^1.0.0",
+ "resolve": "^1.22.1",
+ "rollup": "^3.2.3",
+ "source-map": "^0.7.4",
+ "string-capitalize": "^1.0.1"
+ }
+ },
+ "@rollup/plugin-sucrase": {
+ "version": "file:../../node_modules/.pnpm/@rollup+plugin-sucrase@5.0.1_rollup@3.28.0/node_modules/@rollup/plugin-sucrase",
+ "requires": {
+ "@rollup/plugin-alias": "^4.0.0",
+ "@rollup/pluginutils": "^5.0.1",
+ "rollup": "^3.2.3",
+ "sucrase": "^3.27.0"
+ }
+ },
+ "@rollup/plugin-typescript": {
+ "version": "file:../../node_modules/.pnpm/@rollup+plugin-typescript@11.1.2_rollup@3.28.0_typescript@5.1.3/node_modules/@rollup/plugin-typescript",
+ "requires": {
+ "@rollup/plugin-buble": "^1.0.0",
+ "@rollup/plugin-commonjs": "^23.0.0",
+ "@rollup/pluginutils": "^5.0.1",
+ "@types/node": "^14.18.30",
+ "@types/resolve": "^1.20.2",
+ "buble": "^0.20.0",
+ "resolve": "^1.22.1",
+ "rollup": "^3.2.3",
+ "typescript": "^4.8.3"
+ }
+ },
+ "@sveltejs/vite-plugin-svelte": {
+ "version": "file:../../node_modules/.pnpm/@sveltejs+vite-plugin-svelte@2.4.2_svelte@4.2.0_vite@4.4.9/node_modules/@sveltejs/vite-plugin-svelte",
+ "requires": {
+ "@sveltejs/vite-plugin-svelte-inspector": "^1.0.3",
+ "@types/debug": "^4.1.8",
+ "debug": "^4.3.4",
+ "deepmerge": "^4.3.1",
+ "esbuild": "^0.18.6",
+ "kleur": "^4.1.5",
+ "magic-string": "^0.30.0",
+ "svelte": "^3.59.2",
+ "svelte-hmr": "^0.15.2",
+ "vite": "^4.3.9",
+ "vitefu": "^0.2.4"
+ }
+ },
+ "coffeescript": {
+ "version": "file:../../node_modules/.pnpm/coffeescript@2.7.0/node_modules/coffeescript",
+ "requires": {
+ "@babel/core": "~7.17.8",
+ "@babel/preset-env": "~7.16.11",
+ "babel-preset-minify": "~0.5.1",
+ "codemirror": "~5.65.2",
+ "docco": "~0.9.1",
+ "highlight.js": "~11.5.0",
+ "jison": "~0.4.18",
+ "markdown-it": "~12.3.2",
+ "puppeteer": "~13.5.2",
+ "underscore": "~1.13.2",
+ "webpack": "~5.71.0"
+ }
+ },
+ "css-tree": {
+ "version": "file:../../node_modules/.pnpm/css-tree@2.3.1/node_modules/css-tree",
+ "requires": {
+ "c8": "^7.12.0",
+ "clap": "^2.0.1",
+ "esbuild": "^0.14.53",
+ "eslint": "^8.4.1",
+ "json-to-ast": "^2.1.0",
+ "mdn-data": "2.0.30",
+ "mocha": "^9.2.2",
+ "rollup": "^2.68.0",
+ "source-map-js": "^1.0.1"
+ }
+ },
+ "esbuild": {
+ "version": "file:../../node_modules/.pnpm/esbuild@0.19.0/node_modules/esbuild",
+ "requires": {
+ "@esbuild/android-arm": "0.19.0",
+ "@esbuild/android-arm64": "0.19.0",
+ "@esbuild/android-x64": "0.19.0",
+ "@esbuild/darwin-arm64": "0.19.0",
+ "@esbuild/darwin-x64": "0.19.0",
+ "@esbuild/freebsd-arm64": "0.19.0",
+ "@esbuild/freebsd-x64": "0.19.0",
+ "@esbuild/linux-arm": "0.19.0",
+ "@esbuild/linux-arm64": "0.19.0",
+ "@esbuild/linux-ia32": "0.19.0",
+ "@esbuild/linux-loong64": "0.19.0",
+ "@esbuild/linux-mips64el": "0.19.0",
+ "@esbuild/linux-ppc64": "0.19.0",
+ "@esbuild/linux-riscv64": "0.19.0",
+ "@esbuild/linux-s390x": "0.19.0",
+ "@esbuild/linux-x64": "0.19.0",
+ "@esbuild/netbsd-x64": "0.19.0",
+ "@esbuild/openbsd-x64": "0.19.0",
+ "@esbuild/sunos-x64": "0.19.0",
+ "@esbuild/win32-arm64": "0.19.0",
+ "@esbuild/win32-ia32": "0.19.0",
+ "@esbuild/win32-x64": "0.19.0"
+ }
+ },
+ "lightningcss": {
+ "version": "file:../../node_modules/.pnpm/lightningcss@1.21.7/node_modules/lightningcss",
+ "requires": {
+ "@babel/parser": "^7.21.4",
+ "@babel/traverse": "^7.21.4",
+ "@codemirror/lang-css": "^6.0.1",
+ "@codemirror/lang-javascript": "^6.1.2",
+ "@codemirror/lint": "^6.1.0",
+ "@codemirror/theme-one-dark": "^6.1.0",
+ "@mdn/browser-compat-data": "^5.2.49",
+ "@napi-rs/cli": "^2.14.0",
+ "autoprefixer": "^10.4.14",
+ "codemirror": "^6.0.1",
+ "cssnano": "^5.0.8",
+ "detect-libc": "^1.0.3",
+ "esbuild": "^0.13.10",
+ "flowgen": "^1.21.0",
+ "jest-diff": "^27.4.2",
+ "json-schema-to-typescript": "^11.0.2",
+ "lightningcss-darwin-arm64": "1.21.7",
+ "lightningcss-darwin-x64": "1.21.7",
+ "lightningcss-freebsd-x64": "1.21.7",
+ "lightningcss-linux-arm-gnueabihf": "1.21.7",
+ "lightningcss-linux-arm64-gnu": "1.21.7",
+ "lightningcss-linux-arm64-musl": "1.21.7",
+ "lightningcss-linux-x64-gnu": "1.21.7",
+ "lightningcss-linux-x64-musl": "1.21.7",
+ "lightningcss-win32-x64-msvc": "1.21.7",
+ "markdown-it-anchor": "^8.6.6",
+ "markdown-it-prism": "^2.3.0",
+ "markdown-it-table-of-contents": "^0.6.0",
+ "napi-wasm": "^1.0.1",
+ "node-fetch": "^3.1.0",
+ "parcel": "^2.8.2",
+ "patch-package": "^6.5.0",
+ "path-browserify": "^1.0.1",
+ "postcss": "^8.3.11",
+ "posthtml-include": "^1.7.4",
+ "posthtml-markdownit": "^1.3.1",
+ "posthtml-prism": "^1.0.4",
+ "process": "^0.11.10",
+ "puppeteer": "^12.0.1",
+ "recast": "^0.22.0",
+ "sharp": "^0.31.1",
+ "util": "^0.12.4",
+ "uvu": "^0.5.6"
+ }
+ },
+ "pug": {
+ "version": "file:../../node_modules/.pnpm/pug@3.0.2/node_modules/pug",
+ "requires": {
+ "jstransformer-cdata": "^1.0.0",
+ "jstransformer-coffee-script": "^1.0.0",
+ "jstransformer-less": "^2.1.0",
+ "jstransformer-markdown-it": "^2.0.0",
+ "jstransformer-stylus": "^1.0.0",
+ "jstransformer-uglify-js": "^1.1.1",
+ "jstransformer-verbatim": "^1.0.0",
+ "mkdirp": "^0.5.1",
+ "pug-code-gen": "^3.0.2",
+ "pug-filters": "^4.0.0",
+ "pug-lexer": "^5.0.1",
+ "pug-linker": "^4.0.0",
+ "pug-load": "^3.0.0",
+ "pug-parser": "^6.0.0",
+ "pug-runtime": "^3.0.1",
+ "pug-strip-comments": "^2.0.0",
+ "rimraf": "^3.0.2",
+ "uglify-js": "github:mishoo/UglifyJS2#1c15d0db456ce32f1b9b507aad97e5ee5c8285f7"
+ }
+ },
+ "rollup": {
+ "version": "file:../../node_modules/.pnpm/rollup@3.28.0/node_modules/rollup",
+ "requires": {
+ "@codemirror/commands": "^6.2.4",
+ "@codemirror/lang-javascript": "^6.1.9",
+ "@codemirror/language": "^6.8.0",
+ "@codemirror/search": "^6.5.0",
+ "@codemirror/state": "^6.2.1",
+ "@codemirror/view": "^6.14.1",
+ "@jridgewell/sourcemap-codec": "^1.4.15",
+ "@mermaid-js/mermaid-cli": "^10.2.4",
+ "@rollup/plugin-alias": "^5.0.0",
+ "@rollup/plugin-buble": "^1.0.2",
+ "@rollup/plugin-commonjs": "^25.0.3",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.1.0",
+ "@rollup/plugin-replace": "^5.0.2",
+ "@rollup/plugin-terser": "^0.4.3",
+ "@rollup/plugin-typescript": "^11.1.2",
+ "@rollup/pluginutils": "^5.0.2",
+ "@types/estree": "1.0.1",
+ "@types/mocha": "^10.0.1",
+ "@types/node": "~14.18.54",
+ "@types/yargs-parser": "^21.0.0",
+ "@typescript-eslint/eslint-plugin": "^6.2.0",
+ "@typescript-eslint/parser": "^6.2.0",
+ "@vue/eslint-config-prettier": "^8.0.0",
+ "@vue/eslint-config-typescript": "^11.0.3",
+ "acorn": "^8.10.0",
+ "acorn-import-assertions": "^1.9.0",
+ "acorn-jsx": "^5.3.2",
+ "acorn-walk": "^8.2.0",
+ "buble": "^0.20.0",
+ "builtin-modules": "^3.3.0",
+ "chokidar": "^3.5.3",
+ "colorette": "^2.0.20",
+ "concurrently": "^8.2.0",
+ "core-js": "^3.31.1",
+ "date-time": "^4.0.0",
+ "es5-shim": "^4.6.7",
+ "es6-shim": "^0.35.8",
+ "eslint": "^8.45.0",
+ "eslint-config-prettier": "^8.8.0",
+ "eslint-plugin-import": "^2.27.5",
+ "eslint-plugin-prettier": "^5.0.0",
+ "eslint-plugin-unicorn": "^48.0.0",
+ "eslint-plugin-vue": "^9.15.1",
+ "fixturify": "^3.0.0",
+ "flru": "^1.0.2",
+ "fs-extra": "^11.1.1",
+ "fsevents": "~2.3.2",
+ "github-api": "^3.4.0",
+ "hash.js": "^1.1.7",
+ "husky": "^8.0.3",
+ "inquirer": "^9.2.8",
+ "is-reference": "^3.0.1",
+ "lint-staged": "^13.2.3",
+ "locate-character": "^3.0.0",
+ "magic-string": "^0.30.1",
+ "mocha": "^10.2.0",
+ "nyc": "^15.1.0",
+ "pinia": "^2.1.4",
+ "prettier": "^3.0.0",
+ "pretty-bytes": "^6.1.1",
+ "pretty-ms": "^8.0.0",
+ "requirejs": "^2.3.6",
+ "rollup": "^3.26.3",
+ "rollup-plugin-license": "^3.0.1",
+ "rollup-plugin-string": "^3.0.0",
+ "rollup-plugin-thatworks": "^1.0.4",
+ "semver": "^7.5.4",
+ "shx": "^0.3.4",
+ "signal-exit": "^4.0.2",
+ "source-map": "^0.7.4",
+ "source-map-support": "^0.5.21",
+ "systemjs": "^6.14.1",
+ "terser": "^5.19.2",
+ "tslib": "^2.6.1",
+ "typescript": "^5.1.6",
+ "vite": "^4.4.7",
+ "vitepress": "^1.0.0-beta.6",
+ "vue": "^3.3.4",
+ "weak-napi": "^2.0.2",
+ "yargs-parser": "^21.1.1"
+ }
+ },
+ "rollup-plugin-ignore": {
+ "version": "file:../../node_modules/.pnpm/rollup-plugin-ignore@1.0.10/node_modules/rollup-plugin-ignore",
+ "requires": {
+ "rollup": "^2.23.0"
+ }
+ },
+ "sass": {
+ "version": "file:../../node_modules/.pnpm/sass@1.66.1/node_modules/sass",
+ "requires": {
+ "chokidar": ">=3.0.0 <4.0.0",
+ "immutable": "^4.0.0",
+ "source-map-js": ">=0.6.2 <2.0.0"
+ }
+ },
+ "stylus": {
+ "version": "file:../../node_modules/.pnpm/stylus@0.60.0/node_modules/stylus",
+ "requires": {
+ "@adobe/css-tools": "~4.2.0",
+ "chai": "^4.3.6",
+ "debug": "^4.3.2",
+ "glob": "^7.1.6",
+ "mocha": "^9.2.0",
+ "sax": "~1.2.4",
+ "source-map": "^0.7.3"
+ }
+ },
+ "sucrase": {
+ "version": "file:../../node_modules/.pnpm/sucrase@3.34.0/node_modules/sucrase",
+ "requires": {
+ "@babel/core": "^7.22.5",
+ "@jridgewell/gen-mapping": "^0.3.2",
+ "@jridgewell/trace-mapping": "^0.3.18",
+ "@types/glob": "^7",
+ "@types/mocha": "^9.1.1",
+ "@types/mz": "^2.7.4",
+ "@types/node": "^20.3.2",
+ "@typescript-eslint/eslint-plugin": "^5.60.1",
+ "@typescript-eslint/parser": "^5.60.1",
+ "chalk": "^4",
+ "codecov": "^3.8.3",
+ "commander": "^4.0.0",
+ "eslint": "^8.43.0",
+ "eslint-config-airbnb-base": "^15.0.0",
+ "eslint-config-prettier": "^8.8.0",
+ "eslint-plugin-import": "~2.26",
+ "eslint-plugin-prettier": "^4.2.1",
+ "glob": "7.1.6",
+ "lines-and-columns": "^1.1.6",
+ "mocha": "^10.2.0",
+ "mz": "^2.7.0",
+ "nyc": "^15.1.0",
+ "pirates": "^4.0.1",
+ "prettier": "^2.8.8",
+ "sucrase": "^3.33.0",
+ "test262-harness": "^10.0.0",
+ "ts-interface-builder": "^0.3.3",
+ "ts-interface-checker": "^0.1.9",
+ "typescript": "~5.0"
+ }
+ },
+ "sugarss": {
+ "version": "file:../../node_modules/.pnpm/sugarss@4.0.1_postcss@8.4.27/node_modules/sugarss",
+ "requires": {}
+ },
+ "svelte": {
+ "version": "file:../../node_modules/.pnpm/svelte@4.2.0/node_modules/svelte",
+ "requires": {
+ "@ampproject/remapping": "^2.2.1",
+ "@jridgewell/sourcemap-codec": "^1.4.15",
+ "@jridgewell/trace-mapping": "^0.3.18",
+ "@playwright/test": "^1.35.1",
+ "@rollup/plugin-commonjs": "^24.1.0",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.1.0",
+ "@sveltejs/eslint-config": "^6.0.4",
+ "@types/aria-query": "^5.0.1",
+ "@types/estree": "^1.0.1",
+ "@types/node": "^14.18.51",
+ "acorn": "^8.9.0",
+ "agadoo": "^3.0.0",
+ "aria-query": "^5.3.0",
+ "axobject-query": "^3.2.1",
+ "code-red": "^1.0.3",
+ "css-tree": "^2.3.1",
+ "dts-buddy": "^0.1.7",
+ "esbuild": "^0.18.11",
+ "estree-walker": "^3.0.3",
+ "happy-dom": "^9.20.3",
+ "is-reference": "^3.0.1",
+ "jsdom": "^21.1.2",
+ "kleur": "^4.1.5",
+ "locate-character": "^3.0.0",
+ "magic-string": "^0.30.0",
+ "periscopic": "^3.1.0",
+ "rollup": "^3.26.2",
+ "source-map": "^0.7.4",
+ "tiny-glob": "^0.2.9",
+ "typescript": "^5.1.3",
+ "vitest": "^0.33.0"
+ }
+ },
+ "svelte-hmr": {
+ "version": "file:../../node_modules/.pnpm/svelte-hmr@0.15.3_svelte@4.2.0/node_modules/svelte-hmr",
+ "requires": {
+ "dotenv": "^10.0.0",
+ "prettier": "^1.19.1",
+ "svelte": "^3.59.2",
+ "tap-mocha-reporter": "^5.0.3",
+ "zoar": "^0.3.0",
+ "zorax": "^0.0.14"
+ }
+ },
+ "vite": {
+ "version": "file:../../node_modules/.pnpm/vite@4.4.9_@types+node@20.3.1_less@4.1.3_lightningcss@1.21.7_sass@1.66.1_stylus@0.60.0_sugarss@4.0.1/node_modules/vite",
+ "requires": {
+ "@ampproject/remapping": "^2.2.1",
+ "@babel/parser": "^7.22.7",
+ "@babel/types": "^7.22.5",
+ "@jridgewell/trace-mapping": "^0.3.18",
+ "@rollup/plugin-alias": "^4.0.4",
+ "@rollup/plugin-commonjs": "^25.0.3",
+ "@rollup/plugin-dynamic-import-vars": "^2.0.4",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "15.1.0",
+ "@rollup/plugin-typescript": "^11.1.2",
+ "@rollup/pluginutils": "^5.0.2",
+ "@types/escape-html": "^1.0.2",
+ "@types/pnpapi": "^0.0.2",
+ "acorn": "^8.10.0",
+ "acorn-walk": "^8.2.0",
+ "cac": "^6.7.14",
+ "chokidar": "^3.5.3",
+ "connect": "^3.7.0",
+ "connect-history-api-fallback": "^2.0.0",
+ "convert-source-map": "^2.0.0",
+ "cors": "^2.8.5",
+ "cross-spawn": "^7.0.3",
+ "debug": "^4.3.4",
+ "dep-types": "link:./src/types",
+ "dotenv": "^16.3.1",
+ "dotenv-expand": "^9.0.0",
+ "es-module-lexer": "^1.3.0",
+ "esbuild": "^0.18.10",
+ "escape-html": "^1.0.3",
+ "estree-walker": "^3.0.3",
+ "etag": "^1.8.1",
+ "fast-glob": "^3.3.1",
+ "fsevents": "~2.3.2",
+ "http-proxy": "^1.18.1",
+ "json-stable-stringify": "^1.0.2",
+ "launch-editor-middleware": "^2.6.0",
+ "lightningcss": "^1.21.5",
+ "magic-string": "^0.30.2",
+ "micromatch": "^4.0.5",
+ "mlly": "^1.4.0",
+ "mrmime": "^1.0.1",
+ "okie": "^1.0.1",
+ "open": "^8.4.2",
+ "parse5": "^7.1.2",
+ "periscopic": "^3.1.0",
+ "picocolors": "^1.0.0",
+ "picomatch": "^2.3.1",
+ "postcss": "^8.4.27",
+ "postcss-import": "^15.1.0",
+ "postcss-load-config": "^4.0.1",
+ "postcss-modules": "^6.0.0",
+ "resolve.exports": "^2.0.2",
+ "rollup": "^3.27.1",
+ "rollup-plugin-license": "^3.0.1",
+ "sirv": "^2.0.3",
+ "source-map-support": "^0.5.21",
+ "strip-ansi": "^7.1.0",
+ "strip-literal": "^1.3.0",
+ "tsconfck": "^2.1.2",
+ "tslib": "^2.6.1",
+ "types": "link:./types",
+ "ufo": "^1.2.0",
+ "ws": "^8.13.0"
+ }
+ },
+ "yootils": {
+ "version": "file:../../node_modules/.pnpm/yootils@0.3.1/node_modules/yootils",
+ "requires": {
+ "agadoo": "^2.0.0",
+ "esbuild": "^0.12.8",
+ "prettier": "^2.3.1",
+ "typescript": "^4.3.2",
+ "uvu": "^0.5.1"
+ }
+ }
+ }
+}
diff --git a/js/preview/package.json b/js/preview/package.json
new file mode 100644
index 000000000000..0cec46812701
--- /dev/null
+++ b/js/preview/package.json
@@ -0,0 +1,41 @@
+{
+ "name": "@gradio/preview",
+ "version": "0.1.0-beta.5",
+ "description": "Gradio UI packages",
+ "type": "module",
+ "main": "src/index.ts",
+ "author": "",
+ "license": "ISC",
+ "private": false,
+ "scripts": {
+ "build": "rollup -c"
+ },
+ "devDependencies": {
+ "@rollup/plugin-commonjs": "^25.0.4",
+ "@rollup/plugin-json": "^6.0.0",
+ "@rollup/plugin-node-resolve": "^15.1.0",
+ "@rollup/plugin-typescript": "^11.1.2",
+ "rollup": "^3.28.0",
+ "svelte-hmr": "^0.15.3",
+ "vite": "^4.4.9"
+ },
+ "dependencies": {
+ "@originjs/vite-plugin-commonjs": "^1.0.3",
+ "@rollup/plugin-sucrase": "^5.0.1",
+ "@sveltejs/vite-plugin-svelte": "^2.4.2",
+ "@types/which": "^3.0.0",
+ "coffeescript": "^2.7.0",
+ "css-tree": "2.3.1",
+ "esbuild-wasm": "^0.19.0",
+ "lightningcss": "^1.21.7",
+ "pug": "^3.0.2",
+ "rollup-plugin-ignore": "^1.0.10",
+ "sass": "^1.66.1",
+ "stylus": "^0.60.0",
+ "sucrase": "^3.34.0",
+ "sugarss": "^4.0.1",
+ "svelte": "^4.2.0",
+ "which": "4.0.0",
+ "yootils": "^0.3.1"
+ }
+}
diff --git a/js/preview/rollup.config.js b/js/preview/rollup.config.js
new file mode 100644
index 000000000000..93926cb799cf
--- /dev/null
+++ b/js/preview/rollup.config.js
@@ -0,0 +1,197 @@
+// @ts-nocheck
+import { createRequire } from "node:module";
+import { join, dirname } from "path";
+import { cpSync, writeFileSync, rmSync, existsSync } from "fs";
+import { fileURLToPath } from "url";
+
+import ts from "@rollup/plugin-typescript";
+import node from "@rollup/plugin-node-resolve";
+import cjs from "@rollup/plugin-commonjs";
+import json from "@rollup/plugin-json";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+
+const require = createRequire(import.meta.url);
+
+const esbuild_binary_path = require.resolve("esbuild-wasm");
+const vite_client = require.resolve("vite/dist/client/client.mjs");
+const hmr = require.resolve("svelte-hmr");
+
+const output_svelte_dir = "../../gradio/templates/frontend/assets/svelte";
+
+const onwarn = (warning, warn) => {
+ if (warning.plugin === "typescript") return;
+ if (warning.code === "CIRCULAR_DEPENDENCY") return;
+ if (warning.code === "EVAL") return;
+
+ warn(warning);
+};
+
+const RE_SVELTE_IMPORT =
+ /import\s+([\w*{},\s]+)\s+from\s+['"](svelte|svelte\/internal)['"]/g;
+
+const dirname_def = `
+import { dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+`;
+
+function inject_dirname() {
+ return {
+ name: "inject __dirname",
+
+ transform(code, id) {
+ if (id.includes("svelte-hmr/index.js")) {
+ return `${dirname_def}\n${code}`;
+ }
+ }
+ };
+}
+
+function resolve_imports() {
+ return {
+ name: "resolve-imports",
+ resolveId(id) {
+ const pkgs = [
+ "sugarss",
+ "stylus",
+ "sass",
+ "pug",
+ "coffeescript",
+ "lightningcss"
+ ];
+ if (pkgs.includes(id)) {
+ return join(__dirname, "src", "placeholder.ts");
+ }
+ if (id === "svelte/compiler") return "../compiler.js";
+ },
+ transform(code) {
+ const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
+ const identifier = $1.trim().startsWith("* as")
+ ? $1.replace("* as", "").trim()
+ : $1.trim();
+ return `const ${identifier.replace(
+ " as ",
+ ": "
+ )} = window.__gradio__svelte__internal;`;
+ });
+ return {
+ code: new_code,
+ map: null
+ };
+ }
+ };
+}
+
+export function copy_files() {
+ return {
+ name: "copy_files",
+ writeBundle() {
+ cpSync(join(vite_client, ".."), "../../gradio/node/dist/client", {
+ recursive: true
+ });
+
+ cpSync(join(hmr, "../runtime"), "../../gradio/node/dev/files/runtime", {
+ recursive: true
+ });
+ cpSync(
+ join(esbuild_binary_path, "..", "..", ".."),
+ "../../gradio/node/dev/node_modules",
+ {
+ recursive: true
+ }
+ );
+
+ cpSync("./src/examine.py", "../../gradio/node/examine.py");
+
+ writeFileSync(
+ "../../gradio/node/package.json",
+ `{"type": "module", "version": "0.0.0"}`,
+ {
+ encoding: "utf-8"
+ }
+ );
+ }
+ };
+}
+
+const plugins = [node({ preferBuiltins: true }), json(), cjs(), ts()];
+
+export default [
+ {
+ input: "src/index.ts",
+ output: {
+ dir: "../../gradio/node/dev/files",
+ format: "esm",
+ minifyInternalExports: false
+ },
+ onwarn,
+ plugins: [
+ {
+ resolveId(id, importer) {
+ if (id === "esbuild") {
+ return "esbuild-wasm";
+ }
+ }
+ },
+ ...plugins,
+ {
+ name: "clean_dir",
+ buildStart() {
+ if (existsSync("../../gradio/node")) {
+ rmSync("../../gradio/node", { recursive: true });
+ }
+ }
+ },
+ resolve_imports(),
+ inject_dirname(),
+ copy_files()
+ ],
+ external: ["fsevents", "esbuild-wasm", "../compiler.js"]
+ },
+ {
+ input: "src/svelte-submodules.ts",
+ output: {
+ file: join(output_svelte_dir, "svelte-submodules.js"),
+ format: "esm"
+ },
+ onwarn,
+ plugins
+ },
+
+ {
+ input: "src/svelte-internal.ts",
+ output: {
+ file: join(output_svelte_dir, "svelte.js"),
+ format: "esm"
+ },
+ onwarn,
+ plugins
+ },
+
+ {
+ input: "src/compiler.ts",
+ output: {
+ file: "../../gradio/node/dev/compiler.js",
+ format: "esm"
+ },
+
+ onwarn,
+ plugins: [
+ ...plugins,
+ json({
+ include: ["**/node_modules/**", "node_modules/**"]
+ }),
+ {
+ resolveId(id) {
+ if (id === "css-tree") {
+ return require.resolve(
+ "./node_modules/css-tree/dist/csstree.esm.js"
+ );
+ }
+ }
+ }
+ ]
+ }
+];
diff --git a/js/preview/src/build.ts b/js/preview/src/build.ts
new file mode 100644
index 000000000000..2b9d9067826f
--- /dev/null
+++ b/js/preview/src/build.ts
@@ -0,0 +1,59 @@
+import * as fs from "fs";
+import { join } from "path";
+import { build } from "vite";
+import { plugins, make_gradio_plugin } from "./plugins";
+import path from "path";
+import { examine_module } from "./index";
+
+import { patch } from "toml-patch";
+interface BuildOptions {
+ component_dir: string;
+ root_dir: string;
+}
+
+export async function make_build({
+ component_dir,
+ root_dir
+}: BuildOptions): Promise {
+ process.env.gradio_mode = "dev";
+ const svelte_dir = join(root_dir, "assets", "svelte");
+
+ const module_meta = examine_module(component_dir, root_dir, "build");
+ try {
+ for (const comp of module_meta) {
+ const template_dir = comp.template_dir;
+ const source_dir = comp.frontend_dir;
+
+ const entries = ["interactive", "example", "static"];
+
+ for (const entry of entries) {
+ try {
+ const x = await build({
+ plugins: [
+ ...plugins,
+ make_gradio_plugin({ mode: "build", svelte_dir })
+ ],
+ build: {
+ emptyOutDir: true,
+ outDir: join(template_dir, entry),
+ lib: {
+ entry: join(source_dir, entry, "index.ts"),
+ fileName: "index.js",
+ formats: ["es"]
+ },
+ rollupOptions: {
+ output: {
+ entryFileNames: "[name].js"
+ }
+ }
+ }
+ });
+ } catch (e) {
+ console.error(e);
+ }
+ }
+ }
+ } catch (e) {
+ console.error(e);
+ }
+}
diff --git a/js/preview/src/compiler.ts b/js/preview/src/compiler.ts
new file mode 100644
index 000000000000..de5f5c6383de
--- /dev/null
+++ b/js/preview/src/compiler.ts
@@ -0,0 +1,2 @@
+export * from "svelte/compiler";
+export * as default from "svelte/compiler";
diff --git a/js/preview/src/dev.ts b/js/preview/src/dev.ts
new file mode 100644
index 000000000000..6d0009943e14
--- /dev/null
+++ b/js/preview/src/dev.ts
@@ -0,0 +1,139 @@
+import { join } from "path";
+import * as fs from "fs";
+import { createServer, createLogger } from "vite";
+import { plugins, make_gradio_plugin } from "./plugins";
+import { examine_module } from "./index";
+
+const vite_messages_to_ignore = [
+ "Default and named imports from CSS files are deprecated."
+];
+
+const logger = createLogger();
+const originalWarning = logger.warn;
+logger.warn = (msg, options) => {
+ if (vite_messages_to_ignore.some((m) => msg.includes(m))) return;
+
+ originalWarning(msg, options);
+};
+
+interface ServerOptions {
+ component_dir: string;
+ root_dir: string;
+ frontend_port: number;
+ backend_port: number;
+ host: string;
+}
+
+export async function create_server({
+ component_dir,
+ root_dir,
+ frontend_port,
+ backend_port,
+ host
+}: ServerOptions): Promise {
+ process.env.gradio_mode = "dev";
+ const imports = generate_imports(component_dir, root_dir);
+
+ const NODE_DIR = join(root_dir, "..", "..", "node", "dev");
+ const svelte_dir = join(root_dir, "assets", "svelte");
+
+ try {
+ const server = await createServer({
+ esbuild: false,
+ customLogger: logger,
+ mode: "development",
+ configFile: false,
+ root: root_dir,
+
+ optimizeDeps: {
+ disabled: true
+ },
+ server: {
+ port: frontend_port,
+ host: host,
+ fs: {
+ allow: [root_dir, NODE_DIR, component_dir]
+ }
+ },
+ plugins: [
+ ...plugins,
+ make_gradio_plugin({
+ mode: "dev",
+ backend_port,
+ svelte_dir,
+ imports
+ })
+ ]
+ });
+
+ await server.listen();
+
+ console.info(
+ `[orange3]Frontend Server[/] (Go here): ${server.resolvedUrls?.local}`
+ );
+ } catch (e) {
+ console.error(e);
+ }
+}
+
+function find_frontend_folders(start_path: string): string[] {
+ if (!fs.existsSync(start_path)) {
+ console.warn("No directory found at:", start_path);
+ return [];
+ }
+
+ if (fs.existsSync(join(start_path, "pyproject.toml"))) return [start_path];
+
+ const results: string[] = [];
+ const dir = fs.readdirSync(start_path);
+ dir.forEach((dir) => {
+ const filepath = join(start_path, dir);
+ if (fs.existsSync(filepath)) {
+ if (fs.existsSync(join(filepath, "pyproject.toml")))
+ results.push(filepath);
+ }
+ });
+
+ return results;
+}
+
+function to_posix(_path: string): string {
+ const isExtendedLengthPath = /^\\\\\?\\/.test(_path);
+ const hasNonAscii = /[^\u0000-\u0080]+/.test(_path); // eslint-disable-line no-control-regex
+
+ if (isExtendedLengthPath || hasNonAscii) {
+ return _path;
+ }
+
+ return _path.replace(/\\/g, "/");
+}
+
+function generate_imports(component_dir: string, root: string): string {
+ const components = find_frontend_folders(component_dir);
+
+ const component_entries = components.flatMap((component) => {
+ return examine_module(component, root, "dev");
+ });
+
+ const imports = component_entries.reduce((acc, component) => {
+ const x = {
+ interactive: to_posix(join(component.frontend_dir, "interactive")),
+ static: to_posix(join(component.frontend_dir, "static")),
+ example: to_posix(join(component.frontend_dir, "example"))
+ };
+
+ const interactive = fs.existsSync(x.interactive)
+ ? `interactive: () => import("${x.interactive}"),\n`
+ : "";
+ const example = fs.existsSync(x.example)
+ ? `example: () => import("${x.example}"),\n`
+ : "";
+ return `${acc}"${component.component_class_id}": {
+ ${interactive}
+ ${example}
+ static: () => import("${x.static}")
+ },\n`;
+ }, "");
+
+ return `{${imports}}`;
+}
diff --git a/js/preview/src/examine.py b/js/preview/src/examine.py
new file mode 100644
index 000000000000..604f3d2999bd
--- /dev/null
+++ b/js/preview/src/examine.py
@@ -0,0 +1,71 @@
+import argparse
+import importlib
+import inspect
+import os
+from pathlib import Path
+
+from tomlkit import dumps, parse
+
+from gradio.blocks import BlockContext
+from gradio.components import Component
+
+if __name__ == "__main__":
+
+ parser = argparse.ArgumentParser(description="Description of your program")
+ parser.add_argument("-m", "--mode", help="Build mode or dev mode")
+ args = parser.parse_args()
+
+ with open("../pyproject.toml") as f:
+ pyproject_source = f.read()
+
+ pyproject_toml = parse(pyproject_source)
+ if "gradio custom component" not in pyproject_toml["project"]["keywords"]:
+ exit(0)
+
+ module_name = pyproject_toml["project"]["name"]
+ module = importlib.import_module(module_name)
+
+ artifacts: list[str] = pyproject_toml["tool"]["hatch"]["build"]["artifacts"]
+
+
+ def get_relative_path(path):
+ return (
+ os.path.abspath(Path(__file__).parent / path)
+ .replace(os.path.abspath(os.getcwd()), "")
+ .lstrip("/")
+ )
+
+
+ for name in dir(module):
+ value = getattr(module, name)
+ if name.startswith("__"):
+ continue
+
+ if inspect.isclass(value) and (
+ issubclass(value, BlockContext) or issubclass(value, Component)
+ ):
+ file_location = Path(inspect.getfile(value)).parent
+
+ found = [
+ x
+ for x in artifacts
+ if get_relative_path(Path("..") / x)
+ == get_relative_path(file_location / value.TEMPLATE_DIR)
+ ]
+ if len(found) == 0:
+ artifacts.append(
+ os.path.abspath(file_location / value.TEMPLATE_DIR)
+ .replace(os.path.abspath(Path("..")), "")
+ .lstrip("/")
+ )
+
+ print(
+ f"{name}~|~|~|~{os.path.abspath(file_location / value.TEMPLATE_DIR)}~|~|~|~{os.path.abspath(file_location / value.FRONTEND_DIR)}~|~|~|~{value.get_component_class_id()}"
+ )
+ continue
+
+ if args.mode == "build":
+ pyproject_toml["tool"]["hatch"]["build"]["artifacts"] = artifacts
+
+ with open("../pyproject.toml", "w") as f:
+ f.write(dumps(pyproject_toml))
diff --git a/js/preview/src/index.ts b/js/preview/src/index.ts
new file mode 100644
index 000000000000..f99c0d48024c
--- /dev/null
+++ b/js/preview/src/index.ts
@@ -0,0 +1,180 @@
+import { ChildProcess, spawn, spawnSync } from "node:child_process";
+import * as net from "net";
+
+import { create_server } from "./dev";
+import { make_build } from "./build";
+import { join } from "path";
+import which from "which";
+
+export interface ComponentMeta {
+ name: string;
+ template_dir: string;
+ frontend_dir: string;
+ component_class_id: string;
+}
+
+const args = process.argv.slice(2);
+// get individual args as `--arg value` or `value`
+
+function parse_args(args: string[]): Record {
+ const arg_map: Record = {};
+ for (let i = 0; i < args.length; i++) {
+ const arg = args[i];
+ if (arg.startsWith("--")) {
+ const name = arg.slice(2);
+ const value = args[i + 1];
+ arg_map[name] = value;
+ i++;
+ }
+ }
+ return arg_map;
+}
+
+const parsed_args = parse_args(args);
+
+async function run(): Promise {
+ if (parsed_args.mode === "build") {
+ await make_build({
+ component_dir: parsed_args["component-directory"],
+ root_dir: parsed_args.root
+ });
+ } else {
+ const [backend_port, frontend_port] = await find_free_ports(7860, 8860);
+ const options = {
+ component_dir: parsed_args["component-directory"],
+ root_dir: parsed_args.root,
+ frontend_port,
+ backend_port,
+ host: parsed_args.host,
+ ...parsed_args
+ };
+ process.env.GRADIO_BACKEND_PORT = backend_port.toString();
+
+ const _process = spawn(
+ which.sync("gradio"),
+ [parsed_args.app, "--watch-dirs", options.component_dir],
+ {
+ shell: true,
+ stdio: "pipe",
+ cwd: process.cwd(),
+ env: {
+ ...process.env,
+ GRADIO_SERVER_PORT: backend_port.toString(),
+ PYTHONUNBUFFERED: "true"
+ }
+ }
+ );
+
+ _process.stdout.setEncoding("utf8");
+ _process.stderr.setEncoding("utf8");
+
+ function std_out(mode: "stdout" | "stderr") {
+ return function (data: Buffer): void {
+ const _data = data.toString();
+
+ if (_data.includes("Running on")) {
+ create_server({
+ component_dir: options.component_dir,
+ root_dir: options.root_dir,
+ frontend_port,
+ backend_port,
+ host: options.host
+ });
+ }
+
+ process[mode].write(_data);
+ };
+ }
+
+ _process.stdout.on("data", std_out("stdout"));
+ _process.stderr.on("data", std_out("stderr"));
+ _process.on("exit", () => kill_process(_process));
+ _process.on("close", () => kill_process(_process));
+ _process.on("disconnect", () => kill_process(_process));
+ }
+}
+
+function kill_process(process: ChildProcess): void {
+ process.kill("SIGKILL");
+}
+
+export { create_server };
+
+run();
+
+export async function find_free_ports(
+ start_port: number,
+ end_port: number
+): Promise<[number, number]> {
+ let found_ports: number[] = [];
+
+ for (let port = start_port; port < end_port; port++) {
+ if (await is_free_port(port)) {
+ found_ports.push(port);
+ if (found_ports.length === 2) {
+ return [found_ports[0], found_ports[1]];
+ }
+ }
+ }
+
+ throw new Error(
+ `Could not find free ports: there were not enough ports available.`
+ );
+}
+
+export function is_free_port(port: number): Promise {
+ return new Promise((accept, reject) => {
+ const sock = net.createConnection(port, "127.0.0.1");
+ sock.once("connect", () => {
+ sock.end();
+ accept(false);
+ });
+ sock.once("error", (e) => {
+ sock.destroy();
+ //@ts-ignore
+ if (e.code === "ECONNREFUSED") {
+ accept(true);
+ } else {
+ reject(e);
+ }
+ });
+ });
+}
+
+function is_truthy(value: T | null | undefined | false): value is T {
+ return value !== null && value !== undefined && value !== false;
+}
+
+export function examine_module(
+ component_dir: string,
+ root: string,
+ mode: "build" | "dev"
+): ComponentMeta[] {
+ const _process = spawnSync(
+ which.sync("python"),
+ [join(root, "..", "..", "node", "examine.py"), "-m", mode],
+ {
+ cwd: join(component_dir, "backend"),
+ stdio: "pipe"
+ }
+ );
+
+ return _process.stdout
+ .toString()
+ .trim()
+ .split("\n")
+ .map((line) => {
+ const [name, template_dir, frontend_dir, component_class_id] =
+ line.split("~|~|~|~");
+ if (name && template_dir && frontend_dir && component_class_id) {
+ return {
+ name: name.trim(),
+ template_dir: template_dir.trim(),
+ frontend_dir: frontend_dir.trim(),
+ component_class_id: component_class_id.trim()
+ };
+ }
+ return false;
+ })
+ .filter(is_truthy);
+}
diff --git a/js/preview/src/placeholder.ts b/js/preview/src/placeholder.ts
new file mode 100644
index 000000000000..ff8b4c56321a
--- /dev/null
+++ b/js/preview/src/placeholder.ts
@@ -0,0 +1 @@
+export default {};
diff --git a/js/preview/src/plugins.ts b/js/preview/src/plugins.ts
new file mode 100644
index 000000000000..4a52ba97514e
--- /dev/null
+++ b/js/preview/src/plugins.ts
@@ -0,0 +1,110 @@
+import type { Plugin, PluginOption } from "vite";
+import { svelte } from "@sveltejs/vite-plugin-svelte";
+import { transform } from "sucrase";
+import { viteCommonjs } from "@originjs/vite-plugin-commonjs";
+import sucrase from "@rollup/plugin-sucrase";
+import { createLogger } from "vite";
+import { join } from "path";
+
+const svelte_codes_to_ignore: Record = {
+ "reactive-component": "Icon"
+};
+
+const RE_SVELTE_IMPORT =
+ /import\s+([\w*{},\s]+)\s+from\s+['"](svelte|svelte\/internal)['"]/g;
+
+export const plugins: PluginOption[] = [
+ viteCommonjs() as Plugin,
+ svelte({
+ onwarn(warning, handler) {
+ if (
+ svelte_codes_to_ignore.hasOwnProperty(warning.code) &&
+ svelte_codes_to_ignore[warning.code] &&
+ warning.message.includes(svelte_codes_to_ignore[warning.code])
+ ) {
+ return;
+ }
+ handler!(warning);
+ },
+ prebundleSvelteLibraries: false,
+ hot: true,
+ compilerOptions: {
+ discloseVersion: false
+ },
+ preprocess: [
+ {
+ script: ({ attributes, filename, content }) => {
+ if (attributes.lang === "ts") {
+ const compiledCode = transform(content, {
+ transforms: ["typescript"],
+ keepUnusedImports: true
+ });
+ return {
+ code: compiledCode.code,
+ map: compiledCode.sourceMap
+ };
+ }
+ }
+ }
+ ]
+ }) as unknown as Plugin,
+ sucrase({
+ transforms: ["typescript"],
+ include: ["**/*.ts", "**/*.tsx"]
+ })
+];
+
+interface GradioPluginOptions {
+ mode: "dev" | "build";
+ svelte_dir: string;
+ backend_port?: number;
+ imports?: string;
+}
+
+export function make_gradio_plugin({
+ mode,
+ svelte_dir,
+ backend_port,
+ imports
+}: GradioPluginOptions): Plugin {
+ return {
+ name: "gradio",
+ enforce: "pre",
+ transform(code) {
+ const new_code = code.replace(RE_SVELTE_IMPORT, (str, $1, $2) => {
+ const identifier = $1.trim().startsWith("* as")
+ ? $1.replace("* as", "").trim()
+ : $1.trim();
+ return `const ${identifier.replace(
+ " as ",
+ ": "
+ )} = window.__gradio__svelte__internal;`;
+ });
+ return {
+ code: new_code,
+ map: null
+ };
+ },
+ resolveId(id) {
+ if (
+ id !== "svelte" &&
+ id !== "svelte/internal" &&
+ id.startsWith("svelte/")
+ ) {
+ return join(svelte_dir, "svelte-submodules.js");
+ }
+ },
+ transformIndexHtml(html) {
+ return mode === "dev"
+ ? [
+ {
+ tag: "script",
+ children: `window.__GRADIO_DEV__ = "dev";
+ window.__GRADIO__SERVER_PORT__ = ${backend_port};
+ window.__GRADIO__CC__ = ${imports};`
+ }
+ ]
+ : undefined;
+ }
+ };
+}
diff --git a/js/preview/src/svelte-disclose.ts b/js/preview/src/svelte-disclose.ts
new file mode 100644
index 000000000000..54354dfd5a9e
--- /dev/null
+++ b/js/preview/src/svelte-disclose.ts
@@ -0,0 +1 @@
+export * from "svelte/internal/disclose-version";
diff --git a/js/preview/src/svelte-internal.ts b/js/preview/src/svelte-internal.ts
new file mode 100644
index 000000000000..c51e78007f14
--- /dev/null
+++ b/js/preview/src/svelte-internal.ts
@@ -0,0 +1 @@
+export * from "svelte/internal";
diff --git a/js/preview/src/svelte-submodules.ts b/js/preview/src/svelte-submodules.ts
new file mode 100644
index 000000000000..2c331977fd74
--- /dev/null
+++ b/js/preview/src/svelte-submodules.ts
@@ -0,0 +1,5 @@
+export * from "svelte/transition";
+export { spring, tweened } from "svelte/motion";
+export * from "svelte/store";
+export * from "svelte/easing";
+export * from "svelte/animate";
diff --git a/js/preview/src/svelte.ts b/js/preview/src/svelte.ts
new file mode 100644
index 000000000000..69f74aae9d07
--- /dev/null
+++ b/js/preview/src/svelte.ts
@@ -0,0 +1,16 @@
+export {
+ // this proxy is very important, to ensure that we always refer to the same base Component class which is critical for our components to work
+ SvelteComponent as SvelteComponentDev,
+ SvelteComponent,
+ onMount,
+ onDestroy,
+ beforeUpdate,
+ afterUpdate,
+ setContext,
+ getContext,
+ getAllContexts,
+ hasContext,
+ tick,
+ createEventDispatcher,
+ SvelteComponentTyped
+} from "svelte/internal";
diff --git a/js/preview/test/imageslider/.gitignore b/js/preview/test/imageslider/.gitignore
new file mode 100644
index 000000000000..4162e6e9956a
--- /dev/null
+++ b/js/preview/test/imageslider/.gitignore
@@ -0,0 +1,9 @@
+# Python build
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
\ No newline at end of file
diff --git a/js/preview/test/imageslider/backend/imageslider/__init__.py b/js/preview/test/imageslider/backend/imageslider/__init__.py
new file mode 100644
index 000000000000..190fe0e64385
--- /dev/null
+++ b/js/preview/test/imageslider/backend/imageslider/__init__.py
@@ -0,0 +1,4 @@
+
+from .imageslider import ImageSlider
+
+__all__ = ['ImageSlider']
diff --git a/js/preview/test/imageslider/backend/imageslider/imageslider.py b/js/preview/test/imageslider/backend/imageslider/imageslider.py
new file mode 100644
index 000000000000..1af96a57f8cc
--- /dev/null
+++ b/js/preview/test/imageslider/backend/imageslider/imageslider.py
@@ -0,0 +1,329 @@
+"""gr.Image() component."""
+
+from __future__ import annotations
+
+import warnings
+from pathlib import Path
+from typing import Any, Literal
+
+import numpy as np
+import PIL
+import PIL.ImageOps
+from gradio_client import utils as client_utils
+from gradio_client.documentation import document, set_documentation_group
+from PIL import Image as _Image # using _ to minimize namespace pollution
+
+from gradio import processing_utils, utils
+from gradio.components.base import Component, StreamingInput, _Keywords
+from gradio.data_classes import FileData
+from gradio.events import Events
+
+set_documentation_group("component")
+_Image.init() # fixes https://github.com/gradio-app/gradio/issues/2843
+
+
+@document()
+class ImageSlider(StreamingInput, Component):
+ """
+ Creates an image component that can be used to upload/draw images (as an input) or display images (as an output).
+ Preprocessing: passes the uploaded image as a {numpy.array}, {PIL.Image} or {str} filepath depending on `type` -- unless `tool` is `sketch` AND source is one of `upload` or `webcam`. In these cases, a {dict} with keys `image` and `mask` is passed, and the format of the corresponding values depends on `type`.
+ Postprocessing: expects a {numpy.array}, {PIL.Image} or {str} or {pathlib.Path} filepath to an image and displays the image.
+ Examples-format: a {str} filepath to a local file that contains the image.
+ Demos: image_mod, image_mod_default_image
+ Guides: image-classification-in-pytorch, image-classification-in-tensorflow, image-classification-with-vision-transformers, building-a-pictionary_app, create-your-own-friends-with-a-gan
+ """
+
+ EVENTS = [
+ Events.edit,
+ Events.clear,
+ Events.change,
+ Events.stream,
+ Events.select,
+ Events.upload,
+ ]
+ data_model = FileData
+
+ def __init__(
+ self,
+ value: str | _Image.Image | np.ndarray | None = None,
+ *,
+ shape: tuple[int, int] | None = None,
+ height: int | None = None,
+ width: int | None = None,
+ image_mode: Literal[
+ "1", "L", "P", "RGB", "RGBA", "CMYK", "YCbCr", "LAB", "HSV", "I", "F"
+ ] = "RGB",
+ invert_colors: bool = False,
+ source: Literal["upload", "webcam", "canvas"] = "upload",
+ tool: Literal["editor", "select", "sketch", "color-sketch"] | None = None,
+ type: Literal["numpy", "pil", "filepath"] = "numpy",
+ label: str | None = None,
+ every: float | None = None,
+ show_label: bool | None = None,
+ show_download_button: bool = True,
+ container: bool = True,
+ scale: int | None = None,
+ min_width: int = 160,
+ interactive: bool | None = None,
+ visible: bool = True,
+ streaming: bool = False,
+ elem_id: str | None = None,
+ elem_classes: list[str] | str | None = None,
+ mirror_webcam: bool = True,
+ brush_radius: float | None = None,
+ brush_color: str = "#000000",
+ mask_opacity: float = 0.7,
+ show_share_button: bool | None = None,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ value: A PIL Image, numpy array, path or URL for the default value that Image component is going to take. If callable, the function will be called whenever the app loads to set the initial value of the component.
+ shape: (width, height) shape to crop and resize image when passed to function. If None, matches input image size. Pass None for either width or height to only crop and resize the other.
+ height: Height of the displayed image in pixels.
+ width: Width of the displayed image in pixels.
+ image_mode: "RGB" if color, or "L" if black and white. See https://pillow.readthedocs.io/en/stable/handbook/concepts.html for other supported image modes and their meaning.
+ invert_colors: whether to invert the image as a preprocessing step.
+ source: Source of image. "upload" creates a box where user can drop an image file, "webcam" allows user to take snapshot from their webcam, "canvas" defaults to a white image that can be edited and drawn upon with tools.
+ tool: Tools used for editing. "editor" allows a full screen editor (and is the default if source is "upload" or "webcam"), "select" provides a cropping and zoom tool, "sketch" allows you to create a binary sketch (and is the default if source="canvas"), and "color-sketch" allows you to created a sketch in different colors. "color-sketch" can be used with source="upload" or "webcam" to allow sketching on an image. "sketch" can also be used with "upload" or "webcam" to create a mask over an image and in that case both the image and mask are passed into the function as a dictionary with keys "image" and "mask" respectively.
+ type: The format the image is converted to before being passed into the prediction function. "numpy" converts the image to a numpy array with shape (height, width, 3) and values from 0 to 255, "pil" converts the image to a PIL image object, "filepath" passes a str path to a temporary file containing the image.
+ label: component name in interface.
+ every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+ show_label: if True, will display label.
+ show_download_button: If True, will display button to download image.
+ container: If True, will place the component in a container - providing some extra padding around the border.
+ scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
+ min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+ interactive: if True, will allow users to upload and edit an image; if False, can only be used to display images. If not provided, this is inferred based on whether the component is used as an input or output.
+ visible: If False, component will be hidden.
+ streaming: If True when used in a `live` interface, will automatically stream webcam feed. Only valid is source is 'webcam'.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+ mirror_webcam: If True webcam will be mirrored. Default is True.
+ brush_radius: Size of the brush for Sketch. Default is None which chooses a sensible default
+ brush_color: Color of the brush for Sketch as hex string. Default is "#000000".
+ mask_opacity: Opacity of mask drawn on image, as a value between 0 and 1.
+ show_share_button: If True, will show a share icon in the corner of the component that allows user to share outputs to Hugging Face Spaces Discussions. If False, icon does not appear. If set to None (default behavior), then the icon appears if this Gradio app is launched on Spaces, but not otherwise.
+ """
+ self.brush_radius = brush_radius
+ self.brush_color = brush_color
+ self.mask_opacity = mask_opacity
+ self.mirror_webcam = mirror_webcam
+ valid_types = ["numpy", "pil", "filepath"]
+ if type not in valid_types:
+ raise ValueError(
+ f"Invalid value for parameter `type`: {type}. Please choose from one of: {valid_types}"
+ )
+ self.type = type
+ self.shape = shape
+ self.height = height
+ self.width = width
+ self.image_mode = image_mode
+ valid_sources = ["upload", "webcam", "canvas"]
+ if source not in valid_sources:
+ raise ValueError(
+ f"Invalid value for parameter `source`: {source}. Please choose from one of: {valid_sources}"
+ )
+ self.source = source
+ if tool is None:
+ self.tool = "sketch" if source == "canvas" else "editor"
+ else:
+ self.tool = tool
+ self.invert_colors = invert_colors
+ self.streaming = streaming
+ self.show_download_button = show_download_button
+ if streaming and source != "webcam":
+ raise ValueError("Image streaming only available if source is 'webcam'.")
+ self.show_share_button = (
+ (utils.get_space() is not None)
+ if show_share_button is None
+ else show_share_button
+ )
+ super().__init__(
+ label=label,
+ every=every,
+ show_label=show_label,
+ container=container,
+ scale=scale,
+ min_width=min_width,
+ interactive=interactive,
+ visible=visible,
+ elem_id=elem_id,
+ elem_classes=elem_classes,
+ value=value,
+ **kwargs,
+ )
+
+ def get_config(self):
+ return {
+ "image_mode": self.image_mode,
+ "shape": self.shape,
+ "height": self.height,
+ "width": self.width,
+ "source": self.source,
+ "tool": self.tool,
+ "value": self.value,
+ "streaming": self.streaming,
+ "mirror_webcam": self.mirror_webcam,
+ "brush_radius": self.brush_radius,
+ "brush_color": self.brush_color,
+ "mask_opacity": self.mask_opacity,
+ "selectable": self.selectable,
+ "show_share_button": self.show_share_button,
+ "show_download_button": self.show_download_button,
+ **Component.get_config(self),
+ }
+
+ @staticmethod
+ def update(
+ value: Any | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
+ height: int | None = None,
+ width: int | None = None,
+ label: str | None = None,
+ show_label: bool | None = None,
+ show_download_button: bool | None = None,
+ container: bool | None = None,
+ scale: int | None = None,
+ min_width: int | None = None,
+ interactive: bool | None = None,
+ visible: bool | None = None,
+ brush_radius: float | None = None,
+ brush_color: str | None = None,
+ mask_opacity: float | None = None,
+ show_share_button: bool | None = None,
+ ):
+ return {
+ "height": height,
+ "width": width,
+ "label": label,
+ "show_label": show_label,
+ "show_download_button": show_download_button,
+ "container": container,
+ "scale": scale,
+ "min_width": min_width,
+ "interactive": interactive,
+ "visible": visible,
+ "value": value,
+ "brush_radius": brush_radius,
+ "brush_color": brush_color,
+ "mask_opacity": mask_opacity,
+ "show_share_button": show_share_button,
+ "__type__": "update",
+ }
+
+ def _format_image(
+ self, im: _Image.Image | None
+ ) -> np.ndarray | _Image.Image | str | None:
+ """Helper method to format an image based on self.type"""
+ if im is None:
+ return im
+ fmt = im.format
+ if self.type == "pil":
+ return im
+ elif self.type == "numpy":
+ return np.array(im)
+ elif self.type == "filepath":
+ path = self.pil_to_temp_file(
+ im, dir=self.DEFAULT_TEMP_DIR, format=fmt or "png"
+ )
+ self.temp_files.add(path)
+ return path
+ else:
+ raise ValueError(
+ "Unknown type: "
+ + str(self.type)
+ + ". Please choose from: 'numpy', 'pil', 'filepath'."
+ )
+
+ def preprocess(
+ self, x: str | dict[str, str]
+ ) -> np.ndarray | _Image.Image | str | dict | None:
+ """
+ Parameters:
+ x: base64 url data, or (if tool == "sketch") a dict of image and mask base64 url data
+ Returns:
+ image in requested format, or (if tool == "sketch") a dict of image and mask in requested format
+ """
+ if x is None:
+ return x
+
+ mask = ""
+ if self.tool == "sketch" and self.source in ["upload", "webcam"]:
+ assert isinstance(x, dict)
+ x, mask = x["image"], x["mask"]
+
+ if isinstance(x, str):
+ im = processing_utils.decode_base64_to_image(x)
+ else:
+ im = PIL.Image.open(self.make_temp_copy_if_needed(x["name"]))
+ with warnings.catch_warnings():
+ warnings.simplefilter("ignore")
+ im = im.convert(self.image_mode)
+ if self.shape is not None:
+ im = processing_utils.resize_and_crop(im, self.shape)
+ if self.invert_colors:
+ im = PIL.ImageOps.invert(im)
+ if (
+ self.source == "webcam"
+ and self.mirror_webcam is True
+ and self.tool != "color-sketch"
+ ):
+ im = PIL.ImageOps.mirror(im)
+
+ if self.tool == "sketch" and self.source in ["upload", "webcam"]:
+ mask_im = processing_utils.decode_base64_to_image(mask)
+
+ if mask_im.mode == "RGBA": # whiten any opaque pixels in the mask
+ alpha_data = mask_im.getchannel("A").convert("L")
+ mask_im = _Image.merge("RGB", [alpha_data, alpha_data, alpha_data])
+ return {
+ "image": self._format_image(im),
+ "mask": self._format_image(mask_im),
+ }
+
+ return self._format_image(im)
+
+ def postprocess(
+ self, y: np.ndarray | _Image.Image | str | Path | None
+ ) -> str | None:
+ """
+ Parameters:
+ y: image as a numpy array, PIL Image, string/Path filepath, or string URL
+ Returns:
+ base64 url data
+ """
+ if y is None:
+ return None
+ if isinstance(y, np.ndarray):
+ path = self.base64_to_temp_file_if_needed(
+ processing_utils.encode_array_to_base64(y), "file.png"
+ )
+ elif isinstance(y, _Image.Image):
+ path = self.base64_to_temp_file_if_needed(
+ processing_utils.encode_pil_to_base64(y), "file.png"
+ )
+ elif isinstance(y, (str, Path)):
+ name = y if isinstance(y, str) else y.name
+ if client_utils.is_http_url_like(name):
+ path = self.download_temp_copy_if_needed(name)
+ else:
+ path = self.make_temp_copy_if_needed(name)
+ else:
+ raise ValueError("Cannot process this value as an Image")
+ return FileData(name=path, data=None, is_file=True)
+
+ def check_streamable(self):
+ if self.source != "webcam" and self.streaming:
+ raise ValueError("Image streaming only available if source is 'webcam'.")
+
+ def as_example(self, input_data: str | None) -> str:
+ if input_data is None:
+ return ""
+ elif (
+ self.root_url
+ ): # If an externally hosted image, don't convert to absolute path
+ return input_data
+ return str(utils.abspath(input_data))
+
+ def example_inputs(self) -> Any:
+ return "https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/bus.png"
diff --git a/js/preview/test/imageslider/demo/__init__.py b/js/preview/test/imageslider/demo/__init__.py
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/js/preview/test/imageslider/demo/app.py b/js/preview/test/imageslider/demo/app.py
new file mode 100644
index 000000000000..62e6e1c89394
--- /dev/null
+++ b/js/preview/test/imageslider/demo/app.py
@@ -0,0 +1,9 @@
+import gradio as gr
+from imageslider import ImageSlider
+
+with gr.Blocks() as demo:
+ ImageSlider(label="asd", interactive=True)
+ ImageSlider(label="Static", interactive=False)
+
+
+demo.launch()
diff --git a/js/preview/test/imageslider/frontend/example/Image.svelte b/js/preview/test/imageslider/frontend/example/Image.svelte
new file mode 100644
index 000000000000..4544ce0b6882
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/example/Image.svelte
@@ -0,0 +1,41 @@
+
+
+
+
+
+
+
diff --git a/js/preview/test/imageslider/frontend/example/index.ts b/js/preview/test/imageslider/frontend/example/index.ts
new file mode 100644
index 000000000000..f77af3dcfa03
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/example/index.ts
@@ -0,0 +1 @@
+export { default } from "./Image.svelte";
diff --git a/js/preview/test/imageslider/frontend/interactive/Cropper.svelte b/js/preview/test/imageslider/frontend/interactive/Cropper.svelte
new file mode 100644
index 000000000000..c26bf2a0775c
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/Cropper.svelte
@@ -0,0 +1,33 @@
+
diff --git a/js/preview/test/imageslider/frontend/interactive/Image.svelte b/js/preview/test/imageslider/frontend/interactive/Image.svelte
new file mode 100644
index 000000000000..748e3834a737
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/Image.svelte
@@ -0,0 +1,447 @@
+
+
+
+ gradio.dispatch("edit")}
+ on:clear={() => gradio.dispatch("clear")}
+ on:stream={() => gradio.dispatch("stream")}
+ on:drag={({ detail }) => (dragging = detail)}
+ on:upload={() => gradio.dispatch("upload")}
+ on:select={({ detail }) => gradio.dispatch("select", detail)}
+ on:share={({ detail }) => gradio.dispatch("share", detail)}
+ on:error={({ detail }) => {
+ loading_status = loading_status || {};
+ loading_status.status = "error";
+ gradio.dispatch("error", detail);
+ }}
+ {label}
+ {show_label}
+ {pending}
+ {streaming}
+ {mirror_webcam}
+ i18n={gradio.i18n}
+ >
+
+
diff --git a/js/preview/test/imageslider/frontend/interactive/ModifySketch.svelte b/js/preview/test/imageslider/frontend/interactive/ModifySketch.svelte
new file mode 100644
index 000000000000..8e603f247e95
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/ModifySketch.svelte
@@ -0,0 +1,45 @@
+
+
+
+{/if}
+
+
diff --git a/js/preview/test/imageslider/frontend/static/StaticImage.svelte b/js/preview/test/imageslider/frontend/static/StaticImage.svelte
new file mode 100644
index 000000000000..30cae5f8138f
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/static/StaticImage.svelte
@@ -0,0 +1,72 @@
+
+ gradio.dispatch("select", detail)}
+ on:share={({ detail }) => gradio.dispatch("share", detail)}
+ on:error={({ detail }) => gradio.dispatch("error", detail)}
+ {root}
+ {value}
+ {label}
+ {show_label}
+ {show_download_button}
+ {selectable}
+ {show_share_button}
+ i18n={gradio.i18n}
+ />
+
diff --git a/js/preview/test/imageslider/frontend/static/index.ts b/js/preview/test/imageslider/frontend/static/index.ts
new file mode 100644
index 000000000000..8d950f3e426f
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/static/index.ts
@@ -0,0 +1 @@
+export { default } from "./StaticImage.svelte";
diff --git a/js/preview/test/imageslider/pyproject.toml b/js/preview/test/imageslider/pyproject.toml
new file mode 100644
index 000000000000..5c39ab3f4e0a
--- /dev/null
+++ b/js/preview/test/imageslider/pyproject.toml
@@ -0,0 +1,40 @@
+[build-system]
+requires = ["hatchling", "hatch-requirements-txt", "hatch-fancy-pypi-readme>=22.5.0"]
+build-backend = "hatchling.build"
+
+[project]
+name = "imageslider"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [
+ { name = "YOUR NAME", email = "YOUREMAIL@domain.com" },
+]
+keywords = ["machine learning", "reproducibility", "visualization"]
+# Add dependencies here
+dependencies = []
+classifiers = [
+ 'Development Status :: 3 - Alpha',
+ 'License :: OSI Approved :: Apache Software License',
+ 'Operating System :: OS Independent',
+ 'Programming Language :: Python :: 3',
+ 'Programming Language :: Python :: 3 :: Only',
+ 'Programming Language :: Python :: 3.8',
+ 'Programming Language :: Python :: 3.9',
+ 'Programming Language :: Python :: 3.10',
+ 'Programming Language :: Python :: 3.11',
+ 'Topic :: Scientific/Engineering',
+ 'Topic :: Scientific/Engineering :: Artificial Intelligence',
+ 'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[tool.hatch.build]
+artifacts = [
+ "/backend/imageslider/templates",
+ "*.pyi"
+]
+packages = ["/backend/imageslider"]
+
+[tool.hatch.metadata]
+allow-direct-references = true
\ No newline at end of file
diff --git a/js/preview/test/newnewtext/.gitignore b/js/preview/test/newnewtext/.gitignore
new file mode 100644
index 000000000000..80a3eb23390b
--- /dev/null
+++ b/js/preview/test/newnewtext/.gitignore
@@ -0,0 +1,10 @@
+# Python build
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+templates/
\ No newline at end of file
diff --git a/js/preview/test/newnewtext/backend/newnewtext/__init__.py b/js/preview/test/newnewtext/backend/newnewtext/__init__.py
new file mode 100644
index 000000000000..4c7b7a5942bd
--- /dev/null
+++ b/js/preview/test/newnewtext/backend/newnewtext/__init__.py
@@ -0,0 +1,4 @@
+
+from .newnewtext import NewNewText
+
+__all__ = ['NewNewText']
diff --git a/js/preview/test/newnewtext/backend/newnewtext/newnewtext.py b/js/preview/test/newnewtext/backend/newnewtext/newnewtext.py
new file mode 100644
index 000000000000..8057ec0b21c9
--- /dev/null
+++ b/js/preview/test/newnewtext/backend/newnewtext/newnewtext.py
@@ -0,0 +1,191 @@
+"""gr.Textbox() component."""
+
+from __future__ import annotations
+
+from typing import Any, Callable, Literal
+
+from gradio_client.documentation import document, set_documentation_group
+
+from gradio.components.base import (
+ Component,
+ FormComponent,
+ _Keywords,
+)
+from gradio.events import Events
+
+set_documentation_group("component")
+
+
+@document()
+class NewNewText(FormComponent):
+ """
+ Creates a textarea for user to enter string input or display string output.
+ Preprocessing: passes textarea value as a {str} into the function.
+ Postprocessing: expects a {str} returned from function and sets textarea value to it.
+ Examples-format: a {str} representing the textbox input.
+
+ Demos: hello_world, diff_texts, sentence_builder
+ Guides: creating-a-chatbot, real-time-speech-recognition
+ """
+
+ EVENTS = [Events.change, Events.input, Events.select, Events.submit, Events.focus]
+
+ def __init__(
+ self,
+ value: str | Callable | None = "",
+ *,
+ lines: int = 1,
+ max_lines: int = 20,
+ placeholder: str | None = None,
+ label: str | None = None,
+ info: str | None = None,
+ every: float | None = None,
+ show_label: bool | None = None,
+ container: bool = True,
+ scale: int | None = None,
+ min_width: int = 160,
+ interactive: bool | None = None,
+ visible: bool = True,
+ elem_id: str | None = None,
+ autofocus: bool = False,
+ elem_classes: list[str] | str | None = None,
+ type: Literal["text", "password", "email"] = "text",
+ text_align: Literal["left", "right"] | None = None,
+ rtl: bool = False,
+ show_copy_button: bool = False,
+ **kwargs,
+ ):
+ """
+ Parameters:
+ value: default text to provide in textarea. If callable, the function will be called whenever the app loads to set the initial value of the component.
+ lines: minimum number of line rows to provide in textarea.
+ max_lines: maximum number of line rows to provide in textarea.
+ placeholder: placeholder hint to provide behind textarea.
+ label: component name in interface.
+ info: additional component description.
+ every: If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. Queue must be enabled. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+ show_label: if True, will display label.
+ container: If True, will place the component in a container - providing some extra padding around the border.
+ scale: relative width compared to adjacent Components in a Row. For example, if Component A has scale=2, and Component B has scale=1, A will be twice as wide as B. Should be an integer.
+ min_width: minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.
+ interactive: if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.
+ visible: If False, component will be hidden.
+ autofocus: If True, will focus on the textbox when the page loads.
+ elem_id: An optional string that is assigned as the id of this component in the HTML DOM. Can be used for targeting CSS styles.
+ elem_classes: An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.
+ type: The type of textbox. One of: 'text', 'password', 'email', Default is 'text'.
+ text_align: How to align the text in the textbox, can be: "left", "right", or None (default). If None, the alignment is left if `rtl` is False, or right if `rtl` is True. Can only be changed if `type` is "text".
+ rtl: If True and `type` is "text", sets the direction of the text to right-to-left (cursor appears on the left of the text). Default is False, which renders cursor on the right.
+ show_copy_button: If True, includes a copy button to copy the text in the textbox. Only applies if show_label is True.
+ """
+ if type not in ["text", "password", "email"]:
+ raise ValueError('`type` must be one of "text", "password", or "email".')
+
+ self.lines = lines
+ if type == "text":
+ self.max_lines = max(lines, max_lines)
+ else:
+ self.max_lines = 1
+ self.placeholder = placeholder
+ self.show_copy_button = show_copy_button
+ self.autofocus = autofocus
+ super().__init__(
+ label=label,
+ info=info,
+ every=every,
+ show_label=show_label,
+ container=container,
+ scale=scale,
+ min_width=min_width,
+ interactive=interactive,
+ visible=visible,
+ elem_id=elem_id,
+ elem_classes=elem_classes,
+ value=value,
+ **kwargs,
+ )
+ self.type = type
+ self.rtl = rtl
+ self.text_align = text_align
+
+ def get_config(self):
+ return {
+ "lines": self.lines,
+ "max_lines": self.max_lines,
+ "placeholder": self.placeholder,
+ "value": self.value,
+ "type": self.type,
+ "autofocus": self.autofocus,
+ "show_copy_button": self.show_copy_button,
+ "container": self.container,
+ "text_align": self.text_align,
+ "rtl": self.rtl,
+ **Component.get_config(self),
+ }
+
+ @staticmethod
+ def update(
+ value: str | Literal[_Keywords.NO_VALUE] | None = _Keywords.NO_VALUE,
+ lines: int | None = None,
+ max_lines: int | None = None,
+ placeholder: str | None = None,
+ label: str | None = None,
+ info: str | None = None,
+ show_label: bool | None = None,
+ container: bool | None = None,
+ scale: int | None = None,
+ min_width: int | None = None,
+ visible: bool | None = None,
+ interactive: bool | None = None,
+ type: Literal["text", "password", "email"] | None = None,
+ text_align: Literal["left", "right"] | None = None,
+ rtl: bool | None = None,
+ show_copy_button: bool | None = None,
+ autofocus: bool | None = None,
+ ):
+ return {
+ "lines": lines,
+ "max_lines": max_lines,
+ "placeholder": placeholder,
+ "label": label,
+ "info": info,
+ "show_label": show_label,
+ "container": container,
+ "scale": scale,
+ "min_width": min_width,
+ "visible": visible,
+ "value": value,
+ "type": type,
+ "interactive": interactive,
+ "show_copy_button": show_copy_button,
+ "autofocus": autofocus,
+ "text_align": text_align,
+ "rtl": rtl,
+ "__type__": "update",
+ }
+
+ def preprocess(self, x: str | None) -> str | None:
+ """
+ Preprocesses input (converts it to a string) before passing it to the function.
+ Parameters:
+ x: text
+ Returns:
+ text
+ """
+ return None if x is None else str(x)
+
+ def postprocess(self, y: str | None) -> str | None:
+ """
+ Postproccess the function output y by converting it to a str before passing it to the frontend.
+ Parameters:
+ y: function output to postprocess.
+ Returns:
+ text
+ """
+ return None if y is None else str(y)
+
+ def api_info(self) -> dict[str, list[str]]:
+ return {"type": "string"}
+
+ def example_inputs(self) -> Any:
+ return "Hello!!"
diff --git a/js/preview/test/newnewtext/demo/__init__.py b/js/preview/test/newnewtext/demo/__init__.py
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/js/preview/test/newnewtext/demo/app.py b/js/preview/test/newnewtext/demo/app.py
new file mode 100644
index 000000000000..9d96f3fb5f23
--- /dev/null
+++ b/js/preview/test/newnewtext/demo/app.py
@@ -0,0 +1,7 @@
+import gradio as gr
+from newnewtext import NewNewText
+
+with gr.Blocks() as demo:
+ NewNewText()
+
+demo.launch()
diff --git a/js/preview/test/newnewtext/frontend/example/Textbox.svelte b/js/preview/test/newnewtext/frontend/example/Textbox.svelte
new file mode 100644
index 000000000000..1fdf7500fa28
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/example/Textbox.svelte
@@ -0,0 +1,46 @@
+
+
+
+ {#if loading_status}
+ gradio.dispatch("change", value)}
+ on:input={() => gradio.dispatch("input")}
+ on:submit={() => gradio.dispatch("submit")}
+ on:blur={() => gradio.dispatch("blur")}
+ on:select={(e) => gradio.dispatch("select", e.detail)}
+ on:focus={() => gradio.dispatch("focus")}
+ />
+
diff --git a/js/preview/test/newnewtext/frontend/interactive/index.ts b/js/preview/test/newnewtext/frontend/interactive/index.ts
new file mode 100644
index 000000000000..a036461c736f
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/interactive/index.ts
@@ -0,0 +1 @@
+export { default } from "./InteractiveTextbox.svelte";
diff --git a/js/timeseries/package.json b/js/preview/test/newnewtext/frontend/package.json
similarity index 55%
rename from js/timeseries/package.json
rename to js/preview/test/newnewtext/frontend/package.json
index 318f949182bf..1d526c1e720c 100644
--- a/js/timeseries/package.json
+++ b/js/preview/test/newnewtext/frontend/package.json
@@ -1,6 +1,6 @@
{
- "name": "@gradio/timeseries",
- "version": "0.0.8",
+ "name": "newnewtext",
+ "version": "0.1.2",
"description": "Gradio UI packages",
"type": "module",
"main": "index.svelte",
@@ -18,17 +18,6 @@
"@gradio/atoms": "workspace:^",
"@gradio/icons": "workspace:^",
"@gradio/statustracker": "workspace:^",
- "@gradio/theme": "workspace:^",
- "@gradio/tooltip": "workspace:^",
- "@gradio/upload": "workspace:^",
- "@gradio/utils": "workspace:^",
- "d3-dsv": "^3.0.1",
- "d3-scale": "^4.0.2",
- "d3-shape": "^3.2.0"
- },
- "devDependencies": {
- "@types/d3-dsv": "^3.0.0",
- "@types/d3-scale": "^4.0.3",
- "@types/d3-shape": "^3.1.1"
+ "@gradio/utils": "workspace:^"
}
}
diff --git a/js/preview/test/newnewtext/frontend/shared/Dynamic.svelte b/js/preview/test/newnewtext/frontend/shared/Dynamic.svelte
new file mode 100644
index 000000000000..cffa5b303e38
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/shared/Dynamic.svelte
@@ -0,0 +1,297 @@
+
+
+
+
+
+
diff --git a/js/preview/test/newnewtext/frontend/shared/Textbox.svelte b/js/preview/test/newnewtext/frontend/shared/Textbox.svelte
new file mode 100644
index 000000000000..c99c71e937b1
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/shared/Textbox.svelte
@@ -0,0 +1,301 @@
+
+
+
+
+
+
diff --git a/js/preview/test/newnewtext/frontend/shared/index.ts b/js/preview/test/newnewtext/frontend/shared/index.ts
new file mode 100644
index 000000000000..42397adf0d93
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/shared/index.ts
@@ -0,0 +1 @@
+export { default } from "./Textbox.svelte";
diff --git a/js/preview/test/newnewtext/frontend/shared/test.ts b/js/preview/test/newnewtext/frontend/shared/test.ts
new file mode 100644
index 000000000000..c4457b82f591
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/shared/test.ts
@@ -0,0 +1 @@
+export const fn = () => console.log("hello");
diff --git a/js/preview/test/newnewtext/frontend/static/StaticTextbox.svelte b/js/preview/test/newnewtext/frontend/static/StaticTextbox.svelte
new file mode 100644
index 000000000000..0dd48cab946b
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/static/StaticTextbox.svelte
@@ -0,0 +1,76 @@
+
+ {#if loading_status}
+ gradio.dispatch("change", value)}
+ on:input={() => gradio.dispatch("input")}
+ on:submit={() => gradio.dispatch("submit")}
+ on:blur={() => gradio.dispatch("blur")}
+ on:select={(e) => gradio.dispatch("select", e.detail)}
+ on:focus={() => gradio.dispatch("focus")}
+ disabled
+ />
+
diff --git a/js/preview/test/newnewtext/frontend/static/index.ts b/js/preview/test/newnewtext/frontend/static/index.ts
new file mode 100644
index 000000000000..52f5da4ebc99
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/static/index.ts
@@ -0,0 +1 @@
+export { default } from "./StaticTextbox.svelte";
diff --git a/js/preview/test/newnewtext/pyproject.toml b/js/preview/test/newnewtext/pyproject.toml
new file mode 100644
index 000000000000..52101fd8d4eb
--- /dev/null
+++ b/js/preview/test/newnewtext/pyproject.toml
@@ -0,0 +1,40 @@
+[build-system]
+requires = ["hatchling", "hatch-requirements-txt", "hatch-fancy-pypi-readme>=22.5.0"]
+build-backend = "hatchling.build"
+
+[project]
+name = "newnewtext"
+version = "0.0.1"
+description = "Python library for easily interacting with trained machine learning models"
+license = "Apache-2.0"
+requires-python = ">=3.8"
+authors = [
+ { name = "YOUR NAME", email = "YOUREMAIL@domain.com" },
+]
+keywords = ["machine learning", "reproducibility", "visualization"]
+# Add dependencies here
+dependencies = []
+classifiers = [
+ 'Development Status :: 3 - Alpha',
+ 'License :: OSI Approved :: Apache Software License',
+ 'Operating System :: OS Independent',
+ 'Programming Language :: Python :: 3',
+ 'Programming Language :: Python :: 3 :: Only',
+ 'Programming Language :: Python :: 3.8',
+ 'Programming Language :: Python :: 3.9',
+ 'Programming Language :: Python :: 3.10',
+ 'Programming Language :: Python :: 3.11',
+ 'Topic :: Scientific/Engineering',
+ 'Topic :: Scientific/Engineering :: Artificial Intelligence',
+ 'Topic :: Scientific/Engineering :: Visualization',
+]
+
+[tool.hatch.build]
+artifacts = [
+ "/backend/newnewtext/templates",
+ "*.pyi"
+]
+packages = ["/backend/newnewtext"]
+
+[tool.hatch.metadata]
+allow-direct-references = true
\ No newline at end of file
diff --git a/js/preview/test/newtext/.gitignore b/js/preview/test/newtext/.gitignore
new file mode 100644
index 000000000000..4162e6e9956a
--- /dev/null
+++ b/js/preview/test/newtext/.gitignore
@@ -0,0 +1,9 @@
+# Python build
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
\ No newline at end of file
diff --git a/js/preview/test/newtext/backend/newtext/__init__.py b/js/preview/test/newtext/backend/newtext/__init__.py
new file mode 100644
index 000000000000..bd88007e8da5
--- /dev/null
+++ b/js/preview/test/newtext/backend/newtext/__init__.py
@@ -0,0 +1,4 @@
+
+from .newtext import NewText
+
+__all__ = ['NewText']
diff --git a/js/preview/test/newtext/backend/newtext/newtext.py b/js/preview/test/newtext/backend/newtext/newtext.py
new file mode 100644
index 000000000000..a72e51346a15
--- /dev/null
+++ b/js/preview/test/newtext/backend/newtext/newtext.py
@@ -0,0 +1,21 @@
+import gradio as gr
+
+class NewText(gr.components.Component):
+
+ def preprocess(self, x):
+ return x
+
+ def postprocess(self, x):
+ return x
+
+ def get_config(self):
+ return {
+ "value": self.value,
+ **gr.components.Component.get_config(self),
+ }
+
+ def example_inputs(self):
+ return {'foo': 'bar'}
+
+ def api_info(self):
+ return {'type': {}, 'description': 'any valid json'}
\ No newline at end of file
diff --git a/js/preview/test/newtext/demo/__init__.py b/js/preview/test/newtext/demo/__init__.py
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/js/preview/test/newtext/demo/app.py b/js/preview/test/newtext/demo/app.py
new file mode 100644
index 000000000000..70cd4b25e71b
--- /dev/null
+++ b/js/preview/test/newtext/demo/app.py
@@ -0,0 +1,10 @@
+
+import gradio as gr
+from newtext import NewText
+
+with gr.Blocks() as demo:
+ NewText(interactive=True)
+ NewText(interactive=False)
+
+
+demo.launch()
diff --git a/js/preview/test/newtext/frontend/example/Textbox.svelte b/js/preview/test/newtext/frontend/example/Textbox.svelte
new file mode 100644
index 000000000000..1fdf7500fa28
--- /dev/null
+++ b/js/preview/test/newtext/frontend/example/Textbox.svelte
@@ -0,0 +1,46 @@
+
+
+
+ {#if loading_status}
+ gradio.dispatch("change", value)}
+ on:input={() => gradio.dispatch("input")}
+ on:submit={() => gradio.dispatch("submit")}
+ on:blur={() => gradio.dispatch("blur")}
+ on:select={(e) => gradio.dispatch("select", e.detail)}
+ on:focus={() => gradio.dispatch("focus")}
+ />
+
diff --git a/js/preview/test/newtext/frontend/interactive/index.ts b/js/preview/test/newtext/frontend/interactive/index.ts
new file mode 100644
index 000000000000..5f87dcb3a1b3
--- /dev/null
+++ b/js/preview/test/newtext/frontend/interactive/index.ts
@@ -0,0 +1 @@
+export { default } from "./newtext.svelte";
\ No newline at end of file
diff --git a/js/preview/test/newtext/frontend/interactive/newtext.svelte b/js/preview/test/newtext/frontend/interactive/newtext.svelte
new file mode 100644
index 000000000000..e5e40bb4b254
--- /dev/null
+++ b/js/preview/test/newtext/frontend/interactive/newtext.svelte
@@ -0,0 +1,7 @@
+
+
+
+ {#if loading_status}
+ gradio.dispatch("change", value)}
+ on:input={() => gradio.dispatch("input")}
+ on:submit={() => gradio.dispatch("submit")}
+ on:blur={() => gradio.dispatch("blur")}
+ on:select={(e) => gradio.dispatch("select", e.detail)}
+ on:focus={() => gradio.dispatch("focus")}
+ disabled
+ />
+
diff --git a/js/preview/test/newtext/frontend/static/index.ts b/js/preview/test/newtext/frontend/static/index.ts
new file mode 100644
index 000000000000..5f87dcb3a1b3
--- /dev/null
+++ b/js/preview/test/newtext/frontend/static/index.ts
@@ -0,0 +1 @@
+export { default } from "./newtext.svelte";
\ No newline at end of file
diff --git a/js/preview/test/newtext/frontend/static/newtext.svelte b/js/preview/test/newtext/frontend/static/newtext.svelte
new file mode 100644
index 000000000000..e5e40bb4b254
--- /dev/null
+++ b/js/preview/test/newtext/frontend/static/newtext.svelte
@@ -0,0 +1,7 @@
+
+
+
- ;
+ export let label = gradio.i18n("radio.radio");
export let info: string | undefined = undefined;
export let elem_id = "";
export let elem_classes: string[] = [];
@@ -19,11 +23,6 @@
export let scale: number | null = null;
export let min_width: number | undefined = undefined;
export let loading_status: LoadingStatus;
- export let gradio: Gradio<{
- change: never;
- select: SelectData;
- input: never;
- }>;
- ;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value = 0;
- export let label = $_("slider.slider");
+ export let label = gradio.i18n("slider.slider");
export let info: string | undefined = undefined;
export let container = true;
export let scale: number | null = null;
@@ -22,15 +26,14 @@
export let loading_status: LoadingStatus;
export let value_is_output = false;
- export let gradio: Gradio<{
- change: never;
- input: never;
- release: number;
- }>;
- ;
export let elem_id = "";
export let elem_classes: string[] = [];
export let visible = true;
export let value = 0;
- export let label = $_("slider.slider");
+ export let label = gradio.i18n("slider.slider");
export let info: string | undefined = undefined;
export let container = true;
export let scale: number | null = null;
@@ -22,15 +26,14 @@
export let loading_status: LoadingStatus;
export let value_is_output = false;
- export let gradio: Gradio<{
- change: never;
- input: never;
- release: number;
- }>;
-
import { tick } from "svelte";
import { pretty_si } from "./utils";
- import { _ } from "svelte-i18n";
let items: HTMLDivElement[] = [];
@@ -47,11 +46,12 @@
-
-
- handle_load(detail)}
- include_file_metadata={false}
- >
-
- {/if}
-
-
-
diff --git a/js/timeseries/interactive/index.ts b/js/timeseries/interactive/index.ts
deleted file mode 100644
index c752390a8530..000000000000
--- a/js/timeseries/interactive/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./InteractiveTimeseries.svelte";
diff --git a/js/timeseries/shared/Chart.svelte b/js/timeseries/shared/Chart.svelte
deleted file mode 100644
index 31cbdcdb42bf..000000000000
--- a/js/timeseries/shared/Chart.svelte
+++ /dev/null
@@ -1,222 +0,0 @@
-
-
-((acc, { values }) => {
- return [...acc, ...values.map(({ y }) => y)];
- }, []);
- } else {
- _vs = values.values;
- }
- return [Math.min(..._vs), Math.max(..._vs)];
-}
-
-interface Row {
- name: string;
- values: number[];
-}
-
-interface RowPoint {
- name: string;
- values: { x: number; y: number }[];
-}
-
-interface TransformedValues {
- x: Row;
- y: RowPoint[];
-}
-
-export function transform_values(
- values: Record[],
- x?: string,
- y?: string[]
-): TransformedValues {
- const transformed_values = Object.entries(
- values[0]
- ).reduce(
- (acc, next, i) => {
- if ((!x && i === 0) || (x && next[0] === x)) {
- acc.x.name = next[0];
- } else if (!y || (y && y.includes(next[0]))) {
- acc.y.push({ name: next[0], values: [] });
- }
- return acc;
- },
- { x: { name: "", values: [] }, y: [] }
- );
-
- for (let i = 0; i < values.length; i++) {
- const _a = Object.entries(values[i]);
- for (let j = 0; j < _a.length; j++) {
- let [name, x] = _a[j];
- if (name === transformed_values.x.name) {
- transformed_values.x.values.push(parseFloat(x));
- } else {
- transformed_values.y[j - 1].values.push({
- y: parseFloat(_a[j][1]),
- x: parseFloat(_a[0][1])
- });
- }
- }
- }
-
- return transformed_values;
-}
diff --git a/js/timeseries/static/StaticTimeseries.svelte b/js/timeseries/static/StaticTimeseries.svelte
deleted file mode 100644
index 5510b0476807..000000000000
--- a/js/timeseries/static/StaticTimeseries.svelte
+++ /dev/null
@@ -1,69 +0,0 @@
-
-
-
-
-
- {/if}
-
diff --git a/js/timeseries/static/index.ts b/js/timeseries/static/index.ts
deleted file mode 100644
index 7be8b360985f..000000000000
--- a/js/timeseries/static/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./StaticTimeseries.svelte";
diff --git a/js/tooltip/CHANGELOG.md b/js/tooltip/CHANGELOG.md
new file mode 100644
index 000000000000..5bfcc77ff1b9
--- /dev/null
+++ b/js/tooltip/CHANGELOG.md
@@ -0,0 +1,7 @@
+# @gradio/tooltip
+
+## 0.1.0-beta.0
+
+### Features
+
+- [#5498](https://github.com/gradio-app/gradio/pull/5498) [`681f10c31`](https://github.com/gradio-app/gradio/commit/681f10c315a75cc8cd0473c9a0167961af7696db) - release first version. Thanks [@pngwn](https://github.com/pngwn)!
\ No newline at end of file
diff --git a/js/tooltip/package.json b/js/tooltip/package.json
index e42dac5c9686..05625e72c120 100644
--- a/js/tooltip/package.json
+++ b/js/tooltip/package.json
@@ -1,11 +1,10 @@
{
"name": "@gradio/tooltip",
- "version": "0.0.1",
+ "version": "0.1.0-beta.0",
"description": "Gradio UI packages",
"type": "module",
"main": "src/index.ts",
"author": "",
"license": "ISC",
- "private": true,
"main_changeset": true
}
diff --git a/js/tootils/CHANGELOG.md b/js/tootils/CHANGELOG.md
index 46fad2b091a1..5a5985123e4b 100644
--- a/js/tootils/CHANGELOG.md
+++ b/js/tootils/CHANGELOG.md
@@ -1,5 +1,38 @@
# @gradio/tootils
+## 0.1.0-beta.4
+
+### Features
+
+- [#5648](https://github.com/gradio-app/gradio/pull/5648) [`c573e2339`](https://github.com/gradio-app/gradio/commit/c573e2339b86c85b378dc349de5e9223a3c3b04a) - Publish all components to npm. Thanks [@freddyaboulton](https://github.com/freddyaboulton)!
+
+## 0.1.0-beta.3
+
+### Patch Changes
+
+- Updated dependencies [[`0b4fd5b6d`](https://github.com/gradio-app/gradio/commit/0b4fd5b6db96fc95a155e5e935e17e1ab11d1161)]:
+ - @gradio/utils@0.2.0-beta.3
+
+## 0.1.0-beta.2
+
+### Patch Changes
+
+- Updated dependencies [[`14fc612d8`](https://github.com/gradio-app/gradio/commit/14fc612d84bf6b1408eccd3a40fab41f25477571)]:
+ - @gradio/utils@0.2.0-beta.2
+
+## 0.1.0-beta.1
+
+### Patch Changes
+
+- Updated dependencies []:
+ - @gradio/utils@0.2.0-beta.1
+
+## 0.1.0-beta.0
+
+### Features
+
+- [#5507](https://github.com/gradio-app/gradio/pull/5507) [`1385dc688`](https://github.com/gradio-app/gradio/commit/1385dc6881f2d8ae7a41106ec21d33e2ef04d6a9) - Custom components. Thanks [@pngwn](https://github.com/pngwn)!
+
## 0.0.2
### Highlights
@@ -19,4 +52,4 @@ These improvements will be particularly beneficial to large applications.
- Corrected an issue that was causing markdown to re-render infinitely.
- Ensured that the `gr.3DModel` does re-render prematurely.
- Thanks [@pngwn](https://github.com/pngwn)!
\ No newline at end of file
+Thanks [@pngwn](https://github.com/pngwn)!
\ No newline at end of file
diff --git a/js/tootils/package.json b/js/tootils/package.json
index 57bd0cd053d1..3ca5cb5ae262 100644
--- a/js/tootils/package.json
+++ b/js/tootils/package.json
@@ -1,10 +1,13 @@
{
"name": "@gradio/tootils",
- "version": "0.0.2",
+ "version": "0.1.0-beta.4",
"description": "Internal test utilities",
"type": "module",
"main": "src/index.ts",
"author": "",
"license": "ISC",
- "private": true
+ "private": false,
+ "dependencies": {
+ "@gradio/utils": "workspace:^"
+ }
}
diff --git a/js/tootils/src/render.ts b/js/tootils/src/render.ts
index 544c346be94c..a1525886d7b7 100644
--- a/js/tootils/src/render.ts
+++ b/js/tootils/src/render.ts
@@ -14,7 +14,7 @@ import type {
FireObject
} from "@testing-library/dom";
import { spy, type Spy } from "tinyspy";
-import { Gradio } from "../../app/src/gradio_helper";
+import { Gradio } from "@gradio/utils";
const containerCache = new Map();
const componentCache = new Set();
diff --git a/js/upload/package.json b/js/upload/package.json
index 054beb052531..bcf66f0b1286 100644
--- a/js/upload/package.json
+++ b/js/upload/package.json
@@ -6,10 +6,12 @@
"main": "src/index.ts",
"author": "",
"license": "ISC",
- "private": true,
"dependencies": {
"@gradio/atoms": "workspace:^",
- "@gradio/icons": "workspace:^"
+ "@gradio/icons": "workspace:^",
+ "@gradio/client": "workspace:^",
+ "@gradio/upload": "workspace:^",
+ "@gradio/utils": "workspace:^"
},
"main_changeset": true
}
diff --git a/js/upload/src/ModifyUpload.svelte b/js/upload/src/ModifyUpload.svelte
index a0eb424ba5e5..f34ea0abf04f 100644
--- a/js/upload/src/ModifyUpload.svelte
+++ b/js/upload/src/ModifyUpload.svelte
@@ -1,13 +1,14 @@
+ {#if source === "upload"}
+
+ {#if (value === null && !static_image) || streaming}
+ (handle_clear(e), (tool = "editor"))}
+ />
+ {:else if tool === "editor"}
+ (tool = "select")}
+ on:clear={handle_clear}
+ editable
+ />
+
+
+
+
+
+ {:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
+ {#key static_image}
+ 
+ {/key}
+ {#if img_width > 0}
+ sketch.undo()}
+ on:clear_mask={handle_mask_clear}
+ on:remove_image={handle_sketch_clear}
+ />
+ {#if tool === "color-sketch" || tool === "sketch"}
+
+ {:else if source === "canvas"}
+ sketch.undo()}
+ on:remove_image={handle_sketch_clear}
+ />
+ {#if tool === "color-sketch"}
+
+ tool === "color-sketch" ? handle_upload(e) : handle_save(e, true)}
+ on:stream={handle_save}
+ on:error
+ {streaming}
+ {pending}
+ {mirror_webcam}
+ />
+ {/if}
+ {:else if tool === "select"}
+ (handle_clear(e), (tool = "editor"))}
+ />
+ {:else if tool === "editor"}
+ (tool = "select")}
+ on:clear={handle_clear}
+ editable
+ />
+
+
+
+
+ 
+ {:else if (tool === "sketch" || tool === "color-sketch") && (value !== null || static_image)}
+ {#key static_image}
+
+ {/key}
+ {#if img_width > 0}
+ sketch.undo()}
+ on:remove_image={handle_sketch_clear}
+ />
+ {#if tool === "color-sketch" || tool === "sketch"}
+ 
+ {/if}
+
+
+
diff --git a/js/preview/test/imageslider/frontend/interactive/InteractiveImage.svelte b/js/preview/test/imageslider/frontend/interactive/InteractiveImage.svelte
new file mode 100644
index 000000000000..6c1aeb84673f
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/InteractiveImage.svelte
@@ -0,0 +1,104 @@
+
+ dispatch("undo")} />
+
+ {#if show_eraser}
+ {
+ dispatch("clear_mask");
+ event.stopPropagation();
+ }}
+ />
+ {/if}
+
+ {
+ dispatch("remove_image");
+ event.stopPropagation();
+ }}
+ />
+
+
+
diff --git a/js/preview/test/imageslider/frontend/interactive/Sketch.svelte b/js/preview/test/imageslider/frontend/interactive/Sketch.svelte
new file mode 100644
index 000000000000..ea2654080f46
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/Sketch.svelte
@@ -0,0 +1,624 @@
+
+
+
+ {#if line_count === 0}
+
+
+
diff --git a/js/preview/test/imageslider/frontend/interactive/SketchSettings.svelte b/js/preview/test/imageslider/frontend/interactive/SketchSettings.svelte
new file mode 100644
index 000000000000..54303f98177d
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/SketchSettings.svelte
@@ -0,0 +1,77 @@
+
+
+
+ Start drawing
+
+ {/if}
+ {#each canvas_types as { name, zIndex, opacity }}
+
+ {/each}
+
+
+ (show_size = !show_size)}
+ />
+ {#if show_size}
+
+ {/if}
+
+
+ {#if mode !== "mask"}
+
+ (show_col = !show_col)}
+ />
+ {#if show_col}
+
+ {/if}
+
+ {/if}
+
+
+
diff --git a/js/preview/test/imageslider/frontend/interactive/Webcam.svelte b/js/preview/test/imageslider/frontend/interactive/Webcam.svelte
new file mode 100644
index 000000000000..e1ec1195a900
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/Webcam.svelte
@@ -0,0 +1,204 @@
+
+
+
+
+
+ {#if !streaming}
+
+ {/if}
+
+
+
diff --git a/js/preview/test/imageslider/frontend/interactive/index.ts b/js/preview/test/imageslider/frontend/interactive/index.ts
new file mode 100644
index 000000000000..dbae9def8ba4
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/interactive/index.ts
@@ -0,0 +1,2 @@
+export { default as Webcam } from "./Webcam.svelte";
+export { default } from "./InteractiveImage.svelte";
diff --git a/js/preview/test/imageslider/frontend/package.json b/js/preview/test/imageslider/frontend/package.json
new file mode 100644
index 000000000000..e9731340fd06
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/package.json
@@ -0,0 +1,27 @@
+{
+ "name": "imageslider",
+ "version": "0.2.0",
+ "description": "Gradio UI packages",
+ "type": "module",
+ "main": "./index.svelte",
+ "author": "",
+ "license": "ISC",
+ "private": true,
+ "dependencies": {
+ "@gradio/atoms": "workspace:^",
+ "@gradio/icons": "workspace:^",
+ "@gradio/statustracker": "workspace:^",
+ "@gradio/upload": "workspace:^",
+ "@gradio/utils": "workspace:^",
+ "cropperjs": "^1.5.12",
+ "lazy-brush": "^1.0.1",
+ "resize-observer-polyfill": "^1.5.1"
+ },
+ "main_changeset": true,
+ "exports": {
+ "./package.json": "./package.json",
+ "./interactive": "./interactive/index.ts",
+ "./static": "./static/index.ts",
+ "./example": "./example/index.ts"
+ }
+}
\ No newline at end of file
diff --git a/js/preview/test/imageslider/frontend/shared/utils.ts b/js/preview/test/imageslider/frontend/shared/utils.ts
new file mode 100644
index 000000000000..e737479e39f2
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/shared/utils.ts
@@ -0,0 +1,24 @@
+export const get_coordinates_of_clicked_image = (
+ evt: MouseEvent
+): [number, number] | null => {
+ let image = evt.currentTarget as HTMLImageElement;
+
+ const imageRect = image.getBoundingClientRect();
+ const xScale = image.naturalWidth / imageRect.width;
+ const yScale = image.naturalHeight / imageRect.height;
+ if (xScale > yScale) {
+ const displayed_height = image.naturalHeight / xScale;
+ const y_offset = (imageRect.height - displayed_height) / 2;
+ var x = Math.round((evt.clientX - imageRect.left) * xScale);
+ var y = Math.round((evt.clientY - imageRect.top - y_offset) * xScale);
+ } else {
+ const displayed_width = image.naturalWidth / yScale;
+ const x_offset = (imageRect.width - displayed_width) / 2;
+ var x = Math.round((evt.clientX - imageRect.left - x_offset) * yScale);
+ var y = Math.round((evt.clientY - imageRect.top) * yScale);
+ }
+ if (x < 0 || x >= image.naturalWidth || y < 0 || y >= image.naturalHeight) {
+ return null;
+ }
+ return [x, y];
+};
diff --git a/js/preview/test/imageslider/frontend/src/Image.svelte b/js/preview/test/imageslider/frontend/src/Image.svelte
new file mode 100644
index 000000000000..e69de29bb2d1
diff --git a/js/preview/test/imageslider/frontend/static/ImagePreview.svelte b/js/preview/test/imageslider/frontend/static/ImagePreview.svelte
new file mode 100644
index 000000000000..f0c06d1c339f
--- /dev/null
+++ b/js/preview/test/imageslider/frontend/static/ImagePreview.svelte
@@ -0,0 +1,95 @@
+
+
+
+ {#if show_download_button}
+
+ {
+ if (!value) return "";
+ let url = await uploadToHuggingFace(value, "base64");
+ return `
`;
+ }}
+ {value}
+ />
+ {/if}
+
+
+
+
+
+ {value}
+
+
+
diff --git a/js/preview/test/newnewtext/frontend/example/index.ts b/js/preview/test/newnewtext/frontend/example/index.ts
new file mode 100644
index 000000000000..42397adf0d93
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/example/index.ts
@@ -0,0 +1 @@
+export { default } from "./Textbox.svelte";
diff --git a/js/preview/test/newnewtext/frontend/interactive/InteractiveTextbox.svelte b/js/preview/test/newnewtext/frontend/interactive/InteractiveTextbox.svelte
new file mode 100644
index 000000000000..47226d4eebe2
--- /dev/null
+++ b/js/preview/test/newnewtext/frontend/interactive/InteractiveTextbox.svelte
@@ -0,0 +1,85 @@
+
+ {value}
+
+
+
diff --git a/js/preview/test/newtext/frontend/example/index.ts b/js/preview/test/newtext/frontend/example/index.ts
new file mode 100644
index 000000000000..5f87dcb3a1b3
--- /dev/null
+++ b/js/preview/test/newtext/frontend/example/index.ts
@@ -0,0 +1 @@
+export { default } from "./newtext.svelte";
\ No newline at end of file
diff --git a/js/preview/test/newtext/frontend/example/newtext.svelte b/js/preview/test/newtext/frontend/example/newtext.svelte
new file mode 100644
index 000000000000..e5e40bb4b254
--- /dev/null
+++ b/js/preview/test/newtext/frontend/example/newtext.svelte
@@ -0,0 +1,7 @@
+
+
+
- (value = make_dict(x, y))}
- {colors}
- />
-
- {:else if value === undefined || value === null}
-
-
-
-
diff --git a/js/timeseries/shared/index.ts b/js/timeseries/shared/index.ts
deleted file mode 100644
index f7253133a52f..000000000000
--- a/js/timeseries/shared/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "./Chart.svelte";
diff --git a/js/timeseries/shared/utils.ts b/js/timeseries/shared/utils.ts
deleted file mode 100644
index a57aa319d446..000000000000
--- a/js/timeseries/shared/utils.ts
+++ /dev/null
@@ -1,74 +0,0 @@
-interface XYValue {
- x: number;
- y: number;
-}
-
-interface ObjectValue {
- values: XYValue[];
-}
-
-export function get_domains(
- values: ObjectValue[] | { values: number[] }
-): [number, number] {
- let _vs: number[];
- if (Array.isArray(values)) {
- _vs = values.reduce
- {#each _y as { name }}
-
-
-
-
-
- {name}
-
- {/each}
-
- {_x.name}
-
-