Upload folder using huggingface_hub

.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

README.md

@@ -1,12 +1,327 @@
 ---
-title: Gradio Datetimerange
-emoji: 🌖
-colorFrom: pink
-colorTo: pink
+tags: [gradio-custom-component, DateTime]
+title: gradio_datetimerange
+short_description: Component to create time ranges.
+colorFrom: blue
+colorTo: yellow
 sdk: gradio
-sdk_version: 4.39.0
-app_file: app.py
 pinned: false
+app_file: space.py
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# `gradio_datetimerange`
+<a href="https://pypi.org/project/gradio_datetimerange/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_datetimerange"></a>  
+
+Component to create time ranges.
+
+## Installation
+
+```bash
+pip install gradio_datetimerange
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_datetimerange import DateTimeRange
+import pandas as pd
+from random import randint
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+with gr.Blocks() as demo:
+    date = DateTimeRange(["2021-01-01 00:00:00", "2021-01-07 00:00:00"])
+    merged_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    split_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+    with gr.Row():
+        humidity_bar_plot = gr.BarPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+            x_bin="1h",
+        )
+        humidity_scatter_plot = gr.ScatterPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+        )
+    
+    date.bind([merged_temp_plot, split_temp_plot, humidity_bar_plot, humidity_scatter_plot])
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `DateTimeRange`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+tuple[float | str | datetime, float | str | datetime] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">default value for datetime.</td>
+</tr>
+
+<tr>
+<td align="left"><code>include_time</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, the component will include time selection. If False, only date selection will be available.</td>
+</tr>
+
+<tr>
+<td align="left"><code>type</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal["timestamp", "datetime", "string"]
+```
+
+</td>
+<td align="left"><code>"timestamp"</code></td>
+<td align="left">The type of the value. Can be "timestamp", "datetime", or "string". If "timestamp", the value will be a number representing the start and end date in seconds since epoch. If "datetime", the value will be a datetime object. If "string", the value will be the date entered by the user.</td>
+</tr>
+
+<tr>
+<td align="left"><code>timezone</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The timezone to use for timestamps, such as "US/Pacific" or "Europe/Paris". If None, the timezone will be the local timezone.</td>
+</tr>
+
+<tr>
+<td align="left"><code>quick_ranges</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of strings representing quick ranges to display, such as ["30s", "1h", "24h", "7d"]. Set to [] to clear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">additional component description.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the DateTimeRange 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. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes text value as a {str} into the function.
+- **As input:** Should return, expects a tuple pair of datetimes.
+
+ ```python
+ def predict(
+     value: tuple[str | float | datetime, str | float | datetime] | None
+ ) -> tuple[float | datetime | str, float | datetime | str] | None:
+     return value
+ ```
+ 

app.py

@@ -0,0 +1,48 @@
+
+import gradio as gr
+from gradio_datetimerange import DateTimeRange
+import pandas as pd
+from random import randint
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+with gr.Blocks() as demo:
+    date = DateTimeRange(["2021-01-01 00:00:00", "2021-01-07 00:00:00"])
+    merged_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    split_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+    with gr.Row():
+        humidity_bar_plot = gr.BarPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+            x_bin="1h",
+        )
+        humidity_scatter_plot = gr.ScatterPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+        )
+    
+    date.bind([merged_temp_plot, split_temp_plot, humidity_bar_plot, humidity_scatter_plot])
+
+
+if __name__ == "__main__":
+    demo.launch()

css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

requirements.txt

@@ -0,0 +1 @@
+gradio_datetimerange

space.py

@@ -0,0 +1,170 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'DateTimeRange': {'description': 'Component to select range of time.', 'members': {'__init__': {'value': {'type': 'tuple[float | str | datetime, float | str | datetime] | None', 'default': 'None', 'description': 'default value for datetime.'}, 'include_time': {'type': 'bool', 'default': 'True', 'description': 'If True, the component will include time selection. If False, only date selection will be available.'}, 'type': {'type': 'Literal["timestamp", "datetime", "string"]', 'default': '"timestamp"', 'description': 'The type of the value. Can be "timestamp", "datetime", or "string". If "timestamp", the value will be a number representing the start and end date in seconds since epoch. If "datetime", the value will be a datetime object. If "string", the value will be the date entered by the user.'}, 'timezone': {'type': 'str | None', 'default': 'None', 'description': 'The timezone to use for timestamps, such as "US/Pacific" or "Europe/Paris". If None, the timezone will be the local timezone.'}, 'quick_ranges': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of strings representing quick ranges to display, such as ["30s", "1h", "24h", "7d"]. Set to [] to clear.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': '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.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': '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.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | None', 'default': 'None', 'description': 'if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.'}}, 'postprocess': {'value': {'type': 'tuple[float | datetime | str, float | datetime | str] | None', 'description': 'Expects a tuple pair of datetimes.'}}, 'preprocess': {'return': {'type': 'tuple[str | float | datetime, str | float | datetime] | None', 'description': 'Passes text value as a {str} into the function.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the DateTimeRange 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.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'DateTimeRange': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_datetimerange`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_datetimerange/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_datetimerange"></a>  
+</div>
+
+Component to create time ranges.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_datetimerange
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_datetimerange import DateTimeRange
+import pandas as pd
+from random import randint
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+with gr.Blocks() as demo:
+    date = DateTimeRange(["2021-01-01 00:00:00", "2021-01-07 00:00:00"])
+    merged_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    split_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+    with gr.Row():
+        humidity_bar_plot = gr.BarPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+            x_bin="1h",
+        )
+        humidity_scatter_plot = gr.ScatterPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+        )
+    
+    date.bind([merged_temp_plot, split_temp_plot, humidity_bar_plot, humidity_scatter_plot])
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `DateTimeRange`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["DateTimeRange"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["DateTimeRange"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes text value as a {str} into the function.
+- **As output:** Should return, expects a tuple pair of datetimes.
+
+ ```python
+def predict(
+    value: tuple[str | float | datetime, str | float | datetime] | None
+) -> tuple[float | datetime | str, float | datetime | str] | None:
+    return value
+```
+""", elem_classes=["md-custom", "DateTimeRange-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          DateTimeRange: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

src/README.md

@@ -0,0 +1,327 @@
+---
+tags: [gradio-custom-component, DateTime]
+title: gradio_datetimerange
+short_description: Component to create time ranges.
+colorFrom: blue
+colorTo: yellow
+sdk: gradio
+pinned: false
+app_file: space.py
+---
+
+# `gradio_datetimerange`
+<a href="https://pypi.org/project/gradio_datetimerange/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_datetimerange"></a>  
+
+Component to create time ranges.
+
+## Installation
+
+```bash
+pip install gradio_datetimerange
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_datetimerange import DateTimeRange
+import pandas as pd
+from random import randint
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+with gr.Blocks() as demo:
+    date = DateTimeRange(["2021-01-01 00:00:00", "2021-01-07 00:00:00"])
+    merged_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    split_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+    with gr.Row():
+        humidity_bar_plot = gr.BarPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+            x_bin="1h",
+        )
+        humidity_scatter_plot = gr.ScatterPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+        )
+    
+    date.bind([merged_temp_plot, split_temp_plot, humidity_bar_plot, humidity_scatter_plot])
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `DateTimeRange`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+tuple[float | str | datetime, float | str | datetime] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">default value for datetime.</td>
+</tr>
+
+<tr>
+<td align="left"><code>include_time</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If True, the component will include time selection. If False, only date selection will be available.</td>
+</tr>
+
+<tr>
+<td align="left"><code>type</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Literal["timestamp", "datetime", "string"]
+```
+
+</td>
+<td align="left"><code>"timestamp"</code></td>
+<td align="left">The type of the value. Can be "timestamp", "datetime", or "string". If "timestamp", the value will be a number representing the start and end date in seconds since epoch. If "datetime", the value will be a datetime object. If "string", the value will be the date entered by the user.</td>
+</tr>
+
+<tr>
+<td align="left"><code>timezone</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The timezone to use for timestamps, such as "US/Pacific" or "Europe/Paris". If None, the timezone will be the local timezone.</td>
+</tr>
+
+<tr>
+<td align="left"><code>quick_ranges</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">List of strings representing quick ranges to display, such as ["30s", "1h", "24h", "7d"]. Set to [] to clear.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>info</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">additional component description.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">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.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the DateTimeRange 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. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes text value as a {str} into the function.
+- **As input:** Should return, expects a tuple pair of datetimes.
+
+ ```python
+ def predict(
+     value: tuple[str | float | datetime, str | float | datetime] | None
+ ) -> tuple[float | datetime | str, float | datetime | str] | None:
+     return value
+ ```
+ 

src/backend/gradio_datetimerange/__init__.py

@@ -0,0 +1,4 @@
+
+from .datetimerange import DateTimeRange
+
+__all__ = ['DateTimeRange']

src/backend/gradio_datetimerange/datetimerange.py

@@ -0,0 +1,158 @@
+"""gr.DateTime() component."""
+
+from __future__ import annotations
+
+from datetime import datetime
+from typing import Any, Literal, TYPE_CHECKING, cast
+
+from gradio.components import DateTime
+from gradio.events import Events, SelectData, on
+from gradio.helpers import skip
+
+if TYPE_CHECKING:
+    from gradio.components.native_plot import NativePlot
+
+
+class DateTimeRange(DateTime):
+    """
+    Component to select range of time.
+    """
+
+    EVENTS = [
+        Events.change,
+    ]
+
+    def __init__(
+        self,
+        value: tuple[float | str | datetime, float | str | datetime] | None = None,
+        *,
+        include_time: bool = True,
+        type: Literal["timestamp", "datetime", "string"] = "timestamp",
+        timezone: str | None = None,
+        quick_ranges: list[str] | None = None,
+        label: str | None = None,
+        show_label: bool | None = None,
+        info: str | None = None,
+        every: float | None = None,
+        scale: int | None = None,
+        min_width: int = 160,
+        visible: bool = True,
+        elem_id: str | None = None,
+        elem_classes: list[str] | str | None = None,
+        render: bool = True,
+        key: int | str | None = None,
+    ):
+        """
+        Parameters:
+            value: default value for datetime.
+            label: The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.
+            show_label: if True, will display label.
+            include_time: If True, the component will include time selection. If False, only date selection will be available.
+            type: The type of the value. Can be "timestamp", "datetime", or "string". If "timestamp", the value will be a number representing the start and end date in seconds since epoch. If "datetime", the value will be a datetime object. If "string", the value will be the date entered by the user.
+            timezone: The timezone to use for timestamps, such as "US/Pacific" or "Europe/Paris". If None, the timezone will be the local timezone.
+            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. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute.
+            scale: relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.
+            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.
+            visible: If False, component will be hidden.
+            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.
+            render: If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.
+            key: if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.
+            quick_ranges: List of strings representing quick ranges to display, such as ["30s", "1h", "24h", "7d"]. Set to [] to clear.
+        """
+        super().__init__(
+            every=every,
+            scale=scale,
+            min_width=min_width,
+            visible=visible,
+            label=label,
+            show_label=show_label,
+            info=info,
+            elem_id=elem_id,
+            elem_classes=elem_classes,
+            render=render,
+            key=key,
+            value=value,
+            type=type,
+            include_time=include_time,
+            timezone=timezone,
+        )
+
+        self.quick_ranges = (
+            ["15m", "1h", "24h"] if quick_ranges is None else quick_ranges
+        )
+        self._init_value = None
+        if value:
+            init_range = self.postprocess(value)
+            self._init_value = (self.get_datetime_from_str(init_range[0]).timestamp(), self.get_datetime_from_str(init_range[1]).timestamp()) if value else None
+
+    def preprocess(self, payload: tuple[str, str] | None) -> tuple[str | float | datetime, str | float | datetime] | None:
+        """
+        Parameters:
+            payload: the text entered in the textarea.
+        Returns:
+            Passes text value as a {str} into the function.
+        """
+        if payload is None:
+            return None
+        start, end = super().preprocess(payload[0]), super().preprocess(payload[1])
+        if start is None or end is None:
+            return None
+        return start, end
+
+    def postprocess(self, value: tuple[float | datetime | str, float | datetime | str]  | None) -> tuple[str, str] | None:
+        """
+        Parameters:
+            value: Expects a tuple pair of datetimes.
+        Returns:
+            A tuple pair of timestamps.
+        """
+        if value is None:
+            return None
+
+        start, end = super().postprocess(value[0]), super().postprocess(value[1])
+        if start is None or end is None:
+            return None
+        return start, end
+
+
+    def api_info(self) -> dict[str, Any]:
+        return {
+            "type": {},
+            "description": f"Two strings formatted as YYYY-MM-DD{' HH:MM:SS' if self.include_time else ''}",
+        }
+
+    def example_payload(self) -> list[str]:
+        return ["2020-10-01 05:20:15", "2020-10-01 06:20:15"]
+
+    def example_value(self) -> list[str]:
+        return ["2020-10-01 05:20:15", "2020-10-01 06:20:15"]
+    
+    def bind(self, plots: NativePlot | list[NativePlot]) -> None:
+        from gradio.components.native_plot import NativePlot
+
+        if not isinstance(plots, list):
+            plots = [plots]
+        plot_count = len(plots)
+
+        def reset_range(select: SelectData):
+            if select.selected:
+                a, b = cast("tuple[float, float]", select.index)
+                dt_a, dt_b = datetime.fromtimestamp(a), datetime.fromtimestamp(b)
+                return dt_a, dt_b
+            else:
+                return skip()
+
+        for plot in plots:
+            if self._init_value is not None:
+                plot.x_lim = self._init_value
+            plot.select(reset_range, None, self, show_api=False)
+
+        def update_plots(domain: tuple[int, int]):
+            changes = [
+                NativePlot(x_lim=domain)
+                for _ in range(plot_count)
+            ]
+            return changes if len(changes) > 1 else changes[0]
+
+        self.change(update_plots, self, plots, show_api=False)  # type: ignore

src/backend/gradio_datetimerange/templates/component/index.js

@@ -0,0 +1,2250 @@
+const {
+  SvelteComponent: it,
+  assign: ft,
+  create_slot: st,
+  detach: at,
+  element: ot,
+  get_all_dirty_from_scope: _t,
+  get_slot_changes: ut,
+  get_spread_update: rt,
+  init: dt,
+  insert: ct,
+  safe_not_equal: mt,
+  set_dynamic_element_data: ve,
+  set_style: B,
+  toggle_class: T,
+  transition_in: Pe,
+  transition_out: Ye,
+  update_slot_base: bt
+} = window.__gradio__svelte__internal;
+function ht(n) {
+  let e, t, l;
+  const i = (
+    /*#slots*/
+    n[18].default
+  ), s = st(
+    i,
+    n,
+    /*$$scope*/
+    n[17],
+    null
+  );
+  let _ = [
+    { "data-testid": (
+      /*test_id*/
+      n[7]
+    ) },
+    { id: (
+      /*elem_id*/
+      n[2]
+    ) },
+    {
+      class: t = "block " + /*elem_classes*/
+      n[3].join(" ") + " svelte-nl1om8"
+    }
+  ], a = {};
+  for (let f = 0; f < _.length; f += 1)
+    a = ft(a, _[f]);
+  return {
+    c() {
+      e = ot(
+        /*tag*/
+        n[14]
+      ), s && s.c(), ve(
+        /*tag*/
+        n[14]
+      )(e, a), T(
+        e,
+        "hidden",
+        /*visible*/
+        n[10] === !1
+      ), T(
+        e,
+        "padded",
+        /*padding*/
+        n[6]
+      ), T(
+        e,
+        "border_focus",
+        /*border_mode*/
+        n[5] === "focus"
+      ), T(
+        e,
+        "border_contrast",
+        /*border_mode*/
+        n[5] === "contrast"
+      ), T(e, "hide-container", !/*explicit_call*/
+      n[8] && !/*container*/
+      n[9]), B(
+        e,
+        "height",
+        /*get_dimension*/
+        n[15](
+          /*height*/
+          n[0]
+        )
+      ), B(e, "width", typeof /*width*/
+      n[1] == "number" ? `calc(min(${/*width*/
+      n[1]}px, 100%))` : (
+        /*get_dimension*/
+        n[15](
+          /*width*/
+          n[1]
+        )
+      )), B(
+        e,
+        "border-style",
+        /*variant*/
+        n[4]
+      ), B(
+        e,
+        "overflow",
+        /*allow_overflow*/
+        n[11] ? "visible" : "hidden"
+      ), B(
+        e,
+        "flex-grow",
+        /*scale*/
+        n[12]
+      ), B(e, "min-width", `calc(min(${/*min_width*/
+      n[13]}px, 100%))`), B(e, "border-width", "var(--block-border-width)");
+    },
+    m(f, o) {
+      ct(f, e, o), s && s.m(e, null), l = !0;
+    },
+    p(f, o) {
+      s && s.p && (!l || o & /*$$scope*/
+      131072) && bt(
+        s,
+        i,
+        f,
+        /*$$scope*/
+        f[17],
+        l ? ut(
+          i,
+          /*$$scope*/
+          f[17],
+          o,
+          null
+        ) : _t(
+          /*$$scope*/
+          f[17]
+        ),
+        null
+      ), ve(
+        /*tag*/
+        f[14]
+      )(e, a = rt(_, [
+        (!l || o & /*test_id*/
+        128) && { "data-testid": (
+          /*test_id*/
+          f[7]
+        ) },
+        (!l || o & /*elem_id*/
+        4) && { id: (
+          /*elem_id*/
+          f[2]
+        ) },
+        (!l || o & /*elem_classes*/
+        8 && t !== (t = "block " + /*elem_classes*/
+        f[3].join(" ") + " svelte-nl1om8")) && { class: t }
+      ])), T(
+        e,
+        "hidden",
+        /*visible*/
+        f[10] === !1
+      ), T(
+        e,
+        "padded",
+        /*padding*/
+        f[6]
+      ), T(
+        e,
+        "border_focus",
+        /*border_mode*/
+        f[5] === "focus"
+      ), T(
+        e,
+        "border_contrast",
+        /*border_mode*/
+        f[5] === "contrast"
+      ), T(e, "hide-container", !/*explicit_call*/
+      f[8] && !/*container*/
+      f[9]), o & /*height*/
+      1 && B(
+        e,
+        "height",
+        /*get_dimension*/
+        f[15](
+          /*height*/
+          f[0]
+        )
+      ), o & /*width*/
+      2 && B(e, "width", typeof /*width*/
+      f[1] == "number" ? `calc(min(${/*width*/
+      f[1]}px, 100%))` : (
+        /*get_dimension*/
+        f[15](
+          /*width*/
+          f[1]
+        )
+      )), o & /*variant*/
+      16 && B(
+        e,
+        "border-style",
+        /*variant*/
+        f[4]
+      ), o & /*allow_overflow*/
+      2048 && B(
+        e,
+        "overflow",
+        /*allow_overflow*/
+        f[11] ? "visible" : "hidden"
+      ), o & /*scale*/
+      4096 && B(
+        e,
+        "flex-grow",
+        /*scale*/
+        f[12]
+      ), o & /*min_width*/
+      8192 && B(e, "min-width", `calc(min(${/*min_width*/
+      f[13]}px, 100%))`);
+    },
+    i(f) {
+      l || (Pe(s, f), l = !0);
+    },
+    o(f) {
+      Ye(s, f), l = !1;
+    },
+    d(f) {
+      f && at(e), s && s.d(f);
+    }
+  };
+}
+function gt(n) {
+  let e, t = (
+    /*tag*/
+    n[14] && ht(n)
+  );
+  return {
+    c() {
+      t && t.c();
+    },
+    m(l, i) {
+      t && t.m(l, i), e = !0;
+    },
+    p(l, [i]) {
+      /*tag*/
+      l[14] && t.p(l, i);
+    },
+    i(l) {
+      e || (Pe(t, l), e = !0);
+    },
+    o(l) {
+      Ye(t, l), e = !1;
+    },
+    d(l) {
+      t && t.d(l);
+    }
+  };
+}
+function wt(n, e, t) {
+  let { $$slots: l = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: _ = void 0 } = e, { elem_id: a = "" } = e, { elem_classes: f = [] } = e, { variant: o = "solid" } = e, { border_mode: d = "base" } = e, { padding: g = !0 } = e, { type: w = "normal" } = e, { test_id: C = void 0 } = e, { explicit_call: q = !1 } = e, { container: k = !0 } = e, { visible: m = !0 } = e, { allow_overflow: r = !0 } = e, { scale: v = null } = e, { min_width: y = 0 } = e, j = w === "fieldset" ? "fieldset" : "div";
+  const S = (u) => {
+    if (u !== void 0) {
+      if (typeof u == "number")
+        return u + "px";
+      if (typeof u == "string")
+        return u;
+    }
+  };
+  return n.$$set = (u) => {
+    "height" in u && t(0, s = u.height), "width" in u && t(1, _ = u.width), "elem_id" in u && t(2, a = u.elem_id), "elem_classes" in u && t(3, f = u.elem_classes), "variant" in u && t(4, o = u.variant), "border_mode" in u && t(5, d = u.border_mode), "padding" in u && t(6, g = u.padding), "type" in u && t(16, w = u.type), "test_id" in u && t(7, C = u.test_id), "explicit_call" in u && t(8, q = u.explicit_call), "container" in u && t(9, k = u.container), "visible" in u && t(10, m = u.visible), "allow_overflow" in u && t(11, r = u.allow_overflow), "scale" in u && t(12, v = u.scale), "min_width" in u && t(13, y = u.min_width), "$$scope" in u && t(17, i = u.$$scope);
+  }, [
+    s,
+    _,
+    a,
+    f,
+    o,
+    d,
+    g,
+    C,
+    q,
+    k,
+    m,
+    r,
+    v,
+    y,
+    j,
+    S,
+    w,
+    i,
+    l
+  ];
+}
+let vt = class extends it {
+  constructor(e) {
+    super(), dt(this, e, wt, gt, mt, {
+      height: 0,
+      width: 1,
+      elem_id: 2,
+      elem_classes: 3,
+      variant: 4,
+      border_mode: 5,
+      padding: 6,
+      type: 16,
+      test_id: 7,
+      explicit_call: 8,
+      container: 9,
+      visible: 10,
+      allow_overflow: 11,
+      scale: 12,
+      min_width: 13
+    });
+  }
+};
+const {
+  SvelteComponent: kt,
+  attr: yt,
+  create_slot: qt,
+  detach: Ct,
+  element: St,
+  get_all_dirty_from_scope: jt,
+  get_slot_changes: Bt,
+  init: It,
+  insert: Tt,
+  safe_not_equal: Dt,
+  transition_in: Et,
+  transition_out: Nt,
+  update_slot_base: Mt
+} = window.__gradio__svelte__internal;
+function zt(n) {
+  let e, t;
+  const l = (
+    /*#slots*/
+    n[1].default
+  ), i = qt(
+    l,
+    n,
+    /*$$scope*/
+    n[0],
+    null
+  );
+  return {
+    c() {
+      e = St("div"), i && i.c(), yt(e, "class", "svelte-1hnfib2");
+    },
+    m(s, _) {
+      Tt(s, e, _), i && i.m(e, null), t = !0;
+    },
+    p(s, [_]) {
+      i && i.p && (!t || _ & /*$$scope*/
+      1) && Mt(
+        i,
+        l,
+        s,
+        /*$$scope*/
+        s[0],
+        t ? Bt(
+          l,
+          /*$$scope*/
+          s[0],
+          _,
+          null
+        ) : jt(
+          /*$$scope*/
+          s[0]
+        ),
+        null
+      );
+    },
+    i(s) {
+      t || (Et(i, s), t = !0);
+    },
+    o(s) {
+      Nt(i, s), t = !1;
+    },
+    d(s) {
+      s && Ct(e), i && i.d(s);
+    }
+  };
+}
+function Ft(n, e, t) {
+  let { $$slots: l = {}, $$scope: i } = e;
+  return n.$$set = (s) => {
+    "$$scope" in s && t(0, i = s.$$scope);
+  }, [i, l];
+}
+let Ht = class extends kt {
+  constructor(e) {
+    super(), It(this, e, Ft, zt, Dt, {});
+  }
+};
+const {
+  SvelteComponent: Jt,
+  attr: ke,
+  check_outros: Lt,
+  create_component: Ot,
+  create_slot: Pt,
+  destroy_component: Yt,
+  detach: X,
+  element: At,
+  empty: Gt,
+  get_all_dirty_from_scope: Kt,
+  get_slot_changes: Qt,
+  group_outros: Rt,
+  init: Ut,
+  insert: Z,
+  mount_component: Vt,
+  safe_not_equal: Wt,
+  set_data: Xt,
+  space: Zt,
+  text: pt,
+  toggle_class: z,
+  transition_in: K,
+  transition_out: p,
+  update_slot_base: xt
+} = window.__gradio__svelte__internal;
+function ye(n) {
+  let e, t;
+  return e = new Ht({
+    props: {
+      $$slots: { default: [$t] },
+      $$scope: { ctx: n }
+    }
+  }), {
+    c() {
+      Ot(e.$$.fragment);
+    },
+    m(l, i) {
+      Vt(e, l, i), t = !0;
+    },
+    p(l, i) {
+      const s = {};
+      i & /*$$scope, info*/
+      10 && (s.$$scope = { dirty: i, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (K(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      p(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      Yt(e, l);
+    }
+  };
+}
+function $t(n) {
+  let e;
+  return {
+    c() {
+      e = pt(
+        /*info*/
+        n[1]
+      );
+    },
+    m(t, l) {
+      Z(t, e, l);
+    },
+    p(t, l) {
+      l & /*info*/
+      2 && Xt(
+        e,
+        /*info*/
+        t[1]
+      );
+    },
+    d(t) {
+      t && X(e);
+    }
+  };
+}
+function en(n) {
+  let e, t, l, i;
+  const s = (
+    /*#slots*/
+    n[2].default
+  ), _ = Pt(
+    s,
+    n,
+    /*$$scope*/
+    n[3],
+    null
+  );
+  let a = (
+    /*info*/
+    n[1] && ye(n)
+  );
+  return {
+    c() {
+      e = At("span"), _ && _.c(), t = Zt(), a && a.c(), l = Gt(), ke(e, "data-testid", "block-info"), ke(e, "class", "svelte-22c38v"), z(e, "sr-only", !/*show_label*/
+      n[0]), z(e, "hide", !/*show_label*/
+      n[0]), z(
+        e,
+        "has-info",
+        /*info*/
+        n[1] != null
+      );
+    },
+    m(f, o) {
+      Z(f, e, o), _ && _.m(e, null), Z(f, t, o), a && a.m(f, o), Z(f, l, o), i = !0;
+    },
+    p(f, [o]) {
+      _ && _.p && (!i || o & /*$$scope*/
+      8) && xt(
+        _,
+        s,
+        f,
+        /*$$scope*/
+        f[3],
+        i ? Qt(
+          s,
+          /*$$scope*/
+          f[3],
+          o,
+          null
+        ) : Kt(
+          /*$$scope*/
+          f[3]
+        ),
+        null
+      ), (!i || o & /*show_label*/
+      1) && z(e, "sr-only", !/*show_label*/
+      f[0]), (!i || o & /*show_label*/
+      1) && z(e, "hide", !/*show_label*/
+      f[0]), (!i || o & /*info*/
+      2) && z(
+        e,
+        "has-info",
+        /*info*/
+        f[1] != null
+      ), /*info*/
+      f[1] ? a ? (a.p(f, o), o & /*info*/
+      2 && K(a, 1)) : (a = ye(f), a.c(), K(a, 1), a.m(l.parentNode, l)) : a && (Rt(), p(a, 1, 1, () => {
+        a = null;
+      }), Lt());
+    },
+    i(f) {
+      i || (K(_, f), K(a), i = !0);
+    },
+    o(f) {
+      p(_, f), p(a), i = !1;
+    },
+    d(f) {
+      f && (X(e), X(t), X(l)), _ && _.d(f), a && a.d(f);
+    }
+  };
+}
+function tn(n, e, t) {
+  let { $$slots: l = {}, $$scope: i } = e, { show_label: s = !0 } = e, { info: _ = void 0 } = e;
+  return n.$$set = (a) => {
+    "show_label" in a && t(0, s = a.show_label), "info" in a && t(1, _ = a.info), "$$scope" in a && t(3, i = a.$$scope);
+  }, [s, _, l, i];
+}
+let nn = class extends Jt {
+  constructor(e) {
+    super(), Ut(this, e, tn, en, Wt, { show_label: 0, info: 1 });
+  }
+};
+const {
+  SvelteComponent: ln,
+  append: V,
+  attr: h,
+  detach: fn,
+  init: sn,
+  insert: an,
+  noop: _e,
+  safe_not_equal: on,
+  svg_element: G
+} = window.__gradio__svelte__internal;
+function _n(n) {
+  let e, t, l, i, s;
+  return {
+    c() {
+      e = G("svg"), t = G("rect"), l = G("line"), i = G("line"), s = G("line"), h(t, "x", "2"), h(t, "y", "4"), h(t, "width", "20"), h(t, "height", "18"), h(t, "stroke", "currentColor"), h(t, "stroke-width", "2"), h(t, "stroke-linecap", "round"), h(t, "stroke-linejoin", "round"), h(t, "fill", "none"), h(l, "x1", "2"), h(l, "y1", "9"), h(l, "x2", "22"), h(l, "y2", "9"), h(l, "stroke", "currentColor"), h(l, "stroke-width", "2"), h(l, "stroke-linecap", "round"), h(l, "stroke-linejoin", "round"), h(l, "fill", "none"), h(i, "x1", "7"), h(i, "y1", "2"), h(i, "x2", "7"), h(i, "y2", "6"), h(i, "stroke", "currentColor"), h(i, "stroke-width", "2"), h(i, "stroke-linecap", "round"), h(i, "stroke-linejoin", "round"), h(i, "fill", "none"), h(s, "x1", "17"), h(s, "y1", "2"), h(s, "x2", "17"), h(s, "y2", "6"), h(s, "stroke", "currentColor"), h(s, "stroke-width", "2"), h(s, "stroke-linecap", "round"), h(s, "stroke-linejoin", "round"), h(s, "fill", "none"), h(e, "xmlns", "http://www.w3.org/2000/svg"), h(e, "width", "24px"), h(e, "height", "24px"), h(e, "viewBox", "0 0 24 24");
+    },
+    m(_, a) {
+      an(_, e, a), V(e, t), V(e, l), V(e, i), V(e, s);
+    },
+    p: _e,
+    i: _e,
+    o: _e,
+    d(_) {
+      _ && fn(e);
+    }
+  };
+}
+class un extends ln {
+  constructor(e) {
+    super(), sn(this, e, null, _n, on, {});
+  }
+}
+const rn = [
+  { color: "red", primary: 600, secondary: 100 },
+  { color: "green", primary: 600, secondary: 100 },
+  { color: "blue", primary: 600, secondary: 100 },
+  { color: "yellow", primary: 500, secondary: 100 },
+  { color: "purple", primary: 600, secondary: 100 },
+  { color: "teal", primary: 600, secondary: 100 },
+  { color: "orange", primary: 600, secondary: 100 },
+  { color: "cyan", primary: 600, secondary: 100 },
+  { color: "lime", primary: 500, secondary: 100 },
+  { color: "pink", primary: 600, secondary: 100 }
+], qe = {
+  inherit: "inherit",
+  current: "currentColor",
+  transparent: "transparent",
+  black: "#000",
+  white: "#fff",
+  slate: {
+    50: "#f8fafc",
+    100: "#f1f5f9",
+    200: "#e2e8f0",
+    300: "#cbd5e1",
+    400: "#94a3b8",
+    500: "#64748b",
+    600: "#475569",
+    700: "#334155",
+    800: "#1e293b",
+    900: "#0f172a",
+    950: "#020617"
+  },
+  gray: {
+    50: "#f9fafb",
+    100: "#f3f4f6",
+    200: "#e5e7eb",
+    300: "#d1d5db",
+    400: "#9ca3af",
+    500: "#6b7280",
+    600: "#4b5563",
+    700: "#374151",
+    800: "#1f2937",
+    900: "#111827",
+    950: "#030712"
+  },
+  zinc: {
+    50: "#fafafa",
+    100: "#f4f4f5",
+    200: "#e4e4e7",
+    300: "#d4d4d8",
+    400: "#a1a1aa",
+    500: "#71717a",
+    600: "#52525b",
+    700: "#3f3f46",
+    800: "#27272a",
+    900: "#18181b",
+    950: "#09090b"
+  },
+  neutral: {
+    50: "#fafafa",
+    100: "#f5f5f5",
+    200: "#e5e5e5",
+    300: "#d4d4d4",
+    400: "#a3a3a3",
+    500: "#737373",
+    600: "#525252",
+    700: "#404040",
+    800: "#262626",
+    900: "#171717",
+    950: "#0a0a0a"
+  },
+  stone: {
+    50: "#fafaf9",
+    100: "#f5f5f4",
+    200: "#e7e5e4",
+    300: "#d6d3d1",
+    400: "#a8a29e",
+    500: "#78716c",
+    600: "#57534e",
+    700: "#44403c",
+    800: "#292524",
+    900: "#1c1917",
+    950: "#0c0a09"
+  },
+  red: {
+    50: "#fef2f2",
+    100: "#fee2e2",
+    200: "#fecaca",
+    300: "#fca5a5",
+    400: "#f87171",
+    500: "#ef4444",
+    600: "#dc2626",
+    700: "#b91c1c",
+    800: "#991b1b",
+    900: "#7f1d1d",
+    950: "#450a0a"
+  },
+  orange: {
+    50: "#fff7ed",
+    100: "#ffedd5",
+    200: "#fed7aa",
+    300: "#fdba74",
+    400: "#fb923c",
+    500: "#f97316",
+    600: "#ea580c",
+    700: "#c2410c",
+    800: "#9a3412",
+    900: "#7c2d12",
+    950: "#431407"
+  },
+  amber: {
+    50: "#fffbeb",
+    100: "#fef3c7",
+    200: "#fde68a",
+    300: "#fcd34d",
+    400: "#fbbf24",
+    500: "#f59e0b",
+    600: "#d97706",
+    700: "#b45309",
+    800: "#92400e",
+    900: "#78350f",
+    950: "#451a03"
+  },
+  yellow: {
+    50: "#fefce8",
+    100: "#fef9c3",
+    200: "#fef08a",
+    300: "#fde047",
+    400: "#facc15",
+    500: "#eab308",
+    600: "#ca8a04",
+    700: "#a16207",
+    800: "#854d0e",
+    900: "#713f12",
+    950: "#422006"
+  },
+  lime: {
+    50: "#f7fee7",
+    100: "#ecfccb",
+    200: "#d9f99d",
+    300: "#bef264",
+    400: "#a3e635",
+    500: "#84cc16",
+    600: "#65a30d",
+    700: "#4d7c0f",
+    800: "#3f6212",
+    900: "#365314",
+    950: "#1a2e05"
+  },
+  green: {
+    50: "#f0fdf4",
+    100: "#dcfce7",
+    200: "#bbf7d0",
+    300: "#86efac",
+    400: "#4ade80",
+    500: "#22c55e",
+    600: "#16a34a",
+    700: "#15803d",
+    800: "#166534",
+    900: "#14532d",
+    950: "#052e16"
+  },
+  emerald: {
+    50: "#ecfdf5",
+    100: "#d1fae5",
+    200: "#a7f3d0",
+    300: "#6ee7b7",
+    400: "#34d399",
+    500: "#10b981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065f46",
+    900: "#064e3b",
+    950: "#022c22"
+  },
+  teal: {
+    50: "#f0fdfa",
+    100: "#ccfbf1",
+    200: "#99f6e4",
+    300: "#5eead4",
+    400: "#2dd4bf",
+    500: "#14b8a6",
+    600: "#0d9488",
+    700: "#0f766e",
+    800: "#115e59",
+    900: "#134e4a",
+    950: "#042f2e"
+  },
+  cyan: {
+    50: "#ecfeff",
+    100: "#cffafe",
+    200: "#a5f3fc",
+    300: "#67e8f9",
+    400: "#22d3ee",
+    500: "#06b6d4",
+    600: "#0891b2",
+    700: "#0e7490",
+    800: "#155e75",
+    900: "#164e63",
+    950: "#083344"
+  },
+  sky: {
+    50: "#f0f9ff",
+    100: "#e0f2fe",
+    200: "#bae6fd",
+    300: "#7dd3fc",
+    400: "#38bdf8",
+    500: "#0ea5e9",
+    600: "#0284c7",
+    700: "#0369a1",
+    800: "#075985",
+    900: "#0c4a6e",
+    950: "#082f49"
+  },
+  blue: {
+    50: "#eff6ff",
+    100: "#dbeafe",
+    200: "#bfdbfe",
+    300: "#93c5fd",
+    400: "#60a5fa",
+    500: "#3b82f6",
+    600: "#2563eb",
+    700: "#1d4ed8",
+    800: "#1e40af",
+    900: "#1e3a8a",
+    950: "#172554"
+  },
+  indigo: {
+    50: "#eef2ff",
+    100: "#e0e7ff",
+    200: "#c7d2fe",
+    300: "#a5b4fc",
+    400: "#818cf8",
+    500: "#6366f1",
+    600: "#4f46e5",
+    700: "#4338ca",
+    800: "#3730a3",
+    900: "#312e81",
+    950: "#1e1b4b"
+  },
+  violet: {
+    50: "#f5f3ff",
+    100: "#ede9fe",
+    200: "#ddd6fe",
+    300: "#c4b5fd",
+    400: "#a78bfa",
+    500: "#8b5cf6",
+    600: "#7c3aed",
+    700: "#6d28d9",
+    800: "#5b21b6",
+    900: "#4c1d95",
+    950: "#2e1065"
+  },
+  purple: {
+    50: "#faf5ff",
+    100: "#f3e8ff",
+    200: "#e9d5ff",
+    300: "#d8b4fe",
+    400: "#c084fc",
+    500: "#a855f7",
+    600: "#9333ea",
+    700: "#7e22ce",
+    800: "#6b21a8",
+    900: "#581c87",
+    950: "#3b0764"
+  },
+  fuchsia: {
+    50: "#fdf4ff",
+    100: "#fae8ff",
+    200: "#f5d0fe",
+    300: "#f0abfc",
+    400: "#e879f9",
+    500: "#d946ef",
+    600: "#c026d3",
+    700: "#a21caf",
+    800: "#86198f",
+    900: "#701a75",
+    950: "#4a044e"
+  },
+  pink: {
+    50: "#fdf2f8",
+    100: "#fce7f3",
+    200: "#fbcfe8",
+    300: "#f9a8d4",
+    400: "#f472b6",
+    500: "#ec4899",
+    600: "#db2777",
+    700: "#be185d",
+    800: "#9d174d",
+    900: "#831843",
+    950: "#500724"
+  },
+  rose: {
+    50: "#fff1f2",
+    100: "#ffe4e6",
+    200: "#fecdd3",
+    300: "#fda4af",
+    400: "#fb7185",
+    500: "#f43f5e",
+    600: "#e11d48",
+    700: "#be123c",
+    800: "#9f1239",
+    900: "#881337",
+    950: "#4c0519"
+  }
+};
+rn.reduce(
+  (n, { color: e, primary: t, secondary: l }) => ({
+    ...n,
+    [e]: {
+      primary: qe[e][t],
+      secondary: qe[e][l]
+    }
+  }),
+  {}
+);
+const {
+  SvelteComponent: dn,
+  assign: cn,
+  create_slot: mn,
+  detach: bn,
+  element: hn,
+  get_all_dirty_from_scope: gn,
+  get_slot_changes: wn,
+  get_spread_update: vn,
+  init: kn,
+  insert: yn,
+  safe_not_equal: qn,
+  set_dynamic_element_data: Ce,
+  set_style: I,
+  toggle_class: D,
+  transition_in: Ae,
+  transition_out: Ge,
+  update_slot_base: Cn
+} = window.__gradio__svelte__internal;
+function Sn(n) {
+  let e, t, l;
+  const i = (
+    /*#slots*/
+    n[18].default
+  ), s = mn(
+    i,
+    n,
+    /*$$scope*/
+    n[17],
+    null
+  );
+  let _ = [
+    { "data-testid": (
+      /*test_id*/
+      n[7]
+    ) },
+    { id: (
+      /*elem_id*/
+      n[2]
+    ) },
+    {
+      class: t = "block " + /*elem_classes*/
+      n[3].join(" ") + " svelte-nl1om8"
+    }
+  ], a = {};
+  for (let f = 0; f < _.length; f += 1)
+    a = cn(a, _[f]);
+  return {
+    c() {
+      e = hn(
+        /*tag*/
+        n[14]
+      ), s && s.c(), Ce(
+        /*tag*/
+        n[14]
+      )(e, a), D(
+        e,
+        "hidden",
+        /*visible*/
+        n[10] === !1
+      ), D(
+        e,
+        "padded",
+        /*padding*/
+        n[6]
+      ), D(
+        e,
+        "border_focus",
+        /*border_mode*/
+        n[5] === "focus"
+      ), D(
+        e,
+        "border_contrast",
+        /*border_mode*/
+        n[5] === "contrast"
+      ), D(e, "hide-container", !/*explicit_call*/
+      n[8] && !/*container*/
+      n[9]), I(
+        e,
+        "height",
+        /*get_dimension*/
+        n[15](
+          /*height*/
+          n[0]
+        )
+      ), I(e, "width", typeof /*width*/
+      n[1] == "number" ? `calc(min(${/*width*/
+      n[1]}px, 100%))` : (
+        /*get_dimension*/
+        n[15](
+          /*width*/
+          n[1]
+        )
+      )), I(
+        e,
+        "border-style",
+        /*variant*/
+        n[4]
+      ), I(
+        e,
+        "overflow",
+        /*allow_overflow*/
+        n[11] ? "visible" : "hidden"
+      ), I(
+        e,
+        "flex-grow",
+        /*scale*/
+        n[12]
+      ), I(e, "min-width", `calc(min(${/*min_width*/
+      n[13]}px, 100%))`), I(e, "border-width", "var(--block-border-width)");
+    },
+    m(f, o) {
+      yn(f, e, o), s && s.m(e, null), l = !0;
+    },
+    p(f, o) {
+      s && s.p && (!l || o & /*$$scope*/
+      131072) && Cn(
+        s,
+        i,
+        f,
+        /*$$scope*/
+        f[17],
+        l ? wn(
+          i,
+          /*$$scope*/
+          f[17],
+          o,
+          null
+        ) : gn(
+          /*$$scope*/
+          f[17]
+        ),
+        null
+      ), Ce(
+        /*tag*/
+        f[14]
+      )(e, a = vn(_, [
+        (!l || o & /*test_id*/
+        128) && { "data-testid": (
+          /*test_id*/
+          f[7]
+        ) },
+        (!l || o & /*elem_id*/
+        4) && { id: (
+          /*elem_id*/
+          f[2]
+        ) },
+        (!l || o & /*elem_classes*/
+        8 && t !== (t = "block " + /*elem_classes*/
+        f[3].join(" ") + " svelte-nl1om8")) && { class: t }
+      ])), D(
+        e,
+        "hidden",
+        /*visible*/
+        f[10] === !1
+      ), D(
+        e,
+        "padded",
+        /*padding*/
+        f[6]
+      ), D(
+        e,
+        "border_focus",
+        /*border_mode*/
+        f[5] === "focus"
+      ), D(
+        e,
+        "border_contrast",
+        /*border_mode*/
+        f[5] === "contrast"
+      ), D(e, "hide-container", !/*explicit_call*/
+      f[8] && !/*container*/
+      f[9]), o & /*height*/
+      1 && I(
+        e,
+        "height",
+        /*get_dimension*/
+        f[15](
+          /*height*/
+          f[0]
+        )
+      ), o & /*width*/
+      2 && I(e, "width", typeof /*width*/
+      f[1] == "number" ? `calc(min(${/*width*/
+      f[1]}px, 100%))` : (
+        /*get_dimension*/
+        f[15](
+          /*width*/
+          f[1]
+        )
+      )), o & /*variant*/
+      16 && I(
+        e,
+        "border-style",
+        /*variant*/
+        f[4]
+      ), o & /*allow_overflow*/
+      2048 && I(
+        e,
+        "overflow",
+        /*allow_overflow*/
+        f[11] ? "visible" : "hidden"
+      ), o & /*scale*/
+      4096 && I(
+        e,
+        "flex-grow",
+        /*scale*/
+        f[12]
+      ), o & /*min_width*/
+      8192 && I(e, "min-width", `calc(min(${/*min_width*/
+      f[13]}px, 100%))`);
+    },
+    i(f) {
+      l || (Ae(s, f), l = !0);
+    },
+    o(f) {
+      Ge(s, f), l = !1;
+    },
+    d(f) {
+      f && bn(e), s && s.d(f);
+    }
+  };
+}
+function jn(n) {
+  let e, t = (
+    /*tag*/
+    n[14] && Sn(n)
+  );
+  return {
+    c() {
+      t && t.c();
+    },
+    m(l, i) {
+      t && t.m(l, i), e = !0;
+    },
+    p(l, [i]) {
+      /*tag*/
+      l[14] && t.p(l, i);
+    },
+    i(l) {
+      e || (Ae(t, l), e = !0);
+    },
+    o(l) {
+      Ge(t, l), e = !1;
+    },
+    d(l) {
+      t && t.d(l);
+    }
+  };
+}
+function Bn(n, e, t) {
+  let { $$slots: l = {}, $$scope: i } = e, { height: s = void 0 } = e, { width: _ = void 0 } = e, { elem_id: a = "" } = e, { elem_classes: f = [] } = e, { variant: o = "solid" } = e, { border_mode: d = "base" } = e, { padding: g = !0 } = e, { type: w = "normal" } = e, { test_id: C = void 0 } = e, { explicit_call: q = !1 } = e, { container: k = !0 } = e, { visible: m = !0 } = e, { allow_overflow: r = !0 } = e, { scale: v = null } = e, { min_width: y = 0 } = e, j = w === "fieldset" ? "fieldset" : "div";
+  const S = (u) => {
+    if (u !== void 0) {
+      if (typeof u == "number")
+        return u + "px";
+      if (typeof u == "string")
+        return u;
+    }
+  };
+  return n.$$set = (u) => {
+    "height" in u && t(0, s = u.height), "width" in u && t(1, _ = u.width), "elem_id" in u && t(2, a = u.elem_id), "elem_classes" in u && t(3, f = u.elem_classes), "variant" in u && t(4, o = u.variant), "border_mode" in u && t(5, d = u.border_mode), "padding" in u && t(6, g = u.padding), "type" in u && t(16, w = u.type), "test_id" in u && t(7, C = u.test_id), "explicit_call" in u && t(8, q = u.explicit_call), "container" in u && t(9, k = u.container), "visible" in u && t(10, m = u.visible), "allow_overflow" in u && t(11, r = u.allow_overflow), "scale" in u && t(12, v = u.scale), "min_width" in u && t(13, y = u.min_width), "$$scope" in u && t(17, i = u.$$scope);
+  }, [
+    s,
+    _,
+    a,
+    f,
+    o,
+    d,
+    g,
+    C,
+    q,
+    k,
+    m,
+    r,
+    v,
+    y,
+    j,
+    S,
+    w,
+    i,
+    l
+  ];
+}
+class In extends dn {
+  constructor(e) {
+    super(), kn(this, e, Bn, jn, qn, {
+      height: 0,
+      width: 1,
+      elem_id: 2,
+      elem_classes: 3,
+      variant: 4,
+      border_mode: 5,
+      padding: 6,
+      type: 16,
+      test_id: 7,
+      explicit_call: 8,
+      container: 9,
+      visible: 10,
+      allow_overflow: 11,
+      scale: 12,
+      min_width: 13
+    });
+  }
+}
+const {
+  SvelteComponent: Tn,
+  attr: Dn,
+  create_slot: En,
+  detach: Nn,
+  element: Mn,
+  get_all_dirty_from_scope: zn,
+  get_slot_changes: Fn,
+  init: Hn,
+  insert: Jn,
+  safe_not_equal: Ln,
+  transition_in: On,
+  transition_out: Pn,
+  update_slot_base: Yn
+} = window.__gradio__svelte__internal;
+function An(n) {
+  let e, t;
+  const l = (
+    /*#slots*/
+    n[1].default
+  ), i = En(
+    l,
+    n,
+    /*$$scope*/
+    n[0],
+    null
+  );
+  return {
+    c() {
+      e = Mn("div"), i && i.c(), Dn(e, "class", "svelte-1hnfib2");
+    },
+    m(s, _) {
+      Jn(s, e, _), i && i.m(e, null), t = !0;
+    },
+    p(s, [_]) {
+      i && i.p && (!t || _ & /*$$scope*/
+      1) && Yn(
+        i,
+        l,
+        s,
+        /*$$scope*/
+        s[0],
+        t ? Fn(
+          l,
+          /*$$scope*/
+          s[0],
+          _,
+          null
+        ) : zn(
+          /*$$scope*/
+          s[0]
+        ),
+        null
+      );
+    },
+    i(s) {
+      t || (On(i, s), t = !0);
+    },
+    o(s) {
+      Pn(i, s), t = !1;
+    },
+    d(s) {
+      s && Nn(e), i && i.d(s);
+    }
+  };
+}
+function Gn(n, e, t) {
+  let { $$slots: l = {}, $$scope: i } = e;
+  return n.$$set = (s) => {
+    "$$scope" in s && t(0, i = s.$$scope);
+  }, [i, l];
+}
+class Kn extends Tn {
+  constructor(e) {
+    super(), Hn(this, e, Gn, An, Ln, {});
+  }
+}
+const {
+  SvelteComponent: Qn,
+  attr: Se,
+  check_outros: Rn,
+  create_component: Un,
+  create_slot: Vn,
+  destroy_component: Wn,
+  detach: x,
+  element: Xn,
+  empty: Zn,
+  get_all_dirty_from_scope: pn,
+  get_slot_changes: xn,
+  group_outros: $n,
+  init: el,
+  insert: $,
+  mount_component: tl,
+  safe_not_equal: nl,
+  set_data: ll,
+  space: il,
+  text: fl,
+  toggle_class: F,
+  transition_in: Q,
+  transition_out: ee,
+  update_slot_base: sl
+} = window.__gradio__svelte__internal;
+function je(n) {
+  let e, t;
+  return e = new Kn({
+    props: {
+      $$slots: { default: [al] },
+      $$scope: { ctx: n }
+    }
+  }), {
+    c() {
+      Un(e.$$.fragment);
+    },
+    m(l, i) {
+      tl(e, l, i), t = !0;
+    },
+    p(l, i) {
+      const s = {};
+      i & /*$$scope, info*/
+      10 && (s.$$scope = { dirty: i, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (Q(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      ee(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      Wn(e, l);
+    }
+  };
+}
+function al(n) {
+  let e;
+  return {
+    c() {
+      e = fl(
+        /*info*/
+        n[1]
+      );
+    },
+    m(t, l) {
+      $(t, e, l);
+    },
+    p(t, l) {
+      l & /*info*/
+      2 && ll(
+        e,
+        /*info*/
+        t[1]
+      );
+    },
+    d(t) {
+      t && x(e);
+    }
+  };
+}
+function ol(n) {
+  let e, t, l, i;
+  const s = (
+    /*#slots*/
+    n[2].default
+  ), _ = Vn(
+    s,
+    n,
+    /*$$scope*/
+    n[3],
+    null
+  );
+  let a = (
+    /*info*/
+    n[1] && je(n)
+  );
+  return {
+    c() {
+      e = Xn("span"), _ && _.c(), t = il(), a && a.c(), l = Zn(), Se(e, "data-testid", "block-info"), Se(e, "class", "svelte-22c38v"), F(e, "sr-only", !/*show_label*/
+      n[0]), F(e, "hide", !/*show_label*/
+      n[0]), F(
+        e,
+        "has-info",
+        /*info*/
+        n[1] != null
+      );
+    },
+    m(f, o) {
+      $(f, e, o), _ && _.m(e, null), $(f, t, o), a && a.m(f, o), $(f, l, o), i = !0;
+    },
+    p(f, [o]) {
+      _ && _.p && (!i || o & /*$$scope*/
+      8) && sl(
+        _,
+        s,
+        f,
+        /*$$scope*/
+        f[3],
+        i ? xn(
+          s,
+          /*$$scope*/
+          f[3],
+          o,
+          null
+        ) : pn(
+          /*$$scope*/
+          f[3]
+        ),
+        null
+      ), (!i || o & /*show_label*/
+      1) && F(e, "sr-only", !/*show_label*/
+      f[0]), (!i || o & /*show_label*/
+      1) && F(e, "hide", !/*show_label*/
+      f[0]), (!i || o & /*info*/
+      2) && F(
+        e,
+        "has-info",
+        /*info*/
+        f[1] != null
+      ), /*info*/
+      f[1] ? a ? (a.p(f, o), o & /*info*/
+      2 && Q(a, 1)) : (a = je(f), a.c(), Q(a, 1), a.m(l.parentNode, l)) : a && ($n(), ee(a, 1, 1, () => {
+        a = null;
+      }), Rn());
+    },
+    i(f) {
+      i || (Q(_, f), Q(a), i = !0);
+    },
+    o(f) {
+      ee(_, f), ee(a), i = !1;
+    },
+    d(f) {
+      f && (x(e), x(t), x(l)), _ && _.d(f), a && a.d(f);
+    }
+  };
+}
+function _l(n, e, t) {
+  let { $$slots: l = {}, $$scope: i } = e, { show_label: s = !0 } = e, { info: _ = void 0 } = e;
+  return n.$$set = (a) => {
+    "show_label" in a && t(0, s = a.show_label), "info" in a && t(1, _ = a.info), "$$scope" in a && t(3, i = a.$$scope);
+  }, [s, _, l, i];
+}
+class ul extends Qn {
+  constructor(e) {
+    super(), el(this, e, _l, ol, nl, { show_label: 0, info: 1 });
+  }
+}
+const {
+  SvelteComponent: rl,
+  append: W,
+  attr: E,
+  binding_callbacks: Be,
+  create_component: re,
+  destroy_component: de,
+  detach: J,
+  element: H,
+  init: dl,
+  insert: L,
+  listen: N,
+  mount_component: ce,
+  run_all: ge,
+  safe_not_equal: cl,
+  set_data: ml,
+  set_input_value: Y,
+  space: ue,
+  text: bl,
+  toggle_class: Ie,
+  transition_in: me,
+  transition_out: be
+} = window.__gradio__svelte__internal;
+function hl(n) {
+  let e;
+  return {
+    c() {
+      e = bl(
+        /*label*/
+        n[1]
+      );
+    },
+    m(t, l) {
+      L(t, e, l);
+    },
+    p(t, l) {
+      l & /*label*/
+      2 && ml(
+        e,
+        /*label*/
+        t[1]
+      );
+    },
+    d(t) {
+      t && J(e);
+    }
+  };
+}
+function gl(n) {
+  let e, t, l;
+  return {
+    c() {
+      e = H("input"), E(e, "type", "date"), E(e, "class", "datetime svelte-1rjvq1p"), E(e, "step", "1");
+    },
+    m(i, s) {
+      L(i, e, s), n[23](e), Y(
+        e,
+        /*datevalue*/
+        n[12]
+      ), t || (l = [
+        N(
+          e,
+          "input",
+          /*input_input_handler_2*/
+          n[24]
+        ),
+        N(
+          e,
+          "input",
+          /*input_handler_1*/
+          n[25]
+        )
+      ], t = !0);
+    },
+    p(i, s) {
+      s & /*datevalue*/
+      4096 && Y(
+        e,
+        /*datevalue*/
+        i[12]
+      );
+    },
+    d(i) {
+      i && J(e), n[23](null), t = !1, ge(l);
+    }
+  };
+}
+function wl(n) {
+  let e, t, l;
+  return {
+    c() {
+      e = H("input"), E(e, "type", "datetime-local"), E(e, "class", "datetime svelte-1rjvq1p"), E(e, "step", "1");
+    },
+    m(i, s) {
+      L(i, e, s), n[20](e), Y(
+        e,
+        /*datevalue*/
+        n[12]
+      ), t || (l = [
+        N(
+          e,
+          "input",
+          /*input_input_handler_1*/
+          n[21]
+        ),
+        N(
+          e,
+          "input",
+          /*input_handler*/
+          n[22]
+        )
+      ], t = !0);
+    },
+    p(i, s) {
+      s & /*datevalue*/
+      4096 && Y(
+        e,
+        /*datevalue*/
+        i[12]
+      );
+    },
+    d(i) {
+      i && J(e), n[20](null), t = !1, ge(l);
+    }
+  };
+}
+function vl(n) {
+  let e, t, l, i, s, _, a, f, o, d, g, w;
+  t = new ul({
+    props: {
+      show_label: (
+        /*show_label*/
+        n[2]
+      ),
+      info: (
+        /*info*/
+        n[3]
+      ),
+      $$slots: { default: [hl] },
+      $$scope: { ctx: n }
+    }
+  });
+  function C(m, r) {
+    return (
+      /*include_time*/
+      m[9] ? wl : gl
+    );
+  }
+  let q = C(n), k = q(n);
+  return o = new un({}), {
+    c() {
+      e = H("div"), re(t.$$.fragment), l = ue(), i = H("div"), s = H("input"), _ = ue(), k.c(), a = ue(), f = H("button"), re(o.$$.fragment), E(e, "class", "label-content svelte-1rjvq1p"), E(s, "class", "time svelte-1rjvq1p"), Ie(s, "invalid", !/*valid*/
+      n[13]), E(f, "class", "calendar svelte-1rjvq1p"), E(i, "class", "timebox svelte-1rjvq1p");
+    },
+    m(m, r) {
+      L(m, e, r), ce(t, e, null), L(m, l, r), L(m, i, r), W(i, s), Y(
+        s,
+        /*entered_value*/
+        n[10]
+      ), W(i, _), k.m(i, null), W(i, a), W(i, f), ce(o, f, null), d = !0, g || (w = [
+        N(
+          s,
+          "input",
+          /*input_input_handler*/
+          n[18]
+        ),
+        N(
+          s,
+          "keydown",
+          /*keydown_handler*/
+          n[19]
+        ),
+        N(
+          s,
+          "blur",
+          /*submit_values*/
+          n[15]
+        ),
+        N(
+          f,
+          "click",
+          /*click_handler*/
+          n[26]
+        )
+      ], g = !0);
+    },
+    p(m, r) {
+      const v = {};
+      r & /*show_label*/
+      4 && (v.show_label = /*show_label*/
+      m[2]), r & /*info*/
+      8 && (v.info = /*info*/
+      m[3]), r & /*$$scope, label*/
+      268435458 && (v.$$scope = { dirty: r, ctx: m }), t.$set(v), r & /*entered_value*/
+      1024 && s.value !== /*entered_value*/
+      m[10] && Y(
+        s,
+        /*entered_value*/
+        m[10]
+      ), (!d || r & /*valid*/
+      8192) && Ie(s, "invalid", !/*valid*/
+      m[13]), q === (q = C(m)) && k ? k.p(m, r) : (k.d(1), k = q(m), k && (k.c(), k.m(i, a)));
+    },
+    i(m) {
+      d || (me(t.$$.fragment, m), me(o.$$.fragment, m), d = !0);
+    },
+    o(m) {
+      be(t.$$.fragment, m), be(o.$$.fragment, m), d = !1;
+    },
+    d(m) {
+      m && (J(e), J(l), J(i)), de(t), k.d(), de(o), g = !1, ge(w);
+    }
+  };
+}
+function kl(n) {
+  let e, t;
+  return e = new In({
+    props: {
+      visible: (
+        /*visible*/
+        n[6]
+      ),
+      elem_id: (
+        /*elem_id*/
+        n[4]
+      ),
+      elem_classes: (
+        /*elem_classes*/
+        n[5]
+      ),
+      scale: (
+        /*scale*/
+        n[7]
+      ),
+      min_width: (
+        /*min_width*/
+        n[8]
+      ),
+      allow_overflow: !1,
+      padding: !0,
+      $$slots: { default: [vl] },
+      $$scope: { ctx: n }
+    }
+  }), {
+    c() {
+      re(e.$$.fragment);
+    },
+    m(l, i) {
+      ce(e, l, i), t = !0;
+    },
+    p(l, [i]) {
+      const s = {};
+      i & /*visible*/
+      64 && (s.visible = /*visible*/
+      l[6]), i & /*elem_id*/
+      16 && (s.elem_id = /*elem_id*/
+      l[4]), i & /*elem_classes*/
+      32 && (s.elem_classes = /*elem_classes*/
+      l[5]), i & /*scale*/
+      128 && (s.scale = /*scale*/
+      l[7]), i & /*min_width*/
+      256 && (s.min_width = /*min_width*/
+      l[8]), i & /*$$scope, datetime, datevalue, entered_value, include_time, valid, gradio, show_label, info, label*/
+      268451343 && (s.$$scope = { dirty: i, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (me(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      be(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      de(e, l);
+    }
+  };
+}
+function yl(n, e, t) {
+  let l, { gradio: i } = e, { label: s = "Time" } = e, { show_label: _ = !0 } = e, { info: a = void 0 } = e, { elem_id: f = "" } = e, { elem_classes: o = [] } = e, { visible: d = !0 } = e, { value: g = "" } = e, w = g, { scale: C = null } = e, { min_width: q = void 0 } = e, { include_time: k = !0 } = e;
+  const m = (c) => {
+    if (c.toJSON() === null) return "";
+    const M = (lt) => lt.toString().padStart(2, "0"), ae = c.getFullYear(), oe = M(c.getMonth() + 1), xe = M(c.getDate()), $e = M(c.getHours()), et = M(c.getMinutes()), tt = M(c.getSeconds()), we = `${ae}-${oe}-${xe}`, nt = `${$e}:${et}:${tt}`;
+    return k ? `${we} ${nt}` : we;
+  };
+  let r = g, v, y = g;
+  const j = (c) => {
+    if (c === "") return !1;
+    const M = k ? /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}$/ : /^\d{4}-\d{2}-\d{2}$/, ae = c.match(M) !== null, oe = c.match(/^(?:\s*now\s*(?:-\s*\d+\s*[dmhs])?)?\s*$/) !== null;
+    return ae || oe;
+  }, S = () => {
+    r !== g && j(r) && (t(17, w = t(16, g = r)), i.dispatch("change"));
+  };
+  function u() {
+    r = this.value, t(10, r), t(16, g), t(17, w), t(0, i);
+  }
+  const b = (c) => {
+    c.key === "Enter" && (S(), i.dispatch("submit"));
+  };
+  function Re(c) {
+    Be[c ? "unshift" : "push"](() => {
+      v = c, t(11, v);
+    });
+  }
+  function Ue() {
+    y = this.value, t(12, y), t(16, g), t(17, w), t(0, i);
+  }
+  const Ve = () => {
+    const c = new Date(y);
+    t(10, r = m(c)), S();
+  };
+  function We(c) {
+    Be[c ? "unshift" : "push"](() => {
+      v = c, t(11, v);
+    });
+  }
+  function Xe() {
+    y = this.value, t(12, y), t(16, g), t(17, w), t(0, i);
+  }
+  const Ze = () => {
+    const c = new Date(y);
+    t(10, r = m(c)), S();
+  }, pe = () => {
+    v.showPicker();
+  };
+  return n.$$set = (c) => {
+    "gradio" in c && t(0, i = c.gradio), "label" in c && t(1, s = c.label), "show_label" in c && t(2, _ = c.show_label), "info" in c && t(3, a = c.info), "elem_id" in c && t(4, f = c.elem_id), "elem_classes" in c && t(5, o = c.elem_classes), "visible" in c && t(6, d = c.visible), "value" in c && t(16, g = c.value), "scale" in c && t(7, C = c.scale), "min_width" in c && t(8, q = c.min_width), "include_time" in c && t(9, k = c.include_time);
+  }, n.$$.update = () => {
+    n.$$.dirty & /*value, old_value, gradio*/
+    196609 && g !== w && (t(17, w = g), t(10, r = g), t(12, y = g), i.dispatch("change")), n.$$.dirty & /*entered_value*/
+    1024 && t(13, l = j(r));
+  }, [
+    i,
+    s,
+    _,
+    a,
+    f,
+    o,
+    d,
+    C,
+    q,
+    k,
+    r,
+    v,
+    y,
+    l,
+    m,
+    S,
+    g,
+    w,
+    u,
+    b,
+    Re,
+    Ue,
+    Ve,
+    We,
+    Xe,
+    Ze,
+    pe
+  ];
+}
+let Te = class extends rl {
+  constructor(e) {
+    super(), dl(this, e, yl, kl, cl, {
+      gradio: 0,
+      label: 1,
+      show_label: 2,
+      info: 3,
+      elem_id: 4,
+      elem_classes: 5,
+      visible: 6,
+      value: 16,
+      scale: 7,
+      min_width: 8,
+      include_time: 9
+    });
+  }
+};
+const {
+  SvelteComponent: ql,
+  detach: Cl,
+  init: Sl,
+  insert: jl,
+  noop: De,
+  safe_not_equal: Bl,
+  set_data: Il,
+  text: Tl
+} = window.__gradio__svelte__internal;
+function Dl(n) {
+  let e = (
+    /*value*/
+    (n[0] || "") + ""
+  ), t;
+  return {
+    c() {
+      t = Tl(e);
+    },
+    m(l, i) {
+      jl(l, t, i);
+    },
+    p(l, [i]) {
+      i & /*value*/
+      1 && e !== (e = /*value*/
+      (l[0] || "") + "") && Il(t, e);
+    },
+    i: De,
+    o: De,
+    d(l) {
+      l && Cl(t);
+    }
+  };
+}
+function El(n, e, t) {
+  let { value: l } = e;
+  return n.$$set = (i) => {
+    "value" in i && t(0, l = i.value);
+  }, [l];
+}
+class Kl extends ql {
+  constructor(e) {
+    super(), Sl(this, e, El, Dl, Bl, { value: 0 });
+  }
+}
+const {
+  SvelteComponent: Nl,
+  add_flush_callback: Ee,
+  append: A,
+  attr: R,
+  bind: Ne,
+  binding_callbacks: Me,
+  bubble: ze,
+  create_component: te,
+  destroy_component: ne,
+  destroy_each: Ml,
+  detach: O,
+  element: U,
+  ensure_array_like: Fe,
+  init: zl,
+  insert: P,
+  listen: Ke,
+  mount_component: le,
+  safe_not_equal: Fl,
+  set_data: Qe,
+  set_style: He,
+  space: ie,
+  text: he,
+  transition_in: fe,
+  transition_out: se
+} = window.__gradio__svelte__internal;
+function Je(n, e, t) {
+  const l = n.slice();
+  return l[20] = e[t], l;
+}
+function Hl(n) {
+  let e;
+  return {
+    c() {
+      e = he(
+        /*label*/
+        n[2]
+      );
+    },
+    m(t, l) {
+      P(t, e, l);
+    },
+    p(t, l) {
+      l & /*label*/
+      4 && Qe(
+        e,
+        /*label*/
+        t[2]
+      );
+    },
+    d(t) {
+      t && O(e);
+    }
+  };
+}
+function Le(n) {
+  let e, t, l, i, s, _ = Fe(
+    /*quick_ranges*/
+    n[11]
+  ), a = [];
+  for (let f = 0; f < _.length; f += 1)
+    a[f] = Oe(Je(n, _, f));
+  return {
+    c() {
+      e = U("div"), t = U("button"), t.textContent = "Back", l = ie();
+      for (let f = 0; f < a.length; f += 1)
+        a[f].c();
+      R(t, "class", "quick-range svelte-ra6nvt"), He(
+        t,
+        "display",
+        /*range_history*/
+        n[12].length <= 1 ? "none" : "block"
+      ), R(e, "class", "quick-ranges svelte-ra6nvt");
+    },
+    m(f, o) {
+      P(f, e, o), A(e, t), A(e, l);
+      for (let d = 0; d < a.length; d += 1)
+        a[d] && a[d].m(e, null);
+      i || (s = Ke(
+        t,
+        "click",
+        /*back_in_history*/
+        n[13]
+      ), i = !0);
+    },
+    p(f, o) {
+      if (o & /*range_history*/
+      4096 && He(
+        t,
+        "display",
+        /*range_history*/
+        f[12].length <= 1 ? "none" : "block"
+      ), o & /*value, quick_ranges*/
+      2049) {
+        _ = Fe(
+          /*quick_ranges*/
+          f[11]
+        );
+        let d;
+        for (d = 0; d < _.length; d += 1) {
+          const g = Je(f, _, d);
+          a[d] ? a[d].p(g, o) : (a[d] = Oe(g), a[d].c(), a[d].m(e, null));
+        }
+        for (; d < a.length; d += 1)
+          a[d].d(1);
+        a.length = _.length;
+      }
+    },
+    d(f) {
+      f && O(e), Ml(a, f), i = !1, s();
+    }
+  };
+}
+function Oe(n) {
+  let e, t, l = (
+    /*quick_range*/
+    n[20] + ""
+  ), i, s, _;
+  function a() {
+    return (
+      /*click_handler*/
+      n[15](
+        /*quick_range*/
+        n[20]
+      )
+    );
+  }
+  return {
+    c() {
+      e = U("button"), t = he("Last "), i = he(l), R(e, "class", "quick-range svelte-ra6nvt");
+    },
+    m(f, o) {
+      P(f, e, o), A(e, t), A(e, i), s || (_ = Ke(e, "click", a), s = !0);
+    },
+    p(f, o) {
+      n = f, o & /*quick_ranges*/
+      2048 && l !== (l = /*quick_range*/
+      n[20] + "") && Qe(i, l);
+    },
+    d(f) {
+      f && O(e), s = !1, _();
+    }
+  };
+}
+function Jl(n) {
+  let e, t, l, i, s, _, a, f, o, d, g;
+  t = new nn({
+    props: {
+      show_label: (
+        /*show_label*/
+        n[3]
+      ),
+      info: (
+        /*info*/
+        n[4]
+      ),
+      $$slots: { default: [Hl] },
+      $$scope: { ctx: n }
+    }
+  });
+  let w = (
+    /*show_label*/
+    n[3] && Le(n)
+  );
+  function C(r) {
+    n[16](r);
+  }
+  let q = {
+    show_label: !1,
+    include_time: (
+      /*include_time*/
+      n[10]
+    ),
+    gradio: (
+      /*gradio*/
+      n[1]
+    )
+  };
+  /*value*/
+  n[0][0] !== void 0 && (q.value = /*value*/
+  n[0][0]), _ = new Te({ props: q }), Me.push(() => Ne(_, "value", C)), _.$on(
+    "gradio",
+    /*gradio_handler*/
+    n[17]
+  );
+  function k(r) {
+    n[18](r);
+  }
+  let m = {
+    show_label: !1,
+    include_time: (
+      /*include_time*/
+      n[10]
+    ),
+    gradio: (
+      /*gradio*/
+      n[1]
+    )
+  };
+  return (
+    /*value*/
+    n[0][1] !== void 0 && (m.value = /*value*/
+    n[0][1]), o = new Te({ props: m }), Me.push(() => Ne(o, "value", k)), o.$on(
+      "gradio",
+      /*gradio_handler_1*/
+      n[19]
+    ), {
+      c() {
+        e = U("div"), te(t.$$.fragment), l = ie(), w && w.c(), i = ie(), s = U("div"), te(_.$$.fragment), f = ie(), te(o.$$.fragment), R(e, "class", "label-content svelte-ra6nvt"), R(s, "class", "times svelte-ra6nvt");
+      },
+      m(r, v) {
+        P(r, e, v), le(t, e, null), A(e, l), w && w.m(e, null), P(r, i, v), P(r, s, v), le(_, s, null), A(s, f), le(o, s, null), g = !0;
+      },
+      p(r, v) {
+        const y = {};
+        v & /*show_label*/
+        8 && (y.show_label = /*show_label*/
+        r[3]), v & /*info*/
+        16 && (y.info = /*info*/
+        r[4]), v & /*$$scope, label*/
+        8388612 && (y.$$scope = { dirty: v, ctx: r }), t.$set(y), /*show_label*/
+        r[3] ? w ? w.p(r, v) : (w = Le(r), w.c(), w.m(e, null)) : w && (w.d(1), w = null);
+        const j = {};
+        v & /*include_time*/
+        1024 && (j.include_time = /*include_time*/
+        r[10]), v & /*gradio*/
+        2 && (j.gradio = /*gradio*/
+        r[1]), !a && v & /*value*/
+        1 && (a = !0, j.value = /*value*/
+        r[0][0], Ee(() => a = !1)), _.$set(j);
+        const S = {};
+        v & /*include_time*/
+        1024 && (S.include_time = /*include_time*/
+        r[10]), v & /*gradio*/
+        2 && (S.gradio = /*gradio*/
+        r[1]), !d && v & /*value*/
+        1 && (d = !0, S.value = /*value*/
+        r[0][1], Ee(() => d = !1)), o.$set(S);
+      },
+      i(r) {
+        g || (fe(t.$$.fragment, r), fe(_.$$.fragment, r), fe(o.$$.fragment, r), g = !0);
+      },
+      o(r) {
+        se(t.$$.fragment, r), se(_.$$.fragment, r), se(o.$$.fragment, r), g = !1;
+      },
+      d(r) {
+        r && (O(e), O(i), O(s)), ne(t), w && w.d(), ne(_), ne(o);
+      }
+    }
+  );
+}
+function Ll(n) {
+  let e, t;
+  return e = new vt({
+    props: {
+      visible: (
+        /*visible*/
+        n[7]
+      ),
+      elem_id: (
+        /*elem_id*/
+        n[5]
+      ),
+      elem_classes: (
+        /*elem_classes*/
+        n[6]
+      ),
+      scale: (
+        /*scale*/
+        n[8]
+      ),
+      min_width: (
+        /*min_width*/
+        n[9]
+      ),
+      allow_overflow: !1,
+      padding: !0,
+      $$slots: { default: [Jl] },
+      $$scope: { ctx: n }
+    }
+  }), {
+    c() {
+      te(e.$$.fragment);
+    },
+    m(l, i) {
+      le(e, l, i), t = !0;
+    },
+    p(l, [i]) {
+      const s = {};
+      i & /*visible*/
+      128 && (s.visible = /*visible*/
+      l[7]), i & /*elem_id*/
+      32 && (s.elem_id = /*elem_id*/
+      l[5]), i & /*elem_classes*/
+      64 && (s.elem_classes = /*elem_classes*/
+      l[6]), i & /*scale*/
+      256 && (s.scale = /*scale*/
+      l[8]), i & /*min_width*/
+      512 && (s.min_width = /*min_width*/
+      l[9]), i & /*$$scope, include_time, gradio, value, quick_ranges, range_history, show_label, info, label*/
+      8395807 && (s.$$scope = { dirty: i, ctx: l }), e.$set(s);
+    },
+    i(l) {
+      t || (fe(e.$$.fragment, l), t = !0);
+    },
+    o(l) {
+      se(e.$$.fragment, l), t = !1;
+    },
+    d(l) {
+      ne(e, l);
+    }
+  };
+}
+function Ol(n, e, t) {
+  let { gradio: l } = e, { label: i = "Time" } = e, { show_label: s = !0 } = e, { info: _ = void 0 } = e, { elem_id: a = "" } = e, { elem_classes: f = [] } = e, { visible: o = !0 } = e, { value: d = ["", ""] } = e, g = d, { scale: w = null } = e, { min_width: C = void 0 } = e, { include_time: q = !0 } = e, { quick_ranges: k = [] } = e, m = [d];
+  const r = () => {
+    m.pop();
+    const b = m.pop();
+    b === void 0 ? (t(0, d = ["", ""]), t(12, m = [])) : (t(0, d = b), l.dispatch("change"), t(12, m = [...m]));
+  }, v = (b) => {
+    t(0, d = ["now - " + b, "now"]);
+  };
+  function y(b) {
+    n.$$.not_equal(d[0], b) && (d[0] = b, t(0, d));
+  }
+  function j(b) {
+    ze.call(this, n, b);
+  }
+  function S(b) {
+    n.$$.not_equal(d[1], b) && (d[1] = b, t(0, d));
+  }
+  function u(b) {
+    ze.call(this, n, b);
+  }
+  return n.$$set = (b) => {
+    "gradio" in b && t(1, l = b.gradio), "label" in b && t(2, i = b.label), "show_label" in b && t(3, s = b.show_label), "info" in b && t(4, _ = b.info), "elem_id" in b && t(5, a = b.elem_id), "elem_classes" in b && t(6, f = b.elem_classes), "visible" in b && t(7, o = b.visible), "value" in b && t(0, d = b.value), "scale" in b && t(8, w = b.scale), "min_width" in b && t(9, C = b.min_width), "include_time" in b && t(10, q = b.include_time), "quick_ranges" in b && t(11, k = b.quick_ranges);
+  }, n.$$.update = () => {
+    n.$$.dirty & /*value, old_value, range_history*/
+    20481 && (d[0] !== g[0] || d[1] !== g[1]) && (t(14, g = d), t(12, m = [...m, d]));
+  }, [
+    d,
+    l,
+    i,
+    s,
+    _,
+    a,
+    f,
+    o,
+    w,
+    C,
+    q,
+    k,
+    m,
+    r,
+    g,
+    v,
+    y,
+    j,
+    S,
+    u
+  ];
+}
+class Ql extends Nl {
+  constructor(e) {
+    super(), zl(this, e, Ol, Ll, Fl, {
+      gradio: 1,
+      label: 2,
+      show_label: 3,
+      info: 4,
+      elem_id: 5,
+      elem_classes: 6,
+      visible: 7,
+      value: 0,
+      scale: 8,
+      min_width: 9,
+      include_time: 10,
+      quick_ranges: 11
+    });
+  }
+}
+export {
+  Kl as BaseExample,
+  Ql as default
+};

src/backend/gradio_datetimerange/templates/component/style.css

@@ -0,0 +1 @@
+.dropdown-arrow.svelte-145leq6{fill:currentColor}.source-selection.svelte-1jp3vgd{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:95%;bottom:0;left:0;right:0;margin-left:auto;margin-right:auto}.icon.svelte-1jp3vgd{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-1jp3vgd{color:var(--color-accent)}.icon.svelte-1jp3vgd:hover,.icon.svelte-1jp3vgd:focus{color:var(--color-accent)}.block.svelte-nl1om8{position:relative;margin:0;box-shadow:var(--block-shadow);border-width:var(--block-border-width);border-color:var(--block-border-color);border-radius:var(--block-radius);background:var(--block-background-fill);width:100%;line-height:var(--line-sm)}.block.border_focus.svelte-nl1om8{border-color:var(--color-accent)}.block.border_contrast.svelte-nl1om8{border-color:var(--body-text-color)}.padded.svelte-nl1om8{padding:var(--block-padding)}.hidden.svelte-nl1om8{display:none}.hide-container.svelte-nl1om8{margin:0;box-shadow:none;--block-border-width:0;background:transparent;padding:0;overflow:visible}div.svelte-1hnfib2{margin-bottom:var(--spacing-lg);color:var(--block-info-text-color);font-weight:var(--block-info-text-weight);font-size:var(--block-info-text-size);line-height:var(--line-sm)}span.has-info.svelte-22c38v{margin-bottom:var(--spacing-xs)}span.svelte-22c38v:not(.has-info){margin-bottom:var(--spacing-lg)}span.svelte-22c38v{display:inline-block;position:relative;z-index:var(--layer-4);border:solid var(--block-title-border-width) var(--block-title-border-color);border-radius:var(--block-title-radius);background:var(--block-title-background-fill);padding:var(--block-title-padding);color:var(--block-title-text-color);font-weight:var(--block-title-text-weight);font-size:var(--block-title-text-size);line-height:var(--line-sm)}.hide.svelte-22c38v{margin:0;height:0}label.svelte-9gxdi0{display:inline-flex;align-items:center;z-index:var(--layer-2);box-shadow:var(--block-label-shadow);border:var(--block-label-border-width) solid var(--border-color-primary);border-top:none;border-left:none;border-radius:var(--block-label-radius);background:var(--block-label-background-fill);padding:var(--block-label-padding);pointer-events:none;color:var(--block-label-text-color);font-weight:var(--block-label-text-weight);font-size:var(--block-label-text-size);line-height:var(--line-sm)}.gr-group label.svelte-9gxdi0{border-top-left-radius:0}label.float.svelte-9gxdi0{position:absolute;top:var(--block-label-margin);left:var(--block-label-margin)}label.svelte-9gxdi0:not(.float){position:static;margin-top:var(--block-label-margin);margin-left:var(--block-label-margin)}.hide.svelte-9gxdi0{height:0}span.svelte-9gxdi0{opacity:.8;margin-right:var(--size-2);width:calc(var(--block-label-text-size) - 1px);height:calc(var(--block-label-text-size) - 1px)}.hide-label.svelte-9gxdi0{box-shadow:none;border-width:0;background:transparent;overflow:visible}button.svelte-1lrphxw{display:flex;justify-content:center;align-items:center;gap:1px;z-index:var(--layer-2);border-radius:var(--radius-sm);color:var(--block-label-text-color);border:1px solid transparent}button[disabled].svelte-1lrphxw{opacity:.5;box-shadow:none}button[disabled].svelte-1lrphxw:hover{cursor:not-allowed}.padded.svelte-1lrphxw{padding:2px;background:var(--bg-color);box-shadow:var(--shadow-drop);border:1px solid var(--button-secondary-border-color)}button.svelte-1lrphxw:hover,button.highlight.svelte-1lrphxw{cursor:pointer;color:var(--color-accent)}.padded.svelte-1lrphxw:hover{border:2px solid var(--button-secondary-border-color-hover);padding:1px;color:var(--block-label-text-color)}span.svelte-1lrphxw{padding:0 1px;font-size:10px}div.svelte-1lrphxw{padding:2px;display:flex;align-items:flex-end}.small.svelte-1lrphxw{width:14px;height:14px}.medium.svelte-1lrphxw{width:20px;height:20px}.large.svelte-1lrphxw{width:22px;height:22px}.pending.svelte-1lrphxw{animation:svelte-1lrphxw-flash .5s infinite}@keyframes svelte-1lrphxw-flash{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}.transparent.svelte-1lrphxw{background:transparent;border:none;box-shadow:none}.empty.svelte-3w3rth{display:flex;justify-content:center;align-items:center;margin-top:calc(0px - var(--size-6));height:var(--size-full)}.icon.svelte-3w3rth{opacity:.5;height:var(--size-5);color:var(--body-text-color)}.small.svelte-3w3rth{min-height:calc(var(--size-32) - 20px)}.large.svelte-3w3rth{min-height:calc(var(--size-64) - 20px)}.unpadded_box.svelte-3w3rth{margin-top:0}.small_parent.svelte-3w3rth{min-height:100%!important}.wrap.svelte-kzcjhc{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:var(--size-60);color:var(--block-label-text-color);line-height:var(--line-md);height:100%;padding-top:var(--size-3)}.or.svelte-kzcjhc{color:var(--body-text-color-subdued);display:flex}.icon-wrap.svelte-kzcjhc{width:30px;margin-bottom:var(--spacing-lg)}@media (--screen-md){.wrap.svelte-kzcjhc{font-size:var(--text-lg)}}.hovered.svelte-kzcjhc{color:var(--color-accent)}div.svelte-q32hvf{border-top:1px solid transparent;display:flex;max-height:100%;justify-content:center;align-items:center;gap:var(--spacing-sm);height:auto;align-items:flex-end;color:var(--block-label-text-color);flex-shrink:0}.show_border.svelte-q32hvf{border-top:1px solid var(--block-border-color);margin-top:var(--spacing-xxl);box-shadow:var(--shadow-drop)}.source-selection.svelte-15ls1gu{display:flex;align-items:center;justify-content:center;border-top:1px solid var(--border-color-primary);width:100%;margin-left:auto;margin-right:auto;height:var(--size-10)}.icon.svelte-15ls1gu{width:22px;height:22px;margin:var(--spacing-lg) var(--spacing-xs);padding:var(--spacing-xs);color:var(--neutral-400);border-radius:var(--radius-md)}.selected.svelte-15ls1gu{color:var(--color-accent)}.icon.svelte-15ls1gu:hover,.icon.svelte-15ls1gu:focus{color:var(--color-accent)}.label-content.svelte-1rjvq1p{display:flex;justify-content:space-between;align-items:flex-start}button.svelte-1rjvq1p{cursor:pointer;color:var(--body-text-color-subdued)}button.svelte-1rjvq1p:hover{color:var(--body-text-color)}.svelte-1rjvq1p::placeholder{color:var(--input-placeholder-color)}.timebox.svelte-1rjvq1p{flex-grow:1;flex-shrink:1;display:flex;position:relative;background:var(--input-background-fill)}.timebox.svelte-1rjvq1p svg{height:18px}.time.svelte-1rjvq1p{padding:var(--input-padding);color:var(--body-text-color);font-weight:var(--input-text-weight);font-size:var(--input-text-size);line-height:var(--line-sm);outline:none;flex-grow:1;background:none;border:var(--input-border-width) solid var(--input-border-color);border-right:none;border-top-left-radius:var(--input-radius);border-bottom-left-radius:var(--input-radius);box-shadow:var(--input-shadow)}.time.invalid.svelte-1rjvq1p{color:var(--body-text-color-subdued)}.calendar.svelte-1rjvq1p{display:inline-flex;justify-content:center;align-items:center;transition:var(--button-transition);box-shadow:var(--button-shadow);text-align:center;background:var(--button-secondary-background-fill);color:var(--button-secondary-text-color);font-weight:var(--button-large-text-weight);font-size:var(--button-large-text-size);border-top-right-radius:var(--input-radius);border-bottom-right-radius:var(--input-radius);padding:var(--size-2);border:var(--input-border-width) solid var(--input-border-color)}.calendar.svelte-1rjvq1p:hover{background:var(--button-secondary-background-fill-hover)}.calendar.svelte-1rjvq1p:active{box-shadow:var(--button-shadow-active)}.datetime.svelte-1rjvq1p{width:0px;padding:0;border:0;margin:0;background:none}.times.svelte-ra6nvt{display:flex;gap:10px}.times.svelte-ra6nvt>.block{margin:0;padding:0}.label-content.svelte-ra6nvt{display:flex;justify-content:space-between;align-items:flex-start}.quick-ranges.svelte-ra6nvt{display:inline-flex;gap:var(--size-3)}button.svelte-ra6nvt{color:var(--body-text-color-subdued);cursor:pointer}button.svelte-ra6nvt:hover{color:var(--body-text-color)}

src/backend/gradio_datetimerange/templates/example/index.js

@@ -0,0 +1,48 @@
+const {
+  SvelteComponent: o,
+  detach: s,
+  init: u,
+  insert: r,
+  noop: l,
+  safe_not_equal: _,
+  set_data: c,
+  text: f
+} = window.__gradio__svelte__internal;
+function d(i) {
+  let e = (
+    /*value*/
+    (i[0] || "") + ""
+  ), n;
+  return {
+    c() {
+      n = f(e);
+    },
+    m(t, a) {
+      r(t, n, a);
+    },
+    p(t, [a]) {
+      a & /*value*/
+      1 && e !== (e = /*value*/
+      (t[0] || "") + "") && c(n, e);
+    },
+    i: l,
+    o: l,
+    d(t) {
+      t && s(n);
+    }
+  };
+}
+function v(i, e, n) {
+  let { value: t } = e;
+  return i.$$set = (a) => {
+    "value" in a && n(0, t = a.value);
+  }, [t];
+}
+class m extends o {
+  constructor(e) {
+    super(), u(this, e, v, d, _, { value: 0 });
+  }
+}
+export {
+  m as default
+};

src/demo/app.py

@@ -0,0 +1,48 @@
+
+import gradio as gr
+from gradio_datetimerange import DateTimeRange
+import pandas as pd
+from random import randint
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+with gr.Blocks() as demo:
+    date = DateTimeRange(["2021-01-01 00:00:00", "2021-01-07 00:00:00"])
+    merged_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    split_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+    with gr.Row():
+        humidity_bar_plot = gr.BarPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+            x_bin="1h",
+        )
+        humidity_scatter_plot = gr.ScatterPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+        )
+    
+    date.bind([merged_temp_plot, split_temp_plot, humidity_bar_plot, humidity_scatter_plot])
+
+
+if __name__ == "__main__":
+    demo.launch()

src/demo/css.css

@@ -0,0 +1,157 @@
+html {
+	font-family: Inter;
+	font-size: 16px;
+	font-weight: 400;
+	line-height: 1.5;
+	-webkit-text-size-adjust: 100%;
+	background: #fff;
+	color: #323232;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
+	text-rendering: optimizeLegibility;
+}
+
+:root {
+	--space: 1;
+	--vspace: calc(var(--space) * 1rem);
+	--vspace-0: calc(3 * var(--space) * 1rem);
+	--vspace-1: calc(2 * var(--space) * 1rem);
+	--vspace-2: calc(1.5 * var(--space) * 1rem);
+	--vspace-3: calc(0.5 * var(--space) * 1rem);
+}
+
+.app {
+	max-width: 748px !important;
+}
+
+.prose p {
+	margin: var(--vspace) 0;
+	line-height: var(--vspace * 2);
+	font-size: 1rem;
+}
+
+code {
+	font-family: "Inconsolata", sans-serif;
+	font-size: 16px;
+}
+
+h1,
+h1 code {
+	font-weight: 400;
+	line-height: calc(2.5 / var(--space) * var(--vspace));
+}
+
+h1 code {
+	background: none;
+	border: none;
+	letter-spacing: 0.05em;
+	padding-bottom: 5px;
+	position: relative;
+	padding: 0;
+}
+
+h2 {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h3,
+h3 code {
+	margin: var(--vspace-1) 0 var(--vspace-2) 0;
+	line-height: 1em;
+}
+
+h4,
+h5,
+h6 {
+	margin: var(--vspace-3) 0 var(--vspace-3) 0;
+	line-height: var(--vspace);
+}
+
+.bigtitle,
+h1,
+h1 code {
+	font-size: calc(8px * 4.5);
+	word-break: break-word;
+}
+
+.title,
+h2,
+h2 code {
+	font-size: calc(8px * 3.375);
+	font-weight: lighter;
+	word-break: break-word;
+	border: none;
+	background: none;
+}
+
+.subheading1,
+h3,
+h3 code {
+	font-size: calc(8px * 1.8);
+	font-weight: 600;
+	border: none;
+	background: none;
+	letter-spacing: 0.1em;
+	text-transform: uppercase;
+}
+
+h2 code {
+	padding: 0;
+	position: relative;
+	letter-spacing: 0.05em;
+}
+
+blockquote {
+	font-size: calc(8px * 1.1667);
+	font-style: italic;
+	line-height: calc(1.1667 * var(--vspace));
+	margin: var(--vspace-2) var(--vspace-2);
+}
+
+.subheading2,
+h4 {
+	font-size: calc(8px * 1.4292);
+	text-transform: uppercase;
+	font-weight: 600;
+}
+
+.subheading3,
+h5 {
+	font-size: calc(8px * 1.2917);
+	line-height: calc(1.2917 * var(--vspace));
+
+	font-weight: lighter;
+	text-transform: uppercase;
+	letter-spacing: 0.15em;
+}
+
+h6 {
+	font-size: calc(8px * 1.1667);
+	font-size: 1.1667em;
+	font-weight: normal;
+	font-style: italic;
+	font-family: "le-monde-livre-classic-byol", serif !important;
+	letter-spacing: 0px !important;
+}
+
+#start .md > *:first-child {
+	margin-top: 0;
+}
+
+h2 + h3 {
+	margin-top: 0;
+}
+
+.md hr {
+	border: none;
+	border-top: 1px solid var(--block-border-color);
+	margin: var(--vspace-2) 0 var(--vspace-2) 0;
+}
+.prose ul {
+	margin: var(--vspace-2) 0 var(--vspace-1) 0;
+}
+
+.gap {
+	gap: 0;
+}

src/demo/requirements.txt

@@ -0,0 +1 @@
+gradio_datetimerange

src/demo/space.py

@@ -0,0 +1,170 @@
+
+import gradio as gr
+from app import demo as app
+import os
+
+_docs = {'DateTimeRange': {'description': 'Component to select range of time.', 'members': {'__init__': {'value': {'type': 'tuple[float | str | datetime, float | str | datetime] | None', 'default': 'None', 'description': 'default value for datetime.'}, 'include_time': {'type': 'bool', 'default': 'True', 'description': 'If True, the component will include time selection. If False, only date selection will be available.'}, 'type': {'type': 'Literal["timestamp", "datetime", "string"]', 'default': '"timestamp"', 'description': 'The type of the value. Can be "timestamp", "datetime", or "string". If "timestamp", the value will be a number representing the start and end date in seconds since epoch. If "datetime", the value will be a datetime object. If "string", the value will be the date entered by the user.'}, 'timezone': {'type': 'str | None', 'default': 'None', 'description': 'The timezone to use for timestamps, such as "US/Pacific" or "Europe/Paris". If None, the timezone will be the local timezone.'}, 'quick_ranges': {'type': 'list[str] | None', 'default': 'None', 'description': 'List of strings representing quick ranges to display, such as ["30s", "1h", "24h", "7d"]. Set to [] to clear.'}, 'label': {'type': 'str | None', 'default': 'None', 'description': 'The label for this component. Appears above the component and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component is assigned to.'}, 'show_label': {'type': 'bool | None', 'default': 'None', 'description': 'if True, will display label.'}, 'info': {'type': 'str | None', 'default': 'None', 'description': 'additional component description.'}, 'every': {'type': 'float | None', 'default': 'None', 'description': "If `value` is a callable, run the function 'every' number of seconds while the client connection is open. Has no effect otherwise. The event can be accessed (e.g. to cancel it) via this component's .load_event attribute."}, 'scale': {'type': 'int | None', 'default': 'None', 'description': 'relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.'}, 'min_width': {'type': 'int', 'default': '160', 'description': '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.'}, 'visible': {'type': 'bool', 'default': 'True', 'description': 'If False, component will be hidden.'}, 'elem_id': {'type': 'str | None', 'default': 'None', 'description': None}, 'elem_classes': {'type': 'list[str] | str | None', 'default': 'None', 'description': '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.'}, 'render': {'type': 'bool', 'default': 'True', 'description': 'If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.'}, 'key': {'type': 'int | str | None', 'default': 'None', 'description': 'if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.'}}, 'postprocess': {'value': {'type': 'tuple[float | datetime | str, float | datetime | str] | None', 'description': 'Expects a tuple pair of datetimes.'}}, 'preprocess': {'return': {'type': 'tuple[str | float | datetime, str | float | datetime] | None', 'description': 'Passes text value as a {str} into the function.'}, 'value': None}}, 'events': {'change': {'type': None, 'default': None, 'description': 'Triggered when the value of the DateTimeRange 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.'}}}, '__meta__': {'additional_interfaces': {}, 'user_fn_refs': {'DateTimeRange': []}}}
+
+abs_path = os.path.join(os.path.dirname(__file__), "css.css")
+
+with gr.Blocks(
+    css=abs_path,
+    theme=gr.themes.Default(
+        font_mono=[
+            gr.themes.GoogleFont("Inconsolata"),
+            "monospace",
+        ],
+    ),
+) as demo:
+    gr.Markdown(
+"""
+# `gradio_datetimerange`
+
+<div style="display: flex; gap: 7px;">
+<a href="https://pypi.org/project/gradio_datetimerange/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_datetimerange"></a>  
+</div>
+
+Component to create time ranges.
+""", elem_classes=["md-custom"], header_links=True)
+    app.render()
+    gr.Markdown(
+"""
+## Installation
+
+```bash
+pip install gradio_datetimerange
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_datetimerange import DateTimeRange
+import pandas as pd
+from random import randint
+
+temp_sensor_data = pd.DataFrame(
+    {
+        "time": pd.date_range("2021-01-01", end="2021-01-05", periods=200),
+        "temperature": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "humidity": [randint(50 + 10 * (i % 2), 65 + 15 * (i % 2)) for i in range(200)],
+        "location": ["indoor", "outdoor"] * 100,
+    }
+)
+
+with gr.Blocks() as demo:
+    date = DateTimeRange(["2021-01-01 00:00:00", "2021-01-07 00:00:00"])
+    merged_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+    )
+    split_temp_plot = gr.LinePlot(
+        temp_sensor_data,
+        x="time",
+        y="temperature",
+        color="location",
+    )
+    with gr.Row():
+        humidity_bar_plot = gr.BarPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+            x_bin="1h",
+        )
+        humidity_scatter_plot = gr.ScatterPlot(
+            temp_sensor_data,
+            x="time",
+            y="humidity",
+            color="location",
+        )
+    
+    date.bind([merged_temp_plot, split_temp_plot, humidity_bar_plot, humidity_scatter_plot])
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+""", elem_classes=["md-custom"], header_links=True)
+
+
+    gr.Markdown("""
+## `DateTimeRange`
+
+### Initialization
+""", elem_classes=["md-custom"], header_links=True)
+
+    gr.ParamViewer(value=_docs["DateTimeRange"]["members"]["__init__"], linkify=[])
+
+
+    gr.Markdown("### Events")
+    gr.ParamViewer(value=_docs["DateTimeRange"]["events"], linkify=['Event'])
+
+
+
+
+    gr.Markdown("""
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As input:** Is passed, passes text value as a {str} into the function.
+- **As output:** Should return, expects a tuple pair of datetimes.
+
+ ```python
+def predict(
+    value: tuple[str | float | datetime, str | float | datetime] | None
+) -> tuple[float | datetime | str, float | datetime | str] | None:
+    return value
+```
+""", elem_classes=["md-custom", "DateTimeRange-user-fn"], header_links=True)
+
+
+
+
+    demo.load(None, js=r"""function() {
+    const refs = {};
+    const user_fn_refs = {
+          DateTimeRange: [], };
+    requestAnimationFrame(() => {
+
+        Object.entries(user_fn_refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}-user-fn`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+
+        Object.entries(refs).forEach(([key, refs]) => {
+            if (refs.length > 0) {
+                const el = document.querySelector(`.${key}`);
+                if (!el) return;
+                refs.forEach(ref => {
+                    el.innerHTML = el.innerHTML.replace(
+                        new RegExp("\\b"+ref+"\\b", "g"),
+                        `<a href="#h-${ref.toLowerCase()}">${ref}</a>`
+                    );
+                })
+            }
+        })
+    })
+}
+
+""")
+
+demo.launch()

src/frontend/Example.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	export let value: string | null;
+</script>
+
+{value || ""}

src/frontend/Index.svelte

@@ -0,0 +1,106 @@
+<script context="module" lang="ts">
+	export { default as BaseExample } from "./Example.svelte";
+</script>
+
+<script lang="ts">
+	import type { Gradio } from "@gradio/utils";
+	import { Block, BlockTitle } from "@gradio/atoms";
+	import DateTime from "@gradio/datetime";
+
+	export let gradio: Gradio<{
+		change: undefined;
+	}>;
+	export let label = "Time";
+	export let show_label = true;
+	export let info: string | undefined = undefined;
+	export let elem_id = "";
+	export let elem_classes: string[] = [];
+	export let visible = true;
+	export let value: [string, string] = ["", ""];
+	let old_value = value;
+	export let scale: number | null = null;
+	export let min_width: number | undefined = undefined;
+	export let include_time = true;
+	export let quick_ranges: string[] = [];
+	let range_history: [string, string][] = [value];
+
+	$: if (value[0] !== old_value[0] || value[1] !== old_value[1]) {
+		old_value = value;
+		range_history = [...range_history, value];
+	}
+
+	const back_in_history = (): void => {
+		range_history.pop();
+		const last_range = range_history.pop();
+		if (last_range === undefined) {
+			value = ["", ""];
+			range_history = [];
+		} else {
+			value = last_range;
+			gradio.dispatch("change");
+			range_history = [...range_history];
+		}
+	};
+</script>
+
+<Block
+	{visible}
+	{elem_id}
+	{elem_classes}
+	{scale}
+	{min_width}
+	allow_overflow={false}
+	padding={true}
+>
+	<div class="label-content">
+		<BlockTitle {show_label} {info}>{label}</BlockTitle>
+		{#if show_label}
+			<div class="quick-ranges">
+				<button
+					class="quick-range"
+					style:display={range_history.length <= 1 ? "none" : "block"}
+					on:click={back_in_history}>Back</button
+				>
+
+				{#each quick_ranges as quick_range}
+					<button
+						class="quick-range"
+						on:click={() => {
+							value = ["now - " + quick_range, "now"];
+						}}>Last {quick_range}</button
+					>
+				{/each}
+			</div>
+		{/if}	</div>
+	<div class="times">
+		<DateTime show_label={false} bind:value={value[0]} {include_time} {gradio} on:gradio></DateTime>
+		<DateTime show_label={false} bind:value={value[1]} {include_time} {gradio} on:gradio></DateTime>
+	</div>
+</Block>
+
+<style>
+	.times {
+		display: flex;
+		gap: 10px;
+	}
+	.times > :global(.block) {
+		margin: 0;
+		padding: 0;
+	}
+	.label-content {
+		display: flex;
+		justify-content: space-between;
+		align-items: flex-start;
+	}
+	.quick-ranges {
+		display: inline-flex;
+		gap: var(--size-3);
+	}
+	button {
+		color: var(--body-text-color-subdued);
+		cursor: pointer;
+	}
+	button:hover {
+		color: var(--body-text-color);
+	}
+</style>

src/frontend/gradio.config.js

@@ -0,0 +1,9 @@
+export default {
+  plugins: [],
+  svelte: {
+    preprocess: [],
+  },
+  build: {
+    target: "modules",
+  },
+};

src/frontend/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "gradio_datetimerange",
+  "version": "0.0.2",
+  "description": "Gradio UI packages",
+  "type": "module",
+  "author": "",
+  "license": "ISC",
+  "private": false,
+  "main_changeset": true,
+  "main": "Index.svelte",
+  "exports": {
+    ".": "./Index.svelte",
+    "./example": "./Example.svelte",
+    "./package.json": "./package.json"
+  },
+  "dependencies": {
+    "@gradio/atoms": "0.7.6",
+    "@gradio/icons": "0.6.0",
+    "@gradio/statustracker": "0.7.1",
+    "@gradio/datetime": "0.1.0",
+    "@gradio/utils": "0.5.1"
+  },
+  "devDependencies": {
+    "@gradio/preview": "0.10.1"
+  }
+}

src/package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "datetimerange",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}

src/pyproject.toml

@@ -0,0 +1,51 @@
+[build-system]
+requires = [
+  "hatchling",
+  "hatch-requirements-txt",
+  "hatch-fancy-pypi-readme>=22.5.0",
+]
+build-backend = "hatchling.build"
+
+[project]
+name = "gradio_datetimerange"
+version = "0.0.1"
+description = "Component to create time ranges."
+readme = "README.md"
+license = "apache-2.0"
+requires-python = ">=3.8"
+authors = [{ name = "YOUR NAME", email = "[email protected]" }]
+keywords = ["gradio-custom-component", "gradio-template-DateTime"]
+# Add dependencies here
+dependencies = ["gradio>=4.0,<5.0"]
+classifiers = [
+  'Development Status :: 3 - Alpha',
+  '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',
+]
+
+# The repository and space URLs are optional, but recommended.
+# Adding a repository URL will create a badge in the auto-generated README that links to the repository.
+# Adding a space URL will create a badge in the auto-generated README that links to the space.
+# This will make it easy for people to find your deployed demo or source code when they
+# encounter your project in the wild.
+
+# [project.urls]
+# repository = "your github repository"
+# space = "your space url"
+
+[project.optional-dependencies]
+dev = ["build", "twine"]
+
+[tool.hatch.build]
+artifacts = ["/backend/gradio_datetimerange/templates", "*.pyi"]
+
+[tool.hatch.build.targets.wheel]
+packages = ["/backend/gradio_datetimerange"]